/* tokens.css — fuente única de la paleta y de la escala tipográfica.
 *
 * Los valores vienen del Kit de interfaz de usuario del Estado, versión 9.2 de
 * agosto de 2025, y de la ficha del color asignado al Ministerio de Comercio,
 * Industria y Turismo. Los dos documentos se ingirieron en
 * `docs/Requerimientos/Aplicacion-Estilos-Gov-MinCit/`.
 *
 * Se carga ANTES que landing.css y admin.css, que redefinen encima lo suyo.
 *
 * ⚠️ El Kit fija toda la escala en píxeles y a continuación exige unidades
 *    relativas. Se resuelve declarándola en `rem` sobre una base de 16 px: los
 *    tamaños resultantes son los mismos y el texto responde al ajuste del
 *    navegador, que es lo que el criterio de accesibilidad pide.
 *
 * ⚠️ El color de la entidad tiene una condición: si no alcanza el contraste
 *    mínimo en su combinación de uso, el Kit obliga a sustituirlo por el gris
 *    `#4C4C4C`. Medido, `#962D46` con texto blanco da 7,9:1 y supera el 4,5:1
 *    exigido, así que se usa. El gris queda declarado como su reemplazo.
 */

:root {
    /* ── Principales del Kit ───────────────────────────────────────────── */
    /* El Kit 9.2 fija #0943B5 y 56 px para la barra superior, y el portal
       gov.co usa ese valor. El sitio del Ministerio usa #3366CC a 48 px, que es
       la rama anterior del kit. **Por decisión del titular se adopta el tono
       del Ministerio**, para que los dos sitios del convenio se vean iguales
       cuando queden bajo su dominio. La desviación queda declarada aquí y en
       la respuesta a la Oficina de Sistemas; volver al valor del Kit es
       cambiar estas dos líneas. */
    --gov-cobalt: #3366CC;        /* Kit 9.2: #0943B5 · MinCIT: #3366CC */
    --gov-cobalt-kit: #0943B5;    /* el del Kit, conservado como referencia */
    /* Azul del panel lateral de accesibilidad. No es el de la barra: medido
       sobre el sitio del Ministerio, su panel usa este tono más oscuro. */
    --gov-a11y-panel: #004884;
    --gov-negro: #000000;
    --gov-matterhorn: #4C4C4C;    /* reemplazo obligatorio del color de entidad */
    --gov-gris: #7E7E7E;
    --gov-blanco: #FFFFFF;

    /* ── Complementarios ───────────────────────────────────────────────── */
    --gov-havelock: #4672C8;
    --gov-tropical: #B5C7E9;
    --gov-golden-brown: #9D7700;
    --gov-sunglow: #FECC2F;
    --gov-vis-vis: #FEE697;

    /* ── Fondos y estados ──────────────────────────────────────────────── */
    --gov-solitude: #E5ECF8;
    --gov-corn-silk: #FFFAE8;
    --gov-white-smoke: #F4F4F4;
    --gov-portage: #83A0DA;
    --gov-silver: #B9B9B9;        /* campos deshabilitados */

    /* ── Universales informativos ──────────────────────────────────────── */
    --gov-rojo: #A80521;          /* error, retraso o urgencia */
    --gov-naranja: #F0572D;
    --gov-amarillo: #FDAA29;      /* pendiente */
    --gov-verde: #158361;         /* completado con éxito */

    /* ── Color de la entidad ───────────────────────────────────────────── */
    /* Ministerio de Comercio, Industria y Turismo. Manual de imagen de
       Gobierno; coincide con la ficha anexada al requerimiento. */
    --gov-entidad: #962D46;
    --gov-entidad-reemplazo: var(--gov-matterhorn);

    /* ── Tipografía ────────────────────────────────────────────────────── */
    /* «Usa solo 2 tipos de letra»: Nunito Sans en títulos, Verdana en texto. */
    --gov-titulo: 'Nunito Sans', 'Nunito Sans Fallback', 'Trebuchet MS', sans-serif;
    --gov-cuerpo: Verdana, Geneva, 'DejaVu Sans', sans-serif;

    /* Escala de escritorio, en rem sobre base 16 px */
    --gov-h1: 2.625rem;   --gov-h1-lh: 3.125rem;   /* 42 / 50 */
    --gov-h2: 2.125rem;   --gov-h2-lh: 2.625rem;   /* 34 / 42 */
    --gov-h3: 1.625rem;   --gov-h3-lh: 2.125rem;   /* 26 / 34 */
    --gov-h4: 1.375rem;   --gov-h4-lh: 2rem;       /* 22 / 32 */
    --gov-h5: 1.25rem;    --gov-h5-lh: 1.625rem;   /* 20 / 26 */
    --gov-h6: 1rem;       --gov-h6-lh: 1.375rem;   /* 16 / 22 */
    --gov-desc: 1.25rem;  --gov-desc-lh: 1.5rem;   /* 20 / 24 */
    --gov-cuerpo-1: 0.9375rem; --gov-cuerpo-1-lh: 1.375rem;  /* 15 / 22 */
    --gov-cuerpo-2: 0.875rem;  --gov-cuerpo-2-lh: 1.375rem;  /* 14 / 22 */
    --gov-leyenda: 0.75rem;    --gov-leyenda-lh: 1.25rem;    /* 12 / 20 */

    /* ── Marca del convenio ────────────────────────────────────────────── */
    /* Estos colores los declaraban por separado landing.css y admin.css, con
       nombres distintos para el mismo valor y valores distintos para el mismo
       nombre: `--navy-dark #16243A` frente a `--navy-oscuro #16294A`,
       `--linea #E4E7E9` frente a `#e3e7ec`. Aquí quedan una sola vez y las dos
       hojas los aliasean. `TemaService` sigue siendo la única vía de cambiarlos
       en caliente, y su override cae sobre estas mismas variables. */
    --teal: #70B6BF;
    --teal-claro: #9BCCD2;
    --teal-suave: #D7EBED;
    --navy: #1E538B;
    --navy-oscuro: #16243A;
    --dorado: #BC925C;
    /* Variante oscura para texto de menos de 18 pt: 4,85:1 sobre blanco. El
       dorado original solo pasa el mínimo en tamaños grandes. */
    --dorado-texto: #8A6B3D;
    --vinotinto: #902840;
    --crema: #F5F4F0;
    --blanco-calido: #FAFAF8;
    --tinta: #22303F;
    --tinta-suave: #52616E;
    --linea: #E4E7E9;
    /* Estados. El verde da 5,3:1 sobre su fondo claro; el anterior, 4,36. */
    --estado-ok: #26702F;      --estado-ok-fondo: #E9F4EA;
    --estado-adv: #8A6531;     --estado-adv-fondo: #F4ECE2;
    --estado-err: #902840;     --estado-err-fondo: #F7E6EA;

    /* ── Medidas ───────────────────────────────────────────────────────── */
    --gov-barra-alto: 48px;       /* Kit 9.2: 56px · MinCIT: 3rem = 48px */
    --gov-logo-ancho: 136px;      /* logotipo GOV.CO */
    --gov-logo-alto: 24px;
    --gov-area-activa: 44px;      /* área activa mínima */
    --gov-separacion: 24px;       /* separación de la cuadrícula */
    --gov-ancho-max: 1400px;      /* punto de ruptura máximo */
}

/* Escala adaptativa: por debajo del punto de ruptura grande. */
@media (max-width: 991px) {
    :root {
        --gov-h1: 2.125rem;   --gov-h1-lh: 2.625rem;   /* 34 / 42 */
        --gov-h2: 1.625rem;   --gov-h2-lh: 2.125rem;   /* 26 / 34 */
        --gov-h3: 1.375rem;   --gov-h3-lh: 2rem;       /* 22 / 32 */
        --gov-h4: 1.25rem;    --gov-h4-lh: 1.625rem;   /* 20 / 26 */
        --gov-h5: 1.125rem;   --gov-h5-lh: 1.5rem;     /* 18 / 24 */
        --gov-desc: 1.125rem; --gov-desc-lh: 1.375rem; /* 18 / 22 */
        --gov-cuerpo-1: 0.875rem; --gov-cuerpo-1-lh: 1.25rem;  /* 14 / 20 */
        --gov-cuerpo-2: 0.75rem;  --gov-cuerpo-2-lh: 1.25rem;  /* 12 / 20 */
    }
}

/* En móvil el Kit sube la descripción a 22 px con interlineado de 32. */
@media (max-width: 575px) {
    :root { --gov-desc: 1.375rem; --gov-desc-lh: 2rem; }
}

/* ── Tipografía de iconos del Kit ──────────────────────────────────────── */
/* Autoalojada: la política de seguridad del sitio no admite tipografías de
   otros dominios. Procedencia en `public/assets/gov/PROCEDENCIA.md`.
   El nombre de familia es el que usa el Kit —«Govco Icon»— para que cualquier
   regla tomada de su hoja oficial encuentre la fuente sin reescribirla. */
@font-face {
    font-family: 'Govco Icon';
    src: url('/assets/gov/fonts/govco-icons.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* Clase base del Kit: familia, y nada más. El tamaño y el color los pone
   quien la usa, porque el mismo icono sirve en la barra y en el pie. */
.govco-icon {
    font-family: 'Govco Icon';
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Los tres iconos de la barra de accesibilidad, con los puntos de código de la
   fuente oficial. Sufijo -p = positivo (relleno), -n = negativo (contorno).
   ⚠️ Estos glifos sobresalen del cuadratín (de -149 a 849 sobre 1000), así que
   necesitan interlineado holgado o se recortan por arriba y por abajo. */
.govco-icon-contrast-p::before  { content: '\e972'; }
.govco-icon-contrast-n::before  { content: '\e971'; }
.govco-icon-more-size-p::before { content: '\e9cc'; }
.govco-icon-more-size-n::before { content: '\e9cb'; }
.govco-icon-less-size-p::before { content: '\e9ce'; }
.govco-icon-less-size-n::before { content: '\e9cd'; }

/* Iconos del panel de gestión. Los puntos de código salen del mapa de la hoja
   oficial del Estado (`public/assets/gov/css/kit-govco-referencia.css`), que es
   la única forma de saber qué dibuja cada glifo: en la fuente todos se llaman
   `uniE9XX`, sin nombre semántico. */
.govco-icon-analytic-p::before   { content: '\e946'; }
.govco-icon-statistics-p::before { content: '\e992'; }
.govco-icon-pin::before          { content: '\e933'; }
.govco-icon-edit-p::before       { content: '\e988'; }
.govco-icon-data-up-p::before    { content: '\e97a'; }
.govco-icon-link-p::before       { content: '\e98c'; }
.govco-icon-image-p::before      { content: '\e99e'; }
.govco-icon-user-p::before       { content: '\e9d2'; }
.govco-icon-key::before          { content: '\e927'; }
.govco-icon-idea::before         { content: '\e907'; }
.govco-icon-document-p::before   { content: '\e982'; }
.govco-icon-padlock-p::before    { content: '\e98a'; }
.govco-icon-searchdoc::before    { content: '\e909'; }
.govco-icon-table-p::before      { content: '\e9ca'; }
.govco-icon-home-p::before       { content: '\e99c'; }
.govco-icon-colombia-p::before   { content: '\e96e'; }
.govco-icon-info::before         { content: '\e922'; }
.govco-icon-right-arrow::before  { content: '\e916'; }
.govco-icon-shortu-arrow-p::before { content: '\e97e'; }

/* ── Salto al contenido principal ──────────────────────────────────────── */
/* El Kit exige literalmente estas clases y que sea el primer elemento
   tabulable. Se declaran aquí para que la landing, la aplicación de los
   visores y el panel compartan la misma pieza. */
.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;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
    position: fixed;
    top: 8px; inset-inline-start: 8px;
    z-index: 10000;
    width: auto; height: auto;
    padding: 12px 20px;
    margin: 0;
    overflow: visible;
    clip: auto;
    background: var(--gov-cobalt);
    color: var(--gov-blanco);
    font-family: var(--gov-titulo);
    font-weight: 800;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 8px;
    outline: 3px solid var(--gov-sunglow);
    outline-offset: 2px;
}

/* ── Volver arriba ─────────────────────────────────────────────────────── */
/* Botón flotante abajo a la derecha, en posición fija. Nace oculto y lo
   muestra `gov.js` al desplazarse: en una página de una sola pantalla no
   corresponde mostrarlo. */
.gov-volver-arriba {
    position: fixed;
    inset-inline-end: 20px; bottom: 20px;
    z-index: 900;
    width: var(--gov-area-activa);
    height: var(--gov-area-activa);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gov-cobalt);
    color: var(--gov-blanco);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: background .2s, transform .2s;
}

.gov-volver-arriba.visible { display: flex; }
.gov-volver-arriba:hover { background: #073490; transform: translateY(-2px); }
.gov-volver-arriba:focus-visible { outline: 3px solid var(--gov-sunglow); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .gov-volver-arriba { transition: none; }
    .gov-volver-arriba:hover { transform: none; }
}

/* ── Pie de página del Kit del Estado (componente 11) ─────────────────────
   Tres módulos: información de la entidad sobre su color característico,
   bloque de cierre obligatorio y barra de logotipos. El contraste del texto
   blanco sobre #962D46 es 7,9:1 y supera el 4,5:1 exigido; si algún día el
   color de la entidad no lo alcanzara, el Kit obliga a sustituirlo por
   --gov-entidad-reemplazo. */
.gov-pie-in { max-width: var(--gov-ancho-max, 1400px); margin: 0 auto; padding: 0 20px; }

.gov-pie-entidad { background: var(--gov-entidad, #962D46); padding: 28px 0 0; }
/* El Ministerio pone el contenido del pie en una TARJETA BLANCA sobre el color
   de la entidad, no el texto directamente sobre el color. Se adopta su patrón:
   el vinotinto queda como marco y el texto gana el contraste del blanco. */
.gov-pie-entidad .gov-pie-in { display: grid; grid-template-columns: 1fr;
    gap: var(--gov-separacion, 24px); background: #fff; border-radius: 6px 6px 0 0;
    padding: 28px 32px 22px; max-width: 1140px; }
.gov-pie-nombre { font-family: var(--gov-titulo); font-weight: 800; color: var(--gov-entidad, #962D46);
    font-size: var(--gov-h4, 1.375rem); line-height: var(--gov-h4-lh, 2rem); margin: 0 0 14px; }
.gov-pie-datos { list-style: none; margin: 0; padding: 0; color: var(--tinta, #22303F);
    font-size: var(--gov-cuerpo-2, .875rem); line-height: 1.7; }
.gov-pie-datos li { margin: 0 0 4px; }
.gov-pie-et { font-family: var(--gov-titulo); font-weight: 700; color: var(--tinta, #22303F); }
/* Enlaces en el azul de la barra, como los del pie del Ministerio: 5,1:1
   sobre blanco. */
.gov-pie-datos a { color: var(--gov-cobalt, #3366CC); text-decoration: underline; }
.gov-pie-datos a:hover { text-decoration: none; }
.gov-pie-col-plataforma { border-top: 1px solid var(--linea, #E4E7E9); padding-top: 20px;
    color: var(--tinta, #22303F); font-size: var(--gov-cuerpo-2, .875rem); line-height: 1.6; }
/* Todo enlace de este módulo declara su color: sin esto hereda el azul por
   omisión del navegador, que es el fallo que dejó los enlaces a 1,23 a 1 la
   primera vez que este bloque cambió de fondo. */
.gov-pie-col-plataforma a { color: var(--gov-cobalt, #3366CC); text-decoration: underline; }
.gov-pie-col-plataforma a:hover, .gov-pie-col-plataforma a:focus-visible { text-decoration: none; }
.gov-pie-col-plataforma b, .gov-pie-col-plataforma strong { color: var(--tinta, #22303F); }

/* El bloque de cierre es la parte baja de la MISMA tarjeta blanca, como en el
   pie del Ministerio: no una franja de otro color entre dos bloques. */
.gov-pie-cierre { background: var(--gov-entidad, #962D46); padding: 0 0 24px; }
.gov-pie-cierre .gov-pie-in { background: #fff; max-width: 1140px;
    padding: 16px 32px 20px; border-radius: 0 0 6px 6px;
    border-top: 1px solid var(--linea, #E4E7E9); }
.gov-pie-cierre ul { list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center;
    font-size: var(--gov-cuerpo-2, .875rem); }
.gov-pie-cierre a { color: var(--gov-cobalt, #3366CC); text-decoration: none; }
.gov-pie-cierre a:hover, .gov-pie-cierre a:focus-visible { text-decoration: underline; }

/* El logotipo oficial de GOV.CO es BLANCO —el 93 % de sus píxeles opacos son
   claros—, así que su barra NO puede ir sobre la tarjeta blanca: solo se vería
   la marca de verificación. Va sobre el color de la entidad, que es el marco
   del pie. */
.gov-pie-logos { background: var(--gov-entidad, #962D46); padding: 4px 0 22px; }
.gov-pie-logos .gov-pie-in { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.gov-pie-logos img { display: block; }

@media (min-width: 992px) {
    .gov-pie-entidad .gov-pie-in { grid-template-columns: 7fr 5fr; }
    .gov-pie-col-plataforma { border-top: 0; border-inline-start: 1px solid rgba(255, 255, 255, .28);
        padding: 0 0 0 var(--gov-separacion, 24px); }
}


/* ── Lectura de derecha a izquierda ────────────────────────────────────────
   El resto del diseño ya usa propiedades lógicas, así que se invierte solo.
   Aquí quedan las señales que son texto o dibujo y no siguen a la dirección:
   una flecha que apunta «hacia adelante» apunta al otro lado en árabe. */
html[dir="rtl"] {
    --vr-vineta: '‹';
}

/* Las cifras se escriben con dígitos latinos también en árabe: cambiarlos a
   numerales arábigos orientales rompería la comparación con la fuente oficial
   que cada dato cita. */
html[dir="rtl"] .num,
html[dir="rtl"] .vr-vig-num,
html[dir="rtl"] table td,
html[dir="rtl"] .kpi { font-variant-numeric: lining-nums; }

/* Una tabla de datos conserva sus números alineados al final de la celda, que
   es lo que el Kit pide, y en árabe eso cae a la izquierda. */
html[dir="rtl"] .num { text-align: end; }

/* ── Aviso de traducción pendiente de revisión ─────────────────────────────
   Se pinta en el servidor y por clase: un aviso que aparece después de cargar
   desplaza el contenido, y un `style=""` nuevo quedaría bloqueado por la
   política de seguridad hasta regenerar sus huellas. */
.vr-aviso-traduccion { background: var(--gov-corn-silk, #FFFAE8);
    border-bottom: 2px solid var(--gov-sunglow, #FDAA29); }
.vr-aviso-traduccion-in { max-width: var(--gov-ancho-max, 1400px); margin: 0 auto;
    padding: 10px 20px; display: flex; align-items: center; gap: 10px; }
.vr-aviso-traduccion p { margin: 0; font-size: var(--gov-cuerpo-2, .875rem);
    line-height: 1.5; color: var(--gov-negro, #000); }
.vr-aviso-traduccion .govco-icon { font-size: 20px; color: var(--gov-golden-brown, #9D7700); flex: 0 0 auto; }
.vr-aviso-traduccion a { color: var(--navy, #1E538B); }

/* ── Alto contraste ────────────────────────────────────────────────────────
   El Kit lo implementa con una clase en el cuerpo que redefine los colores, no
   con un filtro: un filtro de saturación realza lo que ya hay, pero no
   garantiza ninguna razón de contraste. Aquí la paleta entera se sustituye por
   una de blanco sobre negro, que es la combinación de mayor contraste posible
   (21:1) y la que reconoce quien usa este modo.

   Como las tres hojas consumen estas mismas variables, redefinirlas aquí basta
   para que el modo alcance a la portada, a los visores y al panel. */
body.a11y-contrast {
    --teal: #FFD500;          --teal-claro: #FFE873;   --teal-suave: #262626;
    --navy: #FFD500;          --navy-oscuro: #000000;
    --dorado: #FFD500;        --dorado-texto: #FFD500;
    --vinotinto: #FF6B6B;
    --crema: #000000;         --blanco-calido: #000000;
    --tinta: #FFFFFF;         --tinta-suave: #E6E6E6;  --linea: #FFFFFF;
    --estado-ok: #4DFF88;     --estado-ok-fondo: #062B12;
    --estado-adv: #FFD500;    --estado-adv-fondo: #2B2306;
    --estado-err: #FF6B6B;    --estado-err-fondo: #2B0606;
    --gov-entidad: #000000;   --gov-cobalt: #000000;
    background: #000 !important;
    color: #fff !important;
}

/* Las superficies claras del diseño normal se oscurecen en bloque: son
   decenas de reglas con `#fff` escrito a mano, y perseguirlas una a una
   dejaría huecos blancos sueltos. */
body.a11y-contrast .caja,
body.a11y-contrast .vr-card,
body.a11y-contrast .tarjeta,
body.a11y-contrast .vr-stat,
body.a11y-contrast .vr-tabla-wrap,
body.a11y-contrast .gov-pie-logos,
body.a11y-contrast table,
body.a11y-contrast .vr-input,
body.a11y-contrast .btn { background: #000 !important; color: #fff !important;
    border-color: #fff !important; }
body.a11y-contrast a { color: #FFD500 !important; }
body.a11y-contrast img:not([alt=""]) { filter: none; }

/* Los degradados y las imágenes de fondo se retiran en bloque. No es exceso de
   celo: el hero los tiene escritos a mano, fuera de las variables, y sobre un
   degradado no hay contraste que se pueda garantizar — el mismo texto pasa en
   un extremo y falla en el otro. */
body.a11y-contrast *:not(img):not(svg):not(svg *) {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
body.a11y-contrast .vr-hero,
body.a11y-contrast .hero,
body.a11y-contrast section,
body.a11y-contrast header,
body.a11y-contrast footer,
body.a11y-contrast .vr-sec,
body.a11y-contrast .vr-sec-alt { background-color: #000 !important; }

/* Todo texto vuelve al blanco salvo lo que se destaca, que va en amarillo.
   Sin esta regla quedan los grises del diseño normal, que sobre negro caen a
   razones de dos o tres a uno. */
body.a11y-contrast p,
body.a11y-contrast li,
body.a11y-contrast td,
body.a11y-contrast th,
body.a11y-contrast span,
body.a11y-contrast dd,
body.a11y-contrast dt,
body.a11y-contrast label,
body.a11y-contrast figcaption,
body.a11y-contrast summary { color: #fff !important; }
body.a11y-contrast h1, body.a11y-contrast h2, body.a11y-contrast h3,
body.a11y-contrast h4, body.a11y-contrast h5, body.a11y-contrast h6,
body.a11y-contrast strong, body.a11y-contrast b { color: #FFD500 !important; }

/* Los botones de fondo sólido invierten: amarillo sobre negro. Con la regla
   general quedaban amarillo sobre amarillo y el rótulo desaparecía. */
body.a11y-contrast .btn, body.a11y-contrast .vr-btn,
body.a11y-contrast button:not(.vr-lang-go):not([data-a11y]) {
    background: #000 !important; color: #FFD500 !important;
    border: 2px solid #FFD500 !important; }
body.a11y-contrast .vr-btn-primary, body.a11y-contrast .btn-primary {
    background: #FFD500 !important; color: #000 !important; }

/* La barra del Estado conserva su identidad: es la marca del Estado, no parte
   del diseño de la plataforma. Solo se refuerza su borde inferior. */
body.a11y-contrast .vr-govbar { background: #000 !important;
    border-bottom: 2px solid #FFD500 !important; }
body.a11y-contrast .vr-govbar a, body.a11y-contrast .vr-govbar span {
    color: #fff !important; }

/* ── Escala de texto ───────────────────────────────────────────────────────
   Se ajusta el tamaño de la raíz, que es de donde cuelgan todas las medidas
   en unidades relativas. La propiedad `zoom` que se usaba antes no es
   estándar y Firefox la ignora, así que el control no hacía nada allí. */
html.a11y-texto-mas   { font-size: 112.5%; }
html.a11y-texto-menos { font-size: 87.5%; }


/* Una caja con desplazamiento que recibe el foco tiene que verse: sin
   indicador, quien tabula hasta ella no sabe dónde está. */
.vr-tabla-wrap[tabindex]:focus-visible,
pre[tabindex]:focus-visible {
    outline: 3px solid var(--gov-sunglow, #FECC2F);
    outline-offset: 2px;
}