/* Estilos del informe de una validación con personas (validacion-informe.js).

   El informe se dibuja en DOS páginas distintas: el seguimiento del gestor
   (gestor/validacion.html, fondo verde, utilidades de Tailwind) y la coordinación
   de /validar/ (fondo negro, estilos propios en validar.css). Para que se vea igual
   y no dependa de las clases de ninguna de las dos, tiene su propia hoja, con
   colores fijos que cumplen contraste sobre los dos fondos (texto >= 4,5:1; bordes
   de controles >= 3:1) y nombres que empiezan con `inf-`.

   Decisiones de accesibilidad que están acá y no se deberían "limpiar":
   - Nada se dice solo con color: la gravedad y la exigencia legal van en palabras;
     el color del borde del hallazgo es un refuerzo.
   - Foco siempre visible (anillo blanco con halo negro) y objetivos de 44 px.
   - Tamaños en rem y textos que se parten: a 320 px de ancho no hay scroll
     horizontal; la tabla de criterios se desplaza dentro de su propio contenedor
     (que recibe el foco y tiene nombre).
   - Al imprimir, queda SOLO el informe, en negro sobre blanco, sin botones, con cada
     enlace seguido de su dirección y sin cortar un hallazgo entre dos páginas. */

.inf-raiz { color: #fff; line-height: 1.6; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 1.5rem; }
.inf-raiz > div:empty { display: none; }

.inf-raiz :focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #000;
    border-radius: 4px;
}
.inf-raiz [tabindex="-1"]:focus:not(:focus-visible) { outline: none; box-shadow: none; }

.inf-raiz h3, .inf-raiz h4, .inf-raiz h5 { font-weight: 800; line-height: 1.3; margin: 0 0 .5rem; }
.inf-raiz h3 { font-size: 1.375rem; }
.inf-raiz h4 { font-size: 1.125rem; }
.inf-raiz p { margin: .5rem 0; }
.inf-raiz ul, .inf-raiz ol { margin: .5rem 0; padding-left: 1.5rem; }
.inf-raiz ul { list-style: disc; }
.inf-raiz ol { list-style: decimal; }
.inf-raiz li + li { margin-top: .5rem; }

.inf-raiz a { color: #7dd3fc; text-decoration: underline; text-underline-offset: 3px; }
.inf-raiz a:hover { text-decoration-thickness: 3px; }

.inf-suave { color: #d1d5db; }
.inf-chico { font-size: .9375rem; }

/* Región de estado y de error: existen siempre en el DOM (vacías) para que el lector
   de pantalla anuncie el texto cuando llega. */
.inf-estado:empty, .inf-alerta:empty { display: none; }
.inf-alerta { color: #fecaca; background: rgba(127, 29, 29, .45); border: 2px solid #f87171; border-radius: .75rem; padding: .75rem 1rem; font-weight: 700; }

/* Botones y campos */
.inf-acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.inf-boton {
    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;
    color: #fff; background: rgba(255, 255, 255, .14);
    border: 2px solid rgba(255, 255, 255, .7); border-radius: .75rem; cursor: pointer;
}
.inf-boton:hover { background: rgba(255, 255, 255, .24); }
.inf-boton[aria-disabled="true"] { opacity: .6; cursor: progress; }
.inf-boton-primario { color: #000; background: #fff; border-color: #fff; }
.inf-boton-primario:hover { background: #e5e7eb; }

.inf-campo { display: flex; flex-direction: column; gap: .5rem; max-width: 100%; }
.inf-campo label { font-weight: 700; }
.inf-select {
    min-height: 2.75rem; max-width: 100%; box-sizing: border-box; padding: .5rem .75rem;
    font: inherit; color: #fff; background: #000;
    border: 2px solid #9ca3af; border-radius: .75rem;
}
.inf-formulario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.inf-formulario .inf-campo { flex: 1 1 18rem; min-width: 0; }

/* Tarjetas */
.inf-seccion {
    background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 1rem; padding: 1.25rem; min-width: 0;
}

/* Pares rótulo / valor */
.inf-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: .5rem 0; }
.inf-datos dt { color: #d1d5db; margin-top: .5rem; }
.inf-datos dd { margin: 0; font-weight: 700; }
@media (min-width: 40rem) {
    .inf-datos { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 1rem; }
    .inf-datos dt, .inf-datos dd { margin-top: .35rem; }
}

/* Hallazgos */
.inf-hallazgos { list-style: none; padding-left: 0; }
.inf-hallazgo {
    background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .25);
    border-left-width: 8px; border-radius: .75rem; padding: 1rem;
    break-inside: avoid;
}
.inf-hallazgo-bloqueante { border-left-color: #fca5a5; }
.inf-hallazgo-grave { border-left-color: #fdba74; }
.inf-hallazgo-molesto { border-left-color: #fde68a; }
.inf-sev {
    display: inline-block; font-weight: 800; padding: .1rem .7rem;
    border: 2px solid currentColor; border-radius: 999px;
}
.inf-sev-bloqueante { color: #fca5a5; }
.inf-sev-grave { color: #fdba74; }
.inf-sev-molesto { color: #fde68a; }

.inf-evidencias { list-style: none; padding-left: 0; }
.inf-evidencias li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }

/* Tabla de criterios */
.inf-tabla-caja { overflow-x: auto; max-width: 100%; }
/* min-width: en una pantalla angosta la tabla se desplaza dentro de su contenedor en vez de
   partir las palabras letra por letra (los datos tabulares pueden desplazarse, 1.4.10). */
.inf-tabla { width: 100%; min-width: 34rem; border-collapse: collapse; text-align: left; font-size: .9375rem; overflow-wrap: normal; }
.inf-tabla caption { text-align: left; font-weight: 800; padding-bottom: .5rem; }
.inf-tabla th, .inf-tabla td { padding: .5rem .75rem .5rem 0; vertical-align: top; border-top: 1px solid rgba(255, 255, 255, .3); }
.inf-tabla thead th { color: #d1d5db; border-top: 0; }
.inf-tabla th[scope="row"] { font-weight: 700; }

/* Solo se ve al imprimir (el título del informe, ya que el de la página no se imprime). */
.inf-solo-impresion { display: none; }

/* ---------- Impresión / Guardar como PDF ----------
   `validacion-informe.js` marca con `inf-ancestro` cada contenedor que lleva al informe
   y con `inf-imprimiendo` al <body> justo antes de llamar a window.print(). Se oculta
   todo lo que no es ni el informe ni un contenedor que lo lleva (cabecera, credenciales,
   diálogos…) con display:none, no con visibility: así no quedan páginas en blanco. */
@media print {
    body.inf-imprimiendo { background: #fff !important; color: #000 !important; display: block !important; min-height: 0 !important; }
    body.inf-imprimiendo > *:not(.inf-ancestro):not(.inf-raiz),
    body.inf-imprimiendo .inf-ancestro > *:not(.inf-ancestro):not(.inf-raiz) { display: none !important; }
    body.inf-imprimiendo .inf-ancestro { display: block !important; padding: 0 !important; margin: 0 !important; max-width: none !important; background: transparent !important; }

    .inf-raiz { color: #000 !important; font-size: 11pt; display: block !important; }
    .inf-raiz > * + * { margin-top: 1rem; }
    .inf-raiz * { color: #000 !important; background: transparent !important; border-color: #000 !important; box-shadow: none !important; }
    .inf-raiz .inf-acciones, .inf-raiz .inf-formulario, .inf-raiz .inf-sin-imprimir, .inf-raiz button, .inf-raiz .inf-estado, .inf-raiz .inf-alerta { display: none !important; }
    .inf-solo-impresion { display: block !important; font-size: 1.1rem; font-weight: 800; }
    .inf-seccion { border: 1px solid #000; break-inside: auto; }
    .inf-raiz h3, .inf-raiz h4, .inf-raiz h5 { break-after: avoid; }
    .inf-hallazgo, .inf-raiz li, .inf-tabla tr { break-inside: avoid; }
    .inf-tabla-caja { overflow: visible !important; }
    .inf-tabla { min-width: 0; }
    /* El enlace dice a dónde va aunque en papel no se pueda tocar. */
    .inf-raiz a { text-decoration: underline; }
    .inf-raiz a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; overflow-wrap: anywhere; }
    .inf-sev { border-color: #000 !important; }
}