/* Portal de resultados, Laboratorio Clínico Holanda.
   Estilo sobrio e institucional: gris claro, superficies blancas, azul de la
   marca para acciones y la línea naranja del logo como único acento. */

:root {
  --holanda-azul: #00487a;
  --holanda-azul-hondo: #003459;
  --holanda-naranja: #f09018;
  --tinta: #1f2933;
  --gris: #52606d;
  --gris-claro: #8a96a3;
  --linea: #dde3e9;
  --linea-fuerte: #c3ced8;
  --fondo: #f3f5f7;
  --superficie: #ffffff;
  --acento: var(--holanda-azul);
  --acento-oscuro: var(--holanda-azul-hondo);
  --acento-suave: #e8f0f7;
  --alerta: #b42318;
  --alerta-suave: #fdf0ee;
  --ok-tinta: #1f5c3a;
  --ok-suave: #e9f5ee;
  --radio: 8px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 14px/1.5 "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
:focus-visible { outline: 2px solid #0f6fb5; outline-offset: 2px; }
.oculto { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
table.datos th, .tabla-desplazable { position: relative; }  /* contiene los textos .oculto */

/* ---------- Estructura de las pantallas internas ---------- */
.cuerpo-interior { min-height: 100vh; display: flex; flex-direction: column; border-top: 4px solid #0f6fb5; }
.cuerpo-interior > main { flex: 1; width: 100%; }

/* Permisos por convenio y centro */
.alcances { list-style: none; margin: 8px 0 14px; padding: 0; border-top: 1px solid var(--linea); }
.alcances li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  padding: 9px 0; border-bottom: 1px solid var(--linea); }
.alcances li a { margin-right: auto; }
/* Selector de convenios y centros: lo marcado es lo que el usuario verá. */
.arbol { margin-top: 14px; border: 1px solid var(--linea-fuerte); border-radius: 8px; background: var(--superficie); }
.arbol-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px; border-bottom: 1px solid var(--linea); }
.arbol-cabecera input[type=search] { flex: 1 1 260px; width: auto; }
.arbol-resumen { font-size: 13px; color: var(--gris); }
.arbol-sueltos { list-style: none; margin: 0; padding: 4px 12px 10px; border-bottom: 1px solid var(--linea); background: #fff7e6; }
.arbol-sueltos .casilla { margin-top: 8px; font-size: 13.5px; }
.arbol-lista { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow: auto; }
.arbol-lista > li { border-bottom: 1px solid var(--linea); }
.arbol-lista > li:last-child { border-bottom: 0; }
.arbol-convenio { display: flex; align-items: center; gap: 10px; padding: 8px 12px; min-height: 44px; }
.arbol-convenio input, .arbol-centros input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--holanda-azul); }
.arbol-convenio label { margin: 0; font-weight: 500; font-size: 14px; flex: 1; cursor: pointer; }
.arbol-estado { font-size: 13px; color: var(--holanda-azul); white-space: nowrap; }
.arbol-abrir { flex: none; width: 32px; height: 32px; border: 0; border-radius: 6px; background: none; color: var(--gris); font-size: 18px; line-height: 1; cursor: pointer; }
.arbol-abrir:hover { background: #eef3f8; color: var(--tinta); }
.arbol-abrir:focus-visible { outline: 2px solid #5aa9de; outline-offset: 1px; }
.arbol-centros { list-style: none; margin: 0; padding: 0 12px 10px 38px; }
.arbol-centros label { display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 0; font-weight: 400; font-size: 13.5px; cursor: pointer; }
.arbol-vacio { padding: 12px; margin: 0; }
.lista-centros { columns: 2 260px; column-gap: 32px; margin: 8px 0 0; padding-left: 18px; }
.lista-centros li { break-inside: avoid; padding: 2px 0; }

/* Usuarios del sitio antiguo */
.antiguos-intro { max-width: 75ch; margin: 0 0 16px; }
.antiguos-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 12px; }
.antiguos-filtros label { margin: 0 0 4px; }
.antiguos-buscar { flex: 1 1 240px; }
.antiguos-acciones { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }

/* Franja de "ver como": fija arriba para que nunca se olvide en qué cuenta se está. */
.ver-como {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  background: #fff7e6; color: #6b4200; border-bottom: 2px solid #e0a43a; padding: 10px 28px; font-size: 14px;
}
.ver-como p { margin: 0; max-width: 75ch; }
.ver-como form { margin: 0; }
.ver-como .boton { background: #8a5300; min-height: 36px; }
.ver-como .boton:hover { background: #6b4200; }

.barra {
  background: var(--superficie); border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 28px; padding: 0 28px; min-height: 64px;
}
.barra .marca { display: flex; align-items: center; gap: 14px; color: var(--tinta); text-decoration: none; flex-shrink: 0; }
.barra .marca img { height: 40px; width: auto; }
.marca-portal { font-size: 14px; font-weight: 600; color: var(--holanda-azul-hondo); padding-left: 14px; border-left: 1px solid var(--linea); }

.menu { display: flex; align-self: stretch; gap: 4px; }
.menu a {
  display: flex; align-items: center; padding: 0 12px; color: var(--gris); font-weight: 500;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.menu a:hover { color: var(--holanda-azul); text-decoration: none; }
.menu a[aria-current="page"] { color: var(--holanda-azul-hondo); border-bottom-color: var(--holanda-azul); font-weight: 600; }

.usuario { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; }
.usuario-nombre { color: var(--tinta); text-align: right; line-height: 1.4; }
.usuario-nombre small { display: block; color: var(--gris); font-size: 12px; }
.usuario a { color: var(--gris); }
.usuario a:hover, .usuario a[aria-current="page"] { color: var(--holanda-azul); }

.contenedor { max-width: 1040px; margin: 0 auto; padding: 32px 28px 24px; }
.estrecho { max-width: 520px; }
.titulo-pagina { font-size: 1.5rem; color: var(--holanda-azul-hondo); margin-bottom: 16px; }
.pie { color: var(--gris); font-size: 12px; text-align: center; padding: 20px 16px; }

/* ---------- Componentes ---------- */
.tarjeta {
  background: var(--superficie); border: 1px solid #e6ebf0;
  border-radius: 12px; padding: 24px; margin-bottom: 20px;
  box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 4px 16px rgba(16, 42, 67, .05);
}
.tarjeta h2 { display: flex; align-items: center; gap: 8px; }

label { display: block; font-size: 13px; color: var(--tinta); font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea-fuerte);
  border-radius: 6px; font: inherit; font-size: 15px; background: #fff; color: var(--tinta);
}
input::placeholder { color: var(--gris-claro); }
input:focus, select:focus, textarea:focus { outline: 2px solid #5aa9de; outline-offset: 1px; border-color: var(--holanda-azul); }
.ayuda-campo { color: var(--gris); font-size: 12.5px; margin: 6px 0 0; }
.fila { display: flex; gap: 14px; flex-wrap: wrap; }
.fila > * { flex: 1 1 220px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px;
  background: var(--acento); color: #fff; border: 0; border-radius: 8px;
  padding: 0 18px; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 52, 89, .25); transition: background-color .12s, box-shadow .12s;
}
.boton:hover { background: var(--acento-oscuro); text-decoration: none; box-shadow: 0 2px 6px rgba(0, 52, 89, .3); }
.boton:active { box-shadow: none; }
.boton:disabled { opacity: .65; cursor: progress; }
.boton.deshabilitado { background: #e9edf1; color: var(--gris); box-shadow: none; cursor: not-allowed; }
.boton.secundario { background: var(--acento-suave); color: var(--holanda-azul); box-shadow: none; }
.boton.secundario:hover { background: #d7e5f1; box-shadow: none; }
.boton.peligro { background: var(--alerta-suave); color: var(--alerta); box-shadow: none; }
.boton.peligro:hover { background: #fadfdb; box-shadow: none; }
.boton.pequeno { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 6px; }
.boton-ancho { width: 100%; margin-top: 22px; }

.aviso { border-radius: 6px; padding: 11px 14px; margin: 14px 0; font-size: 13.5px; border: 1px solid; }
.aviso.error { background: var(--alerta-suave); color: #7a1d14; border-color: #efc2bc; }
.aviso.ok { background: var(--ok-suave); color: var(--ok-tinta); border-color: #b9dcc6; }
.aviso.info { background: var(--acento-suave); color: var(--holanda-azul-hondo); border-color: #c9dbea; }
.aviso.alerta { background: #fff7e6; color: #6b4200; border-color: #f3d39a; }
.contenedor > .aviso:first-child { margin-top: 0; }

table.datos { width: 100%; border-collapse: collapse; font-size: 14px; }
table.datos th, table.datos td { text-align: left; padding: 11px 12px; border-bottom: 1px solid #edf1f4; vertical-align: top; }
table.datos th { color: var(--gris); font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--linea); padding-top: 8px; padding-bottom: 8px; }
table.datos tbody tr:last-child td { border-bottom: 0; }
table.datos tbody tr:hover td { background: #f8fafc; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.marca-alerta { color: var(--alerta); font-weight: 700; }

/* ---------- Búsqueda ---------- */
.buscador { padding: 22px 24px 20px; }
.selector-tipo { border: 0; padding: 3px; margin: 0 0 6px; display: inline-flex; gap: 2px; background: #eef2f6; border-radius: 9px; }
.selector-tipo legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.selector-tipo label { margin: 0; font-weight: 500; font-size: 14px; color: var(--gris); cursor: pointer; }
.selector-tipo input { position: absolute; opacity: 0; }
.selector-tipo span { display: block; padding: 7px 16px; border-radius: 7px; transition: background-color .12s, color .12s; }
.selector-tipo label:hover span { color: var(--holanda-azul-hondo); }
.selector-tipo input:checked + span { background: #fff; color: var(--holanda-azul-hondo); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 42, 67, .15); }
.selector-tipo input:focus-visible + span { outline: 2px solid var(--holanda-naranja); outline-offset: 1px; }
.buscador-fila { display: flex; gap: 12px; align-items: flex-end; }
.buscador-campo { flex: 1; min-width: 0; }
.buscador-campo input { font-size: 16px; padding: 0 14px; height: 46px; border-radius: 8px; }
.buscador .boton { min-height: 46px; padding: 0 30px; font-size: 15px; }

.paciente { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 16px;
  padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--linea); }
.paciente h2 { font-size: 1.25rem; color: var(--holanda-azul-hondo); margin: 0; }
.paciente p { margin: 0; color: var(--gris); font-variant-numeric: tabular-nums; }
.separador-suave { display: inline-block; width: 1px; height: 12px; background: var(--linea-fuerte); margin: 0 10px; vertical-align: middle; }
.tabla-atenciones td { vertical-align: middle; }
.tabla-atenciones .fecha { font-variant-numeric: tabular-nums; white-space: nowrap; width: 120px; }
.tabla-atenciones .accion { text-align: right; width: 1%; white-space: nowrap; }
.tabla-atenciones .original { white-space: nowrap; width: 1%; }
.marca-original { display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 600;
  color: var(--ok-tinta); background: var(--ok-suave); border: 1px solid #b9dcc6; }
.vacio h2 { color: var(--holanda-azul-hondo); }
.vacio p { color: var(--gris); margin: 0; }

/* ---------- Informe ---------- */
.acciones-informe { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.enlace-volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.informe { padding: 32px; }
.informe-cabecera { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--linea); }
.informe-cabecera h1 { font-size: 1.375rem; color: var(--holanda-azul-hondo); margin: 0 0 2px; }
.informe-sub { color: var(--gris); margin: 0; font-variant-numeric: tabular-nums; }
.informe-datos { display: grid; grid-template-columns: repeat(2, minmax(150px, auto)); gap: 10px 32px; margin: 0; }
.informe-datos dt { color: var(--gris); font-size: 12.5px; }
.informe-datos dd { margin: 0; font-weight: 600; }
.examen { margin-top: 32px; }
.examen h2 { color: var(--holanda-azul-hondo); font-size: 1.0625rem; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
.tabla-resultados td:first-child { width: 34%; }
.tabla-resultados .resultado { font-weight: 600; }
.fuera-de-rango .resultado { color: var(--alerta); }
.marca-rango { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 600;
  color: var(--alerta); background: var(--alerta-suave); border: 1px solid #efc2bc; }
.examen-area { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: var(--gris); }
.examen-datos { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 10px 0 0; font-size: 12.5px; color: var(--gris); }
.examen-datos div { display: flex; gap: 6px; }
.examen-datos dt { font-weight: 600; }
.examen-datos dd { margin: 0; }
.firmas-pie { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--linea); }
.firma { display: flex; flex-direction: column; align-items: stretch; text-align: center; color: var(--gris); font-size: 13px; }
.firma-partes { display: grid; grid-template-columns: repeat(var(--partes, 3), minmax(0, 1fr)); gap: 16px; align-items: end; justify-items: center; margin-bottom: 10px; }
.firma-partes img { width: auto; height: auto; max-width: 100%; max-height: 110px; }
.firma p { margin: 0; }
.firma strong { color: var(--tinta); }
.firma-examenes { font-size: 12px; color: var(--gris-claro); margin-top: 2px !important; }

/* Alineación de filas con botón y anchos fijos de columnas en los informes */
table.datos.tabla-atenciones td { vertical-align: middle; }
table.datos.tabla-resultados { table-layout: fixed; }
table.datos.tabla-resultados th:nth-child(1) { width: 34%; }
table.datos.tabla-resultados th:nth-child(2) { width: 30%; }
table.datos.tabla-resultados th:nth-child(3) { width: 13%; }
table.datos.tabla-resultados th:nth-child(4) { width: 23%; }
table.datos.tabla-resultados td { overflow-wrap: anywhere; }

/* ---------- Modo verificación: los dos PDF lado a lado ---------- */
.contenedor.ancho-completo { max-width: 1560px; }
.verif-resumen { display: flex; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding: 20px 24px; margin-bottom: 16px;
  background: var(--ok-suave); border: 1px solid #b9dcc6; border-radius: 12px; }
.verif-resumen h2 { margin: 0 0 2px; font-size: 1.0625rem; color: var(--tinta); }
.verif-resumen p { margin: 0; color: var(--gris); }
.verif-bloqueado { background: var(--alerta-suave); border-color: #efc2bc; }
.verif-atencion { background: #fff7e6; border-color: #f3d39a; }
.verif-atencion .verif-cifra strong { color: #7a4a00; }
.verif-parcial { margin-top: 4px !important; color: #6b4200 !important; }
.verif-cifra { display: flex; flex-direction: column; line-height: 1.1; }
.verif-cifra strong { font-size: 2.25rem; font-weight: 600; color: var(--ok-tinta); font-variant-numeric: tabular-nums; }
.verif-bloqueado .verif-cifra strong { color: var(--alerta); }
.verif-cifra span { font-size: 12.5px; color: var(--gris); }
.verif-detalle { flex: 1 1 320px; min-width: 0; }
.verif-archivo { flex: 0 1 320px; }
.verif-archivo label { margin: 0 0 4px; }
.verif-diferencias h3 { margin: 0 0 8px; font-size: 1rem; }
.visor-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.visor { margin: 0; background: #fff; border: 1px solid #e6ebf0; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 4px 16px rgba(16, 42, 67, .05); }
.visor figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); color: var(--holanda-azul-hondo); }
.visor figcaption span { color: var(--gris); font-size: 12.5px; font-weight: 400; }
.visor iframe { display: block; width: 100%; height: 82vh; min-height: 560px; border: 0; background: #525659; }
.visor-vacio { display: flex; align-items: center; justify-content: center; height: 420px; color: var(--gris); background: #f8fafc; }

/* ---------- Administración ---------- */
.cabecera-pagina { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cabecera-pagina .titulo-pagina { margin: 0; }
.cabecera-pagina p { margin: 0; color: var(--gris); flex-basis: 100%; }
.cabecera-tarjeta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cabecera-tarjeta h2 { margin: 0; }
.intro, .texto-secundario { color: var(--gris); max-width: 72ch; margin: 0 0 16px; }
.texto-secundario { margin: 0; }
.tabla-desplazable { overflow-x: auto; margin: 0 -2px; }
.tabla-desplazable table.datos { min-width: 560px; }
.tabla-auditoria .fecha { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-auditoria .detalle { color: var(--gris); font-size: 13px; }
td.accion { text-align: right; white-space: nowrap; width: 1%; }
.vacio-celda { color: var(--gris); text-align: center; padding: 24px 12px !important; }
.estado { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 4px; white-space: nowrap; }
.estado-ok { color: var(--ok-tinta); background: var(--ok-suave); }
.estado-error { color: var(--alerta); background: var(--alerta-suave); }
.estado-pendiente { color: #7a4a00; background: #fff4e0; }
.tarjetas-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { display: block; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; color: var(--tinta); }
a.stat:hover { border-color: var(--holanda-azul); text-decoration: none; }
.stat .n { display: block; font-size: 1.875rem; font-weight: 600; color: var(--holanda-azul-hondo); font-variant-numeric: tabular-nums; line-height: 1.2; }
.stat .t { display: block; color: var(--gris); font-size: 13px; }
.casilla { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; margin: 16px 0 0; cursor: pointer; }
.casilla input { width: 16px; height: 16px; margin: 0; accent-color: var(--holanda-azul); }
.ayuda-casilla { margin-left: 24px; }
.grupo-sedes { border: 0; padding: 0; margin: 22px 0 0; }
.grupo-sedes legend { font-weight: 600; font-size: 14px; padding: 0; color: var(--holanda-azul-hondo); }
.grupo-sedes input[type=search] { margin: 10px 0 8px; }
.botonera { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 22px; }
.paginacion { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 16px; color: var(--gris); }
.clave-temporal { font-size: 15px; background: #fff; padding: 1px 6px; border-radius: 4px; border: 1px solid #b9dcc6; }
.lista-check { max-height: 320px; overflow: auto; border: 1px solid var(--linea-fuerte); border-radius: 6px; padding: 6px; }
.lista-check label { display: flex; align-items: center; gap: 8px; margin: 0; padding: 5px 6px; font-weight: 400; font-size: 13.5px; border-radius: 4px; cursor: pointer; }
.lista-check label:hover { background: #f8fafb; }
.lista-check input { width: auto; accent-color: var(--holanda-azul); }
.lista-check small { color: var(--gris-claro); margin-left: auto; }
input[type=search] { width: 100%; padding: 9px 12px; border: 1px solid var(--linea-fuerte); border-radius: 6px; font: inherit; }
.inline { display: inline; }
.separado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Pantallas de acceso (ingreso, segundo factor, contraseña temporal) ---------- */
/* Portada de Grupo H: la identidad es del grupo, no de un laboratorio. */
.cuerpo-acceso {
  --g-hondo: #0b3b63; --g-azul: #0f6fb5; --g-celeste: #5aa9de; --g-bruma: #eaf2f9;
  min-height: 100vh; margin: 0; background: #fff;
}
.cuerpo-acceso :focus-visible { outline-color: var(--g-azul); }
.portada {
  min-height: 100vh; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
  grid-template-areas: "marca acceso" "labs acceso";
  grid-template-rows: 1fr auto;
}
.portada-marca {
  grid-area: marca; position: relative; overflow: hidden; background: var(--g-bruma);
  padding: clamp(32px, 6vw, 72px) clamp(28px, 6vw, 80px) 40px;
  display: flex; flex-direction: column; justify-content: center;
}
.portada-celulas {
  position: absolute; width: min(680px, 78%); top: -10%; right: -14%; pointer-events: none;
}
.portada-celulas .celula circle { fill: #cfe2f3; }
.portada-celulas .celula .nucleo { fill: #b3d1eb; }
.portada-celulas .bacilo { fill: #c3dbf0; }
.portada-grupo { position: relative; width: 150px; height: auto; margin-bottom: clamp(28px, 6vh, 64px); }
.portada-titular {
  position: relative; margin: 0; max-width: 11ch; color: var(--g-hondo);
  font-size: clamp(2.4rem, 4.4vw, 3.9rem); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em;
}
.portada-bajada {
  position: relative; margin: 18px 0 0; max-width: 34em; color: #33475b;
  font-size: 16px; line-height: 1.55;
}
.portada-labs {
  --alto-logo: 42px;
  grid-area: labs; background: #fff; border-top: 1px solid #d6e5f2;
  display: flex; align-items: center; gap: clamp(20px, 3.4vw, 48px); flex-wrap: wrap;
  padding: 24px clamp(28px, 6vw, 80px);
}
.portada-labs img { width: auto; }
.portada-labs .lab-holanda { height: calc(var(--alto-logo) * 75 / 69); }
.portada-labs .lab-amsterdam { height: calc(var(--alto-logo) * 207 / 201); }
.portada-labs .lab-valparaiso { height: calc(var(--alto-logo) * 207 / 167); margin-bottom: calc(var(--alto-logo) * -0.16); }
.portada-acceso {
  grid-area: acceso; display: flex; flex-direction: column; justify-content: center;
  padding: 48px clamp(24px, 5vw, 72px) 28px;
}
.acceso-caja { width: 100%; max-width: 360px; }
.acceso-caja h1, .acceso-caja h2 {
  font-size: 24px; font-weight: 600; color: var(--g-hondo); text-align: left; margin: 0 0 6px; letter-spacing: -0.01em;
}
.acceso-ayuda { color: var(--gris); font-size: 14.5px; margin: 0 0 24px; }
.acceso-nota { color: var(--gris); font-size: 13px; margin: 18px 0 0; }
.acceso-caja label { margin: 16px 0 6px; }
.acceso-caja input:focus { outline-color: var(--g-celeste); border-color: var(--g-azul); }
.acceso-caja .campo-codigo { font-size: 22px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.acceso-caja .boton { background: var(--g-azul); min-height: 44px; margin-top: 22px; font-size: 15px; }
.acceso-caja .boton:hover { background: var(--g-hondo); }
.acceso-caja a { color: var(--g-azul); }
.acceso-pie { max-width: 360px; color: var(--gris); font-size: 12.5px; margin: 40px 0 0; }

@media (max-width: 900px) {
  .portada { grid-template-columns: 1fr; grid-template-areas: "marca" "acceso" "labs"; grid-template-rows: auto auto auto; }
  .portada-marca { padding: 28px 20px 30px; }
  .portada-celulas { width: 300px; top: -60px; right: -90px; }
  .portada-grupo { width: 104px; margin-bottom: 22px; }
  .portada-titular { font-size: 2.2rem; }
  .portada-bajada { font-size: 15px; margin-top: 12px; }
  .portada-acceso { padding: 28px 20px 8px; }
  .acceso-caja, .acceso-pie { max-width: none; }
  .acceso-pie { margin-top: 28px; }
  .portada-labs { --alto-logo: 26px; justify-content: center; flex-wrap: nowrap; padding: 20px 16px; gap: 16px; }
}

/* ---------- Pantallas angostas ---------- */
@media (max-width: 900px) {
  .visor-doble { grid-template-columns: 1fr; }
  .barra { flex-wrap: wrap; gap: 0 16px; padding: 10px 16px 0; }
  .marca-portal { display: none; }
  .usuario { gap: 14px; }
  .usuario-nombre { display: none; }
  .menu { order: 3; width: 100%; min-width: 0; overflow-x: auto; margin-top: 6px; scrollbar-width: none; }
  .cuerpo-interior > main, .tarjeta { min-width: 0; }
  .menu a { padding: 10px 10px; white-space: nowrap; }
}
@media (max-width: 640px) {
  .contenedor { padding: 20px 14px; }
  .tarjeta, .informe { padding: 18px 16px; }
  .buscador-fila { flex-direction: column; align-items: stretch; }
  .selector-tipo { display: flex; width: 100%; }
  .selector-tipo label { flex: 1; text-align: center; }
  .informe-datos { grid-template-columns: 1fr 1fr; width: 100%; }
  /* Tablas de atenciones y de resultados como filas compactas */
  table.datos.tabla-atenciones, table.datos.tabla-resultados { table-layout: auto; }
  table.datos.tabla-atenciones thead, table.datos.tabla-resultados thead { display: none; }
  table.datos.tabla-atenciones tbody, table.datos.tabla-resultados tbody { display: block; }
  table.datos.tabla-atenciones tr, table.datos.tabla-resultados tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
    padding: 12px 0; border-bottom: 1px solid var(--linea);
  }
  table.datos.tabla-atenciones td, table.datos.tabla-resultados td {
    display: block; border: 0; padding: 0; width: auto; background: none !important;
  }
  table.datos.tabla-atenciones td:empty, table.datos.tabla-resultados td:empty { display: none; }
  table.datos.tabla-atenciones td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 600; }
  table.datos.tabla-atenciones td:nth-child(2) { grid-column: 1; grid-row: 2; }
  table.datos.tabla-atenciones td:nth-child(3) { grid-column: 1; grid-row: 3; color: var(--gris); font-size: 13px; }
  table.datos.tabla-atenciones td.original { grid-column: 1; grid-row: 4; width: auto; }
  .marca-original::before { content: "PDF original: "; }  /* en celular no se ve el encabezado de la columna */
  table.datos.tabla-atenciones td.accion { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  table.datos.tabla-resultados tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  table.datos.tabla-resultados td:nth-child(1) { grid-column: 1; grid-row: 1; }
  table.datos.tabla-resultados td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  table.datos.tabla-resultados td:nth-child(3) { grid-column: 1; grid-row: 2; color: var(--gris); font-size: 12.5px; }
  table.datos.tabla-resultados td:nth-child(4) { grid-column: 2; grid-row: 2; color: var(--gris); font-size: 12.5px; text-align: right; }
  table.datos.tabla-resultados td:nth-child(4)::before { content: "Ref.: "; }
  .acciones-informe { flex-wrap: wrap; }
  .informe-cabecera { gap: 16px; }
}

/* --- Extractor --------------------------------------------------------- */
.ext-actual h2 { margin: 0; }
.ext-num { color: var(--gris); font-size: 13px; font-weight: 400; }
.ext-estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--acento-suave); color: var(--holanda-azul-hondo); }
.ext-corriendo, .ext-pendiente { background: #fff7e6; color: #6b4200; }
.ext-terminada { background: var(--ok-suave); color: var(--ok-tinta); }
.ext-error { background: var(--alerta-suave); color: #7a1d14; }
.ext-interrumpida { background: #fff7e6; color: #6b4200; }
.ext-barra { height: 10px; margin: 16px 0 8px; border-radius: 999px; background: #eef2f6; overflow: hidden; }
.ext-barra span { display: block; height: 100%; background: var(--holanda-azul); transform-origin: left center; transition: transform .4s ease; }
@media (prefers-reduced-motion: reduce) { .ext-barra span { transition: none; } }
.ext-avance { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 16px; color: var(--gris); font-size: 13.5px; }
.ext-avance strong { color: var(--holanda-azul-hondo); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.ext-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 24px; margin: 0; }
.ext-fecha { width: 100%; max-width: 240px; min-height: 40px; padding: 0 10px; border: 1px solid var(--linea-fuerte); border-radius: 6px; font: inherit; background: #fff; color: var(--tinta); }
.ext-historial { width: 100%; min-width: 720px; }
.ext-historial td, .ext-historial th { padding-right: 16px; vertical-align: middle; }
.ext-actual .vacio { padding: 12px 0; }
.ext-tramo { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linea); }
.ext-tramo h3 { margin: 0 0 8px; font-size: 14px; color: var(--tinta); }
.ext-cifras dt { color: var(--gris); font-size: 12.5px; }
.ext-cifras dd { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }
.ext-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ext-columnas > .tarjeta { margin: 0 0 0; }
.ext-columnas { margin-bottom: 16px; }
.ext-columnas h2 { font-size: 1rem; }
@media (max-width: 760px) { .ext-columnas { grid-template-columns: minmax(0, 1fr); } }