[hidden] { display: none !important; }
@font-face { font-family: 'Atkinson'; src: url(fuentes/atkinson-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Atkinson'; src: url(fuentes/atkinson-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --fondo: #eef6ff; --tinta: #10213f; --suave: #4a5a78; --tarjeta: #fff; --borde: #c9d6ea;
  --azul: #0b3d91; --bien: #0a7a3c; --bien-fondo: #d9f7e5; --mal: #b3261e; --mal-fondo: #fde2e0;
  --ojo: #ffd400; --mar: #a9d6ff; --tierra: #fbf3e0; --otros: #dfe3ea; --rio: #2f6fd6;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Atkinson', Verdana, sans-serif; background: var(--fondo); color: var(--tinta); font-size: 20px; line-height: 1.4; letter-spacing: .02em; overflow: hidden; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
#app { display: flex; flex-direction: column; height: 100%; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

header { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--azul); color: #fff; flex: none; }
header h1 { min-width: 0; font-size: 22px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.boton-cab { text-decoration: none; display: inline-flex; align-items: center; }
.boton-cab { background: rgba(255,255,255,.16); color: #fff; border-radius: 12px; padding: 6px 12px; font-weight: 700; font-size: 18px; min-height: 44px; }
#estrellas { font-weight: 700; font-size: 20px; white-space: nowrap; }

main { flex: 1; min-height: 0; display: flex; }
.pantalla { flex: 1; min-height: 0; min-width: 0; display: none; }
.pantalla.activa { display: flex; }

/* Inicio */
#inicio, #camino { flex-direction: column; align-items: center; overflow-y: auto; padding: 18px 16px 30px; }
.hola { font-size: 30px; font-weight: 700; margin: 6px 0 2px; text-align: center; }
.sub { color: var(--suave); margin: 0 0 16px; text-align: center; }
.ancho { width: 100%; max-width: 860px; }
.gran-boton { width: 100%; background: var(--azul); color: #fff; border-radius: 24px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; text-align: left; box-shadow: 0 4px 0 #06265c; margin-bottom: 14px; }
.gran-boton .ico { font-size: 52px; line-height: 1; }
.gran-boton b { display: block; font-size: 28px; }
.gran-boton small { font-size: 18px; opacity: .92; }
.gran-boton:active { transform: translateY(3px); box-shadow: none; }
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.menu button { background: var(--tarjeta); border: 3px solid var(--borde); border-radius: 22px; padding: 14px 16px; text-align: left; display: flex; gap: 14px; align-items: center; min-height: 92px; box-shadow: 0 3px 0 var(--borde); }
.menu button:active { transform: translateY(2px); box-shadow: none; }
.menu .ico { font-size: 40px; line-height: 1; }
.menu b { display: block; font-size: 22px; }
.menu small { color: var(--suave); font-size: 16px; }
.menu .destacado { border-color: #c2185b; background: #fde0ec; box-shadow: 0 3px 0 #c2185b; }
.barra-progreso { margin-top: 14px; background: var(--tarjeta); border: 3px solid var(--borde); border-radius: 18px; padding: 12px 16px; }
.barra { height: 18px; border-radius: 9px; background: #e3e9f3; overflow: hidden; margin-top: 6px; display: flex; }
.barra i { display: block; height: 100%; }

/* Camino */
.paso-camino { display: flex; gap: 14px; align-items: center; width: 100%; background: var(--tarjeta); border: 3px solid var(--borde); border-radius: 20px; padding: 12px 16px; margin: 0 0 10px; text-align: left; min-height: 84px; }
.paso-camino .medalla { font-size: 38px; width: 52px; text-align: center; flex: none; }
.paso-camino b { display: block; font-size: 21px; }
.paso-camino small { color: var(--suave); font-size: 17px; }
.paso-camino.hecho { border-color: var(--bien); background: #effcf4; }
.paso-camino.siguiente { border-color: var(--azul); background: #e3ecff; box-shadow: 0 3px 0 var(--azul); }
.paso-camino.cerrado { opacity: .55; }
.nivel-titulo { width: 100%; font-size: 17px; font-weight: 700; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; margin: 14px 0 8px; }

/* Pantalla con mapa */
#zona { flex-direction: row; }
#mapa { flex: 1; min-width: 0; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; background: var(--mar); }
#mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#lado { width: 390px; flex: none; overflow-y: auto; background: var(--tarjeta); border-left: 3px solid var(--borde); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
@media (orientation: portrait), (max-width: 760px) {
  #zona { flex-direction: column; }
  #mapa { flex: none; height: 50%; width: 100%; }
  #lado { width: 100%; min-width: 0; min-height: 0; border-left: 0; border-top: 3px solid var(--borde); flex: 1; padding: 12px; }
  .pregunta { font-size: 23px; }
}

svg .pais { stroke: #9aa6b8; stroke-width: 1; vector-effect: non-scaling-stroke; }
svg .rio { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
svg .toque { fill: none; stroke: transparent; stroke-width: 26px; vector-effect: non-scaling-stroke; stroke-linecap: round; cursor: pointer; }
svg .resalte { fill: none; stroke: var(--ojo); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-width: 14px; opacity: .95; pointer-events: none; }
svg .parpadea { animation: parpadeo 0.9s ease-in-out infinite; }
@keyframes parpadeo { 50% { opacity: .25; } }
svg .etq { font-family: 'Atkinson', Verdana, sans-serif; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
svg .mar { font-family: 'Atkinson', Verdana, sans-serif; font-weight: 700; fill: #2a5d9c; letter-spacing: .12em; pointer-events: none; }
svg .num { cursor: pointer; }
svg .num text { font-family: 'Atkinson', Verdana, sans-serif; font-weight: 700; pointer-events: none; }
svg .num.elegido circle { animation: parpadeo 0.9s ease-in-out infinite; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 17px; }
.titulo-rio { font-size: 34px; font-weight: 700; margin: 0; line-height: 1.1; }
.fila { display: flex; gap: 10px; align-items: flex-start; font-size: 19px; }
.fila .e { font-size: 26px; line-height: 1; width: 32px; text-align: center; flex: none; }
.fila b { display: block; font-size: 15px; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chips button { background: #e9f0fb; border: 2px solid var(--borde); border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: 18px; min-height: 40px; }
.dato { background: #fff8d6; border: 2px solid #f1d46b; border-radius: 14px; padding: 10px 12px; font-size: 19px; }
.donde { background: #e3ecff; border: 2px solid #9db6ea; border-radius: 14px; padding: 10px 12px; font-size: 20px; }
.altavoz { background: var(--azul); color: #fff; border-radius: 14px; padding: 8px 14px; font-weight: 700; font-size: 18px; min-height: 48px; flex: none; }
.pista { color: var(--suave); font-size: 18px; margin: 0; }
.leyenda { display: flex; flex-wrap: wrap; gap: 8px; }
.interruptor { background: #e9f0fb; border: 2px solid var(--borde); border-radius: 14px; padding: 8px 14px; font-weight: 700; font-size: 18px; min-height: 48px; }
.interruptor.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.etapas { display: flex; gap: 6px; font-size: 15px; font-weight: 700; color: var(--suave); }
.etapas span { flex: 1; text-align: center; padding: 4px 2px; border-radius: 10px; background: #e9f0fb; }
.etapas span.ya { background: var(--bien-fondo); color: var(--bien); }
.etapas span.ahora { background: var(--azul); color: #fff; }

/* Preguntas */
.pregunta { font-size: 27px; font-weight: 700; line-height: 1.25; margin: 0; }
.pregunta .nombre { color: var(--azul); }
.cuenta { display: flex; gap: 6px; }
.cuenta i { flex: 1; height: 10px; border-radius: 5px; background: #e3e9f3; }
.cuenta i.hecha { background: var(--bien); }
.cuenta i.ahora { background: var(--azul); }
.opciones { display: grid; gap: 10px; }
.opciones button { background: #fff; border: 3px solid var(--borde); border-radius: 18px; padding: 12px 16px; font-size: 23px; font-weight: 700; text-align: left; min-height: 62px; box-shadow: 0 3px 0 var(--borde); display: flex; align-items: center; gap: 10px; }
.opciones button.texto { font-size: 19px; font-weight: 400; }
.opciones button:active { transform: translateY(2px); box-shadow: none; }
.opciones button.bien { background: var(--bien-fondo); border-color: var(--bien); box-shadow: 0 3px 0 var(--bien); }
.opciones button.era { background: var(--bien-fondo); border-color: var(--bien); border-style: dashed; }
.opciones button.no { opacity: .45; }
.opciones .punto { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid rgba(0,0,0,.25); }
.respuesta { border-radius: 16px; padding: 12px 14px; font-size: 21px; font-weight: 700; display: none; }
.respuesta.bien { display: block; background: var(--bien-fondo); color: #064d26; border: 3px solid var(--bien); }
.respuesta.mira { display: block; background: #fff4c2; color: #4d3a00; border: 3px solid #e0b400; }
.respuesta small { display: block; font-weight: 400; font-size: 18px; margin-top: 4px; }
.seguir { background: var(--azul); color: #fff; border-radius: 18px; padding: 14px; font-size: 23px; font-weight: 700; min-height: 62px; box-shadow: 0 3px 0 #06265c; width: 100%; }
.seguir:disabled { opacity: .45; }
.secundario { background: #e9f0fb; color: var(--tinta); box-shadow: 0 3px 0 var(--borde); }

/* Mapa mudo */
.banco { display: flex; flex-wrap: wrap; gap: 10px; }
.banco button { background: #fff; border: 3px solid var(--azul); border-radius: 14px; padding: 8px 16px; font-weight: 700; font-size: 21px; min-height: 52px; box-shadow: 0 3px 0 var(--azul); }
.banco button.elegida { background: var(--ojo); border-color: #8a6d00; box-shadow: 0 3px 0 #8a6d00; transform: scale(1.06); }
.banco button.sacude { animation: sacude .4s; }
@keyframes sacude { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.escribir { display: flex; gap: 8px; }
.escribir input { flex: 1; min-width: 0; font-size: 26px; font-weight: 700; padding: 10px 14px; border: 3px solid var(--azul); border-radius: 14px; letter-spacing: .06em; }
.huecos { font-size: 28px; font-weight: 700; letter-spacing: .25em; color: var(--azul); font-family: 'Atkinson', monospace; }
.nota { font-size: 54px; font-weight: 700; line-height: 1; }
.tabla-correccion { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 19px; text-align: left; }
.tabla-correccion .n { font-weight: 700; }

/* Capa */
.capa { position: fixed; inset: 0; background: rgba(8,24,56,.55); display: none; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.capa.ver { display: flex; }
.cuadro { background: #fff; border-radius: 26px; padding: 22px; max-width: 540px; width: 100%; text-align: center; max-height: 92%; overflow-y: auto; }
.cuadro h2 { font-size: 30px; margin: 4px 0 8px; }
.cuadro .grande { font-size: 64px; line-height: 1.1; }
.cuadro p { font-size: 20px; }
.cuadro .botones { display: grid; gap: 10px; margin-top: 14px; }
.cuadro label { display: flex; gap: 10px; align-items: center; text-align: left; font-size: 19px; padding: 10px; border: 2px solid var(--borde); border-radius: 14px; margin: 6px 0; cursor: pointer; }
.cuadro label input { width: 24px; height: 24px; flex: none; }
.cuadro fieldset { border: 0; padding: 0; margin: 0 0 8px; text-align: left; }
.cuadro legend { font-weight: 700; font-size: 19px; margin-bottom: 2px; }
.confeti { position: fixed; top: -40px; font-size: 32px; pointer-events: none; z-index: 11; animation: cae 2.4s linear forwards; }
@keyframes cae { to { transform: translateY(110vh) rotate(540deg); } }

/* Vertientes */
.tarjeta-v { border-radius: 18px; padding: 14px; border: 3px solid; }
.tarjeta-v h3 { margin: 0 0 6px; font-size: 26px; display: flex; align-items: center; gap: 8px; }
.tarjeta-v ul { margin: 6px 0 8px; padding-left: 22px; }
.tarjeta-v li { margin: 4px 0; font-size: 19px; }
.pestanas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pestanas button { border-radius: 14px; padding: 8px 4px; font-weight: 700; font-size: 17px; min-height: 52px; border: 3px solid transparent; }
.truco { background: #f3e8ff; border: 3px solid #8e44c9; border-radius: 16px; padding: 12px 14px; font-size: 21px; }
.truco b { color: #6a1fb0; }

/* Impresión del mapa mudo */
#imprimir { display: none; }
@media print {
  @page { size: A4 portrait; margin: 12mm; }
  body { overflow: visible; background: #fff; font-size: 14pt; }
  #app, .capa { display: none !important; }
  #imprimir { display: block; }
  .hoja { page-break-after: always; }
  .hoja:last-child { page-break-after: auto; }
  .hoja h2 { margin: 0 0 4mm; font-size: 18pt; }
  .hoja svg { width: 100%; height: auto; border: 1px solid #999; }
  .hoja ol { columns: 2; font-size: 14pt; margin: 4mm 0 0; line-height: 2; }
}