/* =============================================================
   RUTAS FORMATIVAS · Tema Universo Santillana
   Capa visual compartida para el portal y los 8 módulos.
   Solo estilos: no modifica estructura ni lógica de las guías.
   ============================================================= */
:root{
  /* Paleta Universo (producción) */
  --space-0:#03051a;
  --space-1:#0a0f30;
  --space-2:#151b4c;
  --santi-magenta:#e00076;
  --santi-blue:#00a1e4;
  --santi-yellow:#ffcb05;
  --santi-green:#7ec352;
  --santi-red:#ed1c24;
  --santi-cyan:#43e9ff;
  --santi-violet:#a855f7;
  --rutas:#ff8a1f;                 /* acento del mundo Rutas Formativas */
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"Outfit",system-ui,sans-serif;
  --panel:rgba(13,18,48,.72);
  --panel-solid:#0d1236;

  /* Variables originales de las guías, remapeadas al tema */
  --paper:#0b1034;
  --paper-alt:rgba(255,255,255,.05);
  --line:rgba(160,180,255,.10);
  --line-strong:rgba(160,180,255,.18);
  --ink:#f2f5ff;
  --ink-soft:#aab6de;
  --ink-faint:#7c88b8;
  --amber:var(--rutas);
  --amber-soft:rgba(255,138,31,.20);
  --teal:var(--santi-cyan);
  --teal-soft:rgba(67,233,255,.12);
  --red:#ff5c7c;
  --red-soft:rgba(237,28,36,.16);
  --white:var(--panel);
  --shadow:0 10px 30px rgba(3,5,26,.45);
  --radius:14px;
}

/* ---------- Fondo espacial ---------- */
html{
  color-scheme:dark;
  background:var(--space-0)!important;
}
html,body{overflow-x:clip!important} /* corrige el panel lateral fijo (sticky) sin cambiar la lógica */
body{
  font-family:var(--body)!important;
  color:var(--ink);
  background:transparent!important;
  background-image:none!important;
  position:relative;
}
input,button,select,textarea{font-family:var(--body)}
body::before{ /* nebulosas */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vw 38vw at -4vw -6vw,rgba(224,0,118,.20),transparent 62%),
    radial-gradient(44vw 44vw at 104vw 8vh,rgba(0,161,228,.18),transparent 60%),
    radial-gradient(36vw 36vw at 60vw 112vh,rgba(255,138,31,.10),transparent 62%),
    radial-gradient(150% 120% at 50% -12%,#171150 0%,var(--space-1) 40%,var(--space-0) 100%);
}
body::after{ /* estrellas */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1px 1px at 27% 72%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 44% 34%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1px 1px at 63% 12%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 78% 58%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1px 1px at 91% 26%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1.3px 1.3px at 6% 88%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1px 1px at 55% 92%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1px 1px at 36% 50%,#dfe8ff 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 84% 84%,#dfe8ff 50%,transparent 51%);
  background-size:520px 520px;
}
::selection{background:rgba(67,233,255,.28);color:#fff}
a{color:var(--santi-cyan)}
h1,h2,h3{font-family:var(--display)!important;color:var(--ink)!important;letter-spacing:.01em;font-weight:700}
.mono{font-family:var(--display)}
img{max-width:100%}

/* scrollbars como en el mapa */
*{scrollbar-width:thin;scrollbar-color:rgba(140,165,255,.3) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-thumb{background:rgba(140,165,255,.28);border-radius:99px}

/* ---------- Barra lateral (módulos) ---------- */
.rail{
  background:linear-gradient(180deg,rgba(13,18,48,.86),rgba(8,12,38,.78))!important;
  border-right:1px solid var(--line-strong)!important;
  backdrop-filter:blur(10px);
}
@media (max-width:940px){.rail{border-bottom:1px solid var(--line-strong)!important}}
.rail-back{
  font-family:var(--display)!important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px!important;
  color:var(--ink-soft)!important;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
}
.rail-back:hover{color:#fff!important;border-color:rgba(67,233,255,.5)}
.rail-brand .badge{
  width:40px!important;height:40px!important;color:#fff!important;font-family:var(--display)!important;font-weight:700;
  background:
    radial-gradient(circle at 33% 27%,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),
    radial-gradient(circle at 68% 78%,rgba(255,138,31,.45),transparent 60%),
    radial-gradient(circle at 50% 45%,var(--space-2),#090e30 80%)!important;
  border:1px solid rgba(255,138,31,.55);
  box-shadow:inset -5px -7px 14px rgba(2,4,16,.65),0 0 18px rgba(255,138,31,.35);
}
.rail-brand .txt b{font-family:var(--display);letter-spacing:.04em}

.user-box,.rail-progress{background:var(--panel)!important;border-color:var(--line-strong)!important;box-shadow:none!important;border-radius:14px!important}
.user-box label,.rail-progress .label{font-family:var(--display);font-weight:600;letter-spacing:.14em!important}
.user-box input{background:rgba(3,5,26,.55)!important;border-color:var(--line-strong)!important;color:var(--ink)!important;border-radius:10px!important;padding:9px 11px!important}
.user-box input::placeholder{color:var(--ink-faint)}
.user-box input:focus{border-color:rgba(67,233,255,.6)!important;box-shadow:0 0 0 3px rgba(67,233,255,.15)!important}
.rail-progress .label span.count{color:var(--santi-cyan)!important;font-family:var(--display)!important}
.bar-track{background:rgba(3,5,26,.6)!important;border-color:var(--line)!important;height:7px!important}
.bar-fill{background:linear-gradient(90deg,var(--rutas),var(--santi-yellow))!important;box-shadow:0 0 12px rgba(255,138,31,.6)}

/* Ruta: línea punteada tipo trayectoria */
.route::before{background:none!important;border-left:1px dashed rgba(185,200,255,.32);width:0!important}
.route a{color:var(--ink-soft)!important;border-radius:10px!important;padding-left:2px!important}
.route a:hover{color:#fff!important;background:rgba(255,255,255,.03)}
.route .dot{background:var(--space-1)!important;border-color:var(--line-strong)!important;color:var(--ink-faint)!important;font-family:var(--display)!important;font-weight:600}
.route li.active a{color:#fff!important}
.route li.active .dot{border-color:var(--rutas)!important;color:#fff!important;background:radial-gradient(circle at 35% 30%,#ffb46b,var(--rutas) 60%,#a84d00)!important;box-shadow:0 0 0 3px rgba(255,138,31,.18),0 0 14px rgba(255,138,31,.55)!important}
.route li.done .dot{border-color:var(--santi-green)!important;background:var(--santi-green)!important;color:#06132e!important}

/* ---------- Hero ---------- */
.hero{border-bottom:1px solid var(--line-strong)!important}

.hero .eyebrow,header.hero .eyebrow{font-family:var(--display)!important;font-weight:600;letter-spacing:.26em!important;color:var(--rutas)!important}
.hero .eyebrow::before,header.hero .eyebrow::before{background:var(--rutas)!important;width:26px!important}
.hero h1,header.hero h1{letter-spacing:.02em;font-weight:700}
.hero p.lede,header.hero p.lede{color:var(--ink-soft)!important;font-weight:300}

/* Mapa de estaciones = mini ruta de planetas */
.route-map .seg{background:none!important;border-top:1px dashed rgba(185,200,255,.32);height:0!important;margin-bottom:24px!important}
.route-map .stop{cursor:pointer}
.route-map .stop .circ{
  background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.18),rgba(255,255,255,0) 45%),radial-gradient(circle at 50% 45%,var(--space-2),#090e30 80%)!important;
  border:1px solid var(--line-strong)!important;color:var(--ink-faint)!important;font-family:var(--display)!important;font-weight:600;
  box-shadow:inset -4px -5px 10px rgba(2,4,16,.6);transition:transform .2s ease,box-shadow .2s ease;
}
.route-map .stop:hover .circ{transform:scale(1.08);border-color:rgba(67,233,255,.5)!important}
.route-map .stop.current .circ{
  background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.35),rgba(255,255,255,0) 45%),radial-gradient(circle at 60% 70%,var(--rutas),#7a3300 85%)!important;
  border-color:var(--rutas)!important;color:#fff!important;box-shadow:inset -4px -5px 10px rgba(2,4,16,.45),0 0 18px rgba(255,138,31,.6)!important;
}
.route-map .stop .lbl{color:var(--ink-faint)!important}
.route-map .stop.current .lbl{color:#fff!important}

/* ---------- Secciones ---------- */
section.folio{border-bottom:1px solid var(--line)!important}
section.folio:nth-of-type(odd){background:rgba(255,255,255,.015)!important}
.folio-head .tag{font-family:var(--display)!important;font-weight:600;letter-spacing:.12em;color:var(--rutas)!important;border-color:rgba(255,138,31,.4)!important;background:rgba(255,138,31,.08)}
.folio-head h2{font-weight:700}
.folio p{color:var(--ink-soft)!important;font-weight:300}
.folio p b,.folio p strong{color:#fff;font-weight:600}

/* Paneles genéricos */
.callout,.clar-card,.checklist li,.quiz-item,.video-card,.gloss-item,.card,.priv-banner,table.rank-table{
  background:var(--panel)!important;border-color:var(--line-strong)!important;backdrop-filter:blur(8px)
}
.callout{border-left:3px solid var(--rutas)!important;box-shadow:var(--shadow)!important}
.callout.soft{border-left-color:var(--santi-cyan)!important}
.callout .ct{font-family:var(--display);letter-spacing:.02em;color:#fff}
.callout ul{color:var(--ink-soft)!important}
.clar-card .k{font-family:var(--display)!important;font-weight:600;letter-spacing:.14em!important;color:var(--santi-cyan)!important}
.clar-card p{color:var(--ink-soft)!important}

/* Checklist */
.checklist li{border-radius:12px!important}
.checklist li:hover{border-color:rgba(67,233,255,.45)!important}
.checklist li.checked{background:rgba(126,195,82,.12)!important;border-color:rgba(126,195,82,.6)!important}
.checklist .box{border-color:var(--ink-faint)!important;border-radius:6px!important}
.checklist li.checked .box{background:var(--santi-green)!important;border-color:var(--santi-green)!important;color:#06132e!important}
.checklist .txt{color:var(--ink)!important}
.checklist li.checked .txt{color:var(--ink-soft)!important}
.checklist .txt b{color:#ff8fa6!important}
.checklist li.checked .txt b{color:var(--santi-green)!important}

/* Figuras */
figure img{border-color:var(--line-strong)!important;border-radius:12px!important;box-shadow:var(--shadow)!important;background:#fff}
figure figcaption{color:var(--ink-faint)!important}

/* Glosario */
.gloss-search input{background:var(--panel)!important;border-color:var(--line-strong)!important;color:var(--ink)!important;font-family:var(--body)!important;border-radius:999px!important}
.gloss-search input::placeholder{color:var(--ink-faint)}
.gloss-search input:focus{border-color:rgba(67,233,255,.6)!important;box-shadow:0 0 0 3px rgba(67,233,255,.15)!important}
.gloss-count{font-family:var(--display)!important;color:var(--ink-faint)!important}
.gloss-list{background:var(--line)!important;border-color:var(--line-strong)!important;border-radius:14px!important}
.gloss-item{background:rgba(13,18,48,.82)!important;backdrop-filter:none}
.gloss-item .term{color:#fff!important;font-family:var(--display)}
.gloss-item .def{color:var(--ink-soft)!important}

/* Videos */
.video-card{border-radius:16px!important;box-shadow:var(--shadow)!important}
.video-card.seen{border-color:rgba(126,195,82,.6)!important}
.video-thumb{background:radial-gradient(circle at 30% 20%,rgba(255,138,31,.25),transparent 55%),linear-gradient(135deg,var(--space-2),var(--space-0))!important}
.video-thumb .play{background:linear-gradient(120deg,var(--rutas),#c25a00)!important;box-shadow:0 0 22px rgba(255,138,31,.55)}
.video-thumb .play::after{border-left-color:#fff!important}
.video-thumb .vnum{color:#fff!important;background:rgba(3,5,26,.7)!important;font-family:var(--display)!important;letter-spacing:.08em}
.video-thumb .vseen-badge{color:#06132e!important;background:var(--santi-green)!important;font-family:var(--display)!important;font-weight:600}
.video-meta .vt{font-family:var(--display);color:#fff}
.video-meta .vd{color:var(--ink-faint)!important}
.seen-btn{font-family:var(--display)!important;font-weight:600;color:var(--ink-soft)!important;background:rgba(255,255,255,.04)!important;border-color:var(--line-strong)!important}
.seen-btn:hover{border-color:rgba(67,233,255,.5)!important;color:#fff!important}
.video-card.seen .seen-btn{background:var(--santi-green)!important;border-color:var(--santi-green)!important;color:#06132e!important}

/* Autoevaluación */
.quiz-item{border-radius:16px!important;box-shadow:var(--shadow)!important}
.quiz-item .qn{font-family:var(--display)!important;font-weight:600;letter-spacing:.16em!important;color:var(--rutas)!important}
.quiz-item .qt{color:#fff;font-family:var(--display)}
.quiz-opt{background:rgba(255,255,255,.03)!important;border-color:var(--line-strong)!important;color:var(--ink)!important;font-family:var(--body)!important;border-radius:10px!important}
.quiz-opt:hover{border-color:rgba(67,233,255,.5)!important;background:rgba(67,233,255,.06)!important}
.quiz-opt.correct{background:rgba(126,195,82,.16)!important;border-color:var(--santi-green)!important;color:#fff!important}
.quiz-opt.incorrect{background:rgba(237,28,36,.14)!important;border-color:#ff5c7c!important}
.quiz-explain{color:var(--ink-soft)!important;border-top-color:var(--line-strong)!important}
.quiz-note{font-family:var(--display)!important;color:var(--ink-faint)!important}

/* Tabla de rangos (Atenciones) */
table.rank-table{border-radius:14px!important}
table.rank-table th{background:rgba(255,138,31,.16)!important;color:#fff!important;font-family:var(--display)!important;letter-spacing:.12em!important}
table.rank-table td{color:var(--ink)!important;border-top-color:var(--line)!important}
table.rank-table td.rango{color:var(--santi-cyan)!important;font-family:var(--display)!important}
table.rank-table tr:nth-child(even) td{background:rgba(255,255,255,.025)!important}

/* Cierre */
.closing .box{
  border-radius:20px!important;border:1px solid rgba(255,138,31,.35);
  background:radial-gradient(120% 140% at 100% 0%,rgba(255,138,31,.22),transparent 55%),radial-gradient(120% 140% at 0% 100%,rgba(0,161,228,.18),transparent 55%),var(--panel-solid)!important;
  box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.02);
}
.closing .box h3{color:#fff!important}
.closing .box p{color:var(--ink-soft)!important}
.closing .box .next{
  font-family:var(--display)!important;font-weight:700;letter-spacing:.12em;color:#06132e!important;border:0!important;
  background:linear-gradient(120deg,var(--rutas),#ffb15c);padding:12px 20px!important;border-radius:12px!important;box-shadow:0 0 22px rgba(255,138,31,.4)
}
.closing .box .next:hover{filter:brightness(1.08)}
.pill{font-family:var(--display)!important;border-color:var(--line-strong)!important;color:var(--ink-soft)!important}

/* ---------- Portal ---------- */
.uni-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0 0;flex-wrap:wrap}
.uni-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.uni-brand img{width:38px;height:38px;object-fit:contain;border-radius:10px}
.uni-brand b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(16px,2vw,22px);letter-spacing:.12em;text-transform:uppercase;line-height:1}
.uni-brand span{display:block;font-size:12.5px;color:var(--ink-soft);letter-spacing:.06em;margin-top:5px}
.uni-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;letter-spacing:.07em;font-size:13px;color:var(--ink);text-decoration:none;
  background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 18px;backdrop-filter:blur(8px);transition:.2s}
.uni-pill:hover{border-color:rgba(67,233,255,.55);box-shadow:0 0 0 3px rgba(67,233,255,.15)}
header.hero{border-bottom:1px solid var(--line-strong)!important;position:relative}
.priv-banner{border-left:3px solid var(--santi-cyan)!important;border-radius:14px!important;color:var(--ink-soft)!important;box-shadow:none!important}
.priv-banner b{color:#fff}
.grid .card{border-radius:20px!important;padding:26px 24px!important;box-shadow:var(--shadow)!important;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease!important}
.grid .card::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,31,.16),transparent 65%);pointer-events:none}
.card.active:hover{border-color:rgba(255,138,31,.6)!important;transform:translateY(-4px)!important;box-shadow:var(--shadow),0 0 30px rgba(255,138,31,.18)!important}
.card .num{
  width:52px!important;height:52px!important;color:#fff!important;font-family:var(--display)!important;font-weight:700;font-size:14px!important;
  background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.28),rgba(255,255,255,0) 45%),radial-gradient(circle at 68% 78%,rgba(255,138,31,.5),transparent 60%),radial-gradient(circle at 50% 45%,var(--space-2),#090e30 80%)!important;
  border:1px solid rgba(255,138,31,.5);box-shadow:inset -6px -8px 16px rgba(2,4,16,.65),0 0 18px rgba(255,138,31,.3);
}
.card h3{font-weight:700;letter-spacing:.01em}
.card p{color:var(--ink-soft)!important;font-weight:300}
.status{font-family:var(--display)!important;font-weight:600;letter-spacing:.14em!important}
.status.activo{background:rgba(126,195,82,.12)!important;color:var(--santi-green)!important;border-color:rgba(126,195,82,.5)!important}
.status.pronto{background:rgba(255,255,255,.04)!important;color:var(--ink-faint)!important;border-color:var(--line-strong)!important}
footer p{color:var(--ink-faint)!important}