/* El sistema visual de ebr2pdf (INSUD-293, PR 1). UNA SOLA HOJA para el monitor del contenedor y para
   la demo, por el mismo marco (`paginas/marco.html`): lo que cambia entre los dos es el envoltorio,
   nunca un componente. Sustituye a `ui.css`.

   SE SIRVE A CUALQUIERA Y SIN SESION, porque la pagina de acceso ya la necesita; por eso en
   `estaticos/ui/` solo hay lo que se puede publicar (hojas, guiones, fuentes y la marca), y una prueba
   lo comprueba. Ni una URL de fuera: la imagen corre sin red.

   NINGUNA PANTALLA TRAE REGLAS PROPIAS: la CSP del panel (`default-src 'self'`) no ejecuta ni `<style>`
   ni `style=""`, y `tests/test_interfaz_marco.py` falla si una plantilla los lleva. Los tokens de color
   los mide `tests/test_sistema_contraste.py`, par a par, en los cuatro temas y en claro y oscuro.

   Lo que manda es el diseno de la tercera vuelta de INSUD-293 con el delta de la cuarta (maquetas v4
   con su correccion v4.1, `docs/diseno/maquetas-293/`). Este PR trae los tokens, el marco, el tema
   Team Banzai, el modo oscuro y el modo de una pantalla; los componentes de las pantallas nuevas
   entran con cada pantalla (PR 2 en adelante). */

@font-face { font-family: "Plex Sans"; src: url("/estaticos/ui/fuentes/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/estaticos/ui/fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/estaticos/ui/fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/estaticos/ui/fuentes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/estaticos/ui/fuentes/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/estaticos/ui/fuentes/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Tokens. Los de la maqueta v4.1, tal cual: la base sin cliente en `:root`, el matiz de cada
   tema en su bloque `[data-tema]` y el modo oscuro por preferencia del sistema o por `data-modo`. Verde
   solo para lo que el servicio comprueba, naranja para vigilar, rojo para parado y azul para en curso,
   siempre con icono y palabra. `--tinta-3` es el minimo para texto; `--tinta-4` solo para filos. ---------- */
:root {
  color-scheme: light;
  --f-texto: "Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-cifra: "Barlow Condensed", "Plex Sans", system-ui, sans-serif;
  --f-codigo: "Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  --t-2xs: .75rem; --t-xs: .8125rem; --t-s: .875rem; --t-m: .9375rem; --t-l: 1.0625rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-cifra: 2.75rem;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 48px;
  --r-s: 4px; --r-m: 8px; --r-l: 12px;
  --barra: 44px;
  --ancho-pagina: 1440px;
  --d-1: 120ms; --d-2: 200ms; --d-3: 360ms; --d-4: 700ms;
  --curva: cubic-bezier(.2, .8, .2, 1);

  --mesa: #ECEFF2; --caja: #FFFFFF; --caja-2: #F6F8FA; --hundido: #E3E8EC;
  --linea: #D4DBE1; --linea-2: #E6EAEE; --borde-campo: #7A8894;
  --tinta: #13202A; --tinta-2: #374652; --tinta-3: #56656F; --tinta-4: #8995A0;
  --ok: #156B37; --ok-suave: #E5F3EA; --ok-filo: #A9D5B8;
  --vigilar: #A64B05; --vigilar-suave: #FCEFE1; --vigilar-filo: #EFC79E;
  --parado: #B3261E; --parado-suave: #FBE9E7; --parado-filo: #EDB4AE;
  --curso: #255C9B; --curso-suave: #E6EEF8; --curso-filo: #AFC6E3;
  --neutro: #56656F; --neutro-suave: #EEF1F4; --neutro-filo: #D4DBE1;
  --marca: #13202A; --marca-texto: #13202A; --accion: #13202A; --accion-hover: #2A3B49; --sobre-accion: #FFFFFF;
  --enlace: #255C9B; --foco: #255C9B; --elegida: #EAF1F9; --elegida-filo: #255C9B;
  --globo-fondo: #13202A; --globo-tinta: #F2F5F7; --globo-tenue: #B6C2CB;
  /* El papel del cuaderno: blanco y con su pauta con cualquier tema y en oscuro, porque es papel. */
  --papel: #FFFFFF; --papel-linea: #BFC8CF; --papel-pauta: #DDE2E6; --papel-tinta: #1A1A1A;
  /* El subrayador de Comparar va SOBRE EL PAPEL, que es blanco en los dos modos: no cambia con el oscuro. */
  --subrayador: #F5C04A; --subrayador-filo: #8A5A06; --subrayador-elegido: #B3261E;
  /* La superficie oscura fija (la puerta de la demo, el icono de un fichero): NO sigue al modo. */
  --noche: #13202A; --sobre-noche: #F2F4F6; --sobre-noche-2: #B9C3CC; --acento-noche: #8FC9D0;
  /* El final de la marca en texto de un dominio sin logo (Team Banzai, su ambar para fondo claro). */
  --acento-marca-texto: #C2520B;
  --sombra: #13202A;
  --sombra-caja: 0 1px 2px rgb(19 32 42 / .06);
  --sombra-2: 0 1px 2px rgb(19 32 42 / .06), 0 8px 24px -12px rgb(19 32 42 / .22);
}
[data-tema="insud"] {
  --marca: #047885; --marca-texto: #036C77; --accion: #047885; --accion-hover: #03636D; --enlace: #036C77; --foco: #047885;
  --elegida: #E6F2F3; --elegida-filo: #047885; --mesa: #E9EFF1; --caja-2: #F5F9FA;
}
[data-tema="fastvalue"] {
  --marca: #A8742C; --marca-texto: #835E2A; --accion: #101A24; --accion-hover: #26394A; --enlace: #255C9B; --elegida: #F6EFE4; --elegida-filo: #835E2A;
}
/* Team Banzai: el ambar y el casi negro de team-banzai-site (`--color-amber-ink` y `--color-bg`). */
[data-tema="teambanzai"] {
  --marca: #C2520B; --marca-texto: #A8460A; --accion: #0A0B0D; --accion-hover: #262A30; --enlace: #255C9B; --elegida: #FDF1E6; --elegida-filo: #A8460A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modo="claro"]) {
    color-scheme: dark;
    --mesa: #0F171D; --caja: #172229; --caja-2: #1C2830; --hundido: #0B1216; --linea: #2C3A44; --linea-2: #233039;
    --tinta: #E8EDF0; --tinta-2: #C3CDD4; --tinta-3: #9AA8B2; --tinta-4: #6E7C86; --borde-campo: #7D8B95;
    --ok: #6CCB8E; --ok-suave: #15301F; --ok-filo: #2E6B45; --vigilar: #F0A35C; --vigilar-suave: #34230F; --vigilar-filo: #6B4A22;
    --parado: #F2867D; --parado-suave: #3A1715; --parado-filo: #6E302B; --curso: #8DB5E8; --curso-suave: #172A40; --curso-filo: #34557D;
    --neutro: #9AA8B2; --neutro-suave: #1F2B33; --neutro-filo: #33424C; --elegida: #1B3340; --elegida-filo: #8DC4E8; --enlace: #8DC4E8; --foco: #8DC4E8;
    --marca-texto: #E8EDF0; --globo-fondo: #F2F5F7; --globo-tinta: #13202A; --globo-tenue: #46545F;
    --acento-marca-texto: #F29A5C; --sombra: #000000;
    --accion: #C3CDD4; --accion-hover: #E8EDF0; --sobre-accion: #13202A;
  }
}
:root[data-modo="oscuro"] {
  color-scheme: dark;
  --mesa: #0F171D; --caja: #172229; --caja-2: #1C2830; --hundido: #0B1216; --linea: #2C3A44; --linea-2: #233039;
  --tinta: #E8EDF0; --tinta-2: #C3CDD4; --tinta-3: #9AA8B2; --tinta-4: #6E7C86; --borde-campo: #7D8B95;
  --ok: #6CCB8E; --ok-suave: #15301F; --ok-filo: #2E6B45; --vigilar: #F0A35C; --vigilar-suave: #34230F; --vigilar-filo: #6B4A22;
  --parado: #F2867D; --parado-suave: #3A1715; --parado-filo: #6E302B; --curso: #8DB5E8; --curso-suave: #172A40; --curso-filo: #34557D;
  --neutro: #9AA8B2; --neutro-suave: #1F2B33; --neutro-filo: #33424C; --elegida: #1B3340; --elegida-filo: #8DC4E8; --enlace: #8DC4E8; --foco: #8DC4E8;
  --marca-texto: #E8EDF0; --globo-fondo: #F2F5F7; --globo-tinta: #13202A; --globo-tenue: #46545F;
  --acento-marca-texto: #F29A5C; --sombra: #000000;
  --accion: #C3CDD4; --accion-hover: #E8EDF0; --sobre-accion: #13202A;
}
/* EL BOTON PRIMARIO EN OSCURO (rev-681-fable, B1): la tinta casi negra de la base, Fast Value y Team Banzai
   desaparecia sobre la caja oscura (1,02 a 1,22), asi que en oscuro el boton es claro con la letra oscura,
   como el globo. Insud conserva su teal, aclarado para el fondo oscuro. */
@media (prefers-color-scheme: dark) { :root:not([data-modo="claro"])[data-tema="insud"] { --accion: #4FB3BF; --accion-hover: #7CC9D2; --sobre-accion: #0F171D; } }
:root[data-modo="oscuro"][data-tema="insud"] { --accion: #4FB3BF; --accion-hover: #7CC9D2; --sobre-accion: #0F171D; }
/* Sin tema, la marca es la tinta: en oscuro hay que darle la vuelta o el filo desaparece (1,02:1). */
@media (prefers-color-scheme: dark) { :root:not([data-modo="claro"]):not([data-tema]) { --marca: #C3CDD4; } }
:root[data-modo="oscuro"]:not([data-tema]) { --marca: #C3CDD4; }

/* ---------- EL PAPEL ES PAPEL TAMBIEN EN OSCURO: el cuaderno dibujado, la hoja de conciliacion y los
   esquemas de papel van en blanco con cualquier modo, asi que lo que va escrito encima vuelve a la tinta
   y a los colores de estado del modo claro. Los valores son los de `:root` y una prueba lo comprueba
   (`tests/test_sistema_contraste.py`); el enlace y la marca como letra, los de la base. ---------- */
.ui-hoja, .ui-hoja-conciliacion, .ui-salida .papel, .ui-esq-papel, .ui-operacion-panel, .ui-hoja-ejemplo, .ui-pagina-pdf {
  color-scheme: light;
  --caja: #FFFFFF; --caja-2: #F6F8FA; --hundido: #E3E8EC; --linea: #D4DBE1; --linea-2: #E6EAEE; --borde-campo: #7A8894;
  --tinta: #13202A; --tinta-2: #374652; --tinta-3: #56656F; --tinta-4: #8995A0;
  --ok: #156B37; --ok-suave: #E5F3EA; --ok-filo: #A9D5B8;
  --vigilar: #A64B05; --vigilar-suave: #FCEFE1; --vigilar-filo: #EFC79E;
  --parado: #B3261E; --parado-suave: #FBE9E7; --parado-filo: #EDB4AE;
  --curso: #255C9B; --curso-suave: #E6EEF8; --curso-filo: #AFC6E3;
  --neutro: #56656F; --neutro-suave: #EEF1F4; --neutro-filo: #D4DBE1;
  --enlace: #255C9B; --marca-texto: #13202A;
  /* Los alias se resuelven donde se declaran (en `:root`, ya en oscuro): aqui se vuelven a declarar. */
  --vigilar-texto: var(--vigilar); --vigilar-borde: var(--vigilar-filo); --bien: var(--ok); --aviso: var(--vigilar); --malo: var(--vigilar);
  --borde: var(--borde-campo); --e1: var(--curso);
  color: var(--tinta);
}

/* ---------- Los nombres de antes, como ALIAS de los nuevos: los componentes heredados de `ui.css` siguen
   leyendo `--primario`, `--borde` o `--radio-m` y pintan con el sistema nuevo sin repetir un color. Dos
   nombres de antes cambiaron de significado y por eso NO tienen alias: `--mesa` (antes el gris de una
   caja, hoy el fondo de la pagina) y `--accion` (antes el enlace, hoy el boton primario); sus usos
   heredados se reescribieron a `--caja-2` y a `--enlace`. Esta lista solo debe encoger: cada pantalla
   que pasa a los componentes nuevos quita los suyos. ---------- */
:root {
  --fondo: var(--mesa);
  --primario: var(--accion); --primario-hover: var(--accion-hover); --sobre-primario: var(--sobre-accion); --sobre-color: var(--sobre-accion);
  --borde: var(--borde-campo);
  --radio-s: var(--r-s); --radio-m: var(--r-m); --radio-l: var(--r-l);
  --alto-barra: var(--barra);
  --d-rapida: var(--d-1); --d-media: var(--d-2); --d-lenta: var(--d-3); --c-salida: var(--curva);
  --vigilar-borde: var(--vigilar-filo); --vigilar-texto: var(--vigilar);
  --bien: var(--ok); --aviso: var(--vigilar); --malo: var(--vigilar);
  --e1: var(--curso); --e2: #6B52C1; --e3: #9C3F75;
}

/* ---------- Base comun ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` manda sobre cualquier `display` de un componente: sin esto, `.ui-campo { display: grid }`
   ensenaba lo que el HTML o el guion esconden. */
[hidden] { display: none !important; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-barra) + 16px); }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--mesa); color: var(--tinta); font: 400 var(--t-m)/1.55 var(--f-texto); }
body > main { flex: 1 0 auto; }

/* ---------- El marco ---------- */
.marco-saltar { position: absolute; left: var(--e-4); top: -80px; z-index: 50; padding: var(--e-2) var(--e-4); border-radius: var(--r-m); background: var(--caja); color: var(--tinta); font: 600 var(--t-s)/1.4 var(--f-texto); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--sombra) 40%, transparent); }
.marco-saltar:focus { top: var(--e-2); }

/* La barra: blanca, con el filo de la marca arriba y la seccion subrayada. 48 px con el filo. */
.marco-barra { position: sticky; top: 0; z-index: 20; margin: 0; padding: 0; background: var(--caja); color: var(--tinta); border-top: 3px solid var(--marca); border-bottom: 1px solid var(--linea); font: 400 var(--t-s)/1.4 var(--f-texto); }
.marco-barra .marco-dentro { max-width: none; margin: 0; padding: 0 var(--e-5); min-height: var(--barra); display: flex; align-items: stretch; gap: 0 var(--e-5); flex-wrap: wrap; }
/* LA MARCA EN TEXTO de un dominio sin logo en imagen, en la barra clara de la demo. La de team-banzai.com
   (`Logo.astro`): Plex Mono 600 sin espaciado propio, la tinta de la pagina y el ambar de la marca,
   `--acento-marca-texto` (`--color-amber-ink` de su `global.css`), que da 4,66:1 sobre la barra blanca.
   NO VA EN EL PIE DE LA DEMO: sobre su `--caja-2` ese ambar no llega al 4,5. */
.marca-texto { display: inline-flex; align-items: center; font: 600 18px/1 var(--f-codigo); color: var(--tinta); white-space: nowrap; }
.marca-texto .acento { color: var(--acento-marca-texto); }
.marca-texto .marca-linea { display: inline; }
.marca-texto .marca-pila { display: none; flex-direction: column; align-items: flex-start; line-height: .92; }
@media (max-width: 639.98px) {
  .marca-texto .marca-linea { display: none; }
  .marca-texto .marca-pila { display: inline-flex; font-size: 16px; }
}
.marco-marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; white-space: nowrap; min-height: var(--barra); }
.marco-marca img { height: 22px; width: auto; }
/* El logotipo del sitio en la demo, uno por modo: el de fondo claro con tema claro y el de fondo oscuro
   con tema oscuro. Sin esto, en oscuro el logotipo en tinta fija desaparece sobre la barra. */
.marco-marca .logo-oscuro { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-modo="claro"]) .marco-marca .logo-claro { display: none; } :root:not([data-modo="claro"]) .marco-marca .logo-oscuro { display: inline; } }
:root[data-modo="oscuro"] .marco-marca .logo-claro { display: none; }
:root[data-modo="oscuro"] .marco-marca .logo-oscuro { display: inline; }

/* EL SIGNO Y EL WORDMARK DE EBR2PDF, en linea y nunca con `<img>`: los trazos llevan colores fijos para
   quien los abra sueltos, y aqui los pinta el tema (`--marca`, el pliegue con la marca al 45 % sobre la
   caja, la palabra en tinta y el «2» en `--marca-texto`), tambien en oscuro. */
.ebr-signo { width: 24px; height: 24px; flex: none; display: block; }
.ebr-signo .barra-hoja, .ebr-wordmark .barra-hoja { fill: var(--marca); }
.ebr-signo .pliegue, .ebr-wordmark .pliegue { fill: color-mix(in srgb, var(--marca) 45%, var(--caja)); }
.ebr-wordmark { height: 24px; width: auto; flex: none; display: block; }
.ebr-wordmark .palabra { fill: var(--tinta); }
.ebr-wordmark .dos { fill: var(--marca-texto); }
.ebr-producto { display: inline-flex; align-items: center; gap: 8px; }
.palabra { font: 700 1.125rem/1 var(--f-texto); letter-spacing: -.02em; color: var(--tinta); }
.palabra .dos { color: var(--marca-texto); }
/* En la demo manda la marca del sitio y ebr2pdf va a su lado, a 20 px. En el movil, solo la del sitio. */
.marco-junto { display: inline-flex; align-items: center; padding-left: 10px; border-left: 1px solid var(--linea); }
.marco-junto .ebr-wordmark { height: 20px; }
.marco-junto .ebr-signo { width: 20px; height: 20px; }
.marco-junto .palabra { font-size: 1rem; }

.marco-menu { display: flex; align-items: stretch; gap: 2px; flex: 0 1 auto; margin: 0; padding: 0; }
.marco-menu a { display: flex; align-items: center; padding: 0 14px; color: var(--tinta-3); text-decoration: none; font-weight: 500; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.marco-menu a:hover { color: var(--tinta); background: var(--caja-2); }
.marco-menu a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--marca); }
.marco-fichas { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-xs); }
.marco-fichas > span { border: 1px solid var(--linea); border-radius: 6px; padding: 4px 9px; background: var(--caja-2); color: var(--tinta-3); white-space: nowrap; }
.marco-fichas b { color: var(--tinta); font-weight: 600; }
.marco-extremo { display: flex; align-items: center; gap: var(--e-3); margin-left: auto; padding-left: 14px; border-left: 1px solid var(--linea-2); }
.marco-fichas + .marco-extremo { margin-left: 0; }
.marco-extremo form { margin: 0; display: flex; align-items: center; gap: var(--e-3); }
.marco-quien { font-size: var(--t-xs); color: var(--tinta-3); }
.marco-quien b { color: var(--tinta); }
.marco-boton-barra { min-height: 32px; padding: 0 var(--e-3); border-radius: var(--r-m); border: 1px solid var(--linea); background: var(--caja); color: var(--tinta); font: 500 var(--t-xs)/1 var(--f-texto); cursor: pointer; }
.marco-boton-barra:hover { border-color: var(--tinta-3); }
/* La marca legal de la demo: cada pagina que sale lleva «Copia de consulta», y la barra lo dice en todos
   los anchos. */
.marco-consulta { align-self: center; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 var(--t-xs)/1.2 var(--f-texto); border: 1px solid var(--vigilar-filo); background: var(--vigilar-suave); color: var(--vigilar); border-radius: 6px; padding: 3px 9px; white-space: nowrap; }
.marco-consulta + .marco-extremo { margin-left: 0; }

/* El pie es la barra de estado del sistema: abajo, con la version y la instalacion. */
.marco-pie { position: sticky; bottom: 0; z-index: 10; max-width: none; margin: 0; padding: 0; display: block; background: var(--caja-2); border-top: 1px solid var(--linea); color: var(--tinta-3); font: 400 var(--t-xs)/1.5 var(--f-texto); }
.marco-pie .marco-dentro { max-width: none; margin: 0; padding: 4px var(--e-5); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; }
.marco-pie code { font-family: var(--f-codigo); }
.marco-pie b { color: var(--tinta); font-weight: 600; }
.pie-demo .pie-marca b { font-weight: 600; }
.pie-demo .pie-enlaces { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pie-demo a { color: var(--tinta-2); text-underline-offset: 3px; }
.pie-demo a:hover { color: var(--tinta); }

/* Los avisos de la instalacion (monitor), la franja de la ultima prueba (demo), y las migas y los
   mensajes de la pagina, que el marco pinta encima del cuerpo en las dos sesiones. */
.marco-avisos { width: 100%; max-width: var(--ancho-pagina); margin: var(--e-3) auto 0; padding: 0 var(--e-5); }
.marco-avisos .ui-aviso:last-child { margin-bottom: 0; }
.huella { font-size: .85em; word-break: break-all; }
.marco-franja { background: var(--caja-2); border-bottom: 1px solid var(--linea); color: var(--tinta); font: 400 var(--t-s)/1.4 var(--f-texto); }
.marco-franja .marco-dentro { max-width: var(--ancho-pagina); margin: 0 auto; padding: var(--e-2) var(--e-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); }
.marco-franja .referencia { font-family: var(--f-codigo); font-size: var(--t-xs); color: var(--tinta); }
.marco-franja .nombre { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.marco-franja .ui-estado { background: var(--caja); }
.marco-franja .continuar { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; color: var(--tinta); font-weight: 600; text-underline-offset: 3px; }
.marco-cabecera { max-width: var(--ancho-pagina); margin: 0 auto; padding: 10px var(--e-5) 0; }
.marco-cabecera + .ui-pagina { padding-top: var(--e-2); }
.marco-cabecera:not(:has(~ .ui-pagina)) { max-width: none; padding: 0; }
.marco-pasos { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); font: 500 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta-3); }
.marco-pasos li { display: flex; align-items: center; gap: var(--e-2); }
.marco-pasos .numero { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--borde-campo); background: var(--caja); font-weight: 600; }
.marco-pasos .hecho { color: var(--tinta); }
.marco-pasos .hecho .numero { background: var(--tinta); border-color: var(--tinta); color: var(--caja); }
/* El paso en curso con dos senales, color y borde; uno detenido, con el borde discontinuo. */
.marco-pasos .activo { color: var(--tinta); font-weight: 600; }
.marco-pasos .activo .numero { border: 2px solid var(--tinta-2); color: var(--tinta); box-shadow: 0 0 0 3px var(--elegida); }
.marco-pasos .parado .numero { border-style: dashed; }

/* La barra no desborda en ningun ancho (v4.1): por debajo de 1200 se ocultan las plantas de la
   instalacion, quien ha entrado y el texto de Ayuda, que queda como icono con su nombre accesible. */
@media (max-width: 1199.98px) {
  .marco-fichas, .marco-quien { display: none; }
  .marco-ayuda .txt { display: none; }
  .marco-fichas + .marco-extremo { margin-left: auto; }
}
@media (max-width: 640px) {
  /* En el movil la barra NO es fija: con el menu en varias lineas ocupa un cuarto de la pantalla y
     taparia el destino de «Saltar al contenido». */
  .marco-barra { position: static; }
  html { scroll-padding-top: 0; }
  .marco-franja .marco-dentro { padding: var(--e-2) var(--e-4); }
  .marco-franja .continuar { margin-left: 0; }
  .marco-avisos { padding: 0 var(--e-4); }
  .marco-cabecera { padding: var(--e-4) var(--e-4) 0; }
  .marco-barra .marco-dentro { padding: 0 var(--e-3); gap: 0 var(--e-3); }
  .marco-marca { min-height: 46px; }
  .marco-junto { display: none; }
  /* El menu va en su propia linea, a lo ancho, y no se desplaza. */
  .marco-menu { order: 3; flex-basis: 100%; border-top: 1px solid var(--linea-2); }
  .marco-menu a { flex: 1; justify-content: center; padding: 10px 4px; min-height: 44px; }
  .marco-extremo { border: 0; padding: 0; }
  .marco-consulta { order: 2; font-size: 11px; padding: 2px 6px; }
  .marco-pie { position: static; }
  .marco-pie .marco-dentro { padding: var(--e-2) var(--e-3); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (pointer: coarse) { .marco-boton-barra { min-height: 44px; } }
@media print { .marco-barra, .marco-pie, .marco-saltar { display: none !important; } }

/* ==========================================================================================
   Componentes comunes (PR 3 del plan T42). Las pantallas compartidas entre el monitor y la demo
   (documentos, ficha y 404) se pintan SOLO con estas clases y las macros de `_componentes.html`.
   ========================================================================================== */
.ui { font: 400 var(--t-m)/1.55 var(--f-texto); color: var(--tinta); }
.ui h1 { font: 600 1.375rem/1.2 var(--f-texto); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.ui h2 { font: 600 var(--t-l)/1.25 var(--f-texto); margin: 0; }
.ui h3 { font: 600 var(--t-m)/1.3 var(--f-texto); margin: 0; }
.ui p { margin: 0; text-wrap: pretty; }
.ui a { color: var(--enlace); text-underline-offset: 3px; }
.ui code, .ui .codigo { font-family: var(--f-codigo); font-size: .92em; }
.ui-pagina { max-width: var(--ancho-pagina); margin: 0 auto; padding: 18px var(--e-5) var(--e-6); font-variant-numeric: tabular-nums; }
.ui-pila > * + * { margin-top: var(--e-4); }
.ui-cabecera { display: grid; gap: 4px; justify-items: start; margin-bottom: 18px; }
.ui-entradilla { font-size: var(--t-s); color: var(--tinta-3); }
.ui-nota { font-size: var(--t-s); color: var(--tinta-3); }
.ui-migas { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font: 500 var(--t-s)/1.3 var(--f-texto); color: var(--tinta-2); margin-bottom: var(--e-4); }
/* 24 PX DE ALTO EN CADA MIGA (WCAG 2.2, 2.5.8): sin la franja de la ultima prueba debajo de la barra, la
   miga quedaba a menos de 24 px del menu y axe la marcaba (INSUD-293, PR 3, medido en la prueba en curso).
   El relleno lateral del enlace es la zona de su fondo al pasar por encima, y el primero lo devuelve con
   margen negativo para que el texto arranque en la misma vertical que el titulo de la pantalla. */
.ui-migas a, .ui-migas [aria-current] { display: inline-flex; align-items: center; min-height: 24px; padding: 0 6px; border-radius: var(--r-s); }
.ui-migas > :first-child { margin-left: -6px; }
.ui-migas a { color: var(--tinta-2); text-decoration: none; }
.ui-migas a:hover { color: var(--tinta); background: var(--caja-2); }
.ui-migas [aria-current] { color: var(--tinta); font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ui-migas-paso { width: 14px; height: 14px; flex: none; color: var(--tinta-4); }

/* Botones: una accion primaria por pantalla. */
.ui-boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-height: 40px; padding: 0 14px; border-radius: var(--radio-m); border: 1px solid var(--linea); background: var(--caja); color: var(--tinta); font: 600 var(--t-s)/1 var(--f-texto); text-decoration: none; cursor: pointer; white-space: nowrap; }
.ui-boton:hover { border-color: var(--tinta-3); }
.ui-boton.primario { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.ui-boton.primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
.ui-boton.fantasma { border-color: transparent; background: transparent; color: var(--enlace); padding: 0 var(--e-3); }
.ui-boton.fantasma:hover { background: var(--caja-2); }
.ui-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); align-items: center; }

/* Estados: forma y palabra, nunca solo color. Verde solo para lo comprobado. */
/* Estado: punto y palabra, sin pastilla. Verde solo para lo comprobado; naranja para vigilar, con el
   punto cuadrado cuando es un fallo. */
.ui-estado { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font: 600 var(--t-xs)/1.2 var(--f-texto); white-space: nowrap; }
.ui-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-4); flex: none; }
.ui-estado.malo { color: var(--vigilar-texto); }
.ui-estado.malo::before { border-radius: 1px; background: var(--vigilar); }
.ui-estado.bien { color: var(--ok); }
.ui-estado.bien::before { background: var(--ok); }

/* Avisos de pagina: el texto va en tinta y el color en el filo. */
.ui-aviso { display: block; margin: 0 0 var(--e-3); padding: 9px 12px; border-radius: var(--radio-m); border: 1px solid var(--vigilar-borde); border-left: 4px solid var(--vigilar); background: var(--vigilar-suave); color: var(--tinta); font-size: var(--t-s); line-height: 1.45; }
.ui-aviso p { margin: 0; }
.ui-aviso p + p { margin-top: var(--e-2); }
.ui-aviso.malo { border-left-color: var(--vigilar-texto); }
.ui-aviso.info { border-color: var(--linea-2); border-left-color: var(--marca); background: var(--caja-2); }
.ui-sello { display: inline-block; padding: 3px 8px; border: 2px solid currentColor; border-radius: var(--radio-s); color: var(--malo); font: 700 var(--t-xs)/1.2 var(--f-texto); rotate: -1.5deg; }

/* Campos */
.ui-campo { display: grid; gap: 6px; }
.ui-campo label { font-weight: 600; font-size: var(--t-s); }
.ui input[type="search"], .ui input[type="text"] { font: 400 var(--t-m) var(--f-texto); color: var(--tinta); background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio-m); min-height: 40px; padding: 0 var(--e-3); width: 100%; }
.ui-buscador { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: end; margin-bottom: 18px; }
.ui-buscador .ui-campo { flex: 1 1 320px; }
.ui-alterna { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio-m); overflow: hidden; }
.ui-alterna a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 var(--e-4); background: var(--caja); color: var(--tinta-2); font: 600 var(--t-s) var(--f-texto); text-decoration: none; }
.ui-alterna a[aria-current="page"] { background: var(--tinta); color: var(--caja); }

/* El legajo: el documento como material. Cada cuaderno es una hoja con su pestaña; la pinza marca
   que se imprime, con su numero de orden. Hasta el PR 6 la hoja es tipografica: cuando PDF.js
   dibuje la primera pagina real, la hoja la lleva dentro. */
.ui-legajo-guia + .ui-legajo-guia { margin-top: var(--e-7); }
/* Los grupos de una prueba de la demo van en fila: cada uno trae uno o dos cuadernos. */
.ui-legajos { display: flex; flex-wrap: wrap; gap: var(--e-6) var(--e-7); align-items: start; margin-top: var(--e-4); }
.ui-legajos > .ui-legajo-guia { margin-top: 0; flex: 0 1 auto; max-width: 100%; }
.ui-legajos .ui-legajo-guia > header { display: grid; gap: 2px; max-width: 24rem; }
.ui-legajo-guia h2 { overflow-wrap: anywhere; min-width: 0; }
.ui-legajo-guia > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-2); }
.ui-legajo { --ancho: 172px; display: flex; flex-wrap: wrap; gap: var(--e-6) var(--e-4); padding: var(--e-3) 4px var(--e-3); }
/* Pestaña y pinza van en su propia fila, encima de la hoja: el texto de la pestaña se lee entero y
   nada tapa el rotulo del papel. */
.ui-cuaderno { position: relative; width: var(--ancho); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-2); align-items: end; }
.ui-cuaderno > .ui-hoja, .ui-cuaderno > .nota, .ui-cuaderno > .ui-acciones { grid-column: 1 / -1; }
.ui-hoja { position: relative; display: grid; align-content: start; gap: 6px; aspect-ratio: 210 / 297; padding: 14% 12%; background: var(--papel); color: var(--tinta); border-radius: 3px; box-shadow: 0 1px 1px color-mix(in srgb, var(--sombra) 14%, transparent), 6px 10px 24px -10px color-mix(in srgb, var(--sombra) 40%, transparent); text-decoration: none; overflow: hidden; transition: transform var(--d-media) var(--c-salida); }
.ui-hoja:hover, .ui-hoja:focus-visible { transform: translateY(-6px); }
.ui-hoja .clase { font: 600 11px/1.3 var(--f-texto); color: var(--tinta-2); border-bottom: 1.5px solid var(--tinta); padding-bottom: 4px; }
.ui-hoja .titulo { font: 700 var(--t-s)/1.25 var(--f-texto); color: var(--tinta); overflow-wrap: break-word; }
/* Con la primera pagina real dibujada, el lienzo cubre la hoja y el texto se queda para el lector de
   pantalla y para cuando PDF.js no carga. */
.ui-hoja > .ui-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--papel); }
.ui-hoja.con-pagina > .clase, .ui-hoja.con-pagina > .titulo { opacity: 0; }
.ui-hoja .marca-apto { position: absolute; left: 50%; top: 58%; translate: -50% 0; rotate: -8deg; padding: 2px 8px; border: 2px solid var(--vigilar-texto); border-radius: 4px; color: var(--vigilar-texto); font: 700 11px/1.2 var(--f-texto); background: color-mix(in srgb, var(--papel) 90%, transparent); }
.ui-pestana { position: relative; z-index: 1; justify-self: start; margin: 0 0 calc(-1 * var(--e-2) - 1px) 8px; padding: 3px 10px 4px; border-radius: 6px 6px 0 0; background: var(--caja); border: 1px solid var(--linea); border-bottom: 0; font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta); overflow-wrap: break-word; min-width: 0; }
.ui-pestana small { display: block; font-weight: 500; }
.ui-cuaderno.es-codigo .ui-pestana { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
/* La pinza va en la linea de la pestaña, fuera del papel: no tapa el rotulo de la hoja. */
.ui-pinza { position: relative; z-index: 2; margin-right: 4px; display: grid; place-items: center; width: 36px; height: 44px; border-radius: 6px 6px 3px 3px; background: var(--caja); border: 2px solid var(--borde); cursor: pointer; }
.ui-pinza input { width: 22px; height: 22px; margin: 0; accent-color: var(--primario); cursor: pointer; }
.ui-pinza:has(input:checked) { border-color: var(--primario); background: color-mix(in oklab, var(--primario) 14%, var(--caja)); }
/* El numero de la pinza es el lugar en que sale ese cuaderno en el PDF conjunto. */
.ui-pinza[data-numero]::after { content: attr(data-numero); position: absolute; top: -9px; left: -11px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--primario); color: var(--sobre-primario); font: 700 var(--t-xs)/22px var(--f-texto); text-align: center; }
.ui-pinza:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 4px; box-shadow: 0 0 0 4px var(--papel); }
.ui-cuaderno .nota { font-size: var(--t-xs); color: var(--tinta-2); line-height: 1.35; }
.ui-cuaderno .nota .malo { color: var(--malo); font-weight: 600; }
.ui-cuaderno .nota .procedencia { overflow-wrap: anywhere; }
.ui-cuaderno .ui-acciones a { font-size: var(--t-xs); font-weight: 600; min-height: 28px; display: inline-flex; align-items: center; padding: 0 6px; }

/* El indice de documentos controlados y el libro de registro: renglones, sin caja. */
/* Tablas del sistema: cabecera en versalitas pequeñas y renglones con filo claro. */
.ui-registro { width: 100%; border-collapse: collapse; font-size: var(--t-s); font-variant-numeric: tabular-nums; }
.ui-registro th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--tinta-3); padding: 8px 16px; border-bottom: 1px solid var(--linea); }
.ui-registro td { padding: 9px 16px; border-top: 1px solid var(--linea-2); vertical-align: baseline; }
.ui-registro td a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 6px; }
.ui-registro td.numero { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ui-registro tr.motivo td { color: var(--tinta-2); font-size: var(--t-s); padding-top: 0; }
.ui-registro td .ui-nombre-fichero { max-width: 18rem; }
/* LA LISTA DE PRUEBAS SE APILA EN EL MOVIL: cinco columnas en 358 px dejaban «Subida» y «Documentos»
   fuera de la vista (revision del PR 422). Cada celda lleva delante su rotulo (`data-rotulo`). */
@media (max-width: 640px) {
  .ui-registro.apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-registro.apilable, .ui-registro.apilable tbody, .ui-registro.apilable tr, .ui-registro.apilable td { display: block; width: 100%; }
  .ui-registro.apilable tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--borde); }
  .ui-registro.apilable tr.motivo { padding-top: 0; }
  .ui-registro.apilable td { border: 0; padding: 2px 0; }
  .ui-registro.apilable td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--tinta-2); }
  /* En el índice de documentos la pinza va al lado del título y las descargas, en su línea. */
  .ui-registro.apilable tr:has(> .pinza-fila) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--e-3); }
  .ui-registro.apilable tr:has(> .pinza-fila) > td { grid-column: 2; }
  .ui-registro.apilable tr:has(> .pinza-fila) > .pinza-fila { grid-column: 1; grid-row: 1 / span 7; width: auto; }
  .ui-registro.apilable .descargas-fila a { display: inline-flex; min-height: 44px; align-items: center; }
}
/* «PDF/A-4» y «copia de consulta» no se parten en escritorio (QA ciego del PR 429). */
.ui-registro td.sin-partir { white-space: nowrap; }
.ui-registro input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--primario); }
.ui-envoltura-tabla { overflow-x: auto; }

/* La bandeja de impresion, al lado del legajo. */
.ui-con-bandeja { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
/* La columna lateral (bandeja de imprimir, ficha del documento) es una tarjeta del sistema. */
.ui-bandeja { position: sticky; top: calc(var(--alto-barra) + var(--e-4)); display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--radio-l); background: var(--caja); border: 1px solid var(--linea); box-shadow: var(--sombra-caja); }
.ui-bandeja > h2:first-child { margin: -14px -16px 2px; padding: 12px 16px; border-bottom: 1px solid var(--linea); font: 600 12px/1.3 var(--f-texto); letter-spacing: .9px; text-transform: uppercase; color: var(--tinta-3); }
.ui-bandeja .cuenta { font: 600 1.75rem/1 var(--f-cifra); font-variant-numeric: tabular-nums; }
.ui-bandeja .ui-nota { color: var(--tinta-2); }
.ui-bandeja ol { margin: 0; padding-left: var(--e-5); display: grid; gap: 4px; font-size: var(--t-s); }

/* Ficha de un documento */
.ui-ficha { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--e-2) var(--e-5); margin: 0; font-size: var(--t-s); }
.ui-ficha dt { color: var(--tinta-3); }
/* En la columna lateral la ficha va a una columna: con dos, a 300 px los valores partian palabra a palabra. */
.ui-bandeja .ui-ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ui-tarjeta-documentos .ui-legajo-guia:first-of-type { margin-top: 14px; }
.ui-bandeja .ui-ficha dd + dt { margin-top: var(--e-2); }
.ui-bandeja > .ui-acciones { display: grid; }
.ui-ficha dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.ui-marco-pdf { width: 100%; height: 80vh; min-height: 480px; border: 0; border-radius: var(--radio-m); background: var(--caja-2); }

/* El visor: miniaturas a la izquierda que siguen a la lectura, las paginas en el centro. */
.ui-visor { display: grid; gap: var(--e-3); min-width: 0; }
.ui-visor:focus-visible { outline-offset: 6px; }
.ui-visor-barra { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); }
.ui-visor-barra .ui-acciones { margin-left: auto; }
.ui-visor-barra a { font-weight: 600; font-size: var(--t-s); min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.ui kbd { font: 500 var(--t-xs)/1 var(--f-codigo); padding: 2px 6px; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--caja); color: var(--tinta); }
.ui-visor-cuerpo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--e-4); align-items: start; }
.ui-miniaturas { position: sticky; top: calc(var(--alto-barra) + var(--e-4)); display: grid; gap: var(--e-3); max-height: var(--alto-miniaturas, calc(100vh - var(--alto-barra) - var(--e-6))); overflow-y: auto; overflow-x: hidden; padding: 4px; }
.ui-miniatura { display: grid; gap: 4px; justify-items: center; padding: 4px; border-radius: var(--radio-s); border: 2px solid transparent; color: var(--tinta-2); font-size: var(--t-xs); text-decoration: none; }
.ui-miniatura > .ui-lienzo { width: 96px; height: auto; background: var(--papel); box-shadow: 0 1px 3px color-mix(in srgb, var(--sombra) 25%, transparent); }
.ui-miniatura[aria-current="page"] { border-color: var(--enlace); color: var(--tinta); font-weight: 600; }
.ui-paginas { display: grid; gap: var(--e-5); min-width: 0; }
.ui-pagina-pdf { position: relative; width: 100%; background: var(--papel); box-shadow: 0 1px 1px color-mix(in srgb, var(--sombra) 14%, transparent), 0 10px 28px -14px color-mix(in srgb, var(--sombra) 45%, transparent); scroll-margin-top: calc(var(--alto-barra) + var(--e-4)); }
.ui-pagina-pdf > .ui-lienzo { display: block; width: 100%; height: auto; }
.ui-marco-impresion { position: absolute; left: -10000px; top: 0; width: 800px; height: 600px; border: 0; }
.ui-subtitulo { font: 600 var(--t-s)/1.3 var(--f-texto); margin: var(--e-2) 0 0; }
.ui-lista-simple { margin: 0; padding-left: var(--e-5); display: grid; gap: 4px; font-size: var(--t-s); }
.ui-lista-simple a { display: inline-flex; min-height: 28px; align-items: center; }
.ui-lista-simple ul { margin: 2px 0 var(--e-2); padding-left: var(--e-4); font-size: var(--t-xs); color: var(--tinta-2); display: grid; gap: 2px; }


/* ==========================================================================================
   La demo (PR 7 del plan T42): puerta, panel con la subida, la linea y la bandeja de lo que sale,
   la hoja de conciliacion y el legajo del resultado. Portado de las maquetas 01 a 04.
   ========================================================================================== */
.ui-tarjeta { background: var(--caja); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra-caja); padding: 14px 16px; min-width: 0; }
.ui-tarjeta + .ui-tarjeta { margin-top: 18px; }
.ui-columnas .ui-tarjeta + .ui-tarjeta { margin-top: 0; }
.ui-seccion { margin-top: var(--e-7); }
.ui-seccion > h2 { margin-bottom: var(--e-3); }
.ui-boton.grande { min-height: 52px; padding: 0 var(--e-6); font-size: var(--t-m); }
.ui-boton.peligro { border-color: var(--malo); color: var(--malo); }
.ui-boton.peligro:hover { background: color-mix(in oklab, var(--malo) 8%, var(--caja)); }
.ui-boton[aria-busy="true"] { cursor: progress; opacity: .75; }
.ui-estado.curso { color: var(--tinta-2); }
.ui-estado.curso::before { background: var(--tinta-2); }
.ui-estado.cuidado { color: var(--vigilar-texto); }
.ui-estado.cuidado::before { border-radius: 1px; rotate: 45deg; background: var(--vigilar); }
.ui-campo input[type="password"], .ui-campo input[type="file"] { font: 400 var(--t-m) var(--f-texto); color: var(--tinta); background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio-m); min-height: 44px; padding: var(--e-2) var(--e-3); width: 100%; }
.ui-campo .ayuda { font-size: var(--t-s); color: var(--tinta-3); }
.ui-casillas { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); }
.ui-casillas legend { font-weight: 600; font-size: var(--t-s); margin-bottom: 4px; padding: 0; }
.ui-casillas label { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; }
.ui-casillas input { width: 20px; height: 20px; accent-color: var(--primario); }
.ui-referencia { font: 500 var(--t-xs)/1.2 var(--f-codigo); color: var(--tinta-2); }

/* La puerta: el relato a la izquierda y una pagina real del cuaderno a la derecha. */
/* LA PUERTA CABE EN UN PORTATIL (Alfonso, 28-09-2026): a 1512x982 el titular ocupaba cinco lineas y
   el boton de entrar quedaba bajo el pliegue. El relato gana anchura, el titular baja de cuerpo y el
   aire se ajusta al alto de la ventana. Lo vigila `tests/test_pliegue.py` a 1280x800, 1440x900 y
   1512x982. */
.ui-puerta { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--noche); color: var(--sobre-noche); }
.ui-puerta .relato { padding: clamp(24px, 5vh, 64px) clamp(24px, 5vw, 80px); display: grid; align-content: center; gap: var(--e-4); }
.ui-puerta h1 { font: 600 clamp(2rem, 1.1rem + 2vw, 3.25rem)/1.08 var(--f-texto); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.ui-puerta .entradilla { color: var(--sobre-noche-2); font-size: var(--t-l); margin: 0; }
.ui-puerta .formulario { background: var(--caja); color: var(--tinta); border-radius: var(--radio-l); padding: var(--e-5) var(--e-6); display: grid; gap: var(--e-3); max-width: 440px; }
.ui-puerta .formulario p { margin: 0; }
.ui-puerta .escena { display: grid; place-items: center; padding: var(--e-6); background: var(--noche); }
/* LA MUESTRA A SU TAMAÑO DE LECTURA: la genera el motor a 480 px CSS con la letra a 15 px, y no se
   estira (`scripts/generar_muestras_demo.py`). */
.ui-puerta figure { margin: 0; display: grid; gap: var(--e-3); width: 100%; max-width: 480px; }
.ui-puerta figure img { width: 100%; height: auto; background: var(--papel); border-radius: 3px; box-shadow: 0 30px 60px -20px color-mix(in srgb, var(--sombra) 60%, transparent); }
.ui-puerta figcaption { color: var(--sobre-noche-2); font-size: var(--t-s); }
.ui-puerta :focus-visible { outline-color: var(--acento-noche); }
.ui-puerta .formulario :focus-visible { outline-color: var(--foco); }

/* El panel: el ejemplo y la subida como dos cuadernos del mismo legajo. */
/* LAS DOS TARJETAS OCUPAN LO MISMO EN VERTICAL y su boton va abajo, alineado con el de la otra
   (Alfonso, 28-09-2026): `stretch` en la rejilla y la ultima pieza de cada una empujada al fondo. */
.ui-caminos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); align-items: stretch; }
.ui-caminos > .ui-tarjeta { margin-top: 0; }
.ui-pagina > .ui-caminos + * { margin-top: var(--e-5); }
.ui-camino { display: flex; flex-direction: column; gap: var(--e-3); }
/* EL PANEL CABE EN UN PORTATIL (28-09-2026): a 1280x800 el boton del ejemplo acababa en 936 px. La
   cabecera se aprieta, la muestra de la portada es una miniatura y la zona de soltar pierde aire. Lo
   vigila `tests/test_pliegue.py`. */
.ui-pagina:has(> .ui-caminos) { padding-top: var(--e-4); }
.ui-pagina:has(> .ui-caminos) > .ui-cabecera { gap: var(--e-1); margin-bottom: var(--e-4); }
.ui-pagina:has(> .ui-caminos) > .ui-cabecera h1 { font-size: 1.75rem; }
.ui-pagina:has(> .ui-caminos) > .ui-cabecera .ui-entradilla { font-size: var(--t-m); }
.ui-camino .ui-hoja-ejemplo { max-width: 150px; }
.ui-caminos > .ui-camino { padding: var(--e-4) var(--e-5); }
.ui-camino .ui-subida { padding: var(--e-4) var(--e-5); gap: 2px; }
.ui-camino .ui-subida svg { width: 32px; height: 32px; }
/* CON FICHEROS ELEGIDOS, LA ZONA SE QUEDA EN UNA LINEA y la nota del tope se aparta: la lista ocupa su
   sitio y «Generar el cuaderno» sigue a la vista a 1280x800 (revisión adversarial del PR 429). La zona
   sigue siendo donde se sueltan o se eligen mas. */
.ui-camino:has(.ui-ficheros:not([hidden])) .ui-subida { grid-auto-flow: column; justify-content: center; align-items: center; padding: var(--e-2) var(--e-4); gap: var(--e-2); }
.ui-camino:has(.ui-ficheros:not([hidden])) .ui-subida svg { width: 20px; height: 20px; }
.ui-camino:has(.ui-ficheros:not([hidden])) #ayuda-fichero { display: none; }
.ui-camino:has(.ui-ficheros:not([hidden])) { gap: var(--e-2); }
.ui-camino .ui-fichero { padding: var(--e-2) var(--e-3); }
.ui-camino .ui-fichero .tipo { width: 32px; height: 38px; }
.ui-camino .ui-casillas { align-items: center; }
.ui-camino .ui-casillas legend { float: left; margin: 0 var(--e-3) 0 0; line-height: 44px; }
.ui-camino > :last-child { margin-top: auto; }
.ui-camino > h2 { margin: 0; }
.ui-camino p { margin: 0; }
.ui-hoja-ejemplo { display: block; max-width: 300px; background: var(--papel); border-radius: 3px; box-shadow: 0 1px 1px color-mix(in srgb, var(--sombra) 14%, transparent), 6px 10px 24px -10px color-mix(in srgb, var(--sombra) 40%, transparent); }
.ui-hoja-ejemplo img { display: block; width: 100%; height: auto; border-radius: 3px; }
.ui-subida { position: relative; display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-6) var(--e-5); text-align: center; border: 2px dashed var(--borde); border-radius: var(--radio-l); background: color-mix(in oklab, var(--caja) 70%, var(--caja-2)); cursor: pointer; }
.ui-subida.encima { border-style: solid; border-color: var(--enlace); background: color-mix(in oklab, var(--enlace) 8%, var(--caja)); }
.ui-subida svg { width: 44px; height: 44px; color: var(--enlace); }
.ui-subida:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.ui-ficheros { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.ui-fichero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); border: 1px solid var(--linea); border-radius: var(--radio-m); background: var(--caja); }
.ui-fichero .tipo { width: 40px; height: 48px; border-radius: 4px; background: var(--noche); color: var(--sobre-noche); display: grid; place-items: center; font: 700 12px var(--f-codigo); }
.ui-fichero .dato { display: grid; gap: 2px; min-width: 0; font-size: var(--t-s); color: var(--tinta-2); }
/* El nombre se recorta POR EL MEDIO y la extension se ve siempre: `Exportacion_GUIA…proceso.cab`. */
.ui-nombre-fichero { display: flex; min-width: 0; font-weight: 600; color: var(--tinta); }
.ui-nombre-fichero .base { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ui-nombre-fichero .fin, .ui-nombre-fichero .ext { flex: none; white-space: pre; }
.ui-barra-subida { height: 4px; border-radius: 2px; background: var(--linea); overflow: hidden; margin-top: 4px; }
.ui-barra-subida > span { display: block; height: 100%; width: 0; background: var(--primario); transition: width var(--d-media); }

/* La linea de la conversion: cinco etapas, con la activa marcada con dos senales. */
.ui-linea { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ui-linea li { position: relative; display: grid; justify-items: center; gap: var(--e-2); text-align: center; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-3); }
.ui-linea li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: var(--linea); }
.ui-linea li:first-child::before { display: none; }
.ui-linea li.hecho::before, .ui-linea li.activo::before { background: var(--tinta-2); }
.ui-linea .punto { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--caja); border: 2px solid var(--linea); color: var(--tinta-3); font: 700 var(--t-s) var(--f-cifra); }
.ui-linea li.hecho { color: var(--tinta-2); }
.ui-linea li.hecho .punto { background: var(--tinta-2); border-color: var(--tinta-2); color: var(--sobre-color); }
.ui-linea li.activo { color: var(--tinta); }
.ui-linea li.activo .punto { border-color: var(--tinta-2); color: var(--tinta); box-shadow: 0 0 0 4px var(--elegida); }
.ui-linea li.parado .punto { border-style: dashed; }
.ui-linea-y-cifra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-5); align-items: center; }
.ui-cifra { display: grid; gap: 2px; justify-items: end; text-align: right; }
.ui-cifra .valor { font: 700 2.75rem/.95 var(--f-cifra); font-variant-numeric: tabular-nums; }
.ui-cifra .valor small { font-size: .45em; font-weight: 600; color: var(--tinta-3); margin-left: 4px; }
.ui-cifra .rotulo { font-size: var(--t-s); color: var(--tinta-2); }

/* La bandeja de lo que sale: una hoja por documento, en blanco hasta que existe. */
.ui-salida { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e-5) var(--e-4); margin: 0; padding: 0; list-style: none; }
.ui-salida li { display: grid; gap: var(--e-2); align-content: start; font-size: var(--t-xs); color: var(--tinta-2); line-height: 1.35; }
.ui-salida .papel { aspect-ratio: 210 / 297; background: var(--papel); border-radius: 3px; box-shadow: 0 1px 1px color-mix(in srgb, var(--sombra) 14%, transparent), 4px 8px 18px -10px color-mix(in srgb, var(--sombra) 40%, transparent); display: grid; place-items: center; }
.ui-salida .pendiente .papel { background: color-mix(in oklab, var(--caja) 55%, transparent); box-shadow: none; border: 2px dashed var(--borde); }
.ui-salida .papel { font: 700 2rem/1 var(--f-texto); color: var(--bien); }
.ui-salida b { display: block; color: var(--tinta); font-weight: 600; }
.ui-salida .grupo { grid-column: 1 / -1; font-size: var(--t-s); color: var(--tinta-2); margin-top: var(--e-2); }
.ui-salida .grupo b { display: inline; }

/* La prueba en marcha: la fase, su detalle y el reloj, y lo que va a salir. */
.progreso .rotulo-fase { font: 600 var(--t-l)/1.3 var(--f-texto); }
.progreso .puntos::after { content: "\2026"; }
.progreso .detalle-fase { color: var(--tinta-2); }
.progreso .tiempo-fase { font-size: var(--t-s); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* Los grupos de lo que sale, en columnas: cada uno con su explicacion y sus hojas. */
.inventario { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--e-5); align-items: start; }
.inventario > h3 { grid-column: 1 / -1; font-size: var(--t-l); margin: 0; }
.inventario .grupo { display: grid; gap: var(--e-2); align-content: start; }
.inventario .ui-salida { grid-template-columns: repeat(auto-fill, minmax(120px, 150px)); }
.inventario .grupo h4 { font: 600 var(--t-m)/1.3 var(--f-texto); margin: 0; }
.ui .porque { color: var(--tinta-2); font-size: var(--t-s); }
.ui-cuaderno .nota.esperado { border-left: 2px solid var(--linea); padding-left: var(--e-2); }
.ui-cuaderno .nota.incidencia { border-left: 2px solid var(--aviso); padding-left: var(--e-2); color: var(--aviso); }
.ui-ficha .valor-puesto { font-weight: 700; }
.ui-ficha .sin-valor { color: var(--tinta-2); font-style: italic; }

/* La conciliacion: un impreso pautado, como la conciliacion de un lote. Papel blanco en los dos
   modos, porque es papel. */
.ui-hoja-conciliacion { background: var(--papel); color: var(--tinta); border-radius: 3px; box-shadow: 0 1px 1px color-mix(in srgb, var(--sombra) 14%, transparent), 0 12px 30px -16px color-mix(in srgb, var(--sombra) 45%, transparent); padding: var(--e-5) var(--e-6) var(--e-4); overflow-x: auto; }
.ui-conciliacion { width: 100%; border-collapse: collapse; font-size: var(--t-s); color: var(--tinta); }
.ui-conciliacion caption { text-align: left; font: 700 var(--t-l)/1.2 var(--f-texto); padding-bottom: var(--e-3); border-bottom: 3px double var(--tinta); }
.ui-conciliacion th, .ui-conciliacion td { text-align: left; padding: 10px var(--e-3) 10px 0; border-bottom: 1px solid var(--papel-linea); vertical-align: baseline; }
.ui-conciliacion thead th { font-weight: 600; color: var(--tinta-2); border-bottom: 1.5px solid var(--tinta); }
.ui-conciliacion td b { font: 700 1.4rem/1 var(--f-cifra); margin-right: 4px; font-variant-numeric: tabular-nums; }
.ui-conciliacion td span { color: var(--tinta-2); }
.ui-conciliacion tr.con-aviso td:last-child b { color: var(--vigilar-texto); }
.ui-conciliacion .sin-medida { color: var(--tinta-3); font-style: italic; }
.ui-conciliacion tfoot td { border-bottom: 0; padding-top: var(--e-4); }
.ui-conciliacion a { color: var(--enlace); }
.ui-cuadra { display: inline-block; rotate: -3deg; margin-right: var(--e-3); padding: 2px 10px; border: 2.5px solid var(--ok); border-radius: 4px; color: var(--ok); font: 700 var(--t-s)/1.3 var(--f-texto); }
.ui-cuadra.no { border-color: var(--vigilar-texto); color: var(--vigilar-texto); }
/* EN EL MOVIL LA HOJA SE APILA: cuatro columnas en 358 px se desplazaban de lado y la de lo que queda
   fuera no se veia (INSUD-320). Cada fila es un bloque con su titulo y cada cifra lleva delante su
   columna (`data-rotulo`); los `role` de la plantilla mantienen la tabla para el lector de pantalla. */
@media (max-width: 640px) {
  .ui-conciliacion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ui-conciliacion, .ui-conciliacion tbody, .ui-conciliacion tfoot, .ui-conciliacion tr, .ui-conciliacion th, .ui-conciliacion td { display: block; width: 100%; }
  .ui-conciliacion caption { display: block; }
  .ui-conciliacion tbody tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--papel-linea); }
  .ui-conciliacion tbody th, .ui-conciliacion tbody td { border: 0; padding: 2px 0; }
  .ui-conciliacion tbody th { padding-bottom: var(--e-1); }
  .ui-conciliacion td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: var(--t-xs); color: var(--tinta-3); }
}

/* La prueba que se ve: el documento elegido y las cuatro lineas que demuestran lo que se hizo. */
.ui-evidencia { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.ui-evidencia .ui-visor-cuerpo { grid-template-columns: minmax(0, 1fr); }
.ui-evidencia .ui-miniaturas { display: none; }
/* LAS DOS MUESTRAS UNA AL LADO DE LA OTRA cuando caben, cada una a su tamaño de lectura (420 px): la
   comparacion es que cambia el valor y nada mas, y se ve mejor de un vistazo. EL MINIMO DE CADA
   COLUMNA ES FIJO Y NO `auto`: una imagen que no carga pinta su texto alternativo en una sola linea, y
   con el minimo de contenido la columna crecia hasta 3.041 px en un movil de 390 (CI del PR 422). */
.ui-comparacion { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--e-4); margin: 0; }
.ui-comparacion figure { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-2); min-width: 0; }
.ui-comparacion img { justify-self: start; max-width: 100%; box-sizing: border-box; padding: var(--e-2); height: auto; background: var(--papel); border-radius: 3px; border: 1px solid var(--linea); }
.ui-comparacion figcaption { font-size: var(--t-s); color: var(--tinta-2); }
/* EL ESQUEMA DE «COMO FUNCIONA» (propuesta B, la prensa): dos ficheros caen en la banda del motor y salen
   cuatro hojas dibujadas, cada una con su rasgo (valores, huecos, varias hojas, el flujo). La mecanica de
   las flechas es del componente comun (`esquema.css` y `esquema.js`); aqui solo la piel del producto.
   Las tres filas comparten un ancho, `min(1000px, 100%)`, para que sus filos caigan en la misma linea. */
/* La entrada (la pasada de luz y las hojas que salen) corre una vez, al entrar el esquema en la vista: la
   dispara `esquema.js` con `data-trazando`, y hasta entonces `data-espera` deja las hojas sin salir. */
.ui-esq { --esq-color-trazo: var(--tinta-3); --esq-color-punta: var(--tinta-2); --esq-grosor: 1.5;
  margin: 0 0 var(--e-5); padding: 24px 40px 22px; display: grid; justify-items: center; row-gap: 34px;
  background: var(--caja); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra-caja); }
.ui-esq-fila { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; width: min(1000px, 100%); }
.ui-esq-entradas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.ui-esq-fichero { --esq-sale: abajo; position: relative; display: flex; gap: 14px; align-items: center; padding: 12px 104px 12px 16px; background: var(--caja-2); border: 1px solid var(--linea); border-radius: var(--radio-m); }
.ui-esq-fichero b, .ui-esq-hoja b { display: block; font: 600 var(--t-m)/1.3 var(--f-texto); color: var(--tinta); }
.ui-esq-fichero div span, .ui-esq-desc { display: block; font-size: var(--t-xs); line-height: 1.4; color: var(--tinta-3); }
.ui-esq-fichero code { font: 500 11px/1 var(--f-codigo); color: var(--tinta-2); }
.ui-esq-icono { position: relative; flex: none; width: 26px; height: 32px; background: var(--caja); border: 1.5px solid var(--tinta-3); border-radius: 2px 7px 2px 2px; }
.ui-esq-icono::after { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 9px; height: 9px; background: var(--caja-2); border-left: 1.5px solid var(--tinta-3); border-bottom: 1.5px solid var(--tinta-3); border-radius: 0 0 0 2px; }
.ui-esq-req { position: absolute; top: 10px; right: 12px; width: max-content; font: 600 10px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); border: 1px solid var(--borde); border-radius: 3px; padding: 3px 5px; background: var(--caja); }
.ui-esq-req.opcional { color: var(--tinta-3); border-style: dashed; border-color: var(--tinta-4); }
.ui-esq-prensa { --esq-entra: arriba; --esq-sale: abajo; position: relative; overflow: hidden; width: 100%; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 14px; padding: 16px 22px;
  background: var(--caja); border: 1px solid var(--linea); border-top: 3px solid var(--marca); border-radius: var(--radio-m); box-shadow: 0 14px 32px -20px color-mix(in srgb, var(--sombra) 50%, transparent); }
.ui-esq-marca { font: 500 11px/1 var(--f-codigo); letter-spacing: .08em; color: var(--sobre-color); background: var(--primario); border-radius: 4px; padding: 4px 7px; }
.ui-esq-que { display: grid; gap: 3px; }
.ui-esq-que b { font: 600 var(--t-l)/1.2 var(--f-texto); }
.ui-esq-pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 18px; counter-reset: paso; font-size: var(--t-xs); color: var(--tinta-2); }
.ui-esq-pasos li { counter-increment: paso; display: flex; gap: 6px; align-items: baseline; }
.ui-esq-pasos li::before { content: "0" counter(paso); font: 500 11px/1 var(--f-codigo); color: var(--tinta-3); }
.ui-esq-donde { justify-self: end; text-align: right; font-size: var(--t-xs); line-height: 1.5; color: var(--tinta-3); }
.ui-esq-donde span { display: block; }
/* La pasada: una linea de luz recorre la banda una vez, como el cabezal de una impresora. */
.ui-esq-prensa::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--marca) 14%, transparent), transparent); }
.ui-esq[data-trazando] .ui-esq-prensa::after { animation: ui-esq-pasada 1.4s .1s var(--c-salida) 1 both; }
@keyframes ui-esq-pasada { from { left: -30%; } to { left: 100%; } }
/* Las cuatro hojas comparten filas (subgrid): titulo, descripcion y formato rematan en la misma linea. */
.ui-esq-hojas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 32px; row-gap: 4px; }
.ui-esq-hoja { --esq-entra: arriba; grid-row: span 4; display: grid; grid-template-rows: subgrid; justify-items: center; text-align: center; }
/* El formato de cada cuaderno, en dos etiquetas: PDF y Word. */
.ui-esq-formato { align-self: end; margin-top: 8px; display: inline-flex; gap: 4px; }
.ui-esq-formato span { font: 500 11px/1 var(--f-codigo); color: var(--tinta-2); border: 1px solid var(--linea); border-radius: 4px; padding: 4px 7px; background: var(--caja-2); }
.ui-esq-pie { position: relative; z-index: 1; margin: 0; font-size: var(--t-xs); color: var(--tinta-3); text-align: center; }
/* El papel: proporcion A4, cabecera, pauta y el rasgo de cada cuaderno. `backwards` y no `both`: al
   acabar, el recorte se quita y vuelven la sombra y la pila de las subguias (adversarial de la maqueta). */
.ui-esq-papel { position: relative; width: 80px; height: 108px; margin-bottom: 12px; background: var(--papel); border: 1px solid var(--papel-linea); border-radius: 2px;
  box-shadow: 0 1px 1px color-mix(in srgb, var(--sombra) 10%, transparent), 0 10px 20px -12px color-mix(in srgb, var(--sombra) 45%, transparent);
  background-image: linear-gradient(var(--tinta-2), var(--tinta-2)), repeating-linear-gradient(180deg, transparent 0 9px, var(--papel-pauta) 9px 10px);
  background-size: 50% 4px, calc(100% - 20px) 60px; background-position: 10px 12px, 10px 30px; background-repeat: no-repeat; }
.ui-esq[data-espera] .ui-esq-papel { opacity: 0; }
.ui-esq[data-trazando] .ui-esq-papel { animation: ui-esq-hoja .7s var(--c-salida) backwards; }
.ui-esq[data-trazando] .ui-esq-hoja:nth-child(2) .ui-esq-papel { animation-delay: .12s; } .ui-esq[data-trazando] .ui-esq-hoja:nth-child(3) .ui-esq-papel { animation-delay: .24s; } .ui-esq[data-trazando] .ui-esq-hoja:nth-child(4) .ui-esq-papel { animation-delay: .36s; }
@keyframes ui-esq-hoja { from { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
.ui-esq-papel i { position: absolute; top: 34px; left: 40px; right: 10px; height: 22px; }
.ui-esq-papel.valores i { background: linear-gradient(var(--marca), var(--marca)) 0 0 / 40% 4px no-repeat, linear-gradient(var(--marca), var(--marca)) 0 9px / 62% 4px no-repeat, linear-gradient(var(--marca), var(--marca)) 0 18px / 30% 4px no-repeat; }
.ui-esq-papel.huecos i { background: repeating-linear-gradient(90deg, var(--tinta-3) 0 3px, transparent 3px 6px) 0 3px / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--tinta-3) 0 3px, transparent 3px 6px) 0 12px / 100% 1px no-repeat, repeating-linear-gradient(90deg, var(--tinta-3) 0 3px, transparent 3px 6px) 0 21px / 100% 1px no-repeat; }
.ui-esq-papel.varias { box-shadow: 4px 4px 0 -1px var(--papel), 4px 4px 0 0 var(--papel-linea), 8px 8px 0 -1px var(--papel), 8px 8px 0 0 var(--papel-linea), 0 10px 20px -12px color-mix(in srgb, var(--sombra) 45%, transparent); }
.ui-esq-papel.anexo i { left: 10px; height: 46px; background: linear-gradient(var(--tinta-3), var(--tinta-3)) 50% 0 / 22px 10px no-repeat, linear-gradient(var(--tinta-4), var(--tinta-4)) 50% 10px / 1px 8px no-repeat, linear-gradient(var(--tinta-3), var(--tinta-3)) 50% 18px / 22px 10px no-repeat, linear-gradient(var(--tinta-4), var(--tinta-4)) 50% 28px / 1px 8px no-repeat, linear-gradient(var(--tinta-3), var(--tinta-3)) 50% 36px / 22px 10px no-repeat; }
.ui-esq-papel.anexo::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 12px; height: 1px; background: var(--tinta-2); }
/* «Que contiene tu exportacion»: la explicacion y la lista, en dos columnas en vez de una linea larga. */
.ui-contiene { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3) var(--e-7); align-items: start; }
.ui-contiene p { margin: 0; }
.ui-contenido { margin: 0; padding-left: var(--e-5); columns: 2; column-gap: var(--e-6); }
.ui-contenido li { break-inside: avoid; padding: 2px 0; }
/* En vertical: las hojas pasan a filas con la hoja pequeña a la izquierda, colgando de un rail. */
@media (max-width: 900px) {
  .ui-esq { padding: 16px 12px 18px; row-gap: 32px; justify-items: stretch; }
  .ui-esq-entradas { gap: 10px; }
  .ui-esq-fichero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; }
  .ui-esq-req { top: 12px; right: 10px; }
  .ui-esq-prensa { --esq-sale-x: 16px; grid-template-columns: auto 1fr; row-gap: 8px; padding: 14px 14px 14px 16px; }
  .ui-esq-que, .ui-esq-donde { grid-column: 1 / -1; }
  .ui-esq-pasos { display: grid; gap: 2px; }
  .ui-esq-donde { justify-self: start; text-align: left; padding-top: 8px; border-top: 1px solid var(--linea-2); width: 100%; }
  .ui-esq-hojas { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 8px; padding-left: 30px; }
  .ui-esq-hoja { --esq-entra: izquierda; grid-row: auto; grid-template-rows: none; grid-template-columns: 52px minmax(0, 1fr); grid-template-areas: "p t" "p d" "p f"; column-gap: 14px; justify-items: start; text-align: left; align-items: center; padding: 10px 12px; background: var(--caja); border: 1px solid var(--linea); border-radius: var(--radio-m); }
  .ui-esq-hoja .ui-esq-papel { grid-area: p; margin: 0; zoom: .6; }
  .ui-esq-hoja b { grid-area: t; } .ui-esq-hoja .ui-esq-desc { grid-area: d; } .ui-esq-hoja .ui-esq-formato { grid-area: f; justify-self: start; margin-top: 6px; }
  .ui-esq-pie { text-align: left; }
  .ui-contiene { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .ui-contenido { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-esq-prensa::after { display: none; } }
.ui details.condicion { border-bottom: 1px solid var(--linea); padding: var(--e-3) 0; }
.ui-plegable-conciliacion { background: var(--caja); border: 1px solid var(--linea); border-radius: var(--radio-l); padding: var(--e-3) var(--e-5); }
.ui-plegable-conciliacion > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.ui-plegable-conciliacion > summary b.bien { color: var(--ok); }
.ui-plegable-conciliacion > summary b.malo { color: var(--vigilar-texto); }
.ui-plegable-conciliacion[open] > summary { margin-bottom: var(--e-3); }
.ui-plegable-conciliacion .ui-hoja-conciliacion { box-shadow: none; padding: 0; }
.ui details.condicion summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.ui details.condicion p { margin-top: var(--e-2); }

/* Vacios */
.ui-vacio { display: grid; justify-items: center; gap: var(--e-3); padding: var(--e-8) var(--e-5); text-align: center; color: var(--tinta-2); border: 1px dashed var(--borde); border-radius: var(--radio-l); }
.ui-vacio svg { width: 72px; height: 72px; color: var(--borde); }
.ui-vacio strong { color: var(--tinta); font-size: var(--t-l); }

/* Terminos del glosario: el globo va en el HTML, asi que se lee sin guion; `ui.js` solo lo abre y
   lo cierra al pasar el raton y con el foco (WCAG 1.4.13: se puede pasar por encima y Escape). */
.ui-termino { font: inherit; color: inherit; text-align: inherit; background: none; border: 0; padding: 0; cursor: help; text-decoration: underline dotted var(--tinta-4); text-underline-offset: 4px; }
.ui-globo { margin: 0; inset: auto; max-width: 320px; padding: 10px 12px; border: 0; border-radius: 7px; background: var(--tinta); color: var(--sobre-color); font: 400 var(--t-s)/1.45 var(--f-texto); position-area: bottom span-right; position-try-fallbacks: flip-block, flip-inline; margin-top: 8px; }
.ui-globo b { display: block; margin-bottom: 2px; }
/* El globo no hereda la letra de su sitio: en la cabecera de una tabla salia en versalitas y alineado a la
 * derecha, y en la marca «Copia de consulta» de la barra heredaba su `nowrap` y cortaba la definicion. Y no toca el filo de la ventana: el del ultimo estado acababa en el pixel 1366 de 1366. */
.ui-globo { text-transform: none; letter-spacing: normal; text-align: left; margin-inline: 8px; white-space: normal; }
/* La explicacion de los estados de la cola, solo donde la cabecera de la tabla no se ve. */
.estados-movil { display: none; }
@media (max-width: 640px) { .estados-movil { display: block; margin: var(--e-3) 0 0; } }

@media (max-width: 900px) {
  .ui-con-bandeja { grid-template-columns: minmax(0, 1fr); }
  .ui-bandeja { position: static; }
  /* En la ficha, las acciones y los datos van antes que las paginas: si no, Imprimir queda detras
     del documento entero. */
  .ui-ficha-lateral { order: -1; }
  /* EN EL MOVIL LA BANDEJA DE IMPRIMIR VA FIJA ABAJO, con la cuenta y el boton: al marcar se ve la
     respuesta sin bajar al final. La lista y los topes se quedan para la pantalla ancha. */
  [data-bandeja] .ui-bandeja { position: sticky; bottom: 0; z-index: 5; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--e-3) var(--e-4); border-radius: var(--radio-m) var(--radio-m) 0 0; box-shadow: 0 -8px 24px -12px color-mix(in srgb, var(--sombra) 45%, transparent); }
  [data-bandeja] .ui-bandeja > h2, [data-bandeja] .ui-bandeja > ol, [data-bandeja] .ui-bandeja > .ui-nota { display: none; }
  html { scroll-padding-bottom: 96px; }
}
@media (max-width: 900px) {
  .ui-puerta { grid-template-columns: minmax(0, 1fr); }
  .ui-puerta .escena { padding: var(--e-5); }
  .ui-caminos, .ui-evidencia { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ui-linea { grid-auto-flow: row; grid-auto-columns: auto; gap: var(--e-2); }
  .ui-linea li { grid-template-columns: 32px 1fr; justify-items: start; text-align: left; align-items: center; }
  .ui-linea li::before { display: none; }
  .ui-linea-y-cifra { grid-template-columns: minmax(0, 1fr); }
  .ui-cifra { justify-items: start; text-align: left; }
  .ui-hoja-conciliacion { padding: var(--e-4); }
  .ui-pagina { padding: var(--e-5) var(--e-4) var(--e-7); }
  .ui-legajo { --ancho: calc(50% - var(--e-2)); column-gap: var(--e-3); }
  .ui-ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ui-ficha dd { margin-bottom: var(--e-2); }
  .ui-marco-pdf { height: 70vh; }
  .ui-visor-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ui-miniaturas { display: none; }
}
@media (pointer: coarse) { .ui-cuaderno .ui-acciones a, .ui-registro td a { min-height: 44px; } }

/* EL AIRE QUE FALTABA (QA ciego del PR 429): la acción de debajo de una tabla y la nota de debajo de
   una tarjeta no van pegadas, y el párrafo que sigue a las muestras de «Cómo funciona» tampoco. */
.ui-envoltura-tabla + .ui-acciones, .ui-tarjeta + .ui-nota, .ui-acciones + .ui-nota, .ui-comparacion + p { margin-top: var(--e-4); }
button.ui-boton:disabled { opacity: .55; cursor: not-allowed; }
.ui-acciones-resultado { margin-top: var(--e-3); }

/* ==========================================================================================
   LAS PANTALLAS DEL MONITOR DE PLANTA, migradas a la hoja comun (QA ciego del PR 429: dos estilos
   en la misma aplicacion). Estado, Ejecuciones, Errores, Version, Licencia, Configuracion, Bucles,
   acceso y contraseña.
   ========================================================================================== */
/* La recarga: la frase y el boton los pinta `recarga.js`; sin JavaScript el parrafo no ocupa nada. */
.barra-recarga { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); font-size: var(--t-s); color: var(--tinta-3); }
.barra-recarga:empty { display: none; }
.nota-recarga { margin: 0; }
.pausa-recarga { min-height: 32px; padding: 0 var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-m); background: var(--caja); color: var(--tinta-2); font: 600 var(--t-xs) var(--f-texto); cursor: pointer; }
.pausa-recarga:hover { background: var(--caja-2); }
.ui-cifra-en-linea { font: 700 1.6em/1 var(--f-cifra); font-variant-numeric: tabular-nums; color: var(--tinta); }
/* Numeros a la derecha y su encabezado encima, no lejos de su columna. */
.ui-registro th.numero, .ui-registro td.numero { text-align: right; padding-right: var(--e-4); }
.ui-registro th[scope="row"] { font-size: var(--t-s); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tinta); border-bottom: 0; border-top: 1px solid var(--linea-2); padding: 9px 16px; vertical-align: baseline; }
.ui-registro td.total { font-weight: 700; }
.ui-registro .malo, .ui-ficha .malo { color: var(--malo); font-weight: 700; }
.ui-registro td.vacio { color: var(--tinta-2); }
.ui-registro td .ui-nota, .ui-registro th .ui-nota { display: block; margin-top: 2px; font-weight: 400; }
.tanda-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-3); }
.tanda-cabecera h2 { margin-right: var(--e-2); }
.tanda .ui-aviso { margin-bottom: var(--e-3); }
.hashes { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.hashes code { background: var(--caja-2); padding: 1px 6px; border-radius: var(--radio-s); }
.hora-nota { margin-top: var(--e-4); }
.formulario-corto { display: grid; gap: var(--e-4); max-width: 24rem; }
.formulario-nota { margin-top: var(--e-4); max-width: 40rem; }
.config-notas { max-width: 48rem; margin-bottom: var(--e-5); }
.campo-nombre { display: block; }
.campo-clave { display: inline-block; margin-top: 2px; font-size: var(--t-xs); color: var(--tinta-3); font-weight: 400; overflow-wrap: anywhere; }
/* El origen y su etiqueta de reinicio, uno debajo del otro: juntos en la misma linea se pisaban. */
.ui-registro.config .origen { display: block; }
.ui-registro.config .ui-estado { margin-top: var(--e-1); }
details.cambiar > summary { list-style: none; min-height: 36px; }
details.cambiar > summary::-webkit-details-marker { display: none; }
details.cambiar[open] > summary { margin-bottom: var(--e-3); }
details.cambiar form { display: grid; gap: var(--e-3); min-width: 16rem; }
.ui input[type="number"] { font: 400 var(--t-m) var(--f-texto); color: var(--tinta); background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio-m); min-height: 44px; padding: 0 var(--e-3); width: 7rem; }
form.secreto { display: grid; gap: var(--e-3); max-width: 32rem; margin-top: var(--e-4); }
@media (max-width: 640px) {
  .ui-registro.apilable th[scope="row"] { display: block; border: 0; padding: 0 0 2px; }
  .ui-registro.apilable td.numero { text-align: left; }
  details.cambiar form { min-width: 0; }
}
/* `.ui p` quita el margen a todo parrafo y gana a `.ui-pila`: las notas seguidas iban pegadas. */
.ui .config-notas > p + p, .ui .ui-seccion > .ui-nota + .ui-lista-simple, .ui .ui-seccion > .ui-lista-simple + .ui-nota { margin-top: var(--e-3); }
/* UNA RUTA O UN HOST LARGO NO TIENEN PUNTO DE CORTE y ensanchaban la pagina a 509 px en el movil
   (adversarial del PR 437). Se parten donde haga falta. */
@media (max-width: 640px) { .ui-registro.apilable td { overflow-wrap: anywhere; } }
.ui-operacion-panel { display: block; background: var(--papel); border: 1px solid var(--linea); border-radius: 3px; padding: var(--e-2); }
.ui-operacion-panel img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .ui-operacion-panel { display: none; } }
.ui .ui-pagina > section + p.ui-nota { margin-top: var(--e-5); }
/* LA HOJA NO SE VE VACIA MIENTRAS PDF.js NO PINTA (y sin JavaScript): un esqueleto de pagina, con
   una tabla y renglones como los del cuaderno, bajo el titulo. En las capturas del despliegue del
   29-09-2026 las tarjetas eran rectangulos blancos con solo el titulo. Cuando la primera pagina real
   se dibuja, el lienzo (posicionado y posterior en el HTML) la tapa. */
.ui-hoja::before { content: ""; position: absolute; left: 12%; right: 12%; top: 52%; bottom: 9%; pointer-events: none;
  background:
    linear-gradient(var(--tinta), var(--tinta)) top left / 100% 1.5px no-repeat,
    linear-gradient(var(--papel-linea), var(--papel-linea)) 0 22% / 100% 1px no-repeat,
    linear-gradient(var(--papel-linea), var(--papel-linea)) 0 44% / 100% 1px no-repeat,
    linear-gradient(var(--papel-linea), var(--papel-linea)) 50% 0 / 1px 44% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 9px, var(--papel-pauta) 9px 10.5px) 0 56% / 70% 44% no-repeat; }
.ui-hoja.con-pagina::before { content: none; }

/* ==========================================================================================
   LOS COMPONENTES DEL SISTEMA INDUSTRIAL (30-09-2026): franja de cifras, pestañas de sección,
   tarjeta con cabecera, dos columnas con la lateral de 360 px y la tabla dentro de una tarjeta.
   ========================================================================================== */
.ui-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--linea); border-bottom: 1px solid var(--linea); font-variant-numeric: tabular-nums; }
.ui-cifra-franja { position: relative; background: var(--caja); padding: 14px 18px 14px 24px; min-width: 0; }
.ui-cifra-franja::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 3px 3px 0; background: var(--c, var(--tinta-4)); }
.ui-cifra-franja.bien { --c: var(--ok); }
.ui-cifra-franja.malo { --c: var(--vigilar); }
.ui-cifra-franja h2 { margin: 0; font: 600 11.5px/1.3 var(--f-texto); letter-spacing: .9px; text-transform: uppercase; color: var(--tinta-3); }
.ui-cifra-franja .valor { font: 600 2.25rem/1.1 var(--f-texto); letter-spacing: -.02em; color: var(--tinta); }
.ui-cifra-franja .valor small { font-size: 1rem; font-weight: 500; color: var(--tinta-3); margin-left: 4px; letter-spacing: 0; }
.ui-cifra-franja p { margin: 2px 0 0; font-size: var(--t-xs); color: var(--tinta-3); }
.ui-cifra-franja p em { font-style: normal; font-weight: 600; color: var(--c); margin-left: 6px; }
.ui-cifra-franja.malo p em { color: var(--vigilar-texto); }

.ui-pestanas { display: flex; gap: 0; border-bottom: 1px solid var(--linea); padding: 0 12px; overflow-x: auto; margin: -14px -16px 0; }
.ui-pestanas a { display: flex; align-items: center; gap: 8px; padding: 12px 14px 10px; min-height: 44px; font-size: 13.5px; font-weight: 500; color: var(--tinta-3); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ui-pestanas a:hover { color: var(--tinta); }
.ui-pestanas a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--marca); }
.ui-pestanas + * { margin-top: 14px; }
/* Una tabla a todo lo ancho de su tarjeta: la tarjeta pone el filo y la tabla el aire. */
.ui-tarjeta > .ui-registro, .ui-tarjeta > .ui-envoltura-tabla { margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); }
.ui-tarjeta > .ui-registro:last-child, .ui-tarjeta > .ui-envoltura-tabla:last-child { margin-bottom: -14px; }
.ui-tarjeta > .ui-pestanas + .ui-registro, .ui-tarjeta > .ui-pestanas + .ui-envoltura-tabla { margin-top: 0; }
.ui-tarjeta > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -14px -16px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); font: 600 12px/1.3 var(--f-texto); letter-spacing: .9px; text-transform: uppercase; color: var(--tinta-3); }
.ui-tarjeta > header h2, .ui-tarjeta > header h3 { font: inherit; letter-spacing: inherit; margin: 0; }
.ui-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.ui-columnas > * { min-width: 0; display: grid; gap: 18px; align-content: start; }
.ui-cabecera.con-accion { grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; }
@media (max-width: 1180px) { .ui-columnas { grid-template-columns: minmax(0, 1fr) 320px; } }
@media (max-width: 760px) {
  .ui-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-cifra-franja { padding: 12px 12px 12px 16px; }
  .ui-cifra-franja::before { top: 12px; bottom: 12px; }
  .ui-cifra-franja .valor { font-size: 1.75rem; }
  .ui-columnas { grid-template-columns: minmax(0, 1fr); }
  .ui-pestanas { padding: 0 4px; }
  .ui-pestanas a { padding: 12px 10px 10px; }
  .ui-registro th, .ui-registro td, .ui-registro th[scope="row"] { padding-left: 10px; padding-right: 10px; }
  .ui-cabecera.con-accion { grid-template-columns: minmax(0, 1fr); }
}
/* La fila elegida (la que enseña el inspector) y los ceros, que no compiten con las cifras. */
.ui-registro tr.elegida > * { background: var(--elegida); }
.ui-registro tr.elegida > :first-child { box-shadow: inset 3px 0 0 var(--marca); }
.ui-registro td.cero { color: var(--tinta-3); font-weight: 400; }
.ui-elegible td a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.ui-elegible td a:hover { text-decoration: underline; }
/* El inspector: la ficha de lo elegido, en la columna lateral. */
.ui-inspector .ui-ficha { grid-template-columns: max-content minmax(0, 1fr); gap: 7px 12px; }
.ui-inspector .ui-ficha dt { color: var(--tinta-2); }
.ui-inspector .ui-ficha dd { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.ui-inspector .ui-ficha dd.hashes { justify-content: flex-end; }
.ui-inspector > .ui-acciones { margin-top: 12px; }
.ui-inspector > .ui-acciones > * { flex: 1; }
.ui .ui-subtitulo-tabla { margin: 0 -16px; padding: 12px 16px 6px; font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta); }
.ui-registro tr.grupo th { font-size: var(--t-s); letter-spacing: 0; text-transform: none; color: var(--tinta); padding: 12px 16px 6px; border-bottom: 0; border-top: 1px solid var(--linea); }
.ui-registro tbody:first-of-type tr.grupo:first-child th { border-top: 0; }
/* El acceso: una tarjeta estrecha y centrada. */
.ui-acceso { max-width: 460px; padding-top: 48px; }
.ui-acceso .formulario-corto { max-width: none; }
.ui-acceso .ui-tarjeta > header h1 { font: inherit; }
.ui-campo input[type="password"], .ui-campo input[type="text"] { min-height: 40px; }
@media (max-width: 760px) { .ui-acceso { padding-top: 20px; } }
.ui-bandeja > h2 .ui-termino, .ui-tarjeta > header .ui-termino, .ui-registro th .ui-termino { text-transform: inherit; letter-spacing: inherit; }
.ui-registro.config tbody th[scope="row"] { width: 34%; }
/* En el movil una tabla apilada no llega al filo de su tarjeta: cada fila es un bloque con su aire. */
@media (max-width: 640px) {
  .ui-tarjeta > .ui-registro.apilable, .ui-tarjeta > .ui-envoltura-tabla { margin-left: 0; margin-right: 0; width: 100%; }
  .ui-tarjeta > .ui-registro.apilable:last-child, .ui-tarjeta > .ui-envoltura-tabla:last-child { margin-bottom: 0; }
  .ui-registro.apilable tr:last-child { border-bottom: 0; }
}
.ui-inspector > .ui-aviso { margin-bottom: 12px; }
.ui-pila > .ui-tarjeta + .ui-tarjeta { margin-top: 18px; }
/* El indice de documentos lleva ocho columnas: con el aire de las demas tablas no cabia a 1280 junto a la bandeja. */
.ui-tarjeta-documentos .ui-registro th, .ui-tarjeta-documentos .ui-registro td { padding-left: 10px; padding-right: 10px; }
/* El termino de la marca legal es un boton: 24 px de alto como minimo, que es lo que pide WCAG 2.5.8. */
.marco-consulta { padding: 0 9px; }
.marco-consulta .ui-termino { display: inline-flex; align-items: center; min-height: 24px; }
/* Una ficha de texto largo en la columna lateral va a una columna: con dos, a 360 px partia palabra a palabra. */
.ui-columnas .ui-tarjeta:not(.ui-inspector) .ui-ficha { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ui-columnas .ui-tarjeta:not(.ui-inspector) .ui-ficha dd + dt { margin-top: var(--e-2); }
.ui-columnas .ui-tarjeta:not(.ui-inspector) .ui-ficha dd { font-weight: 400; color: var(--tinta-2); }
.ui .ui-tarjeta .ui-pila > p + p { margin-top: var(--e-2); }
/* El estado del servicio en el pie: el mismo que contesta `/listo`. Punto y palabra. */
.marco-en-marcha { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); }
.marco-en-marcha::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.marco-en-marcha.parado { color: var(--vigilar-texto); font-weight: 600; }
.marco-en-marcha.parado::before { border-radius: 1px; background: var(--vigilar); }
/* El latido en el pie de todas las pantallas: punto y palabra, verde si el bucle da vueltas o trabaja. */
.marco-latido { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); }
.marco-latido::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.marco-latido.parado { color: var(--parado); font-weight: 600; }
.marco-latido.parado::before { border-radius: 1px; background: var(--parado); }
.marco-latido.desconocido { color: var(--vigilar-texto); }
.marco-latido.desconocido::before { border-radius: 1px; background: var(--vigilar); transform: rotate(45deg); }
/* La columna lateral del indice: el documento elegido y, debajo, la bandeja de imprimir juntos. */
.ui-lateral { display: grid; gap: 18px; align-content: start; min-width: 0; }
.ui-lateral > .ui-bandeja { position: static; }
.ui-inspector-documento .con-hoja { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 12px; align-items: start; }
.ui-inspector-documento .ui-hoja { width: 80px; padding: 10%; gap: 3px; }
.ui-inspector-documento .ui-hoja .clase { font-size: 8px; }
.ui-inspector-documento .ui-hoja .titulo { font-size: 9px; }
.ui-inspector-documento .ui-hoja:hover, .ui-inspector-documento .ui-hoja:focus-visible { transform: none; }
.ui-inspector-documento .ui-acciones > * { flex: 1; }
.ui-registro a.elegir { text-decoration: none; color: inherit; }
.ui-registro a.elegir:hover code { text-decoration: underline; }
@media (max-width: 900px) {
  /* En el movil, la lista antes que el inspector: se elige en la lista. */
  .ui-lateral { display: contents; }
  .ui-lateral > .ui-inspector-documento { order: 2; }
  .ui-lateral > .ui-bandeja { order: 3; position: sticky; }
}
/* La prueba de la demo en dos columnas: las secciones van en la rejilla, sin el margen de seccion. */
.ui-columnas .ui-seccion { margin-top: 0; }
.ui-columnas .ui-evidencia { grid-template-columns: minmax(0, 1fr); }
.ui-inspector .ui-ficha dd .ui-nombre-fichero { justify-content: flex-end; }
/* El panel de la demo: en el movil el ejemplo va antes que la subida. */
@media (max-width: 760px) { .ui-panel-demo > :last-child { order: -1; } }
.ui-panel-demo .ui-camino.ui-inspector { gap: 10px; }
/* La destacada va primero en el HTML y en el movil, y en la columna lateral en escritorio. */
@media (min-width: 761px) { .ui-columnas.destacada-primero > :first-child { order: 2; } }
/* El nombre de la prueba destacada, en su linea y entero: al lado del estado y de la referencia se recortaba. */
.ui-inspector .ui-acciones > .ui-nombre-fichero { flex: 1 0 100%; order: -1; }
.ui-inspector .ui-acciones > .ui-nombre-fichero .base { white-space: normal; overflow-wrap: anywhere; }
.ui details.ui-plegado-lateral { border: 0; padding: 0; }
/* `.ui p` quita el margen a todo parrafo y gana a `.ui-pila`: en una tarjeta apilada, los parrafos iban pegados. */
.ui .ui-tarjeta.ui-pila > * + * { margin-top: var(--e-2); }
.ui .ui-tarjeta.ui-pila > header + * { margin-top: 0; }

/* ========== LA AYUDA EN LINEA (INSUD-390). Los componentes de las maquetas del diseño, con solo tokens de esta hoja. ========== */

/* ---------- La entrada de la barra: el mismo sitio en todas las pantallas (WCAG 2.2, 3.2.6) ---------- */
.marco-ayuda { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 var(--e-3); border-radius: 6px; border: 1px solid var(--linea); background: var(--caja); color: var(--tinta); font: 500 var(--t-xs)/1 var(--f-texto); cursor: pointer; text-decoration: none; }
.marco-ayuda:hover { border-color: var(--tinta-3); }
.marco-ayuda svg { width: 16px; height: 16px; flex: none; }
body:has(.ui-ayuda-panel:popover-open) .marco-ayuda, .marco-ayuda[aria-current="page"] { border-color: var(--marca); box-shadow: inset 0 0 0 1px var(--marca); }
@media (pointer: coarse) { .marco-ayuda { min-height: 44px; } }
/* «Ir a» (Ctrl K, INSUD-293 PR 10): boton de la barra y su dialogo, como la ayuda. */
.marco-ir { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 var(--e-3); border-radius: 6px; border: 1px solid var(--linea); background: var(--caja); color: var(--tinta-2); font: 500 var(--t-xs)/1 var(--f-texto); cursor: pointer; }
.marco-ir[hidden] { display: none; }
.marco-ir kbd { font: 600 10px/1 var(--f-codigo); padding: 3px 5px; border: 1px solid var(--linea); border-radius: 4px; background: var(--caja-2); color: var(--tinta-2); }
.marco-ir-dialogo { width: min(32rem, calc(100vw - 32px)); padding: var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--caja); color: var(--tinta); box-shadow: var(--sombra-caja); }
.marco-ir-dialogo::backdrop { background: color-mix(in srgb, var(--sombra) 35%, transparent); }
.marco-ir-dialogo form { display: grid; gap: 8px; }
.marco-ir-dialogo label { font-weight: 600; }
.marco-ir-dialogo input { width: 100%; min-height: 40px; padding: 6px 10px; border: 1px solid var(--borde-campo); border-radius: var(--r-m); font: inherit; background: var(--caja); color: var(--tinta); }
@media (pointer: coarse) { .marco-ir { min-height: 44px; } }
@media (max-width: 1199.98px) { .marco-ir kbd { display: none; } }
.marco-ir-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; margin: 0; }
.marco-ir-nota { margin: 0; font-size: var(--t-xs); color: var(--tinta-2); }
@media (max-width: 639.98px) { .marco-ir { display: none !important; } }
@media print { .marco-ir, .marco-ir-dialogo { display: none !important; } }

/* ---------- El panel contextual: un `popover` nativo, se abre y se cierra sin guion ---------- */
.ui-ayuda-panel { position: fixed; inset: calc(var(--alto-barra) + 3px) 0 0 auto; margin: 0; width: min(420px, 100vw); max-height: none; height: auto; padding: 0; border: 0; border-left: 1px solid var(--linea); background: var(--caja); color: var(--tinta); box-shadow: -18px 0 40px -24px color-mix(in srgb, var(--sombra) 45%, transparent); overflow-y: auto; font: 400 var(--t-s)/1.55 var(--f-texto); }
.ui-ayuda-panel:popover-open { display: flex; flex-direction: column; }
.ui-ayuda-panel > header { display: flex; align-items: start; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5) var(--e-3); border-bottom: 1px solid var(--linea-2); }
.ui-ayuda-panel > header p { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--tinta-3); }
.ui-ayuda-panel > header h2 { margin: 2px 0 0; font-size: var(--t-xl); line-height: 1.25; }
.ui-ayuda-panel .cerrar { min-width: 44px; min-height: 44px; border: 1px solid var(--linea); border-radius: var(--radio-m); background: var(--caja); color: var(--tinta); font: 600 var(--t-s)/1 var(--f-texto); cursor: pointer; }
.ui-ayuda-panel section { padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linea-2); }
.ui-ayuda-panel section h3 { margin: 0 0 var(--e-2); font-size: var(--t-s); font-weight: 600; }
.ui-ayuda-panel section p { margin: 0; color: var(--tinta-2); }
.ui-ayuda-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.ui-ayuda-panel li a { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); min-height: 40px; padding: 6px var(--e-2); margin: 0 calc(-1 * var(--e-2)); border-radius: var(--radio-s); color: var(--enlace); text-decoration: none; }
.ui-ayuda-panel li a:hover { background: var(--caja-2); text-decoration: underline; }
.ui-ayuda-panel li a small { color: var(--tinta-3); font-size: var(--t-xs); white-space: nowrap; }
.ui-ayuda-panel .pie { margin-top: auto; padding: var(--e-4) var(--e-5); background: var(--caja-2); display: grid; gap: var(--e-3); }
.ui-ayuda-panel .pie .ui-boton { width: 100%; }
.ui-ayuda-panel .pie p { margin: 0; font-size: var(--t-xs); color: var(--tinta-3); }
@media (max-width: 640px) { .ui-ayuda-panel { inset: 0; width: 100vw; border-left: 0; z-index: 30; } }

/* ---------- El buscador de la ayuda ---------- */
.ui-ayuda-buscar { display: flex; gap: var(--e-2); }
.ui-ayuda-buscar input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--e-3); font: 400 var(--t-m) var(--f-texto); color: var(--tinta); background: var(--caja); border: 1px solid var(--borde); border-radius: var(--radio-m); }
.ui-ayuda-buscar .ui-boton { min-height: 44px; }

/* ---------- Foco no oculto (WCAG 2.2, 2.4.11): la barra y el pie son `sticky` ---------- */
html:has(.ui-ayuda, .ui-ayuda-portada, .ui-ayuda-panel) { scroll-padding-top: calc(var(--alto-barra) + 16px); scroll-padding-bottom: 56px; }

/* ---------- La portada ---------- */
.ui-ayuda-portada { max-width: 1120px; }
.ui-ayuda-portada .ui-cabecera h1 { font-size: 1.75rem; }
.ui-ayuda-portada .ui-ayuda-buscar { width: 100%; max-width: 640px; margin-top: var(--e-3); }
.ui-ayuda-cuatro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: var(--e-6); }
.ui-ayuda-cuatro .ui-tarjeta { display: grid; align-content: start; gap: var(--e-2); padding: 18px; }
.ui-ayuda-cuatro .ui-tarjeta + .ui-tarjeta { margin-top: 0; }
.ui-ayuda-cuatro h2 { margin: 0; font-size: var(--t-l); }
.ui-ayuda-cuatro .para { margin: 0; color: var(--tinta-3); font-size: var(--t-s); }
.ui-ayuda-cuatro ul { margin: var(--e-2) 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--linea-2); }
.ui-ayuda-cuatro li a { display: block; padding: 8px 0; border-bottom: 1px solid var(--linea-2); color: var(--enlace); text-decoration: none; font-size: var(--t-s); }
.ui-ayuda-cuatro li a:hover { text-decoration: underline; }
.ui-ayuda-cuatro .icono { width: 36px; height: 36px; border-radius: var(--radio-m); display: grid; place-items: center; background: var(--elegida); color: var(--marca); }
.ui-ayuda-cuatro .icono svg { width: 20px; height: 20px; }
.ui-ayuda-dos { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: start; }
.ui-ayuda-dos .ui-tarjeta + .ui-tarjeta { margin-top: 0; }
.ui-ayuda-dos h2 { margin: 0 0 var(--e-2); font-size: var(--t-l); }
.ui-ayuda-faq { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 28px; }
.ui-ayuda-faq li { break-inside: avoid; }
.ui-ayuda-faq a { display: block; padding: 8px 0; border-bottom: 1px solid var(--linea-2); color: var(--enlace); text-decoration: none; font-size: var(--t-s); }
.ui-ayuda-version dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: var(--t-s); }
.ui-ayuda-version dt { color: var(--tinta-3); }
.ui-ayuda-version dd { margin: 0; }
.ui-ayuda-version p { font-size: var(--t-s); color: var(--tinta-2); margin: var(--e-3) 0 0; }
@media (max-width: 1100px) { .ui-ayuda-cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .ui-ayuda-dos { grid-template-columns: 1fr; } .ui-ayuda-faq { columns: 1; } }
@media (max-width: 560px) { .ui-ayuda-cuatro { grid-template-columns: 1fr; } }

/* ---------- Un apartado: índice de la ayuda, texto y «En esta página» ---------- */
.ui-ayuda { display: grid; grid-template-columns: 250px minmax(0, 820px) 210px; justify-content: center; gap: 28px; align-items: start; }
.ui-ayuda-indice { position: sticky; top: calc(var(--alto-barra) + 20px); font-size: var(--t-s); }
.ui-ayuda-indice > summary { display: none; }
.ui-ayuda-indice h2 { margin: var(--e-4) 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--tinta-3); }
.ui-ayuda-indice h2:first-of-type { margin-top: 0; }
.ui-ayuda-indice ul { margin: 0; padding: 0; list-style: none; }
.ui-ayuda-indice a { display: block; padding: 5px 10px; border-left: 2px solid var(--linea); color: var(--tinta-2); text-decoration: none; }
.ui-ayuda-indice a:hover { color: var(--tinta); border-left-color: var(--tinta-3); }
.ui-ayuda-indice a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-left-color: var(--marca); background: var(--caja); }
.ui-ayuda-texto { background: var(--caja); border: 1px solid var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra-caja); padding: 28px 36px 36px; min-width: 0; }
.ui-ayuda-texto h1 { margin: 0; font-size: 1.625rem; line-height: 1.25; }
.ui-ayuda-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.ui-ayuda-meta li { display: inline-block; line-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--caja-2); border: 1px solid var(--linea-2); font-size: var(--t-xs); color: var(--tinta-2); }
.ui-ayuda-meta li b { font-weight: 600; color: var(--tinta); }
.ui-ayuda-texto .entrada { font-size: var(--t-l); color: var(--tinta-2); margin: 18px 0 0; }
.ui-ayuda-texto h2 { font-size: var(--t-xl); margin: 32px 0 10px; scroll-margin-top: calc(var(--alto-barra) + 20px); }
.ui-ayuda-texto code { font: 400 .92em var(--f-codigo); background: var(--caja-2); border: 1px solid var(--linea-2); border-radius: 4px; padding: 0 4px; }
/* LAS TABLAS DEL TEXTO DE LA AYUDA, que salen del Markdown sin clase: a lo ancho de su caja y con los codigos y las
   celdas que se pueden partir, para que una tabla con codigos largos no desborde la pantalla del movil. */
.ui-ayuda-texto table { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin-top: var(--e-2); }
.ui-ayuda-texto th, .ui-ayuda-texto td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linea-2); vertical-align: top; overflow-wrap: anywhere; }
.ui-ayuda-texto code { overflow-wrap: anywhere; }
.ui-ayuda-pasos { counter-reset: paso; margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ui-ayuda-pasos > li { counter-increment: paso; position: relative; padding: 0 0 18px 48px; }
.ui-ayuda-pasos > li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primario); color: var(--sobre-primario); font: 600 var(--t-s)/1 var(--f-texto); }
.ui-ayuda-pasos > li::after { content: ""; position: absolute; left: 14px; top: 34px; bottom: 4px; width: 2px; background: var(--linea-2); }
.ui-ayuda-pasos > li:last-child::after { content: none; }
.ui-ayuda-pasos > li > b:first-child { display: block; font-size: var(--t-m); margin-bottom: 2px; }
.ui-ayuda-pasos p { margin: 4px 0 0; }
.ui-ayuda-nota { margin: var(--e-3) 0 0; padding: 10px 14px; border-radius: var(--radio-m); border: 1px solid var(--linea-2); border-left: 4px solid var(--marca); background: var(--caja-2); font-size: var(--t-s); }
.ui-ayuda-nota p { margin: 0; }
.ui-ayuda-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin-top: var(--e-2); }
.ui-ayuda-tabla th { text-align: left; font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.ui-ayuda-tabla td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.ui-ayuda-relacion { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ui-ayuda-relacion a { display: block; height: 100%; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio-m); color: var(--tinta); text-decoration: none; }
.ui-ayuda-relacion a:hover { border-color: var(--tinta-3); }
.ui-ayuda-relacion a small { display: block; font-size: var(--t-xs); color: var(--tinta-3); }
.ui-ayuda-relacion a span { color: var(--enlace); font-weight: 600; font-size: var(--t-s); }
.ui-ayuda-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); margin-top: 36px; padding-top: var(--e-4); border-top: 1px solid var(--linea-2); font-size: var(--t-xs); color: var(--tinta-3); }
.ui-ayuda-aqui { position: sticky; top: calc(var(--alto-barra) + 20px); font-size: var(--t-s); }
.ui-ayuda-aqui h2 { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; color: var(--tinta-3); }
.ui-ayuda-aqui ul { margin: 0 0 var(--e-5); padding: 0; list-style: none; }
.ui-ayuda-aqui ul a { display: block; padding: 4px 0; color: var(--tinta-2); text-decoration: none; }
.ui-ayuda-aqui ul a:hover { color: var(--enlace); text-decoration: underline; }
.ui-ayuda-aqui .ui-boton { width: 100%; }
@media (max-width: 1180px) { .ui-ayuda { grid-template-columns: 230px minmax(0, 1fr); } .ui-ayuda-aqui { display: none; } }
@media (max-width: 860px) {
  .ui-ayuda { grid-template-columns: 1fr; gap: 14px; }
  .ui-ayuda-indice { order: 2; position: static; background: var(--caja); border: 1px solid var(--linea); border-radius: var(--radio-l); }
  .ui-ayuda-indice > summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 600; cursor: pointer; }
  .ui-ayuda-indice > div { padding: 0 16px 14px; }
  .ui-ayuda-texto { padding: 20px 18px 24px; }
  .ui-ayuda-relacion { grid-template-columns: 1fr; }
}

/* ---------- Impresión: solo el texto, con su versión, y cada apartado en hoja nueva ---------- */
@media print {
  .ui-ayuda { display: block; }
  .ui-ayuda-indice, .ui-ayuda-aqui, .ui-ayuda-panel, .marco-ayuda, .ui-migas, .no-imprimir { display: none !important; }
  .ui-ayuda-texto { border: 0; box-shadow: none; padding: 0; }
  .ui-ayuda-texto a[href^="/ayuda/"]::after { content: " (" attr(data-numero) ")"; color: var(--tinta-3); }
  .ui-ayuda-pasos > li { break-inside: avoid; }
  .ui-ayuda-pie { display: flex !important; }
}
/* Lo que añade la implementación a las maquetas: el texto compuesto desde Markdown, el glosario y la hoja de imprimir. */
.ui .ui-ayuda-texto p, .ui .ui-ayuda-texto ul, .ui .ui-ayuda-texto ol:not(.ui-ayuda-pasos) { margin: 10px 0 0; }
.ui .ui-ayuda-texto ul:not(.ui-ayuda-meta):not(.ui-ayuda-relacion) { padding-left: 22px; }
.ui .ui-ayuda-pasos { margin-top: var(--e-3); }
.ui-ayuda-pasos > li > p:first-child > strong:first-child { display: block; font-size: var(--t-m); margin-bottom: 2px; }
.ui-ayuda-pasos > li > p:first-child { margin-top: 0; }
.ui-ayuda-indice h2 a { color: inherit; text-decoration: none; }
.ui-ayuda-glosario { margin: var(--e-3) 0 0; display: grid; gap: 4px 0; }
.ui-ayuda-glosario dt { font-weight: 600; margin-top: var(--e-3); scroll-margin-top: calc(var(--alto-barra) + 20px); }
.ui-ayuda-glosario dd { margin: 0; color: var(--tinta-2); }
.ui-ayuda-cuatro h2 a, .ui-ayuda-dos h2 a { color: inherit; text-decoration: none; }
.ui-ayuda-imprimir .ui-ayuda-texto + .ui-ayuda-texto { margin-top: 18px; }
.ui-ayuda-indice-impreso { columns: 2; column-gap: 28px; padding-left: 0; list-style: none; }
@media print { .ui-ayuda-hoja { break-before: page; } .ui-ayuda-indice-impreso { columns: 1; } }

/* ==========================================================================================
   EL MODO DE UNA PANTALLA (v4 con su correccion v4.1). En una ventana de escritorio desde 1200x620 la
   pagina no se desplaza: la barra arriba, el pie abajo y el cuerpo (`main`) en medio, con lo que no
   cabe desplazandose DENTRO de el. Por debajo de 1200 de ancho o de 620 de alto vuelve la pagina que
   se desplaza, con la barra y el pie pegajosos. Las pantallas nuevas (PR 2 en adelante) reparten su
   alto en paneles con scroll propio y nombre; las de hoy se desplazan enteras dentro del cuerpo, que
   por eso es foco de teclado y lleva nombre. Solo en pantalla: al imprimir manda el flujo de siempre.
   ========================================================================================== */
@media screen and (min-width: 1200px) and (min-height: 620px) {
  body { height: 100dvh; min-height: 0; overflow: hidden; }
  .marco-barra, .marco-pie { position: static; flex: none; }
  .marco-avisos, .marco-franja { flex: none; }
  /* Lo pegajoso de dentro se mide contra el cuerpo, que ya empieza bajo la barra. */
  body > main { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; --alto-barra: 0px; scroll-padding-top: var(--e-4); scroll-padding-bottom: var(--e-4); }
  body > main:focus-visible { outline-offset: -3px; }
  /* Dentro del cuerpo, `100vh` no cuenta la barra (48) ni el pie (unos 28): el panel pegajoso de miniaturas
     se mide contra lo que queda (rev-681-fable, C2). */
  body > main { --alto-miniaturas: calc(100dvh - var(--barra) - 4px - 28px - 2 * var(--e-4)); }
}

/* ==========================================================================================
   LAS PIEZAS DE LA INTERFAZ NUEVA (INSUD-293, PR 2), de `paginas/_piezas.html`. Todas con `ebr-`: 41 clases
   de la maqueta ya las usan las pantallas de hoy con otro dibujo, y estas no pisan ninguna. Las reglas son
   las de la maqueta v4.1 con su nombre cambiado; las rejillas de cada pantalla llegan con su PR.
   ========================================================================================== */
.ebr-icono { width: 18px; height: 18px; flex: none; }

/* El estado: chip con icono, palabra y color. Verde solo para lo comprobado. */
.ebr-estado { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 9px 2px 7px; border-radius: 12px; border: 1px solid var(--neutro-filo); background: var(--neutro-suave); color: var(--neutro); font: 600 var(--t-xs)/1.25 var(--f-texto); }
.ebr-estado .ebr-icono { width: 14px; height: 14px; }
.ebr-estado.ok { background: var(--ok-suave); border-color: var(--ok-filo); color: var(--ok); }
.ebr-estado.vigilar { background: var(--vigilar-suave); border-color: var(--vigilar-filo); color: var(--vigilar); }
.ebr-estado.parado { background: var(--parado-suave); border-color: var(--parado-filo); color: var(--parado); }
.ebr-estado.curso { background: var(--curso-suave); border-color: var(--curso-filo); color: var(--curso); }
.ebr-estado.nuevo { background: var(--caja); border: 1px dashed var(--curso); color: var(--curso); }

/* La linea: estacion a estacion con su flecha, y el desvio como salida lateral. */
.ebr-linea-caja { display: grid; gap: var(--e-2); min-width: 0; }
.ebr-linea { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 0; padding: var(--e-5) var(--e-4) var(--e-4); list-style: none; margin: 0; }
.ebr-linea[data-n="2"] { --n: 2; } .ebr-linea[data-n="3"] { --n: 3; } .ebr-linea[data-n="4"] { --n: 4; } .ebr-linea[data-n="6"] { --n: 6; }
.ebr-estacion { position: relative; padding: 0 var(--e-3); text-align: center; min-width: 0; }
.ebr-estacion-icono { width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 14px; display: grid; place-items: center; background: var(--caja-2); border: 1px solid var(--linea); color: var(--tinta-2); position: relative; z-index: 2; }
.ebr-estacion-icono .ebr-icono { width: 26px; height: 26px; }
.ebr-estacion .cifra { display: block; font: 600 2rem/1 var(--f-cifra); color: var(--tinta); }
.ebr-estacion .cifra.cero { color: var(--tinta-3); }
.ebr-estacion .nombre { display: block; font-weight: 600; font-size: var(--t-s); margin-top: 2px; }
.ebr-estacion .nota { display: block; font-size: var(--t-xs); color: var(--tinta-3); margin-top: 2px; }
.ebr-estacion:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px; background: repeating-linear-gradient(90deg, var(--tinta-4) 0 6px, transparent 6px 11px); z-index: 1; }
.ebr-estacion:not(:last-child)::before { content: ""; position: absolute; top: 21px; right: calc(-50% + 30px); border: 6px solid transparent; border-left: 8px solid var(--tinta-4); z-index: 1; }
.ebr-estacion.activa .ebr-estacion-icono { border-color: var(--curso-filo); background: var(--curso-suave); color: var(--curso); }
.ebr-estacion.activa:not(:last-child)::after { background: repeating-linear-gradient(90deg, var(--curso) 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: ebr-avanza 900ms linear infinite; }
.ebr-estacion.hecha .ebr-estacion-icono { border-color: var(--ok-filo); background: var(--ok-suave); color: var(--ok); }
.ebr-estacion.hecha:not(:last-child)::after { background: var(--ok); }
.ebr-estacion.parada .ebr-estacion-icono { border: 2px solid var(--parado); background: var(--parado-suave); color: var(--parado); }
.ebr-estacion.alerta .ebr-estacion-icono { border-color: var(--vigilar-filo); background: var(--vigilar-suave); color: var(--vigilar); }
.ebr-estacion .marca-estado { position: absolute; top: -6px; right: calc(50% - 34px); z-index: 3; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--caja); font: 700 11px/1 var(--f-texto); border: 2px solid var(--caja); }
.ebr-estacion.parada .marca-estado { background: var(--parado); }
.ebr-estacion.activa .marca-estado { background: var(--curso); }
@keyframes ebr-avanza { to { background-position: 22px 0; } }
.ebr-linea.compacta { padding: var(--e-3) 0 0; }
.ebr-linea.compacta .ebr-estacion-icono { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 6px; }
.ebr-linea.compacta .ebr-estacion-icono .ebr-icono { width: 20px; height: 20px; }
.ebr-linea.compacta .ebr-estacion:not(:last-child)::after { top: 20px; left: calc(50% + 28px); right: calc(-50% + 28px); }
.ebr-linea.compacta .ebr-estacion:not(:last-child)::before { top: 15px; right: calc(-50% + 24px); }
.ebr-linea.compacta .nombre { font-size: var(--t-xs); }
/* En filas: cada estacion una fila, con su flecha hacia abajo. Cabe en una columna estrecha y en el movil. */
.ebr-linea.filas { grid-template-columns: minmax(0, 1fr); padding: var(--e-2) var(--e-4); }
.ebr-linea.filas .ebr-estacion { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; text-align: left; padding: 3px 0; }
.ebr-linea.filas .ebr-estacion-icono { width: 36px; height: 36px; border-radius: 10px; margin: 0; grid-row: span 2; }
.ebr-linea.filas .ebr-estacion-icono .ebr-icono { width: 20px; height: 20px; }
.ebr-linea.filas .cifra { grid-column: 3; grid-row: 1 / span 2; font-size: 1.75rem; }
.ebr-linea.filas .nombre { margin: 0; }
.ebr-linea.filas .nota { margin: 0; line-height: 1.35; }
.ebr-linea.filas .ebr-estacion:not(:last-child)::after { top: 41px; bottom: -3px; left: 17px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--tinta-4) 0 4px, transparent 4px 7px); animation: none; }
.ebr-linea.filas .ebr-estacion.activa:not(:last-child)::after { background: repeating-linear-gradient(180deg, var(--curso) 0 4px, transparent 4px 7px); }
.ebr-linea.filas .ebr-estacion.hecha:not(:last-child)::after { background: var(--ok); }
.ebr-linea.filas .ebr-estacion:not(:last-child)::before { top: auto; bottom: -7px; right: auto; left: 13px; border: 5px solid transparent; border-top: 6px solid var(--tinta-4); border-bottom: 0; }
.ebr-linea.filas .marca-estado { right: auto; left: 26px; top: 0; width: 18px; height: 18px; }
.ebr-desvio { display: flex; align-items: center; gap: var(--e-3); margin: 0 var(--e-4) var(--e-4); padding: 10px 14px; border-radius: var(--r-m); border: 1px solid var(--parado-filo); background: var(--parado-suave); color: var(--tinta); font-size: var(--t-s); }
.ebr-desvio .ebr-icono { color: var(--parado); }
.ebr-desvio .cifra { font: 600 1.75rem/1 var(--f-cifra); color: var(--parado); }
.ebr-desvio a { margin-left: auto; font-weight: 600; color: var(--tinta); }
.ebr-desvio > span:not(.cifra) { flex: 1 1 0; min-width: 0; }

/* La hoja: la primera pagina real, que `visor.mjs` dibuja encima del texto de respaldo. */
.ebr-hoja { position: relative; display: grid; align-content: start; gap: 6px; aspect-ratio: 210 / 297; padding: 14% 12%; background: var(--papel); color: var(--papel-tinta); border-radius: 2px; box-shadow: 0 1px 1px color-mix(in srgb, var(--sombra) 14%, transparent), 0 12px 32px -14px color-mix(in srgb, var(--sombra) 40%, transparent); text-decoration: none; overflow: hidden; }
.ebr-hoja .clase { font: 600 11px/1.3 var(--f-texto); color: var(--papel-tinta); border-bottom: 1.5px solid var(--papel-tinta); padding-bottom: 4px; }
.ebr-hoja .titulo { font: 700 var(--t-s)/1.25 var(--f-texto); color: var(--papel-tinta); overflow-wrap: break-word; }
.ebr-hoja > .ui-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--papel); }
.ebr-hoja.con-pagina > .clase, .ebr-hoja.con-pagina > .titulo { opacity: 0; }
.ebr-hoja:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.ebr-vista-hoja { background: var(--hundido); border-radius: var(--r-m); padding: 18px 40px; }

/* El inspector: el elemento elegido, en una columna lateral. */
.ebr-inspector { display: grid; align-content: start; min-width: 0; background: var(--caja); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-caja); }
.ebr-inspector-cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--linea-2); }
.ebr-inspector-cabeza h2 { margin: 0; font: 600 var(--t-m)/1.3 var(--f-texto); color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.ebr-inspector-cuerpo { display: grid; gap: var(--e-4); padding: var(--e-4); min-width: 0; }
.ebr-vista-y-acciones { display: grid; gap: var(--e-3); }
.ebr-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin: 0; }
.ebr-acciones .ui-boton.primario { grid-column: 1 / -1; }
.ebr-acciones .ebr-icono { width: 16px; height: 16px; }
.ebr-datos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px var(--e-4); margin: 0; font-size: var(--t-s); }
.ebr-datos dt { color: var(--tinta-3); }
.ebr-datos dd { margin: 0; text-align: right; font-weight: 600; color: var(--tinta); min-width: 0; overflow-wrap: anywhere; }
.ebr-datos dd.codigo { font-family: var(--f-codigo); font-weight: 500; }

/* La cadena de evidencia: de la exportacion al PDF, con su flecha entre eslabones. */
.ebr-cadena { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ebr-cadena li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 18px; }
.ebr-cadena li:last-child { padding-bottom: 0; }
.ebr-eslabon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--caja-2); border: 1px solid var(--linea); color: var(--tinta-2); position: relative; z-index: 1; }
.ebr-cadena li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 6px; width: 2px; background: var(--tinta-4); }
.ebr-cadena li:not(:last-child)::before { content: ""; position: absolute; left: 11px; bottom: 0; border: 6px solid transparent; border-top: 8px solid var(--tinta-4); border-bottom: 0; }
.ebr-cadena li.final .ebr-eslabon { background: var(--ok-suave); border-color: var(--ok-filo); color: var(--ok); }
.ebr-cadena b { display: block; font-size: var(--t-s); color: var(--tinta); }
.ebr-cadena .sub { display: block; font-size: var(--t-xs); color: var(--tinta-3); overflow-wrap: anywhere; }
.ebr-cadena code { font-family: var(--f-codigo); }

/* Las guias: un cuadro por guia, macizo, rayado, hueco o discontinuo, para que se lea tambien en gris. */
.ebr-guias-caja { display: grid; gap: var(--e-3); position: relative; }
.ebr-saltar { position: absolute; left: -9999px; top: 0; z-index: 5; padding: var(--e-2) var(--e-3); border-radius: var(--r-m); background: var(--caja); color: var(--enlace); font: 600 var(--t-s)/1.3 var(--f-texto); box-shadow: var(--sombra-2); }
.ebr-saltar:focus { left: 0; }
.ebr-guias { display: grid; grid-template-columns: repeat(auto-fill, 20px); gap: 4px; list-style: none; margin: 0; padding: 0; }
.ebr-guias li { width: 20px; height: 20px; border-radius: 4px; }
.ebr-guias a { display: block; width: 100%; height: 100%; border-radius: inherit; }
.ebr-guias a:hover { outline: 2px solid var(--enlace); outline-offset: 1px; }
.ebr-guias .e1, .ebr-leyenda-edad i.e1 { background: var(--marca); }
.ebr-guias .e2, .ebr-leyenda-edad i.e2 { background: repeating-linear-gradient(-45deg, var(--marca) 0 2.5px, var(--caja) 2.5px 5px); box-shadow: inset 0 0 0 1.5px var(--marca); }
.ebr-guias .e3, .ebr-leyenda-edad i.e3 { background: var(--caja); box-shadow: inset 0 0 0 2px var(--tinta-3); }
.ebr-guias .ed, .ebr-leyenda-edad i.ed { background: var(--caja); box-shadow: none; outline: 2px dashed var(--tinta-3); outline-offset: -2px; }
.ebr-fin-mosaico { display: block; height: 0; }
.ebr-leyenda-edad { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-s); color: var(--tinta); }
.ebr-leyenda-edad li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ebr-leyenda-edad i { width: 16px; height: 16px; border-radius: 3px; display: block; }
.ebr-leyenda-edad b { font: 600 1.25rem/1 var(--f-cifra); }
@media (max-width: 899px) { .ebr-vista-hoja { padding: 14px 24px; } }
/* EN EL MOVIL LA LINEA VA EN FILAS siempre: cinco estaciones en 358 px pegaban los nombres («EntregadasParadas»)
   y partian las notas palabra a palabra. Son las reglas de `.filas`, con la flecha hacia abajo. */
@media (max-width: 639px) {
  .ebr-linea { grid-template-columns: minmax(0, 1fr); padding: var(--e-2) var(--e-4); }
  .ebr-linea .ebr-estacion { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 12px; align-items: center; text-align: left; padding: 3px 0; }
  .ebr-linea .ebr-estacion-icono { width: 36px; height: 36px; border-radius: 10px; margin: 0; grid-row: span 2; }
  .ebr-linea .ebr-estacion-icono .ebr-icono { width: 20px; height: 20px; }
  .ebr-linea .cifra { grid-column: 3; grid-row: 1 / span 2; font-size: 1.75rem; }
  .ebr-linea .nombre { margin: 0; font-size: var(--t-s); }
  .ebr-linea .nota { margin: 0; line-height: 1.35; }
  .ebr-linea .ebr-estacion:not(:last-child)::after { top: 41px; bottom: -3px; left: 17px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--tinta-4) 0 4px, transparent 4px 7px); animation: none; }
  .ebr-linea .ebr-estacion.activa:not(:last-child)::after { background: repeating-linear-gradient(180deg, var(--curso) 0 4px, transparent 4px 7px); }
  .ebr-linea .ebr-estacion.hecha:not(:last-child)::after { background: var(--ok); }
  .ebr-linea .ebr-estacion:not(:last-child)::before { top: auto; bottom: -7px; right: auto; left: 13px; border: 5px solid transparent; border-top: 6px solid var(--tinta-4); border-bottom: 0; }
  .ebr-linea .marca-estado { right: auto; left: 26px; top: 0; width: 18px; height: 18px; }
  /* LA COMPACTA TAMBIEN (INSUD-293, PR 5): sus flechas en horizontal pesan mas que las de arriba y en 390 px
     salian 91 px por la derecha. Es su primer uso, en «Donde se paro» de Errores. */
  .ebr-linea.compacta .ebr-estacion-icono { width: 36px; height: 36px; margin: 0; }
  .ebr-linea.compacta .ebr-estacion:not(:last-child)::after { top: 41px; left: 17px; right: auto; }
  .ebr-linea.compacta .ebr-estacion:not(:last-child)::before { top: auto; right: auto; left: 13px; }
}

/* ==========================================================================================
   LA DEMO NUEVA (INSUD-293, PR 3): portada, prueba en curso y resultado, de las maquetas 06, 07 y 08 de la
   v4.1 con su nombre cambiado a `ebr-`, como las piezas del PR 2. En escritorio desde 1200x620 cada pantalla
   cabe entera: el cuerpo no se desplaza y lo que no cabe se desplaza dentro de su panel (`.ebr-desliza`, foco
   de teclado y con nombre). Por debajo, la pagina se desplaza como siempre y todo va a una columna.
   ========================================================================================== */
.ebr-pagina { width: 100%; max-width: var(--ancho-pagina); margin: 0 auto; padding: 10px var(--e-5) var(--e-4); font-variant-numeric: tabular-nums; }
.marco-cabecera + .ebr-pagina { padding-top: 2px; }
body > main:has(> .ebr-pagina) > .marco-cabecera { max-width: var(--ancho-pagina); padding: 6px var(--e-5) 0; }
body > main:has(> .ebr-pagina) > .marco-cabecera .ui-migas { margin-bottom: 0; }
.ebr-pagina > * + * { margin-top: var(--e-3); }
.ebr-caja { background: var(--caja); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--sombra-caja); min-width: 0; }
.ebr-caja-cabeza { display: flex; align-items: center; gap: var(--e-3); padding: 10px var(--e-4); border-bottom: 1px solid var(--linea-2); flex-wrap: wrap; }
.ebr-caja-cabeza h2 { font: 600 var(--t-s)/1.3 var(--f-texto); margin: 0; }
.ebr-caja-cabeza .extremo { margin-left: auto; font-size: var(--t-xs); color: var(--tinta-3); }
.ebr-caja-cuerpo { padding: var(--e-3) var(--e-4); }
.ebr-caja-pie { padding: 8px var(--e-4); border-top: 1px solid var(--linea-2); font-size: var(--t-xs); color: var(--tinta-3); }
.ebr-pila { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.ebr-pila.junta { gap: var(--e-2); }
.ebr-rotulo { display: block; font: 600 var(--t-2xs)/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.ebr-peque { font-size: var(--t-xs); color: var(--tinta-2); }
.ebr-arriba { margin-top: var(--e-3); }
.ebr-ancho { width: 100%; }
.ebr-pagina .ui-boton.peque { min-height: 32px; padding: 0 10px; font-size: var(--t-xs); }
.ebr-pagina .ui-boton .ebr-icono { width: 18px; height: 18px; }
.ebr-desliza:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }

/* Una hoja dibujada, sin texto: el abanico de la portada y lo que aun no ha salido. La pauta es papel. */
.ebr-hoja-dibujo { display: block; aspect-ratio: 210 / 297; background: var(--papel) repeating-linear-gradient(180deg, transparent 0 9px, var(--papel-pauta) 9px 10px) 0 22% / 100% 70% no-repeat; border: 1px solid var(--papel-linea); border-radius: 2px; box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--sombra) 45%, transparent); }
.ebr-hoja-dibujo.portada { background: linear-gradient(var(--papel-tinta), var(--papel-tinta)) 14% 12% / 50% 4px no-repeat, var(--papel) repeating-linear-gradient(180deg, transparent 0 9px, var(--papel-pauta) 9px 10px) 0 30% / 100% 60% no-repeat; }
.ebr-abanico { position: relative; height: 150px; display: grid; place-items: center; }
.ebr-abanico .ebr-hoja-dibujo { position: absolute; width: 96px; transition: transform var(--d-3) var(--curva); }
.ebr-abanico .ebr-hoja-dibujo:nth-child(1) { transform: rotate(-9deg) translate(-44px, 6px); }
.ebr-abanico .ebr-hoja-dibujo:nth-child(2) { transform: rotate(-3deg) translate(-12px, 0); }
.ebr-abanico .ebr-hoja-dibujo:nth-child(3) { transform: rotate(5deg) translate(24px, 3px); }
.ebr-abanico.peque { height: 112px; }
.ebr-abanico.peque .ebr-hoja-dibujo { width: 64px; }
.ebr-abanico.peque .ebr-hoja-dibujo:nth-child(1) { transform: rotate(-9deg) translate(-24px, 4px); }
.ebr-abanico.peque .ebr-hoja-dibujo:nth-child(2) { transform: rotate(-3deg) translate(-6px, 0); }
.ebr-abanico.peque .ebr-hoja-dibujo:nth-child(3) { transform: rotate(5deg) translate(14px, 2px); }

/* 06. La portada: el heroe con las dos salidas y, debajo, la subida y la columna del ejemplo. */
.ebr-heroe { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 16px 28px; position: relative; overflow: hidden; }
.ebr-heroe::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--marca) 8%, transparent)), repeating-linear-gradient(0deg, transparent 0 27px, var(--linea-2) 27px 28px); opacity: .7; pointer-events: none; }
.ebr-heroe > * { position: relative; }
.ebr-heroe h1 { font: 600 1.75rem/1.15 var(--f-texto); letter-spacing: -.01em; margin: 4px 0 0; text-wrap: balance; }
.ebr-heroe .bajada { color: var(--tinta-2); font-size: var(--t-m); margin: 8px 0 12px; max-width: 76ch; }
.ebr-faltan { display: flex; gap: var(--e-2); flex-wrap: wrap; align-items: center; }
.ebr-faltan form { margin: 0; }
.ebr-de-a { display: grid; grid-template-columns: 1fr auto 1.2fr; align-items: center; gap: 18px; }
.ebr-de-a > .ebr-icono { width: 40px; height: 40px; color: var(--marca); justify-self: center; }
.ebr-cab-icono { display: grid; justify-items: center; gap: 6px; padding: 12px 10px; border-radius: var(--r-l); background: var(--caja); border: 1px solid var(--linea); box-shadow: var(--sombra-2); font-size: var(--t-xs); color: var(--tinta-3); text-align: center; }
.ebr-cab-icono b { font: 600 var(--t-s)/1 var(--f-codigo); color: var(--tinta); }
.ebr-cab-icono .ebr-icono { width: 36px; height: 36px; color: var(--tinta-2); }
.ebr-opciones { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--e-3); align-items: start; }
.ebr-opciones > form { margin: 0; }
.ebr-subir { display: grid; gap: var(--e-3); align-content: start; }
.ebr-soltar.ui-subida { padding: var(--e-4) var(--e-5); gap: 4px; border-color: var(--borde-campo); background: repeating-linear-gradient(-45deg, var(--caja) 0 14px, var(--caja-2) 14px 28px); }
.ebr-soltar.ui-subida svg { width: 32px; height: 32px; color: var(--tinta-3); }
.ebr-soltar.ui-subida b { font-size: var(--t-l); }
.ebr-soltar.ui-subida span { font-size: var(--t-s); color: var(--tinta-3); }
.ebr-soltar.ui-subida:hover { border-color: var(--marca); }
.ebr-subir:has(.ui-ficheros:not([hidden])) .ebr-soltar { grid-auto-flow: column; justify-content: center; align-items: center; padding: var(--e-2) var(--e-4); gap: var(--e-2); }
.ebr-subir:has(.ui-ficheros:not([hidden])) .ebr-soltar svg { width: 20px; height: 20px; }
.ebr-subir:has(.ui-ficheros:not([hidden])) .ebr-soltar > span { display: none; }
.ebr-subir .ui-fichero { padding: var(--e-2) var(--e-3); }
.ebr-subir .ui-fichero .tipo { width: 32px; height: 38px; }
.ebr-limites { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-xs); color: var(--tinta-3); }
.ebr-limites li { display: flex; gap: 8px; align-items: flex-start; }
.ebr-limites .ebr-icono { width: 14px; height: 14px; margin-top: 2px; }
.ebr-recibir { display: flex; align-items: center; gap: var(--e-2) var(--e-3); flex-wrap: wrap; border: 0; margin: 0; padding: 0; }
.ebr-recibir legend { float: left; margin-right: var(--e-2); padding: 0; }
.ebr-casilla { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--caja); font-size: var(--t-s); cursor: pointer; }
.ebr-casilla input { width: 20px; height: 20px; accent-color: var(--accion); margin: 0; }
.ebr-casilla:has(input:checked) { border-color: var(--elegida-filo); background: var(--elegida); }
.ebr-casilla:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 2px; }
.ebr-subir .ui-boton.primario { min-height: 44px; }
.ebr-ejemplo { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--e-3); align-items: center; }
.ebr-ejemplo form { margin: 0; }
.ebr-lista { list-style: none; margin: 0; padding: 0; }
.ebr-lista > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--e-3); align-items: center; padding: 8px var(--e-4); border-top: 1px solid var(--linea-2); }
.ebr-lista > li:first-child { border-top: 0; }
.ebr-lista b { font-weight: 600; font-size: var(--t-s); display: block; min-width: 0; }
.ebr-lista .sub { display: block; color: var(--tinta-3); font-size: var(--t-xs); margin-top: 2px; }
.ebr-icono-fila { width: 30px; height: 30px; border-radius: var(--r-m); display: grid; place-items: center; }
.ebr-icono-fila .ebr-icono { width: 16px; height: 16px; }
.ebr-icono-fila.ok { background: var(--ok-suave); color: var(--ok); }
.ebr-icono-fila.parado { background: var(--parado-suave); color: var(--parado); }
.ebr-icono-fila.vigilar { background: var(--vigilar-suave); color: var(--vigilar); }
.ebr-icono-fila.curso { background: var(--curso-suave); color: var(--curso); }

/* 07 y 08. La cabeza de una prueba: el titulo y lo que es, y a la derecha sus acciones y su ficha en una linea. */
.ebr-cabeza { display: flex; align-items: flex-end; gap: var(--e-2) var(--e-5); flex-wrap: wrap; }
.ebr-cabeza h1 { font: 600 1.5rem/1.2 var(--f-texto); margin: 0; }
.ebr-cabeza-texto { flex: 1 1 420px; min-width: 0; display: grid; gap: 4px; }
.ebr-cabeza-texto > p { color: var(--tinta-3); max-width: 110ch; font-size: var(--t-s); }
.ebr-cabeza-lado { display: grid; gap: 4px; justify-items: end; flex: 0 1 520px; min-width: 0; }
.ebr-cabeza-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; justify-content: flex-end; margin: 0; }
.ebr-ficha-linea { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 2px var(--e-3); }
.ebr-esta-prueba { font-size: var(--t-xs); color: var(--tinta-3); text-align: right; }
.ebr-esta-prueba .ui-nombre-fichero { display: inline-flex; max-width: 24ch; vertical-align: bottom; }
.ebr-borrar { font-size: var(--t-xs); text-align: right; }
.ebr-borrar summary { cursor: pointer; color: var(--enlace); display: inline-flex; align-items: center; min-height: 24px; }
.ebr-borrar[open] { flex-basis: 100%; text-align: left; padding: var(--e-3); border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--caja); }
.ebr-resultado-cabeza { display: flex; gap: var(--e-2) var(--e-3); align-items: center; flex-wrap: wrap; }
.ebr-resultado-cabeza .ui-sello { font-size: 11px; }
.ebr-sello { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 2px solid var(--ok); color: var(--ok); border-radius: var(--r-m); font: 700 var(--t-xs)/1 var(--f-texto); text-transform: uppercase; letter-spacing: .05em; rotate: -2deg; }
.ebr-sello .ebr-icono { width: 16px; height: 16px; }
.ebr-avisos-texto { color: var(--tinta-2); }

/* La prueba en curso: la linea con la actividad indeterminada, y lo que sale junto a lo que ha hecho. */
.ebr-en-vivo { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; padding: 10px var(--e-4); border-top: 1px solid var(--linea-2); font-size: var(--t-s); }
.ebr-en-vivo p { margin: 0; }
.ebr-en-vivo .rotulo-fase { font-weight: 600; color: var(--tinta); }
.ebr-en-vivo .detalle-fase { color: var(--tinta-2); }
.ebr-en-vivo .tiempo-fase { color: var(--tinta-3); }
.ebr-actividad { flex: 0 1 200px; height: 4px; border-radius: 99px; background: var(--hundido); overflow: hidden; position: relative; }
.ebr-actividad::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: inherit; background: var(--curso); animation: ebr-vaiven 1.6s var(--curva) infinite alternate; }
@keyframes ebr-vaiven { from { transform: translateX(-10%); } to { transform: translateX(240%); } }
.ebr-pagina .a-mano { padding: 0 var(--e-4) 10px; font-size: var(--t-s); }
.ebr-rejilla { display: grid; gap: var(--e-3); }
.ebr-rejilla.dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* CADA HOJA CON SU NOMBRE AL LADO (rev-685-fable, B1): con la leyenda debajo, a 1366x650 la hoja medía más
   que el panel y su nombre quedaba fuera de la vista. */
.ebr-salen { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--e-3) var(--e-4); }
.ebr-salen figure { margin: 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; font-size: var(--t-xs); color: var(--tinta-2); }
.ebr-salen figcaption b { display: block; color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
.ebr-salen figure.llega .ebr-hoja-dibujo { animation: ebr-entra var(--d-3) var(--curva) both; }
.ebr-salen figure.espera .ebr-hoja-dibujo { background: repeating-linear-gradient(-45deg, var(--caja-2) 0 6px, var(--hundido) 6px 12px); box-shadow: none; border: 1px dashed var(--tinta-4); }
@keyframes ebr-entra { from { transform: translateY(8px) scale(.94); opacity: 0; } }
.ebr-sin-plan { max-width: 70ch; }
.ebr-bitacora { list-style: none; margin: 0; padding: 0; font-size: var(--t-s); display: grid; gap: 8px; }
.ebr-bitacora li { display: grid; grid-template-columns: 62px 18px minmax(0, 1fr); gap: 8px; align-items: start; }
.ebr-bitacora time { font: 400 var(--t-xs)/1.6 var(--f-codigo); color: var(--tinta-3); }
.ebr-bitacora .ebr-icono { width: 16px; height: 16px; margin-top: 2px; color: var(--ok); }

/* 08. El resultado: la conciliacion a la izquierda; el legajo y un valor seguido a la derecha. */
.ebr-resultado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: var(--e-3); align-items: start; }
.ebr-avisos-hoja { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px var(--e-4); border-bottom: 1px solid var(--linea-2); background: var(--vigilar-suave); color: var(--tinta); font-size: var(--t-xs); }
.ebr-avisos-hoja .ebr-icono { width: 16px; height: 16px; color: var(--vigilar); }
.ebr-avisos-hoja b { font-weight: 600; white-space: nowrap; }
.ebr-avisos-hoja ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--e-4); }
.ebr-tabla-marco { overflow-x: auto; }
.ebr-conciliacion { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-s); }
.ebr-conciliacion thead th { position: sticky; top: 0; z-index: 1; background: var(--caja-2); text-align: left; font: 600 var(--t-2xs)/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); padding: 6px 12px; border-bottom: 1px solid var(--linea); }
.ebr-conciliacion thead td.signo { background: var(--caja-2); border-bottom: 1px solid var(--linea); position: sticky; top: 0; }
.ebr-conciliacion tbody th { text-align: left; font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta); padding: 4px 12px; border-bottom: 1px solid var(--linea-2); width: 182px; vertical-align: top; }
.ebr-conciliacion td:nth-child(2) { width: 23%; }
.ebr-conciliacion td:nth-child(4) { width: 26%; }
.ebr-conciliacion .sub { font-size: var(--t-xs); }
.ebr-conciliacion td { padding: 4px 12px; border-bottom: 1px solid var(--linea-2); vertical-align: top; line-height: 1.35; color: var(--tinta-2); }
.ebr-conciliacion tbody tr:last-child > * { border-bottom: 0; }
.ebr-conciliacion .cifra { font: 600 1.25rem/1 var(--f-cifra); color: var(--tinta); margin-right: 4px; }
.ebr-conciliacion td.signo { width: 24px; padding-left: 0; padding-right: 0; text-align: center; font: 600 1.125rem/1.2 var(--f-cifra); color: var(--tinta-3); }
.ebr-conciliacion td.sin-medida { color: var(--tinta-3); font-size: var(--t-xs); font-style: italic; }
.ebr-conciliacion td.aviso-fila .cifra { color: var(--vigilar); }
.ebr-siguiente { display: grid; gap: var(--e-2); justify-items: start; padding: 10px var(--e-4); border-left: 4px solid var(--marca); }
.ebr-siguiente h2 { font: 600 var(--t-m)/1.3 var(--f-texto); margin: 0; }
.ebr-siguiente p { font-size: var(--t-s); color: var(--tinta-2); margin-top: 2px; }
.ebr-legajo-grupo + .ebr-legajo-grupo { margin-top: var(--e-3); }
.ebr-legajo-grupo h3 { display: grid; gap: 1px; margin: 0 0 6px; font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--tinta); }
.ebr-legajo-grupo h3 span { font-weight: 400; font-size: var(--t-xs); color: var(--tinta-3); }
.ebr-legajo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ebr-legajo-doc { display: grid; gap: 5px; align-content: start; padding: 6px; border-radius: var(--r-m); border: 1px solid transparent; font-size: var(--t-xs); color: var(--tinta-3); min-width: 0; }
.ebr-legajo-doc.primero { border-color: var(--elegida-filo); background: var(--elegida); }
.ebr-legajo-doc > b { font-size: var(--t-s); color: var(--tinta); font-weight: 600; overflow-wrap: break-word; line-height: 1.25; }
.ebr-legajo-doc .empieza { font: 600 var(--t-2xs)/1 var(--f-texto); text-transform: uppercase; letter-spacing: .05em; color: var(--marca-texto); min-height: 1em; }
.ebr-legajo-doc .ebr-hoja { padding: 12% 10%; gap: 4px; width: 72%; justify-self: center; }
.ebr-legajo-doc .ebr-hoja .clase { font-size: 9px; }
.ebr-legajo-doc .ebr-hoja .titulo { font-size: 10px; }
.ebr-legajo-doc .ebr-hoja:hover { transform: translateY(-3px) rotate(-1deg); }
.ebr-legajo-doc .ebr-hoja { transition: transform var(--d-2) var(--curva); }
.ebr-legajo-doc code { font: 500 11px/1.3 var(--f-codigo); color: var(--tinta-3); overflow-wrap: anywhere; }
.ebr-descargas { display: flex; gap: 2px 10px; flex-wrap: wrap; margin: 0; }
.ebr-descargas a { display: inline-flex; align-items: center; min-height: 24px; font-weight: 600; color: var(--enlace); }
.ebr-legajo-doc .nota { margin: 0; padding-left: 6px; border-left: 2px solid var(--linea); font-size: 11px; line-height: 1.35; color: var(--tinta-2); }
.ebr-legajo-doc .nota.incidencia { border-left-color: var(--vigilar); }
.ebr-pagina .valor-puesto { font-weight: 700; color: var(--tinta); }

@media screen and (min-width: 1200px) and (min-height: 620px) {
  body > main:has(> .ebr-pagina) { display: flex; flex-direction: column; }
  body > main:has(> .ebr-pagina) > .marco-cabecera { width: 100%; flex-shrink: 0; }
  .ebr-pagina { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
  .ebr-pagina > * { flex-shrink: 0; }
  .ebr-pagina > .ebr-llena { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ebr-llena > * { min-height: 0; }
  .ebr-llena > .ebr-pila { display: flex; flex-direction: column; }
  .ebr-llena > .ebr-pila.ebr-desliza { padding: 0 4px 4px 0; }
  .ebr-flexible { display: flex; flex-direction: column; min-height: 0; }
  .ebr-desliza { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .ebr-columna-izq > .ebr-flexible { flex: 1 1 auto; }
  .ebr-tabla-marco.ebr-entera.ebr-desliza { overflow: auto; }
}
@media screen and (min-width: 1200px) and (min-height: 620px) and (max-height: 819px) {
  .ebr-heroe { padding-top: 10px; padding-bottom: 10px; }
  .ebr-heroe h1 { font-size: 1.5rem; }
  .ebr-heroe .bajada { margin: 4px 0 8px; font-size: var(--t-s); }
  .ebr-abanico { height: 112px; }
  .ebr-abanico .ebr-hoja-dibujo { width: 74px; }
  .ebr-cab-icono { padding: 8px; }
  .ebr-subir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .ebr-subir > .ui-campo, .ebr-subir > .ui-ficheros, .ebr-subir > [data-errores] { grid-column: 1 / -1; }
  .ebr-soltar.ui-subida { padding: var(--e-3); }
  .ebr-subir .ebr-recibir legend { float: none; width: 100%; margin: 0 0 4px; }
  .ebr-caja-cabeza { padding-top: 7px; padding-bottom: 7px; }
  .ebr-pagina { padding-bottom: 8px; }
  .ebr-pagina > * + * { margin-top: 8px; }
  .ebr-cabeza h1 { font-size: 1.375rem; }
  .ebr-cabeza-texto > p { line-height: 1.45; }
  .ebr-conciliacion tbody th, .ebr-conciliacion td { padding-top: 3px; padding-bottom: 3px; line-height: 1.3; }
  .ebr-conciliacion thead th { padding-top: 5px; padding-bottom: 5px; }
  .ebr-caja-pie { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 1199.98px) {
  .ebr-resultado { grid-template-columns: minmax(0, 1fr); }
  .ebr-resultado > .ebr-desliza { order: -1; }
  .ebr-cabeza-lado { justify-items: start; }
  .ebr-cabeza-acciones { justify-content: flex-start; }
  .ebr-esta-prueba, .ebr-borrar { text-align: left; }
  body > main:has(> .ebr-pagina) > .marco-cabecera { padding-left: var(--e-4); padding-right: var(--e-4); }
}
@media (max-width: 899.98px) {
  .ebr-heroe, .ebr-opciones, .ebr-rejilla.dos { grid-template-columns: minmax(0, 1fr); }
  .ebr-de-a { display: none; }
  .ebr-legajo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ebr-conciliacion tbody th { width: auto; }
}
/* EN EL MOVIL LA HOJA SE APILA, como la de antes (INSUD-320): cada fila es un bloque con su titulo y cada cifra
   lleva delante su columna (`data-rotulo`); los `role` de la plantilla mantienen la tabla para el lector. */
@media (max-width: 640px) {
  .ebr-pagina { padding: var(--e-3) var(--e-4); }
  .ebr-heroe { padding: 16px; }
  .ebr-heroe h1 { font-size: 1.5rem; }
  .ebr-ejemplo { grid-template-columns: minmax(0, 1fr); }
  .ebr-ejemplo .ebr-abanico { display: none; }
  .ebr-conciliacion thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ebr-conciliacion, .ebr-conciliacion tbody, .ebr-conciliacion tr, .ebr-conciliacion th, .ebr-conciliacion td { display: block; width: 100%; }
  .ebr-conciliacion tbody tr { padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--linea-2); }
  .ebr-conciliacion tbody th, .ebr-conciliacion td { border: 0; padding: 2px 0; }
  .ebr-conciliacion td.signo { display: none; }
  .ebr-conciliacion td[data-rotulo]::before { content: attr(data-rotulo); display: block; font: 600 var(--t-2xs)/1.4 var(--f-texto); text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-3); }
}
@media (prefers-reduced-motion: reduce) { .ebr-actividad::after { animation: none; width: 100%; opacity: .35; } }

/* ==========================================================================================
   ESTADO (INSUD-293, PR 4), de la maqueta 01 de la v4.1 con su nombre cambiado a `ebr-`. En escritorio desde
   1200x620 cabe entera: el veredicto arriba, la linea y la atencion en medio con su scroll propio, y el
   servicio en una tira abajo. Por debajo, una columna y la pagina se desplaza.
   ========================================================================================== */
.ebr-estado-cabeza { display: flex; align-items: center; gap: var(--e-2) var(--e-5); flex-wrap: wrap; }
.ebr-estado-cabeza .ui-pestanas { margin: 0; padding: 0; border-bottom: 0; }
.ebr-estado-cabeza .ui-pestanas a { min-height: 36px; padding: 6px 10px 5px; }
.ebr-estado-cabeza .ui-pestanas + * { margin-top: 0; }
.ebr-reloj { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin: 0 0 0 auto; font-size: var(--t-xs); color: var(--tinta-3); }
.ebr-reloj b { color: var(--tinta); font-weight: 600; }
.ebr-reloj .barra-recarga { font-size: var(--t-xs); }
.ebr-reloj .pausa-recarga { min-height: 28px; }
.ebr-inicio { display: grid; gap: var(--e-3); grid-template-columns: minmax(0, 1fr) 410px; grid-template-areas: "v v" "l a" "s s"; grid-template-rows: auto minmax(0, 1fr) auto; }
.ebr-veredicto { grid-area: v; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3) var(--e-5); padding: 12px var(--e-5); position: relative; overflow: hidden; }
.ebr-titular { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 2px; }
.ebr-titular .cifra { font: 600 3rem/1 var(--f-cifra); letter-spacing: -.01em; color: var(--marca-texto); }
.ebr-titular h1 { margin: 0; font: 600 1.5rem/1.2 var(--f-texto); color: var(--tinta); }
.ebr-veredicto .bajada { color: var(--tinta-2); font-size: var(--t-s); margin: 6px 0 10px; }
.ebr-veredicto .ui-boton .ebr-icono { width: 18px; height: 18px; }
.ebr-ultimo-simulacro { margin: var(--e-2) 0 0; font-size: var(--t-xs); color: var(--tinta-2); }
.ebr-edad { display: grid; gap: var(--e-2); align-content: start; min-width: 0; padding-left: var(--e-5); border-left: 1px solid var(--linea-2); }
.ebr-edad h2 { margin: 0; font: 600 var(--t-s)/1.3 var(--f-texto); }
.ebr-edad .ebr-peque { margin: 0; line-height: 1.4; }
.ebr-edad .ebr-leyenda-edad { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: var(--t-xs); }
.ebr-edad .ebr-leyenda-edad li { grid-template-columns: 14px auto auto; gap: 6px; white-space: nowrap; }
.ebr-edad .ebr-leyenda-edad i { width: 14px; height: 14px; }
.ebr-edad .ebr-leyenda-edad b { font-size: 1rem; }
.ebr-mas-antigua { margin: 0; font-size: var(--t-xs); line-height: 1.45; padding: 6px 10px; border-radius: var(--r-m); background: var(--caja-2); border: 1px solid var(--linea-2); color: var(--tinta); }

.ebr-zona-linea { grid-area: l; display: flex; flex-direction: column; }
.ebr-linea-y-horas { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ebr-linea-col { display: flex; flex-direction: column; justify-content: center; gap: var(--e-2); padding-bottom: var(--e-3); min-width: 0; }
.ebr-linea-col .ebr-desvio { margin: 0 var(--e-4) 0; padding: 5px 12px; font-size: var(--t-xs); }
.ebr-linea-col .ebr-desvio .cifra { font-size: 1.5rem; }
.ebr-linea-col .ui-vacio, .ebr-horas .ui-vacio { margin: var(--e-4); }
.ebr-horas { display: flex; flex-direction: column; gap: 6px; padding: var(--e-3) var(--e-4) var(--e-2); min-height: 0; border-left: 1px solid var(--linea-2); }
.ebr-horas-cabeza { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.ebr-horas-cabeza h3 { margin: 0; font: 600 var(--t-s)/1.3 var(--f-texto); }
.ebr-leyenda-horas { display: flex; gap: var(--e-4); margin-left: auto; font-size: var(--t-xs); color: var(--tinta-3); flex-wrap: wrap; }
.ebr-leyenda-horas i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.ebr-leyenda-horas b { font: 600 1.125rem/1 var(--f-cifra); color: var(--tinta); margin-right: 3px; }
.ebr-leyenda-horas i.ok, .ebr-barras i { background: var(--ok); }
.ebr-leyenda-horas i.p, .ebr-barras i.p { background: repeating-linear-gradient(-45deg, var(--parado) 0 2px, color-mix(in srgb, var(--parado) 55%, var(--caja)) 2px 4px); }
.ebr-barras { flex: 1; display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px; align-items: end; min-height: 60px; max-height: 150px; height: 120px; padding: 0 2px; list-style: none; margin: 0; }
.ebr-barra { display: flex; flex-direction: column-reverse; gap: 1px; height: 100%; }
.ebr-barras i { display: block; border-radius: 2px; transform-origin: bottom; animation: ebr-crece var(--d-4) var(--curva) both; }
.ebr-barras i.vacio { background: var(--hundido); height: 3px; animation: none; }
.ebr-h1 { height: 8.33%; } .ebr-h2 { height: 16.66%; } .ebr-h3 { height: 25%; } .ebr-h4 { height: 33.33%; } .ebr-h5 { height: 41.66%; } .ebr-h6 { height: 50%; }
.ebr-h7 { height: 58.33%; } .ebr-h8 { height: 66.66%; } .ebr-h9 { height: 75%; } .ebr-h10 { height: 83.33%; } .ebr-h11 { height: 91.66%; } .ebr-h12 { height: 100%; }
@keyframes ebr-crece { from { transform: scaleY(0); } }
.ebr-eje { display: flex; justify-content: space-between; font-size: var(--t-2xs); color: var(--tinta-3); }
.ebr-horas .ebr-peque { margin: 0; }

.ebr-zona-atencion { grid-area: a; display: flex; flex-direction: column; }
.ebr-burbuja { min-width: 26px; height: 22px; padding: 0 7px; border-radius: 99px; display: inline-grid; place-items: center; font: 600 var(--t-xs)/1 var(--f-texto); background: var(--hundido); color: var(--tinta-2); }
.ebr-burbuja.vigilar { background: var(--vigilar-suave); color: var(--vigilar-texto); }
.ebr-lista { list-style: none; margin: 0; padding: 0; }
.ebr-lista > li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 6px var(--e-4); border-top: 1px solid var(--linea-2); }
.ebr-lista > li:first-child { border-top: 0; }
.ebr-lista > li > div { display: contents; }
.ebr-lista > li > div > b { grid-column: 2; grid-row: 1; font-size: var(--t-s); line-height: 1.35; font-weight: 600; }
.ebr-lista > li > div > .sub { grid-column: 2 / 4; grid-row: 2; display: block; margin: 0; color: var(--tinta-3); font-size: var(--t-xs); line-height: 1.4; }
.ebr-lista > li > .ui-boton { grid-column: 3; grid-row: 1; min-height: 32px; padding: 0 10px; font-size: var(--t-xs); }
.ebr-lista code { font-family: var(--f-codigo); }
.ebr-icono-fila { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.ebr-icono-fila .ebr-icono { width: 18px; height: 18px; }
.ebr-icono-fila.parado { background: var(--parado-suave); color: var(--parado); }
.ebr-icono-fila.vigilar { background: var(--vigilar-suave); color: var(--vigilar); }
.ebr-nada { margin: var(--e-4); }

.ebr-zona-servicio { grid-area: s; display: flex; align-items: center; gap: var(--e-4); padding: 7px var(--e-4); }
.ebr-zona-servicio h2 { margin: 0; font: 600 var(--t-s)/1.3 var(--f-texto); white-space: nowrap; }
.ebr-salud { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0; margin: 0; flex: 1; list-style: none; }
.ebr-salud li { display: flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--tinta-3); }
.ebr-salud .valor { color: var(--tinta); font-size: var(--t-s); font-weight: 600; }
.ebr-salud .ambito { color: var(--tinta-3); font-size: var(--t-xs); }
.ebr-salud .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }
.ebr-salud .punto.vigilar, .ebr-salud .punto.desconocido { background: var(--vigilar); border-radius: 1px; transform: rotate(45deg); }
.ebr-salud .punto.parado { background: var(--parado); border-radius: 1px; }

@media screen and (min-width: 1200px) and (min-height: 620px) {
  .ebr-estado-pagina > .ebr-inicio { flex: 1 0 auto; }
  /* LO CRITICO SE VE SIEMPRE (rev-687-fable 1): la fila del medio no baja de lo que ocupa la linea entera,
     con «Entregadas hoy» y el desvio, ni de dos filas de atencion. Si la ventana no da para tanto, se
     desplaza el cuerpo de la pagina, nunca se esconde una cifra dentro de un panel de 0 px. */
  .ebr-inicio { grid-template-rows: auto minmax(auto, 1fr) auto; }
  /* Con `overflow: hidden` el minimo automatico de un elemento de rejilla es 0: se le da el de su contenido. */
  .ebr-inicio > .ebr-veredicto, .ebr-inicio > .ebr-zona-servicio { min-height: min-content; }
  .ebr-linea-y-horas { grid-template-rows: minmax(auto, 1fr); }
  .ebr-zona-atencion { min-height: 0; }
  .ebr-zona-atencion > .ebr-lista { min-height: 7.5rem; }
}
@media screen and (min-width: 1200px) and (min-height: 620px) and (max-height: 819px) {
  .ebr-veredicto { padding-top: 8px; padding-bottom: 8px; }
  .ebr-titular .cifra { font-size: 2.5rem; }
  .ebr-veredicto .bajada { margin: 4px 0 8px; }
  .ebr-ultimo-simulacro { margin-top: 4px; }
  .ebr-edad { gap: 6px; }
  .ebr-mas-antigua { padding: 4px 10px; }
  .ebr-horas { padding-top: var(--e-2); gap: 4px; }
  .ebr-barras { min-height: 36px; }
  .ebr-zona-servicio { padding-top: 5px; padding-bottom: 5px; }
  /* Con poca altura, el mosaico en cuadros de 14 px y la linea mas apretada: asi la pagina entera cabe a
     1366x650 con 50 guias y con el mosaico plegado (medido con `qa` de 31 a 201 guias). */
  .ebr-edad .ebr-guias { grid-template-columns: repeat(auto-fill, 14px); gap: 3px; }
  .ebr-edad .ebr-guias li { width: 14px; height: 14px; border-radius: 3px; }
  .ebr-linea.filas .ebr-estacion { padding: 1px 0; }
  .ebr-linea.filas .nota { line-height: 1.25; }
  /* Las notas de la entrada y de en proceso las dice tambien el globo de su termino: con poca altura se quedan
     ahi, y la de entregadas, que lleva las hechas sin documento nuevo, se ve siempre. */
  .ebr-linea.filas .ebr-estacion:not(:last-child) .nota { display: none; }
  .ebr-linea.filas { padding-top: 4px; padding-bottom: 4px; }
  .ebr-linea.filas .ebr-estacion { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .ebr-linea.filas .ebr-estacion-icono { width: 28px; height: 28px; border-radius: 8px; }
  .ebr-linea.filas .ebr-estacion-icono .ebr-icono { width: 16px; height: 16px; }
  .ebr-linea.filas .cifra { font-size: 1.375rem; }
  .ebr-linea.filas .ebr-estacion:not(:last-child)::after { top: 31px; left: 13px; }
  .ebr-linea.filas .ebr-estacion:not(:last-child)::before { left: 9px; }
  .ebr-linea.filas .marco-estado, .ebr-linea.filas .marca-estado { left: 20px; width: 14px; height: 14px; font-size: 9px; }
  .ebr-linea-col .ebr-desvio { padding-top: 3px; padding-bottom: 3px; }
  .ebr-linea-col .ebr-desvio .cifra { font-size: 1.25rem; }
  .ebr-titular .cifra { font-size: 2.125rem; }
  .ebr-veredicto .bajada { font-size: var(--t-xs); line-height: 1.4; }
  .ebr-linea-col .ebr-linea-caja { gap: 4px; }
  .ebr-estado-pagina { padding-top: 4px; padding-bottom: 4px; }
  .ebr-inicio { gap: 8px; }
  .ebr-estado-cabeza .ui-pestanas a { min-height: 26px; padding-top: 2px; padding-bottom: 1px; }
  .ebr-zona-servicio .ebr-salud { row-gap: 0; }
  .ebr-linea-col { padding-bottom: var(--e-2); gap: 6px; }
  .ebr-veredicto .ebr-titular h1 { font-size: 1.375rem; }
  .ebr-veredicto .ui-boton { min-height: 36px; }
  .ebr-estado-cabeza .ui-pestanas a { min-height: 32px; padding-top: 4px; padding-bottom: 3px; }
}
/* Entre 1200 y 1365 de ancho la columna de atencion cede 70 px: con 410, los dos botones del veredicto y la
   leyenda del mosaico se partian en dos lineas y la pagina dejaba de caber a 1200x620. */
@media (min-width: 900px) and (max-width: 1365.98px) {
  .ebr-inicio { grid-template-columns: minmax(0, 1fr) 340px; }
  .ebr-veredicto { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
/* Por debajo de 1366 de ancho y con poca altura, la frase que define «sin renovar» queda en su globo (el
   termino del titulo lo abre): con ella, a 1200x620 la linea y su desvio quedaban debajo del pliegue. */
@media screen and (min-width: 1200px) and (max-width: 1365.98px) and (min-height: 620px) and (max-height: 819px) {
  .ebr-edad > .ebr-definicion { display: none; }
  .ebr-edad .ebr-leyenda-edad { gap: 2px 10px; font-size: var(--t-2xs); }
  .ebr-edad .ebr-leyenda-edad li { gap: 4px; }
  .ebr-mas-antigua { font-size: var(--t-2xs); line-height: 1.35; }
  .ebr-linea-y-horas { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .ebr-salud { gap: 2px 12px; }
  .ebr-veredicto { padding-top: 5px; padding-bottom: 5px; }
  .ebr-edad { gap: 3px; }
  .ebr-mas-antigua { padding: 3px 8px; }
  .ebr-estado-pagina > * + * { margin-top: 6px; }
  .ebr-zona-servicio { padding-top: 3px; padding-bottom: 3px; }
  .ebr-linea-col { padding-bottom: 4px; }
}
@media (max-width: 899.98px) {
  .ebr-inicio { grid-template-columns: minmax(0, 1fr); grid-template-areas: "v" "a" "l" "s"; grid-template-rows: none; }
  .ebr-veredicto { grid-template-columns: minmax(0, 1fr); }
  .ebr-edad { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea-2); padding-top: var(--e-4); }
  .ebr-linea-y-horas { grid-template-columns: minmax(0, 1fr); }
  .ebr-horas { border-left: 0; border-top: 1px solid var(--linea-2); }
  .ebr-zona-servicio { display: block; padding: 0; }
  .ebr-zona-servicio h2 { padding: 12px var(--e-4); border-bottom: 1px solid var(--linea-2); }
  .ebr-salud { display: block; padding: 4px 0; }
  .ebr-salud li { padding: 9px var(--e-4); font-size: var(--t-s); color: var(--tinta); flex-wrap: wrap; }
  .ebr-salud li + li { border-top: 1px solid var(--linea-2); }
  .ebr-salud .valor { margin-left: auto; text-align: right; }
  .ebr-salud .ambito { flex-basis: 100%; padding-left: 15px; text-align: right; }
  .ebr-edad .ebr-leyenda-edad { display: grid; grid-template-columns: 1fr 1fr; }
  .ebr-reloj { margin-left: 0; }
}
/* EN EL MOVIL EL MOSAICO SE PLIEGA A SUS RECUENTOS (Astra, v3): cuarenta cuadros de 20 px no se leen en 358 px. */
@media (max-width: 639.98px) {
  .ebr-veredicto { padding: var(--e-4); gap: var(--e-4); }
  .ebr-titular .cifra { font-size: 2.5rem; }
  .ebr-titular h1 { font-size: 1.25rem; }
  .ebr-edad .ebr-guias, .ebr-edad .ebr-saltar { display: none; }
  .ebr-faltan .ui-boton { flex: 1 1 100%; }
  .ebr-lista > li { grid-template-columns: 32px minmax(0, 1fr); }
  .ebr-lista > li > .ui-boton { grid-column: 2; grid-row: 3; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .ebr-barras i { animation: none; } }
/* QUE UN PANEL SE DESPLAZA SE VE (rev-687-fable 1): sombra arriba o abajo mientras quede algo por ver, que
   desaparece al llegar al borde. Solo fondos, sin guion: el velo va pegado al contenido y la sombra al panel. */
.ebr-estado-pagina .ebr-desliza { background:
    linear-gradient(var(--caja) 30%, transparent) center top / 100% 28px no-repeat local,
    linear-gradient(transparent, var(--caja) 70%) center bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, color-mix(in srgb, var(--sombra) 28%, transparent), transparent) center top / 100% 10px no-repeat scroll,
    radial-gradient(farthest-side at 50% 100%, color-mix(in srgb, var(--sombra) 28%, transparent), transparent) center bottom / 100% 10px no-repeat scroll;
  background-color: var(--caja); }

/* ==========================================================================================
   ERRORES (INSUD-293, PR 5), de la maqueta 03 de la v4 con su nombre cambiado a `ebr-`. A la izquierda, la
   lista por grupo y causa; a la derecha, la ficha de la elegida en tres columnas: lo comprobado, las causas
   posibles y si se repite / que hacer / donde se paro y los datos. Las acciones a la derecha del titulo y el
   texto auxiliar a 13 px (`--t-xs`). En escritorio desde 1200x620 la pagina no se desplaza: lo hacen la lista
   y las columnas de la ficha, cada una en su panel. Por debajo de 900, una columna y la pagina se desplaza.
   ========================================================================================== */
.ebr-errores-cabeza { display: flex; align-items: baseline; gap: var(--e-2) var(--e-4); flex-wrap: wrap; }
.ebr-errores-cabeza h1 { margin: 0; font: 600 1.375rem/1.2 var(--f-texto); color: var(--tinta); }
.ebr-errores-cabeza p { margin: 0; flex: 1 1 30rem; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.45; }
.ebr-errores-pagina > .ui-aviso { margin-bottom: 0; }
.ebr-errores { grid-template-columns: 270px minmax(0, 1fr); align-items: start; }
.ebr-causas .ebr-desliza { padding-bottom: var(--e-2); }
/* LOS PANELES QUE SE DESPLAZAN CONTIENEN A SUS ABSOLUTOS: sin `position`, el texto `.solo-lector` de cada burbuja
   se posicionaba contra la pagina, fuera del panel, y alargaba el documento 1.000 px con la lista larga. */
.ebr-errores .ebr-desliza, .ebr-lista-causas a { position: relative; }
.ebr-causas .ebr-grupo-causas { display: block; margin: 0; padding: 12px var(--e-4) 6px; border-top: 1px solid var(--linea-2); font: 600 var(--t-2xs)/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.ebr-causas .ebr-grupo-causas:first-child { border-top: 0; }
.ebr-causas .ebr-grupo-causas .ui-termino { text-transform: none; letter-spacing: 0; font-size: var(--t-xs); }
.ebr-lista-causas { list-style: none; margin: 0; padding: 0; }
.ebr-lista-causas a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 10px var(--e-4); border-top: 1px solid var(--linea-2); text-decoration: none; color: var(--tinta); }
.ebr-lista-causas li:first-child a { border-top: 0; }
.ebr-lista-causas a:hover { background: var(--caja-2); }
.ebr-lista-causas a[aria-current="true"] { background: var(--elegida); box-shadow: inset 3px 0 0 var(--elegida-filo); }
.ebr-lista-causas a b { font-weight: 600; font-size: var(--t-s); line-height: 1.35; }
.ebr-lista-causas a .sub { grid-column: 1 / -1; font-size: var(--t-xs); line-height: 1.4; color: var(--tinta-2); }
.ebr-lista-causas code, .ebr-otras code { font-family: var(--f-codigo); }
.ebr-burbuja.parado { background: var(--parado-suave); color: var(--parado); }

.ebr-ficha-causa { display: grid; gap: var(--e-3); padding: var(--e-3) var(--e-5); min-width: 0; }
.ebr-ficha-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-4); align-items: start; }
.ebr-ficha-cabeza h2 { margin: 6px 0 0; font: 600 1.25rem/1.25 var(--f-texto); color: var(--tinta); }
.ebr-ficha-cabeza .ebr-peque { margin: 2px 0 0; line-height: 1.45; }
.ebr-acciones-ficha { display: flex; gap: 8px; align-items: flex-start; flex-wrap: nowrap; }
.ebr-acciones-ficha form { margin: 0; }
.ebr-con-razon { display: grid; gap: 4px; justify-items: start; max-width: 17rem; }
.ebr-razon { font-size: var(--t-xs); line-height: 1.4; color: var(--tinta-2); }
.ebr-pagina .ui-boton.ebr-boton-no, .ebr-pagina .ui-boton.ebr-boton-no:hover { background: var(--caja-2); border-color: var(--linea); color: var(--tinta-2); cursor: not-allowed; box-shadow: none; }

.ebr-ficha-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); align-items: start; }
.ebr-columna { display: grid; gap: var(--e-3); align-content: start; min-width: 0; }
.ebr-bloque-causa { display: grid; gap: 4px; padding-top: var(--e-2); border-top: 1px solid var(--linea-2); font-size: var(--t-xs); line-height: 1.5; color: var(--tinta); }
.ebr-bloque-causa > h3 { margin: 0; font: 600 var(--t-2xs)/1.3 var(--f-texto); text-transform: uppercase; letter-spacing: .06em; color: var(--tinta-3); }
.ebr-bloque-causa > p { margin: 0; }
.ebr-bloque-causa.destacado { border-top: 2px solid var(--marca); font-size: var(--t-s); }
.ebr-bloque-causa.destacado > h3 { color: var(--tinta); }
.ebr-pasos { counter-reset: paso; list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.ebr-pasos li { counter-increment: paso; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
.ebr-pasos li::before { content: counter(paso); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accion); color: var(--sobre-accion); font: 600 var(--t-2xs)/1 var(--f-texto); }
.ebr-aviso-info { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin: 0; padding: 8px 10px; border-radius: var(--r-m); border: 1px solid var(--linea-2); border-left: 3px solid var(--marca); background: var(--caja-2); }
.ebr-aviso-info .ebr-icono, .ebr-resolucion .ebr-icono { width: 16px; height: 16px; margin-top: 2px; }
.ebr-resolucion { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; margin: var(--e-2) 0 0; padding: 8px 10px; border-radius: var(--r-m); border: 1px solid var(--linea); background: var(--caja-2); font-size: var(--t-xs); }
.ebr-resolver { margin-top: var(--e-3); }
.ebr-resolver > summary { list-style: none; width: max-content; }
.ebr-resolver > summary::-webkit-details-marker { display: none; }
.ebr-resolver[open] > summary { margin-bottom: var(--e-2); }
.ebr-resolver form { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--caja-2); }
.ebr-resolver label { font-weight: 600; font-size: var(--t-xs); }
.ebr-resolver textarea { width: 100%; min-height: 3.5rem; resize: vertical; font: inherit; font-size: var(--t-s); padding: 6px 8px; border: 1px solid var(--linea); border-radius: var(--r-s, 6px); background: var(--caja); color: var(--tinta); }
.ebr-resolver .ebr-peque { margin: 0; }
.ebr-resolver .ui-boton { justify-self: start; }
.ebr-bloque-causa.destacado > .ebr-peque { margin: var(--e-2) 0 0; }

.ebr-donde { padding: 2px 6px 8px; border-radius: var(--r-m); background: var(--caja-2); border: 1px solid var(--linea-2); }
.ebr-donde > .ebr-rotulo { padding: 8px 4px 0; }
.ebr-donde .ebr-linea.compacta { padding-top: var(--e-2); }
.ebr-donde .ebr-linea .cifra:empty { display: none; }
/* En el movil la linea va en filas (sus reglas de 639 px): las flechas en horizontal solo desde 640. */
@media (min-width: 640px) {
  .ebr-donde .ebr-linea.compacta .ebr-estacion { padding: 0 2px; }
  .ebr-donde .ebr-linea.compacta .ebr-estacion-icono { width: 34px; height: 34px; }
  .ebr-donde .ebr-linea.compacta .ebr-estacion:not(:last-child)::after { top: 17px; left: calc(50% + 22px); right: calc(-50% + 22px); }
  .ebr-donde .ebr-linea.compacta .ebr-estacion:not(:last-child)::before { top: 12px; right: calc(-50% + 18px); }
  .ebr-donde .ebr-linea.compacta .nombre { font-size: var(--t-2xs); line-height: 1.25; hyphens: none; overflow-wrap: normal; }
}
.ebr-ficha-columnas .ebr-datos { gap: 4px var(--e-3); font-size: var(--t-xs); }
.ebr-ficha-columnas .ebr-datos dd { text-align: left; }
.ebr-terminal { margin: 2px 0 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--linea); background: var(--caja-2); font: 400 var(--t-xs)/1.5 var(--f-codigo); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tinta); }
.ebr-terminal code { font: inherit; }
.ebr-otras { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ebr-otras a { display: inline-block; padding: 3px 0; color: var(--enlace); }
.ebr-errores-vacio { padding: var(--e-4) var(--e-5); }
.ebr-errores-vacio h2 { margin: 0 0 var(--e-2); font: 600 var(--t-m)/1.3 var(--f-texto); }
.ebr-errores-vacio .ui-vacio { margin: 0; }

@media screen and (min-width: 1200px) and (min-height: 620px) {
  .ebr-ficha-causa { display: flex; flex-direction: column; min-height: 0; }
  .ebr-ficha-columnas.ebr-desliza { padding: 0 4px 4px 0; }
}
@media screen and (min-width: 1200px) and (min-height: 620px) and (max-height: 819px) {
  .ebr-errores-pagina { padding-top: 4px; padding-bottom: 6px; }
  .ebr-errores-pagina > * + * { margin-top: 8px; }
  .ebr-errores-cabeza h1 { font-size: 1.25rem; }
  .ebr-lista-causas a { padding-top: 8px; padding-bottom: 8px; }
  .ebr-ficha-causa { padding-top: var(--e-2); gap: var(--e-2); }
}
@media (min-width: 900px) and (max-width: 1365.98px) {
  .ebr-errores { grid-template-columns: 240px minmax(0, 1fr); }
  .ebr-ficha-cabeza { grid-template-columns: minmax(0, 1fr); }
  .ebr-acciones-ficha { flex-wrap: wrap; }
  .ebr-con-razon { max-width: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
}
/* «DONDE SE PARO» NO BAJA DE CINCO NOMBRES SIN PISARSE (rev-689-fable H3): a 1200 la tercera columna dejaba la
   linea en 250 px y «Componer y PDF/A» montaba sobre «Entregar». Entre 1200 y 1365 esa columna no baja de 20rem. */
@media (min-width: 1200px) and (max-width: 1365.98px) {
  .ebr-ficha-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(20rem, 1.1fr); }
}
@media (max-width: 1199.98px) {
  .ebr-ficha-columnas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ebr-ficha-columnas > .ebr-columna:nth-child(2) { grid-row: 1; grid-column: 1 / -1; }
}
@media (max-width: 899.98px) {
  .ebr-errores { grid-template-columns: minmax(0, 1fr); }
  .ebr-ficha-cabeza { grid-template-columns: minmax(0, 1fr); }
  .ebr-acciones-ficha { flex-wrap: wrap; }
  .ebr-con-razon { max-width: none; }
  .ebr-ficha-columnas { grid-template-columns: minmax(0, 1fr); }
  .ebr-ficha-causa { padding: var(--e-3) var(--e-4); }
}

/* ==========================================================================================
   COMPARAR (INSUD-293, PR 6), de la maqueta 04b de la v4: la versión anterior y la posterior a la altura de la
   ventana y la lista de cambios a la derecha, numerados, que se recorren y se imprimen. Recorrer y el zoom van en
   la cabecera, al lado del título. En escritorio desde 1200x620 la página no se desplaza: se desplazan la lista y,
   con zoom, las dos páginas, juntas. En el móvil solo la posterior con sus marcas y la lista debajo.
   ========================================================================================== */
.ebr-titulo-y-pestanas { display: flex; align-items: center; gap: var(--e-2) var(--e-5); flex-wrap: wrap; }
.ebr-titulo-y-pestanas h1 { margin: 0; }
.ebr-pestanas-en-linea.ui-pestanas { margin: 0; padding: 0; border-bottom: 0; }
.ebr-pestanas-en-linea.ui-pestanas a { min-height: 36px; padding: 6px 10px 5px; }
.ebr-recorrer { display: flex; gap: var(--e-2); flex-wrap: wrap; margin-left: auto; }
.ebr-recorrer[hidden], .ebr-segmentos[hidden] { display: none; }
.ebr-segmentos { display: inline-flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--r-m); padding: 2px; background: var(--caja-2); }
.ebr-segmentos button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; font: 600 var(--t-xs)/1 var(--f-texto); color: var(--tinta-2); cursor: pointer; white-space: nowrap; }
.ebr-segmentos button:hover:not(:disabled) { background: var(--caja); color: var(--tinta); }
.ebr-segmentos button[aria-pressed="true"] { background: var(--caja); color: var(--tinta); box-shadow: var(--sombra-caja); }
.ebr-segmentos button:disabled { color: var(--tinta-3); cursor: default; }
.ebr-segmentos button:focus-visible { outline: 3px solid var(--foco); outline-offset: -2px; }
.ebr-segmento-actual { padding: 0 12px; font: 600 var(--t-xs)/1 var(--f-texto); color: var(--tinta); white-space: nowrap; }
.ebr-comparar-cabeza .ebr-cabeza-texto > p { margin: 0; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.45; }

.ebr-comparar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 340px; gap: var(--e-3); align-items: start; }
.ebr-lado-version { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-l); background: var(--hundido); min-width: 0; }
.ebr-lado-version > header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--t-s); color: var(--tinta-2); }
.ebr-lado-version > header a { margin-left: auto; font-size: var(--t-xs); font-weight: 600; color: var(--enlace); }
.ebr-etiqueta { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 5px; background: var(--caja); border: 1px solid var(--linea); color: var(--tinta); font: 600 var(--t-xs)/1 var(--f-texto); white-space: nowrap; }
.ebr-lienzo { position: relative; display: grid; justify-items: center; align-items: start; overflow: auto; overscroll-behavior: contain; padding: 8px; min-height: 12rem; }
.ebr-lienzo:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.ebr-papel { position: relative; background: var(--papel); box-shadow: 0 1px 4px color-mix(in srgb, var(--sombra) 30%, transparent); flex: none; }
.ebr-papel > .ui-lienzo { display: block; width: 100%; height: 100%; }
/* LAS MARCAS NO TAPAN LO QUE MARCAN (rev-690-fable, alta 2), como el subrayador de la maqueta 04b: relleno
   translúcido que deja leer la línea, el trazo POR FUERA de la caja (`outline`) y el número fuera del texto, a la
   derecha. Con «Página entera» una línea mide 4 a 6 px, y un borde por dentro la convertía en una barra. */
.ebr-marca { position: absolute; background: color-mix(in srgb, var(--subrayador) 40%, transparent); outline: 1.5px solid var(--subrayador-filo); outline-offset: 1px; border-radius: 1px; pointer-events: none; }
.ebr-marca.dibujo { background: color-mix(in srgb, var(--subrayador) 18%, transparent); outline-style: dashed; }
.ebr-marca.actual { outline: 2px solid var(--subrayador-elegido); outline-offset: 2px; }
.ebr-marca-num { position: absolute; top: 50%; right: -24px; transform: translateY(-50%); min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; display: grid; place-items: center; background: var(--subrayador-elegido); color: var(--papel); font: 700 10px/1 var(--f-texto); }
.ebr-falta { margin: var(--e-4); }

.ebr-cambios-caja { min-width: 0; }
.ebr-cambios { list-style: none; margin: 0; padding: 0; }
.ebr-cambios > li { border-top: 1px solid var(--linea-2); }
.ebr-cambios > li:first-child { border-top: 0; }
.ebr-cambios button { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; align-items: start; width: 100%; padding: 9px var(--e-4); border: 0; background: transparent; text-align: left; font: inherit; color: var(--tinta); cursor: pointer; position: relative; }
.ebr-cambios button:hover { background: var(--caja-2); }
.ebr-cambios button[aria-current="true"] { background: var(--elegida); box-shadow: inset 3px 0 0 var(--elegida-filo); }
.ebr-cambios button:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
.ebr-num-cambio { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 700 var(--t-xs)/1 var(--f-texto); background: var(--neutro-suave); color: var(--tinta-2); }
.ebr-num-cambio.vigilar { background: var(--vigilar-suave); color: var(--vigilar-texto); }
.ebr-cambio-texto { display: grid; gap: 2px; min-width: 0; }
.ebr-cambio-texto b { font-size: var(--t-s); font-weight: 600; line-height: 1.35; }
.ebr-cambio-texto .sub { font-size: var(--t-xs); line-height: 1.4; color: var(--tinta-2); overflow-wrap: anywhere; }
.ebr-cambios q { quotes: "«" "»"; }
.ebr-cambios q.antes { text-decoration: line-through; color: var(--tinta-2); }
.ebr-cambios q.despues { font-weight: 600; color: var(--tinta); background: var(--vigilar-suave); padding: 0 3px; border-radius: 3px; }
.ebr-sin-cambios { padding: var(--e-3) var(--e-4); font-size: var(--t-s); color: var(--tinta-2); }
.ebr-cambios-nota { margin: 0; padding: 8px var(--e-4); border-top: 1px solid var(--linea-2); line-height: 1.45; }
.ebr-cambios-pie .ui-boton { justify-content: center; }
.ebr-impreso-titulo { display: none; }

@media screen and (min-width: 1200px) and (min-height: 620px) {
  .ebr-comparar.ebr-llena > * { min-height: 0; }
  .ebr-lado-version { display: flex; flex-direction: column; min-height: 0; }
  .ebr-lienzo { flex: 1 1 0; min-height: 0; }
  .ebr-cambios-caja.ebr-flexible > .ebr-cambios { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
}
@media screen and (min-width: 1200px) and (min-height: 620px) and (max-height: 819px) {
  .ebr-comparar-pagina { padding-top: 4px; padding-bottom: 6px; }
  .ebr-comparar-pagina > * + * { margin-top: 8px; }
  .ebr-comparar-cabeza .ebr-cabeza-texto > p { font-size: var(--t-xs); }
  .ebr-lado-version { padding: 6px; gap: 4px; }
  .ebr-lienzo { padding: 4px; }
  .ebr-cambios button { padding-top: 6px; padding-bottom: 6px; }
}
@media (min-width: 900px) and (max-width: 1365.98px) {
  .ebr-comparar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 290px; }
}
@media (max-width: 1199.98px) {
  .ebr-recorrer { margin-left: 0; }
}
@media (max-width: 899.98px) {
  .ebr-comparar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ebr-cambios-caja { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .ebr-comparar { grid-template-columns: minmax(0, 1fr); }
  .ebr-solo-escritorio { display: none !important; }
  /* EN EL MÓVIL LA LISTA VA PRIMERO (pliegue de 390x844): detrás de la página, el resumen de lo que cambia
     acababa a 962 px. Elegir un cambio baja a su página (`visor.mjs`). */
  .ebr-cambios-caja { grid-column: auto; order: -1; }
  .ebr-recorrer, .ebr-recorrer .ebr-segmentos { width: 100%; }
  .ebr-recorrer .ebr-segmentos { justify-content: space-between; }
}
/* IMPRIMIR ESTA LISTA: solo el título y la lista, entera y sin los botones. Es `@media print` de la propia página
   (diseño B5): no se genera ningún PDF en el servidor. */
@media print {
  .ebr-comparar-cabeza, .ebr-lado-version, .ebr-cambios-pie, .ebr-cambios-caja > .ebr-caja-cabeza { display: none !important; }
  .ebr-comparar { display: block; }
  .ebr-cambios-caja { border: 0; box-shadow: none; }
  .ebr-impreso-titulo { display: block; margin: 0 0 8pt; font: 600 13pt/1.3 var(--f-texto); color: var(--tinta); }
  .ebr-cambios { overflow: visible !important; }
  .ebr-cambios > li { break-inside: avoid; }
  .ebr-cambios button { color: var(--tinta); padding: 4pt 0; }
  .ebr-cambios button[aria-current="true"] { background: none; box-shadow: none; }
  .ebr-num-cambio { border: 1px solid var(--tinta); background: none !important; color: var(--tinta) !important; }
  .ebr-cambios q.despues { background: none; text-decoration: underline; }
}

/* ==========================================================================================
   DOCUMENTOS Y LA FICHA (INSUD-293, PR 7), de las maquetas 02 y 04 de la v4. Documentos: los filtros con su
   recuento a la izquierda, la lista en el centro y el elegido en el inspector, con la bandeja de «Imprimir
   juntos» abajo. La ficha: miniaturas, la pagina a la altura del visor y el inspector en dos columnas. En
   escritorio desde 1200x620 la pagina no se desplaza: lo hacen los filtros, la lista, las paginas y cada
   columna del inspector. En el movil los filtros salen con su boton y el inspector es una hoja inferior.
   ========================================================================================== */
.ebr-sub { display: block; font-size: var(--t-xs); line-height: 1.4; color: var(--tinta-2); }
.ebr-texto-vigilar { color: var(--vigilar-texto); }
.ebr-etiqueta.contorno { background: transparent; }
.ebr-documentos-cuerpo { display: contents; }
.ebr-documentos { grid-template-columns: 250px minmax(0, 1fr) 340px; align-items: start; }
.ebr-documentos.sin-inspector { grid-template-columns: 250px minmax(0, 1fr); }
.ebr-boton-filtros { display: none; }
.ebr-documentos-pagina > .ebr-cabeza { align-items: flex-end; }
.ebr-documentos-pagina .ebr-cabeza-texto > p { margin: 0; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.45; }
.ebr-filtros { padding: 6px 0 var(--e-2); }
.ebr-filtros fieldset { margin: 0; padding: 8px var(--e-4) 4px; border: 0; border-top: 1px solid var(--linea-2); }
.ebr-filtros fieldset:first-of-type { border-top: 0; }
.ebr-filtros legend { float: left; width: 100%; padding: 0 0 4px; }
.ebr-filtro { clear: both; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 32px; font-size: var(--t-s); color: var(--tinta); cursor: pointer; }
.ebr-filtro input { margin: 0; width: 16px; height: 16px; accent-color: var(--accion); }
.ebr-filtro .n { font: 600 var(--t-xs)/1 var(--f-cifra); color: var(--tinta-2); min-width: 2ch; text-align: right; }
.ebr-filtro:has(input:checked) { font-weight: 600; }
.ebr-aplicar { margin: 8px var(--e-4) 4px; }
.ebr-filtros-caja .ebr-caja-cabeza a.extremo { color: var(--enlace); font-weight: 600; }
.ebr-herramientas { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; padding: 8px var(--e-4); border-bottom: 1px solid var(--linea-2); }
.ebr-buscar { flex: 1 1 14rem; min-width: 0; }
.ebr-buscar input { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--caja); color: var(--tinta); font: inherit; font-size: var(--t-s); }
.ebr-segmentos-enlaces { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--r-m); padding: 2px; background: var(--caja-2); }
.ebr-segmentos-enlaces a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 6px; font: 600 var(--t-xs)/1 var(--f-texto); color: var(--tinta-2); text-decoration: none; }
.ebr-segmentos-enlaces a[aria-current="true"] { background: var(--caja); color: var(--tinta); box-shadow: var(--sombra-caja); }
.ebr-tabla-documentos { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.ebr-tabla-documentos th { position: sticky; top: 0; z-index: 1; background: var(--caja-2); text-align: left; font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta-2); padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.ebr-tabla-documentos td { padding: 8px 10px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.ebr-tabla-documentos td:first-child, .ebr-tabla-documentos th:first-child { width: 36px; padding-right: 0; }
.ebr-tabla-documentos .num { text-align: right; font-variant-numeric: tabular-nums; }
.ebr-tabla-documentos tr.elegida td { background: var(--elegida); }
.ebr-tabla-documentos tr.elegida td:first-child { box-shadow: inset 3px 0 0 var(--elegida-filo); }
.ebr-tabla-documentos input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accion); }
/* Dos enlaces apilados en la celda: cada uno con su objetivo de 24 px (WCAG 2.5.8). */
.ebr-titulo-fila { display: flex; align-items: center; min-height: 24px; font-weight: 600; color: var(--tinta); text-decoration: none; }
.ebr-titulo-fila:hover { text-decoration: underline; }
.ebr-elegir { display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; min-height: 24px; color: var(--tinta-2); text-decoration: none; }
.ebr-elegir:hover { color: var(--enlace); text-decoration: underline; }
.ebr-elegir code { font-family: var(--f-codigo); font-size: var(--t-xs); }
.ebr-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ebr-legajos { padding: var(--e-3) var(--e-4); }
.ebr-lista-caja > .ebr-caja-pie { margin: 0; }
.ebr-inspector-documento .ebr-caja-cabeza h2 { min-width: 0; overflow-wrap: anywhere; }
.ebr-inspector-documento .ebr-caja-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); align-content: start; }
/* La hoja a una altura fija y su ancho por proporcion, para que «Abrir» e «Imprimir» se vean sin desplazar. */
.ebr-inspector-documento .ebr-vista-hoja { display: flex; justify-content: center; padding: 12px; min-width: 0; overflow: hidden; }
.ebr-inspector-documento .ebr-hoja { height: clamp(150px, 26vh, 280px); width: auto; flex: none; }
.ebr-cerrar-hoja { display: none; }
.ebr-versiones { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-s); }
.ebr-versiones li { padding-left: 12px; border-left: 2px solid var(--linea); }
.ebr-versiones li.actual { border-left-color: var(--elegida-filo); }
.ebr-bandeja { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--e-3); align-items: center; padding: 8px var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--caja); box-shadow: var(--sombra-caja); }
.ebr-bandeja .cifra { font: 600 1.75rem/1 var(--f-cifra); color: var(--marca-texto); min-width: 2ch; text-align: center; }
.ebr-bandeja b { font-size: var(--t-s); }
.ebr-orden { font-size: var(--t-xs); }
.ebr-orden summary { cursor: pointer; color: var(--enlace); display: inline-block; }
.ebr-orden ol { margin: 4px 0 0; padding-left: var(--e-5); max-height: 8rem; overflow: auto; }

.ebr-meta-doc { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-s); color: var(--tinta-2); }
.ebr-visor { grid-template-columns: minmax(0, 1fr) 640px; display: grid; gap: var(--e-3); align-items: start; }
.ebr-visor-caja { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--e-3); min-width: 0; padding: 0; border: 0; background: none; }
.ebr-visor-caja .ui-miniaturas { position: static; max-height: none; padding: 4px; align-content: start; }
.ebr-visor-caja .ui-miniatura > .ui-lienzo { width: 72px; }
/* Sin miniaturas (PDF.js no pudo, o una sola pagina) la mesa ocupa las dos columnas: si no, cae en la de 96 px. */
.ebr-visor-caja > .ui-miniaturas[hidden] + .ebr-visor-mesa { grid-column: 1 / -1; }
.ebr-visor-mesa { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--r-l); background: var(--hundido); }
.ebr-visor-barra { display: flex; align-items: center; gap: var(--e-2) var(--e-3); flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--linea-2); }
.ebr-pag { font-size: var(--t-s); color: var(--tinta-2); }
.ebr-anterior-siguiente { margin-left: auto; display: flex; gap: var(--e-3); flex-wrap: wrap; font-size: var(--t-xs); }
.ebr-anterior-siguiente a { color: var(--enlace); font-weight: 600; }
.ebr-visor-paginas { padding: var(--e-3); gap: var(--e-3); justify-items: center; }
.ebr-visor-paginas > .ui-pagina-pdf { width: 100%; max-width: calc(var(--zoom, 1) * 100%); }
.ebr-inspector-ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-3); align-items: start; min-width: 0; }
.ebr-inspector-ficha .ebr-caja + .ebr-caja { margin-top: var(--e-3); }
.ebr-antes-de-imprimir { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; gap: var(--e-3); font-size: var(--t-s); line-height: 1.45; }
.ebr-antes-de-imprimir li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.ebr-antes-de-imprimir li > .ebr-icono { width: 28px; height: 28px; padding: 5px; border-radius: 8px; background: var(--neutro-suave); color: var(--tinta-2); }
.ebr-antes-de-imprimir li.suyo > .ebr-icono { background: var(--neutro-suave); color: var(--tinta-2); }
.ebr-antes-de-imprimir li.ok > .ebr-icono { background: var(--ok-suave); color: var(--ok); }
.ebr-antes-de-imprimir li.mal > .ebr-icono { background: var(--parado-suave); color: var(--parado); }
.ebr-antes-de-imprimir li.vigilar > .ebr-icono { background: var(--vigilar-suave); color: var(--vigilar); }
.ebr-inspector-ficha .ebr-peque { margin: var(--e-2) 0 0; }
/* En las columnas estrechas, el nombre encima y el valor debajo, a lo ancho: un identificador o una frase no se
   parten en una columna de un tercio. */
.ebr-inspector-ficha .ebr-datos, .ebr-inspector-documento .ebr-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ebr-inspector-ficha .ebr-datos dd, .ebr-inspector-documento .ebr-datos dd { text-align: left; margin-bottom: 6px; }
.ebr-inspector-ficha .ebr-datos + .ebr-rotulo, .ebr-inspector-documento .ebr-datos + .ebr-rotulo { margin-top: var(--e-3); }

@media screen and (min-width: 1200px) and (min-height: 620px) {
  .ebr-documentos-pagina > .ebr-documentos-cuerpo + * { margin-top: 0; }
  /* El formulario de la bandeja es `display: contents`: la rejilla cuelga de la pagina en la caja, no en el DOM. */
  .ebr-documentos-cuerpo > .ebr-llena { flex: 1 1 0; min-height: 0; }
  .ebr-documentos-cuerpo > .ebr-llena + .ebr-bandeja { margin-top: var(--e-3); }
  .ebr-documentos.ebr-llena, .ebr-visor.ebr-llena { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ebr-documentos-pagina .ebr-bandeja { position: static; flex-shrink: 0; }
  .ebr-visor-caja, .ebr-visor-caja .ui-miniaturas, .ebr-inspector-ficha, .ebr-inspector-ficha > .ebr-pila { min-height: 0; }
  .ebr-inspector-ficha { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ebr-inspector-ficha > .ebr-pila { display: block; padding: 0 4px 4px 0; }
  .ebr-visor-caja { grid-template-rows: minmax(0, 1fr); }
  .ebr-visor-paginas { flex: 1 1 0; min-height: 0; }
  .ebr-visor-paginas > .ui-marco-pdf { height: 100%; min-height: 0; }
  /* «PAGINA ENTERA»: cada pagina a la altura del panel, y el zoom la agranda desde ahi. */
  .ebr-visor-paginas > .ui-pagina-pdf { width: auto; height: calc((var(--alto-panel, 100%)) * var(--zoom, 1)); max-width: none; }
}
@media screen and (min-width: 1200px) and (min-height: 620px) and (max-height: 819px) {
  .ebr-documentos-pagina, .ebr-ficha-pagina { padding-top: 4px; padding-bottom: 6px; }
  .ebr-documentos-pagina > * + *, .ebr-ficha-pagina > * + * { margin-top: 8px; }
  .ebr-filtro { min-height: 28px; }
  .ebr-tabla-documentos td { padding-top: 6px; padding-bottom: 6px; }
}
@media (min-width: 900px) and (max-width: 1365.98px) {
  .ebr-documentos { grid-template-columns: 220px minmax(0, 1fr) 300px; }
  .ebr-documentos.sin-inspector { grid-template-columns: 220px minmax(0, 1fr); }
  .ebr-visor { grid-template-columns: minmax(0, 1fr) 520px; }
  .ebr-inspector-ficha { grid-template-columns: minmax(0, 1fr); }
  .ebr-inspector-ficha > .ebr-pila + .ebr-pila { display: none; }
}
@media (min-width: 1200px) and (max-width: 1365.98px) {
  /* Con una columna, el inspector apila «antes de imprimir» y la cadena en la misma columna desplazable. */
  .ebr-inspector-ficha > .ebr-pila + .ebr-pila { display: block; }
  /* La primera columna cede alto y se desplaza si no cabe: con `auto` se comia la pantalla y dejaba la segunda
     a cero, fuera de la vista y sin desplazamiento. */
  .ebr-inspector-ficha { grid-template-rows: minmax(0, max-content) minmax(12rem, 1fr); }
}
@media (max-width: 1199.98px) {
  .ebr-visor { grid-template-columns: minmax(0, 1fr); }
  .ebr-inspector-ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ebr-inspector-ficha > .ebr-pila + .ebr-pila { display: block; }
  .ebr-visor-paginas { max-height: 80vh; overflow: auto; }
}
@media (max-width: 899.98px) {
  .ebr-documentos { grid-template-columns: minmax(0, 1fr); }
  .ebr-filtros-caja[data-plegados] { display: none; }
  .ebr-boton-filtros:not([hidden]) { display: inline-flex; }
  /* EN EL MOVIL, «ANTES DE IMPRIMIR» VA ENCIMA DE LAS PAGINAS, con «Imprimir» a la vista sin desplazar, y la
     cadena y los datos debajo de ellas. */
  .ebr-visor { display: flex; flex-direction: column; }
  .ebr-inspector-ficha { display: contents; }
  .ebr-inspector-ficha > .ebr-pila:first-child { order: -1; }
  .ebr-inspector-ficha > .ebr-pila + .ebr-pila { order: 1; }
  /* EL INSPECTOR, HOJA INFERIOR: solo cuando se elige un documento, encima de la lista y con su cierre. */
  .ebr-inspector-documento { display: none; }
  .ebr-inspector-documento.abierto { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-height: 78vh; border-radius: var(--r-l) var(--r-l) 0 0; box-shadow: 0 -12px 32px color-mix(in srgb, var(--sombra) 35%, transparent); }
  .ebr-inspector-documento.abierto .ebr-caja-cuerpo { overflow: auto; }
  .ebr-cerrar-hoja { display: inline-flex; margin-left: auto; min-height: 32px; align-items: center; font-weight: 600; color: var(--enlace); }
}
@media (max-width: 639.98px) {
  .ebr-ocultable, .ebr-ocultar-movil { display: none; }
  .ebr-visor-caja { grid-template-columns: minmax(0, 1fr); }
  .ebr-visor-caja .ui-miniaturas { display: none; }
  .ebr-bandeja { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ebr-tabla-documentos thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ebr-tabla-documentos, .ebr-tabla-documentos tbody, .ebr-tabla-documentos tr { display: block; }
  .ebr-tabla-documentos tr { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 8px; padding: 8px var(--e-3); border-bottom: 1px solid var(--linea-2); }
  .ebr-tabla-documentos td { display: block; padding: 0; border: 0; }
  .ebr-tabla-documentos td:first-child { grid-row: 1 / 3; }
  .ebr-tabla-documentos td.ebr-ocultable { display: none; }
}
@media print { .ebr-bandeja, .ebr-filtros-caja, .ebr-inspector-documento { display: none !important; } }

/* ==========================================================================================
   PREPARAR LA IMPRESION DE UNA PLANTA (INSUD-293, PR 8), de la maqueta 09: las tandas, lo que hay que revisar antes
   y la relacion para el papel. En escritorio desde 1200x620 la pagina no se desplaza: lo hacen las tandas, la lista
   de lo que revisar y la columna de la derecha. En el movil, «Revisa antes de imprimir» va primero. En papel solo
   sale la relacion.
   ========================================================================================== */
.ebr-simulacro { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .85fr); gap: var(--e-3); align-items: start; }
.ebr-simulacro .ebr-caja-cuerpo { padding: var(--e-3) var(--e-4); }
.ebr-tandas { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; gap: var(--e-3); }
.ebr-tandas > li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--e-4); align-items: center; padding: 14px var(--e-4); border: 1px solid var(--linea); border-radius: var(--r-l); background: var(--caja); }
.ebr-tandas > li > form { margin: 0; }
.ebr-tanda-n { width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: var(--caja-2); border: 1px solid var(--linea); font: 700 1.75rem/1 var(--f-cifra); color: var(--tinta); }
.ebr-tandas b { font-weight: 600; font-size: var(--t-s); }
.ebr-entero { white-space: nowrap; }
/* El parrafo de la tanda se envuelve normal (sin `pretty`, que bajaba «de nuevo» sola) y el ultimo simulacro va aparte. */
.ebr-simulacro .ebr-peque { text-wrap: wrap; }
.ebr-simulacro .ebr-ultimo-simulacro { margin-top: var(--e-3); }
.ebr-fila-tanda { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; margin-top: 6px; }
.ebr-pila-hojas { display: inline-grid; grid-template-columns: repeat(20, 6px); gap: 1px; align-items: end; height: 22px; }
.ebr-pila-hojas i { display: block; height: 22px; background: var(--papel); border: 1px solid var(--tinta-4); border-radius: 1px; }
.ebr-pila-hojas i.aviso { border-color: var(--vigilar); background: var(--vigilar-suave); height: 16px; }
.ebr-simulacro .ebr-lista > li { padding: 10px var(--e-4); }
.ebr-relacion { display: none; }
@media screen and (min-width: 1200px) and (min-height: 620px) {
  .ebr-simulacro { align-items: stretch; }
  .ebr-simulacro > .ebr-caja { min-height: 0; }
  .ebr-simulacro > .ebr-pila { min-height: 0; display: grid; align-content: start; gap: var(--e-3); }
}
@media (min-width: 900px) and (max-width: 1199.98px) {
  .ebr-simulacro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ebr-simulacro > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 899.98px) {
  .ebr-simulacro { grid-template-columns: minmax(0, 1fr); }
  .ebr-primero-en-movil { order: -1; }
}
@media (max-width: 639.98px) {
  .ebr-tandas > li { grid-template-columns: 44px minmax(0, 1fr); }
  .ebr-tandas > li > form { grid-column: 1 / -1; }
  .ebr-tandas > li > form .ui-boton { width: 100%; }
  .ebr-tanda-n { width: 44px; height: 44px; font-size: 1.375rem; }
  .ebr-pila-hojas { display: none; }
}
@media print {
  .ebr-preparar-pagina > :not(.ebr-relacion) { display: none !important; }
  .ebr-relacion { display: block; font-size: 10pt; color: var(--tinta); }
  .ebr-relacion h2 { font-size: 14pt; margin: 0 0 8pt; }
  .ebr-relacion table { width: 100%; border-collapse: collapse; }
  .ebr-relacion th, .ebr-relacion td { border: 1px solid var(--tinta); padding: 3pt 4pt; text-align: left; vertical-align: top; }
  .ebr-relacion thead { display: table-header-group; }
  .ebr-relacion tr { break-inside: avoid; }
  .ebr-relacion td.casilla { width: 18mm; }
  .ebr-relacion code { font-family: var(--f-codigo); font-size: 8.5pt; }
}

/* ==========================================================================================
   BUCLES (INSUD-293, PR 9), de la maqueta 05: la tabla de bucles de una planta a la izquierda y el bucle elegido
   en dos columnas, la escalera del origen y el cambio. En escritorio la pagina no se desplaza: lo hacen la tabla,
   la escalera y los campos del cambio, con «Guardar» y «Cancelar» siempre a la vista bajo el panel.
   ========================================================================================== */
.ebr-bucles { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); align-items: start; }
.ebr-bucles-pagina .ebr-cabeza-texto > p { margin: 0; font-size: var(--t-s); color: var(--tinta-2); line-height: 1.45; }
.ebr-bucles .ebr-herramientas { gap: 6px var(--e-2); }
.ebr-cuenta-bucles { order: 3; flex-basis: 100%; margin: 0; }
.ebr-tabla-bucles { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.ebr-tabla-bucles thead th { position: sticky; top: 0; z-index: 1; background: var(--caja-2); text-align: left; font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta-2); padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.ebr-tabla-bucles td { padding: 7px 10px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.ebr-tabla-bucles .num { text-align: left; white-space: nowrap; }
.ebr-tabla-bucles tr.elegida td { background: var(--elegida); }
.ebr-tabla-bucles tr.elegida td:first-child { box-shadow: inset 3px 0 0 var(--elegida-filo); }
.ebr-tabla-bucles .ebr-sub code { font-family: var(--f-codigo); overflow-wrap: anywhere; }
.ebr-grupo-mbr th { background: var(--caja-2); text-align: left; font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta-2); padding: 6px 10px; border-bottom: 1px solid var(--linea-2); overflow-wrap: anywhere; }
.ebr-veces { display: inline-flex; align-items: center; gap: 8px; }
.ebr-cifra-fila { font: 600 1.25rem/1 var(--f-cifra); color: var(--tinta); }
.ebr-vueltas { display: inline-flex; gap: 2px; align-items: end; flex-wrap: nowrap; }
.ebr-vueltas i { width: 6px; height: 12px; border-radius: 2px; background: var(--caja); border: 1px solid var(--tinta-3); }
.ebr-candado { display: inline-flex; align-items: center; gap: 4px; color: var(--tinta-3); font-size: var(--t-xs); margin: 0; }
.ebr-candado .ebr-icono { width: 14px; height: 14px; }
.ebr-bucle-elegido .ebr-caja-cabeza h2 { min-width: 0; overflow-wrap: anywhere; }
.ebr-bucle-dos { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.ebr-efectivo { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ebr-efectivo .cifra { font: 600 2.5rem/1 var(--f-cifra); color: var(--marca-texto); }
.ebr-escalera-detalle summary { cursor: pointer; font-weight: 600; font-size: var(--t-s); margin-bottom: 6px; padding: 3px 0; }
.ebr-escalera-detalle p { font-size: var(--t-xs); color: var(--tinta-2); margin: 0 0 8px; line-height: 1.45; }
.ebr-escalera { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* `position: relative` para que el texto solo para lector de cada escalon se quede dentro del panel que se
   desplaza: sin ella se media contra la pagina y la alargaba 43 px a 1200x620. */
.ebr-escalera li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; font-size: var(--t-xs); color: var(--tinta-2); border: 1px solid transparent; }
.ebr-escalera .n-escalon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--tinta-4); font: 600 10px/1 var(--f-texto); color: var(--tinta-2); }
.ebr-escalera li.manda { background: var(--elegida); border-color: var(--elegida-filo); color: var(--tinta); font-weight: 600; font-size: var(--t-s); }
.ebr-escalera li.manda .n-escalon { background: var(--accion); border-color: var(--accion); color: var(--sobre-accion); }
.ebr-escalera li.debajo { background: var(--caja-2); }
.ebr-escalera li.debajo .valor { text-decoration: line-through; }
.ebr-escalera .valor { font-weight: 600; color: var(--tinta); }
.ebr-escalera .tenue, .ebr-bucles-pagina .tenue { color: var(--tinta-3); font-weight: 400; }
.ebr-formulario-cambio { display: grid; gap: 8px; align-content: start; border-left: 1px solid var(--linea-2); padding-left: var(--e-5); min-width: 0; }
.ebr-formulario-cambio .ui-campo { display: grid; gap: 4px; margin: 0; }
.ebr-formulario-cambio .ui-campo label { font-weight: 600; font-size: var(--t-s); }
.ebr-formulario-cambio textarea { width: 100%; min-height: 48px; padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--r-m); font: inherit; font-size: var(--t-s); background: var(--caja); color: var(--tinta); resize: vertical; }
.ebr-sin-cambio { gap: 6px; }
.ebr-campos-cambio { display: grid; gap: 10px; align-content: start; }
.ebr-veces-cambio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ebr-paso-a-paso { display: inline-flex; align-items: center; border: 1px solid var(--borde-campo); border-radius: var(--r-m); overflow: hidden; background: var(--caja); }
.ebr-paso-a-paso button { width: 36px; height: 36px; border: 0; background: var(--caja-2); color: var(--tinta); font-size: 18px; cursor: pointer; }
.ebr-paso-a-paso input { width: 4.5rem; height: 36px; border: 0; text-align: center; font: 600 1.25rem/1 var(--f-cifra); background: var(--caja); color: var(--tinta); }
.ebr-vista-previa { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-radius: var(--r-m); background: var(--hundido); }
.ebr-vueltas-previa { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; }
.ebr-vueltas-previa i { width: 22px; height: 30px; border-radius: 2px; background: var(--caja); border: 1px solid var(--tinta-3); box-shadow: 0 1px 2px color-mix(in srgb, var(--sombra) 15%, transparent); }
.ebr-vueltas-previa i.nueva { outline: 2px dashed var(--accion); outline-offset: 2px; }
.ebr-vueltas-previa i.sobra { opacity: .35; border-style: dashed; }
.ebr-alcance { flex-basis: 100%; font-size: var(--t-xs); color: var(--tinta-2); display: grid; gap: 4px; line-height: 1.45; }
.ebr-alcance p { margin: 0; }
.ebr-alcance ul { margin: 0; padding-left: 18px; }
.ebr-formulario-cambio .ebr-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; margin: 0; }
@media screen and (min-width: 1200px) and (min-height: 620px) {
  .ebr-bucles.ebr-llena { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ebr-bucle-elegido .ebr-bucle-dos { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ebr-bucle-dos > .ebr-desliza, .ebr-formulario-cambio { min-height: 0; }
  .ebr-formulario-cambio { display: flex; flex-direction: column; }
  .ebr-formulario-cambio > .ebr-acciones { flex: none; padding-top: 4px; }
}
@media screen and (min-width: 1200px) and (min-height: 620px) and (max-height: 819px) {
  .ebr-bucles-pagina { padding-top: 4px; padding-bottom: 6px; }
  .ebr-bucles-pagina > * + * { margin-top: 8px; }
  .ebr-escalera li { padding-top: 3px; padding-bottom: 3px; }
  .ebr-efectivo .cifra { font-size: 2rem; }
}
@media (max-width: 1199.98px) {
  .ebr-bucles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  .ebr-bucle-dos { grid-template-columns: minmax(0, 1fr); }
  .ebr-formulario-cambio { border-left: 0; padding-left: 0; border-top: 1px solid var(--linea-2); padding-top: var(--e-3); }
  .ebr-tabla-bucles thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ebr-tabla-bucles, .ebr-tabla-bucles tbody, .ebr-tabla-bucles tr { display: block; }
  .ebr-tabla-bucles tr[data-bucle] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 8px var(--e-3); border-bottom: 1px solid var(--linea-2); }
  .ebr-tabla-bucles td { display: block; padding: 0; border: 0; }
  .ebr-tabla-bucles td:last-child { grid-column: 1 / -1; }
  .ebr-tabla-bucles tr.elegida { background: var(--elegida); box-shadow: inset 3px 0 0 var(--elegida-filo); }
  .ebr-tabla-bucles tr.elegida td, .ebr-tabla-bucles tr.elegida td:first-child { background: none; box-shadow: none; }
  .ebr-grupo-mbr, .ebr-grupo-mbr th { display: block; }
}

/* ==========================================================================================
   LO HEREDADO (INSUD-293, PR 10): Ejecuciones, Configuracion General y Auditoria con las piezas de las demas
   pantallas, y «Ir a» en la barra. En escritorio la pagina no se desplaza: lo hacen la tabla y la columna de la
   derecha. Filas de unos 40 px.
   ========================================================================================== */
.ebr-ejecuciones { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
.ebr-config { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.ebr-tabla-ejecuciones, .ebr-tabla-config, .ebr-tabla-auditoria { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.ebr-tabla-ejecuciones thead th, .ebr-tabla-config thead th, .ebr-tabla-auditoria thead th { position: sticky; top: 0; z-index: 1; background: var(--caja-2); text-align: left; font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta-2); padding: 8px 10px; border-bottom: 1px solid var(--linea); }
.ebr-tabla-ejecuciones td, .ebr-tabla-config td, .ebr-tabla-auditoria td { padding: 7px 10px; border-bottom: 1px solid var(--linea-2); vertical-align: top; }
.ebr-tabla-ejecuciones td { vertical-align: middle; height: 40px; }
.ebr-tabla-ejecuciones .num, .ebr-tabla-auditoria .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ebr-tabla-ejecuciones tr.elegida td, .ebr-tabla-config tr.elegida td { background: var(--elegida); }
.ebr-tabla-ejecuciones tr.elegida td:first-child, .ebr-tabla-config tr.elegida td:first-child { box-shadow: inset 3px 0 0 var(--elegida-filo); }
/* Columnas fijas: una ruta larga de la planta no ensancha «Valor» hasta estrujar el nombre del campo. */
.ebr-tabla-config { table-layout: fixed; }
.ebr-tabla-config thead th:first-child { width: 40%; }
.ebr-tabla-config thead th:last-child { width: 24%; }
.ebr-tabla-config td { overflow-wrap: anywhere; }
/* En la columna de la derecha, el nombre encima y el valor debajo, como en la ficha de un documento. */
.ebr-config .ebr-datos, .ebr-ejecuciones .ebr-datos { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.ebr-config .ebr-datos dd, .ebr-ejecuciones .ebr-datos dd { text-align: left; margin-bottom: 6px; }
.ebr-tabla-config code.ebr-sub { font-family: var(--f-codigo); overflow-wrap: anywhere; color: var(--tinta-3); }
.ebr-grupo-tabla th { background: var(--caja-2); text-align: left; font: 600 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta-2); padding: 6px 10px; border-bottom: 1px solid var(--linea-2); }
/* Solo antes y despues se parten en cualquier punto: un valor largo (el JSON de una descarga de tanda) estrechaba las
   demas columnas y partia «simulacro.tanda» o «Simulacro» a mitad de palabra. */
.ebr-tabla-auditoria td { overflow-wrap: break-word; }
.ebr-tabla-auditoria td[data-rotulo="Antes"], .ebr-tabla-auditoria td[data-rotulo="Después"] { overflow-wrap: anywhere; }
.ebr-tabla-auditoria td code { white-space: nowrap; }
/* El usuario y la hora no se parten: «admin» salia «admi / n» en la columna estrecha, en pantalla y en papel. */
.ebr-tabla-auditoria td:nth-child(2), .ebr-tabla-auditoria td.ebr-quien { white-space: nowrap; overflow-wrap: normal; }
.ebr-tabla-auditoria code { font-family: var(--f-codigo); font-size: var(--t-xs); }
.ebr-huellas { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ebr-huellas li { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ebr-huellas code { font-family: var(--f-codigo); font-size: var(--t-xs); }
.ebr-copiar { min-height: 24px; padding: 0 8px; border: 1px solid var(--borde-campo); border-radius: 6px; background: var(--caja); color: var(--enlace); font: 600 var(--t-xs)/1 var(--f-texto); cursor: pointer; }
.ebr-formulario-config { display: grid; gap: 8px; }
.ebr-formulario-config .ui-campo { display: grid; gap: 4px; margin: 0; }
.ebr-formulario-config .ui-campo label { font-weight: 600; font-size: var(--t-s); }
.ebr-formulario-config input, .ebr-formulario-config textarea { width: 100%; min-height: 36px; padding: 6px 10px; border: 1px solid var(--borde-campo); border-radius: var(--r-m); font: inherit; font-size: var(--t-s); background: var(--caja); color: var(--tinta); }
.ebr-formulario-config .ebr-acciones { display: flex; gap: var(--e-2); flex-wrap: wrap; margin: 0; }
.ebr-config-pagina .tenue { color: var(--tinta-3); font-weight: 400; }
.ebr-lista-codigos { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: var(--t-xs); }
.ebr-filtro-auditoria { gap: 6px var(--e-3); }
.ebr-filtro-auditoria label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); font-weight: 600; }
.ebr-filtro-auditoria input, .ebr-filtro-auditoria select { min-height: 34px; padding: 4px 8px; border: 1px solid var(--borde-campo); border-radius: var(--r-m); background: var(--caja); color: var(--tinta); font: inherit; font-weight: 400; max-width: 16rem; }
.ebr-quitar { font-size: var(--t-s); font-weight: 600; color: var(--enlace); }
.ebr-cuenta-auditoria { flex-basis: 100%; margin: 0; font: 400 var(--t-xs)/1.3 var(--f-texto); color: var(--tinta-2); }
.ebr-solo-papel { display: none; }
.ebr-solo-movil { display: none; }
@media screen and (min-width: 1200px) and (min-height: 620px) {
  .ebr-ejecuciones.ebr-llena, .ebr-config.ebr-llena { grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .ebr-auditoria-pagina > .ebr-auditoria-caja { flex: 1 1 0; min-height: 0; }
}
@media (max-width: 1199.98px) {
  .ebr-ejecuciones, .ebr-config { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639.98px) {
  .ebr-tabla-ejecuciones thead, .ebr-tabla-config thead, .ebr-tabla-auditoria thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ebr-tabla-ejecuciones, .ebr-tabla-ejecuciones tbody, .ebr-tabla-ejecuciones tr, .ebr-tabla-config, .ebr-tabla-config tbody, .ebr-tabla-config tr,
  .ebr-tabla-auditoria, .ebr-tabla-auditoria tbody, .ebr-tabla-auditoria tr { display: block; }
  .ebr-tabla-ejecuciones tr, .ebr-tabla-config tr:not(.ebr-grupo-tabla), .ebr-tabla-auditoria tr { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 8px var(--e-3); border-bottom: 1px solid var(--linea-2); }
  .ebr-tabla-ejecuciones td, .ebr-tabla-config td, .ebr-tabla-auditoria td { display: block; padding: 0; border: 0; height: auto; }
  .ebr-tabla-ejecuciones td:first-child, .ebr-tabla-config td:first-child { flex-basis: 100%; }
  .ebr-tabla-ejecuciones tr.elegida, .ebr-tabla-config tr.elegida { background: var(--elegida); box-shadow: inset 3px 0 0 var(--elegida-filo); }
  .ebr-tabla-ejecuciones tr.elegida td, .ebr-tabla-config tr.elegida td, .ebr-tabla-ejecuciones tr.elegida td:first-child, .ebr-tabla-config tr.elegida td:first-child { background: none; box-shadow: none; }
  .ebr-grupo-tabla, .ebr-grupo-tabla th { display: block; }
  .ebr-tabla-auditoria td:nth-child(2) { white-space: normal; }
  /* Sin cabecera, antes, despues y motivo llevan su rotulo delante y cada uno su linea. */
  .ebr-tabla-auditoria td[data-rotulo] { flex-basis: 100%; }
  .ebr-tabla-auditoria td[data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--tinta-2); }
  .ebr-solo-movil { display: inline; }
}
@media print {
  .ebr-filtro-auditoria label, .ebr-filtro-auditoria button, .ebr-quitar, .ebr-auditoria-pagina .ebr-cabeza-acciones { display: none !important; }
  .ebr-solo-papel { display: inline; }
  .ebr-auditoria-pagina .ebr-desliza { overflow: visible !important; }
  .ebr-tabla-auditoria thead th { position: static; }
}