/* ============================================================
   GEO CHALLENGE — INTERFAZ
   Colección EL TÍO IA · eltioia.cl
   ------------------------------------------------------------
   La idea visual: un atlas de expedición. Papel envejecido,
   tinta sepia, latón de brújula y el azul del mar. Nada de
   aplicación de mapas profesional: esto es un cuaderno de viaje.
   ============================================================ */

:root{
  --papel:#f3e7cf;
  --papel-2:#e9d9ba;
  --papel-3:#dcc79f;
  --tinta:#3a2f21;
  --tinta-suave:#6b5b45;
  --mar:#8fb9cc;
  --mar-hondo:#5f93ab;
  --tierra:#d8c69c;
  --tierra-borde:#8a7550;
  --laton:#b5842a;
  --laton-claro:#d8a94a;
  --rojo:#b03a2e;
  --verde:#3f7d4e;
  --ambar:#c98a1e;
  --linea:rgba(58,47,33,.22);
  --sombra:0 14px 34px rgba(58,47,33,.22);
  --radio:14px;
  --fuente:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --fuente-ui:"Trebuchet MS","Segoe UI",system-ui,-apple-system,sans-serif;
}

/* El atributo hidden debe ganar siempre.
   Sin esto, cualquier regla con `display` lo anula en silencio. */
[hidden]{ display:none !important; }

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--fuente-ui);
  color:var(--tinta);
  background:var(--papel);
  /* Textura de papel: dos degradados suaves, sin ninguna imagen */
  background-image:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(180,150,100,.28), transparent 48%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.55;
}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  padding:12px clamp(12px,3vw,28px);
  background:linear-gradient(180deg, rgba(216,196,158,.96), rgba(203,180,140,.94));
  border-bottom:2px solid var(--tierra-borde);
  position:sticky; top:0; z-index:30;
}
.marca{ font-family:var(--fuente); font-weight:700; font-size:clamp(17px,3.4vw,22px); letter-spacing:.3px; }
.marca-icon{ margin-right:4px; }
.topbar-acciones{ display:flex; gap:8px; flex-wrap:wrap; }

.btn-chico{
  font-family:var(--fuente-ui); font-size:13px; font-weight:700;
  color:var(--tinta); text-decoration:none;
  background:rgba(255,255,255,.5); border:1.5px solid var(--tierra-borde);
  border-radius:99px; padding:7px 13px; cursor:pointer;
  transition:background .2s, transform .12s;
}
.btn-chico:hover{ background:rgba(255,255,255,.85); transform:translateY(-1px); }
.btn-chico.activo{ background:var(--laton); border-color:#8d6620; color:#fff; }

/* ---------- Pantallas ---------- */
#app{ padding:clamp(16px,3.5vw,34px) clamp(12px,3vw,28px) 60px; }
.screen{ display:none; max-width:1120px; margin:0 auto; }
.screen.is-active{ display:block; animation:entra .34s ease both; }
@keyframes entra{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.titulo-pantalla{
  font-family:var(--fuente); font-size:clamp(22px,4.6vw,32px);
  text-align:center; margin:6px 0 22px;
}

.panel{
  background:linear-gradient(180deg, rgba(255,250,240,.9), rgba(243,231,207,.92));
  border:2px solid var(--tierra-borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:clamp(16px,3.2vw,28px);
}

/* ---------- Inicio ---------- */
.intro{ max-width:680px; margin:clamp(10px,4vw,50px) auto; text-align:center; }
.intro h1{
  font-family:var(--fuente); font-size:clamp(34px,8vw,58px);
  margin:14px 0 4px; letter-spacing:.5px;
}
.lema{ font-family:var(--fuente); font-style:italic; font-size:clamp(16px,3.4vw,21px); color:var(--tinta-suave); margin:0 0 20px; }
.intro-txt{ font-size:clamp(14px,3vw,16.5px); max-width:56ch; margin:0 auto 26px; }
.pie-nota{
  font-size:12.5px; color:var(--tinta-suave); max-width:56ch; margin:26px auto 0;
  line-height:1.6; font-style:italic;
}

.brujula{ width:clamp(110px,26vw,150px); margin:0 auto; animation:girito 9s ease-in-out infinite; }
@keyframes girito{ 0%,100%{ transform:rotate(-5deg); } 50%{ transform:rotate(5deg); } }
.br-borde{ fill:var(--laton); }
.br-fondo{ fill:var(--papel); stroke:#8d6620; stroke-width:1.5; }
.br-aguja-n{ fill:var(--rojo); }
.br-aguja-e{ fill:#5d5346; opacity:.55; }
.br-centro{ fill:var(--laton-claro); stroke:#8d6620; }
.br-letra{ font-family:var(--fuente); font-size:12px; fill:var(--tinta); text-anchor:middle; }

.btn-grande{
  font-family:var(--fuente-ui); font-weight:800; font-size:clamp(15px,3.2vw,18px);
  color:#fff8ea; background:linear-gradient(180deg,var(--laton-claro),var(--laton));
  border:2px solid #8d6620; border-radius:99px;
  padding:13px 30px; cursor:pointer; box-shadow:0 6px 0 #8d6620, var(--sombra);
  transition:transform .12s, box-shadow .12s;
}
.btn-grande:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #8d6620, var(--sombra); }
.btn-grande:active{ transform:translateY(3px); box-shadow:0 3px 0 #8d6620; }

.btn-secundario{
  font-family:var(--fuente-ui); font-weight:700; font-size:14.5px;
  color:var(--tinta); text-decoration:none;
  background:rgba(255,255,255,.55); border:2px solid var(--tierra-borde);
  border-radius:99px; padding:11px 22px; cursor:pointer;
  display:inline-block; transition:background .2s;
}
.btn-secundario:hover{ background:rgba(255,255,255,.9); }

/* ---------- Modo profesor ---------- */
.panel-profesor{
  background:rgba(181,132,42,.12); border:2px dashed var(--laton);
  border-radius:var(--radio); padding:14px 16px; margin-bottom:22px;
}
.pp-titulo{ font-weight:800; margin:0 0 2px; }
.pp-txt{ margin:0 0 10px; font-size:13.5px; color:var(--tinta-suave); }
.colecciones{ display:flex; flex-wrap:wrap; gap:8px; }
.col-chip{
  font-family:var(--fuente-ui); font-size:13px; font-weight:700; color:var(--tinta);
  background:rgba(255,255,255,.6); border:1.5px solid var(--tierra-borde);
  border-radius:99px; padding:6px 14px; cursor:pointer;
}
.col-chip.activa{ background:var(--laton); border-color:#8d6620; color:#fff8ea; }

/* ---------- Tarjetas de modo ---------- */
.modes{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:620px){ .modes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:940px){ .modes{ grid-template-columns:repeat(4,1fr); } }

.mode-card{
  display:flex; flex-direction:column; gap:5px; text-align:left;
  font-family:var(--fuente-ui); color:var(--tinta);
  background:linear-gradient(180deg, rgba(255,250,240,.94), rgba(240,227,201,.94));
  border:2px solid var(--tierra-borde); border-radius:var(--radio);
  padding:16px 15px; cursor:pointer; box-shadow:var(--sombra);
  transition:transform .14s, border-color .2s;
}
.mode-card:hover{ transform:translateY(-3px); border-color:var(--laton); }
.mode-card.apagada{ opacity:.45; }
.mode-icon{ font-size:30px; line-height:1; }
.mode-name{ font-family:var(--fuente); font-weight:700; font-size:18px; }
.mode-desc{ font-size:13px; color:var(--tinta-suave); }
.mode-count{ font-size:11.5px; color:var(--laton); font-weight:700; margin-top:2px; }

/* ---------- HUD ---------- */
.hud{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(216,196,158,.7); border:2px solid var(--tierra-borde);
  border-radius:99px; padding:8px 14px; margin-bottom:8px;
}
.btn-salir{
  font-family:var(--fuente-ui); font-size:13px; font-weight:700; color:var(--tinta);
  background:rgba(255,255,255,.55); border:1.5px solid var(--tierra-borde);
  border-radius:99px; padding:5px 12px; cursor:pointer;
}
.hud-modo{ font-family:var(--fuente); font-weight:700; font-size:15px; }
.hud-datos{ display:flex; gap:16px; margin-left:auto; }
.hud-datos span{ display:flex; flex-direction:column; align-items:center; line-height:1.15; }
.hud-datos b{ font-family:var(--fuente); font-size:18px; }
.hud-datos small{ font-size:9.5px; letter-spacing:.4px; color:var(--tinta-suave); text-transform:uppercase; }

.barra-fondo{ height:7px; background:rgba(138,117,80,.25); border-radius:99px; overflow:hidden; margin-bottom:16px; }
.barra{ height:100%; width:0; background:linear-gradient(90deg,var(--laton-claro),var(--rojo)); transition:width .35s ease; }

.aviso{
  background:rgba(201,138,30,.16); border:1.5px solid var(--ambar);
  border-radius:10px; padding:9px 13px; font-size:13px; margin:0 0 14px;
}

/* ---------- El mapa ---------- */
.q-cab{ display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.q-nivel{ font-size:12.5px; color:var(--tinta-suave); }
.vista-nombre{
  font-size:12.5px; font-weight:700; color:var(--tinta);
  background:rgba(181,132,42,.16); border:1px solid rgba(181,132,42,.4);
  border-radius:99px; padding:3px 11px;
}

.zona-mapa{
  margin:0 auto;
  border:3px solid var(--tierra-borde); border-radius:8px; overflow:hidden;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35), 0 10px 24px rgba(58,47,33,.2);
  background:var(--mar);
}
.mapa-svg{
  display:block; width:100%; height:auto; touch-action:manipulation;
  /* Tope de altura: la vista de Chile es alta y angosta, y sin esto
     ocupa varias pantallas. Al limitarla, el SVG encoge para caber y
     queda centrado, con el mar del contenedor a los lados.
     El clic lo resuelve la matriz del SVG, así que el centrado no lo
     descuadra (ver `onPick` en js/map.js). */
  max-height:min(66vh, 620px);
}
.mapa-svg.bloqueado{ cursor:default; }

.grid-label{
  font-family:var(--fuente-ui); fill:var(--tinta-suave); opacity:.75;
  paint-order:stroke; stroke:rgba(255,250,240,.7); stroke-width:3px; stroke-linejoin:round;
}
.sierras path{ fill:none; stroke:#8a6a3c; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.sierra-label{
  font-family:var(--fuente); font-style:italic; fill:#7a5c33;
  paint-order:stroke; stroke:rgba(255,250,240,.85); stroke-width:4px; stroke-linejoin:round;
}

.mar{ fill:var(--mar); }
.grid line{ stroke:rgba(255,255,255,.35); stroke-width:1; }
.tierra polygon{ fill:var(--tierra); stroke:var(--tierra-borde); stroke-width:1.6; stroke-linejoin:round; }

.refs line.ecuador{ stroke:var(--rojo); stroke-width:2; stroke-dasharray:10 6; opacity:.75; }
.refs line.tropico{ stroke:#8d6620; stroke-width:1.4; stroke-dasharray:7 6; opacity:.6; }
.refs line.polar{ stroke:#4a7f96; stroke-width:1.4; stroke-dasharray:4 6; opacity:.6; }
.ref-label{ font-family:var(--fuente-ui); fill:var(--tinta-suave); opacity:.85; }
.ref-label.ecuador{ fill:var(--rojo); }

/* Marcas sobre el mapa */
.marca-clic circle{ fill:none; }
.marca-clic line{ stroke-linecap:round; }
.marca-clic.bien circle, .marca-clic.bien line{ stroke:var(--verde); }
.marca-clic.mal circle, .marca-clic.mal line{ stroke:var(--rojo); }

.marca-lugar .tolerancia{ fill:rgba(63,125,78,.16); stroke:var(--verde); }
.marca-lugar .punto{ fill:var(--rojo); stroke:#fff; }
.marca-lugar .etiqueta{
  font-family:var(--fuente); font-weight:700; fill:var(--tinta);
  paint-order:stroke; stroke:rgba(255,250,240,.95); stroke-linejoin:round;
}
.linea-error{ stroke:var(--rojo); opacity:.7; }

.marca-pista circle{ fill:#5d5346; opacity:.7; }
.marca-pista text{
  font-family:var(--fuente-ui); fill:var(--tinta-suave);
  paint-order:stroke; stroke:rgba(255,250,240,.9); stroke-linejoin:round;
}

.marca-ruta path{ fill:none; stroke:var(--rojo); opacity:.85; }
.marca-ruta .ciudad{ fill:var(--laton); stroke:#fff; }
.marca-ruta text{
  font-family:var(--fuente); font-weight:700; fill:var(--tinta);
  paint-order:stroke; stroke:rgba(255,250,240,.95); stroke-linejoin:round;
}

.pista-mapa{ text-align:center; font-size:13px; color:var(--tinta-suave); margin:9px 0 0; font-style:italic; }

/* ---------- Escenas de clima ---------- */
.zona-escena{ display:grid; justify-items:center; }
.escena-svg{
  width:min(420px,100%); height:auto; display:block;
  border:8px solid var(--tierra-borde); border-radius:6px;
  box-shadow:0 10px 24px rgba(58,47,33,.25);
}
.escena-nota{ font-size:11.5px; color:var(--tinta-suave); font-style:italic; margin:9px 0 0; text-align:center; }

/* ---------- Coordenadas ---------- */
.zona-coords{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:6px; }
.coord{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:rgba(181,132,42,.14); border:2px solid var(--laton);
  border-radius:12px; padding:12px 26px; min-width:140px;
}
.coord-k{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--tinta-suave); }
.coord-v{ font-family:var(--fuente); font-size:clamp(22px,5vw,30px); font-weight:700; }

/* ---------- Pregunta y alternativas ---------- */
.zona-pregunta{ margin-top:16px; }
.q-texto{
  font-family:var(--fuente); font-weight:700;
  font-size:clamp(17px,3.8vw,24px); line-height:1.35;
  text-align:center; margin:0 0 16px;
}
.opciones{ display:grid; gap:10px; }
@media (min-width:720px){ .opciones{ grid-template-columns:repeat(2,1fr); } }

.opcion{
  display:flex; align-items:center; gap:11px; text-align:left; width:100%;
  font-family:var(--fuente-ui); font-weight:600; font-size:clamp(14px,3vw,16px);
  color:var(--tinta); background:rgba(255,255,255,.62);
  border:2px solid var(--tierra-borde); border-radius:12px;
  padding:13px 15px; cursor:pointer;
  transition:transform .12s, border-color .2s, background .2s;
}
.opcion:hover:not(:disabled){ transform:translateX(3px); border-color:var(--laton); background:rgba(255,255,255,.88); }
.opcion:disabled{ cursor:default; }
.op-letra{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  font-family:var(--fuente); font-weight:700; font-size:14px;
  background:rgba(181,132,42,.22); border:1.5px solid var(--laton); border-radius:50%;
}
.opcion.es-correcta{ background:rgba(63,125,78,.2); border-color:var(--verde); }
.opcion.es-correcta .op-letra{ background:var(--verde); border-color:var(--verde); color:#fff; }
.opcion.es-incorrecta{ background:rgba(176,58,46,.16); border-color:var(--rojo); }
.opcion.es-incorrecta .op-letra{ background:var(--rojo); border-color:var(--rojo); color:#fff; }

/* ---------- Segunda parte ---------- */
.paso2-resultado{
  border-radius:10px; padding:11px 14px; margin:0 0 16px;
  font-size:14.5px; font-weight:600; text-align:center;
}
.paso2-resultado.acierto{ background:rgba(63,125,78,.18); border:1.5px solid var(--verde); }
.paso2-resultado.cerca{ background:rgba(201,138,30,.18); border:1.5px solid var(--ambar); }
.paso2-resultado.fallo{ background:rgba(176,58,46,.14); border:1.5px solid var(--rojo); }

/* ---------- Resultado de la respuesta ---------- */
.fb-titulo{ font-family:var(--fuente); font-size:clamp(22px,5vw,30px); text-align:center; margin:0 0 8px; }
.fb-titulo.acierto{ color:var(--verde); }
.fb-titulo.cerca{ color:var(--ambar); }
.fb-titulo.fallo{ color:var(--rojo); }
.fb-linea{ text-align:center; font-size:clamp(14px,3vw,16.5px); margin:0 0 10px; }
.fb-puntos{ text-align:center; font-family:var(--fuente); font-size:26px; font-weight:700; color:var(--laton); margin:0; }
.fb-bonos{ text-align:center; font-size:13px; color:var(--tinta-suave); margin:2px 0 14px; }
.fb-texto{
  background:rgba(255,255,255,.55); border-left:4px solid var(--laton);
  border-radius:0 10px 10px 0; padding:13px 16px;
  font-size:clamp(13.5px,2.9vw,15.5px); margin:0 0 18px;
}
#stage-feedback .btn-grande{ display:block; margin:0 auto; }

/* ---------- Ficha del profesor ---------- */
.ficha{
  background:rgba(181,132,42,.12); border:2px dashed var(--laton);
  border-radius:12px; padding:14px 16px; margin-top:18px; font-size:13.5px;
}
.ficha h3{ margin:0 0 8px; font-family:var(--fuente); font-size:16px; }
.ficha p{ margin:5px 0; }

/* ---------- Resultado final ---------- */
.resultado{ text-align:center; max-width:760px; margin:0 auto; }
.res-icono{ font-size:clamp(48px,12vw,74px); line-height:1; }
.res-rango{ font-family:var(--fuente); font-size:clamp(24px,5.6vw,36px); margin:4px 0 2px; }
.res-frase{ font-style:italic; color:var(--tinta-suave); margin:0 0 12px; }
.res-modo-lbl{ font-size:13px; color:var(--tinta-suave); margin:0 0 14px; }
.res-puntos{ display:flex; align-items:baseline; justify-content:center; gap:8px; margin-bottom:18px; }
.res-puntos b{ font-family:var(--fuente); font-size:clamp(38px,9vw,56px); color:var(--laton); }
.res-puntos span{ font-size:14px; color:var(--tinta-suave); }

.res-detalle{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:22px; }
.dato{
  background:rgba(255,255,255,.55); border:1.5px solid var(--linea);
  border-radius:12px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; gap:1px;
}
.dato-i{ font-size:17px; }
.dato-v{ font-family:var(--fuente); font-size:20px; font-weight:700; }
.dato-k{ font-size:10.5px; color:var(--tinta-suave); }

.res-sub{ font-family:var(--fuente); font-size:18px; margin:0 0 10px; }
.res-revision{ list-style:none; padding:0; margin:0 0 22px; text-align:left; }
.res-revision li{
  display:flex; align-items:center; gap:10px;
  padding:8px 11px; border-radius:9px; margin-bottom:5px; font-size:13.5px;
  background:rgba(255,255,255,.45); border-left:4px solid var(--linea);
}
.res-revision li.acierto{ border-left-color:var(--verde); }
.res-revision li.cerca{ border-left-color:var(--ambar); }
.res-revision li.fallo{ border-left-color:var(--rojo); }
.rev-n{
  flex:none; width:23px; height:23px; display:grid; place-items:center;
  background:rgba(181,132,42,.2); border-radius:50%; font-size:12px; font-weight:700;
}
.rev-q{ flex:1; }
.rev-p{ font-family:var(--fuente); font-weight:700; color:var(--laton); }

.res-botones{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }

.firma{ text-align:center; font-size:13px; color:var(--tinta-suave); margin-top:26px; }

/* ---------- Pantallas chicas ---------- */
@media (max-width:520px){
  .hud{ border-radius:16px; }
  .hud-datos{ width:100%; margin-left:0; justify-content:space-around; }
  .res-detalle{ grid-template-columns:repeat(2,1fr); }

}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}