/* Misión Ladera — estilos propios (sin Bootstrap). Sistema visual coherente con la serie STEM de la I.E. San Francisco. */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Nunito:wght@400;600;700;800&family=Sora:wght@600;700;800&display=swap');

:root {
  --bg: #0a1424; --bg2: #0f1d33; --card: #13233b; --card2: #1a2f4d; --line: rgba(255,255,255,.10);
  --txt: #eaf0fa; --mut: #a3b4cc; --navy: #1e3a5f;
  --ok: #34d6a3; --bad: #ff6b6b; --warn: #fbbf24; --info: #60a5fa;
  --acc: #f5a524; --acc-soft: rgba(245,165,36,.16); --on-acc: #0b1626;
  --r: 16px; --sh: 0 10px 30px rgba(0,0,0,.35);
  --f-head: 'Sora', system-ui, 'Segoe UI', sans-serif;
  --f-body: 'Nunito', system-ui, 'Segoe UI', sans-serif;
  --f-code: 'Fira Code', ui-monospace, Consolas, monospace;
}
body[data-s="1"] { --acc: #f5a524; --acc-soft: rgba(245,165,36,.16); }
body[data-s="2"] { --acc: #10b981; --acc-soft: rgba(16,185,129,.16); }
body[data-s="3"] { --acc: #fb5a4a; --acc-soft: rgba(251,90,74,.16); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--txt); background: var(--bg);
  font: 16px/1.55 var(--f-body); -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 88% -8%, var(--acc-soft), transparent 62%),
    radial-gradient(700px 520px at -8% 108%, rgba(96,165,250,.11), transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 34px 34px;
}
h1, h2, h3 { font-family: var(--f-head); line-height: 1.2; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(1.5rem, 4.5vw, 2.1rem); } h2 { font-size: clamp(1.15rem, 3.2vw, 1.45rem); } h3 { font-size: 1.1rem; }
p { margin: 0 0 .8em; } a { color: var(--info); }
small { color: var(--mut); } .mut { color: var(--mut); }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--info); outline-offset: 2px; }
[hidden] { display: none !important; }
.eyebrow { font: 700 .74rem/1 var(--f-head); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: var(--navy); border-bottom: 3px solid var(--acc);
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.tb-back { color: #fff; text-decoration: none; font-weight: 800; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.10); white-space: nowrap; }
.tb-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; font-family: var(--f-head); }
.tb-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; }
.tb-badge { background: var(--acc); color: var(--on-acc); font: 800 .78rem var(--f-head); padding: 4px 8px; border-radius: 8px; }
.tb-right { display: flex; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 800; font-size: .86rem; white-space: nowrap; color: #fff; }
.chip.xp b { color: #ffd479; }
.chip.bad { background: rgba(255,107,107,.16); color: #ffb4b4; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none;
  font: 800 .95rem var(--f-body); padding: 11px 18px; border-radius: 12px; color: var(--txt);
  background: var(--card2); border: 1px solid var(--line); transition: transform .12s, filter .2s, background .2s;
}
.btn:hover:not(:disabled) { filter: brightness(1.12); } .btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.pri { background: var(--acc); color: var(--on-acc); border-color: transparent; box-shadow: 0 6px 18px var(--acc-soft); }
.btn.ghost { background: transparent; } .btn.sm { padding: 7px 12px; font-size: .84rem; border-radius: 10px; } .btn.lg { padding: 14px 24px; font-size: 1.05rem; }
.btn.ok { background: var(--ok); color: var(--on-acc); border-color: transparent; }
.btn.danger { background: rgba(255,107,107,.15); color: #ffb4b4; border-color: rgba(255,107,107,.4); }

/* ---------- Estructura de sesión ---------- */
.layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; max-width: 1280px; margin: 0 auto; padding: 20px 16px 96px; }
.rail { position: sticky; top: 78px; align-self: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; max-height: calc(100vh - 98px); overflow: auto; }
.rail-head h2 { margin: 4px 0 10px; }
.bar { height: 8px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), #ffd479); border-radius: 99px; transition: width .5s; }
.mlist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.mi button {
  width: 100%; display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer; color: var(--txt);
  background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-weight: 700;
}
.mi button:disabled { cursor: not-allowed; opacity: .5; }
.mi-n { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.1); font: 800 .9rem var(--f-head); }
.mi.disp .mi-n { background: var(--acc); color: var(--on-acc); } .mi.done .mi-n { background: var(--ok); color: var(--on-acc); }
.mi.act button { border-color: var(--acc); box-shadow: 0 0 0 2px var(--acc-soft); }
.mi-t { display: grid; gap: 1px; font-size: .92rem; line-height: 1.25; } .mi-t small { font-weight: 600; }
.stage { min-width: 0; }
.cargando { padding: 60px; text-align: center; color: var(--mut); }
.rail-bg { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(2,8,18,.6); }
.fab-rail { display: none; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--sh); }
.card.centro { text-align: center; padding: 36px 22px; } .grande { font-size: 3.2rem; line-height: 1; margin-bottom: 10px; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .acciones.c { justify-content: center; }

/* ---------- Briefing y preguntas ---------- */
.brief-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 10px; }
.dots { display: flex; gap: 6px; } .dots i { width: 22px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.14); }
.dots i.on { background: var(--ok); } .dots i.cur { background: var(--acc); }
.brief-txt { color: #d6e0f0; } .brief-txt ul { padding-left: 1.2em; margin: .4em 0 1em; } .brief-txt li { margin: .25em 0; }
.brief-txt b { color: #fff; } .brief-txt .dato { background: var(--acc-soft); border-left: 4px solid var(--acc); padding: 10px 14px; border-radius: 0 12px 12px 0; margin: 12px 0; }
.brief-txt img { max-width: 100%; border-radius: 12px; background: #fff; display: block; margin: 10px auto; }
.quiz-lbl { margin: 18px 0 8px; font-weight: 800; color: var(--acc); }
.quiz-p { font-weight: 800; font-size: 1.05rem; }
.opts { display: grid; gap: 9px; }
.opt {
  text-align: left; cursor: pointer; padding: 13px 15px; border-radius: 13px; color: var(--txt); font: 700 .98rem/1.35 var(--f-body);
  background: var(--card2); border: 2px solid transparent; transition: border-color .15s, background .15s, transform .1s;
}
.opt:hover:not(:disabled) { border-color: var(--acc); } .opt:active:not(:disabled) { transform: scale(.985); }
.opt.ok { background: rgba(52,214,163,.18); border-color: var(--ok); } .opt.bad { background: rgba(255,107,107,.15); border-color: var(--bad); opacity: .75; text-decoration: line-through; }
.opt:disabled { cursor: default; }
.quiz-exp { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(52,214,163,.12); border: 1px solid rgba(52,214,163,.4); color: #c8f5e6; }

/* ---------- Pantalla de sesión, misiones y HUD ---------- */
.hero-s { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; background: linear-gradient(135deg, var(--card), var(--card2)); }
.hero-ico { font-size: 2.6rem; width: 74px; height: 74px; flex: none; display: grid; place-items: center; background: var(--acc-soft); border-radius: 20px; }
.hero-s p { margin: 6px 0 0; color: #d6e0f0; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mcard {
  position: relative; display: grid; gap: 4px; text-align: left; cursor: pointer; padding: 16px; border-radius: var(--r); color: var(--txt);
  background: var(--card); border: 1px solid var(--line); min-height: 138px; transition: transform .15s, border-color .15s;
}
.mcard:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--acc); }
.mcard.lock { opacity: .5; cursor: not-allowed; } .mcard.done { border-color: rgba(52,214,163,.5); }
.mc-n { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font: 800 .85rem var(--f-head); background: var(--acc); color: var(--on-acc); }
.mcard.done .mc-n { background: var(--ok); } .mcard.lock .mc-n { background: rgba(255,255,255,.12); color: var(--txt); }
.mcard b { font-family: var(--f-head); font-size: .98rem; } .mc-st { margin-top: auto; font-weight: 800; color: var(--acc); font-size: .85rem; }
.stars { letter-spacing: 2px; margin-top: auto; } .stars i { font-style: normal; color: rgba(255,255,255,.22); } .stars i.on { color: #ffc93c; text-shadow: 0 0 12px rgba(255,201,60,.5); }
.stars.sm { font-size: .8rem; margin: 0; } .stars.big { font-size: 2.6rem; text-align: center; margin: 0 0 8px; }
.stars.big i.on { animation: pop .5s both; } .stars.big i:nth-child(2).on { animation-delay: .15s; } .stars.big i:nth-child(3).on { animation-delay: .3s; }
.nota-line { margin-top: 16px; color: var(--mut); }
.nota { font-family: var(--f-head); font-weight: 800; } .nota.sup { color: #34d6a3; } .nota.alto { color: #60a5fa; } .nota.bas { color: #fbbf24; } .nota.baj { color: #ff6b6b; }
.fin { text-align: center; padding: 34px 20px; }
.fin-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.fin-g div, .res-g div { background: var(--card2); border-radius: 14px; padding: 14px 6px; display: grid; gap: 2px; }
.fin-g b { font: 800 1.7rem var(--f-head); } .fin-g span, .res-g span { color: var(--mut); font-size: .8rem; font-weight: 700; }

.hud { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hud-l { display: flex; gap: 12px; align-items: center; min-width: 0; } .hud-l h2 { margin: 0; } .hud-r { display: flex; gap: 8px; align-items: center; }
.obj { background: var(--acc-soft); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; }
.mbody { min-width: 0; }

/* ---------- Modal, toasts, confeti ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(2,8,18,.72); backdrop-filter: blur(4px); animation: fade .2s; }
.modal-bg.out { opacity: 0; transition: opacity .18s; }
.modal { width: min(460px, 100%); max-height: 90vh; overflow: auto; animation: rise .28s cubic-bezier(.2,.9,.3,1.2); }
.modal h3 { text-align: center; font-size: 1.3rem; } .modal-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.res-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; } .res-g b { font: 800 1.35rem var(--f-head); }
.ins-new { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,201,60,.12); border: 1px solid rgba(255,201,60,.4); animation: rise .4s both; }
.ins-new span { font-size: 1.8rem; } .ins-new b { display: block; } .ins-new.rango { background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.45); }
#toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 120; display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { padding: 11px 16px; border-radius: 12px; background: var(--card2); border: 1px solid var(--line); box-shadow: var(--sh); font-weight: 700; animation: rise .25s both; }
.toast.ok { border-color: var(--ok); } .toast.warn { border-color: var(--warn); } .toast.bad { border-color: var(--bad); } .toast.out { opacity: 0; transition: opacity .4s; }
.confeti { position: fixed; inset: 0; z-index: 130; pointer-events: none; }
.shake { animation: shake .35s; }
@keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
@keyframes pop { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Adaptación móvil: panel de misiones como cajón inferior ---------- */
@media (max-width: 899px) {
  .layout { grid-template-columns: 1fr; padding: 14px 12px 96px; }
  .rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; max-height: 74vh; border-radius: 22px 22px 0 0; transform: translateY(106%); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .rail.open { transform: none; } .rail-bg.on { display: block; }
  .fab-rail { display: flex; position: fixed; right: 14px; bottom: 14px; z-index: 50; align-items: center; gap: 8px; padding: 13px 18px; border-radius: 99px; border: 0; cursor: pointer; font: 800 .95rem var(--f-body); background: var(--acc); color: var(--on-acc); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
  .hero-s { flex-direction: column; text-align: center; }
}
@media (max-width: 600px) {
  .btn-txt { display: none; } .chip.rank .btn-txt { display: none; }
  .res-g { grid-template-columns: repeat(2, 1fr); } .mgrid { grid-template-columns: 1fr 1fr; }
  .card { padding: 16px; } .tb-title b { font-size: .88rem; } .fin-g b { font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Inicio (acceso y progreso) ---------- */
.hub { max-width: 1040px; margin: 0 auto; padding: 22px 16px 70px; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.brand { display: flex; align-items: center; gap: 12px; font-family: var(--f-head); font-weight: 800; font-size: 1.1rem; }
.brand svg { width: 44px; height: 44px; flex: none; }
.brand small { display: block; font: 600 .72rem var(--f-body); letter-spacing: .06em; }
.login { max-width: 460px; margin: 6vh auto 0; text-align: center; padding: 30px 24px; }
.login .logo-big { width: 92px; height: 92px; margin: 0 auto 12px; display: block; }
.login input {
  width: 100%; margin: 14px 0 10px; padding: 15px 16px; border-radius: 14px; border: 2px solid var(--line); background: var(--bg2); color: var(--txt);
  font: 800 1.5rem var(--f-code); text-align: center; letter-spacing: .12em; text-transform: uppercase;
}
.login input:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.login .err { color: #ffb4b4; min-height: 1.5em; font-weight: 700; margin: 0 0 8px; }
.perfil { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; margin-bottom: 18px; background: linear-gradient(135deg, var(--card), var(--card2)); }
.perfil .avatar { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; font-size: 2.2rem; background: var(--acc-soft); }
.perfil h1 { margin: 0; font-size: 1.4rem; } .perfil .meta { color: var(--mut); font-size: .88rem; }
.perfil .xpbar { margin-top: 10px; } .perfil .xpbar .bar { height: 10px; margin-bottom: 4px; }
.perfil .notas { text-align: center; padding-left: 16px; border-left: 1px solid var(--line); }
.perfil .notas b { display: block; font: 800 2rem var(--f-head); line-height: 1; } .perfil .notas small { font-weight: 700; }
.sgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.scard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 20px; text-decoration: none; color: var(--txt); border-radius: var(--r); background: var(--card); border: 1px solid var(--line); transition: transform .18s, border-color .18s; }
.scard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--c); }
.scard:hover { transform: translateY(-4px); border-color: var(--c); } .scard.lock { opacity: .55; pointer-events: none; }
.scard .ico { font-size: 2rem; } .scard h3 { margin: 0; } .scard p { color: var(--mut); margin: 0; font-size: .92rem; flex: 1; }
.scard .pr { display: flex; gap: 5px; margin-top: 6px; } .scard .pr i { flex: 1; height: 8px; border-radius: 9px; background: rgba(255,255,255,.12); } .scard .pr i.on { background: var(--c); }
.scard .st { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .86rem; color: var(--c); }
.sec-t { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 12px; }
.igrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ins { text-align: center; padding: 14px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.ins .i { font-size: 2.1rem; display: block; } .ins b { display: block; font-size: .86rem; margin-top: 4px; } .ins small { font-size: .74rem; line-height: 1.25; display: block; }
.ins.off { opacity: .4; filter: grayscale(1); } .ins.on { border-color: rgba(255,201,60,.5); background: linear-gradient(160deg, rgba(255,201,60,.12), var(--card)); }
.foot { margin-top: 30px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; color: var(--mut); font-size: .86rem; }
@media (max-width: 760px) {
  .sgrid { grid-template-columns: 1fr; } .perfil { grid-template-columns: auto 1fr; } .perfil .notas { grid-column: 1 / -1; border: 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; gap: 14px; align-items: baseline; justify-content: center; }
}