/* Pasaporte EYS, versión 3. Estilo base de las 4 páginas. Colores de la paleta EYS, sin azul */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fuentes/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fuentes/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fuentes/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fuentes/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fuentes/montserrat-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fuentes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fuentes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fuentes/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --noche: #0a0506;
  --sangre: #6a0704;
  --carmesi: #a10c07;
  --filo: #c1121f;
  --cromo: #e8e6e3;
  --blanco: #f6f2ee;
  --tinta: #eeebe8;
  --tinta-2: rgba(238, 235, 232, .80);
  --tinta-3: rgba(238, 235, 232, .58);
  --linea: rgba(238, 235, 232, .14);
  --linea-2: rgba(238, 235, 232, .30);
  --campo: rgba(238, 235, 232, .04);
  --campo-foco: rgba(238, 235, 232, .075);
  --error: #ec6a70;
  --ok: #7fd4a0;
  --aviso: #ef4f63;
  --fondo-opcion: #181416;
  --gris: #a99f9d;
  --mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --curva: cubic-bezier(.2, .7, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--noche); color: var(--tinta);
  font-family: "Montserrat", sans-serif; font-size: 15px; line-height: 1.6;
  overflow-x: hidden;
}
::selection { background: var(--sangre); color: var(--blanco); }
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70vw 50vh at 96% -12%, rgba(161, 12, 7, .34), transparent 62%),
    radial-gradient(120vw 90vh at 50% 50%, transparent 60%, rgba(0, 0, 0, .45) 100%);
}
.oculto { display: none !important; }
.envoltura { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 20px 64px; }
.envoltura.angosta { max-width: 520px; }
.envoltura.ancha { max-width: 960px; }

/* Cabecera */
.cabecera { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 0 18px; border-bottom: 1px solid var(--linea); }
.marca { display: flex; align-items: center; gap: 14px; color: var(--tinta); text-decoration: none; }
.marca .logo { display: block; height: 26px; width: auto; }
.marca i { display: block; width: 1px; height: 20px; background: var(--linea-2); }
.marca small { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.cabecera-lado { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.folio { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--tinta); white-space: nowrap; }
.ref { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }
.ref b { color: var(--tinta); font-weight: 600; }
.ref::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 4px rgba(127, 212, 160, .14), 0 0 12px rgba(127, 212, 160, .7); }
.ref.sin::before { background: var(--error); box-shadow: 0 0 0 4px rgba(236, 106, 112, .16); }
.muestra { margin: 14px 0 0; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--filo); }

/* Títulos */
.titulo { padding: 36px 0 6px; }
.titulo.corto { padding-top: 22px; }
.sello-mini { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--filo); }
h1 { margin: 10px 0 10px; font-size: clamp(28px, 6vw, 42px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); overflow-wrap: anywhere; }
.titulo p { margin: 0; color: var(--tinta-2); max-width: 56ch; }
.rotulo, .bloque > h2 { margin: 0 0 10px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.bloque { margin-top: 28px; }

/* Campos */
label.campo { display: block; font-weight: 700; font-size: 15px; margin: 18px 0 8px; color: var(--tinta); }
label.campo small, .ayuda { display: block; font-weight: 400; color: var(--tinta-3); font-size: 13px; margin-top: 2px; }
input.linea, select.linea, textarea.linea {
  display: block; width: 100%; padding: 0 14px; border-radius: 6px; border: 1px solid var(--linea-2);
  background-color: var(--campo); color: var(--tinta); font: 500 16px/1.3 "Montserrat", sans-serif;
  transition: border-color .2s var(--curva), background-color .2s var(--curva), box-shadow .2s var(--curva);
}
input.linea, select.linea { height: 50px; }
textarea.linea { min-height: 120px; padding: 14px; resize: vertical; line-height: 1.6; }
select.linea option { background: var(--fondo-opcion); color: var(--tinta); }
input.linea::placeholder, textarea.linea::placeholder { color: rgba(238, 235, 232, .42); font-weight: 400; }
input.linea:focus, select.linea:focus, textarea.linea:focus { outline: none; border-color: var(--filo); background-color: var(--campo-foco); box-shadow: 0 0 0 4px rgba(193, 18, 31, .16); }
input.linea.codigo { font-family: var(--mono); font-size: 24px; letter-spacing: .4em; text-align: center; }
.con-falta input.linea, .con-falta select.linea, .con-falta textarea.linea, .con-falta .casillas { border-color: var(--error); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 50px; padding: 10px 20px;
  border-radius: 8px; border: 1px solid var(--linea-2); background: var(--campo); color: var(--tinta); cursor: pointer;
  font: 700 14.5px/1.2 "Montserrat", sans-serif; text-decoration: none;
}
.boton:hover, .boton:focus-visible { border-color: var(--filo); background: var(--campo-foco); outline: none; }
.boton.rojo { border: 0; background: linear-gradient(180deg, var(--filo), var(--carmesi)); color: var(--blanco); box-shadow: 0 10px 26px -12px rgba(193, 18, 31, .8), inset 0 1px 0 rgba(255, 255, 255, .18); }
.boton.rojo:hover { filter: brightness(1.08); }
.boton[disabled] { opacity: .55; cursor: progress; }
.boton.entero { width: 100%; }
.mini { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 13px; border-radius: 6px; border: 1px solid var(--linea-2); background: transparent; color: var(--tinta); font: 700 12.5px/1.1 "Montserrat", sans-serif; cursor: pointer; text-decoration: none; }
.mini:hover, .mini:focus-visible { border-color: var(--filo); outline: none; }
.mini.listo { border-color: var(--ok); color: var(--ok); }
.mini.fuerte { border-color: var(--filo); background: rgba(193, 18, 31, .22); color: var(--blanco); }
.mini[disabled] { opacity: .55; cursor: progress; }
.enlace { color: var(--tinta); font-weight: 600; text-underline-offset: 3px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; align-items: center; }

/* Avisos de página y faltas */
.estado-pagina { margin-top: 34px; padding: 26px 22px; border: 1px solid var(--linea); border-radius: 6px; background: rgba(238, 235, 232, .03); }
.estado-pagina h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.estado-pagina p { margin: 0 0 14px; color: var(--tinta-2); }
.falta { margin: 10px 0 0; min-height: 18px; color: var(--error); font-size: 14px; font-weight: 600; }
.bien { margin: 10px 0 0; color: var(--ok); font-size: 14px; font-weight: 600; }
.nota-pie { margin: 14px 0 0; color: var(--tinta-3); font-size: 13px; }

/* Pastillas */
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pastilla { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linea-2); font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); white-space: nowrap; }
.pastilla.fuerte { border-color: var(--filo); color: var(--blanco); background: rgba(193, 18, 31, .22); }
.pastilla.aviso { border-color: var(--aviso); color: var(--aviso); }
.pastilla.ok { border-color: var(--ok); color: var(--ok); }
.pastilla.alerta { border-color: var(--error); color: var(--error); background: rgba(236, 106, 112, .1); }
.pastilla.apagada { border-color: var(--linea); color: var(--gris); }

/* Entrada y acceso */
.tarjeta-acceso { margin-top: 30px; padding: 26px 24px 28px; border: 1px solid var(--linea-2); border-radius: 8px; background: rgba(238, 235, 232, .03); }
.tarjeta-acceso h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.tarjeta-acceso > p { margin: 0; color: var(--tinta-2); }
.pasos { display: flex; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; counter-reset: paso; }
.pasos li { counter-increment: paso; flex: 1 1 0; padding: 9px 8px; border-top: 2px solid var(--linea-2); font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.pasos li::before { content: counter(paso, decimal-leading-zero) " "; color: var(--tinta-3); }
.pasos li.vivo { border-top-color: var(--filo); color: var(--tinta); }
.pasos li.vivo::before { color: var(--filo); }
.persona { margin-top: 18px; min-height: 66px; }
.persona.de-muestra { display: flex; align-items: center; padding: 0 14px; border: 1px dashed var(--linea-2); border-radius: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3); }
.tarjeta-acceso > p.pie-acceso, .pie-acceso { margin: 22px 0 0; text-align: center; }
.tarjeta-acceso > p.bien { margin: 14px 0 0; color: var(--ok); }
.tarjeta-acceso > p.falta { margin: 10px 0 12px; color: var(--error); }
.tarjeta-acceso > p.nota-pie { margin: 14px 0 0; color: var(--tinta-3); }

/* Formulario de una aduana. Lo usan la página del alumno y la vista previa del constructor */
.formulario h3 { margin: 30px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); font-size: 17px; font-weight: 800; }
.formulario .intro { margin: 0 0 6px; color: var(--tinta-2); }
.pregunta { margin-top: 20px; }
.pregunta > label, .pregunta > .rotulo-pregunta { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--tinta); }
.pregunta .marca-necesaria { margin-left: 8px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3); }
.pregunta .ayuda { margin: -4px 0 8px; }
.casillas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px; border: 1px solid transparent; border-radius: 8px; }
.casilla-opcion { position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--linea-2); border-radius: 8px; background: var(--campo); cursor: pointer; font-size: 14.5px; font-weight: 500; color: var(--tinta-2); }
.casilla-opcion input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--filo); }
.casilla-opcion.marcada { border-color: var(--filo); background: rgba(193, 18, 31, .18); color: var(--blanco); }
.archivo-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 6px; background: var(--campo); font-size: 14px; overflow-wrap: anywhere; }
.archivo-fila b { font-weight: 600; flex: 1 1 200px; min-width: 0; }
.archivo-fila small { font-family: var(--mono); font-size: 11px; color: var(--tinta-3); white-space: nowrap; }
input.archivo-entrada { display: block; width: 100%; margin-top: 4px; color: var(--tinta-2); font: 500 14px/1.4 "Montserrat", sans-serif; }
input.archivo-entrada::file-selector-button { margin-right: 12px; min-height: 40px; padding: 6px 14px; border-radius: 6px; border: 1px solid var(--linea-2); background: var(--campo); color: var(--tinta); font: 700 13px/1 "Montserrat", sans-serif; cursor: pointer; }

/* Respuestas ya enviadas, solo lectura */
.dato { display: grid; grid-template-columns: 240px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.dato:last-child { border-bottom: 0; }
.dato span { color: var(--tinta-3); font-size: 13px; }
.dato b { font-weight: 600; color: var(--tinta); overflow-wrap: anywhere; white-space: pre-wrap; }
.dato b.vacia { font-weight: 400; font-style: italic; color: var(--tinta-3); }

@media (max-width: 620px) {
  .marca small, .marca i { display: none; }
  .titulo { padding-top: 28px; }
  .casillas { grid-template-columns: 1fr; }
  .dato { grid-template-columns: 1fr; gap: 2px; }
  .tarjeta-acceso { padding: 22px 16px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}