/* ============================================================================
 *  EXPO TITIKAKA MINERO 2026 · PÁGINAS PÚBLICAS DEL MÓDULO DE ASISTENTES
 *  etm-publico.css — sistema de diseño completo (tokens + componentes) · v4
 *
 *  Índice
 *    1. Fuente autoalojada
 *    2. Tokens (colores, tipografía, espacio, radios, sombras, movimiento)
 *    3. Base
 *    4. Estructura: lienzo, escena, panel, pie
 *    5. Escena: marca, introducción, chips, arte
 *    6. Gafete (credencial en vivo y credencial grande)
 *    7. Formulario: pasos, tarjeta, campos, documento, opciones, píldoras,
 *       días, resumen, consentimientos
 *    8. Botones, avisos, resumen de errores
 *    9. Resultado, confianza, preguntas frecuentes
 *   10. Página de la credencial
 *   11. Constancia y recuperar
 *   12. Utilidades
 *   13. Movimiento
 *   14. Adaptación: pantallas, alto contraste, impresión
 *
 *  Voz tipográfica: una sola familia y frases en minúscula con mayúscula
 *  inicial. Las mayúsculas espaciadas quedan solo en la cabecera impresa de
 *  la credencial, que imita un gafete real.
 *
 *  Reglas: sin estilos en línea (la CSP no los admite), sin librerías,
 *  compatible con navegadores de 2019 en adelante (sin :has, sin nesting).
 *  Documentación: docs/06-DISENO-Y-ACCESIBILIDAD.md
 * ==========================================================================*/

/* ── 1. Fuente autoalojada ───────────────────────────────────────────────
   Montserrat variable (100–900), subconjunto latino, 38 KB. Licencia SIL OFL
   1.1 en montserrat-OFL.txt. Se sirve desde el propio dominio: sin Google
   Fonts no hay petición a terceros ni fuga de la IP del visitante. */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('montserrat.woff2') format('woff2-variations'),
       url('montserrat.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── 2. Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Marca: azul institucional */
  --az-950: #040a15;
  --az-900: #060f1e;
  --az-850: #081630;
  --az-800: #0a1a38;
  --az-700: #0d2145;
  --az-600: #122f6a;
  --az-500: #1b4290;
  --az-400: #3a63b8;
  --az-100: #e8eef9;
  --az-50:  #f3f6fc;
  /* Marca: oro */
  --oro-800: #6b5316;
  --oro-700: #7d6419;   /* texto dorado sobre blanco (≥ 5:1) */
  --oro-500: #c9a84c;
  --oro-400: #e8c96a;
  --oro-200: #f4e3ad;
  --oro-100: #fbf4e1;
  --oro-a10: rgba(201, 168, 76, .10);
  --oro-a25: rgba(201, 168, 76, .25);
  /* Neutros */
  --tinta:    #111a2e;
  --gris-700: #3d4760;
  --gris-600: #4d5872;
  --gris-500: #5f6982;   /* texto secundario sobre blanco (≥ 5:1) */
  --gris-400: #8b94ab;   /* solo decorativo o texto grande */
  --gris-300: #c4cad8;
  --gris-200: #dde2ec;
  --gris-100: #eef1f6;
  --borde:    #8b94ab;   /* contorno de campos sobre blanco (≥ 3:1) */
  --fondo:    #f5f6fa;
  --blanco:   #ffffff;
  /* Semánticos */
  --ok-700:  #136b42;
  --ok-600:  #1b8a55;
  --ok-100:  #e6f5ed;
  --mal-700: #9b1c26;
  --mal-600: #b3262f;
  --mal-100: #fcebec;
  --atn-700: #75560b;
  --atn-100: #fbf4e3;
  --info-700: #1b4290;
  --info-100: #eaf0fb;
  /* Tipografía */
  --fuente: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Espacio: escala de 4 px */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px; --e-16: 64px;
  /* Radios */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  /* Sombras */
  --s-1: 0 1px 2px rgba(13, 33, 69, .06);
  --s-2: 0 1px 2px rgba(13, 33, 69, .05), 0 12px 32px -12px rgba(13, 33, 69, .20);
  --s-3: 0 40px 90px -24px rgba(2, 6, 14, .72);
  /* Movimiento */
  --m-1: .15s;
  --m-2: .3s;
  --m-3: .6s;
  --curva: cubic-bezier(.2, .7, .2, 1);
  /* Foco visible, igual en todo el sitio */
  --anillo: 0 0 0 3px var(--blanco), 0 0 0 6px var(--az-500);
}

/* ── 3. Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--az-500); text-underline-offset: 3px; }
a:hover { color: var(--az-600); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--oro-200); color: var(--az-900); }

/* Foco: visible siempre con teclado; con el ratón, solo donde aporta. */
:focus { outline: 2px solid var(--az-500); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--az-500); outline-offset: 2px; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor;
       stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Enlace para saltar al contenido: invisible hasta recibir foco. */
.saltar {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 12px 18px; border-radius: var(--r-md);
  background: var(--blanco); color: var(--az-700); font-weight: 800;
  box-shadow: var(--s-2); text-decoration: none;
  transition: top var(--m-2) var(--curva);
}
.saltar:focus { top: 12px; }

/* ── 4. Estructura ─────────────────────────────────────────────────────── */
.lienzo {
  display: grid;
  grid-template-columns: minmax(440px, 46%) 1fr;
  min-height: 100vh;
}
.panel {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 48px 6vw 32px;
  padding: clamp(28px, 6vh, 64px) clamp(24px, 6vw, 96px) 32px;
  min-width: 0;
  background: var(--blanco);
}
.panel:focus, #contenido:focus { outline: none; }
.ficha-res:focus, .errores:focus { outline: none; }
.panel-in { width: 100%; max-width: 620px; }

/* ── 5. Escena ─────────────────────────────────────────────────────────── */
.escena {
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh;
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 28px 44px 24px;
  padding: 28px clamp(28px, 3.6vw, 56px) 24px;
  color: var(--blanco);
  background:
    radial-gradient(110% 70% at 85% -5%, rgba(27, 66, 144, .62) 0%, rgba(27, 66, 144, 0) 60%),
    radial-gradient(80% 50% at -10% 105%, rgba(201, 168, 76, .12) 0%, rgba(201, 168, 76, 0) 60%),
    linear-gradient(172deg, var(--az-700) 0%, var(--az-800) 48%, var(--az-900) 100%);
}
.escena-arte { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; }
.escena-arte svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
.escena-topo { position: absolute; top: 0; right: 0; width: 70%; height: 60%; z-index: -1; pointer-events: none; }
.estrella { animation: titila 4.5s ease-in-out infinite; }
.estrella:nth-child(3n)   { animation-delay: 1.2s; animation-duration: 6s; }
.estrella:nth-child(3n+1) { animation-delay: 2.6s; animation-duration: 5.2s; }
.reflejo { animation: reflejo 11s linear infinite; }
.reflejo:nth-child(2n) { animation-duration: 15s; }
.reflejo:nth-child(3n) { animation-duration: 19s; }
.balsa { animation: meceo 7s ease-in-out infinite; transform-origin: 185px 792px; }

.escena-cab { display: flex; align-items: center; justify-content: space-between; }
.escena-cab > * + * { margin-left: 16px; }
.marca { display: flex; align-items: center; color: var(--blanco); text-decoration: none; min-width: 0; }
.marca:hover { color: var(--blanco); }
.marca-sim {
  width: 42px; height: 42px; flex: none; border-radius: 12px; margin-right: 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(232, 201, 106, .24), rgba(201, 168, 76, .06));
  border: 1px solid var(--oro-a25);
}
.marca-sim svg { width: 25px; height: 25px; }
.marca-txt b { display: block; font-size: .94rem; font-weight: 800; letter-spacing: -.005em; line-height: 1.2; }
.marca-txt small { display: block; font-size: .76rem; font-weight: 600; color: var(--oro-400); }
.volver {
  display: inline-flex; align-items: center; flex: none;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(226, 234, 248, .86); text-decoration: none;
  font-size: .8rem; font-weight: 600;
  transition: background var(--m-2), border-color var(--m-2), color var(--m-2);
}
.volver .ico { width: 15px; height: 15px; margin-right: 6px; }
.volver:hover { color: var(--blanco); border-color: var(--oro-a25); background: rgba(255, 255, 255, .06); }

.escena-intro { position: relative; z-index: 2; margin-top: 28px; margin-top: clamp(20px, 4.5vh, 52px); }
.escena h1 {
  font-size: 2.5rem; font-size: clamp(2rem, 3vw, 2.9rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
}
.escena-lead { margin-top: 12px; max-width: 46ch; color: rgba(222, 231, 246, .84); font-size: .95rem; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; margin: 16px 0 0 0; }
.chip {
  display: inline-flex; align-items: center; margin: 3px 20px 3px 0;
  font-size: .86rem; font-weight: 600; color: #e9eef8;
}
.chip .ico { width: 17px; height: 17px; color: var(--oro-400); margin-right: 7px; }
.chip-cuenta { color: var(--oro-400); }
.chip-cuenta b { font-size: 1.05rem; font-weight: 800; color: var(--blanco); margin-right: 6px; font-variant-numeric: tabular-nums; }

.escena-vitrina {
  flex: 1; min-height: 0;
  display: grid; place-items: center;
  padding: 26px 0 8px;
  -webkit-perspective: 1300px; perspective: 1300px;
}
.ilustracion { width: 300px; max-width: 80%; height: auto; max-height: 100%; animation: aparece 1s var(--curva) .15s both; filter: drop-shadow(0 30px 40px rgba(2, 6, 14, .45)); }
.il-carta { animation: asoma 1.2s var(--curva) .5s both; }
@keyframes asoma { from { -webkit-transform: translateY(46px); transform: translateY(46px); } }
.escena-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  font-size: .74rem; color: rgba(214, 225, 244, .72);
}
.escena-pie > * { margin-top: 6px; }
.logos { display: flex; align-items: center; }
.logos img { width: auto; margin-right: 18px; opacity: .9; }

/* ── 6. Gafete ─────────────────────────────────────────────────────────── */
.gafete {
  --rx: 3deg; --ry: -6deg; --s: 1;
  position: relative; width: 340px; max-width: 100%;
  color: var(--tinta); background: var(--blanco);
  border-radius: var(--r-xl);
  box-shadow: var(--s-3), 0 0 0 1px rgba(255, 255, 255, .08);
  -webkit-transform: scale(var(--s)) rotateX(var(--rx)) rotateY(var(--ry));
          transform: scale(var(--s)) rotateX(var(--rx)) rotateY(var(--ry));
  -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
  animation: aparece 1s var(--curva) .15s both;
}
/* Cinta y broche: lo que hace que se lea como un gafete de evento */
.gafete-cinta {
  position: absolute; left: 50%; top: -74px; width: 30px; height: 84px; margin-left: -15px; z-index: -1;
  background: linear-gradient(90deg, var(--oro-700), var(--oro-500) 30%, var(--oro-400) 55%, var(--oro-500) 80%, var(--oro-700));
  border-radius: 3px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 55%);
}
.gafete-cinta::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 40px; height: 16px; margin-left: -20px;
  border-radius: 5px; background: linear-gradient(180deg, #d9dee8, #9aa3b5); box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}
.gafete-brillo {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 45%, rgba(232, 201, 106, .35) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 260% 100%; mix-blend-mode: soft-light;
  animation: holograma 6.5s ease-in-out infinite;
}
.gafete-cab {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 22px 20px 32px;
  background: linear-gradient(140deg, var(--az-700), var(--az-600));
  color: var(--blanco);
}
.gafete-ranura {
  position: absolute; left: 50%; top: 9px; width: 46px; height: 7px; margin-left: -23px;
  border-radius: 4px; background: var(--az-900); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
}
.gafete-cab svg { position: absolute; right: -8px; bottom: 0; width: 190px; opacity: .55; }
.gafete-cab b { position: relative; display: block; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gafete-cab small { position: relative; display: block; margin-top: 2px; font-size: .7rem; font-weight: 600; color: var(--oro-400); }
.gafete-cuerpo { position: relative; z-index: 1; padding: 28px 20px 18px; }
.gafete-cuerpo::before, .gafete-cuerpo::after {
  content: ""; position: absolute; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--az-850);
}
.gafete-cuerpo::before { left: -11px; }
.gafete-cuerpo::after  { right: -11px; }
.gafete-perfil {
  position: absolute; left: 20px; top: -14px; z-index: 3;
  display: inline-flex; align-items: center;
  padding: 5px 12px 5px 10px; border-radius: var(--r-pill);
  background: var(--oro-400);
  color: var(--az-800);
  font-size: .72rem; font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(125, 100, 25, .6);
}
.gafete-perfil .ico { width: 14px; height: 14px; margin-right: 6px; stroke-width: 2; }
.gafete-nombre {
  display: flex; align-items: flex-end; min-height: 2.5em;
  font-size: 1.1rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em;
  text-transform: uppercase; word-break: break-word;
}
.gafete-nombre.vacio { color: #b3bbcd; font-weight: 700; text-transform: none; }
.gafete-nombre.valido { color: var(--ok-700); font-size: .86rem; }
.gafete-nombre.valido .ico { width: 18px; height: 18px; margin-right: 6px; stroke-width: 2.2; }
.gafete-doc { margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--gris-500); letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.gafete-datos { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; margin-top: 12px; }
.gafete-datos div { min-width: 0; }
.gafete-datos small { display: block; font-size: .68rem; font-weight: 600; color: var(--gris-500); }
.gafete-datos span { display: block; font-size: .8rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gafete-dias { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; grid-gap: 5px; gap: 5px; margin-top: 12px; }
.gafete-dias span {
  text-align: center; padding: 5px 0; border-radius: 7px;
  font-size: .66rem; font-weight: 800; background: var(--gris-100); color: #9aa3b8;
  transition: background var(--m-2), color var(--m-2), transform var(--m-2) var(--curva);
}
.gafete-dias span.si { background: var(--az-700); color: var(--oro-400); -webkit-transform: translateY(-2px); transform: translateY(-2px); }
.gafete-pie { display: flex; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--gris-200); }
.gafete-qr {
  width: 84px; height: 84px; flex: none; margin-right: 14px; border-radius: 12px;
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--gris-100) 0 6px, #f8f9fb 6px 12px);
  color: #b3bbcd; border: 1px dashed #cdd3e0;
}
.gafete-qr .ico { width: 30px; height: 30px; }
.gafete-qr img { width: 84px; height: 84px; border-radius: 8px; image-rendering: pixelated; }
.gafete-codigo small { display: block; font-size: .68rem; font-weight: 600; color: var(--gris-500); }
.gafete-codigo b { display: block; font-size: 1.02rem; font-weight: 800; letter-spacing: .04em; color: var(--az-700); font-variant-numeric: tabular-nums; }
.gafete-codigo span { display: block; margin-top: 2px; font-size: .72rem; line-height: 1.4; color: var(--gris-500); }
.gafete.listo { box-shadow: var(--s-3), 0 0 0 2px var(--oro-500), 0 0 60px -6px rgba(232, 201, 106, .55); }
.gafete.listo .gafete-qr { background: var(--blanco); border: 0; animation: sello .7s var(--curva) both; }
.gafete.late { animation: late .5s var(--curva); }

/* ── 7. Formulario ─────────────────────────────────────────────────────── */

/* Avance: tres pasos numerados unidos por una línea. Es una secuencia real. */
.pasos { display: flex; align-items: center; margin-bottom: 36px; counter-reset: paso; }
.paso {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  counter-increment: paso; color: var(--gris-500);
  transition: color var(--m-2);
}
.paso:last-child { flex: 0 0 auto; }
.paso::before {
  content: counter(paso);
  flex: none; width: 30px; height: 30px; border-radius: 50%; margin-right: 10px;
  display: grid; place-items: center;
  border: 1.5px solid var(--gris-300); background: var(--blanco);
  font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background var(--m-2), border-color var(--m-2), color var(--m-2);
}
.paso::after {
  content: ""; flex: 1 1 auto; min-width: 16px; height: 1.5px; margin: 0 14px;
  background: var(--gris-200);
  transition: background var(--m-3) var(--curva);
}
.paso:last-child::after { display: none; }
.paso small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.paso b { font-size: .9rem; font-weight: 600; white-space: nowrap; }
.paso[aria-current="step"] { color: var(--az-700); }
.paso[aria-current="step"] b { font-weight: 800; }
.paso[aria-current="step"]::before { background: var(--az-700); border-color: var(--az-700); color: var(--blanco); }
.paso.hecho { color: var(--ok-700); }
.paso.hecho::before { content: "✓"; background: var(--ok-100); border-color: var(--ok-600); color: var(--ok-700); }
.paso.hecho::after { background: var(--ok-600); }

/* El contenido va sobre el papel, sin caja: la caja solo aparece en celular,
   donde el panel sube sobre la escena. */
.tarjeta { position: relative; background: transparent; }
.tarjeta-cuerpo { padding: 0; }
.pantalla { animation: entra .4s var(--curva) both; }
.pantalla.atras { animation-name: entraAtras; }
.titulo {
  font-size: 1.7rem; font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.12; color: var(--az-700);
}
.titulo:focus { outline: none; }
.bajada { margin-top: 8px; max-width: 56ch; color: var(--gris-600); font-size: .98rem; line-height: 1.55; }
.bloque { margin-top: 28px; }

.leyenda, .etq {
  display: flex; align-items: baseline; justify-content: space-between;
  width: 100%; margin-bottom: 9px;
  font-size: .88rem; font-weight: 700; color: var(--tinta);
}
legend.leyenda { float: left; padding: 0; }
legend.leyenda + * { clear: both; }
.opc { font-weight: 500; color: var(--gris-500); font-size: .82rem; }
.req { color: var(--mal-600); }

.rejilla { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 18px 18px; gap: 18px 18px; }
.campo { min-width: 0; }
.campo.ancho { grid-column: 1 / -1; }
.campo > label { display: block; margin-bottom: 7px; font-size: .88rem; font-weight: 700; color: var(--tinta); }
.control {
  display: block; width: 100%; height: 52px;
  padding: 0 15px; border: 1.5px solid var(--borde); border-radius: 10px;
  background: var(--blanco); font-size: 16px; font-weight: 500;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  transition: border-color var(--m-1), box-shadow var(--m-1);
}
select.control {
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2145' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.control::-webkit-input-placeholder { color: #9aa3b8; }
.control::placeholder { color: #9aa3b8; }
.control:hover { border-color: var(--gris-600); }
.control:focus { outline: none; border-color: var(--az-600); box-shadow: 0 0 0 4px rgba(18, 47, 106, .14); }
.control[aria-invalid="true"] { border-color: var(--mal-600); box-shadow: 0 0 0 4px rgba(179, 38, 47, .1); }
.ayuda { margin-top: 7px; font-size: .84rem; color: var(--gris-500); }
.error-campo { display: flex; align-items: flex-start; margin-top: 7px; font-size: .86rem; font-weight: 700; color: var(--mal-700); }
.error-campo .ico { width: 17px; height: 17px; margin: 2px 6px 0 0; }

/* Documento: selector segmentado + número grande + medidor de dígitos */
.doc {
  display: grid; grid-template-columns: auto 1fr;
  border: 1.5px solid var(--borde); border-radius: 12px; background: var(--blanco); overflow: hidden;
  transition: border-color var(--m-1), box-shadow var(--m-1);
}
.doc.foco { border-color: var(--az-600); box-shadow: 0 0 0 4px rgba(18, 47, 106, .14); }
.doc.invalido { border-color: var(--mal-600); }
.doc-tipos { display: flex; align-items: center; padding: 6px; background: var(--az-50); border-right: 1.5px solid var(--gris-200); }
.doc-tipos label { position: relative; cursor: pointer; }
.doc-tipos label + label { margin-left: 4px; }
.doc-tipos input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.doc-tipos span {
  display: block; padding: 11px 13px; border-radius: 8px;
  font-size: .86rem; font-weight: 700; color: var(--gris-600);
  transition: background var(--m-1), color var(--m-1);
}
.doc-tipos label:hover span { color: var(--az-700); }
.doc-tipos input:checked + span { background: var(--az-700); color: var(--blanco); }
.doc-tipos input:focus-visible + span { box-shadow: var(--anillo); }
.doc-num {
  width: 100%; min-width: 0; height: 60px; padding: 0 18px;
  border: 0; background: transparent; outline: none;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums;
}
.doc-num::placeholder { color: #c3c9d6; }
.medidor { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 4px; gap: 4px; margin-top: 8px; }
.medidor i { height: 3px; border-radius: 3px; background: var(--gris-200); transition: background var(--m-2); }
.medidor i.si { background: var(--oro-500); }
.medidor.lleno i { background: var(--ok-600); }

/* Opciones (radio): filas con ícono, título y bajada */
.opciones { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; gap: 10px; }
.opcion { position: relative; display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcion-c {
  position: relative; height: 100%;
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 20px; grid-column-gap: 12px; column-gap: 12px; align-items: center;
  padding: 13px 14px; border: 1.5px solid var(--gris-300); border-radius: 12px; background: var(--blanco);
  transition: border-color var(--m-1), background var(--m-1), box-shadow var(--m-1);
}
.opcion-c .ico { grid-column: 1; grid-row: 1 / 3; width: 24px; height: 24px; color: var(--gris-500); transition: color var(--m-1); }
.opcion-c b { grid-column: 2; grid-row: 1; font-size: .92rem; font-weight: 700; line-height: 1.25; }
.opcion-c small { grid-column: 2; grid-row: 2; display: block; font-size: .8rem; font-weight: 500; line-height: 1.3; color: var(--gris-500); }
.opcion-c .marca-radio {
  grid-column: 3; grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--borde); display: grid; place-items: center; transition: background var(--m-1), border-color var(--m-1);
}
.opcion:hover .opcion-c { border-color: var(--gris-600); }
.opcion input:checked + .opcion-c { border-color: var(--az-700); background: var(--az-50); box-shadow: inset 0 0 0 1px var(--az-700); }
.opcion input:checked + .opcion-c .ico { color: var(--az-700); }
.opcion input:checked + .opcion-c .marca-radio { background: var(--az-700); border-color: var(--az-700); }
.opcion input:checked + .opcion-c .marca-radio::after {
  content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0;
  -webkit-transform: rotate(-45deg) translate(1px, -1px); transform: rotate(-45deg) translate(1px, -1px);
}
.opcion input:focus-visible + .opcion-c { box-shadow: var(--anillo); }

/* Píldoras (checkbox) */
.pildoras { display: flex; flex-wrap: wrap; margin: -4px; }
.pildora { position: relative; cursor: pointer; margin: 4px; }
.pildora input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pildora span {
  display: inline-flex; align-items: center;
  padding: 9px 15px 9px 12px; border-radius: var(--r-pill);
  border: 1.5px solid var(--gris-300); background: var(--blanco);
  font-size: .88rem; font-weight: 600; color: var(--gris-700);
  transition: background var(--m-1), border-color var(--m-1), color var(--m-1);
}
.pildora .ico { width: 17px; height: 17px; margin-right: 8px; color: var(--gris-500); transition: color var(--m-1); }
.pildora:hover span { border-color: var(--gris-600); }
.pildora input:checked + span { background: var(--az-700); border-color: var(--az-700); color: var(--blanco); }
.pildora input:checked + span .ico { color: var(--oro-400); }
.pildora input:focus-visible + span { box-shadow: var(--anillo); }

/* Días (checkbox): una hoja de calendario por día */
.dias { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 8px; gap: 8px; }
.dia { position: relative; cursor: pointer; }
.dia input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dia span {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 4px; border: 1.5px solid var(--gris-300); border-radius: 12px; background: var(--blanco);
  transition: border-color var(--m-1), background var(--m-1), color var(--m-1);
}
.dia small { font-size: .78rem; font-weight: 600; color: var(--gris-500); transition: color var(--m-1); }
.dia b { font-size: 1.5rem; font-weight: 800; line-height: 1.15; color: var(--az-700); font-variant-numeric: tabular-nums; transition: color var(--m-1); }
.dia em { font-style: normal; font-size: .76rem; font-weight: 500; color: var(--gris-500); transition: color var(--m-1); }
.dia:hover span { border-color: var(--gris-600); }
.dia input:checked + span { border-color: var(--az-700); background: var(--az-700); }
.dia input:checked + span b { color: var(--oro-400); }
.dia input:checked + span small, .dia input:checked + span em { color: #d6e0f3; }
.dia input:focus-visible + span { box-shadow: var(--anillo); }
.btn-enlace {
  padding: 2px 0; border: 0; background: none;
  font-size: .86rem; font-weight: 700; color: var(--az-500);
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-enlace:hover { color: var(--az-700); }

.sugerencia { margin-top: 8px; padding: 9px 12px; border-radius: 10px; background: var(--atn-100); color: var(--atn-700); font-size: .88rem; }
.sugerencia button { border: 0; background: none; padding: 0; font-weight: 800; color: var(--az-700); text-decoration: underline; text-underline-offset: 3px; }

/* Resumen antes de enviar */
.resumen { margin-top: 32px; border-top: 2px solid var(--az-700); }
.resumen h3 { padding: 14px 0 4px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; color: var(--az-700); }
.resumen-fila { display: grid; grid-template-columns: 140px 1fr auto; grid-gap: 12px; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--gris-200); }
.resumen dt { font-size: .86rem; font-weight: 500; color: var(--gris-500); }
.resumen dd { font-size: .94rem; font-weight: 700; word-break: break-word; }

.consent {
  margin-top: 16px; padding: 15px 16px;
  border: 1.5px solid var(--gris-300); border-radius: 12px; background: var(--blanco);
  transition: border-color var(--m-2), background var(--m-2);
}
.resumen + .consent { margin-top: 24px; }
.consent.marcado { border-color: var(--ok-600); background: #f6fbf8; }
.consent.invalido { border-color: var(--mal-600); }
.consent > label { display: flex; align-items: flex-start; cursor: pointer; font-size: .92rem; line-height: 1.55; color: var(--gris-700); }
.consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 2px 12px 0 0; accent-color: var(--az-700); cursor: pointer; }
.consent details { margin: 8px 0 0 32px; }
.consent summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--az-500); }
.consent details p { margin-top: 8px; font-size: .84rem; line-height: 1.65; color: var(--gris-600); }

.trampa { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.captcha { margin-top: 18px; min-height: 78px; }
.captcha-estado { font-size: .86rem; color: var(--gris-500); padding: 10px 0; }

.acciones { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; }
.acciones .btn + .btn { margin-left: 10px; }

/* ── 8. Botones y avisos ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 10px 26px; border: 1.5px solid transparent; border-radius: 10px;
  font-size: .98rem; font-weight: 700; line-height: 1.3;
  text-align: center; text-decoration: none;
  transition: background var(--m-1), color var(--m-1), border-color var(--m-1);
}
.btn .ico { width: 18px; height: 18px; }
.btn .ico:first-child { margin-right: 9px; }
.btn .ico:last-child { margin-left: 9px; }
.btn-primario { margin-left: auto; background: var(--oro-500); color: var(--az-800); }
.btn-primario:hover { background: var(--oro-400); color: var(--az-800); }
.btn-primario[disabled] { opacity: .75; cursor: progress; }
.btn-secundario { background: var(--blanco); color: var(--gris-700); border-color: var(--gris-300); }
.btn-secundario:hover { color: var(--az-700); border-color: var(--gris-600); }
.btn-azul { background: var(--az-700); color: var(--blanco); }
.btn-azul:hover { color: var(--blanco); background: var(--az-600); }
.btn:focus-visible { outline: none; box-shadow: var(--anillo); }
.giro { width: 18px; height: 18px; margin-left: 10px; border-radius: 50%; border: 2.5px solid rgba(10, 26, 56, .25); border-top-color: var(--az-800); animation: gira .8s linear infinite; }

.aviso {
  display: flex; align-items: flex-start;
  padding: 13px 15px; border-radius: 10px; margin-bottom: 18px;
  font-size: .92rem; line-height: 1.5;
}
.aviso .ico { width: 20px; height: 20px; margin: 1px 12px 0 0; }
.aviso b { display: block; }
.aviso-mal  { background: var(--mal-100); color: var(--mal-700); }
.aviso-ok   { background: var(--ok-100);  color: var(--ok-700); }
.aviso-info { background: var(--info-100); color: var(--info-700); }
.aviso-atn  { background: var(--atn-100); color: var(--atn-700); }
.aviso .btn-enlace { margin-top: 6px; color: inherit; }
#extranjero .aviso { margin: 18px 0; }

/* Resumen de errores (patrón GOV.UK): lista de enlaces a cada campo */
.errores {
  margin-bottom: 22px; padding: 16px 18px;
  border: 2px solid var(--mal-600); border-radius: 10px; background: var(--blanco);
}
.errores:focus { outline: none; box-shadow: 0 0 0 4px rgba(179, 38, 47, .15); }
.errores h2 { display: flex; align-items: center; font-size: 1rem; font-weight: 800; color: var(--mal-700); }
.errores h2 .ico { width: 20px; height: 20px; margin-right: 8px; }
.errores ul { margin-top: 8px; padding-left: 28px; list-style: disc; color: var(--mal-700); }
.errores li { margin-top: 4px; font-size: .92rem; }
.errores a { color: var(--mal-700); font-weight: 700; }

/* ── 9. Resultado, confianza, preguntas ───────────────────────────────── */
.resultado { padding: 2px 0 4px; }
.sello-ok { width: 64px; height: 64px; margin: 0 0 18px; }
.sello-ok svg { width: 64px; height: 64px; }
.sello-ok .aro { stroke-dasharray: 252; stroke-dashoffset: 252; animation: traza .9s var(--curva) .1s forwards; }
.sello-ok .vis { stroke-dasharray: 60; stroke-dashoffset: 60; animation: traza .5s var(--curva) .8s forwards; }
.res-credencial {
  margin: 26px 0 0; max-width: 470px; border-radius: 16px; overflow: hidden;
  background: var(--az-700); color: var(--blanco);
  animation: entra .6s var(--curva) .3s both;
}
.res-credencial-in { display: flex; align-items: center; padding: 18px; }
.res-qr { flex: none; margin-right: 20px; padding: 8px; border-radius: 10px; background: var(--blanco); }
.res-qr img { width: 124px; height: 124px; image-rendering: pixelated; }
.res-qr-sin {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 124px; height: 124px; margin: 0; text-align: center; font-size: .8rem; font-weight: 700;
  line-height: 1.3; color: var(--az-700);
}
.res-qr-sin .ico { width: 34px; height: 34px; margin-bottom: 8px; color: var(--az-500); }
.res-credencial small { display: block; font-size: .8rem; font-weight: 600; color: var(--oro-400); }
.res-credencial b { display: block; margin-top: 2px; font-size: 1.4rem; font-weight: 800; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.res-credencial span { display: block; margin-top: 6px; font-size: .88rem; line-height: 1.45; color: rgba(226, 234, 248, .9); }
.res-acciones { display: flex; flex-wrap: wrap; margin: 22px -5px 0; }
.res-acciones .btn { margin: 5px; }
.res-acciones .btn-primario { margin-left: 5px; }
.res-extras { display: flex; flex-wrap: wrap; margin: 10px -12px 0; }
.res-extras .btn-enlace { display: inline-flex; align-items: center; margin: 6px 12px; font-size: .88rem; }
.res-extras .ico { width: 17px; height: 17px; margin-right: 6px; }
.siguientes { max-width: 56ch; margin: 28px 0 0; counter-reset: sig; }
.siguientes li { display: flex; align-items: flex-start; margin-top: 12px; font-size: .92rem; line-height: 1.55; color: var(--gris-600); }
.siguientes i {
  flex: none; width: 26px; height: 26px; margin-right: 12px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--gris-300); color: var(--az-700);
  font-style: normal; font-weight: 700; font-size: .8rem;
}

.confianza {
  display: flex; flex-wrap: wrap; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--gris-200);
  font-size: .84rem; font-weight: 600; color: var(--gris-500);
}
.confianza li { display: inline-flex; align-items: center; margin: 3px 22px 3px 0; }
.confianza .ico { width: 17px; height: 17px; margin-right: 7px; color: var(--ok-600); }

.preguntas { margin-top: 44px; }
.preguntas h2 { font-size: 1.2rem; font-weight: 800; color: var(--az-700); letter-spacing: -.015em; }
.preguntas-lista { margin-top: 12px; border-top: 1px solid var(--gris-200); }
.pregunta { border-bottom: 1px solid var(--gris-200); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px; cursor: pointer; list-style: none;
  font-size: .96rem; font-weight: 600; color: var(--tinta);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary .ico { width: 18px; height: 18px; margin-left: 12px; color: var(--gris-500); transition: transform var(--m-2) var(--curva); }
.pregunta[open] summary .ico { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
.pregunta summary:hover { color: var(--az-600); }
.pregunta p { max-width: 62ch; padding: 0 2px 16px; font-size: .92rem; line-height: 1.65; color: var(--gris-600); }

.pie { width: 100%; max-width: 620px; margin-top: 36px; font-size: .82rem; line-height: 1.7; color: var(--gris-500); }
.pie a { color: var(--gris-600); }
.pie-enlaces { display: flex; flex-wrap: wrap; margin: 0 -10px 8px; }
.pie-enlaces a { margin: 2px 10px; font-weight: 700; }

/* Vista previa del gafete en celulares (debajo del formulario) */
.vitrina-movil { display: none; margin-top: 36px; }
.vitrina-movil > p { font-size: .88rem; font-weight: 700; color: var(--gris-600); margin-bottom: 14px; }
.vitrina-movil .gafete { --rx: 0deg; --ry: 0deg; margin: 0 auto; animation: none; box-shadow: 0 0 0 1px var(--gris-300), 0 18px 40px -22px rgba(13, 33, 69, .45); }
.vitrina-movil .gafete-cuerpo::before, .vitrina-movil .gafete-cuerpo::after { background: var(--blanco); box-shadow: inset 0 0 0 1px var(--gris-300); }
.vitrina-movil .gafete-cinta { display: none; }

/* ── 10. Página de la credencial ──────────────────────────────────────── */
.diseno-pase {
  min-height: 100vh;
  background:
    radial-gradient(90% 60% at 15% -10%, rgba(27, 66, 144, .75) 0%, rgba(27, 66, 144, 0) 60%),
    radial-gradient(70% 50% at 100% 110%, rgba(201, 168, 76, .14) 0%, rgba(201, 168, 76, 0) 60%),
    linear-gradient(170deg, var(--az-700), var(--az-900));
  color: var(--blanco);
}
.pase-hoja { max-width: 460px; margin: 0 auto; padding: 22px 16px 40px; }
.pase-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 64px; }
.pase-hoja .gafete { --rx: 0deg; --ry: 0deg; width: 100%; margin: 0 auto; animation: aparece .9s var(--curva) both; }
.pase-hoja .gafete-cuerpo::before, .pase-hoja .gafete-cuerpo::after { background: var(--az-800); }
.pase-hoja .gafete-cinta { top: -70px; height: 80px; }
.gafete-grande .gafete-nombre { font-size: 1.3rem; min-height: 0; margin-top: 4px; }
.gafete-grande .gafete-qr-grande {
  margin: 18px auto 0; width: 236px; padding: 12px; border-radius: 16px; background: var(--blanco);
  border: 1.5px solid var(--gris-200); position: relative;
}
.gafete-grande .gafete-qr-grande img { width: 210px; height: 210px; image-rendering: pixelated; }
.gafete-grande .gafete-qr-grande .qr-svg { display: block; width: 210px; height: 210px; }
.gafete-grande .gafete-qr-grande::before, .gafete-grande .gafete-qr-grande::after {
  content: ""; position: absolute; width: 26px; height: 26px; border: 3px solid var(--oro-500);
}
.gafete-grande .gafete-qr-grande::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-radius: 16px 0 0 0; }
.gafete-grande .gafete-qr-grande::after  { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-radius: 0 0 16px 0; }
.gafete-grande .gafete-codigo-grande { margin-top: 14px; text-align: center; }
.gafete-grande .gafete-codigo-grande b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: .05em; color: var(--az-700); font-variant-numeric: tabular-nums; }
.gafete-grande .gafete-codigo-grande span { display: block; font-size: .82rem; color: var(--gris-500); letter-spacing: .03em; }
.pase-estado {
  display: flex; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--gris-100); color: var(--gris-600); font-size: .9rem; font-weight: 700;
}
.pase-estado i { width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; background: var(--gris-400); flex: none; }
.pase-estado.dentro { background: var(--ok-100); color: var(--ok-700); }
.pase-estado.dentro i { background: var(--ok-600); animation: pulso 2s infinite; }
.avance { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--gris-200); }
.avance-fila { display: flex; align-items: baseline; justify-content: space-between; font-size: .9rem; color: var(--gris-600); }
.avance-fila b { color: var(--tinta); font-size: .94rem; }
.avance-fila b span { color: var(--gris-500); font-weight: 600; }
.barra { width: 100%; height: 8px; margin: 8px 0 12px; border-radius: 8px; background: var(--gris-100); overflow: hidden; }
.barra rect { fill: var(--oro-500); }
.barra.completa rect { fill: var(--ok-600); }
.pase-acciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; gap: 10px; margin-top: 18px; }
.pase-acciones .btn { width: 100%; padding: 10px 14px; }
.pase-acciones .btn-primario, .pase-acciones #pantalla { grid-column: 1 / -1; margin: 0; }
.btn-claro { background: rgba(255, 255, 255, .08); color: var(--blanco); border: 1px solid rgba(255, 255, 255, .2); }
.btn-claro:hover { background: rgba(255, 255, 255, .14); color: var(--blanco); }
.btn-claro[aria-pressed="true"] { background: var(--oro-a25); border-color: var(--oro-500); }
.pase-ayuda { margin-top: 18px; padding: 16px 18px; border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); }
.pase-ayuda h2 { font-size: .98rem; font-weight: 800; color: var(--oro-400); }
.pase-ayuda li { position: relative; margin-top: 8px; padding-left: 18px; font-size: .9rem; line-height: 1.55; color: rgba(226, 234, 248, .9); }
.pase-ayuda li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--oro-500); }
.pase-pie { margin-top: 22px; text-align: center; font-size: .8rem; line-height: 1.7; color: rgba(214, 225, 244, .76); }
.pase-pie a { color: rgba(225, 233, 247, .85); }
.pase-problema { margin-top: 20px; padding: 34px 26px; border-radius: 20px; background: var(--blanco); color: var(--tinta); text-align: center; box-shadow: var(--s-3); }
.pase-problema .ico { width: 44px; height: 44px; margin: 0 auto 12px; color: var(--oro-700); }
.pase-problema h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -.015em; color: var(--az-700); }
.pase-problema p { margin-top: 8px; color: var(--gris-600); font-size: .9rem; }
.pase-problema .res-acciones { margin-top: 18px; justify-content: center; }

/* ── 11. Constancia y recuperar ───────────────────────────────────────── */
.medidores { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; margin-top: 18px; }
.anillo { display: flex; flex-direction: column; align-items: center; padding: 16px 10px; border: 1.5px solid var(--gris-300); border-radius: 12px; }
.anillo svg { width: 110px; height: 110px; }
.anillo .pista { stroke: var(--gris-100); }
.anillo .valor { stroke: var(--oro-500); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--curva); }
.anillo.completo .valor { stroke: var(--ok-600); }
.anillo text { font-family: var(--fuente); font-weight: 800; font-size: 22px; fill: var(--az-700); }
.anillo p { margin-top: 8px; font-size: .88rem; font-weight: 600; color: var(--gris-600); text-align: center; }
.ficha-res { margin-top: 22px; padding: 18px; border-radius: 12px; border: 1.5px solid var(--gris-300); }
.ficha-res h3 { display: flex; align-items: center; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--az-700); }
.ficha-res h3 .ico { width: 24px; height: 24px; margin-right: 10px; }
.ficha-res.apto { border-color: var(--ok-600); background: #f6fbf8; }
.ficha-res.apto h3 { color: var(--ok-700); }
.ficha-res.aun h3 { color: var(--atn-700); }
.ficha-res > p { margin-top: 6px; font-size: .92rem; color: var(--gris-600); }
.identidad { margin-top: 14px; font-size: .88rem; color: var(--gris-500); }
.identidad b { color: var(--tinta); }
.nota { margin-top: 28px; padding-top: 16px; max-width: 62ch; border-top: 1px solid var(--gris-200); font-size: .86rem; line-height: 1.65; color: var(--gris-500); }

/* ── 12. Utilidades ───────────────────────────────────────────────────── */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.chispa { position: fixed; top: 0; left: 0; z-index: 60; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; animation: chispa 1.3s ease-out forwards; }

/* ── 13. Movimiento ───────────────────────────────────────────────────── */
@keyframes holograma { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
@keyframes aparece   { from { opacity: 0; -webkit-transform: translateY(30px) rotateX(18deg) rotateY(-20deg); transform: translateY(30px) rotateX(18deg) rotateY(-20deg); } }
/* El paso entra en vertical: un desplazamiento lateral, sin caja que lo recorte, asomaría fuera de la pantalla del celular. */
@keyframes entra     { from { opacity: 0; -webkit-transform: translateY(10px); transform: translateY(10px); } }
@keyframes entraAtras{ from { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } }
@keyframes sello     { 0% { -webkit-transform: scale(.4) rotate(-12deg); transform: scale(.4) rotate(-12deg); opacity: 0; } 70% { -webkit-transform: scale(1.08); transform: scale(1.08); } 100% { -webkit-transform: none; transform: none; opacity: 1; } }
@keyframes late      { 50% { -webkit-transform: scale(calc(var(--s) * 1.025)) rotateX(var(--rx)) rotateY(var(--ry)); transform: scale(calc(var(--s) * 1.025)) rotateX(var(--rx)) rotateY(var(--ry)); } }
@keyframes traza     { to { stroke-dashoffset: 0; } }
@keyframes gira      { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes titila    { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@keyframes reflejo   { to { -webkit-transform: translateX(-60px); transform: translateX(-60px); } }
@keyframes meceo     { 0%, 100% { -webkit-transform: translateY(0) rotate(0); transform: translateY(0) rotate(0); } 50% { -webkit-transform: translateY(-2px) rotate(-1.2deg); transform: translateY(-2px) rotate(-1.2deg); } }
@keyframes pulso     { 0% { box-shadow: 0 0 0 0 rgba(27, 138, 85, .5); } 70% { box-shadow: 0 0 0 9px rgba(27, 138, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(27, 138, 85, 0); } }
@keyframes chispa    { 0% { opacity: 1; -webkit-transform: translate(var(--x0), var(--y0)) rotate(0); transform: translate(var(--x0), var(--y0)) rotate(0); } 100% { opacity: 0; -webkit-transform: translate(var(--x1), var(--y1)) rotate(540deg); transform: translate(var(--x1), var(--y1)) rotate(540deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .gafete { --rx: 0deg; --ry: 0deg; }
}

/* ── 14. Adaptación ───────────────────────────────────────────────────── */

/* Pantallas de escritorio bajas: se prioriza la credencial */
@media (max-height: 820px) and (min-width: 901px) {
  .escena-intro { margin-top: 18px; }
  .escena-lead { display: none; }
  .escena-pie { display: none; }
}
@media (max-width: 1100px) {
  .lienzo { grid-template-columns: minmax(390px, 42%) 1fr; }
  .volver { padding: 9px 12px; }
  .volver span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .volver .ico { margin-right: 0; }
  .paso::after { margin: 0 10px; }
}
/* Tabletas y celulares: la escena pasa a ser una cabecera y el contenido sube
   sobre ella como una hoja */
@media (max-width: 900px) {
  .lienzo { display: block; }
  .escena { position: relative; height: auto; padding: 18px 20px 54px; }
  .escena-intro { margin-top: 24px; }
  .escena h1 { font-size: 2.1rem; font-size: clamp(1.8rem, 7.6vw, 2.4rem); }
  .escena-lead { font-size: .92rem; }
  .escena-vitrina, .escena-pie { display: none; }
  .panel {
    position: relative; z-index: 2; margin-top: -26px; padding: 26px 20px 30px;
    border-radius: 22px 22px 0 0; box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, .5);
  }
  .panel-in, .pie { max-width: 620px; margin-left: auto; margin-right: auto; }
  .pasos { margin-bottom: 28px; }
  .vitrina-movil { display: block; }
}
@media (max-width: 560px) {
  body { font-size: 15px; }
  .rejilla { grid-template-columns: 1fr; }
  .opciones { grid-gap: 8px; gap: 8px; }
  .opcion-c { padding: 12px; grid-column-gap: 10px; column-gap: 10px; }
  .dias { grid-gap: 6px; gap: 6px; }
  .dia b { font-size: 1.3rem; }
  .dia em { display: none; }
  /* Solo se nombra el paso actual: los otros dos quedan como número */
  .paso b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .paso[aria-current="step"] b { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .paso::before { margin-right: 0; }
  .paso[aria-current="step"]::before { margin-right: 10px; }
  .paso::after { margin: 0 10px; }
  .acciones { flex-direction: column-reverse; align-items: stretch; }
  .acciones .btn { width: 100%; }
  .acciones .btn + .btn { margin-left: 0; margin-bottom: 10px; }
  .btn-primario { margin-left: 0; }
  .doc { grid-template-columns: 1fr; }
  .doc-tipos { border-right: 0; border-bottom: 1.5px solid var(--gris-200); }
  .doc-tipos label { flex: 1; }
  .doc-tipos span { text-align: center; }
  .res-credencial-in { flex-direction: column; text-align: center; }
  .res-qr { margin: 0 0 14px; }
  .res-acciones .btn { flex: 1 1 100%; }
  .resumen-fila { grid-template-columns: 1fr auto; }
  .resumen dt { grid-column: 1 / -1; margin-bottom: -8px; }
  .medidores { grid-template-columns: 1fr 1fr; }
  .anillo svg { width: 92px; height: 92px; }
  .pase-cab { margin-bottom: 56px; }
}
@media (max-width: 420px) {
  .opciones { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .dias { grid-template-columns: repeat(3, 1fr); }
  .panel { padding-left: 16px; padding-right: 16px; }
}

/* Modo de alto contraste de Windows: los colores los pone el sistema */
@media (forced-colors: active) {
  .escena, .diseno-pase { background: Canvas; color: CanvasText; }
  .gafete, .opcion-c, .dia span, .pildora span, .doc, .control, .consent, .paso::before { border: 1px solid CanvasText; }
  .opcion input:checked + .opcion-c, .dia input:checked + span, .pildora input:checked + span, .doc-tipos input:checked + span {
    outline: 3px solid Highlight; outline-offset: 1px;
  }
  .gafete-brillo, .escena-arte, .escena-topo { display: none; }
  .btn { border: 1px solid ButtonText; }
  /* El QR conserva oscuro sobre blanco: los lectores de la puerta lo necesitan. */
  .qr-svg, .gafete-qr-grande { forced-color-adjust: none; }
}

/* Impresión (sobre todo de la credencial) */
@media print {
  @page { margin: 12mm; }
  body, .diseno-pase { background: #fff !important; color: #000; }
  .escena, .saltar, .pasos, .acciones, .pie, .preguntas, .confianza, .pase-acciones, .pase-ayuda, .pase-cab .volver, .vitrina-movil { display: none !important; }
  .gafete { box-shadow: none !important; border: 1px solid #999; -webkit-transform: none !important; transform: none !important; animation: none !important; }
  .gafete-brillo, .gafete-cinta { display: none; }
  .pase-hoja { padding: 0; }
  .pase-cab { margin-bottom: 12px; }
}