/* ================= capa de aprendizaje ================= */

/* --- visibilidad según el modo --- */
body[data-modo="mapa"] #layout,
body[data-modo="mapa"] #mobileTabs,
body[data-modo="mapa"] #topbar { display:none }
body[data-modo="mapa"] #home { display:flex }

body:not([data-modo="taller"]) .solo-taller { display:none !important }
body:not([data-modo="leccion"]) .solo-leccion { display:none !important }
body[data-modo="leccion"] #btnMenu { display:none }

/* =========================================================
   MAPA / HOME
   ========================================================= */
#home{
  position:fixed; inset:0; z-index:80; background:
    radial-gradient(1200px 500px at 15% -10%, #1b2740 0%, transparent 60%),
    radial-gradient(900px 400px at 110% 10%, #241d3d 0%, transparent 55%), var(--bg);
  display:flex; flex-direction:column; overflow:hidden;
}
#homeHdr{
  display:flex; align-items:center; gap:14px; padding:12px 18px;
  border-bottom:1px solid var(--line); background:#0e1117cc; backdrop-filter:blur(8px); flex:none
}
.perfil-chip{
  display:flex; align-items:center; gap:9px; background:var(--bg3); border:1px solid var(--line2);
  border-radius:30px; padding:5px 14px 5px 6px; cursor:pointer; color:var(--txt)
}
.perfil-chip:hover{ border-color:var(--accent) }
.perfil-chip > span:first-child{
  width:34px;height:34px;border-radius:50%;background:#223047;display:grid;place-items:center;font-size:19px;flex:none
}
.pc-txt{ display:flex; flex-direction:column; line-height:1.15; text-align:left }
.pc-txt b{ font-size:13.5px } .pc-txt small{ font-size:11px; color:var(--txt2) }
.xp-wrap{ flex:1; display:flex; align-items:center; gap:10px; max-width:420px }
.xp-bar{ flex:1; height:11px; background:#1b2432; border-radius:8px; overflow:hidden; border:1px solid var(--line2) }
.xp-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#f5a623,#ffd166); border-radius:8px; transition:width .5s }
#hdrXp{ font-size:12px; color:var(--warn); font-weight:600; font-variant-numeric:tabular-nums }
.racha{ font-size:14px; font-weight:700; background:#2a1d10; border:1px solid #f5a62355; color:#ffc46b; padding:5px 12px; border-radius:20px }

.home-inner{ flex:1; overflow-y:auto; padding:22px 18px 80px; max-width:760px; margin:0 auto; width:100% }

/* --- unidades --- */
.unidad{ margin-bottom:34px }
.uni-head{
  display:flex; align-items:center; gap:14px; background:linear-gradient(100deg, color-mix(in srgb, var(--uc) 22%, var(--bg2)), var(--bg2));
  border:1px solid color-mix(in srgb, var(--uc) 40%, transparent); border-radius:16px; padding:14px 16px
}
.uni-emoji{ font-size:30px; width:52px; height:52px; display:grid; place-items:center; background:#0006; border-radius:14px; flex:none }
.uni-txt{ flex:1; min-width:0 }
.uni-txt h3{ margin:0 0 3px; font-size:16px }
.uni-txt p{ margin:0 0 7px; font-size:12px; color:var(--txt2) }
.uni-barra{ height:6px; background:#0007; border-radius:6px; overflow:hidden }
.uni-barra i{ display:block; height:100%; background:var(--uc); border-radius:6px; transition:width .5s }
.uni-num{ font-size:13px; font-weight:700; color:var(--uc); flex:none }

/* --- camino de nodos --- */
.camino{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0 0; position:relative }
.nodo{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; color:var(--txt); padding:6px 0;
  transform:translateX(calc(var(--off) * 74px)); transition:transform .15s
}
.nodo:hover{ transform:translateX(calc(var(--off) * 74px)) scale(1.06) }
.nodo-ic{
  width:66px; height:66px; border-radius:50%; display:grid; place-items:center; font-size:22px; font-weight:800;
  border:3px solid #0006; box-shadow:0 6px 0 #0006, inset 0 -3px 0 #0003;
}
.nodo.cerrada .nodo-ic{ background:#1c2430; color:#5d6779; box-shadow:0 5px 0 #0004 }
.nodo.cerrada{ cursor:not-allowed; opacity:.72 }
.nodo.abierta .nodo-ic{ background:linear-gradient(180deg,var(--uc),color-mix(in srgb,var(--uc) 70%, #000)); color:#0b0e14 }
.nodo.hecha  .nodo-ic{ background:linear-gradient(180deg,#f5c451,#e0a127); color:#40320a }
.nodo.reto .nodo-ic{ border-radius:20px }
.nodo.abierta:not(.hecha) .nodo-ic{ animation:latido 2.2s ease-in-out infinite }
@keyframes latido{ 0%,100%{ box-shadow:0 6px 0 #0006, 0 0 0 0 color-mix(in srgb,var(--uc) 60%, transparent) }
                   50%{ box-shadow:0 6px 0 #0006, 0 0 0 12px transparent } }
.nodo-nom{ font-size:11.5px; color:var(--txt2); max-width:150px; text-align:center; line-height:1.25 }
.nodo-est{ font-size:11px; color:#f5c451; letter-spacing:1px }
.camino::before{
  content:''; position:absolute; top:20px; bottom:20px; left:50%; width:4px; margin-left:-2px;
  background:repeating-linear-gradient(#2a3343 0 10px, transparent 10px 20px); border-radius:3px; z-index:-1
}
.mapa-pie{ text-align:center; padding:10px 0 30px }

/* --- bienvenida --- */
.bienvenida{ max-width:420px; margin:6vh auto; text-align:center }
.bv-logo{ font-size:56px; filter:drop-shadow(0 0 22px #3ea6ff66) }
.bienvenida h2{ margin:10px 0 6px; font-size:24px }
.bienvenida p{ color:var(--txt2); font-size:13.5px; line-height:1.6 }
.bv-lbl{ display:block; text-align:left; font-size:12px; color:var(--txt2); margin:18px 0 6px }
.bv-input{ width:100%; padding:12px 14px; background:var(--bg3); border:1px solid var(--line2); border-radius:12px; font-size:15px }
.bv-input:focus{ outline:none; border-color:var(--accent) }
.bv-avatares{ display:flex; flex-wrap:wrap; gap:7px }
.bv-av{ width:44px; height:44px; font-size:22px; background:var(--bg3); border:2px solid var(--line2); border-radius:12px; cursor:pointer }
.bv-av.sel{ border-color:var(--accent); background:#1d3350 }
.bv-av.mini{ width:32px; height:32px; font-size:16px; border-radius:8px }
.bv-go{ width:100%; margin-top:22px; justify-content:center; font-size:16px; padding:13px }
.btn.big{ padding:12px 22px; font-size:15px; justify-content:center }

/* --- ficha de lección --- */
.ficha{ text-align:center }
.ficha-badge{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:12px; margin-bottom:10px }
.ficha-meta{ color:var(--txt2); font-size:13px }
.ficha-hecha{ color:#f5c451; font-size:12.5px }
.perfil-box{ display:flex; align-items:center; gap:14px }
.perfil-av{ width:56px;height:56px;border-radius:50%;background:#223047;display:grid;place-items:center;font-size:28px }

/* =========================================================
   PANEL DE MISIÓN
   ========================================================= */
#leftCol{ width:262px; border-right:1px solid var(--line); flex:none }
#palette{ display:flex; flex-direction:column; min-height:0; flex:1 }
body[data-modo="leccion"] #palette{ flex:0 0 auto; max-height:42% }
body[data-modo="leccion"] #paletteSearch{ display:none }

#missionPanel{ display:flex; flex-direction:column; border-bottom:1px solid var(--line); flex:1; min-height:0 }
.mp-head{ display:flex; gap:9px; align-items:center; padding:9px 10px; border-bottom:1px solid var(--line) }
.mp-tit{ flex:1; min-width:0 }
.mp-tit b{ font-size:13px; display:block; line-height:1.25 }
.mp-pasos{ display:flex; gap:4px; margin-top:5px }
.mp-pasos i{ height:4px; flex:1; background:#2a3343; border-radius:3px }
.mp-pasos i.ok{ background:var(--ok) } .mp-pasos i.now{ background:var(--accent) }
.mp-body{ flex:1; overflow-y:auto; padding:12px 12px 6px }
.mp-body h4{ margin:0 0 8px; font-size:14px; color:var(--accent) }
.mp-txt{ font-size:12.5px; line-height:1.6; color:#c9d3e2 }
.mp-txt b{ color:#fff }

.objetivos{ list-style:none; margin:14px 0 0; padding:0 }
.objetivos li{ display:flex; gap:8px; padding:7px 0; border-top:1px solid var(--line); font-size:12px; line-height:1.4; color:var(--txt2) }
.objetivos li .oc{ flex:none; width:16px; text-align:center; color:#55617a; font-weight:700 }
.objetivos li.ok{ color:#9fe0b4 } .objetivos li.ok .oc{ color:var(--ok) }
.objetivos li.no{ color:#e8c9c9 } .objetivos li.no .oc{ color:var(--err) }
.objetivos li em{ display:block; font-style:normal; font-size:11px; color:var(--warn); margin-top:3px }

.mision-res{ margin:12px 0 4px; border-radius:10px; padding:9px 11px; font-size:12px; line-height:1.5 }
.mision-res.bien{ background:#0f2a1a; border:1px solid #2ea04366; color:#8ee8a8 }
.mision-res.casi{ background:#2a2410; border:1px solid #f5a62355; color:#ffd79a }
.mision-res.mal{ background:#2a1414; border:1px solid #e5484d55; color:#ffb3b3 }
.mr-sub{ color:inherit; opacity:.8; font-size:11px }

.mp-acciones{ padding:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:7px; flex:none }
.mp-acciones .btn.primary{ justify-content:center; font-size:14px; padding:10px }
.mp-sec{ display:flex; gap:6px }
.mp-sec .btn{ flex:1; justify-content:center }

/* =========================================================
   TARJETAS DE PASO (teoría / quiz) y VICTORIA
   ========================================================= */
.step-card, .win-card{
  position:absolute; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:#0b0e14ee; backdrop-filter:blur(6px); padding:20px; overflow-y:auto
}
.sc-inner, .win-inner{
  background:var(--bg2); border:1px solid var(--line2); border-radius:20px; padding:26px;
  max-width:520px; width:100%; text-align:center; box-shadow:0 24px 60px #000a; animation:subir .28s ease
}
@keyframes subir{ from{ transform:translateY(18px) } to{ transform:none } }
.sc-emoji{ font-size:44px; line-height:1 }
.sc-inner h2{ margin:12px 0 14px; font-size:20px; line-height:1.3 }
.sc-body{ text-align:left; font-size:14px; line-height:1.7; color:#c9d3e2 }
.sc-body p{ margin:0 0 12px }
.sc-body code{ background:#0b0e14; border:1px solid var(--line2); border-radius:5px; padding:1px 6px; font-family:"JetBrains Mono",Consolas,monospace; font-size:12.5px; color:#79c0ff }
pre.code{ background:#0b0e14; border:1px solid var(--line2); border-radius:10px; padding:12px 14px; overflow-x:auto;
  font-family:"JetBrains Mono",Consolas,monospace; font-size:12.5px; line-height:1.55; color:#c9d3e2; text-align:left }
pre.code.sol{ max-height:320px; overflow-y:auto }
.tag{ padding:1px 7px; border-radius:6px; font-size:12.5px }
.tag.red{ background:#3a1616; color:#ff8f8f } .tag.dark{ background:#1c2430; color:#aab4c4 }
.tag.blue{ background:#12263d; color:#7fc0ff } .tag.green{ background:#11301c; color:#8ee8a8 }
.tag.purple{ background:#241a3a; color:#c4a5ff } .tag.orange{ background:#3a2a12; color:#ffc077 }
.sc-inner .btn{ margin-top:20px; width:100% }

.sc-ops{ display:flex; flex-direction:column; gap:9px; margin-top:6px }
.sc-op{
  background:var(--bg3); border:2px solid var(--line2); color:var(--txt); padding:13px 16px;
  border-radius:14px; cursor:pointer; font-size:14px; text-align:left; transition:.14s
}
.sc-op:hover:not(:disabled){ border-color:var(--accent); transform:translateY(-1px) }
.sc-op.bien{ border-color:var(--ok); background:#11301c }
.sc-op.mal{ border-color:var(--err); background:#2a1414 }
.sc-feed{ margin-top:14px; border-radius:12px; padding:11px 14px; font-size:13px; line-height:1.5; text-align:left }
.sc-feed.bien{ background:#11301c; color:#9fe0b4 } .sc-feed.mal{ background:#2a1414; color:#ffb3b3 }

.win-conf{ font-size:52px; animation:pop .5s ease }
@keyframes pop{ 0%{ transform:scale(.3) } 60%{ transform:scale(1.15) } 100%{ transform:scale(1) } }
.win-inner h2{ margin:8px 0 4px; font-size:23px }
.win-estrellas{ font-size:34px; color:#f5c451; letter-spacing:6px; margin:10px 0 }
.win-xp{ font-size:20px; font-weight:800; color:var(--warn) }
.win-sub{ color:var(--txt2); font-size:13px; margin:6px 0 0 }
.win-racha{ color:#ffc46b; font-size:13px }
.win-btns{ display:flex; flex-direction:column; gap:8px; margin-top:20px }
.win-btns .btn{ width:100%; justify-content:center }
.pista-txt{ font-size:14.5px; line-height:1.6 }
.pista-sub{ color:var(--txt2); font-size:12px }

/* =========================================================
   TUTOR
   ========================================================= */
.tutor{
  position:absolute; right:0; top:0; bottom:0; width:330px; background:var(--bg2);
  border-left:1px solid var(--line2); display:flex; flex-direction:column; z-index:70; box-shadow:-14px 0 40px #0008
}
.tutor-head{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line) }
.tutor-av{ width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  background:linear-gradient(140deg,#3ea6ff,#a371f7); flex:none }
.tutor-head div{ flex:1; line-height:1.2 }
.tutor-head small{ display:block; color:var(--txt2); font-size:11px }
.tutor-aviso{ background:#2a2410; color:#ffd79a; font-size:11.5px; padding:8px 12px; line-height:1.45; border-bottom:1px solid var(--line) }
.tutor-msgs{ flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px }
.tmsg{ max-width:88%; padding:9px 12px; border-radius:14px; font-size:13px; line-height:1.55; word-wrap:break-word }
.tmsg.bot{ background:var(--bg3); border:1px solid var(--line2); border-bottom-left-radius:4px; align-self:flex-start }
.tmsg.yo{ background:#1d3a5c; border:1px solid #2b5a8c; border-bottom-right-radius:4px; align-self:flex-end }
.tmsg code{ background:#0b0e14; padding:1px 5px; border-radius:4px; font-family:"JetBrains Mono",monospace; font-size:12px; color:#79c0ff }
.pensando{ color:var(--txt2); font-style:italic }
.tutor-rapidos{ display:flex; gap:6px; padding:0 10px 8px; flex-wrap:wrap }
.tutor-rapido{ background:var(--bg3); border:1px solid var(--line2); color:var(--txt2); border-radius:14px;
  padding:5px 10px; font-size:11px; cursor:pointer }
.tutor-rapido:hover{ border-color:var(--accent); color:var(--txt) }
.tutor-in{ display:flex; gap:6px; padding:9px; border-top:1px solid var(--line) }
.tutor-in input{ flex:1; background:var(--bg3); border:1px solid var(--line2); border-radius:20px; padding:9px 14px }
.tutor-in input:focus{ outline:none; border-color:var(--accent) }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px){
  #leftCol{
    position:absolute; left:0; top:0; bottom:0; z-index:50; width:min(88vw, 320px);
    transform:translateX(-105%); transition:transform .22s ease; box-shadow:12px 0 30px #0009
  }
  #leftCol.open{ transform:none }
  body[data-modo="leccion"] #palette{ max-height:38% }
  .tutor{ width:100%; }
  .home-inner{ padding:16px 12px 90px }
  .nodo{ transform:translateX(calc(var(--off) * 52px)) }
  .nodo:hover{ transform:translateX(calc(var(--off) * 52px)) }
  .nodo-ic{ width:58px; height:58px; font-size:19px }
  #homeHdr{ padding:10px 12px; gap:10px }
  .xp-wrap{ max-width:none }
  .pc-txt b{ font-size:12.5px }
  .sc-inner, .win-inner{ padding:20px 18px }
  .sc-inner h2{ font-size:18px }
}
@media (min-width: 1001px){
  #home{ }
}

/* =========================================================
   CUENTAS: entrar y elegir perfil
   ========================================================= */
.acceso{ max-width:400px; margin:5vh auto; text-align:center }
.acceso h2{ margin:10px 0 6px; font-size:23px }
.acceso-sub{ color:var(--txt2); font-size:13.5px; line-height:1.6; margin:0 0 22px }
.btn.google{
  width:100%; justify-content:center; gap:10px; background:#fff; color:#1f1f1f;
  border-color:#dadce0; font-weight:600; padding:12px
}
.btn.google:hover{ background:#f5f6f7; border-color:#c8ccd0 }
.acceso-o{ position:relative; margin:20px 0 16px; color:var(--txt3); font-size:12px }
.acceso-o::before{ content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line) }
.acceso-o span{ position:relative; background:var(--bg); padding:0 12px }
.acceso-error{
  background:#231010; border:1px solid #5c2020; color:#ffb3b3; border-radius:9px;
  padding:9px 12px; font-size:12.5px; margin-top:12px; text-align:left
}
.acceso-pie{ margin-top:16px; font-size:12.5px; color:var(--txt2); line-height:1.9 }
.acceso-pie a{ color:var(--accent); text-decoration:none }
.acceso-pie a:hover{ text-decoration:underline }

.perfiles{ max-width:560px; margin:8vh auto; text-align:center }
.perfiles h2{ font-size:24px; margin-bottom:26px }
.perfil-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:14px; max-width:520px; margin:0 auto }
.perfil-card{
  background:var(--bg2); border:2px solid var(--line2); border-radius:16px; padding:18px 10px;
  cursor:pointer; color:var(--txt); display:flex; flex-direction:column; align-items:center; gap:9px;
  transition:transform .15s, border-color .15s
}
.perfil-card:hover{ transform:translateY(-3px); border-color:var(--accent) }
.perfil-card .pf-av{
  width:62px; height:62px; border-radius:50%; background:#223047; display:grid; place-items:center; font-size:31px
}
.perfil-card .pf-nom{ font-size:13.5px; font-weight:600 }
.perfil-card.nuevo{ border-style:dashed; color:var(--txt2) }
.perfil-card.nuevo .pf-av{ background:transparent; border:2px dashed var(--line2); font-size:26px }
.perfiles-pie{ margin-top:28px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }