/* ══════════════════════════════════════════════════════════════════════
   FEATURE: skill-tree.css ⚠️ CRÍTICO
   "El Camino del Zorro" — Duolingo 3D-style skill tree.
   Extraído de learning.css y responsive.css en Round 2.1.

   Depende de CSS vars dinámicas (set por JS en .skill-tree container):
   --tree-color, --tree-color-dark, --tree-color-alpha, --lane-offset,
   --hub-color, --path-line.

   @keyframes definidos aquí: skillNodeIn, startLabelFloat (desktop);
   mobileNodeFloat (mobile only).

   Refactor 2026-05 (Emil edition): se eliminaron los keyframes y efectos
   breatheGlow + activeRingSpin + activeGlow + startLabelBounce porque
   producían demasiado chrome visual. Estado activo se comunica ahora con
   color + un outline estático (quiz) + la pill EMPEZAR con float sutil.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── 1. Desktop styles (from learning.css 1615-2572) ──────────────── */
/* ════════════════════════════════════════════════════
   SKILL TREE — "El Camino del Zorro" (Duolingo 3D Style)
   ════════════════════════════════════════════════════ */

.skill-tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* Padding: solo lateral + un pequeño bottom para respirar.
     min-height removido — el árbol se ajusta al contenido (Duolingo-style),
     evitando la barra blanca que aparecía cuando había pocos módulos. */
  padding: 40px 56px 24px;
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  isolation: isolate;

  /* Dynamic Area Colors */
  --tree-color: var(--hub-color, var(--violet));
  --tree-color-light: color-mix(in srgb, var(--tree-color) 50%, white);
  --tree-color-dark: color-mix(in srgb, var(--tree-color) 80%, black);
  --tree-color-shadow: color-mix(in srgb, var(--tree-color) 50%, black);
  --tree-color-alpha: color-mix(in srgb, var(--tree-color) 30%, transparent);
  --path-line: #E7EDF3;
  --path-line-strong: color-mix(in srgb, var(--tree-color) 24%, #E7EDF3);
  --lane-offset: 108px;
}

/* ── Camino SVG serpenteante (inyectado por drawTreePath en learn.js) ──
   Path continuo por los centros de los nodos: base gris + progreso en el
   color de la materia que se llena con stroke-dashoffset animado. */
.skill-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.skill-path-base {
  fill: none;
  stroke: var(--path-line);
  stroke-width: 12;
  stroke-linecap: round;
}

.skill-path-progress {
  fill: none;
  stroke: var(--tree-color);
  stroke-width: 12;
  stroke-linecap: round;
  /* Curva Emil (strong ease-out): el camino se "recorre", no aparece de golpe */
  transition: stroke-dashoffset 600ms cubic-bezier(0.23, 1, 0.32, 1);
}

.skill-tree::after {
  content: '';
  position: absolute;
  top: 44px;
  left: 50%;
  width: 190px;
  height: 190px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--tree-color-alpha) 0%, transparent 70%);
  filter: blur(12px);
  opacity: 0.7;
  pointer-events: none;
  z-index: -3;
}

/* ── Topic Label (section divider) ── */
.skill-topic-label {
  width: 100%;
  text-align: center;
  margin: 42px 0 28px;
  position: relative;
  z-index: 2;
}

.skill-topic-label span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  padding: 12px 22px;
  border-radius: 18px;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--tree-color-dark);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  border: 2px solid color-mix(in srgb, var(--tree-color) 16%, #E5E7EB);
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.06),
    0 2px 0 color-mix(in srgb, var(--tree-color) 10%, #E5E7EB);
}

/* Subject-specific SVG icon in topic label */
.skill-topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px;
  flex-shrink: 0;
}

.skill-topic-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

/* ── Section Sub-divider (tema within a topic) ── */
.skill-section-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  position: relative;
  z-index: 2;
  padding: 0 24px;
}

.skill-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--tree-color) 20%, #E5E7EB) 30%,
      color-mix(in srgb, var(--tree-color) 20%, #E5E7EB) 70%,
      transparent);
}

.skill-section-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-white, #fff);
  padding: 6px 14px;
  border-radius: 12px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--tree-color-dark, #475569);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--tree-color) 12%, #E5E7EB);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.skill-section-label .material-symbols-outlined {
  font-size: 14px;
  color: var(--tree-color, var(--violet));
  opacity: 0.7;
}

/* ── Labels bloqueados (Duolingo): tema/sección en gris hasta desbloquear ── */
.skill-topic-label span,
.skill-section-label {
  transition: color 250ms ease, border-color 250ms ease;
}

.skill-topic-label.is-locked span {
  color: #AFAFAF;
  border-color: #E5E7EB;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.skill-topic-label.is-locked span .material-symbols-outlined {
  color: #C4C4C4;
}

.skill-section-divider.is-locked .skill-section-label {
  color: #AFAFAF;
  border-color: #ECECEC;
}

.skill-section-divider.is-locked .skill-section-label .material-symbols-outlined {
  color: #C4C4C4;
  opacity: 1;
}

.skill-section-divider.is-locked .skill-section-line {
  opacity: 0.45;
}


/* ── Skill Node (each module) ── */
.skill-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  cursor: pointer;
  z-index: 1;
  pointer-events: none;
}

.skill-node[data-path-lane="center"] {
  left: 0;
}

.skill-node[data-path-lane="right"] {
  left: var(--lane-offset);
}

.skill-node[data-path-lane="left"] {
  left: calc(var(--lane-offset) * -1);
}

/* (Los codos laterales ::before de los lanes se eliminaron: el camino SVG
   serpentea hasta los nodos de quiz directamente.) */

/* Compat: la vista legacy #/hub/:slug (hub.js) aún renderiza conectores por
   segmentos. /learn ya no los genera — usa el camino SVG. */
.skill-connector {
  width: 10px;
  height: 34px;
  border-radius: var(--r-full);
  background: var(--path-line);
  flex-shrink: 0;
  align-self: center;
  position: relative;
  z-index: -1;
}

.skill-connector.is-done {
  background: linear-gradient(180deg, var(--tree-color-light), var(--tree-color));
}

/* Elevate node when popover is open so it renders above siblings */
.skill-node.is-popover-open {
  z-index: 50;
}

/* Entrance animation */
.skill-node.skill-node-enter {
  animation: skillNodeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Árbol pintado desde caché (learn.js): ya visto, sin entrada — mismo
   estado final que skillNodeIn. */
.skill-node.skill-node-static {
  opacity: 1;
  transform: none;
}

@keyframes skillNodeIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Zigzag Pattern (Duolingo S-curve) ── */
/* Pattern: center(0) → right(1) → center(2) → left(3) → repeat */
.skill-node {
  align-self: center;
  width: 100%;
  /* Deja aire bajo los headers sticky (tabs móvil / área desktop) al hacer
     scrollIntoView a un nodo cercano al tope. */
  scroll-margin-top: 76px;
}


.skill-node[data-zigzag="1"] {
  align-items: center;
}

.skill-node[data-zigzag="3"] {
  align-items: center;
}

/* ── The Circle (core 3D visual) ── */
.skill-node-circle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition:
    transform 180ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1),
    filter 180ms ease;
  pointer-events: auto;
}

.skill-node-circle::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), transparent 68%);
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: -1;
}

.skill-node.is-active .skill-node-circle::before,
.skill-node.is-completed .skill-node-circle::before {
  content: '';
  position: absolute;
  top: 14%;
  left: 22%;
  width: 28%;
  height: 16%;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  transform: rotate(-20deg);
  pointer-events: none;
}

.skill-node-circle .material-symbols-outlined {
  font-size: 32px;
  color: var(--text-secondary);
  transition: all 0.2s var(--ease);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ── Completed State (green 3D, single bevel + drop) ── */
.skill-node.is-completed .skill-node-circle {
  background: #16A34A;
  box-shadow:
    inset 0 -4px 0 #15803D,
    0 4px 0 #15803D;
}

.skill-node.is-completed .skill-node-circle .material-symbols-outlined {
  color: #fff;
  font-size: 34px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.skill-node.is-completed .skill-node-circle:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 -4px 0 #15803D,
    0 6px 0 #15803D;
}

.skill-node.is-completed .skill-node-circle:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 -3px 0 #15803D,
    0 2px 0 #15803D;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* ── Active State (subject-color 3D, no glow) ──
   Emil refactor: single inset bevel + single sólido drop. No breathe-glow,
   no outer-aura. Static recipe; only hover/press animates. */
.skill-node.is-active .skill-node-circle {
  background: var(--tree-color);
  box-shadow:
    inset 0 -4px 0 color-mix(in srgb, var(--tree-color) 70%, #000),
    0 4px 0 var(--tree-color-shadow);
}

.skill-node.is-active .skill-node-circle::after {
  /* The white radial halo from base — keep dormant. Active no longer
     forces opacity:1 because we killed the aura. */
  opacity: 0;
}

.skill-node.is-active .skill-node-circle .material-symbols-outlined {
  color: #fff;
  font-size: 36px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.skill-node.is-active .skill-node-circle:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 -4px 0 color-mix(in srgb, var(--tree-color) 70%, #000),
    0 6px 0 var(--tree-color-shadow);
}

.skill-node.is-active .skill-node-circle:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 -3px 0 color-mix(in srgb, var(--tree-color) 70%, #000),
    0 2px 0 var(--tree-color-shadow);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* ── Locked State (muted gray, flat 3D) ── */
.skill-node.is-locked .skill-node-circle {
  background: #EEF2F7;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: 1px solid #E2E8F0;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.04),
    0 3px 0 #D7DEE8;
  opacity: 0.74;
  cursor: not-allowed;
}

.skill-node.is-locked .skill-node-circle:hover,
.skill-node.is-locked .skill-node-circle:active {
  transform: none !important;
}

.skill-node.is-locked .skill-node-circle .material-symbols-outlined {
  font-size: 26px;
  color: #9AA9B7;
}

.skill-node.is-locked .skill-node-info {
  opacity: 0.5;
}

/* ── Premium Locked State (golden, single bevel + drop) ── */
.skill-node.is-premium-locked .skill-node-circle {
  background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);
  box-shadow:
    inset 0 -4px 0 #B45309,
    0 4px 0 #92400E;
}

.skill-node.is-premium-locked .skill-node-circle .material-symbols-outlined {
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* ── Quiz Node — Terminal quiz node with amber/gold styling ── */
.skill-node--quiz {
  margin-top: -2px;
}

.skill-node-circle--quiz {
  width: 68px;
  height: 68px;
  border-radius: 50%;
}

/* Quiz circle — amber, single bevel + drop (no chrome multi-shadow) */
.skill-node--quiz .skill-node-circle--quiz {
  background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%);
  box-shadow:
    inset 0 -3px 0 #B45309,
    0 3px 0 #B45309;
}

.skill-node--quiz .skill-node-circle--quiz .material-symbols-outlined {
  font-size: 28px;
  color: #fff;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

.skill-node--quiz .skill-node-circle--quiz:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 -3px 0 #B45309,
    0 5px 0 #B45309;
}

.skill-node--quiz .skill-node-circle--quiz:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 -2px 0 #B45309,
    0 1px 0 #B45309;
}

/* Quiz Active — static accent ring (no spin, no aura) */
.skill-node--quiz.is-active .skill-node-circle--quiz {
  outline: 3px solid color-mix(in srgb, #F59E0B, transparent 65%);
  outline-offset: 4px;
}

/* Quiz Completed — green takeover (matches lesson completed recipe) */
.skill-node--quiz.is-completed .skill-node-circle--quiz {
  background: #16A34A;
  box-shadow:
    inset 0 -3px 0 #15803D,
    0 3px 0 #15803D;
}

.skill-node--quiz.is-completed .skill-node-circle--quiz .material-symbols-outlined {
  font-size: 30px;
}

/* Quiz Locked — muted (flat) */
.skill-node--quiz.is-locked .skill-node-circle--quiz {
  background: #EEF2F7;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.04),
    0 2px 0 #D7DEE8;
  opacity: 0.74;
  cursor: not-allowed;
}

.skill-node--quiz.is-locked .skill-node-circle--quiz .material-symbols-outlined {
  font-size: 22px;
  color: #9E9790;
}

/* ── Examen Skora — Subject-themed quiz popover ── */
.skill-popover--quiz {
  background: linear-gradient(135deg, var(--hub-color, #6C2BFF) 0%, color-mix(in srgb, var(--hub-color, #6C2BFF), #000 18%) 100%) !important;
  box-shadow:
    0 4px 0 color-mix(in srgb, var(--hub-color, #6C2BFF), #000 35%),
    0 12px 32px color-mix(in srgb, var(--hub-color, #6C2BFF), transparent 70%) !important;
}

.skill-popover--quiz::before {
  background: var(--hub-color, #6C2BFF) !important;
}

.skill-popover--quiz,
.skill-popover--quiz .skill-popover-title,
.skill-popover--quiz .skill-popover-subtitle,
.skill-popover--quiz .skill-popover-status,
.skill-popover--quiz .skill-popover-meta,
.skill-popover--quiz .skill-popover-meta .material-symbols-outlined {
  color: #fff !important;
}

.skill-popover--quiz .skill-popover-status,
.skill-popover--quiz .skill-popover-meta {
  color: rgba(255, 255, 255, 0.84) !important;
}

.skill-popover-subtitle {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0.85;
  margin-top: -2px;
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.skill-popover-btn--quiz {
  background: var(--bg-white);
  color: var(--hub-color, #6C2BFF);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--hub-color, #6C2BFF), #000 35%), 0 4px 12px rgba(0, 0, 0, 0.08);
  font-weight: 700;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.skill-popover-btn--quiz:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--hub-color, #6C2BFF), #000 35%), 0 6px 16px rgba(0, 0, 0, 0.12);
}

.skill-popover-btn--quiz:active {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--hub-color, #6C2BFF), #000 35%), 0 2px 4px rgba(0, 0, 0, 0.06);
}

/* ── Examen Skora Node — Subject-color circle ── */
.skill-node--examen .skill-node-circle--quiz {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--hub-color, #6C2BFF), #fff 20%) 0%,
      var(--hub-color, #6C2BFF) 50%,
      color-mix(in srgb, var(--hub-color, #6C2BFF), #000 15%) 100%) !important;
  box-shadow:
    0 6px 0 color-mix(in srgb, var(--hub-color, #6C2BFF), #000 35%),
    0 8px 18px color-mix(in srgb, var(--hub-color, #6C2BFF), transparent 65%),
    inset 0 -5px 10px rgba(0, 0, 0, 0.1),
    inset 0 5px 10px rgba(255, 255, 255, 0.35) !important;
  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 160ms cubic-bezier(0.23, 1, 0.32, 1);
}

.skill-node--examen .skill-node-circle--quiz:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 10px 0 color-mix(in srgb, var(--hub-color, #6C2BFF), #000 35%),
    0 14px 30px color-mix(in srgb, var(--hub-color, #6C2BFF), transparent 55%),
    inset 0 -5px 10px rgba(0, 0, 0, 0.1),
    inset 0 5px 10px rgba(255, 255, 255, 0.35) !important;
}

.skill-node--examen .skill-node-circle--quiz:active {
  transform: translateY(3px) scale(0.97) !important;
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--hub-color, #6C2BFF), #000 35%),
    0 3px 6px rgba(0, 0, 0, 0.1),
    inset 0 -2px 5px rgba(0, 0, 0, 0.1),
    inset 0 2px 5px rgba(255, 255, 255, 0.25) !important;
}

/* Examen Skora Active — subject-color spinning ring */
.skill-node--examen.is-active .skill-node-circle--quiz::before {
  border-top-color: var(--hub-color, #6C2BFF) !important;
  border-right-color: var(--hub-color, #6C2BFF) !important;
}

.skill-node--examen.is-active .skill-node-circle--quiz::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--hub-color, #6C2BFF), transparent 65%) 0%, transparent 70%) !important;
}

/* Examen Skora Completed — green takeover stays */
.skill-node--examen.is-completed .skill-node-circle--quiz {
  background: linear-gradient(180deg, #4ADE80 0%, var(--green) 50%, #16A34A 100%) !important;
  box-shadow:
    0 8px 18px rgba(34, 197, 94, 0.25),
    inset 0 -5px 10px rgba(0, 0, 0, 0.1),
    inset 0 5px 10px rgba(255, 255, 255, 0.35) !important;
}

/* ── Node Info — HIDDEN by default, shown in popover ── */
.skill-node-info {
  display: none;
}

/* ── Floating "Empezar" bubble (Duolingo-style, white card ABOVE node) ──
   Escala 2026-08: minúscula compacta. La MAYÚSCULA + letter-spacing .9px
   inflaba la caja (RETROALIMENTACIÓN = 182px medidos @320) y los nodos de
   quiz van desplazados ±--lane-offset, así que en teléfono la píldora se
   salía del scroller (.learn-tree-col tiene overflow-x: clip → recorte, no
   desborde). En minúscula el MISMO texto mide 125px @375 (una sola línea,
   27px de aire al borde) y se lee mejor. Jerarquía nueva:
   MAYÚSCULA = estructura (topic/section/botones), minúscula = callout. */
.skill-start-label {
  position: relative;
  margin-bottom: 10px;
  padding: 8px 14px;
  background: var(--bg-white);
  border: 1.5px solid color-mix(in srgb, var(--tree-color) 18%, #E5E7EB);
  border-radius: 14px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--tree-color);
  letter-spacing: 0.1px;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 2px 0 color-mix(in srgb, var(--tree-color) 18%, #E5E7EB);
  animation: startLabelFloat 2.4s ease-in-out infinite;
  cursor: pointer;
  user-select: none;
  z-index: 3;
}

/* Speech bubble pointer (triangle pointing DOWN toward the node) */
.skill-start-label::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--bg-white);
  border-right: 1.5px solid color-mix(in srgb, var(--tree-color) 18%, #E5E7EB);
  border-bottom: 1.5px solid color-mix(in srgb, var(--tree-color) 18%, #E5E7EB);
  box-shadow: 2px 2px 2px rgba(15, 23, 42, 0.03);
}

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

/* Garantía de que la píldora nunca se recorta: sólo los nodos de quiz llevan
   carril (learn.js asigna data-path-lane right/left alternando; lecciones y
   Examen Skora van siempre en center). Al estar el nodo desplazado ±offset,
   el aire real de ese lado es (ancho/2 - offset) → este max-width es esa
   cuenta exacta, no un ajuste a ojo. hyphens como último recurso si el copy
   crece algún día (<html lang="es">). */
.skill-node[data-path-lane="left"]  > .skill-start-label,
.skill-node[data-path-lane="right"] > .skill-start-label {
  max-width: calc(100% - var(--lane-offset) * 2 - 8px);
  hyphens: auto;
  text-wrap: balance;
}

/* Adaptive gate variants of the start-label */
.skill-start-label--required {
  background: #FEF3C7;             /* amber-100 */
  color: #B45309;                   /* amber-700 */
  border-color: #F59E0B;            /* amber-500 */
  box-shadow:
    0 4px 12px rgba(245, 158, 11, 0.18),
    0 2px 0 #D97706;                /* amber drop */
}
.skill-start-label--required::before {
  background: #FEF3C7;
  border-right-color: #F59E0B;
  border-bottom-color: #F59E0B;
}
.skill-start-label--optional {
  background: var(--bg-white);
  color: var(--text-secondary);
  border-color: #E5E7EB;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04), 0 1px 0 #E5E7EB;
  animation: none;                  /* opcional no demanda atención */
}
.skill-start-label--optional::before {
  background: var(--bg-white);
  border-right-color: #E5E7EB;
  border-bottom-color: #E5E7EB;
}

/* "¿Saltar aquí?" — píldora de salto sobre el primer nodo bloqueado de una
   sección. Reusa el globo de start-label en color de materia. Es un <a href>
   real, y el padre .skill-node es pointer-events:none → re-activar aquí. */
.skill-start-label--skip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  pointer-events: auto;
  background: var(--tree-color);
  color: #fff;
  border-color: color-mix(in srgb, var(--tree-color) 80%, #000);
  box-shadow:
    0 4px 12px color-mix(in srgb, var(--tree-color) 30%, transparent),
    0 2px 0 color-mix(in srgb, var(--tree-color) 80%, #000);
}
.skill-start-label--skip .material-symbols-outlined {
  font-size: 15px;
  font-variation-settings: 'FILL' 1;
}
.skill-start-label--skip::before {
  background: var(--tree-color);
  border-right-color: color-mix(in srgb, var(--tree-color) 80%, #000);
  border-bottom-color: color-mix(in srgb, var(--tree-color) 80%, #000);
}
.skill-start-label--skip:active {
  transform: translateY(1px) scale(0.98);
}
@media (hover: hover) and (pointer: fine) {
  .skill-start-label--skip:hover {
    transform: translateY(-2px);
    box-shadow:
      0 8px 20px color-mix(in srgb, var(--tree-color) 38%, transparent),
      0 2px 0 color-mix(in srgb, var(--tree-color) 80%, #000);
  }
}

/* Required CTA inside popover */
.skill-popover-btn--required {
  background: #F59E0B !important;
  color: #fff !important;
  border-color: #D97706 !important;
}


/* ── Press feedback (Emil): el círculo responde al tap ── */
.skill-node-circle:active {
  transform: translateY(1px) scale(0.96);
}

/* Respect reduced motion — kill the float, keep the label visible */
@media (prefers-reduced-motion: reduce) {
  .skill-start-label { animation: none !important; }
  .skill-node-circle {
    transition: opacity 120ms ease !important;
    transform: none !important;
  }
  /* El camino aparece lleno de una, sin recorrido */
  .skill-path-progress { transition: none !important; }
  .skill-node.skill-node-enter { animation-duration: 0.01ms !important; }
  /* Popover: solo fade, sin escala/desplazamiento */
  .skill-popover { transition: opacity 120ms ease !important; }
  .skill-node.is-popover-open .skill-popover { transform: translate(var(--skill-popover-translate-x, -50%), 0) scale(1) !important; }
}

/* ── Skill Popover Card (Subject-colored, Duolingo-style) ── */
.skill-popover {
  position: absolute;
  top: var(--skill-popover-top, calc(100% + 14px));
  left: var(--skill-popover-left, 50%);
  right: auto;
  transform: translate(var(--skill-popover-translate-x, -50%), 6px) scale(0.96);
  /* Ancho flexible: se adapta a títulos cortos y largos sin recorte ni desborde. */
  width: max-content;
  min-width: 230px;
  max-width: min(300px, calc(100vw - 24px));
  z-index: 100;
  padding: 18px;
  border-radius: 16px;
  background: var(--tree-color);
  border: none;
  color: #fff;
  box-shadow:
    0 10px 30px -8px color-mix(in srgb, var(--tree-color) 45%, transparent),
    0 8px 24px rgba(0, 0, 0, 0.14);
  opacity: 0;
  pointer-events: none;
  /* Escala origin-aware desde el trigger (nunca desde scale(0)). Curva Emil. */
  transform-origin: var(--skill-popover-arrow-x, 50%) top;
  transition:
    opacity 180ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Arrow — matches subject color */
.skill-popover::before {
  content: '';
  position: absolute;
  top: -7px;
  left: var(--skill-popover-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--tree-color);
  z-index: -1;
}

/* Open state */
.skill-node.is-popover-open .skill-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--skill-popover-translate-x, -50%), 0) scale(1);
}

/* transform-origin hacia el trigger según la colocación calculada por JS */
.skill-popover[data-placement="top"]    { transform-origin: var(--skill-popover-arrow-x, 50%) bottom; }
.skill-popover[data-placement="right"]  { transform-origin: left var(--skill-popover-arrow-y, 50%); }
.skill-popover[data-placement="left"]   { transform-origin: right var(--skill-popover-arrow-y, 50%); }

/* Popover inner elements — all white text */
.skill-popover-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 5px 0;
  line-height: 1.3;
  /* Preparado para cualquier texto: envuelve títulos largos sin desbordar. */
  overflow-wrap: anywhere;
  word-break: normal;
}

.skill-popover-status {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 9px;
  border-radius: 999px;
  margin-bottom: 12px;
}

/* Override specific status colors — they're all on colored bg now */
.skill-node.is-completed .skill-popover-status,
.skill-node.is-active .skill-popover-status {
  color: rgba(255, 255, 255, 0.85);
}

.skill-popover-meta {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.skill-popover-meta .material-symbols-outlined {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

/* CTA Button — white with subject-colored text */
.skill-popover-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 0;
  border-radius: 14px;
  border: none;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--tree-color);
  background: var(--bg-white);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease;
}

.skill-popover-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.12);
}

.skill-popover-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.06);
}

.skill-popover-btn--locked {
  background: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.7);
  box-shadow: none;
  cursor: not-allowed;
}

.skill-popover-btn--premium {
  background: var(--bg-white);
  color: #D97706;
  box-shadow: 0 3px 0 #B45309, 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ── Locked Popover (Duolingo "CERRADA" style) ── */
.skill-popover--locked {
  background: linear-gradient(135deg, #8B8680 0%, #6E6962 100%) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.12) !important;
}

.skill-popover--locked::before {
  background: #8B8680 !important;
}

.skill-popover--locked .skill-popover-title {
  color: rgba(255, 255, 255, 0.75);
}

.skill-popover--locked .skill-popover-status {
  color: rgba(255, 255, 255, 0.55);
}

.skill-popover--locked .skill-popover-meta {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
  font-size: 0.75rem;
}

.skill-popover--locked .skill-popover-btn--locked {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Edge clamping — keep popover inside viewport */
.skill-node[data-zigzag="1"] .skill-popover:not([data-placement]) {
  left: auto;
  right: 0;
  transform: translateY(8px);
}

.skill-node[data-zigzag="1"].is-popover-open .skill-popover:not([data-placement]) {
  transform: translateY(0);
}

.skill-node[data-zigzag="1"] .skill-popover:not([data-placement])::before {
  left: auto;
  right: 30px;
  transform: rotate(45deg);
}

.skill-node[data-zigzag="3"] .skill-popover:not([data-placement]) {
  left: 0;
  transform: translateY(8px);
}

.skill-node[data-zigzag="3"].is-popover-open .skill-popover:not([data-placement]) {
  transform: translateY(0);
}

.skill-node[data-zigzag="3"] .skill-popover:not([data-placement])::before {
  left: 30px;
  transform: rotate(45deg);
}

.skill-node .skill-popover[data-placement]::before {
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}

.skill-node .skill-popover[data-placement="bottom"]::before {
  top: -7px;
  left: var(--skill-popover-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
}

.skill-node .skill-popover[data-placement="top"]::before {
  bottom: -7px;
  left: var(--skill-popover-arrow-x, 50%);
  transform: translateX(-50%) rotate(45deg);
}

.skill-node .skill-popover[data-placement="right"]::before {
  left: -7px;
  top: var(--skill-popover-arrow-y, 50%);
  transform: translateY(-50%) rotate(45deg);
}

.skill-node .skill-popover[data-placement="left"]::before {
  right: -7px;
  top: var(--skill-popover-arrow-y, 50%);
  transform: translateY(-50%) rotate(45deg);
}

/* ── Skip Button (on locked nodes) ── */
.skill-skip-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--bg-white);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.25s var(--ease);
  z-index: 3;
}

.skill-skip-btn .material-symbols-outlined {
  font-size: 16px;
}

.skill-node.is-locked:hover .skill-skip-btn {
  opacity: 1;
}

.skill-skip-btn:hover {
  background: var(--tree-color);
  border-color: var(--tree-color-dark);
  color: #fff;
  transform: scale(1.15);
  box-shadow: 0 4px 12px var(--tree-color-alpha);
}

/* ─── 2. Mobile @media (max-width: 900px) (from learning.css 2763-2799) ─ */
@media (max-width: 900px) {

  /* Skill Tree responsive (tablet) */
  .skill-tree {
    max-width: 100%;
    padding: 32px 24px 64px;
    --lane-offset: 92px;
  }

  .skill-node-circle {
    width: 80px;
    height: 80px;
  }

  .skill-node-circle .material-symbols-outlined {
    font-size: 30px;
  }

  .skill-node.is-active .skill-node-circle .material-symbols-outlined {
    font-size: 34px;
  }

  .skill-fox-container {
    display: none;
  }

  .skill-path-base,
  .skill-path-progress {
    stroke-width: 13;
  }

  .skill-topic-label span {
    padding: 9px 20px;
    font-size: 0.74rem;
  }
}

/* ─── 3. Mobile @media (max-width: 768px) (from responsive.css 946-1025) ─ */
@media (max-width: 768px) {

  /* ── Skill Tree — Premium Duolingo Mobile Style ── */
  .skill-tree-container {
    padding: 24px 0 calc(var(--m-bottomnav-h, 64px) + env(safe-area-inset-bottom, 0px) + 32px) 0 !important;
    overflow-x: hidden;
  }

  /* Mobile path lanes: keep lessons centered, branches compact */
  .skill-node {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .skill-node[data-zigzag="1"] {
    justify-content: center !important;
    padding-left: 0 !important;
  }

  .skill-node[data-zigzag="3"] {
    justify-content: center !important;
    padding-right: 0 !important;
  }

  /* Bug 4 fix: reduce lateral padding so labels reach closer to screen edges.
     El carril es fluido: 84px fijos dejaban sólo 64px de aire por lado en un
     320px (iPhone SE). drawTreePath mide con offsetLeft real, así que el
     camino SVG se recalcula solo — no hay constante que sincronizar. */
  .skill-tree {
    --lane-offset: clamp(64px, 22vw, 84px);
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .skill-node[data-path-lane="right"]::before,
  .skill-node[data-path-lane="left"]::before {
    width: 34px !important;
  }

  /* Bug 4 fix: section dividers edge-to-edge on mobile */
  .skill-section-divider {
    padding: 0 8px !important;
  }

  /* Bug 4 fix: allow section label text to wrap on narrow screens */
  .skill-section-label {
    white-space: normal !important;
    text-align: center;
  }

  /* Bug 4 fix: topic labels fluid on mobile */
  .skill-topic-label span {
    padding: 10px 16px !important;
    font-size: 0.68rem;
    max-width: calc(100vw - 48px);
    text-align: center;
  }

  /* Nodos más grandes en teléfono (Duolingo-style: presencia + touch cómodo) */
  .skill-node-circle {
    width: 84px !important;
    height: 84px !important;
  }

  .skill-node-circle .material-symbols-outlined {
    font-size: 34px !important;
  }

  .skill-node.is-active .skill-node-circle .material-symbols-outlined {
    font-size: 38px !important;
  }

  /* Un poco más de aire vertical entre nodos (el camino SVG se remide solo) */
  .skill-node {
    margin: 6px 0;
  }

  .skill-node.is-active .skill-node-circle::after {
    inset: -12px !important;
  }

  /* Active Node Gentle Float */
  .skill-node.is-active .skill-node-circle {
    animation: mobileNodeFloat 3s ease-in-out infinite !important;
  }

  @keyframes mobileNodeFloat {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-4px);
    }
  }


  .skill-node-info {
    text-align: center;
    max-width: 140px;
  }

  .skill-node-title {
    font-size: 0.85rem !important;
  }

  /* ── Popover en teléfono: hoja centrada, no popover anclado ──
     Ancho atado a la COLUMNA del árbol (100vw - 32px por el padding del
     main-content), no al viewport: con 100vw-24 el card se salía 4px por la
     derecha y el overflow-x: clip de .learn-tree-col lo mordía. Con -56px
     quedan 12px de aire a cada lado en cualquier ancho. positionSkillPopover
     lo centra en esa columna; la flecha sigue apuntando al nodo. */
  .skill-popover {
    width: calc(100vw - 56px) !important;
    max-width: 340px;
    border-radius: 18px;
  }

  /* Emil: un card que ocupa casi toda la pantalla ya no es un popover anclado,
     es un modal — y los modales escalan desde su centro. El origen puesto sobre
     la flecha (a 254px de 340) hacía que el card "entrara de lado". */
  .skill-popover:not([data-placement]),
  .skill-popover[data-placement="bottom"] {
    transform-origin: top center !important;
  }

  .skill-popover[data-placement="top"] {
    transform-origin: bottom center !important;
  }

  /* Movimiento: baja desde el nodo y asienta. Sin desplazamiento horizontal
     —era lo que se leía como "aparece por los lados"— y con escala 0.98, no
     0.96: cuanto más grande el card, menos escala necesita para sentirse vivo.
     Salida a 130ms contra 220ms de entrada: el cierre debe sentirse inmediato. */
  .skill-popover {
    transform: translate(0, 10px) scale(0.98);
    transition:
      opacity 130ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 130ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .skill-node.is-popover-open .skill-popover {
    transform: translate(0, 0) scale(1);
    transition:
      opacity 220ms cubic-bezier(0.23, 1, 0.32, 1),
      transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* ─── 4. Accessibility — tap highlight + focus (from learning.css 6241-6251) ─ */
/* Fix: eliminar tap highlight rectangular en móvil */
.skill-node,
.skill-node-circle,
.skill-node a {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* Ensure immediate touch response on mobile (eliminate 300ms delay) */
.skill-node-circle {
  touch-action: manipulation;
  cursor: pointer;
}

/* En dispositivos táctiles el :hover puede quedar "pegado" tras un tap y
   dejar el nodo levantado. Neutraliza el lift de hover donde no hay puntero
   fino; el press-feedback (:active, translateY 2px) sigue funcionando. */
@media (hover: none) {
  .skill-node.is-completed .skill-node-circle:hover,
  .skill-node.is-active .skill-node-circle:hover {
    transform: none;
  }
}

.skill-node-circle:focus,
.skill-node-circle:focus-visible {
  outline: none;
}

/* ─── 5. Dark mode — Skill Tree ─────────────────────────────────────── */

/* ── Start Label (Continuar tooltip) ── */
[data-theme="dark"] .skill-start-label,
[data-theme="dark"] .skill-start-label::before {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

[data-theme="dark"] .skill-start-label {
  border: 1px solid var(--border);
}

[data-theme="dark"] .skill-start-label::before {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* La píldora de salto conserva el color de materia también en dark (va después
   del bloque genérico para ganar por orden a igual especificidad). */
[data-theme="dark"] .skill-start-label--skip,
[data-theme="dark"] .skill-start-label--skip::before {
  background: var(--tree-color);
  color: #fff;
  border-color: color-mix(in srgb, var(--tree-color) 70%, #000);
}

/* ── Vertical path line (the central spine) ── */
[data-theme="dark"] .skill-tree {
  --path-line: #2D3748;
  --path-line-strong: color-mix(in srgb, var(--tree-color) 24%, #2D3748);
}


/* ── Glow at top of tree — dim in dark mode ── */
[data-theme="dark"] .skill-tree::after {
  opacity: 0.4;
}

/* ── Topic Label ("MÓDULO ÁLGEBRA Y CÁLCULO") ── */
[data-theme="dark"] .skill-topic-label span {
  background: var(--bg-secondary, #1E293B);
  color: color-mix(in srgb, var(--tree-color) 85%, #fff);
  border-color: color-mix(in srgb, var(--tree-color) 20%, var(--border, #334155));
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.2),
    0 2px 0 color-mix(in srgb, var(--tree-color) 12%, var(--border, #334155));
}

/* ── Section Label ("NÚMEROS RACIONALES") ── */
[data-theme="dark"] .skill-section-label {
  background: var(--bg-secondary, #1E293B);
  color: color-mix(in srgb, var(--tree-color) 80%, #E2E8F0);
  border-color: color-mix(in srgb, var(--tree-color) 16%, var(--border, #334155));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ── Section Divider Lines ── */
[data-theme="dark"] .skill-section-line {
  background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--tree-color) 18%, #334155) 30%,
      color-mix(in srgb, var(--tree-color) 18%, #334155) 70%,
      transparent);
}

/* ── Labels bloqueados + skip de sección (dark) ── */
[data-theme="dark"] .skill-topic-label.is-locked span,
[data-theme="dark"] .skill-section-divider.is-locked .skill-section-label {
  color: #64748B;
  border-color: var(--border, #334155);
}

[data-theme="dark"] .skill-topic-label.is-locked span .material-symbols-outlined,
[data-theme="dark"] .skill-section-divider.is-locked .skill-section-label .material-symbols-outlined {
  color: #4B5563;
}

/* ── Locked State — dark neutral ── */
[data-theme="dark"] .skill-node.is-locked .skill-node-circle {
  background: linear-gradient(180deg, #2D3748 0%, #1E293B 100%);
  border-color: #374151;
  box-shadow:
    inset 0 5px 8px rgba(255, 255, 255, 0.04),
    0 5px 0 #1A202C,
    0 12px 28px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .skill-node.is-locked .skill-node-circle .material-symbols-outlined {
  color: #64748B;
}

/* ── Quiz Locked — dark neutral ── */
[data-theme="dark"] .skill-node--quiz.is-locked .skill-node-circle--quiz {
  background: #2D3748;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.04), 0 4px 8px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .skill-node--quiz.is-locked .skill-node-circle--quiz .material-symbols-outlined {
  color: #64748B;
}

/* ── Popover — slightly darker bg for locked variant ── */
[data-theme="dark"] .skill-popover--locked {
  background: linear-gradient(135deg, #374151 0%, #1F2937 100%) !important;
}

[data-theme="dark"] .skill-popover--locked::before {
  background: #374151 !important;
}


/* ─── Mobile touch state (from compound selector in responsive.css Round 10.5) ── */
@media (max-width: 768px) {
  .skill-node-circle:hover {
    transform: none !important;
    box-shadow: inherit;
  }
}


/* "Para ti" — lección recomendada por "Para ti ahora" (sql/148). Violeta de
   marca, no el color de la materia: es Skora quien la sugiere. Contraste:
   #5B21B6 sobre #F1EBFF = 7.7:1; en oscuro #C4B5FD sobre #2A2340 = 8.1:1. */
.skill-start-label--foryou {
  background: #F1EBFF;
  color: #5B21B6;
  border-color: #C4B5FD;
  box-shadow:
    0 4px 12px rgba(108, 43, 255, 0.14),
    0 2px 0 #C4B5FD;
}
.skill-start-label--foryou::before {
  background: #F1EBFF;
  border-right-color: #C4B5FD;
  border-bottom-color: #C4B5FD;
}
[data-theme="dark"] .skill-start-label--foryou,
[data-theme="dark"] .skill-start-label--foryou::before {
  background: #2A2340;
  border-color: #5B4B8A;
}
[data-theme="dark"] .skill-start-label--foryou {
  color: #C4B5FD;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 0 #5B4B8A;
}