/* ============================================================
   MV Design System v3 — BASE
   ------------------------------------------------------------
   Carga la fuente y define la tipografia base.

   REGLA CRITICA DE CONVIVENCIA
   Este archivo se carga en paginas donde YA viven Bootstrap 4.4.1
   y el tema Material. Por eso NO hay reset global ni selectores
   sobre html/body/*: todo lo tipografico esta encerrado dentro
   de `.mv3`. Un modulo opta por el diseño v3 poniendo la clase
   `mv3` en su contenedor raiz; los modulos que no la ponen no se
   ven afectados en absoluto.

   Depende de: tokens.css (cargar antes)
   ============================================================ */

/* ── Fuente Inter (vendorizada, sin CDN) ─────────────────────
   Variable font: un solo archivo cubre 400..900, que son los
   pesos que usa el diseño. Se sirve desde el repo para no
   depender de fonts.gstatic.com en produccion.
   Subsets: latin (incluye U+0000-00FF -> ñ a e i o u) y
   latin-ext. El navegador descarga solo el que necesite. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/inter-var-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                   U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                   U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/inter-var-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
                   U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Raiz del ambito v3 ──────────────────────────────────────
   Poner class="mv3" en el contenedor del modulo. */
.mv3 {
    font-family: var(--mv3-font-sans);
    font-size: var(--mv3-fs-base);
    font-weight: var(--mv3-fw-medium);
    line-height: var(--mv3-leading-normal);
    color: var(--mv3-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums; /* columnas de numeros alineadas */
}

/* box-sizing solo dentro del ambito, para no alterar el resto */
.mv3, .mv3 *, .mv3 *::before, .mv3 *::after {
    box-sizing: border-box;
}

/* Alpine.js: evita el flash de contenido sin inicializar.
   Global a proposito — x-cloak debe funcionar aunque el nodo
   quede fuera de .mv3. */
[x-cloak] { display: none !important; }

/* ── Defaults de elemento ────────────────────────────────────
   IMPORTANTE: van envueltos en :where(), que aporta especificidad
   CERO. Es deliberado y necesario.

   Con selectores normales, `.mv3 h2` (0,1,1) le gana a cualquier
   clase de componente como `.mv3-pageheader-title` (0,1,0). Eso
   provocaba que los titulos heredaran peso 900, tracking negativo,
   color #0f172a y tamaño 1.25rem, ignorando lo que pedia su propia
   clase — se veian mas gruesos, mas grandes y de otro color. Lo
   mismo pasaba con `.mv3 a` pisando el color de `.mv3-btn-secondary`,
   que hacia salir el boton "Volver" en azul en vez de gris.

   Con :where() estos valores son solo un punto de partida para
   elementos SIN clase; cualquier clase los sobrescribe sin pelear.

   Soporte: :where() existe desde Chrome 88 / Firefox 78 / Safari 14
   (2020-21). Es el mismo piso que ya asume este CSS al usar
   custom properties y accent-color. En un navegador que no lo
   soporte la regla se descarta y los encabezados caen a los
   defaults del navegador — degradado, no roto. */
:where(.mv3) :where(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 var(--mv3-space-2);
    font-weight: var(--mv3-fw-black);
    line-height: var(--mv3-leading-tight);
    letter-spacing: var(--mv3-tracking-tight);
    color: var(--mv3-text-strong);
}

:where(.mv3) :where(h1) { font-size: var(--mv3-fs-2xl); }
:where(.mv3) :where(h2) { font-size: var(--mv3-fs-xl); }
:where(.mv3) :where(h3) { font-size: var(--mv3-fs-lg); }
:where(.mv3) :where(h4) { font-size: var(--mv3-fs-md); }
:where(.mv3) :where(h5, h6) { font-size: var(--mv3-fs-base); }

:where(.mv3) :where(p) { margin: 0 0 var(--mv3-space-3); }

:where(.mv3) :where(a) {
    color: var(--mv3-primary);
    text-decoration: none;
    transition: color var(--mv3-transition-fast);
}
:where(.mv3) :where(a:hover) { color: var(--mv3-primary-hover); text-decoration: none; }

/* ── Utilidades tipograficas ─────────────────────────────────
   Las tres que se repiten en todo el modulo de referencia. */

/* Titulo display: el de "IA LISTA PARA OPERAR" */
.mv3-display {
    font-size: var(--mv3-fs-xl);
    font-weight: var(--mv3-fw-black);
    line-height: var(--mv3-leading-tight);
    letter-spacing: var(--mv3-tracking-tight);
    text-transform: uppercase;
    font-style: italic;
    color: var(--mv3-text-strong);
    margin: 0 0 var(--mv3-space-2);
}

/* Titulo de seccion / panel: mayusculas, tracking abierto.
   Equivale a `.rto-panel-title` del modulo de referencia (el
   "PARAMETROS" junto al icono). Cuidado: ese selector esta definido
   DOS veces en rto_optimizer.css (lineas 103 y 1448) con valores
   distintos; gana el segundo por `!important`, y son esos valores los
   que se replican aqui: 0.85rem / 700 / #1e293b / tracking 0.05em.
   No lleva italica ni peso 900 — eso es `.mv3-display`, otra cosa. */
.mv3-eyebrow,
.mv3-panel-title {
    margin: 0;
    font-size: var(--mv3-fs-md);
    font-weight: var(--mv3-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--mv3-tracking-wide);
    color: var(--mv3-text);
}

/* Etiqueta menor sobre un campo o dato */
.mv3-label {
    display: block;
    font-size: var(--mv3-fs-2xs);
    font-weight: var(--mv3-fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--mv3-tracking-wide);
    color: var(--mv3-text-label);
    margin-bottom: var(--mv3-space-1);
}

/* Texto secundario / descripciones */
.mv3-muted {
    color: var(--mv3-text-subtle);
    font-weight: var(--mv3-fw-medium);
    font-size: var(--mv3-fs-md);
    line-height: var(--mv3-leading-loose);
}

.mv3-text-danger  { color: var(--mv3-danger); }
.mv3-text-success { color: var(--mv3-success); }
.mv3-text-warning { color: var(--mv3-warning); }

/* ── Scrollbars finas ────────────────────────────────────────
   Se repetia a mano en cada panel del modulo original. */
.mv3-scroll { overflow-y: auto; }
.mv3-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.mv3-scroll::-webkit-scrollbar-track { background: var(--mv3-slate-100); }
.mv3-scroll::-webkit-scrollbar-thumb {
    background: var(--mv3-slate-300);
    border-radius: var(--mv3-radius-pill);
}
.mv3-scroll::-webkit-scrollbar-thumb:hover { background: var(--mv3-slate-400); }

/* ── Spinner ─────────────────────────────────────────────────
   Para iconos lucide usados como indicador de carga (p.ej.
   loader-circle al enviar un formulario). Global a proposito:
   el icono puede inyectarse en un boton fuera de .mv3. */
.mv3-spin { animation: mv3-spin 0.9s linear infinite; }

@keyframes mv3-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ── Accesibilidad ───────────────────────────────────────────
   Respeta a quien pidio menos animacion en su SO. */
@media (prefers-reduced-motion: reduce) {
    .mv3 *, .mv3 *::before, .mv3 *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Oculto visualmente pero legible por lector de pantalla */
.mv3-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}