/* =============================================================================
   XQV-DOC - Hoja de estilos principal
   ---------------------------------------------------------------------------
   Escrita a mano, servida desde el propio servidor. Sin CDN, sin
   preprocesadores, sin bundler. Restriccion de entorno seccion 0.3 del prompt:
   un sistema validado no puede depender de un recurso de terceros que cambie
   fuera de control de cambios.

   Paleta extraida del sitio del cliente. Ver docs/branding.md.

   Capa visual tipo Apple desde el 2026-09-28 (docs/rediseno-2026.md s15):
   neutros de Apple, Inter, tarjetas de 18px sobre fondo gris, navegacion
   fija translucida, botones en capsula. Lo que NO cambio: fila de 36px,
   minimo de 14px en tablas, estado con color + texto + icono, acciones
   siempre visibles, un solo tema.

   Indice
     1. Tokens
     2. Reinicio y base
     3. Accesibilidad
     4. Estructura: barra superior, navegacion, contenido, pie
     5. Paneles y encabezados de pagina
     6. Tablas
     7. Indicadores de estado (color + texto + icono)
     8. Formularios
     9. Botones
    10. Avisos
    11. Pantallas de acceso
    12. Utilidades
    13. Responsive
    14. Impresion
   ========================================================================== */


/* =============================================================================
   1. TOKENS
   ========================================================================== */

:root {
    /* -- Marca: hex reales del sitio (docs/branding.md s1.1) ---------------
       Sin cambio en ningun rediseno: son los hex del cliente. Lo que cambia
       es DONDE se usan. El primario queda reservado a la accion primaria, al
       estado activo de navegacion y a los enlaces. Ver
       docs/rediseno-2026.md s2 y s15.                                        */
    --xqv-primary:        #5B087A;   /* rgb(91,8,122)  - 65 ocurrencias      */
    --xqv-primary-light:  #7E3896;   /* muestreado del isotipo               */
    --xqv-primary-dark:   #45055C;

    /* -- Neutros de Apple ----------------------------------------------------
       Grises limpios, sin tinte (2026-09-28). El 2026-09-04 se habian tenido
       de violeta; con neutros puros el morado es el UNICO color con croma de
       la pantalla y por eso se lee mas como accion. Contraste verificado con
       docs/evidencia-fase0/verificacion-contraste.php. Se anota el peor de
       los cuatro fondos (papel, superficie, blanco, superficie fuerte).      */
    --xqv-ink:            #1D1D1F;   /* 13.78:1                              */
    --xqv-ink-soft:       #424245;   /*  8.20:1                              */
    --xqv-muted:          #636366;   /*  4.90:1 sobre la superficie fuerte,  */
                                     /*  5.50:1 sobre papel                  */
    --xqv-bg:             #F5F5F7;   /* papel: fondo agrupado de Apple       */
    --xqv-white:          #FFFFFF;   /* tarjetas y paneles                   */
    --xqv-surface-soft:   #F5F5F7;   /* campos, filtros, bloques de codigo   */
    --xqv-surface:        #E8E8ED;   /* fila resaltada, control segmentado   */
    --xqv-border:         #D2D2D7;   /* contornos: tarjetas de opcion, tabla */
    --xqv-hairline:       #E5E5EA;   /* separador entre filas                */
    --xqv-hover:          #FAFAFC;   /* fila o resumen bajo el puntero       */
    --xqv-fill-hover:     #EDEDF0;   /* campo con relleno bajo el puntero    */
    --xqv-wash:           #F3EDF6;   /* tinte de marca: boton secundario,    */
                                     /* navegacion activa                    */
    --xqv-wash-strong:    #EADFF0;   /* el mismo tinte, bajo el puntero      */

    /* -- Estado documental --------------------------------------------------
       ATENCION: estos NO son colores de la marca XQV. Son derivados nuestros,
       elegidos por contraste WCAG AA. Autorizados por el responsable del
       proyecto el 2026-09-02, ajustados el 2026-09-04 para conservar AA
       sobre todos los fondos del sistema, no solo sobre blanco. Pendientes
       de ratificacion del cliente.
       Ver docs/branding.md s1.2 y docs/assumptions.md D-04.
       TODO: confirmar con cliente

       El menor de los cuatro ratios es el que se anota.                      */
    --st-borrador:        #5F5A66;   /* 5.48:1 AA   */
    --st-revision:        #8A5000;   /* 5.33:1 AA   */
    --st-aprobado:        #1D4ED8;   /* 5.49:1 AA   */
    --st-vigente:         #16653D;   /* 5.80:1 AA   */
    --st-obsoleto:        #453F4B;   /* 8.33:1 AA   */
    --st-cancelado:       #A11B1B;   /* 6.40:1 AA   */

    /* Fondo tenue de cada indicador: el color del estado al 10 % sobre
       blanco. Se anota el contraste del texto del indicador sobre SU fondo. */
    --st-borrador-bg:     #EFEEF0;   /* 5.78:1 */
    --st-revision-bg:     #F3EEE6;   /* 5.63:1 */
    --st-aprobado-bg:     #E8EDFB;   /* 5.72:1 */
    --st-vigente-bg:      #E8F0EC;   /* 6.11:1 */
    --st-obsoleto-bg:     #ECECED;   /* 8.61:1 */
    --st-cancelado-bg:    #F6E8E8;   /* 6.56:1 */

    --xqv-ok:             var(--st-vigente);
    --xqv-ok-bg:          #F1F8F3;
    --xqv-warn:           var(--st-revision);
    --xqv-warn-bg:        #FBF6EE;
    --xqv-danger:         var(--st-cancelado);
    --xqv-danger-bg:      #FCF2F2;
    --xqv-danger-bg-strong: #F7E3E3;

    /* -- Tipografia ---------------------------------------------------------
       Dos familias, dos trabajos. Auto-hospedadas en /assets/fonts, sin CDN
       (restriccion de entorno s0.3: un recurso de terceros que cambia fuera
       de control de cambios no entra en un sistema validado).

       Inter lleva todo el texto, titulos incluidos (2026-09-28). Sustituye a
       Public Sans en el cuerpo y a Fraunces en los titulos: una sola familia
       sans para todo es como ordena Apple una pantalla, por tamano y peso.
       Conserva lo que se le pidio a Public Sans: cifras tabulares y, con las
       variantes cv05 y cv08 activadas en body, 1, l e I inconfundibles a
       14px, que es el tamano al que se lee un codigo de documento.

       IBM Plex Mono sigue llevando codigos, hashes y numeros de secuencia.
       SF Pro no se puede usar: su licencia solo permite plataformas Apple.   */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', 'SF Mono', Menlo, monospace;

    /* -- Forma --------------------------------------------------------------
       Tres radios por funcion. La capsula es de TODOS los botones y de los
       indicadores: la jerarquia entre botones la da el relleno, no la forma
       (como en iOS y macOS). */
    --radius:      8px;   /* campos pequenos, codigo                       */
    --radius-md:  12px;   /* bloques dentro de un panel: avisos, opciones  */
    --radius-lg:  18px;   /* paneles y tarjetas                            */
    --radius-pill: 980px; /* botones e indicadores de estado               */

    /* Elevacion: los paneles ya no llevan borde; se separan del fondo gris
       por color y por esta sombra minima. El anillo de 1px al 4 % hace de
       borde en los monitores de planta con poco contraste. */
    --shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .04);

    /* Movimiento: corto y sin rebote. Se anula con prefers-reduced-motion. */
    --ease: cubic-bezier(.25, .1, .25, 1);

    /* -- Escala de espaciado, base 4px --------------------------------------
       Todo margen y todo relleno sale de aqui. Sin valores sueltos.          */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* Densidad alta: fila de tabla de 36px (docs/branding.md s4).
       NO se sube. Pasar a 56px reduce de 22 a 14 los documentos visibles sin
       desplazarse, y un listado maestro que obliga a hacer scroll es un
       listado peor. Ver docs/rediseno-2026.md s1.                            */
    --row-height: 36px;
}

/* -----------------------------------------------------------------------------
   Tipografias auto-hospedadas.

   Inter es una fuente VARIABLE: un solo archivo cubre todos los pesos y el
   tamano optico, por eso font-weight declara un rango y no un valor. Es el
   archivo oficial completo del autor, sin subconjuntar, para no perder las
   variantes cv05 y cv08.

   Public Sans y Fraunces ya no se declaran aqui. publicsans-var.woff2 sigue
   en /assets/fonts porque la usa install.css.

   Procedencia y checksums en lib/MANIFEST.md. Licencia OFL 1.1, copia en
   /assets/fonts/licencias/.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/inter-var.woff2') format('woff2-variations'),
         url('/assets/fonts/inter-var.woff2') format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/plexmono-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url('/assets/fonts/plexmono-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}


/* =============================================================================
   2. REINICIO Y BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden tiene que ganar SIEMPRE.
   La regla del navegador es [hidden] { display: none }, y cualquier regla de
   autor con display: grid o flex la pisa por especificidad. Sin este !important,
   ocultar un elemento desde JavaScript con .hidden = true no surtia efecto en
   .role-grid ni en .role-card: en el alta se veian las plantillas de todos los
   tipos y se podia elegir una que no correspondia, con el servidor rechazando
   el alta despues. */
[hidden] { display: none !important; }

/* scroll-padding: la navegacion es fija, y sin esto un salto a un ancla
   (#contenido desde el enlace de salto) deja el destino debajo de ella. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 64px; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -.006em;
    color: var(--xqv-ink);
    background: var(--xqv-bg);
    -webkit-font-smoothing: antialiased;
    /* Cifras tabulares en todo el sistema: las columnas de fechas, versiones
       y numeros de secuencia se leen alineadas o no se leen. */
    font-variant-numeric: tabular-nums;
    /* cv05: l minuscula con cola. cv08: I mayuscula con remates. Con ellas
       1, l e I no se confunden en un codigo de documento. */
    font-feature-settings: 'cv05', 'cv08';
}

.body--centered {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 2rem 1rem;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--sp-2);
    line-height: 1.25; font-weight: 600;
    text-wrap: balance;
}
/* Titulo de pantalla: sans, grueso y con el espaciado cerrado, como un
   titulo grande de iOS. Ya no va en morado: es el titulo, no una accion. */
h1 {
    font-size: 2rem; font-weight: 700;
    line-height: 1.1; letter-spacing: -.028em;
}
h2 { font-size: 1.1rem; letter-spacing: -.017em; }
h3 { font-size: .95rem; letter-spacing: -.01em; }
p  { margin: 0 0 .7rem; }
ul, ol { margin: 0 0 .7rem; padding-left: 1.3rem; }

a { color: var(--xqv-primary); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: rgba(91, 8, 122, .35); }
a:hover { color: var(--xqv-primary-dark); text-decoration-color: currentColor; }

code, .mono { font-family: var(--font-mono); font-size: .875em; letter-spacing: 0; }
code {
    background: var(--xqv-surface-soft);
    border-radius: 6px; padding: .08em .36em;
    word-break: break-all;
}

img { max-width: 100%; height: auto; }

/* -- Movimiento ---------------------------------------------------------------
   Transiciones cortas en lo que cambia de estado al tocarlo. Solo color,
   fondo, borde, sombra y escala: nada que desplace el contenido. */
a, .btn, .mainnav__link, .subnav__link, .pager__link, .role-card,
.table tbody tr, .disclosure > summary,
.field input, .field select, .field textarea {
    transition: background-color .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), box-shadow .18s var(--ease),
                transform .12s var(--ease);
}


/* =============================================================================
   3. ACCESIBILIDAD
   ========================================================================== */

.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;
}

.skip-link {
    position: absolute; left: -9999px;
    background: var(--xqv-primary); color: var(--xqv-white);
    padding: .6rem 1rem; z-index: 100; text-decoration: none;
    border-radius: var(--radius-pill);
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* Foco visible en todo elemento interactivo. Los campos de formulario tienen
   su propio anillo (seccion 8). */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--xqv-primary-light);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* =============================================================================
   4. ESTRUCTURA
   ---------------------------------------------------------------------------
   Patron de la web de Apple: la barra global (logotipo y usuario) se va con
   el desplazamiento y la navegacion queda fija arriba, translucida, dejando
   ver desenfocado lo que pasa por debajo. Las dos filas llevan el mismo
   blanco translucido para leerse como una sola barra.
   ========================================================================== */

.topbar { background: rgba(255, 255, 255, .8); color: var(--xqv-ink); }
.topbar__inner {
    max-width: 1280px; margin: 0 auto; padding: .7rem 1.25rem .35rem;
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.topbar__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.topbar__brand img { width: 118px; height: auto; }
.topbar__system {
    color: var(--xqv-ink-soft); font-weight: 600;
    font-size: .8rem; letter-spacing: .01em;
    padding-left: .85rem; border-left: 1px solid var(--xqv-hairline);
}
.topbar__spacer { flex: 1 1 auto; }
.topbar__user { text-align: right; line-height: 1.25; }
.topbar__name { display: block; font-size: .87rem; font-weight: 600; }
.topbar__role { display: block; font-size: .76rem; color: var(--xqv-muted); }
.topbar__logout { margin: 0; }

.mainnav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.mainnav__list {
    max-width: 1280px; margin: 0 auto; padding: .4rem 1.25rem;
    list-style: none; display: flex; gap: .25rem; overflow-x: auto;
    /* Sigue desplazandose en pantallas estrechas, sin barra visible. */
    scrollbar-width: none;
}
.mainnav__list::-webkit-scrollbar { display: none; }
.mainnav__link {
    display: block; padding: .38rem .9rem;
    font-size: .87rem; font-weight: 500; white-space: nowrap;
    color: var(--xqv-ink-soft); text-decoration: none;
    border-radius: var(--radius-pill);
}
.mainnav__link:hover { background: rgba(0, 0, 0, .05); color: var(--xqv-ink); }
.mainnav__link.is-active { background: var(--xqv-wash); color: var(--xqv-primary); font-weight: 600; }

.content { max-width: 1280px; margin: 0 auto; padding: 2rem 1.25rem 3.5rem; }

.appfoot {
    max-width: 1280px; margin: 0 auto; padding: 1.5rem 1.25rem 2rem;
    border-top: 1px solid var(--xqv-hairline);
    font-size: .75rem; color: var(--xqv-muted); text-align: center;
}
.appfoot p { margin: 0 0 .2rem; }


/* =============================================================================
   5. PANELES Y ENCABEZADOS
   ========================================================================== */

.page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-head h1 { margin: 0; color: var(--xqv-ink); }
.page-head__sub { margin: .4rem 0 0; font-size: .94rem; color: var(--xqv-muted); }

/* Tarjeta blanca sobre el fondo gris, sin borde, como las de Apple. */
.panel {
    background: var(--xqv-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 1.4rem 1.6rem;
    margin-bottom: var(--sp-4);
}
.panel--muted { background: var(--xqv-surface-soft); box-shadow: none; }
.panel--error { max-width: 560px; margin: 3rem auto; text-align: center; }

/* Titulo de seccion: se distingue por tamano y peso, no por versalitas de
   11px ni por un filete. Es como Apple ordena una pantalla. */
.panel__title {
    display: flex; align-items: center; gap: .1rem;
    margin: 0 0 var(--sp-4);
    color: var(--xqv-ink);
    font-size: 1.18rem; font-weight: 600; letter-spacing: -.02em;
}

.error__code {
    font-size: 3.5rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
    color: var(--xqv-surface); margin: 0 0 .25rem;
}

.empty {
    padding: var(--sp-5); text-align: center;
    color: var(--xqv-muted); font-size: .87rem;
}

/* Resumen por estado: tarjetas grises dentro del panel. El estado lo dice el
   indicador (color + texto + icono); la cifra toma el color del estado como
   refuerzo, en lugar del filete lateral que llevaban antes. */
.stat-row {
    display: grid; gap: .75rem;
    /* auto-fit: en escritorio las seis tarjetas del tablero van en una fila
       y las cuatro de administracion se reparten el ancho. En tableta pasan
       a tres por fila (s13): a seis, el indicador no cabe en la tarjeta. */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.stat {
    padding: .9rem 1rem .8rem;
    border-radius: var(--radius-md); background: var(--xqv-surface-soft);
}
.stat__num {
    display: block; font-size: 1.85rem; font-weight: 700; line-height: 1.1;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.stat__label { display: block; margin-top: .45rem; }

.stat--borrador  .stat__num { color: var(--st-borrador); }
.stat--revision  .stat__num { color: var(--st-revision); }
.stat--aprobado  .stat__num { color: var(--st-aprobado); }
.stat--vigente   .stat__num { color: var(--st-vigente); }
.stat--obsoleto  .stat__num { color: var(--st-obsoleto); }
.stat--cancelado .stat__num { color: var(--st-cancelado); }


/* =============================================================================
   6. TABLAS - densidad alta, minimo 14px
   ========================================================================== */

.table-wrap { overflow-x: auto; margin-bottom: .75rem; }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td {
    padding: .45rem .6rem;
    height: var(--row-height);
    border-bottom: 1px solid var(--xqv-hairline);
    text-align: left; vertical-align: middle;
}
.table tbody tr:last-child > td { border-bottom: 0; }

/* Encabezado: etiqueta gris en minusculas, sin banda ni versalitas. El fondo
   es opaco a proposito: la fila es sticky y las filas pasan por debajo. */
.table thead th {
    background: var(--xqv-white); color: var(--xqv-muted);
    font-size: .78rem; font-weight: 600;
    white-space: nowrap; position: sticky; top: 0;
    border-bottom: 1px solid var(--xqv-border);
}

/* Sin filas cebra. El separador ya ordena la tabla, y la cebra competia con
   la barra de estado de la izquierda. */
.table tbody tr:hover { background: var(--xqv-hover); }

/* Un listado de codigos no subraya cada renglon: la columna entera es de
   enlaces y se reconoce por posicion (WCAG 1.4.1 se refiere al texto
   corrido). Al pasar el puntero vuelve el subrayado. */
.table a { text-decoration: none; font-weight: 500; }
.table a:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Barra de estado a la izquierda de la fila.

   Deja leer el estado ANTES de leer la fila, sin gastar una columna ni subir
   la altura. Es refuerzo, NO sustituto: el indicador con color + texto + icono
   sigue en su propia columna. Una barra de color por si sola no sobrevive a
   una fotocopia en blanco y negro, que es justo el escenario de auditoria que
   obliga a la regla (docs/branding.md s1.2).

   Se dibuja con box-shadow interior y no con border para no desplazar el
   contenido de la celda ni pelearse con border-collapse.
   -------------------------------------------------------------------------- */
.table tbody tr[class*='row--'] > td:first-child { padding-left: .85rem; }

.row--borrador  > td:first-child { box-shadow: inset 3px 0 0 var(--st-borrador); }
.row--revision  > td:first-child { box-shadow: inset 3px 0 0 var(--st-revision); }
.row--aprobado  > td:first-child { box-shadow: inset 3px 0 0 var(--st-aprobado); }
.row--vigente   > td:first-child { box-shadow: inset 3px 0 0 var(--st-vigente); }
.row--obsoleto  > td:first-child { box-shadow: inset 3px 0 0 var(--st-obsoleto); }
.row--cancelado > td:first-child { box-shadow: inset 3px 0 0 var(--st-cancelado); }


/* =============================================================================
   7. INDICADORES DE ESTADO
   ---------------------------------------------------------------------------
   REGLA NO NEGOCIABLE (docs/branding.md s1.2): color + TEXTO + ICONO.
   Nunca solo color. Una fotocopia en blanco y negro entregada a un auditor
   tiene que seguir siendo inequivoca, y una persona con daltonismo tambien
   tiene que poder leer el estado.

   Capsula con fondo tenue en lugar de contorno. Al imprimir vuelve el
   contorno negro y se retira el fondo (seccion 14).
   ========================================================================== */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .6rem; border-radius: var(--radius-pill);
    /* Siempre sans, aunque viva en una celda .mono (dias para revision). */
    font-family: var(--font-sans);
    font-size: .76rem; font-weight: 600; letter-spacing: 0; white-space: nowrap;
    border: 1px solid transparent;
    background: var(--xqv-white);
}
.badge__icon { font-size: .85em; line-height: 1; }

.badge--borrador  { color: var(--st-borrador);  background: var(--st-borrador-bg); }
.badge--revision  { color: var(--st-revision);  background: var(--st-revision-bg); }
.badge--aprobado  { color: var(--st-aprobado);  background: var(--st-aprobado-bg); }
.badge--vigente   { color: var(--st-vigente);   background: var(--st-vigente-bg); }
.badge--obsoleto  { color: var(--st-obsoleto);  background: var(--st-obsoleto-bg); }
.badge--cancelado { color: var(--st-cancelado); background: var(--st-cancelado-bg); }

/* Integridad comprometida: maxima prominencia, siempre con texto explicito. */
.badge--integrity-broken {
    color: var(--xqv-white); background: var(--xqv-danger);
    border-color: var(--xqv-danger); font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}


/* =============================================================================
   8. FORMULARIOS
   ---------------------------------------------------------------------------
   Campos con relleno gris y sin borde, como los de iOS. Al enfocarlos pasan a
   blanco con borde de marca y un halo: el foco se ve sin depender del
   contorno del navegador.

   Las reglas de estado usan background-color y no el atajo background: el
   atajo borraria la flecha dibujada en los select.
   ========================================================================== */

.field { margin-bottom: 1rem; }

.field label, .fieldset legend {
    display: block; margin-bottom: .35rem;
    font-size: .8rem; font-weight: 500; color: var(--xqv-ink-soft);
}

.field input[type="text"], .field input[type="url"], .field input[type="email"],
.field input[type="password"], .field input[type="number"], .field input[type="date"],
.field input[type="search"], .field select, .field textarea {
    width: 100%; min-height: 36px; padding: .45rem .75rem;
    font-family: inherit; font-size: 14px; color: var(--xqv-ink);
    background-color: var(--xqv-surface-soft);
    border: 1px solid transparent; border-radius: 10px;
}
.field textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }

.field input:hover, .field select:hover, .field textarea:hover {
    background-color: var(--xqv-fill-hover);
}
.field input:focus, .field select:focus, .field textarea:focus {
    background-color: var(--xqv-white);
    border-color: var(--xqv-primary-light);
    box-shadow: 0 0 0 4px rgba(126, 56, 150, .18);
    outline: none;
}

/* Solo lectura: se distingue de un campo editable por el contorno punteado
   y el texto atenuado, no solo por un matiz de fondo. */
.field input[readonly], .field input[readonly]:hover, .field input[readonly]:focus {
    background-color: var(--xqv-white); color: var(--xqv-muted);
    border: 1px dashed var(--xqv-border); box-shadow: none;
}

/* Flecha propia del select. Se dibuja con dos degradados y no con una imagen:
   un SVG incrustado llevaria dentro el espacio de nombres http de SVG, y la
   prueba de URS-023 que prohibe recursos externos lo tomaria por uno. */
.field select {
    -webkit-appearance: none; appearance: none;
    padding-right: 2.1rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--xqv-muted) 50%),
        linear-gradient(135deg, var(--xqv-muted) 50%, transparent 50%);
    background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.hint { margin: .3rem 0 0; font-size: .8rem; color: var(--xqv-muted); line-height: 1.5; }

.fieldset {
    border: 1px solid var(--xqv-border); border-radius: var(--radius-md);
    padding: .9rem 1.1rem; margin: 0 0 1rem;
}


/* =============================================================================
   9. BOTONES
   ========================================================================== */

/* Todos en capsula, como en iOS y macOS. La jerarquia la da el relleno, no
   la forma: UNA accion primaria por pantalla llena de marca, secundario
   tintado, fantasma solo texto. La accion irreversible (firmar, cancelar) se
   distingue por jerarquia y por el texto del boton, no por un rojo de alarma
   que acabaria apareciendo en media pantalla y dejaria de alarmar. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 36px; padding: .5rem 1.1rem;
    font-family: inherit; font-size: 14px; font-weight: 500;
    text-decoration: none; text-align: center; cursor: pointer;
    border: 1px solid transparent; border-radius: var(--radius-pill);
}
.btn:active { transform: scale(.97); }
.btn--block { display: flex; width: 100%; }
.btn--sm    { min-height: 30px; padding: .32rem .85rem; font-size: 13px; }

.btn--primary {
    background: var(--xqv-primary); color: var(--xqv-white);
    padding: .5rem 1.25rem; font-weight: 600;
}
.btn--primary:hover { background: var(--xqv-primary-dark); color: var(--xqv-white); }
.btn--primary.btn--sm { padding: .32rem .95rem; }

/* Secundario: tinte de marca, sin contorno. Pesa menos que el primario. */
.btn--secondary { background: var(--xqv-wash); color: var(--xqv-primary); }
.btn--secondary:hover { background: var(--xqv-wash-strong); color: var(--xqv-primary-dark); }

.btn--danger { background: var(--xqv-danger-bg); color: var(--xqv-danger); }
.btn--danger:hover { background: var(--xqv-danger-bg-strong); }

.btn--ghost     { background: transparent; color: var(--xqv-primary); }
.btn--ghost:hover { background: var(--xqv-wash); color: var(--xqv-primary-dark); }

/* Servia para el boton de salir sobre la banda morada de 2026-09-02. Hoy es un
   boton de texto en la barra superior. Se conserva la clase porque las
   vistas la usan. */
.btn--ghost-light {
    background: transparent; color: var(--xqv-primary);
    font-size: 13px; padding: .35rem .8rem; min-height: 32px;
}
.btn--ghost-light:hover { background: var(--xqv-wash); color: var(--xqv-primary-dark); }

.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }


/* =============================================================================
   10. AVISOS
   ---------------------------------------------------------------------------
   Recuadro redondeado con contorno fino del color del aviso. Sin la barra
   lateral de 4px: el color, el icono y el texto ya dicen de que se trata.
   ========================================================================== */

.alert {
    border: 1px solid; border-radius: var(--radius-md);
    padding: .85rem 1.1rem; margin-bottom: 1rem; font-size: 14px;
}
.alert__icon { margin-right: .3rem; font-weight: 700; }
.alert ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.alert--danger  { background: var(--xqv-danger-bg); border-color: var(--xqv-danger); color: var(--xqv-danger); }
.alert--warn    { background: var(--xqv-warn-bg);   border-color: var(--xqv-warn);   color: var(--xqv-warn); }
.alert--success { background: var(--xqv-ok-bg);     border-color: var(--xqv-ok);     color: var(--xqv-ok); }


/* =============================================================================
   11. PANTALLAS DE ACCESO
   ========================================================================== */

.auth { width: 100%; max-width: 400px; }
.auth__brand { text-align: center; margin-bottom: 1.5rem; }
.auth__brand img { width: 170px; height: auto; }
.auth__system {
    margin: .6rem 0 0; font-size: .85rem;
    color: var(--xqv-muted);
}

.auth__card {
    background: var(--xqv-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem;
}
.auth__card h1 { font-size: 1.5rem; color: var(--xqv-ink); margin-bottom: 1.25rem; }

.auth__note {
    margin: 1.25rem 0 0; padding-top: 1rem;
    border-top: 1px solid var(--xqv-hairline);
    font-size: .78rem; color: var(--xqv-muted); line-height: 1.5;
}

.auth__foot {
    margin-top: 1.5rem; text-align: center;
    font-size: .74rem; color: var(--xqv-muted); line-height: 1.5;
}
.auth__foot p { margin: 0 0 .2rem; }


/* =============================================================================
   12. UTILIDADES
   ========================================================================== */

.muted  { color: var(--xqv-muted); }
.nowrap { white-space: nowrap; }

.kv { display: grid; grid-template-columns: 200px 1fr; gap: .35rem 1rem; font-size: 14px; margin: 0 0 var(--sp-4); }
.kv:last-child { margin-bottom: 0; }
.kv dt { font-weight: 500; color: var(--xqv-muted); }
.kv dd { margin: 0; }
.kv--inline { grid-template-columns: 190px 1fr; }


/* =============================================================================
   12b. ADMINISTRACION - subnavegacion, filtros, matriz de permisos
   ========================================================================== */

/* -- Subnavegacion: control segmentado ----------------------------------------
   Riel gris con la seccion activa como pastilla blanca en relieve, como el
   control segmentado de iOS y macOS. Se desplaza en horizontal si no cabe. */
.subnav {
    width: fit-content; max-width: 100%;
    background: var(--xqv-surface);
    border-radius: 10px; padding: 2px;
    margin-bottom: 1.25rem;
    overflow-x: auto; scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.subnav__link {
    display: block; padding: .35rem .9rem;
    font-size: .84rem; font-weight: 500; white-space: nowrap;
    color: var(--xqv-ink-soft); text-decoration: none;
    border-radius: var(--radius);
}
.subnav__link:hover { background: rgba(255, 255, 255, .6); color: var(--xqv-ink); }
.subnav__link.is-active {
    background: var(--xqv-white); color: var(--xqv-ink); font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
}

/* -- Encabezado de pagina con acciones -------------------------------------- */
.page-head__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* -- Filtros ---------------------------------------------------------------- */
.filters {
    display: flex; gap: .9rem; flex-wrap: wrap; align-items: flex-end;
}
.filters .field { margin-bottom: 0; min-width: 150px; flex: 0 1 auto; }
.filters .field--check { display: flex; align-items: center; min-width: auto; padding-bottom: .4rem; }
.filters__actions { display: flex; gap: .5rem; padding-bottom: 2px; }

/* -- Paginacion ------------------------------------------------------------- */
.pager { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: 1rem; }
.pager__link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 .6rem;
    font-size: 13px; font-weight: 500; text-decoration: none;
    border-radius: var(--radius-pill);
    color: var(--xqv-ink);
}
.pager__link:hover { background: rgba(0, 0, 0, .05); }
.pager__link.is-active { background: var(--xqv-primary); color: var(--xqv-white); }

/* -- Tarjetas de opcion: roles, plantillas, reportes -------------------------
   Seleccionada: contorno de marca de 2px y tinte. La casilla marcada sigue
   ahi, asi que la seleccion no depende solo del color. */
.role-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .65rem;
}
.role-card {
    display: flex; gap: .6rem; align-items: flex-start;
    padding: .75rem .9rem; cursor: pointer;
    border: 1px solid var(--xqv-border); border-radius: var(--radius-md);
    background: var(--xqv-white); color: inherit; text-decoration: none;
}
.role-card:hover { border-color: var(--xqv-primary-light); background: var(--xqv-hover); }
.role-card:has(input:checked),
.role-card--active {
    border-color: var(--xqv-primary);
    box-shadow: inset 0 0 0 1px var(--xqv-primary);
    background: var(--xqv-wash);
}
.role-card--readonly { border-style: dashed; }
.role-card input { margin-top: .2rem; flex-shrink: 0; accent-color: var(--xqv-primary); }
.role-card__body { display: flex; flex-direction: column; gap: .2rem; font-size: 14px; }
.role-card__desc { font-size: .78rem; color: var(--xqv-muted); line-height: 1.45; }

/* -- Bloques de accion administrativa --------------------------------------- */
.action-block {
    padding: 1rem 0;
    border-top: 1px solid var(--xqv-hairline);
}
.action-block:first-of-type { border-top: 0; padding-top: 0; }
.action-block h3 { font-size: .95rem; color: var(--xqv-ink); margin-bottom: .4rem; }

.form-inline .field { max-width: 520px; }
.form-tight { display: flex; gap: .35rem; align-items: center; }
.input-tight {
    min-height: 30px; padding: .25rem .6rem; font-size: 12px; width: 140px;
    background: var(--xqv-surface-soft);
    border: 1px solid transparent; border-radius: var(--radius);
    font-family: inherit;
}
.input-tight:focus {
    background: var(--xqv-white); border-color: var(--xqv-primary-light);
    box-shadow: 0 0 0 3px rgba(126, 56, 150, .18); outline: none;
}
.form-actions {
    display: flex; gap: .6rem; flex-wrap: wrap;
    padding: 1rem 0;
}

/* -- Matriz rol x permiso --------------------------------------------------- */
.matrix-legend {
    display: flex; gap: 1.2rem; flex-wrap: wrap;
    font-size: .78rem; color: var(--xqv-muted);
    margin-bottom: .8rem;
}

/* La matriz tambien respeta el minimo de 14px en sus datos. La densidad se
   consigue con relleno y con desplazamiento horizontal, no con letra chica. */
.table--matrix { font-size: 14px; }
.table--matrix th, .table--matrix td { padding: .25rem .4rem; height: auto; }

.matrix__perm { text-align: left; font-weight: 400; min-width: 260px; }
.matrix__perm-name { display: block; font-weight: 600; color: var(--xqv-ink); }
.matrix__perm-code {
    font-size: 11px; background: transparent; border: 0; padding: 0;
    color: var(--xqv-muted);
}

.matrix__role { text-align: center; min-width: 92px; vertical-align: bottom; }
.matrix__role-name { display: block; font-size: 11px; line-height: 1.2; }
.matrix__role-tag { font-size: 10px; opacity: .8; }

.matrix__category th {
    background: var(--xqv-surface-soft);
    color: var(--xqv-ink);
    font-size: .8rem; font-weight: 600;
    text-align: left; padding: .45rem .6rem;
}

.matrix__cell { text-align: center; }
.matrix__cell--locked { background: var(--xqv-surface-soft); }
.matrix__check { display: inline-flex; padding: .2rem; cursor: pointer; }
.matrix__check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--xqv-primary); }
.matrix__lock { font-size: 13px; opacity: .75; }
.matrix__lock--off { color: var(--xqv-muted); opacity: .5; }

/* =============================================================================
   12c. FIRMA ELECTRONICA Y MANIFESTACION (21 CFR Part 11 s11.50)
   ---------------------------------------------------------------------------
   Los filetes laterales de 4px se sustituyen por anillos y fondos: en una
   tarjeta de esquinas de 18px un filete lateral se curva y parece un error.
   ========================================================================== */

/* La pantalla de firma tiene que distinguirse de un vistazo: anillo de marca
   completo alrededor del panel. */
.panel--sign { box-shadow: 0 0 0 2px var(--xqv-primary); }
.panel--auth { background: var(--xqv-warn-bg); box-shadow: 0 0 0 1px var(--xqv-warn); }

.sign-statement {
    padding: .9rem 1.1rem;
    background: var(--xqv-wash);
    border-radius: var(--radius-md);
    font-size: 14px; line-height: 1.6;
}

/* El panel de la manifestacion lleva su titulo en color de marca: es el
   bloque regulatorio de la ficha. */
.signature-block .panel__title { color: var(--xqv-primary); }

.manifest {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .75rem;
}

/* Cada firma es un bloque cerrado y legible por si mismo: nombre impreso,
   puesto, fecha/hora y significado. Se imprime tal cual con el documento.
   La validez la dice el indicador de su cabecera (Valida, INVALIDADA,
   Contenido alterado), no un filete de color. */
.manifest__item {
    border-radius: var(--radius-md);
    padding: .9rem 1rem;
    background: var(--xqv-surface-soft);
}
.manifest__item--invalid {
    background: var(--xqv-danger-bg);
    box-shadow: inset 0 0 0 1px var(--xqv-danger);
}
.manifest__item--invalid .manifest__name { text-decoration: line-through; }

.manifest__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; flex-wrap: wrap; margin-bottom: .55rem;
    padding-bottom: .45rem; border-bottom: 1px solid var(--xqv-border);
}
.manifest__meaning {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--xqv-primary);
}

.manifest__name     { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.3; letter-spacing: -.012em; }
.manifest__position { margin: 0; font-size: .82rem; color: var(--xqv-muted); }
.manifest__when     { margin: .3rem 0 .5rem; font-family: var(--font-mono); font-size: .74rem; }

.manifest__meta {
    display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem;
    margin: 0; padding-top: .45rem;
    border-top: 1px solid var(--xqv-border);
    font-size: .72rem;
}
.manifest__meta dt { color: var(--xqv-muted); }
.manifest__meta dd { margin: 0; }

.manifest__invalidation {
    margin: .5rem 0 0; padding-top: .45rem;
    border-top: 1px solid var(--xqv-border);
    font-size: .78rem; line-height: 1.5;
}

.code-preview {
    font-size: 1.1rem; font-weight: 500; letter-spacing: .04em;
    background: var(--xqv-wash); color: var(--xqv-primary);
    border-radius: var(--radius);
    padding: .25rem .6rem;
}

/* La fila de la version que se esta viendo, resaltada en el historial. */
.table .is-current > td { background: var(--xqv-surface); font-weight: 600; }

.editor { font-size: 13px; line-height: 1.6; }

/* -- Audit trail ------------------------------------------------------------ */
.hash {
    font-size: 11px; word-break: break-all; line-height: 1.5;
}

.json-block {
    background: var(--xqv-surface-soft);
    border-radius: var(--radius-md);
    padding: .75rem .9rem; margin: 0;
    font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
    overflow-x: auto; white-space: pre-wrap; word-break: break-word;
    max-height: 320px; overflow-y: auto;
}

/* Texto citado (motivo del cambio): conserva el filete, que aqui significa
   "esto lo escribio una persona", como una cita. */
.reason {
    margin: 0; padding: .65rem 1rem;
    border-left: 3px solid var(--xqv-primary-light);
    background: var(--xqv-surface-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 14px; font-style: italic;
}

.text-danger { color: var(--xqv-danger); }

/* Marca de permiso de escritura: texto, no solo color. */
.perm-write {
    display: inline-block; margin-left: .3rem;
    padding: 0 .3rem; border-radius: 4px;
    background: var(--xqv-warn); color: var(--xqv-white);
    font-size: 9px; font-weight: 700; line-height: 1.5;
    vertical-align: middle;
}

/* =============================================================================
   13. RESPONSIVE - usable en tablet para consulta en piso de planta (URS-023)
   ========================================================================== */

@media (max-width: 900px) {
    .kv, .kv--inline { grid-template-columns: 1fr; gap: 0; }
    .kv dt { margin-top: .5rem; }
    .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .topbar__inner { gap: .6rem; padding: .6rem .9rem .3rem; }
    .topbar__brand img { width: 100px; }
    .topbar__user { text-align: left; }
    .mainnav__list { padding: .35rem .9rem; }
    .content { padding: 1.25rem .9rem 2.5rem; }
    .panel { padding: 1.1rem; border-radius: 14px; }
    h1 { font-size: 1.65rem; }

    /* La tabla NO baja de 14px aqui. Antes se reducia a 13px, y esta consulta
       se activa justo en el escenario que motiva la regla: la tableta del piso
       de planta (URS-023). La densidad en pantalla estrecha se gana apretando el
       relleno y dejando que .table-wrap se desplace en horizontal, nunca
       encogiendo la letra. */
    .table th, .table td { padding: .3rem .45rem; }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters .field { min-width: 100%; }
    .role-grid { grid-template-columns: 1fr; }
    .form-tight { flex-direction: column; align-items: stretch; }
    .input-tight { width: 100%; }
}

/* La matriz de permisos es densa por naturaleza: en pantallas estrechas se
   desplaza horizontalmente dentro de su contenedor en lugar de comprimirse
   hasta ser ilegible. La primera columna queda fija para no perder de vista
   que permiso se esta marcando. */
@media (max-width: 900px) {
    .table--matrix .matrix__perm {
        position: sticky; left: 0; z-index: 1;
        background: var(--xqv-white);
        box-shadow: 1px 0 0 var(--xqv-border);
        min-width: 180px;
    }
    .table--matrix tbody tr:nth-child(even) .matrix__perm { background: var(--xqv-surface-soft); }
    .matrix-legend { flex-direction: column; gap: .3rem; }
}


/* =============================================================================
   14. IMPRESION
   ---------------------------------------------------------------------------
   Toda vista imprimible lleva encabezado con logo, codigo, version, estado y
   fecha/hora de impresion, y la leyenda COPIA NO CONTROLADA cuando aplique.
   Esos bloques los inyecta la vista; aqui solo se define su comportamiento.

   El papel usa la misma tipografia que la pantalla (un sistema GxP debe
   verse igual en los dos, docs/branding.md s4). Lo que se retira al imprimir
   son las sombras, los fondos tenues y la translucidez: en blanco y negro no
   informan y gastan toner.
   ========================================================================== */

@media print {
    body { background: var(--xqv-white); font-size: 11pt; }

    /* Cromo de navegacion: no tiene lugar en un registro de auditoria. Los
       filtros y la paginacion describen como se llego a la pantalla, no el
       contenido del documento, y en papel solo anaden ruido. */
    .topbar, .mainnav, .subnav, .appfoot, .skip-link,
    .btn, .topbar__logout, .panel--muted,
    .filters, .pager, .matrix-legend { display: none !important; }

    .content { max-width: none; padding: 0; }

    .panel, .panel--sign, .panel--auth, .disclosure, .next-step, .auth__card {
        box-shadow: none !important; border: 1px solid #999;
        border-radius: 6px;
        page-break-inside: avoid; margin-bottom: .5rem;
    }

    .stat { border: 1px solid #999; background: transparent; }

    .table thead th {
        background: var(--xqv-white) !important;
        color: #000 !important;
        border-bottom: 2px solid #000;
    }

    /* La barra de estado de la fila no se imprime: en blanco y negro los seis
       colores colapsan a grises casi identicos y solo anadirian ruido. El
       estado sigue impreso con texto e icono en su columna, que es lo que
       exige la regla. */
    .row--borrador  > td:first-child,
    .row--revision  > td:first-child,
    .row--aprobado  > td:first-child,
    .row--vigente   > td:first-child,
    .row--obsoleto  > td:first-child,
    .row--cancelado > td:first-child { box-shadow: none !important; }
    .table { page-break-inside: auto; }
    .table tr { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; }

    /* El indicador conserva su borde e icono al imprimir en blanco y negro:
       es exactamente el escenario que justifica no depender del color. El
       fondo tenue de pantalla se retira. */
    .badge { border: 1px solid #000 !important; color: #000 !important; background: transparent !important; }

    /* La manifestacion de firma SIEMPRE se imprime. s11.50 exige que el
       nombre impreso, la fecha/hora y el significado aparezcan en el registro
       firmado, no solo en pantalla. Ocultarla al imprimir incumpliria la norma. */
    .signature-block { display: block !important; page-break-inside: avoid; }
    .manifest { grid-template-columns: 1fr 1fr; }
    .manifest__item { border: 1px solid #000 !important; background: transparent !important; box-shadow: none !important; }

    /* Marca de agua de copia no controlada. La vista la activa poniendo el
       atributo data-uncontrolled en el elemento raiz del impreso. */
    [data-uncontrolled="1"]::before {
        content: "COPIA NO CONTROLADA";
        position: fixed; top: 45%; left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
        font-size: 48pt; font-weight: 700;
        color: rgba(185, 28, 28, .12);
        letter-spacing: .1em; pointer-events: none; z-index: 999;
    }

    a[href^="/"]::after { content: ""; }
}


/* =============================================================================
   12d. RECUADROS DE APOYO, REJILLA Y CONTROLES DE FORMULARIO
   ---------------------------------------------------------------------------
   Bloque anadido el 2026-09-04. Estas clases se usaban en 16 vistas y NUNCA
   estuvieron definidas en esta hoja: `.callout` y sus variantes existian solo
   en install.css, que la aplicacion no carga, y el resto no se escribio nunca.

   El navegador ignora en silencio una clase que no conoce, asi que no habia
   error ni aviso: los recuadros salian como texto suelto y las rejillas de dos
   columnas se apilaban. Se detecta ahora de forma automatica con
   docs/evidencia-fase0/verificacion-clases-css.php.
   ========================================================================== */

/* -- Recuadro de apoyo -------------------------------------------------------
   NO es lo mismo que .alert. Un .alert comunica el resultado de una accion que
   el usuario acaba de hacer y aparece arriba de la pagina. Un .callout es ayuda
   contextual que vive dentro de un panel y esta siempre presente: explica una
   regla, advierte de una consecuencia. Por eso pesa menos: sin contorno, solo
   un fondo tenue redondeado.                                                   */
.callout {
    padding: .85rem 1.1rem;
    margin: 0 0 var(--sp-3);
    border-radius: var(--radius-md);
    background: var(--xqv-surface-soft);
    font-size: 14px; line-height: 1.55;
}
.callout > :last-child { margin-bottom: 0; }
.callout .hint { margin-top: .35rem; }

.callout--info { background: var(--xqv-wash); }
.callout--warn { background: var(--xqv-warn-bg); }

/* -- Contenedor de formulario ------------------------------------------------
   Apila paneles y bloque de acciones con separacion uniforme, en lugar de
   depender del margen inferior de cada hijo.                                   */
.form { display: flex; flex-direction: column; gap: var(--sp-3); }
.form > .panel { margin-bottom: 0; }
.form > .form-actions { padding: 0; }

/* -- Rejilla -----------------------------------------------------------------
   minmax(0, 1fr) y no 1fr: sin el minimo en cero, un contenido largo -un hash,
   un nombre de archivo- desborda la columna en lugar de ajustarse.             */
.grid    { display: grid; gap: .2rem 1rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* -- Casilla con etiqueta ---------------------------------------------------- */
.check {
    display: flex; align-items: flex-start; gap: .5rem;
    margin-bottom: .45rem;
    font-size: 14px; line-height: 1.45; cursor: pointer;
}
.check input { margin-top: .18rem; flex-shrink: 0; accent-color: var(--xqv-primary); }

/* -- Campo estrecho ----------------------------------------------------------
   Para valores cortos -una fecha, un numero de dias-. Un campo de texto de
   1200px de ancho para escribir "30" sugiere que caben mas cosas.              */
.field--narrow input,
.field--narrow select { max-width: 220px; }

/* -- Boton grande ------------------------------------------------------------
   Reservado a la accion de firmar: es la unica de la pantalla y conviene que
   se distinga del resto por tamano, no solo por color. 44px de alto: el
   minimo de Apple para un objetivo tactil, util en la tableta de planta.       */
.btn--lg { min-height: 44px; padding: .7rem 1.6rem; font-size: 15px; }
.btn--primary.btn--lg { padding: .7rem 1.9rem; }

/* -- Cita del texto de una URS ----------------------------------------------
   En la pantalla de pruebas, el enunciado literal del requisito. Va en cursiva
   y con filete porque es texto citado, no redactado por el sistema.            */
.urs-text {
    margin: 0 0 .5rem;
    padding: .55rem .9rem;
    border-left: 3px solid var(--xqv-primary-light);
    background: var(--xqv-surface-soft);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 14px; font-style: italic; line-height: 1.55;
}

@media (max-width: 700px) {
    .grid--2, .grid--3 { grid-template-columns: 1fr; }
}


/* =============================================================================
   12e. QUE SIGUE - la unica accion que toca ahora
   ---------------------------------------------------------------------------
   La ficha del documento desplegaba a la vez todas las transiciones posibles y
   un boton de firma aparte. Quien no conocia el modelo de estados tenia que
   deducir cual le tocaba. Este bloque presenta UNA accion, y el resto se pliega
   en un <details>.

   El estado se distingue por texto + icono + color, igual que los indicadores
   documentales: el titulo dice que pasa, la linea superior lo resume con su
   icono, y el color de esa linea y del fondo solo lo refuerzan.
   ========================================================================== */

.next-step {
    border-radius: var(--radius-lg);
    background: var(--xqv-white);
    box-shadow: var(--shadow);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
}

/* Dentro de un panel ya no es una tarjeta sobre otra: pasa a bloque gris. */
.panel .next-step { box-shadow: none; background: var(--xqv-surface-soft); border-radius: var(--radius-md); }

.next-step__eyebrow {
    margin: 0 0 var(--sp-2);
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    color: var(--xqv-muted);
}

.next-step__title {
    margin: 0 0 var(--sp-2);
    font-size: 1.35rem; font-weight: 700;
    line-height: 1.2; letter-spacing: -.022em;
    color: var(--xqv-ink);
}

.next-step__lead {
    margin: 0 0 var(--sp-4);
    max-width: 68ch;
    font-size: 14px; line-height: 1.6;
    color: var(--xqv-ink-soft);
}
.next-step__lead:last-child { margin-bottom: 0; }

/* Hay algo que hacer: acento de marca. */
.next-step--do      { box-shadow: 0 0 0 2px var(--xqv-wash-strong), var(--shadow); }
.next-step--do      .next-step__eyebrow { color: var(--xqv-primary); }

/* Le tocaria, pero falta un requisito. */
.next-step--blocked { background: var(--xqv-warn-bg); }
.next-step--blocked .next-step__eyebrow { color: var(--xqv-warn); }

/* La pelota la tiene otra persona. Tarjeta blanca normal: un gris aqui
   coincidiria con el fondo de la pagina y el bloque dejaria de verse. */
.next-step--wait    .next-step__eyebrow { color: var(--xqv-muted); }

/* Nada pendiente. */
.next-step--none    .next-step__eyebrow { color: var(--xqv-ok); }


/* =============================================================================
   12f. BLOQUES PLEGADOS
   ---------------------------------------------------------------------------
   Para lo que existe pero casi nunca se usa: cancelar, devolver a Borrador,
   firmar fuera del flujo. Plegado, NO oculto: sigue siendo alcanzable con
   teclado y sale en la busqueda del navegador. Nada accionable desaparece.
   ========================================================================== */

.disclosure {
    border-radius: var(--radius-lg);
    background: var(--xqv-white);
    box-shadow: var(--shadow);
    margin-bottom: var(--sp-4);
    overflow: hidden;
}

.disclosure > summary {
    padding: 1rem 1.6rem;
    cursor: pointer;
    font-size: .94rem; font-weight: 600;
    color: var(--xqv-ink);
    list-style: none;
    display: flex; align-items: center; gap: .55rem;
}
.disclosure > summary::-webkit-details-marker { display: none; }

/* Chevron propio que gira al abrir: el triangulo nativo no se puede colorear
   de forma consistente. */
.disclosure > summary::before {
    content: "\203A";
    color: var(--xqv-muted);
    font-size: 1.25em; line-height: 1;
    display: inline-block;
    transition: transform .2s var(--ease);
}
.disclosure[open] > summary::before { transform: rotate(90deg); }

.disclosure > summary:hover { background: var(--xqv-hover); }
.disclosure > summary:focus-visible { outline: 3px solid var(--xqv-primary-light); outline-offset: -3px; }

.disclosure__body {
    padding: 0 1.6rem 1.25rem;
    border-top: 1px solid var(--xqv-hairline);
}
.disclosure__body > :first-child { margin-top: var(--sp-4); }

/* Al imprimir se despliega todo: un registro impreso no se navega. */
@media print {
    .disclosure__body { display: block !important; padding-top: var(--sp-3); }
    .disclosure > summary { display: none; }
    .next-step { border: 1px solid #999; background: transparent; }
}


/* =============================================================================
   12g. BANDEJA DE TRABAJO
   ---------------------------------------------------------------------------
   El contador de pendientes y los detalles de la pantalla de alta.
   ========================================================================== */

/* Contador de pendientes, en la navegacion y junto al titulo de la bandeja.
   Lleva SIEMPRE el numero visible y un texto solo para lectores de pantalla:
   un punto de color no dice cuantas cosas hay. */
.count-pill {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; height: 1.3rem; padding: 0 .38rem;
    margin-left: .35rem;
    border-radius: var(--radius-pill);
    background: var(--xqv-primary); color: var(--xqv-white);
    font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
}

/* En la barra de navegacion el contador acompana al enlace. */
.mainnav__link .count-pill { margin-left: .4rem; }

/* Tipo de la plantilla en la pantalla de alta. Solo se ve cuando NO hay
   JavaScript: con el, las plantillas ya vienen filtradas por tipo y repetirlo
   sobra. El script lo oculta al arrancar. */
.tpl-tipo { color: var(--xqv-muted); }

/* La bandeja del tablero es lo primero de la pantalla y conviene que se note. */
.panel .count-pill { background: var(--xqv-primary); }