/* ============================================================================
   VISION ENGLISH — CORRECCIÓN FINAL DE LA RUTA (solo Basic) — Claude, 06/09
   ----------------------------------------------------------------------------
   Se carga AL FINAL de todo (después de geo-levels.css), a propósito. Ese
   archivo trae reglas con !important en @media (max-width:390px) que
   devolvían la ruta al grid de escritorio (3 columnas) en el teléfono, y
   reactivaba un SVG conector viejo que ya no coincide con los nodos. Como
   carga después que el mío, siempre ganaba. Esta hoja, al cargar última,
   gana ella.

   Solo toca #level-basic — Intermediate y Advanced quedan como están, Iker
   dijo que esos ya están bien.
   ========================================================================= */

/* ── El conector SVG se reactivó (07/09): Iker comparó Basic con los otros
      2 niveles y prefiere que los 4 tengan la línea punteada que conecta las
      lecciones, para que los 3 niveles se vean iguales. Antes se había
      apagado porque no coincidía con los nodos — hay que confirmar que sí
      coincide ahora que los nodos de Basic tienen su propio posicionamiento
      (ver bloque de curva móvil abajo). Si no calza, revisar aquí primero. */

/* ── MÓVIL: ruta centrada de verdad, con curva (no columna perfectamente
      recta). Gana sobre el @media(max-width:390px) de geo-levels.css. ────── */
@media (max-width: 900px) {
  #level-basic .duo-path-container .path-row:has(.geo-node) {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node) .path-marker-col {
    grid-column: 1 !important;
    justify-self: center !important;
  }

  /* Curva suave: el nodo se desplaza a los lados en un patrón de 4 pasos
     (centro → derecha → centro → izquierda), como una serpiente, en vez de
     un zigzag brusco de solo dos posiciones. */
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+1) .path-marker-col {
    transform: translateX(0) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col {
    transform: translateX(34px) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+3) .path-marker-col {
    transform: translateX(0) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col {
    transform: translateX(-34px) !important;
  }
}

@media (max-width: 480px) {
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n+2) .path-marker-col {
    transform: translateX(26px) !important;
  }
  #level-basic .duo-path-container .path-row:has(.geo-node):nth-of-type(4n) .path-marker-col {
    transform: translateX(-26px) !important;
  }
}

/* ── El hueco vacío antes de la Lección 1: el encabezado "Explora y
      comprende" ya no necesita tanto aire encima. ─────────────────────────── */
#level-basic .duo-path-container .path-unit-break {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  min-height: auto !important;
}

/* ── Más espacio entre lecciones, para que no se sientan amontonadas. ────── */
#level-basic .duo-path-container .path-row:has(.geo-node) {
  min-height: 172px !important;
}
@media (max-width: 768px) {
  #level-basic .duo-path-container .path-row:has(.geo-node) {
    min-height: 130px !important;
  }
}

/* ============================================================================
   FIX: burbuja de Ollie encimada en los 3 niveles (07/09)
   ----------------------------------------------------------------------------
   El texto largo ("Ruta A1-A2: fundamentos...") se inyecta con content: en el
   MISMO ::after que ya se usaba como triángulo/flecha de la burbuja
   (position:absolute; top:-7px; con bordes que dibujan un triángulo). Al
   heredar esa geometría, el texto queda flotando encima de "Ollie Coach" en
   vez de fluir debajo. Se le da su propia geometría solo cuando muestra
   texto (los 3 niveles), sin tocar el triángulo del resto de la app.
   ========================================================================= */
body:has(#level-basic.view.active) #coachBubble,
body:has(#level-intermediate.view.active) #coachBubble,
body:has(#level-advanced.view.active) #coachBubble {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding-top: 12px !important;   /* espacio para el triángulo que ya no está */
}
body:has(#level-basic.view.active) #coachBubble::after,
body:has(#level-intermediate.view.active) #coachBubble::after,
body:has(#level-advanced.view.active) #coachBubble::after {
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  border: 0 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  color: var(--text, #1e1b2e);
  opacity: .85;
}
body.dark:has(#level-basic.view.active) #coachBubble::after,
body.dark:has(#level-intermediate.view.active) #coachBubble::after,
body.dark:has(#level-advanced.view.active) #coachBubble::after {
  color: #e9e4ff;
}
#mascotName { display: block; }