/* ==========================================
   Mapa interactivo de la ciudad
   Qué cubre: Parcelas, ruta de puntos, marcadores de misión, panel de sub-etapas, banner de acceso en el dashboard y modal de Presaberes.
   Se carga el último: sus reglas ganan en caso de empate.
   Orden de carga: ver ESTRUCTURA.md (este archivo es el nº 12 de 12).
   Secciones:
     · LIENZO DEL MAPA Y PARCELAS
     · RUTA QUE CONECTA LAS 4 PARCELAS (vista general)
     · MARCADORES DE MISIÓN SOBRE EL LOTE (Etapa 1)
     · PANEL LATERAL DE SUB-ETAPAS DE LA ZONA
     · BANNER DE ACCESO EN EL DASHBOARD
     · MODAL: PRESABERES (SUB-ETAPA 0)
     · PANTALLAS PEQUEÑAS DEL MAPA (ancho < 900 px o alto < 600 px)
   ========================================== */

/*
Estilos del Mapa Interactivo de la Ciudad ATOMIX
(banner de acceso en el Dashboard, pantalla #pantallaMapaCiudad con sus
parcelas de etapas, zoom a la zona activa, nodos de misiones y el modal
de Presaberes — la Misión 1/Libro usa el visor genérico #modalLibro)
*/

/* La pantalla ocupa exactamente el alto de la ventana (sin scroll de página) y
   el lienzo se dimensiona por el alto disponible:
     --alto-mapa-disp = alto de la ventana − paddings − cabecera (~64 px);
     --w-mapa         = ancho real aproximado del mapa (lo que quepa a lo
                        ancho junto al panel de 22 vw, o 1,6 × el alto
                        disponible: el mapa es 16:10);
     --u-mapa         = "1 px" escalado con el mapa (1 px cuando mide ~1030 px
                        de ancho): los tamaños en px que no escalan solos
                        (parcelas, letras, marcadores) se multiplican por él.
   Las posiciones de todo siguen en % del lienzo, así que no cambian. */
.pantalla-ciudad {
  --cd-pad: clamp(0.5rem, 1.2vh, 1rem);
  --alto-mapa-disp: calc(100vh - 3 * var(--cd-pad) - 64px);
  --w-mapa: min(calc(100vw - 2 * var(--cd-pad) - clamp(240px, 22vw, 300px) - 16px), calc(var(--alto-mapa-disp) * 1.6));
  --u-mapa: clamp(0.88px, calc(var(--w-mapa) / 1030), 1.4px);
  position: fixed;
  inset: 0;
  z-index: 2;
  background: var(--atx-bg-app);
  color: var(--atx-text-dark);
  display: flex;
  flex-direction: column;
  gap: var(--cd-pad);
  box-sizing: border-box;
  padding: var(--cd-pad);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

.cuerpo-ciudad {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(240px, 22vw, 300px);
  gap: 16px;
  min-height: 0;
}

/* ==========================================
   LIENZO DEL MAPA Y PARCELAS
   ========================================== */

/* Marco FIJO: no lleva transform ni transition — su único trabajo es
   recortar (overflow:hidden) lo que pase adentro. Si el zoom se aplicara
   aquí, el marco entero se agranda y tapa el panel de misiones y el
   header (ese era el bug). El zoom real va en #lienzoInterior. */
.lienzo-mapa-ciudad {
  position: relative;
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 16px;
  box-shadow: 0 8px 20px var(--atx-sombra);
  overflow: hidden;
  /* Ancho = lo que quepa a lo ancho O lo que permita el alto disponible
     (alto × 1,6); la altura sale de la proporción 16:10, que NO debe
     romperse (el fondo y las parcelas están calibrados sobre ella). */
  width: min(100%, calc(var(--alto-mapa-disp) * 1.6));
  height: auto;
  aspect-ratio: 16 / 10;
  align-self: start;
  justify-self: center;
}

/* Interior que sí se transforma. Origen fijo en la esquina (0 0): el zoom
   NO usa transform-origin en un punto variable (eso dejaba parcelas
   recortadas fuera de vista) — ciudad.js calcula en píxeles reales
   (getBoundingClientRect del marco fijo) el desplazamiento que recentra
   la parcela clicada, y aquí solo se combinan escala + ese desplazamiento. */
.lienzo-interior {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1);
  --zoom-escala: 1;
  --zoom-desplazamiento-x: 0px;
  --zoom-desplazamiento-y: 0px;
}

.lienzo-interior.zoom-activo {
  transform: scale(var(--zoom-escala)) translate(var(--zoom-desplazamiento-x), var(--zoom-desplazamiento-y));
}

.fondo-mapa-ciudad {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.parcela-ciudad {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u-mapa));
  background: var(--atx-panel-bg);
  border: 2px solid var(--atx-accent-teal);
  border-radius: 10px;
  padding: calc(9.6 * var(--u-mapa)) calc(16 * var(--u-mapa));
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 16px rgba(76, 29, 149, 0.18);
  white-space: nowrap;
}

.parcela-ciudad:hover {
  transform: translate(-50%, -50%) translateY(-2px);
  box-shadow: 0 10px 24px rgba(76, 29, 149, 0.28);
}

/* Posiciones calibradas contra mapa-ciudad-atomix-vacio.png (1586×992 px
   reales). El estudiante empieza en la Etapa 1 (Lote 3, arriba a la
   derecha — es donde se construye) y la ruta avanza en sentido horario:
   Etapa 1 (arriba-derecha) → Etapa 2 (abajo-derecha) → Etapa 3
   (abajo-izquierda) → Etapa 4/Meta (arriba-izquierda). */
/* Sombra reforzada respecto a las otras 3 parcelas: esta es la única con la
   casa en miniatura (.casa-mini-mapa) creciendo detrás, y necesita más
   contraste para no perderse contra ella. */
.parcela-etapa1 { left: 72.4%; top: 30.9%; box-shadow: 0 8px 22px rgba(76, 29, 149, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.85); }
/* Lote 3: x=1149 y=307 */
.parcela-remat { left: 72.6%; top: 67.8%; }
/* Lote 2: x=1151 y=673 */
.parcela-etapa3 { left: 27.6%; top: 67.4%; }
/* Lote 1: x=438 y=669 */
.parcela-etapa4 { left: 28.5%; top: 30.7%; }
/* Lote 4: x=452 y=305 */

/* Casa en miniatura que crece por capas al comprar en la Tienda. Se ubica
   en las mismas coordenadas que .parcela-etapa1 y va ANTES que ese botón en
   el HTML — así el marcador/logo de la etapa siempre pinta por encima. */
.casa-mini-mapa {
  position: absolute;
  left: 72.4%;
  top: 30.9%;
  transform: translate(-50%, -50%);
  /* En % del lienzo (no px fijos) para que escale igual que las parcelas
     al cambiar el tamaño de ventana. Centrada en (72.4%, 30.9%), este
     tamaño deja el borde derecho en 96.9% (no se sale del lienzo) y el
     borde inferior en 47.5% (lejos del 67.8% de la parcela de Etapa 2) —
     revisado por cálculo, no visualmente; ajusta si en pantalla se ve mal. */
  width: 49%;
  height: 33.2%;
  pointer-events: none;
}

.capa-casa-mini {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.capa-casa-mini.oculto-capa {
  opacity: 0;
}

.icono-parcela {
  font-size: calc(19.2 * var(--u-mapa));
}

.icono-parcela img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.15em;
}

.etiqueta-parcela {
  font-size: calc(11.2 * var(--u-mapa));
  font-weight: 800;
  text-align: left;
  color: var(--atx-text-dark);
  line-height: 1.25;
}

.parcela-ciudad.proximamente {
  border-color: var(--atx-text-muted-suave);
  filter: grayscale(70%);
  opacity: 0.85;
}

.candado-parcela {
  font-size: calc(19.2 * var(--u-mapa));
}

.candado-parcela img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.15em;
}

/* ==========================================
   RUTA QUE CONECTA LAS 4 PARCELAS (vista general)
   ========================================== */

.ruta-mapa-ciudad {
  /* Sin z-index a propósito: al no crear una nueva capa de apilamiento,
     pinta en el orden del HTML (antes que los botones de parcela), así
     queda debajo de ellos en vez de taparlos. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Fila de PUNTOS redondos (no guiones): trazo de largo 0 con extremos
   redondos. vector-effect: non-scaling-stroke es imprescindible: el SVG usa
   preserveAspectRatio="none" y, sin esto, los puntos se deformarían en
   elipses al cambiar el tamaño del mapa. Con esa propiedad, stroke-width y
   stroke-dasharray se miden en píxeles de pantalla (puntos de 9 px cada 22 px,
   escalados con el tamaño del mapa por --u-mapa; las dos primeras líneas son
   el respaldo si el navegador no admite calc() en el trazo). */
.ruta-mapa-ciudad path {
  fill: none;
  stroke: var(--atx-accent-teal);
  stroke-width: 9;
  stroke-width: calc(9 * var(--u-mapa));
  stroke-linecap: round;
  stroke-dasharray: 0 22;
  stroke-dasharray: 0 calc(22 * var(--u-mapa));
  vector-effect: non-scaling-stroke;
  opacity: 0.85;
}

/* La ruta general entre las 4 etapas se oculta mientras hay zoom activo
   sobre una parcela — no tiene sentido verla de fondo dentro del zoom. */
.lienzo-interior.zoom-activo .ruta-mapa-ciudad {
  opacity: 0;
}

/* ==========================================
   MARCADORES DE MISIÓN SOBRE EL LOTE (Etapa 1)
   Solo visibles cuando el zoom está activo sobre esa parcela — se suman al
   panel lateral, no lo reemplazan.
   ========================================== */

.marcadores-mision-etapa1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.marcadores-mision-etapa1.visible {
  opacity: 1;
  pointer-events: auto;
}

.ruta-misiones-etapa1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* A propósito MUY distinta de .ruta-mapa-ciudad: un trazo casi de largo 0
   con extremos redondeados ("stroke-linecap: round") no dibuja guiones,
   dibuja puntos circulares — se ve como una fila de puntitos, no como una
   línea punteada. */
.ruta-misiones-etapa1 polyline {
  fill: none;
  stroke: var(--atx-accent-pink);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 0.01 2.6;
  opacity: 0.85;
}

.marcador-mision {
  position: absolute;
  transform: translate(-50%, -50%);
  width: calc(34 * var(--u-mapa));
  height: calc(34 * var(--u-mapa));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(16.8 * var(--u-mapa));
  background: var(--atx-panel-bg);
  border: 2px solid var(--atx-accent-teal);
  box-shadow: 0 4px 12px rgba(76, 29, 149, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.marcador-mision:hover {
  transform: translate(-50%, -50%) scale(1.12);
}

.marcador-mision.completada {
  border-color: var(--atx-accent-green);
  background: rgba(34, 197, 94, 0.15);
}

.marcador-mision.proximamente {
  opacity: 0.6;
  filter: grayscale(50%);
  cursor: not-allowed;
}

/* ==========================================
   PANEL LATERAL DE SUB-ETAPAS DE LA ZONA
   ========================================== */

.panel-subetapas-zona {
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 16px;
  padding: 1.3rem;
  box-shadow: 0 8px 20px var(--atx-sombra);
  overflow-y: auto;
}

.oculto-panel-zona {
  display: none !important;
}

.panel-zona-vacio {
  color: var(--atx-text-muted);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 2rem;
}

.titulo-panel-zona {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--atx-accent-teal-dark);
  text-align: center;
}

.aviso-zona-bloqueada {
  background: rgba(251, 146, 60, 0.12);
  border: 1px solid var(--atx-accent-amber);
  color: var(--atx-accent-amber-dark);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.nodos-subetapas-zona {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.nodo-subetapa {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  background: var(--atx-panel-bg-suave);
  border: 2px solid var(--atx-panel-border);
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.nodo-subetapa-icono {
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* Reemplaza los emoji (🔒✅🧠📘) de .nodo-subetapa-icono y .marcador-mision:
   1em toma el font-size heredado de cada contenedor, así el ícono ocupa el
   mismo espacio visual que ocupaba el emoji en cada uno de los dos lugares. */
.icono-subetapa-img {
  width: 1em;
  height: 1em;
  object-fit: contain;
  vertical-align: -0.15em;
}

.nodo-subetapa-nombre {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--atx-text-dark);
}

.nodo-subetapa.disponible {
  border-color: var(--atx-accent-teal);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.25);
}

.nodo-subetapa.disponible:hover {
  transform: translateX(3px);
}

.nodo-subetapa.completada {
  border-color: var(--atx-accent-green);
  background: rgba(34, 197, 94, 0.1);
}

.nodo-subetapa.proximamente {
  opacity: 0.55;
  filter: grayscale(50%);
  cursor: not-allowed;
}

/* Header de la pantalla (título + botón volver + chip de ATOMICASH),
   migrado desde mapa.css cuando se retiró el Taller de Construcción — esta
   pantalla quedó como su único usuario. */
.header-terreno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--atx-panel-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 12px;
  padding: 0.4rem 1rem;
  margin-bottom: 0;
  box-shadow: 0 8px 20px var(--atx-sombra);
}

.btn-volver-dashboard {
  background: var(--atx-track-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 30px;
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--atx-text-dark);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-volver-dashboard:hover {
  background: var(--atx-accent-teal);
  color: #ffffff;
  border-color: var(--atx-accent-teal);
}

.titulo-terreno {
  text-align: center;
}

.titulo-terreno h1 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
  color: var(--atx-accent-teal-dark);
}

.titulo-terreno p {
  margin: 2px 0 0 0;
  font-size: 0.78rem;
  color: var(--atx-text-muted);
}

.chip-recurso-terreno {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid var(--atx-accent-amber);
  color: var(--atx-accent-amber-dark);
  border-radius: 30px;
  padding: 0.35rem 1rem;
  font-weight: 800;
  font-size: 0.85rem;
  white-space: nowrap;
}

.recursos-terreno {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.btn-volver-mapa-general {
  background: var(--atx-track-bg);
  border: 1px solid var(--atx-panel-border);
  border-radius: 30px;
  padding: 0.4rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--atx-text-dark);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn-volver-mapa-general:hover {
  background: var(--atx-accent-teal);
  color: #ffffff;
  border-color: var(--atx-accent-teal);
}

/* ==========================================
   BANNER DE ACCESO EN EL DASHBOARD
   (reemplaza el antiguo "Mapa de Construcción de Atomix")
   ========================================== */

/* Disposición horizontal y compacta (imagen a la izquierda, texto a la
   derecha) para dejar sitio al resto del dashboard sin scroll de página. */
.banner-mapa-ciudad {
  flex: 1;                    /* el banner toma todo el alto que sobra: es el protagonista del dashboard */
  width: 100%;
  min-height: clamp(125px, 18vh, 200px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2vw, 1.6rem);
  background: linear-gradient(135deg, var(--atx-accent-teal) 0%, var(--atx-accent-pink) 100%);
  color: #ffffff;
  border: none;
  border-radius: 16px;
  padding: 0.6rem 1.4rem;
  box-shadow: 0 10px 24px rgba(76, 29, 149, 0.30);
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}

.banner-mapa-ciudad::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 55%);
  pointer-events: none;
}

.banner-mapa-ciudad:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 42px rgba(76, 29, 149, 0.42);
}

.img-banner-mapa-ciudad {
  width: clamp(80px, 17vh, 200px);
  height: clamp(80px, 17vh, 200px);
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
}

.texto-banner-mapa-ciudad h3 {
  margin: 0 0 4px 0;
  font-size: clamp(1.4rem, 3.6vh, 2.5rem);
  letter-spacing: 1px;
}

.texto-banner-mapa-ciudad p {
  margin: 0;
  font-size: clamp(0.95rem, 2.2vh, 1.35rem);
  opacity: 0.94;
}

/* ==========================================
   MODAL: PRESABERES (SUB-ETAPA 0)
   ========================================== */

.intro-presaberes {
  margin: 0 0 1.1rem 0;
  font-size: 0.85rem;
  color: var(--atx-text-muted);
  line-height: 1.5;
}

.pregunta-presaberes {
  margin-bottom: 1.1rem;
}

.pregunta-presaberes p {
  margin: 0 0 0.5rem 0;
  font-size: 0.88rem;
  color: var(--atx-text-dark);
  font-weight: 600;
}

.opcion-presaberes {
  display: block;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--atx-panel-border);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  font-size: 0.85rem;
  color: var(--atx-text-dark);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.opcion-presaberes:hover {
  border-color: var(--atx-accent-teal);
  background: #f5f0ff;
}

.opcion-presaberes input {
  margin-right: 0.5rem;
}

/* Retroalimentación al elegir (evaluarPresaber, ciudad.js): mismos colores
   que las preguntas de los libros (.libro-pregunta-opcion.opcion-correcta). */
.opcion-presaberes.opcion-correcta {
  border-color: #22c55e;
  background: #dcfce7;
  color: #166534;
  font-weight: 700;
}

.opcion-presaberes.opcion-incorrecta {
  border-color: #ef4444;
  background: #fee2e2;
  color: #991b1b;
  font-weight: 700;
}

/* Botón "Verificar" al final de las preguntas (verificarPresaberes, ciudad.js). */
.presaberes-acciones {
  margin-top: 0.4rem;
}

.pregunta-presaberes .presaber-respuesta-correcta {
  margin: 0.3rem 0 0 0;
  font-size: 0.82rem;
  color: #166534;
}

/* ==========================================
   PANTALLAS PEQUEÑAS DEL MAPA (ancho < 900 px o alto < 600 px)
   Aquí ya no cabe el mapa completo sin que quede diminuto: se devuelve el
   scroll normal de la página y el lienzo vuelve a ocupar todo el ancho de
   su columna (siempre en proporción 16:10).
   ========================================== */
@media (max-width: 900px), (max-height: 600px) {
  .pantalla-ciudad { overflow-y: auto; }
  .cuerpo-ciudad { flex: 0 0 auto; }
  .lienzo-mapa-ciudad { width: 100%; }
}