/* ─── RESET & BASE ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;font-size-adjust:none;}
body{
  font-family:'Inter','Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;overflow-x:hidden;transition:background .3s,color .3s;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'kern' 1,'liga' 1,'calt' 1,'ss01' 1;
  font-optical-sizing:auto;
  /* ── Disable text selection app-wide for native-app feel ── */
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  /* Prevent callout / highlight on iOS long-press */
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}
/* ── Re-enable selection only where the user needs to type ── */
input,select,textarea{
  font-family:inherit;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
  cursor:text;
}
/* ── Cursor improvements for interactive elements ── */
button{cursor:pointer;border:none;outline:none}
button:disabled{cursor:not-allowed;opacity:.5}
[onclick]{cursor:pointer}
label{cursor:default}
/* Explicit pointer on anything that triggers an action */
.nav-item,.tab,.pill,.radio-opt,.btn,.btn-icon,.fab,.btn-export,
.theme-toggle,.modal-close,.hamburger,.cat-pill .remove,
.toggle-switch,.sidebar-logo{cursor:pointer}
/* Default (arrow) cursor on purely display elements */
.kpi-card,.kpi-value,.kpi-label,.kpi-delta,
.patrimonio-hero,.patrimonio-num,.badge,.tag,
.card-title,.card-subtitle,.page-h1,.page-sub,
.legend-item,.stat-row,.inv-stat,.inv-stat-label,.inv-stat-val,
td,th,.progress-bar,.progress-wrap{cursor:default}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}
::selection{background:var(--accent);color:#000}

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root,[data-theme="dark"]{
  --bg:          #0A0E17;
  --bg2:         #0F1420;
  --card:        #111827;
  --card2:       #1A2332;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.12);
  --text:        #E8EFF7;
  --text2:       #94A3B8;
  --text3:       #475569;
  --accent:      #00D4AA;
  --accent-dim:  rgba(0,212,170,0.12);
  --accent-glow: rgba(0,212,170,0.25);
  --indigo:      #6366F1;
  --indigo-dim:  rgba(99,102,241,0.12);
  --gold:        #F59E0B;
  --gold-dim:    rgba(245,158,11,0.12);
  --red:         #F43F5E;
  --red-dim:     rgba(244,63,94,0.12);
  --green:       #10B981;
  --green-dim:   rgba(16,185,129,0.12);
  --sidebar-w:   220px;
  --header-h:    0px;
  --radius:      14px;
  --radius-sm:   8px;
  --shadow:      0 4px 24px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.6);
}
[data-theme="light"]{
  --bg:          #F1F5F9;
  --bg2:         #E2E8F0;
  --card:        #FFFFFF;
  --card2:       #F8FAFC;
  --border:      rgba(0,0,0,0.07);
  --border2:     rgba(0,0,0,0.12);
  --text:        #0F172A;
  --text2:       #475569;
  --text3:       #94A3B8;
  --accent-dim:  rgba(0,150,115,0.1);
  --accent-glow: rgba(0,150,115,0.2);
  --indigo-dim:  rgba(99,102,241,0.1);
  --gold-dim:    rgba(245,158,11,0.1);
  --red-dim:     rgba(244,63,94,0.1);
  --green-dim:   rgba(16,185,129,0.1);
  --shadow:      0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:   0 4px 32px rgba(0,0,0,0.12);
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.app{display:flex;min-height:100vh}

/* SIDEBAR */
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);max-width:var(--sidebar-w);
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:sticky;top:0;
  height:100vh;height:100dvh;
  overflow:hidden;
  z-index:100;transition:transform .3s ease;
  flex-shrink:0;
}
.sidebar-logo{
  height:64px;min-height:64px;
  padding:0 18px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
#sidebarLogoImg svg{
  max-height:36px;width:auto;max-width:150px;
  transition:transform .2s ease;
  display:block;margin:0 auto;
  overflow:visible;
  height:auto;
}
#sidebarLogoImg svg:hover{transform:scale(1.03)}
.logo-mark{
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-size:1.2rem;font-weight:800;letter-spacing:-0.5px;
  width:100%;
}
.logo-mark img{
  max-width:160px;height:auto;object-fit:contain;
  filter:drop-shadow(0 2px 8px rgba(0,212,170,0.15));
}
[data-theme="light"] .logo-mark img{
  filter:brightness(0.85) drop-shadow(0 1px 4px rgba(0,0,0,0.2));
}
.logo-icon{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),#00A882);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;
  box-shadow:0 0 20px var(--accent-glow);
}
.logo-text{color:var(--text)}
.logo-version{
  font-size:.65rem;font-weight:500;color:var(--text3);
  background:var(--border);padding:2px 6px;border-radius:99px;
  margin-top:2px;display:inline-block;
}
.sidebar-nav{
  flex:1;
  padding:2px 0;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  -webkit-overflow-scrolling:touch;
}
.nav-section{
  padding:6px 15px 3px;
  margin-top:2px;
  font-size:.62rem;
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 15px;
  margin:1px 7px;
  border-radius:var(--radius-sm);
  font-size:.86rem;
  font-weight:500;
  color:var(--text2);
  cursor:pointer;
  transition:all .15s ease;
  position:relative;
  touch-action:manipulation;
}
.nav-item:hover{background:var(--border);color:var(--text)}
.nav-item.active{
  background:var(--accent-dim);color:var(--accent);
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:20%;bottom:20%;
  width:3px;border-radius:0 3px 3px 0;background:var(--accent);
}
.nav-icon{
  font-size:.94rem;width:18px;height:18px;
  text-align:center;flex-shrink:0;
  font-style:normal;letter-spacing:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:5px;
  transition:all .15s;
  color:var(--text2);
}
.nav-icon svg{
  width:18px;height:18px;
  display:block;
  stroke:currentColor;
  transition:stroke .15s, color .15s;
}
.nav-item:hover .nav-icon{ opacity:1; color:var(--text); }
.nav-item.active .nav-icon{ opacity:1; color:var(--accent); }
.nav-badge{
  margin-left:auto;font-size:.68rem;font-weight:700;
  padding:1px 7px;border-radius:99px;
  background:var(--red-dim);color:var(--red);
}
.sidebar-footer{
  padding:4px 8px;border-top:1px solid var(--border);flex-shrink:0;
}
.nav-logout-wrap{
  border-top:1px solid var(--border);padding:4px 0 6px;
  margin-top:auto;
}
.theme-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;border-radius:var(--radius-sm);
  background:var(--border);cursor:pointer;
  font-size:.82rem;font-weight:500;color:var(--text2);
  transition:all .15s;
}
.theme-toggle:hover{background:var(--border2);color:var(--text)}
.toggle-switch{
  width:34px;height:18px;border-radius:99px;
  background:var(--border2);position:relative;
  transition:background .2s;
}
.toggle-switch.on{background:var(--accent)}
.toggle-knob{
  width:14px;height:14px;border-radius:50%;
  background:#fff;position:absolute;top:2px;left:2px;
  transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
.toggle-switch.on .toggle-knob{transform:translateX(16px)}

/* MAIN */
.main{
  flex:1;
  min-width:0;
  margin-left:0;
  padding-left:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.topbar{
  height:64px;
  min-height:64px;
  padding:0 18px;
  /* Add safe-area padding-top for PWA standalone (notch/status bar on iOS/Android) */
  padding-top:env(safe-area-inset-top, 0px);
  height:calc(64px + env(safe-area-inset-top, 0px));
  min-height:calc(64px + env(safe-area-inset-top, 0px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:var(--bg);
  position:sticky;
  top:0;
  z-index:50;
  gap:16px;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1;
  min-width:0;
}
.page-title-bar{
  font-size:1.1rem;
  font-weight:700;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  flex-wrap:nowrap;
}
.dinero-display{
  display:flex;align-items:center;gap:8px;
  background:var(--accent-dim);
  border:1px solid rgba(0,212,170,0.2);
  border-radius:99px;padding:5px 14px;
  font-size:.85rem;font-weight:600;
  transition:box-shadow .3s;
}
.dinero-display:hover{
  box-shadow:0 0 16px var(--accent-glow);
}
#topDinero{transition:color .3s}
.dinero-label{color:var(--accent);opacity:.8;font-size:.75rem;font-weight:500}
.dinero-value{color:var(--accent);font-weight:700}

/* ── mnTrialPill — Premium subscription status pill ── */
#mnTrialPill {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: .02em;
}
#mnTrialPill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  opacity: 0;
  transition: opacity .18s;
}
#mnTrialPill:hover::before { opacity: 1; }
#mnTrialPill:hover { transform: translateY(-1px); }
#mnTrialPill:active { transform: translateY(0); }

#mnTrialPill.pill--pro {
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(99,102,241,.12));
  border: 1.5px solid rgba(139,92,246,.35);
  color: #a78bfa;
  box-shadow: 0 1px 8px rgba(139,92,246,.12);
}
#mnTrialPill.pill--pro:hover {
  box-shadow: 0 3px 14px rgba(139,92,246,.22);
}
#mnTrialPill.pill--trial {
  background: linear-gradient(135deg, rgba(99,102,241,.13), rgba(139,92,246,.10));
  border: 1.5px solid rgba(99,102,241,.35);
  color: #818cf8;
  box-shadow: 0 1px 8px rgba(99,102,241,.10);
}
#mnTrialPill.pill--trial:hover {
  box-shadow: 0 3px 14px rgba(99,102,241,.2);
}
#mnTrialPill.pill--urgent {
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(239,68,68,.10));
  border: 1.5px solid rgba(245,158,11,.40);
  color: #f59e0b;
  box-shadow: 0 1px 8px rgba(245,158,11,.12);
  animation: mnPillPulse 2.4s ease-in-out infinite;
}
#mnTrialPill.pill--urgent:hover {
  box-shadow: 0 3px 14px rgba(245,158,11,.25);
}
@keyframes mnPillPulse {
  0%,100% { box-shadow: 0 1px 8px rgba(245,158,11,.12); }
  50%      { box-shadow: 0 2px 14px rgba(245,158,11,.30); }
}
#mnTrialPillIcon {
  font-size: .78rem;
  line-height: 1;
}
#mnTrialPillText {
  line-height: 1;
}

.btn-export{
  display:flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--radius-sm);
  background:var(--border);color:var(--text2);
  font-size:.82rem;font-weight:600;
  border:1px solid var(--border2);
  transition:all .15s;
}
.btn-export:hover{background:var(--border2);color:var(--text)}
#topActivarProBtn:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.7);color:#A5B4FC}
.hamburger{
  display:none;flex-direction:column;gap:4px;justify-content:center;align-items:center;
  padding:10px;cursor:pointer;border-radius:var(--radius-sm);
  background:var(--border);border:1px solid var(--border2);
  flex-shrink:0;
  touch-action:manipulation;
}
.hamburger span{width:18px;height:2px;background:var(--text2);border-radius:99px;display:block}

.content{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:18px;
  animation:fadeIn .25s ease;
  position:relative; /* allows #mn-bg-canvas and .pro-orb to be scoped here */
}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ─── CARDS ──────────────────────────────────────────────────── */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  transition:border-color .2s,box-shadow .2s;
}
.card:hover{border-color:var(--border2)}
.card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;gap:12px;
}
.card-title{font-size:.95rem;font-weight:700;color:var(--text)}
.card-subtitle{font-size:.78rem;color:var(--text2);margin-top:2px}
.card-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ─── KPI GRID ───────────────────────────────────────────────── */
.kpi-grid{display:grid;gap:10px;margin-bottom:12px}
.kpi-grid-5{grid-template-columns:repeat(5,1fr)}
.kpi-grid-4{grid-template-columns:repeat(4,1fr)}
.kpi-grid-3{grid-template-columns:repeat(3,1fr)}
.kpi-grid-2{grid-template-columns:repeat(2,1fr)}
.kpi-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 14px;
  transition:all .2s ease;position:relative;overflow:hidden;
}
.kpi-card::after{
  content:'';position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(135deg,rgba(255,255,255,0.02) 0%,transparent 60%);
  pointer-events:none;
}
.kpi-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow)}
.kpi-icon{
  width:36px;height:36px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;margin-bottom:8px;
}
.kpi-label{font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.kpi-value{font-size:1.6rem;font-weight:800;color:var(--text);line-height:1;margin-bottom:4px;letter-spacing:-0.5px}
.kpi-value.sm{font-size:1.3rem}
.kpi-delta{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.75rem;font-weight:600;padding:2px 8px;
  border-radius:99px;
}
.kpi-delta.up{background:var(--green-dim);color:var(--green)}
.kpi-delta.down{background:var(--red-dim);color:var(--red)}
.kpi-delta.neu{background:var(--border);color:var(--text2)}
.kpi-sub{font-size:.75rem;color:var(--text2);margin-top:4px}

/* ─── CONTENT GRID ───────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.chart-container{position:relative;height:200px}
.chart-container.tall{height:260px}
.donut-chart-wrap{position:relative;width:130px;height:130px;flex:0 0 130px}
.donut-chart-wrap-sm{position:relative;width:120px;height:120px;flex:0 0 120px}
.dash-donut-card{min-width:0}

/* ─── TABLES ─────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;width:100%;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:100%}
thead tr{border-bottom:1px solid var(--border2)}
th{padding:8px 12px;font-size:.72rem;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.06em;text-align:left;white-space:nowrap}
td{padding:10px 12px;font-size:.85rem;color:var(--text2);
  border-bottom:1px solid var(--border);white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,0.02);color:var(--text)}
tbody tr:hover{cursor:default}
.td-main{color:var(--text)!important;font-weight:600}
.td-desc-tx{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:480px){ .td-desc-tx{max-width:110px} }
.td-amount{font-weight:700;font-variant-numeric:tabular-nums}
.td-pos{color:var(--green)!important}
.td-neg{color:var(--red)!important}
.td-actions{display:flex;gap:6px;align-items:center}

@media(max-width:900px){
  table{min-width:600px}
  th,td{padding:8px 10px;font-size:.8rem}
}
@media(max-width:600px){
  table{min-width:500px}
  th,td{padding:6px 8px;font-size:.75rem}
  .td-actions{flex-direction:column;gap:4px}
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--radius-sm);
  font-size:.85rem;font-weight:600;
  transition:all .15s;cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{background:var(--accent);color:#000;border-color:var(--accent)}
.btn-primary:hover{background:#00BFAA;box-shadow:0 0 20px var(--accent-glow)}
.btn-secondary{background:var(--border);color:var(--text2);border-color:var(--border2)}
.btn-secondary:hover{background:var(--border2);color:var(--text)}
.btn-accent{background:var(--indigo-dim);color:var(--indigo);border-color:var(--indigo)}
.btn-accent:hover{background:var(--indigo);color:#fff;box-shadow:0 0 16px rgba(99,102,241,.3)}
.btn-ghost{background:transparent;color:var(--text2);border-color:var(--border)}
.btn-ghost:hover{background:var(--border);color:var(--text)}
.btn-danger{background:var(--red-dim);color:var(--red);border-color:transparent}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-icon{
  width:32px;height:32px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  background:var(--border);color:var(--text2);
  font-size:.85rem;transition:all .15s;flex-shrink:0;
}
.btn-icon:hover{background:var(--red-dim);color:var(--red)}
.btn-icon.edit:hover{background:var(--indigo-dim);color:var(--indigo)}
.btn-sm{padding:5px 12px;font-size:.78rem}
.btn-xs{padding:4px 8px;font-size:.72rem}

/* FAB */
.fab{
  position:fixed;bottom:28px;right:28px;
  width:52px;height:52px;border-radius:16px;
  background:var(--accent);color:#000;
  font-size:1.4rem;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 24px var(--accent-glow);
  cursor:pointer;transition:all .2s;z-index:40;
  border:none;font-weight:800;
}
.fab:hover{transform:scale(1.08);box-shadow:0 6px 32px var(--accent-glow)}
.fab:active{transform:scale(0.95)}

/* ─── BOTTOM NAV MOBILE ───────────────────────────────────────── */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:calc(64px + env(safe-area-inset-bottom,0px));
  background:var(--bg2);
  border-top:1px solid var(--border);
  z-index:200;
  align-items:center;
  justify-content:space-around;
  padding:0 4px;
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -4px 24px rgba(0,0,0,0.3);
  /* Backdrop blur for premium look */
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(var(--bg2-rgb,17,24,39),0.92);
}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;flex:1;cursor:pointer;
  padding:6px 4px;border-radius:12px;
  transition:all .15s;color:var(--text3);
  font-size:.6rem;font-weight:600;letter-spacing:.03em;
  position:relative;
  -webkit-tap-highlight-color:transparent;
}
.bottom-nav-item:hover,.bottom-nav-item:active{color:var(--text2);background:var(--border)}
.bottom-nav-item.active{color:var(--accent)}
.bottom-nav-item .bn-icon{font-size:1.25rem;line-height:1;transition:transform .2s}
.bottom-nav-item.active .bn-icon{transform:scale(1.15)}
.bottom-nav-add{
  background:var(--accent)!important;color:#000!important;
  width:48px;height:48px;border-radius:14px;
  margin-top:-8px;flex:0 0 48px;
  box-shadow:0 4px 20px var(--accent-glow);
  font-size:1.5rem!important;font-weight:800;
}
.bottom-nav-badge{
  position:absolute;top:4px;right:12px;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);
  border:2px solid var(--bg2);
}
@media(max-width:900px){
  .bottom-nav{display:flex}
  .fab{bottom:80px;right:16px;display:none} /* hide FAB — bottom nav replaces it */
  .content{padding-bottom:80px!important}
}
@media(max-width:480px){
  .bottom-nav-item span:not(.bn-icon):not(.bottom-nav-badge){display:none}
  .bottom-nav-item{padding:8px 2px}
}

/* ─── FINANCIAL HEALTH SCORE ─────────────────────────────────── */
.health-score-card{
  background:linear-gradient(135deg,var(--card) 0%,var(--card2) 100%);
  border:1px solid var(--border2);
  border-radius:var(--radius);
  padding:20px 24px;
  margin-bottom:16px;
  display:flex;align-items:center;gap:20px;
  position:relative;overflow:hidden;
  cursor:default;
}
.health-score-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--indigo));
}
.health-score-ring{
  position:relative;flex-shrink:0;
  width:80px;height:80px;
}
.health-score-ring svg{transform:rotate(-90deg)}
.health-score-ring-bg{fill:none;stroke:var(--border2);stroke-width:6}
.health-score-ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1)}
.health-score-num{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.3rem;font-weight:900;color:var(--text);letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.health-score-info{flex:1}
.health-score-label{font-size:.68rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.health-score-title{font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:6px}
.health-score-bars{display:flex;flex-direction:column;gap:5px}
.health-bar-row{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--text2)}
.health-bar-row .hb-label{width:90px;flex-shrink:0;font-weight:500}
.health-bar-row .hb-wrap{flex:1;background:var(--border);height:4px;border-radius:99px;overflow:hidden}
.health-bar-row .hb-fill{height:100%;border-radius:99px;transition:width 1s ease}
.health-bar-row .hb-val{width:70px;text-align:right;font-weight:700;color:var(--text);flex-shrink:0;font-size:.68rem}
.health-score-eom{
  flex-shrink:0;text-align:right;
  padding:10px 14px;background:var(--bg);
  border:1px solid var(--border);border-radius:10px;
  min-width:130px;
}
.health-score-eom .eom-label{font-size:.65rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.health-score-eom .eom-val{font-size:1.1rem;font-weight:800;color:var(--accent)}
.health-score-eom .eom-sub{font-size:.68rem;color:var(--text2);margin-top:2px}

/* ─── STREAK & QUICK ADD ────────────────────────────────────────  */
.streak-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:99px;
  background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.08));
  border:1px solid rgba(245,158,11,0.25);
  font-size:.75rem;font-weight:700;color:var(--gold);
  cursor:default;
}
.quick-add-modal{
  position:fixed;inset:0;z-index:400;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
}
.quick-add-modal.open{display:flex;animation:fadeIn .15s ease}
.quick-add-sheet{
  background:var(--card);
  border-radius:20px 20px 0 0;
  padding:20px 20px 32px;
  width:100%;max-width:500px;
  animation:slideUp .25s ease;
  border:1px solid var(--border2);
  border-bottom:none;
}
.quick-add-handle{
  width:36px;height:4px;border-radius:99px;
  background:var(--border2);margin:0 auto 16px;
}
.quick-add-types{display:flex;gap:8px;margin-bottom:16px}
.quick-add-type{
  flex:1;padding:10px 8px;border-radius:10px;
  border:1.5px solid var(--border2);
  background:var(--bg2);color:var(--text2);
  font-size:.82rem;font-weight:600;text-align:center;
  cursor:pointer;transition:all .15s;
}
.quick-add-type.active{
  border-color:var(--accent);background:var(--accent-dim);color:var(--accent);
}
.quick-add-type.gasto-active{
  border-color:var(--red);background:var(--red-dim);color:var(--red);
}
.quick-amount-input{
  font-size:2.5rem;font-weight:900;color:var(--text);
  border:none;background:transparent;width:100%;
  text-align:center;margin-bottom:12px;outline:none;
  letter-spacing:-1px;
}
.quick-amount-input::placeholder{color:var(--border2)}
.quick-cat-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;justify-content:center;max-height:38vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:2px}
.quick-cat-btn{
  padding:5px 12px;border-radius:99px;font-size:.75rem;font-weight:600;
  border:1px solid var(--border2);background:var(--bg2);color:var(--text2);
  cursor:pointer;transition:all .12s;
}
.quick-cat-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}
.quick-cat-btn.gasto-active{background:var(--red-dim);border-color:var(--red);color:var(--red)}

/* ─── TIP OF THE DAY ────────────────────────────────────────── */
.tip-card{
  background:linear-gradient(135deg,var(--indigo-dim),rgba(99,102,241,0.05));
  border:1px solid var(--indigo-dim);
  border-left:3px solid var(--indigo);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:16px;
}
.tip-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.tip-text{font-size:.8rem;color:var(--text2);line-height:1.5}
.tip-text strong{color:var(--text)}

/* ─── MONTH SUMMARY BANNER ───────────────────────────────────── */
.month-summary-banner{
  background:linear-gradient(135deg,var(--card2),var(--card));
  border:1px solid rgba(0,212,170,0.2);
  border-radius:var(--radius);padding:16px 20px;
  margin-bottom:16px;position:relative;overflow:hidden;
  animation:slideUp .3s ease;
}
.month-summary-banner::after{
  content:'🎊';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:2rem;opacity:0.3;
}
.month-summary-close{
  position:absolute;top:10px;right:14px;
  cursor:pointer;color:var(--text3);font-size:1rem;
  background:none;border:none;line-height:1;
  padding:4px;
}
.msb-title{font-size:.75rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.msb-stats{display:flex;gap:20px;flex-wrap:wrap}
.msb-stat{font-size:.82rem;color:var(--text2)}
.msb-stat strong{color:var(--text);font-weight:700}

/* ─── ANIMATED KPI COUNTER ──────────────────────────────────── */
@keyframes kpiPop{0%{transform:scale(0.85);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.kpi-value.anim{animation:kpiPop .5s cubic-bezier(0.34,1.56,0.64,1) both}

/* ─── ENHANCED TOAST ─────────────────────────────────────────── */
#toast{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:12px 20px;
  font-size:.85rem;font-weight:600;color:var(--text);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);z-index:600;
  display:none;align-items:center;gap:10px;
  animation:toastIn .3s cubic-bezier(0.34,1.56,0.64,1);
  white-space:nowrap;
}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px) scale(0.95)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@media(max-width:900px){#toast{bottom:76px}}

/* ─── BADGES & TAGS ──────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:99px;
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
}
.badge-green{background:var(--green-dim);color:var(--green)}
.badge-red{background:var(--red-dim);color:var(--red)}
.badge-accent{background:var(--accent-dim);color:var(--accent)}
.badge-gold{background:var(--gold-dim);color:var(--gold)}
.badge-indigo{background:var(--indigo-dim);color:var(--indigo)}
.badge-gray{background:var(--border);color:var(--text2)}
.tag{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-size:.72rem;font-weight:600;background:var(--border);color:var(--text2);
}

/* ─── PROGRESS BAR ───────────────────────────────────────────── */
.progress-wrap{background:var(--border);border-radius:99px;height:6px;overflow:hidden}
.progress-bar{height:100%;border-radius:99px;transition:width .5s ease;min-width:2px}
.progress-ok{background:var(--green)}
.progress-warn{background:var(--gold)}
.progress-danger{background:var(--red)}
.progress-accent{background:var(--accent)}
.progress-indigo{background:var(--indigo)}

/* ─── MODALS ─────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);
  backdrop-filter:blur(4px);z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.modal-overlay.open{display:flex;animation:fadeIn .2s ease}
.modal-overlay.mn-modal-inline-top{z-index:9700}
.modal{
  background:var(--card);border:1px solid var(--border2);
  border-radius:20px;width:100%;max-width:480px;
  max-height:90vh;max-height:90dvh;overflow-y:auto;
  box-shadow:var(--shadow-lg);
  animation:slideUp .25s ease;
}
.modal.wide{max-width:640px}
.modal.modal-2col-wide{max-width:720px}
.modal-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}
.modal-2col-left,.modal-2col-right{display:flex;flex-direction:column;gap:14px}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{
  padding:20px 24px 16px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--card);z-index:10;
  border-radius:20px 20px 0 0;
}
.modal-title{font-size:1rem;font-weight:700;color:var(--text)}
.modal-close{
  width:30px;height:30px;border-radius:var(--radius-sm);
  background:var(--border);color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;cursor:pointer;transition:all .15s;
  flex-shrink:0;
}
.modal-close:hover{background:var(--red-dim);color:var(--red)}
.modal-body{padding:20px 24px 80px}
.modal-footer{
  padding:16px 24px calc(16px + env(safe-area-inset-bottom, 0px));border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:10px;
  border-radius:0 0 20px 20px;
  position:sticky;bottom:0;background:var(--card);z-index:10;
}

/* ─── FORMS ──────────────────────────────────────────────────── */
.form-group{margin-bottom:14px}
.form-row{display:grid;gap:12px;margin-bottom:14px}
.form-row-2{grid-template-columns:1fr 1fr}
.form-row-3{grid-template-columns:1fr 1fr 1fr}
label{display:block;font-size:.78rem;font-weight:600;color:var(--text2);margin-bottom:5px}
input,select,textarea{
  width:100%;padding:9px 12px;
  background:var(--bg);border:1px solid var(--border2);
  border-radius:var(--radius-sm);
  color:var(--text);font-size:.88rem;font-family:inherit;
  transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim);
}
input::placeholder{color:var(--text3)}
select option{background:var(--card);color:var(--text)}
textarea{resize:vertical;min-height:70px}
.form-hint{font-size:.73rem;color:var(--text2);margin-top:4px}
.form-dependency-hint{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-top:8px;padding:10px 12px;border-radius:10px;
  background:var(--accent-dim);border:1px solid rgba(0,212,170,.25);
  font-size:.78rem;font-weight:600;color:var(--text2);
}
.form-dependency-hint button{
  flex-shrink:0;padding:6px 12px;border-radius:8px;border:none;
  background:var(--accent);color:#042b20;font-weight:800;font-size:.74rem;
  cursor:pointer;font-family:inherit;transition:opacity .15s;
}
.form-dependency-hint button:hover{opacity:.85}
.form-check{display:flex;align-items:center;gap:8px;padding:4px 0}
.form-check input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;
}
.form-check label{margin:0;font-size:.85rem;font-weight:400;cursor:pointer;color:var(--text2)}
.custom-cat-field{display:none}
.custom-cat-field.show{display:block}

/* ─── SECTION HEADER ─────────────────────────────────────────── */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;gap:12px;flex-wrap:wrap;
}
.page-h1{font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-0.5px;display:flex;align-items:center;gap:10px}
.page-h1 span{color:var(--accent)}
.page-h1 svg{color:var(--accent);flex-shrink:0}
.page-sub{font-size:.85rem;color:var(--text2);margin-top:3px}
.section-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* ─── INSIGHT CARDS ──────────────────────────────────────────── */
.insight-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg2);
  margin-bottom:8px;
}
.insight-icon{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
}
.insight-text{font-size:.82rem;color:var(--text2);line-height:1.5}
.insight-text strong{color:var(--text)}

/* ─── PROJECTION SCENARIO CARDS (Conservador/Moderado/Optimista) ── */
.mn-scenario-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
@media(max-width:640px){
  .mn-scenario-grid{grid-template-columns:1fr;gap:8px}
}
.mn-3col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:480px){
  .mn-3col-grid{grid-template-columns:1fr;gap:8px}
}

/* ─── INVEST CARDS ───────────────────────────────────────────── */
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:20px}
@media(max-width:640px){
  .inv-grid{grid-template-columns:1fr;gap:12px}
}
.inv-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
  transition:all .2s;position:relative;
}
.inv-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.inv-card.cerrada{border-color:rgba(16,185,129,0.25)!important}
.inv-card.cerrada::before{
  content:'✓ LIQUIDADA';position:absolute;top:14px;right:14px;
  font-size:.65rem;font-weight:800;padding:3px 8px;border-radius:99px;
  background:var(--green-dim);color:var(--green);letter-spacing:.05em;
}
.inv-name{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:4px;padding-right:80px}
.inv-meta{font-size:.78rem;color:var(--text2);margin-bottom:14px}
.inv-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.inv-stat{background:var(--bg2);border-radius:var(--radius-sm);padding:8px 10px}
.inv-stat-label{font-size:.68rem;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.inv-stat-val{font-size:1rem;font-weight:700;color:var(--text);margin-top:2px}
.inv-actions{display:flex;gap:8px;flex-wrap:wrap}

/* ─── DEBT / GOAL CARDS ──────────────────────────────────────── */
.goal-card.has-img{min-height:220px;}
.debt-card,.goal-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
  transition:all .2s;
}
.debt-card:hover,.goal-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.goal-card.has-bg{border:none;min-height:220px;color:#fff}
.goal-card.has-bg .goal-name{text-shadow:0 1px 4px rgba(0,0,0,.5)}
.debt-name,.goal-name{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:4px}
.debt-meta,.goal-meta{font-size:.78rem;color:var(--text2);margin-bottom:12px}
.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:.78rem}
.progress-label{color:var(--text2);font-weight:500}
.progress-pct{font-weight:700;color:var(--text)}

/* ─── PRESUPUESTO ITEMS ──────────────────────────────────────── */
.budget-item{
  padding:14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg2);
  margin-bottom:10px;
}
.budget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap;gap:8px 12px}
.budget-cat{font-size:.88rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.budget-nums{font-size:.8rem;color:var(--text2);white-space:nowrap}
.budget-nums strong{color:var(--text);font-weight:700}

/* ─── ACCOUNT CARDS ──────────────────────────────────────────── */
.cuenta-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  transition:all .2s;position:relative;overflow:hidden;
}
.cuenta-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.cuenta-accent{
  position:absolute;top:0;left:0;right:0;height:3px;
}
.cuenta-name{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:2px;margin-top:8px}
.cuenta-tipo{font-size:.75rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.cuenta-balance{font-size:1.8rem;font-weight:800;margin:12px 0 4px;letter-spacing:-0.5px}
.cuenta-updated{font-size:.73rem;color:var(--text3)}

/* ─── EMPTY STATE ────────────────────────────────────────────── */
.empty{
  text-align:center;padding:48px 20px;color:var(--text2);
}
.empty-icon{font-size:2.5rem;margin-bottom:12px;opacity:.5}
.empty-title{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:6px}
.empty-sub{font-size:.82rem;max-width:280px;margin:0 auto 16px}

/* ─── TABS ───────────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;padding:4px;background:var(--bg2);border-radius:var(--radius-sm);border:1px solid var(--border);width:fit-content;margin-bottom:20px}
.tab{padding:6px 14px;border-radius:6px;font-size:.82rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s}
.tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.2)}

/* ─── STAT ROW ───────────────────────────────────────────────── */
.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.stat-row:last-child{border-bottom:none}
.stat-key{font-size:.82rem;color:var(--text2);font-weight:500;display:flex;align-items:center;gap:6px}
.stat-val{font-size:.88rem;font-weight:700;color:var(--text)}

/* ─── DONUT LEGEND ───────────────────────────────────────────── */
.legend{display:flex;flex-direction:column;gap:6px;margin-top:12px;min-width:0}
.legend-item{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;min-width:0;gap:6px}
.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.legend-label{color:var(--text2);flex:1;margin-left:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-val{font-weight:700;color:var(--text);flex-shrink:0;white-space:nowrap}

/* ─── CONFIRM MODAL ──────────────────────────────────────────── */
#confirmModal .modal{max-width:380px;text-align:center}
#confirmModal .modal-body{padding:24px}
.confirm-icon{font-size:2.2rem;margin-bottom:12px}
.confirm-title{font-size:1rem;font-weight:700;color:var(--text);margin-bottom:8px}
.confirm-msg{font-size:.85rem;color:var(--text2);line-height:1.5}
#confirmModal .modal-footer{justify-content:center}

/* ─── LIQUIDAR MODAL ─────────────────────────────────────────── */
.liq-preview{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px;margin-top:14px;
}
.liq-preview-row{display:flex;justify-content:space-between;padding:4px 0;font-size:.82rem}
.liq-preview-row span:first-child{color:var(--text2)}
.liq-preview-row span:last-child{font-weight:700;color:var(--text)}
.liq-preview-divider{border:none;border-top:1px solid var(--border);margin:8px 0}
.liq-ganancia{font-size:1rem!important}

/* ─── APORTAR MODAL ──────────────────────────────────────────── */
.radio-group{display:flex;gap:8px;margin-bottom:12px}
.radio-opt{
  flex:1;padding:10px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);cursor:pointer;
  text-align:center;font-size:.82rem;font-weight:600;color:var(--text2);
  transition:all .15s;
}
.radio-opt.selected{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}

/* ─── DISTRIBUTER ────────────────────────────────────────────── */
.dist-cat{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg2);
  margin-bottom:8px;
}
.dist-cat label{flex:1;margin:0;color:var(--text);font-weight:600;cursor:default}
.dist-pct{width:64px}
.dist-total{
  font-size:.85rem;font-weight:700;
  padding:8px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg);
  text-align:right;color:var(--text2);margin-top:8px;
}

/* ─── TOP SECTION ────────────────────────────────────────────── */
.pill-filter{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;
}
.pill{
  padding:4px 12px;border-radius:99px;font-size:.78rem;font-weight:600;
  border:1px solid var(--border);color:var(--text2);cursor:pointer;transition:all .15s;
}
.pill.active{background:var(--accent-dim);border-color:rgba(0,212,170,0.3);color:var(--accent)}
.pill:hover:not(.active){border-color:var(--border2);color:var(--text)}

/* ─── CONFIG PAGE ────────────────────────────────────────────── */
.config-section{margin-bottom:28px}
.config-section-title{
  font-size:.82rem;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:12px;padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.cat-pills{display:flex;flex-wrap:wrap;gap:6px}
.cat-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px 4px 12px;border-radius:99px;
  background:var(--border);color:var(--text2);
  font-size:.8rem;font-weight:600;
}
.cat-pill .remove{
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--border2);color:var(--text2);
  font-size:.65rem;cursor:pointer;transition:all .15s;
}
.cat-pill .remove:hover{background:var(--red);color:#fff}
.add-cat-row{display:flex;gap:8px;margin-top:8px}
.add-cat-row input{flex:1}

/* ─── TOAST ──────────────────────────────────────────────────── */
#toast.show{display:flex}
#toast.success{border-color:rgba(0,212,170,0.3);color:var(--accent)}
#toast.error{border-color:rgba(244,63,94,0.3);color:var(--red)}

/* ─── NAV SUBTITLES ──────────────────────────────────────────── */
.nav-subtitle{font-size:.58rem;color:var(--text3);line-height:1;margin-top:1px;display:block}

/* ─── OVERLAY SIDEBAR MOBILE ─────────────────────────────────── */
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.6);z-index:210;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  pointer-events:none;
  touch-action:none;
  /* Own compositing layer so the blur doesn't get rasterized once and
     "stuck" behind the animating sidebar on iOS Safari. */
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}
.sidebar-overlay.open{
  display:block;
  pointer-events:all;
  /* In mobile the sidebar is position:fixed, overlay covers full screen.
     z-index must stay above .bottom-nav (200) or the bottom bar visually
     and interactively blocks the lower part of the open sidebar. */
}

/* ─── 1100px: tighten sidebar on mid-range laptops ─────────── */
@media(max-width:1100px){
  :root{--sidebar-w:190px}
  .content{padding:20px}
  .topbar{padding:0 20px}
}

/* ─── MOBILE (<900px) ────────────────────────────────────────── */
@media(max-width:900px){
  :root{--sidebar-w:240px}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;
    height:100vh;height:100svh;height:100dvh;
    /* Above .sidebar-overlay (210) and .bottom-nav (200) so the open drawer
       is never visually cut off or touch-blocked by the bottom tab bar. */
    z-index:220;
    transform:translateX(-100%);
    -webkit-transform:translateX(-100%);
    box-shadow:0 0 0 rgba(0,0,0,0);
    padding-top:env(safe-area-inset-top,0px);
    visibility:hidden;
    transition:transform .3s ease, visibility 0s linear .3s;
    /* Own GPU compositing layer: on iOS Safari, a position:fixed element
       animated with transform can otherwise be composited together with
       the blurred overlay beneath it and appear to "freeze" mid-transition
       (a stale rasterized frame instead of live content). Promoting the
       sidebar to its own layer avoids that. Purely a rendering hint —
       no visual/layout change. */
    will-change:transform;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .sidebar.open{
    transform:translateX(0);
    -webkit-transform:translateX(0);
    box-shadow:8px 0 32px rgba(0,0,0,0.6);
    visibility:visible;
    transition:transform .3s ease, visibility 0s linear 0s;
  }
  .sidebar-nav{
    padding:8px 0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .nav-item{
    margin:0 8px;
    padding:10px 14px;
  }
  .nav-section{
    padding:8px 16px 4px;
    margin-top:4px;
  }
  .nav-logout-wrap{
    position:sticky;
    bottom:0;
    background:var(--bg2);
    padding:8px 0;
    padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
    border-top:1px solid var(--border);
  }
  .main{min-width:0;margin-left:0;padding-left:0}
  .hamburger{display:flex}
  /* En mobile, ocultar en el sidebar los items que ya están en el bottom nav */
  #nav-dashboard, #nav-analisis, #nav-billing, #nav-configuracion { display:none; }
  /* Ocultar el label "Principal" del sidebar en mobile (ya se ve en bottom nav) */
  .sidebar .nav-section:first-of-type { display:none; }
  .kpi-grid-5{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-4{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .col-span-2{grid-column:span 1}
  .form-row-2{grid-template-columns:1fr}
  .modal-2col{grid-template-columns:1fr;gap:0}
  .modal.modal-2col-wide{max-width:480px}
  .form-row-3{grid-template-columns:1fr}
  .modal-close{width:44px;height:44px;font-size:1.1rem}
  .content{padding:14px;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .topbar{
    padding:0 16px;
    gap:8px;
    height:auto;
    min-height:56px;
    flex-wrap:nowrap;
  }
  .topbar-left{
    flex:1;
    min-width:0;
    gap:8px;
  }
  .topbar-right{
    gap:6px;
    flex-wrap:nowrap;
  }
  .page-title-bar{
    font-size:1rem;
    font-weight:700;
    min-width:44px;
  }
  .dinero-display{
    padding:4px 10px;
    font-size:0.8rem;
    min-width:0;
  }
  .dinero-display .dinero-label{
    display:none;
  }
  .dinero-value{
    font-size:0.85rem;
    max-width:96px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:inline-block;
    vertical-align:bottom;
  }
  .btn-export{
    font-size:0.7rem;
    padding:6px 10px;
    white-space:nowrap;
  }
  #topThemeBtn{
    padding:6px 8px !important;
    font-size:0.85rem !important;
  }
  /* Ocultar botón exportar en páginas NO dashboard */
  body:not([data-page="dashboard"]) .btn-export{
    display:none;
  }
  /* Touch targets mínimos 44px */
  .nav-item{min-height:44px;padding:10px 14px}
  .btn{min-height:44px}
  .hamburger{min-width:44px;min-height:44px;padding:12px}
  /* Modales full-screen en móvil */
  .modal{padding:0;border-radius:0;max-width:100%;height:100vh;height:100dvh}
  .modal-content{border-radius:0;max-height:100%;overflow-y:auto}
  .modal-footer{flex-wrap:wrap;gap:8px}
  .modal-footer .btn{flex:1;min-width:120px}
  /* Cards con más padding */
  .card{padding:16px}
  .kpi-card{padding:14px 16px}
  /* Formularios más espaciosos */
  input,select,textarea{font-size:16px;padding:10px 12px}
  .form-row-2,.form-row-3{grid-template-columns:1fr}
  /* Bottom nav siempre visible */
  .bottom-nav{position:fixed;bottom:0}
  .tut-tooltip{max-width:calc(100vw - 32px);min-width:0;left:16px!important;right:16px;top:auto!important;bottom:80px!important;transform:none!important}
  .tut-highlight{display:none!important}
  .ob-split-left{display:none!important}
  .ob-split-right{padding:32px 24px 24px;max-width:100%!important}
  .ob-fullscreen{align-items:flex-end}
  .ob-sheet{border-radius:24px 24px 0 0;min-height:70vh;width:100%;max-width:100%}
  .ob-visual-header{display:flex!important;background:#0A0E17;padding:32px 24px 20px;border-radius:24px 24px 0 0;align-items:center;gap:16px}
  .ob-feat-grid{grid-template-columns:1fr 1fr!important}
  .patrimonio-stats{gap:12px}
  .patrimonio-num{font-size:2rem}
  .page-h1{font-size:1.25rem}
  .inv-stats{grid-template-columns:1fr}
  .action-row{flex-wrap:wrap}
}

/* ─── SMALL MOBILE (<480px) ─────────────────────────────────── */
@media(max-width:480px){
  .kpi-grid-5,.kpi-grid-4,.kpi-grid-3,.kpi-grid-2{grid-template-columns:1fr}
  .inv-grid{grid-template-columns:1fr}
  .section-header{flex-direction:column;align-items:flex-start;gap:12px}
  .section-actions{width:100%;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center}
  .section-actions .btn{justify-content:center}
  /* Análisis compare select — compact on mobile */
  .section-actions select{max-width:130px;font-size:.75rem}
  .section-actions span[style*="text-transform"]{font-size:.65rem}
  .page-h1{font-size:1.15rem}
  .topbar{padding:0 12px}
  .content{padding:10px;padding-bottom:90px}
  /* Topbar: el presupuesto de espacio es muy ajustado por debajo de
     480px — asegurar que el saldo (que puede tener 6+ cifras) nunca
     aplaste el titulo de pagina hasta hacerlo ilegible. */
  .dinero-value{max-width:64px}
  .dinero-display{padding:4px 8px}
  /* Tablas responsivas */
  table{font-size:0.85rem}
  td,th{padding:8px 6px}
  /* Ajustes específicos de componentes */
  .modal-header{align-items:flex-start;gap:10px}
  .modal-actions{flex-direction:column;gap:10px}
  .modal-actions .btn{width:100%}
  
/* ── mnTrialPill — Premium subscription status pill ── */
#mnTrialPill {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: .68rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: .02em;
}
#mnTrialPill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  opacity: 0;
  transition: opacity .18s;
}
#mnTrialPill:hover::before { opacity: 1; }
#mnTrialPill:hover { transform: translateY(-1px); }
#mnTrialPill:active { transform: translateY(0); }

#mnTrialPill.pill--pro {
  background: linear-gradient(135deg, rgba(139,92,246,.15), rgba(99,102,241,.12));
  border: 1.5px solid rgba(139,92,246,.35);
  color: #a78bfa;
  box-shadow: 0 1px 8px rgba(139,92,246,.12);
}
#mnTrialPill.pill--pro:hover {
  box-shadow: 0 3px 14px rgba(139,92,246,.22);
}
#mnTrialPill.pill--trial {
  background: linear-gradient(135deg, rgba(99,102,241,.13), rgba(139,92,246,.10));
  border: 1.5px solid rgba(99,102,241,.35);
  color: #818cf8;
  box-shadow: 0 1px 8px rgba(99,102,241,.10);
}
#mnTrialPill.pill--trial:hover {
  box-shadow: 0 3px 14px rgba(99,102,241,.2);
}
#mnTrialPill.pill--urgent {
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(239,68,68,.10));
  border: 1.5px solid rgba(245,158,11,.40);
  color: #f59e0b;
  box-shadow: 0 1px 8px rgba(245,158,11,.12);
  animation: mnPillPulse 2.4s ease-in-out infinite;
}
#mnTrialPill.pill--urgent:hover {
  box-shadow: 0 3px 14px rgba(245,158,11,.25);
}
@keyframes mnPillPulse {
  0%,100% { box-shadow: 0 1px 8px rgba(245,158,11,.12); }
  50%      { box-shadow: 0 2px 14px rgba(245,158,11,.30); }
}
#mnTrialPillIcon {
  font-size: .78rem;
  line-height: 1;
}
#mnTrialPillText {
  line-height: 1;
}

.btn-export{display:none}
  .topbar-right{gap:6px}
  .patrimonio-stats{flex-direction:column;gap:8px}
  .content{padding:12px}
  .topbar{padding:0 12px;height:52px;min-height:52px}
  .sidebar-logo{
    height:calc(52px + env(safe-area-inset-top,0px));
    min-height:calc(52px + env(safe-area-inset-top,0px));
    padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;
  }
  #sidebarLogoImg svg{max-height:38px}
}

/* ─── ONBOARDING ─────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   CINEMATIC INTRO
═══════════════════════════════════════════════════════════════ */
/* ─── CINEMATIC INTRO (first-time onboarding only) ──────────── */
#mnIntro{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  pointer-events:all;
}
#mnIntroBg{
  position:absolute;inset:0;
  background:#0A0E17;
  opacity:0;
  transition:opacity .35s ease;
}
#mnIntroBg.visible{opacity:1}
#mnIntroContent{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;transform:scale(1.06) translateY(6px);
  transition:opacity .55s cubic-bezier(0.22,1,0.36,1), transform .55s cubic-bezier(0.22,1,0.36,1);
}
#mnIntroContent.visible{opacity:1;transform:scale(1) translateY(0)}
#mnIntroLogo{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
}
#mnIntroSvg #svgR1,
#mnIntroSvg #svgP1{
  stroke-dasharray:200;
  stroke-dashoffset:200;
  transition:stroke-dashoffset 1s cubic-bezier(0.22,1,0.36,1);
}
#mnIntroSvg #svgC1{
  opacity:0;transform:scale(0);transform-origin:38px 28px;
  transition:opacity .3s ease .9s, transform .3s cubic-bezier(0.34,1.56,0.64,1) .9s;
}
#mnIntroSvg.animate #svgR1{stroke-dashoffset:0}
#mnIntroSvg.animate #svgP1{stroke-dashoffset:0;transition-delay:.25s}
#mnIntroSvg.animate #svgC1{opacity:1;transform:scale(1)}
#mnIntroWordmark{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:1.6rem;font-weight:700;letter-spacing:-.03em;
  color:#E8EFF7;
  opacity:0;transform:translateY(8px);
  transition:opacity .45s ease .6s, transform .45s cubic-bezier(0.22,1,0.36,1) .6s;
}
#mnIntroWordmark.visible{opacity:1;transform:translateY(0)}
#mnIntroTagline{
  font-size:.82rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:#475569;
  opacity:0;
  transition:opacity .4s ease .9s;
}
#mnIntroTagline.visible{opacity:1}
#mnIntro.fade-out{
  pointer-events:none;
}
#mnIntro.fade-out #mnIntroBg{opacity:0;transition:opacity .5s ease}
#mnIntro.fade-out #mnIntroContent{opacity:0;transform:scale(0.97) translateY(-4px);transition:opacity .4s ease, transform .4s ease}

/* ─── MINI INTRO — runs every app open ───────────────────────── */
#mnMiniIntro{
  position:fixed;inset:0;
  z-index:8800; /* below modals, above app content */
  display:flex;align-items:center;justify-content:center;
  pointer-events:all;
  /* start fully black — will fade in immediately */
  background:rgba(10,14,23,1);
  opacity:1;
  /* entrance: tiny scale on the whole overlay = subtle zoom-out feel */
  will-change:opacity;
}
#mnMiniIntro.mn-exiting{
  pointer-events:none;
  opacity:0;
  transition:opacity 240ms cubic-bezier(0.4,0,1,1);
}

/* Center stage */
#mnMiniStage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  /* start at slight scale-up + offset — animates to resting position */
  transform:scale(1.03) translateY(5px);
  opacity:0;
  will-change:transform,opacity;
  transition:
    opacity  360ms cubic-bezier(0.22,1,0.36,1) 60ms,
    transform 480ms cubic-bezier(0.22,1,0.36,1) 60ms;
}
#mnMiniStage.mn-stage-in{
  transform:scale(1) translateY(0);
  opacity:1;
}
#mnMiniStage.mn-stage-out{
  transform:scale(0.98) translateY(-3px);
  opacity:0;
  transition:
    opacity  200ms cubic-bezier(0.4,0,1,1) 0ms,
    transform 200ms cubic-bezier(0.4,0,1,1) 0ms;
}

/* Logo mark */
#mnMiniLogo{
  width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:translateY(6px);
  will-change:transform,opacity;
  transition:
    opacity  320ms cubic-bezier(0.22,1,0.36,1) 80ms,
    transform 380ms cubic-bezier(0.22,1,0.36,1) 80ms;
}
#mnMiniLogo.mn-logo-in{
  opacity:1;
  transform:translateY(0);
}

/* SVG stroke draw animation */
#mnMiniSvg .mn-ring{
  stroke-dasharray:196;
  stroke-dashoffset:196;
  will-change:stroke-dashoffset;
  transition:stroke-dashoffset 540ms cubic-bezier(0.22,1,0.36,1) 100ms;
}
#mnMiniSvg .mn-line{
  stroke-dasharray:80;
  stroke-dashoffset:80;
  will-change:stroke-dashoffset;
  transition:stroke-dashoffset 440ms cubic-bezier(0.22,1,0.36,1) 200ms;
}
#mnMiniSvg .mn-dot{
  opacity:0;
  transform:scale(0);
  transform-origin:center;
  will-change:transform,opacity;
  transition:
    opacity  220ms ease 560ms,
    transform 260ms cubic-bezier(0.34,1.56,0.64,1) 560ms;
}
#mnMiniSvg.mn-svg-run .mn-ring{ stroke-dashoffset:0 }
#mnMiniSvg.mn-svg-run .mn-line{ stroke-dashoffset:0 }
#mnMiniSvg.mn-svg-run .mn-dot{ opacity:1; transform:scale(1) }

/* Wordmark */
#mnMiniWordmark{
  font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  font-size:1.5rem;
  font-weight:700;
  letter-spacing:-0.03em;
  color:#E8EFF7;
  opacity:0;
  transform:translateY(7px);
  will-change:transform,opacity;
  transition:
    opacity  380ms cubic-bezier(0.22,1,0.36,1) 200ms,
    transform 420ms cubic-bezier(0.22,1,0.36,1) 200ms;
}
#mnMiniWordmark.mn-word-in{
  opacity:1;
  transform:translateY(0);
}

/* Tagline — fades in slightly later */
#mnMiniTagline{
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#3B4A60;
  opacity:0;
  transition:opacity 300ms ease 460ms;
}
#mnMiniTagline.mn-tag-in{
  opacity:1;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM ONBOARDING — FULLSCREEN SPLIT EXPERIENCE
═══════════════════════════════════════════════════════════════ */
#onboardingOverlay{
  position:fixed;inset:0;z-index:900;
  display:none;align-items:center;justify-content:center;
  background:#0A0E17;
}
#onboardingOverlay.ob-visible{
  display:flex;
  animation:obFadeIn .4s ease forwards;
}
@keyframes obFadeIn{from{opacity:0}to{opacity:1}}

/* ── Global progress bar (top of entire screen) ── */
.ob-global-progress{
  position:absolute;top:0;left:0;right:0;height:2.5px;
  background:rgba(255,255,255,0.06);z-index:10;
}
.ob-global-bar{
  height:100%;background:linear-gradient(90deg,#00D4AA,#6366F1);
  transition:width .6s cubic-bezier(0.22,1,0.36,1);
  border-radius:0 2px 2px 0;
  box-shadow:0 0 12px rgba(0,212,170,0.4);
}

/* ── Skip (top-right, always visible) ── */
.ob-skip-global{
  position:absolute;top:20px;right:24px;z-index:20;
  font-size:.78rem;font-weight:500;color:rgba(255,255,255,0.35);
  cursor:pointer;padding:6px 12px;border-radius:99px;
  border:1px solid rgba(255,255,255,0.1);
  transition:color .2s,border-color .2s,background .2s;
  letter-spacing:.02em;
}
.ob-skip-global:hover{color:rgba(255,255,255,0.7);border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.05)}

/* ── Split container ── */
.ob-split{
  display:flex;width:100%;height:100vh;height:100dvh;overflow:hidden;
}

/* ── LEFT PANEL — visual storytelling ── */
.ob-split-left{
  width:42%;min-width:380px;flex-shrink:0;
  background:#0A0E17;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:60px 40px;
  border-right:1px solid rgba(255,255,255,0.05);
}
/* Gradient mesh background */
.ob-split-left::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(0,212,170,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(99,102,241,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(16,185,129,0.04) 0%, transparent 70%);
  pointer-events:none;
}
.ob-left-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:0;width:100%;max-width:340px;
}

/* Brand badge */
.ob-brand{
  display:flex;align-items:center;gap:10px;margin-bottom:40px;
}
.ob-brand-icon{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#00D4AA,#00A882);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px rgba(0,212,170,0.3);
}
.ob-brand-name{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:1.1rem;font-weight:800;color:#E8EFF7;letter-spacing:-.03em;
}

/* Visual dashboard preview */
.ob-visual-preview{
  width:100%;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:18px;overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,0.6);
  margin-bottom:32px;
  transform:perspective(1200px) rotateY(-4deg) rotateX(2deg);
  transition:transform .6s cubic-bezier(0.22,1,0.36,1);
}
.ob-visual-preview:hover{transform:perspective(1200px) rotateY(0deg) rotateX(0deg)}
.ob-preview-header{
  background:rgba(255,255,255,0.04);padding:10px 14px;
  display:flex;align-items:center;gap:6px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.ob-preview-dot{width:8px;height:8px;border-radius:50%}
.ob-preview-title-bar{
  flex:1;height:6px;background:rgba(255,255,255,0.08);
  border-radius:3px;margin:0 8px;
}
.ob-preview-body{padding:14px}
/* Mini KPI cards */
.ob-kpi-row{display:flex;gap:8px;margin-bottom:10px}
.ob-kpi-mini{
  flex:1;padding:10px 12px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);border-radius:10px;
}
.ob-kpi-lbl{font-size:.6rem;color:rgba(255,255,255,0.35);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px}
.ob-kpi-val{font-size:.95rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em}
.ob-kpi-val.green{color:#00D4AA}
.ob-kpi-val.red{color:#F43F5E}
.ob-kpi-val.blue{color:#6366F1}
/* Mini chart */
.ob-mini-chart{
  background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);
  border-radius:10px;padding:10px 12px;margin-bottom:10px;
}
.ob-chart-lbl{font-size:.58rem;color:rgba(255,255,255,0.3);font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.ob-chart-bars{display:flex;align-items:flex-end;gap:4px;height:36px}
.ob-bar{flex:1;border-radius:3px 3px 0 0;opacity:.85;transition:opacity .2s}
/* Mini goal */
.ob-mini-goal{display:flex;align-items:center;gap:10px;padding:8px 10px;background:rgba(0,212,170,0.06);border:1px solid rgba(0,212,170,0.15);border-radius:8px}
.ob-goal-icon{font-size:1rem}
.ob-goal-text{flex:1}
.ob-goal-title{font-size:.65rem;color:rgba(255,255,255,0.7);font-weight:700}
.ob-goal-sub{font-size:.58rem;color:rgba(255,255,255,0.35)}
.ob-goal-pct{font-size:.7rem;font-weight:800;color:#00D4AA}

/* Features list */
.ob-feats{display:flex;flex-direction:column;gap:10px}
.ob-feat{display:flex;align-items:center;gap:12px}
.ob-feat-icon{
  width:32px;height:32px;border-radius:9px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);
  display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;
}
.ob-feat-text{font-size:.8rem;color:rgba(255,255,255,0.5);font-weight:500;line-height:1.4}
.ob-feat-text strong{color:rgba(255,255,255,0.85);font-weight:700;display:block;font-size:.82rem}

/* ── RIGHT PANEL — content ── */
.ob-split-right{
  flex:1;
  display:flex;flex-direction:column;justify-content:center;
  padding:80px 60px 60px;max-width:580px;overflow-y:auto;
  background:var(--bg);
}
[data-theme="light"] .ob-split-right{background:#fff}

/* Step label */
.ob-step-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.68rem;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:20px;
}
.ob-step-pill-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:obPulse 2s ease infinite;
}
@keyframes obPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* Headline */
.ob-headline{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:2rem;font-weight:800;color:var(--text);
  letter-spacing:-.05em;line-height:1.15;margin-bottom:12px;
}
.ob-headline span{color:var(--accent)}
.ob-lead{
  font-size:.9rem;color:var(--text2);line-height:1.7;margin-bottom:36px;
  font-weight:400;max-width:380px;
}

/* Name input (step 1) */
.ob-name-wrap{position:relative;margin-bottom:8px}
.ob-name-input{
  width:100%;padding:18px 22px 18px 52px;
  background:var(--bg2);
  border:2px solid var(--border2);
  border-radius:16px;
  color:var(--text);font-size:1.1rem;font-family:inherit;font-weight:700;
  transition:border-color .25s,box-shadow .25s;
  -webkit-user-select:text;user-select:text;
  letter-spacing:-.01em;
}
[data-theme="light"] .ob-name-input{background:#F8FAFC;border-color:rgba(0,0,0,0.12)}
.ob-name-input:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(0,212,170,.1);
}
.ob-name-input::placeholder{color:var(--text3);font-weight:400}
.ob-name-prefix{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  font-size:1.2rem;pointer-events:none;
}
.ob-name-hint{font-size:.75rem;color:var(--text3);margin-bottom:28px;padding-left:4px}

/* Customize step */
.ob-section-label{
  font-size:.7rem;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;margin-top:24px;
}
.ob-section-label:first-of-type{margin-top:0}

/* Language chips */
.ob-lang-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:4px}
.ob-lang-chip{
  padding:8px 14px;border-radius:99px;
  border:1.5px solid var(--border2);
  cursor:pointer;display:flex;align-items:center;gap:7px;
  background:var(--bg2);
  transition:all .18s ease;font-size:.82rem;font-weight:600;color:var(--text2);
}
[data-theme="light"] .ob-lang-chip{background:#F8FAFC;border-color:rgba(0,0,0,0.1);color:#475569}
.ob-lang-chip:hover{border-color:var(--accent);color:var(--text);background:var(--accent-dim)}
.ob-lang-chip.selected{border-color:var(--accent);background:var(--accent-dim);color:var(--accent);font-weight:700}
.ob-lang-chip-flag{font-size:1rem}

/* Theme cards */
.ob-theme-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.ob-theme-card{
  padding:16px;border-radius:14px;border:2px solid var(--border2);
  cursor:pointer;transition:all .2s ease;background:var(--bg2);
}
[data-theme="light"] .ob-theme-card{background:#F8FAFC;border-color:rgba(0,0,0,0.1)}
.ob-theme-card:hover{border-color:rgba(0,212,170,0.4);transform:translateY(-2px)}
.ob-theme-card.selected{border-color:var(--accent);background:var(--accent-dim)}
.ob-theme-mockup{
  border-radius:8px;height:60px;margin-bottom:10px;overflow:hidden;
  display:flex;flex-direction:column;border:1px solid rgba(0,0,0,0.15);
}
.ob-theme-mockup.dark-mock{background:#0F1420;border-color:rgba(255,255,255,0.08)}
.ob-theme-mockup.light-mock{background:#F1F5F9;border-color:rgba(0,0,0,0.08)}
.ob-mock-topbar{height:14px;display:flex;align-items:center;padding:0 8px;gap:4px}
.ob-mock-topbar.dark-bar{background:#111827;border-bottom:1px solid rgba(255,255,255,0.06)}
.ob-mock-topbar.light-bar{background:#fff;border-bottom:1px solid rgba(0,0,0,0.06)}
.ob-mock-dot{width:5px;height:5px;border-radius:50%;background:#00D4AA}
.ob-mock-line{flex:1;height:4px;border-radius:2px;margin:0 4px}
.ob-mock-line.dark-line{background:rgba(255,255,255,0.08)}
.ob-mock-line.light-line{background:rgba(0,0,0,0.1)}
.ob-mock-body{flex:1;padding:6px 8px;display:flex;gap:5px}
.ob-mock-card{flex:1;border-radius:5px;height:100%}
.ob-mock-card.dark-card{background:rgba(255,255,255,0.05)}
.ob-mock-card.light-card{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,0.08)}
.ob-theme-card-label{font-size:.82rem;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.ob-theme-check{
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border2);
  margin-left:auto;display:flex;align-items:center;justify-content:center;
  font-size:.6rem;transition:all .2s;color:#000;
}
.ob-theme-card.selected .ob-theme-check{background:var(--accent);border-color:var(--accent)}

/* Launch options */
.ob-options{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.ob-opt{
  padding:16px 20px;border-radius:16px;border:2px solid var(--border2);
  cursor:pointer;display:flex;align-items:center;gap:16px;
  background:var(--bg2);
  transition:all .18s ease;text-align:left;
}
[data-theme="light"] .ob-opt{background:#F8FAFC;border-color:rgba(0,0,0,0.1)}
.ob-opt:hover{border-color:rgba(0,212,170,0.4);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.15)}
.ob-opt.selected{border-color:var(--accent);background:var(--accent-dim)}
.ob-opt-emoji{font-size:1.6rem;flex-shrink:0}
.ob-opt-info{flex:1}
.ob-opt-label{font-size:.9rem;font-weight:700;color:var(--text);margin-bottom:2px}
.ob-opt.selected .ob-opt-label{color:var(--accent)}
.ob-opt-sub{font-size:.75rem;color:var(--text2);line-height:1.4}
.ob-opt-radio{
  width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);
  flex-shrink:0;display:flex;align-items:center;justify-content:center;
  transition:all .18s;
}
.ob-opt.selected .ob-opt-radio{background:var(--accent);border-color:var(--accent)}
.ob-opt-radio-dot{width:7px;height:7px;border-radius:50%;background:#000;opacity:0;transform:scale(0);transition:all .18s}
.ob-opt.selected .ob-opt-radio-dot{opacity:1;transform:scale(1)}

/* Action footer */
.ob-actions-row{
  display:flex;align-items:center;gap:12px;margin-top:4px;
  padding-top:20px;border-top:1px solid var(--border);
}
[data-theme="light"] .ob-actions-row{border-top-color:rgba(0,0,0,0.07)}
.ob-back-btn{
  padding:12px 20px;border-radius:12px;border:1.5px solid var(--border2);
  background:transparent;color:var(--text2);font-size:.875rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .18s;
}
.ob-back-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.ob-next-btn{
  flex:1;padding:14px 28px;border-radius:14px;border:none;
  background:linear-gradient(135deg,#00D4AA,#00A882);
  color:#0A0E17;font-size:.95rem;font-weight:800;
  cursor:pointer;font-family:inherit;letter-spacing:-.01em;
  transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 4px 20px rgba(0,212,170,0.3);
}
.ob-next-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,212,170,0.4)}
.ob-next-btn:active{transform:translateY(0)}

/* Google OAuth button */
.ob-google-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 20px;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:.88rem;font-weight:700;transition:all .18s;
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.12);
  color:var(--text,#E8EFF7);margin-bottom:4px;
}
.ob-google-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22)}
[data-theme="light"] .ob-google-btn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.12);color:#0F172A}

/* Or divider */
.ob-or-divider{
  display:flex;align-items:center;gap:10px;
  margin:14px 0;font-size:.7rem;color:var(--text3,#64748B);font-weight:600;
}
.ob-or-divider::before,.ob-or-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.08)}
[data-theme="light"] .ob-or-divider::before,[data-theme="light"] .ob-or-divider::after{background:rgba(0,0,0,.1)}

/* Field error */
.ob-field-error{font-size:.78rem;margin-top:4px;line-height:1.5;display:none}

/* Content transitions */
.ob-content-area{transition:opacity .2s ease,transform .2s ease}
.ob-content-area.ob-exit{opacity:0;transform:translateX(16px)}
.ob-content-area.ob-enter{opacity:0;transform:translateX(-16px)}

/* Done/launch step personalized greeting */
.ob-greeting-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent-dim);border:1px solid rgba(0,212,170,0.25);
  padding:6px 14px;border-radius:99px;margin-bottom:20px;
}
.ob-greeting-badge-text{font-size:.78rem;font-weight:700;color:var(--accent);letter-spacing:.04em}

/* Mobile adjustments */
.ob-visual-header{display:none}
@media(max-width:768px){
  .ob-split{flex-direction:column}
  .ob-split-left{display:none}
  .ob-split-right{padding:28px 24px 24px;max-width:100%}
  .ob-headline{font-size:1.5rem}
  .ob-theme-cards{grid-template-columns:1fr 1fr}
  .ob-skip-global{top:16px;right:16px}
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM TUTORIAL OVERHAUL
═══════════════════════════════════════════════════════════════ */
#tutorialOverlay{
  position:fixed;inset:0;z-index:9990;
  pointer-events:none;
}
.tut-highlight{
  position:fixed;pointer-events:none;
  border:2px solid var(--accent);
  border-radius:10px;
  box-shadow:
    0 0 0 4000px rgba(0,0,0,0.6),
    0 0 0 4px rgba(0,212,170,0.12),
    0 0 24px rgba(0,212,170,0.2);
  transition:all .3s cubic-bezier(0.22,1,0.36,1);
  z-index:9998;
}
.tut-tooltip{
  position:fixed;
  background:var(--card);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:16px;
  padding:20px 22px 16px;
  width:300px;
  box-shadow:0 20px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  z-index:9999;pointer-events:all;
  transition:opacity .2s ease, transform .2s cubic-bezier(0.22,1,0.36,1);
}
[data-theme="light"] .tut-tooltip{
  background:#fff;border-color:rgba(0,0,0,0.1);
  box-shadow:0 20px 60px rgba(0,0,0,0.18);
}
.tut-tooltip.tut-entering{opacity:0;transform:translateY(6px) scale(.98)}
.tut-tooltip::before{display:none}
.tut-step-num{
  font-size:.68rem;font-weight:700;color:var(--accent);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;
}
.tut-title{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:1rem;font-weight:800;color:var(--text);
  letter-spacing:-.02em;margin-bottom:6px;line-height:1.3;
}
.tut-text{
  font-size:.82rem;color:var(--text2);line-height:1.6;margin-bottom:16px;
}
.tut-actions{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;border-top:1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .tut-actions{border-top-color:rgba(0,0,0,0.06)}
.tut-counter{font-size:.72rem;color:var(--text3);font-weight:600;letter-spacing:.04em}
/* Progress dots in tutorial */
.tut-dots{display:flex;gap:4px;align-items:center}
.tut-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,0.2);transition:all .25s ease}
[data-theme="light"] .tut-dot{background:rgba(0,0,0,0.15)}
.tut-dot.active{background:var(--accent);width:14px;border-radius:2px}
@media(max-width:900px){
  .tut-tooltip{width:calc(100vw - 32px);left:16px!important;right:16px;bottom:20px!important;top:auto!important;transform:none!important}
  .tut-highlight{display:none!important}
}
/* Legacy ob CSS replaced by premium version above */
/* Tax badge in topbar */
.tax-display{
  display:flex;align-items:center;gap:8px;
  background:var(--gold-dim);border:1px solid rgba(245,158,11,.2);
  border-radius:99px;padding:5px 14px;font-size:.85rem;font-weight:600;
}
.tax-label{color:var(--gold);opacity:.8;font-size:.75rem;font-weight:500}
.tax-value{color:var(--gold);font-weight:700}
/* Mode badge */
.mode-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:700;
  letter-spacing:.03em;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.mode-badge.personal{background:var(--indigo-dim);color:var(--indigo)}
.mode-badge.empresa{background:var(--gold-dim);color:var(--gold)}
.mode-badge:hover{opacity:.8}

/* Legacy tutorial CSS replaced by premium version above */

/* ─── 50/30/20 RULE ──────────────────────────────────────────── */
.rule-bar-wrap{margin-bottom:16px}
.rule-bar-header{display:flex;justify-content:space-between;font-size:.82rem;margin-bottom:6px}
.rule-bar-label{font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px}
.rule-bar-vals{color:var(--text2)}
.rule-bar-vals strong{color:var(--text)}
.rule-triple{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-radius:var(--radius-sm);overflow:hidden;height:10px}
.rule-seg{height:100%;transition:width .5s ease}

/* ─── DEBT STRATEGIES ────────────────────────────────────────── */
.debt-strategy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.debt-strategy-active{border-color:var(--accent)!important;background:var(--accent-dim)}
.debt-strategy-card{
  background:var(--card);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:16px;text-align:center;
  transition:all .2s;cursor:pointer;
}
.debt-strategy-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.debt-strategy-card.selected{border-color:var(--accent);background:var(--accent-dim)}
.debt-strategy-icon{font-size:1.8rem;margin-bottom:8px}
.debt-strategy-name{font-size:.9rem;font-weight:800;color:var(--text);margin-bottom:4px}
.debt-strategy-desc{font-size:.72rem;color:var(--text2);line-height:1.4;margin-bottom:10px}
.debt-strategy-pago{font-size:.8rem;font-weight:700;color:var(--accent)}
.debt-strategy-tiempo{font-size:.75rem;color:var(--text2);margin-top:2px}
.debt-free-result{
  padding:14px;border-radius:var(--radius-sm);
  background:var(--accent-dim);border:1px solid rgba(0,212,170,0.2);
  margin-top:14px;text-align:center;
}
.debt-free-big{font-size:1.5rem;font-weight:800;color:var(--accent);margin-bottom:4px}
.debt-free-sub{font-size:.78rem;color:var(--text2)}

/* ─── SEARCH/FILTER BAR ──────────────────────────────────────── */
.search-bar{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-bottom:16px;padding:12px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);
}
.search-input{
  flex:1;min-width:180px;padding:7px 12px;
  background:var(--bg);border:1px solid var(--border2);
  border-radius:var(--radius-sm);color:var(--text);font-size:.85rem;
}
.search-input:focus{outline:none;border-color:var(--accent)}
.filter-select{
  padding:7px 12px;background:var(--bg);border:1px solid var(--border2);
  border-radius:var(--radius-sm);color:var(--text);font-size:.82rem;
  min-width:120px;
}

@media(max-width:600px){
  .debt-strategy-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .debt-strategy-grid{grid-template-columns:1fr 1fr}
}

/* ─── DEBT ADVISOR ───────────────────────────────────────────── */
.debt-method-card{
  background:var(--bg2);border:1.5px solid var(--border);
  border-radius:var(--radius);padding:16px;
  transition:all .15s;cursor:pointer;
}
.debt-method-card:hover,.debt-method-card.selected{border-color:var(--accent);background:var(--accent-dim)}
.debt-method-title{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:4px}
.debt-method-sub{font-size:.78rem;color:var(--text2);line-height:1.4}
.debt-order-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--bg2);margin-bottom:8px;
}
.debt-order-num{
  width:24px;height:24px;border-radius:50%;
  background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:800;flex-shrink:0;
}
.debt-order-info{flex:1;min-width:0}
.debt-order-name{font-size:.88rem;font-weight:700;color:var(--text)}
.debt-order-meta{font-size:.75rem;color:var(--text2)}

/* ─── PROJECTION ─────────────────────────────────────────────── */
.proj-scenario{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px;
  display:flex;align-items:center;gap:12px;
}
.proj-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ─── CLIENT CARDS ───────────────────────────────────────────── */
.cliente-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:20px}
.cliente-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  transition:all .2s;position:relative;overflow:hidden;
  cursor:default;
}
.cliente-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:var(--shadow)}
.cliente-card-accent{position:absolute;top:0;left:0;right:0;height:3px}
.cliente-avatar{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;overflow:hidden;
  background:var(--accent-dim);border:2px solid var(--border2);
}
.cliente-avatar img{width:100%;height:100%;object-fit:cover}
.cliente-name{font-size:1rem;font-weight:700;color:var(--text)}
.cliente-empresa{font-size:.78rem;color:var(--text2);margin-top:1px}
.cliente-meta{display:flex;flex-direction:column;gap:3px;margin:10px 0;font-size:.78rem;color:var(--text2)}
.cliente-meta span{display:flex;align-items:center;gap:6px}
.cliente-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.cliente-stat{background:var(--bg2);border-radius:var(--radius-sm);padding:8px 10px}
.cliente-stat-label{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3)}
.cliente-stat-val{font-size:.9rem;font-weight:700;color:var(--text);margin-top:2px}

/* ─── CATEGORY EMOJIS ────────────────────────────────────────── */
.cat-with-emoji{display:flex;align-items:center;gap:6px}
.cat-emoji{font-size:.95rem;flex-shrink:0;line-height:1}
.cat-label{font-weight:600}

/* ─── EMOJI PICKER ───────────────────────────────────────────── */
.emoji-picker-wrap{position:relative;flex-shrink:0}
.emoji-trigger{
  width:48px;height:42px;border-radius:var(--radius-sm);
  border:1px solid var(--border2);background:var(--bg2);
  font-size:1.35rem;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:border-color .15s;user-select:none;
  -webkit-user-select:none;line-height:1;
}
.emoji-trigger:hover{border-color:var(--accent)}
.emoji-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;z-index:500;
  background:var(--card);border:1px solid var(--border2);
  border-radius:var(--radius-sm);padding:6px;
  display:none;grid-template-columns:repeat(7,1fr);gap:2px;
  box-shadow:var(--shadow);width:210px;
  max-height:180px;overflow-y:auto;overflow-x:hidden;
}
.emoji-dropdown.open{display:grid}
.emoji-opt{
  font-size:.95rem;padding:4px 2px;border-radius:5px;cursor:pointer;
  text-align:center;transition:background .1s;line-height:1.2;
  border:1px solid transparent;
}
.emoji-opt:hover{background:var(--accent-dim);border-color:rgba(0,212,170,.3)}
.emoji-opt.selected{background:var(--accent-dim);border-color:var(--accent)}
.emoji-manual-row{grid-column:1/-1;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.emoji-manual-input{
  width:100%;padding:6px 8px;border-radius:6px;
  border:1px solid var(--border2);background:var(--bg2);color:var(--text);
  font-size:.95rem;font-family:inherit;box-sizing:border-box;
}
.emoji-manual-input:focus{outline:none;border-color:var(--accent)}

/* ─── OBJ AVATAR ─────────────────────────────────────────────── */
.obj-avatar{
  width:48px;height:48px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;overflow:hidden;flex-shrink:0;
  background:var(--bg2);border:1px solid var(--border);
}
.obj-avatar img{width:100%;height:100%;object-fit:cover}
.obj-avatar-edit{
  position:absolute;top:10px;right:10px;
  width:26px;height:26px;border-radius:50%;
  background:var(--border2);color:var(--text2);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;cursor:pointer;transition:all .15s;
}
.obj-avatar-edit:hover{background:var(--accent);color:#000}

/* ─── IMPROVED ACTION BUTTONS ────────────────────────────────── */
.action-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn-edit{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:6px;font-size:.75rem;font-weight:700;
  background:var(--indigo-dim);color:var(--indigo);border:1px solid transparent;
  transition:all .15s;cursor:pointer;line-height:1;
}
.btn-edit:hover{background:var(--indigo);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(99,102,241,.3)}
.btn-edit::before{
  content:'';display:inline-block;width:12px;height:12px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 1a1.5 1.5 0 0 1 2.121 0l.879.879a1.5 1.5 0 0 1 0 2.121L5.5 13H2v-3.5L11.5 1z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.5 1a1.5 1.5 0 0 1 2.121 0l.879.879a1.5 1.5 0 0 1 0 2.121L5.5 13H2v-3.5L11.5 1z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.btn-del{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:6px;font-size:.75rem;font-weight:700;
  background:var(--red-dim);color:var(--red);border:1px solid transparent;
  transition:all .15s;cursor:pointer;line-height:1;
}
.btn-del:hover{background:var(--red);color:#fff;transform:translateY(-1px);box-shadow:0 2px 8px rgba(244,63,94,.3)}
.btn-del::before{
  content:'';display:inline-block;width:12px;height:12px;flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0zM14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1 0-2h3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1h3a1 1 0 0 1 1 1M4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0zM14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1 0-2h3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1h3a1 1 0 0 1 1 1M4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ─── CONFIG PAGE ────────────────────────────────────────────── */
.cfg-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--border);
}
.cfg-toggle-label{font-size:.88rem;font-weight:600;color:var(--text)}
.cfg-toggle-sub{font-size:.75rem;color:var(--text2);margin-top:1px}
.cfg-section{margin-bottom:0}

/* ─── NUMBER TYPOGRAPHY ──────────────────────────────────────── */
.kpi-value,.patrimonio-num,.cuenta-balance{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.kpi-value{font-size:1.55rem;font-weight:800;color:var(--text);line-height:1.1;margin-bottom:6px}
/* Goal cards with background */
.goal-card-img-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.6) 100%);border-radius:var(--radius);pointer-events:none}
.goal-card[style*="background-image"] .goal-name,.goal-card[style*="background-image"] .goal-meta{text-shadow:0 1px 4px rgba(0,0,0,.5)}
.kpi-value.sm{font-size:1.25rem}
.td-amount{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.01em}
.td-pos{color:var(--green)!important}
.td-neg{color:var(--red)!important}

/* Ensure numbers are always readable in light mode */
[data-theme="light"] .kpi-value{color:#0F172A}
[data-theme="light"] .kpi-label{color:#475569}
[data-theme="light"] .patrimonio-num{color:#0F172A}
[data-theme="light"] .kpi-delta.up{background:rgba(16,185,129,0.12);color:#059669}
[data-theme="light"] .kpi-delta.down{background:rgba(244,63,94,0.12);color:#E11D48}
[data-theme="light"] .dinero-display{background:rgba(0,150,100,0.08);border-color:rgba(0,150,100,0.2)}
[data-theme="light"] .inv-stat{background:#F1F5F9}
[data-theme="light"] .budget-item{background:#F8FAFC}
[data-theme="light"] .insight-item{background:#F8FAFC}
[data-theme="light"] table tbody tr:hover td{background:rgba(0,0,0,0.02)}

/* ─── ANIMATIONS ─────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.skeleton{
  border-radius:6px;
  background:linear-gradient(90deg,var(--border) 25%,var(--border2) 50%,var(--border) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ─── PATRIMONION HERO ───────────────────────────────────────── */
.patrimonio-hero{
  background:linear-gradient(135deg,rgba(0,212,170,0.08) 0%,rgba(99,102,241,0.05) 100%);
  border:1px solid rgba(0,212,170,0.15);
  border-radius:var(--radius);padding:18px;
  position:relative;overflow:hidden;margin-bottom:16px;
}
.patrimonio-hero::after{
  content:'';position:absolute;top:-40%;right:-10%;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,170,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.patrimonio-num{font-size:2.4rem;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--text);margin-bottom:4px}
.patrimonio-label{font-size:.78rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.patrimonio-stats{display:flex;gap:24px;flex-wrap:wrap}
.patrimonio-stat{display:flex;flex-direction:column;gap:2px}
.patrimonio-stat-label{font-size:.72rem;color:var(--text2);font-weight:500}
.patrimonio-stat-val{font-size:1rem;font-weight:700;color:var(--text)}

/* ─── TIME FILTER BAR ────────────────────────────────────────── */
.time-filter-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 14px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  margin-bottom:16px;
}
.time-filter-label{font-size:.72rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
.time-pill{
  padding:4px 12px;border-radius:99px;font-size:.78rem;font-weight:600;
  border:1px solid var(--border);color:var(--text2);
  background:transparent;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;
}
.time-pill:hover{border-color:var(--border2);color:var(--text)}
.time-pill.active{background:var(--accent-dim);border-color:rgba(0,212,170,0.3);color:var(--accent)}

@media(max-width:900px){
  .time-filter-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:8px 12px;
    gap:6px;
  }
  .time-filter-bar::-webkit-scrollbar{display:none}
  .time-filter-label{display:none} /* hide "PERÍODO:" label on mobile to save space */
}

/* ─── TUTORIAL TRANSITIONS ────────────────────────────────────── */
/* dup tut CSS removed */
ize:.92rem;font-weight:700;color:var(--text);margin-bottom:5px;line-height:1.3}
.tut-text{font-size:.8rem;color:var(--text2);line-height:1.55;margin-bottom:12px;word-break:break-word}
/* Ensure tut-actions row is sticky bottom inside the tooltip */
.tut-actions{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;margin-top:auto;
}

/* ─── DEBT STRATEGY ──────────────────────────────────────────── */
.debt-strategy-active{
  box-shadow:0 0 0 2px var(--accent);
  background:var(--accent-dim)!important;
}
.debt-strategy-card:hover:not(.debt-strategy-active){
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}

/* ─── ANALYSIS SECTION SPACING ───────────────────────────────── */
.grid-2 .card,.grid-3 .card{margin-bottom:0}
.grid-2+.grid-2,.grid-2+.card,.card+.grid-2{margin-top:0}

/* ─── RESET DANGER ZONE ───────────────────────────────────────── */
.danger-zone{
  background:rgba(244,63,94,0.06);border:1px solid rgba(244,63,94,0.2);
  border-radius:var(--radius-sm);padding:14px;margin-top:8px;
}
.pat-hero{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:28px;margin-bottom:16px;
  position:relative;overflow:hidden;
}
.pat-hero::before{
  content:'';position:absolute;top:-60px;right:-60px;
  width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,170,0.08) 0%,transparent 70%);
  pointer-events:none;
}
.pat-nw-label{font-size:.72rem;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.pat-nw-value{font-size:3rem;font-weight:800;letter-spacing:-2px;
  color:var(--text);line-height:1;margin-bottom:6px}
.pat-nw-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.pat-breakdown{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  padding-top:16px;border-top:1px solid var(--border);
}
.pat-bd-item{display:flex;flex-direction:column;gap:3px}
.pat-bd-label{font-size:.68rem;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.pat-bd-value{font-size:1.05rem;font-weight:700;color:var(--text)}

/* Asset cards */
.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:16px}
.asset-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px;
  transition:all .2s;position:relative;overflow:hidden;
}
.asset-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--shadow)}
.asset-card.sold{opacity:.55}
.asset-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.asset-icon{width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;flex-shrink:0;}
.asset-name{font-size:.95rem;font-weight:700;color:var(--text);margin-bottom:2px}
.asset-type{font-size:.72rem;color:var(--text2);font-weight:500}
.asset-value{font-size:1.4rem;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.5px}
.asset-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.asset-badge{
  font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:99px;
  background:var(--green-dim);color:var(--green);
}
.asset-badge.sold{background:var(--border);color:var(--text3)}
.asset-actions{display:flex;gap:6px;margin-top:12px}
.pat-section-title{
  font-size:.78rem;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:10px;display:flex;align-items:center;gap:6px;
}

/* Wealth evo section */
.pat-inv-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.78rem;font-weight:600;color:var(--accent);
  cursor:pointer;padding:4px 10px;border-radius:99px;
  background:var(--accent-dim);transition:all .15s;
}
.pat-inv-link:hover{background:rgba(0,212,170,0.2)}

/* Dashboard insights widget */
.insights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.insight-metric{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;
}
.insight-metric-label{font-size:.68rem;color:var(--text2);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.insight-metric-val{font-size:1.15rem;font-weight:800;color:var(--text)}
.insight-metric-sub{font-size:.7rem;color:var(--text2);margin-top:2px}

/* ─── COMPACT HEALTH SCORE (v2) ──────────────────────────────── */
.health-score-compact{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 18px;
  margin-bottom:14px;
}
/* Ring wrap — tamaño = tamaño del SVG (50x50) */
.hsc-ring-wrap{position:relative;flex-shrink:0;width:50px;height:50px}
/* NO rotar el SVG aquí — el circle ya tiene transform="rotate(-90 25 25)" */
.hsc-ring-wrap svg{display:block;overflow:visible}
.hsc-num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;font-weight:800;color:var(--text);
}
.hsc-info{flex:1;min-width:0}
.hsc-title{font-size:.7rem;font-weight:700;color:var(--text2);
  text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}
.hsc-label{font-size:.95rem;font-weight:700}
.hsc-factors{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.hsc-factor{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--text2)}
.hsc-factor-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.hsc-eom{
  border-left:1px solid var(--border);padding-left:14px;flex-shrink:0;text-align:right
}
.hsc-eom-label{font-size:.67rem;color:var(--text2);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.hsc-eom-val{font-size:1.1rem;font-weight:800}
.hsc-eom-sub{font-size:.68rem;color:var(--text2);margin-top:1px}

/* ─── SMART INSIGHT PILLS (horizontal) ───────────────────────── */
.insight-pill-list{display:flex;flex-direction:column;gap:7px}
.insight-pill{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--bg2);
  transition:border-color .15s;
}
.insight-pill:hover{border-color:var(--border2)}
.insight-pill-icon{
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;flex-shrink:0;
}
.insight-pill-text{font-size:.8rem;color:var(--text2);line-height:1.45}
.insight-pill-text strong{color:var(--text);font-weight:600}
.insight-empty{
  padding:20px;text-align:center;
  font-size:.82rem;color:var(--text2);line-height:1.6;
}
.insight-empty-icon{font-size:1.6rem;margin-bottom:8px;opacity:.5}

/* ─── DEMO MODE FAB ───────────────────────────────────────────── */
@keyframes demoPulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes demoFabIn{from{opacity:0;transform:scale(.7) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

#demoFab{
  position:fixed;bottom:88px;right:18px;z-index:390;
  display:flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,#f59e0b,#d97706);
  color:#fff;border-radius:99px;
  padding:8px 14px 8px 10px;
  box-shadow:0 4px 20px rgba(245,158,11,.4),0 2px 8px rgba(0,0,0,.3);
  cursor:pointer;font-size:.78rem;font-weight:700;letter-spacing:.02em;
  border:none;outline:none;
  animation:demoFabIn .35s cubic-bezier(.34,1.56,.64,1) both;
  transition:transform .15s,box-shadow .15s,filter .15s;
  user-select:none;
}
#demoFab:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(245,158,11,.55),0 2px 10px rgba(0,0,0,.35)}
#demoFab:active{transform:scale(.97)}
#demoFab .fab-dot{
  width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;
  animation:demoPulse 1.8s ease infinite;
  box-shadow:0 0 6px rgba(255,255,255,.6);
}
#demoFab .fab-label{line-height:1}
#demoFab .fab-sub{font-size:.62rem;font-weight:500;opacity:.85;display:block;letter-spacing:0}

/* Real mode FAB (not demo) */
#demoFabReal{
  position:fixed;bottom:88px;right:18px;z-index:390;
  display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--border2);color:var(--text2);
  border-radius:99px;padding:7px 13px 7px 9px;
  box-shadow:0 2px 12px rgba(0,0,0,.2);
  cursor:pointer;font-size:.75rem;font-weight:600;
  animation:demoFabIn .3s ease both;
  transition:all .15s;border:none;outline:none;user-select:none;
}
#demoFabReal:hover{background:var(--bg2);color:var(--text)}
#demoFabReal .fab-dot{
  width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0;
}
@media(max-width:900px){#demoFab,#demoFabReal{bottom:76px;right:14px}}

/* ─── DEMO PANEL MODAL ────────────────────────────────────────── */
#demoPanelModal{
  position:fixed;bottom:155px;right:18px;z-index:400;
  background:var(--card);border:1.5px solid var(--border2);
  border-radius:18px;padding:20px;width:290px;
  box-shadow:0 8px 48px rgba(0,0,0,.5);
  animation:demoFabIn .25s ease both;
  display:none;
}
#demoPanelModal.open{display:block}
.dpm-title{font-size:.92rem;font-weight:800;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.dpm-sub{font-size:.75rem;color:var(--text2);margin-bottom:16px}
.dpm-sep{height:1px;background:var(--border);margin:14px 0}
.dpm-row{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.dpm-label{font-size:.72rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em}
.dpm-input{
  background:var(--bg2);border:1.5px solid var(--border2);color:var(--text);
  border-radius:8px;padding:7px 10px;font-size:.85rem;width:100%;
  font-family:inherit;transition:border-color .15s;
}
.dpm-input:focus{outline:none;border-color:var(--gold)}
.dpm-select{
  background:var(--bg2);border:1.5px solid var(--border2);color:var(--text);
  border-radius:8px;padding:7px 10px;font-size:.85rem;width:100%;
  font-family:inherit;
}
.dpm-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.dpm-btn-gold{
  background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;
  border:none;border-radius:10px;padding:9px 14px;font-size:.82rem;
  font-weight:700;cursor:pointer;width:100%;text-align:center;transition:filter .15s;
}
.dpm-btn-gold:hover{filter:brightness(1.1)}
.dpm-btn-danger{
  background:var(--red-dim);color:var(--red);border:1px solid rgba(244,63,94,.2);
  border-radius:10px;padding:8px 14px;font-size:.79rem;font-weight:700;
  cursor:pointer;width:100%;text-align:center;transition:filter .15s;
}
.dpm-btn-danger:hover{filter:brightness(1.15)}
.dpm-btn-ghost{
  background:transparent;color:var(--text2);border:1px solid var(--border);
  border-radius:10px;padding:7px 14px;font-size:.77rem;font-weight:600;
  cursor:pointer;width:100%;text-align:center;transition:all .15s;
}
.dpm-btn-ghost:hover{background:var(--border);color:var(--text)}
@media(max-width:900px){
  #demoPanelModal{right:14px;width:calc(100vw - 28px);max-width:290px;bottom:145px}
}

/* ─── FAQ ─────────────────────────────────────────────────────── */
.faq-layout{
  display:grid;grid-template-columns:1fr 240px;gap:20px;
  align-items:start;max-width:1020px;
}
@media(max-width:900px){.faq-layout{grid-template-columns:1fr}}
.faq-sidebar{position:sticky;top:16px}
@media(max-width:900px){.faq-sidebar{position:static}}

.faq-group{margin-bottom:18px}
.faq-group-header{
  display:flex;align-items:center;gap:10px;
  padding:0 0 10px;border-bottom:1px solid var(--border);
  margin-bottom:8px;
}
.faq-group-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.faq-group-title{font-size:.82rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.06em}
.faq-group-items{display:flex;flex-direction:column;gap:4px}

.faq-item{
  border:1px solid var(--border);border-radius:var(--radius-sm);
  overflow:hidden;background:var(--card);
  transition:border-color .15s,box-shadow .15s;
}
.faq-item:hover{border-color:var(--border2)}

.faq-q{
  display:flex;justify-content:space-between;align-items:center;
  width:100%;padding:13px 16px;
  background:transparent;border:none;cursor:pointer;
  text-align:left;gap:12px;
  transition:background .12s;
}
.faq-q:hover{background:var(--bg2)}
.faq-q-text{font-size:.88rem;font-weight:600;color:var(--text);line-height:1.4;flex:1}
.faq-chevron{font-size:.62rem;color:var(--text3);flex-shrink:0;transition:transform .2s}

.faq-a{
  padding:0 16px 14px;font-size:.85rem;color:var(--text2);
  line-height:1.7;border-top:1px solid var(--border);
  padding-top:12px;animation:fadeIn .18s ease;
}
.faq-a strong{color:var(--text);font-weight:700}

.faq-help-card{
  background:var(--card);border:1.5px solid var(--border2);
  border-radius:var(--radius);padding:18px;text-align:center;
}
.faq-help-icon{font-size:2rem;margin-bottom:10px}
.faq-help-title{font-size:.9rem;font-weight:800;color:var(--text);margin-bottom:6px}
.faq-help-sub{font-size:.78rem;color:var(--text2);line-height:1.55}

/* ─── ASSET MODAL ─────────────────────────────────────────────── */
.dep-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--bg2);border:1px solid var(--border);
  margin-top:8px;
}
.dep-toggle-info{flex:1}
.dep-toggle-label{font-size:.85rem;font-weight:600;color:var(--text)}
.dep-toggle-sub{font-size:.72rem;color:var(--text2);margin-top:1px}

@media(max-width:900px){
  .pat-breakdown{grid-template-columns:repeat(2,1fr)}
  .insights-grid{grid-template-columns:1fr 1fr}
  .pat-split-grid{grid-template-columns:1fr!important}
  .dash-hero-grid{grid-template-columns:1fr!important}
  .health-score-card{flex-direction:column;align-items:flex-start;gap:12px}
  .health-score-eom{width:100%;text-align:left}
  .msb-stats{gap:10px}
  /* YTD strip: flex-wrap on medium screens */
  .ytd-strip{flex-wrap:wrap!important}
  .ytd-strip>div{flex:1 1 140px!important;min-width:0!important}
  /* section-header: stack on medium screens */
  .section-header{flex-wrap:wrap!important}
}
@media(max-width:600px){
  .pat-breakdown{grid-template-columns:1fr 1fr}
  .pat-nw-value{font-size:2.2rem}
  .insights-grid{grid-template-columns:1fr}
  /* YTD strip: hide on very small screens to save space */
  .ytd-strip{display:none!important}
}

/* ══════════════════════════════════════════════════════════════
   SISTEMA MODO HISTORIA — Monthly & Annual Story Slides
══════════════════════════════════════════════════════════════ */
#storyModal{
  position:fixed;inset:0;z-index:9200;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);
}
#storyModal.sm-visible{display:flex;animation:smFadeIn .3s ease forwards}
@keyframes smFadeIn{from{opacity:0}to{opacity:1}}
.sm-card{
  background:var(--card);border-radius:28px;
  width:min(480px,calc(100vw - 32px));
  box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;position:relative;
  animation:smCardIn .45s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes smCardIn{from{opacity:0;transform:scale(.94) translateY(20px)}to{opacity:1;transform:none}}
[data-theme="light"] .sm-card{background:#fff;box-shadow:0 24px 80px rgba(0,0,0,.18)}

/* Gradient hero per slide */
.sm-hero{
  height:160px;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sm-hero-icon{font-size:3.5rem;position:relative;z-index:1;animation:smPop .5s cubic-bezier(0.34,1.56,0.64,1) .15s both}
@keyframes smPop{from{transform:scale(0) rotate(-10deg)}to{transform:scale(1) rotate(0)}}
.sm-hero-glow{
  position:absolute;inset:0;
  border-radius:50%;width:200px;height:200px;
  margin:auto;filter:blur(60px);opacity:.4;
}

/* Content */
.sm-body{padding:28px 32px 24px}
.sm-eyebrow{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.sm-eyebrow-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:obPulse 2s ease infinite}
.sm-title{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:1.45rem;font-weight:800;color:var(--text);letter-spacing:-.04em;line-height:1.2;margin-bottom:8px}
.sm-subtitle{font-size:.875rem;color:var(--text2);line-height:1.6;margin-bottom:20px}

/* Stats row */
.sm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.sm-stat{
  background:var(--bg2);border:1px solid var(--border);border-radius:14px;
  padding:12px 10px;text-align:center;
  animation:smStatIn .4s cubic-bezier(0.22,1,0.36,1) both;
}
[data-theme="light"] .sm-stat{background:#F8FAFC;border-color:rgba(0,0,0,.08)}
@keyframes smStatIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sm-stat-val{font-size:1.05rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.03em;margin-bottom:3px}
.sm-stat-lbl{font-size:.62rem;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.sm-stat-delta{font-size:.65rem;font-weight:700;margin-top:2px}
.sm-stat-delta.up{color:#10B981}.sm-stat-delta.down{color:#F43F5E}.sm-stat-delta.neutral{color:var(--text3)}

/* Highlights */
.sm-highlights{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.sm-highlight{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  animation:smStatIn .4s cubic-bezier(0.22,1,0.36,1) both;
}
[data-theme="light"] .sm-highlight{background:#F8FAFC;border-color:rgba(0,0,0,.08)}
.sm-highlight-icon{font-size:1.3rem;flex-shrink:0}
.sm-highlight-text{font-size:.8rem;color:var(--text);font-weight:600;line-height:1.4}
.sm-highlight-text span{color:var(--text2);font-weight:400;display:block;font-size:.75rem}

/* Annual year chart bars */
.sm-year-bars{display:flex;align-items:flex-end;gap:4px;height:60px;margin-bottom:8px;padding:0 4px}
.sm-year-bar{flex:1;border-radius:3px 3px 0 0;min-height:4px;transition:height .6s cubic-bezier(0.22,1,0.36,1)}
.sm-year-bar-lbl{display:flex;justify-content:space-between;font-size:.58rem;color:var(--text3);padding:0 4px;margin-bottom:16px}

/* Progress dots */
.sm-progress{display:flex;gap:5px;justify-content:center;margin-bottom:16px}
.sm-pdot{width:6px;height:6px;border-radius:50%;background:var(--border2);transition:all .3s ease}
.sm-pdot.active{background:var(--accent);width:20px;border-radius:3px}

/* Actions */
.sm-actions{display:flex;gap:8px}
.sm-btn-skip{
  padding:12px 16px;border-radius:12px;border:1.5px solid var(--border2);
  background:transparent;color:var(--text2);font-size:.82rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .18s;flex-shrink:0;
}
.sm-btn-skip:hover{border-color:var(--accent);color:var(--accent)}
.sm-btn-next{
  flex:1;padding:13px 24px;border-radius:12px;border:none;
  background:linear-gradient(135deg,#00D4AA,#00A882);
  color:#0A0E17;font-size:.9rem;font-weight:800;
  cursor:pointer;font-family:inherit;letter-spacing:-.01em;
  transition:all .2s;box-shadow:0 4px 16px rgba(0,212,170,.3);
}
.sm-btn-next:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,212,170,.4)}
.sm-slide-wrap{transition:opacity .2s ease,transform .2s ease}
.sm-slide-wrap.sm-exit{opacity:0;transform:translateX(20px)}
.sm-slide-wrap.sm-enter{opacity:0;transform:translateX(-20px)}

/* ══════════════════════════════════════════════════════════════
   OBJETIVO GUIADO (Goal Coach)
══════════════════════════════════════════════════════════════ */
#goalCoachModal{
  position:fixed;inset:0;z-index:9100;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
}
#goalCoachModal.gc-visible{display:flex;animation:smFadeIn .3s ease forwards}
.gc-card{
  background:var(--card);border-radius:24px;
  width:min(420px,calc(100vw - 32px));
  box-shadow:0 32px 100px rgba(0,0,0,.7);
  padding:32px;
  animation:smCardIn .4s cubic-bezier(0.22,1,0.36,1) forwards;
}
[data-theme="light"] .gc-card{background:#fff}
.gc-icon{font-size:2.8rem;margin-bottom:16px;display:block;animation:smPop .5s cubic-bezier(0.34,1.56,0.64,1) .1s both}
.gc-title{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:1.4rem;font-weight:800;color:var(--text);letter-spacing:-.04em;margin-bottom:8px}
.gc-sub{font-size:.875rem;color:var(--text2);line-height:1.6;margin-bottom:24px}
.gc-input-row{display:flex;gap:10px;align-items:center;margin-bottom:20px}
.gc-input{
  flex:1;padding:14px 18px;border-radius:12px;
  border:2px solid var(--border2);background:var(--bg2);
  color:var(--text);font-size:1.1rem;font-weight:700;font-family:inherit;
  -webkit-user-select:text;user-select:text;
  transition:border-color .2s,box-shadow .2s;
}
[data-theme="light"] .gc-input{background:#F8FAFC;border-color:rgba(0,0,0,.12)}
.gc-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,170,.1)}
.gc-currency{font-size:1.3rem;font-weight:800;color:var(--text2)}
.gc-suggestion{
  display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px;
}
.gc-chip{
  padding:6px 14px;border-radius:99px;border:1.5px solid var(--border2);
  background:var(--bg2);color:var(--text2);font-size:.8rem;font-weight:600;
  cursor:pointer;transition:all .18s;font-family:inherit;
}
[data-theme="light"] .gc-chip{background:#F8FAFC}
.gc-chip:hover,.gc-chip.selected{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.gc-actions{display:flex;gap:8px}
.gc-btn-skip{padding:12px 16px;border-radius:12px;border:1.5px solid var(--border2);background:transparent;color:var(--text2);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s}
.gc-btn-skip:hover{border-color:var(--accent);color:var(--accent)}
.gc-btn-create{flex:1;padding:13px;border-radius:12px;border:none;background:linear-gradient(135deg,#00D4AA,#00A882);color:#0A0E17;font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit;transition:all .2s;box-shadow:0 4px 16px rgba(0,212,170,.3)}
.gc-btn-create:hover{transform:translateY(-1px)}

/* ══════════════════════════════════════════════════════════════
   MISIONES TOUR — Active onboarding checklist
══════════════════════════════════════════════════════════════ */
#misionBar{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:8500;
  background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:20px;
  box-shadow:0 12px 48px rgba(0,0,0,.5);
  padding:14px 20px;
  display:none;align-items:center;gap:16px;
  animation:misionIn .4s cubic-bezier(0.22,1,0.36,1) forwards;
  min-width:320px;max-width:calc(100vw - 40px);
  cursor:pointer;transition:transform .2s,box-shadow .2s;
}
[data-theme="light"] #misionBar{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 8px 32px rgba(0,0,0,.12)}
#misionBar:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 16px 56px rgba(0,0,0,.6)}
@keyframes misionIn{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.mb-icon{font-size:1.4rem;flex-shrink:0}
.mb-content{flex:1}
.mb-title{font-size:.82rem;font-weight:700;color:var(--text);margin-bottom:2px}
.mb-sub{font-size:.72rem;color:var(--text2)}
.mb-progress-wrap{width:80px;flex-shrink:0}
.mb-progress-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:3px}
.mb-progress-fill{height:100%;background:linear-gradient(90deg,#00D4AA,#6366F1);border-radius:3px;transition:width .5s cubic-bezier(0.22,1,0.36,1)}
.mb-pct{font-size:.65rem;font-weight:700;color:var(--accent);text-align:right}
.mb-close{font-size:.75rem;color:var(--text3);cursor:pointer;padding:4px;transition:color .15s;flex-shrink:0}
.mb-close:hover{color:var(--red)}

/* Mission modal (expanded) */
#misionModal{
  position:fixed;inset:0;z-index:8600;
  display:none;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);
  padding-bottom:0;
}
#misionModal.mm-visible{display:flex;animation:smFadeIn .25s ease forwards}
.mm-sheet{
  background:var(--card);border-radius:24px 24px 0 0;
  width:min(520px,100vw);padding:28px 28px 32px;
  animation:mmSlideUp .35s cubic-bezier(0.22,1,0.36,1) forwards;
  max-height:85vh;overflow-y:auto;
}
[data-theme="light"] .mm-sheet{background:#fff}
@keyframes mmSlideUp{from{transform:translateY(100%)}to{transform:none}}
.mm-handle{width:40px;height:4px;border-radius:2px;background:var(--border2);margin:0 auto 20px}
.mm-title{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:1.2rem;font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:4px}
.mm-sub{font-size:.82rem;color:var(--text2);margin-bottom:20px}
.mm-missions{display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.mm-mission{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:2px solid var(--border2);border-radius:14px;
  background:var(--bg2);transition:all .2s;cursor:default;
}
[data-theme="light"] .mm-mission{background:#F8FAFC;border-color:rgba(0,0,0,.1)}
.mm-mission.done{border-color:var(--accent);background:var(--accent-dim);opacity:.85}
.mm-mission.active{border-color:rgba(99,102,241,.5);background:var(--indigo-dim);cursor:pointer}
.mm-mission.active:hover{border-color:var(--indigo);transform:translateY(-1px)}
.mm-check{
  width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:.85rem;transition:all .3s cubic-bezier(0.34,1.56,.64,1);
}
.mm-mission.done .mm-check{background:var(--accent);border-color:var(--accent);color:#0A0E17;transform:scale(1.1)}
.mm-mission.active .mm-check{border-color:#6366F1;background:rgba(99,102,241,.1)}
.mm-info{flex:1}
.mm-mission-title{font-size:.875rem;font-weight:700;color:var(--text);margin-bottom:2px}
.mm-mission.done .mm-mission-title{color:var(--accent)}
.mm-mission-sub{font-size:.75rem;color:var(--text2)}
.mm-badge{font-size:.65rem;font-weight:700;padding:3px 9px;border-radius:99px;flex-shrink:0}
.mm-badge.done-badge{background:var(--accent-dim);color:var(--accent)}
.mm-badge.active-badge{background:var(--indigo-dim);color:#6366F1}
.mm-badge.lock-badge{background:var(--border);color:var(--text3)}
.mm-progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:6px}
.mm-progress-fill{height:100%;background:linear-gradient(90deg,#00D4AA,#6366F1);border-radius:3px;transition:width .6s cubic-bezier(0.22,1,0.36,1)}
.mm-pct-label{font-size:.7rem;color:var(--text2);margin-bottom:16px}
.mm-close-btn{width:100%;padding:12px;border-radius:12px;border:1.5px solid var(--border2);background:transparent;color:var(--text2);font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s}
.mm-close-btn:hover{border-color:var(--accent);color:var(--accent)}





/* ═══════════════════════════════════════════════════════════════════
   OPCIÓN C — ANIMACIONES AVANZADAS (60fps, GPU-composited)
   Autor: AI Senior Engineer — Mayo 2026
   Principios:
     · Solo transform + opacity: siempre en compositor, nunca relayout.
     · will-change declarado sólo mientras anima (añadido vía JS).
     · Curvas de bezier diferenciadas: entrada "spring" / salida "ease-in".
     · prefers-reduced-motion: sin movimiento pero con fade suave.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. KEYFRAMES BASE ──────────────────────────────────────────── */

/* Overlay / backdrop — fade puro */
@keyframes mn-backdrop-in  { from { opacity:0 } to { opacity:1 } }
@keyframes mn-backdrop-out { from { opacity:1 } to { opacity:0 } }

/* Card modal — spring desde abajo (entrada) */
@keyframes mn-card-spring-in {
  0%   { opacity:0; transform: translateY(32px) scale(0.93); }
  55%  { opacity:1; transform: translateY(-4px)  scale(1.01); }
  78%  { transform: translateY(2px)  scale(0.995); }
  100% { opacity:1; transform: translateY(0)     scale(1); }
}

/* Card modal — salida rápida hacia abajo */
@keyframes mn-card-spring-out {
  0%   { opacity:1; transform: translateY(0)     scale(1); }
  40%  { opacity:0; transform: translateY(24px)  scale(0.94); }
  100% { opacity:0; transform: translateY(40px)  scale(0.9); }
}

/* Trial Pill — entrada desde el borde izquierdo */
@keyframes mn-pill-slide-in {
  0%   { opacity:0; transform: translateX(-20px) scale(0.85); }
  60%  { opacity:1; transform: translateX(4px)   scale(1.03); }
  80%  { transform: translateX(-2px) scale(0.99); }
  100% { opacity:1; transform: translateX(0)     scale(1); }
}

/* Trial Pill — salida */
@keyframes mn-pill-slide-out {
  0%   { opacity:1; transform: translateX(0)     scale(1); }
  100% { opacity:0; transform: translateX(-16px) scale(0.88); }
}

/* Shake de validación (Gate 1 / Gate 2 rechazados) */
@keyframes mn-shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-8px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-5px); }
  80%     { transform: translateX(3px); }
}

/* Pulse de éxito (post-save) */
@keyframes mn-success-pulse {
  0%   { box-shadow: 0 0 0 0  rgba(0,212,170,.6); }
  60%  { box-shadow: 0 0 0 14px rgba(0,212,170,0); }
  100% { box-shadow: 0 0 0 0  rgba(0,212,170,0); }
}

/* ─── 2. CLASES DE ESTADO — OVERLAYS ─────────────────────────────── */

/**
 * Patrón unificado para todos los overlays (guestGateModal, authModal, quickAddModal).
 * La clase .mn-overlay gestiona: display → visibility → opacity + transform.
 * Esto permite animar la salida ANTES de ocultar el elemento (display:none).
 */
.mn-overlay {
  /* Estado por defecto: invisible pero en el DOM para poder animar */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* Compositor hint activo sólo cuando hay animación (ver JS) */
}

.mn-overlay.mn-entering {
  visibility: visible;
  pointer-events: auto;
  animation: mn-backdrop-in 0.22s ease forwards;
}

.mn-overlay.mn-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.mn-overlay.mn-exiting {
  visibility: visible;
  pointer-events: none;
  animation: mn-backdrop-out 0.2s ease forwards;
}

/* ─── 3. CLASES DE ESTADO — CARDS ───────────────────────────────── */

.mn-card-animated {
  /* Reset: sin transform propio del card, el JS lo inyecta vía clase */
}

.mn-overlay.mn-entering .mn-card-animated {
  will-change: transform, opacity;
  animation: mn-card-spring-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.mn-overlay.mn-exiting .mn-card-animated {
  will-change: transform, opacity;
  animation: mn-card-spring-out 0.22s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ─── 4. GUEST GATE MODAL — SOBRESCRITURA ANIM EXISTENTE ─────────── */
/*
 * El GuestGateModal se crea dinámicamente (innerHTML). Le aplicamos
 * la animación de card directamente al inner div mediante el selector
 * de atributo id para no modificar el JS de generación.
 */
#guestGateModal {
  /* El overlay ya tiene su animación vía mn-backdrop-in cuando la clase JS lo activa.
     Fallback: si aún usa display:flex sin clase, mantenemos la transición previa. */
  transition: opacity 0.2s ease;
}

#guestGateModal > div {
  /* Card interior — spring-in nativo (reemplaza smCardIn) */
  animation: mn-card-spring-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}

/* Estado de salida del GuestGate: se inyecta clase 'mn-closing' vía JS */
#guestGateModal.mn-closing {
  animation: mn-backdrop-out 0.2s ease forwards;
  pointer-events: none;
}

#guestGateModal.mn-closing > div {
  animation: mn-card-spring-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ─── 5. AUTH MODAL — ANIMACIONES ────────────────────────────────── */

#authModal {
  transition: opacity 0.22s ease;
}

#authModal > div,
#authModalCard {
  animation: mn-card-spring-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
  will-change: transform, opacity;
}

#authModal.mn-closing {
  animation: mn-backdrop-out 0.2s ease forwards;
  pointer-events: none;
}

#authModal.mn-closing > div,
#authModal.mn-closing #authModalCard {
  animation: mn-card-spring-out 0.2s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ─── 6. QUICK ADD MODAL — ANIMACIONES ──────────────────────────── */
/*
 * El quickAddModal usa .open para mostrar y animaciones existentes slideUp.
 * Añadimos el spring y la salida animada sin romper el JS existente.
 */
.quick-add-modal.open {
  /* Sobreescribimos la animación anterior por nuestra spring */
  animation: mn-backdrop-in 0.2s ease, mn-card-spring-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Salida del QuickAdd — clase .mn-closing inyectada por el hook JS */
.quick-add-modal.mn-closing {
  animation: mn-backdrop-out 0.18s ease forwards !important;
  pointer-events: none;
}

.quick-add-modal.mn-closing > div,
.quick-add-modal.mn-closing .quick-add-card {
  animation: mn-card-spring-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* ─── 7. TRIAL PILL — ANIMACIÓN ─────────────────────────────────── */

#trialPill {
  /* Sobreescribimos el inline cssText con nuestra animación de entrada */
  animation: mn-pill-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both !important;
  will-change: transform, opacity;
}

#trialPill.mn-pill-out {
  animation: mn-pill-slide-out 0.2s ease-in forwards !important;
}

/* Hover mejorado — via CSS en lugar de JS onmouseenter/onmouseleave */
#trialPill:hover {
  background: rgba(99,102,241,.22) !important;
  border-color: rgba(99,102,241,.45) !important;
  transform: translateX(3px) scale(1.03);
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1),
              background 0.18s ease,
              border-color 0.18s ease !important;
}

/* Área táctil mínima de 44×44px (WCAG 2.5.5) */
#trialPill {
  min-height: 40px;
  min-width: 44px;
  padding: 9px 14px !important; /* ligeramente más alto que el inline */
}

/* ─── 8. SHAKE DE VALIDACIÓN — GATE 1 & GATE 2 ───────────────────── */
/*
 * Se usa para feedback visual cuando el guard rechaza la acción.
 * La clase .mn-shake se añade/quita con JS (ver patch en app.js).
 */
.mn-shake {
  animation: mn-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  will-change: transform;
}

/* ─── 9. PULSE DE GUARDADO EXITOSO ───────────────────────────────── */
.mn-save-pulse {
  animation: mn-success-pulse 0.55s ease-out forwards;
}

/* ─── 10. MOBILE — BOTTOM NAV SAFE ZONE PARA TRIAL PILL ─────────── */
/*
 * En móvil (bottom-nav visible), la pill sube para no solapar
 * el nav de 64px + safe-area. Cálculo: 64px nav + 8px gap = 72px.
 */
@media (max-width: 900px) {
  #trialPill {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    /* Mantiene left:20px heredado del inline style */
  }
}

/* ─── 11. REDUCED MOTION — ACCESIBILIDAD ─────────────────────────── */
/*
 * @media prefers-reduced-motion: respeta la preferencia del SO.
 * Mantiene los cambios de estado pero elimina transform/translate.
 */
@media (prefers-reduced-motion: reduce) {
  #guestGateModal > div,
  #authModal > div,
  #authModalCard,
  .quick-add-modal.open,
  .mn-card-animated {
    animation: mn-backdrop-in 0.15s ease forwards !important;
    transform: none !important;
  }

  #guestGateModal.mn-closing,
  #authModal.mn-closing,
  .quick-add-modal.mn-closing {
    animation: mn-backdrop-out 0.12s ease forwards !important;
  }

  #trialPill {
    animation: mn-backdrop-in 0.2s ease both !important;
    transform: none !important;
  }

  .mn-shake {
    animation: none !important;
    outline: 2px solid var(--red) !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MULTI-ACCOUNT SELECTOR — Premium workspace switcher
   ════════════════════════════════════════════════════════════════ */
#mnAccountOverlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#mnAccountOverlay.mn-acct-open {
  opacity: 1; pointer-events: all;
}
.mn-acct-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mn-acct-panel {
  position: relative; z-index: 1;
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 20px rgba(0,0,0,.12);
  animation: mnPanelIn .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes mnPanelIn {
  from { transform: scale(.94) translateY(12px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}
.mn-acct-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 20px 0;
}
.mn-acct-header-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 800; color: var(--text);
}
.mn-acct-close {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 99px; width: 28px; height: 28px;
  cursor: pointer; color: var(--text2); font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.mn-acct-close:hover { background: var(--border2); color: var(--text); }
.mn-acct-label {
  padding: 14px 20px 8px;
  font-size: .7rem; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .08em;
}
.mn-acct-list {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0 12px;
}
.mn-acct-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  cursor: pointer; transition: all .15s;
  border: 1.5px solid transparent;
}
.mn-acct-card:hover { background: var(--bg2); }
.mn-acct-card--active {
  background: var(--accent-dim);
  border-color: rgba(0,212,170,.25);
}
.mn-acct-card--active:hover { background: var(--accent-dim); }
.mn-acct-avatar {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--bg2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; flex-shrink: 0;
}
.mn-acct-info { flex: 1; min-width: 0; }
.mn-acct-name {
  font-size: .88rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mn-acct-meta {
  font-size: .7rem; color: var(--text3); margin-top: 2px;
}
.mn-acct-card--active .mn-acct-meta { color: var(--accent); }
.mn-acct-check {
  font-size: .75rem; font-weight: 800; color: var(--accent);
  width: 20px; text-align: center; flex-shrink: 0;
}
.mn-acct-actions {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 12px 16px;
  border-top: 1px solid var(--border);
  margin-top: 10px;
}
.mn-acct-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 16px; border-radius: 10px;
  font-size: .83rem; font-weight: 700; cursor: pointer;
  font-family: inherit; border: none; transition: all .15s;
}
.mn-acct-btn--create {
  background: var(--accent); color: #fff;
}
.mn-acct-btn--create:hover { filter: brightness(1.08); }
.mn-acct-btn--danger {
  background: transparent; color: var(--text2);
  border: 1.5px solid var(--border2);
}
.mn-acct-btn--danger:hover { border-color: var(--red); color: var(--red); }
.mn-acct-btn--ghost {
  background: var(--bg2); color: var(--text2); border: 1.5px solid var(--border2);
}
.mn-acct-btn--ghost:hover { border-color: var(--border); color: var(--text); }
.mn-acct-form {
  padding: 14px 12px 4px;
  border-top: 1px solid var(--border);
}
.mn-acct-form-title {
  font-size: .8rem; font-weight: 700; color: var(--text2);
  margin-bottom: 12px;
}
.mn-acct-emoji-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.mn-acct-emoji-btn {
  width: 36px; height: 36px; border-radius: 9px; font-size: 1.1rem;
  background: var(--bg2); border: 1.5px solid var(--border2);
  cursor: pointer; transition: all .12s;
  display: flex; align-items: center; justify-content: center;
}
.mn-acct-emoji-btn.selected {
  border-color: var(--accent); background: var(--accent-dim);
}
.mn-acct-emoji-btn:hover { border-color: var(--border); }
.mn-acct-input {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  background: var(--bg2); border: 1.5px solid var(--border2);
  color: var(--text); font-size: .88rem; font-family: inherit;
  margin-bottom: 12px; box-sizing: border-box;
  transition: border-color .15s; outline: none;
}
.mn-acct-input:focus { border-color: var(--accent); }
.mn-acct-form-actions {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.mn-acct-form-actions .mn-acct-btn { flex: 1; }

/* ════════════════════════════════════════════════════════════════
   ONBOARDING v2 — Premium Fintech Flow
   ════════════════════════════════════════════════════════════════ */

/* Step dots */
.ob-step-dots {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 2;
}
.ob-step-dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--border2);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}
.ob-step-dot.active  { width: 18px; background: var(--accent); }
.ob-step-dot.done    { background: rgba(0,212,170,.4); }

/* Headline accent */
.ob-headline-accent { color: var(--accent); }

/* Lang grid — step 1 */
.ob-lang-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 8px;
  margin: 20px 0;
}
.ob-lang-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--border2); background: var(--bg2);
  cursor: pointer; transition: all .15s;
}
.ob-lang-tile:hover { border-color: var(--border); background: var(--card); }
.ob-lang-tile.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 0 3px rgba(0,212,170,.12);
}
.ob-lang-tile-flag { font-size: 1.3rem; line-height: 1; }
.ob-lang-tile-name { font-size: .85rem; font-weight: 600; color: var(--text); }

/* Left panel — new elements */
.ob-left-hero {
  display: flex; flex-direction: column; gap: 12px;
  margin: 28px 0; flex: 1;
}
.ob-globe { font-size: 2.4rem; line-height: 1; }
.ob-left-title {
  font-size: 1.6rem; font-weight: 800; color: #E8EFF7;
  letter-spacing: -.04em; line-height: 1.2;
}
.ob-left-sub {
  font-size: .82rem; color: rgba(255,255,255,.4); line-height: 1.6;
}
.ob-left-langs-preview {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto;
}
.ob-lang-flag { font-size: 1.5rem; }
.ob-left-stat-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: auto;
}
.ob-stat-row { display: flex; align-items: center; gap: 10px; }
.ob-stat-dot {
  width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0;
}
.ob-stat-dot.green  { background: #10B981; }
.ob-stat-dot.blue   { background: #6366F1; }
.ob-stat-dot.accent { background: #00D4AA; }
.ob-stat-lbl { font-size: .78rem; color: rgba(255,255,255,.45); font-weight: 500; }

/* Theme preview mini cards */
.ob-left-theme-demo { margin-top: auto; }
.ob-theme-mini-preview {
  display: flex; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1); height: 80px;
}
.ob-mini-topbar { height: 12px; background: rgba(255,255,255,.08); }
.ob-mini-sidebar { width: 36px; background: rgba(255,255,255,.04); flex-shrink: 0; }
.ob-mini-content { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.ob-mini-card { height: 20px; background: rgba(255,255,255,.06); border-radius: 4px; }
.ob-mini-card--sm { height: 14px; }

/* Step 3 theme preview inside cards */
.ob-theme-preview {
  border-radius: 10px; overflow: hidden; height: 70px;
  margin-bottom: 10px; display: flex; flex-direction: column;
}
.ob-theme-preview--dark { background: #0A0E17; border: 1px solid #1e2535; }
.ob-theme-preview--light { background: #f8fafc; border: 1px solid #e2e8f0; }
.ob-theme-preview--auto {
  display: flex; flex-direction: row;
}
.ob-tp-half { flex: 1; }
.ob-tp-half--dark  { background: #0A0E17; }
.ob-tp-half--light { background: #f8fafc; }
.ob-tp-bar { height: 10px; }
.ob-theme-preview--dark .ob-tp-bar  { background: #141927; }
.ob-theme-preview--light .ob-tp-bar { background: #f1f5f9; }
.ob-tp-side { width: 28px; }
.ob-theme-preview--dark .ob-tp-side  { background: #0d1220; }
.ob-theme-preview--light .ob-tp-side { background: #e8edf2; }
.ob-tp-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 6px; }
.ob-tp-card { border-radius: 3px; height: 14px; }
.ob-tp-card--sm { width: 60%; }
.ob-ob-tp-card--sm { height: 9px; }
.ob-theme-preview--dark .ob-tp-card  { background: rgba(255,255,255,.06); }
.ob-theme-preview--light .ob-tp-card { background: rgba(0,0,0,.07); }

/* Step 4 — fields */
.ob-fields { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 10px; }
.ob-field-wrap { display: flex; flex-direction: column; gap: 6px; }
.ob-field-label { font-size: .75rem; font-weight: 700; color: var(--text2); letter-spacing: .02em; }
.ob-input-wrap {
  display: flex; align-items: center;
  background: var(--bg2); border: 1.5px solid var(--border2);
  border-radius: 10px; overflow: hidden; transition: border-color .15s;
}
.ob-input-wrap:focus-within { border-color: var(--accent); }
.ob-input-icon { padding: 0 12px; font-size: 1rem; flex-shrink: 0; }
.ob-field-input {
  flex: 1; padding: 12px 0; background: transparent;
  border: none; outline: none; color: var(--text);
  font-size: .9rem; font-family: inherit;
}
.ob-pw-toggle {
  background: none; border: none; cursor: pointer;
  padding: 0 12px; font-size: .9rem; opacity: .5; transition: opacity .15s;
}
.ob-pw-toggle:hover { opacity: 1; }
.ob-pw-strength {
  display: flex; align-items: center; gap: 10px; margin-top: 6px;
}
.ob-pw-bar {
  flex: 1; height: 3px; background: var(--border2);
  border-radius: 99px; overflow: hidden;
}
.ob-pw-fill {
  height: 100%; width: 0%; border-radius: 99px;
  transition: width .3s, background .3s;
}
.ob-pw-label { font-size: .7rem; font-weight: 700; white-space: nowrap; }
.ob-skip-link {
  display: block; background: none; border: none; cursor: pointer;
  font-size: .78rem; color: var(--text3); font-family: inherit;
  padding: 0; margin-bottom: 8px;
  transition: color .15s;
}
.ob-skip-link:hover { color: var(--text2); }

/* Finish button */
.ob-next-btn--finish {
  background: linear-gradient(135deg, var(--accent) 0%, #00b894 100%);
  box-shadow: 0 4px 20px rgba(0,212,170,.3);
}

/* ── ONBOARDING: Step 1 Left Panel (auth + lang) ────────────── */
.ob-left-content--auth { gap: 0; }
.ob-left-content--auth .ob-left-hero { margin-bottom: 28px; }
.ob-left-lang-section { width: 100%; margin-bottom: 24px; }
.ob-lang-grid-left {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ob-lang-tile-left {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  cursor: pointer; font-size: .8rem; font-weight: 600;
  color: rgba(255,255,255,0.55);
  transition: all .15s ease;
}
.ob-lang-tile-left:hover { border-color: rgba(0,212,170,0.3); color: rgba(255,255,255,0.85); background: rgba(0,212,170,0.06); }
.ob-lang-tile-left.selected { border-color: #00D4AA; background: rgba(0,212,170,0.1); color: #fff; }
.ob-left-trust {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: auto; padding-top: 24px;
}
.ob-trust-item {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: rgba(255,255,255,0.4); font-weight: 500;
}

/* ── ONBOARDING: Theme cards 3-col ──────────────────────────── */
.ob-theme-cards--3col {
  grid-template-columns: 1fr 1fr 1fr !important;
}

/* ── ONBOARDING: Plan cards ──────────────────────────────────── */
/* ── Onboarding Plan Cards v2 ───────────────────────────────── */
.ob-plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}
@media (max-width: 560px) { .ob-plan-cards { grid-template-columns: 1fr; } }

.ob-plan-card {
  position: relative;
  padding: 20px 16px 16px;
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
  display: flex; flex-direction: column; gap: 0;
  overflow: hidden;
}
[data-theme='light'] .ob-plan-card { background: #F8FAFC; border-color: rgba(0,0,0,0.09); }
.ob-plan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.ob-plan-card--trial.selected  { border-color: #F59E0B; background: rgba(245,158,11,0.05); box-shadow: 0 0 0 4px rgba(245,158,11,0.08); }
.ob-plan-card--local.selected  { border-color: #10B981; background: rgba(16,185,129,0.05); box-shadow: 0 0 0 4px rgba(16,185,129,0.08); }
.ob-plan-card--pro.selected    { border-color: #6366F1; background: rgba(99,102,241,0.06); box-shadow: 0 0 0 4px rgba(99,102,241,0.1); }

/* Popular ribbon */
.ob-pc-popular {
  position: absolute; top: 0; left: 0; right: 0;
  background: linear-gradient(90deg, #6366F1, #8B5CF6);
  color: #fff; font-size: .6rem; font-weight: 800;
  text-align: center; padding: 4px 0; letter-spacing: .1em;
  text-transform: uppercase;
}
.ob-plan-card--pro { padding-top: 28px; }

.ob-pc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.ob-pc-emoji { font-size: 1.4rem; line-height: 1; }
.ob-pc-tag {
  font-size: .58rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; padding: 3px 8px; border-radius: 99px;
}
.ob-pc-tag--free  { background: rgba(245,158,11,0.15);  color: #F59E0B; border: 1px solid rgba(245,158,11,0.25); }
.ob-pc-tag--local { background: rgba(16,185,129,0.15);  color: #10B981; border: 1px solid rgba(16,185,129,0.25); }
.ob-pc-tag--pro   { background: rgba(99,102,241,0.18);  color: #A5B4FC; border: 1px solid rgba(99,102,241,0.3);  }

.ob-pc-name {
  font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,0.5); letter-spacing: .02em;
  text-transform: uppercase; margin-bottom: 4px;
}
[data-theme='light'] .ob-pc-name { color: rgba(0,0,0,0.45); }

.ob-pc-price-main {
  font-size: 2.2rem; font-weight: 900; line-height: 1;
  color: #fff; letter-spacing: -.05em;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 2px;
}
[data-theme='light'] .ob-pc-price-main { color: #0F172A; }
.ob-pc-cur { font-size: 1.1rem; font-weight: 700; vertical-align: super; }

.ob-pc-price-stack {
  display: flex; flex-direction: column; gap: 3px;
  margin-bottom: 2px;
}
.ob-pc-price-row {
  display: flex; align-items: center; gap: 6px;
}
.ob-pc-price-lbl {
  font-size: .55rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .07em; padding: 1px 5px; border-radius: 4px; flex-shrink: 0;
}
.ob-pc-price-lbl--local { background: rgba(16,185,129,0.18); color: #10B981; }
.ob-pc-price-lbl--pro   { background: rgba(99,102,241,0.18); color: #A5B4FC; }
.ob-pc-price-val {
  font-size: 1rem; font-weight: 800; color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif; letter-spacing: -.03em;
}
[data-theme='light'] .ob-pc-price-val { color: #0F172A; }
.ob-pc-price-plus {
  font-size: .65rem; font-weight: 700;
  color: rgba(255,255,255,0.2); padding-left: 2px;
}

.ob-pc-period {
  font-size: .68rem; color: rgba(255,255,255,0.3);
  font-weight: 500; margin-bottom: 14px;
}
[data-theme='light'] .ob-pc-period { color: rgba(0,0,0,0.35); }

.ob-pc-divider {
  height: 1px; background: rgba(255,255,255,0.06);
  margin: 0 0 12px; border-radius: 1px;
}
[data-theme='light'] .ob-pc-divider { background: rgba(0,0,0,0.07); }

.ob-pc-feats {
  list-style: none; padding: 0; margin: 0 0 14px;
  display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.ob-pc-feats li {
  font-size: .7rem; font-weight: 500; padding-left: 14px; position: relative;
}
.ob-pc-feats li::before { content: attr(data-icon); position: absolute; left: 0; }
.ob-pc-feats li.ok { color: rgba(255,255,255,0.65); }
.ob-pc-feats li.ok::before { content: '✓'; color: #10B981; font-weight: 700; }
.ob-pc-feats li.no { color: rgba(255,255,255,0.2); }
.ob-pc-feats li.no::before { content: '✕'; color: rgba(255,255,255,0.15); }
[data-theme='light'] .ob-pc-feats li.ok { color: rgba(0,0,0,0.65); }
[data-theme='light'] .ob-pc-feats li.no { color: rgba(0,0,0,0.22); }

/* Check circle — bottom right */
.ob-pc-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  align-self: flex-end; transition: all .18s;
  color: transparent;
}
.ob-plan-card--trial .ob-pc-check.active { background: #F59E0B; border-color: #F59E0B; color: #fff; }
.ob-plan-card--local .ob-pc-check.active { background: #10B981; border-color: #10B981; color: #fff; }
.ob-plan-card--pro   .ob-pc-check.active { background: #6366F1; border-color: #6366F1; color: #fff; }

@keyframes mnFadeIn{from{opacity:0}to{opacity:1}}
@keyframes mnSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ─── ANALISIS / DEUDAS LAYOUT ──────────────────────────────────── */
.mn-section { margin-bottom: 20px; }
.mn-section:last-child { margin-bottom: 0; }

/* Insight items mejorados */
.mn-insight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 8px);
  background: var(--bg2);
  border-left: 3px solid transparent;
  margin-bottom: 10px;
}
.mn-insight:last-child { margin-bottom: 0; }
.mn-insight--warn  { border-left-color: var(--gold);  background: var(--gold-dim);  }
.mn-insight--alert { border-left-color: var(--red);   background: var(--red-dim);   }
.mn-insight--ok    { border-left-color: var(--green);  background: var(--green-dim); }
.mn-insight--info  { border-left-color: var(--indigo); background: var(--indigo-dim);}
.mn-insight-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.mn-insight-body { flex: 1; font-size: .82rem; color: var(--text); line-height: 1.55; }
.mn-insight-body strong { color: var(--text); }

/* Deuda estrategia picker — 3 presets + 1 create custom card */
.mn-strat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
@media(max-width:900px){ .mn-strat-grid { grid-template-columns: repeat(2, 1fr); } }
.mn-lock-plans-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
@media(max-width:600px){ .mn-strat-grid { grid-template-columns: 1fr; } .mn-lock-plans-grid { grid-template-columns: 1fr; } }
.mn-strat-card {
  padding: 14px 12px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--card2);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.mn-strat-card:hover { border-color: var(--border2); }
.mn-strat-card.active { border-color: var(--accent); background: var(--accent-dim); }
.mn-strat-card.custom { border-style: dashed; border-color: var(--border2); background: transparent; display: flex; align-items: center; justify-content: center; min-height: 140px; }
.mn-strat-card.custom:hover { border-color: var(--accent); background: var(--accent-dim); }
.mn-strat-card-icon { font-size: 1.6rem; margin-bottom: 6px; }
.mn-strat-card-name { font-size: .82rem; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.mn-strat-card-pay  { font-size: .95rem; font-weight: 800; color: var(--accent); }
.mn-strat-card-months { font-size: .72rem; color: var(--text2); margin-top: 2px; }
.mn-strat-card-date { font-size: .68rem; color: var(--text3); }

/* Deuda order item */
.mn-debt-order { display: flex; flex-direction: column; gap: 0; }
.mn-debt-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mn-debt-order-item:last-child { border-bottom: none; }
.mn-debt-order-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-dim); color: var(--accent);
  font-size: .75rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mn-debt-order-name { font-size: .88rem; font-weight: 700; color: var(--text); }
.mn-debt-order-meta { font-size: .72rem; color: var(--text2); margin-top: 2px; }

/* Libertad financiera card */
.mn-freedom-card {
  background: linear-gradient(135deg, var(--accent-dim), rgba(0,212,170,0.04));
  border: 1px solid rgba(0,212,170,0.25);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: center;
}
.mn-freedom-date { font-size: 1.4rem; font-weight: 900; color: var(--accent); letter-spacing: -.03em; }
.mn-freedom-sub  { font-size: .78rem; color: var(--text2); margin-top: 4px; }

/* Custom debt strategy modal */
.mn-custom-modal .modal { max-width: 820px; width: 92vw; max-height: 90vh; max-height: 90dvh; }
.mn-custom-modal .modal-body { max-height: calc(90vh - 130px); max-height: calc(90dvh - 130px); overflow-y: auto; }
.mn-custom-modal #customDebtChart { min-height: 320px; }


.mn-custom-input-wrap {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.mn-custom-input {
  flex: 1; font-size: 2.1rem; font-weight: 900; color: var(--accent);
  padding: 16px 20px; border-radius: 14px; border: 2px solid var(--border2);
  background: var(--bg2); text-align: center; transition: border-color .15s;
}
.mn-custom-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.mn-custom-results {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px;
}
.mn-custom-result-card {
  padding: 20px 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card2); text-align: center;
}
.mn-custom-result-label { font-size: .75rem; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.mn-custom-result-value { font-size: 1.5rem; font-weight: 900; color: var(--text); }
.mn-custom-result-value.accent { color: var(--accent); }
.mn-custom-result-value.green { color: var(--green); }
.mn-custom-method-toggle {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 18px;
}
.mn-custom-method-btn {
  padding: 9px 16px; border-radius: 8px; border: 1.5px solid var(--border2);
  background: var(--card2); cursor: pointer; font-size: .82rem; font-weight: 700;
  color: var(--text2); transition: all .15s; font-family: inherit;
}
.mn-custom-method-btn.active {
  border-color: var(--accent); background: var(--accent-dim); color: var(--accent);
}
.mn-custom-chart-wrap {
  margin-bottom: 20px; height: 340px; background: var(--card2);
  border-radius: 10px; padding: 16px; border: 1px solid var(--border);
}
.mn-custom-name-input {
  width: 100%; padding: 10px 14px; border-radius: 8px; border: 1.5px solid var(--border2);
  background: var(--bg2); color: var(--text); font-size: .9rem; font-weight: 600;
  margin-bottom: 18px; font-family: inherit;
}
.mn-custom-name-input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.mn-custom-save-card {
  background: var(--accent-dim); border: 1px solid rgba(0,212,170,0.3);
  border-radius: 10px; padding: 14px 16px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 12px;
}
.mn-custom-save-icon { font-size: 1.8rem; flex-shrink: 0; }
.mn-custom-save-text { flex: 1; font-size: .85rem; color: var(--text2); }
.mn-custom-save-text strong { color: var(--text); }

/* ─── TABLE SORT + SELECTION ────────────────────────────────────── */
.table-wrap table th[onclick] { user-select: none; }
.table-wrap table th[onclick]:hover { color: var(--accent); background: var(--accent-dim); }
tr.row-selected td { background: rgba(99,102,241,0.06) !important; }
tr.row-selected { border-left: 2px solid var(--indigo); }

/* ─── PAGE TRANSITIONS — eliminadas, causaban parpadeo ──────────── */
/* Las animaciones de página se han desactivado intencionalmente     */

/* ─── LIGHT MODE SUPPLEMENTAL OVERRIDES ────────────────────────── */

/* Input backgrounds — dark tokens don't auto-apply */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color: var(--text);
}
[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Onboarding plan cards light fix */
[data-theme="light"] .ob-pc-price-plus { color: rgba(0,0,0,.25); }
[data-theme="light"] .ob-pc-check { border-color: rgba(0,0,0,.15); }

/* Tables */
[data-theme="light"] table thead th { background: var(--bg2); color: var(--text2); }
[data-theme="light"] table tbody tr { border-bottom-color: var(--border); }

/* Modals */
[data-theme="light"] .modal-content {
  background: var(--card);
  border-color: var(--border2);
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
}

/* Confirmación modal */
[data-theme="light"] .confirm-modal-body {
  background: var(--card);
}

/* Topbar */
[data-theme="light"] .topbar { background: var(--card); border-bottom-color: var(--border); }

/* Sidebar */
[data-theme="light"] .sidebar { background: var(--bg2); border-right-color: var(--border); }
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,.04); }
[data-theme="light"] .nav-item.active { background: rgba(0,150,115,.08); }

/* KPI delta (ensure readable green/red on light) */
[data-theme="light"] .kpi-delta.up { background: rgba(16,185,129,.1); color: #059669; }
[data-theme="light"] .kpi-delta.down { background: rgba(244,63,94,.1); color: #E11D48; }

/* Mission bar */
[data-theme="light"] #misionBar { background: var(--card); border-color: var(--border); }

/* Will-change on animated elements for GPU acceleration */
.sidebar, .modal-content, .confirm-modal, .topbar,
.mn-auth-modal-header, .billing-page, #mnPaymentOverlay .mnpo-sheet {
  will-change: transform;
}
.kpi-card, .card, .inv-card, .debt-card, .goal-card {
  will-change: transform;
}
/* ── SISTEMA DE PLANES (auth-ui.js) ──────────────────────────── */
#planModalOverlay { z-index:100000; }
.auth-plan-badge { font-size:.68rem; font-weight:800; padding:3px 10px; border-radius:99px; text-transform:uppercase; letter-spacing:.03em; }
.auth-badge--trial { background:rgba(99,102,241,.15); color:#818CF8; }
.auth-badge--expired { background:rgba(244,63,94,.15); color:#FB7185; }
.auth-badge--local { background:var(--accent-dim); color:var(--accent); }
.auth-badge--pro { background:rgba(236,72,153,.15); color:#F472B6; }

.trial-pill { display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:99px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.3); cursor:pointer; font-size:.74rem; font-weight:700; color:#A5B4FC; transition:all .15s; }
.trial-pill:hover { background:rgba(99,102,241,.2); }
.trial-pill--urgent { background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.35); color:#FBBF24; }
.trial-pill-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; animation:pulse 2s infinite; }

.plan-modal { max-width:640px; }
.plan-modal-sub { font-size:.85rem; color:var(--text2); margin-bottom:18px; text-align:center; }
.plan-modal-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.plan-mini-card { position:relative; border-radius:16px; padding:20px 18px; background:var(--bg2); border:1.5px solid var(--border); display:flex; flex-direction:column; }
.plan-mini-card--pro { border-color:rgba(236,72,153,.4); background:linear-gradient(160deg, rgba(236,72,153,.08), var(--bg2) 60%); }
.plan-mini-card__ribbon { position:absolute; top:-10px; right:14px; background:#EC4899; color:#fff; font-size:.65rem; font-weight:800; padding:3px 10px; border-radius:99px; }
.plan-mini-card__name { font-weight:800; font-size:.95rem; color:var(--text); }
.plan-mini-card__price { font-size:1.5rem; font-weight:900; color:var(--text); margin:4px 0 6px; }
.plan-mini-card__price span { font-size:.72rem; font-weight:600; color:var(--text2); }
.plan-mini-card--pro .plan-mini-card__price { color:#EC4899; }
.plan-mini-card__desc { font-size:.75rem; color:var(--text2); margin-bottom:14px; min-height:32px; }
.plan-mini-card__list { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.plan-mini-card__list li { font-size:.78rem; padding-left:20px; position:relative; color:var(--text2); }
.plan-mini-card__list li.yes { color:var(--text); }
.plan-mini-card__list li.yes::before { content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:800; }
.plan-mini-card__list li.no { opacity:.5; }
.plan-mini-card__list li.no::before { content:'✕'; position:absolute; left:0; }
.plan-mini-card--pro .plan-mini-card__pro-btn { background:#EC4899; border-color:#EC4899; }
.plan-mini-card--pro .plan-mini-card__pro-btn:hover { background:#DB2777; }

.plan-confirm-step { text-align:center; padding:10px 4px; }
.plan-confirm-step__icon { font-size:2.4rem; margin-bottom:8px; }
.plan-confirm-step__name { font-weight:800; font-size:1.05rem; color:var(--text); }
.plan-confirm-step__price { font-size:1.7rem; font-weight:900; margin:6px 0 16px; }
.plan-confirm-step__price span { font-size:.75rem; font-weight:600; color:var(--text2); }
.plan-confirm-step__notice { font-size:.8rem; color:var(--text2); background:var(--bg2); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:18px; line-height:1.5; }
.plan-confirm-step__actions { display:flex; justify-content:center; gap:8px; }

@media (max-width: 560px) {
  .plan-modal-grid { grid-template-columns:1fr; }
  .plan-mini-card__ribbon { top:-8px; right:12px; }
}

/* ── PATRIMONIO: COMPARACIÓN Y EXPLICACIÓN ───────────────────── */
.nw-range-row { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
.nw-range-btn { padding:6px 14px; border-radius:99px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); font-size:.78rem; font-weight:700; cursor:pointer; transition:all .15s; }
.nw-range-btn:hover { border-color:var(--border2); color:var(--text); }
.nw-range-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.nw-summary-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; }
.nw-summary-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text2); margin-bottom:3px; }
.nw-summary-value { font-size:1.3rem; font-weight:800; color:var(--text); }
.nw-summary-arrow { font-size:1.1rem; color:var(--text3); flex-shrink:0; }
.nw-change-badge { font-size:1.05rem; font-weight:800; margin-bottom:6px; }
.nw-since-jan { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--bg2); border-radius:var(--radius-sm); font-size:.8rem; color:var(--text2); margin-bottom:16px; }
.nw-section-label { font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--text); margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--border); }
.nw-comp-list { display:flex; flex-direction:column; gap:2px; }
.nw-comp-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); font-size:.86rem; }
.nw-comp-label { color:var(--text); }
.nw-comp-value { font-weight:700; }
.nw-result-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0 0; margin-top:6px; font-weight:800; font-size:.95rem; color:var(--text); }
.nw-highlights { margin-top:16px; display:flex; flex-direction:column; gap:6px; }
.nw-highlight-item { font-size:.82rem; color:var(--text2); background:var(--bg2); padding:8px 12px; border-radius:var(--radius-sm); }

@media (max-width: 560px) {
  .nw-summary-value { font-size:1.1rem; }
  .nw-change-badge { font-size:.95rem; }
  .nw-range-btn { padding:5px 11px; font-size:.72rem; }
}
/* ── ANÁLISIS: TABS (Resumen / Revisión / Calendario) ───────────── */
.analisis-tabs { display:flex; gap:6px; margin-bottom:18px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.analisis-tabs::-webkit-scrollbar { display:none; }
.analisis-tab-btn { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:9px 16px; border-radius:11px; border:1px solid var(--border); background:var(--bg2); color:var(--text2); font-size:.82rem; font-weight:700; cursor:pointer; transition:all .15s; white-space:nowrap; }
.analisis-tab-btn:hover { border-color:var(--border2); color:var(--text); }
.analisis-tab-btn.active { background:var(--accent-dim); border-color:var(--accent); color:var(--accent); }
.analisis-tab-badge { background:var(--red); color:#fff; font-size:.65rem; font-weight:800; border-radius:99px; padding:1px 7px; }

/* ── CALENDARIO FINANCIERO ────────────────────────────────────── */
.cal-nav { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-nav-center { display:flex; align-items:center; gap:10px; }
.cal-nav-label { font-weight:800; font-size:1.05rem; text-transform:capitalize; color:var(--text); }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-grid-header { margin-bottom:6px; }
.cal-weekday { text-align:center; font-size:.68rem; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:.03em; padding:4px 0; }
.cal-cell { min-height:74px; border-radius:10px; background:var(--bg2); border:1px solid var(--border); padding:6px 5px; cursor:pointer; transition:background .15s, border-color .15s; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
.cal-cell:hover { background:var(--card); border-color:var(--border2); }
.cal-cell--empty { background:transparent; border-color:transparent; cursor:default; }
.cal-cell--today { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.cal-cell-day { font-size:.78rem; font-weight:700; color:var(--text); }
.cal-cell--today .cal-cell-day { color:var(--accent); }
.cal-cell-balance { font-size:.64rem; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-cell-events { font-size:.58rem; color:var(--blue,#4A9EFF); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-section-label { font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }

@media (max-width: 640px) {
  .cal-cell { min-height:56px; padding:4px 3px; border-radius:8px; }
  .cal-cell-day { font-size:.7rem; }
  .cal-cell-balance { font-size:.55rem; }
  .cal-cell-events { font-size:.5rem; }
  .cal-grid { gap:3px; }
  .cal-nav-label { font-size:.9rem; }
  .cal-weekday { font-size:.6rem; }
}