/* La hoja unica de la interfaz de ebr2pdf (diseno T42, INSUD-293). La cargan el monitor del
   contenedor y la demo, por el mismo marco (`paginas/marco.html`): lo que cambia entre los dos es el
   envoltorio, nunca un componente.

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

   CONVIVE CON LAS HOJAS ANTERIORES mientras las pantallas se migran (PR 3 y siguientes del plan): se
   carga ANTES que ellas, asi que en lo que se pisan manda la vieja, y el marco usa clases propias
   (`marco-*`) para que ninguna regla antigua le alcance. */

@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: "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: el sistema «industrial moderno» de las aplicaciones de la casa (el de la pantalla
   de prioridades de AMPE, decision 2026-09-30 de ADP), para que ebr2pdf y AMPE se vean de la misma
   familia. Todo el color sale de aqui: la base sin cliente en `:root` y el matiz del cliente en su
   bloque `[data-tema]`. Verde solo para lo que el servicio comprueba («cumple»), naranja para
   «vigilar»; el teal de Insud Pharma solo para la marca, los botones, los enlaces y la seleccion.
   Los nombres de antes (`--accion`, `--bien`, `--malo`, `--aviso`, `--mesa`, `--noche`) quedan como
   alias de los nuevos para que ningun componente pinte un color propio. ---------- */
:root {
  color-scheme: light;
  --f-texto: "Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-cifra: "Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-codigo: "Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  --t-xs: 0.8125rem; --t-s: 0.875rem; --t-m: 0.9375rem; --t-l: 1.0625rem; --t-xl: 1.25rem; --t-2xl: 1.625rem;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 28px; --e-7: 40px; --e-8: 56px;
  --radio-s: 4px; --radio-m: 8px; --radio-l: 10px;
  --ancho-pagina: 1400px;
  --alto-barra: 57px;
  --d-rapida: 120ms; --d-media: 200ms; --d-lenta: 360ms;
  --c-salida: cubic-bezier(.2, .8, .2, 1);
  --fondo: #EEF1F4; --caja: #FFFFFF; --caja-2: #F7F9FA; --linea: #D6DDE3; --linea-2: #E8ECEF; --neutro-suave: #EEF1F4;
  --tinta: #14212B; --tinta-2: #3A4955; --tinta-3: #5C6B77; --tinta-4: #9AA6B0; --sombra: #14212B; --sobre-color: #FFFFFF;
  --borde: #7C8A96;
  --ok: #146F36; --ok-suave: #E6F4EA; --vigilar: #B45309; --vigilar-suave: #FDF1E4; --vigilar-borde: #F0CFA6; --vigilar-texto: #7C3A06;
  --e1: #2B5F9E; --e2: #6B52C1; --e3: #9C3F75;
  /* El final de la marca en texto de un dominio sin logo (Team Banzai, su ambar para fondo claro). */
  --acento-marca-texto: #C2520B;
  --marca: #14212B; --primario: #14212B; --primario-hover: #26394A; --enlace: #2B5F9E; --foco: #2B5F9E; --elegida: #EEF3FA;
  /* El papel del cuaderno: blanco y con su pauta, igual con cualquier tema, porque es papel. */
  --papel: #FFFFFF; --papel-linea: #C9D0D6; --papel-pauta: #DDE2E6;
  --sombra-caja: 0 1px 2px color-mix(in srgb, var(--sombra) 6%, transparent);
  --accion: var(--enlace); --sobre-primario: var(--sobre-color); --mesa: var(--caja-2);
  --bien: var(--ok); --aviso: var(--vigilar-texto); --malo: var(--vigilar-texto);
  --noche: var(--tinta); --sobre-noche: #F2F4F6; --sobre-noche-2: #B9C3CC; --acento-noche: #8FC9D0;
}
/* Insud Pharma: su teal de marca (#048896) bajado a 4,5 de contraste sobre blanco. Un matiz y no un
   repintado: fondo y lineas solo se tinen. */
[data-tema="insud"] {
  /* El enlace, un punto mas oscuro que la marca: sobre el fondo tenido, #047885 da 4,39 y AA pide 4,5 (#036C77 da 5,18). */
  --marca: #047885; --primario: #047885; --primario-hover: #007268; --enlace: #036C77; --foco: #047885; --elegida: #E7F1F3;
  --fondo: color-mix(in srgb, #D5E5E9 35%, #EEF1F4);
  --linea: color-mix(in srgb, #D5E5E9 45%, #D6DDE3);
  --caja-2: #F6FAFB;
}

/* La demo publica de Fast Value: la base del sistema con el dorado de su marca en el filo y la
   seleccion (#A8742C, 4,04 sobre blanco y 3,56 sobre el fondo: basta para lo que no es texto) y los
   botones en su azul noche. Nunca el tema de un cliente. */
[data-tema="fastvalue"] {
  --marca: #A8742C; --primario: #101A24; --primario-hover: #26394A; --elegida: #F6EFE4;
}

/* ---------- Base comun ---------- */
.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 { scroll-padding-top: calc(var(--alto-barra) + 16px); }

/* ---------- La pagina. Las pantallas que ya no cargan hoja heredada viven solo de esto ---------- */
*, *::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; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 400 var(--t-m)/1.55 var(--f-texto); }

/* ---------- 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(--radio-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 del sistema industrial: blanca, con el filo de la marca arriba y la seccion subrayada. */
.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(--alto-barra); display: flex; align-items: stretch; gap: 0 22px; flex-wrap: wrap; }
/* LA MARCA EN TEXTO de un dominio sin logo en imagen, en la barra clara de la demo (decision 2026-10-01). */
.marca-texto { font: 500 19px/22px var(--f-codigo); color: var(--tinta); white-space: nowrap; letter-spacing: -0.01em; }
.marca-texto .acento { color: var(--acento-marca-texto); }
.marco-marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; white-space: nowrap; min-height: 44px; }
.marco-marca::before { content: ""; width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--tinta) 0 50%, var(--marca) 50% 100%); flex: none; }
.marco-marca:has(img)::before, .marco-marca:has(.marca-texto)::before { content: none; }
.marco-marca img { height: 22px; width: auto; }
.marco-producto { font: 700 1.125rem/1 var(--f-texto); letter-spacing: -.01em; }
.marco-producto b { color: var(--marca); font-weight: 700; }
.marco-sitio { font-size: var(--t-xs); color: var(--tinta-3); border-left: 1px solid var(--linea); padding-left: var(--e-3); }
.marco-menu { display: flex; align-items: stretch; gap: 0; 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); }
.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: 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; }
.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-borde); background: var(--vigilar-suave); color: var(--vigilar-texto); 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: fija 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: 7px var(--e-5); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.marco-pie code { font-family: var(--f-codigo); }
.marco-pie b { color: var(--tinta); font-weight: 600; }
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

/* 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-4) 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(--mesa); 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: var(--e-5) var(--e-5) 0; }
.marco-cabecera + .ui-pagina { padding-top: var(--e-2); }
/* En una pantalla que todavia carga su hoja heredada, el `main` de esa hoja ya pone el ancho. */
.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); 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; }

@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; }
  /* 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-quien, .marco-sitio, .marco-fichas { display: none; }
  .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; } }
@media (max-width: 1180px) { .marco-fichas { display: none; } }

/* ==========================================================================================
   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(--accion); 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; gap: var(--e-2); font-size: var(--t-s); color: var(--tinta-3); margin-bottom: var(--e-4); }
.ui-migas a { color: var(--enlace); }

/* 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(--accion); padding: 0 var(--e-3); }
.ui-boton.fantasma:hover { background: var(--mesa); }
.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(--mesa); }

/* 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: 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(--accion); 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; }

/* Comparar: las dos versiones lado a lado, con lo que cambia enmarcado en las dos. */
.ui-comparar { display: grid; gap: var(--e-4); margin-top: var(--e-4); }
.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; }
.ui-comparar-resumen { font: 600 var(--t-l)/1.3 var(--f-texto); }
.ui-comparar-paginas { display: grid; gap: var(--e-6); }
.ui-comparar-fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3) var(--e-5); scroll-margin-top: calc(var(--alto-barra) + var(--e-4)); }
.ui-comparar-fila > h2 { grid-column: 1 / -1; font-size: var(--t-l); }
.ui-comparar-hoja { margin: 0; display: grid; gap: var(--e-2); }
.ui-comparar-papel { position: relative; }
.ui-comparar-papel > .ui-lienzo { display: block; width: 100%; height: auto; background: var(--papel); box-shadow: 0 1px 3px color-mix(in srgb, var(--sombra) 25%, transparent); }
.ui-comparar-hoja > figcaption { font-size: var(--t-s); color: var(--tinta-2); }
.ui-cambio { position: absolute; border: 2px solid var(--malo); border-radius: 2px; background: color-mix(in oklab, var(--malo) 8%, transparent); pointer-events: none; }

/* ==========================================================================================
   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(--mesa)); cursor: pointer; }
.ui-subida.encima { border-style: solid; border-color: var(--accion); background: color-mix(in oklab, var(--accion) 8%, var(--caja)); }
.ui-subida svg { width: 44px; height: 44px; color: var(--accion); }
.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); }
.ui-esquema svg { width: 100%; height: auto; max-width: 900px; }
.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 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; }
/* 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; }
  .ui-comparar-fila { grid-template-columns: minmax(0, 1fr); }
}
@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(--mesa); }
.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(--mesa); 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); }
/* 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; }