/* ------------------------------------------------------------------
   ESTE ARCHIVO ESTÁ EN LAS DOS APPS: candidato/ y rh/
   Es casi el mismo en las dos. La única diferencia a propósito está en
   el cuadernillo del candidato: la pregunta y las opciones van con la
   letra de lectura (Atkinson) y más grandes, porque ahí leer mal una
   palabra invalida una respuesta.
   Todo lo demás debe seguir igual en las dos: si cambias el diseño en
   una carpeta, cópialo a la otra.
   ------------------------------------------------------------------ */

/* ============================================================
   PLATAFORMA DE PRUEBAS PSICOMÉTRICAS
   Identidad: consola. Blanco y gris neutro, línea fina, esquinas
   rectas y un solo acento azul rey.
   Sin sombras, sin cajas pesadas. La jerarquía la hace el
   espacio y el tipo, no el relleno.
   ============================================================ */

:root {
  /* ---- superficie ---- */
  --papel:      #fafafa;
  --superficie: #ffffff;
  --superficie-2: #f4f4f5;
  --linea:      #e8e9ed;
  --linea-firme:#d4d6dc;

  /* ---- tinta ---- */
  --tinta:      #111318;
  --tenue:      #6b7080;
  --apenas:     #9a9eab;

  /* ---- acento ---- */
  --sello:      #1f4bd8;
  --sello-vivo: #2f5ce8;
  --sello-suave:#eef2fe;
  --sello-linea:#c9d5f7;

  /* ---- semánticos ---- */
  --bien:       #1f4bd8;
  --bien-suave: #eef2fe;
  --ojo:        #9a3b2c;
  --ojo-suave:  #fbecea;
  --mal:        #b3261e;
  --mal-suave:  #fdecea;

  /* ---- forma ---- */
  --r-caja:  4px;
  --r-ctrl:  3px;
  --ancho:   740px;

  /* Geist para la interfaz: sobria, de estilo tecnico y clara en tamanos
     chicos. Geist Mono para folios y cifras. Atkinson Hyperlegible para lo que el
     candidato tiene que LEER: esta disenada para que no se confundan
     letras parecidas (l/I/1, O/0, rn/m), que es justo el error que
     invalidaria una respuesta. */
  --sans:    'Geist', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --lectura: 'Atkinson Hyperlegible', 'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono:    'Geist Mono', 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:      #0c0d10;
    --superficie: #131418;
    --superficie-2: #1a1c21;
    --linea:      #25272e;
    --linea-firme:#363943;
    --tinta:      #ececf0;
    --tenue:      #9a9eab;
    --apenas:     #71757f;
    --sello:      #7f9cf5;
    --sello-vivo: #9fb5f8;
    --sello-suave:#172040;
    --sello-linea:#2a3a70;
    --bien:       #7f9cf5;
    --bien-suave: #172040;
    --ojo:        #e0917f;
    --ojo-suave:  #33201d;
    --mal:        #e58a7c;
    --mal-suave:  #351f1c;
  }
}

:root[data-theme="dark"] {
  --papel:      #0c0d10;
  --superficie: #131418;
  --superficie-2: #1a1c21;
  --linea:      #25272e;
  --linea-firme:#363943;
  --tinta:      #ececf0;
  --tenue:      #9a9eab;
  --apenas:     #71757f;
  --sello:      #7f9cf5;
  --sello-vivo: #9fb5f8;
  --sello-suave:#172040;
  --sello-linea:#2a3a70;
  --bien:       #7f9cf5;
  --bien-suave: #172040;
  --ojo:        #e0917f;
  --ojo-suave:  #33201d;
  --mal:        #e58a7c;
  --mal-suave:  #351f1c;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* ---------------------- Encabezado ---------------------- */

/* Una sola barra, sin pegar. Nada que se quede fijo puede encimarse a lo
   que viene abajo, que era justo el problema: dos barras pegajosas al
   mismo top peleandose el lugar. */
.barra {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  padding: 0 20px;
}

.barra-fila {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0 12px;
  max-width: var(--ancho-panel, 1180px);
  margin: 0 auto;
  width: 100%;
}

/* El titulo nunca se corta: si no cabe, la barra crece. */
.barra-titulo { min-width: 0; flex: 1; }

.barra .logo {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  display: block;
  color: var(--tinta);
}

.barra .logo svg { display: block; width: 100%; height: 100%; }
.barra .logo .barras { fill: currentColor; }
.barra .logo .norma  { stroke: var(--sello); }

.barra h1 {
  font-size: 15.5px;
  margin: 0;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.barra .sub {
  font-size: 12px;
  color: var(--tenue);
  margin: 0;
}

.barra .derecha {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--tenue);
  text-align: right;
}

.barra .derecha a { color: var(--sello); }

/* ---------------------- Contenedores ---------------------- */

.envoltura {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 26px 18px 70px;
}

.envoltura.ancha { max-width: 1240px; }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  padding: 26px;
  margin-bottom: 14px;
}

.tarjeta.plana { border: 0; background: transparent; padding: 0; }

h2 {
  font-size: 21px;
  margin: 0 0 6px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h3 {
  font-size: 15.5px;
  margin: 0 0 8px;
  font-weight: 600;
}

p { margin: 0 0 12px; }

.tenue { color: var(--tenue); font-size: 14px; }
.mini  { font-size: 12.5px; color: var(--tenue); }
.centrado { text-align: center; }
.nada { display: none !important; }

hr.sep {
  border: 0;
  border-top: 1px solid var(--linea);
  margin: 20px 0;
}

/* etiqueta de sección, en micro-mayúsculas */
.rotulo {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apenas);
  margin: 0 0 10px;
}

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

.btn {
  appearance: none;
  border: 1px solid var(--sello);
  background: var(--sello);
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: var(--r-ctrl);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  min-height: 46px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { color: #0c0d10; }
}
:root[data-theme="dark"] .btn { color: #0c0d10; }

.btn:hover:not(:disabled) { background: var(--sello-vivo); border-color: var(--sello-vivo); }
.btn:focus-visible { outline: 2px solid var(--sello); outline-offset: 2px; }
.btn:disabled { opacity: .36; cursor: not-allowed; }

.btn.fantasma {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linea-firme);
}

.btn.fantasma:hover:not(:disabled) {
  background: var(--superficie-2);
  border-color: var(--tenue);
  color: var(--tinta);
}

/* Borrar un expediente no se deshace: el botón se ve distinto a los demás */
.btn.peligro {
  color: var(--mal);
  border-color: var(--mal-suave);
}
.btn.peligro:hover:not(:disabled) {
  background: var(--mal-suave);
  border-color: var(--mal);
  color: var(--mal);
}

/* Al editar, una prueba ya contestada no se puede desmarcar */
.chip-prueba.fija {
  opacity: .6;
  cursor: not-allowed;
  background: var(--superficie-2);
}

[hidden] { display: none !important; }

.btn.negro {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--superficie);
}

.btn.chico {
  padding: 7px 13px;
  min-height: 36px;
  font-size: 13.5px;
  font-weight: 500;
}

.btn.ancho { width: 100%; }

.fila-btn { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

/* ---------------------- Formularios ---------------------- */

.rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}

.rejilla .completo { grid-column: 1 / -1; }

label.campo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tenue);
  margin-bottom: 5px;
}

label.campo .obl { color: var(--mal); }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], input[type=password], select, textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  padding: 11px 13px;
  border: 1px solid var(--linea-firme);
  border-radius: var(--r-ctrl);
  background: var(--superficie);
  color: var(--tinta);
  min-height: 45px;
}

textarea { min-height: 84px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--sello);
  outline-offset: -1px;
  border-color: var(--sello);
}

input::placeholder { color: var(--apenas); }

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  cursor: pointer;
}

.check input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--sello); }

/* ---------------------- Avisos ---------------------- */

.aviso {
  border-radius: var(--r-ctrl);
  padding: 12px 15px;
  font-size: 14px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}

.aviso.info { background: var(--sello-suave); border-color: var(--sello-linea); color: var(--tinta); }
.aviso.ok   { background: var(--bien-suave); border-color: var(--bien); color: var(--tinta); }
.aviso.warn { background: var(--ojo-suave);  border-color: var(--ojo);  color: var(--tinta); }
.aviso.mal  { background: var(--mal-suave);  border-color: var(--mal);  color: var(--tinta); }

/* confiabilidad alta: se dice, pero sin alarmar */
.confiable {
  margin: 12px 0 6px;
  padding-left: 10px;
  border-left: 3px solid var(--bien);
  font-size: 13px;
  color: var(--tenue);
}
.confiable b { color: var(--tinta); font-weight: 600; }

.caja-privacidad {
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r-ctrl);
  padding: 13px 15px;
  font-size: 13px;
  color: var(--tenue);
  background: var(--papel);
  margin-bottom: 12px;
}

/* ---------------------- Lista de pruebas ---------------------- */

.prueba-item {
  display: flex;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r-ctrl);
  padding: 14px 16px;
  margin-bottom: 9px;
  background: var(--superficie);
}

.prueba-item.lista { border-color: var(--bien); background: var(--bien-suave); }
.prueba-item.activa { border-color: var(--sello); }

.prueba-item .num {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  border: 1px solid var(--linea-firme);
  color: var(--tenue);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12.5px;
  flex: 0 0 auto;
}

.prueba-item.lista .num { background: var(--bien); border-color: var(--bien); color: var(--superficie); }
.prueba-item.activa .num { border-color: var(--sello); color: var(--sello); }

.prueba-item .cuerpo { flex: 1; min-width: 0; }
.prueba-item .cuerpo b { display: block; font-size: 15px; font-weight: 600; }

/* ---------------------- Motor de pruebas ---------------------- */

.cabecera-prueba {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

.cabecera-prueba .titulo { font-weight: 600; font-size: 15px; }

.contador {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 15px;
  color: var(--sello);
  border: 1px solid var(--sello-linea);
  background: var(--sello-suave);
  padding: 4px 11px;
  border-radius: 2px;
}

.contador.urgente {
  color: var(--mal);
  border-color: var(--mal);
  background: var(--mal-suave);
  animation: latido 1.1s infinite;
}

@keyframes latido { 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .contador.urgente { animation: none; }
}

.barra-avance {
  height: 3px;
  background: var(--linea);
  border-radius: 2px;
  overflow: hidden;
  margin: 13px 0 4px;
}

.barra-avance > i {
  display: block;
  height: 100%;
  background: var(--sello);
  width: 0;
  transition: width .3s ease;
}

.enunciado {
  font-size: 19px;
  font-weight: 500;
  margin: 22px 0 18px;
  line-height: 1.42;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.enunciado .folio-reactivo {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--apenas);
  margin-right: 9px;
  vertical-align: 2px;
}

/* -------- opción única -------- */

.opcion {
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r-ctrl);
  padding: 13px 15px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--superficie);
  transition: border-color .12s, background .12s;
  min-height: 50px;
}

.opcion:hover { border-color: var(--linea-firme); }

.opcion.sel {
  border-color: var(--sello);
  background: var(--sello-suave);
}

.opcion .letra {
  width: 25px;
  height: 25px;
  border-radius: 3px;
  border: 1px solid var(--linea-firme);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--tenue);
  flex: 0 0 auto;
  background: var(--superficie);
}

.opcion.sel .letra { background: var(--sello); color: var(--superficie); border-color: var(--sello); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .opcion.sel .letra { color: #0c0d10; }
}
:root[data-theme="dark"] .opcion.sel .letra { color: #0c0d10; }

/* -------- bloques más / menos (Cleaver) -------- */

.tabla-mm { width: 100%; border-collapse: collapse; margin-bottom: 8px; }

.tabla-mm th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--apenas);
  padding: 6px 4px;
  text-align: center;
  font-weight: 600;
}

.tabla-mm th.izq { text-align: left; }

.tabla-mm td {
  border-top: 1px solid var(--linea);
  padding: 11px 4px;
  vertical-align: middle;
}

.tabla-mm td.palabra { font-size: 16px; }
.tabla-mm td.pick { width: 70px; text-align: center; }

.marca {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid var(--linea-firme);
  background: var(--superficie);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--apenas);
  transition: all .12s;
}

.marca:hover { border-color: var(--tenue); color: var(--tenue); }
.marca:focus-visible { outline: 2px solid var(--sello); outline-offset: 2px; }

.marca.on-mas   { background: var(--sello); border-color: var(--sello); color: var(--superficie); }
.marca.on-menos { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marca.on-mas,
  :root:not([data-theme="light"]) .marca.on-menos { color: #0c0d10; }
}
:root[data-theme="dark"] .marca.on-mas,
:root[data-theme="dark"] .marca.on-menos { color: #0c0d10; }

/* -------- jerarquía (LIFO / ZAVIC) -------- */

.rank-fila {
  display: flex;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--r-ctrl);
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--superficie);
}

.rank-fila.puesta { border-color: var(--sello); background: var(--sello-suave); }
.rank-fila .txt { flex: 1; font-size: 15.5px; }

.rank-botones { display: flex; gap: 5px; flex: 0 0 auto; }

.rank-btn {
  width: 36px;
  height: 36px;
  border-radius: 3px;
  border: 1px solid var(--linea-firme);
  background: var(--superficie);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--tenue);
}

.rank-btn:hover:not(:disabled) { border-color: var(--tenue); color: var(--tinta); }
.rank-btn.on { background: var(--sello); color: var(--superficie); border-color: var(--sello); }
.rank-btn:disabled { opacity: .3; cursor: not-allowed; }
.rank-btn:focus-visible { outline: 2px solid var(--sello); outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rank-btn.on { color: #0c0d10; }
}
:root[data-theme="dark"] .rank-btn.on { color: #0c0d10; }

/* -------- par forzado (Kostick) -------- */

.par-opcion {
  border: 1px solid var(--linea);
  border-radius: var(--r-ctrl);
  padding: 17px;
  margin-bottom: 9px;
  cursor: pointer;
  background: var(--superficie);
  font-size: 16.5px;
  display: flex;
  gap: 13px;
  align-items: center;
  min-height: 60px;
}

.par-opcion:hover { border-color: var(--linea-firme); }
.par-opcion.sel { border-color: var(--sello); background: var(--sello-suave); }

.par-opcion .letra {
  width: 25px; height: 25px; border-radius: 3px;
  border: 1px solid var(--linea-firme);
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--tenue); flex: 0 0 auto; background: var(--superficie);
}

.par-opcion.sel .letra { background: var(--sello); color: var(--superficie); border-color: var(--sello); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .par-opcion.sel .letra { color: #0c0d10; }
}
:root[data-theme="dark"] .par-opcion.sel .letra { color: #0c0d10; }

.pie-motor {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--linea);
}

.pie-motor .estado { font-size: 12.5px; color: var(--apenas); }
.pie-motor .btn { margin-left: auto; }

/* ---------------------- Panel de RH ---------------------- */

.admin-rejilla {
  display: grid;
  grid-template-columns: 396px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.chip-prueba {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid var(--linea);
  border-radius: var(--r-ctrl);
  padding: 11px 13px;
  margin-bottom: 7px;
  cursor: pointer;
  background: var(--superficie);
}

.chip-prueba:hover { border-color: var(--linea-firme); }
.chip-prueba.on { border-color: var(--sello); background: var(--sello-suave); }
.chip-prueba input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--sello); }
.chip-prueba b { display: block; font-size: 14.5px; font-weight: 600; }

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--superficie);
}

.tabla th {
  background: var(--superficie-2);
  color: var(--tenue);
  text-align: left;
  padding: 9px 12px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  border-bottom: 1px solid var(--linea);
}

.tabla td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--linea);
  vertical-align: top;
}

.tabla tr:hover td { background: var(--papel); }

.tabla .folio {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .06em;
}

.etiqueta {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 9px;
  border-radius: 2px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.etiqueta.pendiente { background: var(--superficie-2); color: var(--tenue); border-color: var(--linea); }
.etiqueta.progreso  { background: var(--ojo-suave);  color: var(--ojo);  border-color: var(--ojo); }
.etiqueta.terminado { background: var(--bien-suave); color: var(--bien); border-color: var(--bien); }
.etiqueta.cancelado { background: var(--mal-suave);  color: var(--mal);  border-color: var(--mal); }

.mini-chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  border: 1px solid var(--linea);
  border-radius: 2px;
  padding: 2px 8px;
  margin: 1px 2px 1px 0;
  color: var(--tenue);
}

.mini-chip.hecha { background: var(--bien-suave); border-color: var(--bien); color: var(--bien); }

.caja-link { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }

.caja-link input {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--papel);
}

.scroll-tabla {
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
}

/* ---------------------- Cargando ---------------------- */

.cargando {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--linea);
  border-top-color: var(--sello);
  border-radius: 50%;
  animation: giro .7s linear infinite;
  vertical-align: -3px;
}

@keyframes giro { to { transform: rotate(360deg); } }

.velo {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  display: grid;
  place-items: center;
  z-index: 90;
  text-align: center;
  padding: 20px;
}

/* ---------------------- Panel de RH: acomodo ---------------------- */

/* Antes el alta y el seguimiento iban lado a lado: el formulario se comia
   396px y la tabla quedaba en 736, con los botones amontonados uno debajo
   de otro. Apilados, cada uno usa el ancho completo. */
.admin-rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

/* El formulario se extiende a lo ancho en vez de crecer hacia abajo */
.forma-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 16px;
}

/* Las pruebas, en columnas: seis tarjetas apiladas hacian larguisimo el alta */
#aPruebas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 8px;
}
#aPruebas .chip-prueba { margin-bottom: 0; }

/* Las acciones de cada renglon caben en una linea con el ancho completo */
.tabla .fila-btn { gap: 6px; }
.tabla .fila-btn .btn { padding: 5px 9px; font-size: 12px; }

/* Las pruebas asignadas fluyen en linea en vez de apilarse */
.tabla .mini-chip { display: inline-block; margin: 0 3px 3px 0; }

/* ------------------- Caja de descarga del reporte ------------------- */

.caja-pdf {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--sello-suave);
  border: 1px solid var(--sello-borde);
  border-left: 4px solid var(--sello);
  border-radius: var(--r-caja);
  padding: 17px 19px;
  margin-bottom: 16px;
}
.caja-pdf > div { flex: 1; min-width: 260px; }
.caja-pdf p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tenue); }
.caja-pdf .rotulo { margin-bottom: 4px; }
.caja-pdf code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 1px 6px;
}
.caja-pdf .btn { flex: none; }

/* El borrado se separa del resto de acciones: no debe quedar pegado a un
   botón inocente donde se pueda dar por error. */
.fila-btn .peligro { margin-left: 10px; }

/* ---------------------- Pestañas del panel ---------------------- */

/* Las tres pantallas de RH son un solo panel. La tira va pegada bajo el
   encabezado para que siempre se vea a dónde más se puede ir. */
/* Van pegadas al borde inferior de la barra, como pestañas de carpeta:
   se ve de dónde salen y a dónde llevan. */
.pestanas {
  max-width: var(--ancho-panel, 1180px);
  margin: 0 auto;
  width: 100%;
}

.tira-pestanas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tira-pestanas::-webkit-scrollbar { display: none; }

/* Son <button>, asi que hay que apagarles el marco y el fondo que el
   navegador les pone solos; si no, cada pestaña sale encajonada. */
.pestana {
  flex: none;
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 16px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--tenue);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.pestana:focus-visible {
  outline: 2px solid var(--sello);
  outline-offset: -3px;
}
.pestana:hover { color: var(--tinta); }

.pestana.on {
  color: var(--sello);
  font-weight: 600;
  border-bottom-color: var(--sello);
}

.pestana.salida { margin-left: auto; }

@media (max-width: 760px) {
  .pestana { padding: 11px 10px 9px; font-size: 13px; }
  .pestana.salida { margin-left: auto; }
}

/* ---------------------- Móvil ---------------------- */

@media (max-width: 760px) {
  .rejilla { grid-template-columns: 1fr; }
  .admin-rejilla { grid-template-columns: 1fr; }
  .tarjeta { padding: 19px 17px; }
  .enunciado { font-size: 17.5px; }
  .envoltura { padding: 20px 16px 60px; }
  .tabla th { position: static; }
  .pie-motor { flex-wrap: wrap; }
  .pie-motor .btn { width: 100%; margin-left: 0; order: -1; }
}

/* ---------------------- Impresión ---------------------- */

@media print {
  .barra, .btn, .pie-motor, .no-imprime { display: none !important; }
  body { background: #fff; }
  .tarjeta { border: 0; padding: 0; }
}

/* Bloqueo de selección durante pruebas cronometradas */

body.sin-copia, body.sin-copia * {
  -webkit-user-select: none;
  user-select: none;
}

body.sin-copia input, body.sin-copia textarea {
  -webkit-user-select: text;
  user-select: text;
}

/* ============================================================
   PANTALLA DE RESULTADOS: GRÁFICAS Y REPORTE IMPRIMIBLE
   ============================================================
   Colores de dato validados con el verificador de paletas:
   banda de luminosidad, piso de croma, separación en daltonismo
   protán/deután y contraste contra la superficie.
     claro    serie #1f8f7a + #a8701f   (ΔE protán 11.1)
              diverge #2b7fa8 / #c2612f (ΔE protán 17.1)
     oscuro   serie #33a08a + #b98741   (ΔE protán 9.3)
              diverge #2b90c9 / #c26a45 (ΔE protán 19.1)
   Los colores de marca son distintos a los de la interfaz a
   propósito: el verde de marca es demasiado oscuro y apagado
   para leerse como dato.
   ============================================================ */

:root {
  --dato:    #1f4bd8;
  --dato-2:  #c2552d;
  --div-pos: #1f4bd8;
  --div-neg: #c2552d;
  --pista:   #f0f1f4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dato:    #7f9cf5;
    --dato-2:  #e0875f;
    --div-pos: #7f9cf5;
    --div-neg: #e0875f;
    --pista:   #1a1c21;
  }
}

:root[data-theme="dark"] {
  --dato:    #7f9cf5;
  --dato-2:  #e0875f;
  --div-pos: #7f9cf5;
  --div-neg: #e0875f;
  --pista:   #1a1c21;
}

/* ---------------------- Gráficas ----------------------
   Formato de perfil: angosto y alto, con eje de escala a la
   izquierda, líneas de referencia y un punto en la punta de
   cada columna. Un solo color de dato; el rojo se reserva
   para la alerta y para el lado negativo de una diferencia.
   ------------------------------------------------------ */

.grafica { margin: 0 0 30px; text-align: center; }

.grafica > .titulo-g {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 3px;
}

.grafica > .nota-g {
  font-size: 12.5px;
  color: var(--tenue);
  margin: 0 auto 14px;
  max-width: 460px;
}

/* ---- el plano cartesiano, centrado ---- */

.plano {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  justify-content: center;
  column-gap: 7px;
  margin: 0 auto;
  /* aire arriba: la cifra de una columna al 100% va sobre el plano,
     nunca dentro de la barra ni encima de la nota */
  padding-top: 24px;
}

.eje-y {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 250px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--apenas);
  line-height: 1;
}

.eje-y span { transform: translateY(-50%); }
.eje-y span:first-child { transform: translateY(0); }
.eje-y span:last-child { transform: translateY(-100%); }

.area {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  height: 250px;
  border-left: 1px solid var(--linea-firme);
  border-bottom: 1px solid var(--linea-firme);
  background-image: repeating-linear-gradient(
    to top, var(--linea) 0 1px, transparent 1px 25%);
}

.cols {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 56px;
  gap: 0;
  height: 100%;
  align-items: end;
  padding: 0 10px;
}

.col { position: relative; height: 100%; }

.col > i {
  position: absolute;
  left: 50%;
  width: 20px;
  margin-left: -10px;
  bottom: 0;
  background: var(--dato);
  min-height: 3px;
}

.col > b {
  position: absolute;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dato);
  transform: translate(-50%, 50%);
}

.col > i.ojo, .col > i.ojo + b { background: var(--div-neg); }
.col > i.dos, .col > i.dos + b { background: var(--dato-2); }

.col .cifra-col {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  margin-bottom: 8px;
  /* fondo del color de la tarjeta: si la línea que une los puntos pasa
     por detrás, la cifra se sigue leyendo completa */
  z-index: 2;
  padding: 1px 3px;
  border-radius: 3px;
  background: var(--superficie);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
  line-height: 1;
}

/* nombres bajo el eje, alineados con sus columnas */
.g-pies {
  grid-column: 2;
  grid-row: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 56px;
  gap: 0;
  padding: 8px 12px 0;
}

.g-pies span {
  font-size: 9.5px;
  line-height: 1.2;
  text-align: center;
  color: var(--tenue);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* las gráficas de una misma prueba se acomodan lado a lado */
.graficas-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  align-items: flex-start;
}

.graficas-fila > .grafica { flex: 0 0 auto; max-width: 100%; margin-bottom: 18px; }

/* muchas categorías: columnas más delgadas y nombres girados */
.plano.denso .cols, .plano.denso .g-pies {
  grid-auto-columns: 22px;
  gap: 4px;
}

.plano.denso .col > i { width: 11px; margin-left: -5.5px; }
.plano.denso .col .cifra-col { font-size: 10px; font-weight: 500; }

.plano.denso .g-pies span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: right;
  font-size: 9.5px;
  margin: 0 auto;
  max-height: 92px;
}

.plano.denso .col .cifra-col { font-size: 9px; }

/* en las columnas que bajan, el número se pone debajo de la punta */
.col .cifra-col.bajo {
  transform: translate(-50%, 100%);
  margin-bottom: -10px;
}

/* diferencia: el cero al centro del plano */
.plano.eje .area::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--tenue);
}

.col > i.arriba { bottom: 50%; background: var(--div-pos); }
.col > i.arriba + b { background: var(--div-pos); transform: translate(-50%, 50%); }
.col > i.abajo  { bottom: auto; top: 50%; background: var(--div-neg); }
.col > i.abajo + b { background: var(--div-neg); }

/* pares: dos barras delgadas por categoría, una junto a la otra */
.col.par {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  height: 100%;
}

.col.par > span:not(.cifra-col) { position: relative; height: 100%; }

/* el color va aquí: estas barras cuelgan un nivel más abajo que las normales */
.col.par > span > i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  margin: 0;
  background: var(--dato);
  min-height: 1px;
}

.col.par > span > i.dos { background: var(--dato-2); }

/* cada categoría lleva dos barras, así que su celda es un poco más ancha */
.plano.ancho .cols, .plano.ancho .g-pies { grid-auto-columns: 58px; gap: 6px; }

/* leyenda */
.leyenda-g {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 12px;
  color: var(--tenue);
  margin-bottom: 12px;
}

.leyenda-g span { display: flex; align-items: center; gap: 6px; }

.leyenda-g i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--dato);
  display: block;
}

.leyenda-g i.dos { background: var(--dato-2); }

.pie-g {
  font-size: 11.5px;
  color: var(--apenas);
  margin: 10px auto 0;
  max-width: 460px;
}

/* medidor: una cifra grande y una escala fina */

.medidor { margin-bottom: 10px; min-width: 260px; }

.medidor .cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0;
}

.medidor .cifra small {
  font-size: 14px;
  font-weight: 450;
  color: var(--tenue);
  letter-spacing: 0;
}

.medidor .pista-m {
  position: relative;
  height: 6px;
  background: var(--pista);
  margin: 16px auto 4px;
  max-width: 420px;
}

.medidor .relleno-m {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--dato);
}

.medidor .aguja {
  position: absolute;
  top: -6px;
  width: 2px;
  height: 18px;
  background: var(--tinta);
  transform: translateX(-1px);
}

.medidor .tics { position: relative; height: 24px; max-width: 420px; margin: 0 auto; }

.medidor .tic {
  position: absolute;
  top: 0;
  font-size: 10.5px;
  color: var(--apenas);
  transform: translateX(-50%);
  white-space: nowrap;
}

.medidor .tic::before {
  content: '';
  display: block;
  width: 1px;
  height: 4px;
  background: var(--linea-firme);
  margin: -9px auto 4px;
}

/* ---------------------- Escalas explicadas ---------------------- */

.escala-item {
  border-top: 1px solid var(--linea);
  padding: 13px 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  align-items: baseline;
}

.escala-item .nom { font-size: 14.5px; font-weight: 600; }
.escala-item .txt { grid-column: 1 / -1; font-size: 13.5px; color: var(--tenue); }

.escala-item.ojo .nom::after {
  content: ' ⚠';
  color: var(--ojo);
}

/* ---------------------- Bloques del expediente ---------------------- */

.bloque-prueba {
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  padding: 24px;
  margin-bottom: 14px;
  background: var(--superficie);
  break-inside: avoid;
}

.bloque-prueba > header { margin-bottom: 16px; }

.bloque-prueba > header h3 {
  font-size: 17px;
  margin: 0 0 3px;
  letter-spacing: -.01em;
}

.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 14px 20px;
  margin: 0;
}

.ficha div { min-width: 0; }

.ficha dt {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--apenas);
  font-weight: 600;
  margin-bottom: 2px;
}

.ficha dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.narrativa {
  background: var(--papel);
  border-left: 2px solid var(--dato);
  border-radius: 0 var(--r-ctrl) var(--r-ctrl) 0;
  padding: 13px 16px;
  font-size: 14px;
  margin-top: 16px;
}

.filtros {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.resumen-linea {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--tenue);
  margin-bottom: 14px;
}

.resumen-linea b {
  font-family: var(--mono);
  color: var(--tinta);
  font-weight: 600;
}

tr.abrible { cursor: pointer; }

.pie-reporte {
  display: none;
  font-size: 11px;
  color: var(--tenue);
  border-top: 1px solid var(--linea);
  padding-top: 8px;
  margin-top: 18px;
}

@media (max-width: 760px) {
  .g-fila { grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 8px; }
  .g-fila > .nom { font-size: 12px; }
  .filtros { grid-template-columns: 1fr 1fr; }
  .bloque-prueba { padding: 18px 16px; }
}

/* ---------------------- Impresión del reporte ---------------------- */

@media print {
  @page { margin: 14mm 12mm; }

  .no-imprime { display: none !important; }
  .pie-reporte { display: block; }

  body { background: #fff; font-size: 11.5pt; }
  .envoltura, .envoltura.ancha { max-width: none; padding: 0; }

  .bloque-prueba {
    border: 0;
    border-top: 1.5px solid #999;
    border-radius: 0;
    padding: 14px 0 0;
    margin: 0 0 18px;
    break-inside: avoid;
    page-break-inside: avoid;
  }


  .tarjeta { border: 0; padding: 0; margin-bottom: 14px; }
  .grafica { break-inside: avoid; page-break-inside: avoid; }
  .escala-item { break-inside: avoid; }
  .narrativa { background: #f4f4f4; }
  .g-pista, .g-relleno, .relleno-m, .leyenda-g i {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================================
   DOCUMENTO IMPRESO: PORTADA, ENCABEZADO CORRIDO Y FICHAS
   ============================================================
   La tabla .hoja-impresa existe por una sola razón: su <thead>
   es lo único que los navegadores repiten en todas las páginas
   de un PDF. En pantalla se desarma a bloques para que no
   estorbe la maquetación.
   ============================================================ */

.solo-impresion { display: none; }

.hoja-impresa,
.hoja-impresa > tbody,
.hoja-impresa > tbody > tr,
.hoja-impresa > tbody > tr > td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
}

.hoja-impresa > thead { display: none; }

@media print {

  .solo-impresion { display: block; }

  .hoja-impresa { display: table; width: 100%; border-collapse: collapse; }
  .hoja-impresa > thead { display: table-header-group; }
  .hoja-impresa > tbody { display: table-row-group; }
  .hoja-impresa > tbody > tr,
  .hoja-impresa > thead > tr { display: table-row; }
  .hoja-impresa > tbody > tr > td,
  .hoja-impresa > thead > tr > td { display: table-cell; padding: 0; border: 0; }

  .encabezado-corrido {
    font-size: 8.5pt;
    color: #666;
    border-bottom: .5pt solid #bbb;
    padding: 0 0 4pt;
    margin-bottom: 10pt;
    letter-spacing: .02em;
  }

  /* ---------------- portada ---------------- */

  .portada {
    break-after: page;
    page-break-after: always;
    padding-top: 0;
  }

  .portada .sello-portada {
    font-size: 9pt;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #666;
    margin: 0 0 10mm;
  }

  .portada h1 {
    font-size: 24pt;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin: 0 0 4pt;
  }

  .portada .puesto {
    font-size: 15pt;
    color: #444;
    margin: 0 0 7mm;
    padding-bottom: 4mm;
    border-bottom: 1.5pt solid #222;
  }

  .datos-portada {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4mm 10mm;
    margin: 0 0 7mm;
  }

  .datos-portada dt {
    font-size: 8pt;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 2pt;
  }

  .datos-portada dd { margin: 0; font-size: 12pt; }

  .indice-portada {
    margin: 0 0 7mm;
    padding-left: 5mm;
    font-size: 10.5pt;
    line-height: 1.6;
  }

  .indice-portada li { padding-left: 2mm; }

  .ficha-portada {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5mm 8mm;
    text-align: left;
    margin: 0 0 9mm;
    padding-top: 6mm;
    border-top: .5pt solid #ccc;
  }

  .ficha-portada dt {
    font-size: 7.5pt;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777;
    font-weight: 600;
    margin-bottom: 1pt;
  }

  .ficha-portada dd { margin: 0; font-size: 10pt; }

  .rotulo-portada {
    font-size: 8pt;
    letter-spacing: .16em;
    color: #777;
    margin: 0 0 3mm;
  }

  .nota-portada {
    font-size: 9.5pt;
    line-height: 1.6;
    color: #555;
    border-left: 2pt solid #999;
    padding-left: 5mm;
    margin: 0 0 8mm;
  }

  .pie-portada { font-size: 8.5pt; color: #888; margin: 0; }

  /* ---------------- tarjeta de datos del candidato ---------------- */

  .titulo-pantalla { display: none; }

  .titulo-impreso {
    font-size: 15pt;
    margin: 0 0 6mm;
    padding-bottom: 3mm;
    border-bottom: 1pt solid #ccc;
  }


  /* ---------------- ficha repetida por prueba ---------------- */

  .ficha-impresa {
    display: flex;
    flex-wrap: wrap;
    gap: 2pt 14pt;
    font-size: 8.5pt;
    color: #555;
    background: #f2f2f2;
    padding: 5pt 8pt;
    border-radius: 3pt;
    margin-bottom: 10pt;
  }

  .ficha-impresa b { color: #222; font-weight: 600; }

  /* el contenido corre seguido: solo se cuida no partir una gráfica
     ni un bloque de escala a la mitad */
  .bloque-prueba {
    break-inside: auto;
    page-break-inside: auto;
    border-top: 1pt solid #333;
    padding-top: 6mm;
    margin-bottom: 8mm;
  }

  .bloque-prueba > header { break-after: avoid; page-break-after: avoid; }
  .tarjeta-datos { display: none; }
}

/* ------------------------------------------------------------
   IMPRESIÓN MINIMALISTA
   En papel se quitan los fondos de color: el documento se sostiene
   con tipografía, espacio y reglas finas. El color queda reservado
   para el dato (azul) y la señal de alerta (rojo).
   ------------------------------------------------------------ */

@media print {

  .narrativa {
    background: none;
    border-left: 1.5pt solid #333;
    border-radius: 0;
    padding: 2pt 0 2pt 5mm;
    font-size: 10pt;
    margin-top: 5mm;
  }

  .aviso {
    background: none;
    border: 0;
    border-left: 1.5pt solid #999;
    border-radius: 0;
    padding: 1pt 0 1pt 4mm;
    font-size: 9.5pt;
    margin-bottom: 4mm;
  }

  .aviso.warn, .aviso.mal { border-left-color: #a8291c; }

  .bloque-prueba > header h3 { font-size: 16pt; letter-spacing: -.01em; }
  .bloque-prueba > header .rotulo { font-size: 8pt; letter-spacing: .16em; }

  .escala-item { border-top: .5pt solid #ddd; padding: 7pt 0 6pt; }
  .escala-item .nom { font-size: 10.5pt; }
  .escala-item .txt { font-size: 9.5pt; color: #444; }

  .grafica > .titulo-g { font-size: 10.5pt; }
  .grafica > .nota-g { font-size: 8.5pt; }
  .g-pies span { font-size: 7.5pt; }
  .col .cifra-col { font-size: 8.5pt; }
  .eje-y { font-size: 7pt; }
  .pie-g { font-size: 7.5pt; }
  .leyenda-g { font-size: 8pt; }
  .medidor .tic { font-size: 7pt; }

  .medidor .cifra { font-size: 30pt; }

  /* la pista no aporta nada en papel: basta la columna y su eje */
  .g-vert .tallo { background: #f1f1f1; }
}

/* ---------------------- Resumen general ---------------------- */

.resumen-general { background: var(--superficie); }

.tabla-resumen {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.tabla-resumen td {
  border-bottom: 1px solid var(--linea);
  padding: 11px 0;
  vertical-align: top;
  text-align: left;
}

.tabla-resumen tr:last-child td { border-bottom: 0; }

.tabla-resumen .col-prueba { width: 34%; padding-right: 16px; }
.tabla-resumen .col-result b { font-size: 15px; }

.lista-atencion {
  margin: 0;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--tenue);
}

.lista-atencion li { margin-bottom: 7px; }
.lista-atencion b { color: var(--ojo); }

.sin-atencion {
  font-size: 13.5px;
  color: var(--tenue);
  border-left: 2px solid var(--bien);
  padding-left: 13px;
  margin: 18px 0 0;
}

@media print {
  .resumen-general { border-top: 0; padding-top: 0; }
  .tabla-resumen td { padding: 8pt 0; font-size: 10.5pt; }
  .tabla-resumen .col-result b { font-size: 11pt; }
  .lista-atencion { font-size: 10pt; }
  .lista-atencion b { color: #a8291c; }
  .sin-atencion { font-size: 10pt; border-left-color: #666; }
}

.tabla-resumen .rotulo-dato {
  display: block;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apenas);
  font-weight: 600;
  margin-bottom: 1px;
}

@media print {
  .tabla-resumen .rotulo-dato { font-size: 7.5pt; color: #777; }
}

/* la línea que une las puntas de las columnas, encima de ellas */
.area > .union {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

@media print {
  .area > .union { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ==================================================================
   EL PDF, IGUAL QUE LA PANTALLA
   ==================================================================
   El bloque de impresion de arriba habia convertido el reporte en otro
   documento: grises, medidas en puntos y tarjetas aplanadas. Quien lo
   leia en pantalla y luego abria el PDF veia dos cosas distintas.

   Esto va al final a proposito: devuelve el aspecto de pantalla y deja
   de la impresion solo lo que la impresion si necesita — los cortes de
   pagina, la portada, el encabezado corrido y esconder los botones.
   ================================================================== */

@media print {

  /* Sin esto el navegador tira los fondos y los colores de las graficas */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  body {
    background: #fff;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--tinta);
  }

  /* Las tarjetas se ven como en pantalla, con su marco y su fondo */
  .bloque-prueba,
  .resumen-general {
    border: 1px solid var(--linea) !important;
    border-radius: var(--r-caja) !important;
    background: var(--superficie) !important;
    padding: 22px !important;
    margin-bottom: 14px !important;
  }

  /* Una prueba entera ya no cabe en una hoja con la letra de pantalla, y
     exigir que cupiera dejaba páginas a medias. Ahora la sección se puede
     partir, pero nunca por en medio de una gráfica ni de una escala. */
  .bloque-prueba { break-inside: auto; page-break-inside: auto; }

  /* Chrome no sabe repartir un contenedor flex entre dos hojas: si la fila
     de gráficas no cabe, la empuja entera y deja la página anterior vacía.
     En impresión se cambia a flujo en línea, que sí se parte, y las
     gráficas siguen quedando lado a lado como en pantalla. */
  .graficas-fila {
    display: block;
    text-align: center;
    break-inside: auto;
    page-break-inside: auto;
  }
  .graficas-fila > .grafica {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin: 0 12px 18px;
  }

  .grafica,
  .escala-item { break-inside: avoid; page-break-inside: avoid; }
  .bloque-prueba > header { break-after: avoid; page-break-after: avoid; }

  .bloque-prueba > header h3 {
    font-size: 21px !important;
    color: var(--tinta) !important;
    letter-spacing: -.01em;
  }
  .bloque-prueba > header .rotulo,
  .resumen-general .rotulo {
    font-size: 10.5px !important;
    letter-spacing: .14em !important;
    color: var(--tenue) !important;
  }

  /* Tipografia y color de los textos, tal cual en pantalla */
  .tenue, .mini, .pie-g, .nota-g,
  .escala-item .txt { color: var(--tenue) !important; }

  .escala-item { border-top: 1px solid var(--linea) !important; padding: 12px 0 10px !important; }
  .escala-item .nom { font-size: 14.5px !important; }
  .escala-item .txt { font-size: 13.5px !important; }
  .escala-item .dato { font-size: 13px !important; }

  .titulo-g { font-size: 14px !important; color: var(--tinta) !important; }
  .nota-g   { font-size: 12.5px !important; }
  .pie-g    { font-size: 11.5px !important; }
  .cifra-col { font-size: 12px !important; }
  .plano.denso .cifra-col { font-size: 10px !important; }
  .eje-y span { font-size: 10.5px !important; }
  .g-pies span { font-size: 11px !important; }

  .ficha-impresa {
    background: var(--papel) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--r-ctrl) !important;
    font-size: 12px !important;
    color: var(--tenue) !important;
    padding: 10px 12px !important;
  }
  .ficha-impresa b { color: var(--tinta) !important; }

  .aviso {
    border-radius: var(--r-ctrl) !important;
    font-size: 13px !important;
  }

  .encabezado-corrido {
    font-size: 11px !important;
    color: var(--tenue) !important;
    border-bottom: 1px solid var(--linea) !important;
    padding-bottom: 7px !important;
    margin-bottom: 14px !important;
  }

  /* La portada si conserva su escala: es una hoja de presentacion */
  .pie-reporte { font-size: 11px !important; color: var(--tenue) !important; }
}