/* ============================================================================
   Credentia — estilos institucionales (skill ui-presidencia)

   Sin Tailwind, sin Bootstrap, sin CDN, sin Google Fonts. CSS propio y stack
   de fuentes del sistema.

   REGLA DE ORO: ningun color hardcodeado fuera de :root. Todo por variables,
   asi el modo oscuro sale con una sola redefinicion.
   ========================================================================== */

:root {
  --color-primary:    #0033A0;
  --color-secondary:  #005BBB;
  --color-background: #F5F7FA;
  --color-surface:    #FFFFFF;
  --color-text:       #1A1A1A;
  /* #6B7280 NO pasa WCAG AA sobre fondos grises (3.96:1 medido). */
  --color-muted:      #5F6675;
  --color-success:    #2E7D32;
  --color-error:      #C62828;
  --color-warning:    #ED6C02;
  --color-border:     #E5E7EB;
  /* 🔴 El fondo de la fila con problemas de una carga masiva. Es un TOKEN y no
     el hex de siempre porque el modo oscuro redefine tokens y nada mas: escrito
     como #FDECEA quedaba rosa claro fijo con el texto claro del tema encima, o
     sea la fila ilegible -- y es justo la que hay que leer antes de emitir 62
     credenciales. */
  --color-error-fondo: #FDECEA;
  --color-shadow:     0 1px 4px rgba(0,0,40,.08), 0 4px 12px rgba(0,0,40,.05);

  /* El ancho del contenido, en UN solo lugar. Lo usan `.container` y
     `.panel-pie`, que tiene que quedar alineado con la grilla de atrás. */
  --ancho-contenido:  1680px;

  /* La monoespaciada de los marcadores de plantilla y de los datos que se
     copian. Se usaba como `var(--fuente-mono, ...)` sin declararla, o sea
     siempre por el respaldo: acá no cambiaba nada —la pila es la misma— pero
     un token que no existe es un token que nadie puede redefinir. */
  --fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Modo oscuro automatico: sigue el tema del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary:    #5B8DEF;
    --color-secondary:  #4A7FD0;
    --color-background: #141720;
    --color-surface:    #1C2133;
    --color-text:       #E8ECF4;
    --color-muted:      #8E9AB8;
    --color-success:    #3ECF7A;
    --color-error:      #EF5B4F;
    --color-warning:    #D4A039;
    --color-border:     #2A3144;
    --color-error-fondo: #3A1F1D;
    --color-shadow:     0 1px 4px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
  }
}

/* Override manual: gana sobre el del sistema, en los dos sentidos. */
:root[data-theme="dark"] {
  --color-primary:    #5B8DEF;
  --color-secondary:  #4A7FD0;
  --color-background: #141720;
  --color-surface:    #1C2133;
  --color-text:       #E8ECF4;
  --color-muted:      #8E9AB8;
  --color-success:    #3ECF7A;
  --color-error:      #EF5B4F;
  --color-warning:    #D4A039;
  --color-border:     #2A3144;
  --color-error-fondo: #3A1F1D;
  --color-shadow:     0 1px 4px rgba(0,0,0,.3), 0 4px 12px rgba(0,0,0,.2);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Refuerzo obligatorio: `[hidden]{display:none}` viene de la hoja del NAVEGADOR
   y pierde contra cualquier regla de autor que declare display. Sin esto,
   el.hidden = true no oculta nada que sea flex o grid. */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--color-background);
  color: var(--color-text);
  min-height: 100vh;
}

/* --- Header institucional ------------------------------------------------ */

.header {
  background: linear-gradient(135deg, #003cc4 0%, #0033A0 55%, #002e90 100%);
  color: #fff;
  padding: 0 20px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.22), 0 4px 18px rgba(0,0,0,0.16);
}
.header-logo-lg { height: 70px; width: auto; flex-shrink: 0; }
.header-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.28); flex-shrink: 0; }
/* 🔴 `flex: 1` y no `margin-left:auto` en cada elemento de la derecha.
   La marca se come el espacio libre, así que TODO lo que venga después queda
   pegado a la derecha, en orden y sin importar cuáles de los tres existan
   —Inicio, tema, sesión—. Antes el `auto` vivía en `.tema-toggle`, que se
   empujaba a sí mismo: en la pantalla de estado, que no tiene bloque de
   sesión, «← Inicio» quedaba colgado en el medio de la barra.
   `min-width: 0` para que un nombre largo no desborde el header. */
.header-brand { flex: 1; min-width: 0; }
.header-title { font-size: 1.15rem; font-weight: 600; letter-spacing: .01em; }
.header-subtitle { font-size: .78rem; opacity: .85; }

/* --- Sesión del backoffice -------------------------------------------
   `margin-left:auto` lo empuja a la derecha sin agregar un contenedor:
   el header ya es flex. `min-width:0` porque un nombre largo de Active
   Directory no puede desbordar el header — a 390px eso deja TODA la
   página con scroll horizontal, no solo el encabezado. */
.header-sesion {
  margin-left: auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: .82rem;
}
.sesion-usuario {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sesion-rol { opacity: .85; white-space: nowrap; }
/* Subrayado siempre: sobre el azul del header, distinguir el enlace solo
   por color no cumple WCAG 1.4.1 (regla 7 — nunca solo el color). */
.sesion-salir {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
  padding: 6px 4px;   /* objetivo táctil de 24px con la altura de línea */
}
.sesion-salir:hover { opacity: .85; }
.sesion-salir:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* En pantalla angosta el rol se cae: el nombre y "Cerrar sesión" son lo
   accionable. El rol sigue disponible en la propia pantalla. */
@media (max-width: 640px) {
  .header-sesion { font-size: .75rem; gap: 6px; }
  .sesion-rol { display: none; }
}

.tema-toggle {
  /* Sin `margin-left:auto`: quien empuja el grupo a la derecha es el `flex:1`
     de `.header-brand`. Con el auto acá, este botón se empujaba a sí mismo y
     dejaba a «← Inicio» colgado en el medio. */
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 6px;
  padding: 7px 12px;
  font-size: .8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tema-toggle:hover { background: rgba(255,255,255,.2); }
.tema-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Layout -------------------------------------------------------------- */

/* --- El ancho del contenido ---------------------------------------------
   🔴 Vive en UN token y no repetido en cada regla. Antes estaba en dos
   lugares --acá y en `.panel-pie`, que llevaba 1168 con un comentario
   explicando que eran "los 1200 menos el padding"-- y dos literales que
   tienen que moverse juntos terminan discrepando: el día que uno cambie, el
   panel deja de alinearse con la grilla y nada falla.

   1680 y no 1200: en un monitor de oficina de 1920 o más, 1200 dejaba unos
   350 px de blanco de cada lado y obligaba a hacer scroll horizontal dentro
   de las grillas del backoffice, que es donde está la información. El
   `min()` conserva un margen en pantallas intermedias, así que el contenido
   nunca llega a tocar el borde. El token está arriba, con el resto. */
.container {
  width: 100%;
  max-width: min(var(--ancho-contenido), 100% - 48px);
  margin: 0 auto;
  padding: 24px 0;
}

@media (max-width: 640px) {
  /* En móvil el margen lateral lo pone el padding: restarle 48px al 100%
     dejaría el contenido en una tira angosta. */
  .container { max-width: 100%; padding: 20px 16px; }
}

/* --- Las pantallas de un solo mensaje ------------------------------------
   `unauthorized`, `sesion-cerrada` y `enlace-no-disponible`: un título, un
   párrafo y a lo sumo un enlace. Angostas a propósito — son texto para leer,
   no datos para comparar.

   🔴 La clase EXISTÍA en el HTML de las tres y no en esta hoja: se sostenían
   con un `style` inline repetido tres veces. Que funcione por accidente es
   peor que que falle: el día que alguien agregue una cuarta pantalla copiando
   la clase sin el inline, sale sin formato y nada lo avisa. */
.contenedor {
  max-width: min(640px, 100% - 32px);
  margin: 0 auto;
  padding: 3rem 0;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: var(--color-shadow);
}
.card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.card-nota { font-size: .82rem; color: var(--color-muted); margin-bottom: 14px; }

/* --- Paneles de resultado ------------------------------------------------ */

.resultado-panel {
  border-radius: 8px;
  padding: 20px;
  margin-top: 16px;
  border-left: 5px solid;
  background: var(--color-background);
  border-color: var(--color-border);
}
.resultado-panel.ok          { border-color: var(--color-success); }
.resultado-panel.error       { border-color: var(--color-error); }
.resultado-panel.advertencia { border-color: var(--color-warning); }
.resultado-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.resultado-panel.ok .resultado-title          { color: var(--color-success); }
.resultado-panel.error .resultado-title       { color: var(--color-error); }
.resultado-panel.advertencia .resultado-title { color: var(--color-warning); }

/* El numero de tramite acompaña los pasos 3 y 4, no es la pantalla final: por
   eso lleva margen abajo tambien, para separarse de la tarjeta del paso. */
#panel-numero { margin-bottom: 20px; }

/* Un aviso pegado a un panel de resultado se lee como parte de el.
   `.resultado-panel` tiene margen ARRIBA y `.aviso` solo ABAJO, asi que uno
   detras del otro quedaban sin ninguna separacion: en la pantalla de solicitud
   enviada, el "este numero no es una credencial" se veia como el pie del cuadro
   del numero. Se separa con el selector adyacente y no tocando `.aviso`, que
   aparece en otros diez lugares donde el margen actual esta bien. */
.resultado-panel + .aviso { margin-top: 18px; }

/* --- Contadores ---------------------------------------------------------- */

.contadores { display: flex; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.contador-item {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 14px;
  text-align: center;
  min-width: 104px;
}
.contador-num   { font-size: 1.6rem; font-weight: 700; color: var(--color-primary); }
.contador-label { font-size: .75rem; color: var(--color-muted); }

/* --- Datos clave --------------------------------------------------------- */

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px; }
.dato { display: flex; flex-direction: column; gap: 2px; }
.dato-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.dato-valor { font-size: .95rem; font-weight: 600; word-break: break-word; }
.dato-valor.mono { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .86rem; }

/* --- Tablas -------------------------------------------------------------- */

.tabla-container { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; font-size: .87rem; }
thead th {
  background: var(--color-background);
  color: var(--color-muted);
  text-align: left;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); }
tbody tr:last-child td { border-bottom: none; }

/* --- Volver a un paso ya completado (#5158) -------------------------------
   El botón hereda todo del <li> y no dibuja nada propio: la pastilla del paso
   ya existe y lo que se agrega es que sea accionable, no otro control encima. */
.paso-boton {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.paso-boton:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
/* El subrayado solo al pasar por encima: permanente convertiría el indicador
   de progreso en una barra de enlaces y competiría con el paso actual. */
.paso-navegable .paso-nombre { text-decoration: underline dotted; }
.paso-navegable:hover .paso-nombre { text-decoration: underline; }

/* --- Campos en columnas --------------------------------------------------
   Campos cortos apilados uno debajo del otro ocupan la pantalla entera y
   empujan la grilla --que es a lo que se viene-- abajo del pliegue.

   Nació para los filtros de la bandeja del Operador (#5174) y se llamaba
   `filtros-grilla`. Se renombró al aplicarlo también a los formularios de alta
   de Medio y de Evento (#5198): el de Evento tiene ONCE campos, y apilados son
   dos pantallas de scroll para dar de alta una charla de prensa. El problema
   es el mismo y la solución también, así que el nombre dejó de hablar de
   filtros.

   `auto-fit` con un mínimo: el navegador pone las columnas que entren, así que
   no hay que elegir un número y no se rompe en ningún ancho intermedio.
   `align-items: start` es lo que permite que convivan campos con y sin texto
   de ayuda sin que los de al lado se estiren.

   `.acciones` ocupa la fila entera para que los botones no queden colgando al
   lado de un campo. */
.campos-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 18px;
  align-items: start;
}
.campos-grilla .acciones { grid-column: 1 / -1; }

/* Un campo que necesita la fila entera: su texto de ayuda es largo y en una
   columna angosta se lee como una tira. Es el caso del selector de QR, que es
   la decisión más consecuente del alta de eventos y la que menos lo parece. */
.campos-grilla .campo-ancho { grid-column: 1 / -1; }

/* Dos columnas, no la fila entera (#5159). El caso es el sitio web: una URL no
   entra en 220 px y se lee a pedazos, pero darle el ancho completo al lado de
   campos cortos lo hace ver como otra sección.

   En una sola columna --móvil-- `span 2` se resuelve a la columna que hay, así
   que no desborda. */
.campos-grilla .campo-doble { grid-column: span 2; }

@media (max-width: 540px) {
  /* Acá apilar SÍ corresponde: a 320 px dos columnas dejan los campos
     inutilizables. */
  .campos-grilla { grid-template-columns: 1fr; }
}

/* --- Las personas dentro de una fila de la bandeja -----------------------
   Plegadas: la grilla tiene que seguir siendo una grilla. Abrir el trámite
   TOMA el trámite y eso no se deshace, así que mirar quiénes son tiene que
   poder hacerse sin abrirlo. */
.personas-fila > summary { cursor: pointer; font-variant-numeric: tabular-nums; }
.personas-fila ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.personas-fila li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

/* La versión de la CONSULTA GENERAL (#5189): la misma lista plegada, pero cada
   persona trae sus datos, sus adjuntos y --si está rechazada y quien mira es
   Aprobador-- su acción.

   Por eso va en columna y sin `nowrap`: en la bandeja del Operador cada ítem es
   una línea, acá es un bloque. La clase es propia y no un cambio sobre
   `.personas-fila li`, que sigue sirviendo a la otra pantalla tal cual. */
.personas-fila li.persona-detalle {
  flex-direction: column;
  align-items: stretch;
  white-space: normal;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.personas-fila li.persona-detalle:last-child { border-bottom: none; }
.personas-fila li.persona-detalle .acciones { margin-top: 6px; }
.personas-fila li.persona-detalle .adjuntos { margin-top: 4px; }

/* --- Badges -------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: .74rem;
  font-weight: 600;
  border: 1px solid transparent;
}
/* Fondos claros con tinta oscura: los tokens de estado no alcanzan el 4.5:1
   como texto sobre superficie, asi que el badge lleva su propio par medido. */
.badge.transitorio  { background: #E3F2FD; color: #10428F; border-color: #A9C7F0; }
.badge.terminal     { background: #E8F5E9; color: #1B5E20; border-color: #A5D6A7; }
.badge.pos-terminal { background: #F3E5F5; color: #5B2A6B; border-color: #D9B3E0; }
.badge.si           { background: #FFF3E0; color: #8A4B00; border-color: #F0C68A; }
.badge.no           { background: var(--color-border); color: var(--color-text); }

/* El estado de un interruptor de `parametro_sistema`. Reusa el par medido de
   `terminal` en vez de un verde elegido a ojo.

   ⚠️ Se usaba desde el 08/10/2026 SIN estar definido, asi que el "encendido"
   salia gris igual que el "apagado" --o sea, el badge no distinguia nada--.
   No lo agarra `verificar_clases_html.py`: esa clase la pone el JS al crear la
   celda, y el verificador lee las clases del HTML. */
.badge.badge-ok     { background: #E8F5E9; color: #1B5E20; border-color: #A5D6A7; }

/* Los dos lados del mostrador, y se distinguen a propósito:
   `observado` espera al CIUDADANO --no hay nada que hacer hasta que responda--
   y `corregido` espera al SCI, así que es lo que hay que mirar primero. */
.badge.badge-observado { background: #FFF8E6; color: #7A4C00; border-color: #E8C98A; }
.badge.badge-corregido { background: #E3F2FD; color: #10428F; border-color: #A9C7F0; }

/* --- Matriz de transiciones --------------------------------------------- */

.matriz { border-collapse: collapse; font-size: .7rem; }
.matriz th, .matriz td { border: 1px solid var(--color-border); padding: 3px 5px; text-align: center; }
.matriz thead th { writing-mode: vertical-rl; text-orientation: mixed; height: 118px; padding: 6px 3px; }
.matriz tbody th { text-align: right; white-space: nowrap; font-weight: 500; font-size: .72rem; padding-right: 8px; }
.matriz td.si { background: var(--color-primary); color: #fff; font-weight: 700; }
.matriz td.no { color: var(--color-muted); }
.matriz td.diagonal { background: var(--color-border); }

/* --- Footer -------------------------------------------------------------- */

.footer {
  text-align: center;
  color: var(--color-muted);
  font-size: .76rem;
  margin-top: 8px;
  padding-bottom: 24px;
}
.footer-ambiente {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 600;
  font-size: .72rem;
  background: #fff3cd;
  color: #856404;
  text-transform: uppercase;
}
.footer-ambiente.produccion { background: #d1e7dd; color: #0f5132; }

/* ==========================================================================
   FORMULARIO PÚBLICO (M1)
   Estilo PROVISORIO con la paleta de ui-presidencia. Cuando llegue la norma del
   Formulario Tipo de AGESIC (lineamientos UI-001 / UI-012, que NO estan en el
   proyecto) se cambia esta hoja: el marcado es HTML semantico y no depende de
   estas clases para funcionar.
   ========================================================================== */

/* Solo para lectores de pantalla. No se usa display:none: eso lo saca tambien
   del arbol de accesibilidad y el texto deja de anunciarse. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: invisible hasta que recibe foco (WCAG 2.4.1). */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-surface);
  color: var(--color-primary);
  padding: 10px 16px;
  z-index: 100;
  border: 2px solid var(--color-primary);
  border-radius: 0 0 6px 0;
}
.salto-contenido:focus { left: 0; }

/* Foco visible en TODO lo interactivo. Nunca `outline: none` sin reemplazo
   (regla 4). Se usa :focus-visible para no molestar al mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* Excepcion: un encabezado con `tabindex="-1"` NO es un control, es un destino
   de foco programatico --se le manda el foco al cambiar de pantalla para que el
   lector anuncie donde quedo parado--. El anillo ahi encierra el titulo en una
   caja azul sin que el usuario haya hecho nada, y se lee como un error.
   No incumple WCAG 2.4.7: ese criterio pide indicador visible para lo que
   recibe foco de TECLADO, y con tabindex="-1" el elemento no esta en el
   recorrido. Todo lo que si es interactivo conserva su indicador. */
h1[tabindex="-1"]:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus { outline: none; }

/* --- El formulario del ciudadano, que es la EXCEPCIÓN --------------------
   🔴 Acá ensanchar empeora. Es una sola columna de campos con su texto de
   ayuda, y una línea que cruza 1680 px es ilegible: WCAG pide un ancho de
   lectura cómodo, que ronda los 65 caracteres. Un input de teléfono de 1600
   px tampoco ayuda a nadie.

   Se subió de 720 a 860 --lo suficiente para que la nómina del paso 4 y la
   lista de personas de la subsanación respiren-- y ahí se queda. El pedido de
   aprovechar la pantalla vale para las grillas del backoffice, que es donde
   hay datos que no entran; no para una columna de texto.

   `.container` ya no pone padding lateral, así que acá va el suyo. */
.container-formulario {
  max-width: min(860px, 100% - 32px);
  padding-left: 0;
  padding-right: 0;
}
.titulo-tramite { font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; }
.intro { color: var(--color-muted); font-size: .92rem; margin-bottom: 20px; }

/* --- Indicador de pasos -------------------------------------------------- */

.pasos {
  list-style: none;
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.paso {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  color: var(--color-muted);
  padding: 6px 12px 6px 6px;
  border-radius: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;          /* WCAG 2.5.8: 24x24 minimo */
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  font-size: .78rem;
  font-weight: 700;
  flex-shrink: 0;
}
/* El paso actual NO se distingue solo por color: cambia el peso de la fuente y
   el borde, y `aria-current` lo anuncia. */
.paso[aria-current="step"] {
  border-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 700;
}
.paso[aria-current="step"] .paso-num { background: var(--color-primary); color: #fff; }
.paso[data-completado="si"] .paso-num { background: var(--color-success); color: #fff; }

/* --- Campos -------------------------------------------------------------- */

.campo { margin-bottom: 18px; }
.campo label {
  display: block;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 5px;
}
.requerido { color: var(--color-error); font-weight: 700; }

/* 🔴 SE SELECCIONA POR EXCLUSION, NO POR LISTA DE TIPOS.

   Esta regla listaba `text`, `email`, `tel` y `date`, y no tenia
   `datetime-local` ni `number`: los cuatro campos de fecha del alta de eventos
   y la capacidad maxima se quedaban con el estilo del NAVEGADOR --mas chicos,
   con otra tipografia y borde biselado-- al lado de los campos de texto, que si
   estaban estilados. Reportado el 30/09/2026: "el recuadro de las fechas es mas
   chico y con otra tipografia".

   Es el mismo defecto que el comentario anterior decia haber arreglado para el
   <textarea>, repetido con los tipos que se agregaron despues. Una lista de
   tipos se queda corta CADA VEZ que aparece uno nuevo, y el sintoma es sutil:
   el formulario se ve desprolijo y nadie sabe por que.

   Al reves --todos menos los tres que necesitan estilo propio-- cubre tambien
   `search`, `url`, `password` y lo que venga. `file` tiene su regla mas abajo;
   `checkbox` y `radio` los dibuja el navegador a proposito. */
.campo input:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.campo select,
.campo textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;                     /* 16px: menos que eso hace zoom en iOS */
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}
/* Solo vertical: `resize` libre deja estirarlo mas ancho que la tarjeta y
   saca la pagina de su ancho. */
.campo textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--color-secondary); }

/* Un campo en solo lectura tiene que VERSE distinto, no solo comportarse
   distinto: el autocompletado de DNIC deja cuatro campos readonly y sin señal
   visual parecen editables y rotos (RF-PUB-05).

   🔴 LA CADENA DE `:not()` SE REPITE ACA, Y NO ES DECORACION.

   `:not()` toma la especificidad de su argumento, asi que la regla base de
   arriba pesa (0,4,1) --una clase, tres atributos dentro de los `:not()`, un
   elemento-- y `.campo input[readonly]` pesaba (0,2,1). La base GANABA, y
   `color` y `background` de acá no se aplicaban: los campos que DNIC bloquea
   se veian exactamente igual que los editables.

   Entro el 30/09/2026 con `ea86733`, al reescribir la regla base en forma de
   "todos menos tres". Nada fallo, nada quedo en ningun log, y el sintoma
   --"parecen editables"-- lo reporto una persona mirando la pantalla.

   Con los `:not()` repetidos las dos reglas empatan en (0,5,1) contra (0,4,1)
   y gana esta, que ademas viene despues. */
.campo input[readonly]:not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
  background: var(--color-background);
  color: var(--color-muted);
  cursor: not-allowed;
}

/* Error: borde MAS icono MAS texto. Nunca solo el color (regla 7).

   🔴 Misma trampa, y esta era peor: la regla base define `border` en forma
   CORTA, asi que al ganarle reponia `1px solid var(--color-border)` y el borde
   rojo de 2px del campo con error no se veia. El icono y el texto si, que es
   lo que hizo que pasara desapercibido. */
.campo input[aria-invalid="true"]:not([type="file"]):not([type="checkbox"]):not([type="radio"]),
.campo select[aria-invalid="true"],
.campo textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
}
.campo-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--color-error);
  font-size: .84rem;
  font-weight: 600;
  margin-top: 5px;
}

.ayuda { font-size: .82rem; color: var(--color-muted); margin-top: 5px; }

.campo-check { display: flex; align-items: flex-start; gap: 10px; }
.campo-check input[type="checkbox"] {
  width: 24px; height: 24px;           /* WCAG 2.5.8 */
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
.campo-check label { margin-bottom: 0; font-weight: 500; }

/* El selector de archivo: el boton lo dibuja el navegador y NO se reemplaza
   por un <div> con un input oculto. Ese truco es lo que rompe el foco de
   teclado y el anuncio del nombre del archivo elegido. */
.campo input[type="file"] {
  width: 100%;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 6px;
}

/* --- Grupo de campos y chips --------------------------------------------- */

/* `fieldset` con `border: 0`: el recuadro nativo no se lleva con el resto de
   la pantalla, pero el elemento se mantiene porque es lo que agrupa los
   checkboxes y le da nombre al grupo con el `legend`. */
.campo-grupo {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;                        /* fieldset trae un min-width auto que rompe el flex */
}
.campo-grupo legend {
  padding: 0;
  font-weight: 600;
  font-size: .9rem;
  margin-bottom: 8px;
}

/* Cuando el grupo de campos es el contenido de una tarjeta, su <legend> hace de
   titulo. Se le da el peso visual de un `.card-title` sin convertirlo en un
   <h2>: el <legend> es lo que le pone nombre accesible al <fieldset>, y un
   encabezado suelto no cumple esa funcion. */
.card > .campo-grupo > legend {
  width: 100%;
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.campo-grupo[aria-invalid="true"] .chips {
  border-left: 3px solid var(--color-error);
  padding-left: 10px;
}
/* Mismo marcador, con el grupo del Formulario Tipo. */
#grupo-clasificacion[aria-invalid="true"] .chips {
  border-left: 3px solid var(--color-error);
  padding-left: 10px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Lo que el Formulario Tipo de AGESIC no cubre, en las 3 pantallas
   públicas. Va DESPUÉS del paquete, que es el orden en que se cargan. ===== */

/* 🔴 EL SOLO LECTURA, REPUESTO. Es una regresión del 21/10/2026 y es la
   SEGUNDA vez que pasa lo mismo con estos cuatro campos.

   La regla vive más arriba como `.campo input[readonly]:not(...)`, y al migrar
   el marcado al Formulario Tipo `.campo` dejó de existir en estas pantallas:
   los cuatro campos que DNIC bloquea —nombres, apellidos, nacionalidad y fecha
   de nacimiento— volvieron a verse exactamente igual que los editables. El
   paquete NO estiliza `readonly` (sólo `:disabled` y `Form-widget--read`, que
   es otra cosa: un bloque de sólo lectura, no un input).

   🔑 Es el mismo síntoma que el 01/10/2026, cuando lo causó la especificidad
   de los `:not()`. Entonces lo reportó una persona mirando la pantalla; esta
   vez también. Vale como regla: AL RENOMBRAR LAS CLASES DE UN FORMULARIO,
   BUSCAR LAS REGLAS DE ESTADO QUE CUELGAN DE ELLAS — `[readonly]`,
   `[aria-invalid]`, `:disabled`.

   Especificidad: la base del paquete es `.Form--tipo .Form-group .Form-widget`
   (0,3,0) y esto pesa (0,3,1), así que gana por el atributo — y además
   `styles.css` se carga después. El `aria-invalid` NO hace falta repetirlo: de
   eso se ocupa `Form-group--error .Form-widget` del propio paquete.

   🔑 Y la señal no es sólo el fondo (regla 7): el borde punteado lo distingue
   de un campo normal aunque el matiz del fondo no se note, y el motivo va
   escrito al lado — de eso se ocupa `estado-dnic`. */
.Form--tipo .Form-group .Form-widget[readonly] {
  background: var(--color-background);
  color: var(--color-muted);
  border-style: dashed;
  cursor: not-allowed;
}

/* La clasificación del medio: una nube de chips, no un campo.
   🔴 `Form-object-wrap` tiene `max-width: 28em`, que es el ancho correcto para
   un input de texto y deja la mitad derecha del recuadro vacía con ocho chips
   adentro. Acá el contenido se reparte en todo el grupo.
   No lleva `Form-label-wrap`: el <legend> del fieldset ya nombra al grupo, y
   una columna de 18em vacía a la izquierda sólo correría los chips sin decir
   nada — y sin darles más lugar, que es lo que se busca. */
.Form--tipo .Form-group--ancho > .Form-object-wrap {
  max-width: 100%;
  padding-right: 0;
}

/* Los botones del diálogo de "cambiaste el documento".
   🔑 No usa `Form-actions` del paquete: ésa es flex con `space-between`, y con
   TRES botones deja el del medio flotando. Acá se envuelven a la derecha, que
   es donde se buscan las acciones de un diálogo, y en una ventana angosta se
   apilan en lugar de comprimirse. */
.acciones-documento {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 560px) {
  .acciones-documento { flex-direction: column-reverse; align-items: stretch; }
}

/* Se ve como una pastilla y sigue siendo un checkbox con su label: el
   `:has(:checked)` pinta el estado sin JS. Donde `:has` no exista, el chip
   igual funciona -- se ve el tilde del checkbox, que es el estado real. */
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
}
.chip input[type="checkbox"] {
  width: 20px; height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
.chip label {
  margin-bottom: 0;
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
}
.chip:has(input:checked) {
  border-color: var(--color-primary);
  border-width: 2px;
  /* Ademas del borde, negrita: el color por si solo no alcanza (regla 7). */
  font-weight: 700;
}
/* El foco va al chip completo, no solo al checkbox de 20px: asi se ve donde
   esta el teclado (WCAG 2.4.11). */
.chip:has(input:focus-visible) {
  outline: 3px solid var(--color-secondary);
  outline-offset: 2px;
}

/* --- Elegir de un catalogo largo, escribiendo (selector-multiple.js) ------
   =========================================================================
   Reemplaza a los chips-filtro, que a su vez habian reemplazado a un
   `<select multiple>`. El recorrido completo esta en el encabezado del .js;
   lo que importa aca es que el control SE VE como un campo de texto --porque
   eso es lo que invita a escribir-- aunque adentro lleve las fichas de lo ya
   elegido. */

.selector { position: relative; }

.selector-caja {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  cursor: text;
}
/* El foco lo tiene el input de adentro, asi que el anillo va en la caja: si no,
   se ve un recuadro de 100px en medio de un control que ocupa toda la fila. */
.selector-caja:focus-within {
  border-color: var(--color-secondary);
  outline: 3px solid var(--color-secondary);
  outline-offset: 1px;
}

/* 🔴 LA CADENA DE `:not()` SE REPITE, Y NO ES DECORACION -- misma trampa que en
   `.campo input[readonly]`, documentada mas arriba. La regla base
   `.campo input:not(...):not(...):not(...)` pesa (0,4,1) y le pone al input
   borde, fondo y ancho del 100%: sin repetir la cadena, el input dibujaria SU
   PROPIA caja adentro de esta y el control se veria como dos recuadros
   anidados. Con los tres `:not()` esto pesa (0,5,1) y gana. */
.campo .selector-caja input:not([type="file"]):not([type="checkbox"]):not([type="radio"]) {
  flex: 1 1 140px;
  min-width: 140px;
  width: auto;
  padding: 5px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.campo .selector-caja input:focus { border-color: transparent; outline: none; }

/* Lo ya elegido. Es la "lista separada por comas" que se pidio, pero donde cada
   item se puede sacar solo: con texto separado por comas, quitar uno obliga a
   editar a mano y a no equivocarse con las comas. */
.selector-ficha {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: var(--color-background);
  font-size: .85rem;
  font-weight: 600;
}
.selector-quitar {
  /* 24x24 es el minimo de WCAG 2.5.8, y aca aplica de verdad: son varios
     botones chicos uno al lado del otro. */
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.selector-quitar:hover { background: var(--color-border); }
.selector-quitar:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 1px;
}

/* El desplegable. Va `absolute` para que al abrirse no empuje el resto del
   formulario hacia abajo: con el filtro arriba de la grilla, eso mueve la
   pagina entera cada vez que alguien escribe una letra. */
.selector-lista {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  max-height: 260px;
  overflow-y: auto;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.selector-opcion {
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .92rem;
}

/* Lo que DESAMBIGUA la opcion --hoy, el pais del medio-- y no un adorno: dos
   medios pueden llamarse igual, el catalogo lo admite a proposito y la guarda
   de duplicados compara nombre + pais. Se ve en segundo plano porque no es el
   nombre, pero tiene que verse: sin esto las dos opciones son identicas. */
.selector-detalle {
  display: block;
  font-size: .8rem;
  color: var(--color-muted);
}
/* Dentro de una ficha va en la misma linea: la ficha es una pastilla. */
.selector-ficha .selector-detalle {
  display: inline;
  margin-left: 5px;
  font-weight: 400;
}
.selector-ficha .selector-detalle::before { content: "· "; }
.selector-opcion:hover { background: var(--color-background); }
/* La opcion resaltada con las flechas. 🔴 No alcanza el fondo: el color por si
   solo no comunica (regla 7), asi que ademas va en negrita y con una barra. */
.selector-opcion.activa {
  background: var(--color-background);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--color-primary);
}
/* Ni opcion ni elegible: el "no coincide ninguna" y el aviso de corte. */
.selector-vacia {
  padding: 9px 10px;
  font-size: .85rem;
  color: var(--color-muted);
}

/* --- Paso 4: nomina ------------------------------------------------------ */

.subtitulo {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 24px 0 8px;
}

/* Tarjeta dentro de una tarjeta: el formulario de la persona.
   Es una seccion desplegable y NO un <dialog>: un modal accesible obliga a
   atrapar el foco, devolverlo al cerrar y manejar Escape, y si algo de eso
   falla el usuario de teclado queda encerrado. */
/* Navegacion entre las pantallas de un mismo modulo. No es un menu global --el
   sistema no tiene uno-- pero sin esto cada pantalla de administracion es una
   isla a la que solo se llega escribiendo la URL. */
.nav-modulo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 2px;
}
.nav-modulo a {
  padding: 9px 14px;
  text-decoration: none;
  color: var(--color-text);
  border-bottom: 3px solid transparent;
  font-size: .92rem;
  font-weight: 500;
}
.nav-modulo a:hover { border-bottom-color: var(--color-border); }
.nav-modulo a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
/* La pantalla actual va con `aria-current`, no con una clase: asi la marca
   tambien la anuncia un lector de pantalla, no solo el subrayado. */
.nav-modulo a[aria-current="page"] {
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}

/* --- El enlace al inicio, en el encabezado ------------------------------
   Va en el header y no en el cuerpo: tiene que estar en el MISMO lugar en las
   nueve pantallas. Una pantalla a la que solo se llega escribiendo la URL no es
   una pantalla, y hasta que existio el inicio eso era literal. */
.header-inicio {
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  white-space: nowrap;
  margin-left: auto;
}
.header-inicio:hover { background: rgba(255,255,255,.14); }
.header-inicio:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Con el bloque de sesion al lado, el `margin-left:auto` lo pone a el y no al
   enlace: el enlace queda pegado a la derecha del titulo. */
.header-inicio + .header-sesion { margin-left: 14px; }

/* --- Las tarjetas de acceso del inicio ---------------------------------- */
/* El menú pasó a usar el ancho completo, así que el mínimo sube de 240 a 320:
   con el contenedor ancho, 240 px daba columnas muy angostas para una tarjeta
   que lleva título y dos renglones de descripción. Sigue siendo `auto-fit`, así
   que el navegador decide cuántas entran y no hay un número elegido a mano. */
.accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

/* Objetivo tactil generoso: es la pantalla desde la que se entra a todo, y en
   un celular una fila de texto no alcanza. */
.acceso {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 17px;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
}
a.acceso:hover {
  border-color: var(--color-primary);
  border-left-width: 3px;
  box-shadow: var(--color-shadow);
}
a.acceso:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

.acceso-nombre { font-weight: 700; font-size: .98rem; color: var(--color-primary); }
.acceso-que { font-size: .87rem; color: var(--color-muted); line-height: 1.5; }

/* 🔴 Lo que no se puede abrir NO se esconde: se apaga y se dice por que.
   Esconderlo haria parecer que el sistema esta incompleto; mostrarlo apagado
   explica la segregacion de funciones, que es una decision de diseno.
   Ademas del gris va el TEXTO del motivo -- nunca solo el color (regla 7). */
.acceso.apagado {
  border-left-color: var(--color-border);
  background: var(--color-background);
  cursor: default;
}
.acceso.apagado .acceso-nombre { color: var(--color-muted); }
.acceso-rol {
  font-size: .76rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-top: 3px;
  padding-top: 7px;
  border-top: 1px solid var(--color-border);
}

/* Separa los pasos dentro de un panel --buscar / registrar-- sin convertir cada
   uno en una tarjeta: el borde y la sombra dirian "objeto separado", y son dos
   caminos de la MISMA decision. */
.sub-titulo {
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-text);
  opacity: .75;
  margin: 22px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.sub-titulo:first-of-type { margin-top: 8px; }

/* El registro de un medio, plegado (#5159).

   El `<h3>` va dentro del `<summary>` para conservar el encabezado, y en
   `inline-block` para que el triangulito quede en la misma línea en vez de
   arriba. El borde inferior se saca: con el detalle cerrado subrayaría un
   bloque que no está. */
.registro-medio > summary { cursor: pointer; }
.registro-medio > summary > .sub-titulo {
  display: inline-block;
  vertical-align: middle;
  border-bottom: none;
  margin: 22px 0 10px;
}

.card-anidada {
  margin: 16px 0;
  border-left: 4px solid var(--color-secondary);
  background: var(--color-background);
}

.acciones-izquierda { justify-content: flex-start; }

/* 🔴 La tabla scrollea DENTRO de este contenedor.
   En un celular, una tabla de 5 columnas que haga scrollear la pagina entera
   rompe la lectura de todo lo demas. `tabindex` para que se pueda recorrer con
   teclado, que es lo que exige WCAG 2.1.1 en una region con scroll propio. */
.tabla-scroll {
  overflow-x: auto;
  margin-bottom: 12px;
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.tabla th,
.tabla td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.tabla th {
  font-weight: 700;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--color-muted);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.tabla tbody tr:last-child td { border-bottom: 0; }

/* 🔴 Anchos DECLARADOS, para una grilla cuyo valor puede ser largo y sin espacios
   ============================================================================
   `table-layout` por defecto es `auto`: el navegador mide el contenido y le da a
   cada columna lo que pida su texto mas largo. Las siete casillas de
   CORREO_REDIRECCION_TEST son ~190 caracteres unidos por comas, SIN un solo
   espacio, o sea una sola palabra: la columna Valor se llevo todo el ancho y
   dejo "Que hace", "Ultima modificacion" y el boton "Cambiar" fuera de la
   pantalla, detras de la barra de scroll. Reportado el 08/10/2026: "pense que no
   estaba el boton hasta que me di cuenta que habia que correr la barra".

   🔑 No alcanzaba con acortar el texto: lo que hay que sacarle al navegador es la
   DECISION del ancho. Con `fixed` sale del <colgroup> de cada pantalla.

   El `min-width` conserva el scroll horizontal en pantallas angostas, que es
   para lo que existe `.tabla-scroll`: sin el, cinco columnas en un celular
   quedan de 60 px y no se lee ninguna. */
.tabla-fija {
  table-layout: fixed;
  min-width: 920px;
}

/* Con el ancho fijado, lo que no entra tiene que PARTIRSE en vez de desbordar.
   `anywhere` corta dentro de la palabra solo cuando no hay otra forma, asi que
   una descripcion normal sigue cortando por los espacios.

   Y el contenido se alinea ARRIBA, no al medio: con los anchos fijos hay filas
   de seis renglones --el valor de CORREO_REDIRECCION_TEST-- y con el centrado
   heredado la clave quedaba flotando a media altura, lejos del renglon donde
   empieza su propia fila. */
.tabla-fija td { overflow-wrap: anywhere; vertical-align: top; }

/* El texto de "que valores admite", debajo del valor: va en su propio renglon.
   `.ayuda` no declara display, y un <small> o un <span> quedarian pegados al
   badge. */
.celda-valor .ayuda { display: block; }

/* El numero de tramite no se parte. Al agregarle a la consulta general la
   columna del estado del TRAMITE (09/10/2026) la grilla paso a ocho columnas y
   "BAA-0041" quedo en dos renglones: es el identificador por el que se busca y
   por el que se reclama, asi que partido deja de poder leerse de un vistazo. */
.celda-numero { white-space: nowrap; }

/* --- La revision de una carga masiva (19/10/2026) ------------------------- */

/* La fila que tiene algo mal. 🔴 Un BORDE IZQUIERDO y no solo el fondo: con 62
   filas, distinguir por color de fondo es justo lo que la regla 7 prohibe
   --no comunicar un estado solo con el color--. El borde se ve en escala de
   grises y en alto contraste, y ademas el texto de la celda dice que falta. */
.fila-con-problema td { background: var(--color-error-fondo); }
.fila-con-problema td:first-child {
  border-left: 4px solid var(--color-error);
}

/* La lista de problemas DENTRO de una celda. Sin esto el <ul> trae el margen y
   el sangrado del navegador y empuja la columna. */
.lista-problemas {
  margin: 0;
  padding-left: 18px;
  font-size: .86rem;
}
.lista-problemas li + li { margin-top: 4px; }

.celda-acciones { text-align: right; white-space: nowrap; }

/* Con MAS de un boton por fila --la bandeja del Aprobador tiene tres-- el
   `nowrap` solo los deja pegados y los objetivos tactiles se tocan entre si
   (WCAG 2.5.8 pide 24x24 CSS y que no se solapen).

   🔴 Pero la separacion NO puede salir de `display:flex` sobre el <td>.
   Un `display:flex` en una celda la saca del layout de tabla: deja de ser
   `table-cell`, no participa del alto ni de la linea de base de su fila, y la
   columna entera queda DESFASADA respecto de los bordes. Se veia en el catalogo
   de medios: los botones no coincidian con las lineas de la grilla.
   Lo mismo pasaria con `display:grid` o `inline-block`.

   La separacion va entre botones. `.btn` es `inline-flex`, o sea de nivel de
   linea, asi que se acomodan solos y el margen solo aparece a partir del
   SEGUNDO -- que es el motivo por el que antes se uso `gap`: un margen a secas
   se duplicaria al lado del ultimo. El selector hermano resuelve eso sin tocar
   el modo de display de la celda. */
.celda-acciones.multiple {
  white-space: nowrap;
  text-align: right;
}
.celda-acciones.multiple .btn + .btn { margin-left: 6px; }

/* 🔴 Y cuando la celda apila DOS COSAS, el margen entre botones no alcanza.
   =========================================================================
   La grilla por persona de la consulta general (#5240) pone en la misma celda
   el botón «Ver historia» y el bloque de adjuntos. Ese bloque es
   `display:flex`, o sea de nivel de BLOQUE: arranca en su propio renglón, y sin
   margen queda pegado al botón de arriba — mientras sus propias filas sí se
   separan, porque tiene `gap`.

   El resultado es el que se reportó: hay aire entre «Foto carné» y «Documento
   (dorso)», que son dos filas del mismo flex, y no lo hay entre «Ver historia»
   y «Foto carné», que son dos hermanos de la celda.

   🔑 Van 8 px y no 6: es el MISMO `gap` que separa las filas de `.adjuntos`, así
   la celda queda con una sola distancia en vez de dos parecidas. La regla de
   arriba (6 px) es horizontal y entre botones de un mismo renglón, que es otra
   cosa.

   ⚠️ Sigue sin tocarse el `display` del `<td>`: el motivo está dos comentarios
   más arriba y no cambió — un `display:flex` en una celda la saca del layout de
   tabla y desfasa la columna entera. */
.celda-acciones > .adjuntos { margin-top: 8px; }

/* Lo que venga DESPUÉS del bloque tiene el mismo problema por el otro lado: hoy
   es «Cambiar a Aprobada», que solo ve el Aprobador sobre una rechazada. */
.celda-acciones > .adjuntos + .btn { margin-top: 8px; }

.btn-chico {
  padding: 6px 12px;
  font-size: .84rem;
  /* 44px de alto minimo lo da el padding + la linea: WCAG 2.5.8 pide 24x24 CSS
     como minimo absoluto y esto queda por encima. */
  min-height: 32px;
}

.btn-peligro {
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error);
}
.btn-peligro:hover { background: var(--color-error); color: #fff; }

/* El honeypot: fuera de pantalla, no display:none. Ver el comentario del HTML. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- Avisos y alertas ---------------------------------------------------- */

.aviso {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: .88rem;
  margin-bottom: 18px;
  border-left: 4px solid;
}
/* Tinta oscura sobre fondo claro: el token de warning no llega a 4.5:1 como
   texto sobre superficie. */
.aviso-atencion { background: #FFF3E0; color: #6B3800; border-color: var(--color-warning); }

.alerta {
  padding: 12px 14px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.alerta-error { background: #FDECEA; color: #8C1D18; border-color: var(--color-error); }
/* Tinta MEDIDA, no elegida a ojo: 8.23:1 sobre su fondo, contra el 4.5:1 que
   pide WCAG AA. El token --color-success no llega como texto sobre superficie
   clara, que es el mismo motivo por el que .aviso-atencion no usa el de
   warning. Los tres pares de esta hoja se calcularon igual. */
.alerta-ok    { background: #E9F7EC; color: #14532D; border-color: var(--color-success); }
/* Ni exito ni fallo: se hizo una parte y quedo trabajo pendiente. Tinta medida
   igual que las otras dos: 7.1:1 sobre su fondo. */
.alerta-parcial { background: #FFF3E0; color: #6B3800; border-color: var(--color-warning); }

/* --- Cláusula ------------------------------------------------------------ */

.clausula {
  max-height: 260px;
  overflow-y: auto;
  padding: 16px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: .88rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.clausula p + p { margin-top: 12px; }

/* --- Botones ------------------------------------------------------------- */

.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* 🔴 `inline-flex`, no el `inline` que traen los enlaces por defecto.
   `.btn` se usa tambien sobre <a>: "Volver a la bandeja", "Ver la carta aval",
   "Foto carnet", "Abrir" en la bandeja. En un elemento inline el padding
   vertical y el `min-height` NO agrandan la caja de linea: se dibujan por
   fuera y se montan sobre lo que tienen arriba y abajo. Por eso el boton de
   volver pisaba la tarjeta y el de la carta aval tapaba la etiqueta TELEFONO.
   Un <button> nunca lo sufrio porque ya es inline-block.
   `text-decoration:none` porque un boton subrayado no se lee como boton; el
   enlace se sigue distinguiendo por la forma, no solo por el color. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  line-height: 1.2;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  padding: 11px 22px;
  min-height: 44px;                    /* comodo en tactil */
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primario { background: var(--color-primary); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--color-secondary); }
.btn-secundario {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secundario:hover:not(:disabled) { background: var(--color-background); }
/* Deshabilitado: no se comunica solo con opacidad, tambien con el cursor y el
   propio atributo, que el lector anuncia.

   🔴 `aria-disabled` va en la MISMA regla, y no es lo mismo que `disabled`:
   un boton con `disabled` de verdad NO recibe foco, asi que quien navega con
   teclado nunca se entera de que esta ahi, y su `title` --el tooltip-- no lo
   muestra ningun navegador ni lo lee ningun lector. Con `aria-disabled` el
   boton sigue siendo enfocable y anunciable, se ve igual de apagado, y el
   motivo se puede explicar al hacer clic. Es el patron que WAI recomienda
   para "deshabilitado con explicacion". */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }

/* --- Confirmación -------------------------------------------------------- */

.numero-tramite {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  margin: 6px 0 10px;
}

/* Lo que sigue despues de enviar la solicitud.
   Se deja como <ul> con sus vinetas y no como una lista sin marcas: son cuatro
   cosas independientes y la vineta es lo que hace que se lean como tales. El
   interlineado es mas amplio que el del cuerpo porque cada item es una frase
   completa, no una palabra de una enumeracion. */
.lista-pasos {
  margin: 10px 0 18px;
  padding-left: 22px;
  color: var(--color-text);
  line-height: 1.65;
}
.lista-pasos li { margin-bottom: 8px; }

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 640px) {
  .titulo-tramite { font-size: 1.25rem; }
  .pasos { gap: 4px; }
  /* A 320px los cuatro nombres no entran: queda el numero, y el nombre solo en
     el paso actual. Reflow de WCAG 1.4.10 sin scroll horizontal. */
  .paso .paso-nombre { display: none; }
  .paso[aria-current="step"] .paso-nombre { display: inline; }
  .acciones { flex-direction: column-reverse; }
  .acciones .btn { width: 100%; }
}

@media (max-width: 640px) {
  .header { height: auto; padding: 12px 14px; flex-wrap: wrap; }
  .header-logo-lg { height: 46px; }
  .header-title { font-size: 1rem; }
  .container { padding: 16px 12px; }
  .card { padding: 16px; }
  .tema-toggle { margin-left: 0; }
}

/* ===================================================================
   Subsanación (RF-PUB-07)
   =================================================================== */

/* La observación que escribió el revisor. Es lo que el ciudadano vino a
   leer, así que va arriba del formulario y no como nota al pie. */
.observacion {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #fff8e6;
  color: #4a3000;
  border-left: 4px solid #b06f00;
  border-radius: 0 4px 4px 0;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.observacion .etq {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #7a4c00;
  margin: 0 0 4px;
}
/* 🔴 El color va EXPLÍCITO, no heredado. `.observacion` fija un fondo claro
   (#fff8e6) y el texto heredaba el de la página: con el tema oscuro eso es gris
   clarísimo sobre crema, ilegible. Yisel lo reportó dos veces el 24/09/2026
   —en la corrección del medio y en la ficha del operador— y era el mismo
   defecto: un bloque que se pinta el fondo y no se pinta la tinta.

   Regla para todo lo de acá abajo: si una regla fija `background`, fija
   `color` en la misma regla. */
.observacion p { margin: 0; color: #4a3000; }
.etq-observacion { font-size: 1.2rem; line-height: 1.2; color: #b06f00; }

.ayuda.destacado {
  background: #eef3fb;
  color: #1c2a44;
  border-left: 4px solid var(--color-primary);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
  /* Separación propia: pegado al indicador de pasos, el bloque azul parecía
     parte de él y casi se solapaban. */
  margin: 14px 0;
}

.lista-nomina { list-style: none; margin: 0; padding: 0; }

.persona {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid #d5d9e0;
  border-radius: 4px;
  margin-bottom: 8px;
}
.persona-nombre { font-weight: 600; }

/* 🔴 Nunca solo el color (regla 7): el borde grueso, el fondo y el TEXTO del
   estado dicen lo mismo por tres vías distintas. */
.persona.observada {
  border-left: 4px solid #b06f00;
  background: #fffdf7;
  color: #3a2c12;   /* explícito: el fondo es casi blanco y el tema puede ser oscuro */
}
.persona.bloqueada {
  background: #f4f5f7;
  color: #5a6472;
}
.persona-estado {
  font-size: .82rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.persona.observada .persona-estado { background: #ffe9bf; color: #6b4400; }
.persona.bloqueada .persona-estado { background: #e2e5ea; color: #454e5c; }

/* Lo que el Operador pidió corregir, textual.
   `.persona` es flex con `wrap`, así que `flex-basis:100%` lo baja a un renglón
   propio debajo del nombre y del estado, en vez de competir con ellos por el
   ancho. Es el texto más importante de la fila --es lo único que dice qué
   hacer-- pero va debajo porque primero hay que saber DE QUIÉN se habla. */
.persona-motivo {
  flex-basis: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f0e2c4;
  font-size: .9rem;
  line-height: 1.5;
  /* Tinta medida sobre el #fffdf7 de `.persona.observada`, no elegida a ojo:
     el mismo par que ya usa la pastilla de estado. */
  color: #6b4400;
}
.persona-motivo b { font-weight: 700; }

/* --- La ficha de una persona que NO hay que corregir ---------------------
   Va plegada: la lista es de la nómina entera y con todas las fichas abiertas
   hay que recorrer media pantalla para llegar a la que sí hay que corregir,
   que es a lo que el ciudadano vino. */
.persona-detalle { flex-basis: 100%; }
.persona-detalle > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  /* El triángulo del navegador queda: es el indicador de plegado que la gente
     ya conoce, y un reemplazo propio tendría que resolver su estado accesible. */
  padding: 2px 0;
}
.persona-detalle > summary::marker { color: #6b7280; }

/* Pares etiqueta/valor. `dl` y no una tabla: no son datos tabulares, y la
   regla 17 reserva las tablas para eso. */
.ficha-datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 12px 0 0;
  font-size: .9rem;
}
.ficha-datos dt { color: #4b5563; }
.ficha-datos dd { margin: 0; font-weight: 600; }

@media (max-width: 480px) {
  /* A 320 px dos columnas dejan el valor en una tira de tres caracteres. */
  .ficha-datos { grid-template-columns: 1fr; gap: 0 0; }
  .ficha-datos dd { margin-bottom: 8px; }
}

/* --- La ficha de corrección de una persona observada ---------------------
   `.persona` es una FILA horizontal, que es lo que corresponde a alguien que
   solo se muestra. Cuando además hay que editarla deja de ser una fila y pasa
   a ser un formulario, así que se apila. */
.ficha-correccion {
  flex-direction: column;
  align-items: stretch;
  padding: 16px 18px;
}
/* El nombre y el estado siguen siendo una línea, dentro de la ficha. */
.ficha-cab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* El documento identifica de quién se habla, y no se edita: monoespaciado para
   que se lea como un dato y no como un título. */
.ficha-doc {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: .9rem;
  color: #6b4400;
  margin-top: 6px;
}
.ficha-correccion .campo { margin-top: 14px; margin-bottom: 0; }
.ficha-correccion .acciones { margin-top: 18px; }

/* El resultado de guardar ESA persona, al lado de su botón y no arriba de
   todo: con tres fichas abiertas, un mensaje global no dice cuál se guardó. */
.ficha-aviso {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  border-left: 4px solid;
}
.ficha-aviso.ok    { background: #E9F7EC; color: #14532D; border-color: var(--color-success); }
.ficha-aviso.error { background: #FDECEA; color: #8C1D18; border-color: var(--color-error); }

/* --- El resumen de la confirmación de envío ------------------------------
   Lista sin viñetas porque la marca ✓/⚠ hace de viñeta, y además distingue.
   🔴 La marca es `aria-hidden`: el estado va en el TEXTO de cada línea
   ("— SIN guardar"), no solo en el símbolo ni solo en el color (regla 7). */
.lista-resumen { list-style: none; margin: 0 0 4px; padding: 0; }
.lista-resumen li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 0;
  font-size: .92rem;
  border-bottom: 1px solid var(--color-border);
}
.lista-resumen li:last-child { border-bottom: 0; }
.resumen-marca { flex-shrink: 0; font-weight: 700; }
.resumen-ok .resumen-marca    { color: var(--color-success); }
.resumen-falta                { font-weight: 600; }
.resumen-falta .resumen-marca { color: #8A4B00; }

@media (max-width: 520px) {
  .persona { flex-direction: column; align-items: flex-start; }
}

/* ===================================================================
   Ficha de persona en la nomina del Operador (RF-OPE-03)
   =================================================================== */

/* 🔴 Antes reusaba `.persona`, que es la FILA horizontal de la pantalla de
   subsanacion: `display:flex` con `justify-content:space-between` convertia el
   nombre, la grilla de datos, los adjuntos y los botones en cuatro columnas de
   una misma linea. La grilla de datos, encajada en una columna angosta,
   colapsaba a una sola columna y quedaba una tira vertical de etiquetas.
   Son dos objetos distintos y ahora tienen clases distintas. */
.ficha-persona {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-secondary);
  border-radius: 6px;
}
.ficha-persona:last-child { margin-bottom: 0; }
.ficha-persona h3 { font-size: 1rem; font-weight: 700; }
/* El `gap` del contenedor ya separa los bloques: el margen de arriba de
   `.acciones` se sumaria y dejaria los botones flotando. */
.ficha-persona .acciones { margin-top: 0; }
.ficha-persona .aviso { margin-bottom: 0; }

/* Los adjuntos son varios enlaces-boton. Con flex y `gap` se separan de forma
   medible, en vez de depender de los espacios en blanco del marcado.
   El margen de arriba lo necesita cuando cuelga directo de una tarjeta, debajo
   de la grilla de datos: el reset global deja los <p> y <div> sin margen. */
.adjuntos { display: flex; flex-wrap: wrap; gap: 8px; }

/* Un adjunto solo, colgando directo de la tarjeta: lleva su margen encima. Al
   estar en el propio enlace y no en un envoltorio, cuando el adjunto no existe
   --`hidden` gana con `display:none !important`-- el margen desaparece con el.
   Un contenedor vacio con margen dejaria un hueco que se lee como algo que
   falta cargar. */
.adjunto-suelto { margin-top: 16px; }

/* El "Volver a la bandeja" arranca la pagina y necesita separarse de la primera
   tarjeta por su cuenta. */
.volver { margin-bottom: 16px; }

/* ===================================================================
   Panel de confirmacion anclado al pie
   =================================================================== */

/* 🔴 Los tres paneles de confirmacion --Aprobador, revision de tramite y
   catalogo de medios-- son hermanos de <main>, asi que NO heredan el ancho ni
   el centrado del `.container`, y ademas son el ultimo nodo del documento. El
   resultado era el peor de los dos: pegado al borde izquierdo y abajo de todo.
   En la bandeja del Aprobador, con la grilla larga, quien hacia clic en
   "Aprobar" en una fila de arriba no veia aparecer nada.

   Anclarlo al pie de la ventana NO lo convierte en un modal: la pagina sigue
   con scroll, el foco no queda atrapado y Escape lo cierra. Al contrario,
   recien ahora se cumple la decision original --seguir viendo la grilla
   mientras se escribe el motivo-- que el panel al final del documento
   prometia y no cumplia.

   `js/panel.js` le reserva a <body> el alto del panel: al ser `fixed` tapa el
   final de la pagina, y sin la reserva las ultimas filas quedan debajo sin
   scroll que las saque de ahi. */
/* RF-ADM-05 — los marcadores, en la grilla y en el panel.
   🔴 `nowrap` porque un nombre partido a mitad de palabra —"{Documento_Person
   a}"— se lee mal y se puede copiar mal, y acá el nombre exacto es lo único
   que importa: si no coincide carácter por carácter, el envío no lo sustituye.
   La columna se ensancha en vez de partirlos. */
.badge-marcador {
  white-space: nowrap;
  font-family: var(--fuente-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

/* RF-ADM-05 — la vista previa del correo, dentro de un <iframe sandbox>.
   Alto fijo y con su propio scroll: un iframe sin alto declarado colapsa a
   150px por defecto en algunos navegadores y a 0 en otros, y la vista previa
   quedaría invisible sin que nada falle. */
.vista-previa-correo {
  width: 100%;
  height: 220px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  /* 🔴 El UNICO hex deliberado fuera de :root, y no se tokeniza: lo que se ve
     acá adentro es el correo REAL, que sale sobre blanco en la casilla de
     quien lo recibe. Atarlo a --color-surface lo pintaría oscuro en modo
     oscuro y la vista previa dejaría de mostrar lo que de verdad va a llegar,
     que es lo único para lo que existe. */
  background: #fff;
  margin-bottom: 14px;
}

.panel-pie {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 0;
  z-index: 40;
  /* El mismo token que `.container`: el panel tiene que alinearse con la
     grilla que queda detrás. Con dos literales, el día que uno cambiara el
     panel quedaría corrido y nada fallaría. */
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  max-height: 72vh;
  overflow-y: auto;
  padding: 20px 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -4px 18px rgba(0,0,40,.18), 0 -1px 4px rgba(0,0,40,.10);
}
.panel-pie .card-title { margin-bottom: 10px; }
.panel-pie .acciones { margin-top: 16px; }

/* La sombra hacia arriba es lo que despega el panel de la grilla. Sobre fondo
   oscuro la version clara no se ve, y el panel se lee como una fila mas. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel-pie {
    box-shadow: 0 -4px 18px rgba(0,0,0,.55), 0 -1px 4px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] .panel-pie {
  box-shadow: 0 -4px 18px rgba(0,0,0,.55), 0 -1px 4px rgba(0,0,0,.4);
}

/* En un celular apaisado 72vh se come la pantalla entera y deja de verse la
   grilla, que es la razon de que no sea un modal. */
@media (max-height: 520px) {
  .panel-pie { max-height: 88vh; padding: 14px 16px; }
}
@media (max-width: 640px) {
  .panel-pie {
    left: 0;
    right: 0;
    padding: 16px;
    border-radius: 0;
    border-left-width: 4px;
  }
}


/* ---------------------------------------------------------------------------
   La columna Medio de la bandeja: DOS datos, no uno.

   El declarado es lo que escribio el ciudadano en el paso 3; el vinculado es a
   que medio del catalogo lo resolvio el Operador. Hasta el 28/09/2026 la grilla
   mostraba solo el primero, asi que no habia forma de saber desde la bandeja si
   un tramite ya tenia el medio resuelto -- habia que abrirlo, y abrirlo lo TOMA.
   Y sin medio validado no sale ninguna credencial (RN-GEN-04).
   --------------------------------------------------------------------------- */
.celda-medio { line-height: 1.35; }

/* El VINCULADO es el principal: desde que se vincula, el medio del tramite pasa
   a ser ese (#5207). El declarado queda como referencia -- no se borra, porque
   sin el no habria con que contrastar una validacion discutida. */
.medio-principal { display: block; }
.medio-referencia {
  display: block;
  font-size: .82em;
  color: var(--color-muted);
}
/* 🔴 Nunca solo el color (regla 7): "Sin vincular" se distingue por la PALABRA;
   la cursiva y el tono son refuerzo, no el mensaje. */
.medio-principal.sin-vincular {
  font-style: italic;
  color: var(--color-muted);
}

/* La aclaracion de la cabecera: dice que la celda trae dos datos, sin gritar. */
.th-nota {
  display: block;
  font-weight: 400;
  font-size: .78em;
  color: var(--color-muted);
}

/* ---------------------------------------------------------------------------
   Bandeja del Aprobador
   --------------------------------------------------------------------------- */

/* La barra de acciones que va ARRIBA de una grilla.

   Va arriba y no al pie a proposito: con 250 personas, un boton al final obliga
   a recorrer la lista entera para llegar a el. Pero asi queda pegada a la
   cabecera de la tabla y se lee como parte de ella.

   Es una CLASE y no dos reglas por id porque ya paso en dos pantallas --la
   bandeja del Aprobador y el lote de impresion, las dos reportadas el
   28/09/2026-- y la tercera grilla que se escriba tiene el mismo problema. */
.barra-sobre-grilla {
  margin-bottom: 14px;
  align-items: center;
}

/* --- Diálogo modal (01/10/2026) -------------------------------------------

   Para consultar y volver, sin perder el lugar en la grilla. `<dialog>` nativo:
   el foco atrapado, el Escape y el fondo inerte los pone el navegador.

   🔴 `<dialog>` trae estilos de agente de usuario que hay que pisar: `margin:
   auto` lo centra, y sin `max-height` + `overflow` una historia larga se sale
   de la ventana y no hay forma de llegar al botón de cerrar. */
.dialogo {
  width: min(680px, calc(100vw - 32px));
  max-height: min(80vh, 720px);
  overflow-y: auto;
  margin: auto;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.dialogo::backdrop { background: rgba(0, 0, 0, .45); }

/* El botón de cerrar queda a la vista aunque la lista sea larga: pegado abajo
   dentro del propio diálogo, que es lo que se scrollea. */
.dialogo .acciones {
  position: sticky;
  bottom: -24px;
  margin-bottom: -24px;
  padding: 12px 0;
  background: var(--color-surface);
}

/* --- La historia de un trámite (#5189) ------------------------------------

   Una <ol>: es una secuencia y el orden ES el dato. El marcador numérico se
   saca --no aporta nada frente a la fecha-- y se reemplaza por un hilo
   vertical con un punto por hito, que es lo que la hace leer como línea de
   tiempo y no como una lista de frases.

   `border-left` en la lista y no en cada <li>, para que el hilo sea continuo
   entre hitos. */
.linea-tiempo {
  list-style: none;
  margin: 8px 0 18px;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--color-border);
}
.linea-tiempo li {
  position: relative;
  padding-bottom: 16px;
  font-size: .9rem;
  line-height: 1.5;
}
.linea-tiempo li:last-child { padding-bottom: 0; }

/* El punto sobre el hilo. Se dibuja con el borde del color del fondo para que
   "tape" la línea y se lea como una cuenta y no como un parche. */
.linea-tiempo li::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: 3px solid var(--color-surface);
}
/* Los hitos del EXPEDIENTE se distinguen de los de una persona: mezclados sin
   diferencia, "devuelta con observaciones" no deja ver si se habla de alguien
   o de todo el trámite. */
.linea-tiempo li.hito-tramite::before { background: var(--color-primary); }
.linea-tiempo li.hito-medio::before   { background: var(--color-warning); }

.linea-tiempo .hito-fecha {
  font-variant-numeric: tabular-nums;
  color: var(--color-muted);
  font-size: .82rem;
  margin-right: 6px;
}
/* El motivo que escribió quien resolvió. En su propio renglón y con sangría:
   es texto libre y puede ser largo, y pegado a la frase del hito se leería
   como parte de ella. */
.linea-tiempo .hito-motivo {
  display: block;
  margin-top: 3px;
  color: var(--color-muted);
  font-size: .85rem;
  font-style: italic;
}

/* Paginado de una grilla larga (#5201).

   Va al pie de la tabla porque es donde se lo busca despues de recorrerla; la
   barra de acciones sigue ARRIBA, que es lo que evita bajar 600 filas para
   llegar al boton.

   `flex-wrap` para que en un celular los dos botones y el estado no se salgan
   del ancho, y `gap` en vez de margenes para que no se sumen entre si. */
.paginado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

/* "Pagina 2 de 31 - 21 a 40 de 612". Dice el rango y no solo el numero:
   quien arma un lote necesita saber en que parte de la lista esta. */
.paginado-estado {
  font-size: .9em;
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* Los adjuntos del panel de datos: uno por renglon, para poder abrirlos de a
   uno sin perder de vista cual es cual. */
.lista-adjuntos {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* Los subtitulos del panel separan las tres partes del expediente --la persona,
   quien lo solicito y el medio-- sin competir con el titulo del panel. */
.card-subtitulo {
  font-size: .95rem;
  margin: 16px 0 6px;
  color: var(--color-primary);
}
:root:not([data-theme="light"]) .card-subtitulo { color: inherit; }
:root[data-theme="dark"] .card-subtitulo { color: inherit; }

/* El aviso de que el medio esta esperando la correccion del ciudadano (#5170).

   Va con `ficha-aviso`, que le da la caja; esto solo lo distingue del aviso
   normal --es una espera, no un problema-- y le da aire respecto de los
   botones que quedan. La palabra sigue siendo el mensaje: el color es
   refuerzo (regla 7). */
.nota-espera {
  margin: 10px 0 14px;
  border-left: 4px solid var(--color-warning);
}

/* El aviso de "este archivo ya esta cargado", pegado a su campo (#5178).

   Un input[type=file] no se puede precargar, asi que el campo se ve vacio
   aunque el archivo este. El aviso tiene que estar DONDE se mira, no en otra
   parte del formulario y en letra chica: eso fue justamente el reporte. */
.adjunto-cargado {
  color: var(--color-success);
  font-weight: 500;
}