/* ============================================================
   teen.css v2 — Skin para alumnos de bachillerato (body.teen).
   Identidad propia: CLARA y brillante, glassmorphism (paneles
   translúcidos con blur), esquinas poco redondeadas y acentos
   índigo→violeta→cian. El modo oscuro es un EXTRA: el alumno lo
   activa con el interruptor 🌙 de la barra (body.teen.oscuro).
   Se carga ENCIMA de estilos.css solo para cursos de bachillerato.
   ============================================================ */

/* ---------- tokens ---------- */
body.teen{
  --tinta:#1e2340; --suave:#5a6280;
  --vidrio:rgba(255,255,255,.62); --vidrio-borde:rgba(255,255,255,.78);
  --vidrio-suave:rgba(255,255,255,.42);
  --sombra:0 8px 32px rgba(49,46,129,.10);
  --acento1:#6366f1; --acento2:#a855f7; --acento3:#06b6d4;
  --grad:linear-gradient(120deg,#6366f1,#a855f7 55%,#06b6d4);
  --ok:#059669; --mal:#e11d48;
  --radio:6px;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--tinta);
  background:#eef1f8;
  background-image:
    radial-gradient(900px 500px at 12% -5%, rgba(99,102,241,.16), transparent 60%),
    radial-gradient(800px 520px at 95% 8%, rgba(6,182,212,.14), transparent 60%),
    radial-gradient(700px 600px at 55% 110%, rgba(168,85,247,.12), transparent 60%);
  background-attachment:fixed;
}
body.teen.oscuro{
  --tinta:#e7eaf6; --suave:#9aa3c7;
  --vidrio:rgba(19,23,44,.60); --vidrio-borde:rgba(255,255,255,.09);
  --vidrio-suave:rgba(19,23,44,.42);
  --sombra:0 8px 32px rgba(0,0,0,.45);
  --acento3:#22d3ee;
  color:var(--tinta);
  background:#0b0e1a;
  background-image:
    radial-gradient(900px 500px at 12% -5%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(800px 520px at 95% 8%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(700px 600px at 55% 110%, rgba(168,85,247,.16), transparent 60%);
  background-attachment:fixed;
}

/* ---------- estructura: vidrio ---------- */
body.teen .card, body.teen .panel{
  background:var(--vidrio);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  color:var(--tinta);
}
body.teen .card.lesson{border-left:3px solid var(--acento1)}
body.teen .card.lesson.mech{border-left-color:var(--acento3)}
body.teen h1, body.teen h2, body.teen h3, body.teen h4{color:var(--tinta); letter-spacing:-.01em}
body.teen h2{position:relative; padding-bottom:6px}
body.teen .card > h2:first-child:after{
  content:''; position:absolute; left:0; bottom:0; width:56px; height:3px;
  background:var(--grad); border-radius:2px}
body.teen .tinyNote, body.teen .lvlTag, body.teen .mini-desc, body.teen .mini,
body.teen .progressTxt, body.teen .hola{color:var(--suave)}
body.teen a{color:var(--acento1)}

/* ---------- topbar de vidrio (fluye con la página, no fija) ---------- */
body.teen .topbar{
  background:var(--vidrio);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--vidrio-borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:10px 16px;
}
body.teen .marca{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800}
body.teen .topnav a{color:var(--tinta); font-weight:600}
body.teen .topnav a:hover{color:var(--acento1)}
body.teen .btn-mini{background:var(--grad); border-radius:var(--radio); box-shadow:0 2px 10px rgba(99,102,241,.35)}
body.teen .monChip{
  background:var(--vidrio-suave); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta) !important;
  box-shadow:inset 0 0 0 1px rgba(99,102,241,.15)}

/* ---------- botones ---------- */
body.teen .btn{
  color:#fff; text-decoration:none;
  background:var(--grad); border-radius:var(--radio);
  box-shadow:0 4px 16px rgba(99,102,241,.32);
  transition:transform .15s, box-shadow .15s}
body.teen .btn:hover{transform:translateY(-1px); box-shadow:0 6px 22px rgba(99,102,241,.42)}
body.teen .btn:active{transform:translateY(1px); box-shadow:0 2px 8px rgba(99,102,241,.3)}
body.teen .btn.blue{background:linear-gradient(120deg,#0ea5e9,#06b6d4); box-shadow:0 4px 16px rgba(6,182,212,.32)}
body.teen .btn.orange{background:linear-gradient(120deg,#f59e0b,#f97316); box-shadow:0 4px 16px rgba(249,115,22,.32)}
body.teen .btn.gray{background:linear-gradient(120deg,#64748b,#475569); box-shadow:0 4px 16px rgba(71,85,105,.25)}

/* ---------- cajas de lección ---------- */
body.teen .tipBox{
  background:var(--vidrio-suave);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--vidrio-borde); border-left:3px solid var(--acento2);
  border-radius:var(--radio); color:var(--tinta)}
body.teen .tipBox b{color:var(--acento2)}
body.teen .demoBox{
  background:var(--vidrio-suave);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--vidrio-borde); border-left:3px solid var(--acento3);
  border-radius:var(--radio); color:var(--tinta)}
body.teen .revealAns{color:var(--ok)}
body.teen.oscuro .revealAns{color:#34d399}

/* ---------- tarjetas de temas / tests / premios ---------- */
body.teen .testCard{
  background:var(--vidrio);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--vidrio-borde); border-radius:var(--radio);
  box-shadow:var(--sombra); transition:transform .18s, box-shadow .18s, border-color .18s}
body.teen .testCard:hover{transform:translateY(-3px); border-color:var(--acento1);
  box-shadow:0 12px 36px rgba(99,102,241,.22)}
body.teen .testCard h4{color:var(--tinta)}
body.teen .testCard.final{border-color:rgba(245,158,11,.55); background:var(--vidrio)}
body.teen .chipTema{
  background:var(--vidrio-suave); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--acento1); font-weight:600}

/* ---------- quiz ---------- */
body.teen .optGrid button{
  background:var(--vidrio); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
body.teen .optGrid button:hover:not(:disabled){border-color:var(--acento1); transform:translateY(-1px)}
body.teen .optGrid button.ok{background:rgba(5,150,105,.14); border-color:var(--ok); color:var(--ok)}
body.teen .optGrid button.bad{background:rgba(225,29,72,.12); border-color:var(--mal); color:var(--mal)}
body.teen.oscuro .optGrid button.ok{color:#34d399}
body.teen.oscuro .optGrid button.bad{color:#fb7185}
body.teen .feedback{border-radius:var(--radio)}
body.teen .feedback.good{background:rgba(5,150,105,.12); border:1px solid var(--ok)}
body.teen .feedback.bad{background:rgba(225,29,72,.10); border:1px solid var(--mal)}
body.teen .quizBarOut, body.teen .xpBarOut{background:rgba(120,130,180,.18); border-radius:99px}
body.teen .quizBarIn, body.teen .xpBarIn{background:var(--grad); border-radius:99px}

/* ---------- gamificación ---------- */
body.teen .statRow span{color:var(--acento1)}
body.teen .badge{
  background:var(--vidrio-suave); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta)}
body.teen .badge.off{opacity:.35}
body.teen .statChips span{
  background:var(--vidrio-suave); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta)}
body.teen .bubble{
  background:var(--vidrio); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
body.teen .bubble:after{border-top-color:var(--vidrio-borde)}
body.teen .unlockItem{
  background:var(--vidrio-suave); border:1px dashed var(--vidrio-borde);
  border-radius:var(--radio); color:var(--suave)}
body.teen .unlockItem.done{border-style:solid; border-color:var(--ok); color:var(--tinta)}

/* ---------- alertas, formularios y tablas ---------- */
body.teen .alerta{border-radius:var(--radio)}
body.teen .alerta.buena{background:rgba(5,150,105,.12); border:1px solid var(--ok); color:var(--ok)}
body.teen .alerta.mala{background:rgba(225,29,72,.10); border:1px solid var(--mal); color:var(--mal)}
body.teen.oscuro .alerta.buena{color:#34d399}
body.teen.oscuro .alerta.mala{color:#fb7185}
body.teen input, body.teen select, body.teen textarea{
  background:var(--vidrio); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta)}
body.teen input:focus, body.teen select:focus, body.teen textarea:focus{
  outline:none; border-color:var(--acento1); box-shadow:0 0 0 3px rgba(99,102,241,.18)}
body.teen .paisSel{background:var(--vidrio); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta)}
body.teen table.pensumT th{background:var(--vidrio-suave); color:var(--acento1);
  border-bottom:2px solid var(--acento1)}
body.teen table.pensumT td{border-bottom:1px solid var(--vidrio-borde); color:var(--tinta)}
body.teen .formCard label{color:var(--tinta)}
body.teen .pie{color:var(--suave)}
body.teen .pie a{color:var(--acento1)}

/* ---------- portada / héroe ---------- */
body.teen .welcomeHero .big{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800}

/* ---------- panel del alumno teen: sin armario, monedas al frente ---------- */
body.teen #pjRow, body.teen #tituloAtuendos, body.teen #outfitRow,
body.teen #tituloPoses, body.teen #poseRow,
body.teen aside.panel > .tinyNote{display:none}
body.teen #teenMonedero{
  margin-top:14px; padding:16px 14px; text-align:center;
  background:var(--vidrio-suave);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--vidrio-borde); border-radius:var(--radio)}
body.teen #teenMonedero .monTit{font-weight:700; color:var(--suave); letter-spacing:.04em; text-transform:uppercase; font-size:.8rem}
body.teen #teenMonedero .monNum{
  font-size:2.1rem; font-weight:800; line-height:1.2; margin:4px 0;
  background:linear-gradient(120deg,#f59e0b,#fbbf24,#f59e0b);
  -webkit-background-clip:text; background-clip:text; color:transparent}
body.teen #teenMonedero .monTxt{font-size:.85rem; color:var(--suave); margin-bottom:10px}

/* ---------- minijuegos en modo teen: vidrio en vez de caramelo ---------- */
body.teen .mjSuma, body.teen .mjCampo, body.teen .mjMonte{
  background:var(--vidrio-suave); border-color:var(--vidrio-borde)}
body.teen .mjFila span{color:var(--tinta)}
body.teen .mjHueco{background:var(--vidrio); border-color:var(--vidrio-borde); color:var(--suave)}
body.teen .mjHueco.activo{border-color:var(--acento3); color:var(--acento3)}
body.teen .mjHueco.ok{border-color:var(--ok); color:var(--ok); background:rgba(5,150,105,.10)}
body.teen .mjPad button, body.teen .mjRoca, body.teen .mjCae, body.teen .mjSlot{
  background:var(--vidrio); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); color:var(--tinta); box-shadow:none}
body.teen .mjSlot.llena{border-color:var(--acento1); color:var(--acento1)}
body.teen .mjSlot.mala{border-color:var(--mal); color:var(--mal); background:rgba(225,29,72,.08)}
body.teen .mjFicha{background:var(--grad); color:#fff; border-radius:var(--radio); box-shadow:none}
body.teen .mjMove{background:var(--grad); border-radius:var(--radio); box-shadow:0 4px 16px rgba(99,102,241,.32)}
body.teen .mjMsg.mala{background:var(--vidrio-suave); border-color:#f59e0b; color:#f59e0b; border-radius:var(--radio)}
body.teen .mjGlobo{color:#0b0e1a}
body.teen .mjCarta{background:var(--grad); border-radius:var(--radio); box-shadow:none}
body.teen .mjCarta.abierta{background:var(--vidrio); color:var(--tinta); border:1px solid var(--acento1)}
body.teen .mjCarta.hecha{background:rgba(5,150,105,.12); color:var(--ok); border:1px solid var(--ok)}

/* ---------- editor de avatar en modo teen ---------- */
body.teen .avTabs button{background:var(--vidrio); color:var(--tinta); box-shadow:none;
  border:1px solid var(--vidrio-borde); border-radius:var(--radio)}
body.teen .avTabs button.activo{background:var(--grad); color:#fff; border:none}
body.teen .avOp{background:var(--vidrio); border-color:var(--vidrio-borde)}
body.teen .avOp.puesto{border-color:var(--ok); background:rgba(5,150,105,.08)}
body.teen .avOp .avNom{color:var(--tinta)}
body.teen .gemChip{background:var(--vidrio-suave); border-color:var(--acento3); color:var(--tinta); border-radius:var(--radio)}
body.teen .avSw{border-color:var(--vidrio-borde)}
body.teen .avSw.puesto{border-color:var(--ok)}

/* ---------- interruptor de tema 🌙 ---------- */
body.teen .temaBtn{
  flex:0 0 auto; min-width:0; width:auto;
  background:var(--vidrio-suave); border:1px solid var(--vidrio-borde);
  border-radius:var(--radio); padding:6px 10px; cursor:pointer;
  font-size:1rem; line-height:1; color:var(--tinta); box-shadow:none}
body.teen .temaBtn:hover{border-color:var(--acento1); transform:none}