/* ============================================================================
   VISION ENGLISH — MEJORAS DE LAS PÁGINAS DE NIVEL
   ----------------------------------------------------------------------------
   Hoja de Claude. La ruta se veía desierta a los lados. Aquí se puebla sin
   tocar el layout del zigzag (eso es delicado): adornos más grandes y una
   decoración de fondo suave del color de cada nivel.
   Carga DESPUÉS de styles.css para ganar en especificidad igualada.
   ========================================================================= */

/* ── Adornos más grandes y legibles ─────────────────────────────────────── */
#level-basic .path-landmark,
#level-intermediate .path-landmark,
#level-advanced .path-landmark {
  width: 178px;
}
.path-landmark .landmark-art { transform: scale(1.45); }
.path-landmark small {
  font-size: .82rem;
  font-weight: 700;
  opacity: .9;
  letter-spacing: -.01em;
}

/* ── Fondo con vida: manchas suaves del color del nivel, para que el
      contenedor no se sienta vacío detrás de la ruta ─────────────────────── */
.duo-path-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 14%, rgba(var(--level-accent-rgb), .1), transparent 22%),
    radial-gradient(circle at 90% 30%, rgba(var(--level-accent-rgb), .09), transparent 22%),
    radial-gradient(circle at 15% 55%, rgba(var(--level-accent-rgb), .08), transparent 20%),
    radial-gradient(circle at 85% 72%, rgba(var(--level-accent-rgb), .09), transparent 22%),
    radial-gradient(circle at 12% 90%, rgba(var(--level-accent-rgb), .07), transparent 20%);
}

/* Textura rústica: líneas finas diagonales muy sutiles sobre el color. */
.duo-path-container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .4;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(var(--level-accent-rgb), .05) 0px,
    rgba(var(--level-accent-rgb), .05) 1px,
    transparent 1px,
    transparent 11px
  );
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 82%);
}

/* Las filas van por encima de la decoración de fondo. */
.duo-path-container .path-row { position: relative; z-index: 2; }

/* ============================================================================
   CUERPOS FOTORREALISTAS (PNG transparentes de 1254px)
   Reemplazan los cuerpos CSS 3D en portales del hero y botones del sidebar.
   ========================================================================= */

/* ── Portales del hero: la imagen flota; al click, la anima geo-levels.js ── */
.geo-body-img {
  width: clamp(180px, 22vw, 252px);
  height: auto;
  object-fit: contain;
  cursor: pointer;
  will-change: transform;
  filter: drop-shadow(0 22px 34px rgba(30, 20, 60, .28));
}
.geo-portal:hover .geo-body-img {
  filter: drop-shadow(0 26px 40px rgba(30, 20, 60, .38)) brightness(1.05);
}
@keyframes geoFloat {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  50%      { transform: translateY(-18px) rotate(1.4deg); }
}

/* ── Botones del sidebar: mini cuerpos con la misma imagen, flotando ─────── */
.nav-icon-3d .mini-3d-cube,
.nav-icon-3d .mini-3d-rhombus,
.nav-icon-3d .mini-3d-sphere {
  width: 30px;
  height: 30px;
  transform: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: none;
  animation: none;
}
/* Sin fondo, borde ni sombra detrás del cuerpo del sidebar. */
.nav-item-geo .nav-icon,
.nav-item-geo .nav-icon-3d {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}
/* Ocultar los pseudo-elementos que formaban el cubo CSS anterior. */
.nav-icon-3d .mini-3d-cube::before,
.nav-icon-3d .mini-3d-cube::after,
.nav-icon-3d .mini-3d-rhombus::before,
.nav-icon-3d .mini-3d-rhombus::after,
.nav-icon-3d .mini-3d-sphere::before,
.nav-icon-3d .mini-3d-sphere::after { display: none !important; }

.nav-icon-3d .mini-3d-cube    { background-image: url("assets/path-node-cube-gold.png"); }
.nav-icon-3d .mini-3d-rhombus { background-image: url("assets/path-node-diamond-ruby.png"); }
.nav-icon-3d .mini-3d-sphere  { background-image: url("assets/path-node-sphere-violet.png"); }

/* La esfera conserva su cristal original, sin placa de color detrás. */
button.nav-item-geo[data-section="level-advanced"]
  .nav-icon-3d > .mini-3d-sphere {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("assets/path-node-sphere-violet.png");
  background-size: contain;
  background-blend-mode: normal;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(91, 33, 182, .32));
}

/* Al pasar o estar activo, el cuerpo del sidebar crece un poco. */
.nav-item:hover  .nav-icon-3d .mini-3d-cube,
.nav-item.active .nav-icon-3d .mini-3d-cube,
.nav-item:hover  .nav-icon-3d .mini-3d-rhombus,
.nav-item.active .nav-icon-3d .mini-3d-rhombus,
.nav-item:hover  .nav-icon-3d .mini-3d-sphere,
.nav-item.active .nav-icon-3d .mini-3d-sphere {
  transform: scale(1.18);
}

@keyframes geoFloatMini {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* La barra lateral necesita espacio para el ícono más grande. */
.nav-item-geo .nav-icon-3d {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
}

@media (prefers-reduced-motion: reduce) {
  .geo-body-img, .nav-icon-3d .mini-3d-cube,
  .nav-icon-3d .mini-3d-rhombus, .nav-icon-3d .mini-3d-sphere { animation: none; }
}

/* ============================================================================
   NODOS DE LA RUTA CON LOS CUERPOS FOTORREALISTAS
   Reemplazan las caras CSS de cada nodo por el PNG del nivel. Como es el mismo
   archivo para todos los nodos de un nivel, el navegador lo cachea una vez.
   ========================================================================= */
.duo-path-container .geo-node .geo-shape {
  width: 104px;
  height: 104px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 10px 14px rgba(30, 20, 60, .22));
  animation: none !important;
}
.duo-path-container .geo-node .geo-face { display: none !important; }
.duo-path-container .geo-node .geo-shape::before,
.duo-path-container .geo-node .geo-shape::after { display: none !important; }

.duo-path-container .shape-cube    .geo-shape { background-image: url("assets/path-node-cube-gold.png"); }
.duo-path-container .shape-rhombus .geo-shape { background-image: url("assets/path-node-diamond-ruby.png"); }
.duo-path-container .shape-sphere  .geo-shape { background-image: url("assets/path-node-sphere-violet.png"); }

/* Al pasar el mouse, el cuerpo del nodo crece un poco (sin girar raro). */
.duo-path-container .geo-node:hover:not(.status-locked) .geo-shape {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

/* El símbolo de estado (check / candado) queda por encima del cuerpo. */
.duo-path-container .geo-node .geo-icon { z-index: 4; }

/* ============================================================================
   RUTA IA — el nivel ACTUAL (donde estás) se resalta en dorado
   Antes usaba el color de cada nivel, así que "aquí estás" se veía distinto en
   cada uno. El dorado marca de forma consistente el nivel activo, sin perder
   el color propio de cada código (A1, B2...) en su cuadrito.
   ========================================================================= */
#ai-course .ai-rail-item.active {
  border-color: #f0b429;
  background: color-mix(in srgb, #f0b429 14%, var(--surface));
  box-shadow: 0 0 0 1px rgba(240, 180, 41, .35), 0 6px 16px -6px rgba(240, 180, 41, .4);
}
#ai-course .ai-rail-item.active .ai-rail-percent { color: #b9820a; }
body.dark #ai-course .ai-rail-item.active {
  background: color-mix(in srgb, #f0b429 18%, var(--surface));
}
body.dark #ai-course .ai-rail-item.active .ai-rail-percent { color: #fbbf24; }

/* El hover (nivel que NO es el actual) mantiene el color de su nivel. */
#ai-course .ai-rail-item:hover:not(.active) {
  border-color: color-mix(in srgb, var(--rail-color) 38%, var(--line));
  background: color-mix(in srgb, var(--rail-color) 9%, var(--surface));
}

/* ============================================================================
   FIXES 03/09/2026 (cosas que cambió otra IA)
   ========================================================================= */

/* ── BUG 1: título del folleto invisible ─────────────────────────────────
   Dos causas: el "brillo que recorre la tarjeta" (::after de geo-levels) se
   pintaba ENCIMA del texto, y el título no tenía color propio, heredando el
   blanco del overlay. Se sube el contenido sobre el brillo y se da color. */
#pathNodeModal .path-node-modal-card::after { z-index: 1 !important; }
#pathNodeModalBody { position: relative; z-index: 3; }
#pathNodeModal .path-node-modal-title {
  position: relative;
  z-index: 3;
  color: #1e1b4b;
  -webkit-text-fill-color: #1e1b4b;
}
body.dark #pathNodeModal .path-node-modal-title {
  color: #f4f1ff;
  -webkit-text-fill-color: #f4f1ff;
}

/* ── BUG 2: texto de Ollie Coach encimado ────────────────────────────────
   El nombre y el mensaje se montaban. Se fuerza el apilado vertical limpio. */
.coach-bubble {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.coach-bubble strong,
.coach-bubble span {
  display: block;
  position: static;
  margin: 0;
  width: 100%;
}
.coach-bubble span { line-height: 1.35; }

/* ============================================================================
   RUTA IA — botón "Continuar" con color del nivel + tema actual en dorado
   ========================================================================= */

/* El botón "Continuar en X" se pinta del color del nivel donde te quedaste. */
#ai-course .ai-course-resume {
  background: var(--resume-color, #111827);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--resume-color, #111827) 34%, transparent);
}
#ai-course .ai-course-resume > span:first-child {
  background: #fff;
  color: var(--resume-color, #111827);
}
#ai-course .ai-course-resume small { color: rgba(255, 255, 255, .85); }
#ai-course .ai-course-resume strong { color: #fff; }

/* La lección "Tu siguiente tema" (la más reciente donde vas) se resalta en
   DORADO, no en verde. Solo esa: el resto mantiene el color de su nivel. */
#ai-course .ai-topic-row.current {
  border-color: #f0b429;
  background: color-mix(in srgb, #f5b301 10%, var(--surface));
  box-shadow: 0 0 0 4px rgba(240, 180, 41, .12), 0 12px 28px rgba(240, 180, 41, .18);
}
#ai-course .ai-topic-row.current .ai-topic-number {
  background: #e0a020;
  box-shadow: 0 0 18px rgba(240, 180, 41, .5);
}
#ai-course .ai-topic-row.current .ai-topic-status { color: #b9820a !important; }
body.dark #ai-course .ai-topic-row.current .ai-topic-status { color: #fbbf24 !important; }

/* ============================================================================
   REDISEÑO DE NIVELES (Claude, 04/09) — FONDO CON PROFUNDIDAD Y PERSONALIDAD
   El fondo plano oscuro se sentía vacío. Ahora cada nivel tiene una atmósfera
   propia: brillo del color del nivel arriba, halos suaves, viñeta y una malla
   de puntos muy sutil que da textura sin competir con la ruta.
   ========================================================================= */

/* Tono de atmósfera por nivel (coherente con su cuerpo geométrico). */
#level-basic        { --atmos: 245, 176, 40; }   /* ámbar/dorado (cubo) */
#level-intermediate { --atmos: 244, 63, 94; }    /* rojo (diamante) */
#level-advanced     { --atmos: 236, 72, 153; }   /* rosa — Iker pidió rosa, no violeta, para el mármol de Advanced */

/* ── Modo oscuro: atmósfera rica ────────────────────────────────────────── */
body.dark #level-basic,
body.dark #level-intermediate,
body.dark #level-advanced {
  position: relative;
  background:
    radial-gradient(130% 70% at 50% -8%, rgba(var(--atmos), .2), transparent 55%),
    radial-gradient(45% 40% at 82% 22%, rgba(var(--atmos), .12), transparent 60%),
    radial-gradient(45% 45% at 12% 65%, rgba(var(--atmos), .1), transparent 62%),
    linear-gradient(180deg, #0c1018, #090b12);
}
/* Malla de puntos + viñeta, muy sutil, encima del color. */
body.dark #level-basic::after,
body.dark #level-intermediate::after,
body.dark #level-advanced::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.4px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at 50% 24%, #000 42%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 24%, #000 42%, transparent 88%);
}
/* El contenido de la sección por encima de la atmósfera. */
body.dark #level-basic > *,
body.dark #level-intermediate > *,
body.dark #level-advanced > * { position: relative; z-index: 1; }

/* ── Modo claro: atmósfera clara del mismo tono ─────────────────────────── */
#level-basic,
#level-intermediate,
#level-advanced {
  background:
    radial-gradient(130% 70% at 50% -8%, rgba(var(--atmos), .16), transparent 55%),
    radial-gradient(45% 40% at 82% 22%, rgba(var(--atmos), .1), transparent 60%),
    radial-gradient(45% 45% at 12% 65%, rgba(var(--atmos), .08), transparent 62%),
    var(--level-canvas);
}

/* ── NODOS: plataforma de luz en vez del óvalo oscuro (look premium) ─────── */
.duo-path-container .geo-node::after {
  left: 4% !important;
  right: 4% !important;
  bottom: -10px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse at center,
              rgba(var(--atmos), .6), rgba(var(--atmos), .18) 48%, transparent 70%) !important;
  filter: blur(8px) !important;
  opacity: 1 !important;
  transform: none !important;
}
.duo-path-container .geo-node:hover:not(.status-locked)::after {
  height: 58px !important;
  background: radial-gradient(ellipse at center,
              rgba(var(--atmos), .8), rgba(var(--atmos), .25) 48%, transparent 72%) !important;
}
/* Nodo bloqueado: plataforma apagada. */
.duo-path-container .geo-node.status-locked::after {
  background: radial-gradient(ellipse at center, rgba(120,130,150,.3), transparent 68%) !important;
}

/* Un anillo suave de energía rodeando cada cubo, del color del nivel. */
.duo-path-container .geo-node .geo-shape {
  filter: drop-shadow(0 0 22px rgba(var(--atmos), .55));
}