/* ============================================================================
   miComunidad Escolar — Base
   Reset mínimo + tipografía base. Aplicado por MainLayout vía wrapper .v2-scope.
   ============================================================================ */

.v2-scope,
.v2-scope * {
    box-sizing: border-box;
}

.v2-scope {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* Reset suave de elementos comunes dentro del scope v2 */
.v2-scope h1,
.v2-scope h2,
.v2-scope h3,
.v2-scope h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
}

.v2-scope h1 { font-size: 28px; letter-spacing: -0.01em; }
.v2-scope h2 { font-size: 22px; }
.v2-scope h3 { font-size: 18px; }
.v2-scope h4 { font-size: 15px; }

.v2-scope p {
    margin: 0;
    color: var(--text-secondary);
}

.v2-scope a {
    color: var(--brand-teal-deep);
    text-decoration: none;
    transition: color 0.15s ease;
}

.v2-scope a:hover { color: var(--brand-teal-dark); }

.v2-scope button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
}

.v2-scope code,
.v2-scope pre {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

/* Material Symbols Rounded (icon font) — usado dentro del scope v2 */
.v2-scope .msr {
    font-family: var(--font-icon);
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    user-select: none;
}

.v2-scope .msr.fill { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.v2-scope .msr.bold { font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24; }

/* Wordmark del producto (Fraunces serif italic) */
.v2-scope .wordmark {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 600;
    color: var(--brand-teal);
    letter-spacing: -0.01em;
}

/* Scrollbars discretos en el scope v2 */
.v2-scope ::-webkit-scrollbar              { width: 10px; height: 10px; }
.v2-scope ::-webkit-scrollbar-track        { background: transparent; }
.v2-scope ::-webkit-scrollbar-thumb        { background: rgba(26, 28, 31, 0.18); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
.v2-scope ::-webkit-scrollbar-thumb:hover  { background: rgba(26, 28, 31, 0.32); border: 2px solid transparent; background-clip: content-box; }

/* ============================================================================
   Skeleton primitives — placeholders animados para estados de carga.
   Uso: <div class="skeleton sk-w-60 sk-h-14"></div>
   Combinable: añadir clases utilitarias sk-w-* y sk-h-* o ancho/alto inline.
   ============================================================================ */
.v2-scope .skeleton {
    background: linear-gradient(90deg,
        rgba(26, 28, 31, 0.06) 0%,
        rgba(26, 28, 31, 0.12) 50%,
        rgba(26, 28, 31, 0.06) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}

.v2-scope .skeleton-circle {
    border-radius: 50%;
}

.v2-scope .skeleton-pill {
    border-radius: 99px;
}

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Anchos comunes en %, alturas en px */
.v2-scope .sk-w-25 { width: 25%; }
.v2-scope .sk-w-40 { width: 40%; }
.v2-scope .sk-w-50 { width: 50%; }
.v2-scope .sk-w-60 { width: 60%; }
.v2-scope .sk-w-75 { width: 75%; }
.v2-scope .sk-w-90 { width: 90%; }
.v2-scope .sk-w-100 { width: 100%; }

.v2-scope .sk-h-10 { height: 10px; }
.v2-scope .sk-h-12 { height: 12px; }
.v2-scope .sk-h-16 { height: 16px; }
.v2-scope .sk-h-20 { height: 20px; }
.v2-scope .sk-h-24 { height: 24px; }
.v2-scope .sk-h-32 { height: 32px; }
.v2-scope .sk-h-40 { height: 40px; }
.v2-scope .sk-h-48 { height: 48px; }
.v2-scope .sk-h-64 { height: 64px; }
.v2-scope .sk-h-80 { height: 80px; }

/* Avatar skeleton estándar */
.v2-scope .sk-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
}

/* ============================================================================
   A11y · Focus visible — anillo teal consistente sobre cualquier elemento
   interactivo enfocado por teclado. Se preserva el comportamiento normal del
   mouse (no se muestra anillo en click) gracias a :focus-visible.
   ============================================================================ */
.v2-scope :focus-visible {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Excepciones: elementos con su propio estado de focus elaborado (textareas,
   inputs principales) usan border + box-shadow ya definidos en su scope. */
.v2-scope input:focus-visible,
.v2-scope textarea:focus-visible,
.v2-scope select:focus-visible {
    outline: none;
}

/* Reduce-motion: respetar preferencia del sistema desactivando shimmer
   y otras animaciones decorativas. */
@media (prefers-reduced-motion: reduce) {
    .v2-scope .skeleton {
        animation: none;
        background: rgba(26, 28, 31, 0.08);
    }
    .v2-scope * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}