/* FinLearn — style.css (bundle completo) */

/* ══════════════════════════════════════════════════════════════════
   style-base.css — Variables CSS · Reset · Tipografía · Layout base
   Para editar en bloque: solo este archivo.
   style.css (barrel) lo enlaza todo via @import.
══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   VARIABLES & RESET
═══════════════════════════════════════ */
:root {
  /* ── Fondos ── */
  --bg:#060810; --bg2:#0b0f1a; --surface:#111827; --surface2:#1a2336;
  /* ── Bordes ── */
  --border:rgba(255,255,255,0.08); --border2:rgba(255,255,255,0.14);
  /* ── Accentos ── */
  --accent:#00e5a0; --accent2:#0091ff; --accent3:#ff6b35; --accent4:#a855f7;
  --gold:#f5a623;
  /* ── Semáforo financiero (nuevo) ── */
  --gain:#00ff88;        /* verde neón — ganancias */
  --loss:#ff4b5c;        /* rojo vibrante — pérdidas */
  /* ── Texto (contraste mejorado) ── */
  --text:#edf2fa;        /* antes #e8edf5 — ligeramente más blanco */
  --text2:#8fa8c0;       /* antes #7a8fa6 — más legible sobre glass */
  --text3:#4a6580;
  /* ── Semáforo de estado ── */
  --danger:#ff4b5c; --success:#00ff88;
  /* ── Glass ── */
  --glass-bg:rgba(255,255,255,0.045);
  --glass-border:rgba(255,255,255,0.10);
  --glass-blur:12px;
  /* ── Glow ── */
  --glow-green:rgba(0,255,136,0.30);
  --glow-blue:rgba(0,145,255,0.30);
  --glow-red:rgba(255,75,92,0.30);
  --glow-gold:rgba(251,191,36,0.30);
  /* ── Layout ── */
  --nav-h:58px; --safe-bot:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;font-family:'Instrument Sans',sans-serif;background:var(--bg);color:var(--text);}

/* ═══════════════════════════════════════
   APP SHELL — fixed screens approach
═══════════════════════════════════════ */
#app{position:fixed;inset:0;display:flex;flex-direction:column;background:transparent;}

/* Screens container */
#screens{flex:1;overflow:hidden;position:relative;z-index:1;}
.screen{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  display:none;
  background:transparent;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-width:thin;scrollbar-color:var(--surface2) transparent;
  z-index:1;
}
.screen.active{display:block;}
.screen::-webkit-scrollbar{width:4px;}
.screen::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:4px;}

/* Bottom Nav */
#bottom-nav{
  flex-shrink:0;
  display:flex;background:rgba(6,8,16,0.82);
  border-top:1px solid rgba(255,255,255,0.07);
  padding-bottom:var(--safe-bot);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  position:relative; z-index:10;
}
#bottom-nav.hidden{display:none;}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:10px 4px;gap:3px;cursor:pointer;border:none;background:none;
  color:var(--text3);transition:color .15s,transform .1s;font-size:10px;font-weight:600;
  font-family:'Instrument Sans',sans-serif;letter-spacing:.02em;
}
.bn-item.active{color:var(--accent);}
.screen#s-home,
.screen#s-realmoney,
.screen#s-guides,
.screen#s-tools,
.screen#s-life,
.screen#s-business,
.screen#s-portfolio,
.screen#s-profile,
.screen#s-rank,
.screen#s-stats {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
.bn-item:active{transform:scale(0.9);}
.bn-icon{font-size:22px;line-height:1;}

/* ═══════════════════════════════════════
   ANIMATED BG ELEMENTS (reusable)
═══════════════════════════════════════ */
.bg-orb{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(80px);opacity:.12;
}
.bg-grid{
  position:absolute;inset:0;pointer-events:none;opacity:.025;
  background-image:
    linear-gradient(var(--accent2) 1px,transparent 1px),
    linear-gradient(90deg,var(--accent2) 1px,transparent 1px);
  background-size:40px 40px;
}
.noise-overlay{
  position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

/* Floating particles */
.particle-container{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.particle{
  position:absolute;border-radius:50%;
  animation:particleDrift linear infinite;
  opacity:0;
}
@keyframes particleDrift{
  0%{opacity:0;transform:translateY(100vh) translateX(0) scale(0);}
  10%{opacity:.6;}
  90%{opacity:.3;}
  100%{opacity:0;transform:translateY(-100px) translateX(var(--drift,20px)) scale(1.5);}
}

/* ═══════════════════════════════════════
   TOP NAV
═══════════════════════════════════════ */
.top-nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;
  background:rgba(7,10,15,0.88);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(24px);
  flex-shrink:0;
}
.logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:20px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.nav-pills{display:flex;gap:10px;align-items:center;}
.nav-pill{
  display:flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:20px;
  background:var(--surface);border:1px solid var(--border);
  font-family:'DM Mono',monospace;font-size:12px;
}
.nav-pill .pv{color:var(--text);font-weight:500;}
.nav-pill.streak .pv{color:var(--accent3);}
.nav-pill.xpill .pv{color:var(--accent);}
.nav-avatar{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:14px;cursor:pointer;
  border:2px solid var(--accent);transition:transform .2s;
}
.nav-avatar:hover{transform:scale(1.08);}

/* ═══════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════ */
.h1{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(26px,5vw,36px);line-height:1.15;}
.h2{font-family:'Syne',sans-serif;font-weight:700;font-size:clamp(18px,4vw,22px);}
.h3{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;}
.label{font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);}
.body{font-size:15px;color:var(--text2);line-height:1.7;}
.body strong{color:var(--text);}



/* ══════════════════════════════════════════════════════════════════
   style-components.css — Botones · Tags · Badges · Modals · Toasts · Inputs · Nav · Cards
   Para editar en bloque: solo este archivo.
   style.css (barrel) lo enlaza todo via @import.
══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════ */

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:50px;font-size:15px;font-weight:600;
  cursor:pointer;border:none;transition:all .2s;
  font-family:'Instrument Sans',sans-serif;text-decoration:none;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:#000;}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(0,255,136,.2), 0 10px 40px var(--glow-green);}
.btn-primary:active{transform:scale(0.96);transition:transform .1s;}
.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border2);}
.btn-secondary:hover{border-color:var(--gain);color:var(--gain);box-shadow:0 4px 20px rgba(0,255,136,.15);}
.btn-secondary:active{transform:scale(0.96);transition:transform .1s;}
.btn-ghost{background:transparent;color:var(--text2);padding:10px 16px;font-size:14px;}
.btn-ghost:hover{color:var(--text);}
.btn-ghost:active{transform:scale(0.96);transition:transform .1s;}
.btn-fire{background:linear-gradient(135deg,var(--accent3),#ff4757);color:#fff;}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,107,53,.4);}
.btn-fire:active{transform:scale(0.96);transition:transform .1s;}
.btn-block{width:100%;}
.btn-sm{padding:8px 16px;font-size:13px;}

/* Tags */
.tag{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 10px;border-radius:50px;font-size:11px;font-weight:600;
  font-family:'DM Mono',monospace;
}
.tag-green{background:rgba(0,229,160,.1);color:var(--accent);border:1px solid rgba(0,229,160,.2);}
.tag-blue{background:rgba(0,145,255,.1);color:var(--accent2);border:1px solid rgba(0,145,255,.2);}
.tag-orange{background:rgba(255,107,53,.1);color:var(--accent3);border:1px solid rgba(255,107,53,.2);}
.tag-purple{background:rgba(168,85,247,.1);color:var(--accent4);border:1px solid rgba(168,85,247,.2);}
.tag-gold{background:rgba(245,166,35,.1);color:var(--gold);border:1px solid rgba(245,166,35,.2);}
.tag-yellow{background:rgba(250,204,21,.1);color:#facc15;border:1px solid rgba(250,204,21,.2);}
.tag-red{background:rgba(239,68,68,.1);color:var(--danger);border:1px solid rgba(239,68,68,.2);}

/* Card */
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:16px;padding:18px;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
}
.card-glow{position:relative;}
.card-glow::before{
  content:'';position:absolute;inset:-1px;border-radius:17px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  z-index:-1;opacity:.2;
}

/* Progress */
.pbar{height:6px;background:var(--surface2);border-radius:10px;overflow:hidden;}
.pbar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.pbar-fill.gold{background:linear-gradient(90deg,var(--gold),var(--accent3));}
.pbar-fill.purple{background:linear-gradient(90deg,var(--accent4),var(--accent2));}
.pbar.thick{height:10px;}

/* Divider */
.divider{height:1px;background:var(--border);margin:16px 0;}

/* Pulse dot */
.pdot{
  width:8px;height:8px;border-radius:50%;background:var(--accent);
  animation:pdotPulse 1.5s infinite;display:inline-block;flex-shrink:0;
}
@keyframes pdotPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,160,.4);}50%{box-shadow:0 0 0 6px rgba(0,229,160,0);}}

/* Ticker */
.ticker{
  display:flex;align-items:center;gap:10px;
  padding:9px 16px;border-radius:50px;
  background:var(--surface);border:1px solid var(--border);
  font-size:13px;color:var(--text2);overflow:hidden;
}
.ticker-txt{animation:tickSlide 7s ease infinite;}
@keyframes tickSlide{0%,75%{opacity:1;transform:none;}88%{opacity:0;transform:translateX(-16px);}94%{opacity:0;transform:translateX(16px);}100%{opacity:1;transform:none;}}
.ticker em{color:var(--text);font-style:normal;font-weight:600;}

/* Toast */
.toast-wrap{
  position:fixed;
  bottom:80px;
  right:16px;
  z-index:9999;
  display:flex;
  flex-direction:column-reverse; /* Nuevos toasts aparecen debajo, apilan hacia arriba */
  gap:10px;
  align-items:flex-end;
  pointer-events:none;
  max-height:calc(100vh - 120px);
  overflow:hidden; /* Evita saturación visual si acumulan muchos */
}
.toast{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:10px 14px;max-width:260px;pointer-events:all;cursor:pointer;
  animation:toastIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
  box-shadow:0 20px 50px rgba(0,0,0,.5);
}
.toast.out{animation:toastOut .25s ease forwards;}
.toast-t{font-weight:700;font-size:13px;margin-bottom:3px;}
.toast-b{font-size:12px;color:var(--text2);}
.toast.t-success{border-color:var(--accent);}
.toast.t-success .toast-t{color:var(--accent);}
.toast.t-fire{border-color:var(--accent3);}
.toast.t-fire .toast-t{color:var(--accent3);}
.toast.t-social{border-color:var(--accent4);}
.toast.t-social .toast-t{color:var(--accent4);}
.toast.t-danger{border-color:var(--danger);}
.toast.t-danger .toast-t{color:var(--danger);}
@keyframes toastIn{from{opacity:0;transform:translateX(40px);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateX(40px);}}

/* Modal */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);z-index:500;
  display:none;align-items:flex-end;justify-content:center;
  padding:0;
}
@media(min-width:600px){.modal-bg{align-items:center;padding:20px;}}
.modal-bg.open{display:flex;}
.modal{
  background:var(--bg2);border:1px solid var(--border2);
  border-radius:24px 24px 0 0;padding:28px 24px;
  width:100%;max-width:480px;max-height:90vh;overflow-y:auto;
  position:relative;
  animation:modalUp .35s cubic-bezier(.34,1.56,.64,1);
}
@media(min-width:600px){.modal{border-radius:24px;}}
@keyframes modalUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:none;}}
.modal-close{
  position:absolute;top:14px;right:14px;
  background:var(--surface2);border:none;color:var(--text2);
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}

/* Confetti */
.confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden;}
.cp{position:absolute;top:-12px;animation:cpFall linear forwards;border-radius:2px;}
@keyframes cpFall{to{transform:translateY(110vh) rotate(720deg);opacity:0;}}

/* XP pop */
.xp-pop{
  position:fixed;pointer-events:none;z-index:9000;
  font-family:'Syne',sans-serif;font-weight:800;font-size:22px;color:var(--accent);
  animation:xpFly 1.2s ease forwards;
}
@keyframes xpFly{0%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-70px) scale(1.4);}}

/* ═══════════════════════════════════════
   SCREEN: ONBOARDING
═══════════════════════════════════════ */
#s-onboard{background:transparent;}

.ob-wrap{
  min-height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding:32px 24px 80px;position:relative;
}
.ob-step{display:none;flex-direction:column;width:100%;max-width:460px;animation:fadeUp .4s ease;padding-bottom:40px;min-height:auto;}
.ob-step.active{display:flex;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

.ob-logo{
  font-family:'Syne',sans-serif;font-weight:800;font-size:28px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  text-align:center;margin-bottom:32px;
}
.ob-emoji{font-size:56px;text-align:center;margin-bottom:16px;}
.ob-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(22px,5vw,30px);text-align:center;margin-bottom:10px;line-height:1.2;}
.ob-sub{font-size:15px;color:var(--text2);text-align:center;line-height:1.65;margin-bottom:32px;}

.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;}
.goal-card{
  background:var(--surface);border:2px solid var(--border);
  border-radius:16px;padding:18px 14px;cursor:pointer;
  transition:all .2s;text-align:center;
  will-change:transform;transform:translateZ(0);
}
.goal-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.goal-card:active{transform:scale(0.97);transition:transform .1s;}
.goal-card.selected{border-color:var(--accent);background:rgba(0,229,160,.06);}
.goal-icon{font-size:32px;margin-bottom:8px;}
.goal-name{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;margin-bottom:4px;}
.goal-desc{font-size:11px;color:var(--text2);line-height:1.4;}

.ob-input{
  width:100%;padding:14px 18px;border-radius:14px;
  background:var(--surface);border:2px solid var(--border);
  color:var(--text);font-size:16px;outline:none;margin-bottom:16px;
  font-family:'Instrument Sans',sans-serif;transition:border-color .2s;
}
.ob-input:focus{border-color:var(--accent);}

.level-path{display:flex;align-items:center;justify-content:center;gap:0;margin:24px 0;overflow-x:auto;}
.level-node{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  flex-shrink:0;
}
.level-node .ln-circle{
  width:44px;height:44px;border-radius:50%;border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:var(--surface);position:relative;
}
.level-node.active .ln-circle{border-color:var(--accent);box-shadow:0 0 16px rgba(0,229,160,.25);}
.level-node.locked .ln-circle{opacity:.4;}
.level-node .ln-name{font-size:10px;color:var(--text2);white-space:nowrap;}
.level-connector{width:28px;height:2px;background:var(--border);flex-shrink:0;margin-top:-16px;}
.level-connector.active{background:var(--accent);}

.projection-preview{
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:20px;margin-bottom:24px;
  text-align:center;
}
.proj-amount{
  font-family:'Syne',sans-serif;font-weight:800;font-size:40px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.proj-label{font-size:13px;color:var(--text2);margin-top:4px;}

.ob-dots{display:flex;justify-content:center;gap:6px;margin-bottom:24px;}
.ob-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);}
.ob-dot.active{width:20px;background:var(--accent);}
.ob-dot{transition:all .3s;}

/* ═══════════════════════════════════════
   SCREEN: HOME
═══════════════════════════════════════ */
#s-home{background:transparent;}

.home-inner{padding:20px;max-width:900px;margin:0 auto;width:100%;position:relative;}

/* Loss aversion banner */
.loss-banner{
  background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(255,107,53,.08));
  border:1px solid rgba(239,68,68,.25);border-radius:14px;
  padding:14px 16px;margin-bottom:16px;
  display:flex;align-items:center;gap:12px;
  animation:urgencyPulse 2s ease infinite;
}
@keyframes urgencyPulse{0%,100%{border-color:rgba(239,68,68,.25);}50%{border-color:rgba(239,68,68,.5);}}
.loss-icon{font-size:24px;animation:shake .4s ease infinite;}
@keyframes shake{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(8deg);}}
.loss-text .lt-title{font-weight:700;font-size:14px;color:var(--danger);}
.loss-text .lt-sub{font-size:12px;color:var(--text2);}

/* Goal progress bar (sticky) */
.goal-tracker{
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:14px 16px;margin-bottom:16px;
}
.gt-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.gt-goal{font-size:13px;font-weight:600;}
.gt-pct{font-family:'DM Mono',monospace;font-size:12px;color:var(--accent);}
.gt-sub{font-size:11px;color:var(--text2);margin-top:6px;}

/* Percentile hero */
.perc-hero{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:22px;margin-bottom:16px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;position:relative;overflow:hidden;
}
.perc-hero::after{
  content:'';position:absolute;right:-40px;top:-40px;
  width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,160,.07),transparent 70%);
  pointer-events:none;
}
.perc-num{
  font-family:'Syne',sans-serif;font-weight:800;font-size:54px;line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.perc-label{font-size:13px;color:var(--text2);margin-top:6px;}
.perc-label strong{color:var(--text);}
.level-badge{
  background:linear-gradient(135deg,rgba(0,145,255,.2),rgba(168,85,247,.2));
  border:1px solid rgba(0,145,255,.3);
  border-radius:14px;padding:16px 20px;text-align:center;flex-shrink:0;
}
.lb-num{font-family:'Syne',sans-serif;font-weight:800;font-size:32px;}
.lb-name{font-size:11px;color:var(--text2);margin-top:2px;font-weight:600;white-space:nowrap;}

/* Section header */
.sec-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.sec-title{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;}

/* Modules — regla base, sobreescrita más abajo para móvil */
.modules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px;}
.mod-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:16px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  will-change:transform;transform:translateZ(0);backface-visibility:hidden;
}
.mod-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.mod-card:hover{border-color:rgba(0,255,136,.35);transform:translateY(-3px);box-shadow:0 8px 32px var(--glow-green);}
.mod-card:hover::before{transform:scaleX(1);}
.mod-card:active{transform:scale(0.97) translateY(0);transition:transform .1s;}
.mod-card.done{border-color:rgba(0,229,160,.25);}
.mod-card.done::before{transform:scaleX(1);}
.mod-card.locked{opacity:.5;cursor:default;}
.mod-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}
.mod-icon{font-size:26px;}
.mod-title{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;margin-bottom:4px;}
.mod-desc{font-size:12px;color:var(--text2);margin-bottom:10px;line-height:1.45;}
.mod-pbar{margin-bottom:8px;}
.mod-footer{display:flex;align-items:center;justify-content:flex-start;gap:10px;}
.mod-speedrun-btn{margin-left:auto;background:rgba(240,180,41,.12);border:1px solid rgba(240,180,41,.3);border-radius:6px;padding:2px 6px;font-size:12px;cursor:pointer;color:var(--gold);line-height:1.4;flex-shrink:0;}
.mod-speedrun-btn:active{transform:scale(.92);}
.mod-xp{font-family:'DM Mono',monospace;font-size:11px;color:var(--accent);}
.mod-users{font-size:11px;color:var(--text3);}

/* Projection widget */
.proj-widget{
  background:linear-gradient(135deg,rgba(0,229,160,.04),rgba(0,145,255,.04));
  border:1px solid rgba(0,229,160,.15);border-radius:20px;
  padding:22px;margin-bottom:16px;overflow:hidden;
}
.proj-slider-row{display:flex;align-items:center;gap:12px;margin:12px 0;}
.proj-slider{
  flex:1;-webkit-appearance:none;appearance:none;height:6px;
  border-radius:10px;background:var(--surface2);outline:none;cursor:pointer;
}
.proj-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:2px solid var(--bg);
  box-shadow:0 0 10px rgba(0,229,160,.4);
}
.proj-val{font-family:'DM Mono',monospace;font-size:13px;color:var(--accent);min-width:50px;}
.proj-result{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;
}
.pr-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;min-width:0;overflow:hidden;}
.pr-val{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(15px,4.5vw,20px);color:var(--accent);word-break:break-all;}
.pr-lab{font-size:11px;color:var(--text2);margin-top:3px;}

/* Invite */
.invite-widget{
  background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(0,145,255,.06));
  border:1px solid rgba(168,85,247,.2);border-radius:20px;
  padding:20px;margin-bottom:16px;
}
.invite-row{display:flex;gap:8px;margin:12px 0;}
.invite-input{
  flex:1;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;padding:10px 14px;color:var(--text);
  font-family:'DM Mono',monospace;font-size:12px;outline:none;min-width:0;
}
.invite-perks{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.invite-perk{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);}
.invite-perk strong{color:var(--text);}

/* Challenge */
.chal-widget{
  background:linear-gradient(135deg,rgba(255,107,53,.06),rgba(168,85,247,.04));
  border:1px solid rgba(255,107,53,.2);border-radius:20px;
  padding:20px;margin-bottom:16px;
}
.chal-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.chal-timer{font-family:'DM Mono',monospace;font-size:22px;color:var(--accent3);}
.chal-members{display:flex;flex-direction:column;gap:8px;}
.chal-row{display:flex;align-items:center;gap:10px;font-size:13px;}
.chal-name{width:90px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chal-name.me{color:var(--accent);font-weight:600;}
.chal-pbar{flex:1;}
.chal-pct{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);width:30px;text-align:right;}

/* Home ranking */
.rank-widget{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:16px;}
.rank-row{
  display:flex;align-items:center;gap:10px;
  padding:8px;border-radius:10px;transition:background .15s;
}
.rank-row:hover{background:var(--surface2);}
.rank-row.me{background:rgba(0,229,160,.06);border:1px solid rgba(0,229,160,.15);}
.rank-pos{font-family:'DM Mono',monospace;font-size:13px;color:var(--text3);width:22px;text-align:center;flex-shrink:0;}
.rank-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.rank-name{flex:1;font-size:13px;font-weight:500;}
.rank-str{font-size:12px;}
.rank-xp{font-family:'DM Mono',monospace;font-size:12px;color:var(--accent);}



/* ══════════════════════════════════════════════════════════════════
   style-screens.css — Pantallas: Onboarding · Home · Lección · Perfil · Bolsa · Negocios · Vida
   Para editar en bloque: solo este archivo.
   style.css (barrel) lo enlaza todo via @import.
══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   SCREEN: LESSON
═══════════════════════════════════════ */
#s-lesson{background:transparent;}

.lesson-inner{flex:1;padding:24px;max-width:740px;margin:0 auto;width:100%;}

.lesson-hdr{margin-bottom:24px;}
.lesson-title-big{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(22px,5vw,28px);line-height:1.2;margin:10px 0;}
.lesson-intro{font-size:15px;color:var(--text2);line-height:1.7;}

.content-block{margin-bottom:20px;}
.content-block h3{font-family:'Syne',sans-serif;font-weight:700;font-size:17px;margin-bottom:8px;}
.content-block p{font-size:14px;color:var(--text2);line-height:1.72;margin-bottom:8px;}

.hl-box{
  padding:15px 18px;border-radius:12px;margin:14px 0;
  border-left:3px solid var(--accent);background:rgba(0,229,160,.05);
}
.hl-box.warn{border-left-color:var(--accent3);background:rgba(255,107,53,.05);}
.hl-box.info{border-left-color:var(--accent2);background:rgba(0,145,255,.05);}
.hl-box .hl-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--accent);letter-spacing:.08em;margin-bottom:5px;}
.hl-box.warn .hl-label{color:var(--accent3);}
.hl-box.info .hl-label{color:var(--accent2);}
.hl-box p{color:var(--text2);font-size:13px;line-height:1.65;margin:0;}

.formula-box{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:18px;text-align:center;margin:14px 0;
}
.formula{font-family:'DM Mono',monospace;font-size:17px;color:var(--accent);}
.formula-lab{font-size:11px;color:var(--text3);margin-top:5px;}

.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0;}
.sbox{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;text-align:center;}
.sbox-val{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--accent);}
.sbox-lab{font-size:10px;color:var(--text3);margin-top:3px;}

.quiz-wrap{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;margin:20px 0;}
.quiz-q{font-family:'Syne',sans-serif;font-weight:700;font-size:16px;margin-bottom:16px;line-height:1.4;}
.quiz-opts{display:flex;flex-direction:column;gap:8px;}
.quiz-opt{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;cursor:pointer;transition:all .15s;
  font-size:14px;display:flex;align-items:center;gap:10px;
}
.quiz-opt:hover{border-color:var(--accent2);background:rgba(0,145,255,.04);}
.quiz-opt.correct{border-color:var(--accent);background:rgba(0,229,160,.07);color:var(--accent);}
.quiz-opt.wrong{border-color:var(--danger);background:rgba(239,68,68,.07);color:var(--danger);}
.quiz-letter{
  width:24px;height:24px;border-radius:6px;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:'DM Mono',monospace;font-size:11px;flex-shrink:0;
}
.quiz-fb{margin-top:12px;padding:12px;border-radius:10px;display:none;font-size:13px;line-height:1.5;}
.quiz-fb.show{display:block;}
.quiz-fb.ok{background:rgba(0,229,160,.07);border:1px solid rgba(0,229,160,.2);color:var(--accent);}
.quiz-fb.bad{background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.2);color:var(--danger);}

.lesson-footer{
  position:sticky;bottom:0;background:var(--bg);
  border-top:1px solid var(--border);padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.lf-xp{font-size:13px;color:var(--text2);}
.lf-xp strong{color:var(--accent);}

/* ═══════════════════════════════════════
   SCREEN: CERTIFICATE
═══════════════════════════════════════ */
#s-cert{
  background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(251,191,36,.07),transparent 60%),var(--bg);
  align-items:center;
}
.cert-wrap{max-width:520px;width:100%;padding:32px 20px;text-align:center;}
.cert-card{
  background:linear-gradient(135deg,var(--bg2),#111827);
  border:1px solid var(--gold);border-radius:24px;padding:36px 28px;
  position:relative;overflow:hidden;margin-bottom:20px;
  box-shadow:0 0 60px rgba(251,191,36,.12);
}
.cert-shine{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at top,rgba(251,191,36,.06),transparent 55%);
}
.cert-lines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 8px,rgba(251,191,36,.02) 8px,rgba(251,191,36,.02) 9px);
}
.cert-logo-txt{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px;}
.cert-badge-icon{
  width:72px;height:72px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--accent3));
  display:flex;align-items:center;justify-content:center;
  font-size:32px;margin:0 auto 16px;
  box-shadow:0 0 30px rgba(251,191,36,.3);
}
.cert-issued{font-family:'Syne',sans-serif;font-weight:700;font-size:11px;letter-spacing:.14em;color:var(--text3);margin-bottom:4px;}
.cert-name-big{
  font-family:'Syne',sans-serif;font-weight:800;font-size:26px;
  background:linear-gradient(135deg,var(--gold),var(--accent3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:4px;
}
.cert-mod-label{font-size:13px;color:var(--text2);margin-bottom:20px;}
.cert-stats-row{display:flex;justify-content:center;gap:20px;margin-bottom:20px;}
.cs-box{text-align:center;}
.cs-val{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;color:var(--gold);}
.cs-lab{font-size:10px;color:var(--text3);}
.cert-footer-txt{font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);}

/* ═══════════════════════════════════════
   SCREEN: RANKING
═══════════════════════════════════════ */
#s-rank{background:radial-gradient(ellipse 100% 30% at 50% 0%,rgba(168,85,247,.08),transparent 40%);}
.rank-inner{padding:20px;max-width:700px;margin:0 auto;width:100%;}

.podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:8px 0 28px;padding-top:16px;}
.pd-slot{text-align:center;display:flex;flex-direction:column;align-items:center;}
.pd-av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;margin:0 auto 6px;border:2px solid;}
.pd-name{font-size:12px;font-weight:600;margin-bottom:2px;}
.pd-xp{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);}
.pd-block{border-radius:8px 8px 0 0;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:20px;padding:0 18px;}
.pd-slot.first .pd-av{width:60px;height:60px;font-size:24px;border-color:var(--gold);}
.pd-slot.second .pd-av,.pd-slot.third .pd-av{width:48px;height:48px;font-size:18px;}
.pd-slot.second .pd-av{border-color:#94a3b8;}
.pd-slot.third .pd-av{border-color:#c8773d;}
.pd-slot.first .pd-block{height:75px;background:linear-gradient(180deg,rgba(251,191,36,.15),rgba(251,191,36,.03));border:1px solid rgba(251,191,36,.25);color:var(--gold);}
.pd-slot.second .pd-block{height:58px;background:linear-gradient(180deg,rgba(148,163,184,.12),rgba(148,163,184,.02));border:1px solid rgba(148,163,184,.2);color:#94a3b8;}
.pd-slot.third .pd-block{height:44px;background:linear-gradient(180deg,rgba(200,119,61,.12),rgba(200,119,61,.02));border:1px solid rgba(200,119,61,.2);color:#c8773d;}

.my-pos-card{
  background:rgba(0,229,160,.04);border:1px solid rgba(0,229,160,.2);
  border-radius:14px;padding:16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;
}
.mpc-pos{font-family:'Syne',sans-serif;font-weight:800;font-size:28px;color:var(--accent);}
.full-rank-list{display:flex;flex-direction:column;gap:5px;}

/* ═══════════════════════════════════════
   SCREEN: PROFILE
═══════════════════════════════════════ */
#s-profile{background:transparent;}
.prof-inner{padding:20px;max-width:700px;margin:0 auto;width:100%;}

.prof-hero{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:24px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden;
}
.ph-orb{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,160,.06),transparent 70%);pointer-events:none;}
.prof-av{
  width:76px;height:76px;border-radius:50%;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:800;
  border:3px solid var(--accent);
  box-shadow:0 0 24px rgba(0,229,160,.2);
  position:relative;z-index:1;transition:transform .2s;
  cursor:pointer;
}
.prof-av:hover{transform:scale(1.05);}
.prof-level-ring{
  width:84px;height:84px;border-radius:50%;border:2px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),var(--accent2)) border-box;
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.prof-name{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;}
.prof-handle{font-size:13px;color:var(--text2);margin-bottom:16px;}
.prof-stats{display:flex;justify-content:center;gap:24px;}
.pstat{text-align:center;}
.pstat-v{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--accent);}
.pstat-l{font-size:11px;color:var(--text3);margin-top:2px;}

.perc-card{
  background:rgba(0,229,160,.04);border:1px solid rgba(0,229,160,.15);
  border-radius:16px;padding:20px;text-align:center;margin-bottom:16px;
}
.pc-big{font-family:'Syne',sans-serif;font-weight:800;font-size:40px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.pc-sub{font-size:13px;color:var(--text2);margin-top:4px;}

.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(75px,1fr));gap:8px;margin-bottom:16px;}
.ach{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 6px;text-align:center;cursor:pointer;transition:all .2s;}
.ach:hover{border-color:var(--accent);transform:translateY(-2px);}
.ach.locked{opacity:.35;cursor:default;}
.ach-icon{font-size:22px;margin-bottom:5px;}
.ach-name{font-size:9px;color:var(--text2);line-height:1.3;}

.activity-item{
  display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px;margin-bottom:8px;
}
.ai-icon{font-size:18px;flex-shrink:0;}
.ai-text{flex:1;font-size:13px;line-height:1.4;}
.ai-time{font-size:11px;color:var(--text3);}

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */
/* Celebration */
.cel-emoji{font-size:60px;text-align:center;margin-bottom:14px;animation:celPop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes celPop{from{transform:scale(0);}to{transform:scale(1);}}
.cel-stats{display:flex;justify-content:center;gap:20px;margin:16px 0;}
.cel-stat{text-align:center;}
.cel-val{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;color:var(--accent);}
.cel-lab{font-size:11px;color:var(--text2);}
.share-row{display:flex;gap:8px;}
.btn-tw{background:linear-gradient(135deg,#1da1f2,#0077b6);color:#fff;}
.btn-wa{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;}

/* Challenge */
.chal-reward{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;}
.cr-icon{font-size:22px;}
.cr-info{flex:1;}
.cr-title{font-weight:600;font-size:13px;margin-bottom:2px;}
.cr-sub{font-size:11px;color:var(--text2);}

/* Avatar picker */
.av-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0;}
.av-opt{
  background:var(--surface);border:2px solid var(--border);border-radius:12px;
  padding:12px;text-align:center;cursor:pointer;transition:all .2s;
}
.av-opt:hover{border-color:var(--border2);}
.av-opt.sel{border-color:var(--accent);background:rgba(0,229,160,.06);}
.av-opt .av-em{font-size:28px;display:block;margin-bottom:4px;}
.av-opt .av-nm{font-size:10px;color:var(--text2);}

/* Util */
.mb4{margin-bottom:4px;} .mb8{margin-bottom:8px;} .mb12{margin-bottom:12px;}
.mb16{margin-bottom:16px;} .mb20{margin-bottom:20px;} .mb24{margin-bottom:24px;}
.flex{display:flex;} .flex-col{flex-direction:column;} .items-center{align-items:center;}
.justify-between{justify-content:space-between;} .gap8{gap:8px;} .gap12{gap:12px;}
.text-center{text-align:center;} .w-full{width:100%;}
.col-accent{color:var(--accent);} .col-muted{color:var(--text2);} .col-gold{color:var(--gold);}
.font-syne{font-family:'Syne',sans-serif;font-weight:700;}
.font-mono{font-family:'DM Mono',monospace;}

@media(max-width:500px){
  .stats-strip{grid-template-columns:1fr 1fr;}
  .stats-strip .sbox:last-child:nth-child(3){grid-column:span 2;}
  .perc-hero{flex-direction:column;}
  .perc-num{font-size:44px;}
}

/* ══════════════════════════════════════
   1) DAILY CORE ACTION
══════════════════════════════════════ */
.dca-wrap{margin-bottom:16px;position:relative;}
.dca-card{
  background:linear-gradient(135deg,rgba(0,229,160,.1),rgba(0,145,255,.08));
  border:2px solid rgba(0,229,160,.4);border-radius:20px;
  padding:20px;position:relative;overflow:hidden;
  transition:all .3s;
}
.dca-card.dca-done{
  background:linear-gradient(135deg,rgba(0,229,160,.06),rgba(0,229,160,.02));
  border-color:rgba(0,229,160,.2);
}
.dca-card::before{
  content:'';position:absolute;top:-30px;right:-30px;
  width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,229,160,.15),transparent 70%);
  pointer-events:none;
}
.dca-pulse{
  position:absolute;top:14px;right:14px;
  width:10px;height:10px;border-radius:50%;background:var(--accent);
  animation:dcaPulse 1.2s ease infinite;
}
.dca-pulse.done{background:var(--accent);animation:none;}
@keyframes dcaPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,229,160,.5);}50%{box-shadow:0 0 0 10px rgba(0,229,160,0);}}
.dca-eyebrow{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;color:var(--accent);text-transform:uppercase;margin-bottom:6px;}
.dca-title{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;line-height:1.2;margin-bottom:4px;}
.dca-sub{font-size:12px;color:var(--text2);margin-bottom:14px;}
.dca-timer-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.dca-timer{font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);}
.dca-timer em{color:var(--accent);font-style:normal;font-weight:500;}
.dca-fact-box{
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:14px;margin-bottom:14px;
}
.dca-fact-q{font-size:14px;font-weight:600;margin-bottom:10px;line-height:1.4;}
.dca-fact-opts{display:flex;flex-direction:column;gap:7px;}
.dca-opt{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:9px;padding:10px 13px;cursor:pointer;
  font-size:13px;transition:all .15s;display:flex;align-items:center;gap:8px;
}
.dca-opt:hover{border-color:rgba(0,229,160,.4);background:rgba(0,229,160,.06);}
.dca-opt.dca-correct{border-color:var(--accent);background:rgba(0,229,160,.1);color:var(--accent);}
.dca-opt.dca-wrong{border-color:var(--danger);background:rgba(239,68,68,.08);color:var(--danger);}
.dca-opt-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0;}
.dca-opt.dca-correct .dca-opt-dot{background:var(--accent);}
.dca-opt.dca-wrong .dca-opt-dot{background:var(--danger);}
.dca-done-state{text-align:center;padding:8px 0;}
.dca-done-check{font-size:40px;margin-bottom:8px;animation:dcaDoneIn .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes dcaDoneIn{from{transform:scale(0) rotate(-30deg);}to{transform:scale(1) rotate(0deg);}}
.dca-done-msg{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;color:var(--accent);margin-bottom:4px;}
.dca-done-sub{font-size:12px;color:var(--text2);}

/* Content lock overlay */
.content-locked{position:relative;}
.content-locked::after{
  content:'Completa la acción de hoy para desbloquear';
  position:absolute;inset:0;border-radius:16px;
  background:rgba(7,10,15,.75);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--text2);font-weight:600;
  border:1px dashed var(--border2);
  cursor:pointer;z-index:5;
}
.content-unlocked::after{display:none;}
.content-locked.unlocking::after{animation:unlockFade .4s ease forwards;}
@keyframes unlockFade{to{opacity:0;pointer-events:none;}}

/* ══════════════════════════════════════
   2) VIRTUAL PATRIMONY
══════════════════════════════════════ */
.patrimony-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:20px;margin-bottom:16px;position:relative;overflow:hidden;
}
.patrimony-card::before{
  content:'';position:absolute;bottom:-30px;right:-20px;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(251,191,36,.07),transparent 70%);
  pointer-events:none;
}
.patr-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;}
.patr-amount-wrap{}
.patr-label-sm{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}
.patr-amount{
  font-family:'Syne',sans-serif;font-weight:800;font-size:34px;
  background:linear-gradient(135deg,var(--gold),var(--accent3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  line-height:1;
}
.patr-amount.bump{animation:amountBump .4s cubic-bezier(.34,1.56,.64,1);}
@keyframes amountBump{0%{transform:scale(1);}50%{transform:scale(1.08);}100%{transform:scale(1);}}
.patr-change{font-family:'DM Mono',monospace;font-size:12px;color:var(--success);margin-top:3px;}
.patr-badge{
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(255,107,53,.1));
  border:1px solid rgba(251,191,36,.25);border-radius:10px;
  padding:8px 12px;text-align:center;flex-shrink:0;
}
.patr-badge-icon{font-size:22px;}
.patr-badge-label{font-size:10px;color:var(--gold);font-weight:600;margin-top:2px;}
.patr-projections{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.patr-proj{
  background:rgba(0,0,0,.2);border:1px solid var(--border);
  border-radius:12px;padding:10px 12px;
}
.patr-proj-val{font-family:'Syne',sans-serif;font-weight:800;font-size:17px;color:var(--accent);}
.patr-proj-lab{font-size:10px;color:var(--text2);margin-top:2px;}
.patr-msg{
  background:rgba(0,229,160,.05);border:1px solid rgba(0,229,160,.15);
  border-radius:10px;padding:10px 12px;
  font-size:12px;color:var(--text2);line-height:1.5;font-style:italic;
}
.patr-msg strong{color:var(--accent);font-style:normal;}
.patr-bar-wrap{margin-bottom:4px;}
.patr-bar-top{display:flex;justify-content:space-between;font-size:10px;color:var(--text2);margin-bottom:5px;}
.patr-bar-top span:last-child{color:var(--accent);}

/* ══════════════════════════════════════
   3) VARIABLE REWARDS (CHEST)
══════════════════════════════════════ */
.chest-modal-inner{text-align:center;padding:8px 0;}
.chest-emoji{font-size:72px;animation:chestBounce .6s cubic-bezier(.34,1.56,.64,1);display:block;margin-bottom:8px;}
@keyframes chestBounce{0%{transform:scale(0) rotate(-15deg);}70%{transform:scale(1.15) rotate(5deg);}100%{transform:scale(1) rotate(0deg);}}
.chest-shine{
  position:relative;display:inline-block;
  background:linear-gradient(135deg,var(--gold),var(--accent3));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-family:'Syne',sans-serif;font-weight:800;font-size:28px;
  margin-bottom:6px;
}
.chest-sub{font-size:14px;color:var(--text2);margin-bottom:20px;}
.reward-reveal{
  background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(255,107,53,.08));
  border:2px solid var(--gold);border-radius:16px;
  padding:20px;margin-bottom:20px;position:relative;overflow:hidden;
}
.reward-reveal::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 30%,rgba(251,191,36,.12),transparent 60%);
}
.rr-icon{font-size:48px;margin-bottom:8px;animation:rrPop .5s .2s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes rrPop{from{transform:scale(0);}to{transform:scale(1);}}
.rr-name{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--gold);margin-bottom:4px;}
.rr-desc{font-size:13px;color:var(--text2);}
.rr-xp{font-family:'Syne',sans-serif;font-weight:800;font-size:32px;color:var(--accent);margin-top:8px;animation:rrXp .4s .4s ease both;opacity:0;}
@keyframes rrXp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.chest-opening{animation:chestOpen .3s ease;}
@keyframes chestOpen{0%,100%{transform:rotate(0deg);}25%{transform:rotate(-8deg);}75%{transform:rotate(8deg);}}

/* ══════════════════════════════════════
   4) MICRO-DOPAMINE (XP glow, bar effects)
══════════════════════════════════════ */
.xp-bar-glow{animation:xpGlow .6s ease;}
@keyframes xpGlow{0%,100%{box-shadow:none;}50%{box-shadow:0 0 20px rgba(0,229,160,.6),0 0 40px rgba(0,229,160,.3);}}
.xp-milestone{
  position:fixed;inset:0;pointer-events:none;z-index:9500;
  display:flex;align-items:center;justify-content:center;
}
.xp-milestone-inner{
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border:2px solid var(--accent);border-radius:20px;
  padding:20px 32px;text-align:center;
  animation:milestoneIn .5s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 60px rgba(0,229,160,.3);
}
@keyframes milestoneIn{from{transform:scale(.5) translateY(20px);opacity:0;}to{transform:none;opacity:1;}}
.milestone-xp{font-family:'Syne',sans-serif;font-weight:800;font-size:36px;color:var(--accent);}
.milestone-label{font-size:14px;color:var(--text2);margin-top:4px;}

/* Enhanced XP pop */
.xp-pop-v2{
  position:fixed;pointer-events:none;z-index:9000;
  font-family:'Syne',sans-serif;font-weight:800;font-size:20px;
  animation:xpPopV2 1.3s ease forwards;
  text-shadow:0 0 20px currentColor;
}
@keyframes xpPopV2{
  0%{opacity:0;transform:translateY(0) scale(.6);}
  15%{opacity:1;transform:translateY(-8px) scale(1.1);}
  80%{opacity:1;transform:translateY(-55px) scale(1);}
  100%{opacity:0;transform:translateY(-70px) scale(.8);}
}

/* ══════════════════════════════════════
   5) COST OF INACTION
══════════════════════════════════════ */
.inaction-module{
  border-radius:16px;padding:16px;margin-bottom:16px;
  transition:all .3s;
}
.inaction-module.state-normal{
  background:var(--surface);border:1px solid var(--border);
}
.inaction-module.state-warning{
  background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(255,107,53,.05));
  border:1px solid rgba(239,68,68,.3);
  animation:inactionPulse 2s ease infinite;
}
@keyframes inactionPulse{0%,100%{border-color:rgba(239,68,68,.3);}50%{border-color:rgba(239,68,68,.6);}}
.inaction-module.state-ok{
  background:linear-gradient(135deg,rgba(0,229,160,.06),rgba(0,229,160,.02));
  border:1px solid rgba(0,229,160,.2);
}
.ina-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ina-icon{font-size:22px;}
.ina-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;}
.inaction-module.state-warning .ina-label{color:var(--danger);}
.inaction-module.state-normal .ina-label{color:var(--text2);}
.inaction-module.state-ok .ina-label{color:var(--accent);}
.ina-amount{font-family:'Syne',sans-serif;font-weight:800;font-size:26px;margin-bottom:4px;}
.inaction-module.state-warning .ina-amount{color:var(--danger);}
.inaction-module.state-ok .ina-amount{color:var(--accent);}
.ina-desc{font-size:12px;color:var(--text2);line-height:1.4;}
.ina-streak-row{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.ina-streak-txt{font-size:12px;flex:1;}

/* ══════════════════════════════════════
   6) IDENTITY PROGRESS (5 stages)
══════════════════════════════════════ */
.identity-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:20px;margin-bottom:16px;
}
.identity-stages{display:flex;align-items:center;margin:14px 0;overflow-x:auto;padding-bottom:4px;}
.identity-stages::-webkit-scrollbar{height:3px;}
.identity-stages::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:3px;}
.id-stage{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:5px;}
.id-circle{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  border:2px solid var(--border2);background:var(--surface2);
  transition:all .3s;
}
.id-stage.current .id-circle{
  border-color:var(--accent);background:rgba(0,229,160,.1);
  box-shadow:0 0 14px rgba(0,229,160,.25);
}
.id-stage.done .id-circle{border-color:rgba(0,229,160,.3);background:rgba(0,229,160,.05);}
.id-stage.locked .id-circle{opacity:.3;}
.id-stage-name{font-size:9px;color:var(--text2);white-space:nowrap;font-weight:600;}
.id-stage.current .id-stage-name{color:var(--accent);}
.id-connector{flex:1;height:2px;background:var(--border);min-width:16px;flex-shrink:0;margin-bottom:18px;}
.id-connector.done{background:rgba(0,229,160,.3);}
.id-current-info{
  background:rgba(0,229,160,.05);border:1px solid rgba(0,229,160,.15);
  border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}
.id-curr-stage{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;}
.id-curr-stage span{color:var(--accent);}
.id-next-badge{
  font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:4px 8px;white-space:nowrap;
}
.id-progress-wrap{margin-top:8px;}
.id-prog-label{font-size:11px;color:var(--text2);margin-bottom:5px;display:flex;justify-content:space-between;}

/* ══════════════════════════════════════
   REWARD BADGE NOTIFICATION
══════════════════════════════════════ */
.badge-notif{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);
  z-index:9800;pointer-events:none;
  background:linear-gradient(135deg,var(--surface),var(--surface2));
  border:2px solid var(--accent4);border-radius:50px;
  padding:10px 20px;display:flex;align-items:center;gap:10px;
  box-shadow:0 10px 40px rgba(168,85,247,.3);
  animation:badgeSlide .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.badge-notif.out{animation:badgeOut .3s ease forwards;}
@keyframes badgeSlide{from{opacity:0;transform:translateX(-50%) translateY(-20px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes badgeOut{to{opacity:0;transform:translateX(-50%) translateY(-20px);}}
.bn-icon-big{font-size:24px;}
.bn-text{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;color:var(--accent4);}
.bn-sub{font-size:11px;color:var(--text2);}

/* ══ SCREEN TRANSITIONS ══ */
.screen-enter{animation:screenIn .28s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes screenIn{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:none;}}
.screen-leave{animation:screenOut .2s ease forwards;}
@keyframes screenOut{to{opacity:0;transform:translateX(-12px);}}

/* ══ LESSON NAV BAR ══ */
.lesson-mod-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;background:var(--bg2);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.lmb-back{background:none;border:none;color:var(--text2);cursor:pointer;font-size:13px;
  display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:8px;
  transition:all .15s;white-space:nowrap;font-family:'Instrument Sans',sans-serif;
}
.lmb-back:hover{background:var(--surface);color:var(--text);}
.lmb-pills{display:flex;gap:5px;flex:1;overflow-x:auto;padding:2px 0;}
.lmb-pills::-webkit-scrollbar{display:none;}
.lmb-pill{
  flex-shrink:0;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;cursor:pointer;
  border:1.5px solid var(--border2);background:var(--surface);
  color:var(--text3);transition:all .15s;
}
.lmb-pill.active{border-color:var(--accent);background:rgba(0,229,160,.1);color:var(--accent);}
.lmb-pill.done{border-color:rgba(0,229,160,.25);color:var(--accent);background:rgba(0,229,160,.05);}
.lmb-pill.locked{opacity:.3;cursor:default;}
.lmb-nav{display:flex;gap:4px;flex-shrink:0;}
.lmb-btn{
  background:var(--surface2);border:1px solid var(--border);color:var(--text2);
  border-radius:8px;padding:5px 10px;cursor:pointer;font-size:12px;font-weight:600;
  font-family:'Instrument Sans',sans-serif;transition:all .15s;
}
.lmb-btn:hover{border-color:var(--accent);color:var(--accent);}
.lmb-btn:disabled{opacity:.3;cursor:default;}

/* ══ FINANCIAL ONBOARDING STEP 4 ══ */
.fin-field{margin-bottom:14px;}
.fin-field label{display:block;font-size:12px;color:var(--text2);font-weight:600;margin-bottom:6px;font-family:'DM Mono',monospace;letter-spacing:.04em;}
.fin-input-row{
  display:flex;align-items:center;gap:0;
  background:var(--surface);border:2px solid var(--border2);border-radius:12px;
  overflow:hidden;transition:border-color .2s;
}
.fin-input-row:focus-within{border-color:var(--accent);}
.fin-prefix{
  padding:12px 14px;font-family:'DM Mono',monospace;font-size:15px;
  color:var(--accent);background:rgba(0,229,160,.06);border-right:1px solid var(--border);
  flex-shrink:0;
}
.fin-num{
  flex:1;background:transparent;border:none;color:var(--text);
  font-size:16px;padding:12px 14px;outline:none;
  font-family:'Instrument Sans',sans-serif;
}
.fin-num::placeholder{color:var(--text3);}
.fin-preview{
  background:rgba(0,229,160,.04);border:1px solid rgba(0,229,160,.15);
  border-radius:14px;padding:16px;margin:16px 0;
}
.fp-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.fp-row:last-child{border:none;padding-top:10px;}
.fp-label{font-size:12px;color:var(--text2);}
.fp-val{font-family:'DM Mono',monospace;font-size:13px;color:var(--accent);font-weight:500;}
.fp-val.big{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--gold);}

/* ══ FINANCIAL PROFILE CARD (realistic) ══ */
.finprofile-card{
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:20px;margin-bottom:16px;
}
.fpcard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.fpcard-total-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;}
.fpcard-total{font-family:'Syne',sans-serif;font-weight:800;font-size:30px;background:linear-gradient(135deg,var(--gold),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;}
.fpcard-total.bump{animation:amountBump .4s cubic-bezier(.34,1.56,.64,1);}
.fpcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.fpg{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px;}
.fpg-label{font-size:10px;color:var(--text2);margin-bottom:4px;font-family:'DM Mono',monospace;letter-spacing:.04em;}
.fpg-val{font-family:'Syne',sans-serif;font-weight:800;font-size:17px;}
.fpg-val.g{color:var(--accent);}
.fpg-val.b{color:var(--accent2);}
.fpg-val.o{color:var(--accent3);}
.fpg-val.gold{color:var(--gold);}
.fpg-sub{font-size:10px;color:var(--text3);margin-top:3px;}
.fpcard-proj{
  background:rgba(0,229,160,.04);border:1px solid rgba(0,229,160,.12);
  border-radius:12px;padding:12px;font-size:12px;color:var(--text2);
  line-height:1.55;
}
.fpcard-proj strong{color:var(--accent);}
.fpcard-bar-row{margin-bottom:12px;}
.fpcard-bar-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text2);margin-bottom:5px;}

/* ══ FINANCIAL HEALTH ══ */
.health-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:20px;margin-bottom:16px;
}
.health-top{display:flex;align-items:center;gap:16px;margin-bottom:16px;}
.health-ring-wrap{position:relative;width:76px;height:76px;flex-shrink:0;}
.health-ring-wrap svg{position:absolute;inset:0;transform:rotate(-90deg);}
.health-ring-bg{fill:none;stroke:var(--surface2);stroke-width:7;}
.health-ring-fg{fill:none;stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.34,1.56,.64,1);}
.health-ring-score{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:17px;}
.health-meta{}
.health-title{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;margin-bottom:4px;}
.health-sub{font-size:12px;color:var(--text2);line-height:1.4;}
.health-factors{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.hf-item{background:var(--surface2);border-radius:10px;padding:10px 12px;}
.hf-name{font-size:10px;color:var(--text2);margin-bottom:5px;font-family:'DM Mono',monospace;}
.hf-bar{height:3px;background:var(--bg);border-radius:3px;margin-bottom:5px;overflow:hidden;}
.hf-fill{height:100%;border-radius:3px;transition:width 1s ease;}
.hf-val{font-family:'Syne',sans-serif;font-weight:700;font-size:12px;color:var(--accent);}

/* ══ TEMPORAL PROGRESS ══ */
.temporal-card{
  background:linear-gradient(135deg,rgba(0,145,255,.05),rgba(168,85,247,.03));
  border:1px solid rgba(0,145,255,.18);border-radius:16px;
  padding:16px;margin-bottom:16px;
}
.temporal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0;}
.ts-box{text-align:center;background:rgba(0,0,0,.2);border-radius:10px;padding:10px 6px;}
.ts-val{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--accent2);}
.ts-label{font-size:10px;color:var(--text2);margin-top:2px;}
.temporal-milestones{display:flex;flex-direction:column;gap:7px;margin-top:12px;}
.tm-row{display:flex;align-items:center;gap:10px;}
.tm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.tm-dot.done{background:var(--accent);}
.tm-dot.next{background:var(--accent2);animation:pdotPulse 1.5s infinite;}
.tm-dot.future{background:var(--border2);}
.tm-text{flex:1;font-size:12px;color:var(--text2);line-height:1.3;}
.tm-text b{color:var(--text);}
.tm-days{font-family:'DM Mono',monospace;font-size:11px;color:var(--text3);flex-shrink:0;}

/* ══ DYNAMIC MESSAGE BANNER ══ */
.dyn-banner{
  border-radius:12px;padding:12px 16px;margin-bottom:12px;
  display:flex;align-items:center;gap:10px;font-size:13px;
  animation:fadeUp .35s ease;
}
.dyn-banner.type-warn{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-left:3px solid var(--danger);}
.dyn-banner.type-fire{background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.2);border-left:3px solid var(--accent3);}
.dyn-banner.type-ok{background:rgba(0,229,160,.06);border:1px solid rgba(0,229,160,.2);border-left:3px solid var(--accent);}
.dyn-banner.type-info{background:rgba(0,145,255,.06);border:1px solid rgba(0,145,255,.2);border-left:3px solid var(--accent2);}
.dyn-banner-icon{font-size:18px;flex-shrink:0;}
.dyn-banner-text{flex:1;line-height:1.4;color:var(--text2);}
.dyn-banner-text strong{color:var(--text);}

/* ══ VIRAL SHARE CARD ══ */
.viral-card-preview{
  background:linear-gradient(135deg,#070a0f 0%,#0d1a28 100%);
  border:1px solid var(--border2);border-radius:18px;
  padding:24px;margin-bottom:16px;position:relative;overflow:hidden;
}
.vcp-orb1{position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,160,.12),transparent 70%);pointer-events:none;}
.vcp-orb2{position:absolute;bottom:-20px;left:-20px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(0,145,255,.1),transparent 70%);pointer-events:none;}
.vcp-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px;}
.vcp-user{font-family:'Syne',sans-serif;font-weight:800;font-size:20px;margin-bottom:2px;}
.vcp-stage{font-size:12px;color:var(--text2);margin-bottom:14px;}
.vcp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px;}
.vcp-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:9px 5px;text-align:center;}
.vcp-stat-val{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;color:var(--accent);}
.vcp-stat-lab{font-size:9px;color:var(--text2);margin-top:2px;}
.vcp-quote{font-size:11px;color:var(--text3);font-style:italic;border-top:1px solid rgba(255,255,255,.06);padding-top:12px;line-height:1.5;}
.viral-share-btns{display:flex;flex-direction:column;gap:8px;}
.btn-share-tw{background:linear-gradient(135deg,#1a8cd8,#0063a6);color:#fff;}
.btn-share-wa{background:linear-gradient(135deg,#25d366,#128c7e);color:#fff;}
.btn-share-li{background:linear-gradient(135deg,#0077b5,#005591);color:#fff;}
.btn-share-copy{background:var(--surface2);color:var(--text);border:1px solid var(--border2);}
.btn-share-copy:hover{border-color:var(--accent);color:var(--accent);}

/* ══════════════════════════════════════


/* ══════════════════════════════════════════════════════════════════
   style-simulators.css — Simuladores: Portfolio · Stocks · Negocios · Vida · Rankings · Logros · Patrimonio
   Para editar en bloque: solo este archivo.
   style.css (barrel) lo enlaza todo via @import.
══════════════════════════════════════════════════════════════════ */

   PORTFOLIO / STOCK MARKET SYSTEM
══════════════════════════════════════ */
.portfolio-screen{background:transparent;}
.port-inner{padding:16px;max-width:740px;margin:0 auto;}

/* Portfolio summary bar */
.port-summary{
  background:linear-gradient(135deg,rgba(0,145,255,.08),rgba(0,229,160,.05));
  border:1px solid rgba(0,145,255,.2);border-radius:20px;
  padding:20px;margin-bottom:16px;position:relative;overflow:hidden;
}
.port-summary::before{content:'';position:absolute;top:-30px;right:-30px;
  width:130px;height:130px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,145,255,.12),transparent 70%);pointer-events:none;}
.port-total-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
.port-total{font-family:'Syne',sans-serif;font-weight:800;font-size:32px;
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;}
.port-total.bump{animation:amountBump .4s cubic-bezier(.34,1.56,.64,1);}
.port-change-row{display:flex;align-items:center;gap:8px;margin-top:6px;margin-bottom:14px;}
.port-change{font-family:'DM Mono',monospace;font-size:13px;}
.port-change.up{color:var(--success);}
.port-change.down{color:var(--danger);}
.port-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ps-box{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center;}
.ps-val{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;}
.ps-lab{font-size:10px;color:var(--text2);margin-top:2px;}

/* Stock list */
.stocks-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px;}
.stocks-tabs::-webkit-scrollbar{display:none;}
.stab{flex-shrink:0;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:600;
  background:var(--surface);border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s;}
.stab.active{background:rgba(0,145,255,.12);border-color:var(--accent2);color:var(--accent2);}

.stock-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:14px 16px;margin-bottom:8px;cursor:pointer;transition:all .2s;
  display:flex;align-items:center;gap:12px;
}
.stock-card:hover{border-color:rgba(0,145,255,.45);background:rgba(0,145,255,.06);box-shadow:0 4px 20px var(--glow-blue);}
.stock-card.owned{border-color:rgba(0,255,136,.3);background:rgba(0,255,136,.04);}
.sc-logo{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.sc-info{flex:1;min-width:0;}
.sc-name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-ticker{font-family:'DM Mono',monospace;font-size:11px;color:var(--text2);}
.sc-right{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0;width:88px;min-width:88px;}
.sc-price{font-family:'Syne',sans-serif;font-weight:800;font-size:12px;white-space:nowrap;text-align:right;max-width:82px;overflow:hidden;text-overflow:ellipsis;}
.sc-sparkline{display:flex;justify-content:flex-end;}
.sc-pct{display:inline-block;}
.sc-pct{font-family:'DM Mono',monospace;font-size:11px;padding:2px 6px;border-radius:6px;margin-top:2px;display:inline-block;}
.sc-pct.up{background:rgba(0,255,136,.12);color:var(--gain);text-shadow:0 0 8px rgba(0,255,136,.4);}
.sc-pct.down{background:rgba(255,75,92,.12);color:var(--loss);text-shadow:0 0 8px rgba(255,75,92,.3);}
.sc-owned{font-size:10px;color:var(--accent);margin-top:2px;font-family:'DM Mono',monospace;}

/* Stock detail modal */
.stock-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.sdh-logo{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:26px;}
.sdh-info{flex:1;min-width:0;overflow:hidden;}
.sdh-name{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sdh-right{flex-shrink:0;text-align:right;max-width:48%;}
.sdh-ticker{font-family:'DM Mono',monospace;font-size:12px;color:var(--text2);}
.sdh-price{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;}
.mini-chart{height:70px;margin:12px 0;position:relative;overflow:hidden;}
.mini-chart svg{width:100%;height:100%;}
.stock-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;}
.sm-box{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.sm-label{font-size:10px;color:var(--text2);font-family:'DM Mono',monospace;letter-spacing:.04em;}
.sm-val{font-family:'Syne',sans-serif;font-weight:700;font-size:14px;margin-top:3px;}
.buy-sell-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:12px;}
.qty-control{display:flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:4px;}
.qty-btn{width:30px;height:30px;border-radius:8px;border:none;background:var(--surface);color:var(--text);cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;font-family:'Syne',sans-serif;transition:all .15s;}
.qty-btn:hover{background:var(--accent);color:var(--bg);}
.qty-num{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;min-width:28px;text-align:center;}
.qty-input{background:transparent;border:none;outline:none;color:var(--text);width:52px;-moz-appearance:textfield;}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty-total{text-align:center;font-size:11px;color:var(--text2);}

/* Dividend badge */
.div-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:6px;padding:3px 8px;font-size:10px;color:var(--gold);font-family:'DM Mono',monospace;}

/* ══════════════════════════════════════
   BUSINESS SYSTEM
══════════════════════════════════════ */
.biz-inner{padding:16px;max-width:740px;margin:0 auto;}
.biz-cashflow{
  background:linear-gradient(135deg,rgba(251,191,36,.08),rgba(255,107,53,.05));
  border:1px solid rgba(251,191,36,.2);border-radius:20px;
  padding:20px;margin-bottom:16px;
}
.biz-cf-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;}
.biz-cf-val{font-family:'Syne',sans-serif;font-weight:800;font-size:30px;background:linear-gradient(135deg,var(--gold),var(--accent3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;}
.biz-cf-sub{font-size:12px;color:var(--text2);margin-top:6px;}
.biz-cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.bcg-box{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.bcg-label{font-size:10px;color:var(--text2);font-family:'DM Mono',monospace;}
.bcg-val{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;margin-top:3px;}

.biz-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:16px;margin-bottom:10px;cursor:pointer;transition:all .2s;
}
.biz-card:hover{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.05);box-shadow:0 4px 20px var(--glow-gold);}
.biz-card.owned{border-color:rgba(251,191,36,.3);background:rgba(251,191,36,.03);}
.biz-card.locked{opacity:.6;}
.bc-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.bc-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.bc-info{flex:1;}
.bc-name{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;}
.bc-type{font-size:11px;color:var(--text2);margin-top:1px;}
.bc-right{text-align:right;flex-shrink:0;}
.bc-price{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;color:var(--gold);}
.bc-revenue{font-size:11px;color:var(--accent);font-family:'DM Mono',monospace;margin-top:2px;}
.biz-stats-row{display:flex;gap:8px;flex-wrap:wrap;}
.biz-tag{padding:4px 9px;border-radius:6px;font-size:10px;font-weight:600;font-family:'DM Mono',monospace;}
.biz-tag.risk-low{background:rgba(0,229,160,.1);color:var(--accent);}
.biz-tag.risk-med{background:rgba(251,191,36,.1);color:var(--gold);}
.biz-tag.risk-high{background:rgba(239,68,68,.1);color:var(--danger);}
.biz-tag.type{background:rgba(0,145,255,.1);color:var(--accent2);}
.biz-progress{margin-top:10px;}
.biz-prog-label{display:flex;justify-content:space-between;font-size:10px;color:var(--text2);margin-bottom:4px;}
.biz-level-bar{height:5px;background:var(--bg);border-radius:4px;overflow:hidden;}
.biz-level-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--gold),var(--accent3));transition:width .8s cubic-bezier(.34,1.56,.64,1);}

/* Business detail modal */
.biz-detail-img{font-size:56px;text-align:center;padding:12px 0;margin-bottom:12px;}
.biz-metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px;}
.bm-box{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;}
.bm-label{font-size:10px;color:var(--text2);font-family:'DM Mono',monospace;letter-spacing:.04em;}
.bm-val{font-family:'Syne',sans-serif;font-weight:700;font-size:15px;margin-top:4px;}
.upgrade-row{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.up-icon{font-size:20px;flex-shrink:0;}
.up-info{flex:1;}
.up-title{font-weight:700;font-size:13px;}
.up-desc{font-size:11px;color:var(--text2);margin-top:2px;}
.up-cost{font-family:'Syne',sans-serif;font-weight:700;font-size:13px;color:var(--gold);flex-shrink:0;}

/* ══════════════════════════════════════
   LIFE SIMULATOR
══════════════════════════════════════ */
.life-inner{padding:16px;max-width:740px;margin:0 auto;}
.life-header{
  background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(0,145,255,.05));
  border:1px solid rgba(168,85,247,.2);border-radius:20px;
  padding:20px;margin-bottom:16px;
}
.life-age-row{display:flex;align-items:center;gap:16px;margin-bottom:14px;}
.life-avatar-big{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent4),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:30px;flex-shrink:0;border:3px solid rgba(168,85,247,.3);}
.life-profile{}
.life-name{font-family:'Syne',sans-serif;font-weight:800;font-size:18px;}
.life-age{font-size:13px;color:var(--text2);margin-top:2px;}
.life-stage{font-size:11px;color:var(--accent4);font-weight:600;margin-top:3px;text-transform:uppercase;font-family:'DM Mono',monospace;letter-spacing:.06em;}
.life-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.ls-box{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;}
.ls-val{font-family:'Syne',sans-serif;font-weight:800;font-size:14px;}
.ls-lab{font-size:9px;color:var(--text2);margin-top:2px;}

/* Life events */
.life-event-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
  border-radius:16px;padding:16px;margin-bottom:10px;cursor:pointer;transition:all .2s;
  border:1px solid var(--border);background:var(--surface);
}
.life-event-card:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.3);}
.life-event-card.positive{border-color:rgba(0,229,160,.25);background:rgba(0,229,160,.03);}
.life-event-card.negative{border-color:rgba(239,68,68,.2);background:rgba(239,68,68,.02);}
.life-event-card.neutral{border-color:rgba(0,145,255,.2);background:rgba(0,145,255,.02);}
.life-event-card.locked{opacity:.4;cursor:default;}
.lec-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.lec-icon{font-size:28px;flex-shrink:0;}
.lec-info{flex:1;}
.lec-title{font-weight:700;font-size:14px;line-height:1.2;}
.lec-desc{font-size:12px;color:var(--text2);margin-top:2px;}
.lec-impact{display:flex;gap:6px;flex-wrap:wrap;}
.lec-badge{font-family:'DM Mono',monospace;font-size:10px;padding:3px 8px;border-radius:6px;font-weight:600;}
.lec-badge.income{background:rgba(0,229,160,.12);color:var(--accent);}
.lec-badge.expense{background:rgba(239,68,68,.1);color:var(--danger);}
.lec-badge.xp{background:rgba(0,145,255,.1);color:var(--accent2);}
.lec-badge.age{background:rgba(168,85,247,.1);color:var(--accent4);}
.lec-badge.money{background:rgba(251,191,36,.1);color:var(--gold);}
.lec-cost{text-align:right;flex-shrink:0;}
.lec-cost-val{font-family:'Syne',sans-serif;font-weight:800;font-size:16px;color:var(--gold);}
.lec-cost-lab{font-size:10px;color:var(--text2);}

/* Income/expense breakdown */
.monthly-flow{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px;}
.mf-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.mf-row:last-child{border:none;}
.mf-icon{font-size:16px;width:24px;flex-shrink:0;}
.mf-label{flex:1;font-size:13px;color:var(--text2);}
.mf-amount{font-family:'DM Mono',monospace;font-size:13px;font-weight:500;}
.mf-amount.in{color:var(--accent);}
.mf-amount.out{color:var(--danger);}
.mf-bar{height:3px;background:var(--bg);border-radius:3px;overflow:hidden;margin-top:3px;}
.mf-bar-fill{height:100%;border-radius:3px;}

/* Life timeline */
.life-timeline{position:relative;padding-left:24px;}
.life-timeline::before{content:'';position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--accent4),transparent);}
.lt-event{position:relative;padding:10px 0 10px 16px;margin-bottom:0;}
.lt-dot{position:absolute;left:-20px;width:10px;height:10px;border-radius:50%;background:var(--accent4);border:2px solid var(--bg);top:14px;}
.lt-title{font-weight:700;font-size:13px;}
.lt-age{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);margin-top:1px;}
.lt-impact{font-size:12px;color:var(--text2);margin-top:2px;}

/* ══════════════════════════════════════
   DIVIDEND NOTIFICATION + ANIMATIONS
══════════════════════════════════════ */
/* ── Dividend popup container ──────────────────────────────────────────
   #dividend-popups es el contenedor fijo. Las tarjetas .dividend-popup
   son position:relative dentro de él → nunca se superponen.
─────────────────────────────────────────────────────────────────── */
#dividend-popups{
  position:fixed;bottom:80px;right:16px;z-index:9000;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
  pointer-events:none;
  max-height:calc(100vh - 160px);overflow:hidden;
}
.dividend-popup{
  position:relative;          /* ← fix: relativo al container, no al viewport */
  pointer-events:auto;
  background:linear-gradient(135deg,rgba(14,20,35,.97),rgba(10,16,28,.98));
  border:1.5px solid rgba(251,191,36,.35);
  border-radius:14px;padding:12px 14px;
  width:clamp(220px,72vw,280px);  /* nunca más ancho que la pantalla */
  box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 0 1px rgba(251,191,36,.08);
  transition:opacity .35s ease, transform .35s ease;
  animation:dpSlideIn .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes dpSlideIn{
  from{opacity:0;transform:translateX(110%);}
  to{opacity:1;transform:translateX(0);}
}
.dp-close{
  position:absolute;top:8px;right:8px;
  background:rgba(255,255,255,.07);border:none;border-radius:50%;
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--text2);cursor:pointer;line-height:1;
  transition:background .15s;
}
.dp-close:hover{background:rgba(255,255,255,.14);}
.dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-right:18px;}
.dp-month-badge{
  font-family:'DM Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.08em;color:var(--gold);text-transform:uppercase;
}
.dp-total{
  font-family:'Syne',sans-serif;font-weight:900;font-size:17px;color:var(--gain);
}
.dp-rows{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;}
.dp-row{
  display:flex;align-items:center;gap:6px;
  font-size:11px;padding:3px 0;
}
.dp-row-icon{font-size:13px;flex-shrink:0;}
.dp-row-name{font-family:'DM Mono',monospace;font-weight:700;color:var(--text);font-size:11px;flex:1;}
.dp-row-yield{color:var(--text3);font-size:10px;flex-shrink:0;}
.dp-row-amount{font-family:'DM Mono',monospace;color:var(--gain);font-weight:700;font-size:11px;flex-shrink:0;}
.dp-tagline{
  font-size:10px;color:var(--accent);font-weight:600;
  border-top:1px solid rgba(255,255,255,.06);padding-top:6px;margin-top:2px;
}
.dp-ytd{font-size:10px;color:var(--text3);margin-top:2px;font-family:'DM Mono',monospace;}

/* Legacy single-stock popup (showDividendPopup) */
.dp-icon{font-size:24px;margin-bottom:6px;}
.dp-title{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--gold);}
.dp-amount{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;color:var(--accent);}
.dp-sub{font-size:11px;color:var(--text2);margin-top:3px;}

/* ══════════════════════════════════════
   ADDITIONAL UTILITY + THICK BAR + GOLD
══════════════════════════════════════ */
.pbar.thick{height:8px;}
.pbar-fill.gold{background:linear-gradient(90deg,var(--gold),var(--accent3));}
.pbar-fill.purple{background:linear-gradient(90deg,var(--accent4),var(--accent2));}
.pbar-fill.blue{background:linear-gradient(90deg,var(--accent2),var(--accent));}
.btn-danger{background:linear-gradient(135deg,var(--danger),#c62828);color:#fff;}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--accent3));color:#000;font-weight:700;}
.net-income-positive{color:var(--accent);}
.net-income-negative{color:var(--danger);}

/* 5-item bottom nav */

/* ═══════════════════════════════════════
   FACTS WIDGET — "¿Sabías que…?"
═══════════════════════════════════════ */
.facts-widget{
  background:linear-gradient(135deg,rgba(0,145,255,.06),rgba(168,85,247,.04));
  border:1px solid rgba(0,145,255,.18);
  border-radius:16px;padding:16px 18px;margin-bottom:16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  position:relative;overflow:hidden;
}
.facts-widget::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent2),var(--accent4));
  opacity:.6;
}
.facts-eyebrow{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent2);margin-bottom:8px;
}
.facts-text{
  font-size:14px;font-weight:600;color:var(--text);line-height:1.5;
  min-height:42px;transition:opacity .4s;
}
.facts-text em{color:var(--gain);font-style:normal;font-weight:700;}
.facts-source{
  font-size:11px;color:var(--text3);margin-top:6px;
  font-family:'DM Mono',monospace;
}
.facts-dots{display:flex;gap:5px;margin-top:10px;justify-content:center;}
.facts-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--text3);transition:all .3s;
}
.facts-dot.active{
  background:var(--accent2);
  box-shadow:0 0 6px rgba(0,145,255,.5);
  width:14px;border-radius:3px;
}

/* ═══════════════════════════════════════
   CRISIS MODAL — Cisne Negro
═══════════════════════════════════════ */
#m-crisis .modal{
  border:1px solid rgba(255,75,92,.35);
  background:linear-gradient(160deg,#0f0810,#140a0c);
}
.crisis-icon{
  font-size:64px;text-align:center;margin-bottom:12px;
  animation:crisisShake .4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes crisisShake{
  10%,90%{transform:translateX(-2px);}
  20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-4px);}
  40%,60%{transform:translateX(4px);}
}
.crisis-title{
  font-family:'Syne',sans-serif;font-weight:800;font-size:22px;
  color:var(--loss);text-align:center;margin-bottom:6px;
  text-shadow:0 0 20px rgba(255,75,92,.4);
}
.crisis-subtitle{
  font-size:13px;color:var(--text2);text-align:center;margin-bottom:18px;line-height:1.5;
}
.crisis-impact-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;
}
.cig-box{
  background:rgba(255,75,92,.06);border:1px solid rgba(255,75,92,.18);
  border-radius:10px;padding:10px;text-align:center;
}
.cig-val{
  font-family:'DM Mono',monospace;font-weight:700;font-size:15px;
  color:var(--loss);margin-bottom:2px;
}
.cig-label{font-size:10px;color:var(--text3);}
.crisis-lesson{
  background:rgba(0,229,160,.05);border:1px solid rgba(0,229,160,.15);
  border-radius:10px;padding:12px 14px;font-size:12px;color:var(--text2);
  line-height:1.6;margin-bottom:16px;
}
.crisis-lesson strong{color:var(--gain);}
.crisis-actions{display:flex;gap:8px;}
.btn-crisis-hold{
  flex:1;background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.25);
  color:var(--gain);border-radius:50px;padding:12px;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .2s;font-family:'Instrument Sans',sans-serif;
}
.btn-crisis-hold:hover{background:rgba(0,255,136,.15);box-shadow:0 4px 20px var(--glow-green);}
.btn-crisis-sell{
  flex:1;background:rgba(255,75,92,.08);border:1px solid rgba(255,75,92,.25);
  color:var(--loss);border-radius:50px;padding:12px;font-size:14px;font-weight:700;
  cursor:pointer;transition:all .2s;font-family:'Instrument Sans',sans-serif;
}
.btn-crisis-sell:hover{background:rgba(255,75,92,.15);box-shadow:0 4px 20px var(--glow-red);}
.crisis-outcome{
  background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.2);
  border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.5;
  color:var(--text);display:none;margin-top:12px;
}
.crisis-outcome.show{display:block;}

/* ═══════════════════════════════════════
   COLORES DE GANANCIAS / PÉRDIDAS
   Usa los nuevos tokens --gain y --loss
   en todos los contextos de la app
═══════════════════════════════════════ */
.port-change.up{color:var(--gain);}
.port-change.down{color:var(--loss);}
.pnl-up{color:var(--gain)!important;}
.pnl-down{color:var(--loss)!important;}

/* Mejora de contraste en fuentes sobre fondos glass */
.home-inner p,.body,.mod-desc,.biz-desc,.biz-cf-sub{
  color:var(--text2);
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ── Nav bottom item active glow ── */
.bn-item.active{
  color:var(--gain);
  text-shadow:0 0 10px rgba(0,255,136,.3);
}

/* ── 5-item nav overrides ── */
#bottom-nav .bn-item{font-size:9px;}
#bottom-nav .bn-icon{font-size:19px;}

/* ═══════════════════════════════════════════════════════════
   FL MODULES — Estilos aislados
   Eliminar sin afectar nada: borrar este bloque completo.
═══════════════════════════════════════════════════════════ */

/* ── FL_StreakAlert ── */
.fl-streak-alert{
  display:flex;align-items:center;gap:10px;
  border-radius:12px;padding:10px 14px;
  border:1px solid;
  animation:fl-slideIn .3s cubic-bezier(.34,1.56,.64,1);
}
.fl-streak-warn{background:rgba(255,107,53,.07);border-color:rgba(255,107,53,.25);}
.fl-streak-critical{background:rgba(255,75,92,.09);border-color:rgba(255,75,92,.3);animation:fl-pulse 1.5s ease-in-out infinite;}
.fl-sa-fire{font-size:20px;flex-shrink:0;}
.fl-sa-body{flex:1;display:flex;flex-direction:column;gap:2px;}
.fl-sa-body strong{font-size:13px;color:var(--text);}
.fl-sa-sub{font-size:11px;color:var(--text2);}
.fl-sa-btn{
  flex-shrink:0;background:rgba(255,107,53,.15);border:1px solid rgba(255,107,53,.3);
  color:var(--accent3);border-radius:20px;padding:6px 12px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:'Instrument Sans',sans-serif;transition:all .2s;
}
.fl-sa-btn:hover{background:rgba(255,107,53,.25);}
@keyframes fl-pulse{0%,100%{opacity:1;}50%{opacity:.7;}}
@keyframes fl-slideIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ── FL_InactionLoss ── */
.fl-il-label{font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;}
.fl-il-val{font-family:'DM Mono',monospace;font-weight:800;font-size:18px;color:var(--loss);}
.fl-il-sub{font-size:11px;color:var(--text3);line-height:1.4;}

/* ── FL_SocialPercentile — breakdown ── */
.fl-pb-row{display:flex;align-items:center;gap:8px;font-size:12px;}
.fl-pb-label{width:56px;color:var(--text2);flex-shrink:0;}
.fl-pb-bar-wrap{flex:1;height:4px;background:var(--surface2);border-radius:4px;overflow:hidden;}
.fl-pb-bar-fill{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.fl-pb-val{width:68px;text-align:right;font-family:'DM Mono',monospace;font-size:11px;flex-shrink:0;}

/* ── FL_FutureScreen ── */
.fl-future-hero{
  background:linear-gradient(135deg,rgba(0,229,160,.06),rgba(0,145,255,.04));
  border:1px solid rgba(0,229,160,.15);border-radius:16px;
  padding:20px;margin-bottom:16px;
}
.fl-momentum-msg{
  margin-top:10px;font-size:12px;color:var(--text2);
  background:rgba(0,229,160,.05);border-radius:8px;padding:8px 12px;line-height:1.5;
}
.fl-momentum-msg strong{color:var(--accent);}
.fl-slider-section{margin-bottom:0;}
.fl-scenarios-wrap{display:flex;flex-direction:column;gap:12px;}
.fl-scenario-card{
  background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);border-radius:14px;padding:14px;
  transition:transform .2s;
}
.fl-scenario-card:hover{transform:translateY(-2px);}
.fl-sc-header{display:flex;align-items:center;gap:12px;}
.fl-sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.fl-sc-box{text-align:center;background:var(--surface2);border-radius:8px;padding:8px 6px;}
.fl-sc-year{font-size:10px;color:var(--text3);margin-bottom:4px;font-family:'DM Mono',monospace;}
.fl-sc-val{font-family:'Syne',sans-serif;font-weight:800;font-size:13px;line-height:1.2;}
.fl-sc-mult{font-size:10px;color:var(--text3);margin-top:2px;font-family:'DM Mono',monospace;}
.fl-rule72{background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}

/* ═══════════════════════════════════════════════════════════
   MODULE: PM — Monetización Free vs Premium
   Eliminar sin efectos: borrar este bloque completo.
═══════════════════════════════════════════════════════════ */

/* ── Plan badge en nav ── */
.pm-badge {
  display:flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:20px;
  font-family:'DM Mono',monospace; font-size:11px; font-weight:700;
  cursor:default; transition:all .2s; white-space:nowrap;
}
.pm-badge-free {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text2);
}
.pm-badge-free strong { color:var(--accent3); cursor:pointer; }
.pm-badge-premium {
  background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(168,85,247,.1));
  border:1px solid rgba(251,191,36,.3);
  color:var(--gold);
  box-shadow:0 0 12px rgba(251,191,36,.15);
}

/* ── Premium blur overlay ── */
[data-pm-blur].pm-locked-blur {
  position:relative;
  pointer-events:auto;    /* keep clickable to open paywall */
}
[data-pm-blur].pm-locked-blur > * {
  filter:blur(5px);
  user-select:none;
}
[data-pm-blur].pm-locked-blur::after {
  content:'✦ Premium';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'DM Mono',monospace; font-size:11px; font-weight:700;
  color:var(--gold); letter-spacing:.08em;
  background:rgba(10,14,24,.5);
  border-radius:inherit;
  backdrop-filter:blur(2px);
  cursor:pointer;
}

/* ── Paywall modal ── */
.pm-paywall-modal {
  background:linear-gradient(160deg, #0d1220 0%, #0a1628 60%, #0d0f1a 100%);
  border:1px solid rgba(251,191,36,.2);
  padding:28px 24px 20px;
}

.pm-crown {
  font-size:36px; margin-bottom:10px;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:pm-crown-glow 2s ease-in-out infinite alternate;
}
@keyframes pm-crown-glow {
  from { filter:drop-shadow(0 0 6px rgba(251,191,36,.4)); }
  to   { filter:drop-shadow(0 0 14px rgba(251,191,36,.7)); }
}

.pm-pw-title {
  font-family:'Syne',sans-serif; font-weight:900;
  font-size:20px; color:var(--text); margin-bottom:8px; line-height:1.2;
}
.pm-pw-sub {
  font-size:13px; color:var(--text2); margin-bottom:6px; line-height:1.5;
}
.pm-pw-ctx {
  font-family:'DM Mono',monospace; font-size:11px;
  color:var(--loss); margin-bottom:14px;
  min-height:16px;
}

/* Benefits list */
.pm-benefits {
  list-style:none; padding:0; margin:0 0 16px;
  display:flex; flex-direction:column; gap:8px;
  text-align:left;
}
.pm-benefits li {
  display:flex; align-items:flex-start; gap:10px;
  font-size:13px; color:var(--text2); line-height:1.4;
}
.pm-benefits li strong { color:var(--text); }
.pm-check {
  flex-shrink:0; width:18px; height:18px;
  background:rgba(0,255,136,.12); border:1px solid rgba(0,255,136,.3);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--gain); font-weight:800;
  margin-top:1px;
}

/* Social proof */
.pm-social-proof {
  background:rgba(0,229,160,.06); border:1px solid rgba(0,229,160,.15);
  border-radius:8px; padding:8px 12px; font-size:12px; color:var(--text2);
  margin-bottom:16px; line-height:1.4;
}
.pm-social-proof strong { color:var(--accent); }

/* CTA buttons */
.pm-cta-btn {
  background:linear-gradient(135deg,#f59e0b,#d97706) !important;
  border:none !important; color:#000 !important;
  font-weight:800 !important; font-size:15px !important;
  padding:14px !important; letter-spacing:.02em;
  box-shadow:0 4px 20px rgba(245,158,11,.35) !important;
  transition:all .2s !important;
}
.pm-cta-btn:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 28px rgba(245,158,11,.5) !important;
}
.pm-later-btn {
  display:block; width:100%;
  font-size:12px !important; color:var(--text3) !important;
}
.pm-current-plan {
  font-size:11px; color:var(--text3); margin-top:12px;
}

/* ── Daily limit toast variant (uses existing .pm-pw classes above) ── */

/* ═══════════════════════════════════════════════════════════
   MODULE: GR — Growth & Retention styles
   Eliminar sin efectos: borrar este bloque completo.
═══════════════════════════════════════════════════════════ */

/* ── GR_1: Landing overlay ── */
#gr-landing-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: linear-gradient(160deg, #08091a 0%, #0a1020 50%, #060810 100%);
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 20px; overflow-y: auto;
  transition: opacity .4s ease;
  pointer-events: auto;
}
/* When overlay is fading out or hidden, never block clicks below */
#gr-landing-overlay[style*="opacity: 0"],
#gr-landing-overlay[style*="opacity:0"] {
  pointer-events: none !important;
}
.gr-lo-bg-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; opacity: .35;
}
.gr-lo-orb1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(0,229,160,.18) 0%, transparent 70%);
  top: -120px; right: -120px;
}
.gr-lo-orb2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,145,255,.12) 0%, transparent 70%);
  bottom: -100px; left: -100px;
}
.gr-lo-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 0;
}
.gr-lo-logo {
  font-family: 'Syne', sans-serif; font-weight: 900;
  font-size: 22px; color: var(--accent); letter-spacing: -.02em;
  margin-bottom: 20px;
}
.gr-lo-eyebrow {
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--text3); letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 14px;
}
.gr-lo-title {
  font-family: 'Syne', sans-serif; font-weight: 900;
  font-size: clamp(28px, 8vw, 40px); line-height: 1.1;
  color: var(--text); margin: 0 0 14px; letter-spacing: -.02em;
}
.gr-lo-sub {
  font-size: 14px; color: var(--text2); line-height: 1.6;
  margin: 0 0 24px; max-width: 360px;
}
.gr-lo-benefits {
  list-style: none; padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: left; width: 100%;
}
.gr-lo-benefits li {
  display: flex; align-items: flex-start; gap: 12px;
}
.gr-lo-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,255,136,.12); border: 1px solid rgba(0,255,136,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--gain); font-weight: 800;
  margin-top: 2px;
}
.gr-lo-benefits li div {
  display: flex; flex-direction: column; gap: 2px;
}
.gr-lo-benefits li strong {
  font-size: 14px; color: var(--text); font-weight: 700;
}
.gr-lo-benefits li span {
  font-size: 12px; color: var(--text2); line-height: 1.4;
}
.gr-lo-social {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text2); margin-bottom: 24px;
}
.gr-lo-avatars { font-size: 18px; letter-spacing: -4px; }
.gr-lo-cta {
  width: 100%;
  background: linear-gradient(135deg, #00e5a0, #0091ff);
  border: none; border-radius: 14px; padding: 16px;
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: 16px;
  color: #000; cursor: pointer; letter-spacing: .01em;
  box-shadow: 0 4px 24px rgba(0,229,160,.3);
  transition: transform .2s, box-shadow .2s;
  margin-bottom: 12px;
}
.gr-lo-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,229,160,.45);
}
.gr-lo-skip {
  font-size: 12px; color: var(--text3); cursor: pointer;
  transition: color .2s; padding: 4px;
}
.gr-lo-skip:hover { color: var(--text2); }

/* ── GR_2: Register modal ── */
.gr-register-modal {
  background: linear-gradient(160deg, #0d1220 0%, #0a1628 100%);
  border: 1px solid rgba(255,255,255,.08);
  padding: 28px 24px 20px;
}
.gr-reg-icon {
  font-size: 44px; margin-bottom: 10px;
}
.gr-reg-title {
  font-family: 'Syne', sans-serif; font-weight: 900;
  font-size: 20px; color: var(--text); margin-bottom: 8px;
}
.gr-reg-sub {
  font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 20px;
}
.gr-reg-sub strong { color: var(--accent); }
.gr-reg-field { width: 100%; text-align: left; margin-bottom: 16px; }
.gr-reg-label {
  display: block; font-size: 11px; color: var(--text2);
  font-family: 'DM Mono', monospace; letter-spacing: .06em;
  margin-bottom: 6px; text-transform: uppercase;
}
.gr-reg-input {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; color: var(--text);
  font-family: 'Instrument Sans', sans-serif;
  outline: none; transition: border-color .2s; box-sizing: border-box;
}
.gr-reg-input:focus { border-color: rgba(0,229,160,.4); }
.gr-reg-error {
  font-size: 11px; color: var(--accent3); margin-top: 4px; line-height: 1.4;
}
.gr-reg-cta { margin-bottom: 8px !important; }
.gr-reg-skip {
  display: block; width: 100%;
  font-size: 12px !important; color: var(--text3) !important;
}
.gr-reg-privacy {
  font-size: 11px; color: var(--text3); margin-top: 12px; line-height: 1.5;
}

/* ── GR_4: Retention banner ── */
#gr-retention-banner {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(90deg, rgba(255,107,53,.1), rgba(255,75,92,.07));
  border-bottom: 1px solid rgba(255,107,53,.25);
  padding: 10px 16px; display: flex; align-items: center;
  gap: 12px; animation: fl-slideIn .3s ease;
}
.gr-rb-left {
  flex: 1; display: flex; align-items: flex-start; gap: 10px;
}
.gr-rb-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.gr-rb-title {
  font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.3;
}
.gr-rb-sub {
  font-size: 11px; color: var(--text2); margin-top: 2px; line-height: 1.4;
}
.gr-rb-sub strong { color: var(--accent3); }
.gr-rb-cta {
  flex-shrink: 0; background: rgba(255,107,53,.15);
  border: 1px solid rgba(255,107,53,.3); border-radius: 20px;
  padding: 7px 14px; font-size: 12px; font-weight: 700;
  color: var(--accent3); cursor: pointer;
  font-family: 'Instrument Sans', sans-serif; transition: all .2s;
}
.gr-rb-cta:hover { background: rgba(255,107,53,.25); }

/* ═══════════════════════════════════════════════════════════
   MODULE: CHART — Gráfica de mercado en tiempo real
   Eliminar sin efectos: borrar este bloque completo.
═══════════════════════════════════════════════════════════ */

.chart-container {
  background: linear-gradient(160deg, rgba(10,14,26,0.97) 0%, rgba(8,12,22,0.98) 100%);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  padding: 16px 16px 12px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}

/* Borde superior de color — se anima via JS cuando cambia activo */
.chart-container::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #00e5a0, #0091ff, #a855f7);
  opacity: .6;
}

/* ── Cabecera ── */
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.chart-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chart-ticker-icon {
  font-size: 24px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  flex-shrink: 0;
}
.chart-ticker-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700; font-size: 14px;
  color: var(--text); line-height: 1.2;
}
.chart-ticker-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px; color: var(--text3);
  margin-top: 2px;
}
.chart-header-right { text-align: right; }
.chart-price {
  font-family: 'Syne', sans-serif;
  font-weight: 900; font-size: 20px;
  color: #00e5a0;
  transition: color .3s;
}
.chart-pct {
  font-family: 'DM Mono', monospace;
  font-size: 12px; font-weight: 700;
  margin-top: 2px;
}
.chart-pct-up   { color: var(--gain); }
.chart-pct-down { color: var(--loss); }

/* ── Canvas wrapper — altura fija, sin desbordamiento ── */
.chart-canvas-wrap {
  position: relative;
  height: 160px;           /* altura fija — Chart.js respeta esto con maintainAspectRatio:false */
  width: 100%;
  margin-bottom: 12px;
}
.chart-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Selector rápido de activos ── */
.chart-quick-tickers {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.chart-qt-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  cursor: pointer;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text2);
  transition: all .2s;
  flex-shrink: 0;
}
.chart-qt-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: var(--qt-color, var(--accent));
  color: var(--qt-color, var(--accent));
}
.chart-qt-btn.active {
  background: color-mix(in srgb, var(--qt-color, var(--accent)) 15%, transparent);
  border-color: var(--qt-color, var(--accent));
  color: var(--qt-color, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--qt-color, var(--accent)) 30%, transparent);
}
.chart-qt-icon   { font-size: 13px; }
.chart-qt-ticker { font-weight: 700; }

/* Skeleton mientras carga Chart.js */
.chart-canvas-wrap:empty::after {
  content: 'Cargando gráfica…';
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
  font-family: 'DM Mono', monospace; font-size: 11px;
  color: var(--text3);
}

/* ═══════════════════════════════════════════════════════════
   MODULE: RPG — Gamificación avanzada, logros y retención
   Eliminar sin efectos: borrar este bloque completo.
═══════════════════════════════════════════════════════════ */

/* ── RPG_1/4: Barra de nivel pulsante cuando está cerca ── */
.pbar-fill.rpg-bar-near {
  animation: rpgBarPulse 1.4s ease-in-out infinite;
  background: linear-gradient(90deg, var(--accent), #fbbf24, var(--accent));
  background-size: 200% 100%;
}
@keyframes rpgBarPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0,229,160,0); background-position: 0% 50%; }
  50%       { box-shadow: 0 0 14px rgba(0,229,160,.55), 0 0 28px rgba(0,229,160,.25); background-position: 100% 50%; }
}

/* ── RPG_2: Multiplicador badge en nav ── */
.rpg-mult-badge {
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background: linear-gradient(135deg, rgba(255,107,53,.2), rgba(255,75,92,.15));
  border: 1px solid rgba(255,107,53,.4);
  border-radius: 20px;
  font-family: 'DM Mono', monospace;
  font-size: 10px; font-weight: 800;
  color: var(--accent3);
  animation: rpgMultPulse 2s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes rpgMultPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,107,53,0); }
  50%       { box-shadow: 0 0 10px rgba(255,107,53,.4); }
}

/* ── RPG_3: Toast de logro ── */
#rpg-ach-stack {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 9800;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
  max-width: 320px;
}

.rpg-ach-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(14,20,35,.97), rgba(10,14,26,.98));
  border: 1.5px solid rgba(251,191,36,.4);
  border-radius: 16px;
  padding: 14px 16px;
  width: 300px;
  overflow: hidden;
  cursor: pointer;
  box-shadow:
    0 4px 24px rgba(0,0,0,.5),
    0 0 0 1px rgba(251,191,36,.08),
    0 0 40px rgba(251,191,36,.08);
  animation: rpgAchIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes rpgAchIn {
  from { opacity:0; transform: translateX(120%) scale(.8); }
  to   { opacity:1; transform: translateX(0) scale(1); }
}
@keyframes rpgAchOut {
  to   { opacity:0; transform: translateX(110%) scale(.85); }
}

/* Destello animado diagonal */
.rpg-ach-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(251,191,36,.08) 50%, transparent 60%);
  animation: rpgShine 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rpgShine {
  0%   { transform: translateX(-100%); }
  40%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Borde superior dorado */
.rpg-ach-toast::before {
  content: '';
  position: absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b, #fbbf24);
}

.rpg-ach-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.6));
}
.rpg-ach-body {
  flex: 1;
  min-width: 0;
}
.rpg-ach-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: .1em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.rpg-ach-title {
  font-family: 'Syne', sans-serif;
  font-weight: 900; font-size: 15px;
  color: var(--text); line-height: 1.2;
  margin-bottom: 3px;
}
.rpg-ach-desc {
  font-size: 11px; color: var(--text2);
  line-height: 1.4;
}
.rpg-ach-xp {
  display: inline-block;
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 11px; font-weight: 800;
  color: var(--accent);
  background: rgba(0,229,160,.1);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 20px;
  padding: 2px 8px;
}

/* ── RPG_4: Level-up overlay (cubre toda la pantalla) ── */
#rpg-levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9900;
  background: radial-gradient(ellipse at center, rgba(10,14,24,.96) 0%, rgba(4,6,14,.99) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
}
#rpg-levelup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.rpg-lu-inner {
  text-align: center;
  position: relative;
  padding: 0 32px;
}
.rpg-lu-particles {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  overflow: visible;
}
.rpg-lu-particle {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  animation: rpgParticleUp 1.2s ease-out forwards;
}
@keyframes rpgParticleUp {
  0%   { transform: translateY(0) scale(1); opacity:1; }
  100% { transform: translateY(-200px) scale(.2) rotate(360deg); opacity:0; }
}

.rpg-lu-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 8px;
  animation: rpgLUFadeUp .5s .1s ease both;
}
.rpg-lu-num {
  font-family: 'Syne', sans-serif;
  font-weight: 900;
  font-size: clamp(72px, 20vw, 120px);
  line-height: 1;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #00e5a0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 40px rgba(251,191,36,.5));
  animation: rpgLUScale .6s .15s cubic-bezier(.34,1.56,.64,1) both;
}
.rpg-lu-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800; font-size: 24px;
  color: var(--text);
  margin-top: 8px;
  animation: rpgLUFadeUp .5s .3s ease both;
}
.rpg-lu-sub {
  font-size: 14px; color: var(--text2);
  margin-top: 8px; line-height: 1.5;
  animation: rpgLUFadeUp .5s .4s ease both;
}
.rpg-lu-xp {
  display: inline-block;
  margin-top: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 12px; color: var(--accent);
  background: rgba(0,229,160,.08);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 20px; padding: 5px 14px;
  animation: rpgLUFadeUp .5s .5s ease both;
}

@keyframes rpgLUScale {
  from { transform: scale(.3); opacity:0; }
  to   { transform: scale(1);  opacity:1; }
}
@keyframes rpgLUFadeUp {
  from { transform: translateY(16px); opacity:0; }
  to   { transform: translateY(0);    opacity:1; }
}


/* ── Business modal: metrics grid + upgrade rows ── */
.biz-metrics-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}
.bdm-metric {
  background: rgba(255,255,255,.04); border-radius: 8px;
  padding: 10px 12px; border: 1px solid var(--border2);
}
.bdm-metric-label { font-size: 10px; color: var(--text2); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.bdm-metric-val { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 15px; }
.biz-upgrade-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  transition: border-color .2s;
}
.biz-upgrade-row.done {
  background: rgba(0,229,160,.06); border-color: rgba(0,229,160,.3);
}


/* ══════════════════════════════════════════════════════════════════
   style-features.css — RPG · Premium · SAAS · B2B · XP Chart · FinAI · Animaciones · Responsive
   Para editar en bloque: solo este archivo.
   style.css (barrel) lo enlaza todo via @import.
══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════
   v10 PRODUCTION ADDITIONS
   Skeleton · Focus Mode · Bottom Sheet
   Module badges · Course badges · Settings
═══════════════════════════════════════ */

/* ── Skeleton Loader ─────────────────── */
@keyframes skeletonPulse {
  0%, 100% { opacity: .3; }
  50%       { opacity: .65; }
}
.sk-line {
  border-radius: 8px;
  background: var(--surface2);
  margin-bottom: 10px;
  animation: skeletonPulse 1.4s ease-in-out infinite;
}
.sk-title  { height: 28px; }
.sk-text   { height: 15px; }
.sk-short  { height: 15px; }
.sk-block  {
  border-radius: 14px;
  background: var(--surface2);
  animation: skeletonPulse 1.4s ease-in-out infinite;
}

/* ── Module Lock / Check badges ──────── */
.mod-badge-check {
  position: absolute;
  top: -7px; right: -7px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 0 12px rgba(0, 229, 160, .5);
  z-index: 5;
}
.mod-badge-lock {
  position: absolute;
  top: -7px; right: -7px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  z-index: 5;
}
.mod-card.mod-locked {
  opacity: .5;
  cursor: not-allowed;
  filter: grayscale(50%);
}
.mod-card.mod-locked:hover { transform: none !important; }

/* Lesson nav pill — completed state */
.lmb-pill.done {
  background: rgba(0, 229, 160, .18);
  border: 1px solid rgba(0, 229, 160, .4);
  color: var(--accent);
}
.lmb-pill.lmb-locked {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Health ring — smooth color transition ── */
.health-ring-fg {
  transition: stroke 0.6s ease, stroke-dashoffset 0.9s ease;
}

/* ── Focus / Lectura Enfocada Mode ───── */
/* Elements to hide */
body.focus-mode #bottom-nav,
body.focus-mode .lesson-mod-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
body.focus-mode .top-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .3s, transform .3s;
}
body.focus-mode .lesson-inner {
  padding-bottom: 90px;
}
body.focus-mode .lesson-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(6, 8, 16, .96);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  padding: 14px 20px;
  z-index: 200;
}

/* Focus button in lesson top nav */
.focus-btn {
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
  transition: all .2s;
  white-space: nowrap;
}
.focus-btn:hover { color: var(--text); border-color: var(--border2); }
.focus-btn.focus-btn-active {
  background: rgba(0, 229, 160, .12);
  border-color: rgba(0, 229, 160, .35);
  color: var(--accent);
}

/* ── Bottom Sheet — lesson module bar on mobile ── */
@media (max-width: 640px) {
  .lesson-mod-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    top: auto;
    border-top: 1px solid var(--border2);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    background: rgba(9, 12, 20, .98);
    backdrop-filter: blur(28px);
    padding: 8px 16px 22px;
    z-index: 100;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .55);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  }
  body.focus-mode .lesson-mod-bar {
    transform: translateY(110%);
  }
  body.focus-mode .lesson-footer {
    bottom: 0;
  }
  .lesson-inner { padding-bottom: 210px; }
  .lesson-footer {
    position: fixed;
    bottom: 140px; left: 0; right: 0;
    background: rgba(6,8,16,0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    pointer-events: none;
    padding: 10px 20px;
    z-index: 90;
  }
  .lesson-footer > * { pointer-events: all; }
}

/* Drag handle on bottom sheet */
.lesson-mod-bar::before {
  content: '';
  display: block;
  width: 40px; height: 4px;
  background: var(--border2);
  border-radius: 2px;
  margin: 0 auto 10px;
}
@media (min-width: 641px) {
  .lesson-mod-bar::before { display: none; }
}

/* ── Course Badges Section ───────────── */
.course-badges-section {
  background: linear-gradient(135deg, rgba(251,191,36,.06), rgba(168,85,247,.04));
  border: 1px solid rgba(251, 191, 36, .18);
  border-radius: 18px;
  padding: 18px;
}
.cb-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--text);
}
.cb-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.cb-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: all .3s;
  flex: 1;
  min-width: 140px;
}
.cb-badge.cb-unlocked {
  background: linear-gradient(135deg, rgba(251,191,36,.12), rgba(255,107,53,.06));
  border-color: rgba(251, 191, 36, .4);
  box-shadow: 0 0 18px rgba(251, 191, 36, .15);
}
.cb-badge.cb-locked {
  opacity: .45;
  filter: grayscale(60%);
}
.cb-badge-icon { font-size: 30px; line-height: 1; }
.cb-badge-name {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}
.cb-badge-desc {
  font-size: 11px;
  color: var(--text2);
  margin-top: 2px;
}
.cb-badge-prog {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
}

/* ── Settings Section ────────────────── */
.settings-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 80px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-left { display: flex; flex-direction: column; gap: 3px; }
.settings-row-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.settings-row-sub {
  font-size: 12px;
  color: var(--text2);
}
.btn-reset {
  background: rgba(255, 75, 92, .1);
  border: 1px solid rgba(255, 75, 92, .25);
  color: var(--danger);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
  transition: all .2s;
  white-space: nowrap;
}
.btn-reset:hover {
  background: rgba(255, 75, 92, .2);
  border-color: rgba(255, 75, 92, .5);
}

/* ═══════════════════════════════════════════════════
   v11 — ELITE QUIZ ANIMATIONS + EXAM UI + BADGES
═══════════════════════════════════════════════════ */

/* ── Quiz answer animations ───────────────────────── */
@keyframes correctPop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.04); background: rgba(0,255,136,.25); }
  100% { transform: scale(1); }
}
@keyframes wrongShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.quiz-opt.correct {
  border-color: var(--accent) !important;
  background: rgba(0, 229, 160, .18) !important;
  animation: correctPop .45s cubic-bezier(.34,1.56,.64,1);
}
.quiz-opt.wrong {
  border-color: var(--danger) !important;
  background: rgba(255, 75, 92, .14) !important;
  animation: wrongShake .35s ease-out;
}
.quiz-fb {
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 16px;
  border-radius: 12px;
  margin-top: 14px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.quiz-fb.show {
  opacity: 1;
  transform: translateY(0);
}
.quiz-fb.ok {
  background: rgba(0, 229, 160, .10);
  border: 1px solid rgba(0, 229, 160, .3);
  color: #c8ffe8;
}
.quiz-fb.bad {
  background: rgba(255, 107, 53, .10);
  border: 1px solid rgba(255, 107, 53, .3);
  color: #ffd4c2;
}

/* ── Course Badges — impactful visual ─────────────── */
@keyframes badgeUnlock {
  0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.12) rotate(4deg);  opacity: 1; }
  100% { transform: scale(1) rotate(0deg);     opacity: 1; }
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(251,191,36,.2), 0 4px 20px rgba(0,0,0,.3); }
  50%       { box-shadow: 0 0 28px rgba(251,191,36,.6), 0 4px 24px rgba(251,191,36,.2); }
}
.cb-badge.cb-unlocked {
  animation: badgeGlow 2.5s ease-in-out infinite;
}
.cb-badge.cb-unlocked .cb-badge-icon {
  animation: badgeUnlock .6s cubic-bezier(.34,1.56,.64,1) both;
  display: inline-block;
  font-size: 36px;
}
.cb-badge.cb-locked .cb-badge-icon {
  filter: grayscale(1);
  opacity: .5;
}
/* Badge for Maestro Financiero */
.maestro-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(251,191,36,.15), rgba(255,107,53,.08));
  border: 2px solid rgba(251,191,36,.5);
  box-shadow: 0 0 30px rgba(251,191,36,.2), 0 8px 32px rgba(0,0,0,.3);
  margin-bottom: 12px;
  animation: badgeGlow 2s ease-in-out infinite;
}
.maestro-badge-icon { font-size: 44px; }
.maestro-badge-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--gold);
}
.maestro-badge-sub {
  font-size: 12px;
  color: var(--text2);
  margin-top: 3px;
}

/* ── Final Exam UI ────────────────────────────────── */
.exam-intro-wrap {
  text-align: center;
  padding: 10px 0 20px;
}
.exam-trophy {
  font-size: 72px;
  margin-bottom: 12px;
  animation: celPop .6s cubic-bezier(.34,1.56,.64,1);
  display: block;
}
.exam-intro-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  background: linear-gradient(135deg, var(--gold), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 10px;
}
.exam-intro-sub {
  font-size: 15px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 20px;
}
.exam-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.exam-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
}
.exam-rule strong { color: var(--text); }
.exam-rule-icon { font-size: 18px; flex-shrink: 0; }

/* Exam question UI */
.exam-question-wrap { padding: 4px 0; }
.exam-progress-bar-wrap { margin-bottom: 12px; }
.exam-q-counter {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 4px;
}
.exam-module-tag {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 8px;
}
.exam-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

/* ── Streak Multiplier indicator ─────────────────── */
@keyframes streakPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .85; transform: scale(1.05); }
}
.streak-multiplier-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,107,53,.12), rgba(251,191,36,.08));
  border: 1px solid rgba(255,107,53,.3);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent3);
  margin-bottom: 10px;
  animation: streakPulse 2s ease-in-out infinite;
}

/* ══════════════════════════════════════════════════════
   FINLEARN v1.0 — NUEVAS FEATURES (Audio, PWA, Premium)
══════════════════════════════════════════════════════ */

/* ── Screen Fade-in Mejorado ── */
.screen { transition: opacity .22s ease; }
.screen:not(.active) { opacity: 0; display: none; }
.screen.active { opacity: 1; }
@keyframes screenFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.screen-enter { animation: screenFade .3s cubic-bezier(.4,0,.2,1) forwards !important; }

/* ── PWA Install Banner ── */
.pwa-install-banner {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 420px;
  background: linear-gradient(135deg, rgba(0,229,160,.12), rgba(0,145,255,.1));
  border: 1px solid rgba(0,229,160,.3);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 8500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: pwaSlideUp .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pwaSlideUp {
  from { opacity:0; transform: translateX(-50%) translateY(20px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
.pwa-banner-icon { font-size: 22px; flex-shrink: 0; }
.pwa-banner-text { flex: 1; font-size: 13px; color: var(--text); font-weight: 500; line-height: 1.4; }
.pwa-banner-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Instrument Sans', sans-serif;
  transition: all .15s;
}
.pwa-banner-btn:hover { background: var(--accent2); transform: scale(1.04); }
.pwa-banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: all .15s;
}
.pwa-banner-close:hover { color: var(--text); background: var(--surface); }

/* ── Premium WhatsApp Modal ── */
.pm-wa-modal { padding: 28px 24px !important; }
.pm-wa-crown {
  font-size: 40px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--gold), var(--accent3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  animation: crownGlow 2s ease-in-out infinite alternate;
}
@keyframes crownGlow {
  from { filter: drop-shadow(0 0 6px rgba(251,191,36,.3)); }
  to   { filter: drop-shadow(0 0 18px rgba(251,191,36,.7)); }
}
.pm-wa-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--gold);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pm-wa-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 8px;
}
.pm-wa-sub {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 20px;
  line-height: 1.5;
}
.pm-wa-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pm-wa-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.pm-wa-check {
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}
.pm-wa-benefits li div { display: flex; flex-direction: column; gap: 2px; }
.pm-wa-benefits li strong { font-size: 14px; color: var(--text); font-weight: 700; }
.pm-wa-benefits li span { font-size: 12px; color: var(--text2); line-height: 1.4; }
.pm-wa-social {
  background: var(--surface);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 10px;
}
.pm-wa-avatars { font-size: 18px; letter-spacing: -2px; }
.btn-wa-cta {
  background: linear-gradient(135deg, #25d366, #128c7e) !important;
  color: #fff !important;
  border: none !important;
  padding: 16px 20px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 20px rgba(37,211,102,.3);
}
.btn-wa-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.45); }
.pm-wa-cta-icon { font-size: 20px; }
.pm-wa-guarantee {
  font-size: 12px;
  color: var(--text3);
  margin-top: 12px;
}

/* ── Emoji Confetti (Examen Final aprobado) ── */
.emoji-confetti-piece {
  position: fixed;
  top: -60px;
  font-size: 28px;
  pointer-events: none;
  z-index: 9100;
  animation: emojiRain linear forwards;
  will-change: transform, opacity;
}
@keyframes emojiRain {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(110vh) rotate(360deg) scale(.7); }
}

/* ── Focus Mode — limpieza de clases al salir ── */
@media (min-width: 641px) {
  body:not(.focus-mode) .lesson-inner { padding-bottom: 0; }
}


/* ══════════════════════════════════════════════════════════
   FINLEARN SaaS v2.0 — NUEVOS COMPONENTES
   ─ Mute Button
   ─ SaaS Premium Modal (pasarela simulada)
   ─ B2B Banner + Modal
   ─ XP Learning Curve Chart
   ─ Fintech Premium UI overrides
══════════════════════════════════════════════════════════ */

/* ── MUTE BUTTON ─────────────────────────────────────── */
.mute-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  color: var(--text2);
  transition: all .2s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
  padding: 0;
}
.mute-btn:hover {
  background: var(--surface2);
  border-color: var(--border2);
  transform: scale(1.08);
}
.mute-btn.muted {
  color: var(--text3);
  opacity: .65;
}

/* ── SAAS PREMIUM MODAL ──────────────────────────────── */
.saas-modal {
  padding: 32px 28px !important;
}

/* Badge Elite */
.saas-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .12em;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
  box-shadow: 0 0 20px rgba(251,191,36,.3);
}

.saas-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 10px;
}
.saas-sub {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 24px;
  line-height: 1.55;
}

/* Plan cards */
.saas-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 22px;
}
.saas-plan {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 18px 14px 14px;
  cursor: pointer;
  transition: all .22s cubic-bezier(.4,0,.2,1);
  position: relative;
  text-align: center;
}
.saas-plan:hover {
  border-color: var(--accent);
  background: rgba(0,229,160,.05);
  transform: translateY(-2px);
}
.saas-plan.saas-plan-active {
  border-color: var(--accent);
  background: rgba(0,229,160,.08);
  box-shadow: 0 0 0 2px rgba(0,229,160,.2);
}
.saas-plan.saas-plan-recommended {
  border-color: var(--gold);
  background: rgba(251,191,36,.06);
}
.saas-plan.saas-plan-recommended.saas-plan-active {
  box-shadow: 0 0 0 2px rgba(251,191,36,.25);
}
.saas-plan-badge-top {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold), #f59e0b);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.saas-plan-period {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.saas-plan-price {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 30px;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.saas-plan-currency {
  font-size: 18px;
  vertical-align: super;
}
.saas-plan-unit {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
}
.saas-plan-note {
  font-size: 11px;
  color: var(--text3);
}

/* Benefits list */
.saas-benefits {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.saas-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text2);
}
.saas-benefits li strong { color: var(--text); }
.saas-check {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #000;
  flex-shrink: 0;
}

/* Social strip */
.saas-social-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 12.5px;
  color: var(--text2);
}
.saas-av-row { font-size: 16px; letter-spacing: -2px; }

/* CTA button */
.saas-cta-btn {
  background: linear-gradient(135deg, var(--accent), #00c4f0) !important;
  color: #000 !important;
  border: none !important;
  padding: 17px 20px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 24px rgba(0,229,160,.25);
}
.saas-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,229,160,.4);
}
.saas-guarantee {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 12px;
  line-height: 1.4;
}

/* Loading spinner */
.saas-spinner-wrap {
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.saas-spinner {
  width: 52px;
  height: 52px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: saasSpinAnim .8s linear infinite;
}
@keyframes saasSpinAnim { to { transform: rotate(360deg); } }
.saas-loading-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
}
.saas-loading-sub {
  font-size: 13px;
  color: var(--text2);
  min-height: 20px;
  transition: opacity .3s;
}
.saas-loading-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.saas-sec-badge {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
}

/* Success state */
.saas-success-icon {
  font-size: 52px;
  margin-bottom: 8px;
  display: block;
  background: linear-gradient(135deg, var(--gold), #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: crownGlow 2s ease infinite alternate;
}
.saas-success-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--text);
  margin-bottom: 10px;
}
.saas-success-sub {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 24px;
  line-height: 1.55;
}
.saas-success-details {
  background: var(--surface);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ssd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.ssd-row span { color: var(--text2); }
.ssd-row strong { color: var(--text); font-weight: 700; }

/* ── XP CHART ────────────────────────────────────────── */
.xp-chart-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
}
.xp-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.xp-chart-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}
.xp-chart-sub {
  font-size: 11.5px;
  color: var(--text3);
}
.xp-chart-total {
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,229,160,.1);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 8px;
  padding: 5px 10px;
}
.xp-chart-wrap {
  position: relative;
}
.xp-svg {
  width: 100%;
  height: 80px;
  overflow: visible;
  display: block;
}
.xp-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
}
.xp-chart-labels span {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text3);
  text-align: center;
  flex: 1;
}

/* ── B2B BANNER ──────────────────────────────────────── */
.b2b-banner {
  background: linear-gradient(135deg, rgba(0,145,255,.1), rgba(168,85,247,.08));
  border: 1px solid rgba(0,145,255,.25);
  border-radius: 20px;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
.b2b-banner::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(0,145,255,.12), transparent 70%);
  pointer-events: none;
}
.b2b-banner-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.b2b-banner-left { flex: 1; }
.b2b-banner-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--accent2);
  letter-spacing: .08em;
  margin-bottom: 6px;
  font-weight: 600;
}
.b2b-banner-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 5px;
}
.b2b-banner-sub {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.4;
}
.b2b-banner-btn {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent2), #7c3aed);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(0,145,255,.2);
}
.b2b-banner-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 24px rgba(0,145,255,.3);
}
.b2b-banner-logos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.b2b-logo-chip {
  background: rgba(0,145,255,.1);
  border: 1px solid rgba(0,145,255,.2);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 10.5px;
  color: var(--accent2);
  font-weight: 600;
}

/* ── B2B MODAL ───────────────────────────────────────── */
.b2b-modal {
  padding: 0 !important;
  overflow: hidden;
}
.b2b-header {
  background: linear-gradient(135deg, rgba(0,145,255,.12), rgba(168,85,247,.08));
  border-bottom: 1px solid var(--border);
  padding: 28px 28px 22px;
}
.b2b-logo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.b2b-logo-icon { font-size: 26px; }
.b2b-logo-txt {
  font-family: 'Syne', sans-serif;
  font-size: 18px;
  color: var(--text);
}
.b2b-tagline {
  font-size: 13px;
  color: var(--text2);
}
.b2b-subtitle {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 16px;
  padding: 20px 28px 0;
}
.b2b-field {
  padding: 0 28px;
  margin-bottom: 14px;
}
.b2b-label {
  display: block;
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.b2b-input {
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  font-family: 'Instrument Sans', sans-serif;
  transition: border-color .2s;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}
.b2b-input:focus {
  outline: none;
  border-color: var(--accent2);
  background: rgba(0,145,255,.04);
}
.b2b-select { cursor: pointer; }
.b2b-submit-btn {
  display: block;
  width: calc(100% - 56px);
  margin: 6px 28px 0;
  background: linear-gradient(135deg, var(--accent2), #7c3aed) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 16px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  cursor: pointer;
  transition: all .2s;
}
.b2b-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,145,255,.3);
}
.b2b-privacy {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  padding: 10px 28px 22px;
}

/* B2B success state */
.b2b-success-icon {
  font-size: 48px;
  text-align: center;
  padding: 28px 28px 12px;
  display: block;
}
.b2b-success-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text);
  text-align: center;
  margin-bottom: 12px;
  padding: 0 28px;
}
.b2b-success-body {
  font-size: 14px;
  color: var(--text2);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 20px;
  padding: 0 28px;
}
.b2b-success-next {
  background: var(--surface);
  border-radius: 14px;
  margin: 0 28px 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.b2b-next-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text2);
}
.b2b-next-icon { font-size: 18px; }

/* ── FINTECH PREMIUM UI OVERRIDES ────────────────────── */
/* Más espaciado, tipografía más protagonista, bordes suaves */

/* Cards con más respiración */
.card {
  border-radius: 20px !important;
  padding: 22px !important;
}

/* Top nav más aireado */
.top-nav {
  padding: 14px 20px !important;
  gap: 10px;
}

/* módulos grid — solo gap override aquí */

/* Modal border radius más suave */
.modal {
  border-radius: 24px !important;
}

/* Botones primarios con más padding */
.btn.btn-primary {
  padding: 14px 24px !important;
  border-radius: 14px !important;
  font-size: 14.5px !important;
  letter-spacing: .01em;
}

/* Secciones del home con más padding vertical */
.home-inner {
  padding: 16px 16px 100px !important;
  gap: 14px;
}

/* Section headers más definidos */
.sec-head {
  margin-bottom: 14px !important;
}
.sec-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

/* Profile hero más espaciada */
.prof-hero {
  padding: 28px 20px !important;
  border-radius: 24px !important;
}

/* Progress bars más gruesas para fintech look */
.pbar {
  height: 6px !important;
  border-radius: 6px !important;
}
.pbar.thick {
  height: 8px !important;
}

/* Nav pills con font más legible */
.nav-pill {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: 600;
}

/* Bottom nav más cómodo */
#bottom-nav {
  padding: 10px 0 !important;
}

/* Tags más elegantes */
.tag {
  font-size: 11px !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  letter-spacing: .04em;
}


/* ══════════════════════════════════════════════════════════
   FINLEARN v3 — UI IMPROVEMENTS
   ─ XP bar glow animation
   ─ modules-grid responsive for 20 modules
   ─ Toast stacking improvements
══════════════════════════════════════════════════════════ */

/* ── XP BAR GLOW: brilla al ganar XP ─────────────────── */
.pbar-fill {
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

/* Clase añadida por JS tras ganar XP */
.pbar-fill.xp-gained {
  animation: xpBarGlow 1.2s ease forwards;
}

@keyframes xpBarGlow {
  0%   { box-shadow: 0 0  4px rgba(0,229,160,.4); }
  40%  { box-shadow: 0 0 18px rgba(0,229,160,.9), 0 0 32px rgba(0,229,160,.5); }
  100% { box-shadow: 0 0  6px rgba(0,229,160,.2); }
}

/* módulos grid — gap consolidado en regla base */

/* Módulo card: altura mínima uniforme para grid alineado */
.mod-card {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── TOAST CONTAINER: mejoras adicionales ────────────── */
.toast {
  animation: toastSlideIn .22s cubic-bezier(.34,1.56,.64,1) forwards;
  pointer-events: all;
  max-width: min(260px, calc(100vw - 32px));
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateX(24px) scale(.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Limita a máximo 3 toasts visibles (los demás quedan ocultos por overflow) */
.toast-wrap > .toast:nth-child(n+4) {
  display: none;
}

/* ── RESPONSIVE GENERAL PARA 20 MÓDULOS ─────────────── */
/* Home inner — NO overflow propio, el .screen padre es quien scrollea */
.home-inner {
  overflow-y: visible;
  overscroll-behavior: auto;
}

/* Asegurar que las tarjetas de módulo no overflow */
.mod-card * {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Module progress badge — siempre visible */
.mod-prog {
  flex-shrink: 0;
}

/* ── AUDIO ELEMENT (hidden) ──────────────────────────── */
#bg-music {
  display: none;
  position: absolute;
  left: -9999px;
}


/* ══════════════════════════════════════════════════════════════════════
   ★ TOUR GUIADO — CSS
   z-index ladder: overlay 8000 / spotlight 8001 / tooltip 8002
════════════════════════════════════════════════════════════════════════ */

/* ── Overlay oscuro ── */
.tour-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);   /* arranca transparente */
  z-index: 8000;
  pointer-events: none;
  transition: background .4s ease;
}
.tour-overlay.active {
  background: rgba(0, 0, 0, .72);
  pointer-events: all;             /* bloquea interacción con el resto */
}

/* ── Spotlight: recuadro que "recorta" el fondo oscuro ── */
.tour-spotlight {
  position: absolute;              /* absolute: se moverá con scrollY compensado */
  z-index: 8001;
  border-radius: 18px;
  box-shadow:
    0 0 0 4px rgba(0, 229, 160, .6),
    0 0 0 9999px rgba(0, 0, 0, .72); /* la sombra cubre todo lo demás */
  pointer-events: none;
  opacity: 0;
  transform: scale(.97);
  transition:
    opacity    .35s ease,
    transform  .35s ease,
    top        .35s cubic-bezier(.4,0,.2,1),
    left       .35s cubic-bezier(.4,0,.2,1),
    width      .35s cubic-bezier(.4,0,.2,1),
    height     .35s cubic-bezier(.4,0,.2,1);
}
.tour-spotlight.active {
  opacity: 1;
  transform: scale(1);
}

/* ── Tooltip ── */
.tour-tooltip {
  position: absolute;
  z-index: 8002;
  width: min(340px, calc(100vw - 28px));
  background: var(--surface, #1a1d2e);
  border: 1px solid rgba(0, 229, 160, .3);
  border-radius: 20px;
  padding: 20px;
  box-shadow:
    0 8px 40px rgba(0,0,0,.5),
    0 0  24px rgba(0, 229, 160, .12);
  opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
  pointer-events: all;
}
.tour-tooltip.active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Tooltip internals ── */
.tour-tt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.tour-tt-badge {
  background: rgba(0,229,160,.12);
  border: 1px solid rgba(0,229,160,.25);
  color: var(--accent, #00e5a0);
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: 100px;
}
.tour-tt-skip {
  background: none;
  border: none;
  color: var(--text3, #666);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.tour-tt-skip:hover { color: var(--text); background: rgba(255,255,255,.05); }

.tour-tt-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text, #fff);
  margin-bottom: 8px;
  line-height: 1.25;
}
.tour-tt-body {
  font-size: 13.5px;
  color: var(--text2, #9ca3af);
  line-height: 1.6;
  margin-bottom: 18px;
}

.tour-tt-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tour-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tour-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border, #2a2d3e);
  transition: all .25s;
}
.tour-dot.active {
  background: var(--accent, #00e5a0);
  transform: scale(1.3);
  box-shadow: 0 0 8px rgba(0,229,160,.5);
}
.tour-tt-actions {
  display: flex;
  gap: 8px;
}
.tour-btn {
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.tour-btn-primary {
  background: linear-gradient(135deg, var(--accent, #00e5a0), #00c4f0);
  color: #000;
  box-shadow: 0 4px 14px rgba(0,229,160,.25);
}
.tour-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,229,160,.4);
}
.tour-btn-ghost {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  color: var(--text2);
}
.tour-btn-ghost:hover { background: rgba(255,255,255,.09); }


/* ══════════════════════════════════════════════════════════════════════
   ★ FinAI — CSS
   FAB flotante + Bottom Sheet
════════════════════════════════════════════════════════════════════════ */

/* ── FAB (Floating Action Button) ── */
.finai-fab {
  position: fixed;
  bottom: 88px;                    /* sobre el bottom-nav */
  right: 18px;
  z-index: 6000;
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #7c3aed, #0091ff);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 11px 18px 11px 14px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow:
    0 6px 24px rgba(124,58,237,.45),
    0 2px  8px rgba(0,0,0,.3);
  transition: all .25s cubic-bezier(.4,0,.2,1);
  overflow: hidden;

  /* Animación de entrada: aparece cuando s-lesson es activo */
  animation: fabEntry .5s .3s cubic-bezier(.34,1.56,.64,1) both;
}
.finai-fab:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 32px rgba(124,58,237,.55), 0 4px 12px rgba(0,0,0,.4);
}
.finai-fab:active { transform: scale(.97); }

@keyframes fabEntry {
  from { opacity: 0; transform: scale(.6) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.finai-fab-icon { font-size: 18px; }
.finai-fab-label { letter-spacing: .02em; }

/* Halo brillante animado */
.finai-fab-glow {
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255,255,255,.4) 30%,
    transparent 60%
  );
  animation: fabGlow 2.5s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes fabGlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Bottom Sheet ── */
.finai-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9100;
  background: var(--bg2, #12152a);
  border-radius: 28px 28px 0 0;
  border-top: 1px solid rgba(124,58,237,.3);
  box-shadow:
    0 -8px 40px rgba(0,0,0,.5),
    0 -2px 16px rgba(124,58,237,.15);
  max-height: 80vh;
  display: flex;
  flex-direction: column;

  /* Arranca fuera de pantalla */
  transform: translateY(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
.finai-sheet.open {
  transform: translateY(0);
}

/* Handle visual */
.finai-handle {
  width: 40px;
  height: 4px;
  background: var(--border, #2a2d3e);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

/* Header del sheet */
.finai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px 14px;
  border-bottom: 1px solid var(--border, #1e2235);
  flex-shrink: 0;
}
.finai-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.finai-avatar {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #7c3aed, #0091ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(124,58,237,.35);
  flex-shrink: 0;
}
.finai-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
}
.finai-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text3);
}
.finai-status-dot {
  width: 7px;
  height: 7px;
  background: var(--accent, #00e5a0);
  border-radius: 50%;
  animation: statusPulse 2s ease infinite;
}
@keyframes statusPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(.8); }
}
.finai-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.finai-elite-badge {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 100px;
}
.finai-close-btn {
  background: var(--surface, #1a1d2e);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: var(--text2);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
}
.finai-close-btn:hover { background: var(--surface2); color: var(--text); }

/* Chat body */
.finai-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  min-height: 180px;
  max-height: calc(80vh - 200px);
}

/* Burbujas de mensaje */
.finai-msg {
  max-width: 88%;
  padding: 12px 15px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
  transition: opacity .3s, transform .3s;
}
.finai-msg.entering {
  opacity: 0;
  transform: translateY(8px);
}
.finai-msg-bot {
  align-self: flex-start;
  background: var(--surface, #1a1d2e);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
  color: var(--text2);
}
.finai-msg-bot strong { color: var(--text); }
.finai-msg-bot em { color: var(--accent, #00e5a0); font-style: normal; }

.finai-msg-user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #0091ff);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.finai-typing-bubble {
  padding: 14px 16px;
}
.finai-typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 16px;
}
.finai-typing-dots span {
  width: 7px;
  height: 7px;
  background: var(--text3, #6b7280);
  border-radius: 50%;
  animation: typingDot 1.2s ease infinite;
}
.finai-typing-dots span:nth-child(2) { animation-delay: .2s; }
.finai-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
  0%,60%,100% { opacity: .25; transform: translateY(0); }
  30%          { opacity: 1;   transform: translateY(-4px); }
}

/* Quick action buttons */
.finai-quick-actions {
  display: flex;
  gap: 8px;
  align-self: flex-start;
  flex-wrap: wrap;
  margin-top: -4px;
}
.finai-quick-btn {
  background: var(--surface);
  border: 1px solid rgba(124,58,237,.35);
  color: var(--text2);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.finai-quick-btn:hover {
  background: rgba(124,58,237,.1);
  border-color: rgba(124,58,237,.6);
  color: var(--text);
  transform: translateY(-1px);
}

/* Input bloqueado */
.finai-input-wrap {
  padding: 10px 14px 16px;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.finai-input-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface, #1a1d2e);
  border: 1.5px solid rgba(251,191,36,.25);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: all .2s;
}
.finai-input-locked:hover {
  background: rgba(251,191,36,.05);
  border-color: rgba(251,191,36,.45);
  transform: translateY(-1px);
}
.finai-input-icon { font-size: 16px; }
.finai-input-text {
  flex: 1;
  font-size: 13px;
  color: var(--text3);
}
.finai-input-cta {
  font-family: 'Syne', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: .04em;
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════
   FinAI MODAL — Variante de modal para #m-finai
   Extiende .modal con estilos específicos del chat FinAI
════════════════════════════════════════════════════════════════════════ */

/* Modal container override — sin padding (lo tienen los hijos) */
.finai-modal {
  padding: 0 !important;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
}
@media (min-width: 600px) {
  .finai-modal { border-radius: 24px; }
}

/* Header dentro del modal */
.finai-modal .finai-header {
  border-radius: 24px 24px 0 0;
  background: var(--bg2);
}

/* Badge EXPERT/PRO junto al nombre FinAI */
.badge-pro {
  display: inline-block;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .08em;
  color: #000;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-radius: 5px;
  padding: 2px 6px;
  vertical-align: middle;
  margin-left: 5px;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════════════════
   GAME CLOCK — Píldora de fecha/hora del juego en nav
════════════════════════════════════════════════════════════════════════ */
.nav-pill.game-clock {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--text2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 10px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-pill.game-clock .pv {
  color: var(--accent);
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════════════
   FinLearn DIAMANTE — CSS v5
   1. Haptic / click-press micro-interactions on all buttons
   2. Screen transitions: fade-in + slide-up 0.3s
   3. Module cards — circular progress ring redesign
   4. Finprofile card — gradient widget upgrade
   5. Mute button — SVG waveform icon, morphing
   6. FinAI FAB 2.0 — pulsing glow circle
   7. Compound Interest Calculator
════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════
   1. HAPTIC MICRO-INTERACTIONS
   Todos los botones reciben: press-down scale + ripple
═══════════════════════════════════════════════════════ */
.btn,
.mod-card,
.dca-card,
.nav-avatar,
.mute-btn,
.lmb-btn,
.tour-btn,
.saas-cta-btn,
.b2b-submit-btn,
.b2b-banner-btn,
.finai-quick-btn {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Press-down: scale to 0.96 + slight brightness reduction */
.btn:active {
  transform: scale(0.96) !important;
  filter: brightness(.9);
  transition: transform .08s ease, filter .08s ease !important;
}

/* Ripple wrapper — clips the ripple inside the button */
.btn {
  position: relative;
  overflow: hidden;
}

/* Ripple element (injected by JS) */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  transform: scale(0);
  animation: rippleAnim .55s linear forwards;
  pointer-events: none;
  z-index: 10;
}
@keyframes rippleAnim {
  to { transform: scale(4.5); opacity: 0; }
}

/* Module card press */
.mod-card:active {
  transform: scale(0.97) !important;
  transition: transform .08s ease !important;
}

/* ════════════════════════════════════════════════════════
   2. SCREEN TRANSITIONS — fade-in + slide-up 0.3s
   Override previous screen-enter to be more dramatic
═══════════════════════════════════════════════════════ */
@keyframes screenSlideUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Force override all previous screen transition rules */
.screen-enter {
  animation: screenSlideUp .32s cubic-bezier(.22,1,.36,1) forwards !important;
}

/* ════════════════════════════════════════════════════════
   3. MODULE CARDS — Circular Ring Redesign
═══════════════════════════════════════════════════════ */
/* Override previous mod-card layout for new ring design */
.mod-card {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 16px !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px !important;
  cursor: pointer;
  transition:
    transform .22s cubic-bezier(.4,0,.2,1),
    box-shadow .22s ease,
    border-color .22s ease;
  min-height: 200px;
  overflow: hidden;
  position: relative;
}

.mod-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,229,160,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.25), 0 0 0 1px rgba(0,229,160,.08);
}

.mod-card.done {
  border-color: rgba(0,229,160,.25);
  background: linear-gradient(145deg, var(--surface), rgba(0,229,160,.04));
}
.mod-card.done:hover {
  border-color: rgba(0,229,160,.5);
}

.mod-card.mod-locked {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: all;
}
.mod-card.mod-locked:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: none;
}

/* Ring container */
.mod-ring-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.mod-ring-svg {
  display: block;
}

.mod-ring-bg {
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 3;
}

.mod-ring-fg {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1);
}

/* Icon centered in ring */
.mod-ring-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.mod-ring-locked {
  font-size: 14px;
  opacity: .6;
}

/* Content area */
.mod-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.mod-tag-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mod-tag-pill {
  font-size: 9px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  letter-spacing: .08em;
  flex-shrink: 0;
}

.mod-done-chip {
  background: rgba(0,229,160,.15);
  color: var(--accent);
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid rgba(0,229,160,.2);
}

.mod-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13.5px !important;
  color: var(--text);
  line-height: 1.3;
  margin: 0 !important;
}

.mod-desc {
  font-size: 11.5px !important;
  color: var(--text3);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mod-footer {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.mod-xp {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0,229,160,.08);
  padding: 3px 8px;
  border-radius: 6px;
}

.mod-users {
  font-size: 10.5px;
  color: var(--text3);
}

/* Hide old mod-icon/mod-top/mod-pbar if they still exist in DOM */
.mod-icon { display: none !important; }
.mod-top  { display: none !important; }
.mod-pbar { display: none !important; }
.mod-badge-check, .mod-badge-lock { display: none !important; }

/* ════════════════════════════════════════════════════════
   4. FINPROFILE CARD — Gradient Widget Upgrade
═══════════════════════════════════════════════════════ */
.finprofile-card {
  background: linear-gradient(145deg,
    rgba(0,229,160,.07) 0%,
    var(--surface) 40%,
    rgba(0,145,255,.05) 100%
  ) !important;
  border: 1px solid rgba(0,229,160,.18) !important;
  border-radius: 24px !important;
  padding: 22px !important;
  position: relative;
  overflow: hidden;
}

/* Subtle top-right orb */
.finprofile-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(0,229,160,.1), transparent 70%);
  pointer-events: none;
}

/* "Ver detalles" button injected via JS */
.fpcard-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,229,160,.1);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  margin-top: 10px;
  transition: all .2s;
}
.fpcard-detail-btn:hover {
  background: rgba(0,229,160,.18);
  border-color: var(--accent);
}

.fpcard-total {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  background: linear-gradient(135deg, #fff 40%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1 !important;
  margin: 6px 0 !important;
}

/* ════════════════════════════════════════════════════════
   5. MUTE BUTTON — Redesign as minimal icon circle
═══════════════════════════════════════════════════════ */
/* Remove previous emoji-based style, replace with SVG */
.mute-btn {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.mute-btn:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.15) !important;
  transform: scale(1.08) !important;
}
.mute-btn:active {
  transform: scale(0.94) !important;
}

/* The SVG icon inside mute-btn is updated by JS */
.mute-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Muted state: reduced opacity */
.mute-btn.muted {
  opacity: .55 !important;
}
.mute-btn.muted:hover {
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════
   6. FinAI FAB 2.0 — Glowing circle (replace pill shape)
═══════════════════════════════════════════════════════ */

/* Override the previous FAB with a circle design */
.finai-fab {
  width: 60px !important;
  height: 60px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  bottom: 90px !important;
  right: 18px !important;
  background: linear-gradient(135deg, #7c3aed, #0091ff) !important;
  box-shadow:
    0 0 0 0 rgba(124,58,237,.5),
    0 8px 24px rgba(124,58,237,.4) !important;
  animation: fabEntry .5s .3s cubic-bezier(.34,1.56,.64,1) both,
             fabPulse 2.5s 1s ease-in-out infinite !important;
}

@keyframes fabPulse {
  0%, 100% {
    box-shadow:
      0 0  0 0px rgba(124,58,237,.6),
      0 8px 24px rgba(124,58,237,.4);
  }
  50% {
    box-shadow:
      0 0  0 12px rgba(124,58,237,0),
      0 8px 32px rgba(124,58,237,.6);
  }
}

.finai-fab:hover {
  transform: scale(1.1) !important;
  box-shadow:
    0 0  0 0px rgba(124,58,237,0),
    0 12px 36px rgba(124,58,237,.6) !important;
}

.finai-fab-icon {
  font-size: 22px !important;
  line-height: 1;
}

.finai-fab-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  color: rgba(255,255,255,.9);
  line-height: 1;
}

/* Replace conic glow with cleaner radial glow */
.finai-fab-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 20px 6px rgba(124,58,237,.4);
  animation: fabGlowPulse 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes fabGlowPulse {
  0%, 100% { box-shadow: 0 0 16px 4px rgba(124,58,237,.3); }
  50%       { box-shadow: 0 0 28px 10px rgba(124,58,237,.5); }
}

/* ════════════════════════════════════════════════════════
   7. CALCULADORA DE INTERÉS COMPUESTO
═══════════════════════════════════════════════════════ */
.calc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  overflow: hidden;
  position: relative;
}

/* Subtle background orb */
.calc-card::before {
  content: '';
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(0,145,255,.06), transparent 70%);
  pointer-events: none;
}

.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 22px;
}
.calc-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 2px;
}
.calc-sub {
  font-size: 12px;
  color: var(--text3);
}
.calc-result-badge {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--accent);
  background: rgba(0,229,160,.1);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 12px;
  padding: 8px 14px;
  white-space: nowrap;
  transition: all .3s;
}

/* Slider rows */
.calc-row {
  margin-bottom: 18px;
}
.calc-row-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.calc-row-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .02em;
}
.calc-row-val {
  font-family: 'DM Mono', monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
}

/* Slider track wrapper */
.calc-slider-track {
  position: relative;
  height: 6px;
}

/* Native input hidden behind custom track */
.calc-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
  margin: 0;
}

/* Custom track background */
.calc-slider-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.07);
  border-radius: 3px;
}

/* Fill track */
.calc-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 3px;
  transition: width .12s ease;
  pointer-events: none;
}

/* Fake thumb — positioned at fill end */
.calc-slider-fill::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 2px var(--accent);
}

.calc-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 2px;
}
.calc-slider-labels span {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: var(--text3);
}

/* Results row */
.calc-results {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2, var(--surface));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin: 20px 0 14px;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.calc-res-box {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.calc-res-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.calc-res-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.calc-res-big {
  font-size: 20px;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(0,229,160,.3);
}
.calc-res-box-accent {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 12px;
}
.calc-res-box-gold .calc-res-val {
  color: var(--gold, #fbbf24);
}
.calc-res-arrow {
  font-size: 14px;
  color: var(--text3);
  flex-shrink: 0;
}

@media (max-width: 430px) {
  .calc-results { gap: 4px; padding: 12px 8px; flex-wrap: wrap; }
  .calc-res-box { min-width: 60px; flex: 1 1 30%; }
  .calc-res-box-accent { border-left: none; border-right: none; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 8px 0; width: 100%; flex: 1 1 100%; }
  .calc-res-val { font-size: 13px; }
  .calc-res-big { font-size: 15px; }
  .calc-res-label { font-size: 9px; letter-spacing: .02em; }
  .calc-res-arrow { font-size: 11px; }
  .calc-res-box-accent { padding: 0 6px; }
}

/* Breakdown bar */
.calc-breakdown-bar {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  margin-bottom: 8px;
  background: rgba(255,255,255,.05);
}
.calc-bar-contrib {
  background: rgba(255,255,255,.25);
  transition: width .4s cubic-bezier(.4,0,.2,1);
  border-radius: 4px 0 0 4px;
}
.calc-bar-gains {
  background: linear-gradient(90deg, var(--accent), #00c4f0);
  transition: width .4s cubic-bezier(.4,0,.2,1);
  border-radius: 0 4px 4px 0;
}
.calc-bar-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}
.calc-bar-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text3);
}
.calc-leg-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.calc-leg-base { background: rgba(255,255,255,.25); }
.calc-leg-gain { background: var(--accent); }

.calc-footnote {
  font-size: 10px;
  color: var(--text3);
  line-height: 1.5;
  opacity: .7;
}

/* ════════════════════════════════════════════════════════
   8. FINPROFILE "Ver Detalles" button + Patrimony header
═══════════════════════════════════════════════════════ */
.fpcard-header {
  margin-bottom: 14px;
}
.fpcard-total-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}


/* ══════════════════════════════════════════════════════════════════════
   FinLearn ELITE v6 — NEW FEATURE CSS
   1. calc-chart  2. DynCert modal  3. WhiteLabel toggle
════════════════════════════════════════════════════════════════════════ */

/* ── 1. CALCULATOR CHART ────────────────────────────────────────────── */
.calc-chart-wrap {
  width: 100%;
  height: 200px;
  margin: 18px 0 12px;
  position: relative;
}
.calc-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── 2. DYNAMIC CERTIFICATE ─────────────────────────────────────────── */

/* Generate cert button — gold shimmer style */
.btn-cert {
  background: linear-gradient(135deg, #1a1400, #2a2000) !important;
  border: 1px solid rgba(251,191,36,.4) !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-cert:hover {
  background: linear-gradient(135deg, #2a2000, #3a2d00) !important;
  border-color: rgba(251,191,36,.7) !important;
  box-shadow: 0 4px 24px rgba(251,191,36,.2) !important;
  transform: translateY(-1px) !important;
}

/* Shimmer sweep on hover */
.btn-cert-shine {
  position: absolute;
  top: 0; left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,.15), transparent);
  transform: skewX(-20deg);
  animation: certShimmer 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes certShimmer {
  0%   { left: -80%; opacity: 0; }
  30%  { opacity: 1; }
  60%  { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* Certificate preview modal */
.modal-cert-preview {
  max-width: min(560px, calc(100vw - 32px)) !important;
  padding: 24px !important;
}

.dyncert-header {
  text-align: center;
  margin-bottom: 20px;
}
.dyncert-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.dyncert-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 4px;
}
.dyncert-sub {
  font-size: 12px;
  color: var(--text3);
}

.dyncert-preview-wrap {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dyncert-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  transition: opacity .3s ease;
}

.dyncert-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  font-size: 12px;
  color: var(--text3);
}

.dyncert-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(255,255,255,.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.dyncert-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Download link styled as button */
a.btn {
  text-decoration: none;
  text-align: center;
}

/* ── 3. WHITE-LABEL / BRAND DEMO ────────────────────────────────────── */

.wl-demo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(0,82,255,.06);
  border: 1px solid rgba(0,82,255,.15);
  border-radius: 14px;
  margin-top: 12px;
  gap: 10px;
}

.wl-demo-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.wl-demo-icon {
  font-size: 22px;
  flex-shrink: 0;
}

.wl-demo-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  line-height: 1.2;
}

.wl-demo-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 1px;
}

/* Toggle switch */
.wl-toggle {
  width: 48px;
  height: 26px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  padding: 0;
}

.wl-toggle.wl-on {
  background: #0052FF;
  border-color: #0052FF;
  box-shadow: 0 0 16px rgba(0,82,255,.4);
}

.wl-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.wl-toggle-knob.wl-on {
  transform: translateX(22px);
}

/* Active brand bar */
.wl-active-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,82,255,.1);
  border: 1px solid rgba(0,82,255,.25);
  border-radius: 10px;
  margin-top: 8px;
  animation: wlSlideIn .3s cubic-bezier(.4,0,.2,1);
  flex-wrap: wrap;
}

@keyframes wlSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.wl-active-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #4d8fff;
}

.wl-active-tag {
  font-size: 11px;
  color: rgba(0,82,255,.7);
  flex: 1;
}

.wl-reset-btn {
  background: none;
  border: 1px solid rgba(0,82,255,.3);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #4d8fff;
  cursor: pointer;
  transition: all .2s;
}
.wl-reset-btn:hover {
  background: rgba(0,82,255,.12);
  border-color: rgba(0,82,255,.6);
}

/* CSS variable transition for smooth brand switch */
:root {
  transition:
    --accent .5s ease,
    --accent2 .5s ease;
}

/* Force all accent-dependent elements to transition */
* {
  transition:
    color .4s ease,
    background-color .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;
}

/* Exception: don't transition animations and transforms */
.btn:active,
.finai-fab,
.tour-tooltip,
.wl-toggle-knob {
  transition: none !important;
}

/* Override ^ for specific elements that do need transitions */
.wl-toggle-knob {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}

/* ── App-name logo transition ── */
.logo {
  transition: color .4s ease, text-shadow .4s ease;
}




/* ── Chart quick ticker pills ── */
.chart-quick-tickers{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;padding:0 2px;}
.qt-pill{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;
  background:rgba(255,255,255,.05);border:1px solid var(--border2);border-radius:8px;
  cursor:pointer;font-size:11px;font-weight:600;transition:all .15s;min-width:64px;text-align:center;}
.qt-pill:hover,.qt-pill.active{background:rgba(0,229,160,.1);border-color:rgba(0,229,160,.4);}
.chart-canvas-wrap{height:180px;position:relative;}


/* ═══════════════════════════════════════════════════════════
   HOME V2 — Hero card, quick stats, proj compact
═══════════════════════════════════════════════════════════ */

/* Hero card */
.hero-card {
  background: linear-gradient(145deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,229,160,.4), transparent);
}

.hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.hero-left { flex: 1; }
.hero-eyebrow {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.hero-amount {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--text1);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.hero-proj {
  font-size: 12px;
  color: var(--accent);
  margin-top: 6px;
  font-style: italic;
  line-height: 1.4;
}
.hero-ring {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
}
.hero-score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text1);
}
.hero-score-label {
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 2px;
}

/* Stats grid */
.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.hs {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
}
.hs-label {
  font-size: 8px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.hs-val {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.hs-val.g  { color: var(--accent); }
.hs-val.b  { color: var(--accent2); }
.hs-val.gold { color: #f0b429; }
.hs-val.o  { color: var(--accent3); }

.hero-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  margin-bottom: 6px;
}
.hero-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.hero-goal-txt {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
}
.hero-badges {
  display: flex;
  gap: 6px;
}

/* Quick stats row */
.quick-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.qs-box {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  transition: border-color .2s;
}
.qs-box:hover { border-color: var(--border); }
.qs-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: clamp(11px, 4vw, 20px);
  color: var(--text1);
  line-height: 1;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qs-lab {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Challenge compact */
.chal-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,100,0,.06);
  border: 1px solid rgba(255,100,0,.2);
  border-radius: 14px;
  padding: 14px 16px;
}

/* Projection widget compact */
.proj-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.proj-head .proj-slider-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Inaction module — only shown by JS */
#inaction-module {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   ACHIEVEMENT POPUP
═══════════════════════════════════════════════════════════ */
#ach-popup {
  position: fixed;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(340px, 90vw);
  transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
#ach-popup.ach-popup-in  { top: 16px; }
#ach-popup.ach-popup-out { top: -160px; transition: top 0.4s ease-in; }

#ach-popup-inner {
  background: linear-gradient(135deg, #0d1117 0%, #1a0f2e 100%);
  border: 1px solid rgba(168, 85, 247, 0.5);
  border-radius: 18px;
  padding: 20px 24px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(168,85,247,.3), 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
  overflow: hidden;
}
#ach-popup-glow {
  position: absolute;
  top: -40px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(168,85,247,.25) 0%, transparent 70%);
  pointer-events: none;
}
#ach-popup-icon {
  font-size: 48px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 12px rgba(168,85,247,.6));
  animation: ach-bounce 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}
@keyframes ach-bounce {
  from { transform: scale(0) rotate(-20deg); }
  to   { transform: scale(1) rotate(0deg); }
}
#ach-popup-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  color: #a855f7;
  text-transform: uppercase;
  margin-bottom: 4px;
}
#ach-popup-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  margin-bottom: 4px;
}
#ach-popup-desc {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   ACHIEVEMENTS GRID (profile screen)
═══════════════════════════════════════════════════════════ */
.ach-grid-v2 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ach-v2 {
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 14px;
  padding: 14px 8px;
  text-align: center;
  transition: all .2s;
  position: relative;
}
.ach-v2.locked {
  background: rgba(255,255,255,.03);
  border-color: var(--border2);
  opacity: .45;
  filter: grayscale(1);
}
.ach-v2-icon { font-size: 28px; margin-bottom: 6px; }
.ach-v2-name { font-size: 10px; font-weight: 700; color: var(--text1); line-height: 1.3; }
.ach-v2-desc { font-size: 9px; color: var(--text3); margin-top: 3px; line-height: 1.3; }
.ach-v2.unlocked .ach-v2-icon { filter: drop-shadow(0 0 6px rgba(168,85,247,.5)); }
.ach-v2-check {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 9px;
  color: #a855f7;
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════
   DAILY REWARD MODAL
═══════════════════════════════════════════════════════════ */
.dr-modal {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 340px;
  padding: 28px 24px 20px;
  -webkit-overflow-scrolling: touch;
}
.dr-mega {
  border-color: rgba(240,180,41,.4) !important;
  box-shadow: 0 8px 40px rgba(240,180,41,.2), 0 0 0 1px rgba(255,255,255,.06) !important;
}
.dr-glow {
  position: absolute;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(0,229,160,.15) 0%, transparent 70%);
  pointer-events: none;
}
.dr-mega .dr-glow {
  background: radial-gradient(circle, rgba(240,180,41,.2) 0%, transparent 70%);
}
.dr-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dr-mega .dr-eyebrow { color: #f0b429; }
.dr-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text1);
  margin-bottom: 6px;
  line-height: 1.2;
}
.dr-desc {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 20px;
  line-height: 1.4;
}

/* Reward display */
.dr-reward {
  background: rgba(0,229,160,.06);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.dr-reward.mega {
  background: rgba(240,180,41,.06);
  border-color: rgba(240,180,41,.25);
}
.dr-reward-icon {
  font-size: 44px;
  line-height: 1;
  animation: dr-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.4s both;
}
@keyframes dr-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.dr-reward-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--accent);
}

/* 7-day dots tracker */
.dr-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}
.dr-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  background: rgba(255,255,255,.03);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  transition: all .3s;
}
.dr-dot.filled {
  background: rgba(0,229,160,.15);
  border-color: var(--accent);
  color: var(--accent);
}
.dr-dot.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-size: 16px;
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(0,229,160,.5);
  animation: dr-pulse 1.5s ease-in-out infinite;
}
@keyframes dr-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(0,229,160,.5); }
  50%       { box-shadow: 0 0 20px rgba(0,229,160,.8); }
}
.dr-claim-btn {
  font-size: 16px;
  padding: 14px;
  font-weight: 800;
  letter-spacing: .02em;
}


/* ═══════════════════════════════════════════════════════════
   RULETA DIARIA — Feature 9
═══════════════════════════════════════════════════════════ */
.rl-modal {
  max-width: 360px;
  padding: 24px 20px 18px;
  overflow-y: auto;
  max-height: 85vh;
  -webkit-overflow-scrolling: touch;
}
.rl-streak-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 16px;
  letter-spacing: .02em;
}
.rl-wheel-wrap {
  position: relative;
  width: 220px;
  margin: 0 auto 16px;
}
@media(max-height:700px) {
  .rl-wheel-wrap { width: 160px; }
  #rl-wheel-svg  { width: 160px; height: 160px; }
}
.rl-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 22px;
  color: #fff;
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
  pointer-events: none;
}
#rl-wheel-container {
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(0,0,0,.5), 0 0 0 3px rgba(255,255,255,.08);
}
#rl-wheel-svg {
  display: block;
}
#rl-prize-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 12px;
  animation: dr-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.rl-prize-icon {
  font-size: 40px;
  line-height: 1;
}
.rl-prize-label {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
}

/* ═══════════════════════════════════════════════════════════
   DEBT TRACKER
═══════════════════════════════════════════════════════════ */
.debt-empty {
  text-align: center;
  padding: 32px 16px;
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--border2);
  border-radius: 16px;
  margin-bottom: 16px;
}
.debt-summary-card {
  background: rgba(239,68,68,.05);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 16px;
  padding: 16px;
}
.debt-sum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.debt-sum-item { text-align: center; }
.debt-sum-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text1);
  margin-bottom: 2px;
}
.debt-sum-val.danger { color: var(--danger); }
.debt-sum-val.warn   { color: #f59e0b; }
.debt-sum-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Individual debt card */
.debt-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 14px;
  transition: border-color .2s;
}
.debt-card:hover { border-color: var(--border); }
.debt-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}
.debt-card-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text1);
  margin-bottom: 3px;
}
.debt-card-rate {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
}
.debt-card-rate.high { color: var(--danger); }
.debt-card-balance {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--danger);
  text-align: right;
  margin-bottom: 2px;
}
.debt-card-interest {
  font-size: 10px;
  color: #f59e0b;
  text-align: right;
}
.debt-rate-bar {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.debt-rate-fill {
  height: 100%;
  background: var(--accent2);
  border-radius: 2px;
  transition: width .4s;
}
.debt-rate-fill.danger { background: var(--danger); }
.debt-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Plan comparison */
.debt-plan-card {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
.debt-plan-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.debt-plan-note {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 14px;
}
.debt-plan-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.debt-plan-col {
  border-radius: 12px;
  padding: 12px;
  border: 1px solid var(--border2);
}
.debt-plan-col.avalanche {
  background: rgba(0,229,160,.05);
  border-color: rgba(0,229,160,.25);
}
.debt-plan-col.snowball {
  background: rgba(99,179,237,.05);
  border-color: rgba(99,179,237,.2);
}
.dp-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--text1);
}
.dp-subtitle {
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 10px;
  line-height: 1.3;
}
.dp-stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
}
.dp-val {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text1);
}
.dp-val.warn { color: #f59e0b; }
.dp-lab { font-size: 10px; color: var(--text3); }
.debt-plan-insight {
  font-size: 12px;
  color: var(--text2);
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.4;
}

/* Form helper */
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text2); }

/* ═══════════════════════════════════════════════════════════
   ONBOARDING STEP 4 — Grid layout + health score preview
═══════════════════════════════════════════════════════════ */
.fin-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.fin-row-2 .fin-field { margin-bottom: 0; min-width: 0; overflow: hidden; }
.fin-row-2 .fin-input-row { min-width: 0; }
.fin-row-2 .fin-num { min-width: 0; width: 100%; }

@media (max-width: 480px) {
  .fin-row-2 { grid-template-columns: 1fr; gap: 0; }
  .fin-prefix { padding: 10px 12px; font-size: 14px; }
  .fin-num    { font-size: 15px; padding: 10px 12px; }
}

.fp-health-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.fp-health-score {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
  min-width: 70px;
}
.fp-health-label {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  line-height: 1.3;
}
.fp-divider {
  height: 1px;
  background: var(--border2);
  margin-bottom: 10px;
}
.fp-insight {
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
  font-style: italic;
  line-height: 1.4;
  min-height: 18px;
}

/* ═══════════════════════════════════════════════════════════
   CAREER EVENT MODAL
═══════════════════════════════════════════════════════════ */
.career-event-modal {
  max-width: 380px;
  text-align: center;
  padding: 28px 20px 24px;
}
.cev-icon {
  font-size: 48px;
  margin-bottom: 10px;
  animation: ach-bounce 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}
.cev-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text1);
  margin-bottom: 8px;
}
.cev-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 18px;
}
.cev-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
  text-align: left;
}
.career-choice-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all .2s;
  text-align: left;
  width: 100%;
}
.career-choice-btn:hover { border-color: var(--border); background: rgba(255,255,255,.07); transform: translateY(-1px); }
.career-choice-btn.choice-positive:hover { border-color: var(--accent); background: rgba(0,229,160,.07); }
.career-choice-btn.choice-negative:hover { border-color: var(--danger); background: rgba(255,75,92,.07); }
.ccb-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text1);
  margin-bottom: 3px;
}
.ccb-desc {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.4;
}
.cev-lesson {
  font-size: 11px;
  color: var(--accent);
  font-style: italic;
  line-height: 1.5;
  background: rgba(0,229,160,.06);
  border: 1px solid rgba(0,229,160,.15);
  border-radius: 8px;
  padding: 8px 12px;
}

/* ═══════════════════════════════════════════════════════════
   YEAR-END SUMMARY MODAL
═══════════════════════════════════════════════════════════ */
.year-end-modal {
  max-width: 380px;
  text-align: center;
  padding: 28px 20px 24px;
  position: relative;
  overflow: hidden;
}
.year-end-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(240,180,41,.12) 0%, transparent 65%);
  pointer-events: none;
}
.ye-fireworks {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 8px;
  animation: dr-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}
.ye-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  color: #f0b429;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ye-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--text1);
  margin-bottom: 16px;
}
.ye-patrimony {
  background: rgba(240,180,41,.07);
  border: 1px solid rgba(240,180,41,.25);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
  position: relative;
}
.ye-patrimony-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.ye-patrimony-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #f0b429;
  line-height: 1.1;
}
.ye-pct {
  display: inline-block;
  margin-top: 6px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  padding: 3px 10px;
  border-radius: 20px;
}
.ye-pct.pos { background: rgba(0,229,160,.15); color: var(--accent); }
.ye-pct.neg { background: rgba(255,75,92,.15);  color: var(--danger); }

/* 4-stat row */
.ye-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ye-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 4px;
}
.ye-stat-icon { font-size: 16px; margin-bottom: 4px; }
.ye-stat-val {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text1);
  margin-bottom: 2px;
}
.ye-stat-lab { font-size: 9px; color: var(--text3); font-weight: 600; }

.ye-highlight {
  font-size: 13px;
  color: var(--text1);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.ye-msg {
  font-size: 12px;
  color: var(--text2);
  font-style: italic;
  margin-bottom: 14px;
  line-height: 1.5;
}
.ye-next {
  background: rgba(0,229,160,.06);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 12px;
  padding: 12px;
}
.ye-next-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.ye-next-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--accent);
}
.ye-next-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.modal-out {
  animation: modal-fade-out 0.3s ease forwards;
}
@keyframes modal-fade-out {
  to { opacity: 0; transform: scale(0.95); }
}

/* ═══════════════════════════════════════════════════════════
   MONEY POP — Floating money popup (salary, business, divs)
═══════════════════════════════════════════════════════════ */
.money-pop {
  position: fixed;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: #00e5a0;
  pointer-events: none;
  z-index: 9999;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  animation: money-float 2.2s cubic-bezier(0.25,0.46,0.45,0.94) forwards;
  white-space: nowrap;
}
@keyframes money-float {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { transform: translateY(-10px) scale(1.1); opacity: 1; }
  70%  { transform: translateY(-60px) scale(1); opacity: 1; }
  100% { transform: translateY(-110px) scale(0.9); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   MUSIC BUTTON
═══════════════════════════════════════════════════════════ */
.music-btn {
  cursor: pointer;
  border: none;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  color: var(--text3);
  padding: 4px 8px;
  border-radius: 20px;
  transition: all .2s;
  letter-spacing: .02em;
}
.music-btn:hover { background: rgba(255,255,255,.1); color: var(--text2); }
.music-btn.music-on {
  background: rgba(0,229,160,.12);
  color: var(--accent);
  box-shadow: 0 0 8px rgba(0,229,160,.25);
  animation: music-pulse 2s ease-in-out infinite;
}
@keyframes music-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(0,229,160,.25); }
  50%       { box-shadow: 0 0 16px rgba(0,229,160,.5); }
}

/* ═══════════════════════════════════════════════════════════
   SPEED BUTTON active states
═══════════════════════════════════════════════════════════ */
#game-speed-btn {
  transition: color .2s, background .2s;
  cursor: pointer;
}
#game-speed-btn:hover { background: rgba(255,255,255,.1) !important; }

/* ═══════════════════════════════════════════════════════════
   LIVE PRICE TICKER
═══════════════════════════════════════════════════════════ */
.price-ticker-wrap {
  width: 100%;
  overflow: hidden;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
  height: 28px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}
.price-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}
.price-ticker:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.pt-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
}
.pt-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  letter-spacing: .04em;
}
.pt-price {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  font-weight: 600;
}
.pt-chg {
  font-size: 9px;
  font-family: 'DM Mono', monospace;
  opacity: 0.8;
}
.pt-sep {
  color: rgba(255,255,255,.15);
  font-size: 10px;
  padding: 0 4px;
}

/* ═══════════════════════════════════════════════════════════
   SPLASH SCREEN
═══════════════════════════════════════════════════════════ */
.app-splash {
  position: fixed;
  inset: 0;
  background: #060810;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .6s ease, transform .6s ease;
  cursor: pointer;
}
.app-splash.splash-out {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  display: none;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}
.splash-logo-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.splash-orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,229,160,.3) 0%, transparent 70%);
  animation: splash-orb-pulse 2s ease-in-out infinite;
}
@keyframes splash-orb-pulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%       { transform: scale(1.2); opacity: 1; }
}
.splash-icon {
  font-size: 56px;
  position: relative;
  z-index: 1;
  animation: dr-pop .6s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.splash-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: var(--text1);
  letter-spacing: .02em;
}
.splash-tagline {
  font-size: 14px;
  color: var(--text3);
  margin-top: -6px;
}
.splash-bar-wrap {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 12px;
}
.splash-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 99px;
  transition: width .25s ease;
}
.splash-hint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
  min-height: 16px;
}

/* ═══════════════════════════════════════════════════════════
   INTERACTIVE TUTORIAL
═══════════════════════════════════════════════════════════ */
#tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: all;
}
.tut-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(2px);
}
.tut-card {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, 88vw);
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 20px 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  z-index: 10;
  animation: dr-pop .3s cubic-bezier(.34,1.56,.64,1) both;
}
.tut-step-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}
.tut-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: all .2s;
}
.tut-dot.active {
  background: var(--accent);
  width: 18px;
  border-radius: 3px;
}
.tut-icon {
  font-size: 40px;
  text-align: center;
  margin-bottom: 10px;
}
.tut-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text1);
  text-align: center;
  margin-bottom: 8px;
}
.tut-desc {
  font-size: 13px;
  color: var(--text2);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 18px;
}
.tut-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.tut-highlight {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 0 0 4000px rgba(0,0,0,.55);
  pointer-events: none;
  z-index: 5;
  animation: tut-pulse 1.5s ease-in-out infinite;
}
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 4000px rgba(0,0,0,.55), 0 0 0 4px rgba(0,229,160,.3); }
  50%       { box-shadow: 0 0 0 4000px rgba(0,0,0,.55), 0 0 0 8px rgba(0,229,160,.5); }
}
.tut-arrow {
  position: absolute;
  font-size: 22px;
  color: var(--accent);
  z-index: 11;
  transform: translateX(-50%);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
  animation: tut-bounce .8s ease-in-out infinite alternate;
}
@keyframes tut-bounce {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-6px); }
}
@media (max-width: 480px) {
  .tut-card {
    width: min(340px, 88vw);
    padding: 20px 16px 16px !important;
    max-height: 72vh;
    overflow-y: auto;
  }
  .tut-icon  { font-size: 32px; }
  .tut-title { font-size: 16px; }
  .tut-desc  { font-size: 12px; margin-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════
   MARKET CRISIS MODAL
═══════════════════════════════════════════════════════════ */
.crisis-modal {
  max-width: 380px;
  text-align: center;
  padding: 28px 20px 24px;
}
.crisis-icon {
  font-size: 52px;
  margin-bottom: 6px;
  animation: dr-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
.crisis-eyebrow {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.crisis-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--text1);
  margin-bottom: 10px;
}
.crisis-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════════════
   FEATURE 11: CRISIS MODAL — Countdown + Summary
═══════════════════════════════════════════════════════════ */
.mc-modal {
  max-width: 380px;
  text-align: center;
  padding: 22px 18px 20px;
  transition: border-color .3s;
}
.mc-modal.mc-warn   { border-color: rgba(240,180,41,.5) !important; }
.mc-modal.mc-urgent {
  border-color: rgba(239,68,68,.6) !important;
  box-shadow: 0 8px 40px rgba(239,68,68,.2), 0 0 0 1px rgba(239,68,68,.15) !important;
}
.mc-alert-bar {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 10px;
}
.mc-countdown-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 12px auto 16px;
}
.mc-countdown-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mc-countdown-val {
  font-family: 'DM Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--text1);
  line-height: 1;
}
.mc-countdown-label { font-size: 9px; color: var(--text3); }
.mc-decisions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.mc-decision-btn {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: var(--text1);
  text-align: left;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  font-size: 13px;
  font-weight: 600;
}
.mc-decision-btn:hover { background: rgba(255,255,255,.07); transform: translateX(3px); }
.mc-decision-btn.choice-positive { border-color: rgba(0,229,160,.25); }
.mc-decision-btn.choice-positive:hover { border-color: rgba(0,229,160,.5); }
.mc-decision-btn.choice-negative { border-color: rgba(239,68,68,.25); }
.mc-decision-btn.choice-negative:hover { border-color: rgba(239,68,68,.4); }

/* Summary */
.mc-summary { text-align: left; }
.mc-sum-header { margin-bottom: 14px; text-align: center; }
.mc-sum-icon { font-size: 36px; margin-bottom: 4px; }
.mc-sum-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 18px; color: var(--text1); }
.mc-sum-result {
  font-size: 13px;
  color: var(--text2);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.mc-sum-result.t-success { background: rgba(0,229,160,.08); color: #00e5a0; }
.mc-sum-result.t-danger  { background: rgba(239,68,68,.08);  color: #ef4444; }
.mc-patrimony-delta {
  text-align: center;
  margin-bottom: 12px;
}
.mc-pd-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.mc-pd-val   { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 26px; }
.mc-alternatives { padding: 12px 14px !important; }
.mc-alts-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.mc-alt-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
}
.mc-alt-row:last-child { border-bottom: none; }
.mc-alt-row.mc-alt-chosen { color: var(--text1); font-weight: 600; }
.mc-alt-icon { font-size: 16px; flex-shrink: 0; }
.mc-lesson-box {
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   MARKET SHAKE ANIMATION
═══════════════════════════════════════════════════════════ */
.market-shake {
  animation: mkt-shake .6s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes mkt-shake {
  10%, 90%  { transform: translateX(-2px); }
  20%, 80%  { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60%  { transform: translateX(6px); }
  100%      { transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════
   NEWS BANNER — Noticias de mercado flotantes
═══════════════════════════════════════════════════════════ */
.news-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'DM Mono', monospace;
  letter-spacing: .02em;
  text-align: center;
  transition: opacity .5s ease, transform .5s ease;
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}
.news-banner.news-positive {
  background: linear-gradient(90deg, rgba(0,229,160,.18), rgba(0,229,160,.08));
  color: #00e5a0;
  border-bottom: 1px solid rgba(0,229,160,.25);
}
.news-banner.news-negative {
  background: linear-gradient(90deg, rgba(255,75,92,.18), rgba(255,75,92,.08));
  color: #ff4b5c;
  border-bottom: 1px solid rgba(255,75,92,.25);
}

/* ═══════════════════════════════════════════════════════════
   LIFE EVENT MODAL — Eventos de vida aleatorios
═══════════════════════════════════════════════════════════ */
.le-modal {
  max-width: 380px;
  text-align: center;
  padding: 28px 20px 24px;
}
.le-icon {
  font-size: 52px;
  margin-bottom: 8px;
  animation: dr-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.le-type {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.le-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text1);
  margin-bottom: 8px;
}
.le-desc {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 12px;
}
.le-amount {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 40px;
  margin-bottom: 8px;
  animation: dr-pop .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}
.le-fund-status {
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
  display: inline-block;
}
.le-lesson {
  font-size: 11px;
  color: var(--text3);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.5;
  text-align: left;
  border-left: 2px solid var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   PATRIMONY CHART WRAP
═══════════════════════════════════════════════════════════ */
.patr-chart-wrap {
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════
   MORTGAGE SYSTEM
═══════════════════════════════════════════════════════════ */
.mort-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.mort-card.mort-paid {
  opacity: 0.6;
  border-color: var(--accent);
}
.mort-empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text2);
  font-size: 13px;
}
.mort-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.mort-prop {
  font-weight: 700;
  font-size: 14px;
  color: var(--text1);
}
.mort-type-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
}
.mort-type-tag.fixed    { background: rgba(0,229,160,.15); color: var(--accent); }
.mort-type-tag.variable { background: rgba(240,180,41,.15); color: #f0b429; }
.mort-big {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: var(--text1);
  margin: 8px 0 2px;
}
.mort-big span {
  font-size: 14px;
  color: var(--text3);
  font-weight: 400;
}
.mort-rate {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 6px;
}
.mort-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}
.mort-preview {
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
}
.mort-preview.mort-warning {
  border: 1px solid rgba(255,75,92,.3);
}
.mort-preview-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text2);
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.mort-preview-row.big {
  font-size: 15px;
  font-weight: 700;
  color: var(--text1);
  padding: 8px 0;
}
.mort-warning-msg {
  font-size: 11px;
  color: #f0b429;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(240,180,41,.2);
}
.mort-lesson {
  font-size: 11px;
  color: var(--text3);
  background: rgba(0,229,160,.06);
  border-left: 2px solid var(--accent);
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
  margin-top: 16px;
  line-height: 1.5;
}

/* Amortization table */
.amort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.amort-table th {
  color: var(--text3);
  font-weight: 600;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.amort-table th:first-child { text-align: left; }
.amort-table td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--text2);
}
.amort-table td:first-child { text-align: left; color: var(--text3); }

/* ═══════════════════════════════════════════════════════════
   SCENARIO CHALLENGES
═══════════════════════════════════════════════════════════ */
.scenario-card {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all .2s;
}
.scenario-card:hover {
  background: rgba(255,255,255,.07);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.sc-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}
.sc-icon {
  font-size: 26px;
  flex-shrink: 0;
  line-height: 1.2;
}
.sc-header > div:not(.sc-xp) {
  flex: 1;
  min-width: 0;
}
.sc-header .sc-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--text1);
  word-break: break-word;
  line-height: 1.3;
}
.stock-card .sc-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-diff {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}
.sc-xp {
  flex-shrink: 0;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: rgba(0,229,160,.1);
  padding: 4px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.sc-tagline {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin-bottom: 8px;
  word-break: break-word;
}
.sc-obj {
  font-size: 11px;
  color: #f0b429;
  font-weight: 600;
}

/* Scenario active banner */
.scenario-banner {
  position: fixed;
  bottom: 72px;
  left: 0; right: 0;
  background: linear-gradient(135deg, rgba(110,86,255,.9), rgba(0,229,160,.7));
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  z-index: 3000;
  backdrop-filter: blur(8px);
  box-shadow: 0 -4px 20px rgba(0,0,0,.3);
}

/* ═══════════════════════════════════════════════════════════
   MODAL OVERLAY + BOX — usados por modales dinámicos
   (crisis, hipoteca, eventos de vida, escenarios)
═══════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 8000;
  padding: 20px;
}
.modal-overlay[style*="flex"] {
  display: flex !important;
}
.modal-box {
  position: relative;
  background: var(--bg2, #0d1420);
  border: 1px solid var(--border2, rgba(255,255,255,.12));
  border-radius: 24px;
  padding: 28px 20px 24px;
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
  animation: modalUp .3s cubic-bezier(.34,1.56,.64,1) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}

/* ═══════════════════════════════════════════════════════════
   RETOS BUTTON — Marco rojo, texto amarillo, rayo
═══════════════════════════════════════════════════════════ */
.retos-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 60, 60, 0.08);
  border: 1.5px solid rgba(255, 60, 60, 0.6);
  border-radius: 14px;
  cursor: pointer;
  margin-bottom: 16px;
  text-align: left;
  transition: all .2s;
  color: inherit;
}
.retos-btn:hover {
  background: rgba(255, 60, 60, 0.14);
  border-color: rgba(255, 60, 60, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(255, 60, 60, 0.2);
}
.retos-btn:active {
  transform: translateY(0);
}
.retos-icon {
  font-size: 28px;
  flex-shrink: 0;
  animation: retos-zap 1.8s ease-in-out infinite;
}
@keyframes retos-zap {
  0%, 90%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  95% { transform: scale(1.3) rotate(-10deg); opacity: .8; }
}
.retos-text-wrap {
  flex: 1;
}
.retos-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #ffd93d;
  letter-spacing: .01em;
}
.retos-sub {
  font-size: 11px;
  color: rgba(255, 60, 60, 0.8);
  margin-top: 2px;
}
.retos-arrow {
  font-size: 18px;
  color: #ffd93d;
  opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════
   FIRE CALCULATOR
═══════════════════════════════════════════════════════════ */
.fire-number-banner {
  background: linear-gradient(135deg, rgba(240,180,41,.1), rgba(0,229,160,.08));
  border: 1px solid rgba(240,180,41,.25);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-bottom: 14px;
}
.fire-nb-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}
.fire-nb-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #f0b429;
  margin-bottom: 4px;
}
.fire-nb-sub {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
}
.fire-result-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.fire-stat {
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.fire-stat-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--text1);
  margin-bottom: 3px;
}
.fire-stat-lab {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.fire-tip {
  font-size: 11px;
  color: var(--accent);
  background: rgba(0,229,160,.07);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 6px;
  text-align: center;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
   WHAT IF SIMULATOR
═══════════════════════════════════════════════════════════ */
.wi-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.wi-stat {
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 12px;
}
.wi-stat.wi-stat-main {
  background: rgba(0,229,160,.06);
  border: 1px solid rgba(0,229,160,.15);
}
.wi-stat-lab {
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 4px;
}
.wi-stat-val {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text1);
}
.wi-stat-val.g    { color: var(--accent); }
.wi-stat-val.gold { color: #f0b429; }
.wi-stat-val.muted { color: rgba(150,150,170,.8); }
.wi-diff-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,229,160,.06);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   STREAMER MODE — oculta todos los valores €
═══════════════════════════════════════════════════════════ */
body.streamer-mode [id*="patr"],
body.streamer-mode [id*="cash"],
body.streamer-mode [id*="xp"],
body.streamer-mode [id*="invest"],
body.streamer-mode [id*="salary"],
body.streamer-mode [id*="balance"],
body.streamer-mode .money-pop,
body.streamer-mode .mort-big,
body.streamer-mode .le-amount,
body.streamer-mode .fire-nb-val,
body.streamer-mode .wi-stat-val {
  filter: blur(8px);
  user-select: none;
  transition: filter .3s;
}
body.streamer-mode [id*="patr"]:hover,
body.streamer-mode [id*="cash"]:hover,
body.streamer-mode .wi-stat-val:hover {
  filter: blur(0);
}
#streamer-btn.streamer-on {
  background: rgba(110,86,255,.2) !important;
  color: #a78bfa !important;
  border-color: rgba(110,86,255,.4) !important;
}

/* ═══════════════════════════════════════════════════════════
   SECRET ACHIEVEMENT PILL (badge especial en pantalla logros)
═══════════════════════════════════════════════════════════ */
.ach-secret-locked {
  opacity: 0.35;
  filter: grayscale(1);
}
.ach-secret-locked .ach-icon::after {
  content: '🔒';
  position: absolute;
  bottom: -4px;
  right: -4px;
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════
   SCENARIO HUD — Barra flotante del minijuego activo
   Muestra progreso, countdown y botón de salida en tiempo real
═══════════════════════════════════════════════════════════ */
.scenario-banner {
  position: fixed;
  bottom: 72px;
  left: 0; right: 0;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(14,8,30,.97), rgba(20,12,40,.97));
  border-top: 1px solid rgba(110,86,255,.4);
  border-bottom: 1px solid rgba(0,0,0,.3);
  z-index: 3500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 -6px 30px rgba(110,86,255,.25);
}
.sc-hud-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 38%;
}
.sc-hud-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.sc-hud-name {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-hud-obj {
  font-size: 9px;
  color: rgba(255,255,255,.4);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sc-hud-center {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.sc-hud-pct {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: #a78bfa;
  line-height: 1;
  margin-bottom: 3px;
}
.sc-hud-bar-wrap {
  height: 5px;
  background: rgba(255,255,255,.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.sc-hud-bar {
  height: 100%;
  background: linear-gradient(90deg, #6e56ff, #a78bfa);
  border-radius: 3px;
  transition: width .6s ease;
  min-width: 2px;
}
.sc-hud-time {
  font-size: 9px;
  color: rgba(255,255,255,.4);
}
.sc-hud-exit {
  background: rgba(255,75,92,.15);
  border: 1px solid rgba(255,75,92,.3);
  color: #ff4b5c;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.sc-hud-exit:hover {
  background: rgba(255,75,92,.25);
}

/* Body en modo escenario — frame sutil alrededor de la app */
body.scenario-active #app-root,
body.scenario-active .screens-wrap {
  outline: 2px solid rgba(110,86,255,.35);
  outline-offset: -2px;
}
body.scenario-active .top-nav {
  background: linear-gradient(90deg, rgba(110,86,255,.12), transparent);
  border-bottom-color: rgba(110,86,255,.3);
}
body.scenario-active #bn-home::after {
  content: '⚡';
  position: absolute;
  top: 2px; right: 2px;
  font-size: 8px;
}

/* ═══════════════════════════════════════════════════════════
   SCENARIO CARDS — pantalla de selección mejorada
═══════════════════════════════════════════════════════════ */
.scenario-card:active {
  transform: scale(0.98);
}
.scenario-card.sc-locked { opacity:.55; cursor:not-allowed; }
.scenario-card.sc-locked:hover { transform:none; border-color:var(--border); }
.scenario-card.sc-done { border-color:rgba(0,229,160,.3); }
.sc-done-badge { background:rgba(0,229,160,.15); color:var(--accent); font-size:10px; font-weight:800; padding:3px 8px; border-radius:20px; }
.sc-start-btn { width:100%; margin-top:10px; padding:10px; background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:10px; color:var(--text1); font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; }
.sc-start-btn:hover { background:rgba(0,229,160,.12); border-color:var(--accent); color:var(--accent); }

/* ═══════════════════════════════════════════════════════════
   SCENARIO BRIEFING MODAL
═══════════════════════════════════════════════════════════ */
.scb-box { max-width:400px; max-height:88vh; overflow-y:auto; }
.scb-top { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.scb-big-icon { font-size:44px; line-height:1; flex-shrink:0; }
.scb-title { font-family:'Syne',sans-serif; font-weight:800; font-size:20px; color:var(--text1); line-height:1.2; }
.scb-diff  { font-size:12px; color:var(--text3); margin-top:4px; }
.scb-story { font-size:13px; color:var(--text2); line-height:1.6; margin-bottom:18px; padding:12px 14px; background:rgba(255,255,255,.04); border-radius:10px; border-left:3px solid rgba(110,86,255,.5); }
.scb-section-label { font-size:10px; font-weight:700; color:var(--text3); letter-spacing:.08em; font-family:'DM Mono',monospace; margin:16px 0 8px; }
.scb-conditions { background:rgba(255,255,255,.03); border-radius:10px; padding:4px 0; border:1px solid var(--border); overflow:hidden; }
.scb-cond-row { display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:13px; color:var(--text2); border-bottom:1px solid rgba(255,255,255,.04); }
.scb-cond-row:last-child { border-bottom:none; }
.scb-cond-row strong { margin-left:auto; font-family:'DM Mono',monospace; font-size:12px; color:var(--text1); }
.scb-cond-icon { font-size:15px; flex-shrink:0; width:20px; text-align:center; }
.scb-cond-danger strong { color:var(--danger); }
.scb-obj-box { font-size:13px; font-weight:700; color:var(--accent); padding:10px 14px; background:rgba(0,229,160,.07); border:1px solid rgba(0,229,160,.2); border-radius:10px; }
.scb-lesson  { font-size:12px; color:var(--text2); line-height:1.6; padding:10px 14px; background:rgba(255,255,255,.03); border-radius:10px; font-style:italic; }
.scb-reward  { text-align:center; font-size:11px; color:var(--gold); font-family:'DM Mono',monospace; font-weight:700; margin:14px 0 12px; letter-spacing:.04em; }
.scb-start-btn { margin-top:0 !important; background:linear-gradient(135deg,#6e56ff,#a78bfa) !important; border-color:transparent !important; color:#fff !important; font-size:15px !important; padding:13px !important; }
.scb-start-btn:hover { opacity:.9; transform:translateY(-1px); }

@media (max-width: 480px) {
  .scb-box    { max-width:100%; border-radius:20px 20px 0 0; margin:auto 0 0; max-height:90vh; }
  .scb-title  { font-size:18px; }
}

/* ═══════════════════════════════════════════════════════════
   MUSIC WIDGET — botón toggle + slider de volumen inline
═══════════════════════════════════════════════════════════ */
.music-widget {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 3px 8px 3px 4px;
  transition: all .2s;
}
.music-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px;
  border-radius: 50%;
  transition: transform .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.music-toggle-btn:active { transform: scale(0.85); }
.music-toggle-btn.music-on {
  animation: music-pulse 2s ease-in-out infinite;
}
@keyframes music-pulse {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.4) drop-shadow(0 0 4px rgba(0,229,160,.6)); }
}
.music-vol-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}
.music-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--val, 70%), rgba(255,255,255,.15) var(--val, 70%));
  outline: none;
  cursor: pointer;
}
.music-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,229,160,.5);
  transition: transform .1s;
}
.music-vol-slider::-webkit-slider-thumb:active { transform: scale(1.3); }
.music-vol-pct {
  font-size: 9px;
  color: var(--text3);
  font-family: 'DM Mono', monospace;
  min-width: 26px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════
   SPEED BUTTON — colores dinámicos según velocidad
═══════════════════════════════════════════════════════════ */
#game-speed-btn {
  transition: color .3s, border-color .3s, background .3s;
}

/* ═══════════════════════════════════════════════════════════
   AI COACH BUBBLE — aparece flotante en home
═══════════════════════════════════════════════════════════ */
.coach-bubble {
  position: fixed;
  bottom: 82px;
  left: 12px;
  right: 12px;
  background: linear-gradient(135deg, rgba(14,10,30,.97), rgba(20,14,40,.97));
  border: 1px solid rgba(110,86,255,.4);
  border-radius: 18px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  z-index: 3800;
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(110,86,255,.25);
  transform: translateY(120%) scale(0.95);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  pointer-events: none;
}
.coach-bubble.coach-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
.coach-avatar {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
  animation: coach-bob 2s ease-in-out infinite;
}
@keyframes coach-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}
.coach-content { flex: 1; min-width: 0; }
.coach-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 4px;
}
.coach-text {
  font-size: 13px;
  color: rgba(255,255,255,.9);
  line-height: 1.55;
  margin-bottom: 8px;
}
.coach-ask-btn {
  background: rgba(110,86,255,.2);
  border: 1px solid rgba(110,86,255,.4);
  color: #a78bfa;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s;
}
.coach-ask-btn:hover { background: rgba(110,86,255,.35); }
.coach-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.3);
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px;
  line-height: 1;
}
.coach-close:hover { color: rgba(255,255,255,.7); }
.coach-q-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text2);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.coach-q-btn:hover {
  background: rgba(110,86,255,.15);
  border-color: rgba(110,86,255,.4);
  color: #a78bfa;
}

/* Coach CTA button in home */
.coach-cta-btn {
  width: 100%;
  padding: 12px 16px;
  background: rgba(110,86,255,.07);
  border: 1px solid rgba(110,86,255,.3);
  border-radius: 12px;
  color: var(--text2);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 16px;
  transition: all .2s;
}
.coach-cta-btn:hover {
  background: rgba(110,86,255,.14);
  border-color: rgba(110,86,255,.6);
  color: var(--text1);
}

/* ═══════════════════════════════════════════════════════════
   PORTFOLIO DONUT
═══════════════════════════════════════════════════════════ */
.donut-leg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
}
.donut-leg-row:last-child { border-bottom: none; }
.donut-leg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-leg-name { flex: 1; color: var(--text2); font-weight: 600; }
.donut-leg-pct  { font-weight: 800; font-size: 11px; min-width: 36px; text-align: right; }
.donut-leg-val  { color: var(--text3); font-size: 11px; min-width: 60px; text-align: right; }

/* ═══════════════════════════════════════════════════════════
   DUEL QUIZ
═══════════════════════════════════════════════════════════ */
.duel-box {
  padding: 0 !important;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  position: relative;
}
.duel-header {
  background: linear-gradient(135deg, rgba(110,86,255,.15), rgba(0,229,160,.08));
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.duel-vs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.duel-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.duel-avatar { font-size: 28px; }
.duel-pname  { font-size: 10px; color: var(--text3); }
.duel-pscore {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}
.duel-vstext {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: rgba(255,255,255,.25);
}
.duel-q-num   { font-size: 10px; color: var(--text3); text-align: center; margin-bottom: 4px; }
.duel-timer-bar {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}
.duel-timer-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 1s linear, background .3s;
}
.duel-timer-txt { font-size: 10px; color: var(--text3); text-align: center; }
.duel-question {
  font-size: 15px;
  font-weight: 700;
  color: var(--text1);
  padding: 18px 20px 10px;
  line-height: 1.4;
}
.duel-opts {
  padding: 0 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.duel-opt {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: left;
  color: var(--text1);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.duel-opt:hover:not(:disabled) {
  background: rgba(110,86,255,.15);
  border-color: rgba(110,86,255,.5);
}
.duel-opt.duel-correct {
  background: rgba(0,229,160,.15) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.duel-opt.duel-wrong {
  background: rgba(255,75,92,.15) !important;
  border-color: #ff4b5c !important;
  color: #ff4b5c !important;
}
.duel-feedback {
  min-height: 32px;
  padding: 4px 20px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.fb-correct { color: var(--accent); font-weight: 700; }
.fb-wrong   { color: #ff4b5c; font-weight: 700; }
.fb-answer  { color: var(--text2); }
.fb-bot     { color: var(--text3); margin-left: auto; }

/* Duel result screen */
.duel-result {
  text-align: center;
  padding: 32px 24px !important;
}
.duel-result-icon  { font-size: 56px; margin-bottom: 8px; }
.duel-result-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; margin-bottom: 16px; }
.duel-result-scores {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 14px;
}
.duel-rs { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text3); }
.duel-rs-val { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 32px; color: var(--text1); }
.duel-rs-val.g { color: var(--accent); }
.duel-vs-small { font-size: 14px; color: rgba(255,255,255,.2); font-weight: 800; }
.duel-xp-award {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  margin: 8px 0 6px;
}
.duel-lesson {
  font-size: 12px;
  color: var(--text2);
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: left;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — "Papel" (off-white + azul oscuro)
   Activa con: document.body.classList.add('light-mode')
═══════════════════════════════════════════════════════════ */
/* LIGHT MODE — Papel vintage, nunca blanco nuclear */
body.light-mode {
  --bg:      #f0ebe0;
  --bg2:     #e8e2d5;
  --surface: #ddd7c8;
  --surface2:#d2cab8;
  --border:  rgba(50,40,20,.12);
  --border2: rgba(50,40,20,.20);
  --text1:   #1a1e30;
  --text2:   #36405c;
  --text3:   #6b7590;
  --accent:  #0a7050;
  --accent2: #4535a0;
  --accent3: #b06020;
  --danger:  #922020;
  color-scheme: light;
}

/* ── Backgrounds ─────────────────────────────────────────── */
body.light-mode,
body.light-mode #app-root,
body.light-mode .screens-wrap { background: transparent; }
/* screens stay transparent — aurora bleeds through, cards add readability */

/* ── Navigation ──────────────────────────────────────────── */
body.light-mode .top-nav {
  background: rgba(240,235,224,.95) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border2) !important;
}
body.light-mode #bottom-nav {
  background: rgba(232,226,213,.97) !important;
  border-top: 1px solid var(--border2) !important;
  backdrop-filter: blur(14px);
}
body.light-mode .bn-item { color: var(--text3) !important; }
body.light-mode .bn-item.active { color: var(--accent) !important; }

/* ── Cards & surfaces ────────────────────────────────────── */
body.light-mode .card,
body.light-mode .home-stat-card,
body.light-mode .debt-card,
body.light-mode .port-card,
body.light-mode .stock-item,
body.light-mode .biz-card,
body.light-mode .life-event-card,
body.light-mode .achievement-card,
body.light-mode .module-card,
body.light-mode .rank-item,
body.light-mode .news-item {
  background: rgba(255,252,245,.88) !important;
  border-color: var(--border) !important;
  box-shadow: 0 1px 4px rgba(50,40,20,.07) !important;
}

/* ── Modals ──────────────────────────────────────────────── */
body.light-mode .modal-overlay {
  background: rgba(20,15,10,.45) !important;
}
body.light-mode .modal-box,
body.light-mode .modal,
body.light-mode .duel-box,
body.light-mode .ob-box {
  background: rgba(244,239,228,.99) !important;
  border-color: var(--border2) !important;
}

/* ── Text — force dark on ALL elements ───────────────────── */
body.light-mode *:not(.btn-primary):not(.badge):not(.tag-pill):not(
  .coach-bubble):not(.scenario-banner):not(.xp-pop):not(.money-pop) {
  color: inherit;
}
body.light-mode .h1, body.light-mode .h2, body.light-mode .h3,
body.light-mode h1,  body.light-mode h2,  body.light-mode h3,
body.light-mode .card-title, body.light-mode .module-title,
body.light-mode .stock-name, body.light-mode .biz-name,
body.light-mode .life-name,  body.light-mode .rank-name,
body.light-mode .career-opt-title, body.light-mode .jcb-label,
body.light-mode .form-label, body.light-mode .modal-title,
body.light-mode .step-title,body.light-mode .step-intro,
body.light-mode .lesson-body,body.light-mode .intro-text,
body.light-mode .opt-label { color: var(--text1) !important; }

body.light-mode p, body.light-mode li, body.light-mode span,
body.light-mode div, body.light-mode label, body.light-mode small {
  color: var(--text2);
}

/* ── Inputs ──────────────────────────────────────────────── */
body.light-mode input, body.light-mode textarea, body.light-mode select,
body.light-mode .form-input, body.light-mode .ob-input {
  background: rgba(255,252,245,.95) !important;
  border-color: var(--border2) !important;
  color: var(--text1) !important;
}
body.light-mode input::placeholder { color: var(--text3) !important; }

/* ── Buttons ─────────────────────────────────────────────── */
body.light-mode .btn-primary {
  background: var(--accent) !important;
  color: #fff !important;
}
body.light-mode .btn-secondary {
  background: rgba(50,40,20,.1) !important;
  color: var(--text1) !important;
}
body.light-mode .btn-ghost { color: var(--text2) !important; }
body.light-mode .btn-ghost:hover { background: rgba(50,40,20,.08) !important; }

/* ── Bottom nav items ────────────────────────────────────── */
body.light-mode .nav-label { color: inherit; }

/* ── Module steps (white text on dark needs flip) ─────────── */
body.light-mode .step-card,
body.light-mode .content-step,
body.light-mode .quiz-step {
  background: rgba(255,252,245,.9) !important;
  color: var(--text1) !important;
}
body.light-mode .bullet-item { color: var(--text2) !important; }
body.light-mode .fact-box {
  background: rgba(10,112,80,.08) !important;
  border-color: rgba(10,112,80,.25) !important;
  color: var(--text2) !important;
}

/* ── Score, stats, numbers ───────────────────────────────── */
body.light-mode .stat-value, body.light-mode .big-number,
body.light-mode .patrimony-val, body.light-mode .cash-val {
  color: var(--text1) !important;
}

/* ── Coach bubble ────────────────────────────────────────── */
body.light-mode .coach-bubble {
  background: rgba(244,239,228,.98) !important;
  border-color: rgba(69,53,160,.3) !important;
  box-shadow: 0 8px 28px rgba(50,40,20,.18) !important;
}
body.light-mode .coach-text  { color: var(--text1) !important; }
body.light-mode .coach-label { color: var(--accent2) !important; }
body.light-mode .coach-q-btn {
  background: rgba(50,40,20,.07) !important;
  border-color: rgba(50,40,20,.15) !important;
  color: var(--text1) !important;
}
body.light-mode .coach-q-btn:hover {
  background: rgba(69,53,160,.12) !important;
}

/* ── Scenario & news banners ─────────────────────────────── */
body.light-mode .scenario-banner {
  background: rgba(232,226,213,.97) !important;
  border-top-color: rgba(69,53,160,.4) !important;
  color: var(--text1) !important;
}
body.light-mode .scenario-banner * { color: var(--text1) !important; }
body.light-mode .news-banner {
  background: rgba(232,226,213,.95) !important;
  color: var(--text1) !important;
}

/* ── Job choice buttons ──────────────────────────────────── */
body.light-mode .job-choice-btn {
  background: rgba(50,40,20,.06) !important;
  border-color: rgba(50,40,20,.14) !important;
}
body.light-mode .job-choice-btn:hover {
  background: rgba(69,53,160,.1) !important;
}
body.light-mode .jcb-desc { color: var(--text3) !important; }

/* ── Quiz options ────────────────────────────────────────── */
body.light-mode .quiz-opt {
  background: rgba(255,252,245,.9) !important;
  border-color: var(--border) !important;
  color: var(--text1) !important;
}
body.light-mode .quiz-opt:hover {
  background: rgba(10,112,80,.08) !important;
  border-color: var(--accent) !important;
}

/* ── Career options ──────────────────────────────────────── */
body.light-mode .career-option {
  background: rgba(255,252,245,.85) !important;
  border-color: var(--border) !important;
}
body.light-mode .career-option:hover:not(.locked):not(.current) {
  background: rgba(69,53,160,.08) !important;
}

/* ── Progress bars ───────────────────────────────────────── */
body.light-mode .progress-track {
  background: rgba(50,40,20,.1) !important;
}

/* ── Scrollbars ──────────────────────────────────────────── */
body.light-mode ::-webkit-scrollbar-track { background: var(--bg2); }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(50,40,20,.2); }

/* ── Money popups ────────────────────────────────────────── */
body.light-mode .money-pop {
  font-weight: 800;
  text-shadow: 0 1px 5px rgba(50,40,20,.3);
}

/* ── FAB ─────────────────────────────────────────────────── */
body.light-mode #finai-fab {
  background: var(--accent) !important;
  box-shadow: 0 4px 18px rgba(10,112,80,.35) !important;
}

/* ── Mute button ─────────────────────────────────────────── */
body.light-mode .mute-btn, body.light-mode #mute-all-btn,
body.light-mode .speed-btn { color: var(--text2) !important; }

/* ── Theme toggle ────────────────────────────────────────── */
#theme-toggle-btn { transition: color .2s; }
body.light-mode #theme-toggle-btn { color: #c08010 !important; }

/* ── Top nav logo & buttons ──────────────────────────────── */
body.light-mode .logo { color: var(--text1) !important; }
body.light-mode .top-nav .btn-ghost { color: var(--text2) !important; }

/* ── HUD overlay ─────────────────────────────────────────── */
body.light-mode .sc-hud {
  background: rgba(240,235,224,.96) !important;
  border-color: var(--border2) !important;
}
body.light-mode .sc-hud-label,
body.light-mode .sc-hud-value,
body.light-mode .sc-hud-time,
body.light-mode .sc-hud-obj  { color: var(--text1) !important; }

/* ── Duel box ────────────────────────────────────────────── */
body.light-mode .duel-opt {
  background: rgba(255,252,245,.9) !important;
  border-color: var(--border) !important;
  color: var(--text1) !important;
}

/* ═══════════════════════════════════════════════════════════
   FINAI FAB — Botón flotante tipo WhatsApp
═══════════════════════════════════════════════════════════ */
#finai-fab {
  position: fixed;
  bottom: 86px;
  right: 16px;
  z-index: 4000;
  display: none; /* shown via JS */
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #5b45e0, #7c3aed);
  border: none;
  border-radius: 28px;
  padding: 10px 16px 10px 12px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(110,86,255,.45),
              0 2px 6px rgba(0,0,0,.2);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1),
              box-shadow .2s ease;
  color: #fff;
}
#finai-fab:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 8px 28px rgba(110,86,255,.55);
}
#finai-fab:active { transform: scale(0.96); }

/* Pulse ring animation */
#finai-fab::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(110,86,255,.6), rgba(124,58,237,.4));
  animation: fab-ring 2.5s ease-in-out infinite;
  z-index: -1;
}
@keyframes fab-ring {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0;   transform: scale(1.12); }
}

.fab-icon  { font-size: 18px; line-height: 1; }
.fab-label {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════
   JOB OFFER MODAL
═══════════════════════════════════════════════════════════ */
.job-offer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.job-offer-icon {
  font-size: 40px;
  line-height: 1;
}
.job-offer-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f0b429;
  background: rgba(240,180,41,.1);
  border: 1px solid rgba(240,180,41,.25);
  border-radius: 20px;
  padding: 4px 10px;
}
.job-choice-btn {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
}
.job-choice-btn:hover {
  background: rgba(110,86,255,.15);
  border-color: rgba(110,86,255,.4);
  transform: translateX(2px);
}
.jcb-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 3px;
}
.jcb-desc {
  font-size: 11px;
  color: var(--text3);
}

/* ═══════════════════════════════════════════════════════════
   CAREER CARDS — 8 niveles con escala visual
═══════════════════════════════════════════════════════════ */
.career-level-bar {
  display: flex;
  gap: 4px;
  margin: 8px 0;
}
.career-level-dot {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: rgba(255,255,255,.1);
  transition: background .3s;
}
.career-level-dot.filled { background: var(--accent); }
.career-level-dot.current { background: #f0b429; }

/* ═══════════════════════════════════════════════════════════
   CAREER OPTIONS MODAL — 8 niveles escalados
═══════════════════════════════════════════════════════════ */
.career-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  transition: all .15s;
}
.career-option:hover:not(.locked):not(.current) {
  background: rgba(110,86,255,.1);
  border-color: rgba(110,86,255,.35);
  transform: translateX(3px);
}
.career-option.current {
  background: rgba(0,229,160,.07);
  border-color: rgba(0,229,160,.25);
}
.career-option.locked {
  opacity: 0.55;
}
.career-option.next-up {
  border-color: rgba(240,180,41,.3);
  background: rgba(240,180,41,.05);
}
.career-opt-left { flex-shrink: 0; }
.career-opt-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.career-opt-body { flex: 1; min-width: 0; }
.career-opt-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.career-opt-sub  { font-size: 10px; color: var(--text3); margin-bottom: 2px; }
.career-opt-salary { font-size: 11px; font-weight: 700; }
.career-opt-right { flex-shrink: 0; text-align: center; }
.career-next-badge {
  font-size: 9px;
  background: rgba(240,180,41,.2);
  color: #f0b429;
  border: 1px solid rgba(240,180,41,.35);
  border-radius: 10px;
  padding: 2px 7px;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT PARTICLES — Flotadores financieros de fondo
═══════════════════════════════════════════════════════════ */
#ambient-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.38;
  transition: opacity .4s;
}
body.light-mode #ambient-canvas { opacity: 0.18; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM AMBIENT LAYERS — Aurora · Vignette · Scanlines
   100% CSS, pointer-events:none, zero JS impact.
═══════════════════════════════════════════════════════════ */

/* ── 1. Aurora boreal — 4 blobs, toda la app ── */
#aurora-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Blob A — verde-esmeralda · arriba-izquierda · protagonista */
.aurora-blob-a {
  width: 80vw;
  height: 70vw;
  top: -30vw;
  left: -25vw;
  background: radial-gradient(ellipse at 40% 40%,
    rgba(0,229,160,0.18) 0%,
    rgba(0,200,140,0.10) 30%,
    rgba(0,180,120,0.04) 60%,
    transparent 80%);
  filter: blur(70px);
  mix-blend-mode: screen;
  animation: aurora-a 20s ease-in-out infinite alternate;
}

/* Blob B — violeta-índigo · abajo-derecha */
.aurora-blob-b {
  width: 75vw;
  height: 65vw;
  bottom: -25vw;
  right: -20vw;
  background: radial-gradient(ellipse at 60% 60%,
    rgba(139,92,246,0.16) 0%,
    rgba(100,60,220,0.09) 35%,
    rgba(80,40,180,0.04) 60%,
    transparent 80%);
  filter: blur(80px);
  mix-blend-mode: screen;
  animation: aurora-b 25s ease-in-out infinite alternate;
}

/* Blob C — azul-cian · centro-derecha · sutil */
.aurora-blob-c {
  width: 55vw;
  height: 50vw;
  top: 20vh;
  right: -15vw;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(56,189,248,0.10) 0%,
    rgba(14,165,233,0.05) 45%,
    transparent 75%);
  filter: blur(90px);
  mix-blend-mode: screen;
  animation: aurora-c 32s ease-in-out infinite alternate;
}

/* Blob D — verde-lima · centro-izquierda · intermitente */
.aurora-blob-d {
  width: 50vw;
  height: 45vw;
  top: 40vh;
  left: -10vw;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(52,211,153,0.09) 0%,
    rgba(16,185,129,0.04) 50%,
    transparent 75%);
  filter: blur(100px);
  mix-blend-mode: screen;
  animation: aurora-d 28s ease-in-out infinite alternate;
}

@keyframes aurora-a {
  0%   { transform: translate(0,0) scale(1) rotate(0deg);      opacity: 0.75; }
  20%  { transform: translate(5vw,4vw) scale(1.1) rotate(5deg);  opacity: 1; }
  40%  { transform: translate(-3vw,8vw) scale(0.95) rotate(-4deg); opacity: 0.85; }
  60%  { transform: translate(8vw,2vw) scale(1.08) rotate(7deg);   opacity: 0.95; }
  80%  { transform: translate(2vw,10vw) scale(0.98) rotate(-2deg);  opacity: 0.8; }
  100% { transform: translate(6vw,-3vw) scale(1.06) rotate(4deg);  opacity: 0.9; }
}
@keyframes aurora-b {
  0%   { transform: translate(0,0) scale(1) rotate(0deg);       opacity: 0.65; }
  25%  { transform: translate(-6vw,-5vw) scale(1.12) rotate(-6deg); opacity: 0.95; }
  50%  { transform: translate(4vw,-9vw) scale(0.93) rotate(5deg);   opacity: 0.75; }
  75%  { transform: translate(-8vw,-2vw) scale(1.07) rotate(-4deg); opacity: 0.9; }
  100% { transform: translate(-5vw,3vw) scale(1.04) rotate(-7deg);  opacity: 1; }
}
@keyframes aurora-c {
  0%   { transform: translate(0,0) scale(1);       opacity: 0.5; }
  30%  { transform: translate(-4vw,6vw) scale(1.15); opacity: 0.85; }
  60%  { transform: translate(5vw,-4vw) scale(0.9);  opacity: 0.6; }
  100% { transform: translate(-2vw,8vw) scale(1.1);  opacity: 0.75; }
}
@keyframes aurora-d {
  0%   { transform: translate(0,0) scale(1);        opacity: 0.4; }
  35%  { transform: translate(7vw,-3vw) scale(1.2);  opacity: 0.7; }
  70%  { transform: translate(-5vw,5vw) scale(0.88); opacity: 0.5; }
  100% { transform: translate(3vw,-6vw) scale(1.05); opacity: 0.65; }
}

/* ── 2. Scanlines: líneas horizontales 1px ultra sutiles ── */
#scanlines-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.018) 3px,
    rgba(0,0,0,0.018) 4px
  );
  animation: scanlines-drift 18s linear infinite;
}
@keyframes scanlines-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 80px; }
}

/* ── 3. Viñeta: oscurece los bordes, foco en el centro ── */
#vignette-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    transparent 55%,
    rgba(0,0,0,0.22) 100%
  );
  animation: vignette-breathe 8s ease-in-out infinite;
}
@keyframes vignette-breathe {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* Light mode: reducir opacidades */
body.light-mode .aurora-blob-a { background: radial-gradient(ellipse at 40% 40%, rgba(0,130,80,0.07) 0%, transparent 70%); mix-blend-mode: multiply; }
body.light-mode .aurora-blob-b { background: radial-gradient(ellipse at 60% 60%, rgba(80,40,180,0.05) 0%, transparent 70%); mix-blend-mode: multiply; }
body.light-mode .aurora-blob-c { background: radial-gradient(ellipse at 50% 50%, rgba(0,120,200,0.05) 0%, transparent 75%); mix-blend-mode: multiply; }
body.light-mode .aurora-blob-d { background: radial-gradient(ellipse at 50% 50%, rgba(0,150,100,0.04) 0%, transparent 75%); mix-blend-mode: multiply; }
body.light-mode #scanlines-layer { opacity: 0.3; }
body.light-mode #vignette-layer  { opacity: 0.3; }

/* All screens sit above the canvas */
#app-root > *,
.top-nav,
.money-pop, .xp-pop {
  position: relative;
  z-index: 1;
}
/* .screen, #bottom-nav, #finai-fab, .coach-bubble, .modal-overlay usan position propia */

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — Fixes adicionales
═══════════════════════════════════════════════════════════ */

/* Coach bubble en light mode */
body.light-mode .coach-bubble {
  background: linear-gradient(135deg, rgba(245,240,232,.98), rgba(240,234,225,.98));
  border-color: rgba(13,122,88,.25);
  box-shadow: 0 8px 32px rgba(60,50,30,.12);
  color: var(--text1);
}
body.light-mode .coach-bubble-text { color: var(--text2); }
body.light-mode .coach-bubble-ask  {
  background: rgba(13,122,88,.1);
  color: var(--accent);
  border-color: rgba(13,122,88,.2);
}

/* Modal boxes en light mode */
body.light-mode .modal-box {
  background: #faf6f0;
  border-color: rgba(60,50,30,.15);
  box-shadow: 0 20px 60px rgba(60,50,30,.15);
}
body.light-mode .modal-overlay {
  background: rgba(30,25,20,.5) !important;
}

/* Cards de módulo */
body.light-mode .mod-card {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .mod-card:hover {
  border-color: rgba(13,122,88,.3);
  box-shadow: 0 4px 20px rgba(60,50,30,.1);
}
body.light-mode .mod-title { color: var(--text1); }
body.light-mode .mod-desc  { color: var(--text2); }
body.light-mode .mod-tag   { opacity: .85; }

/* Stat cards en home */
body.light-mode .stat-card,
body.light-mode .home-stat {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .stat-val   { color: var(--text1); }
body.light-mode .stat-label { color: var(--text3); }

/* Nav items */
body.light-mode .nav-item        { color: var(--text3); }
body.light-mode .nav-item.active { color: var(--accent); }

/* Botones secundarios */
body.light-mode .btn-sec {
  background: rgba(60,50,30,.07);
  color: var(--text1);
  border: 1px solid rgba(60,50,30,.15);
}
body.light-mode .btn-sec:hover {
  background: rgba(60,50,30,.12);
}

/* Step content en módulos */
body.light-mode .step-intro    { color: var(--text2); }
body.light-mode .step-bullet   { color: var(--text2); }
body.light-mode .step-fact-box {
  background: rgba(13,122,88,.07);
  border-color: rgba(13,122,88,.2);
  color: var(--text2);
}

/* Quiz options */
body.light-mode .quiz-opt {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.12);
  color: var(--text1);
}
body.light-mode .quiz-opt:hover {
  border-color: rgba(13,122,88,.4);
  background: rgba(13,122,88,.05);
}

/* Score / XP chips */
body.light-mode .xp-chip {
  background: rgba(13,122,88,.1);
  color: var(--accent);
}

/* Ticker en home */
body.light-mode .ticker-item { color: var(--text2); }
body.light-mode .ticker-up   { color: #0a7050; }
body.light-mode .ticker-down { color: var(--danger); }

/* Profit/loss colors */
body.light-mode .txt-up    { color: #0a7050 !important; }
body.light-mode .txt-down  { color: #922020 !important; }

/* Section headers */
body.light-mode .sec-title,
body.light-mode .sec-head,
body.light-mode .h1,
body.light-mode .h2,
body.light-mode .h3 { color: var(--text1); }
body.light-mode .text-muted { color: var(--text3) !important; }

/* Debt tracker */
body.light-mode .debt-card  {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .debt-name  { color: var(--text1); }
body.light-mode .debt-rate  { color: var(--danger); }

/* Portfolio table */
body.light-mode .port-row   { border-color: rgba(60,50,30,.07); }
body.light-mode .port-name  { color: var(--text1); }
body.light-mode .port-price { color: var(--text2); }

/* Achievements */
body.light-mode .ach-card {
  background: rgba(255,252,246,.9);
  border-color: rgba(60,50,30,.1);
}
body.light-mode .ach-card.locked { opacity: .5; filter: grayscale(.6); }

/* Coach CTA button */
body.light-mode .coach-cta-btn {
  background: rgba(13,122,88,.1);
  border-color: rgba(13,122,88,.25);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════
   AMBIENT FINANCIAL ANIMATION — burbujas flotantes suaves
═══════════════════════════════════════════════════════════ */
#fin-ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fin-bubble {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: finFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes finFloat {
  0%   { transform: translateY(0) scale(1);      opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: .7; }
  100% { transform: translateY(-105vh) scale(1.1); opacity: 0; }
}
.fin-ticker-float {
  position: absolute;
  font-size: 11px;
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  opacity: 0;
  letter-spacing: .04em;
  pointer-events: none;
  animation: finTickerFloat linear infinite;
  will-change: transform, opacity;
}
@keyframes finTickerFloat {
  0%   { transform: translateY(20px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: .6; }
  100% { transform: translateY(-80px); opacity: 0; }
}
/* Dimmed in light mode */
body.light-mode #fin-ambient { opacity: .45; }

/* ══════════════════════════════════════════════════
   FIXES — scroll, FAB, coach, responsive
══════════════════════════════════════════════════ */

/* Scrollbar visible en pantalla activa */
.screen.active {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.screen.active::-webkit-scrollbar { width: 5px; }
.screen.active::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.18);
  border-radius: 10px;
}

/* FAB FinAI — círculo tipo WhatsApp */
#finai-fab {
  position: fixed !important;
  bottom: 86px !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  gap: 0 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: #5b21b6 !important;
  box-shadow: 0 4px 20px rgba(91,33,182,.55), 0 2px 8px rgba(0,0,0,.3) !important;
  z-index: 4000 !important;
  transition: bottom .3s cubic-bezier(.4,0,.2,1), transform .2s, box-shadow .2s !important;
  animation: fab-idle 3s ease-in-out infinite !important;
}
#finai-fab:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 6px 28px rgba(91,33,182,.7), 0 2px 8px rgba(0,0,0,.3) !important;
  animation: none !important;
}
#finai-fab:active { transform: scale(0.93) !important; }
@keyframes fab-idle {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 20px rgba(91,33,182,.55), 0 2px 8px rgba(0,0,0,.3); }
  50%       { transform: translateY(-3px) scale(1.03); box-shadow: 0 8px 28px rgba(91,33,182,.7), 0 2px 8px rgba(0,0,0,.3); }
}
/* Subir FAB cuando el banner de escenario está activo */
body.scenario-active #finai-fab {
  bottom: 136px !important;
}
#finai-fab::before { display: none !important; }
#finai-fab .fab-label { display: none !important; }
#finai-fab .fab-icon {
  font-size: 24px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Coach bubble — posición correcta */
.coach-bubble {
  position: fixed !important;
  bottom: 86px !important;
  left: auto !important;
  right: 76px !important;
  width: 260px !important;
  max-width: calc(100vw - 100px) !important;
  z-index: 3800 !important;
}

/* Donut de cartera — oculto hasta que haya posiciones */
#donut-wrap { display: none; }

/* Top-nav responsive */
@media (max-width: 480px) {
  #game-speed-btn, #music-control { display: none !important; }
  #mute-all-btn { display: flex !important; }
  .logo { font-size: 16px !important; }
}

/* ── Escenarios: modal más sutil ── */
#m-scenarios.modal-overlay {
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(6px);
}
#m-scenarios .modal-box {
  animation: scModalIn .28s cubic-bezier(.4,0,.2,1);
}
@keyframes scModalIn {
  from { opacity:0; transform: translateY(16px) scale(.97); }
  to   { opacity:1; transform: none; }
}

/* ── HUD escenario: botón minimizar ── */
.sc-hud-toggle {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.6);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
  line-height: 1;
}
.sc-hud-toggle:hover { background: rgba(255,255,255,.15); }

/* HUD colapsado: solo muestra icono + % + botones */
.scenario-banner.sc-collapsed {
  padding: 7px 14px !important;
}
.scenario-banner.sc-collapsed .sc-hud-center,
.scenario-banner.sc-collapsed .sc-hud-obj {
  display: none;
}
.scenario-banner.sc-collapsed .sc-hud-name {
  font-size: 11px;
}

/* ── Shadow Investors en el ranking ── */
.rank-row.shadow-investor {
  border-left: 2px solid rgba(168,85,247,.4);
  background: rgba(168,85,247,.04);
  cursor: help;
}
.rank-row.shadow-investor:hover {
  background: rgba(168,85,247,.08);
}
.shadow-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 20px;
  background: rgba(168,85,247,.15);
  border: 1px solid rgba(168,85,247,.3);
  color: #c4b5fd;
  margin-left: 5px;
  vertical-align: middle;
  white-space: nowrap;
}
/* Bogle-Bot — verde */
.rank-row.shadow-investor:has([title*="VUSA"]),
.rank-row[title*="índice"] { border-left-color: rgba(0,229,160,.4); }
/* Cripto-Bro — amarillo */
.rank-row[title*="crypto"] { border-left-color: rgba(245,158,11,.4); }

/* ══════════════════════════════════════════════════════════════════
   MISIONES SEMANALES v2
══════════════════════════════════════════════════════════════════ */
.missions-card {
  background: var(--surface2);
  border: 1.5px solid rgba(99,102,241,.3);
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.missions-card-complete {
  border-color: rgba(0,229,160,.45);
  box-shadow: 0 0 18px rgba(0,229,160,.07);
}
.missions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  gap: 10px;
}
.missions-header:hover { background: rgba(255,255,255,.018); }
.missions-header-left  { display: flex; align-items: center; gap: 10px; }
.missions-title-icon   { font-size: 22px; flex-shrink: 0; }
.missions-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text1);
  margin-bottom: 2px;
}
.missions-subtitle { font-size: 11px; color: var(--text3); }
.missions-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.missions-xp-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  transition: background .3s, color .3s;
}
.missions-chevron { font-size: 14px; color: var(--text3); }
.missions-body {
  border-top: 1px solid var(--border);
  padding: 10px 14px 6px;
  animation: msFadeIn .2s ease;
}
@keyframes msFadeIn {
  from { opacity:0; transform:translateY(-5px); }
  to   { opacity:1; transform:translateY(0);    }
}

/* ── Filas de misión ─────────────────────────────────────────── */
.mission-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.mission-row:last-of-type { border-bottom: none; }
.mission-done { opacity: .68; }
.mission-icon-wrap {
  width: 36px; height: 36px;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  transition: background .3s, border-color .3s;
}
.mission-icon-done {
  background: rgba(0,229,160,.12);
  border-color: rgba(0,229,160,.35);
}
.mission-content   { flex: 1; min-width: 0; }
.mission-top-row   { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; margin-bottom: 2px; }
.mission-title     { font-weight: 700; font-size: 13px; color: var(--text1); }
.mission-xp        { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.mission-desc      { font-size: 11px; color: var(--text2); margin-bottom: 7px; line-height: 1.4; }
.mission-progress-row { display: flex; align-items: center; gap: 7px; }
.mission-pbar      { flex:1; height:5px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.mission-pbar-fill { height:100%; border-radius:99px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.mission-progress-txt { font-family:'DM Mono',monospace; font-size:10px; color:var(--text3); min-width:24px; text-align:right; }
.mission-diff-badge {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid; border-radius: 20px;
  padding: 1px 6px; flex-shrink: 0;
}

/* ── Fila bloqueada ──────────────────────────────────────────── */
.missions-locked-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px;
  font-size: 12px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.missions-lock-icon { font-size: 16px; }

/* ── Footer ──────────────────────────────────────────────────── */
.missions-footer { padding: 8px 0 4px; }
.missions-complete-banner {
  text-align: center; font-size: 12px; font-weight: 700;
  color: #00e5a0;
  background: rgba(0,229,160,.08);
  border: 1px solid rgba(0,229,160,.22);
  border-radius: 10px; padding: 8px 12px;
}
.missions-reset-note { text-align: center; font-size: 10px; color: var(--text3); }

/* ── Popup de misión completada ──────────────────────────────── */
#mission-popup {
  position: fixed; top: 72px; left: 50%;
  transform: translateX(-50%);
  z-index: 9999; pointer-events: none;
}
.mp-show { animation: mpIn .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.mp-hide { animation: mpOut .3s ease forwards; }
@keyframes mpIn  {
  from { opacity:0; transform:translateX(-50%) translateY(-18px) scale(.9); }
  to   { opacity:1; transform:translateX(-50%) translateY(0)     scale(1);  }
}
@keyframes mpOut {
  from { opacity:1; transform:translateX(-50%) translateY(0); }
  to   { opacity:0; transform:translateX(-50%) translateY(-12px); }
}
.mp-inner {
  background: linear-gradient(135deg,rgba(20,22,40,.97),rgba(12,14,28,.97));
  border: 1.5px solid rgba(99,102,241,.5);
  border-radius: 20px;
  padding: 14px 22px 12px;
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; min-width: 200px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.mp-eyebrow { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.12em; color:#818cf8; text-transform:uppercase; }
.mp-icon    { font-size: 32px; }
.mp-title   { font-family:'Syne',sans-serif; font-weight:800; font-size:15px; color:var(--text1); text-align:center; }
.mp-xp      { font-family:'DM Mono',monospace; font-size:14px; font-weight:700; color:#00e5a0; }

/* ══════════════════════════════════════════════════════════════════
   ACCIÓN DIARIA (DCA CARD)
══════════════════════════════════════════════════════════════════ */
.dca-card {
  background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(0,229,160,.06));
  border: 1.5px solid rgba(99,102,241,.35);
  border-radius: 16px;
  padding: 16px;
}
.dca-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.dca-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dca-streak-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  background: rgba(255,255,255,.06);
  border-radius: 20px;
  padding: 3px 10px;
}
.dca-q-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--text1);
  margin-bottom: 12px;
  line-height: 1.45;
}
.dca-q-text {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 10px;
  line-height: 1.5;
}
.dca-opts { display: flex; flex-direction: column; gap: 7px; }
.dca-opt {
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text1);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.dca-opt:hover:not([disabled]) {
  background: rgba(99,102,241,.15);
  border-color: rgba(99,102,241,.4);
}
.dca-opt.correct {
  background: rgba(0,229,160,.15);
  border-color: rgba(0,229,160,.5);
  color: #00e5a0;
}
.dca-opt.wrong {
  background: rgba(255,75,92,.1);
  border-color: rgba(255,75,92,.4);
  color: #ff4b5c;
}
.dca-done-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
}
.dca-done-icon  { font-size: 28px; }
.dca-done-title { font-weight: 700; font-size: 14px; color: #00e5a0; }
.dca-done-sub   { font-size: 12px; color: var(--text3); }

/* ══════════════════════════════════════════════════════════════════
   MISIONES SEMANALES
══════════════════════════════════════════════════════════════════ */
.missions-card {
  background: var(--surface2);
  border: 1.5px solid rgba(99,102,241,.3);
  border-radius: 18px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.missions-card-complete {
  border-color: rgba(0,229,160,.45);
  box-shadow: 0 0 18px rgba(0,229,160,.07);
}
.missions-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; cursor: pointer; user-select: none; gap: 10px;
}
.missions-header:hover { background: rgba(255,255,255,.018); }
.missions-header-left  { display: flex; align-items: center; gap: 10px; }
.missions-title-icon   { font-size: 22px; flex-shrink: 0; }
.missions-title { font-family:'Syne',sans-serif; font-weight:700; font-size:14px; color:var(--text1); margin-bottom:2px; }
.missions-subtitle { font-size: 11px; color: var(--text3); }
.missions-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.missions-xp-badge { font-family:'DM Mono',monospace; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; transition:background .3s,color .3s; }
.missions-chevron { font-size:14px; color:var(--text3); }
.missions-body { border-top:1px solid var(--border); padding:10px 14px 6px; animation:msFadeIn .2s ease; }
@keyframes msFadeIn { from{opacity:0;transform:translateY(-5px)} to{opacity:1;transform:translateY(0)} }

.mission-row { display:flex; align-items:flex-start; gap:11px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.mission-row:last-of-type { border-bottom:none; }
.mission-done { opacity:.68; }
.mission-icon-wrap { width:36px;height:36px;flex-shrink:0;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;transition:background .3s,border-color .3s; }
.mission-icon-done { background:rgba(0,229,160,.12);border-color:rgba(0,229,160,.35); }
.mission-content { flex:1;min-width:0; }
.mission-top-row { display:flex;justify-content:space-between;align-items:flex-start;gap:6px;margin-bottom:2px; }
.mission-title { font-weight:700;font-size:13px;color:var(--text1); }
.mission-xp { font-family:'DM Mono',monospace;font-size:11px;font-weight:700;flex-shrink:0; }
.mission-desc { font-size:11px;color:var(--text2);margin-bottom:7px;line-height:1.4; }
.mission-progress-row { display:flex;align-items:center;gap:7px; }
.mission-pbar { flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden; }
.mission-pbar-fill { height:100%;border-radius:99px;transition:width .5s cubic-bezier(.4,0,.2,1); }
.mission-progress-txt { font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);min-width:24px;text-align:right; }
.mission-diff-badge { font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border:1px solid;border-radius:20px;padding:1px 6px;flex-shrink:0; }

.missions-locked-row { display:flex;align-items:center;gap:8px;padding:10px 4px;font-size:12px;color:var(--text3);border-top:1px solid var(--border);margin-top:4px; }
.missions-lock-icon { font-size:16px; }
.missions-footer { padding:8px 0 4px; }
.missions-complete-banner { text-align:center;font-size:12px;font-weight:700;color:#00e5a0;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.22);border-radius:10px;padding:8px 12px; }
.missions-reset-note { text-align:center;font-size:10px;color:var(--text3); }

#mission-popup { position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:9999;pointer-events:none; }
.mp-show { animation:mpIn .45s cubic-bezier(.34,1.56,.64,1) forwards; }
.mp-hide { animation:mpOut .3s ease forwards; }
@keyframes mpIn  { from{opacity:0;transform:translateX(-50%) translateY(-18px) scale(.9)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} }
@keyframes mpOut { from{opacity:1;transform:translateX(-50%) translateY(0)} to{opacity:0;transform:translateX(-50%) translateY(-12px)} }
.mp-inner { background:linear-gradient(135deg,rgba(20,22,40,.97),rgba(12,14,28,.97));border:1.5px solid rgba(99,102,241,.5);border-radius:20px;padding:14px 22px 12px;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,.5); }
.mp-eyebrow { font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.12em;color:#818cf8;text-transform:uppercase; }
.mp-icon  { font-size:32px; }
.mp-title { font-family:'Syne',sans-serif;font-weight:800;font-size:15px;color:var(--text1);text-align:center; }
.mp-xp    { font-family:'DM Mono',monospace;font-size:14px;font-weight:700;color:#00e5a0; }

/* ══════════════════════════════════════════════════════════════════
   COMPARADOR DE ESTILOS DE VIDA
══════════════════════════════════════════════════════════════════ */
.lifestyle-inner { padding:16px 16px 100px;max-width:600px;margin:0 auto; }
.lsc-intro { text-align:center;margin-bottom:20px; }
.lsc-intro-title { font-family:'Syne',sans-serif;font-weight:800;font-size:20px;color:var(--text1);margin-bottom:6px; }
.lsc-intro-sub { font-size:13px;color:var(--text2);line-height:1.5; }
.lsc-loading { color:var(--text3);font-size:12px;text-align:center;padding:20px; }

.lsc-summary { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px; }
.lsc-card { background:var(--surface2);border:1.5px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;transition:border-color .2s,transform .15s; }
.lsc-card:hover { transform:translateY(-2px); }
.lsc-card-you  { border-color:rgba(99,102,241,.35); }
.lsc-card-con  { border-color:rgba(255,107,107,.35); }
.lsc-card-fire { border-color:rgba(240,180,41,.35); }
.lsc-card-emoji { font-size:24px;margin-bottom:4px; }
.lsc-card-label { font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.08em;color:var(--text3);text-transform:uppercase;margin-bottom:6px; }
.lsc-card-rate  { font-size:11px;font-weight:700;color:var(--text2);margin-bottom:4px; }
.lsc-card-fire  { font-size:11px;color:var(--text2);margin-bottom:8px;min-height:18px; }
.lsc-card-final { font-family:'Syne',sans-serif;font-weight:800;font-size:18px;line-height:1;margin-bottom:3px; }
.lsc-card-final-lab { font-size:10px;color:var(--text3); }

.lifestyle-table { width:100%;border-collapse:collapse;font-size:12px; }
.lifestyle-table th { font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);padding:6px 8px;text-align:right;border-bottom:1px solid var(--border); }
.lifestyle-table th:first-child { text-align:left; }
.lifestyle-table td { padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.04);font-family:'DM Mono',monospace;font-size:12px; }
.lst-year { text-align:left;font-family:var(--font-sans);font-weight:600;color:var(--text2); }
.lst-age  { font-size:10px;color:var(--text3); }

.lsc-whatif-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;gap:4px; }
.lsc-whatif-row  { display:flex;align-items:center;gap:10px;margin-bottom:14px; }
.lsc-rate-val    { font-family:'DM Mono',monospace;font-size:16px;font-weight:700;color:var(--text1);min-width:38px;text-align:right; }
.lsc-slider-tier { display:flex;align-items:center;gap:8px;border:1.5px solid;border-radius:10px;padding:8px 12px;margin-bottom:12px;font-size:12px; }
.lsc-slider-nums { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.lsc-sn-box  { background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center; }
.lsc-sn-main { border-color:rgba(0,229,160,.3); }
.lsc-sn-val  { font-family:'Syne',sans-serif;font-weight:800;font-size:15px;margin-bottom:3px; }
.lsc-sn-lab  { font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em; }

.lsc-decision { border-bottom:1px solid var(--border);padding:14px 0; }
.lsc-decision:last-child { border-bottom:none; }
.lsd-header { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.lsd-icon   { font-size:20px; }
.lsd-label  { font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--text1); }
.lsd-profiles { display:flex;flex-direction:column;gap:5px;margin-bottom:8px; }
.lsd-row    { display:flex;align-items:flex-start;gap:8px; }
.lsd-badge  { font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;flex-shrink:0;margin-top:1px; }
.lsd-badge-you  { background:rgba(99,102,241,.18);color:#818cf8; }
.lsd-badge-fire { background:rgba(240,180,41,.18);color:#f0b429; }
.lsd-badge-con  { background:rgba(255,107,107,.18);color:#ff8080; }
.lsd-text   { font-size:12px;color:var(--text2);line-height:1.45; }
.lsd-lesson { font-size:11px;color:var(--text3);background:rgba(255,255,255,.03);border-left:2px solid rgba(99,102,241,.4);padding:6px 10px;border-radius:0 6px 6px 0;line-height:1.5; }

.lsc-lesson-card { display:flex;gap:14px;align-items:flex-start;background:linear-gradient(135deg,rgba(99,102,241,.08),rgba(240,180,41,.06));border:1.5px solid rgba(99,102,241,.25);border-radius:16px;padding:18px 16px; }
.lsc-lesson-icon { font-size:28px;flex-shrink:0; }
.lsc-lesson-text { font-size:13px;color:var(--text2);line-height:1.65; }

/* Lifestyle CTA button on home */
.lifestyle-cta-btn { width:100%;display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(99,102,241,.1),rgba(240,180,41,.08));border:1.5px solid rgba(99,102,241,.3);border-radius:16px;padding:14px 16px;cursor:pointer;text-align:left;margin-bottom:16px;transition:border-color .2s,transform .15s; }
.lifestyle-cta-btn:hover { border-color:rgba(99,102,241,.6);transform:translateY(-1px); }
.lifestyle-cta-icons { font-size:22px;flex-shrink:0;letter-spacing:-3px; }
.lifestyle-cta-text  { flex:1; }
.lifestyle-cta-title { font-family:'Syne',sans-serif;font-weight:700;font-size:14px;color:var(--text1);margin-bottom:2px; }
.lifestyle-cta-sub   { font-size:11px;color:var(--text2); }
.lifestyle-cta-arrow { font-size:18px;color:var(--text3);flex-shrink:0; }


/* ══════════════════════════════════════════════════════════════════
   FEATURE: STATS SCREEN (s-stats)
══════════════════════════════════════════════════════════════════ */

.stats-inner {
  padding: 16px;
  padding-bottom: 90px;
  max-width: 600px;
  margin: 0 auto;
}

/* 3×2 summary grid */
.stats-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  transition: border-color .2s;
}
.stat-card:hover { border-color: rgba(99,102,241,.35); }

.stat-card-fire { border-color: rgba(255,107,107,.25); }
.stat-card-fire:hover { border-color: rgba(255,107,107,.5); }

.stat-card-icon { font-size: 20px; margin-bottom: 5px; }
.stat-card-val  {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text1);
  line-height: 1.1;
  margin-bottom: 4px;
}
.stat-card-lab  { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }

/* Streak vs record bar */
.streak-compare-row    { display: flex; align-items: center; gap: 10px; }
.streak-compare-side   { text-align: center; min-width: 48px; }
.streak-compare-center { flex: 1; }
.streak-compare-right  { text-align: right; }
.sc-val       { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 24px; color: var(--accent); }
.sc-val-gold  { color: var(--gold) !important; }
.sc-lab       { font-size: 10px; color: var(--text3); margin-top: 2px; text-transform: uppercase; }
.sc-vs        { font-size: 10px; color: var(--text3); text-align: center; margin-top: 4px; letter-spacing: .08em; }
.streak-compare-bar {
  background: rgba(255,255,255,.07);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}
.streak-compare-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #f0b429);
  border-radius: 99px;
  transition: width .6s ease;
}

/* Chart containers */
.stats-chart-head { margin-bottom: 12px; }
.stats-chart-sub  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.stats-chart-wrap { height: 180px; position: relative; }
.stats-empty-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  font-size: 12px;
  color: var(--text3);
  text-align: center;
  padding: 20px;
}



/* ══════════════════════════════════════════════════════════════════
   FEATURE 10: STATS DASHBOARD — nuevos elementos SVG
══════════════════════════════════════════════════════════════════ */

/* Módulos progress */
.st-mods-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.st-mods-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  overflow: hidden;
}
.st-mods-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border-radius: 99px;
  transition: width .6s ease;
}
.st-mods-pct {
  font-size: 13px;
  font-weight: 700;
  color: #a855f7;
  min-width: 36px;
  text-align: right;
}
.st-mods-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.st-mod-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .2s;
}
.st-mod-dot.done {
  background: rgba(99,102,241,.5);
  border-color: #6366f1;
}

/* SVG bar / line chart wrappers */
.st-svg-wrap {
  width: 100%;
  overflow: hidden;
}

/* Heatmap */
.st-heatmap-outer {
  width: 100%;
  overflow-x: auto;
}
.st-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
}
.st-hm-sq {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* Comparativa card */
.st-cmp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.st-cmp-row:last-child { border-bottom: none; }
.st-cmp-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.st-cmp-icon { font-size: 18px; }
.st-cmp-label { font-size: 13px; font-weight: 600; color: var(--text1); }
.st-cmp-avg   { font-size: 10px; color: var(--text3); margin-top: 1px; }
.st-cmp-right { text-align: right; min-width: 90px; }
.st-cmp-val   { font-size: 13px; font-weight: 700; }
.st-cmp-top   { font-size: 10px; font-weight: 700; margin-top: 1px; }
.st-cmp-bar-bg {
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 99px;
  margin-top: 4px;
  overflow: hidden;
}
.st-cmp-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}

/* ══════════════════════════════════════════════════════════════════
   FEATURE: BREAKING NEWS MODAL (m-breaking-news)
══════════════════════════════════════════════════════════════════ */

#m-breaking-news.active { display: flex; }

.bn-modal { animation: slideUpModal .4s cubic-bezier(.34,1.56,.64,1); }

/* Top bar rojo tipo "en directo" */
.bn-top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #b91c1c;
  padding: 10px 16px;
}
.bn-live-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .06em;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.45} }
.bn-source {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}

/* Icono grande */
.bn-icon-wrap { text-align: center; margin-bottom: 10px; }

/* Titular */
.bn-headline {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: var(--text1);
  line-height: 1.35;
  margin-bottom: 10px;
}
.bn-body-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Impacto meta row */
.bn-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.bn-meta-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}
.bn-meta-lab { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.bn-meta-val { font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 700; color: var(--text1); }

/* Dirección */
.bn-direction {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 6px;
}
.bn-dir-up   { color: #00e5a0; background: rgba(0,229,160,.10); }
.bn-dir-down { color: #ff6b6b; background: rgba(255,107,107,.10); }
.bn-duration { font-size: 11px; color: var(--text3); margin-bottom: 14px; }

/* FinAI tip dentro del modal */
.bn-finai-wrap {
  background: rgba(99,102,241,.07);
  border: 1.5px solid rgba(99,102,241,.25);
  border-radius: 12px;
  overflow: hidden;
}
.bn-finai-header {
  background: rgba(99,102,241,.12);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #818cf8;
  letter-spacing: .04em;
}
.bn-finai-tip {
  padding: 12px 14px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.65;
}


/* FinAI floating alert (reutilizable, también para noticias) */
.finai-float-alert {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 420px;
  background: rgba(6,8,16,.97);
  border: 1.5px solid rgba(99,102,241,.45);
  border-radius: 16px;
  padding: 14px 16px;
  z-index: 9100;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.ffa-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ffa-avatar { font-size: 18px; }
.ffa-name   { font-family: 'Syne',sans-serif; font-weight: 700; font-size: 13px; color: var(--text1); flex:1; }
.ffa-badge  { font-size: 10px; color: #818cf8; background: rgba(99,102,241,.15); padding: 2px 8px; border-radius: 20px; font-weight: 700; }
.ffa-close  { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 14px; padding: 0; }
.ffa-body   { font-size: 12px; color: var(--text2); line-height: 1.65; }

/* ══════════════════════════════════════════════════════════════════
   CAL — Rich Calendar System — estilos v1
══════════════════════════════════════════════════════════════════ */

/* ── pill del reloj mejorada ─────────────────────────────────── */
#game-clock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  white-space: nowrap;
  transition: opacity .15s;
  user-select: none;
}
#game-clock:hover { opacity: .80; }
.cal-season-icon { font-size: 12px; line-height: 1; }
.cal-date-text   { color: var(--text2); letter-spacing: .02em; }
.cal-year-text   { color: var(--accent); font-weight: 600; }

/* ── card "Próximo evento" ───────────────────────────────────── */
.nec-inner {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.nec-inner.nec-today  { border-color: rgba(0,229,160,.35);  background: rgba(0,229,160,.06);  }
.nec-inner.nec-urgent { border-color: rgba(240,180,41,.35); background: rgba(240,180,41,.06); }
.nec-inner.nec-soon   { border-color: rgba(99,102,241,.30); background: rgba(99,102,241,.05); }
.nec-left { flex: 1; min-width: 0; }
.nec-eyebrow {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 3px;
}
.nec-label {
  font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nec-desc { font-size: 11px; color: var(--text2); line-height: 1.45; }
.nec-badge {
  flex-shrink: 0; font-size: 11px; font-weight: 700;
  padding: 4px 11px; border-radius: 100px;
  background: rgba(99,102,241,.18); color: var(--accent2);
  white-space: nowrap;
}
.nec-today  .nec-badge { background: rgba(0,229,160,.18);  color: var(--accent);   }
.nec-urgent .nec-badge { background: rgba(240,180,41,.18); color: #f0b429;          }

/* ── popover de calendario ───────────────────────────────────── */
.cal-popover {
  position: fixed;
  z-index: 9200;
  width: 308px;
  max-width: calc(100vw - 16px);
  background: var(--surface, #0e1120);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 24px 64px rgba(0,0,0,.65);
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.cal-popover--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cap-header {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 4px;
}
.cap-date   { font-size: 14px; font-weight: 700; color: var(--text); }
.cap-season { font-size: 12px; font-weight: 700; }
.cap-season-desc {
  font-size: 11px; color: var(--text2); line-height: 1.5; margin-bottom: 12px;
}
.cap-divider { height: 1px; background: rgba(255,255,255,.07); margin: 10px 0; }
.cap-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text3); margin-bottom: 8px;
}
.cap-events { display: flex; flex-direction: column; gap: 7px; }
.cpe {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 10px; border-radius: 11px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.cpe-today  { border-color: rgba(0,229,160,.30);  background: rgba(0,229,160,.04);  }
.cpe-urgent { border-color: rgba(240,180,41,.28); background: rgba(240,180,41,.04); }
.cpe-soon   { border-color: rgba(99,102,241,.22); background: rgba(99,102,241,.04); }
.cpe-icon   { font-size: 17px; flex-shrink: 0; line-height: 1; margin-top: 1px; }
.cpe-info   { flex: 1; min-width: 0; }
.cpe-label  { font-size: 12px; font-weight: 600; color: var(--text); }
.cpe-desc   {
  font-size: 10px; color: var(--text2); line-height: 1.4; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cpe-days   { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text3); align-self: center; }
.cpe-today  .cpe-days { color: var(--accent); }
.cpe-urgent .cpe-days { color: #f0b429; }
.cpe-soon   .cpe-days { color: var(--accent2); }
.cap-season-bonuses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.csb-tag {
  font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(255,255,255,.07);
}

/* light-mode overrides */
body.light-mode .nec-inner         { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); }
body.light-mode .nec-inner.nec-urgent { background: rgba(240,180,41,.08); }
body.light-mode .cal-popover       { background: #fff; border-color: rgba(0,0,0,.12); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
body.light-mode .cpe               { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.07); }
body.light-mode .cap-divider       { background: rgba(0,0,0,.08); }

/* ══════════════════════════════════════════════════════════════════
   MISIONES — blurred locked rows + live countdown — v2
══════════════════════════════════════════════════════════════════ */

/* Wrapper: posición relativa para poder superponer el candado */
.mw-locked-wrap {
  position: relative;
  pointer-events: none;
  user-select: none;
}
/* El contenido interno se desenfoca */
.mw-locked-inner {
  filter: blur(3.5px);
  opacity: 0.30;
  transition: filter .3s, opacity .3s;
}
/* Candado centrado encima, fuera del blur */
.mw-lock-pill {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

/* Fila de cuenta atrás */
.mission-next-unlock {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 4px 4px;
  font-size: 11px;
  color: var(--text3);
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.mnu-timer {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent2);
  letter-spacing: .04em;
  min-width: 52px;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════
   LOGROS — línea de recompensa en el popup
══════════════════════════════════════════════════════════════════ */
.ach-popup-reward-line {
  margin-top: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #f0b429;
  letter-spacing: .03em;
}

/* ══════════════════════════════════════════════════════════════════
   LEDGER — Historial de movimientos
══════════════════════════════════════════════════════════════════ */
.ldg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.ldg-summary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  flex-wrap: wrap;
}
.ldg-sum-in  { color: #00e5a0; font-weight: 700; }
.ldg-sum-out { color: #ef4444; font-weight: 700; }
.ldg-sum-sep { color: var(--text3); }
.ldg-sum-net { font-weight: 700; }
.ldg-filter {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  cursor: pointer;
}

/* ── Streak Shield ────────────────────────────────────────────── */
.shield-pill {
  background: rgba(99,179,237,0.12) !important;
  border: 1px solid rgba(99,179,237,0.35) !important;
  color: #63b3ed !important;
  font-weight: 800;
  animation: shield-pulse 2.5s ease-in-out infinite;
}
@keyframes shield-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(99,179,237,0); }
  50%      { box-shadow: 0 0 0 4px rgba(99,179,237,0.18); }
}

/* ── Camino de Inicio ─────────────────────────────────────────── */
#first-path-widget {
  background: var(--surface);
  border: 1px solid rgba(0,229,160,0.22);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  transition: opacity .3s, transform .3s;
}
.fp-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(0,229,160,0.07) 0%, transparent 60%);
}
.fp-arc { flex-shrink: 0; }
.fp-header-text { flex: 1; min-width: 0; }
.fp-title { font-size: 14px; font-weight: 800; font-family: 'Syne', sans-serif; }
.fp-sub   { font-size: 11px; color: var(--text2); margin-top: 2px; }
.fp-dismiss {
  background: none; border: none; color: var(--text3);
  font-size: 14px; cursor: pointer; padding: 4px; line-height: 1;
  flex-shrink: 0;
}
.fp-steps { padding: 6px 0 4px; }

.fp-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .15s;
}
.fp-step:last-child { border-bottom: none; }
.fp-step-done   { opacity: 0.55; }
.fp-step-active { background: rgba(0,229,160,0.05); }
.fp-step-locked { opacity: 0.35; }

.fp-step-icon {
  font-size: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fp-step-icon-locked { filter: grayscale(1); }
.fp-step-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,229,160,0.15);
  border: 2px solid #00e5a0;
  color: #00e5a0;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.fp-step-body  { flex: 1; min-width: 0; }
.fp-step-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.fp-step-desc  { font-size: 11px; color: var(--text2); line-height: 1.45; margin-bottom: 4px; }
.fp-step-meta  { font-size: 11px; }
.fp-step-reward { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 11px; }

.fp-step-cta-wrap { display: flex; align-items: center; flex-shrink: 0; margin-top: 2px; }
.fp-step-cta {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--accent);
  color: #000;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .15s, transform .1s;
}
.fp-step-cta:active { transform: scale(0.96); opacity: 0.85; }

/* ── FinAI Coach Modal (rediseñado) ──────────────────────────── */
.coach-modal-box > .modal-close { display: none; }
.coach-modal-box {
  max-width: 420px;
  width: 94%;
  padding: 0;
  border-radius: 20px;
  overflow: hidden;
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.10);
}
.coach-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
  background: linear-gradient(135deg, rgba(110,86,255,0.15) 0%, transparent 60%);
  border-bottom: 1px solid var(--border);
}
.coach-modal-avatar { font-size: 32px; line-height: 1; }
.coach-modal-title  { font-size: 17px; font-weight: 800; font-family: 'Syne', sans-serif; }
.coach-modal-sub    { font-size: 11px; color: var(--text3); margin-top: 2px; }

.coach-stats-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.coach-stat-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px 9px;
  color: var(--text2);
}
.coach-stat-icon { font-size: 12px; }

.coach-insights-wrap { padding: 12px 14px 0; }
.coach-section-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text3);
  margin-bottom: 8px;
  padding: 0 14px;
}
.coach-section-lbl:first-child { padding: 0; }

.coach-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.coach-insight-row:hover {
  background: rgba(0,229,160,0.07);
  border-color: rgba(0,229,160,0.2);
}
.coach-insight-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0,229,160,0.15);
  color: #00e5a0;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.coach-insight-text {
  font-size: 12px;
  color: var(--text1);
  line-height: 1.55;
}

.coach-q-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 14px 12px;
}

.coach-input-row {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
  align-items: center;
}
.coach-free-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text1);
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.coach-free-input:focus { border-color: var(--accent); }
.coach-free-input::placeholder { color: var(--text3); }
.coach-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  border: none;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-send-btn:active { transform: scale(0.92); }

.coach-response-area {
  margin: 0 14px 14px;
  background: rgba(0,229,160,0.05);
  border: 1px solid rgba(0,229,160,0.2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text1);
  line-height: 1.65;
}
.coach-resp-label {
  font-size: 9px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
  font-weight: 700;
}

/* ── Welcome Back Modal
 ───────────────────────────────────────── */
.wb-modal {
  max-width: 340px;
  width: 92%;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: var(--surface);
}
.wb-header {
  background: linear-gradient(135deg, rgba(0,229,160,0.18) 0%, rgba(0,145,255,0.12) 100%);
  padding: 24px 20px 18px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.wb-emoji  { font-size: 36px; margin-bottom: 8px; }
.wb-title  { font-size: 20px; font-weight: 800; font-family: 'Syne', sans-serif; margin-bottom: 4px; }
.wb-sub    { font-size: 12px; color: var(--text2); line-height: 1.5; }
.wb-patrimony {
  padding: 16px 20px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.wb-patr-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); margin-bottom: 4px; }
.wb-patr-val   { font-size: 26px; font-weight: 800; font-family: 'Syne', sans-serif; margin-bottom: 4px; }
.wb-patr-delta { font-size: 13px; font-weight: 700; font-family: 'DM Mono', monospace; margin-bottom: 10px; }
.wb-sparkline  { display: flex; justify-content: center; }
.wb-sparkline svg { width: 100px; height: 36px; }
.wb-income {
  padding: 10px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.wb-income-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text2);
  padding: 4px 0;
}
.wb-inc-val { color: #00e5a0; font-weight: 700; font-family: 'DM Mono', monospace; }
.wb-cta { margin: 14px 16px 16px; width: calc(100% - 32px); border-radius: 12px; font-size: 15px; }

/* ── Patrimony Chart Tabs ─────────────────────────────────────── */
.patr-chart-tabs {
  display: flex;
  gap: 4px;
}
.pct-tab {
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.pct-tab.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 700;
}
.pct-tab:not(.active):hover {
  background: rgba(0,229,160,0.1);
  color: var(--accent);
  border-color: var(--accent);
}
.patr-chart-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text3);
  font-family: 'DM Mono', monospace;
}
.patr-daily-chart {
  width: 100%;
  overflow: hidden;
}

.ldg-csv-btn {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ldg-csv-btn:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.ldg-list {
  max-height: 420px;
  overflow-y: auto;
  padding: 6px 0;
}
.ldg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  transition: background .15s;
}
.ldg-row:last-child { border-bottom: none; }
.ldg-row:hover { background: rgba(255,255,255,.025); }
.ldg-icon { font-size: 17px; flex-shrink: 0; width: 22px; text-align: center; }
.ldg-body { flex: 1; min-width: 0; }
.ldg-desc { font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ldg-meta { font-size: 10px; color: var(--text3); margin-top: 2px; font-family: 'DM Mono', monospace; }
.ldg-amount { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.ldg-empty  { padding: 24px 16px; text-align: center; font-size: 12px; color: var(--text3); line-height: 1.6; }

/* light mode */
@media (prefers-color-scheme: light) {
  .ldg-filter { background: #f8fafc; }
}

/* ══════════════════════════════════════════════════════════════════
   ONBOARDING — Paso profesión
══════════════════════════════════════════════════════════════════ */
.ob-prof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
  width: 100%;
}
.ob-prof-card {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 12px 8px 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  user-select: none;
}
.ob-prof-card:active { transform: scale(.96); }
.ob-prof-card.selected {
  border-color: var(--accent);
  background: rgba(0,229,160,.08);
}
.ob-pc-icon   { font-size: 22px; margin-bottom: 5px; }
.ob-pc-title  { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.2; margin-bottom: 3px; }
.ob-pc-salary { font-size: 9px; color: var(--text3); font-family: 'DM Mono', monospace; line-height: 1.3; }

.ob-prof-detail {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  animation: msFadeIn .2s ease;
}
.ob-pd-desc { font-size: 12px; color: var(--text2); line-height: 1.5; margin-bottom: 10px; }
.ob-pd-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.ob-pd-item { font-size: 10px; line-height: 1.4; padding: 2px 0; }
.ob-pd-pro  { color: #00e5a0; }
.ob-pd-con  { color: #ef4444; }
.ob-pd-lesson {
  font-size: 11px; font-style: italic; color: var(--text3);
  border-top: 1px solid var(--border); padding-top: 8px; line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   F13 — CERTIFICADO CANVAS PROFESIONAL
═══════════════════════════════════════════════════════════════ */
.cert-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg,rgba(0,229,160,.07),rgba(110,86,255,.07));
  border: 1px solid rgba(0,229,160,.25);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 12px;
}
.cert-cta-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.cert-cta-icon { font-size:28px; flex-shrink:0; }
.cert-cta-title { font-size:13px; font-weight:700; color:var(--text1); margin-bottom:2px; }
.cert-cta-sub   { font-size:11px; color:var(--text2); }

.btn-cert-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg,var(--accent),#6e56ff);
  color: #fff; font-weight:700; font-size:12px;
  padding: 10px 16px; border-radius:10px; border:none;
  cursor:pointer; flex-shrink:0; white-space:nowrap;
}
.btn-cert-shine {
  position: absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation: certShine 2.4s ease-in-out infinite;
}
@keyframes certShine { 0%{left:-60%} 60%{left:120%} 100%{left:120%} }

/* Modal de preview del certificado */
.modal-cert-preview { max-width:440px; width:100%; padding:20px 18px; }
.dyncert-header { text-align:center; margin-bottom:16px; }
.dyncert-icon   { font-size:36px; margin-bottom:6px; }
.dyncert-title  { font-size:18px; font-weight:800; color:var(--text1); }
.dyncert-sub    { font-size:12px; color:var(--text2); margin-top:2px; }
.dyncert-preview-wrap {
  position:relative; background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:12px;
  overflow:hidden; margin-bottom:16px; min-height:100px;
  display:flex; align-items:center; justify-content:center;
}
.dyncert-img { width:100%; display:block; border-radius:10px; }
.dyncert-loading {
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; gap:10px; background:rgba(6,8,16,.85);
  font-size:13px; color:var(--text2);
}
.dyncert-spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,.1); border-top-color:var(--accent);
  animation: spin .8s linear infinite;
}
.dyncert-actions { display:flex; flex-direction:column; gap:8px; }

/* ═══════════════════════════════════════════════════════════════
   F14 — FLASHCARDS SRS
═══════════════════════════════════════════════════════════════ */
/* Entry button */
.fc-entry-btn {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; background:rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:14px;
  padding:14px 16px; cursor:pointer; transition:background .15s;
  text-align:left; color:var(--text1);
}
.fc-entry-btn:hover { background:rgba(255,255,255,.07); }
.fc-entry-left { display:flex; align-items:center; gap:12px; }
.fc-entry-icon  { font-size:26px; }
.fc-entry-title { font-size:13px; font-weight:700; color:var(--text1); margin-bottom:2px; }
.fc-entry-sub   { font-size:11px; color:var(--text2); }
.fc-entry-arrow { font-size:18px; color:var(--text3); }

/* Modal overlay */
.modal-overlay {
  position: fixed; inset:0; background:rgba(0,0,0,.65);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:1000; backdrop-filter:blur(4px);
  animation: msFadeIn .2s ease;
}
@media (min-width:480px) { .modal-overlay { align-items:center; } }

/* Flashcard box */
.fc-box {
  background:var(--card); border-radius:20px 20px 0 0;
  padding:22px 18px 28px; width:100%; max-width:420px;
  max-height:85vh; overflow-y:auto; position:relative;
}
@media (min-width:480px) { .fc-box { border-radius:20px; } }

.fc-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px;
}
.fc-progress { font-size:12px; font-weight:700; color:var(--accent); }
.fc-count    { font-size:11px; color:var(--text3); }

/* 3D flip */
.fc-scene { perspective:1000px; width:100%; min-height:210px; cursor:pointer; margin-bottom:16px; }
.fc-card  {
  width:100%; min-height:210px; position:relative;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.fc-card.fc-flipped { transform:rotateY(180deg); }
.fc-face {
  position:absolute; inset:0; backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:16px; padding:24px 20px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.fc-back {
  transform:rotateY(180deg);
  background:rgba(0,229,160,.05); border-color:rgba(0,229,160,.2);
}
.fc-eyebrow {
  font-size:10px; text-transform:uppercase; letter-spacing:1px;
  color:var(--text3); margin-bottom:12px;
}
.fc-term { font-size:22px; font-weight:800; color:var(--text1); font-family:'Syne',sans-serif; line-height:1.3; margin-bottom:14px; }
.fc-hint { font-size:11px; color:var(--text3); }
.fc-def  { font-size:13px; color:var(--text2); line-height:1.65; }

/* Answer buttons */
.fc-btns { display:flex; gap:8px; margin-top:4px; }
.fc-btn  {
  flex:1; padding:12px 8px; border-radius:12px; border:none;
  font-size:12px; font-weight:700; cursor:pointer;
  transition:all .15s; line-height:1.4;
}
.fc-btn span { display:block; font-size:10px; font-weight:400; opacity:.7; margin-top:2px; }
.fc-btn-no   { background:rgba(255,75,92,.14);  color:#ff4b5c; border:1px solid rgba(255,75,92,.3); }
.fc-btn-hard { background:rgba(240,180,41,.12); color:#f0b429; border:1px solid rgba(240,180,41,.3); }
.fc-btn-easy { background:rgba(0,229,160,.11);  color:var(--accent); border:1px solid rgba(0,229,160,.3); }
.fc-btn:hover { filter:brightness(1.18); transform:translateY(-1px); }

/* ═══════════════════════════════════════════════════════════════
   F15 — DAILY PATRIMONY DELTA WIDGET
═══════════════════════════════════════════════════════════════ */
.fpcard-daily-delta {
  display:flex; align-items:center; gap:5px;
  margin-top:4px; margin-bottom:2px;
  font-size:12px; font-weight:600;
}
.fpd-icon  { font-size:9px; }
.fpd-val   { font-weight:700; font-size:13px; }
.fpd-pct   { font-size:11px; opacity:.8; }
.fpd-label { font-size:10px; color:var(--text3); margin-left:2px; }
.delta-up   { color:var(--accent); }
.delta-down { color:var(--danger, #ef4444); }

/* ═══════════════════════════════════════════════════════════════
   F16 — COMBO BADGE + MICRO-INTERACTIONS
═══════════════════════════════════════════════════════════════ */
.combo-badge {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
  opacity: 0; pointer-events: none; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 800;
  background: rgba(0,229,160,.15); border: 1.5px solid rgba(0,229,160,.5);
  color: var(--accent);
  backdrop-filter: blur(10px);
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
.combo-badge.combo-visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.combo-badge.combo-purple {
  background: rgba(110,86,255,.18); border-color: rgba(110,86,255,.55);
  color: #a78bfa;
}
.combo-badge.combo-gold {
  background: rgba(240,180,41,.18); border-color: rgba(240,180,41,.55);
  color: #f0b429;
}
.combo-badge.combo-pulse { animation: comboPulse .35s ease; }
@keyframes comboPulse {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.12); }
  100% { transform: translateX(-50%) scale(1); }
}
.cb-n  { font-size:18px; font-weight:900; }
.cb-m  { font-size:11px; opacity:.8; margin-left:4px; }

/* Partículas de burst */
.quiz-burst-p {
  position: fixed; width: 6px; height: 6px; border-radius: 50%;
  pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
  animation: burstP .65s ease-out forwards;
}
@keyframes burstP {
  0%   { transform: translate(-50%,-50%) translate(0,0) scale(1); opacity:1; }
  100% { transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0); opacity:0; }
}

/* Shake en opción errónea */
.quiz-shake { animation: quizShake .4s ease; }
@keyframes quizShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-7px); }
  40%     { transform: translateX(7px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════════════════
   F17 — READING RING SVG
═══════════════════════════════════════════════════════════════ */
.read-ring-svg { display:inline-block; vertical-align:middle; }
#lesson-next-btn:disabled {
  cursor: not-allowed;
  background: var(--surface2, rgba(255,255,255,.06));
}

/* ═══════════════════════════════════════════════════════════════
   F18 — SPARKLINES EN STOCK CARDS
═══════════════════════════════════════════════════════════════ */
.sc-sparkline {
  display: flex; align-items: center; justify-content: flex-end;
  margin-bottom: 3px; opacity: .85;
}
.sc-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 1px; flex-shrink: 0; width: 88px; min-width: 88px;
}

/* ═══════════════════════════════════════════════════════════════
   F19 — TEST DE PERSONALIDAD INVERSORA
═══════════════════════════════════════════════════════════════ */

/* Entry button en perfil */
.inv-test-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px; border-radius: 16px;
  background: linear-gradient(135deg,rgba(240,180,41,.07),rgba(110,86,255,.07));
  border: 1px solid rgba(240,180,41,.25); cursor: pointer;
  text-align: left; transition: all .15s; color: var(--text1);
}
.inv-test-btn:hover { background: linear-gradient(135deg,rgba(240,180,41,.12),rgba(110,86,255,.12)); }
.inv-test-icon  { font-size: 26px; }
.inv-test-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.inv-test-sub   { font-size: 11px; color: var(--text2); line-height: 1.4; }

/* Profile display card */
.inv-profile-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.inv-prof-icon  { font-size: 28px; }
.inv-prof-label { font-size: 14px; font-weight: 800; margin-bottom: 2px; }
.inv-prof-sub   { font-size: 11px; color: var(--text2); }
.inv-prof-info  { flex: 1; min-width: 0; }

/* Test modal box */
.it-box {
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 24px 20px 32px; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto; position: relative;
  transition: opacity .15s;
}
@media (min-width:480px) { .it-box { border-radius: 20px; } }

.it-header    { margin-bottom: 20px; }
.it-eyebrow   { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .8px; margin-bottom: 8px; }
.it-pbar      { height: 4px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.it-pbar-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .3s; }
.it-q         { font-size: 16px; font-weight: 700; color: var(--text1); line-height: 1.5; margin-bottom: 20px; }
.it-opts      { display: flex; flex-direction: column; gap: 10px; }
.it-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  cursor: pointer; text-align: left; font-size: 13px;
  color: var(--text1); transition: all .15s;
}
.it-opt:hover { background: rgba(0,229,160,.08); border-color: rgba(0,229,160,.3); transform: translateX(3px); }
.it-opt-letter {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.06); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800;
  color: var(--text3);
}
.it-opt-text { flex: 1; line-height: 1.4; }

/* Result screen */
.it-result-box { max-height: 90vh; }
.it-result-icon   { font-size: 56px; margin-bottom: 8px; }
.it-result-label  { font-size: 22px; font-weight: 900; font-family: 'Syne',sans-serif; margin-bottom: 4px; }
.it-result-tagline{ font-size: 12px; color: var(--text2); }
.it-result-desc   { font-size: 13px; color: var(--text2); line-height: 1.65; margin-bottom: 18px; background: rgba(255,255,255,.03); border-radius: 12px; padding: 14px 16px; }
.it-port-section  { margin-bottom: 14px; }
.it-port-title    { font-size: 12px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 12px; }
.it-port-layout   { display: flex; align-items: center; gap: 16px; }
.it-port-legend   { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.it-leg-row       { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.it-leg-dot       { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.it-leg-name      { flex: 1; color: var(--text2); }
.it-leg-pct       { font-weight: 700; color: var(--text1); font-family: 'DM Mono',monospace; }
.it-tip {
  font-size: 12px; color: var(--text2); line-height: 1.6;
  background: rgba(240,180,41,.07); border-left: 3px solid #f0b429;
  padding: 10px 14px; border-radius: 0 10px 10px 0; margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   F20 — HITOS PATRIMONIALES
═══════════════════════════════════════════════════════════════ */
.ms-box {
  position: relative; overflow: hidden;
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 32px 24px 36px; width: 100%; max-width: 420px;
  text-align: center;
}
@media (min-width:480px) { .ms-box { border-radius: 20px; } }
.ms-glow {
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(ellipse,rgba(0,229,160,.18) 0%,transparent 70%);
  pointer-events: none;
}
.ms-icon    { font-size: 64px; margin-bottom: 8px; animation: celPop .5s cubic-bezier(.34,1.56,.64,1); }
.ms-tag     { font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text3); margin-bottom: 10px; }
.ms-label   { font-size: 18px; font-weight: 800; color: var(--text1); margin-bottom: 6px; font-family: 'Syne',sans-serif; }
.ms-amount  { font-size: 42px; font-weight: 900; color: var(--accent); font-family: 'Syne',sans-serif; margin-bottom: 14px; }
.ms-msg     { font-size: 13px; color: var(--text2); line-height: 1.65; margin-bottom: 20px; max-width: 340px; margin-left: auto; margin-right: auto; }
.ms-rewards {
  display: flex; justify-content: center; gap: 20px;
  background: rgba(255,255,255,.04); border-radius: 12px;
  padding: 12px 20px; margin-bottom: 4px;
}
.ms-rew-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text1); }
.ms-rew-icon { font-size: 18px; }

/* ═══════════════════════════════════════════════════════════════
   F12 — SIMULADOR INTERACTIVO DE HIPOTECA
═══════════════════════════════════════════════════════════════ */
.ms-entry-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 16px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border);
  cursor: pointer; text-align: left; transition: background .15s; color: var(--text1);
}
.ms-entry-btn:hover { background: rgba(255,255,255,.07); }

.ms-sim-box {
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 20px 18px 28px; width: 100%; max-width: 420px;
  max-height: 92vh; overflow-y: auto; position: relative;
}
@media (min-width:480px) { .ms-sim-box { border-radius: 20px; } }

.ms-sim-tabs {
  display: flex; gap: 4px; margin-bottom: 18px;
  background: rgba(255,255,255,.04); border-radius: 10px; padding: 3px;
}
.ms-stab {
  flex: 1; padding: 8px 6px; border-radius: 8px; border: none;
  background: transparent; color: var(--text3);
  font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s;
}
.ms-stab.active { background: var(--card-2, rgba(255,255,255,.08)); color: var(--text1); }

.ms-sl-row { margin-bottom: 16px; }
.ms-sl-head { display: flex; justify-content: space-between; margin-bottom: 7px; }
.ms-sl-label { font-size: 12px; color: var(--text2); }
.ms-sl-val   { font-size: 14px; font-weight: 700; color: var(--text1); }
.ms-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.1); outline: none; cursor: pointer;
}
.ms-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  box-shadow: 0 0 0 4px rgba(0,229,160,.18); transition: box-shadow .15s;
}
.ms-slider:active::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(0,229,160,.28); }
.ms-slider::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: none; cursor: pointer;
}
.ms-sl-limits { display: flex; justify-content: space-between; font-size: 10px; color: var(--text3); margin-top: 3px; }

.ms-sim-res  { margin-top: 6px; }
.ms-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-ri {
  background: rgba(255,255,255,.04); border-radius: 12px; padding: 12px;
  text-align: center; border: 1px solid rgba(255,255,255,.06);
}
.ms-ri-main { background: rgba(0,229,160,.08); border-color: rgba(0,229,160,.2); }
.ms-ri-val  { font-size: 16px; font-weight: 800; color: var(--text1); margin-bottom: 4px; font-family: 'Syne',sans-serif; }
.ms-ri-lab  { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; }

.ms-chart-wrap   { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 10px 8px; }
.ms-chart-title  { font-size: 11px; font-weight: 600; color: var(--text3); margin-bottom: 10px; }
.ms-chart-legend { display: flex; gap: 16px; font-size: 11px; color: var(--text3); margin-top: 8px; }
.ms-leg-dot      { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }

.ms-early-summary { background: rgba(255,255,255,.03); border-radius: 14px; padding: 16px; margin-top: 12px; }
.ms-early-row    { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text2); padding: 6px 0; }
.ms-early-num-bad  { color: var(--danger,#ef4444); font-weight: 700; }
.ms-early-num-good { color: var(--accent); font-weight: 700; }
.ms-early-divider  { height: 1px; background: rgba(255,255,255,.07); margin: 8px 0; }
.ms-early-highlight { font-weight: 700; color: var(--text1) !important; }

/* ═══════════════════════════════════════════════════════════════
   F21 — PRESUPUESTO MENSUAL INTERACTIVO
═══════════════════════════════════════════════════════════════ */
.bgt-box {
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 20px 18px 32px; width: 100%; max-width: 440px;
  max-height: 92vh; overflow-y: auto; position: relative;
}
@media (min-width:480px) { .bgt-box { border-radius: 20px; } }

.bgt-header { margin-bottom: 16px; }
.bgt-income-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
  background: rgba(0,229,160,.06); border: 1px solid rgba(0,229,160,.2);
  border-radius: 12px; padding: 10px 14px;
}
.bgt-income-label { font-size: 12px; font-weight: 600; color: var(--text1); }
.bgt-income-input {
  width: 90px; background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 10px; color: var(--text1);
  font-size: 14px; font-weight: 700; text-align: right;
}

/* Overview: donut + surplus */
.bgt-overview {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.bgt-surplus-box {
  flex: 1; border-radius: 14px; padding: 14px 16px;
  background: rgba(0,229,160,.07); border: 1px solid rgba(0,229,160,.2);
}
.bgt-surplus-box.bgt-surplus-neg { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.25); }
.bgt-surplus-label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.bgt-surplus-val   { font-size: 22px; font-weight: 900; color: var(--accent); font-family: 'Syne',sans-serif; line-height: 1.2; }
.bgt-surplus-neg .bgt-surplus-val { color: var(--danger, #ef4444); }
.bgt-surplus-pct   { font-size: 11px; color: var(--text2); margin-top: 2px; }
.bgt-rate-label    { font-size: 10px; color: var(--text3); margin-top: 5px; }

/* Category sliders */
.bgt-cats { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.bgt-cat-row {}
.bgt-cat-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.bgt-cat-icon  { font-size: 16px; }
.bgt-cat-name  { flex: 1; font-size: 12px; font-weight: 600; color: var(--text1); }
.bgt-cat-bench { font-size: 10px; color: var(--text3); }
.bgt-cat-val   { font-size: 13px; font-weight: 700; color: var(--text1); min-width: 44px; text-align: right; }
.bgt-over      { color: var(--danger, #ef4444) !important; }

.bgt-slider {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 4px; border-radius: 2px; outline: none; cursor: pointer;
  background: rgba(255,255,255,.1);
}
.bgt-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--track-color, var(--accent));
  cursor: pointer; box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.bgt-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--track-color, var(--accent)); border: none; cursor: pointer;
}

/* Benchmark bar under slider */
.bgt-bench-bar {
  position: relative; height: 3px; background: rgba(255,255,255,.06);
  border-radius: 2px; margin-top: 4px; overflow: hidden;
}
.bgt-bench-fill, .bgt-actual-fill {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 2px;
}

.bgt-tip-box {
  background: rgba(255,255,255,.03); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   F22 — SIMULADOR DE DECISIONES FINANCIERAS
═══════════════════════════════════════════════════════════════ */
.dcs-box {
  background: var(--card); border-radius: 20px 20px 0 0;
  padding: 20px 18px 32px; width: 100%; max-width: 440px;
  max-height: 92vh; overflow-y: auto; position: relative;
}
@media (min-width:480px) { .dcs-box { border-radius: 20px; } }
.dcs-header { margin-bottom: 16px; }

.dcs-presets {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.dcs-preset {
  display: flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 20px; font-size: 11px;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; transition: all .15s;
}
.dcs-preset:hover, .dcs-preset.active {
  background: rgba(0,229,160,.1); border-color: rgba(0,229,160,.4); color: var(--accent);
}
.dcs-preset span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dcs-custom-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.dcs-custom-label { font-size: 12px; color: var(--text2); flex-shrink: 0; }
.dcs-input-wrap   { display: flex; align-items: center; gap: 4px; }
.dcs-currency     { font-size: 15px; font-weight: 700; color: var(--accent); }
.dcs-input {
  width: 100px; background: rgba(255,255,255,.06); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; color: var(--text1);
  font-size: 15px; font-weight: 700;
}

.dcs-horizon-row {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
}
.dcs-hor-label { font-size: 12px; color: var(--text2); }
.dcs-hor-btns  { display: flex; gap: 6px; }
.dcs-hor-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; transition: all .15s;
}
.dcs-hor-btn.active { background: rgba(110,86,255,.15); border-color: rgba(110,86,255,.5); color: #a78bfa; }

.dcs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.dcs-card {
  border-radius: 14px; padding: 14px 12px; text-align: center;
  border: 1px solid rgba(255,255,255,.08);
}
.dcs-card-cost { background: rgba(239,68,68,.07); border-color: rgba(239,68,68,.2); }
.dcs-card-opp  { background: rgba(0,229,160,.07); border-color: rgba(0,229,160,.2); }
.dcs-card-icon { font-size: 20px; margin-bottom: 6px; }
.dcs-card-main { font-size: 18px; font-weight: 800; color: var(--text1); font-family: 'Syne',sans-serif; }
.dcs-green     { color: var(--accent) !important; }
.dcs-card-sub  { font-size: 10px; color: var(--text3); margin-top: 4px; }

.dcs-verdict { background: rgba(255,255,255,.03); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.dcs-verdict-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text2); padding: 4px 0; line-height: 1.5; }
.dcs-vr-icon { flex-shrink: 0; }

.dcs-compbar-wrap  { margin-bottom: 12px; }
.dcs-compbar-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text3); margin-bottom: 4px; }
.dcs-compbar-track { height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.dcs-compbar-fill  { height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.25,.46,.45,.94); }

.dcs-insight {
  font-size: 12px; color: var(--text2); line-height: 1.65;
  background: rgba(240,180,41,.06); border-left: 3px solid #f0b429;
  padding: 10px 14px; border-radius: 0 10px 10px 0;
}

/* ═══════════════════════════════════════════════════════════════
   TOOL CTA BUTTONS (Home — F21/F22)
═══════════════════════════════════════════════════════════════ */
.tool-cta-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(0,229,160,.22);
  cursor: pointer; text-align: left; transition: all .15s; color: var(--text1);
}
.tool-cta-btn:hover { background: rgba(0,229,160,.08); transform: translateY(-1px); }
.tool-cta-orange { border-color: rgba(240,180,41,.25); }
.tool-cta-orange:hover { background: rgba(240,180,41,.08); }
.tool-cta-icon  { font-size: 22px; flex-shrink: 0; }
.tool-cta-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.tool-cta-sub   { font-size: 10px; color: var(--text2); }

/* ═══════════════════════════════════════════════════════════════
   F23 — SLIDE TRANSITIONS (global para lesson-content)
═══════════════════════════════════════════════════════════════ */
#lesson-content {
  will-change: transform, opacity;
}
/* Stagger reveal ya se hace via JS inline styles */

/* ═══════════════════════════════════════════════════════════════
   F24 — ONBOARDING PERSONALIZADO
   Nuevos estilos: goal-grid-3, ob-level-card, ob-monthly-slider,
   ob-hero-msg, mod-suggested-badge
═══════════════════════════════════════════════════════════════ */

/* Goal grid 3×2 para 6 objetivos */
.goal-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
.goal-grid-3 .goal-card { padding: 14px 10px; }
.goal-grid-3 .goal-icon { font-size: 26px; margin-bottom: 6px; }
.goal-grid-3 .goal-name { font-size: 11px; }
.goal-grid-3 .goal-desc { font-size: 10px; }

/* Level selection cards */
.ob-level-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
  width: 100%;
}
.ob-level-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 18px 14px;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
  user-select: none;
}
.ob-level-card:hover  { border-color: var(--border2); transform: translateY(-2px); }
.ob-level-card.selected {
  border-color: var(--accent2);
  background: rgba(99,102,241,.07);
  box-shadow: 0 0 0 4px rgba(99,102,241,.08);
}
.ob-lc-icon  { font-size: 30px; margin-bottom: 8px; }
.ob-lc-title { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 13px; margin-bottom: 5px; line-height: 1.2; }
.ob-lc-desc  { font-size: 11px; color: var(--text2); line-height: 1.4; }

/* Monthly investment slider step */
.ob-monthly-display {
  text-align: center;
  margin-bottom: 8px;
}
.ob-monthly-amount {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 52px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
  margin-bottom: 4px;
}
.ob-monthly-label { font-size: 13px; color: var(--text2); }
.ob-slider-wrap { margin: 20px 0 8px; }
.ob-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) 5%, var(--border2) 5%);
  outline: none;
  cursor: pointer;
  transition: background .1s;
}
.ob-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(0,229,160,.2);
  cursor: pointer;
  transition: box-shadow .2s;
}
.ob-slider::-webkit-slider-thumb:hover {
  box-shadow: 0 0 0 8px rgba(0,229,160,.15);
}
.ob-slider-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text3);
  margin-top: 6px;
}
.ob-monthly-proj-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 20px;
  width: 100%;
}
.ob-mp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.ob-mp-row:last-of-type { border-bottom: none; }
.ob-mp-highlight { margin-top: 4px; padding-top: 10px; border-top: 1px dashed rgba(0,229,160,.2); border-bottom: none !important; }
.ob-mp-label { font-size: 13px; color: var(--text2); }
.ob-mp-val {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.ob-mp-val.accent { color: var(--accent2); }
.ob-mp-val.gold   { color: var(--gold); font-size: 16px; }
.ob-mp-insight {
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  text-align: center;
  margin-top: 10px;
  line-height: 1.4;
}

/* Hero card personalized message */
.ob-hero-msg {
  background: linear-gradient(135deg, rgba(0,229,160,.08), rgba(99,102,241,.06));
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin-top: 10px;
  animation: fadeUp .4s ease;
}

/* Suggested module badge */
.mod-suggested-badge {
  position: absolute;
  top: -8px;
  right: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #0a0e1a;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .03em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 10px rgba(0,229,160,.3);
}

/* ═══════════════════════════════════════════════════════════════
   F25 — TRACKER DE PATRIMONIO REAL
   Hero card additions + Modal rpt-* styles
═══════════════════════════════════════════════════════════════ */

/* ── Hero card additions ─────────────────────────────────── */
.hero-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hero-real-btn {
  background: rgba(0,229,160,.1);
  border: 1px solid rgba(0,229,160,.25);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  letter-spacing: .02em;
  flex-shrink: 0;
}
.hero-real-btn:hover { background: rgba(0,229,160,.18); transform: translateY(-1px); }

.hero-amount-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.hero-real-badge {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 9px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(0,229,160,.2);
  border-radius: 10px;
  margin-bottom: 4px;
  min-width: 80px;
}
.hrb-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hrb-val {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.hrb-diff {
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  line-height: 1;
}
.hero-card.has-real-data {
  border-color: rgba(0,229,160,.3);
  box-shadow: 0 0 0 1px rgba(0,229,160,.1), 0 8px 32px rgba(0,0,0,.3);
}

/* ── Modal rpt ───────────────────────────────────────────── */
.rpt-modal { padding: 0; overflow: hidden; }

.rpt-header {
  padding: 20px 20px 0;
}
.rpt-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.rpt-icon { font-size: 32px; }
.rpt-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
}
.rpt-sub { font-size: 11px; color: var(--text3); margin-top: 2px; }

.rpt-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  gap: 0;
}
.rpt-tab {
  flex: 1;
  padding: 10px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.rpt-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.rpt-panel { display: none; padding: 16px 20px 20px; }
.rpt-panel.active { display: block; }

.rpt-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.rpt-field { margin-bottom: 12px; }
.rpt-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 5px;
}
.rpt-lico { font-size: 14px; }
.rpt-input-row {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .2s;
}
.rpt-input-row:focus-within { border-color: var(--accent2); }
.rpt-prefix {
  padding: 0 10px;
  font-size: 13px;
  color: var(--text3);
  font-family: 'DM Mono', monospace;
  flex-shrink: 0;
}
.rpt-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: 11px 12px 11px 0;
  font-size: 15px;
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-weight: 600;
}
.rpt-input::placeholder { color: var(--text3); font-weight: 400; }

.rpt-live-preview {
  background: var(--surface2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
}
.rpt-lp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text2);
  padding: 4px 0;
}
.rpt-lp-val { font-family: 'DM Mono', monospace; font-weight: 700; font-size: 14px; color: var(--text); }
.rpt-lp-val.g { color: var(--accent); }
.rpt-lp-val.r { color: var(--danger); }
.rpt-lp-big .rpt-lp-val { font-size: 17px; }
.rpt-lp-divider { height: 1px; background: var(--border); margin: 8px 0; }
.rpt-privacy-note {
  font-size: 10px;
  color: var(--text3);
  text-align: center;
  margin-top: 8px;
}

/* Summary panel */
.rpt-summary-net {
  text-align: center;
  padding: 16px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.rpt-sn-label  { font-size: 11px; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.rpt-sn-amount {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 4px;
}
.rpt-sn-date   { font-size: 11px; color: var(--text3); }

/* Breakdown */
.rpt-breakdown {
  margin-bottom: 14px;
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 14px;
}
.rpt-bd-title  { font-size: 11px; font-weight: 700; color: var(--text3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.rpt-bd-row    { display:grid; grid-template-columns: 110px 1fr 70px; align-items:center; gap:8px; margin-bottom:7px; }
.rpt-bd-label  { font-size:11px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rpt-bd-bar-wrap { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
.rpt-bd-bar    { height:100%; border-radius:3px; transition:width .4s; }
.rpt-bd-val    { font-family:'DM Mono',monospace; font-size:11px; font-weight:700; text-align:right; }

/* Health card */
.rpt-health-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}
.rpt-hc-row    { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.rpt-hc-title  { font-size:13px; font-weight:700; margin-bottom:3px; }
.rpt-hc-sub    { font-size:11px; color:var(--text2); }
.rpt-hc-score  { font-family:'Syne',sans-serif; font-weight:800; font-size:28px; line-height:1; }
.rpt-hc-bar-wrap { height:6px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:12px; }
.rpt-hc-bar-fill { height:100%; border-radius:3px; transition:width .6s cubic-bezier(.34,1.2,.64,1); }
.rpt-hc-items  { display:flex; flex-direction:column; gap:5px; }
.rpt-hc-item   { font-size:11px; color:var(--text2); line-height:1.4; }
.rpt-hc-item.ok   { color: var(--accent); }
.rpt-hc-item.warn { color: #f59e0b; }

/* Compare card */
.rpt-compare-card {
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 12px;
  display: none;
}
.rpt-cc-title  { font-size:11px; font-weight:700; color:var(--text3); letter-spacing:.06em; text-transform:uppercase; margin-bottom:10px; }
.rpt-cc-row    { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:8px; }
.rpt-cc-block  { text-align:center; }
.rpt-cc-label  { font-size:10px; color:var(--text3); margin-bottom:4px; }
.rpt-cc-val    { font-family:'DM Mono',monospace; font-size:18px; font-weight:700; }
.rpt-cc-val.b  { color: var(--accent2); }
.rpt-cc-vs     { font-size:11px; color:var(--text3); font-weight:700; }
.rpt-cc-diff   { font-size:12px; text-align:center; font-weight:600; }

/* Advice card */
.rpt-advice-card {
  background: linear-gradient(135deg, rgba(0,229,160,.06), rgba(99,102,241,.05));
  border: 1px solid rgba(0,229,160,.15);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.rpt-adv-title { font-size:11px; font-weight:700; color:var(--text2); margin-bottom:10px; }
.rpt-adv-item  { font-size:12px; color:var(--text2); line-height:1.55; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.04); }
.rpt-adv-item:last-child { border-bottom:none; }

.rpt-action-row { display:flex; gap:10px; margin-top:4px; }

/* ═══════════════════════════════════════════════════════════════
   F27 — PLAN DE ACCIÓN PERSONALIZADO
   La tarjeta más importante del home screen.
   Diseño: limpio, progresivo, con jerarquía visual clara.
═══════════════════════════════════════════════════════════════ */

/* ── Tarjeta contenedora ─────────────────────────────────── */
.f27-plan-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 20px;
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
/* Acento izquierdo — línea de color que refuerza "plan activo" */
.f27-plan-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 3px 0 0 3px;
}

/* ── Header ──────────────────────────────────────────────── */
.f27-plan-header {
  padding: 18px 18px 14px 20px;
  border-bottom: 1px solid var(--border);
}
.f27-plan-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.f27-plan-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 3px;
}
.f27-plan-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  line-height: 1;
}
.f27-plan-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
  margin-top: 6px;
}

/* Progress ring */
.f27-plan-progress-ring {
  position: relative;
  flex-shrink: 0;
}
.f27-plan-progress-ring svg { display: block; }
.f27-ring-bg  { fill: none; stroke: var(--border2); stroke-width: 3; }
.f27-ring-fg  {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.34,1.2,.64,1), stroke .4s;
}
.f27-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
}

/* Barra global */
.f27-global-bar-wrap {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}
.f27-global-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition: width .6s cubic-bezier(.34,1.2,.64,1);
}

/* ── Steps container ─────────────────────────────────────── */
.f27-steps {
  padding: 8px 0 4px;
}

/* ── Step individual ─────────────────────────────────────── */
.f27-step {
  display: flex;
  gap: 0;
  padding: 14px 18px 14px 16px;
  transition: background .2s;
  position: relative;
}
.f27-step-active  { background: rgba(0,229,160,.03); }
.f27-step-done    { opacity: .65; }
.f27-step-pending { opacity: .5; }
.f27-step:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

/* Indicador vertical (número + línea conectora) */
.f27-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 14px;
  flex-shrink: 0;
  width: 28px;
}
.f27-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
  transition: all .3s;
}
.f27-step-num.active {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #060810;
  box-shadow: 0 0 12px rgba(0,229,160,.3);
}
.f27-step-num.done {
  background: rgba(0,229,160,.15);
  color: var(--accent);
  border: 1.5px solid var(--accent);
}
.f27-step-num.pending {
  background: var(--surface);
  color: var(--text3);
  border: 1.5px solid var(--border2);
}
.f27-step-line {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--border);
  margin: 4px 0;
  border-radius: 1px;
}
.f27-step-active .f27-step-line {
  background: linear-gradient(180deg, var(--accent), var(--border));
}

/* Contenido del step */
.f27-step-body { flex: 1; min-width: 0; }
.f27-step-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.f27-step-icon { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.f27-step-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.f27-step-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  line-height: 1.3;
}
.f27-step-done .f27-step-title { text-decoration: line-through; color: var(--text3); }

.f27-urgency-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 20px;
  width: fit-content;
}
.f27-done-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .03em;
}

.f27-step-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 10px;
}
.f27-step-desc-done { text-decoration: line-through; color: var(--text3) !important; }

.f27-step-amount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(240,180,41,.08);
  border: 1px solid rgba(240,180,41,.2);
  border-radius: 8px;
  padding: 4px 10px;
  margin-bottom: 10px;
}
.f27-amount-label { font-size: 11px; color: var(--text3); }
.f27-amount-val   { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 700; color: var(--gold); }

/* Botones de acción del step */
.f27-step-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.f27-cta-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(0,229,160,.12), rgba(99,102,241,.08));
  border: 1px solid rgba(0,229,160,.25);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  transition: all .2s;
  flex: 1;
  min-width: 0;
  justify-content: space-between;
}
.f27-cta-btn:hover {
  background: linear-gradient(135deg, rgba(0,229,160,.2), rgba(99,102,241,.12));
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,229,160,.15);
}
.f27-cta-arrow { opacity: .7; transition: transform .2s; }
.f27-cta-btn:hover .f27-cta-arrow { transform: translateX(3px); }

.f27-done-btn {
  padding: 7px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.f27-done-btn:hover {
  background: rgba(0,229,160,.08);
  border-color: var(--accent);
  color: var(--accent);
}

/* Locked state: módulo no completado */
.f27-done-btn-locked {
  color: rgba(255,255,255,.25) !important;
  border-color: rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.02) !important;
  cursor: not-allowed !important;
}
.f27-done-btn-locked:hover {
  background: rgba(239,68,68,.06) !important;
  border-color: rgba(239,68,68,.3) !important;
  color: rgba(239,68,68,.6) !important;
}

/* Shake penalty animation */
@keyframes f27-shake {
  0%,100% { transform: translateX(0); }
  15%      { transform: translateX(-6px) rotate(-1deg); }
  30%      { transform: translateX(6px) rotate(1deg); }
  45%      { transform: translateX(-5px); }
  60%      { transform: translateX(5px); }
  75%      { transform: translateX(-3px); }
  90%      { transform: translateX(3px); }
}
.f27-penalty-shake {
  animation: f27-shake 0.55s cubic-bezier(.36,.07,.19,.97) both;
  border-color: rgba(239,68,68,.4) !important;
  background: rgba(239,68,68,.04) !important;
}

/* CTA button pulse guidance after penalty */
@keyframes f27-cta-guide {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,160,0); }
  40%      { box-shadow: 0 0 0 6px rgba(0,229,160,.25); }
}
.f27-cta-pulse {
  animation: f27-cta-guide 0.7s ease 3;
  border-color: var(--accent) !important;
}
.f27-undo-btn {
  padding: 5px 10px;
  background: none;
  border: none;
  font-size: 10px;
  color: var(--text3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Footer ──────────────────────────────────────────────── */
.f27-plan-footer { padding: 0 18px 4px 18px; }
.f27-footer-msg {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border-top: 1px solid var(--border);
  margin: 0;
}
.f27-footer-msg strong { color: var(--accent); }
.f27-footer-success {
  background: rgba(0,229,160,.06);
  border: 1px solid rgba(0,229,160,.15);
  color: var(--accent);
}
.f27-footer-tip {
  background: rgba(240,180,41,.05);
  border-color: rgba(240,180,41,.15);
}

/* ── Refresh button ──────────────────────────────────────── */
.f27-refresh-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 16px;
  padding: 10px;
  background: none;
  border: 1px dashed var(--border2);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.f27-refresh-btn:hover {
  border-color: var(--accent2);
  color: var(--accent2);
  background: rgba(99,102,241,.05);
}

/* ══════════════════════════════════════════════════════════════════
   F28 — SKILL TREE VISUAL
══════════════════════════════════════════════════════════════════ */

.f28-wrap { margin-bottom: 0; }

.f28-branch {
  margin-bottom: 20px;
  position: relative;
}

.f28-branch::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg2));
  pointer-events: none;
  border-radius: 0 12px 12px 0;
}

.f28-branch-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.f28-branch-emoji { font-size: 16px; }
.f28-branch-name  { font-size: 13px; font-weight: 700; color: var(--text1); flex-shrink: 0; min-width: 80px; }

.f28-branch-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.f28-branch-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.6s ease;
}
.f28-branch-pct { font-size: 11px; font-weight: 600; flex-shrink: 0; }

.f28-nodes-row {
  display: flex;
  align-items: center;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
  gap: 0;
}
.f28-nodes-row::-webkit-scrollbar { display: none; }

.f28-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  overflow: visible;
}

.f28-node {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  transition: transform 0.18s, box-shadow 0.18s;
  flex-shrink: 0;
  overflow: hidden;
  isolation: isolate;
}

.f28-node.f28-done {
  background: var(--branch-color, var(--accent));
  box-shadow: 0 0 12px var(--branch-color, var(--accent));
  font-size: 18px;
  color: #000;
  font-weight: 900;
}

.f28-node.f28-available {
  background: rgba(255,255,255,0.06);
  border: 2px solid var(--branch-color, var(--accent));
  box-shadow: 0 0 8px var(--branch-color, var(--accent));
  animation: f28-pulse 2.2s infinite;
}

.f28-node.f28-locked {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  cursor: not-allowed;
  opacity: 0.5;
  font-size: 14px;
}

.f28-node:not(.f28-locked):hover {
  transform: scale(1.12);
}

.f28-node-icon { pointer-events: none; }

/* Suggested: pulsing halo */
.f28-suggested { animation: none !important; }
.f28-suggested-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid #fbbf24;
  animation: f28-suggested-pulse 1.4s infinite;
  pointer-events: none;
}

@keyframes f28-pulse {
  0%,100% { box-shadow: 0 0 6px var(--branch-color, var(--accent)); }
  50%      { box-shadow: 0 0 16px var(--branch-color, var(--accent)); }
}
@keyframes f28-suggested-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.2); }
}

/* Unlock animation */
.f28-unlock-anim {
  animation: f28-unlock 1s ease forwards;
}
@keyframes f28-unlock {
  0%  { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.25); }
  100%{ transform: scale(1); opacity: 1; }
}

.f28-node-label {
  font-size: 9px;
  color: var(--text2);
  text-align: center;
  max-width: 52px;
  line-height: 1.2;
  word-break: break-word;
}

.f28-connector {
  width: 22px;
  height: 3px;
  border-radius: 99px;
  flex-shrink: 0;
  margin-bottom: 16px;
  transition: background 0.4s;
}

.f28-expand-wrap {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   F29 — CAJA SORPRESA DIARIA
══════════════════════════════════════════════════════════════════ */

.f29-wrap { position: relative; }

.f29-box-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #1a1040 0%, #0d1a2e 100%);
  border: 1.5px solid rgba(251,191,36,0.4);
  border-radius: 16px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
  animation: f29-glow 2.5s infinite;
}
.f29-box-wrap:hover { transform: scale(1.01); border-color: #fbbf24; }

@keyframes f29-glow {
  0%,100% { box-shadow: 0 0 8px rgba(251,191,36,0.2); }
  50%      { box-shadow: 0 0 22px rgba(251,191,36,0.45); }
}

.f29-box-icon {
  font-size: 36px;
  animation: f29-bounce 2s infinite;
  flex-shrink: 0;
}
@keyframes f29-bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.f29-box-text { flex: 1; }
.f29-box-title { font-size: 14px; font-weight: 700; color: #fbbf24; }
.f29-box-sub   { font-size: 12px; color: var(--text2); margin-top: 2px; }
.f29-box-arrow { font-size: 18px; color: #fbbf24; }

.f29-notif-badge {
  position: absolute;
  top: -6px; right: -6px;
  width: 20px; height: 20px;
  background: #ef4444;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Opening state */
.f29-opening {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}
.f29-box-explode {
  font-size: 52px;
  animation: f29-shake 0.5s ease-in-out;
}
@keyframes f29-shake {
  0%,100%{ transform: rotate(0deg) scale(1); }
  20%    { transform: rotate(-12deg) scale(1.1); }
  40%    { transform: rotate(12deg) scale(1.15); }
  60%    { transform: rotate(-8deg) scale(1.2); }
  80%    { transform: rotate(8deg) scale(1.3); }
}

/* Opened / reward state */
.f29-opened {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0f1f10 0%, #0d1220 100%);
  border: 1.5px solid rgba(0,229,160,0.3);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
}

.f29-reveal-anim { animation: f29-reveal 0.5s ease; }
@keyframes f29-reveal {
  0%  { transform: scale(0.6) translateY(20px); opacity: 0; }
  100%{ transform: scale(1) translateY(0); opacity: 1; }
}

.f29-reward-icon  { font-size: 52px; }
.f29-reward-title { font-size: 22px; font-weight: 800; color: #00e5a0; }
.f29-reward-desc  { font-size: 13px; color: var(--text2); max-width: 260px; }
.f29-next-label   { font-size: 11px; color: var(--text3); margin-top: 4px; }
.f29-particles    { font-size: 20px; letter-spacing: 4px; animation: f29-particles 1s ease; }
@keyframes f29-particles {
  0%  { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.3); }
  100%{ opacity: 0.5; transform: scale(1); }
}

/* ══════════════════════════════════════════════════════════════════
   F26 — TARJETAS COMPARTIR
══════════════════════════════════════════════════════════════════ */

.btn-share-card {
  background: linear-gradient(135deg, #1e3a5f, #0f2744);
  border: 1.5px solid rgba(96,165,250,0.4);
  color: #60a5fa;
  font-weight: 700;
}
.btn-share-card:hover { border-color: #60a5fa; color: #fff; }

/* ══════════════════════════════════════════════════════════════════
   F30 — MISIONES GRUPALES
══════════════════════════════════════════════════════════════════ */

.f30-card {
  background: linear-gradient(135deg, #0d1a2e 0%, #091525 100%);
  border: 1.5px solid rgba(96,165,250,0.25);
  border-radius: 16px;
  padding: 16px;
}
.f30-card.f30-done { border-color: rgba(0,229,160,0.5); }

.f30-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.f30-icon  { font-size: 18px; }
.f30-title { font-size: 14px; font-weight: 700; color: #60a5fa; flex: 1; }
.f30-week-badge {
  font-size: 10px;
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
  border-radius: 99px;
  padding: 2px 8px;
}

.f30-mission-text {
  font-size: 13px;
  color: var(--text1);
  font-style: italic;
  margin-bottom: 10px;
}

.f30-nudge {
  font-size: 12px;
  color: #fb923c;
  background: rgba(251,146,60,0.1);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.f30-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 6px;
}
.f30-progress-fill {
  height: 100%;
  background: #60a5fa;
  border-radius: 99px;
  transition: width 0.6s ease;
}
.f30-fill-done { background: var(--accent); }
.f30-progress-label { font-size: 11px; color: var(--text2); margin-bottom: 12px; }

.f30-members {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.f30-members::-webkit-scrollbar { display: none; }

.f30-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.3s;
}
.f30-member.f30-member-active { opacity: 1; }
.f30-member-you { position: relative; }
.f30-member-you::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #60a5fa;
  top: -3px; left: -3px; width: 36px; height: 36px;
}

.f30-member-av   { font-size: 24px; }
.f30-member-name { font-size: 10px; color: var(--text2); }
.f30-member-prog { font-size: 11px; font-weight: 700; color: var(--text1); }

/* ══════════════════════════════════════════════════════════════════
   F31 — BADGES DE IDENTIDAD
══════════════════════════════════════════════════════════════════ */

.f31-home-section { }

.f31-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.f31-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid var(--badge-color, rgba(255,255,255,0.15));
  border-radius: 99px;
  padding: 5px 12px;
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: default;
}
.f31-badge:hover { transform: scale(1.05); box-shadow: 0 0 10px var(--badge-color, rgba(255,255,255,0.2)); }

.f31-badge-icon  { font-size: 16px; }
.f31-badge-label { font-size: 12px; font-weight: 600; color: var(--badge-color, var(--text1)); }

.f31-no-badges { font-size: 12px; color: var(--text3); }

/* ── F28 supplemental (tree inner wrapper + expand button) ── */
.f28-tree-inner { display: flex; flex-direction: column; }
.f28-conn-done  { /* color set via inline style in JS */ }
.f28-expand-btn { width: 100%; padding: 10px; }

/* ══════════════════════════════════════════════════════════════════
   F32 — LIGAS SEMANALES
══════════════════════════════════════════════════════════════════ */

.f32-wrap {
  background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: hidden;
}

.f32-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.f32-league-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 99px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.f32-badge-bronze  { background: rgba(180,104,56,0.25); color: #cd7f32; border: 1px solid rgba(205,127,50,0.4); }
.f32-badge-silver  { background: rgba(140,140,155,0.25); color: #c0c0c0; border: 1px solid rgba(192,192,192,0.4); }
.f32-badge-gold    { background: rgba(200,170,40,0.25); color: #ffd700; border: 1px solid rgba(255,215,0,0.4); }
.f32-badge-diamond { background: rgba(100,180,255,0.2); color: #a5f3fc; border: 1px solid rgba(165,243,252,0.4); }

.f32-header-info { flex: 1; }
.f32-header-title { font-size: 13px; font-weight: 700; color: var(--text1); }
.f32-header-sub   { font-size: 11px; color: var(--text3); margin-top: 2px; }

.f32-week-xp {
  text-align: right;
}
.f32-week-xp-val { font-size: 16px; font-weight: 800; color: var(--accent); }
.f32-week-xp-lab { font-size: 10px; color: var(--text3); }

.f32-rank-list { padding: 0 0 8px; }

.f32-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  transition: background 0.15s;
  position: relative;
}
.f32-row:hover { background: rgba(255,255,255,0.02); }

.f32-row-you {
  background: rgba(0,229,160,0.06);
  border-left: 3px solid var(--accent);
}
.f32-row-you:hover { background: rgba(0,229,160,0.09); }

.f32-row-promo { background: rgba(100,200,120,0.08); }
.f32-row-relegate { background: rgba(255,80,80,0.06); }

.f32-pos {
  width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  flex-shrink: 0;
}
.f32-pos-top { color: #fbbf24; }

.f32-av {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
}

.f32-name {
  flex: 1;
  font-size: 13px;
  color: var(--text1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.f32-name-you { font-weight: 700; color: var(--accent); }

.f32-xp-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  flex-shrink: 0;
}
.f32-xp-you { color: var(--accent); }

.f32-zone-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
}
.f32-zone-up   { background: rgba(100,220,120,0.2); color: #4ade80; }
.f32-zone-down { background: rgba(255,80,80,0.2);   color: #f87171; }

.f32-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 16px;
  font-size: 10px;
  color: var(--text3);
  letter-spacing: 0.06em;
}
.f32-divider::before,
.f32-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}

.f32-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.f32-footer-info { font-size: 11px; color: var(--text3); }
.f32-reset-label { font-size: 11px; color: var(--text3); }

.f32-warning {
  margin: 0 16px 10px;
  background: rgba(255,120,60,0.12);
  border: 1px solid rgba(255,120,60,0.3);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  color: #fb923c;
  line-height: 1.5;
}

/* Promotion animation */
@keyframes f32-league-up {
  0%   { transform: translateY(0) scale(1); opacity:1; }
  40%  { transform: translateY(-6px) scale(1.06); opacity:1; }
  100% { transform: translateY(0) scale(1); opacity:1; }
}
.f32-badge-promoted { animation: f32-league-up 0.6s ease; }

/* Diamond shimmer */
@keyframes f32-diamond-shimmer {
  0%,100% { box-shadow: 0 0 6px rgba(165,243,252,0.3); }
  50%      { box-shadow: 0 0 16px rgba(165,243,252,0.7); }
}
.f32-badge-diamond { animation: f32-diamond-shimmer 3s infinite; }

/* ══════════════════════════════════════════════════════════════════
   F33 — STREAK IDENTITY UPGRADE
   5 tiers visuales progresivos para el streak.
══════════════════════════════════════════════════════════════════ */

/* ── Nav pill: tier overrides ─────────────────────────────────── */

/* Tier 1 (7-29): glow naranja pulsante */
.nav-pill.streak.f33-t1 {
  border-color: rgba(255,107,53,0.5);
  box-shadow: 0 0 8px rgba(255,107,53,0.3);
  animation: f33-pulse-orange 2.5s ease-in-out infinite;
}
@keyframes f33-pulse-orange {
  0%,100% { box-shadow: 0 0 6px rgba(255,107,53,0.3); }
  50%      { box-shadow: 0 0 16px rgba(255,107,53,0.7); }
}

/* Tier 2 (30-59): glow dorado + corona en el número */
.nav-pill.streak.f33-t2 {
  border-color: rgba(251,191,36,0.6);
  background: rgba(251,191,36,0.08);
  animation: f33-pulse-gold 3s ease-in-out infinite;
}
@keyframes f33-pulse-gold {
  0%,100% { box-shadow: 0 0 8px rgba(251,191,36,0.35); }
  50%      { box-shadow: 0 0 20px rgba(251,191,36,0.75); }
}
.nav-pill.streak.f33-t2 .pv { color: #fbbf24; font-weight: 700; }

/* Tier 3 (60-99): aura multicolor animada */
.nav-pill.streak.f33-t3 {
  border-color: transparent;
  background: rgba(20,20,40,0.9);
  animation: f33-aura 3s linear infinite;
}
@keyframes f33-aura {
  0%   { box-shadow: 0 0 10px #ff6b35, 0 0 20px #a855f7; }
  33%  { box-shadow: 0 0 10px #a855f7, 0 0 20px #0091ff; }
  66%  { box-shadow: 0 0 10px #0091ff, 0 0 20px #00e5a0; }
  100% { box-shadow: 0 0 10px #ff6b35, 0 0 20px #a855f7; }
}
.nav-pill.streak.f33-t3 .pv { color: #c084fc; font-weight: 800; }

/* Tier 4 (100+): partículas permanentes + borde arco iris */
.nav-pill.streak.f33-t4 {
  position: relative;
  border-color: transparent;
  background: linear-gradient(rgba(10,10,25,0.95), rgba(10,10,25,0.95)) padding-box,
              linear-gradient(135deg, #ff6b35, #fbbf24, #00e5a0, #0091ff, #a855f7) border-box;
  border-width: 2px;
  animation: f33-legend-pulse 2s ease-in-out infinite;
}
@keyframes f33-legend-pulse {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.25) drop-shadow(0 0 8px rgba(251,191,36,0.6)); }
}
.nav-pill.streak.f33-t4 .pv { color: #ffd700; font-weight: 800; font-size: 13px; }

/* Partícula flotante en tier 4 */
.f33-particle {
  position: absolute;
  top: -4px; right: -4px;
  font-size: 10px;
  animation: f33-float-particle 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 10;
}
@keyframes f33-float-particle {
  0%,100% { transform: translateY(0) rotate(0deg); opacity:1; }
  50%      { transform: translateY(-6px) rotate(20deg); opacity:0.7; }
}

/* ── Ranking: streak tiers ────────────────────────────────────── */

.f33-rank-streak {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.f33-rsn {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}

.f33-rank-hot {
  color: #fb923c;
  text-shadow: 0 0 6px rgba(251,146,60,0.5);
}
.f33-rank-crown .f33-rsn { color: #fbbf24; font-weight: 800; }
.f33-rank-crown {
  text-shadow: 0 0 8px rgba(251,191,36,0.5);
}
.f33-rank-aura {
  background: linear-gradient(90deg, #ff6b35, #a855f7, #0091ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: f33-aura-shift 3s linear infinite;
  background-size: 200% auto;
}
@keyframes f33-aura-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.f33-rank-legend {
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255,215,0,0.8);
  animation: f33-legend-flicker 1.8s ease-in-out infinite;
}
@keyframes f33-legend-flicker {
  0%,100% { text-shadow: 0 0 8px rgba(255,215,0,0.7); }
  50%      { text-shadow: 0 0 18px rgba(255,215,0,1), 0 0 30px rgba(251,191,36,0.6); }
}

/* Filas especiales en el ranking */
.f33-row-aura {
  border-left: 2px solid transparent;
  background-image: linear-gradient(var(--surface), var(--surface)),
                    linear-gradient(135deg, #ff6b35, #a855f7, #0091ff);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.f33-row-legend {
  border-left: 3px solid #ffd700;
  background: rgba(255,215,0,0.04);
}

/* ── Earn Back Banner ─────────────────────────────────────────── */

.f33-earn-back {
  background: linear-gradient(135deg, rgba(251,146,60,0.15), rgba(239,68,68,0.1));
  border: 1.5px solid rgba(251,146,60,0.45);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  animation: f33-earn-back-pulse 2.5s ease-in-out infinite;
}
@keyframes f33-earn-back-pulse {
  0%,100% { border-color: rgba(251,146,60,0.45); }
  50%      { border-color: rgba(251,146,60,0.85); box-shadow: 0 0 16px rgba(251,146,60,0.25); }
}
.f33-earn-back-icon {
  font-size: 28px;
  flex-shrink: 0;
  animation: f33-icon-shake 0.6s ease-in-out infinite;
}
@keyframes f33-icon-shake {
  0%,100% { transform: rotate(-8deg); }
  50%      { transform: rotate(8deg); }
}
.f33-earn-back-body { flex: 1; }
.f33-earn-back-title {
  font-size: 13px;
  font-weight: 800;
  color: #fb923c;
  margin-bottom: 3px;
}
.f33-earn-back-sub {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.4;
}
.f33-earn-back-dots {
  display: flex;
  gap: 6px;
  margin-top: 7px;
}
.f33-dot {
  width: 28px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(251,146,60,0.3);
  transition: all 0.4s cubic-bezier(.34,1.56,.64,1);
}
.f33-dot.done {
  background: #fb923c;
  border-color: #fb923c;
  box-shadow: 0 0 8px rgba(251,146,60,0.6);
  transform: scaleY(1.3);
}
.f33-earn-back-timer {
  font-size: 10px;
  color: var(--text3);
  text-align: right;
  flex-shrink: 0;
  font-family: 'DM Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════════
   F34 — RETO DIARIO CON CUENTA ATRÁS
   FOMO temporal: recompensas que expiran crean apertura diaria.
══════════════════════════════════════════════════════════════════ */

.f34-wrap {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

/* Estado activo — reto disponible */
.f34-active {
  background: linear-gradient(135deg, rgba(0,145,255,0.08), rgba(168,85,247,0.06));
  border: 1.5px solid rgba(0,145,255,0.3);
}

/* Estado completado */
.f34-done {
  background: rgba(0,229,160,0.06);
  border: 1.5px solid rgba(0,229,160,0.25);
}

/* Estado expirado */
.f34-expired {
  background: rgba(255,255,255,0.02);
  border: 1.5px solid rgba(255,255,255,0.06);
  opacity: 0.55;
}

.f34-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}

.f34-tag {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}
.f34-tag-active  { background: rgba(0,145,255,0.2); color: #60a5fa; border: 1px solid rgba(96,165,250,0.35); }
.f34-tag-done    { background: rgba(0,229,160,0.15); color: var(--accent); border: 1px solid rgba(0,229,160,0.3); }
.f34-tag-expired { background: rgba(255,255,255,0.06); color: var(--text3); border: 1px solid rgba(255,255,255,0.1); }

.f34-header-body { flex: 1; }
.f34-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 2px;
}
.f34-header-sub {
  font-size: 11px;
  color: var(--text3);
}

.f34-countdown-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 5px 10px;
  flex-shrink: 0;
  min-width: 52px;
}
.f34-countdown-val {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--text1);
  line-height: 1.1;
}
.f34-countdown-lab {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 0.04em;
}
.f34-countdown-urgent .f34-countdown-val {
  color: #f87171;
  animation: f34-urgency 1s ease-in-out infinite;
}
@keyframes f34-urgency {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.f34-body {
  padding: 0 16px 14px;
}

.f34-desc {
  font-size: 13px;
  color: var(--text2);
  margin-bottom: 12px;
  line-height: 1.5;
}

/* Barra de progreso */
.f34-progress-wrap { margin-bottom: 10px; }
.f34-progress-bar {
  height: 8px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 5px;
}
.f34-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #0091ff, #a855f7);
  transition: width 0.5s cubic-bezier(.34,1.56,.64,1);
}
.f34-progress-done .f34-progress-fill {
  background: linear-gradient(90deg, var(--accent), #0091ff);
}
.f34-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text3);
}
.f34-progress-label span:last-child { color: var(--text1); font-weight: 700; }

/* Premio badge */
.f34-reward-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,215,0,0.07);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.f34-reward-icon { font-size: 18px; }
.f34-reward-text { font-size: 12px; color: var(--text2); flex: 1; }
.f34-reward-xp   { font-size: 14px; font-weight: 800; color: #fbbf24; font-family: 'DM Mono', monospace; }

/* Botón reclamar */
.f34-claim-btn {
  width: 100%;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #0091ff, #a855f7);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.f34-claim-btn:hover  { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,145,255,0.4); }
.f34-claim-btn:active { transform: translateY(0); }

/* Estado completado sin reclamar: pulsa */
.f34-claim-btn.f34-pulse-cta {
  animation: f34-cta-pulse 1.8s ease-in-out infinite;
}
@keyframes f34-cta-pulse {
  0%,100% { box-shadow: 0 0 8px rgba(0,229,160,0.4); }
  50%      { box-shadow: 0 0 20px rgba(0,229,160,0.8); }
}

/* Estado claimed/done */
.f34-claimed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,229,160,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}

/* Animación de expiración */
.f34-expire-anim {
  animation: f34-fade-out 0.8s ease forwards;
}
@keyframes f34-fade-out {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 0.3; transform: scale(0.97); }
  100% { opacity: 0.5; transform: scale(0.97); }
}

/* Badge de tipo de reto */
.f34-type-icon {
  font-size: 28px;
  flex-shrink: 0;
}

/* Shimmer en el widget activo */
.f34-active::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
  animation: f34-shimmer 4s ease infinite;
  pointer-events: none;
}
@keyframes f34-shimmer {
  0%   { left: -100%; }
  60%,100% { left: 150%; }
}

/* ══════════════════════════════════════════════════════════════════
   COACH — Plan semanal personalizado
══════════════════════════════════════════════════════════════════ */
.coach-plan-wrap{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.coach-plan-row{display:flex;align-items:flex-start;gap:10px;background:rgba(0,229,160,.06);border:1px solid rgba(0,229,160,.12);border-radius:10px;padding:10px 12px}
.coach-plan-num{min-width:22px;height:22px;border-radius:50%;background:var(--accent);color:#000;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.coach-plan-text{font-size:13px;color:var(--text1);line-height:1.45;flex:1}
body.light-mode .coach-plan-row{background:rgba(0,180,120,.06);border-color:rgba(0,180,120,.15)}

/* ══════════════════════════════════════════════════════════════════
   F41 — STREAK SHIELD UI
══════════════════════════════════════════════════════════════════ */
.shield-icon { font-size: 1.2rem; cursor: pointer; position: relative; display: inline-flex; align-items: center; }
.shield-active { filter: drop-shadow(0 0 6px #ffd700); }
.shield-empty  { opacity: .4; }
.shield-count  { position: absolute; top: -4px; right: -6px; background: #ffd700; color: #000; border-radius: 50%; font-size: .6rem; font-weight: 700; padding: 1px 4px; }

/* ══════════════════════════════════════════════════════════════════
   F42 — PROBLEMA DEL DÍA
══════════════════════════════════════════════════════════════════ */
#f42-daily-problem { margin: 12px 0; }
.f42-card { border-radius: 16px; padding: 16px; background: var(--bg2); border: 1px solid var(--border); }
.f42-card.f42-active  { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(129,140,248,.25); }
.f42-card.f42-solved  { border-color: #00e5a0; box-shadow: 0 0 0 2px rgba(0,229,160,.15); }
.f42-header-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.f42-icon  { font-size: 1.4rem; }
.f42-title { font-weight: 700; flex: 1; font-size: .95rem; }
.f42-badge { font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 99px; }
.f42-badge-active { background: rgba(239,68,68,.15); color: #ef4444; }
.f42-badge-done   { background: rgba(0,229,160,.15);  color: #00e5a0; }
.f42-question { font-size: .9rem; font-weight: 600; margin-bottom: 10px; line-height: 1.4; }
.f42-opts { display: flex; flex-direction: column; gap: 6px; }
.f42-opt  { background: var(--bg3,#1e2035); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; text-align: left; font-size: .82rem; cursor: pointer; color: var(--text1); transition: border-color .15s, background .15s; }
.f42-opt:hover:not(:disabled) { border-color: var(--accent); background: rgba(129,140,248,.12); }
.f42-opt:disabled { opacity: .45; }
.f42-fb { margin-top: 8px; }
.f42-fb-ok  { background: rgba(0,229,160,.12); border: 1px solid #00e5a0; border-radius: 10px; padding: 8px 12px; font-size: .82rem; color: #00e5a0; }
.f42-fb-bad { background: rgba(239,68,68,.1);   border: 1px solid #ef4444; border-radius: 10px; padding: 8px 12px; font-size: .82rem; color: #ef4444; }
.f42-meta { font-size: .72rem; color: var(--text3); margin-top: 8px; }
.f42-emoji-grid { font-size: 1.6rem; letter-spacing: 4px; margin: 8px 0; text-align: center; }
.f42-share-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.f42-share-btn { background: var(--accent); color: #fff; border: none; border-radius: 10px; padding: 7px 14px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.f42-countdown { font-size: .72rem; color: var(--text3); }
body.light-mode .f42-opt { background: #f1f5f9; }

/* ══════════════════════════════════════════════════════════════════
   F43 — OFFLINE EARNINGS MODAL
══════════════════════════════════════════════════════════════════ */
.f43-modal { text-align: center; }
.f43-coins-anim { font-size: 2.5rem; animation: f43-bounce .6s infinite alternate; margin-bottom: 8px; }
@keyframes f43-bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.f43-title  { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; }
.f43-sub    { font-size: .88rem; color: var(--text2); margin-bottom: 12px; }
.f43-amount { font-size: 2.4rem; font-weight: 900; color: #00e5a0; margin: 12px 0; }
.f43-note   { font-size: .75rem; color: var(--text3); margin-bottom: 16px; }
.f43-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.f43-icon { font-size: 2rem; margin-bottom: 8px; }
.f43-tip  { font-size: .82rem; color: var(--text2); margin: 8px 0 16px; }

/* ══════════════════════════════════════════════════════════════════
   F44 — COFRES CON PITY
══════════════════════════════════════════════════════════════════ */
.f44-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin: 10px 0; }
.f44-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.f44-title  { font-weight: 700; font-size: .9rem; }
.f44-pity-mini { font-size: .72rem; color: var(--text3); background: var(--bg3,#1e2035); border-radius: 99px; padding: 3px 9px; }
.f44-list { display: flex; gap: 10px; flex-wrap: wrap; }
.f44-chest-btn { border: none; border-radius: 14px; padding: 10px 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; font-weight: 700; transition: transform .15s; }
.f44-chest-btn:active { transform: scale(.95); }
.f44-chest-bronze { background: linear-gradient(135deg,#cd7f32,#a0522d); color: #fff; }
.f44-chest-silver { background: linear-gradient(135deg,#c0c0c0,#808080); color: #fff; }
.f44-chest-gold   { background: linear-gradient(135deg,#ffd700,#ffa500); color: #000; }
.f44-chest-legendary { background: linear-gradient(135deg,#a855f7,#7c3aed); color: #fff; box-shadow: 0 0 12px rgba(168,85,247,.5); }
.f44-chest-btn-icon { font-size: 1.8rem; }
.f44-pulse { animation: f44-pulse 1.8s infinite; }
@keyframes f44-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(129,140,248,0); } 50% { box-shadow: 0 0 0 6px rgba(129,140,248,.3); } }

/* Chest open modal */
.f44-modal { text-align: center; }
.f44-chest-anim { width: 80px; height: 80px; border-radius: 50%; background: var(--chest-color,#888); margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; box-shadow: 0 0 24px var(--chest-color,#888); animation: f44-open .4s ease; position: relative; }
@keyframes f44-open { from { transform: scale(.5) rotate(-15deg); } to { transform: scale(1) rotate(0); } }
.f44-particles { position: absolute; width: 100%; height: 100%; }
.f44-particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--chest-color,#ffd700); animation: f44-explode 1s forwards; }
.f44-particle:nth-child(odd)   { background: #fff; }
.f44-particle:nth-child(1)  { top: 20%; left: 80%; animation-delay: .0s; }
.f44-particle:nth-child(2)  { top: 80%; left: 20%; animation-delay: .1s; }
.f44-particle:nth-child(3)  { top: 10%; left: 50%; animation-delay: .05s; }
.f44-particle:nth-child(4)  { top: 50%; left: 90%; animation-delay: .15s; }
.f44-particle:nth-child(5)  { top: 90%; left: 60%; animation-delay: .0s; }
.f44-particle:nth-child(6)  { top: 40%; left: 10%; animation-delay: .1s; }
.f44-particle:nth-child(7)  { top: 70%; left: 80%; animation-delay: .05s; }
.f44-particle:nth-child(8)  { top: 30%; left: 30%; animation-delay: .15s; }
.f44-particle:nth-child(9)  { top: 60%; left: 50%; animation-delay: .0s; }
.f44-particle:nth-child(10) { top: 20%; left: 70%; animation-delay: .1s; }
.f44-particle:nth-child(11) { top: 80%; left: 40%; animation-delay: .05s; }
.f44-particle:nth-child(12) { top: 50%; left: 20%; animation-delay: .15s; }
@keyframes f44-explode { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(calc((var(--dx,1))*40px), calc((var(--dy,1))*40px)) scale(0); opacity: 0; } }
.f44-reward-icon  { font-size: 2rem; margin: 8px 0 4px; }
.f44-reward-label { font-size: 1.1rem; font-weight: 800; color: var(--accent); margin-bottom: 12px; }
.f44-pity-bar { margin: 12px 0; }
.f44-pity-label { font-size: .74rem; color: var(--text2); margin-bottom: 4px; }
.f44-pity-track { height: 6px; background: var(--bg3,#1e2035); border-radius: 99px; overflow: hidden; }
.f44-pity-fill  { height: 100%; background: linear-gradient(90deg,#a855f7,#7c3aed); border-radius: 99px; transition: width .5s; }

/* ══════════════════════════════════════════════════════════════════
   F45 — MARKET EVENT BANNER
══════════════════════════════════════════════════════════════════ */
#f45-market-banner {
  position: fixed;
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: 8px;
  right: 8px;
  z-index: 1200;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.f45-banner { padding: 12px 16px; color: #fff; }
.f45-banner-boom   { background: linear-gradient(135deg,#065f46,#059669); }
.f45-banner-crash  { background: linear-gradient(135deg,#7f1d1d,#dc2626); }
.f45-banner-sector { background: linear-gradient(135deg,#1e3a5f,#2563eb); }
.f45-banner-result { background: var(--bg2); color: var(--text1); border-bottom: 1px solid var(--border); }
.f45-slide-in { animation: f45-slide .35s ease; }
@keyframes f45-slide { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.f45-banner-inner { max-width: 640px; margin: 0 auto; }
.f45-headline  { font-size: .95rem; font-weight: 800; margin-bottom: 6px; }
.f45-impact-row { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; margin-bottom: 8px; }
.f45-impact-pct { font-weight: 700; }
.f45-impact-eur { font-size: .75rem; opacity: .85; }
.f45-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.f45-btn { border: none; border-radius: 10px; padding: 7px 13px; font-size: .78rem; font-weight: 700; cursor: pointer; color: #fff; }
.f45-hold { background: rgba(255,255,255,.25); }
.f45-sell { background: rgba(239,68,68,.8); }
.f45-buy  { background: rgba(0,229,160,.8); color: #000; }
.f45-decision-msg  { font-size: .9rem; font-weight: 700; margin-bottom: 8px; }
.f45-edu-box       { font-size: .78rem; background: rgba(129,140,248,.1); border-left: 3px solid var(--accent); padding: 8px; border-radius: 0 8px 8px 0; margin-bottom: 8px; }
.f45-xp-gained     { font-size: .8rem; color: var(--accent); font-weight: 700; }
.f45-close-btn     { margin-top: 8px; font-size: .78rem; }

/* ══════════════════════════════════════════════════════════════════
   F46 — HEARTS SYSTEM
══════════════════════════════════════════════════════════════════ */
#f46-hearts-row { display: flex; align-items: center; gap: 4px; padding: 6px 12px; background: var(--bg2); border-radius: 99px; width: fit-content; margin: 8px auto; }
.f46-heart       { font-size: 1.1rem; transition: transform .15s; }
.f46-heart-empty { filter: grayscale(1) opacity(.35); }
.f46-regen-label { font-size: .68rem; color: var(--text3); margin-left: 6px; }
.f46-danger .f46-heart { animation: f46-pulse .8s infinite; }
@keyframes f46-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.f46-modal { text-align: center; }
.f46-no-hearts-icon { font-size: 3rem; margin-bottom: 8px; }
.f46-title  { font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.f46-sub    { font-size: .85rem; color: var(--text2); margin-bottom: 12px; }
.f46-regen-info { background: var(--bg3,#1e2035); border-radius: 10px; padding: 10px; font-size: .82rem; color: var(--text2); margin-bottom: 14px; }
.f46-options { display: flex; flex-direction: column; gap: 8px; }

/* ══════════════════════════════════════════════════════════════════
   F47 — DILEMAS
══════════════════════════════════════════════════════════════════ */
.f47-modal { max-width: 480px; }
.f47-badge { font-size: .72rem; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.f47-question { font-size: 1rem; font-weight: 700; line-height: 1.5; margin-bottom: 10px; }
.f47-context  { font-size: .8rem; color: var(--text2); background: var(--bg3,#1e2035); border-radius: 10px; padding: 10px; margin-bottom: 14px; line-height: 1.4; }
.f47-choices  { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.f47-choice   { padding: 12px 16px; border-radius: 12px; border: 2px solid var(--border); background: var(--bg2); cursor: pointer; text-align: left; font-size: .85rem; font-weight: 600; color: var(--text1); transition: border-color .15s, background .15s; }
.f47-choice:hover { border-color: var(--accent); background: rgba(129,140,248,.12); }
.f47-choice-a:hover { border-color: #00e5a0; background: rgba(0,229,160,.1); }
.f47-choice-b:hover { border-color: #818cf8; background: rgba(129,140,248,.1); }
.f47-skip     { text-align: center; }
.f47-chosen   { font-size: .88rem; color: #00e5a0; font-weight: 700; margin: 8px 0; }
.f47-comparison { background: var(--bg3,#1e2035); border-radius: 12px; padding: 12px; margin: 12px 0; }
.f47-comparison-title { font-size: .75rem; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.f47-comparison-other    { font-size: .82rem; color: var(--text2); font-weight: 600; margin-bottom: 8px; }
.f47-comparison-analysis { font-size: .8rem; color: var(--text2); line-height: 1.5; }
.f47-xp-gained { font-size: .9rem; font-weight: 800; color: var(--accent); text-align: center; margin: 10px 0; }

/* ══════════════════════════════════════════════════════════════════
   F48 — RESUMEN SEMANAL (Wrapped-style)
══════════════════════════════════════════════════════════════════ */
.f48-modal { background: linear-gradient(160deg,#1a1040,#0f1924) !important; border: 1px solid #7c3aed; max-width: 420px; text-align: center; }
.f48-header { margin-bottom: 16px; }
.f48-week-label { font-size: 1.1rem; font-weight: 800; }
.f48-week-dates { font-size: .75rem; color: var(--text3); }
.f48-big-xp { margin: 16px 0; }
.f48-xp-num   { font-size: 3rem; font-weight: 900; background: linear-gradient(135deg,#a855f7,#818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.f48-xp-label { font-size: .8rem; color: var(--text3); }
.f48-highlights { display: flex; gap: 10px; justify-content: center; margin: 16px 0; }
.f48-hi-card { background: rgba(255,255,255,.07); border-radius: 14px; padding: 12px 16px; flex: 1; }
.f48-hi-icon { font-size: 1.4rem; }
.f48-hi-val  { font-size: 1.1rem; font-weight: 800; color: #e2e8f0; margin: 4px 0; }
.f48-hi-lab  { font-size: .7rem; color: var(--text3); }
.f48-coach-msg { font-size: .85rem; color: #c4b5fd; font-style: italic; background: rgba(168,85,247,.12); border-radius: 10px; padding: 10px; margin: 12px 0; line-height: 1.5; }
.f48-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
body.light-mode .f48-modal { background: linear-gradient(160deg,#f0e6ff,#e6f0ff) !important; }
body.light-mode .f48-hi-card { background: rgba(0,0,0,.07); }
body.light-mode .f48-xp-num { background: linear-gradient(135deg,#7c3aed,#4f46e5); -webkit-background-clip: text; background-clip: text; }

/* ══════════════════════════════════════════════════════════════════
   M1 — DOBLE XP BANNER
══════════════════════════════════════════════════════════════════ */
.m1-banner { background: linear-gradient(135deg,#d97706,#f59e0b,#fbbf24); color: #000; font-weight: 800; text-align: center; padding: 8px 16px; font-size: .85rem; animation: m1-pulse 2s infinite; border-radius: 0 0 12px 12px; }
@keyframes m1-pulse { 0%,100% { box-shadow: 0 2px 12px rgba(251,191,36,.4); } 50% { box-shadow: 0 2px 24px rgba(251,191,36,.8); } }

/* ══════════════════════════════════════════════════════════════════
   M3 — FRIEND STREAK
══════════════════════════════════════════════════════════════════ */
.m3-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 12px; margin: 8px 0; }
.m3-code-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.m3-label { font-size: .75rem; color: var(--text3); }
.m3-code  { font-size: 1.1rem; letter-spacing: 3px; color: var(--accent); font-family: monospace; }
.m3-copy-btn { background: none; border: none; cursor: pointer; font-size: 1rem; }
.m3-streak-row { font-size: .85rem; color: var(--text2); }
.m3-add-row { display: flex; gap: 8px; }
.m3-input { flex: 1; background: var(--bg3,#1e2035); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: .85rem; color: var(--text1); font-family: monospace; text-transform: uppercase; letter-spacing: 2px; }
.m3-add-btn { white-space: nowrap; font-size: .8rem; padding: 7px 14px; }


/* ══════════════════════════════════════════════════════════════════
   MÓDULOS POR RAMA — Branch tabs + lock hint
══════════════════════════════════════════════════════════════════ */
.mod-branch-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 4px;
}
.mod-branch-tabs::-webkit-scrollbar { display: none; }

.mbt-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, transform .1s;
  flex-shrink: 0;
}
.mbt-tab:active { transform: scale(.96); }
.mbt-active {
  background: rgba(0,229,160,.07);
  font-weight: 700;
}
.mbt-emoji { font-size: 1.1rem; }
.mbt-label { font-size: .7rem; font-weight: 600; color: var(--text2); }
.mbt-active .mbt-label { color: inherit; }
.mbt-prog  { font-size: .6rem; color: var(--text3); background: var(--bg3,#1e2035); border-radius: 99px; padding: 1px 5px; }

/* Lock msg en card */
.mod-lock-msg {
  font-size: .7rem;
  color: var(--text3);
  margin-top: 4px;
  font-style: italic;
}
.mod-lock-hint { font-size: .8rem; margin-left: auto; }

/* Branch color ring */
.mod-card[style*="--branch-color"] .mod-ring-fg { stroke: var(--branch-color) !important; }

/* Light mode tabs */
body.light-mode .mbt-tab { background: rgba(255,252,245,.8); }
body.light-mode .mbt-active { background: rgba(10,112,80,.08); }
body.light-mode .mbt-prog { background: rgba(50,40,20,.08); }

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — Correcciones completas
══════════════════════════════════════════════════════════════════ */

/* Variables que faltaban */
body.light-mode {
  --text:    #1a1e30;
  --bg3:     #d8d2c5;
  --glass-bg: rgba(255,252,245,.6);
  --glass-border: rgba(50,40,20,.12);
  --gain:    #0a7050;
  --loss:    #922020;
  --success: #0a7050;
  --danger:  #922020;
  --gold:    #b06020;
  --glow-green: rgba(10,112,80,.15);
  --glow-blue:  rgba(69,53,160,.15);
}

/* Hero card / patrimony card */
body.light-mode .hero-card,
body.light-mode .patrimony-card,
body.light-mode .fin-profile-card,
body.light-mode .health-card,
body.light-mode .progress-card,
body.light-mode .temporal-card,
body.light-mode .identity-card,
body.light-mode .rank-card,
body.light-mode .missions-card,
body.light-mode .action-plan-card,
body.light-mode .f27-card,
body.light-mode .f28-wrap,
body.light-mode .f29-wrap,
body.light-mode .f30-wrap,
body.light-mode .f32-wrap,
body.light-mode .f34-wrap {
  background: rgba(255,252,245,.92) !important;
  border-color: var(--border2) !important;
}

/* Módulos */
body.light-mode .mod-card {
  background: rgba(255,252,245,.95) !important;
  border-color: var(--border) !important;
}
body.light-mode .mod-card.done {
  background: rgba(10,112,80,.06) !important;
  border-color: rgba(10,112,80,.25) !important;
}
body.light-mode .mod-card.mod-locked {
  background: rgba(50,40,20,.05) !important;
  opacity: .65 !important;
}
body.light-mode .mod-title { color: var(--text1) !important; }
body.light-mode .mod-desc  { color: var(--text2) !important; }
body.light-mode .mod-xp    { color: var(--accent) !important; }
body.light-mode .mod-users { color: var(--text3) !important; }
body.light-mode .mod-ring-bg { stroke: rgba(50,40,20,.12) !important; }
body.light-mode .mod-done-chip { background: rgba(10,112,80,.15) !important; color: var(--accent) !important; }

/* Lesson / quiz */
body.light-mode .lesson-screen,
body.light-mode .lesson-body-wrap { background: var(--bg) !important; }
body.light-mode .step-card  { background: rgba(255,252,245,.98) !important; color: var(--text1) !important; }
body.light-mode .hl-box     { background: rgba(10,112,80,.07) !important; border-color: rgba(10,112,80,.2) !important; }
body.light-mode .hl-box *   { color: var(--text1) !important; }
body.light-mode .quiz-opt   { background: rgba(255,252,245,.95) !important; color: var(--text1) !important; }
body.light-mode .quiz-opt.correct { background: rgba(10,112,80,.12) !important; border-color: var(--accent) !important; }
body.light-mode .quiz-opt.wrong   { background: rgba(146,32,32,.08) !important; border-color: var(--danger) !important; }
body.light-mode .quiz-fb-inner.ok  { background: rgba(10,112,80,.1) !important; color: var(--accent) !important; }
body.light-mode .quiz-fb-inner.bad { background: rgba(146,32,32,.08) !important; color: var(--danger) !important; }
body.light-mode .lesson-next-btn   { background: var(--accent) !important; color: #fff !important; }
body.light-mode .lesson-nav        { background: rgba(240,235,224,.97) !important; border-top-color: var(--border2) !important; }

/* Navigation pills */
body.light-mode .nav-pill { background: rgba(50,40,20,.08) !important; color: var(--text1) !important; }
body.light-mode .nav-pill.streak { background: rgba(176,96,32,.1) !important; color: var(--accent3) !important; }

/* Portfolio / stocks */
body.light-mode .stock-row,
body.light-mode .stock-card   { background: rgba(255,252,245,.9) !important; border-color: var(--border) !important; }
body.light-mode .stock-name   { color: var(--text1) !important; }
body.light-mode .stock-ticker { color: var(--text2) !important; }
body.light-mode .price-up   { color: var(--gain) !important; }
body.light-mode .price-down { color: var(--loss) !important; }
body.light-mode .portfolio-header { background: rgba(255,252,245,.95) !important; }

/* Charts */
body.light-mode .chart-wrap { background: rgba(255,252,245,.9) !important; border-color: var(--border) !important; }

/* Skill tree F28 */
body.light-mode .f28-branch        { background: rgba(255,252,245,.9) !important; border-color: var(--border) !important; }
body.light-mode .f28-branch-name   { color: var(--text1) !important; }
body.light-mode .f28-node          { background: rgba(50,40,20,.06) !important; border-color: var(--border) !important; }
body.light-mode .f28-node.f28-done { background: rgba(10,112,80,.1) !important; }
body.light-mode .f28-node.f28-locked { opacity: .5 !important; }
body.light-mode .f28-node-title    { color: var(--text2) !important; }

/* F32 ligas */
body.light-mode .f32-wrap   { background: rgba(255,252,245,.92) !important; border-color: var(--border2) !important; }
body.light-mode .f32-rival  { background: rgba(50,40,20,.05) !important; }
body.light-mode .f32-rival-name { color: var(--text1) !important; }

/* F34 reto diario */
body.light-mode .f34-wrap   { background: rgba(255,252,245,.95) !important; border-color: var(--border2) !important; }
body.light-mode .f34-desc   { color: var(--text1) !important; }
body.light-mode .f34-progress-bar { background: rgba(50,40,20,.1) !important; }
body.light-mode .f34-claim-btn    { background: var(--accent) !important; color: #fff !important; }

/* F42 problema del día */
body.light-mode .f42-card   { background: rgba(255,252,245,.95) !important; }
body.light-mode .f42-opt    { background: rgba(255,252,245,.98) !important; border-color: var(--border) !important; color: var(--text1) !important; }
body.light-mode .f42-opt:hover:not(:disabled) { background: rgba(10,112,80,.08) !important; border-color: var(--accent) !important; }

/* F44 cofres */
body.light-mode .f44-wrap   { background: rgba(255,252,245,.92) !important; border-color: var(--border2) !important; }
body.light-mode .f44-pity-track { background: rgba(50,40,20,.1) !important; }

/* F46 hearts */
body.light-mode #f46-hearts-row { background: rgba(255,252,245,.9) !important; }

/* F47 dilemas */
body.light-mode .f47-modal  { background: rgba(244,239,228,.99) !important; }
body.light-mode .f47-context { background: rgba(50,40,20,.06) !important; color: var(--text2) !important; }
body.light-mode .f47-choice  { background: rgba(255,252,245,.95) !important; border-color: var(--border) !important; color: var(--text1) !important; }
body.light-mode .f47-comparison { background: rgba(50,40,20,.06) !important; }

/* F48 resumen semanal */
body.light-mode .f48-modal  { background: linear-gradient(160deg,#f0e6ff,#e6f0ff) !important; }
body.light-mode .f48-hi-card { background: rgba(50,40,20,.06) !important; }
body.light-mode .f48-hi-val  { color: var(--text1) !important; }
body.light-mode .f48-coach-msg { background: rgba(10,112,80,.07) !important; color: var(--text2) !important; }

/* Welcome back modal */
body.light-mode .wb-modal   { background: rgba(244,239,228,.99) !important; }
body.light-mode .wb-title   { color: var(--text1) !important; }
body.light-mode .wb-income-row { color: var(--text2) !important; }

/* Toast */
body.light-mode .toast        { background: rgba(255,252,245,.98) !important; border-color: var(--border2) !important; box-shadow: 0 4px 20px rgba(50,40,20,.15) !important; }
body.light-mode .toast .toast-t { color: var(--text1) !important; }
body.light-mode .toast .toast-b { color: var(--text2) !important; }

/* Splash / onboarding */
body.light-mode .ob-card, body.light-mode .ob-step { background: rgba(255,252,245,.98) !important; }
body.light-mode .ob-title { color: var(--text1) !important; }
body.light-mode .ob-desc  { color: var(--text2) !important; }

/* Tags */
body.light-mode .tag      { opacity: .85; }
body.light-mode .mod-tag-pill { filter: brightness(.9) saturate(.8); }

/* Rankings */
body.light-mode .rank-row   { background: rgba(255,252,245,.9) !important; border-color: var(--border) !important; }
body.light-mode .rank-name  { color: var(--text1) !important; }
body.light-mode .rank-xp    { color: var(--text2) !important; }

/* XP pop */
body.light-mode .xp-pop, body.light-mode .money-pop { color: var(--accent) !important; text-shadow: 0 2px 8px rgba(10,112,80,.3) !important; }

/* Splashscreen */
body.light-mode #splash { background: var(--bg) !important; }
body.light-mode .splash-logo { color: var(--accent) !important; }

/* Badges */
body.light-mode .badge-card { background: rgba(255,252,245,.9) !important; border-color: var(--border) !important; }

/* Profile screen */
body.light-mode .prof-card { background: rgba(255,252,245,.95) !important; border-color: var(--border) !important; }
body.light-mode .prof-label { color: var(--text3) !important; }
body.light-mode .prof-val   { color: var(--text1) !important; }

/* Market event banner */
body.light-mode .f45-banner-result { background: rgba(255,252,245,.98) !important; border-color: var(--border2) !important; }
body.light-mode .f45-edu-box       { background: rgba(10,112,80,.07) !important; }

/* Selector / dropdown */
body.light-mode select option { background: var(--bg2) !important; color: var(--text1) !important; }

/* Scrollbar */
body.light-mode ::-webkit-scrollbar-track { background: var(--bg2); }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(50,40,20,.2); }


/* ══════════════════════════════════════════════════════════════════
   FINAI SETTINGS MODAL
══════════════════════════════════════════════════════════════════ */
.coach-settings-btn {
  background: none; border: none; font-size: 1.2rem;
  cursor: pointer; padding: 4px; border-radius: 8px;
  transition: background .15s; flex-shrink: 0;
}
.coach-settings-btn:hover { background: rgba(255,255,255,.1); }

.coach-settings-box {
  max-width: 380px;
  width: 100%;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cs-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-icon { font-size: 2rem; }
.cs-title { font-size: 1.05rem; font-weight: 700; color: var(--text1,#edf2fa); }
.cs-sub   { font-size: .78rem; color: var(--text2); margin-top: 2px; }

.cs-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cs-provider-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-prov-btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg2);
  color: var(--text1,#edf2fa);
  font-size: .85rem;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s;
}
.cs-prov-btn:hover { background: var(--surface); }
.cs-prov-active {
  border-color: var(--accent) !important;
  background: rgba(0,229,160,.07) !important;
  font-weight: 600;
}

.cs-field { display: flex; flex-direction: column; }
.cs-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background: var(--bg2);
  color: var(--text1,#edf2fa);
  font-size: .9rem;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.cs-input:focus { border-color: var(--accent); }
.cs-key-hint {
  font-size: .7rem;
  color: var(--text3);
  margin-top: 5px;
}
.cs-link {
  font-size: .82rem;
  color: var(--accent2);
  text-decoration: none;
  font-weight: 600;
}
.cs-link:hover { text-decoration: underline; }
.cs-cost-note {
  font-size: .75rem;
  color: var(--text2);
  background: var(--glass-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.5;
}
.cs-actions {
  display: flex;
  gap: 8px;
}
.cs-actions .btn { flex: 1; }

/* light mode */
body.light-mode .coach-settings-box { background: rgba(244,239,228,.99) !important; }
body.light-mode .cs-prov-btn { background: rgba(255,252,245,.9); color: var(--text1); }
body.light-mode .cs-input { background: rgba(255,252,245,.98); color: var(--text1); }
body.light-mode .cs-title { color: var(--text1) !important; }
body.light-mode .coach-settings-btn:hover { background: rgba(50,40,20,.1); }

/* ══════════════════════════════════════════════════════════════════
   PRIORIDAD 1 — HERRAMIENTAS REALES
══════════════════════════════════════════════════════════════════ */

/* ─── Tools Screen ─── */
#s-tools {
  padding: 0 0 80px 0;
  overflow-y: auto;
}
.tools-header {
  padding: 24px 20px 12px;
  background: linear-gradient(135deg, rgba(108,99,255,.15) 0%, rgba(245,166,35,.08) 100%);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.tools-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.tools-subtitle { font-size: 13px; color: var(--text2); margin: 0; }
.tools-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0;
}
.tool-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(245,166,35,.03) 0%, rgba(0,0,0,0) 100%);
  border: none;
  border-bottom: 1px solid rgba(245,166,35,.1);
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all .2s;
}
.tool-card:hover, .tool-card:active {
  background: linear-gradient(135deg, rgba(245,166,35,.12) 0%, rgba(245,166,35,.04) 100%);
  transform: translateX(2px);
}
.tool-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(245,166,35,.18), rgba(245,166,35,.06));
  border-radius: 12px;
  border: 1px solid rgba(245,166,35,.2);
}
.tool-info { flex: 1; }
.tool-name {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #f5a623;
  letter-spacing: .01em;
}
.tool-desc { font-size: 12px; color: var(--text2); margin-top: 3px; }
.tool-arrow { font-size: 18px; color: #f5a623; opacity: .7; }

/* ─── Tool Modal Overlay ─── */
.tool-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(6,8,16,0.96);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tool-modal-overlay.active { display: block; }
.tool-modal-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 40px;
}
.tool-modal-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  background: var(--bg1);
  z-index: 10;
}
.tool-modal-head h3 { font-size: 17px; font-weight: 700; margin: 0; }
.tool-back {
  background: rgba(255,255,255,.07);
  border: none;
  color: var(--text1);
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.tool-body { padding: 16px 20px; }
.tool-section { margin-bottom: 14px; }
.tool-label {
  display: block;
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 6px;
  font-weight: 500;
}
.tool-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text1);
  font-size: 15px;
  box-sizing: border-box;
}
.tool-input:focus { outline: none; border-color: var(--accent); }
.tool-select {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text1);
  font-size: 14px;
}
.tool-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.tool-range-val {
  display: block;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 4px;
  text-align: right;
}
.tool-result {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 16px;
  margin-top: 16px;
}
.tool-result.hidden { display: none; }
.tool-disclaimer {
  font-size: 11px;
  color: var(--text3);
  margin-top: 12px;
  line-height: 1.4;
}
.tool-calc-btn { width: 100%; margin-top: 16px; }

.screen#s-lesson.active {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
#s-lesson .lesson-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
#s-lesson .lesson-inner {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

.ob-time-btn {
  background: linear-gradient(135deg, rgba(245,166,35,.08), rgba(245,166,35,.02));
  border: 1px solid rgba(245,166,35,.2);
  color: var(--text1);
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
}
.ob-time-btn:hover, .ob-time-btn:active {
  background: linear-gradient(135deg, rgba(245,166,35,.18), rgba(245,166,35,.08));
  transform: translateX(3px);
  border-color: #f5a623;
}
.ob-time-btn.selected {
  background: linear-gradient(135deg, #f5a623, #f5c842);
  color: #0a0c14;
  border-color: #f5a623;
}

.lesson-footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: rgba(6,8,16,.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(245,166,35,.12);
  z-index: 100;
  margin-top: auto;
}
body.light-mode .lesson-footer {
  background: rgba(255,252,245,.98) !important;
  border-top-color: rgba(183,124,0,.2) !important;
}
.lf-prog-wrap { margin-bottom: 12px; }
.lf-prog-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  letter-spacing: .02em;
}
.lf-step-lbl strong { color: var(--text1); font-family: 'DM Mono', monospace; }
.lf-xp strong { color: #f5a623; font-family: 'DM Mono', monospace; }
body.light-mode .lf-xp strong { color: #b77c00 !important; }
.lf-prog-bar {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
  overflow: hidden;
}
body.light-mode .lf-prog-bar { background: rgba(0,0,0,.08) !important; }
.lf-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #f5a623, #f5c842);
  border-radius: 99px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 8px rgba(245,166,35,.4);
}
.tool-intro { font-size: 13px; color: var(--text2); margin-bottom: 14px; }

/* ─── T1 IRPF ─── */
.t1-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.t1-stat {
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
}
.t1-highlight {
  grid-column: span 2;
  border-width: 2px;
}
.t1-stat-label { font-size: 11px; color: var(--text2); margin-bottom: 4px; }
.t1-stat-val { font-size: 18px; font-weight: 700; color: var(--text1); }
.t1-stat-sub { font-size: 11px; color: var(--text2); margin-top: 4px; }

/* ─── T2 Hipoteca vs Alquiler ─── */
.t2-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
}
.t2-tab {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
}
.t2-tab.active { background: rgba(108,99,255,.2); border-color: var(--accent); color: var(--text1); }
.t2-panel.hidden { display: none; }
.t2-result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t2-col {
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
}
.t2-col-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.t2-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 6px; color: var(--text2); }
.t2-row strong { color: var(--text1); }
.t2-total { border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px; margin-top: 4px; }
.t2-ptr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  font-size: 13px;
}
.t2-ptr-badge { padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.t2-good { background: rgba(80,200,120,.15); color: var(--green); }
.t2-neutral { background: rgba(245,166,35,.15); color: #f5a623; }
.t2-bad { background: rgba(255,80,80,.12); color: var(--red); }

/* ─── T3 FIRE ─── */
.t3-sliders { display: flex; flex-direction: column; gap: 10px; }
.t3-result-bar {
  margin-top: 14px;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.07);
}
.t3-fire-result { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.t3-fire-stat { display: flex; flex-direction: column; gap: 4px; }
.t3-fire-stat span { font-size: 11px; color: var(--text2); }
.t3-fire-stat strong { font-size: 15px; font-weight: 700; color: var(--text1); }
.t3-fire-noreach { color: #f5a623; font-size: 13px; text-align: center; padding: 4px; }

/* ─── T4 Snowball ─── */
.t4-debt-row {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}
.t4-input {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text1);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.t4-name { margin-bottom: 8px; }
.t4-row-fields { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; align-items: end; }
.t4-lbl { font-size: 10px; color: var(--text3); display: block; margin-bottom: 3px; }
.t4-del {
  background: rgba(255,80,80,.15);
  border: none;
  color: var(--red);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 12px;
}
.t4-add-btn { width: 100%; margin-bottom: 4px; }
.t4-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.t4-strat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 14px;
}
.t4-winner { border-color: var(--accent); background: rgba(108,99,255,.08); }
.t4-strat-name { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.t4-strat-stat { display: flex; justify-content: space-between; font-size: 12px; color: var(--text2); margin-bottom: 6px; }
.t4-strat-stat strong { color: var(--text1); }
.t4-best { font-size: 11px; color: var(--green); margin-top: 6px; }
.t4-summary { font-size: 13px; color: var(--text2); text-align: center; }
.t4-summary strong { color: var(--text1); }

/* ─── T5 Interés Compuesto ─── */
.t5-grid { display: flex; flex-direction: column; gap: 10px; }
.t5-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.t5-stat-box {
  background: linear-gradient(135deg, rgba(245,166,35,.08), rgba(245,166,35,.02));
  border: 1px solid rgba(245,166,35,.15);
  padding: 14px 12px;
  border-radius: 14px;
  text-align: center;
  overflow: hidden;
}
.t5-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #f5a623;
  word-break: break-word;
  line-height: 1.1;
}
.t5-stat-lbl {
  font-size: 10px;
  color: var(--text2);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
#t5-quote { transition: opacity .3s; }
body.light-mode #t5-quote {
  background: linear-gradient(135deg, rgba(183,124,0,.08), rgba(183,124,0,.02)) !important;
  border-color: rgba(183,124,0,.2) !important;
}
.t5-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.t5-stat {
  background: rgba(255,255,255,.05);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t5-stat span { font-size: 11px; color: var(--text2); }
.t5-stat strong { font-size: 17px; font-weight: 700; }

/* ─── T6 Net Worth ─── */
.t6-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.t6-col-title { font-size: 12px; font-weight: 700; margin-bottom: 10px; }
.t6-col .tool-label { font-size: 11px; margin-bottom: 3px; }
.t6-col .tool-input { padding: 7px 10px; font-size: 13px; margin-bottom: 8px; }
.t6-nw-display {
  background: rgba(255,255,255,.04);
  border: 2px solid var(--green);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  margin-bottom: 12px;
}
.t6-nw-label { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.t6-nw-val { font-size: 32px; font-weight: 800; }
.t6-breakdown { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.t6-break-item {
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.07);
  font-size: 11px;
  color: var(--text2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.t6-break-item strong { font-size: 14px; font-weight: 700; color: var(--text1); }
.t6-green strong { color: var(--green); }
.t6-red strong { color: var(--red); }
.t6-hist-title { font-size: 13px; font-weight: 700; margin: 14px 0 8px; }
.t6-hist-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--text2);
}
.t6-hist-row strong { font-size: 14px; font-weight: 700; }
.t6-result { margin-top: 8px; }

/* ─── Light mode overrides ─── */
body.light-mode .tool-input,
body.light-mode .tool-select { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: var(--text1); }
body.light-mode .t4-input { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: var(--text1); }
body.light-mode .tool-modal-overlay { background: var(--bg1); }
body.light-mode .tool-modal-head { background: var(--bg1); }
body.light-mode .t1-stat,
body.light-mode .t2-col,
body.light-mode .t4-debt-row,
body.light-mode .t4-strat,
body.light-mode .t5-stat,
body.light-mode .t6-break-item,
body.light-mode .t3-result-bar { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }

/* ══════════════════════════════════════════════════════════════════
   LIGHT MODE — FIX COMPLETO DE LEGIBILIDAD + AURORA TRANSPARENCY
   Aplica !important para ganar a cualquier regla previa
══════════════════════════════════════════════════════════════════ */

/* ─── Base: body y html con aurora visible ─── */
body.light-mode { background: rgba(240,235,224,0.85) !important; }
body.light-mode html { background: rgba(240,235,224,0.85) !important; }

/* ─── Cards base: semi-transparentes para dejar ver aurora ─── */
body.light-mode .mod-card,
body.light-mode .hero-card,
body.light-mode .patrimony-card,
body.light-mode .fin-profile-card,
body.light-mode .health-card,
body.light-mode .progress-card,
body.light-mode .missions-card,
body.light-mode .action-plan-card,
body.light-mode .rank-card,
body.light-mode .card,
body.light-mode .f28-wrap,
body.light-mode .f29-wrap,
body.light-mode .f32-wrap,
body.light-mode .f34-wrap {
  background: rgba(255,252,245,0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ─── Texto: TODOS los elementos con texto deben ser legibles ─── */
body.light-mode * { color: inherit; }

body.light-mode,
body.light-mode .screen,
body.light-mode #app { color: var(--text1) !important; }

/* Títulos */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode .h1,
body.light-mode .h2,
body.light-mode .h3,
body.light-mode .mod-title,
body.light-mode .card-title,
body.light-mode .section-title,
body.light-mode .screen-title,
body.light-mode .tool-name,
body.light-mode .branch-name,
body.light-mode .biz-name,
body.light-mode .career-title,
body.light-mode .rank-name,
body.light-mode .ach-name,
body.light-mode .stat-val,
body.light-mode .nw-val,
body.light-mode .balance-val,
body.light-mode .xp-val,
body.light-mode strong,
body.light-mode b { color: var(--text1) !important; }

/* Descripciones y texto secundario */
body.light-mode .mod-desc,
body.light-mode .tool-desc,
body.light-mode .card-desc,
body.light-mode .biz-desc,
body.light-mode .career-desc,
body.light-mode .ach-desc,
body.light-mode .stat-label,
body.light-mode .section-subtitle,
body.light-mode .text-muted,
body.light-mode p,
body.light-mode span:not(.bn-icon):not(.mod-xp):not(.badge):not(.tag):not(.chip),
body.light-mode .body,
body.light-mode .intro-text,
body.light-mode .step-intro,
body.light-mode .step-text,
body.light-mode .desc,
body.light-mode label,
body.light-mode .tool-label,
body.light-mode .t1-stat-label,
body.light-mode .t2-row,
body.light-mode .t3-fire-stat span,
body.light-mode .t4-strat-stat,
body.light-mode .tools-subtitle,
body.light-mode .tool-intro,
body.light-mode .tool-disclaimer { color: var(--text2) !important; }

/* Texto terciario / placeholders */
body.light-mode .text-dim,
body.light-mode .mod-users,
body.light-mode .hint,
body.light-mode .caption { color: var(--text3) !important; }

/* ─── Fondos de pantalla transparentes para aurora ─── */
body.light-mode #s-home,
body.light-mode #s-profile,
body.light-mode #s-rank,
body.light-mode #s-portfolio,
body.light-mode #s-business,
body.light-mode #s-lesson,
body.light-mode #s-onboard,
body.light-mode #s-tools,
body.light-mode #s-stats,
body.light-mode #s-life,
body.light-mode #s-future,
body.light-mode #s-lifestyle,
body.light-mode #s-cert,
body.light-mode .portfolio-screen { background: transparent !important; }

/* ─── Top nav light ─── */
body.light-mode .top-nav {
  background: rgba(240,235,224,0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ─── Bottom nav light ─── */
body.light-mode #bottom-nav {
  background: rgba(232,226,213,0.90) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* ─── Tool modal light ─── */
body.light-mode .tool-modal-overlay {
  background: rgba(240,235,224,0.94) !important;
  backdrop-filter: blur(8px) !important;
}
body.light-mode .tool-modal-head {
  background: rgba(240,235,224,0.96) !important;
}
body.light-mode .tool-card {
  border-bottom-color: rgba(183,124,0,.15) !important;
  background: linear-gradient(135deg, rgba(183,124,0,.04) 0%, rgba(0,0,0,0) 100%) !important;
}
body.light-mode .tool-name { color: #b77c00 !important; }
body.light-mode .tool-icon {
  background: linear-gradient(135deg, rgba(183,124,0,.15), rgba(183,124,0,.05)) !important;
  border-color: rgba(183,124,0,.25) !important;
}
body.light-mode .tool-arrow { color: #b77c00 !important; }
body.light-mode .t1-stat,
body.light-mode .t2-col,
body.light-mode .t4-debt-row,
body.light-mode .t4-strat,
body.light-mode .t5-stat,
body.light-mode .t6-break-item,
body.light-mode .t3-result-bar,
body.light-mode .tool-result {
  background: rgba(255,252,245,0.85) !important;
  border-color: rgba(50,40,20,0.10) !important;
}
body.light-mode .t1-stat-val,
body.light-mode .t5-stat strong,
body.light-mode .t6-nw-val,
body.light-mode .t3-fire-stat strong,
body.light-mode .t4-strat-name,
body.light-mode .t2-col-title { color: var(--text1) !important; }

/* ─── Nav bottom items ─── */
body.light-mode .bn-item { color: var(--text3) !important; }
body.light-mode .bn-item.active { color: var(--accent) !important; }
body.light-mode .bn-icon { filter: none !important; }


/* ══════════════════════════════════════════════════════════════════
   PRIORIDAD 2 — BOSS BATTLES · PERSONALITY TEST · CERTIFICADOS
══════════════════════════════════════════════════════════════════ */

/* ─── Boss Battle Modal ─── */
.boss-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(3,5,12,0.97);
  overflow-y: auto;
}
.boss-modal-overlay.active { display: flex; align-items: center; justify-content: center; }

.boss-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* Intro screen */
.boss-intro-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.boss-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--boss-color, #00e5a0) 0%, transparent 70%);
  opacity: 0.12;
  animation: bossAuraPulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bossAuraPulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: 0.12; }
  50%      { transform: translate(-50%,-50%) scale(1.2); opacity: 0.2; }
}
.boss-emoji-big {
  font-size: 72px;
  margin-bottom: 12px;
  position: relative;
  animation: bossFloat 3s ease-in-out infinite;
}
@keyframes bossFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.boss-badge {
  background: linear-gradient(135deg, #f87171, #fbbf24);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.boss-name {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
}
.boss-branch {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.boss-intro-text {
  font-size: 15px;
  color: #a0a8c0;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 380px;
}
.boss-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
  width: 100%;
  max-width: 320px;
}
.boss-rule {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: #c0c8e0;
  text-align: left;
}
.btn-boss {
  background: linear-gradient(135deg, #f87171 0%, #fbbf24 100%);
  color: #000;
  font-weight: 800;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
  max-width: 320px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 4px 20px rgba(248,113,113,0.4);
}
.btn-boss:active { transform: scale(0.97); }

/* Quiz screen */
.boss-quiz-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 20px;
}
.boss-quiz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.boss-quiz-progress {
  display: flex;
  gap: 8px;
}
.boss-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  transition: background 0.3s;
}
.boss-dot.active { background: rgba(255,255,255,0.5); }
.boss-dot.current { background: #fbbf24; box-shadow: 0 0 8px #fbbf24; }
.boss-quiz-info {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #a0a8c0;
}
.boss-timer {
  font-size: 22px;
  font-weight: 800;
  color: #fbbf24;
  min-width: 32px;
  text-align: right;
  transition: color 0.3s;
}
@keyframes bossTimerPulse {
  from { transform: scale(1); }
  to   { transform: scale(1.2); }
}
.boss-q-num {
  font-size: 11px;
  color: #6b7590;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.boss-question {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 16px;
}
.boss-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.boss-opt {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 12px 16px;
  color: #c0c8e0;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.boss-opt:hover:not(:disabled) { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.2); }
.boss-opt.boss-opt-correct { background: rgba(0,229,160,0.15) !important; border-color: #00e5a0 !important; color: #00e5a0 !important; }
.boss-opt.boss-opt-wrong   { background: rgba(248,113,113,0.15) !important; border-color: #f87171 !important; color: #f87171 !important; }
.boss-opt:disabled { cursor: default; }

.boss-explanation {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  animation: fadeUp 0.3s ease;
}
.boss-exp-ok  { background: rgba(0,229,160,0.12); border: 1px solid rgba(0,229,160,0.3); color: #c0ffe8; }
.boss-exp-bad { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.3); color: #ffc0c0; }

/* Result screen */
.boss-result-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.boss-result-aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, var(--boss-color,#fbbf24) 0%, transparent 65%);
  opacity: 0.1;
  pointer-events: none;
  animation: bossAuraPulse 2s ease-in-out infinite;
}
.boss-result-stars { font-size: 36px; margin-bottom: 8px; }
.boss-result-title { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.boss-result-emoji { font-size: 64px; margin-bottom: 8px; animation: bossFloat 3s ease-in-out infinite; }
.boss-result-score { font-size: 20px; font-weight: 700; color: #a0a8c0; margin-bottom: 12px; }
.boss-result-msg { font-size: 14px; color: #a0a8c0; line-height: 1.6; margin-bottom: 16px; max-width: 380px; }
.boss-reward-badge {
  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(248,113,113,0.2));
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: 20px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 20px;
}
.boss-result-btns { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; }

/* ─── Personality Test Modal ─── */
.pers-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(3,5,12,0.97);
  overflow-y: auto;
}
.pers-modal-overlay.active { display: flex; align-items: flex-start; justify-content: center; }

.pers-container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.pers-header {
  margin-bottom: 20px;
}
.pers-progress-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pers-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6c63ff, #00e5a0);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.pers-counter { font-size: 12px; color: #6b7590; text-align: right; }
.pers-title { font-size: 14px; font-weight: 700; color: #a0a8c0; text-align: center; margin-bottom: 16px; letter-spacing: 0.5px; }
.pers-question {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 24px;
  min-height: 60px;
}
.pers-opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pers-opt {
  background: rgba(255,255,255,0.05);
  border: 1.5px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  padding: 16px 18px;
  color: #c0c8e0;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.4;
}
.pers-opt:hover { background: rgba(108,99,255,0.12); border-color: rgba(108,99,255,0.4); color: #fff; }
.pers-opt:active { transform: scale(0.98); }

/* Result */
.pers-result-wrap {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
}
.pers-result-header {
  padding: 28px 20px 20px;
  text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pt-color,#6c63ff) 15%, transparent), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.pers-result-emoji { font-size: 56px; margin-bottom: 8px; }
.pers-result-name { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 4px; }
.pers-result-sub { font-size: 13px; color: #a0a8c0; letter-spacing: 0.5px; }

.pers-result-body { padding: 20px; }
.pers-breakdown { margin-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.pers-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #a0a8c0; }
.pers-bar-row span:first-child { min-width: 110px; font-size: 12px; }
.pers-bar-row span:last-child { min-width: 32px; text-align: right; font-weight: 700; color: #fff; }
.pers-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.pers-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; }

.pers-desc {
  font-size: 14px;
  color: #c0c8e0;
  line-height: 1.7;
  margin-bottom: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
}
.pers-tip {
  font-size: 13px;
  color: #a0ffd8;
  background: rgba(0,229,160,0.08);
  border: 1px solid rgba(0,229,160,0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.pers-famous {
  font-size: 12px;
  color: #6b7590;
  font-style: italic;
  margin-bottom: 16px;
}
.pers-result-btns { display: flex; flex-direction: column; gap: 8px; }

/* ─── Branch Certificate Modal ─── */
.certb-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(3,5,12,0.97);
  overflow-y: auto;
}
.certb-modal-overlay.active { display: flex; align-items: center; justify-content: center; }

.certb-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px;
  position: relative;
}
.certb-fireworks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.certb-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, #fbbf24);
  animation: certbSpark 2s ease-out infinite;
  opacity: 0;
}
.certb-spark-0  { top: 10%; left: 20%;  animation-delay: 0s;    animation-duration: 1.8s; }
.certb-spark-1  { top: 5%;  left: 70%;  animation-delay: 0.2s;  animation-duration: 2.1s; }
.certb-spark-2  { top: 20%; left: 10%;  animation-delay: 0.4s;  animation-duration: 1.6s; }
.certb-spark-3  { top: 15%; right: 15%; animation-delay: 0.6s;  animation-duration: 2.3s; }
.certb-spark-4  { top: 40%; left: 5%;   animation-delay: 0.8s;  animation-duration: 1.9s; }
.certb-spark-5  { top: 8%;  left: 45%;  animation-delay: 0.1s;  animation-duration: 2.0s; }
.certb-spark-6  { top: 30%; right: 5%;  animation-delay: 0.3s;  animation-duration: 1.7s; }
.certb-spark-7  { top: 60%; left: 15%;  animation-delay: 0.5s;  animation-duration: 2.2s; }
.certb-spark-8  { top: 50%; right: 10%; animation-delay: 0.7s;  animation-duration: 1.8s; }
.certb-spark-9  { top: 70%; left: 30%;  animation-delay: 0.9s;  animation-duration: 2.0s; }
.certb-spark-10 { top: 25%; left: 55%;  animation-delay: 0.15s; animation-duration: 1.9s; }
.certb-spark-11 { top: 45%; right: 25%; animation-delay: 0.55s; animation-duration: 2.1s; }
@keyframes certbSpark {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx,40px), var(--ty,-80px)) scale(0); }
}

.certb-inner {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 24px;
  padding: 32px 24px 24px;
  text-align: center;
  position: relative;
}
.certb-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid;
  background: rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  animation: certbBadgePop 0.5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes certbBadgePop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.certb-badge-emoji { font-size: 28px; }
.certb-badge-label { font-size: 9px; font-weight: 800; letter-spacing: 1px; margin-top: 2px; }
.certb-title { font-size: 14px; color: #a0a8c0; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.certb-branch-name { font-size: 28px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.certb-user { font-size: 18px; font-weight: 600; color: #6c63ff; margin-bottom: 8px; }
.certb-modules { font-size: 13px; color: #6b7590; margin-bottom: 24px; }
.certb-actions { display: flex; flex-direction: column; gap: 8px; }

/* Light mode adjustments */
body.light-mode .boss-modal-overlay,
body.light-mode .pers-modal-overlay,
body.light-mode .certb-modal-overlay { background: rgba(220,215,205,0.97); }
body.light-mode .boss-quiz-wrap,
body.light-mode .pers-result-wrap,
body.light-mode .certb-inner { background: rgba(255,252,245,0.9); border-color: rgba(50,40,20,0.12); }
body.light-mode .boss-opt,
body.light-mode .pers-opt { background: rgba(0,0,0,0.04); border-color: rgba(50,40,20,0.12); color: var(--text2); }
body.light-mode .boss-opt:hover:not(:disabled) { background: rgba(108,99,255,0.08); }
body.light-mode .boss-question,
body.light-mode .pers-question,
body.light-mode .boss-name,
body.light-mode .pers-result-name,
body.light-mode .certb-branch-name { color: var(--text1) !important; }
body.light-mode .boss-intro-text,
body.light-mode .boss-result-msg,
body.light-mode .pers-desc,
body.light-mode .boss-rule { color: var(--text2) !important; }
body.light-mode .pers-bar-track { background: rgba(50,40,20,0.1); }

/* ─── Profile Gamif Cards ─── */
.prof-gamif-section {
  margin: 0 20px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 16px;
}
.prof-gamif-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}
/* Personality */
.prof-pt-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--pt-color,#6c63ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pt-color,#6c63ff) 30%, transparent);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
.prof-pt-emoji { font-size: 32px; }
.prof-pt-info { flex: 1; }
.prof-pt-name { font-size: 16px; font-weight: 700; color: var(--text1); }
.prof-pt-sub  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.prof-pt-retake { font-size: 12px; color: var(--text3); flex-shrink: 0; }
.prof-pt-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: rgba(108,99,255,0.08);
  border: 1.5px dashed rgba(108,99,255,0.3);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-size: 22px;
  color: var(--text3);
}
.prof-pt-cta-title { font-size: 14px; font-weight: 600; color: var(--text1); margin-bottom: 2px; }
.prof-pt-cta-sub { font-size: 12px; color: var(--text3); }
/* Certs */
.prof-certs-empty { font-size: 13px; color: var(--text3); line-height: 1.5; }
.prof-certs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.prof-cert-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid;
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.prof-cert-emoji { font-size: 24px; margin-bottom: 4px; }
.prof-cert-label { font-size: 10px; color: var(--text2); font-weight: 600; }
.prof-cert-dl {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 6px;
  padding: 2px 5px;
  font-size: 10px;
  cursor: pointer;
  color: var(--text2);
}
.prof-certs-pending { font-size: 12px; color: var(--text3); margin-top: 8px; }
.prof-certs-complete { font-size: 12px; color: var(--green); margin-top: 8px; font-weight: 600; }
/* Boss grid */
.prof-boss-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; justify-content: center; }
.prof-boss-item {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  font-size: 18px;
  transition: background 0.15s;
}
.prof-boss-item.prof-boss-won {
  background: rgba(251,191,36,0.15);
  border-color: rgba(251,191,36,0.4);
}
.prof-boss-status { font-size: 10px; }
.prof-boss-score { font-size: 12px; color: var(--text3); }

/* Light mode */
body.light-mode .prof-gamif-section { background: rgba(255,252,245,0.85); border-color: rgba(50,40,20,0.1); }
body.light-mode .prof-pt-cta { background: rgba(108,99,255,0.05); }
body.light-mode .prof-cert-item { background: rgba(255,252,245,0.8); }
body.light-mode .prof-boss-item { background: rgba(0,0,0,0.04); border-color: rgba(50,40,20,0.1); }

/* ═══════════════════════════════════════════════
   HEATMAP DE ACTIVIDAD (real dates)
═══════════════════════════════════════════════ */
.st-heatmap-outer {
  padding: 16px;
  background: var(--card-bg);
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}
.st-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}
.st-hm-sq {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════
   SPEEDRUN MODE
═══════════════════════════════════════════════ */
.speedrun-btn {
  background: linear-gradient(135deg, #f0b42920, #f0b42910);
  border: 1px solid #f0b42940;
  color: #f0b429;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s;
  letter-spacing: .02em;
}
.speedrun-btn:hover {
  background: #f0b42930;
  border-color: #f0b429;
  transform: scale(1.04);
}
.speedrun-record-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--card-bg2, rgba(255,255,255,.04));
  border-radius: 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.sr-medal { font-size: 18px; flex-shrink: 0; }
.sr-icon   { font-size: 20px; flex-shrink: 0; }
.sr-info   { flex: 1; min-width: 0; }
.sr-title  { font-size: 13px; font-weight: 600; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-branch { font-size: 11px; color: var(--text3); }
.sr-time   { font-size: 15px; font-weight: 700; color: #f0b429; font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
#speedrun-timer-wrap {
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(240,180,41,.12);
  border-radius: 20px;
  border: 1px solid rgba(240,180,41,.3);
}

/* ═══════════════════════════════════════════════
   SEASONAL EVENTS
═══════════════════════════════════════════════ */
#seasonal-banner {
  margin-bottom: 12px;
}
.seasonal-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--sea-color, #e25822)18, transparent);
  border: 1px solid var(--sea-color, #e25822);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  animation: seaBannerIn .4s ease;
}
@keyframes seaBannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sea-left  { flex: 1; min-width: 0; }
.sea-name  { font-size: 14px; font-weight: 700; color: var(--text1); margin-bottom: 3px; }
.sea-desc  { font-size: 12px; color: var(--text2); }
.sea-mult-badge {
  display: inline-block;
  margin-top: 6px;
  background: var(--sea-accent, #ff7043);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.sea-cta-btn {
  flex-shrink: 0;
  background: var(--sea-color, #e25822);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.sea-cta-btn:hover { opacity: .85; transform: scale(1.03); }
.sea-modal-mult {
  display: inline-block;
  background: linear-gradient(135deg, #f0b42930, #f0b42910);
  border: 1px solid #f0b42950;
  color: #f0b429;
  font-weight: 700;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.sea-reward-box {
  background: var(--card-bg2, rgba(255,255,255,.05));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-top: 16px;
  text-align: left;
}
.sea-claimed {
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

/* ══════════════════════════════════════════════════════════════════
   P4-B: SISTEMA DE TÍTULOS DE NIVEL
   ══════════════════════════════════════════════════════════════════ */

/* ── Badge de rango en el perfil ─────────────────────────────────── */
.prof-rank-title {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  text-shadow: 0 0 12px currentColor;
}

/* ── Badge de rango en el home hero ──────────────────────────────── */
.home-rank-title-badge {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  opacity: 0.95;
}
.home-rank-next-hint {
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 6px;
  opacity: 0.7;
}

/* ── Modal de subida de título (P4-B) ────────────────────────────── */
.ttu-modal {
  text-align: center;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
}
.ttu-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, var(--rank-color, #00e5a0)12, transparent 70%);
  pointer-events: none;
  opacity: 0.15;
}
.ttu-stars {
  font-size: 18px;
  letter-spacing: 8px;
  color: var(--accent);
  margin-bottom: 12px;
  animation: ttu-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes ttu-pulse {
  from { opacity: 0.6; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1.03); }
}
.ttu-badge {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 0 30px var(--accent)40;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ttu-icon {
  font-size: 42px;
  line-height: 1;
  display: block;
}
.ttu-label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ttu-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 10px;
  line-height: 1.2;
}
.ttu-desc {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin-bottom: 14px;
  padding: 0 8px;
}
.ttu-next {
  font-size: 12px;
  color: var(--text2);
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 4px;
}
.ttu-next strong { color: var(--text); }

/* ── Panel de rangos en el perfil (ltp = level-titles-panel) ──────── */
#level-titles-panel {
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.ltp-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
}
.ltp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.ltp-list {
  padding: 4px 0;
}
.ltp-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border)50;
  transition: background 0.2s;
  position: relative;
}
.ltp-row:last-child { border-bottom: none; }
.ltp-row--active {
  background: var(--rank-color, #00e5a0)08;
}
.ltp-row--done { opacity: 0.7; }
.ltp-row--locked { opacity: 0.45; }
.ltp-icon {
  font-size: 22px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  margin-top: 1px;
}
.ltp-info {
  flex: 1;
  min-width: 0;
}
.ltp-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.ltp-xp-req {
  font-size: 11px;
  color: var(--text2);
  margin-top: 1px;
}
.ltp-desc {
  font-size: 12px;
  color: var(--text2);
  margin-top: 5px;
  line-height: 1.5;
  font-style: italic;
}
.ltp-check {
  font-size: 16px;
  flex-shrink: 0;
  align-self: center;
}
.ltp-current-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid;
  align-self: center;
  flex-shrink: 0;
}
.ltp-progress-wrap {
  margin-top: 7px;
}
.ltp-progress-bar {
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.ltp-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.ltp-progress-label {
  font-size: 10px;
  color: var(--text2);
}

/* ═══════════════════════════════════════════════════════════════
   P4-C — MISIONES SEMANALES (.wm-*)
   Panel de progreso con barra por misión
═══════════════════════════════════════════════════════════════ */
.wm-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: opacity .3s, border-color .3s;
}
.wm-item.wm-done {
  opacity: .65;
  border-color: var(--accent);
}
.wm-item-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.wm-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.wm-info {
  flex: 1;
  min-width: 0;
}
.wm-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  line-height: 1.3;
  margin-bottom: 8px;
}
.wm-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wm-bar {
  flex: 1;
  height: 7px;
  border-radius: 4px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.wm-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), #60e8c0);
  transition: width .5s cubic-bezier(.25,.46,.45,.94);
}
.wm-done .wm-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.wm-counter {
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}
.wm-xp {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  flex-shrink: 0;
}
.wm-xp-done {
  color: #fbbf24;
  background: color-mix(in srgb, #fbbf24 12%, transparent);
  border-color: color-mix(in srgb, #fbbf24 30%, transparent);
}
.wm-check {
  font-size: 11px;
  color: #fbbf24;
  font-weight: 600;
  margin-top: 8px;
  padding-left: 34px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.wm-check::before {
  content: '✓';
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   P4-A — BANNER RACHA EN RIESGO (.srb-*)
═══════════════════════════════════════════════════════════════ */
.streak-risk-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg,
    color-mix(in srgb, #ef4444 18%, var(--bg-card)),
    color-mix(in srgb, #f97316 12%, var(--bg-card)));
  border: 1px solid color-mix(in srgb, #ef4444 45%, transparent);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
  cursor: pointer;
  animation: srbPulse 2.4s ease-in-out infinite;
}
@keyframes srbPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #ef4444 0%, transparent); }
  50%       { box-shadow: 0 0 0 6px color-mix(in srgb, #ef4444 22%, transparent); }
}
.srb-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.srb-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text1);
}
.srb-close {
  font-size: 14px;
  color: var(--text2);
  flex-shrink: 0;
  padding: 2px 4px;
  opacity: .7;
}

/* ══════════════════════════════════════════════════════════════
   P4-D — CARTA DE PERSONAJE
══════════════════════════════════════════════════════════════ */

/* Entry button in profile */
.cc-entry-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(0,229,160,.08) 0%, rgba(0,229,160,.03) 100%);
  border: 1px solid rgba(0,229,160,.25);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, background .2s;
}
.cc-entry-btn:active {
  background: rgba(0,229,160,.12);
  border-color: rgba(0,229,160,.45);
}

/* Modal */
.cc-modal {
  max-width: 360px;
  padding: 16px 16px 14px;
  max-height: 90vh;
  overflow-y: auto;
}
.cc-card {
  --card-accent: #00e5a0;
  border: 1px solid var(--card-accent, var(--accent));
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-card);
}

/* Header */
.cc-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
}
.cc-avatar {
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border-radius: 50%;
  border: 2px solid var(--card-accent, var(--accent));
  flex-shrink: 0;
  background: var(--bg-secondary);
}
.cc-header-info { flex: 1; min-width: 0; }
.cc-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-family: var(--font-syne, inherit);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-handle {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}
.cc-meta {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
}

/* Stats row */
.cc-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cc-stat {
  padding: 10px 6px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.cc-stat:last-child { border-right: none; }
.cc-stat-val {
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-syne, inherit);
}
.cc-stat-lbl {
  font-size: 9px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* Global progress bar */
.cc-progress-global {
  padding: 10px 14px 6px;
}
.cc-prog-label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 5px;
}
.cc-prog-track {
  height: 6px;
  border-radius: 99px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.cc-prog-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s;
}

/* Branch bars */
.cc-branches {
  padding: 6px 14px 8px;
}
.cc-branch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.cc-branch-label {
  font-size: 10px;
  color: var(--text2);
  width: 90px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cc-branch-track {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.cc-branch-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .4s;
}
.cc-branch-pct {
  font-size: 10px;
  font-weight: 700;
  width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* Achievements row */
.cc-achs {
  padding: 6px 14px 8px;
  border-top: 1px solid var(--border);
}
.cc-achs-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.cc-achs-row { display: flex; gap: 8px; }
.cc-ach-badge {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}

/* Motto */
.cc-motto {
  padding: 8px 14px;
  font-size: 11px;
  font-style: italic;
  color: var(--text2);
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

/* Footer */
.cc-footer {
  padding: 6px 14px 10px;
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Action buttons */
.cc-actions {
  display: flex;
  gap: 8px;
}

/* ── P3-B: Estadísticas personales del perfil ── */
.pse-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.pse-item {
  background: var(--bg2);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}
.pse-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  font-family: 'Syne', sans-serif;
  line-height: 1.2;
  margin-bottom: 3px;
}
.pse-lbl {
  font-size: 11px;
  color: var(--text2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.pse-delta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text2);
  border: 1px solid var(--border);
}

/* ── P4-A: Streak badges card ── */
.streak-badges-list { display:flex; flex-direction:column; gap:10px; }
.sb-item { display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg2); transition:border-color .2s; }
.sb-earned { border-color:var(--sb-color,#00e5a0); background:color-mix(in srgb, var(--sb-color,#00e5a0) 8%, var(--bg2)); }
.sb-next   { border-color:color-mix(in srgb,var(--sb-color,#60a5fa) 50%,var(--border)); }
.sb-locked { opacity:.65; }
.sb-icon   { font-size:26px; line-height:1; flex-shrink:0; margin-top:2px; }
.sb-info   { flex:1; min-width:0; }
.sb-name   { font-size:13px; font-weight:700; color:var(--text1); }
.sb-desc   { font-size:11px; color:var(--text2); margin-bottom:5px; }
.sb-done   { font-size:11px; font-weight:700; color:var(--sb-color,#00e5a0); }
.sb-pbar   { height:5px; background:var(--border); border-radius:3px; overflow:hidden; margin-bottom:3px; }
.sb-pfill  { height:100%; border-radius:3px; transition:width .4s; }
.sb-pct    { font-size:10px; color:var(--text3); }
/* Shields row in profile */
.prof-shields-row { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:8px; font-size:13px; color:var(--text2); }
.pshr-label { font-size:11px; }

/* ── P8-A: Banners de conexión ── */
.conn-banner {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  padding: 10px 20px; border-radius: 24px; font-size: 13px; font-weight: 600;
  z-index: 9999; white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,.4);
  animation: connBannerIn .3s ease;
}
.conn-offline { background: #1a1a2e; border: 1.5px solid #f87171; color: #f87171; }
.conn-online  { background: #0d2b1e; border: 1.5px solid #00e5a0; color: #00e5a0; }
@keyframes connBannerIn {
  from { opacity:0; transform:translateX(-50%) translateY(10px); }
  to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ── Legal / privacidad ── */
.ob-legal-note { font-size:11px; color:var(--text3); text-align:center; margin-top:12px; line-height:1.5; }
.ob-legal-note a { color:var(--accent); text-decoration:underline; }

/* ── T7 Simulador de Hipoteca ───────────────────────────────── */
.t7-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:480px){ .t7-grid { grid-template-columns:1fr; } }
.t7-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:16px 0; }
.t7-kpi { background:var(--surface); border-radius:10px; padding:10px 12px; text-align:center; }
.t7-kpi-val { font-size:18px; font-weight:800; color:var(--text1); line-height:1.2; }
.t7-kpi-lbl { font-size:10px; color:var(--text3); margin-top:2px; }
.t7-detail { background:var(--surface); border-radius:10px; padding:10px 12px; margin-bottom:12px; }
.t7-row { display:flex; justify-content:space-between; font-size:12px; color:var(--text2); padding:3px 0; }
.t7-bar-wrap { margin:12px 0 4px; }
.t7-bar-label { font-size:11px; color:var(--text3); margin-bottom:6px; }
.t7-bar-track { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--surface); }
.t7-bar-seg { transition:width .4s; }
.t7-bar-legend { display:flex; gap:12px; margin-top:6px; font-size:11px; color:var(--text2); flex-wrap:wrap; }
.t7-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.t7-table { width:100%; border-collapse:collapse; font-size:12px; }
.t7-table th { background:var(--surface); color:var(--text3); font-weight:600; padding:6px 8px; text-align:right; }
.t7-table th:first-child { text-align:left; }
.t7-table td { padding:5px 8px; border-bottom:1px solid var(--border); color:var(--text2); text-align:right; }
.t7-table td:first-child { text-align:left; }
.t7-bonus { background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.25); border-radius:8px; padding:10px 12px; font-size:13px; color:var(--text1); margin:8px 0; }
/* Light mode overrides */
body.light-mode .t7-kpi, body.light-mode .t7-detail { background:rgba(255,252,245,.9); }
body.light-mode .t7-table th { background:rgba(50,40,20,.06); }
body.light-mode .t7-table td { border-color:var(--border); }

/* ── HOME REFRESH v2 — módulos arriba, diseño mejorado ──────── */

/* Section header más visual */
.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.sec-title {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 18px;
  color: var(--text1);
  letter-spacing: -.3px;
}

/* Branch tabs — más grandes y visuales */
.mod-branch-tabs {
  gap: 8px !important;
  padding-bottom: 12px !important;
  margin-bottom: 8px !important;
}
.mbt-tab {
  padding: 8px 14px !important;
  border-radius: 14px !important;
  border-width: 1.5px !important;
  gap: 3px !important;
}
.mbt-emoji { font-size: 1.2rem !important; }
.mbt-label { font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .01em; }
.mbt-active {
  background: rgba(0,229,160,.1) !important;
  border-width: 2px !important;
  box-shadow: 0 2px 12px rgba(0,229,160,.15);
}
.mbt-prog {
  font-size: .62rem !important;
  font-weight: 700;
  background: rgba(255,255,255,.07) !important;
  padding: 1px 6px !important;
}

/* Module cards — mejorados */
.mod-card {
  border-radius: 18px !important;
  padding: 14px !important;
  min-height: 0 !important;
  gap: 8px !important;
  background: linear-gradient(145deg, var(--surface), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
.mod-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(0,229,160,.25) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(0,229,160,.06) !important;
}
.mod-card.done {
  background: linear-gradient(145deg, rgba(0,229,160,.06), rgba(0,229,160,.02)) !important;
  border-color: rgba(0,229,160,.2) !important;
}

/* Hero card — más compacto y moderno */
.hero-card {
  border-radius: 22px;
  padding: 18px;
  margin-bottom: 16px;
  background: linear-gradient(145deg, var(--surface), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.07);
  position: relative;
  overflow: hidden;
}
.hero-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 120px; height: 120px;
  background: radial-gradient(circle at top right, rgba(0,229,160,.08), transparent 70%);
  pointer-events: none;
}

/* Módulos — media queries responsivas */
@media(min-width: 600px) {
  .modules-grid { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 380px) {
  .modules-grid { grid-template-columns: 1fr; }
}

/* Light mode overrides para las mejoras */
body.light-mode .mod-card {
  background: rgba(255,252,245,.92) !important;
  border-color: rgba(50,40,20,.09) !important;
}
body.light-mode .mod-card:hover {
  border-color: rgba(10,112,80,.3) !important;
  box-shadow: 0 4px 18px rgba(50,40,20,.12) !important;
}
body.light-mode .hero-card {
  background: rgba(255,252,245,.95);
  border-color: rgba(50,40,20,.1);
}
body.light-mode .hero-card::after {
  background: radial-gradient(circle at top right, rgba(10,112,80,.06), transparent 70%);
}

/* ══════════════════════════════════════════════════════════════════
   OPTIMIZACIÓN MÓVIL — fixes globales + breakpoints específicos
══════════════════════════════════════════════════════════════════ */

/* 1. Eliminar retraso de 300ms en taps + flash de highlight en iOS */
*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}
button, [role="button"], .btn, .mod-card, .mbt-tab, .bn-item,
.quiz-opt, .dca-opt, .card, .goal-card, .nav-avatar {
  touch-action: manipulation;
}

/* 2. Scroll contenedor principal */
.screen {
  overscroll-behavior-y: contain;
}

/* 3. Breakpoint 480px — móvil estándar */
@media (max-width: 480px) {
  /* Nav superior: más compacto */
  .top-nav {
    padding: 10px 14px;
  }
  .logo { font-size: 17px; }
  .nav-pill { padding: 3px 7px; font-size: 10px; gap: 3px; }
  .nav-pills { gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: calc(100vw - 80px); }
  .nav-pills::-webkit-scrollbar { display: none; }
  #game-speed-btn { display: none; }
  #rpg-multiplier-badge { display: none; }
  #music-control { display: none; }

  /* Home inner: menos padding lateral */
  .home-inner {
    padding: 12px 14px;
  }

  /* Hero percentil: apilar verticalmente, reducir fuente */
  .perc-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }
  .perc-num { font-size: 40px; }
  .level-badge { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
  .lb-num { font-size: 26px; }

  /* Branch tabs: altura mínima tap-target 44px */
  .mbt-tab {
    min-height: 44px !important;
    padding: 8px 10px !important;
  }

  /* Módulos: 1 columna en pantallas muy estrechas evita cards aplastadas */
  /* 2 columnas a partir de 400px — ya cubierto por regla existente */
  .mod-title { font-size: 13px; }
  .mod-desc  { font-size: 11px; }

  /* Lección: reducir padding para ganar espacio contenido */
  .lesson-inner { padding: 14px 14px 210px; }
  .lesson-title-big { font-size: clamp(18px, 5vw, 24px); }
  .content-block p { font-size: 13.5px; }

  /* Quiz opciones: tap targets generosos */
  .quiz-opt {
    padding: 12px 14px;
    font-size: 13.5px;
    min-height: 44px;
  }

  /* Botones primarios full-width en móvil */
  .btn { min-height: 44px; font-size: 14px; }

  /* Patrimonio hero: ajustar fuentes */
  .patr-amount-big, #patr-amount { font-size: clamp(28px, 7vw, 40px) !important; }

  /* Slider proyección: pista más gruesa para touch */
  .proj-slider { height: 8px !important; }
  .proj-slider::-webkit-slider-thumb { width: 22px !important; height: 22px !important; }

  /* Modales: sin border-radius en esquinas superiores para full-bleed */
  .modal { border-radius: 20px 20px 0 0 !important; max-height: 88vh; }
  .modal-bg { align-items: flex-end !important; }

  /* Cards genéricas: menos padding */
  .card { padding: 14px !important; }

  /* Section titles: ligeramente más pequeños */
  .sec-title { font-size: 15px; }
  .h3 { font-size: 15px; }

  /* Bottom nav: tap targets */
  .bn-item { padding: 8px 4px 10px; }
  .bn-icon  { font-size: 20px; }
}

/* 4. Breakpoint 360px — móviles muy pequeños */
@media (max-width: 360px) {
  .home-inner { padding: 10px 12px; }
  .top-nav    { padding: 8px 12px; }
  .logo       { font-size: 15px; }
  .nav-pills  { gap: 3px; }
  .nav-pill   { padding: 2px 6px; font-size: 9px; }
  .perc-num   { font-size: 34px; }
  .mbt-label  { font-size: .62rem !important; }
  .mbt-tab    { padding: 7px 8px !important; }
  .lesson-inner { padding: 10px 10px 210px; }
}

/* 5. Mejora táctil global: fuente base no inferior a 16px en inputs
   (evita zoom automático en iOS) */
input, select, textarea {
  font-size: max(16px, 1em);
}

/* ── Numeric Control Component ── */
.num-ctrl-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
}
.num-ctrl-btn {
  background: rgba(255,255,255,.06);
  border: none;
  color: var(--text1);
  font-size: 20px;
  font-weight: 300;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  -webkit-user-select: none;
  user-select: none;
}
.num-ctrl-btn:active { background: rgba(0,229,160,.15); }
.num-ctrl-wrap input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text1);
  padding: 0 4px;
  min-width: 0;
  -moz-appearance: textfield;
}
.num-ctrl-wrap input::-webkit-outer-spin-button,
.num-ctrl-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; }
.num-ctrl-suffix {
  font-size: 13px;
  color: var(--text3);
  padding-right: 8px;
  flex-shrink: 0;
}
body.light-mode .num-ctrl-wrap { background: rgba(255,252,245,.95) !important; border-color: var(--border2) !important; }
body.light-mode .num-ctrl-btn { background: rgba(50,40,20,.06) !important; color: var(--text1) !important; }
body.light-mode .num-ctrl-btn:active { background: rgba(10,112,80,.12) !important; }
body.light-mode .num-ctrl-wrap input { color: var(--text1) !important; }

/* ── Módulos section card ── */
.modules-section-card {
  padding: 16px 14px 12px;
  margin-bottom: 12px;
}
.modules-section-card .sec-head {
  margin-bottom: 10px;
}
.modules-section-card .mod-branch-tabs {
  margin-left: -2px;
  margin-right: -2px;
}
@media (max-width: 480px) {
  .modules-section-card { padding: 12px 10px 10px; }
}

/* DCA card — azul */
.dca-card { border-color: rgba(96,165,250,.4) !important; background: rgba(96,165,250,.06) !important; }

/* ── Quick stats: 2 columnas en pantallas muy estrechas ── */
@media (max-width: 400px) {
  .quick-stats-row {
    grid-template-columns: 1fr 1fr;
  }
  .qs-val { font-size: 18px; white-space: normal; overflow: visible; }
}

/* ── Padding-bottom global para nav inferior (~72px) ── */
@media (max-width: 640px) {
  .home-inner  { padding-bottom: 90px; }
  .prof-inner  { padding-bottom: 90px; }
  .rank-inner  { padding-bottom: 90px; }
  .biz-inner   { padding-bottom: 90px; }
  .tool-body   { padding-bottom: 90px; }
  .stats-inner { padding-bottom: 100px; }
}

/* ── Onboarding: selección de carrera simplificada ── */
.ob-prof-grid-simple { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:16px; }
.ob-prof-grid-simple .ob-prof-card { padding:10px 8px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; cursor:pointer; transition:all .2s; }
.ob-prof-grid-simple .ob-prof-card.selected { border-color:var(--accent); background:rgba(0,229,160,.08); }
.ob-prof-grid-simple .ob-pc-icon { font-size:22px; margin-bottom:4px; }
.ob-prof-grid-simple .ob-pc-title { font-size:11px; font-weight:700; color:var(--text1); }
.ob-prof-grid-simple .ob-pc-salary { font-size:10px; color:var(--accent); margin-top:2px; }

@keyframes levelUpPop {
  0%   { transform: scale(.55) translateY(40px); opacity: 0; }
  65%  { transform: scale(1.05) translateY(-6px); opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
@keyframes fadeInFast  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOutFast { from { opacity: 1; } to { opacity: 0; } }

.tool-modal-head {
  position: sticky;
  top: 0;
  background: rgba(6,8,16,0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 10;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(245,166,35,.12);
  display: flex;
  align-items: center;
  gap: 12px;
}
.tool-modal-head h3 {
  margin: 0;
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text1);
  flex: 1;
}
.tool-back {
  background: rgba(245,166,35,.1);
  border: 1px solid rgba(245,166,35,.2);
  color: #f5a623;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
body.light-mode .tool-modal-head {
  background: rgba(255,252,245,.98) !important;
  border-bottom-color: rgba(183,124,0,.15) !important;
}
body.light-mode .tool-back {
  background: rgba(183,124,0,.1) !important;
  border-color: rgba(183,124,0,.25) !important;
  color: #b77c00 !important;
}

/* Budget donut fix */
.budget-donut-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.budget-donut-wrap svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
.budget-donut-wrap svg circle {
  fill: none;
  stroke-width: 18;
  stroke-linecap: butt;
  transform-origin: center;
}
.budget-legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 16px;
}
.budget-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text2);
}
.budget-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}