/* Estilos de la pantalla de bienvenida (inicio.html) */

/* Colores (iguales a la ficha de la estación) */
:root{--bg:#0f1b2d;--card:#14243b;--line:#2a4166;--fg:#eef2f8;--muted:#a9b8cc;--amber:#e8a33d;--ink:#0f1b2d;--ok:#2ed38b}
/* Ancho y alto incluyen el borde */
*{box-sizing:border-box}

/* Letra base de 19 px: más grande, como pidieron en la retroalimentación */
body{margin:0;background:var(--bg);color:var(--fg);font:19px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Columna central de máximo 460 px */
main{max-width:460px;margin:0 auto;padding:22px 18px 32px;display:flex;flex-direction:column;gap:16px}
/* Título grande */
h1{margin:0;font-size:30px;line-height:1.15}
/* Párrafos sin margen extra */
p{margin:0}
/* Texto secundario en gris (17 px mínimo) */
.muted{color:var(--muted);font-size:17px}

/* Tarjetas (cajas con borde) */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px}
/* Etiquetas de las preguntas en negrita */
label{font-weight:700}
/* Selector grande, fácil de tocar */
select{width:100%;min-height:52px;font-size:19px;border-radius:12px;border:1.5px solid var(--line);background:#0b1524;color:var(--fg);padding:0 12px}

/* Botones de edad y sexo en cuadrícula de 2 x 2 */
.edades{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Esconde el círculo de la opción (se usa el recuadro) */
.edades input{position:absolute;opacity:0}
/* Recuadro de cada opción */
.edades span{display:block;text-align:center;padding:14px 8px;border:1.5px solid var(--line);border-radius:12px;font-size:18px}
/* Opción elegida: fondo ámbar */
.edades input:checked+span{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:800}
/* Borde blanco al navegar con teclado */
.edades input:focus-visible+span{outline:3px solid #fff}
/* Opción que ocupa las dos columnas ("Prefiero no decir" de la edad) */
.edades .ancho{grid-column:1 / -1}

/* Aviso cuando falta responder algo */
.aviso{margin:0;min-height:1.3em;color:#ffb44d;font-weight:700}

/* Botón principal */
button{min-height:58px;border:0;border-radius:16px;background:var(--amber);color:var(--ink);font:900 20px system-ui,sans-serif;cursor:pointer;width:100%}

/* Barra de progreso de la descarga */
.barra{height:18px;background:#0b1524;border-radius:99px;overflow:hidden;border:1.5px solid var(--line)}
/* Relleno verde que avanza */
.barra div{height:100%;width:0;background:var(--ok);transition:width .2s}

/* Se muestra una sección a la vez: preguntas → descarga → listo */
.oculto{display:none!important}
/* Pantalla final en columna */
#listo{display:grid;gap:12px}
/* Estación sellada: enlace con forma de tarjeta */
a.est{display:block;padding:14px 16px;border-radius:14px;background:var(--card);border:1.5px solid var(--line);color:var(--fg);text-decoration:none;font-weight:700}
/* Estación sin sellar en el pasaporte: borde punteado y más tenue */
.est.bloqueada{display:block;padding:14px 16px;border-radius:14px;border:1.5px dashed var(--line);color:var(--fg);opacity:.6;font-weight:700}