/* Fuentes (Space Mono/Grotesk + Inter/Nunito) se cargan vía <link> en index.html
   para descarga en paralelo (antes iban en un @import que bloqueaba el render). */
*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* Grou design system (modern gamer · light mode) */
  --grou-bg0:#f6f7f9;--grou-bg1:#ffffff;--grou-surface:#ffffff;
  --grou-border:#e6e9ed;--grou-border2:#d6dbe1;
  --gline:rgba(0,0,0,0.12);   /* rejilla del radar de Skills (tenue; se redefine en tema oscuro) */
  --grou-cyan:#66fcf1;--grou-magenta:#ff178b;
  --grou-white:#1a1f27;--grou-muted:rgba(0,0,0,0.45);--grou-faint:rgba(0,0,0,0.32);
  --font-mono:'Space Mono',ui-monospace,monospace;
  --font-grotesk:'Space Grotesk',system-ui,sans-serif;
  /* Grou palette */
  --cyan:#66fcf1;--cyan-dim:#0e8d83;--cyan-muted:#3a8a85;--cyan-ink:#0b7a72;
  --magenta:#ff178b;--magenta-dim:#c20f6a;--amber-ink:#a86d00;
  --surface-2:#f1f3f5;--surface-1:#ffffff;--bg:#f6f7f9;
  --gray:#5b6470;--gray-dim:#7a828e;--gray-bright:#374151;

  /* Semantic mappings */
  --purple-light:rgba(0,0,0,0.04);
  --teal:var(--cyan-muted);--teal-light:rgba(0,0,0,0.03);--teal-dark:#3a8a85;
  --amber:var(--gray-bright);
  --coral:var(--gray-bright);
  --border:rgba(0,0,0,0.08);--border-md:rgba(0,0,0,0.12);
  --text:#1a1f27;--text-2:var(--gray);--text-3:var(--gray-dim);
  --radius:6px;--radius-lg:10px;--radius-xl:14px;
}
/* ══ TEMA OSCURO: redefine las variables del sistema (mismos nombres) ══
   Cyan/magenta/ámbar de identidad se mantienen; las tintas suben de luz
   para contrastar sobre fondo oscuro; overlays y bordes se invierten. */
[data-theme="dark"]{
  --grou-bg0:#0e1116;--grou-bg1:#161a21;--grou-surface:#181d25;
  --grou-border:#272d38;--grou-border2:#39414f;
  --gline:rgba(255,255,255,0.14);
  --grou-white:#eef1f5;--grou-muted:rgba(255,255,255,0.52);--grou-faint:rgba(255,255,255,0.34);
  /* tintas legibles sobre oscuro (más claras que en el tema claro) */
  --cyan-dim:#4fe6db;--cyan-muted:#5fd6cd;--cyan-ink:#5eead4;
  --magenta-dim:#ff6bb0;--amber-ink:#f0b64a;
  --surface-2:#20262f;--surface-1:#181d25;--bg:#0e1116;
  --gray:#a6b0bd;--gray-dim:#7f8996;--gray-bright:#c3cbd5;
  --purple-light:rgba(255,255,255,0.05);
  --teal-light:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.10);--border-md:rgba(255,255,255,0.16);
  --text:#eef1f5;
  color-scheme:dark;
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}
h1,h2,h3,.nav-logo,.auth-logo,.modal-title,.auth-title,.onboard-q,.sec-hdr{font-family:'Nunito Sans',system-ui,sans-serif;}
.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;}

/* ── AUTH SCREENS ── */
#auth-wall{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;align-items:center;justify-content:center;}
#auth-wall.hidden{display:none;}
.auth-box{width:100%;max-width:360px;padding:0 24px;}
.auth-logo{margin-top:-10px;margin-bottom:20px;line-height:0;text-align:right;}
.auth-logo img{height:98px;width:auto;display:inline-block;}
.auth-tagline{font-size:14px;color:var(--gray-dim);margin-bottom:32px;line-height:1.55;transition:opacity 1s ease;}
.auth-panel{background:var(--surface-1);border-radius:var(--radius-xl);border:1px solid var(--border);padding:24px;transition:opacity 0.35s ease;}
.auth-title{font-size:20px;font-weight:700;color:var(--text);margin-bottom:5px;}
.auth-sub{font-size:13px;color:var(--gray-dim);margin-bottom:18px;}
.social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 16px;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.10);background:rgba(0,0,0,0.03);font-size:13px;font-weight:500;color:var(--gray-bright);cursor:pointer;transition:all 0.15s;font-family:inherit;margin-bottom:8px;}
.social-btn:hover{background:rgba(0,0,0,0.05);border-color:rgba(0,0,0,0.18);}
.social-btn:disabled{opacity:0.4;cursor:not-allowed;}
.social-btn:disabled:hover{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.10);}
.social-btn svg{flex-shrink:0;}
.lang-row-compact{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.lang-chip{aspect-ratio:1.6;border-radius:var(--radius-lg);border:1px solid rgba(102,252,241,0.12);background:var(--surface-2);cursor:pointer;font-size:32px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:all 0.15s;}
.lang-chip.selected{border-color:var(--magenta);background:rgba(255,23,139,0.08);}
@media(hover:hover)and(pointer:fine){.lang-chip:hover{border-color:var(--cyan-dim);}}
.auth-sep{height:1px;background:rgba(0,0,0,0.08);margin:2px 0 14px;}
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;}
.auth-divider span{font-size:12px;color:var(--gray-dim);}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:0.5px;background:rgba(0,0,0,0.08);}
.auth-input{width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,0.08);border-radius:var(--radius);font-size:14px;color:var(--text);background:rgba(0,0,0,0.02);font-family:inherit;outline:none;transition:border 0.15s;margin-bottom:10px;}
.auth-input:focus{border-color:var(--cyan-ink);box-shadow:0 0 0 2px rgba(102,252,241,0.18);}
.auth-input::placeholder{color:var(--gray-dim);}
.auth-input-label{font-size:12px;font-weight:500;color:var(--gray-dim);margin-bottom:5px;display:block;}
.btn-auth-primary{width:100%;padding:11px;border-radius:var(--radius);background:var(--magenta);color:#fff;border:none;font-size:14px;font-weight:700;cursor:pointer;transition:all 0.15s;font-family:inherit;margin-top:4px;}
.btn-auth-primary:hover{background:var(--magenta-dim);}
.btn-auth-primary:disabled{opacity:0.4;cursor:not-allowed;}
.auth-switch{text-align:center;margin-top:16px;font-size:13px;color:var(--gray-dim);}
.auth-switch a{color:var(--cyan-ink);cursor:pointer;font-weight:600;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.auth-error{background:rgba(255,23,139,0.08);border:1px solid rgba(255,23,139,0.3);border-radius:var(--radius);padding:10px 12px;font-size:12px;color:var(--magenta);margin-bottom:10px;display:none;}
.auth-error.show{display:block;}

/* onboarding */
.onboard-step{display:none;}
.onboard-step.active{display:block;}
.onboard-q{font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.onboard-q-rotate{display:inline-block;transition:opacity 1s ease;font-size:17px;font-weight:700;white-space:nowrap;}
.onboard-hint{font-size:13px;color:var(--gray-dim);margin-bottom:18px;transition:opacity 1s ease;}
.ob-nav-row{display:flex;gap:8px;align-items:center;margin-top:4px;}
.ob-nav-row .btn-auth-primary{flex:1;margin-top:0;}
.ob-back-btn{width:42px;height:42px;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.10);background:transparent;color:var(--gray);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:all 0.15s;font-family:inherit;}
.ob-back-btn:hover{background:rgba(0,0,0,0.04);color:var(--text);}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px;}
.lang-grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px;}
.lang-grid-6 .lang-opt{padding:14px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;}
.lang-opt{padding:12px;border-radius:var(--radius-lg);border:1px solid rgba(102,252,241,0.12);background:var(--surface-2);cursor:pointer;text-align:center;transition:all 0.15s;position:relative;}
.lang-opt.selected{border-color:var(--magenta);background:rgba(255,23,139,0.08);}
@media(hover:hover)and(pointer:fine){.lang-opt:hover:not(.lang-locked){border-color:var(--cyan-dim);}}
.lang-opt.lang-locked{opacity:0.38;cursor:not-allowed;}
.lang-lock-badge{position:absolute;top:6px;right:6px;font-size:10px;color:var(--gray-dim);}
.lang-flag{font-size:22px;margin-bottom:4px;}
.lang-name{font-size:13px;font-weight:600;color:var(--text);}
.lang-level{font-size:11px;color:var(--text-3);}
.level-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.level-opt{padding:12px 14px;border-radius:var(--radius-lg);border:1px solid rgba(102,252,241,0.12);background:var(--surface-2);cursor:pointer;transition:all 0.15s;display:flex;align-items:center;gap:10px;}
.level-opt.selected{border-color:rgba(0,0,0,0.25);background:rgba(0,0,0,0.04);}
.level-dot{width:8px;height:8px;border-radius:50%;background:transparent;border:1.5px solid var(--gray-dim);flex-shrink:0;transition:all 0.15s;}
.level-opt.selected .level-dot{background:var(--cyan-ink);border-color:var(--cyan-ink);}
.level-opt.level-locked{opacity:0.45;cursor:not-allowed;}
@media(hover:hover)and(pointer:fine){.level-opt:hover{border-color:var(--cyan-dim);}.level-opt.level-locked:hover{border-color:rgba(102,252,241,0.12);}}
.soon-tag{font-size:9px;font-weight:700;color:var(--magenta);background:rgba(255,23,139,0.1);border:1px solid rgba(255,23,139,0.25);padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:0.04em;margin-left:6px;vertical-align:middle;}
.level-info-name{font-size:14px;font-weight:600;color:var(--text);}
.level-info-desc{font-size:12px;color:var(--text-3);}
.onboard-progress{display:flex;gap:4px;margin-bottom:24px;}
.onboard-pip{height:2px;flex:1;border-radius:1px;background:rgba(0,0,0,0.08);transition:background 0.2s;}
.onboard-pip.done{background:var(--cyan);}

/* ════════════════════════════════════════════════
   AUTH / ONBOARDING REDESIGN (modern gamer)
   Solo estilo: mismas posiciones y estructura.
   Scopeado a #auth-wall para ganar a las reglas base.
   ════════════════════════════════════════════════ */
#auth-wall .auth-logo{text-align:right;}
#auth-wall .auth-tagline{font-family:var(--font-grotesk);color:var(--grou-muted);}

#auth-wall .auth-panel{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:12px;}
#auth-wall .auth-title{font-family:var(--font-grotesk);font-weight:700;color:var(--grou-white);}
#auth-wall .auth-sub{font-family:var(--font-grotesk);color:var(--grou-muted);}

#auth-wall .social-btn{font-family:var(--font-grotesk);font-weight:600;background:rgba(0,0,0,0.03);border:1px solid var(--grou-border);border-radius:6px;color:var(--grou-white);}
#auth-wall .social-btn:hover{background:rgba(0,0,0,0.05);border-color:var(--grou-border2);}

#auth-wall .lang-chip{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:6px;}
#auth-wall .lang-chip.selected{border-color:var(--grou-magenta);background:rgba(255,23,139,0.08);}
@media(hover:hover)and(pointer:fine){#auth-wall .lang-chip:hover{border-color:rgba(102,252,241,0.4);}}

#auth-wall .auth-sep{background:var(--grou-border);}
#auth-wall .auth-divider::before,#auth-wall .auth-divider::after{background:var(--grou-border);}
#auth-wall .auth-divider span{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);}

#auth-wall .auth-input{font-family:var(--font-grotesk);background:rgba(0,0,0,0.02);border:1px solid var(--grou-border);border-radius:6px;color:var(--grou-white);}
#auth-wall .auth-input:focus{border-color:var(--cyan-ink);box-shadow:none;}
#auth-wall .auth-input::placeholder{color:var(--grou-muted);}
#auth-wall .auth-input-label{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grou-muted);}

#auth-wall .btn-auth-primary{font-family:var(--font-grotesk);font-weight:700;background:var(--grou-magenta);border-radius:6px;color:#fff;}
#auth-wall .btn-auth-primary:hover{background:var(--magenta-dim);}

#auth-wall .auth-switch{font-family:var(--font-grotesk);color:var(--grou-muted);}
#auth-wall .auth-switch a{color:var(--cyan-ink);}
#auth-wall .auth-error{font-family:var(--font-grotesk);background:rgba(255,23,139,0.08);border:1px solid rgba(255,23,139,0.3);border-radius:6px;color:var(--grou-magenta);}

/* Onboarding */
#auth-wall .onboard-q,#auth-wall .onboard-q-rotate{font-family:var(--font-grotesk);font-weight:700;color:var(--grou-white);}
#auth-wall .onboard-hint{font-family:var(--font-grotesk);color:var(--grou-muted);}
#auth-wall .onboard-pip{background:rgba(0,0,0,0.08);}
#auth-wall .onboard-pip.done{background:var(--cyan-ink);}

#auth-wall .lang-opt{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;}
#auth-wall .lang-opt.selected{border-color:var(--grou-magenta);background:rgba(255,23,139,0.08);}
@media(hover:hover)and(pointer:fine){#auth-wall .lang-opt:hover:not(.lang-locked){border-color:rgba(102,252,241,0.4);}}
#auth-wall .lang-name{font-family:var(--font-grotesk);font-weight:600;color:var(--grou-white);}
#auth-wall .lang-level{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--grou-muted);}
#auth-wall .lang-lock-badge{color:var(--grou-muted);}

#auth-wall .level-opt{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;}
#auth-wall .level-opt.selected{border-color:var(--cyan-ink);background:rgba(102,252,241,0.12);}
@media(hover:hover)and(pointer:fine){#auth-wall .level-opt:hover{border-color:rgba(102,252,241,0.4);}#auth-wall .level-opt.level-locked:hover{border-color:var(--grou-border);}}
#auth-wall .level-dot{border:1.5px solid var(--grou-muted);}
#auth-wall .level-opt.selected .level-dot{background:var(--cyan-ink);border-color:var(--cyan-ink);}
#auth-wall .level-info-name{font-family:var(--font-grotesk);font-weight:600;color:var(--grou-white);}
#auth-wall .level-info-desc{font-family:var(--font-grotesk);color:var(--grou-muted);}
#auth-wall .soon-tag{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--grou-magenta);background:rgba(255,23,139,0.1);border:1px solid rgba(255,23,139,0.25);border-radius:0;}

#auth-wall .ob-back-btn{background:transparent;border:1px solid var(--grou-border);border-radius:6px;color:var(--grou-muted);}
#auth-wall .ob-back-btn:hover{background:rgba(0,0,0,0.04);border-color:var(--grou-border2);color:var(--grou-white);}

/* ── MAIN APP ── */
.nav{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 14px;background:var(--grou-bg1);border-bottom:1px solid var(--grou-border);position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);}
.nav-logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none;}
.nav-logo img{height:52px;width:auto;display:block;}
/* Logo por tema: light por defecto, dark cuando [data-theme="dark"].
   !important para ganar a .nav-logo img / .bd-logo (display:block) que
   tienen igual o mayor especificidad y si no dejaban el logo-dark visible. */
img.logo-dark{display:none !important;}
img.logo-light{display:block;}
[data-theme="dark"] img.logo-light{display:none !important;}
[data-theme="dark"] img.logo-dark{display:block !important;}
/* XP pill (topbar) */
.topbar-xp{font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:0.06em;color:var(--cyan-ink);background:rgba(102,252,241,0.12);border:1px solid rgba(102,252,241,0.45);border-radius:20px;padding:5px 12px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
/* Botón de tema en el topbar: luna (en claro → ir a oscuro) / sol (en oscuro → ir a claro) */
.topbar-theme{display:inline-flex;align-items:center;justify-content:center;width:46px;height:32px;border-radius:8px;background:var(--surface-2);border:1px solid var(--grou-border);color:var(--text-2);cursor:pointer;font-size:17px;transition:background 0.14s,color 0.14s;}
.topbar-theme:hover{color:var(--text);}
.tb-theme-sun{display:none;}
[data-theme="dark"] .tb-theme-moon{display:none;}
[data-theme="dark"] .tb-theme-sun{display:inline;}
.user-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;cursor:pointer;border:1.5px solid var(--purple-light);}
.user-initials{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.10);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--gray-bright);cursor:pointer;font-family:"Nunito Sans",inherit;}

.screen{display:none;padding:16px 16px 88px;flex:1;overflow-y:auto;}
.screen.active{display:block;}

/* ── BOTTOM NAV ── */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;display:grid;grid-template-columns:repeat(5,1fr);background:var(--grou-bg1);border-top:1px solid var(--grou-border);z-index:30;}
.bnav-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 0 9px;background:transparent;border:none;border-top:2px solid transparent;margin-top:-1px;cursor:pointer;color:var(--grou-faint);transition:color 0.15s,border-color 0.15s;font-family:inherit;}
.bnav-tab i{font-size:19px;line-height:1;}
.bnav-tab span{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;}
.bnav-tab.active{border-top-color:var(--cyan-ink);color:var(--cyan-ink);}
@media(hover:hover)and(pointer:fine){.bnav-tab:hover:not(.active){color:var(--grou-muted);}}

.card{background:var(--surface-1);border-radius:var(--radius-lg);border:1px solid var(--border);padding:16px;margin-bottom:12px;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;}
.badge-purple{background:rgba(0,0,0,0.04);color:var(--gray-bright);border:1px solid rgba(0,0,0,0.10);}
.badge-teal{background:rgba(0,0,0,0.04);color:var(--gray-bright);border:1px solid rgba(0,0,0,0.10);}
.badge-amber{background:rgba(0,0,0,0.04);color:var(--gray-bright);border:1px solid rgba(0,0,0,0.10);}
.badge-coral{background:rgba(0,0,0,0.04);color:var(--gray-bright);border:1px solid rgba(0,0,0,0.10);}
.badge-gray{background:rgba(0,0,0,0.04);color:var(--gray-dim);border:1px solid rgba(0,0,0,0.08);}
.sec-hdr{font-size:11px;font-weight:600;color:var(--gray-dim);letter-spacing:0.8px;text-transform:uppercase;margin:18px 0 10px;}
.btn{padding:10px 18px;border-radius:var(--radius);font-size:14px;font-weight:500;cursor:pointer;border:1px solid rgba(0,0,0,0.12);background:transparent;color:var(--gray);transition:all 0.15s;font-family:inherit;}
.btn:hover{background:rgba(0,0,0,0.04);}
.btn-purple{background:var(--magenta);color:#fff;border-color:transparent;}
.btn-purple:hover{background:var(--magenta-dim);}
.btn-teal{background:rgba(0,0,0,0.05);color:var(--text);border:1px solid rgba(0,0,0,0.12);font-weight:600;}
.btn-teal:hover{background:rgba(0,0,0,0.08);}
.btn-full{width:100%;display:block;text-align:center;}
.tab-sw{display:flex;gap:3px;background:rgba(0,0,0,0.03);border:1px solid var(--border);border-radius:var(--radius);padding:3px;margin-bottom:14px;}
.tab-o{flex:1;text-align:center;padding:6px;font-size:13px;cursor:pointer;border-radius:calc(var(--radius) - 1px);color:var(--gray-dim);transition:all 0.15s;border:none;background:transparent;font-family:inherit;}
.tab-o.active{background:rgba(0,0,0,0.06);color:var(--text);font-weight:600;}
.ai-loading{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);}
.dot-pulse{display:flex;gap:3px;}
.dot-pulse span{width:5px;height:5px;border-radius:50%;background:var(--cyan-ink);animation:pulse 1.2s ease-in-out infinite;}
.dot-pulse span:nth-child(2){animation-delay:.2s;}
.dot-pulse span:nth-child(3){animation-delay:.4s;}
@keyframes pulse{0%,80%,100%{opacity:.3;}40%{opacity:1;}}
textarea{width:100%;border:1px solid rgba(102,252,241,0.3);border-radius:var(--radius);padding:10px 12px;font-size:13px;color:var(--text);background:rgba(0,0,0,0.02);resize:vertical;line-height:1.6;font-family:inherit;margin-bottom:12px;}
textarea:focus{outline:none;border-color:var(--cyan-ink);box-shadow:0 0 0 2px rgba(102,252,241,0.18);}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:flex-end;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity 0.2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface-1);border-radius:20px 20px 0 0;padding:8px 20px 24px;width:100%;max-width:480px;transform:translateY(24px);transition:transform 0.25s;max-height:88vh;overflow-y:auto;border-top:2px solid var(--rar-edge,var(--grou-border2));}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-handle{width:40px;height:4px;background:var(--grou-border2);border-radius:3px;margin:6px auto 16px;}
.modal-title{font-family:var(--font-grotesk);font-size:19px;font-weight:700;color:var(--text);line-height:1.15;margin-bottom:6px;}
.modal-desc{font-family:var(--font-grotesk);font-size:13.5px;color:var(--text-2);line-height:1.6;margin-bottom:16px;}
.step-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;}
.support-box{background:rgba(0,0,0,0.02);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:4px;}
.support-source{font-size:11px;color:var(--cyan-ink);font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:5px;letter-spacing:0.02em;}
.support-item{margin-bottom:12px;}
.support-item:last-child{margin-bottom:0;}
.support-label{font-size:10px;font-weight:700;color:var(--gray-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:4px;}
.support-text{font-size:13px;color:var(--text);line-height:1.6;}
.support-entry{color:var(--cyan-dim);font-style:italic;}
.deadline-banner{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:9px 12px;border-radius:var(--radius);margin-bottom:4px;}
.deadline-banner.info{background:rgba(0,0,0,0.03);color:var(--gray);border:1px solid var(--border);}
.deadline-banner.active{background:rgba(102,252,241,0.10);color:var(--cyan-ink);border:1px solid rgba(102,252,241,0.4);}
.deadline-banner.expired{background:rgba(255,23,139,0.08);color:var(--magenta-dim);border:1px solid rgba(255,23,139,0.3);}

/* ══════════════════════════════════════════════════════════════
   MODAL DE MISIÓN · cabecera épica + tarjetas de recompensa (mm-*)
   Reutiliza la capa de rareza (--rar-*) y el chip .hm-rar de Home.
   ══════════════════════════════════════════════════════════════ */
.mm-head{display:flex;align-items:center;gap:13px;margin-bottom:14px;}
.mm-icon{width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:15px;font-size:27px;color:var(--rar-ink,var(--cyan-ink));background:color-mix(in srgb,var(--rar-c,var(--cyan)) 14%,transparent);border:1px solid var(--rar-edge,var(--grou-border2));box-shadow:0 0 18px var(--rar-shadow,transparent);}
.mm-head-body{flex:1;min-width:0;}
.mm-head-body .hm-rar{display:inline-block;color:#05070c;background:var(--rar-c,var(--cyan));margin-bottom:6px;}
.mm-sub{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--grou-muted);margin-top:4px;}
/* Fila de tarjetas de recompensa: XP · recompensa · ventana */
.mm-rewards{display:flex;gap:9px;margin-bottom:16px;}
.mm-rw{flex:1;border:1px solid var(--grou-border);border-radius:11px;background:var(--grou-surface);padding:11px 8px;text-align:center;}
.mm-rw-v{font-family:var(--font-mono);font-size:16px;font-weight:700;line-height:1;}
.mm-rw-l{font-family:var(--font-mono);font-size:7.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grou-muted);margin-top:5px;}
.mm-rw.xp{border-color:color-mix(in srgb,var(--amber-ink) 30%,transparent);background:color-mix(in srgb,var(--amber-ink) 7%,var(--grou-surface));}
.mm-rw.xp .mm-rw-v{color:var(--amber-ink);}
.mm-rw.loot{border-color:var(--rar-edge,var(--grou-border));background:color-mix(in srgb,var(--rar-c,var(--cyan)) 7%,var(--grou-surface));}
.mm-rw.loot .mm-rw-v{color:var(--rar-ink,var(--cyan-ink));font-size:18px;}
.mm-rw.time .mm-rw-v{color:var(--text);font-size:13px;}
/* "Objetivos / cómo": filas con diana cyan (reemplaza el look de step-row) */
.mm-obj{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--grou-border);}
.mm-obj:last-child{border-bottom:0;}
.mm-obj i{color:var(--cyan-ink);font-size:15px;flex-shrink:0;margin-top:2px;}
.mm-obj span{font-family:var(--font-grotesk);font-size:13px;color:var(--text-2);line-height:1.45;}
/* CTA principal magenta full-width (Empezar / Completar) */
.mm-cta{width:100%;padding:15px;border-radius:13px;border:none;background:var(--grou-magenta);color:#fff;font-family:var(--font-grotesk);font-size:15px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 0 20px color-mix(in srgb,var(--magenta) calc(var(--glow)*90%),transparent);transition:background 0.15s,opacity 0.15s;}
.mm-cta:hover:not(:disabled){background:var(--magenta-dim);}
.mm-cta:disabled{cursor:not-allowed;}
.mm-cta.done{background:color-mix(in srgb,var(--cyan) 16%,var(--grou-surface));color:var(--cyan-ink);box-shadow:none;}
.mm-cancel{width:100%;margin-top:8px;padding:11px;border-radius:11px;border:1px solid var(--grou-border);background:transparent;color:var(--grou-muted);font-family:var(--font-grotesk);font-size:13px;font-weight:600;cursor:pointer;}
.mm-cancel:hover{background:rgba(0,0,0,0.03);color:var(--text-2);}

/* ── HOME REDESIGN (legacy, reemplazado por HOME REDESIGN v2) ── */
.home-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.flag-chip{width:42px;height:42px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:22px;position:relative;}
.flag-origin{cursor:pointer;transition:all 0.15s;}
.flag-origin:hover{border-color:var(--cyan-ink);}
.flag-edit{position:absolute;bottom:-4px;right:-4px;font-size:10px;background:var(--magenta);color:#fff;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}

/* Flag picker grid */
.flag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;max-height:300px;overflow-y:auto;}
.flag-opt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);cursor:pointer;transition:all 0.15s;}
.flag-opt:hover{border-color:var(--border-md);}
.flag-opt.active{border-color:var(--cyan-ink);background:rgba(102,252,241,0.10);}
.flag-opt-emoji{font-size:24px;}
.flag-opt-name{font-size:10px;color:var(--text-2);text-align:center;line-height:1.2;}

/* ══════════════════════════════════════════════════════════════
   RPG "ÉPICO" — capa visual transversal (animaciones + rareza + HUD)
   Inspirado en la maqueta. Solo presentación; se apoya en variables.
   --glow escala la intensidad de brillos/sombras según el tema
   (claro = discreto). Las variables de rareza mapean a la identidad.
   ══════════════════════════════════════════════════════════════ */
:root{
  --glow:0.16;
  /* Jerarquía de rareza (común → raro → épico → legendario).
     El *-ink es la tinta para TEXTO/joya sobre fondo claro (legible);
     el color base alimenta bordes, puntos y glows. */
  --rar-comun:#94a0b3;--rar-comun-ink:#5b6470;
  --rar-raro:var(--cyan);--rar-raro-ink:var(--cyan-ink);
  --rar-epico:var(--magenta);--rar-epico-ink:var(--magenta-dim);
  --rar-legend:#e0930a;--rar-legend-ink:var(--amber-ink);
}
@keyframes hm-shine{0%{transform:translateX(-120%);}60%,100%{transform:translateX(320%);}}
@keyframes hm-pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(255,23,139,0.45),0 0 16px rgba(255,23,139,0.35);}50%{box-shadow:0 0 0 7px rgba(255,23,139,0),0 0 22px rgba(255,23,139,0.5);}}
@keyframes hm-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}

/* Marcos de esquina HUD (se pintan con ::before/::after sobre el contenedor) */
.hm-hud{position:relative;overflow:hidden;}
.hm-hud::before,.hm-hud::after{content:'';position:absolute;width:15px;height:15px;pointer-events:none;opacity:0.7;}
.hm-hud::before{top:8px;left:8px;border-top:2px solid var(--cyan-ink);border-left:2px solid var(--cyan-ink);}
.hm-hud::after{top:8px;right:8px;border-top:2px solid var(--cyan-ink);border-right:2px solid var(--cyan-ink);}
.hm-hud-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--cyan) calc(var(--glow)*90%),transparent),transparent 60%);}

/* Chip de rareza (Común/Raro/Épico/Legendario) — presentacional */
.hm-rar{font-family:var(--font-mono);font-size:7.5px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:3px 8px;border-radius:0;color:var(--rar-ink,var(--text-3));border:1px solid var(--rar-edge,var(--grou-border2));background:color-mix(in srgb,var(--rar-c,var(--grou-border2)) 12%,transparent);}

/* ── HOME REDESIGN v2 (modern gamer) ── */
.hm-greet-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin-bottom:4px;}
.hm-greet-name{font-family:var(--font-grotesk);font-size:24px;font-weight:700;color:var(--grou-white);line-height:1.05;}
.hm-level{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.08em;color:var(--cyan-ink);background:rgba(102,252,241,0.12);border:1px solid rgba(102,252,241,0.45);border-radius:20px;padding:3px 9px;white-space:nowrap;}

.hm-tip{display:flex;align-items:flex-start;gap:10px;background:color-mix(in srgb,var(--cyan) 7%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);border-radius:12px;padding:12px 13px;margin:12px 0;font-family:var(--font-grotesk);font-size:13px;color:var(--text-2);line-height:1.5;}
.hm-tip i{color:var(--cyan-ink);font-size:17px;flex-shrink:0;margin-top:1px;}
.hm-tip b{color:var(--text);font-weight:700;margin-right:5px;}

/* ── Bloque de status RPG (Home) — hero con marco HUD + glow ── */
.hm-rpg{position:relative;background:linear-gradient(160deg,var(--surface-2),var(--grou-surface));border:1px solid var(--grou-border2);border-radius:14px;padding:16px;margin-bottom:12px;overflow:hidden;}
.hm-rpg>*{position:relative;}
.hm-rpg .hm-hud-glow{position:absolute;}
.hm-rpg-top{display:flex;align-items:center;gap:13px;margin-bottom:16px;}
.hm-rpg-avwrap{position:relative;flex-shrink:0;animation:hm-float 4s ease-in-out infinite;}
.hm-rpg-av{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--grou-cyan),var(--grou-magenta));font-family:var(--font-grotesk);font-size:20px;font-weight:700;color:#05070c;box-shadow:0 0 20px color-mix(in srgb,var(--cyan) calc(var(--glow)*80%),transparent);}
.hm-rpg-av img{width:100%;height:100%;object-fit:cover;border-radius:16px;}
.hm-rpg-lv{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.04em;color:#05070c;background:#e0930a;border-radius:6px;padding:2px 7px;white-space:nowrap;}
.hm-rpg-meta{flex:1;min-width:0;}
.hm-rpg-name{font-family:var(--font-grotesk);font-size:21px;font-weight:700;color:var(--grou-white);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-rpg-name i{font-size:18px;color:var(--magenta-dim);vertical-align:-2px;margin-right:3px;}
.hm-rpg-world{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grou-muted);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-rpg-bars{display:flex;flex-direction:column;gap:11px;}
.hm-bar-row{display:grid;grid-template-columns:80px 1fr 70px;align-items:center;gap:11px;}
.hm-bar-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-bar-track{height:11px;background:color-mix(in srgb,var(--text-3) 20%,transparent);border:1px solid var(--grou-border);border-radius:7px;overflow:hidden;}
.hm-bar-fill{position:relative;height:100%;border-radius:6px;transition:width 0.8s cubic-bezier(.4,0,.2,1);overflow:hidden;}
/* Brillo que recorre la barra (efecto "épico") */
.hm-bar-fill::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);animation:hm-shine 3.4s ease-in-out infinite;}
.hm-bar-val{font-family:var(--font-mono);font-size:13px;font-weight:700;text-align:right;color:var(--text);white-space:nowrap;}
.hm-bar-row.xp .hm-bar-lbl{color:var(--magenta-dim);}
.hm-bar-row.skill .hm-bar-lbl{color:var(--cyan-ink);}
.hm-bar-fill.xp{background:linear-gradient(90deg,var(--grou-magenta),color-mix(in srgb,var(--grou-magenta) 55%,var(--grou-cyan)));box-shadow:0 0 12px color-mix(in srgb,var(--magenta) calc(var(--glow)*90%),transparent);}
.hm-bar-fill.skill{background:linear-gradient(90deg,var(--grou-cyan),var(--cyan-ink));box-shadow:0 0 12px color-mix(in srgb,var(--cyan) calc(var(--glow)*90%),transparent);}
/* Semana visual de racha (chips L-M-X-J-V-S-D + contador 🔥) */
.hm-week{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(240,180,41,0.10);border:1px solid rgba(240,180,41,0.22);border-radius:8px;padding:9px 11px;margin-top:3px;}
.hm-week-days{display:flex;gap:5px;}
.hm-day{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:5px;font-family:var(--font-mono);font-size:10px;font-weight:700;background:var(--surface-2);color:var(--grou-faint);}
.hm-day.done{background:rgba(240,180,41,0.32);color:var(--amber-ink);}
.hm-day.future{background:var(--surface-2);color:var(--grou-faint);opacity:0.55;}
.hm-day.today{background:#f0b429;color:#fff;box-shadow:0 0 0 2px rgba(240,180,41,0.35);}
.hm-week-streak{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--amber-ink);white-space:nowrap;}
.hm-week-flame{font-size:15px;}
/* Botón ⓘ + hoja explicativa de atributos */
.hm-info-btn{flex-shrink:0;align-self:flex-start;background:none;border:none;color:var(--grou-faint);font-size:18px;line-height:1;cursor:pointer;padding:2px;transition:color 0.15s;}
.hm-info-btn:hover{color:var(--magenta-dim);}
.hm-info-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:none;align-items:center;justify-content:center;padding:24px;z-index:1000;}
.hm-info-overlay.open{display:flex;}
.hm-info-sheet{background:var(--grou-surface);width:100%;max-width:360px;border:1px solid var(--grou-border);border-radius:12px;padding:18px 18px 22px;box-shadow:0 12px 40px rgba(0,0,0,0.18);animation:hm-sheet-in 0.18s cubic-bezier(.4,0,.2,1);}
@keyframes hm-sheet-in{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.hm-info-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grou-muted);margin-bottom:6px;}
.hm-info-x{background:none;border:none;color:var(--grou-muted);font-size:18px;cursor:pointer;line-height:1;padding:2px;}
.hm-info-row{display:grid;grid-template-columns:90px 1fr;gap:12px;align-items:center;padding:13px 0;border-top:1px solid var(--grou-border);}
.hm-info-k{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-info-v{font-family:var(--font-grotesk);font-size:13.5px;line-height:1.5;color:var(--text-2);}

/* Quest activa — card grande con acento por RAREZA (chip + borde + glow) */
/* Misión EN PROGRESO: borde 1.5px del color de rareza + halo suave. El chip de
   rareza se ancla arriba-derecha. La rareza sale de is_final/xp (presentacional). */
.hm-active.hm-quest,.hm-next.hm-quest{position:relative;display:block;background:var(--grou-surface);border:1.5px solid var(--rar-edge,rgba(255,23,139,0.35));border-radius:12px;padding:15px 16px;overflow:hidden;box-shadow:0 0 20px var(--rar-shadow,transparent);}
.hm-active.hm-quest:hover,.hm-next.hm-quest:hover{border-color:var(--rar-edge,rgba(255,23,139,0.5));}
.hm-active.hm-quest .hm-rar{position:absolute;top:0;right:0;border:0;border-bottom-left-radius:9px;color:#05070c;background:var(--rar-c,var(--grou-magenta));}
.hm-quest-head{display:flex;align-items:center;gap:12px;padding-right:52px;}
.hm-quest-desc{font-family:var(--font-grotesk);font-size:13.5px;line-height:1.55;color:var(--text-2);margin-top:12px;padding-top:12px;border-top:1px solid var(--grou-border);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Footer resumen tipo maqueta: XP · recompensa · tiempo, con separador punteado */
.hm-quest-foot{display:flex;align-items:center;gap:14px;margin-top:12px;padding-top:11px;border-top:1px dashed var(--grou-border2);}
.hm-quest-foot span{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:11px;font-weight:700;white-space:nowrap;}
.hm-qf-xp{color:var(--amber-ink);}
.hm-qf-loot{color:var(--rar-loot,var(--grou-magenta));}
.hm-qf-time{margin-left:auto;color:var(--text-2);}
.hm-qf-loot i,.hm-qf-time i{font-size:13px;}
.hm-active.hm-quest .hm-active-icon{background:color-mix(in srgb,var(--rar-c,var(--grou-magenta)) 14%,transparent);border-color:var(--rar-edge,rgba(255,23,139,0.30));color:var(--rar-ink,var(--magenta-dim));border-radius:12px;}
.hm-active.hm-quest .hm-active-tag{color:var(--rar-ink,var(--magenta-dim));}
.hm-active.hm-quest .hm-active-name{font-size:15px;}
.hm-active.hm-quest .hm-active-time{color:var(--magenta-dim);}
/* CTA circular pulsante (play) */
.hm-active.hm-quest .hm-cta{width:40px;height:40px;padding:0;border-radius:50%;background:var(--grou-magenta);color:#fff;font-size:16px;animation:hm-pulse-ring 2.2s ease-in-out infinite;}
/* Estado VACÍO de "misión en progreso" (mismo tamaño, atenuado) */
/* Estado VACÍO de "misión en progreso": SIN color, fondo gris (override del magenta) */
.hm-active.hm-quest.hm-active-empty{background:var(--surface-2);border:1.5px solid var(--grou-border);box-shadow:none;}
.hm-active.hm-quest.hm-active-empty:hover{border-color:var(--grou-border2);}
.hm-active-empty .hm-cta{animation:none;}
.hm-active-empty .hm-quest-desc{border-top-color:var(--grou-border);color:var(--text-3);}
.hm-active-empty .hm-active-icon{background:rgba(0,0,0,0.04)!important;border-color:var(--grou-border2)!important;color:var(--text-3)!important;}
.hm-active-empty .hm-active-tag{color:var(--grou-muted)!important;}
.hm-active-empty .hm-active-name{color:var(--text-2)!important;}
.hm-active-empty .hm-cta{background:var(--grou-border2)!important;color:var(--text-2)!important;}
/* Resto de misiones en progreso: APILADAS a ancho completo, así el título
   siempre tiene todo el ancho y corta limpio con ellipsis sin importar el largo. */
.hm-ip-row{display:flex;flex-direction:column;gap:8px;margin:-4px 0 12px;}
.hm-ip-chip{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:rgba(255,23,139,0.04);border:1px solid rgba(255,23,139,0.16);border-left:2px solid var(--grou-magenta);border-radius:7px;padding:9px 12px;cursor:pointer;font:inherit;transition:border-color 0.15s,background 0.15s;}
.hm-ip-chip:hover{border-color:rgba(255,23,139,0.4);background:rgba(255,23,139,0.07);}
.hm-ip-icon{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,23,139,0.10);border-radius:6px;color:var(--magenta-dim);font-size:15px;}
.hm-ip-body{flex:1;min-width:0;}
.hm-ip-name{font-family:var(--font-grotesk);font-size:13px;font-weight:600;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-ip-time{font-family:var(--font-mono);font-size:8.5px;font-weight:700;color:var(--magenta-dim);margin-top:2px;}
.hm-next.hm-quest .hm-next-icon{width:38px;height:38px;font-size:18px;background:rgba(102,252,241,0.10);color:var(--cyan-ink);}
.hm-next.hm-quest .hm-next-name{font-size:15px;margin-top:1px;}
.hm-next.hm-quest .hm-next-sub{color:var(--cyan-ink);margin-top:0;margin-bottom:2px;}
.hm-next.hm-quest .hm-next-arrow{color:var(--cyan-ink);font-size:16px;}

.hm-active{display:flex;align-items:center;gap:12px;background:rgba(102,252,241,0.05);border:1px solid rgba(102,252,241,0.12);border-radius:8px;padding:12px;margin-bottom:12px;cursor:pointer;transition:border-color 0.15s;}
.hm-active:hover{border-color:rgba(102,252,241,0.3);}
.hm-active-icon{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(61,230,208,0.12);border:1px solid rgba(102,252,241,0.35);border-radius:8px;color:var(--cyan-ink);font-size:18px;}
.hm-active-body{flex:1;min-width:0;}
.hm-active-tag{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:3px;}
.hm-active-name{font-family:var(--font-grotesk);font-size:13px;font-weight:600;color:var(--grou-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-active-time{font-family:var(--font-mono);font-size:9px;font-weight:700;color:var(--magenta-dim);margin-top:3px;}
.hm-cta{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--grou-cyan);color:var(--text);border:none;border-radius:6px;padding:8px 12px;font-family:var(--font-mono);font-size:11px;font-weight:700;cursor:pointer;}
.hm-cursor{display:inline-block;width:2px;height:1em;background:var(--grou-magenta);margin-left:3px;vertical-align:text-bottom;animation:hm-blink 1s step-end infinite;}
@keyframes hm-blink{0%,100%{opacity:1;}50%{opacity:0;}}

.hm-prog-fill{height:100%;background:var(--cyan-ink);transition:width 0.8s cubic-bezier(.4,0,.2,1);}
.hm-prog-fill.total{background:var(--cyan-dim);}

.hm-seclabel{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin:0 0 8px;}
.hm-next{display:flex;align-items:center;gap:11px;background:rgba(102,252,241,0.06);border:1px solid rgba(102,252,241,0.18);border-left:2px solid var(--cyan-ink);border-radius:6px;padding:11px 13px;margin-bottom:12px;cursor:pointer;transition:border-color 0.15s;}
.hm-next:hover{border-color:rgba(102,252,241,0.4);border-left-color:var(--cyan-ink);}
.hm-next-icon{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(102,252,241,0.10);border-radius:6px;color:var(--cyan-ink);font-size:15px;}
.hm-next-body{flex:1;min-width:0;}
.hm-next-name{font-family:var(--font-grotesk);font-size:13px;font-weight:600;color:var(--grou-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hm-next-sub{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--cyan-ink);margin-top:2px;}
.hm-next-arrow{color:var(--cyan-ink);font-size:14px;flex-shrink:0;}

/* ── HOME · Misiones disponibles ahora (grilla 2×2 + ver más) ── */
.hm-av-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.hm-av-cell{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:7px;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:9px;padding:12px;cursor:pointer;transition:border-color 0.15s,background 0.15s,transform 0.15s;min-height:112px;font:inherit;}
.hm-av-cell:hover{border-color:var(--rar-edge,rgba(102,252,241,0.45));background:color-mix(in srgb,var(--rar-c,var(--cyan)) 5%,transparent);transform:translateY(-2px);}
/* Cabecera de la celda: ícono + punto de rareza con glow */
.hm-av-top{display:flex;align-items:center;justify-content:space-between;}
.hm-av-icon{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--rar-c,var(--cyan)) 14%,transparent);border-radius:8px;color:var(--rar-ink,var(--cyan-ink));font-size:16px;}
.hm-av-rdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--rar-c,var(--cyan));box-shadow:0 0 8px var(--rar-c,var(--cyan));}
.hm-av-tag{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--rar-ink,var(--cyan-ink));}
.hm-av-name{flex:1;font-family:var(--font-grotesk);font-size:13px;font-weight:600;line-height:1.25;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* Pie de la celda: rareza (mono) + XP en ámbar */
.hm-av-foot{display:flex;align-items:center;justify-content:space-between;}
.hm-av-rar{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--rar-ink,var(--text-3));}
.hm-av-xp{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--amber-ink);}
.hm-av-more{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1px dashed var(--grou-border2);border-radius:8px;padding:10px;margin-bottom:12px;cursor:pointer;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-2);}
.hm-av-more:hover{border-color:var(--cyan-ink);color:var(--cyan-ink);}
.hm-av-more i{font-size:14px;}

.hm-milestone{display:flex;gap:10px;align-items:flex-start;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:13px;}
.hm-milestone i{color:var(--cyan-ink);font-size:17px;flex-shrink:0;margin-top:1px;}
.hm-milestone-label{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin-bottom:3px;}
.hm-milestone-text{font-family:var(--font-grotesk);font-size:13px;color:var(--grou-white);line-height:1.45;}

.hm-reset{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--grou-border);border-radius:6px;color:var(--grou-muted);font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:6px 11px;cursor:pointer;transition:all 0.15s;}
.hm-reset:hover{border-color:var(--grou-border2);color:rgba(0,0,0,0.6);}

/* ══════════════════════════════════════════════════════════════
   PASAPORTE · BOARDING PASS (cada sello = un billete de avión)
   Estados vía --bp-c (color por estado): disponible/progreso=magenta ·
   completado=verde · bloqueado=gris. Fuentes/colores del proyecto.
   ══════════════════════════════════════════════════════════════ */
.bp-header{margin:2px 2px 16px;}
.bp-title{font-family:var(--font-grotesk);font-size:20px;font-weight:700;color:var(--text);line-height:1.1;}
.bp-count{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin-top:5px;}
.bp-count b{color:inherit;font-weight:700;}
/* Banda de nivel (reusa el patrón de ps-band) */
.bp-band{display:flex;align-items:center;gap:9px;margin:16px 0 10px;}
.bp-band-line{flex:1;height:1px;background:var(--grou-border);}
.bp-band-lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px;white-space:nowrap;color:var(--cyan-ink);border:1px solid color-mix(in srgb,var(--cyan-ink) 40%,transparent);background:color-mix(in srgb,var(--cyan-ink) 10%,var(--grou-bg0));}
/* El billete: cuerpo (izq) + talón/stub (der), separados por perforación */
.bp-ticket{display:flex;align-items:stretch;width:100%;text-align:left;margin-bottom:11px;border-radius:14px;overflow:hidden;background:var(--grou-surface);border:1px solid var(--grou-border);cursor:pointer;font:inherit;transition:transform 0.15s,box-shadow 0.15s;box-shadow:0 0 18px color-mix(in srgb,var(--bp-c,var(--grou-border2)) calc(var(--glow)*40%),transparent);}
.bp-ticket.locked{cursor:default;opacity:0.62;box-shadow:none;}
@media(hover:hover)and(pointer:fine){.bp-ticket:not(.locked):hover{transform:translateY(-2px);}}
/* Cuerpo del billete — tinte del color de estado */
.bp-body{flex:1;min-width:0;padding:20px 17px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(120deg,color-mix(in srgb,var(--bp-c,var(--grou-surface)) 22%,var(--grou-surface)),color-mix(in srgb,var(--bp-c,var(--grou-surface)) 8%,var(--grou-surface)));}
.bp-body-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.bp-airline{color:var(--grou-muted);}
.bp-airline b{color:var(--bp-ink,var(--text-2));}
.bp-status{color:var(--bp-ink,var(--grou-muted));white-space:nowrap;}
.bp-miss{color:var(--grou-muted);}
/* Ruta "A2 ····✈···· SEAL" */
.bp-route{display:flex;align-items:center;gap:8px;margin:11px 0 9px;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--bp-ink,var(--text-2));}
.bp-route-line{flex:1;height:0;border-top:1.5px dashed color-mix(in srgb,var(--bp-c,var(--grou-border2)) 55%,transparent);position:relative;}
.bp-route i{color:var(--bp-ink,var(--text-2));font-size:15px;}
.bp-name{font-family:var(--font-grotesk);font-size:16px;font-weight:700;color:var(--text);line-height:1.15;}
.bp-ticket.locked .bp-name{color:var(--text-3);}
.bp-arc{font-family:var(--font-grotesk);font-size:12px;color:var(--text-3);line-height:1.35;margin-top:3px;}
/* Talón/stub derecho — XP + acción, con perforación punteada */
.bp-stub{flex-shrink:0;width:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;background:color-mix(in srgb,var(--bp-c,var(--surface-2)) 16%,var(--grou-surface));border-left:2px dashed color-mix(in srgb,var(--bp-c,var(--grou-border2)) 45%,var(--grou-border));position:relative;}
.bp-stub-lbl{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);}
.bp-stub-xp{font-family:var(--font-mono);font-size:19px;font-weight:700;color:var(--bp-ink,var(--text));line-height:1;}
.bp-stub-act{font-size:17px;color:var(--bp-ink,var(--grou-muted));margin-top:3px;}
/* Perforaciones (semicírculos) arriba y abajo de la línea del stub */
.bp-stub::before,.bp-stub::after{content:'';position:absolute;left:-6px;width:10px;height:10px;border-radius:50%;background:var(--grou-bg0);}
.bp-stub::before{top:-5px;}
.bp-stub::after{bottom:-5px;}
/* Texto de "qué falta para desbloquear" bajo el nombre (billete gris) */
.bp-unlock{display:flex;align-items:flex-start;gap:5px;margin-top:8px;font-family:var(--font-grotesk);font-size:12px;line-height:1.35;color:var(--text-2);}
.bp-unlock i{font-size:13px;color:var(--text-3);flex-shrink:0;margin-top:1px;}

/* ══════════════════════════════════════════════════════════════
   PASAPORTE · CAMINO DE SELLOS (INERTE: reemplazado por boarding pass;
   las clases ps-node/ps-band se conservan porque el DETALLE de misiones
   sigue usando el camino de nodos).
   ══════════════════════════════════════════════════════════════ */
.ps-path{position:relative;padding:2px 0 8px;}
/* Riel punteado central */
.ps-path-rail{position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background:repeating-linear-gradient(var(--grou-border2) 0 8px,transparent 8px 16px);z-index:0;}
/* Banda separadora de NIVEL CEFR (A1 · A2 · …) */
.ps-band{position:relative;z-index:2;display:flex;align-items:center;gap:9px;margin:6px 0 4px;}
.ps-band-line{flex:1;height:1px;background:var(--grou-border);}
.ps-band-lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px;white-space:nowrap;color:var(--band-c,var(--cyan-ink));border:1px solid color-mix(in srgb,var(--band-c,var(--cyan-ink)) 40%,transparent);background:color-mix(in srgb,var(--band-c,var(--cyan-ink)) 10%,var(--grou-bg0));}
/* Fila de nodo: alterna izquierda/derecha */
.ps-node-row{position:relative;display:flex;align-items:center;gap:13px;min-height:96px;}
.ps-node-row.left{flex-direction:row;padding-right:34%;}
.ps-node-row.right{flex-direction:row-reverse;padding-left:34%;}
/* El sello (nodo circular con ícono) */
.ps-node{position:relative;z-index:2;width:72px;height:72px;flex-shrink:0;border-radius:22px;border:2px solid var(--node-edge,var(--grou-border2));background:var(--node-face,var(--grou-surface));display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform 0.15s;}
.ps-node > .ti{font-size:26px;color:var(--node-ico,var(--text-2));}
@media(hover:hover)and(pointer:fine){.ps-node:not(.locked):hover{transform:scale(1.05);}}
.ps-node.locked{cursor:default;}
/* Distintivo (esquina) + número (abajo) */
.ps-node-badge{position:absolute;top:-7px;right:-7px;font-size:19px;background:var(--grou-bg0);border-radius:50%;line-height:1;}
.ps-node-num{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-family:var(--font-mono);font-size:9px;font-weight:700;border-radius:6px;padding:1px 7px;color:var(--num-fg,#05070c);background:var(--num-bg,var(--cyan-ink));}
/* Etiqueta al lado del nodo */
.ps-node-lbl{flex:1;min-width:0;}
.ps-node-row.left  .ps-node-lbl{text-align:left;}
.ps-node-row.right .ps-node-lbl{text-align:right;}
.ps-node-tag{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--node-ico,var(--grou-muted));}
/* "Próximamente": el nodo es gris (como bloqueado) pero el tag va en cyan
   fuerte para distinguir "sin contenido aún" de "bloqueado por gating". */
.ps-node-tag.ps-tag-coming{color:var(--cyan-ink);}
/* "Repaso": tag siempre cyan, sin importar el estado del nodo. */
.ps-node-tag.ps-tag-review{color:var(--cyan-ink);}
.ps-node-name{font-family:var(--font-grotesk);font-size:15px;font-weight:700;color:var(--grou-white);line-height:1.15;margin-top:2px;}
.ps-node-arc{font-family:var(--font-grotesk);font-size:11px;color:var(--text-3);line-height:1.35;margin-top:3px;}
/* Estados (setean las variables --node-* y --num-*) */
.ps-node.done{--node-edge:var(--cyan-ink);--node-ico:var(--cyan-ink);--node-face:color-mix(in srgb,var(--cyan) 16%,var(--grou-surface));box-shadow:0 0 16px color-mix(in srgb,var(--cyan) calc(var(--glow)*70%),transparent);}
.ps-node.active,.ps-node.progress{--node-edge:var(--grou-magenta);--node-ico:var(--magenta-dim);--node-face:color-mix(in srgb,var(--magenta) 14%,var(--grou-surface));--num-bg:var(--grou-magenta);animation:hm-pulse-ring 2.2s ease-in-out infinite;}
.ps-node.next{--node-edge:color-mix(in srgb,var(--cyan) 45%,transparent);--node-ico:var(--cyan-ink);--node-face:var(--grou-surface);}
.ps-node.locked{--node-edge:var(--grou-border2);--node-ico:var(--text-3);--node-face:var(--surface-2);--num-bg:var(--grou-border2);--num-fg:var(--text-3);opacity:0.6;}
.ps-node-locked-name{color:var(--text-3);}
/* Colores del distintivo por estado */
.ps-node-badge.done{color:var(--cyan-ink);}
.ps-node-badge.active,.ps-node-badge.progress{color:var(--magenta-dim);}
.ps-node-badge.next{color:var(--cyan-ink);}
.ps-node-badge.locked{color:var(--text-3);}

/* ── DETALLE de sello: mismo camino, banda de ESCENARIO + nodos ── */
/* Banda de escenario (objetivo narrativo): tono neutro, se distingue de las
   bandas de nivel (que van con el color del nivel). Texto que puede envolver. */
.ps-band-scn{color:var(--grou-muted);border-color:var(--grou-border2);background:var(--grou-bg0);letter-spacing:0.06em;max-width:64%;white-space:normal;text-align:center;line-height:1.35;padding:5px 12px;}
/* Objetivo del escenario (detalle): card DESTACADA con diana, resaltada */
.mm-goal{position:relative;z-index:2;display:flex;align-items:flex-start;gap:9px;margin:20px 0 12px;padding:12px 14px;background:color-mix(in srgb,var(--cyan) 7%,var(--grou-surface));border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);border-radius:12px;font-family:var(--font-grotesk);font-size:13.5px;font-weight:600;color:var(--text);line-height:1.4;}
.mm-goal i{color:var(--cyan-ink);font-size:17px;flex-shrink:0;margin-top:1px;}
/* Estados en el detalle: EN PROGRESO=magenta · DISPONIBLE=cyan · COMPLETADO=VERDE
   (el verde solo aquí; en el Pasaporte "done" sigue siendo cyan/sello). */
#missions-list .ps-node.done{--node-edge:#16a34a;--node-ico:#16a34a;--node-face:color-mix(in srgb,#16a34a 15%,var(--grou-surface));--num-bg:#16a34a;box-shadow:0 0 16px color-mix(in srgb,#16a34a calc(var(--glow)*70%),transparent);}
#missions-list .ps-node-badge.done{color:#16a34a;}
/* Nodos: TODOS iguales, un poco más grandes; el texto NO cruza el riel central.
   Fila alineada arriba para que el texto multilínea no empuje el nodo. */
/* Separación simétrica: el primer nodo tras la card de objetivo debe quedar
   tan separado como el último nodo del bloque anterior queda de la card. */
#missions-list .mm-goal{margin:14px 0 34px;}
#missions-list .ps-node-row{min-height:86px;align-items:flex-start;}
#missions-list .ps-node{width:66px;height:66px;border-radius:20px;margin-top:2px;}
#missions-list .ps-node > .ti{font-size:24px;}
#missions-list .ps-node-name{font-size:13.5px;line-height:1.25;}
#missions-list .ps-node-tag,#missions-list .ps-node-arc{line-height:1.3;}
/* Padding hasta el riel (50%) → el texto queda de un solo lado, sin cruzarlo */
#missions-list .ps-node-row.left{padding-right:52%;}
#missions-list .ps-node-row.right{padding-left:52%;}

/* Botón "Repasar niveles anteriores" (arriba del Pasaporte) */
.ps-reviewbtn{width:100%;display:flex;align-items:center;gap:11px;padding:13px 15px;margin-bottom:14px;background:color-mix(in srgb,var(--cyan) 5%,var(--grou-surface));border:1px solid color-mix(in srgb,var(--cyan) 28%,transparent);border-radius:12px;cursor:pointer;text-align:left;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-2);transition:border-color 0.15s,background 0.15s;}
.ps-reviewbtn:hover{border-color:var(--cyan-ink);background:color-mix(in srgb,var(--cyan) 9%,var(--grou-surface));color:var(--text);}
.ps-reviewbtn>.ti-history{font-size:18px;color:var(--cyan-ink);}
.ps-reviewbtn span{flex:1;}
.ps-reviewbtn-go{font-size:16px;color:var(--cyan-ink);}

/* Vista de repaso (overlay a pantalla completa) */
/* Mismo ancho mobile/app que la .app (max-width 480, centrado), no full-width.
   El box-shadow lateral rellena los lados en desktop con el mismo fondo para no
   dejar ver el contenido de detrás. */
.review-overlay{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;z-index:120;background:var(--grou-bg0);box-shadow:0 0 0 100vw var(--grou-bg0);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px 90px;}
.review-overlay[hidden]{display:none;}
body.review-open{overflow:hidden;}
.review-top{position:sticky;top:0;background:var(--grou-bg0);padding:16px 0 12px;border-bottom:1px solid var(--grou-border);margin-bottom:16px;}
.review-back{display:inline-flex;align-items:center;gap:4px;background:transparent;border:0;cursor:pointer;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--cyan-ink);padding:0;margin-bottom:10px;}
.review-back i{font-size:16px;}
/* Cabecera con el patrón del proyecto: eyebrow mono + título Grotesk (no XXL) */
.review-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin-bottom:4px;}
.review-title{font-family:var(--font-grotesk);font-size:18px;font-weight:700;color:var(--text);line-height:1.15;}
.review-sub{font-family:var(--font-grotesk);font-size:13px;color:var(--text-2);margin-top:4px;line-height:1.35;}
/* La vista de repaso reutiliza las tarjetas .ps-sello del Pasaporte (mismo
   diseño y colores); aquí solo el contenedor del overlay y el estado vacío. */
.rv-empty{text-align:center;color:var(--text-3);font-family:var(--font-grotesk);font-size:14px;padding:40px 20px;}
.rv-summary{margin-bottom:16px;}

/* ── PASAPORTE · encabezado del resumen "SELLOS OBTENIDOS · X de Y" ── */
.ps-overview-lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin:2px 0 12px;}

/* ── PASAPORTE · tarjeta documento (Perfil): escalones claro → oscuro ── */
/* PR18 minimal: tarjeta limpia sobre superficie del sistema (respeta tema).
   Texto en --text (negro/blanco auto); identidad CYAN (logos/labels/sellos)
   + MAGENTA (rango). El tier ya no tiñe la tarjeta. */
.pp-card{position:relative;border-radius:14px;padding:18px 18px 12px;margin-bottom:16px;overflow:hidden;color:var(--text);background:var(--grou-surface);border:1px solid var(--grou-border);--pp-fg:var(--text);--pp-muted:var(--grou-muted);--pp-border:var(--grou-border);--pp-mrz-bg:var(--surface-2);--pp-accent:var(--cyan-ink);--pp-rank:var(--magenta-dim);}
.pp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px;padding-right:74px;}
.pp-doc{font-family:var(--font-mono);font-size:7.5px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--pp-muted);line-height:1.6;}
.pp-doc b{display:block;color:var(--pp-accent);font-size:9px;letter-spacing:0.18em;}
.pp-crest{font-size:22px;color:var(--pp-accent);opacity:0.92;flex-shrink:0;}
/* QR de la tarjeta (reemplaza el crest): botón con canvas, abre el pase.
   Posición ABSOLUTA en la esquina → puede crecer sin empujar la tarjeta. */
.pp-qr{position:absolute;top:16px;right:16px;width:62px;height:62px;padding:6px;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:box-shadow 0.14s,transform 0.14s;}
.pp-qr:hover{transform:translateY(-1px);box-shadow:0 0 0 2px color-mix(in srgb,var(--cyan-ink) 40%,transparent);}
.pp-qr-canvas{width:100%;height:100%;display:block;border-radius:4px;image-rendering:pixelated;}
.pp-holder-lbl{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--pp-muted);margin-bottom:3px;}
.pp-holder{font-family:var(--font-grotesk);font-size:18px;font-weight:700;color:var(--pp-fg);line-height:1.1;margin-bottom:11px;}
.pp-rank-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:13px;}
.pp-chip{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--pp-border);color:var(--pp-fg);}
.pp-chip.accent{border-color:var(--pp-rank);color:var(--pp-rank);}
/* VISADOS / SELLOS: pestañas por nivel (segmentado) + sellos círculos grandes */
.pp-visas-lbl{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--pp-muted);margin:4px 0 8px;}
.pp-visas-tabs{display:flex;gap:8px;margin-bottom:14px;}
.pp-visa-tab{flex:1;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.04em;color:var(--text-2);background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:11px 0;cursor:pointer;transition:all 0.14s;}
.pp-visa-tab:hover{border-color:var(--grou-border2);}
.pp-visa-tab.on{background:var(--grou-cyan);border-color:var(--grou-cyan);color:#0b1417;}
.pp-stamps{margin-bottom:13px;}
.pp-seal-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:11px;}
.pp-seal-lvl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--pp-muted);}
.pp-seal-count{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--pp-muted);}
.pp-seal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
/* Cada sello = "zona de sello" (casilla): disco con icono + nombre del mundo debajo */
.pp-seal{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:8px;background:var(--surface-2);border:1px solid var(--grou-border);}
.pp-seal-disc{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;}
.pp-seal-name{font-family:var(--font-mono);font-size:6.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;text-align:center;line-height:1.15;color:var(--pp-muted);width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.pp-seal.ghost .pp-seal-disc{border:1.5px dashed var(--grou-border2);}
.pp-seal.ghost i{font-size:17px;color:var(--grou-faint);}
.pp-seal.earned{background:color-mix(in srgb,var(--pp-accent) 7%,var(--surface-2));border-color:color-mix(in srgb,var(--pp-accent) 30%,transparent);}
.pp-seal.earned .pp-seal-disc{border:2px solid var(--pp-accent);background:color-mix(in srgb,var(--pp-accent) 10%,transparent);}
.pp-seal.earned i{font-size:19px;color:var(--pp-accent);}
.pp-seal.earned .pp-seal-name{color:var(--pp-accent);}
.pp-stamps-empty{font-family:var(--font-mono);font-size:8px;letter-spacing:0.08em;text-transform:uppercase;color:var(--pp-muted);}
.pp-mrz{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;color:var(--pp-fg);opacity:0.72;background:var(--pp-mrz-bg);border-top:1px solid var(--pp-border);margin:0 -18px -12px;padding:9px 18px;}
.pp-mrz div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6;}

/* ── PASAPORTE · próximo sello ── */
.pp-next{margin:2px 0 16px;background:var(--grou-surface);border:1px dashed color-mix(in srgb,var(--cyan) 26%,var(--grou-border2));border-radius:12px;padding:15px;}
.pp-next-lbl{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin-bottom:8px;}
/* Línea de tiempo del "próximo sello": termina el actual → desbloquea el siguiente */
.pp-tl{position:relative;margin-top:6px;}
.pp-tl-step{position:relative;display:flex;gap:12px;padding-bottom:16px;}
.pp-tl-step:last-child{padding-bottom:0;}
.pp-tl-step:not(:last-child)::before{content:'';position:absolute;left:8px;top:18px;bottom:0;width:2px;background:var(--grou-border2);}
.pp-tl-node{position:relative;z-index:1;flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
.pp-tl-dot{width:14px;height:14px;border-radius:50%;background:var(--cyan-ink);box-shadow:0 0 0 3px rgba(11,122,114,0.16);}
.pp-tl-lock{font-size:15px;color:var(--grou-muted);}
.pp-tl-body{flex:1;min-width:0;padding-top:-1px;}
.pp-tl-title{font-family:var(--font-grotesk);font-size:13px;font-weight:600;color:var(--text);line-height:1.3;}
.pp-tl-title b{font-weight:700;}
.pp-tl-bar{height:4px;background:rgba(0,0,0,0.08);overflow:hidden;border-radius:2px;margin-top:7px;}
.pp-tl-fill{height:100%;background:var(--cyan-ink);transition:width 0.8s cubic-bezier(.4,0,.2,1);}
.pp-tl-meta{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.05em;color:var(--text-3);margin-top:5px;text-transform:uppercase;}
.pp-tl-hint{font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.35;}

/* ── PASSPORT · tarjeta compacta en perfil ── */
.pf-passport{cursor:pointer;transition:transform 0.15s;}
.pf-passport .pp-card{margin-bottom:0;}
@media(hover:hover)and(pointer:fine){.pf-passport:hover .pp-card{transform:translateY(-2px);}}
.pp-compact .pp-card{padding:14px 14px 10px;}
.pp-compact .pp-holder{font-size:15px;margin-bottom:9px;}
.pp-compact .pp-mrz{font-size:8px;margin:0 -14px -10px;padding:7px 14px;}

/* ── QUEST LOG REDESIGN ── */
.ql-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;padding:6px 10px 6px 6px;background:transparent;border:1px solid var(--grou-border);border-radius:6px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grou-muted);cursor:pointer;transition:border-color 0.15s,color 0.15s;}
.ql-back:hover{border-color:var(--cyan-ink);color:var(--cyan-ink);}
.ql-back i{font-size:13px;}
.ql-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.ql-header-icon{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(102,252,241,0.10);border:1px solid rgba(102,252,241,0.35);border-radius:8px;color:var(--cyan-ink);font-size:20px;}
.ql-header-body{flex:1;min-width:0;}
.ql-header-num{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:3px;}
.ql-header-name{font-family:var(--font-grotesk);font-size:18px;font-weight:700;color:var(--grou-white);margin-bottom:8px;}
/* Fila nombre del sello + badge de contexto de nivel (a la derecha) */
.ql-header-nrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.ql-header-nrow .ql-header-name{margin-bottom:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ql-bar{height:3px;background:rgba(0,0,0,0.08);overflow:hidden;}
.ql-bar-fill{height:100%;background:var(--cyan-ink);transition:width 0.8s cubic-bezier(.4,0,.2,1);}

.ql-pills{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap;}
.ql-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:5px 9px;border-radius:0;border:1px solid;}
.ql-pdot{width:4px;height:4px;flex-shrink:0;}
.ql-pill.done{background:rgba(102,252,241,0.08);border-color:rgba(102,252,241,0.35);color:var(--cyan-ink);}
.ql-pill.done .ql-pdot{background:var(--cyan-ink);}
.ql-pill.active{background:rgba(255,23,139,0.06);border-color:rgba(255,23,139,0.3);color:var(--magenta-dim);}
.ql-pill.active .ql-pdot{background:var(--magenta-dim);}
.ql-pill.locked{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.08);color:rgba(0,0,0,0.30);}
.ql-pill.locked .ql-pdot{background:rgba(0,0,0,0.25);}

.ql-goal{display:flex;align-items:flex-start;gap:8px;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:10px;padding:11px 13px;margin-bottom:12px;font-family:var(--font-grotesk);font-size:13px;color:var(--grou-white);line-height:1.45;}
.ql-goal i{color:var(--cyan-ink);font-size:15px;flex-shrink:0;margin-top:2px;}

/* ── Detalle de sello · PESTAÑAS de nivel (A1 | A2 | B1…) ── */
.mm-lvltabs{display:flex;gap:6px;margin-bottom:12px;}
.mm-lvltab{flex:1;padding:9px 0;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:9px;cursor:pointer;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--grou-muted);transition:border-color 0.15s,background 0.15s,color 0.15s;}
.mm-lvltab.active{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 10%,var(--grou-surface));color:var(--cyan-ink);}
@media(hover:hover)and(pointer:fine){.mm-lvltab:not(.active):hover{border-color:var(--grou-border2);color:var(--text-2);}}
/* Badge de contexto del nivel activo (tu nivel / anterior / siguiente),
   a la derecha del nombre del sello. Pill compacto con color por estado. */
.mm-lvlctx{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;padding:4px 9px;border-radius:20px;border:1px solid var(--ctx-c,var(--grou-border2));color:var(--ctx-c,var(--grou-muted));background:color-mix(in srgb,var(--ctx-c,var(--grou-muted)) 9%,transparent);}
.mm-lvlctx:empty{display:none;}
.mm-lvlctx i{font-size:12px;}
.mm-lvlctx-current{--ctx-c:var(--cyan-ink);}
.mm-lvlctx-prev{--ctx-c:var(--amber-ink);}
.mm-lvlctx-next{--ctx-c:var(--grou-muted);}


/* ── PROFILE REDESIGN ── */
.pf-seclabel{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);margin:18px 0 10px;}

/* Pasaporte protagonista: tarjeta como única cabecera del Perfil */
.pf-passport-lead{margin-bottom:6px;}

.pf-troph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pf-troph{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:13px 8px;text-align:center;}
.pf-troph-icon{font-size:22px;margin-bottom:5px;opacity:0.4;filter:grayscale(1);transition:opacity 0.2s,filter 0.2s;}
.pf-troph.earned .pf-troph-icon{opacity:1;filter:none;}
.pf-troph-name{font-family:var(--font-grotesk);font-size:12px;font-weight:700;color:var(--grou-muted);margin-bottom:3px;line-height:1.2;}
.pf-troph-desc{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--grou-faint);line-height:1.4;}
.pf-troph.earned{background:rgba(255,23,139,0.05);border-color:rgba(255,23,139,0.2);}
.pf-troph.earned .pf-troph-name{color:var(--magenta-dim);}
.pf-troph.earned .pf-troph-desc{color:var(--grou-muted);}
.pf-troph.cy.earned{background:rgba(102,252,241,0.05);border-color:rgba(102,252,241,0.2);}
.pf-troph.cy.earned .pf-troph-name{color:var(--cyan-ink);}
.pf-note{font-family:var(--font-grotesk);font-size:12px;color:var(--grou-muted);background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:13px;line-height:1.5;}
.pf-note i{color:var(--cyan-ink);}

/* Logros: lista con barra de progreso (acento ámbar, distinto de trofeos/insignias) */
/* Logros (PR18): fila con ANILLO de progreso a la izquierda + nombre/desc + contador */
.pf-ach-list{display:flex;flex-direction:column;gap:8px;}
.pf-ach{display:flex;gap:12px;align-items:center;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:10px;padding:11px 14px;}
.pf-ach.earned{background:color-mix(in srgb,var(--amber-ink) 8%,var(--grou-surface));border-color:color-mix(in srgb,var(--amber-ink) 28%,transparent);}
/* Anillo SVG con emoji al centro */
.pf-ach-ring{position:relative;width:44px;height:44px;flex-shrink:0;}
.pf-ach-ringsvg{width:44px;height:44px;display:block;}
.pf-ring-track{fill:none;stroke:var(--grou-border);stroke-width:3;}
.pf-ring-prog{fill:none;stroke:var(--cyan-ink);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 0.4s;}
.pf-ach.earned .pf-ring-prog{stroke:var(--amber-ink);}
.pf-ach-emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:17px;opacity:0.45;filter:grayscale(1);transition:opacity 0.2s,filter 0.2s;}
.pf-ach.earned .pf-ach-emoji{opacity:1;filter:none;}
.pf-ach-body{flex:1;min-width:0;}
.pf-ach-name{font-family:var(--font-grotesk);font-size:14px;font-weight:700;color:var(--grou-white);line-height:1.2;}
.pf-ach.earned .pf-ach-name{color:var(--amber-ink);}
.pf-ach-desc{font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--grou-faint);line-height:1.4;margin-top:3px;}
.pf-ach-count{font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.02em;color:var(--cyan-ink);flex-shrink:0;}
.pf-ach.earned .pf-ach-count{color:var(--magenta-dim);}

/* Panel de vocabulario activo (dentro del modal del challenge) */
.vocab-panel{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:12px;margin-top:12px;}
.vocab-panel-hdr{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:10px;display:flex;align-items:center;gap:5px;}
.vocab-pills{display:flex;flex-wrap:wrap;gap:6px;}
.vocab-pill{font-family:var(--font-grotesk);font-size:13px;font-weight:600;color:var(--grou-white);background:var(--grou-bg1);border:1px solid var(--grou-border2);border-radius:6px;padding:6px 11px;cursor:pointer;transition:background 0.15s,border-color 0.15s,color 0.15s;}
.vocab-pill.saved{background:rgba(102,252,241,0.12);border-color:var(--cyan-ink);color:var(--cyan-ink);}
.vocab-pill i{font-size:13px;vertical-align:-1px;}
.vocab-count{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--grou-muted);margin-top:10px;}

.step-n{width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,0.05);color:var(--gray-bright);border:1px solid rgba(0,0,0,0.12);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.step-t{font-size:13px;color:var(--text);line-height:1.55;}
.btn-row{display:flex;gap:8px;margin-top:16px;}
.btn-row .btn{flex:1;}
.btn-row .btn-teal{flex:2;}
.eval-chat{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;max-height:320px;overflow-y:auto;padding-right:2px;}
.eval-msg{max-width:88%;}
.eval-msg.ai{align-self:flex-start;}
.eval-msg.user{align-self:flex-end;}
.eval-bubble{padding:10px 13px;border-radius:var(--radius-lg);font-size:13px;line-height:1.6;}
.eval-bubble.ai{background:rgba(0,0,0,0.04);color:var(--text);border:1px solid rgba(0,0,0,0.08);border-radius:4px var(--radius-lg) var(--radius-lg) var(--radius-lg);}
.eval-bubble.user{background:var(--magenta);color:#fff;border-radius:var(--radius-lg) 4px var(--radius-lg) var(--radius-lg);box-shadow:0 0 10px rgba(255,23,139,0.3);}
.eval-input-row{display:flex;gap:8px;align-items:flex-end;}
.eval-input-row textarea{margin-bottom:0;flex:1;min-height:44px;max-height:120px;}
.eval-send{width:40px;height:40px;border-radius:var(--radius);background:var(--magenta);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:all 0.15s;}
.eval-send:hover{background:var(--magenta-dim);}
.eval-send:disabled{opacity:0.4;cursor:not-allowed;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--grou-white);border:1px solid rgba(0,0,0,0.12);color:#ffffff;padding:9px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;opacity:0;transition:all 0.2s;z-index:300;pointer-events:none;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.fab{position:fixed;bottom:20px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--magenta);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 12px rgba(255,23,139,0.3);transition:all 0.15s;z-index:50;}
.fab:hover{transform:scale(1.04);}
/* logout btn in profile */
.btn-danger{background:transparent;color:var(--gray);border:1px solid rgba(0,0,0,0.10);padding:9px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;width:100%;font-family:inherit;margin-top:4px;transition:all 0.15s;}
.btn-danger:hover{background:rgba(0,0,0,0.04);}
/* spinner overlay */
.spinner-overlay{position:fixed;inset:0;z-index:998;background:var(--grou-bg0);display:flex;align-items:center;justify-content:center;gap:4px;}
.spinner-overlay.hidden{display:none;}
.spin-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan-ink);animation:pulse 1.2s ease-in-out infinite;}
.spin-dot:nth-child(2){animation-delay:.2s;}
.spin-dot:nth-child(3){animation-delay:.4s;}

/* welcome screen (Apple-style) — ~2s total */
.welcome-screen{position:fixed;inset:0;z-index:997;background:var(--grou-bg0);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.45s ease;}
.welcome-screen.show{opacity:1;pointer-events:all;}
.wel-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 28px;width:100%;max-width:360px;opacity:0;transform:translateY(10px);transition:opacity 0.5s ease,transform 0.5s ease;}
.welcome-screen.show .wel-card{opacity:1;transform:translateY(0);}
.wel-eyebrow{font-family:var(--font-grotesk);font-size:30px;font-weight:700;color:var(--grou-white);line-height:1.08;margin-bottom:6px;}
.wel-name{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:26px;}
.wel-card2{width:100%;text-align:left;background:var(--grou-surface);border:1px solid var(--grou-border2);border-radius:10px;overflow:hidden;opacity:0;transition:opacity 0.4s ease 0.1s;}
.wel-card2:empty{display:none;}
.wel-card2:not(:empty){opacity:1;}
.wel-card2 .wc-head{display:flex;align-items:center;gap:11px;padding:13px 15px;border-bottom:1px solid var(--grou-border);}
.wel-card2 .wc-ico{width:36px;height:36px;flex-shrink:0;border-radius:8px;background:rgba(102,252,241,0.10);border:1px solid rgba(102,252,241,0.4);display:flex;align-items:center;justify-content:center;color:var(--cyan-ink);font-size:18px;}
.wel-card2 .wc-world{font-family:var(--font-grotesk);font-size:15px;font-weight:700;color:var(--grou-white);line-height:1.15;}
.wel-card2 .wc-xp{display:flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.04em;color:var(--cyan-ink);margin-top:3px;}
.wel-card2 .wc-rank{display:inline-flex;align-items:center;gap:3px;margin-left:6px;padding-left:7px;border-left:1px solid var(--grou-border2);color:var(--magenta-dim);text-transform:uppercase;}
.wel-card2 .wc-body{padding:13px 15px;}
.wel-card2 .wc-lbl{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--magenta-dim);margin-bottom:5px;}
.wel-card2 .wc-mission{font-family:var(--font-grotesk);font-size:15px;font-weight:600;color:var(--grou-white);line-height:1.3;}

/* selects del onboarding (ubicación) — heredan .auth-input + flecha nativa */
#auth-wall .ob-select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--grou-muted) 50%),linear-gradient(135deg,var(--grou-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer;}
#auth-wall .ob-select:disabled{opacity:0.5;cursor:not-allowed;}
#auth-wall .ob-select option{background:var(--grou-surface);color:var(--grou-white);}

/* ── JOURNEY / TIMELINE ── */
.journey-header{margin-bottom:14px;}
.journey-title{font-family:'Nunito Sans',sans-serif;font-size:22px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;}
.journey-title i{color:var(--cyan-ink);}
.journey-sub{font-size:13px;color:var(--text-3);margin-top:2px;}
.tl-card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:13px 14px;margin-bottom:8px;}
.tl-card:last-child{margin-bottom:0;}
.tl-mock-tag{font-size:9px;font-weight:700;color:var(--gray-dim);background:rgba(0,0,0,0.04);border:1px solid var(--border);padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:0.04em;margin-left:6px;}

/* ── JOURNEY REDESIGN (modern gamer) ── */
#s-journey .journey-title{font-family:var(--font-grotesk);font-size:20px;font-weight:700;color:var(--grou-white);letter-spacing:0;}
#s-journey .journey-title i{color:var(--cyan-ink);}
#s-journey .journey-sub{font-family:var(--font-grotesk);font-size:13px;color:var(--grou-muted);}

#s-journey .tab-sw{display:flex;gap:6px;background:transparent;border:none;padding:0;margin-bottom:14px;}
#s-journey .tab-o{flex:1;text-align:center;padding:9px 0;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:0;}
#s-journey .tab-o.active{background:rgba(102,252,241,0.12);border-color:rgba(102,252,241,0.45);color:var(--cyan-ink);font-weight:700;}

.jr-intro{font-family:var(--font-grotesk);font-size:12px;color:var(--grou-muted);background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:11px 13px;margin-bottom:16px;line-height:1.5;}
.jr-intro i{color:var(--cyan-ink);}

#s-journey .tl-card{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:13px 14px;margin-bottom:8px;}
#s-journey .tl-swipe{position:relative;margin-bottom:8px;border-radius:8px;overflow:hidden;touch-action:pan-y;}
#s-journey .tl-swipe .tl-card{margin-bottom:0;position:relative;z-index:1;will-change:transform;transition:transform 0.28s cubic-bezier(.4,0,.2,1);cursor:grab;-webkit-user-select:none;user-select:none;}
#s-journey .tl-swipe .tl-card.open{cursor:grabbing;}
#s-journey .tl-mock-tag{font-family:var(--font-mono);font-size:7px;font-weight:700;color:var(--grou-muted);background:rgba(0,0,0,0.04);border:1px solid var(--grou-border);padding:2px 6px;border-radius:0;text-transform:uppercase;letter-spacing:0.08em;margin-left:8px;}

/* ── LÍNEA DE VUELO (timeline tipo ruta de viaje) ──────────────────────── */
/* ══ JOURNEY como TABLERO DE LLEGADAS (arrivals board) ═══════════════
   Andén (línea + pin) a la izquierda; cada entrada es una fila de vuelo:
   FECHA (ámbar mono) · MISIÓN (mayúsc mono) · chip ESTADO. */
.jr-tl{position:relative;}
.jr-step{position:relative;padding-left:46px;padding-bottom:8px;}
/* andén: línea punteada que conecta los puntos (reciente → antiguo) */
.jr-step::before{content:'';position:absolute;left:17px;top:32px;bottom:-2px;border-left:2px dashed color-mix(in srgb,var(--cyan-ink) 38%,transparent);}
.jr-step:last-child::before{display:none;}
/* Cabecera de tablero: "LLEGADAS · SELLO" + contador */
.jr-band{display:flex;align-items:center;gap:9px;margin:20px 0 0;padding-left:46px;}
.jr-band:first-child{margin-top:0;}
.jr-band-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,var(--cyan-ink) 10%,var(--grou-surface));border:1px solid color-mix(in srgb,var(--cyan-ink) 30%,transparent);}
.jr-band-ico i{font-size:14px;color:var(--cyan-ink);}
.jr-band-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--magenta-dim);white-space:nowrap;}
.jr-band-name{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--grou-white);white-space:nowrap;}
.jr-band-name::before{content:'· ';color:var(--grou-muted);}
.jr-band-line{flex:1;height:1px;background:var(--grou-border2);}
.jr-band-count{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--amber-ink);white-space:nowrap;}
/* Fila de columnas del tablero: FECHA · MISIÓN · ESTADO */
.jr-cols{display:flex;align-items:center;gap:10px;padding:8px 13px 6px 59px;font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-faint);}
.jr-col-date{width:58px;flex-shrink:0;}
.jr-col-mission{flex:1;min-width:0;}
.jr-col-status{flex-shrink:0;}

/* Marcador (pin del andén): gris tenue; el activo hereda acento del estado. */
.jr-node{position:absolute;left:0;top:1px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--grou-surface);border:1px solid var(--grou-border);}
.jr-node i{font-size:15px;color:var(--grou-faint);}
.jr-step.active .jr-node{border-color:var(--grou-border2);}
/* Llegada de HOY (ATERRIZANDO): pin magenta que resalta en el andén */
.jr-step.st-boarding .jr-node{border-color:color-mix(in srgb,var(--grou-magenta) 55%,var(--grou-border));background:color-mix(in srgb,var(--grou-magenta) 8%,var(--grou-surface));}
.jr-step.st-boarding .jr-node i{color:var(--grou-magenta);}
/* Fila de vuelo (clickeable): fecha + misión + estado en una línea de tablero */
.jr-head{width:100%;text-align:left;font:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;background:var(--grou-surface);border:1px solid var(--grou-border);border-left:2px solid var(--grou-border2);border-radius:0;padding:12px 13px;transition:background 0.14s;}
.jr-head:hover{background:var(--surface-2);}
/* acento izquierdo por estado en la fila */
.jr-step.st-sealed   .jr-head{border-left-color:var(--cyan-ink);}
.jr-step.st-boarding .jr-head{border-left-color:var(--grou-magenta);background:color-mix(in srgb,var(--grou-magenta) 5%,var(--grou-surface));}
.jr-date{width:58px;flex-shrink:0;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--amber-ink);line-height:1.15;}
.jr-today{display:block;font-size:7px;letter-spacing:0.1em;color:var(--magenta-dim);animation:jrBlink 1.4s steps(1,end) infinite;}
@keyframes jrBlink{50%{opacity:0.25;}}
.jr-mission{flex:1;min-width:0;font-family:var(--font-mono);font-size:12px;font-weight:400;letter-spacing:0.03em;text-transform:uppercase;color:var(--grou-white);line-height:1.25;overflow:hidden;text-overflow:ellipsis;}
/* Chip de ESTADO: SELLADO=cyan · ATERRIZANDO=magenta · PENDIENTE=ámbar */
.jr-status{flex-shrink:0;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;padding:4px 8px;border-radius:0;border:1px solid;white-space:nowrap;}
.st-sealed   .jr-status{color:var(--cyan-ink);border-color:color-mix(in srgb,var(--cyan-ink) 35%,transparent);background:color-mix(in srgb,var(--cyan-ink) 9%,var(--grou-surface));}
.st-boarding .jr-status{color:var(--magenta-dim);border-color:color-mix(in srgb,var(--magenta-dim) 35%,transparent);background:color-mix(in srgb,var(--magenta-dim) 8%,var(--grou-surface));animation:jrBlink 1.4s steps(1,end) infinite;}
.st-pending  .jr-status{color:var(--amber-ink);border-color:color-mix(in srgb,var(--amber-ink) 35%,transparent);background:color-mix(in srgb,var(--amber-ink) 9%,var(--grou-surface));}
.jr-chev{flex-shrink:0;color:var(--grou-muted);font-size:18px;transition:transform 0.2s;}
.jr-step.open .jr-chev{transform:rotate(180deg);}
/* Swipe: la fila se desliza a la izq revelando la acción Eliminar de detrás */
.jr-swipe{position:relative;overflow:hidden;}
.jr-swipe-del{position:absolute;top:0;right:0;bottom:0;width:72px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;background:var(--grou-magenta);color:#fff;font-size:20px;}
.jr-swipe-card{position:relative;background:var(--grou-bg0);transition:transform 0.2s;will-change:transform;}
/* detalle expandible */
.jr-detail{margin-top:0;background:var(--surface-2);border:1px solid var(--grou-border);border-top:none;border-radius:0;padding:13px 14px;}
.jr-detail[hidden]{display:none;}
/* Contexto de la misión: chip nivel CEFR · tipo (escribir/foto) */
.jr-meta{display:flex;align-items:center;gap:7px;margin-bottom:10px;}
.jr-meta-lvl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.06em;color:var(--cyan-ink);border:1px solid color-mix(in srgb,var(--cyan-ink) 35%,transparent);background:color-mix(in srgb,var(--cyan-ink) 9%,var(--grou-surface));padding:2px 7px;}
.jr-meta-type{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-3);}
/* Meta cumplida (can-do statement de la misión) */
.jr-cando{display:flex;align-items:flex-start;gap:8px;margin-bottom:11px;padding:9px 11px;background:color-mix(in srgb,var(--cyan-ink) 6%,var(--surface-2));border-left:2px solid var(--cyan-ink);font-family:var(--font-grotesk);font-size:12.5px;color:var(--grou-white);line-height:1.4;}
.jr-cando i{flex-shrink:0;color:var(--cyan-ink);font-size:15px;margin-top:1px;}
.jr-cando-lbl{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan-ink);display:block;margin-bottom:2px;}
.jr-text{font-family:var(--font-grotesk);font-size:13px;color:var(--grou-white);line-height:1.6;}
.jr-phrase{margin-top:9px;font-family:var(--font-grotesk);font-size:12px;color:var(--cyan-dim);font-style:italic;border-left:2px solid var(--cyan-ink);padding-left:10px;}
.jr-ai{margin-top:10px;padding-top:10px;border-top:1px solid var(--grou-border);font-family:var(--font-grotesk);font-size:12px;color:var(--text-2);line-height:1.55;}
.jr-ai-lbl{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:4px;display:flex;align-items:center;gap:4px;}
.jr-del{margin-top:11px;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--magenta-dim);background:rgba(255,23,139,0.05);border:1px solid rgba(255,23,139,0.2);border-radius:6px;padding:6px 10px;cursor:pointer;}
.jr-del:hover{background:rgba(255,23,139,0.1);}

/* ── Formulario "Nueva entrada" · misma config visual que la línea de tiempo ── */
/* ── Botón de ingreso manual (magenta CTA) → abre el modal centrado ── */
.jr-add-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;padding:12px;background:var(--grou-magenta);color:#fff;border:none;border-radius:0;cursor:pointer;font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;transition:background 0.14s;}
.jr-add-btn:hover{background:var(--magenta-dim);}
.jr-add-plus{font-size:16px;}
/* Modal CENTRADO (variante de .modal-overlay, que por defecto es bottom sheet) */
.modal-overlay.modal-center{align-items:center;padding:18px;}
.modal-overlay.modal-center .modal{border-radius:14px;transform:translateY(0) scale(0.96);border-top:none;border:1px solid var(--grou-border);}
.modal-overlay.modal-center.open .modal{transform:translateY(0) scale(1);}
.jr-modal{position:relative;background:var(--grou-surface);padding:18px 18px 22px;}
.jr-modal-x{position:absolute;top:10px;right:10px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--grou-muted);font-size:20px;}
.jr-modal-x:hover{color:var(--text);}
/* ── NUEVA ENTRADA como "registro de llegada" (look tablero) ── */
.jr-form{display:flex;flex-direction:column;gap:10px;}
/* Cabecera de tablero del formulario: REGISTRAR LLEGADA ───── */
.jr-form-hd{display:flex;align-items:center;gap:9px;margin:4px 34px 4px 2px;}
.jr-form-ico{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:color-mix(in srgb,var(--magenta-dim) 9%,var(--grou-surface));border:1px solid color-mix(in srgb,var(--magenta-dim) 30%,transparent);}
.jr-form-ico i{font-size:14px;color:var(--magenta-dim);}
.jr-form-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--magenta-dim);white-space:nowrap;}
.jr-form-line{flex:1;height:1px;background:var(--grou-border2);}
/* Campos = casillas de embarque: radio 0, acento-left cyan */
.jr-field{background:var(--grou-surface);border:1px solid var(--grou-border);border-left:2px solid var(--cyan-ink);border-radius:0;padding:12px 14px;}
/* La pregunta = label mono eyebrow (como las fechas/labels del timeline) */
.jr-flbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--cyan-ink);margin-bottom:4px;}
.jr-fhint{font-family:var(--font-grotesk);font-size:12px;color:var(--text-3);margin-bottom:10px;line-height:1.4;}
.jr-field textarea,.jr-field input{width:100%;box-sizing:border-box;font-family:var(--font-grotesk);font-size:16px;color:var(--grou-white);background:var(--surface-2);border:1px solid var(--grou-border);border-radius:0;padding:10px 11px;resize:vertical;line-height:1.5;}
.jr-field textarea:focus,.jr-field input:focus{outline:none;border-color:var(--cyan-ink);}
.jr-field input{resize:none;}

#s-journey .card{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;}
#s-journey textarea{border:1px solid var(--grou-border);border-radius:0;background:var(--surface-2);}
#s-journey textarea:focus{border-color:var(--cyan-ink);}
#s-journey .proof-box{background:var(--surface-2);border:1px dashed var(--grou-border2);border-radius:0;}
/* Botón guardar = "sellar" el registro: look tablero (radio 0, mono) */
#s-journey .jr-save{background:var(--grou-magenta);border-radius:0;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;}
#s-journey .jr-save:hover{background:var(--magenta-dim);}

/* Proof of Life box (write panel) */
.proof-box{background:rgba(0,0,0,0.02);border:1px dashed var(--border-md);border-radius:var(--radius-lg);padding:13px;margin-bottom:12px;}
.proof-head{font-size:12px;font-weight:700;color:var(--gray-bright);display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.proof-head i{color:var(--magenta);}
.proof-actions{display:flex;gap:8px;margin-bottom:8px;}
.proof-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-3);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:9px;cursor:not-allowed;opacity:0.6;font-family:inherit;}
.proof-hint{font-size:11px;color:var(--text-3);line-height:1.5;}

/* Badge unlock toast */
/* Pop de celebración · MODO CLARO. Acento por tipo de evento vía --pop-acc
   (lo setea .pop-acc-cyan|amber|magenta desde popAccent() en badges.js). */
.badge-pop{--pop-acc:var(--cyan-ink);--pop-acc-soft:rgba(11,122,114,0.12);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);background:var(--grou-surface);border:1px solid var(--pop-acc);border-radius:14px;padding:28px 32px;text-align:center;z-index:400;opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 12px 40px rgba(0,0,0,0.18),0 0 0 4px var(--pop-acc-soft);}
.badge-pop.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all;}
.badge-pop-emoji{font-size:56px;margin-bottom:10px;animation:badge-bounce 0.6s ease;}
@keyframes badge-bounce{0%{transform:scale(0);}60%{transform:scale(1.2);}100%{transform:scale(1);}}
.badge-pop-title{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--pop-acc);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;}
.badge-pop-name{font-family:var(--font-grotesk);font-size:20px;font-weight:700;color:var(--text);margin-bottom:4px;}
.badge-pop-desc{font-size:13px;color:var(--text-3);margin-bottom:16px;max-width:240px;}
.badge-pop-xp{font-family:var(--font-mono);font-size:20px;font-weight:700;letter-spacing:0.04em;color:var(--amber-ink);margin-bottom:16px;}
.badge-pop-close{background:var(--pop-acc);color:#fff;border:none;border-radius:6px;padding:9px 24px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-grotesk);}
/* Acentos por tipo: cyan (misión/sello) · ámbar (final/rango) · magenta (logro/trofeo) */
.badge-pop.pop-acc-cyan{--pop-acc:var(--cyan-ink);--pop-acc-soft:rgba(11,122,114,0.12);}
.badge-pop.pop-acc-amber{--pop-acc:var(--amber-ink);--pop-acc-soft:rgba(168,109,0,0.14);}
.badge-pop.pop-acc-magenta{--pop-acc:var(--magenta-dim);--pop-acc-soft:rgba(194,15,106,0.12);}

/* ── Pop de ASCENSO DE RANGO (barra que sube de escalón) ──────────────────
   Todo el pop arranca en CYAN (--rank-acc) y, al completarse la barra al 100%,
   la clase .filled lo vira a MAGENTA: barra, borde, título y botón. */
.rank-pop{--rank-acc:var(--cyan-ink);--rank-acc-soft:rgba(11,122,114,0.12);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.85);background:var(--grou-surface);border:1px solid var(--rank-acc);border-radius:14px;padding:30px 34px 26px;width:320px;max-width:86vw;text-align:center;z-index:400;opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s cubic-bezier(.34,1.56,.64,1),border-color 0.5s,box-shadow 0.5s;box-shadow:0 12px 40px rgba(0,0,0,0.18),0 0 0 4px var(--rank-acc-soft);}
.rank-pop.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all;}
.rank-pop.filled{--rank-acc:var(--magenta-dim);--rank-acc-soft:rgba(194,15,106,0.14);}
.rank-pop-emoji{font-size:46px;margin-bottom:4px;animation:badge-bounce 0.6s ease;}
.rank-pop-title{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--rank-acc);text-transform:uppercase;letter-spacing:0.12em;margin-bottom:18px;transition:color 0.5s;}
.rank-pop-body{margin-bottom:4px;}
.rank-pop-rhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;}
/* El nombre toma el color del momento (--rank-acc: cyan→magenta), sin glow */
.rank-pop-rname{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--rank-acc);display:inline-block;transition:color 0.5s;}
.rank-pop-rname.rank-pop-swap{animation:rank-swap 0.45s cubic-bezier(.34,1.6,.5,1);}
@keyframes rank-swap{0%{transform:translateY(-8px) scale(.85);opacity:0;}100%{transform:translateY(0) scale(1);opacity:1;}}
.rank-pop-rpct{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--rank-acc);transition:color 0.5s;}
.rank-pop-bar{height:12px;background:rgba(0,0,0,0.06);border:1px solid var(--grou-border);border-radius:6px;overflow:hidden;}
.rank-pop-fill{height:100%;border-radius:5px;width:0;background:var(--rank-acc);transition:width 0.9s cubic-bezier(.4,0,.2,1),background 0.5s;}
.rank-pop-from{font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-3);margin-top:8px;}
.rank-pop-step{font-family:var(--font-mono);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);margin:14px 0 16px;}
.rank-pop-close{background:var(--rank-acc);color:#fff;border:none;border-radius:6px;padding:10px 28px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-grotesk);transition:background 0.5s;}

/* ── Pop de SELLO COMPLETADO (celebración + botón "Estampar sello") · cyan ── */
.stamp-pop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.85);background:#0b0c10;border:1px solid var(--cyan-ink);border-radius:14px;padding:30px 34px 26px;width:300px;max-width:86vw;text-align:center;z-index:400;opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 12px 40px rgba(0,0,0,0.3),0 0 0 4px rgba(11,122,114,0.12);}
.stamp-pop.show{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:all;}
/* Sparkles (estrellas de 4 puntas titilando) sobre el recuadro negro */
.stamp-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;border-radius:14px;}
.stamp-spark{position:absolute;color:#fff;line-height:1;opacity:0;animation:stamp-spark 1.6s ease-in-out infinite;}
@keyframes stamp-spark{0%,100%{opacity:0;transform:scale(.4) rotate(0);}50%{opacity:1;transform:scale(1) rotate(45deg);}}
/* Anillo de progreso que se cierra al 100% alrededor del sello (ícono del mundo).
   Dentro del recuadro negro: ícono y anillo en BLANCO. */
.stamp-pop-ring{position:relative;z-index:2;width:108px;height:108px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;}
.stamp-pop-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.stamp-ring-track{fill:none;stroke:rgba(255,255,255,0.16);stroke-width:6;}
.stamp-ring-prog{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-dasharray:295;stroke-dashoffset:295;}
.stamp-pop-ring.go .stamp-ring-prog{animation:stamp-ring 1s ease-out forwards;}
@keyframes stamp-ring{to{stroke-dashoffset:0;}}
.stamp-pop-emoji{position:relative;z-index:2;font-size:46px;line-height:1;color:#fff;animation:badge-bounce 0.6s ease;}
.stamp-pop-title{position:relative;z-index:2;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--grou-cyan);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;}
.stamp-pop-name{position:relative;z-index:2;font-family:var(--font-grotesk);font-size:20px;font-weight:700;color:#fff;margin-bottom:18px;}
.stamp-pop-btn{position:relative;z-index:2;background:var(--cyan-ink);color:#fff;border:none;border-radius:6px;padding:11px 26px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-grotesk);display:inline-flex;align-items:center;gap:7px;}

/* ── Estampado del sello: vuelo sin cortes desde el pop hasta la tarjeta ── */
/* Al pulsar "Estampar", el pop desvanece texto/botón y el anillo; el ícono vuela como clon */
.stamp-pop.flying .stamp-pop-title,.stamp-pop.flying .stamp-pop-name,.stamp-pop.flying .stamp-pop-btn,.stamp-pop.flying .stamp-pop-ring svg,.stamp-pop.flying .stamp-fx{opacity:0;transition:opacity 0.2s;pointer-events:none;}
/* Clon volador: capa fija que viaja del centro a la tarjeta achicándose */
.stamp-flyer{position:fixed;z-index:500;display:flex;align-items:center;justify-content:center;color:var(--cyan-ink);pointer-events:none;transform-origin:center center;transition:transform 0.62s cubic-bezier(.5,0,.25,1);}
.stamp-flyer i{font-size:46px;line-height:1;}
/* El hueco recién ganado se muestra como fantasma hasta que el clon aterriza;
   entonces se revela (earned) con el golpe stamp-land. */
.pp-seal.pp-stamp-fresh.pp-stamp-hidden .pp-seal-disc{border:1.5px dashed color-mix(in srgb,var(--pp-accent) 30%,transparent);}
.pp-seal.pp-stamp-fresh.pp-stamp-hidden i{color:transparent;}
.pp-seal.pp-stamp-fresh.stamp-land i{animation:stamp-land 0.4s cubic-bezier(.34,1.6,.5,1);}
@keyframes stamp-land{0%{transform:scale(1.5) rotate(3deg);}55%{transform:scale(.82) rotate(-1deg);}100%{transform:scale(1) rotate(0);}}
/* Grid y tarjeta permiten que el clon se vea por encima durante el aterrizaje */
.pp-stamps-grid.stamping-active{overflow:visible;position:relative;z-index:10;}
.pp-card.stamping-card{overflow:visible;}
.stamp-ink{position:absolute;left:50%;top:50%;width:100%;height:100%;border:2px solid var(--pp-accent);border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;pointer-events:none;}
.stamp-ink.go{animation:stamp-ink 0.45s ease-out forwards;}
@keyframes stamp-ink{0%{transform:translate(-50%,-50%) scale(.2);opacity:.55;}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;}}
.pp-card.shake{animation:stamp-shake 0.25s ease;}
@keyframes stamp-shake{0%,100%{transform:translateX(0);}30%{transform:translateX(-2px);}60%{transform:translateX(2px);}}

/* Texto de inmersión (idioma que se aprende) — se diferencia del idioma UX */
.immersion-text{color:var(--cyan-dim);font-style:italic;}
.immersion-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:0.06em;color:var(--cyan-ink);background:rgba(102,252,241,0.12);border:1px solid rgba(102,252,241,0.4);border-radius:6px;padding:1px 5px;vertical-align:middle;font-family:var(--font-mono);font-style:normal;}

/* Caja de llenado del challenge (respuesta del usuario) */
.fill-box{background:rgba(0,0,0,0.02);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-top:14px;}
.fill-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;}
.fill-checklist{margin-bottom:10px;}
.fill-checklist-lbl,.fill-chips-lbl{font-size:10px;font-weight:700;color:var(--gray-dim);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;}
.fill-chips-lbl{margin-top:8px;}
.fill-check{font-size:12px;color:var(--text-2);display:flex;align-items:center;gap:6px;margin-bottom:3px;line-height:1.4;}
.fill-check i{color:var(--cyan-muted);font-size:14px;flex-shrink:0;}
.fill-chips{display:flex;flex-wrap:wrap;gap:6px;}
.fill-chip{font-size:12px;color:var(--cyan-dim);background:rgba(102,252,241,0.10);border:1px solid rgba(102,252,241,0.4);border-radius:14px;padding:4px 10px;cursor:pointer;font-family:inherit;font-style:italic;transition:all 0.15s;}
.fill-chip:hover{background:rgba(102,252,241,0.14);border-color:var(--cyan-muted);}
#reflect-input{min-height:96px;margin:10px 0 6px;}
.fill-meta{display:flex;gap:8px;font-size:11px;color:var(--text-3);}
#fill-feedback{color:var(--cyan-dim);}

/* ════════ SKILLS · GALAXIA ════════ */
/* Cabecera: eyebrow SKILLS + título "Galaxia · A2" */
.sk-gx-head{margin:4px 2px 6px;}
.sk-eyebrow{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--grou-muted);margin-bottom:4px;}
.sk-title{font-family:var(--font-grotesk);font-weight:700;font-size:22px;color:var(--text);line-height:1.1;}
/* La galaxia (con menos alto para que el botón quede cerca) */
.sk-gx-full{position:relative;display:flex;align-items:center;justify-content:center;min-height:min(66vw,340px);padding:4px 8px;overflow:hidden;}
.sk-gx-full::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 46% at 50% 50%,color-mix(in srgb,var(--cyan) 8%,transparent),transparent 72%);}
.sk-gx-svg{position:relative;width:100%;max-width:400px;height:auto;overflow:visible;}
/* RADAR pentagonal (R9): mismo layout que el svg del hub + textos tenues */
.sk-radar-svg{position:relative;width:100%;max-width:400px;height:auto;overflow:visible;}
.sk-radar-scale{font-family:var(--font-mono);font-weight:400;font-size:7px;fill:var(--text-3);}
.sk-radar-name{font-family:var(--font-grotesk);font-weight:500;font-size:11.5px;fill:var(--text-2);}
/* Lista de skills bajo el radar: filas navegables a su árbol (acento por skill) */
.sk-list{display:flex;flex-direction:column;margin:6px 2px 14px;}
.sk-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--grou-border);border-left:2px solid var(--sk-c,var(--cyan-ink));background:var(--grou-surface);cursor:pointer;transition:background 0.14s;}
.sk-row+.sk-row{border-top:none;}
.sk-row.locked{cursor:default;border-left-color:var(--grou-border2);}
@media(hover:hover)and(pointer:fine){.sk-row:not(.locked):hover{background:color-mix(in srgb,var(--sk-c) 7%,var(--grou-surface));}}
.sk-row-ico{flex-shrink:0;display:grid;place-items:center;width:26px;height:26px;color:var(--sk-c,var(--cyan-ink));}
.sk-row-ico .ti{font-size:18px;}
.sk-row.locked .sk-row-ico{color:var(--text-3);}
.sk-row-name{flex:1;min-width:0;font-family:var(--font-grotesk);font-weight:600;font-size:14px;color:var(--text);}
.sk-row.locked .sk-row-name{color:var(--text-2);}
.sk-row-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.sk-row-pct{font-family:var(--font-mono);font-weight:700;font-size:13px;color:var(--sk-c,var(--cyan-ink));}
.sk-row.locked .sk-row-pct{color:var(--text-3);}
.sk-row-go{font-size:17px;color:var(--grou-muted);}
.sk-row-soon{font-family:var(--font-mono);font-weight:700;font-size:8px;letter-spacing:0.08em;text-transform:uppercase;color:var(--cyan-ink);}

/* banner de práctica libre */
.sk-free{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:4px;background:color-mix(in srgb,var(--cyan) 5%,var(--grou-surface));border:1px solid color-mix(in srgb,var(--cyan) 28%,transparent);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .12s,background .12s;font-family:inherit;}
.sk-free:hover{border-color:var(--cyan-ink);background:color-mix(in srgb,var(--cyan) 9%,var(--grou-surface));}
.sk-free-ico{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:8px;background:color-mix(in srgb,var(--cyan-ink) 10%,var(--grou-surface));border:1px solid color-mix(in srgb,var(--cyan-ink) 28%,transparent);}
.sk-free-ico i{font-size:22px;color:var(--cyan-ink);}
.sk-free-main{flex:1;min-width:0;}
.sk-free-t{display:block;font-family:var(--font-grotesk);font-weight:700;font-size:15px;color:var(--text);}
.sk-free-d{display:block;font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-top:3px;line-height:1.4;}
.sk-free>i.go{font-size:18px;color:var(--grou-faint);}

/* ════════ SKILL TREE (árbol de una habilidad) ════════ */
.st-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);cursor:pointer;padding:2px 2px 10px;}
.st-back i{font-size:16px;}
/* Cabecera ST1: tarjeta horizontal — icono + skill/nivel · nodo x/N + barra + XP */
.st-headcard{display:flex;align-items:center;gap:14px;margin:2px 2px 18px;padding:14px 16px;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:14px;}
.st-hd-ico{flex-shrink:0;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--surface-2);border:1px solid var(--grou-border);border-radius:12px;}
.st-hd-mid{flex-shrink:0;}
.st-hd-name{font-family:var(--font-grotesk);font-size:16px;font-weight:700;letter-spacing:0.02em;text-transform:uppercase;color:var(--cyan-ink);line-height:1.1;}
.st-hd-lvl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grou-muted);margin-top:3px;}
.st-hd-right{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.st-hd-node{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-muted);}
.st-hd-next{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--grou-faint);}
.st-prog-bar{width:100%;height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
.st-prog-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-ink));border-radius:3px;transition:width 0.4s;}
/* pestañas de habilidad */
/* árbol */
.st-tree{position:relative;}
.st-row{display:flex;justify-content:center;gap:48px;position:relative;}
.st-row + .st-row{margin-top:34px;}
.st-node{position:relative;width:104px;height:94px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;background:var(--grou-surface);border:1px solid var(--grou-border);z-index:2;transition:transform 0.14s;}
@media(hover:hover)and(pointer:fine){.st-node:not(.lock):hover{transform:translateY(-2px);}}
.st-node .em{font-size:28px;line-height:1;}
.st-node .nm{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin-top:7px;}
.st-node.dom{background:color-mix(in srgb,var(--cyan) 22%,var(--grou-surface));border:1px solid var(--cyan-ink);}
.st-node.dom .nm{color:var(--cyan-ink);}
.st-node.unl{border:1px solid var(--cyan-ink);border-left:2px solid var(--cyan-ink);}
.st-node.unl .nm{color:var(--cyan-ink);}
.st-node.avail{border:2px solid var(--grou-magenta);animation:stNodePulse 1.8s ease-in-out infinite;}
.st-node.avail .nm{color:var(--magenta-dim);}
@keyframes stNodePulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--grou-magenta) 30%,transparent);}50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--grou-magenta) 12%,transparent);}}
.st-node.lock{background:var(--surface-2);border:1px solid var(--grou-border);}
.st-node.lock .em{filter:grayscale(1);opacity:.5;}
.st-node.lock .nm{color:var(--grou-faint);}
.st-badge{position:absolute;top:-9px;right:-9px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;border:2px solid var(--grou-bg0);z-index:3;}
.st-node.dom .st-badge{background:var(--cyan-ink);color:#fff;}
.st-node.lock .st-badge{background:var(--surface-2);color:var(--grou-faint);}
.st-links{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;}
/* leyenda */
.st-legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:26px;padding-top:16px;border-top:1px solid var(--grou-border);}
.st-leg{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);}
.st-chip{width:13px;height:13px;border-radius:3px;border:1.5px solid var(--grou-border);}
.st-chip.dom{background:color-mix(in srgb,var(--cyan) 30%,var(--grou-surface));border-color:var(--cyan-ink);}
.st-chip.unl{border-color:var(--cyan-ink);}
.st-chip.avail{border-color:var(--magenta);}
.st-chip.lock{background:var(--surface-2);}
/* estado Próximamente (ramas vacías) */
/* Preview centrado de un nodo del sendero (antes de "Empezar") */
.np-modal{position:relative;background:var(--grou-surface);padding:20px 20px 22px;}
.np-x{position:absolute;top:12px;right:12px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--grou-muted);font-size:20px;}
.np-x:hover{color:var(--text);}
.np-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-right:28px;}
.np-ico{flex-shrink:0;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:28px;background:color-mix(in srgb,var(--grou-magenta) 8%,var(--surface-2));border:1px solid color-mix(in srgb,var(--grou-magenta) 22%,transparent);border-radius:12px;}
.np-tmid{flex:1;min-width:0;}
.np-name{font-family:var(--font-grotesk);font-size:18px;font-weight:700;color:var(--text);line-height:1.15;}
.np-sub{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--grou-muted);margin-top:3px;}
.np-xp{flex-shrink:0;font-family:var(--font-mono);font-size:16px;font-weight:700;color:var(--amber-ink);}
.np-desc{font-family:var(--font-grotesk);font-size:14px;color:var(--text-2);line-height:1.55;margin-bottom:14px;}
/* Progreso + lista de los desafíos del nodo */
.np-track{height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;margin-bottom:14px;}
.np-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-ink));border-radius:3px;transition:width 0.4s;}
.np-list-lbl{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-faint);margin-bottom:8px;}
.np-list{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.np-ch{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--grou-surface);border:1px solid var(--grou-border);border-left:2px solid var(--cyan-ink);border-radius:0;cursor:pointer;font-family:inherit;text-align:left;transition:background 0.14s;}
.np-ch:hover{background:color-mix(in srgb,var(--cyan-ink) 6%,var(--grou-surface));}
.np-ch.done{border-left-color:var(--grou-border2);}
.np-ch-num{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--grou-muted);border:1px solid var(--grou-border2);border-radius:50%;}
.np-ch.done .np-ch-num{color:var(--grou-faint);}
.np-ch-nm{flex:1;min-width:0;font-family:var(--font-grotesk);font-size:13.5px;font-weight:600;color:var(--text);}
.np-ch.done .np-ch-nm{color:var(--text-3);}
.np-ch-xp{flex-shrink:0;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--amber-ink);}
.np-ch-done{flex-shrink:0;color:var(--cyan-ink);font-size:17px;display:flex;}
.np-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;background:var(--grou-magenta);color:#fff;border:none;border-radius:8px;cursor:pointer;font-family:var(--font-mono);font-weight:700;font-size:13px;letter-spacing:0.06em;text-transform:uppercase;}
.np-cta:hover{background:var(--magenta-dim);}
.np-cta i{font-size:16px;}

.st-soon{text-align:center;padding:48px 24px;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;}
.st-soon-ico{font-size:40px;}
.st-soon-t{font-family:var(--font-grotesk);font-weight:700;font-size:16px;color:var(--text);margin-top:12px;}
.st-soon-d{font-family:var(--font-grotesk);font-size:13px;color:var(--text-2);margin-top:6px;line-height:1.5;}
.st-soon-tag{display:inline-block;margin-top:14px;font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--magenta-dim);border:1px solid var(--magenta);padding:5px 12px;}

/* ════════ SKILL NODE (detalle de un nodo) ════════ */
.nd-back{display:inline-flex;align-items:center;gap:6px;background:transparent;border:none;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);cursor:pointer;padding:2px 2px 14px;}
.nd-back i{font-size:16px;}
.nd-card{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:16px;}
.nd-top{display:flex;align-items:flex-start;gap:14px;}
.nd-ico{width:54px;height:54px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:30px;border-radius:10px;background:var(--surface-2);border:1px solid var(--grou-border);}
.nd-tmid{flex:1;min-width:0;padding-top:2px;}
.nd-name{font-family:var(--font-grotesk);font-weight:700;font-size:18px;color:var(--text);}
.nd-state{display:inline-block;margin-top:6px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--magenta-dim);border:1px solid var(--magenta);padding:3px 8px;}
.nd-state.done{color:var(--cyan-ink);border-color:var(--cyan-ink);}
.nd-state.lock{color:var(--grou-faint);border-color:var(--grou-border2);}
.nd-desc{font-family:var(--font-grotesk);font-size:14px;color:var(--text-2);line-height:1.5;margin-top:14px;}
.nd-unlock-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--magenta-dim);margin-top:16px;}
.nd-track{height:8px;background:var(--surface-2);border:1px solid var(--grou-border);margin-top:8px;overflow:hidden;}
.nd-fill{height:100%;background:var(--magenta);}
.nd-count{font-family:var(--font-mono);font-size:10px;color:var(--grou-faint);margin-top:6px;}
.nd-sec{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grou-faint);margin:22px 2px 8px;}
.nd-mlist{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;overflow:hidden;}
.nd-m{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:13px 14px;background:transparent;border:none;border-bottom:1px solid var(--grou-border);border-left:2px solid transparent;cursor:pointer;font-family:inherit;}
.nd-m:last-child{border-bottom:none;}
.nd-m.done{border-left-color:var(--cyan-ink);}
.nd-m.avail{border-left-color:var(--magenta);}
.nd-m.lock{opacity:.5;cursor:default;}
.nd-mdot{width:9px;height:9px;flex-shrink:0;background:var(--grou-border2);}
.nd-m.done .nd-mdot{background:var(--cyan-ink);}
.nd-m.avail .nd-mdot{background:var(--magenta);}
.nd-mnm{flex:1;min-width:0;font-family:var(--font-grotesk);font-weight:500;font-size:14px;color:var(--text);}
.nd-m.lock .nd-mnm{color:var(--grou-faint);}
.nd-mtag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.04em;flex-shrink:0;}
.nd-m.done .nd-mtag{color:var(--cyan-ink);}
.nd-m.avail .nd-mtag{color:var(--magenta-dim);}
.nd-m.lock .nd-mtag{color:var(--grou-faint);text-transform:uppercase;}
.nd-empty{padding:18px 14px;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--grou-faint);}
.nd-reward{background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;padding:14px;}
.nd-reward-lbl{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-ink);display:flex;align-items:center;gap:5px;}
.nd-reward-txt{font-family:var(--font-grotesk);font-size:14px;color:var(--text);line-height:1.5;margin-top:7px;}

/* ════════ SKILL ACTIVITY (modal: escribir la actividad del árbol) ════════ */
/* Centrado en pantalla (no bottom-sheet) y solo se cierra con X / Completar. */
#skill-activity-modal{align-items:center;padding:16px;}
#skill-activity-modal .modal{border-radius:14px;border:1px solid var(--grou-border);transform:translateY(12px);max-height:88vh;}
#skill-activity-modal.open .modal{transform:translateY(0);}
.sa-modal{font-family:inherit;}
.sa-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;}
.sa-ico{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:26px;border-radius:9px;background:var(--surface-2);border:1px solid var(--grou-border);}
.sa-hmid{flex:1;min-width:0;padding-top:1px;}
.sa-eyebrow{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-ink);}
.sa-title{font-family:var(--font-grotesk);font-weight:700;font-size:18px;color:var(--text);margin-top:3px;}
.sa-close{background:transparent;border:none;font-size:22px;color:var(--grou-faint);cursor:pointer;flex-shrink:0;line-height:1;}
.sa-prompt{font-family:var(--font-grotesk);font-size:14px;color:var(--text-2);line-height:1.55;background:var(--surface-2);border:1px solid var(--grou-border);border-left:2px solid var(--cyan-ink);border-radius:0 8px 8px 0;padding:12px 14px;}
.sa-doneflag{display:flex;align-items:center;gap:6px;margin-top:12px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--cyan-ink);}
.sa-ta{width:100%;box-sizing:border-box;margin-top:14px;min-height:130px;font-family:var(--font-grotesk);font-size:16px;line-height:1.5;color:var(--text);background:var(--grou-surface);border:1px solid var(--grou-border2);border-radius:8px;padding:12px;resize:vertical;}
.sa-ta:focus{outline:none;border-color:var(--cyan-ink);}
.sa-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;color:var(--grou-faint);}
.sa-fb{color:var(--cyan-ink);}
.sa-fb.err{color:var(--magenta-dim);}
.sa-cta{width:100%;margin-top:16px;font-family:var(--font-grotesk);font-weight:700;font-size:15px;color:#fff;background:var(--magenta);border:none;border-radius:8px;padding:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;}
.sa-cta:disabled{opacity:.5;cursor:default;}
.sa-xp{text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--grou-faint);margin-top:10px;}

/* Mobile: evitar el auto-zoom de iOS al enfocar campos de texto (font-size<16px) */
@media(max-width:480px){
  input,textarea,select,.auth-input,.ob-select{font-size:16px;}
}

/* ── Fila de ajuste (Perfil): Tema oscuro con switch ── */
.pf-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;padding:12px 14px;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:8px;cursor:pointer;}
.pf-row-ico{flex-shrink:0;display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:color-mix(in srgb,var(--cyan-ink) 10%,var(--grou-surface));color:var(--cyan-ink);}
.pf-row-ico .ti{font-size:18px;}
.pf-row-main{flex:1;min-width:0;}
.pf-row-t{display:block;font-family:var(--font-grotesk);font-weight:600;font-size:14px;color:var(--text);}
.pf-row-d{display:block;font-family:var(--font-grotesk);font-size:12px;color:var(--text-3);margin-top:2px;}
/* Switch */
.pf-switch{flex-shrink:0;width:44px;height:26px;border-radius:13px;background:var(--grou-border2);position:relative;transition:background 0.2s;cursor:pointer;}
.pf-switch.on{background:var(--grou-magenta);}
.pf-switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform 0.2s;box-shadow:0 1px 3px rgba(0,0,0,0.25);}
.pf-switch.on .pf-switch-knob{transform:translateX(18px);}

/* ══ PUERTA DE EMBARQUE (pase a pantalla completa desde el QR) ══
   Sigue el TEMA de la app (claro/oscuro) vía variables; ámbar/cyan de acento. */
.boarding-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--grou-bg0);}
.boarding-overlay[hidden]{display:none;}
.bd-card{width:100%;max-width:420px;background:var(--grou-surface);border:1px solid var(--grou-border);border-radius:16px;padding:20px 22px 22px;color:var(--text);}
.bd-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--grou-border);padding-bottom:14px;margin-bottom:18px;}
.bd-brand{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:0.06em;color:var(--cyan-ink);line-height:0;display:inline-flex;align-items:center;}
.bd-logo{height:60px;width:auto;display:block;}
.bd-tier{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.08em;color:var(--magenta-dim);}
.bd-lead{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;color:var(--grou-muted);text-align:center;margin-bottom:6px;}
.bd-level{font-family:var(--font-mono);font-size:72px;font-weight:700;line-height:1;color:var(--amber-ink);text-align:center;margin-bottom:18px;}
.bd-qr{display:flex;justify-content:center;margin-bottom:18px;}
.bd-qr canvas{width:220px;height:220px;border-radius:8px;image-rendering:pixelated;}
.bd-passenger-lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--grou-muted);text-align:center;margin-bottom:4px;}
.bd-passenger{font-family:var(--font-mono);font-size:20px;font-weight:700;letter-spacing:0.04em;color:var(--text);text-align:center;text-transform:uppercase;margin-bottom:16px;}
.bd-sep{height:1px;border-top:1px dashed var(--grou-border2);margin:0 0 14px;}
.bd-meta{display:flex;justify-content:space-around;margin-bottom:20px;}
.bd-meta-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
.bd-meta-lbl{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--grou-faint);}
.bd-meta-val{font-family:var(--font-mono);font-size:15px;font-weight:700;letter-spacing:0.04em;}
.bd-meta-val.cy{color:var(--cyan-ink);}
.bd-meta-val.am{color:var(--magenta-dim);}
.bd-close{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:13px;background:var(--grou-magenta);color:#fff;border:none;border-radius:8px;cursor:pointer;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;}
.bd-close:hover{background:var(--magenta-dim);}