/* Página pública del QR.
 *
 * La abre alguien con el celular en la mano — un inspector de la DGAC, una
 * aerolínea, otra escuela — para responder UNA pregunta: ¿este papel vale?
 * Todo lo demás es secundario.
 *
 * Sin fuentes externas y sin scripts a propósito: es un artefacto de
 * cumplimiento que tiene que abrir con mala señal y seguir funcionando dentro
 * de veinte años, cuando el QR impreso siga circulando.
 *
 * Paleta tomada del logo: negro cálido #1a1a12, amarillo de marca #ffe600.
 * Los estados siguen la lógica de anunciador de cabina, no de notificación
 * web: vigente verde, baja rojo, aviso ámbar. */

/* === tokens compartidos — bloque IDÉNTICO en app.css y verificacion.css. Si tocás uno, copiá el bloque entero al otro. === */
:root{
  color-scheme:light;
  --negro:#1a1a12; --tinta:#16161a; --amarillo:#ffe600;
  --papel:#f7f6f1; --papel-suave:#fbfaf7;
  --linea:#dfddd3; --linea-suave:#ebe9e2; --linea-fuerte:#c9c7bd; --linea-campo:#8f8d82;
  --gris:#6b6a60;
  --ok:#0b6e3f;     --ok-bg:#e4f1e9;     --ok-placa:#4ade80;
  --mal:#b3261e;    --mal-bg:#fbe9e7;    --mal-placa:#ff8f85; --mal-oscuro:#8f1e17;
  --alerta:#8a5a00; --alerta-bg:#fbf0d6; --alerta-placa:#ffc83d;
  --t-etiqueta:11px; --t-nota:12px; --t-chica:13px; --t-base:14px; --t-cuerpo:15px; --t-titulo:22px; --t-veredicto:30px;
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; --e12:48px;
  --radio:7px; --radio-tarjeta:10px;
  --alto-control:42px;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;
}
/* === fin tokens compartidos === */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--t-cuerpo);
  line-height:1.55;
  -webkit-text-size-adjust:100%;
}

.envoltura{max-width:600px;margin:0 auto;padding:var(--e5) 16px var(--e12)}

/* --------------------------------------------------------------- cabecera
 *
 * Presente en las tres páginas: quien escanea tiene que saber de entrada
 * quién responde, aunque el certificado no exista. */

.marca{
  display:flex;align-items:center;gap:var(--e3);
  padding:0 0 var(--e4);
  border-bottom:3px solid var(--amarillo);
  margin-bottom:var(--e6);
}
.marca img{width:52px;height:auto;flex-shrink:0}
.marca .n{font-weight:700;font-size:var(--t-cuerpo);line-height:1.25;letter-spacing:-.1px}
.marca .t{
  font-size:var(--t-etiqueta);color:var(--gris);
  text-transform:uppercase;letter-spacing:.9px;font-weight:600;margin-top:2px;
}

/* ------------------------------------------------------------------ panel */

.panel{
  background:#fff;
  border:1px solid var(--linea);
  border-radius:var(--radio-tarjeta);
  overflow:hidden;
}

/* ------------------------------------------------- el anunciador de estado
 *
 * La pieza central. Placa oscura, palabra en bloque, retroiluminada por su
 * color. Se lee de un vistazo y no depende solo del color: lleva símbolo y
 * palabra, para quien no distingue verde de rojo.
 *
 * Adentro, el veredicto manda: "CERTIFICADO" es la etiqueta chica (.que) y
 * la palabra que responde la pregunta (.ver) es lo único grande. */

.estado{
  background:var(--negro);
  color:#fff;
  padding:var(--e6);
  text-align:center;
  position:relative;
}
.estado::after{                 /* la franja retroiluminada del anunciador */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:currentColor;opacity:.9;
}
.estado .icono{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:2px solid currentColor;
  font-size:var(--t-titulo);line-height:1;font-weight:700;
  margin-bottom:12px;
}
.estado .txt{
  margin:0;color:#fff;text-transform:uppercase;line-height:1.1;font-weight:800;
  font-size:var(--t-veredicto);   /* respaldo si el texto viene sin .que/.ver */
}
.estado .txt .que{
  display:block;font-size:var(--t-etiqueta);font-weight:700;
  letter-spacing:1.4px;opacity:.7;margin-bottom:4px;
}
.estado .txt .ver{display:block;font-size:var(--t-veredicto);letter-spacing:.5px}
.estado .det{
  font-size:var(--t-chica);margin-top:9px;line-height:1.45;
  color:rgba(255,255,255,.75);   /* atenuado por color, no por opacity, para que
                                    la fecha en mono pueda ir a blanco pleno */
  max-width:38ch;margin-left:auto;margin-right:auto;
}
.estado .det .mono{font-family:var(--mono);color:#fff;opacity:1}

/* El color vive en el símbolo y en la franja; la palabra queda blanca para
 * que se lea igual a pleno sol. Los tonos -placa están calibrados sobre el
 * negro; el aviso es ámbar, no el amarillo de marca que ya tiene la franja
 * de la cabecera 30px más arriba. */
.estado.ok{color:var(--ok-placa)}
.estado.mal{color:var(--mal-placa)}
.estado.alerta{color:var(--alerta-placa)}

/* ------------------------------------------------------------------ datos
 *
 * Como una hoja de bitácora: etiqueta a la izquierda, valor a la derecha.
 * Todo identificador va monoespaciado — folio, documento, horas — porque son
 * cosas que se leen carácter por carácter comparando contra el papel. */

.datos{padding:var(--e1) var(--e6) var(--e4)}
dl.datos{margin:0}
.dato{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:var(--e3) 0;border-bottom:1px solid var(--linea);
}
.dato:last-child{border-bottom:0}
.dato dt{margin:0}
.dato dd{margin:0}
.dato .e{
  font-size:var(--t-etiqueta);text-transform:uppercase;letter-spacing:.8px;
  color:var(--gris);font-weight:600;flex-shrink:0;
}
.dato .v{font-weight:600;text-align:right;font-size:var(--t-base)}
.dato .v.mono{
  font-family:var(--mono);
  font-size:var(--t-chica);letter-spacing:.2px;
}
/* Folio y documento: los dos que se cotejan contra el papel, un paso más
 * grandes y más abiertos para leerlos carácter por carácter. */
.dato.clave .v.mono{font-size:var(--t-cuerpo);font-weight:700;letter-spacing:.06em}

/* -------------------------------------------------------------- historial
 *
 * La circular pide estado actual E HISTÓRICO. Se dibuja como una línea de
 * tiempo real, no como una lista suelta. El énfasis va al último evento,
 * que es el estado actual: punto lleno con el color del estado y la leyenda
 * "Estado actual" delante de la fecha. */

.hist{padding:0 var(--e6) var(--e5)}
.hist h2{
  font-size:var(--t-etiqueta);text-transform:uppercase;letter-spacing:.8px;
  color:var(--gris);font-weight:600;margin:var(--e4) 0 var(--e3);
}
.hist ol{list-style:none;margin:0;padding:0;font-size:var(--t-chica)}
.hist li{
  padding:0 0 16px 20px;border-left:2px solid var(--linea);
  position:relative;
}
.hist li:last-child{border-left-color:transparent;padding-bottom:0}
.hist li::before{
  content:"";position:absolute;left:-6px;top:5px;
  width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--gris);
}
.hist li.ev-ok{--ev:var(--ok)}
.hist li.ev-aviso{--ev:var(--alerta)}
.hist li.ev-baja{--ev:var(--mal)}
.hist li::before{border-color:var(--ev,var(--gris))}
.hist li:first-child::before{background:#fff}
.hist li:last-child::before{background:var(--ev,var(--negro));border-color:var(--ev,var(--negro))}
.hist li:last-child .cuando::before{
  content:"Estado actual · ";
  font-family:system-ui,sans-serif;font-weight:600;
}
.hist li b{font-weight:700;color:var(--ev,var(--tinta))}
.hist .cuando{
  color:var(--gris);font-size:var(--t-nota);
  font-family:var(--mono);
}

/* ------------------------------------------------------------------ sello */

.sello{
  padding:var(--e4) var(--e6);background:var(--papel-suave);
  border-top:1px solid var(--linea);
  font-size:var(--t-nota);color:var(--gris);line-height:1.65;
}
.sello b{color:var(--tinta)}

/* ----------------------------------------------------- búsqueda por folio
 *
 * La salida cuando el QR no resuelve: el folio va impreso en el papel, así
 * que siempre queda un camino manual. Pensada para el pulgar: campo de 16px
 * (Safari iOS no hace zoom), controles de 42/44px, botón a todo el ancho en
 * pantallas angostas. */

.buscar{
  padding:var(--e5) var(--e6);border-top:1px solid var(--linea);
  font-size:var(--t-base);
}
.panel > .buscar:first-child{border-top:0}
.buscar h1{
  margin:0 0 4px;font-size:var(--t-titulo);line-height:1.2;
  letter-spacing:-.3px;font-weight:800;
}
.buscar .ayuda{margin:0 0 14px;font-size:var(--t-chica);color:var(--gris)}
.buscar form{display:flex;gap:var(--e2);flex-wrap:wrap}
.buscar label{
  flex-basis:100%;font-size:var(--t-etiqueta);text-transform:uppercase;
  letter-spacing:.8px;color:var(--gris);font-weight:600;margin-bottom:-2px;
}
.buscar input{
  flex:1;min-width:190px;
  min-height:var(--alto-control);padding:0 12px;
  border:1px solid var(--linea-campo);border-radius:var(--radio);
  font:inherit;font-size:16px;background:#fff;
  font-family:var(--mono);
}
.buscar input::placeholder{color:var(--gris);opacity:1}
.buscar input:focus{outline:3px solid var(--amarillo);outline-offset:-1px;border-color:var(--negro)}
.buscar button{
  background:var(--negro);color:#fff;border:0;border-radius:var(--radio);
  min-height:44px;padding:0 18px;
  font:inherit;font-size:var(--t-base);font-weight:700;cursor:pointer;
}
.buscar button:hover{background:#000}
.buscar button:focus-visible{
  outline:3px solid var(--amarillo);outline-offset:2px;
  box-shadow:0 0 0 7px var(--negro);   /* cierra el anillo amarillo en negro para que lea sobre blanco */
}

/* ------------------------------------------------------------------ nota */

.nota{
  font-size:var(--t-nota);color:var(--gris);text-align:center;
  margin:var(--e5) auto 0;max-width:46ch;line-height:1.6;
}

@media (max-width:420px){
  /* NO ENCONTRADO a 26px mide ~216px: entra en los 297px útiles de un iPhone
   * de 375 y en los 282 de un Android de 360. */
  .estado .txt,.estado .txt .ver{font-size:26px}
  .dato{flex-direction:column;gap:3px;align-items:flex-start}
  .dato .v{text-align:left}
  .buscar button{flex:1 1 100%}
}

/* -------------------------------------------------------------- impresión
 *
 * Quien imprime la página la va a engrapar al expediente. La placa negra se
 * invierte: la palabra en negro sobrevive a una impresora en blanco y negro;
 * el símbolo y la franja llevan el color oscuro del estado, que sobre blanco
 * da 5,9:1 a 6,5:1. La búsqueda y la nota no tienen sentido en papel. */

@media print{
  @page{margin:15mm}
  body{background:#fff}
  .envoltura{max-width:none;padding:0}
  .marca{border-bottom-color:var(--negro)}
  .panel{border:1px solid var(--negro);border-radius:0}
  .estado{background:none;color:var(--negro);border-bottom:6px solid currentColor;padding-bottom:18px}
  .estado.ok{color:var(--ok)}
  .estado.mal{color:var(--mal)}
  .estado.alerta{color:var(--alerta)}
  .estado .txt,.estado .txt .que,.estado .txt .ver{color:var(--negro);opacity:1}
  .estado .det{color:var(--tinta);opacity:1}
  .estado .det .mono{color:var(--tinta)}
  .estado::after{display:none}
  .sello{background:none;border-top:1px solid var(--negro)}
  .buscar,.nota{display:none}
}