/* =====================================================================
   BRÚJULA · Tema «familia QBK»
   public/assets/css/tema-brujula.css  ·  2026-10-22

   Solo los VALORES de BRÚJULA para las variables --fq-* (el oro de la
   familia, azul noche) y sus dos familias de letra. Todo lo que usa estas
   variables vive en familia-qbk.css, que es idéntico al de Forja; por eso
   aquí no hay reglas de componentes, solo variables, MÁS la capa del fondo
   «Topografía» (.fq-fondo, al final), que es propia de BRÚJULA.

   Cómo se elige el modo (igual que el resto de la app, ver brujula-oscuro.css):
     - Oscuro es el modo por defecto  → :root
     - Claro explícito                → :root[data-theme="light"]
     - Claro por preferencia del sistema, si la persona no eligió oscuro
                                      → @media (prefers-color-scheme: light)
                                        :root:not([data-theme="dark"])
   (layout.php pone data-theme="light" o "dark" en <html> según localStorage
   `brj-tema`; sin elección guardada manda el sistema.)

   Contraste (WCAG AA manda sobre la tabla de la spec):
     - --fq-acento es el color de la marca: adornos, bordes, iconos, cifras
       grandes (>= 3:1 sobre el fondo).
     - --fq-acento-texto es el acento para TEXTO y para FONDO DE BOTÓN con
       texto (>= 4,5:1 sobre el fondo y con --fq-sobre-acento encima).
       En oscuro coincide con el acento; en claro es el acento oscurecido
       (#9A7432 llega a 3,9:1; #876427 llega a 4,96:1).
   La aurora (--fq-a1/a2/a3) también cuenta: el texto y --fq-acento-texto se
   miden contra el fondo mezclado con cada mancha a su alfa completo. Por eso
   en claro la aurora es tenue (a2 más clara que en la maqueta) y no más.
   tests/diseno/prueba_tema.php vigila estas cuentas y que los valores
   coincidan con la spec.
   ===================================================================== */

/* ---------------------------- OSCURO (defecto) ---------------------------- */
:root {
    /* Letras (heredadas por el claro: solo se declaran aquí) */
    --fq-titulo: 'Newsreader', Georgia, 'Times New Roman', serif;
    --fq-texto: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fq-fondo: #0C1426;
    --fq-tinta: #EEE9DE;
    --fq-suave: rgba(238,233,222,.62);
    --fq-acento: #E1C48A;
    --fq-acento2: #C9A15E;
    --fq-acento-texto: #E1C48A;
    --fq-sobre-acento: #0C1426;

    --fq-vidrio: rgba(255,255,255,.05);
    --fq-vidrio-solido: #172036;       /* vidrio sobre el fondo, ya mezclado: respaldo sin backdrop-filter */
    --fq-borde: rgba(225,196,138,.18);
    --fq-brillo: rgba(255,255,255,.09);
    --fq-linea: rgba(225,196,138,.11);
    --fq-foco: rgba(225,196,138,.15);  /* luz que sigue al cursor dentro del vidrio */
    --fq-lado: rgba(8,14,28,.55);      /* barra lateral de vidrio */

    /* Aurora: oro, azul y azul claro */
    --fq-a1: rgba(201,161,94,.28);
    --fq-a2: rgba(65,98,170,.42);
    --fq-a3: rgba(225,196,138,.13);

    --fq-topo: rgba(225,196,138,.22);  /* curvas de nivel del fondo */
}

/* ------------------------------ CLARO (elegido) ------------------------------ */
:root[data-theme="light"] {
    --fq-fondo: #F3F5F9;
    --fq-tinta: #0C1426;
    --fq-suave: rgba(12,20,38,.6);
    --fq-acento: #9A7432;
    --fq-acento2: #B08A45;
    --fq-acento-texto: #876427;
    --fq-sobre-acento: #F3F5F9;

    --fq-vidrio: rgba(255,255,255,.7);
    --fq-vidrio-solido: #FBFCFE;
    --fq-borde: rgba(12,20,38,.09);
    --fq-brillo: rgba(255,255,255,.95);
    --fq-linea: rgba(12,20,38,.08);
    --fq-foco: rgba(201,161,94,.14);
    --fq-lado: rgba(255,255,255,.55);

    --fq-a1: rgba(225,196,138,.20);
    --fq-a2: rgba(190,210,250,.26);
    --fq-a3: rgba(255,226,170,.28);

    --fq-topo: rgba(154,116,50,.22);
}

/* --------------- CLARO (por preferencia del sistema, sin elección) --------------- */
/* Mismos valores que el bloque de arriba; el navegador no permite compartirlos. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --fq-fondo: #F3F5F9;
        --fq-tinta: #0C1426;
        --fq-suave: rgba(12,20,38,.6);
        --fq-acento: #9A7432;
        --fq-acento2: #B08A45;
        --fq-acento-texto: #876427;
        --fq-sobre-acento: #F3F5F9;

        --fq-vidrio: rgba(255,255,255,.7);
        --fq-vidrio-solido: #FBFCFE;
        --fq-borde: rgba(12,20,38,.09);
        --fq-brillo: rgba(255,255,255,.95);
        --fq-linea: rgba(12,20,38,.08);
        --fq-foco: rgba(201,161,94,.14);
        --fq-lado: rgba(255,255,255,.55);

        --fq-a1: rgba(225,196,138,.20);
        --fq-a2: rgba(190,210,250,.26);
        --fq-a3: rgba(255,226,170,.28);

        --fq-topo: rgba(154,116,50,.22);
    }
}

/* ------------------------------ PAPEL (imprimir) ------------------------------ */
/* En papel siempre va el claro, con fondo blanco y tinta oscura, aunque la
   pantalla esté en oscuro. Sin esto el oscuro salía impreso: style.css pide
   print-color-adjust: exact para todo (los colores de la ficha son
   información), y con eso también se imprimían el azul noche del <body> y
   el vidrio de cada panel.
   - :root:root:root (0,3,0) le gana a los tres bloques de modo de arriba y
     a los de la paleta vieja (brujula-fase3.css, 0,2,0), sin !important.
   - Vidrio, brillo, luz del cursor, barra lateral y aurora quedan
     transparentes: en papel no hay fondo que dejar ver.
   - La paleta vieja (brujula.css / brujula-fase3.css) vuelve a sus valores
     claros de brujula.css: de ella salen el fondo de las tablas, los campos y
     las clases de Tailwind que el oscuro viejo remapea. Las tres --ficha-*
     no existen en claro: «initial» las anula y cada var() usa su respaldo
     (#0000CC / #008000 / #CC0000, el código de color de la ficha).
   Las piezas (barra, encabezado, paneles…) se apagan al final del archivo y
   en familia-qbk.css; tests/diseno/prueba_revision_final.php lo vigila. */
@media print {
    :root:root:root {
        color-scheme: light;

        --fq-fondo: #FFFFFF;
        --fq-tinta: #0C1426;
        --fq-suave: rgba(12,20,38,.68);
        --fq-acento: #9A7432;
        --fq-acento2: #B08A45;
        --fq-acento-texto: #876427;
        --fq-sobre-acento: #FFFFFF;
        --fq-vidrio: transparent;
        --fq-vidrio-solido: #FFFFFF;
        --fq-borde: rgba(12,20,38,.18);
        --fq-brillo: transparent;
        --fq-linea: rgba(12,20,38,.14);
        --fq-foco: transparent;
        --fq-lado: transparent;
        --fq-a1: transparent;
        --fq-a2: transparent;
        --fq-a3: transparent;
        --fq-topo: transparent;

        --bg: #FFFFFF;
        --bg-subtle: #FFFFFF;
        --panel: #FFFFFF;
        --surface: #FFFFFF;
        --surface-sunken: #EEF1F5;
        --ink: #0B1626;
        --navy: #0F2A4A;
        --navy-deep: #081826;
        --navy-ink: #0F2A4A;
        --navy-fill: #0F2A4A;
        --navy-fill-hover: #081826;
        --blue: #2F5C8A;
        --blue-soft: #E8EEF5;
        --line: #DDE2E9;
        --line-strong: #C4CCD6;
        --line-verde: #BFE0CD;
        --line-amarillo: #EEDBAE;
        --line-rojo: #E4C2C2;
        --line-azul: #C9D8E8;
        --muted: #5B6472;
        --pendiente-ink: #8B95A3;
        --descartado-bg: #F3EEEE;
        --track: #E7EBF0;
        --scope-ink: #8A6A15;
        --verde: #1F7A4D;
        --verde-bg: #E6F4EC;
        --amarillo: #9A7418;
        --amarillo-bg: #FBF1DA;
        --rojo: #9B3B3B;
        --rojo-bg: #F7EAEA;
        --ficha-azul: initial;
        --ficha-verde: initial;
        --ficha-rojo: initial;
    }
}

/* ---------------------------- FAROS POR ETAPA ---------------------------- */
/* El color del faro (.fq-faro, familia-qbk.css) de cada fila del listado.
   Son EXACTAMENTE los colores de las etapas del mapa 3D (MISIONES en
   public/assets/js/mapa3d.js; la prueba tests/diseno/prueba_tablero.php los
   compara): así un predio se ve del mismo color en el listado y en el mapa.
   Son los mismos en oscuro y en claro porque son un adorno: la etapa también
   está escrita en la insignia de Estado de la fila. La clave de cada etapa la
   elige etapaFaro() en app/Helpers/ui.php. Van aquí, antes de los componentes,
   porque son colores fijos y no dependen del modo. */
.fq-faro--nueva    { --fq-faro: #378ADD; }
.fq-faro--curso    { --fq-faro: #EF9F27; }
.fq-faro--decidir  { --fq-faro: #7F77DD; }
.fq-faro--aprobada { --fq-faro: #1D9E75; }
.fq-faro--cerrada  { --fq-faro: #888780; }


/* =====================================================================
   FONDO «TOPOGRAFÍA»  (capa fija, parcial app/Views/partials/_fondo_topografia.php)

   Aurora de tres manchas + curvas de nivel en oro, detrás de todo. Los
   colores son SOLO variables del tema (--fq-a1/a2/a3 y --fq-topo).
   - z-index: -1 y pointer-events: none: queda por debajo del contenido, de
     los modales de Tailwind y de la barra lateral, y no atrapa clics.
   - La aurora se mueve en un ciclo de 16 s; las curvas se dibujan UNA vez
     al abrir la página (stroke-dashoffset) y luego derivan muy despacio.
   - Contraste: el texto se mide contra la mancha más fuerte (ver
     tests/diseno/prueba_tema.php); por eso el claro es tan tenue.
   ===================================================================== */
.fq-fondo {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.fq-fondo .fq-aurora {
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(36% 32% at 20% 20%, var(--fq-a1), transparent 70%),
        radial-gradient(42% 38% at 85% 15%, var(--fq-a2), transparent 70%),
        radial-gradient(40% 36% at 60% 95%, var(--fq-a3), transparent 70%);
    will-change: transform;
    animation: fq-aurora 16s ease-in-out infinite alternate;
}
.fq-fondo .fq-curvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.fq-fondo .fq-curvas g {
    stroke: var(--fq-topo);
    animation: fq-topo-deriva 30s linear infinite alternate;
}
/* pathLength="1" en cada trazo: el largo real no importa, 1 = trazo completo.
   Sin animación (movimiento reducido) el trazo queda entero (dashoffset 0). */
.fq-fondo .fq-curvas path,
.fq-fondo .fq-curvas ellipse {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    animation: fq-topo-traza 3.6s var(--fq-ease) both;
}
.fq-fondo .fq-curvas > g > :nth-child(2) { animation-delay: .15s; }
.fq-fondo .fq-curvas > g > :nth-child(3) { animation-delay: .3s; }
.fq-fondo .fq-curvas > g > :nth-child(4) { animation-delay: .45s; }
.fq-fondo .fq-curvas > g > :nth-child(5) { animation-delay: .6s; }
.fq-fondo .fq-curvas > g > :nth-child(6) { animation-delay: .8s; }
.fq-fondo .fq-curvas > g > :nth-child(7) { animation-delay: .95s; }
.fq-fondo .fq-curvas > g > :nth-child(8) { animation-delay: 1.1s; }

@keyframes fq-aurora {
    50%  { transform: translate3d(6%, 4%, 0) rotate(5deg); }
    100% { transform: translate3d(-4%, 6%, 0) rotate(-4deg); }
}
@keyframes fq-topo-deriva {
    to { transform: translate(-30px, -12px); }
}
@keyframes fq-topo-traza {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}

/* Pestaña oculta: el fondo se queda quieto (FamiliaQbk.pausarFondo pone
   .fq-pausa en <html>). familia-qbk.css ya lo hace con todo; esta regla deja
   claro el contrato del fondo. */
html.fq-pausa .fq-fondo * {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .fq-fondo .fq-aurora,
    .fq-fondo .fq-curvas g,
    .fq-fondo .fq-curvas path,
    .fq-fondo .fq-curvas ellipse {
        animation: none;
    }
    .fq-fondo .fq-curvas path,
    .fq-fondo .fq-curvas ellipse {
        stroke-dashoffset: 0;
    }
}

/* En papel no va fondo: gasta tinta y ensucia el texto. */
@media print {
    .fq-fondo {
        display: none;
    }
}


/* =====================================================================
   BARRA LATERAL, ENCABEZADO Y PIE DE VIDRIO  (layout.php)

   La barra es una pieza .fq-vidrio (familia-qbk.css) a todo lo alto; el
   encabezado y el pie son vidrio plano. Dejan ver el fondo «Topografía»
   en oscuro y en claro. El contenido (.content) es transparente: las
   tarjetas y paneles conservan su propio fondo, que es el que asegura la
   legibilidad del texto.

   El indicador .fq-ind (familia-qbk.css) se desliza hasta la opción .on del
   menú; layout.php lo coloca con FamiliaQbk.indicador().

   Especificidad: los enlaces del modo oscuro viejo (`:root[data-theme="dark"] a`,
   brujula-fase3.css) pesan 0,2,1; por eso los colores de la barra llevan
   `:root` delante (0,3,0 o más) en vez de !important.
   ===================================================================== */
.sidebar.fq-vidrio {
    --fq-pad: 22px 18px;
    border-radius: 0;
    border-width: 0 1px 0 0;
    background: var(--fq-lado);
}
.sidebar .nav-group {
    position: relative;           /* el indicador se mide contra este grupo */
}
:root .sidebar .nav-label {
    color: var(--fq-suave);
}
:root .sidebar .nav-item {
    position: relative;
    z-index: 1;                   /* por encima del indicador (z-index: 0) */
    padding: 9px 10px;
    border-radius: 11px;
    color: var(--fq-suave);
    transition: color .25s;
}
:root .sidebar .nav-item:hover {
    background: transparent;
    color: var(--fq-tinta);
}
:root .sidebar .nav-item.active,
:root .sidebar .nav-item.on {
    background: transparent;      /* el fondo lo pone el indicador */
    color: var(--fq-tinta);
}
:root .sidebar .nav-item:focus-visible,
:root .brj-tema-btn:focus-visible,
:root .brj-menu-btn:focus-visible {
    outline: 2px solid var(--fq-acento-texto);
    outline-offset: 2px;
}
:root .sidebar .brand,
:root .sidebar .brand:hover {
    color: var(--fq-tinta);
}
.sidebar .brand-word {
    font-family: var(--fq-titulo);
    font-weight: 500;
}
:root .sidebar .brand-sub,
:root .sidebar .foot-row {
    color: var(--fq-suave);
}
.sidebar .sidebar-foot {
    border-top-color: var(--fq-linea);
}
.sidebar .avatar {
    background: var(--fq-acento-texto);
    color: var(--fq-sobre-acento);
}
.sidebar .pill-trl {
    border-color: var(--fq-borde);
    color: var(--fq-suave);
}

/* ------------------------------- Encabezado ------------------------------- */
:root .topbar {
    position: relative;
    z-index: 20;                  /* la campana despliega su panel por encima del contenido */
    background: var(--fq-lado);
    border-bottom: 1px solid var(--fq-linea);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    color: var(--fq-tinta);
}
:root .topbar h1 {
    font-family: var(--fq-titulo);
    font-weight: 500;
    color: var(--fq-tinta);
}
:root .topbar .search {
    background: var(--fq-vidrio);
    border-color: var(--fq-borde);
    color: var(--fq-suave);
}
:root .topbar .search input {
    color: var(--fq-tinta);
}
/* Botón de modo (y el del menú en celular): vidrio con borde que se enciende al acercarse. */
:root .brj-tema-btn,
:root .brj-menu-btn {
    background: var(--fq-vidrio);
    border-color: var(--fq-borde);
    border-radius: 11px;
    color: var(--fq-tinta);
    transition: border-color .25s, background .25s;
}
:root .brj-tema-btn:hover,
:root .brj-menu-btn:hover {
    background: var(--fq-vidrio);
    border-color: var(--fq-acento);
}

/* ------------------------------ Contenido y pie ------------------------------ */
:root .content {
    background: transparent;
}
:root:root footer.brj-pie {
    background: var(--fq-lado);
    border-top: 1px solid var(--fq-linea);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

/* Sin backdrop-filter el vidrio no se vería: se usa su color sólido equivalente. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sidebar.fq-vidrio,
    :root .topbar,
    :root:root footer.brj-pie {
        background: var(--fq-vidrio-solido);
    }
}

/* ---------------------------------------------------------------------
   Celular (<= 768 px): la barra se pliega como un cajón (brujula-fase3.css
   ya la desplaza fuera de la pantalla). El indicador se esconde y la
   opción activa lleva su propio fondo. fq-vidrio pone position: relative,
   así que se vuelve a fijar el cajón, y se le da fondo sólido para que se
   lea sobre la capa oscura.
   El cajón se desplaza por dentro: con el teléfono horizontal (unos 375 px
   de alto) el menú no cabe, y sin esto las últimas opciones y «Cerrar
   sesión» quedaban cortadas (fq-vidrio pone overflow: hidden). El
   desplazamiento no se pasa a la página de atrás (overscroll-behavior), y
   la altura es la de la pantalla visible (dvh: sin la barra del navegador;
   donde no existe, queda el 100vh de brujula-fase3.css). El indicador
   (.fq-ind) no estorba: en celular está oculto.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    .sidebar.fq-vidrio {
        display: flex;            /* brujula.css la oculta a <= 760 px y el cajón nunca se vería */
        position: fixed;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--fq-vidrio-solido);
    }
    .sidebar .fq-ind {
        display: none;
    }
    :root .sidebar .nav-item.active,
    :root .sidebar .nav-item.on {
        background: color-mix(in srgb, var(--fq-acento) 14%, transparent);
    }
}

/* Cajón y botones sin movimiento con «reducir movimiento». */
@media (prefers-reduced-motion: reduce) {
    :root .sidebar .nav-item,
    :root .brj-tema-btn,
    :root .brj-menu-btn {
        transition: none;
    }
}


/* =====================================================================
   COMPONENTES COMUNES  (tarea 5)

   Las clases de siempre (.panel, .btn, .badge, .banner, .stat-card,
   table.data, .field, .limit-card, .src-tag, .detail-title, .modal, .flash…)
   pasan al sistema «familia QBK»: vidrio, bordes y radios de la familia,
   letras Newsreader / Hanken Grotesk y acento --fq-acento-texto en el texto.
   El HTML no cambia; solo cambia cómo se ve.

   Legibilidad: el vidrio de panel NO es solo transparente. Lleva debajo el
   color de fondo del tema al 55 %, así la mancha de la aurora que pase por
   detrás no baja el contraste del texto (ver --fq-cristal). Sin
   backdrop-filter se usa el sólido --fq-vidrio-solido (@supports, al final).

   Los colores de significado (verde / amarillo / rojo de avisos, insignias
   y la ficha normativa) siguen saliendo de --verde / --amarillo / --rojo y
   --ficha-*, que brujula-fase3.css cambia por modo. En el texto se mezclan
   con --fq-tinta para llegar a 4,5:1 también en claro (el amarillo solo
   daba 4,3:1).

   Especificidad (sin !important):
     - `:root .x`      (0,2,0) le gana a .x y a las utilidades de Tailwind.
     - `:root:root .x` (0,3,0) y `:root:root a.x` (0,3,1) le ganan a los
       `:root[data-theme="dark"] a.btn-primary` (0,3,1) de brujula-fase3.css,
       que pintan todo <a> de azul y los botones de blanco.
   ===================================================================== */

:root {
    /* Fondo de las piezas de vidrio: brillo diagonal + vidrio + el fondo del
       tema al 55 % (la base que asegura el contraste del texto). */
    --fq-cristal:
        linear-gradient(160deg, var(--fq-brillo), transparent 42%),
        linear-gradient(var(--fq-vidrio), var(--fq-vidrio)),
        color-mix(in srgb, var(--fq-fondo) 55%, transparent);
    /* Lo mismo para las tarjetas que se repiten (una por expediente en el
       tablero), que van SIN backdrop-filter: con la aurora moviéndose detrás,
       el navegador tendría que volver a desenfocar cada tarjeta en cada
       cuadro. Sin desenfoque, las curvas de nivel se verían nítidas a través
       del vidrio; por eso aquí el fondo del tema va al 82 % y no al 55 %: el
       oro de las curvas casi no pasa y la tarjeta se ve como el vidrio
       desenfocado. También sube el contraste del texto (prueba_revision_final.php). */
    --fq-cristal-plano:
        linear-gradient(160deg, var(--fq-brillo), transparent 42%),
        linear-gradient(var(--fq-vidrio), var(--fq-vidrio)),
        color-mix(in srgb, var(--fq-fondo) 82%, transparent);
    --fq-sombra: 0 10px 34px rgba(0, 0, 0, .16);
    accent-color: var(--fq-acento-texto);   /* casillas, radios y barras nativos */
}

/* Fondo y tinta de la página: los del tema (--fq-fondo / --fq-tinta), la
   misma base contra la que se mide el contraste. Antes salían de la paleta
   vieja (--bg-subtle / --ink de brujula.css y brujula-fase3.css), casi
   iguales pero otra fuente de verdad. `:root:root body` (0,2,1) empata con
   `:root[data-theme="dark"] body` de brujula-fase3.css y gana por ir después.
   Las páginas sueltas (body.fq-pagina) ya hacían esto con su propia regla. */
:root:root body {
    background: var(--fq-fondo);
    color: var(--fq-tinta);
}
:root body {
    font-family: var(--fq-texto);
}
:root :is(h1, h2, h3, .display) {
    font-family: var(--fq-titulo);
    font-weight: 500;
    letter-spacing: -.005em;
}
/* El título de un panel es una etiqueta (mayúsculas pequeñas), no un titular. */
:root .panel h3,
:root .legend-box h3 {
    font-family: var(--fq-texto);
    font-weight: 700;
    color: var(--fq-suave);
}

/* ------------------------- Paneles y tarjetas de vidrio ------------------------- */
/* Desenfoque (backdrop-filter) solo en las superficies únicas y grandes:
   paneles, la leyenda, el embudo y el estado vacío (aquí), la barra lateral,
   el encabezado, el pie, las pestañas, las ventanas y la paleta. Las tarjetas
   que se repiten (.card del tablero, .exp-card) y los avisos van sin él:
   cientos de desenfoques sobre la aurora animada harían lenta la pantalla. */
:root .panel,
:root .legend-box,
:root .embudo,
:root .empty {
    background: var(--fq-cristal);
    border: 1px solid var(--fq-borde);
    border-radius: var(--fq-radio);
    box-shadow: var(--fq-sombra);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    color: var(--fq-tinta);
}
:root .exp-card,
:root .card {
    background: var(--fq-cristal-plano);
    border: 1px solid var(--fq-borde);
    border-radius: var(--fq-radio);
    box-shadow: var(--fq-sombra);
    color: var(--fq-tinta);
}
:root .empty {
    border-style: dashed;
    box-shadow: none;
}
:root .empty h3 {
    color: var(--fq-tinta);
}
/* Tarjeta del tablero: se levanta y enciende el borde al acercarse. */
:root .card {
    transition: transform .25s var(--fq-ease), border-color .25s, box-shadow .25s;
}
:root .card:hover {
    border-color: var(--fq-acento);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .2);
}
/* La tarjeta del tablero es un <a>: el oscuro viejo pinta todo <a> de azul (0,2,1). */
:root:root .card,
:root:root a.card {
    color: var(--fq-tinta);
}
:root .card-title,
:root .exp-title,
:root .detail-title {
    font-family: var(--fq-titulo);
    font-weight: 500;
    color: var(--fq-tinta);
}
:root .detail-title {
    font-size: 26px;
}
:root .detail-sub,
:root .exp-sub,
:root .card-chip,
:root .card-meta {
    color: var(--fq-suave);
}
/* Columnas del tablero: una veladura, no un bloque sólido. */
:root .col {
    background: color-mix(in srgb, var(--fq-tinta) 4%, transparent);
    border: 1px solid var(--fq-linea);
    border-radius: var(--fq-radio);
}
:root .col-descartado {
    background: color-mix(in srgb, var(--rojo) 7%, transparent);
}
:root .col-title {
    color: var(--fq-tinta);
}
:root .col-count {
    background: transparent;
    border-color: var(--fq-borde);
    color: var(--fq-suave);
}

/* Cabecera del expediente */
:root .exp-gauge {
    background: color-mix(in srgb, var(--fq-tinta) 5%, transparent);
    border-radius: 13px;
}
:root .exp-stats {
    background: color-mix(in srgb, var(--fq-tinta) 3%, transparent);
    border-top-color: var(--fq-linea);
}
:root .exp-stat {
    border-right-color: var(--fq-linea);
}
:root .exp-stat .v,
:root .stat-card .v {
    font-family: var(--fq-titulo);
    font-weight: 500;
}
/* Cifra del tablero (odómetro): es texto GRANDE (34 px), por eso basta el
   3:1 del acento. El tamaño va en el odómetro porque su alto es 1em. */
:root .stat-card .fq-odo {
    font-size: 34px;
}
:root .exp-stat label,
:root .exp-code,
:root .kv-k,
:root .panel-label {
    color: var(--fq-suave);
}
:root .kv-v {
    color: var(--fq-tinta);
}

/* Cabecera de detalle y pestañas */
:root .detail-head {
    background: color-mix(in srgb, var(--fq-fondo) 55%, transparent);
    border-bottom: 1px solid var(--fq-linea);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
/* Las pestañas son <a>: `:root:root` (0,3,0 / 0,4,0) le gana al `a` y `a:hover` del oscuro viejo. */
:root:root .tab {
    color: var(--fq-suave);
}
:root:root .tab:hover {
    color: var(--fq-tinta);
}
:root:root .tab.active {
    color: var(--fq-acento-texto);
    border-bottom-color: var(--fq-acento);
}
:root .tab-count {
    background: transparent;
    border-color: var(--fq-borde);
    color: var(--fq-suave);
}
:root .tab.active .tab-count {
    background: color-mix(in srgb, var(--fq-acento) 14%, transparent);
    border-color: var(--fq-acento);
    color: var(--fq-acento-texto);
}
:root .tabbar {
    background: var(--fq-cristal);
    border-color: var(--fq-borde);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
:root .tabbar + .tab-body {
    background: color-mix(in srgb, var(--fq-tinta) 3%, transparent);
    border-color: var(--fq-borde);
}

/* ------------------------------ Botones ------------------------------ */
:root .btn {
    font-family: var(--fq-texto);
    border: 1px solid color-mix(in srgb, var(--fq-tinta) 24%, transparent);
    border-radius: 12px;
    background: var(--fq-vidrio);
    color: var(--fq-tinta);
    cursor: pointer;
    transition: border-color .25s, background .25s, transform .18s var(--fq-ease), box-shadow .25s;
}
:root:root .btn,
:root:root a.btn {
    color: var(--fq-tinta);
}
/* El destello de «acercarse» es una capa encima (background-image): no pisa
   el color de fondo propio de .btn-primary ni de .btn-danger. */
:root .btn:hover {
    border-color: var(--fq-acento);
    background-image: linear-gradient(color-mix(in srgb, var(--fq-acento) 10%, transparent), color-mix(in srgb, var(--fq-acento) 10%, transparent));
}
:root .btn[disabled] {
    cursor: not-allowed;
}
:root:root a.btn:hover {
    color: var(--fq-tinta);
}
:root .btn:active {
    transform: translateY(1px) scale(.98);
}
:root .btn:focus-visible,
:root .chip:focus-visible {
    outline: 2px solid var(--fq-acento-texto);
    outline-offset: 2px;
}
/* Botón principal: el acento en su versión para texto (AA) con el texto
   «sobre acento», como .fq-cta. */
:root .btn-primary {
    background: var(--fq-acento-texto);
    border-color: var(--fq-acento-texto);
    color: var(--fq-sobre-acento);
}
:root:root .btn-primary,
:root:root a.btn-primary {
    color: var(--fq-sobre-acento);
}
:root .btn-primary:hover {
    border-color: var(--fq-acento-texto);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--fq-acento) 38%, transparent);
}
:root:root a.btn-primary:hover {
    color: var(--fq-sobre-acento);
}
:root .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--fq-acento-texto);
}
:root:root .btn-ghost,
:root:root a.btn-ghost {
    color: var(--fq-acento-texto);
}
:root .btn-ghost:hover {
    border-color: transparent;
}
/* Peligro: relleno rojo del sistema con texto blanco. El fondo es el rojo de cada
   modo al 70 % con negro: 10,5:1 en claro y 5,4:1 en oscuro (el rojo del oscuro,
   #E07B7B, solo daba 2,6:1 con blanco). Va aquí porque `:root .btn` (vidrio) le ganaba
   a `.btn-danger{background}` de brujula.css, y el oscuro viejo (0,3,0) hay que igualarlo. */
:root .btn-danger {
    border-radius: 12px;
}
:root:root .btn-danger,
:root:root a.btn-danger {
    background: color-mix(in srgb, var(--rojo) 70%, black);
    border-color: color-mix(in srgb, var(--rojo) 70%, black);
    color: #fff;
}
:root:root .btn-danger:hover,
:root:root a.btn-danger:hover {
    filter: brightness(.92);
    color: #fff;
}
/* «Eliminar / Rechazar»: contorno rojo con relleno suave al acercarse. */
:root .btn-borra {
    border-color: color-mix(in srgb, var(--rojo) 50%, transparent);
}
:root:root .btn-borra,
:root:root a.btn-borra {
    color: color-mix(in srgb, var(--rojo) 78%, var(--fq-tinta));
}
:root .btn-borra:hover {
    border-color: var(--rojo);
    background: color-mix(in srgb, var(--rojo) 12%, transparent);
}
:root .chip {
    font-family: var(--fq-texto);
    background: var(--fq-vidrio);
    border-color: var(--fq-borde);
    color: var(--fq-suave);
    cursor: pointer;
    transition: border-color .25s, color .25s, background .25s;
}
:root .chip:hover {
    border-color: var(--fq-acento);
}
/* El filtro es un <a> a veces: `:root:root` le gana al `a` / `a:hover` del oscuro viejo. */
:root:root .chip {
    color: var(--fq-suave);
}
:root:root .chip:hover {
    color: var(--fq-tinta);
}
:root:root .chip.active,
:root:root a.chip.active {
    background: var(--fq-acento-texto);
    border-color: var(--fq-acento-texto);
    color: var(--fq-sobre-acento);
}

/* ------------------------- Insignias y etiquetas ------------------------- */
:root .badge,
:root .src-tag {
    font-family: var(--fq-texto);
    background: color-mix(in srgb, var(--fq-tinta) 6%, transparent);
    border: 1px solid var(--fq-borde);
    color: var(--fq-suave);
}
:root .badge-scope {
    background: color-mix(in srgb, var(--amarillo) 12%, transparent);
    border-color: color-mix(in srgb, var(--amarillo) 40%, transparent);
    color: var(--scope-ink);
}
:root .prio-tag {
    font-family: var(--fq-texto);
}

/* ------------------------------- Avisos ------------------------------- */
/* Sin backdrop-filter: puede haber varios avisos en una pantalla y su fondo ya
   es opaco (el color mezclado con --fq-vidrio-solido), así que el desenfoque
   no se veía y solo costaba. */
:root .banner,
:root .flash {
    border-radius: var(--fq-radio);
}
:root .banner-verde,
:root .flash-success {
    background: color-mix(in srgb, var(--verde) 11%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--verde) 38%, transparent);
    color: color-mix(in srgb, var(--verde) 75%, var(--fq-tinta));
}
:root .banner-amarillo,
:root .flash-warning {
    background: color-mix(in srgb, var(--amarillo) 12%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--amarillo) 42%, transparent);
    color: color-mix(in srgb, var(--amarillo) 70%, var(--fq-tinta));
}
:root .banner-rojo,
:root .flash-error {
    background: color-mix(in srgb, var(--rojo) 11%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--rojo) 40%, transparent);
    color: color-mix(in srgb, var(--rojo) 75%, var(--fq-tinta));
}
:root .banner-azul,
:root .flash-info {
    background: color-mix(in srgb, var(--fq-acento) 10%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--fq-acento) 38%, transparent);
    color: var(--fq-tinta);
}
:root .flash-cerrar:hover {
    background: color-mix(in srgb, var(--fq-tinta) 10%, transparent);
}
/* Franja del tiempo de análisis y el veredicto */
:root:root .banner-analisis {
    background: color-mix(in srgb, var(--fq-acento) 14%, var(--fq-vidrio-solido));
    border: 1px solid var(--fq-borde);
    color: var(--fq-tinta);
    border-radius: var(--fq-radio);
}
:root .banner-analisis .t2 {
    color: var(--fq-suave);
}
:root .banner-analisis .arrow {
    background: color-mix(in srgb, var(--fq-acento) 18%, transparent);
    color: var(--fq-acento-texto);
}

/* ------------------------ Cifras, límites y fuentes ------------------------ */
:root .stat-card,
:root .ia-card {
    background: color-mix(in srgb, var(--fq-tinta) 4%, transparent);
    border: 1px solid var(--fq-linea);
    border-radius: 14px;
    color: var(--fq-tinta);
}
:root .stat-card label,
:root .ia-card-label {
    color: var(--fq-suave);
}
:root .stat-card .u {
    color: var(--fq-suave);
}
:root .ia-card-value {
    font-family: var(--fq-titulo);
    font-weight: 500;
    color: var(--fq-tinta);
}
:root .limit-card {
    border-top-color: var(--fq-linea);
}
:root .limit-title {
    color: var(--fq-tinta);
}
:root .limit-detail {
    color: var(--fq-suave);
}
:root .source-row,
:root .ver-row,
:root .doc-row,
:root .doc-item,
:root .card-foot {
    border-color: var(--fq-linea);
}
:root .confidence-big {
    font-family: var(--fq-titulo);
    font-weight: 500;
}
:root .disclaimer {
    background: color-mix(in srgb, var(--fq-tinta) 5%, transparent);
    color: var(--fq-suave);
}

/* ------------------------------ Tablas de datos ------------------------------ */
:root:root table.data th {
    background: color-mix(in srgb, var(--fq-tinta) 5%, transparent);
    border-bottom: 1px solid var(--fq-linea);
    color: var(--fq-suave);
}
:root table.data td {
    border-bottom: 1px solid var(--fq-linea);
}
:root table.data tbody tr:hover {
    background: color-mix(in srgb, var(--fq-acento) 8%, transparent);
}
:root tr.row-verde {
    background: color-mix(in srgb, var(--verde) 12%, transparent);
}
:root tr.row-amarillo {
    background: color-mix(in srgb, var(--amarillo) 13%, transparent);
}
:root tr.row-rojo {
    background: color-mix(in srgb, var(--rojo) 12%, transparent);
}
:root table.data th a {
    color: inherit;
}
:root table.data th a.u-orden-actual {
    color: var(--fq-acento-texto);
}

/* ------------------------- Campos y formularios ------------------------- */
:root .field label {
    color: var(--fq-tinta);
}
:root .field .hint,
:root .toolbar label {
    color: var(--fq-suave);
}
/* Los controles: fondo apenas distinto del vidrio y borde con 3:1 de contraste
   (WCAG 1.4.11), porque en claro el borde del vidrio es casi invisible. */
:root:root .input,
:root:root .field :is(input, select, textarea):not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden], [type=color]),
:root:root .panel :is(input, select, textarea):not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden], [type=color], [type=submit], [type=button]),
:root:root .modal :is(input, select, textarea):not([type=checkbox], [type=radio], [type=range], [type=file], [type=hidden], [type=color]),
:root:root .toolbar select {
    background: color-mix(in srgb, var(--fq-fondo) 90%, var(--fq-tinta));
    border: 1px solid color-mix(in srgb, var(--fq-tinta) 40%, transparent);
    border-radius: 11px;
    color: var(--fq-tinta);
    font-family: var(--fq-texto);
    transition: border-color .25s, box-shadow .25s;
}
:root:root .input:focus,
:root:root .field :is(input, select, textarea):focus,
:root:root .panel :is(input, select, textarea):focus,
:root:root .modal :is(input, select, textarea):focus,
:root:root .toolbar select:focus {
    border-color: var(--fq-acento-texto);
    box-shadow: 0 0 0 3px var(--fq-foco);
}
:root:root .input:focus-visible,
:root:root .field :is(input, select, textarea):focus-visible,
:root:root .panel :is(input, select, textarea):focus-visible,
:root:root .modal :is(input, select, textarea):focus-visible,
:root:root .toolbar select:focus-visible {
    outline: 2px solid var(--fq-acento-texto);
    outline-offset: 1px;
}
:root:root .input::placeholder,
:root:root .field :is(input, textarea)::placeholder,
:root:root .panel :is(input, textarea)::placeholder {
    color: var(--fq-suave);
    opacity: 1;
}
:root .brj-dropzone {
    background: color-mix(in srgb, var(--fq-tinta) 4%, transparent);
    border-color: color-mix(in srgb, var(--fq-tinta) 40%, transparent);
    border-radius: 13px;
}
:root .brj-dropzone:hover,
:root .brj-dropzone.arrastrando {
    border-color: var(--fq-acento);
    background: color-mix(in srgb, var(--fq-acento) 10%, transparent);
}
:root .progress {
    background: color-mix(in srgb, var(--fq-tinta) 10%, transparent);
}

/* --------------------------------- Ventanas --------------------------------- */
:root .modal-backdrop {
    background: rgba(0, 0, 0, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
:root .modal {
    border: 1px solid var(--fq-borde);
    border-radius: 18px;
    background: linear-gradient(160deg, var(--fq-brillo), transparent 42%), var(--fq-vidrio-solido);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    color: var(--fq-tinta);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .42);
    animation: fq-abre .45s var(--fq-resorte) both;
}
:root .modal h2 {
    font-size: 20px;
}

/* ------------------------------------------------------------------------
   Utilidades (u-…): lo que antes iba en style="…" en las vistas. Van al final
   para ganarles a las reglas de componente de arriba cuando coinciden.
   ------------------------------------------------------------------------ */
:root .u-m0 { margin: 0; }
:root .u-ox { overflow-x: auto; }
:root .u-plano { padding: 0; overflow: hidden; }
:root .u-rojo { color: color-mix(in srgb, var(--rojo) 78%, var(--fq-tinta)); }
:root .u-verde { color: color-mix(in srgb, var(--verde) 75%, var(--fq-tinta)); }
:root .u-amarillo { color: color-mix(in srgb, var(--amarillo) 70%, var(--fq-tinta)); }
:root .u-suave { color: var(--fq-suave); }
:root .u-tinta { color: var(--fq-tinta); }
:root .u-fw4 { font-weight: 400; }
:root .u-fw6 { font-weight: 600; }
:root .u-fs9 { font-size: 9px; }
:root .u-fs11 { font-size: 11px; }
:root .u-fs115 { font-size: 11.5px; }
:root .u-fs12 { font-size: 12px; }
:root .u-fs125 { font-size: 12.5px; }
:root .u-fs13 { font-size: 13px; }
:root .u-lh16 { line-height: 1.6; }
:root .u-lh17 { line-height: 1.7; }
:root .u-lh18 { line-height: 1.8; }
:root .u-mono { font-family: 'IBM Plex Mono', monospace; }
:root .u-prelinea { white-space: pre-line; }

/* Márgenes */
:root .u-mt0 { margin-top: 0; }
:root .u-mt2 { margin-top: 2px; }
:root .u-mt3 { margin-top: 3px; }
:root .u-mt4 { margin-top: 4px; }
:root .u-mt6 { margin-top: 6px; }
:root .u-mt8 { margin-top: 8px; }
:root .u-mt10 { margin-top: 10px; }
:root .u-mt12 { margin-top: 12px; }
:root .u-mt14 { margin-top: 14px; }
:root .u-mt16 { margin-top: 16px; }
:root .u-mt18 { margin-top: 18px; }
:root .u-mt20 { margin-top: 20px; }
:root .u-mt24 { margin-top: 24px; }
:root .u-mtn6 { margin-top: -6px; }
:root .u-mb2 { margin-bottom: 2px; }
:root .u-mb3 { margin-bottom: 3px; }
:root .u-mb4 { margin-bottom: 4px; }
:root .u-mb5 { margin-bottom: 5px; }
:root .u-mb8 { margin-bottom: 8px; }
:root .u-mb10 { margin-bottom: 10px; }
:root .u-mb12 { margin-bottom: 12px; }
:root .u-mb14 { margin-bottom: 14px; }
:root .u-mb16 { margin-bottom: 16px; }
:root .u-mb24 { margin-bottom: 24px; }
:root .u-ml6 { margin-left: 6px; }
:root .u-m008 { margin: 0 0 8px; }
:root .u-m0010 { margin: 0 0 10px; }
:root .u-m0014 { margin: 0 0 14px; }
:root .u-m004 { margin: 0 0 4px; }
:root .u-m1400 { margin: 14px 0 0; }
:root .u-m1200 { margin: 12px 0 0; }
:root .u-m1000 { margin: 10px 0 0; }
:root .u-m400 { margin: 4px 0 0; }
:root .u-m200 { margin: 2px 0 0; }
:root .u-m60 { margin: 6px 0; }
:root .u-m80 { margin: 8px 0; }
:root .u-m180 { margin: 18px 0; }
:root .u-m6010 { margin: 6px 0 10px; }
:root .u-mn810 { margin: -8px 0 10px; }
:root .u-ib { display: inline-block; }
:root .u-inline { display: inline; }
:root .u-rel { position: relative; }

/* Anchos y rejillas */
:root .u-w100 { width: 100%; }
:root .u-wauto { width: auto; }
:root .u-w28p { width: 28%; }
:root .u-w44p { width: 44%; }
:root .u-w34 { width: 34px; }
:root .u-w36 { width: 36px; }
:root .u-w44 { width: 44px; }
:root .u-w90 { width: 90px; }
:root .u-w110 { width: 110px; }
:root .u-w120 { width: 120px; }
:root .u-w130 { width: 130px; }
:root .u-w150 { width: 150px; }
:root .u-w180 { width: 180px; }
:root .u-w190 { width: 190px; }
:root .u-w210 { width: 210px; }
:root .u-w230 { width: 230px; }
:root .u-minw0 { min-width: 0; }
:root .u-flex1 { flex: 1; min-width: 0; }
:root .u-maxnone { max-width: none; }
:root .u-mw220 { max-width: 220px; }
:root .u-mw560 { max-width: 560px; }
:root .u-cx520 { max-width: 520px; margin: 0 auto 16px; }
:root .u-cx560 { max-width: 560px; margin: 0 auto 16px; }
:root .u-span2 { grid-column: span 2; }
:root .u-gt1 { grid-template-columns: 1fr; }
:root .u-gt2 { grid-template-columns: 1fr 1fr; }
:root .u-gt5 { grid-template-columns: repeat(5, 1fr); }
:root .u-gt21111 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
:root .u-gap18 { gap: 18px; }
:root .u-der { text-align: right; }
:root .u-izq { text-align: left; }
:root .u-centro { text-align: center; }
:root .u-puntero { cursor: pointer; }
:root .u-borde2 { border-width: 2px; }
:root .u-bordepunt { border-style: dashed; }
:root .u-bt-linea { border-top-color: var(--fq-linea); }
:root .u-sinsubrayado { text-decoration: none; }

/* Filas en flex (el orden importa: u-centrado y u-sinenvolver van después) */
:root .u-fila,
:root .u-fila6,
:root .u-fila7,
:root .u-fila8,
:root .u-fila10,
:root .u-fila12,
:root .u-fila10b,
:root .u-entre8,
:root .u-entre12,
:root .u-fila414,
:root .u-col9 { display: flex; }
:root .u-fila { gap: 10px; align-items: center; flex-wrap: wrap; }
:root .u-fila6 { gap: 6px; flex-wrap: wrap; }
:root .u-fila7 { gap: 7px; flex-wrap: wrap; }
:root .u-fila8 { gap: 8px; flex-wrap: wrap; }
:root .u-fila10 { gap: 10px; flex-wrap: wrap; }
:root .u-fila10b { gap: 10px; }
:root .u-fila12 { gap: 12px; align-items: center; flex-wrap: wrap; }
:root .u-entre8 { justify-content: space-between; gap: 8px; align-items: baseline; }
:root .u-entre12 { justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:root .u-fila414 { flex-wrap: wrap; gap: 4px 14px; }
:root .u-col9 { flex-direction: column; gap: 9px; }
:root .u-centrado { align-items: center; }
:root .u-base { align-items: baseline; }
:root .u-finaliza { align-items: flex-end; }
:root .u-sinenvolver { flex-wrap: nowrap; }

/* Listas y bloques con relleno */
:root .u-lista { margin: 8px 0 0; padding-left: 18px; }
:root .u-lista0 { margin: 0; padding-left: 18px; }
:root .u-cab { padding: 16px 20px; border-bottom: 1px solid var(--fq-linea); }
:root .u-pt10 { padding-top: 10px; }
:root .u-p1420 { padding: 14px 20px 0; margin: 0; }
:root .u-p0016 { padding: 0 0 16px; }
:root .u-p1822 { padding: 18px 22px 0; }
:root .u-p1820 { padding: 18px 20px; margin: 0; }
:root .u-p1428 { padding: 14px 28px; }
:root .u-h16 { font-size: 16px; margin: 0 0 4px; }
:root .u-h17 { font-size: 17px; margin: 2px 0 4px; }
:root .u-vacio26 { text-align: center; padding: 26px 0; margin: 0; }
:root .u-btn-texto { cursor: pointer; font-family: inherit; }
:root .u-vacio36 { text-align: center; padding: 36px 20px; margin: 0; }
:root .u-vacio44 { text-align: center; padding: 44px 20px; }

/* Piezas con nombre propio */
:root .u-fondo-sutil { background: color-mix(in srgb, var(--fq-tinta) 5%, transparent); }
:root .u-franja {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    padding: 12px 20px;
    background: color-mix(in srgb, var(--fq-tinta) 5%, transparent);
    border-bottom: 1px solid var(--fq-linea);
    font-size: 12.5px;
}
:root .u-paginacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-top: 1px solid var(--fq-linea);
}
:root .u-pre {
    margin: 6px 0 0;
    padding: 8px;
    background: color-mix(in srgb, var(--fq-tinta) 6%, transparent);
    border-radius: 8px;
    font-size: 11px;
    overflow-x: auto;
    white-space: pre-wrap;
}
:root .u-pre-ancho { margin-top: 8px; padding: 10px; max-width: 520px; }
:root .u-detalle-link {
    cursor: pointer;
    color: var(--fq-acento-texto);
    font-size: 11.5px;
}
:root .u-resumen {
    cursor: pointer;
    padding: 8px 0;
    color: var(--fq-acento-texto);
    font-size: 13px;
    font-weight: 600;
}
:root .u-titulo-suave { font-weight: 500; color: var(--fq-tinta); }
:root .u-orden-actual { color: var(--fq-acento-texto); }
:root .u-fila-borde { padding: 10px 0; border-top: 1px solid var(--fq-linea); }
:root .u-fila-borde-chica { padding: 8px 0; }
:root .u-banner-chico { margin: 12px 0 0; padding: 10px 12px; }
:root .u-apagado { opacity: .55; }
:root .u-tabbar-suelta {
    border-radius: var(--fq-radio);
    border-bottom: 1px solid var(--fq-borde);
    margin-bottom: 18px;
}
:root .u-salir { margin-top: 10px; padding-left: 0; }
/* Semáforo de la ficha: franja de colores proporcionales (el color va por celda). */
:root .u-semaforo {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
/* Código de color de la ficha normativa: el significado no cambia. El valor
   de respaldo vale para el modo claro; brujula-fase3.css da el del oscuro. */
:root .u-ficha-azul { color: var(--ficha-azul, #0000CC); }
:root .u-ficha-verde { color: var(--ficha-verde, #008000); }
:root .u-ficha-rojo { color: var(--ficha-rojo, #CC0000); }
/* Cargador del estudio de títulos (barra de avance que mueve el JS) */
:root .u-cargador {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: color-mix(in srgb, var(--fq-tinta) 5%, transparent);
    border: 1px solid var(--fq-borde);
    border-radius: 13px;
}
:root .u-cargador-pista {
    margin-top: 8px;
    height: 6px;
    background: color-mix(in srgb, var(--fq-tinta) 12%, transparent);
    border-radius: 3px;
    overflow: hidden;
}
:root .u-cargador-barra {
    height: 100%;
    width: 0%;
    background: var(--fq-acento);
    transition: width .5s ease;
}
/* Velo mientras la tabla del listado recarga (app.js le suma .flex / .hidden). */
:root .brj-velo {
    position: absolute;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--fq-fondo) 72%, transparent);
    pointer-events: none;
}

/* Sin backdrop-filter el vidrio no se vería: se usa su color sólido equivalente. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    :root .panel,
    :root .exp-card,
    :root .card,
    :root .legend-box,
    :root .embudo,
    :root .empty,
    :root .modal,
    :root .tabbar,
    :root .detail-head,
    .fq-ingreso-tarjeta.fq-vidrio,
    .fq-pub-encabezado {
        background: var(--fq-vidrio-solido);
    }
}

/* =====================================================================
   Detalle del expediente (tarea 7): aguja, pestañas y título que vuela.
   La misión (pasos que se encienden) tiene sus reglas en _mision.php.
   ===================================================================== */

/* Aguja de prioridad: gira desde su pivote (el círculo del centro). El giro
   final va escrito en línea; familia-qbk.js (aguja) la hace oscilar y asentarse. */
:root .gauge .fq-aguja {
    transform-origin: 50px 54px;
}

/* Línea bajo la pestaña activa (la dibuja app.js dentro de .tabbar[data-fq-linea]):
   se desliza con resorte de una pestaña a otra. En el detalle las pestañas cambian
   sin recargar; en la ficha y el estudio son páginas, y ahí la desliza la transición
   entre páginas (el nombre fq-linea es el mismo en las dos). */
:root .tabbar[data-fq-linea] {
    position: relative;
}
.fq-linea {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--fq-acento);
    box-shadow: 0 0 10px color-mix(in srgb, var(--fq-acento) 55%, transparent);
    pointer-events: none;
    transition: transform .45s cubic-bezier(.34, 1.3, .4, 1), width .45s cubic-bezier(.34, 1.3, .4, 1);
    view-transition-name: fq-linea;
}
/* Con la línea puesta, el subrayado fijo de la pestaña activa sobra (se vería doble). */
:root:root .tabbar.fq-con-linea .tab.active {
    border-bottom-color: transparent;
}

/* Cambio de página con título compartido (Chrome y Edge). El fondo de la página
   cambia sin fundido (familia-qbk.css); solo viajan las piezas con nombre. Donde el
   navegador no lo sabe, la navegación es la de siempre. */
@view-transition {
    navigation: auto;
}
::view-transition-group(*) {
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}
/* La raíz (la página entera) no viaja: cambia de una vez (familia-qbk.css le
   quita el fundido). Pero su grupo también entraba en el (*) de arriba, y
   mientras dura una transición los clics no llegan a los enlaces: cada cambio
   de página dejaba medio segundo sin poder hacer clic, aunque no volara nada.
   Con 0 s la transición termina apenas se pinta la página nueva, salvo
   cuando sí hay un título (exp-<id>) o la línea (fq-linea) que viaja: esos
   grupos conservan su medio segundo. Un nombre concreto pesa más que el (*). */
::view-transition-group(root) {
    animation-duration: 0s;
}
/* Cambio de modo con círculo (misma página): app.js pone .brj-tema-circulo en <html>
   mientras dura. Un elemento con nombre se captura aparte de la raíz y el círculo no
   lo revela: el título o la línea cambiarían de color por su cuenta. Sin nombre, viajan
   con la raíz. Los títulos llevan el nombre en línea (style="view-transition-name: …"),
   y un estilo en línea solo se vence con !important: es el único del tema y solo vale
   mientras dure esa clase. */
:root.brj-tema-circulo [style*="view-transition-name"] {
    view-transition-name: none !important;
}
:root.brj-tema-circulo .fq-linea {
    view-transition-name: none;
}

/* Un título de fila sin pareja en la página nueva (las demás filas del tablero)
   desaparece de una vez: si no, quedaría flotando sobre el detalle. */
::view-transition-old(*):only-child {
    opacity: 0;
    animation: none;
}

/* =====================================================================
   Ficha normativa, cabida y revisor (tarea 9)
   Las barras se llenan al aparecer y, mientras la IA trabaja, un brillo
   del acento recorre el recuadro de espera (.fq-brillo-carga, familia-qbk.css).
   ===================================================================== */

/* Barras de «Estado de los datos», «Lo que se puede construir» y la cabida:
   pista y letras del tema; el color de cada relleno lo pone la vista (es
   información: confirmado, por confirmar, bloqueante…). */
:root .bar-row {
    gap: 12px;
    margin-bottom: 12px;
}
:root .bar-label {
    color: var(--fq-suave);
    font-family: var(--fq-texto);
}
:root .bar-track {
    background: color-mix(in srgb, var(--fq-tinta) 11%, transparent);
    border-radius: 999px;
    height: 9px;
}
:root .bar-fill {
    border-radius: 999px;
}
:root .bar-value {
    color: var(--fq-tinta);
    font-family: var(--fq-texto);
    font-variant-numeric: tabular-nums;
}

/* La barra toma su ancho de --fq-p (lo escribe la vista) y parte de cero al
   aparecer. --fq-i es su turno: cada una entra 90 ms después de la anterior.
   Si está en una pestaña oculta, se llena cuando la pestaña se abre. */
:root .fq-barra {
    width: var(--fq-p, 0%);
    animation: fq-barra-llena .9s var(--fq-ease) both;
    animation-delay: calc(120ms + var(--fq-i, 0) * 90ms);
}
@keyframes fq-barra-llena {
    from { width: 0; }
}

/* Dirección y datos del predio en la ficha: la dirección ocupa dos columnas. */
:root .fq-col2 {
    grid-column: span 2;
}
@media (max-width: 760px) {
    :root .fq-col2 {
        grid-column: auto;
    }
}

/* Giro de espera: el borde y la punta usan el acento (en oscuro el gris viejo se perdía). */
:root .brj-spinner {
    border-color: color-mix(in srgb, var(--fq-tinta) 18%, transparent);
    border-top-color: var(--fq-acento-texto);
}

/* Espera del agente revisor: aparece al enviar el formulario (atributo hidden). */
:root .fq-espera:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--fq-tinta) 5%, transparent);
    border: 1px solid var(--fq-borde);
    border-radius: 13px;
    color: var(--fq-tinta);
}

/* =====================================================================
   INGRESO, FORMULARIOS PÚBLICOS Y ERRORES  (tarea 10)

   Páginas sueltas que NO pasan por layout.php: el ingreso (login.php), el
   formulario y el seguimiento públicos de leads, la falla del Hub (sso.php)
   y el 403. Cargan las mismas hojas que la app, en el mismo orden, y el
   mismo script que aplica el modo guardado (brj-tema) antes de pintar.

   - El ingreso lleva el fondo «Topografía» (el parcial, igual que el layout)
     y una tarjeta de vidrio (.fq-vidrio): .fq-ingreso*.
   - Los públicos y el 403 llevan SOLO los colores, las letras y los botones
     del sistema, sin fondo animado: .fq-pagina (el <body>) y .fq-pub*.
     Los campos, avisos, insignias y botones secundarios reutilizan las clases
     del sistema (.field, .banner, .badge, .btn), que ya cumplen AA; aquí solo
     va la maqueta de cada página.
   - Todos los colores salen de variables --fq-* (o --rojo / --verde del
     sistema): ni un color suelto. Sin !important: `:root:root` le gana a lo
     viejo (brujula.css, brujula-fase3.css).
   ===================================================================== */

/* Base de la página suelta: columna a toda la altura, con el fondo del tema. */
:root:root body.fq-pagina {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    margin: 0;
    background: var(--fq-fondo);
    color: var(--fq-tinta);
    font-family: var(--fq-texto);
    font-size: 15px;
    line-height: 1.55;
}
/* El enlace por defecto (azul en el oscuro viejo) pasa al acento para texto (AA). */
:root:root .fq-pagina a:not(.fq-cta, .btn) {
    color: var(--fq-acento-texto);
}
:root:root .fq-pagina a:not(.fq-cta, .btn):hover {
    color: var(--fq-tinta);
}
:root:root .fq-pagina a:focus-visible {
    outline: 2px solid var(--fq-acento-texto);
    outline-offset: 2px;
}
/* Un <a class="fq-cta"> (403, falla del Hub): el color del texto sobre el acento. */
:root:root a.fq-cta,
:root:root a.fq-cta:hover {
    color: var(--fq-sobre-acento);
}
:root:root .fq-pagina :is(h1, h2) {
    color: var(--fq-tinta);
}

/* ------------------------------- INGRESO ------------------------------- */
.fq-ingreso {
    position: relative;               /* por encima del fondo (z-index: -1) */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.fq-ingreso-caja {
    width: 100%;
    max-width: 400px;
}
.fq-ingreso-marca {
    text-align: center;
    margin-bottom: 24px;
}
:root .fq-ingreso-marca h1 {
    margin: 0;
    padding-left: .28em;              /* compensa el espacio de la última letra del tracking */
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: .28em;
}
:root:root .fq-ingreso-marca p {
    margin: 8px 0 0;
    font: 700 11px/1.4 var(--fq-texto);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fq-suave);
}
/* La tarjeta: vidrio de la familia con la base del tema debajo (legibilidad sobre la aurora). */
.fq-ingreso-tarjeta.fq-vidrio {
    --fq-pad: 32px 30px;
    border-radius: 20px;
    background: var(--fq-cristal);
    box-shadow: var(--fq-sombra);
}
:root .fq-ingreso-tarjeta h2 {
    margin: 0;
    font-size: 26px;
    line-height: 1.2;
}
.fq-ingreso-sub {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--fq-suave);
}
.fq-ingreso-tarjeta .banner {
    margin: 18px 0 0;
    padding: 11px 14px;
    font-size: 13.5px;
}
.fq-ingreso-form {
    margin-top: 22px;
}
.fq-ingreso-form .field {
    margin-bottom: 16px;
}
.fq-ingreso-form .brj-error {
    margin: 5px 0 0;
    font-size: 12px;
    color: color-mix(in srgb, var(--rojo) 75%, var(--fq-tinta));
}
/* El campo que app.js marca como inválido: borde rojo (le gana al borde del sistema). */
:root:root:root .field :is(input, select, textarea).brj-invalid {
    border-color: color-mix(in srgb, var(--rojo) 75%, var(--fq-tinta));
}
.fq-ingreso-form .fq-cta {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
}
.fq-ingreso-ayuda {
    margin: 16px 0 0;
    text-align: center;
    font-size: 13.5px;
    color: var(--fq-suave);
}
.fq-ingreso-ayuda a {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.fq-ingreso-nota {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--fq-linea);
    font-size: 12px;
    color: var(--fq-suave);
}
.fq-ingreso-copy {
    margin: 22px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--fq-suave);
}
/* El ojito de ojo-clave.js hereda el color del campo; su anillo de foco es el del sistema. */
:root .fq-ingreso .ojo-clave:focus-visible {
    outline: 2px solid var(--fq-acento-texto);
    outline-offset: 1px;
}

/* --------------------- PÁGINAS PÚBLICAS (sin fondo animado) --------------------- */
.fq-pub-encabezado {
    padding: 20px 24px;
    background: var(--fq-lado);
    border-bottom: 1px solid var(--fq-linea);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
.fq-pub-encabezado-interior {
    max-width: 820px;
    margin: 0 auto;
}
.fq-pub-marca {
    font: 700 11px/1.4 var(--fq-texto);
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--fq-suave);
}
.fq-pub-encabezado-titulo {
    margin: 2px 0 0;
    font-family: var(--fq-titulo);
    font-size: 22px;
    font-weight: 500;
    color: var(--fq-tinta);
}
.fq-pub-contenido {
    flex: 1;
    padding: 28px 16px 56px;
}
.fq-pub-contenedor {
    max-width: 720px;
    margin: 0 auto;
}
:root .fq-pub-titulo {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.15;
}
.fq-pub-subtitulo {
    margin: 0 0 24px;
    font-size: 15.5px;
    color: var(--fq-suave);
}
.fq-pub-insignias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.fq-pub-tarjeta.panel {
    padding: 28px;
    margin-bottom: 20px;
}
.fq-pub-aviso,
.fq-pub-error {
    margin: 0 0 20px;
    padding: 13px 18px;
    font-size: 14px;
}
.fq-pub-error ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.fq-pub-error li {
    margin: 2px 0;
}
.fq-pub-fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}
@media (max-width: 520px) {
    .fq-pub-fila {
        grid-template-columns: 1fr;
    }
}
/* brujula.css solo da ancho y relleno a text / number / email / password: el teléfono
   (type="tel") se quedaba corto. Aquí todos los controles del formulario público miden igual. */
:root .fq-pub-campo :is(input, select, textarea) {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
}
.fq-pub-campo textarea {
    min-height: 100px;
    resize: vertical;
}
.fq-pub-campo .hint {
    margin-top: 6px;
    font-size: 12.5px;
}
/* Trampa para robots: fuera de la pantalla, sin tamaño y sin foco (ver nuevo-lead.php). */
.fq-pub-trampa {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
}
.fq-pub-enviar {
    padding: 12px 22px;
    font-size: 14.5px;
}
:root:root footer.fq-pub-pie {
    background: transparent;          /* el oscuro viejo pinta todo <footer> con el color de panel */
    padding: 24px 20px 32px;
    text-align: center;
    font-size: 12.5px;
    color: var(--fq-suave);
}

/* Seguimiento de un reporte: dirección, pasos y datos */
.fq-pub-direccion {
    margin: 0 0 14px;
    font-family: var(--fq-titulo);
    font-size: 22px;
    line-height: 1.3;
    color: var(--fq-tinta);
}
.fq-pub-pasos {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0 22px;
}
.fq-pub-pasos::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    height: 2px;
    background: color-mix(in srgb, var(--fq-tinta) 24%, transparent);
}
.fq-pub-paso {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.fq-pub-punto {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--fq-tinta) 36%, transparent);
    background: var(--fq-vidrio-solido);
    font-size: 19px;
}
.fq-pub-paso-nombre {
    margin-top: 6px;
    font: 700 11.5px/1.3 var(--fq-texto);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fq-suave);
}
.fq-pub-paso.hecho .fq-pub-punto,
.fq-pub-paso.actual .fq-pub-punto {
    background: var(--fq-acento-texto);
    border-color: var(--fq-acento-texto);
    color: var(--fq-sobre-acento);
}
.fq-pub-paso.actual .fq-pub-punto {
    box-shadow: 0 0 0 5px var(--fq-foco);
}
.fq-pub-paso.hecho .fq-pub-paso-nombre,
.fq-pub-paso.actual .fq-pub-paso-nombre {
    color: var(--fq-acento-texto);
}
.fq-pub-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 24px;
    margin-top: 6px;
}
.fq-pub-meta-etq {
    display: block;
    margin-bottom: 2px;
    font: 700 11.5px/1.3 var(--fq-texto);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--fq-suave);
}
.fq-pub-meta-val {
    font-size: 14.5px;
    color: var(--fq-tinta);
}
.fq-pub-chip {
    display: inline-flex;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--fq-acento) 55%, transparent);
    background: color-mix(in srgb, var(--fq-acento) 14%, transparent);
    font: 700 12px/1.3 var(--fq-texto);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fq-tinta);
}
.fq-pub-centro {
    text-align: center;
}
.fq-pub-nota {
    margin: 0 0 8px;
    font-size: 14px;
    color: var(--fq-suave);
}
.fq-pub-nota-fin {
    margin: 0;
    font-size: 13px;
    color: var(--fq-suave);
}
.fq-pub-nota-fin a {
    font-weight: 700;
}

/* Página de una sola caja: el 403 y la falla de ingreso por el Hub */
:root:root body.fq-pagina.fq-pub-solo {
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}
.fq-pub-caja.panel {
    width: 100%;
    max-width: 440px;
    padding: 32px;
}
.fq-pub-caja-centro {
    text-align: center;
}
.fq-pub-codigo {
    margin: 0;
    font-family: var(--fq-titulo);
    font-size: 58px;
    line-height: 1;
    color: var(--fq-acento-texto);   /* cifra grande, también AA */
}
:root .fq-pub-caja h1 {
    margin: 12px 0 0;
    font-size: 24px;
    line-height: 1.2;
}
:root:root .fq-pub-caja p {
    margin: 10px 0 0;
    font-size: 14.5px;
    color: var(--fq-suave);
}
:root:root .fq-pub-caja .fq-pub-pequeno {
    font-size: 12.5px;
}
.fq-pub-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}
.fq-pub-caja-centro .fq-pub-acciones {
    justify-content: center;
}
.fq-pub-acciones .fq-cta,
.fq-pub-acciones .btn {
    padding: 10px 18px;
    font-size: 14px;
    text-decoration: none;
}

/* Avisos de error DENTRO del layout (404 y «en construcción»): un panel centrado.
   (El 403 es página suelta y usa .fq-pub-caja, arriba.) */
.fq-aviso-error.panel {
    padding: 48px 24px;
    text-align: center;
}
.fq-aviso-error--punteado.panel {
    border-style: dashed;
}
.fq-aviso-error-codigo {
    margin: 0;
    font-family: var(--fq-titulo);
    font-size: 58px;
    line-height: 1;
    color: var(--fq-acento-texto);   /* cifra grande, también AA */
}
.fq-aviso-error-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--amarillo) 14%, transparent);
    color: color-mix(in srgb, var(--amarillo) 70%, var(--fq-tinta));
}
.fq-aviso-error-icono svg {
    width: 24px;
    height: 24px;
}
:root .fq-aviso-error h2 {
    margin: 14px 0 0;
    font-size: 22px;
}
.fq-aviso-error-texto {
    max-width: 460px;
    margin: 10px auto 0;
    font-size: 14px;
    color: var(--fq-suave);
}
.fq-aviso-error .btn {
    margin-top: 24px;
    text-decoration: none;
}

/* Al imprimir el seguimiento: sin vidrio ni sombras, en blanco y negro del papel. */
@media print {
    :root:root body.fq-pagina {
        background: none;
        color: CanvasText;
    }
    .fq-pub-tarjeta.panel,
    .fq-pub-caja.panel {
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Con «reducir movimiento»: los botones, las tarjetas, la ventana y la línea de las pestañas no se mueven,
   y las páginas cambian sin viaje de títulos. */
@media (prefers-reduced-motion: reduce) {
    .fq-linea {
        transition: none;
    }
    :root .btn,
    :root .chip,
    :root .card,
    :root .u-cargador-barra,
    :root:root .input,
    :root:root .field :is(input, select, textarea) {
        transition: none;
    }
    :root .btn:active {
        transform: none;
    }
    /* Ingreso, formularios públicos y errores (tarea 10) */
    .fq-ingreso .fq-vidrio,
    .fq-ingreso .fq-cta,
    .fq-pub-tarjeta,
    .fq-pub-acciones .fq-cta,
    .fq-pub-acciones .btn {
        transition: none;
    }
    .fq-ingreso .fq-cta:active,
    .fq-pub-acciones .fq-cta:active {
        transform: none;
    }
    :root .modal {
        animation: none;
    }
    /* Las barras de la ficha quedan llenas de una vez. */
    :root .fq-barra {
        animation: none;
    }
    /* El giro de espera deja de girar, pero sigue diciendo «trabajando»: un
       aro con un arco del acento (arriba y a la derecha), quieto, junto al
       texto de espera de cada formulario. */
    :root .brj-spinner {
        animation: none;
        border-right-color: var(--fq-acento-texto);
    }
    @view-transition {
        navigation: none;
    }
}

/* =====================================================================
   PANTALLAS SECUNDARIAS  (tarea 12)

   Comparador, diff de fichas, estado de la IA y listado de fichas. Antes
   cada vista llevaba su propio <style> con grises y hexadecimales fijos
   (ilegibles en uno de los dos modos); ahora todo sale de las variables
   del tema y de los colores de significado (--verde / --amarillo / --rojo),
   con las mismas mezclas que los avisos y las insignias:
     - fondo   = el color al 8-14 % sobre el vidrio sólido o transparente;
     - texto   = el color al 70-75 % mezclado con --fq-tinta (llega a 4,5:1
                 en los dos modos; tests/diseno/prueba_secundarias.php lo mide);
     - el resto del texto es --fq-tinta o --fq-suave, como en todo el sistema.
   ===================================================================== */

/* Cabeceras de pantalla: rótulo pequeño, título y subtítulo. */
:root .cmp-header,
:root .fdif-header {
    margin-bottom: 14px;
}
:root .cmp-lbl,
:root .fdif-header-lbl,
:root .fdif-tag,
:root .fdif-vlbl,
:root .cmp-selector-col label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--fq-suave);
}
:root .cmp-lbl,
:root .fdif-header-lbl {
    margin-bottom: 4px;
    font-size: 11px;
}
:root .fdif-tag,
:root .cmp-selector-col label,
:root .fdif-vlbl {
    font-size: 10.5px;
}
:root .fdif-vlbl {
    margin-bottom: 4px;
}
:root .cmp-title,
:root .fdif-title {
    margin: 0 0 4px;
    font-size: 24px;
    color: var(--fq-tinta);
}
:root .cmp-sub,
:root .fdif-header-sub {
    font-size: 13px;
    color: var(--fq-suave);
}

/* ------------------------------ Comparador ------------------------------ */
:root .cmp-selector {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 14px;
    margin-bottom: 16px;
}
:root .cmp-selector-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
:root .cmp-selector-col select {
    width: 100%;
    max-width: 100%;
    padding: 8px 10px;
    font-size: 13px;
}
:root .cmp-vs {
    align-self: center;
    padding: 0 6px;
    font-family: var(--fq-titulo);
    font-size: 20px;
    color: var(--fq-suave);
}
:root .cmp-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}
:root .cmp-card {
    position: relative;
    margin-bottom: 0;
    padding: 16px 18px 18px;
}
:root .cmp-card-letra {
    position: absolute;
    top: -10px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fq-acento-texto);
    color: var(--fq-sobre-acento);
    font-weight: 700;
}
:root .cmp-card-cod {
    display: inline-block;
    margin: 4px 0 8px 32px;
    padding: 3px 8px;
    border: 1px solid var(--fq-borde);
    border-radius: 6px;
    background: color-mix(in srgb, var(--fq-acento) 14%, transparent);
    color: var(--fq-tinta);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
}
:root .cmp-card-dir {
    font-size: 15px;
    font-weight: 600;
    color: var(--fq-tinta);
}
:root .cmp-card-mun {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--fq-suave);
}
:root .cmp-card-prio {
    display: inline-block;
    margin-top: 10px;
}
/* La tabla es table.data; aquí solo lo propio del comparador. Estas reglas
   llevan más especificidad que `:root:root table.data th` (0,3,2) para las
   celdas de rótulo de cada fila. */
:root:root table.data.cmp-tabla .cmp-fila th {
    width: 30%;
    background: transparent;
    border-bottom: 1px solid var(--fq-linea);
    color: var(--fq-suave);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
:root table.data.cmp-tabla .cmp-fila-dif {
    background: color-mix(in srgb, var(--amarillo) 7%, transparent);
}
:root table.data.cmp-tabla .cmp-fila-dif td {
    font-weight: 600;
}
/* El hover de table.data (0,3,3) pierde contra la regla de arriba (0,4,1): se repite aquí, con un tinte apenas más fuerte. */
:root table.data.cmp-tabla tbody .cmp-fila-dif:hover {
    background: color-mix(in srgb, var(--amarillo) 9%, transparent);
}
/* Además del color, una marca a la izquierda: la diferencia no depende solo del tono. */
:root:root table.data.cmp-tabla .cmp-fila-dif th {
    box-shadow: inset 3px 0 0 var(--amarillo);
    color: var(--fq-tinta);
}
:root:root table.data.cmp-tabla .cmp-seccion th {
    background: color-mix(in srgb, var(--fq-acento) 12%, transparent);
    border-bottom: 1px solid var(--fq-linea);
    color: var(--fq-tinta);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}
:root .cmp-nulo,
:root .fdif-nulo {
    font-style: italic;
    color: var(--fq-suave);
}

/* ----------------------- Listado de fichas: pastillas ----------------------- */
/* «Salvedades» (aviso) y la cuenta de pendientes rojos (alerta): marcas de la ficha, no
   estados de documento. Misma receta que los avisos: fondo = color al 12 % sobre el vidrio
   sólido, texto = color al 75 % con la tinta. Van sobre .brj-badge, que pone la forma. */
:root .fichas-pill-aviso {
    background: color-mix(in srgb, var(--amarillo) 12%, var(--fq-vidrio-solido));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amarillo) 42%, transparent);
    color: color-mix(in srgb, var(--amarillo) 75%, var(--fq-tinta));
}
:root .fichas-pill-alerta {
    background: color-mix(in srgb, var(--rojo) 12%, var(--fq-vidrio-solido));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rojo) 40%, transparent);
    color: color-mix(in srgb, var(--rojo) 75%, var(--fq-tinta));
}
/* Ayuda del estado vacío: centrada, con su margen superior de 6 px (u-cx520 lo pisaba). */
:root .fichas-vacio-ayuda {
    max-width: 520px;
    margin: 6px auto 16px;
}

/* ------------------------- Cambios entre versiones ------------------------- */
:root .fdif-vs {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin: 16px 0;
    padding: 14px;
}
:root .fdif-vs-col {
    flex: 1 1 0;
    padding: 8px 12px;
    border-radius: 10px;
}
:root .fdif-vs-antes {
    background: color-mix(in srgb, var(--rojo) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--rojo) 35%, transparent);
}
:root .fdif-vs-despues {
    background: color-mix(in srgb, var(--verde) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--verde) 35%, transparent);
}
:root .fdif-vs-v {
    margin: 2px 0 4px;
    font-family: var(--fq-titulo);
    font-size: 22px;
    font-weight: 500;
    color: var(--fq-tinta);
}
:root .fdif-vs-meta {
    font-size: 12px;
    color: var(--fq-suave);
}
:root .fdif-arrow {
    display: flex;
    align-items: center;
    font-size: 22px;
    color: var(--fq-suave);
}
:root .fdif-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 18px;
}
:root .fdif-count {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .3px;
}
:root .fdif-count-mod,
:root .fdif-modificado .fdif-icono {
    background: color-mix(in srgb, var(--amarillo) 14%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--amarillo) 42%, transparent);
    color: color-mix(in srgb, var(--amarillo) 70%, var(--fq-tinta));
}
:root .fdif-count-add,
:root .fdif-agregado .fdif-icono {
    background: color-mix(in srgb, var(--verde) 12%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--verde) 38%, transparent);
    color: color-mix(in srgb, var(--verde) 75%, var(--fq-tinta));
}
:root .fdif-count-del,
:root .fdif-eliminado .fdif-icono {
    background: color-mix(in srgb, var(--rojo) 12%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--rojo) 40%, transparent);
    color: color-mix(in srgb, var(--rojo) 75%, var(--fq-tinta));
}
:root .fdif-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
:root .fdif-item {
    overflow: hidden;
    border: 1px solid var(--fq-borde);
    border-radius: 12px;
    background: color-mix(in srgb, var(--fq-tinta) 4%, transparent);
}
:root .fdif-modificado { border-left: 4px solid var(--amarillo); }
:root .fdif-agregado   { border-left: 4px solid var(--verde); }
:root .fdif-eliminado  { border-left: 4px solid var(--rojo); }
:root .fdif-ruta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--fq-linea);
    background: color-mix(in srgb, var(--fq-tinta) 5%, transparent);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--fq-tinta);
}
:root .fdif-icono {
    display: inline-flex;
    flex: 0 0 20px;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
}
:root .fdif-valores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
:root .fdif-agregado .fdif-valores,
:root .fdif-eliminado .fdif-valores {
    grid-template-columns: 1fr;
}
:root .fdif-antes,
:root .fdif-despues {
    min-width: 0;
    padding: 10px 14px;
}
:root .fdif-antes {
    border-right: 1px solid var(--fq-linea);
    background: color-mix(in srgb, var(--rojo) 6%, transparent);
}
:root .fdif-despues {
    background: color-mix(in srgb, var(--verde) 6%, transparent);
}
:root .fdif-val {
    font-size: 12.5px;
    line-height: 1.45;
    word-break: break-word;
    color: var(--fq-tinta);
}
:root .fdif-json {
    margin: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--fq-tinta) 6%, transparent);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11.5px;
    white-space: pre-wrap;
    word-break: break-word;
}
:root .fdif-otras {
    margin-top: 18px;
    padding: 12px 14px;
}
:root .fdif-otras-lbl {
    margin-bottom: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--fq-suave);
}
:root .fdif-otras-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
:root .fdif-empty {
    margin-top: 20px;
    padding: 30px 20px;
    text-align: center;
}
:root .fdif-empty strong {
    display: block;
    margin-bottom: 6px;
    font-size: 15px;
}
:root .fdif-empty p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--fq-suave);
}

@media (max-width: 720px) {
    :root .cmp-selector { grid-template-columns: 1fr; }
    :root .cmp-vs { display: none; }
    :root .cmp-cards { grid-template-columns: 1fr; }
    :root .fdif-vs { flex-direction: column; }
    :root .fdif-arrow { justify-content: center; transform: rotate(90deg); }
    :root .fdif-valores { grid-template-columns: 1fr; }
    :root .fdif-antes { border-right: 0; border-bottom: 1px solid var(--fq-linea); }
}

/* --------------------------- Estado de la IA --------------------------- */
:root .ia-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin: 14px 0 6px;
}
:root .ia-card {
    padding: 14px 16px;
}
:root .ia-card-label {
    margin-bottom: 6px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
}
:root .ia-card-value {
    font-size: 22px;
    line-height: 1.15;
}
/* Resultado de la prueba en vivo. `:root:root:root` iguala y supera los
   `:root[data-theme="dark"] .ia-prueba.ok` de brujula-fase3.css, que solo
   cambiaban el color del texto. */
:root .ia-prueba {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
}
:root:root:root .ia-prueba.ok {
    background: color-mix(in srgb, var(--verde) 11%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--verde) 38%, transparent);
    color: color-mix(in srgb, var(--verde) 75%, var(--fq-tinta));
}
:root:root:root .ia-prueba.ko {
    background: color-mix(in srgb, var(--rojo) 11%, var(--fq-vidrio-solido));
    border: 1px solid color-mix(in srgb, var(--rojo) 40%, transparent);
    color: color-mix(in srgb, var(--rojo) 75%, var(--fq-tinta));
}
/* El texto de apoyo de la prueba (.muted) hereda el color del aviso para no perder contraste. */
:root .ia-prueba .muted {
    color: inherit;
}
/* Tablas de uso: celdas más apretadas y cifras alineadas a la derecha. */
:root .ia-tabla td,
:root .ia-tabla th {
    padding: 7px 10px;
}
:root table.data .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* =====================================================================
   IMPRESIÓN DE LAS PANTALLAS DE LA APP (revisión final, hallazgo 1)

   Al imprimir una ficha, un estudio o el comparador sale solo el contenido:
   ni la barra lateral (es un <aside>, y style.css solo oculta header,
   footer y nav), ni el encabezado, ni la barra del Hub, ni los botones del
   aviso SAE. Los colores ya son los del papel (bloque «PAPEL» al principio
   de este archivo); aquí se quitan las superficies: las piezas de vidrio
   quedan transparentes, sin desenfoque (Chrome las imprime como imagen y
   el texto sale borroso) y sin sombras. Las piezas comunes (.fq-*) se
   apagan en familia-qbk.css.

   Lo que NO se toca: el print-color-adjust: exact de style.css sigue
   valiendo para los colores con significado (código de color de la ficha,
   insignias, semáforo, barras), y las reglas de impresión de la ficha
   (style.css: ventanas, cargador y botones del formulario ocultos, secciones
   sin cortar entre hojas) siguen igual.

   Especificidad: `:root:root` (0,3,0) le gana a `.sidebar.fq-vidrio`
   (display: flex en <= 768 px, que también vale en papel: una hoja carta
   mide menos de 768 px de ancho) y a los `:root[data-theme="dark"] …` del
   oscuro viejo.
   ===================================================================== */
@media print {
    :root:root .sidebar,
    :root:root .topbar,
    :root:root footer.brj-pie,
    :root:root .qbkbar,
    :root:root .qbk-saltar,
    :root:root .brj-menu-btn,
    :root:root .banner-sae-acciones,
    :root:root .flash-cerrar {
        display: none;
    }
    /* Ninguna pieza lleva desenfoque ni sombra en papel. */
    :root:root:root *,
    :root:root:root *::before,
    :root:root:root *::after {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: none;
        text-shadow: none;
    }
    /* Superficies de vidrio: transparentes (el papel es el fondo). */
    :root:root .panel,
    :root:root .exp-card,
    :root:root .card,
    :root:root .legend-box,
    :root:root .embudo,
    :root:root .empty,
    :root:root .tabbar,
    :root:root .tabbar + .tab-body,
    :root:root .detail-head,
    :root:root .modal,
    :root:root .stat-card,
    :root:root .ia-card {
        background: transparent;
    }
    /* El aviso SAE sigue saliendo (es información), pero sin el rojo pleno:
       borde rojo y tinta oscura. */
    :root:root .banner-sae {
        background: transparent;
        color: var(--fq-tinta);
        border: 2px solid var(--rojo);
    }
    :root:root .banner-sae a {
        color: var(--fq-tinta);
    }
    /* Las barras de la ficha salen llenas aunque se imprima mientras se llenan. */
    :root .fq-barra {
        animation: none;
    }
}


/* =====================================================================
   MARCA  (logo completo e íconos de la pestaña · 2026-10-26)

   El logo «BRÚJULA · Análisis de lotes» son dos imágenes (partials/_logo.php):
   .fq-logo-negro y .fq-logo-blanco. Se ve la que contrasta con el fondo, con
   los mismos criterios de modo que el resto del tema:
     - oscuro (defecto)            → se ve la blanca
     - claro explícito             → :root[data-theme="light"]  → la negra
     - claro por preferencia del sistema, si la persona no eligió oscuro
                                   → @media (prefers-color-scheme: light)
   Las dos llevan el mismo texto alternativo; la que no se ve, con display:none,
   no se anuncia. Los íconos de la pestaña (favicon.svg, favicon-32.png y
   apple-touch-icon.png) no llevan CSS de la página: favicon.svg trae su propio
   <style> con prefers-color-scheme, y partials/_iconos.php los enlaza.
   ===================================================================== */
.fq-logo {
    display: block;
    width: 100%;
    height: auto;
}
.fq-logo-negro {
    display: none;
}
:root[data-theme="light"] .fq-logo-negro {
    display: block;
}
:root[data-theme="light"] .fq-logo-blanco {
    display: none;
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .fq-logo-negro {
        display: block;
    }
    :root:not([data-theme="dark"]) .fq-logo-blanco {
        display: none;
    }
}

/* Barra lateral: el logo ocupa el ancho útil de la barra (220 px - 2 x 18 de margen) y, en el
   cajón del celular (260 px), no pasa de 200 px para no verse desmesurado. */
.sidebar .brand.fq-marca {
    display: block;
    margin-bottom: 28px;
    border-radius: 8px;
}
.sidebar .brand.fq-marca .fq-logo {
    max-width: 184px;
}
:root .sidebar .brand.fq-marca:focus-visible {
    outline: 2px solid var(--fq-acento-texto);
    outline-offset: 4px;
}
@media (max-width: 768px) {
    .sidebar .brand.fq-marca .fq-logo {
        max-width: 200px;
    }
}

/* Ingreso: el logo va arriba de la tarjeta de vidrio, dentro del <h1>. El <h1> del ingreso
   traía tamaño de letra y sangría para el nombre en texto; aquí solo contiene la imagen. */
:root .fq-ingreso-marca h1.fq-ingreso-logo {
    margin: 0;
    padding: 0;
    font-size: 0;
    line-height: 0;
    letter-spacing: 0;
}
.fq-ingreso-tarjeta .fq-ingreso-marca {
    margin-bottom: 20px;
}
.fq-ingreso-logo .fq-logo {
    max-width: 280px;
    margin: 0 auto;
}

/* Papel: el logo sale negro (el blanco no se vería sobre la hoja), aunque la pantalla esté en oscuro. */
@media print {
    :root:root:root .fq-logo-blanco {
        display: none;
    }
    :root:root:root .fq-logo-negro {
        display: block;
    }
}