/* Paleta INFLEXIA (Operacion/Marca/assets/inflexia-tokens.css). teal-500 solo como relleno:
   como texto sobre fondo claro no alcanza AA, así que el texto usa teal-700. */
:root {
  --tinta: #0F2E44; --teal: #1B7E8C; --teal-texto: #14606C; --fondo: #F6F8F9; --blanco: #FFFFFF;
  --borde: #D9E1E6; --gris: #5B6B77; --rojo: #A3261E; --rojo-fondo: #FBECEA; --ambar: #8A5A00;
  --ambar-fondo: #FFF4DC; --verde: #1E6B3A; --verde-fondo: #E8F4EC;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Calibri, Arial, sans-serif; color: var(--tinta); background: var(--fondo); font-size: 15px; line-height: 1.45; }
a { color: var(--teal-texto); }
header.barra { background: var(--tinta); color: var(--blanco); padding: 10px 24px; display: flex; align-items: center; gap: 24px; }
header.barra a { color: var(--blanco); text-decoration: none; }
header.barra .marca { font-weight: 700; letter-spacing: .02em; }
header.barra .logo-cliente { height: 40px; width: auto; padding-right: 16px; border-right: 1px solid rgba(255,255,255,.3); }
footer.pie { text-align: center; color: var(--gris); font-size: .82rem; padding: 18px 0 28px; }
header.barra nav { display: flex; gap: 18px; flex: 1; }
header.barra form { margin: 0; }
header.barra button { background: transparent; color: var(--blanco); border: 1px solid rgba(255,255,255,.4); }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
section.panel { background: var(--blanco); border: 1px solid var(--borde); border-radius: 6px; padding: 18px 20px; margin-bottom: 18px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { font-size: .82rem; color: var(--gris); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
button, .boton { background: var(--teal-texto); color: var(--blanco); border: 0; border-radius: 4px; padding: 7px 14px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; }
button.secundario, .boton.secundario { background: var(--blanco); color: var(--teal-texto); border: 1px solid var(--teal-texto); }
button.chico { padding: 3px 9px; font-size: .85rem; }
input[type=text], input[type=email], select { font: inherit; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 4px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nota { color: var(--gris); font-size: .9rem; }
.estado { font-size: .82rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.estado.Cargado { background: var(--verde-fondo); color: var(--verde); }
.estado.Falta, .estado.Ilegible { background: var(--rojo-fondo); color: var(--rojo); }
.estado.No.aplica, .estado.No.requerido, .estado.sin { background: var(--fondo); color: var(--gris); }
.hallazgo { border-left: 4px solid var(--rojo); background: var(--rojo-fondo); padding: 10px 12px; margin: 8px 0; border-radius: 0 4px 4px 0; }
.hallazgo.aviso { border-left-color: var(--ambar); background: var(--ambar-fondo); }
.hallazgo .regla { font-weight: 700; margin-right: 6px; }
.hallazgo .fuente, .hallazgo .parrafo { font-size: .88rem; color: var(--gris); margin-top: 4px; }
.cerrado { background: var(--verde-fondo); border: 1px solid var(--verde); color: var(--verde); padding: 10px 14px; border-radius: 4px; }
.aviso-caja { background: var(--ambar-fondo); color: var(--ambar); padding: 10px 14px; border-radius: 4px; }
details summary { cursor: pointer; color: var(--teal-texto); }
@media print {
  header.barra, .no-imprimir { display: none; }
  body { background: var(--blanco); }
  section.panel { border: 0; padding: 0; }
}