/* ============================================================================
   VISION ENGLISH — RUTA REDISEÑADA estilo Duolingo (Claude, 04/09)
   PROTOTIPO en Basic: nodos como botones-disco con el cuerpo dentro, sin
   líneas conectoras, indicador del nivel actual, y bioma "arrecife de coral".
   Cuando Iker apruebe Basic, se replica a Intermediate (taiga) y Advanced
   (bioluminiscencia) cambiando solo el bioma.
   ========================================================================= */

/* ── 3. NODOS estilo Duolingo: botón-disco con el cuerpo dentro ──────────── */
#level-basic .duo-path-container .geo-node {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(circle at 50% 60%, rgba(var(--atmos), .30), rgba(var(--atmos), .14));
  border: 2px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  /* Borde inferior grueso = efecto botón "presionable" de Duolingo. */
  box-shadow:
    0 9px 0 rgba(6, 40, 50, .55),
    0 16px 30px rgba(0, 0, 0, .4),
    inset 0 2px 3px rgba(255,255,255,.4);
  transition: transform .16s cubic-bezier(.2,.8,.2,1.3), box-shadow .16s;
}
#level-basic .duo-path-container .geo-node:hover:not(.status-locked) {
  transform: translateY(-3px);
  box-shadow: 0 12px 0 rgba(6,40,50,.55), 0 20px 36px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.4);
}
#level-basic .duo-path-container .geo-node:active:not(.status-locked) {
  transform: translateY(5px);
  box-shadow: 0 4px 0 rgba(6,40,50,.55), 0 8px 18px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.4);
}
/* El cuerpo (cubo) va dentro del disco, más chico. */
#level-basic .duo-path-container .geo-node .geo-shape {
  width: 72px !important;
  height: 72px !important;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.4));
}
/* Se anula la plataforma/sombra elíptica anterior (ahora el disco ES el nodo). */
#level-basic .duo-path-container .geo-node::after { display: none !important; }

/* Nodo bloqueado: disco apagado y gris. */
#level-basic .duo-path-container .geo-node.status-locked {
  background: radial-gradient(circle at 50% 45%, rgba(120,130,150,.22), rgba(80,90,110,.14));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 7px 0 rgba(0,0,0,.4), 0 12px 22px rgba(0,0,0,.35);
}
#level-basic .duo-path-container .geo-node.status-locked .geo-shape { filter: grayscale(.8) brightness(.7); }

/* ── 4. INDICADOR "AQUÍ VAS": anillo animado en el nodo actual ───────────── */
#level-basic .duo-path-container .geo-node.status-active {
  box-shadow:
    0 0 0 4px rgba(var(--atmos), .5),
    0 0 0 10px rgba(var(--atmos), .18),
    0 9px 0 rgba(6,40,50,.55),
    0 16px 34px rgba(var(--atmos), .4);
  animation: nodoLatido 2s ease-in-out infinite;
}
@keyframes nodoLatido {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--atmos), .5), 0 0 0 10px rgba(var(--atmos), .18), 0 9px 0 rgba(6,40,50,.55), 0 16px 34px rgba(var(--atmos), .4); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--atmos), .7), 0 0 0 16px rgba(var(--atmos), .1),  0 9px 0 rgba(6,40,50,.55), 0 18px 40px rgba(var(--atmos), .55); }
}

/* La cápsula "Lección N" un poco más limpia. */
#level-basic .geo-caption {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
  #level-basic .duo-path-container .geo-node.status-active { animation: none; }
}

/* ── MEJORAS v2 (Basic) ─────────────────────────────────────────────────── */

#level-basic .duo-path-container {
  position: relative;
}

/* Discos con más profundidad: reflejo superior tipo cristal/agua. */
#level-basic .duo-path-container .geo-node {
  overflow: visible;
}
#level-basic .duo-path-container .geo-node::before {
  content: "";
  position: absolute;
  top: 8px; left: 22%; right: 22%;
  height: 30%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
  filter: blur(1px);
  pointer-events: none;
  z-index: 1;
}

/* ── MEJORAS v3 (Basic): nodos MÁS JUNTOS = se leen como camino ─────────── */
/* Sin líneas, los nodos deben estar cerca del centro y poco separados, como
   Duolingo, para que el ojo siga el sendero solo. */
#level-basic .duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col {
  transform: translateX(-58px) !important;
}
#level-basic .duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col {
  transform: translateX(58px) !important;
}
#level-basic .duo-path-container .path-row:has(.geo-node) {
  min-height: 128px !important;   /* menos aire vertical: nodos más pegados */
}
#level-basic .duo-path-container {
  gap: 4px !important;
}

/* ── ACCESIBILIDAD: foco visible con teclado en cada nodo ────────────────── */
#level-basic .duo-path-container .geo-node:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px rgba(var(--atmos), .55), 0 9px 0 rgba(6,40,50,.55), 0 16px 30px rgba(0,0,0,.4);
}
/* La cápsula "Lección N" con más contraste (legibilidad). */
#level-basic .geo-caption {
  color: #0a3b3b;
  font-weight: 800;
}
body.dark #level-basic .geo-caption { color: #d7fbfa; }

/* ── MÓVIL / TELÉFONO: ruta centrada, sin que los nodos se salgan ────────── */
@media (max-width: 768px) {
  /* La fila se centra: una sola columna, el nodo al centro. */
  #level-basic .duo-path-container .path-row:has(.geo-node) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    min-height: 104px !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node) .path-marker-col {
    grid-column: 1 !important;
    justify-self: center !important;
  }
  /* Zigzag pequeño desde el centro (no se sale de la pantalla). */
  #level-basic .duo-path-container .path-row.row-left:has(.geo-node) .path-marker-col {
    transform: translateX(-30px) !important;
  }
  #level-basic .duo-path-container .path-row.row-right:has(.geo-node) .path-marker-col {
    transform: translateX(30px) !important;
  }
  /* Nodos un poco más chicos en el teléfono. */
  #level-basic .duo-path-container .geo-node {
    width: 92px !important;
    height: 92px !important;
  }
  #level-basic .duo-path-container .geo-node .geo-shape {
    width: 56px !important;
    height: 56px !important;
  }
  /* La tarjeta "Siguiente actividad" pasa debajo del nodo, no al lado. */
  #level-basic .duo-path-container .path-node-summary {
    position: static !important;
    max-width: 90% !important;
    margin: 8px auto 0 !important;
  }
  /* El contenedor a lo ancho, con poco padding lateral. */
  #level-basic .duo-path-container {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}