/* ==========================================================
   Tema visual "Corporativo futurista" — R.C.L.E.A.R. Learning Hub
   Interfaz oscura tipo centro de mando: vidrio, luz y datos.
   Solo estilos (no cambia estructura, textos ni lógica).
   v2: panel principal sólido y estático · letras R-C-L-E-A-R clicables
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap");

:root{
  --void:#05070F; --deep:#0A0F1E; --panel:rgba(17,24,44,.72); --panel2:rgba(24,33,60,.82);
  --solid:#0E1528; --solid2:#121A31;
  --navy:#E8EEFF; --ink:#E8EEFF; --txt:#C9D3EA; --mut:#7E8BA8;
  --blue:#4CC9F0; --blue2:#7B6CFF; --teal:#2EE6C5; --gold:#FFC85C;
  --bg:#05070F; --card:rgba(17,24,44,.72); --line:rgba(122,150,220,.18);
  --ok:#2EE6A0; --okbg:rgba(46,230,160,.12); --warn:#FFC85C; --warnbg:rgba(255,200,92,.12);
  --bad:#FF5C7A; --badbg:rgba(255,92,122,.12); --info:#4CC9F0; --infobg:rgba(76,201,240,.12);
  --Relate:#8A9BC4; --Context:#4CC9F0; --Landscape:#2EE6C5;
  --Explore:#FF8A4C; --Assess:#A77BFF; --Recommend:#FF5C9A;
  --glow:0 0 0 1px rgba(76,201,240,.35),0 0 18px rgba(76,201,240,.25);
  --sh1:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px rgba(0,0,0,.35);
  --sh2:0 0 0 1px rgba(123,108,255,.35),0 20px 50px rgba(0,0,0,.55),0 0 40px rgba(76,201,240,.12);
  --r:14px;
  --fsans:"Space Grotesk","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
  --fmono:"JetBrains Mono","Cascadia Code","Consolas",monospace;
  --grad:linear-gradient(120deg,#4CC9F0 0%,#7B6CFF 55%,#FF5C9A 100%);
}

/* ---------- Fondo ---------- */
html{background:var(--void)}
body{
  font-family:var(--fsans);color:var(--txt);font-size:15px;
  background:
    radial-gradient(900px 520px at 85% -5%,rgba(123,108,255,.28),transparent 60%),
    radial-gradient(800px 500px at -10% 20%,rgba(76,201,240,.18),transparent 60%),
    radial-gradient(700px 400px at 50% 110%,rgba(255,92,154,.12),transparent 60%),
    linear-gradient(180deg,#070B18,#05070F);
  background-attachment:fixed;
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    linear-gradient(rgba(122,150,220,.07) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(122,150,220,.07) 1px,transparent 1px) 0 0/48px 48px;
  mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);
}
body:after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
}
main{position:relative;z-index:1}
header.top{z-index:20}
.helpfab{z-index:40}.modal{z-index:50}.toast{z-index:99}

h1,h2,h3,.shead h2,.vcard h3,.banner b,.st h4{font-family:var(--fsans);color:var(--navy);font-weight:700;letter-spacing:-.5px}
a{color:var(--blue)}
.mut,.small.mut{color:var(--mut)}
.eyebrow{font-family:var(--fmono);color:var(--teal);letter-spacing:3px;font-weight:600;font-size:11.5px}
.eyebrow:before{content:"▍";color:var(--teal);margin-right:6px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Barra superior ---------- */
header.top{
  background:rgba(7,11,24,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(76,201,240,.25);
}
header.top:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--grad);opacity:.8}
header.top nav>a{color:var(--mut);font-weight:500;letter-spacing:.4px}
header.top nav>a:hover{color:var(--navy)}
header.top nav>a.active{color:var(--navy);border-bottom-color:transparent;position:relative}
header.top nav>a.active:after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:2px;background:var(--grad);box-shadow:0 0 12px rgba(76,201,240,.7)}
.brand .hub{color:var(--navy);border-left-color:var(--line);font-family:var(--fmono);font-size:13px;letter-spacing:2px;text-transform:uppercase}
.who{border-left-color:var(--line)}
.who>button{color:var(--mut)}
.avatar{background:var(--grad);color:#05070F;font-weight:700;box-shadow:0 0 16px rgba(123,108,255,.5)}
.menu{background:var(--panel2);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--sh2)}
.menu .nm{border-bottom-color:var(--line)}.menu .nm b{color:var(--navy)}
.menu a{color:var(--txt)}.menu a:hover{background:rgba(76,201,240,.08)}

/* ---------- Letras R-C-L-E-A-R ---------- */
.tiles b,.st .lt,.path .tl2,.letters span{
  border-radius:10px!important;color:#05070F!important;font-weight:700;
  border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 0 14px color-mix(in srgb,var(--c,#4CC9F0) 60%,transparent),inset 0 0 10px rgba(255,255,255,.25)!important;
  background-image:linear-gradient(160deg,rgba(255,255,255,.35),transparent 60%)!important;
}
.tiles b{box-shadow:0 0 10px rgba(76,201,240,.35),inset 0 0 8px rgba(255,255,255,.25)!important}

/* Letras clicables (encabezado, login y panel principal) */
header .tiles b,.loginbar .tiles b,.path .tl2{cursor:pointer;transition:transform .15s,box-shadow .15s,filter .15s}
header .tiles b:hover,.loginbar .tiles b:hover{transform:translateY(-2px);filter:brightness(1.15);box-shadow:0 0 18px rgba(76,201,240,.7),inset 0 0 8px rgba(255,255,255,.3)!important}
.path .tl2{z-index:2}
.path .tl2:hover{transform:translate(-50%,50%) scale(1.15);filter:brightness(1.15);box-shadow:0 0 24px rgba(76,201,240,.85)!important}

/* ---------- Paneles ---------- */
.card,.kpi,.pill,.tablewrap,details.dv,.q{
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);color:var(--txt);
}
.card h1,.card h3{color:var(--navy)}
.kpi{position:relative;overflow:hidden}
.kpi:after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--acc,var(--blue)),transparent);box-shadow:0 0 14px var(--acc,var(--blue))}
.kpi .v{font-family:var(--fmono);font-weight:600;color:var(--navy);letter-spacing:-1px;text-shadow:0 0 18px rgba(76,201,240,.35)}
.kpi .l{color:var(--mut);font-family:var(--fmono);letter-spacing:1.6px}
.kpi .l svg,.pill .ic,.feats .ic{background:rgba(76,201,240,.1)!important;color:var(--blue)!important;border:1px solid rgba(76,201,240,.3);box-shadow:0 0 12px rgba(76,201,240,.2)}
.pill b{color:var(--navy)}.pill span{color:var(--mut)}

.st{
  background:var(--panel);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh1);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;color:var(--txt);
}
.st:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c);box-shadow:0 0 16px var(--c)}
.st:after{content:"";position:absolute;inset:0;background:radial-gradient(260px 120px at 30% -20%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%);pointer-events:none}
.st:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--c) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 18px 40px rgba(0,0,0,.5),0 0 30px color-mix(in srgb,var(--c) 25%,transparent)}
.st.cur{border-color:var(--blue);background:var(--panel2);box-shadow:var(--glow)}
.st h4{color:var(--navy)}.st p{color:var(--mut)}
.st .num{font-family:var(--fmono);color:var(--c)}
.st .go{background:rgba(255,255,255,.04);color:var(--navy);border:1px solid var(--line)}
.st:hover .go{background:var(--c);color:#05070F;box-shadow:0 0 14px var(--c)}

/* El panel de letras reemplaza a "Tu ruta, paso a paso" en Inicio y en el login
   (la sección de las seis etapas se mantiene en Metodología) */
main:has(#ruta) .shead,main:has(#ruta) .fw,
main:has(.loginbar) .shead,main:has(.loginbar) .fw{display:none}

/* ---------- Hero ---------- */
.hx{border-bottom:1px solid var(--line)}
.hx h1{
  font-size:clamp(38px,4.4vw,62px);line-height:1.04;letter-spacing:-2px;font-weight:700;
  background:linear-gradient(180deg,#FFFFFF 10%,#A9B8E0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hx .lead{color:var(--txt);font-size:18px}
.feats div{color:var(--txt)}
.feats .ic svg{color:var(--blue)}

/* Panel principal: sólido y estático */
.visual{
  border:1px solid rgba(122,150,220,.28);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.55);overflow:hidden;
  background:
    linear-gradient(rgba(122,150,220,.07) 1px,transparent 1px) 0 0/32px 32px,
    linear-gradient(90deg,rgba(122,150,220,.07) 1px,transparent 1px) 0 0/32px 32px,
    var(--solid);
}
.visual:before,.visual:after{content:none!important;animation:none!important}
.vcard{
  position:relative;z-index:2;background:var(--solid2);backdrop-filter:none;-webkit-backdrop-filter:none;
  border:1px solid rgba(76,201,240,.3);border-radius:18px;
  box-shadow:0 0 0 1px rgba(123,108,255,.12),0 24px 48px rgba(0,0,0,.55);
}
.vcard h3{color:var(--navy)}
.vcard h3:before{content:"// ";font-family:var(--fmono);color:var(--teal);font-size:.75em}
.path{margin-bottom:26px}
/* Escalera R-C-L-E-A-R más vertical y diagonal */
.path{width:80%;height:auto;aspect-ratio:1/1;margin:6px auto 18px}
.path:after{
  content:"👆 Click on each letter to know more";position:absolute;left:0;top:0;bottom:auto;
  width:175px;white-space:normal;line-height:1.45;
  font-family:var(--fmono);font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--teal);
  padding:7px 12px;border:1px solid rgba(46,230,160,.35);border-radius:12px;background:rgba(46,230,160,.08);
  animation:hint 2.4s ease-in-out infinite;pointer-events:none;
}
@keyframes hint{0%,100%{opacity:.75}50%{opacity:1;box-shadow:0 0 12px rgba(46,230,160,.35)}}
@media (max-width:700px){.path{width:100%}}
.path svg polyline{stroke:#4CC9F0!important;opacity:.55}
.path .dot{box-shadow:0 0 8px currentColor}
.vbadge{background:#0F2A2A;border:1px solid rgba(46,230,160,.35);color:var(--navy);font-family:var(--fmono);font-size:13px}
.vbadge i{background:var(--ok);box-shadow:0 0 12px var(--ok);color:#05070F}
.vprog,.vprog b{color:var(--txt)!important}

/* ---------- Botones ---------- */
.btn{
  font-family:var(--fsans);font-weight:600;letter-spacing:.4px;border:0;border-radius:12px;color:#05070F;
  background:var(--grad);background-size:200% 100%;
  box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 10px 30px rgba(123,108,255,.35),0 0 20px rgba(76,201,240,.25);
  transition:background-position .4s,transform .15s,box-shadow .2s;
}
.btn:hover{background-position:100% 0;transform:translateY(-2px);text-decoration:none;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 14px 36px rgba(123,108,255,.5),0 0 30px rgba(76,201,240,.4)}
.btn.lg{font-size:17px;padding:17px 32px;border-radius:14px}
.btn.ghost,.btn.glass{background:rgba(255,255,255,.04);color:var(--navy);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover,.btn.glass:hover{border-color:var(--blue);box-shadow:var(--glow);background:rgba(76,201,240,.08)}
.btn.ok{background:linear-gradient(120deg,#2EE6A0,#2EE6C5);color:#05070F}
.btn.danger{background:rgba(255,92,122,.08);color:var(--bad);border:1px solid rgba(255,92,122,.4);box-shadow:none}
.btn.link{background:none;box-shadow:none;color:var(--blue);border:0}
.btn.link:hover{background:none;box-shadow:none;color:var(--navy);transform:translateX(3px)}
.btn:disabled{opacity:.4}

/* ---------- Estados y etiquetas ---------- */
.chip{font-family:var(--fmono);font-size:11.5px;border:1px solid currentColor;background:transparent!important}
.chip:before{box-shadow:0 0 8px currentColor}
.st-pending,.st-locked{color:var(--mut)}
.tag{color:#05070F;box-shadow:0 0 10px rgba(76,201,240,.25)}
.type{background:rgba(255,255,255,.05);color:var(--txt);border:1px solid var(--line);font-family:var(--fmono);font-size:11.5px}

/* ---------- Progreso ---------- */
.bar{background:rgba(255,255,255,.06);height:6px}
.bar>i{background:var(--grad);box-shadow:0 0 12px rgba(76,201,240,.7)}
.ring{background:conic-gradient(#4CC9F0 0,#7B6CFF calc(var(--p)*1%),rgba(255,255,255,.07) 0);filter:drop-shadow(0 0 10px rgba(76,201,240,.45))}
.ring>div{background:#0A0F1E}
.ring b{font-family:var(--fmono);color:var(--navy)}

/* ---------- Línea de tiempo ---------- */
.tl:before{background:linear-gradient(180deg,#4CC9F0,#7B6CFF,transparent);box-shadow:0 0 10px rgba(76,201,240,.5)}
.tl .node{background:#0A0F1E;border:1px solid var(--line);color:var(--mut);font-family:var(--fmono)}
.tl .node.done{background:var(--ok);border-color:var(--ok);color:#05070F;box-shadow:0 0 14px var(--ok)}
.tl .node.cur{background:var(--grad);border:0;color:#05070F;box-shadow:0 0 0 6px rgba(76,201,240,.12),0 0 20px rgba(123,108,255,.6)}
.row{border-top-color:var(--line)}
.row b{color:var(--navy)}

/* ---------- Franja inferior ---------- */
.banner{
  background:linear-gradient(120deg,rgba(76,201,240,.12),rgba(123,108,255,.14),rgba(255,92,154,.1));
  border:1px solid var(--line);backdrop-filter:blur(14px);position:relative;overflow:hidden;
}
.banner:before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.banner svg{color:var(--blue);filter:drop-shadow(0 0 8px rgba(76,201,240,.6))}
.banner div{border-left-color:var(--line)}
.banner b{color:var(--navy)}.banner span{color:var(--mut)}
.quoteband{border-left:2px solid var(--blue);color:var(--navy);box-shadow:-8px 0 16px -10px rgba(76,201,240,.8)}

/* ---------- Formularios ---------- */
label.f{color:var(--navy);font-weight:600}
.hint{color:var(--mut)}
textarea,input[type=text],input[type=date],select{
  background:rgba(5,7,15,.6);color:var(--navy);border:1px solid var(--line);border-radius:12px;font-family:var(--fsans);
  caret-color:var(--teal);color-scheme:dark;
}
textarea::placeholder,input::placeholder{color:#55617C}
textarea:focus,input:focus,select:focus{border-color:var(--blue);box-shadow:var(--glow);background:rgba(5,7,15,.8)}
textarea[readonly],input[readonly],select:disabled{background:rgba(255,255,255,.03);color:var(--txt)}
select option{background:#0A0F1E;color:var(--navy)}
.counter{color:var(--mut);font-family:var(--fmono)}.counter.okc{color:var(--ok)}
.savebar{background:rgba(7,11,24,.85);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
.savestate{color:var(--mut);font-family:var(--fmono)}
.q .opt{border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--txt)}
.q .opt:hover{background:rgba(76,201,240,.06);border-color:rgba(76,201,240,.35)}
.q .opt.right{background:var(--okbg);border-color:rgba(46,230,160,.5)}
.q .opt.wrong{background:var(--badbg);border-color:rgba(255,92,122,.5)}
.exp{background:rgba(255,255,255,.04);color:var(--txt)}
input[type=radio],input[type=checkbox]{accent-color:#4CC9F0}

/* ---------- Tablas, modales y avisos ---------- */
table.t{background:transparent;color:var(--txt)}
table.t th{background:rgba(10,15,30,.9);color:var(--mut);font-family:var(--fmono);border-bottom:1px solid rgba(76,201,240,.35)}
table.t td{border-bottom:1px solid var(--line)}
table.t tr:hover td{background:rgba(76,201,240,.05)}
.modal{background:rgba(3,5,12,.7);backdrop-filter:blur(6px)}
.modal .box{background:var(--solid2);border:1px solid var(--line);box-shadow:var(--sh2);color:var(--txt)}
.modal .box h1{color:var(--navy)}
.modal .box .card{background:#0B1222!important}
dl.kv dt{color:var(--mut)}dl.kv dd{color:var(--txt)}
.sec{border-top-color:var(--line)}
.alert{border:1px solid;backdrop-filter:blur(10px);color:var(--navy)}
.alert.info{background:var(--infobg);border-color:rgba(76,201,240,.4)}
.alert.warn{background:var(--warnbg);border-color:rgba(255,200,92,.4)}
.alert.bad{background:var(--badbg);border-color:rgba(255,92,122,.4)}
.alert.ok{background:var(--okbg);border-color:rgba(46,230,160,.4)}
.lockbox{border:1px dashed rgba(122,150,220,.35);background:rgba(255,255,255,.02);color:var(--mut)}
.ans{background:rgba(5,7,15,.55);border:1px solid var(--line);color:var(--txt)}
.lvl button{background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--txt)}
.lvl button.sel{border-color:var(--blue);background:rgba(76,201,240,.1);box-shadow:var(--glow)}
.crit{border-bottom-color:var(--line)}
details.dv>summary{color:var(--navy)}
details.dv[open]>summary{border-bottom-color:var(--line)}
.toast{background:rgba(10,15,30,.92);border:1px solid rgba(76,201,240,.4);box-shadow:var(--glow);font-family:var(--fmono)}
.hero p{color:var(--mut)}

/* ---------- Botón de ayuda ---------- */
.helpfab{background:var(--grad);color:#05070F;box-shadow:0 0 0 1px rgba(255,255,255,.2) inset,0 0 26px rgba(123,108,255,.55);font-weight:700}
.helpfab:before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1px solid rgba(76,201,240,.5);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#05070F}
::-webkit-scrollbar-thumb{background:linear-gradient(#4CC9F0,#7B6CFF);border-radius:10px;border:2px solid #05070F}
::selection{background:rgba(123,108,255,.45);color:#fff}

@media (prefers-reduced-motion:reduce){
  .banner:before,.helpfab:before,.eyebrow:before{animation:none}
}

/* Palabra de cada etapa al pasar el cursor sobre las letras */
.path .tl2:after{
  content:attr(data-word);position:absolute;top:50%;white-space:nowrap;pointer-events:none;
  font-family:var(--fsans);font-size:14px;font-weight:700;letter-spacing:.6px;color:#fff;
  padding:6px 14px;border-radius:999px;background:rgba(10,15,30,.92);
  border:1px solid var(--wc);box-shadow:0 0 16px color-mix(in srgb,var(--wc) 55%,transparent);
  opacity:0;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.path .tl2.w-right:after{left:calc(100% + 12px);transform:translate(-12px,-50%)}
.path .tl2.w-left:after{right:calc(100% + 12px);transform:translate(12px,-50%)}
.path .tl2:hover:after{opacity:1;transform:translate(0,-50%)}
.path:has(.tl2:hover):after{opacity:0;animation:none}
@media (hover:none){.path .tl2:after{display:none}}