/* Estilos del panel de la red de validadores (/validar/).
   Va DESPUÉS de tailwind.css: se apoya en su "preflight" (el reseteo base:
   encabezados, listas y botones sin estilo) y encima pone lo propio.

   Decisiones de accesibilidad que están acá y no se deberían "limpiar":
   - Foco siempre visible, de alto contraste (anillo blanco + halo negro, que se
     ve sobre fondo claro y oscuro) y SIN cabecera pegada (position sticky/fixed):
     nada tapa el elemento enfocado (WCAG 2.4.11).
   - Todo lo que se toca mide al menos 44 px de alto (2.5.8 pide 24; 44 es el
     tamaño cómodo para pulso tembloroso, switch y pantallas táctiles).
   - Los bordes de campos y botones tienen contraste >= 3:1 contra el fondo
     (1.4.11); el texto >= 4.5:1 (1.4.3).
   - Nada depende solo del color: el estado activo del menú se marca también con
     subrayado grueso y negrita; los errores llevan la palabra "Error".
   - Tamaños en rem: el zoom de texto y el de página se respetan. A 320 px de
     ancho no hay desplazamiento horizontal (1.4.10): las filas se apilan y los
     textos largos (direcciones, usuarios) se parten.
   - Sin animaciones. prefers-reduced-motion igual lo apaga todo por si se suma
     alguna después. */

:root {
    --fondo: #050505;
    --superficie: #121212;
    --superficie-2: #1c1c1c;
    --texto: #ffffff;
    --texto-suave: #d1d5db;      /* 13:1 sobre el fondo */
    --borde: #9ca3af;            /* 7:1: borde de controles */
    --borde-suave: #4b5563;      /* solo decorativo (tarjetas) */
    --enlace: #7dd3fc;           /* 12:1 */
    --acento: #fbbf24;           /* aviso destacado */
    --error: #fca5a5;            /* 10:1 */
    --exito: #86efac;            /* 14:1 */
    --foco: #ffffff;
}

html { font-size: 100%; }

body {
    margin: 0;
    background-color: var(--fondo);
    color: var(--texto);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-wrap: break-word;
}

/* ---------- Foco ---------- */
:focus { outline: none; }
:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #000;
    border-radius: 4px;
}
/* Los encabezados y contenedores que reciben el foco por programa no necesitan
   anillo (se movió el foco para leerlos, no para operarlos), pero sí se deja el
   del teclado cuando llegan con Tab. */
h1:focus:not(:focus-visible), main:focus:not(:focus-visible),
fieldset:focus:not(:focus-visible), [tabindex="-1"]:focus:not(:focus-visible) { outline: none; box-shadow: none; }
h1:focus-visible, [tabindex="-1"]:focus-visible { outline-offset: 6px; }

/* ---------- Estructura ---------- */
.contenedor { width: 100%; max-width: 52rem; margin-inline: auto; padding-inline: 1rem; box-sizing: border-box; }
.principal { flex: 1 0 auto; padding-block: 1.5rem 3rem; }

.omitir {
    position: absolute; left: .5rem; top: -4rem;
    background: #fff; color: #000; font-weight: 700;
    padding: .75rem 1rem; border-radius: .5rem; z-index: 10;
}
.omitir:focus { top: .5rem; }

.cabecera { border-bottom: 1px solid var(--borde-suave); background: #0a0a0a; }
.cabecera-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; padding-block: .5rem; }
.marca { margin: 0; font-size: 1rem; }
.marca-nombre { font-weight: 800; }
.marca-detalle { color: var(--texto-suave); }

#nav-principal ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0; padding: 0; list-style: none; }
#nav-principal a, #nav-principal button {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem;
    color: var(--texto); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer;
    text-decoration: underline; text-underline-offset: 4px;
}
#nav-principal a[aria-current="page"] {
    font-weight: 800; text-decoration-thickness: 4px; text-decoration-color: var(--texto);
}

.pie { border-top: 1px solid var(--borde-suave); padding-block: 1rem; margin-top: 2rem; }
.pie p { margin: .25rem 0; }

.solo-lectores {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Texto ---------- */
h1 { font-size: 1.75rem; line-height: 1.25; font-weight: 800; margin: 0 0 1rem; }
h2 { font-size: 1.375rem; line-height: 1.3; font-weight: 800; margin: 2rem 0 .75rem; }
h3 { font-size: 1.125rem; line-height: 1.35; font-weight: 800; margin: 0 0 .25rem; }
p { margin: .75rem 0; }
.texto-suave { color: var(--texto-suave); }
.texto-chico { font-size: .9375rem; }
.intro { font-size: 1.125rem; color: var(--texto-suave); max-width: 40rem; }

a { color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 2.75rem; padding: .5rem 1.25rem; box-sizing: border-box;
    font: inherit; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none;
    border-radius: .75rem; border: 2px solid transparent; cursor: pointer;
}
.btn-primario { background: #fff; color: #000; border-color: #fff; }
.btn-primario:hover { background: #e5e7eb; }
.btn-secundario { background: var(--superficie-2); color: #fff; border-color: var(--borde); }
.btn-secundario:hover { background: #2a2a2a; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 1; background: #2a2a2a; color: #d1d5db; border-color: var(--borde-suave); cursor: not-allowed; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

/* ---------- Tarjetas y listas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 1rem; padding: 1rem 1.25rem; }
.lista-tarjetas { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
.lista-tarjetas > li { min-width: 0; }
.tarjeta h3 { margin: 0; }
.tarjeta h3 a { color: #fff; }
.tarjeta p { margin: .25rem 0; }
.etiqueta-estado {
    display: inline-block; margin-top: .25rem; padding: .125rem .75rem;
    border: 2px solid var(--borde); border-radius: 999px; font-weight: 700; font-size: .9375rem; color: #fff;
}
.etiqueta-estado.atencion { border-color: var(--acento); color: var(--acento); }

.destacado { border: 3px solid var(--acento); border-radius: 1rem; padding: 1rem 1.25rem; background: #1a1505; margin-block: 1rem; }
.destacado h2 { margin-top: 0; font-size: 1.25rem; color: var(--acento); }
.destacado p:last-child { margin-bottom: 0; }

.vacio { border: 2px dashed var(--borde); border-radius: 1rem; padding: 1.25rem; color: var(--texto-suave); }

dl.datos { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: .5rem 1rem; margin: .75rem 0; }
dl.datos dt { font-weight: 700; color: var(--texto-suave); }
dl.datos dd { margin: 0; }
@media (max-width: 36rem) { dl.datos { grid-template-columns: minmax(0, 1fr); gap: 0; } dl.datos dd { margin-bottom: .75rem; } }

/* ---------- Formularios ---------- */
form { margin: 0; }
.campo { margin-top: 1.25rem; }
.campo > label, .campo > .etiqueta, legend { display: block; font-weight: 700; margin-bottom: .25rem; }
.campo .ayuda, .ayuda { color: var(--texto-suave); font-size: .9375rem; margin: .125rem 0 .5rem; }
.campo .error-campo, .error-campo { color: var(--error); font-weight: 700; margin: .375rem 0 0; }
.requerido { font-weight: 400; color: var(--texto-suave); }

input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="number"],
input[type="search"], input[type="date"], input[type="month"], select, textarea {
    display: block; width: 100%; box-sizing: border-box; min-height: 2.75rem;
    background: #000; color: #fff; font: inherit;
    border: 2px solid var(--borde); border-radius: .75rem; padding: .5rem .875rem;
}
textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
input[readonly], textarea[readonly] { background: #151515; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); border-width: 3px; }
select { padding-right: 2rem; }

fieldset { border: 2px solid var(--borde-suave); border-radius: 1rem; margin: 1.25rem 0 0; padding: .75rem 1.25rem 1.25rem; min-width: 0; }
fieldset > legend { padding: 0 .5rem; font-size: 1.0625rem; }
fieldset.sin-borde { border: 0; padding: 0; margin-top: 1.25rem; }
fieldset.sin-borde > legend { padding: 0; }

.opcion { display: flex; align-items: flex-start; gap: .75rem; min-height: 2.75rem; padding: .5rem 0; cursor: pointer; }
.opcion input[type="checkbox"], .opcion input[type="radio"] {
    flex: 0 0 auto; width: 1.5rem; height: 1.5rem; margin: .125rem 0 0; accent-color: #fff;
}
.opcion span { flex: 1 1 auto; min-width: 0; }
.opcion-caja { border: 2px solid var(--borde-suave); border-radius: .75rem; padding: .5rem .875rem; margin-top: .5rem; }

.resumen-errores { border: 3px solid var(--error); border-radius: 1rem; padding: 1rem 1.25rem; background: #1f0a0a; margin-bottom: 1.25rem; }
.resumen-errores p { margin: 0 0 .5rem; font-weight: 800; color: var(--error); }
.resumen-errores ul { margin: 0; padding-left: 1.25rem; }
.resumen-errores li { margin: .25rem 0; }
.resumen-errores a { color: #fff; }

.aviso-ok { color: var(--exito); font-weight: 700; margin-top: .75rem; }
.aviso-error { color: var(--error); font-weight: 700; margin-top: .75rem; }
.contador { color: var(--texto-suave); font-size: .9375rem; margin: .25rem 0 0; }

/* ---------- Texto de consentimiento ---------- */
.texto-legal { border: 2px solid var(--borde-suave); border-radius: 1rem; padding: .5rem 1.25rem; background: var(--superficie); max-width: 44rem; }
.texto-legal p { margin: .75rem 0; }
.texto-legal.facil { font-size: 1.1875rem; line-height: 1.8; }
.texto-legal.facil p { margin: .5rem 0; }

/* ---------- Diálogos ---------- */
dialog {
    background: var(--superficie); color: #fff; border: 2px solid var(--borde); border-radius: 1rem;
    padding: 1.25rem; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); overflow: auto; box-sizing: border-box;
}
dialog::backdrop { background: rgba(0, 0, 0, .8); }
dialog h2 { margin: 0 2.5rem .75rem 0; font-size: 1.25rem; }
.dialogo-cerrar { position: absolute; top: .5rem; right: .5rem; }
dialog .campo:first-of-type { margin-top: .5rem; }
.fila-copiar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
.fila-copiar input, .fila-copiar textarea { flex: 1 1 12rem; min-width: 0; }

/* ---------- Protocolo (lo dibuja /shared/protocolo-validacion.js) ---------- */
.protocolo { background: var(--superficie); border: 1px solid var(--borde-suave); border-radius: 1rem; padding: 1rem 1.25rem; }
.protocolo a { word-break: break-all; }
.protocolo .protocolo-titulo { margin: 0; }

.enlace-externo-aviso { color: var(--texto-suave); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
    .btn, .tarjeta, fieldset, .destacado, .resumen-errores { border: 2px solid CanvasText; }
}

/* ---------- Casillas y radios ----------
   Dibujados a mano: los del navegador en tema oscuro quedan gris sobre negro,
   con un borde que no llega a 3:1 (1.4.11). Borde claro de 2 px, y marcado con
   relleno blanco + marca negra (no depende del color: cambia la forma). */
.opcion input[type="checkbox"], .opcion input[type="radio"] {
    -webkit-appearance: none; appearance: none;
    background: #000; border: 2px solid var(--borde); box-sizing: border-box; display: grid; place-content: center;
}
.opcion input[type="radio"] { border-radius: 50%; }
.opcion input[type="checkbox"] { border-radius: .375rem; }
.opcion input[type="radio"]::before { content: ""; width: .75rem; height: .75rem; border-radius: 50%; background: #000; transform: scale(0); }
.opcion input[type="checkbox"]::before { content: ""; width: .8rem; height: .8rem; transform: scale(0);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: #000; }
.opcion input:checked { background: #fff; border-color: #fff; }
.opcion input:checked::before { transform: scale(1); }
@media (forced-colors: active) {
    .opcion input:checked { background: Highlight; }
    .opcion input::before { background: HighlightText; }
}

/* ---------- Coordinación (validar-coordinar.js) ---------- */
h4, h5, h6 { font-size: 1.0625rem; line-height: 1.35; font-weight: 800; margin: 0 0 .25rem; }

/* Navegación propia de coordinación. El lugar actual se marca con negrita y un
   subrayado más grueso (no solo con el color), igual que el menú principal. */
.nav-coordinacion ul { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1rem; padding: 0; list-style: none;
    border-bottom: 1px solid var(--borde-suave); }
.nav-coordinacion a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem;
    color: var(--texto); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.nav-coordinacion a[aria-current] { font-weight: 800; text-decoration-thickness: 4px; text-decoration-color: var(--texto); }

/* Confirmación de la última acción: siempre presente en la página (para que se
   anuncie) y sin altura mientras está vacía. */
.mensaje-accion { margin: .75rem 0; }
.mensaje-accion:empty { margin: 0; }
.texto-largo { white-space: pre-line; }

.cupo { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--borde-suave); }
.tarjeta .acciones { margin-top: .75rem; }
.tarjeta dl.datos { margin: .5rem 0; }

details.vista-previa > summary, details.historial > summary { display: flex; align-items: center; min-height: 2.75rem; font-weight: 700; cursor: pointer; }
details.vista-previa[open] > summary, details.historial[open] > summary { margin-bottom: .5rem; }

/* Mi perfil, «Qué podés validar y con qué»: una casilla por forma de uso y, debajo de
   las marcadas, el detalle opcional. La sangría alinea la descripción y el detalle con
   el texto de la casilla (1.5 rem de casilla + .75 rem de separación). */
.forma-uso { border-top: 1px solid var(--borde-suave); padding: .25rem 0 .5rem; }
.forma-uso > .ayuda, .forma-uso > details { margin-left: 2.25rem; }
.forma-uso > .ayuda { margin-top: 0; }
details.detalle-apoyo > summary { display: flex; flex-wrap: wrap; align-items: center; min-height: 2.75rem; font-weight: 700; cursor: pointer; }
details.detalle-apoyo[open] > summary { margin-bottom: .5rem; }
.entrada-apoyo { margin-top: 1rem; }

/* ---------- Hallazgos y evidencia (validar-hallazgos.js) ---------- */
.hallazgo h3 { overflow-wrap: anywhere; }
/* La ficha de un hallazgo es un <dl> con su propia clase (y no «datos»): así el resto
   de la pantalla y sus pruebas no cuentan los <dl> de los hallazgos como los datos de
   la tarea. «Qué pasó» es texto libre de la persona: respeta sus saltos de línea. */
dl.ficha-hallazgo { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: .5rem 1rem; margin: .5rem 0; }
dl.ficha-hallazgo dt { font-weight: 700; color: var(--texto-suave); }
dl.ficha-hallazgo dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 36rem) { dl.ficha-hallazgo { grid-template-columns: minmax(0, 1fr); gap: 0; } dl.ficha-hallazgo dd { margin-bottom: .75rem; } }
.hallazgo h4 { margin-top: .75rem; }
#lista-hallazgos > h3 { margin-top: 2rem; }

.evidencias { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.evidencia { background: var(--superficie-2); border: 1px solid var(--borde-suave); border-radius: .75rem; padding: .5rem .875rem; }
.evidencia p { margin: .125rem 0; overflow-wrap: anywhere; }
.evidencia .acciones { margin-top: .5rem; }

/* Dentro del diálogo de evidencia: cada forma de sumarla es un bloque. */
.bloque-evidencia { border-top: 1px solid var(--borde-suave); margin-top: 1.25rem; padding-top: .25rem; }
.bloque-evidencia h3 { margin-top: .75rem; }
.tiempo-grabacion { font-weight: 700; font-variant-numeric: tabular-nums; }
.medio-evidencia { display: block; max-width: 100%; margin: .75rem 0; }
audio.medio-evidencia { width: 100%; }
dialog audio { width: 100%; }
input[type="file"] { display: block; max-width: 100%; min-height: 2.75rem; padding: .5rem 0; font: inherit; color: #fff; }

/* Barra de progreso por pasos. El texto del paso (en el párrafo con role="status")
   es lo que dice qué pasa; la barra lo acompaña a la vista y trae aria-valuenow. */
.progreso { margin: .75rem 0; }
.progreso-pista { height: 1rem; border: 2px solid var(--borde); border-radius: 999px; background: #000; overflow: hidden; }
.progreso-barra { height: 100%; width: 0; background: #fff; }
@media (forced-colors: active) {
    .progreso-pista { border-color: CanvasText; }
    .progreso-barra { background: Highlight; }
}

/* `hidden` tiene que ocultar SIEMPRE: .btn y otras clases ponen su propio `display`
   y, con la misma especificidad y después del reseteo de tailwind.css, le ganaban
   al atributo (un botón con hidden seguía a la vista). */
[hidden] { display: none !important; }

/* ---------- Mapa para probar (validar-borrador.js) ----------
   Un <dialog> modal a pantalla completa con el visor de mapas adentro. Se pisa solo
   lo que cambia respecto del diálogo común (que es chico y con scroll propio): acá el
   que hace scroll es el visor, dentro de su iframe. `[open]` para no mostrar el
   diálogo cerrado (un `display` en la regla base lo mostraría siempre). */
dialog.dialogo-mapa[open] {
    display: flex; flex-direction: column;
    width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
    margin: 0; padding: .75rem; border-radius: 0; border-width: 0; overflow: hidden;
}
dialog.dialogo-mapa h2 { margin-right: 0; }
.dialogo-mapa-cuerpo { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.barra-del-mapa { margin-top: 0; margin-bottom: .5rem; align-items: center; }
.visor-validacion { flex: 1 1 auto; width: 100%; min-height: 0; border: 2px solid var(--borde); border-radius: .75rem; background: #000; }
.bloque-abrir-mapa { margin-top: 1rem; }

/* ---------- Tablas de datos (horas, liquidaciones) ----------
   <caption> visible, encabezados con scope. En pantallas angostas la tabla se
   desplaza DENTRO de su contenedor (que recibe el foco para poder hacerlo con el
   teclado): la página en sí no se desborda (1.4.10), y una tabla de datos puede
   desplazarse porque apilarla le quitaría el sentido de tabla. */
.tabla-scroll { overflow-x: auto; margin: .75rem 0; border: 1px solid var(--borde-suave); border-radius: .75rem; max-width: 100%; }
table.tabla { width: 100%; min-width: 32rem; border-collapse: collapse; }
table.tabla tbody th[scope="row"], table.tabla tfoot th[scope="row"] { min-width: 11rem; }
table.tabla caption { text-align: left; font-weight: 800; padding: .75rem 1rem .25rem; }
table.tabla th, table.tabla td { text-align: left; padding: .625rem 1rem; border-top: 1px solid var(--borde-suave); vertical-align: top; overflow-wrap: break-word; }
table.tabla thead th { color: var(--texto-suave); font-weight: 700; }
table.tabla tbody th, table.tabla tfoot th { font-weight: 700; }
table.tabla tfoot th, table.tabla tfoot td { font-weight: 800; border-top: 2px solid var(--borde); }
table.tabla th.num, table.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla a { color: var(--enlace); }
/* Una fila de formulario corta dentro de una tabla (por ejemplo la tarifa de un nivel). */
.fila-campo-corto { max-width: 14rem; }
/* Tiempo de trabajo dentro de la tarjeta de una persona asignada (coordinación). */
.bloque-tiempo { border-top: 1px solid var(--borde-suave); margin-top: 1rem; padding-top: .25rem; }
.bloque-tiempo h5 { margin-top: .75rem; }
.sub-titulo { margin-top: 1.5rem; }

/* ---------- Mensajes con coordinación (validar-mensajes.js, Fase 5) ----------
   Una conversación en una <ol>. Lo NUEVO se marca con la palabra «Nuevo» (en el
   HTML) y además con un borde grueso a la izquierda: nada depende solo del color.
   Lo propio (mío) se corre a la derecha un poco para distinguirlo sin color. */
.seccion-mensajes { margin-top: 1.5rem; }
.hilo-mensajes { list-style: none; padding: 0; margin: .75rem 0; display: grid; gap: .625rem; grid-template-columns: minmax(0, 1fr); }
.mensaje-hilo { background: var(--superficie); border: 1px solid var(--borde-suave); border-left-width: 4px; border-radius: .75rem; padding: .625rem 1rem; }
.mensaje-hilo.mio { margin-left: 1.25rem; background: var(--superficie-2); }
.mensaje-hilo.nuevo { border-color: var(--acento); border-left-width: 8px; }
.mensaje-hilo p { margin: .25rem 0; }
.mensaje-autor { margin: 0; }
.mensaje-autor .etiqueta-estado { margin-left: .5rem; }
@media (max-width: 30rem) { .mensaje-hilo.mio { margin-left: .5rem; } }
/* Oferta abierta de un cupo (coordinación, Fase 5): estado y acción debajo de los requisitos. */
.oferta { margin: .5rem 0; }
.oferta p { margin: .25rem 0; }