:root {
  /* 🎨 MFP Design System — Light */
  --bg:#f5f6f8;--bg2:#ffffff;--bg3:#eef0f3;--bg4:#e4e6ea;
  --surface:#ffffff;--border:rgba(0,0,0,0.07);--border2:rgba(0,0,0,0.13);
  --text:#0f1117;--text2:#4a5060;--muted:#8b92a5;
  
  /* 🟢 Personal Mode — Green */
  --accent:#059669;--accent2:#047857;--accent3:#d1fae5;--accent-deep:#064e3b;--accent-shadow:5,150,105;
  --accent-light:#34d399;--accent-ultralight:#ecfdf5;
  
  /* 🎨 Semantic Colors */
  --success:#047857;--success2:#d1fae5;--success-shadow:4,120,87;
  --danger:#ef4444;--danger2:#fee2e2;--danger-shadow:239,68,68;
  --warning:#f59e0b;--warning2:#fef3c7;--warning-shadow:245,158,11;
  --info:#3b82f6;--info2:#dbeafe;--info-shadow:59,130,246;
  
  /* 🌈 Extended Palette */
  --purple:#8b5cf6;--purple2:#ede9fe;--purple-shadow:139,92,246;
  --orange:#f97316;--orange2:#fed7aa;--orange-shadow:249,115,22;
  --teal:#14b8a6;--teal2:#ccfbf1;--teal-shadow:20,184,166;
  --pink:#ec4899;--pink2:#fce7f3;--pink-shadow:236,72,153;
  
  /* 🎯 Modern Shadows */
  --shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --shadow2:0 4px 12px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --shadow3:0 12px 28px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.05);
  --shadow4:0 24px 40px rgba(0,0,0,0.12),0 10px 16px rgba(0,0,0,0.06);
  --shadow-accent:0 4px 16px rgba(var(--accent-shadow),0.2),0 2px 6px rgba(var(--accent-shadow),0.1);
  
  /* 📐 Border Radius */
  --r:8px;--r2:12px;--r3:16px;--r4:20px;
  
  /* ⚡ Transitions */
  --transition-fast:0.15s ease;--transition-normal:0.25s ease;--transition-slow:0.35s ease;
}
[data-theme="dark"] {
  /* 🌙 MFP Design System — Dark */
  --bg:#08090c;--bg2:#10131a;--bg3:#181c25;--bg4:#202530;
  --surface:#10131a;--border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --text:#eef0f5;--text2:#9ba3b8;--muted:#5a6278;
  
  /* 🟢 Personal Dark — Emerald */
  --accent:#10b981;--accent2:#059669;--accent3:rgba(16,185,129,0.14);--accent-deep:#047857;--accent-shadow:16,185,129;
  --accent-light:#34d399;--accent-ultralight:rgba(16,185,129,0.07);
  
  /* 🎨 Dark Semantic Colors */
  --success:#34d399;--success2:rgba(52,211,153,0.15);--success-shadow:52,211,153;
  --danger:#f87171;--danger2:rgba(248,113,113,0.15);--danger-shadow:248,113,113;
  --warning:#fbbf24;--warning2:rgba(251,191,36,0.15);--warning-shadow:251,191,36;
  --info:#60a5fa;--info2:rgba(96,165,250,0.15);--info-shadow:96,165,250;
  
  /* 🌈 Dark Extended Palette */
  --purple:#a78bfa;--purple2:rgba(167,139,250,0.15);--purple-shadow:167,139,250;
  --orange:#fb923c;--orange2:rgba(251,146,60,0.15);--orange-shadow:251,146,60;
  --teal:#2dd4bf;--teal2:rgba(45,212,191,0.15);--teal-shadow:45,212,191;
  --pink:#f472b6;--pink2:rgba(244,114,182,0.15);--pink-shadow:244,114,182;
  
  /* 🎯 Dark Shadows */
  --shadow:0 1px 3px rgba(0,0,0,0.5),0 1px 2px rgba(0,0,0,0.3);
  --shadow2:0 4px 12px rgba(0,0,0,0.6),0 2px 4px rgba(0,0,0,0.35);
  --shadow3:0 12px 28px rgba(0,0,0,0.7),0 4px 8px rgba(0,0,0,0.45);
  --shadow4:0 24px 40px rgba(0,0,0,0.8),0 10px 16px rgba(0,0,0,0.5);
  --shadow-accent:0 4px 16px rgba(var(--accent-shadow),0.3),0 2px 6px rgba(var(--accent-shadow),0.18);
}
[data-mode="empresa"] {
  --accent:#2563eb;--accent2:#1d4ed8;--accent3:#dbeafe;--accent-deep:#1e3a8a;--accent-shadow:37,99,235;
}
[data-theme="dark"][data-mode="empresa"] {
  --accent:#3b82f6;--accent2:#2563eb;--accent3:rgba(59,130,246,0.14);--accent-deep:#1d4ed8;--accent-shadow:59,130,246;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Instrument Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.5;transition:background .3s,color .3s;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px;}

/* ── AUTH ── */
#auth-screen{position:fixed;inset:0;background:linear-gradient(135deg,var(--bg) 0%,var(--bg3) 50%,var(--bg4) 100%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:900;}
.auth-card{background:var(--bg2);border-radius:20px;border:1px solid var(--border2);padding:40px 36px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.12),0 4px 16px rgba(0,0,0,0.06);}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px;}
.auth-logo-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.auth-logo-icon svg{width:22px;height:22px;color:#fff;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.auth-logo-name{font-weight:800;font-size:18px;color:var(--text);letter-spacing:-.3px;}
.auth-logo-sub{font-size:11px;color:var(--muted);font-weight:500;margin-top:1px;}
.auth-logo-version{font-size:10px;color:var(--accent);font-weight:700;margin-top:2px;letter-spacing:0.5px;}
.auth-title{font-size:22px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.4px;}
.auth-sub{font-size:13px;color:var(--muted);margin-bottom:26px;}
.auth-tabs{display:flex;gap:6px;margin-bottom:24px;background:var(--bg3);border-radius:var(--r);padding:4px;}
.auth-tab{flex:1;padding:9px;border-radius:8px;border:none;background:transparent;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;font-family:inherit;letter-spacing:.1px;}
.auth-tab.active{background:var(--bg2);color:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,0.12);font-weight:800;}
.form-group{margin-bottom:14px;}
.form-label{display:block;font-size:12px;font-weight:700;color:var(--text2);margin-bottom:5px;letter-spacing:.3px;text-transform:uppercase;}
.form-input{width:100%;padding:13px 14px;height:48px;box-sizing:border-box;border-radius:10px;border:1.5px solid var(--border2);background:var(--bg3);color:var(--text);font-size:14px;font-family:inherit;transition:all .2s;-webkit-appearance:none;appearance:none;}
.form-input:focus{outline:none;border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px rgba(var(--accent-shadow),0.1);}
.form-input::placeholder{color:var(--muted);}
.btn-submit{
  width:100%;
  padding:0 20px;
  height:48px;
  border-radius:var(--r2);
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:var(--shadow-accent);
  transition:all var(--transition-fast);
  margin-top:8px;
  font-family:inherit;
  position:relative;
  overflow:hidden;
}
.btn-submit::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left var(--transition-slow);
}
.btn-submit:hover::before{left:100%;}
.btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(var(--accent-shadow),0.25);
}
.btn-submit:active{
  transform:translateY(0) scale(0.98);
  box-shadow:0 4px 12px rgba(var(--accent-shadow),0.2);
}
.btn-submit:disabled{
  background:var(--bg4);
  color:var(--muted);
  box-shadow:var(--shadow);
  cursor:not-allowed;
  transform:none;
}
.btn-submit:disabled::before{display:none;}

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--r2);
  border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  box-shadow:var(--shadow-accent);
  transition:all var(--transition-fast);
  font-family:inherit;
  position:relative;
  overflow:hidden;
}
.btn-primary::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left var(--transition-slow);
}
.btn-primary:hover::before{left:100%;}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(var(--accent-shadow),0.25);
  color:#fff;
}
.btn-primary:active{
  transform:translateY(0) scale(0.98);
  box-shadow:0 4px 12px rgba(var(--accent-shadow),0.2);
}
.btn-primary:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--accent-shadow),0.2),var(--shadow-accent);
}

.btn-icon{
  width:40px;
  height:40px;
  border-radius:var(--r2);
  border:1.5px solid var(--border2);
  background:var(--bg3);
  color:var(--text2);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--transition-fast);
  font-family:inherit;
  position:relative;
}
.btn-icon:hover{
  background:var(--accent3);
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-1px);
  box-shadow:var(--shadow2);
}
.btn-icon:active{
  transform:translateY(0) scale(0.95);
}
.btn-icon:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(var(--accent-shadow),0.15);
}

/* 🎨 Button Variants */
.btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--r2);
  border:2px solid var(--border2);
  background:var(--bg2);
  color:var(--text);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:all var(--transition-fast);
  font-family:inherit;
}
.btn-secondary:hover{
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent3);
  transform:translateY(-1px);
  box-shadow:var(--shadow2);
}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--r2);
  border:none;
  background:transparent;
  color:var(--text2);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:all var(--transition-fast);
  font-family:inherit;
}
.btn-ghost:hover{
  background:var(--bg3);
  color:var(--text);
  transform:translateY(-1px);
}

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:var(--r2);
  border:2px solid var(--accent);
  background:transparent;
  color:var(--accent);
  font-weight:600;
  font-size:13px;
  cursor:pointer;
  transition:all var(--transition-fast);
  font-family:inherit;
}
.btn-outline:hover{
  background:var(--accent);
  color:#fff;
  transform:translateY(-1px);
  box-shadow:var(--shadow-accent);
}

/* 🔄 Loading States */
.btn-loading{
  position:relative;
  color:transparent !important;
  pointer-events:none;
}
.btn-loading::after{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  top:50%;
  left:50%;
  margin-left:-8px;
  margin-top:-8px;
  border:2px solid #fff;
  border-radius:50%;
  border-top-color:transparent;
  animation:spin 0.8s linear infinite;
}

@keyframes spin{
  to{transform:rotate(360deg);}
}
.auth-error{background:var(--danger2);border:1px solid rgba(192,57,43,0.25);color:var(--danger);border-radius:var(--r);padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:14px;display:none;}
.auth-error.show{display:block;}
.license-hint{background:var(--accent3);border:1px solid rgba(var(--accent-shadow),0.20);border-radius:var(--r);padding:12px 14px;font-size:12px;color:var(--accent);margin-bottom:16px;line-height:1.6;}
.license-hint strong{display:block;font-size:13px;margin-bottom:3px;}

/* ── LOADING SCREEN ── */
#loading-screen{position:fixed;inset:0;z-index:950;background:linear-gradient(135deg,var(--bg) 0%,var(--bg3) 60%,var(--bg4) 100%);display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px;}
#loading-screen.visible{display:flex;}
@keyframes lsFadeOut{from{opacity:1;transform:scale(1);}to{opacity:0;transform:scale(1.04);}}
#loading-screen.fade-out{animation:lsFadeOut 0.45s ease forwards;}
.ls-icon{width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(var(--accent-shadow),.35);animation:lsPop .5s cubic-bezier(.34,1.56,.64,1) both,lsPulse 2.2s .5s ease-in-out infinite;}
@keyframes lsPop{from{opacity:0;transform:scale(.75) translateY(12px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes lsPulse{0%,100%{box-shadow:0 8px 28px rgba(var(--accent-shadow),.35);}50%{box-shadow:0 12px 40px rgba(var(--accent-shadow),.55);}}
.ls-icon svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ls-brand{display:flex;flex-direction:column;align-items:center;gap:4px;animation:lsPop .5s .1s cubic-bezier(.34,1.56,.64,1) both;}
.ls-brand-name{font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.4px;}
.ls-brand-sub{font-size:12px;color:var(--muted);font-weight:500;}
.ls-bar-wrap{width:230px;height:5px;border-radius:99px;background:var(--bg4);overflow:hidden;animation:lsPop .5s .2s cubic-bezier(.34,1.56,.64,1) both;}
.ls-bar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent-light));width:0%;transition:width .25s ease;box-shadow:0 0 10px rgba(var(--accent-shadow),.4);}
.ls-msg{font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.2px;animation:lsPop .5s .3s cubic-bezier(.34,1.56,.64,1) both;min-height:20px;}
.ls-dots{display:inline-flex;gap:5px;margin-left:5px;vertical-align:middle;}
.ls-dots span{width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.3;display:inline-block;animation:lsDot 1.2s ease-in-out infinite;}
.ls-dots span:nth-child(2){animation-delay:.2s;}
.ls-dots span:nth-child(3){animation-delay:.4s;}
@keyframes lsDot{0%,80%,100%{opacity:.3;transform:scale(.8);}40%{opacity:1;transform:scale(1.3);}}

/* ── REAUTH MODAL ── */
#reauth-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;}
#reauth-overlay.show{display:flex;}
.reauth-card{background:var(--bg2);border-radius:var(--r3);border:1px solid var(--border2);padding:32px 28px;width:100%;max-width:380px;box-shadow:var(--shadow4);animation:reauthIn .25s cubic-bezier(.34,1.56,.64,1);}
@keyframes reauthIn{from{opacity:0;transform:scale(.92) translateY(12px);}to{opacity:1;transform:scale(1) translateY(0);}}
.reauth-icon{width:48px;height:48px;border-radius:14px;background:var(--warning2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.reauth-icon svg{width:22px;height:22px;stroke:var(--warning);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.reauth-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px;letter-spacing:-.3px;}
.reauth-sub{font-size:13px;color:var(--muted);margin-bottom:20px;line-height:1.5;}
.reauth-email{font-size:13px;font-weight:700;color:var(--accent);background:var(--accent3);border-radius:var(--r);padding:8px 12px;margin-bottom:16px;word-break:break-all;}
.reauth-actions{display:flex;gap:10px;margin-top:20px;}
.reauth-actions .btn-submit{margin-top:0;flex:1;}
.btn-reauth-cancel{flex:1;padding:13px;border-radius:var(--r2);border:1.5px solid var(--border2);background:var(--bg3);color:var(--text2);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;transition:all .15s;}
.btn-reauth-cancel:hover{border-color:var(--danger);color:var(--danger);background:var(--danger2);}

/* ── LICENSE EXPIRY BANNER ── */
#license-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:9000;padding:12px 20px;text-align:center;font-size:13px;font-weight:700;}
#license-banner.warn{background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;}
#license-banner.danger{background:linear-gradient(135deg,#c0392b,#e55347);color:#fff;}

.has-license-banner{padding-top:44px;}

/* ── APP ── */
#app{display:none;min-height:100vh;}
#app.visible{display:grid;grid-template-columns:240px 1fr;}

/* ── SIDEBAR ── */
.sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;overflow-y:auto;transition:background .3s;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:8px 10px 20px;border-bottom:1px solid var(--border);margin-bottom:6px;}
.sidebar-logo-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sidebar-logo-icon svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.sidebar-logo-name{font-weight:800;font-size:14px;color:var(--text);letter-spacing:-.2px;}
.sidebar-logo-pro{font-size:9px;font-weight:700;letter-spacing:.8px;color:var(--accent);text-transform:uppercase;}
.sidebar-logo-version{font-size:8px;color:var(--muted);font-weight:600;margin-top:2px;letter-spacing:0.3px;text-transform:uppercase;}
.nav-section-title{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;padding:14px 10px 6px;}
.nav-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;color:var(--text2);font-weight:600;font-size:13px;cursor:pointer;transition:all .15s;border:none;background:transparent;width:100%;text-align:left;font-family:inherit;}
.nav-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.nav-item:hover{background:var(--bg3);color:var(--text);transform:translateX(2px);}
.nav-item.active{background:var(--accent3);color:var(--accent);font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(var(--accent-shadow),0.2);}
.nav-item.active svg{stroke:var(--accent);}
.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);}
.user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg3);cursor:pointer;border:1px solid var(--border);transition:all .15s;}
.user-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex-shrink:0;}
.user-name{font-weight:700;font-size:13px;}
.user-email{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px;}

/* ── MAIN ── */
.main{min-width:0;overflow-x:hidden;}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:100;transition:background .3s;box-shadow:0 1px 0 var(--border);}
.topbar-left{display:flex;align-items:center;gap:12px;}
.page-title{font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.5px;}
.page-version{font-size:11px;color:var(--accent);font-weight:700;padding:4px 8px;background:var(--accent3);border-radius:99px;margin-left:8px;letter-spacing:0.3px;}
.month-nav{display:flex;align-items:center;gap:6px;}
.month-nav button{width:30px;height:30px;border-radius:8px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.month-nav button:hover{background:var(--accent3);border-color:var(--accent);color:var(--accent);}
.month-nav button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}
.month-label{font-size:14px;font-weight:700;color:var(--text);min-width:140px;text-align:center;}
.topbar-actions{display:flex;align-items:center;gap:8px;}
.btn-icon{width:36px;height:36px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit;}
.btn-icon:hover{background:var(--accent3);border-color:var(--accent);color:var(--accent);}
.btn-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.btn-primary{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--r);border:none;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;font-weight:700;font-size:13px;cursor:pointer;box-shadow:0 3px 10px rgba(var(--accent-shadow),0.28);transition:all .15s;font-family:inherit;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(var(--accent-shadow),0.35);}
.btn-primary svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.content{padding:24px 28px;display:flex;flex-direction:column;gap:22px;}

/* ── STAT CARDS ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:22px;box-shadow:0 2px 8px rgba(0,0,0,0.05);position:relative;overflow:hidden;transition:all var(--transition-normal);}
.stat-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.09);transform:translateY(-2px);border-color:var(--border2);}
.stat-card-icon{width:44px;height:44px;border-radius:var(--r2);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--shadow);}
.stat-card-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.stat-label{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.7px;text-transform:uppercase;margin-bottom:6px;}
.stat-value{font-size:26px;font-weight:800;letter-spacing:-1px;line-height:1;font-family:'DM Mono',monospace;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.stat-hint{font-size:12px;color:var(--muted);margin-top:8px;}
.stat-delta{font-size:10px;font-weight:700;margin-top:6px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:99px;}
.stat-delta.up{background:var(--danger2);color:var(--danger);}
.stat-delta.down{background:var(--accent3);color:var(--accent);}
.stat-delta.neutral{background:var(--bg3);color:var(--muted);}
.stat-income .stat-card-icon{background:var(--accent3);color:var(--accent);}
.stat-income .stat-value{color:var(--accent);}
.stat-expense .stat-card-icon{background:var(--danger2);color:var(--danger);}
.stat-expense .stat-value{color:var(--danger);}
.stat-balance .stat-card-icon{background:var(--info2);color:var(--info);}
.stat-balance .stat-value{color:var(--info);}
.stat-saving .stat-card-icon{background:var(--purple2);color:var(--purple);}
.stat-saving .stat-value{color:var(--purple);}
.stat-score .stat-card-icon{background:var(--orange2);color:var(--orange);}
.stat-score .stat-value{color:var(--orange);}

/* ── PROGRESS ── */
.progress-bar{height:5px;background:var(--bg4);border-radius:99px;overflow:hidden;margin:10px 0 6px;}
.progress-fill{height:100%;border-radius:99px;transition:width .5s ease;}
.progress-green .progress-fill{background:linear-gradient(90deg,var(--accent),var(--accent2));}
.progress-yellow .progress-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.progress-red .progress-fill{background:linear-gradient(90deg,var(--danger),#e55347);}
.progress-purple .progress-fill{background:linear-gradient(90deg,var(--purple),#9f5ff0);}
.progress-orange .progress-fill{background:linear-gradient(90deg,var(--orange),#fb923c);}

/* ── LAYOUTS ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.three-col{display:grid;grid-template-columns:2fr 1fr;gap:18px;}
.four-col{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}

/* ── CARD ── */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,0.05),0 1px 2px rgba(0,0,0,0.03);overflow:hidden;transition:background .3s,border-color .3s,box-shadow .2s;}
.card-header{padding:18px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.card-title{font-size:14px;font-weight:800;color:var(--text);letter-spacing:-.2px;}
.card-body{padding:16px 20px 20px;}
.card-badge{padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.4px;white-space:nowrap;}
.badge-green{background:var(--accent3);color:var(--accent);}
.badge-red{background:var(--danger2);color:var(--danger);}
.badge-yellow{background:var(--warn2);color:var(--warn);}
.badge-gray{background:var(--bg3);color:var(--muted);}
.badge-blue{background:var(--info2);color:var(--info);}
.badge-purple{background:var(--purple2);color:var(--purple);}
.badge-orange{background:var(--orange2);color:var(--orange);}
.badge-teal{background:var(--teal2);color:var(--teal);}

/* ── MODERN FORM SYSTEM ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-grid.g3{grid-template-columns:1fr 1fr 1fr;}
.form-grid.g1{grid-template-columns:1fr;}
label.fl{display:block;font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;}
input.fi,select.fi,textarea.fi{
  width:100%;
  padding:11px 14px;
  border-radius:10px;
  border:1.5px solid var(--border2);
  background:var(--bg3);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  transition:all var(--transition-fast);
  -webkit-appearance:none;
  appearance:none;
}
input.fi:focus,select.fi:focus,textarea.fi:focus{
  outline:none;
  border-color:var(--accent);
  background:var(--bg2);
  box-shadow:0 0 0 3px rgba(var(--accent-shadow),0.1);
}
input.fi::placeholder{color:var(--muted);}
.select-panel{max-height:132px;overflow-y:auto;border-radius:var(--r);border:1.5px solid var(--border2);background:var(--bg2);padding:4px;display:flex;flex-direction:column;gap:4px;box-shadow:inset 0 1px 3px rgba(0,0,0,0.04);}
.select-chip{width:100%;padding:6px 9px;border-radius:var(--r);border:1.5px solid var(--border2);background:var(--bg3);color:var(--text2);font-weight:600;font-size:12px;text-align:left;cursor:pointer;transition:all .15s;font-family:inherit;line-height:1.2;}
.select-chip:hover{border-color:var(--accent);color:var(--accent);}
.select-chip.active{border-color:var(--accent);background:var(--accent3);color:var(--accent);box-shadow:0 2px 8px rgba(var(--accent-shadow),0.15);}

/* ── BANK CHIP ── */
.bank-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.3px;white-space:nowrap;}
.bank-dot{width:7px;height:7px;border-radius:50%;}

/* ── MODERN TABLE SYSTEM ── */
.table-wrap{overflow-x:auto;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,0.05);border:1px solid var(--border);}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  background:var(--bg2);
}
thead th{
  padding:14px 16px;
  text-align:left;
  background:var(--bg3);
  color:var(--text2);
  font-size:11px;
  font-weight:800;
  letter-spacing:.8px;
  text-transform:uppercase;
  border-bottom:2px solid var(--border);
  position:sticky;
  top:0;
  z-index:10;
}
thead th:first-child{border-radius:var(--r2) 0 0 0;}
thead th:last-child{border-radius:0 var(--r2) 0 0;}
tbody td{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  vertical-align:middle;
  transition:background var(--transition-fast);
}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{
  background:var(--bg3);
}
tbody tr.danger-row td{
  background:rgba(239,68,68,0.05);
}
tbody tr.warn-row td{
  background:rgba(245,158,11,0.05);
}
.mono{font-family:'DM Mono',monospace;font-weight:600;}
.text-right{text-align:right;}
.text-center{text-align:center;}
.del-btn{background:none;border:none;color:var(--danger);cursor:pointer;opacity:.55;transition:opacity .15s,background .15s;padding:4px 6px;border-radius:6px;}
.del-btn:hover{opacity:1;background:var(--danger2);}
.del-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.edit-btn{background:none;border:none;color:var(--accent);cursor:pointer;opacity:.55;transition:opacity .15s,background .15s;padding:4px 6px;border-radius:6px;margin-right:4px;}
.edit-btn:hover{opacity:1;background:var(--accent3);}
.edit-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Botones de acción en tabla de facturas — siempre visibles */
#invoice-table-body .edit-btn,
#invoice-table-body .del-btn { opacity: 1; }
.paid-check{accent-color:var(--accent);cursor:pointer;width:15px;height:15px;}
.paid-name{transition:all .2s;}
.paid-name.done{text-decoration:line-through;opacity:.4;}

/* ── CAT TAG ── */
.cat-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;letter-spacing:.3px;white-space:nowrap;}
.cat-dot{width:7px;height:7px;border-radius:50%;}

/* ── INCOME CALENDAR - NEW DESIGN ── */
.income-calendar-header{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px;}
.income-cal-day-header{text-align:center;font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.5px;padding:4px 0;}
.income-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.income-day-cell{
  border-radius:var(--r);
  border:1.5px solid var(--border);
  background:var(--bg3);
  min-height:52px;
  padding:6px 5px 5px;
  cursor:pointer;
  transition:all .18s;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  position:relative;
}
.income-day-cell:hover{border-color:var(--accent2);background:var(--accent3);}
.income-day-cell.has-income{border-color:var(--accent2);background:var(--accent3);}
.income-day-cell.today-cell{border-color:var(--warn);}
.income-day-cell.empty-offset{visibility:hidden;pointer-events:none;}
.income-day-num{font-size:10px;font-weight:800;color:var(--muted);line-height:1;}
.income-day-cell.has-income .income-day-num{color:var(--accent);}
.income-day-amount{font-family:'DM Mono',monospace;font-size:10px;font-weight:700;color:var(--accent);line-height:1;text-align:center;}
.income-day-obs{font-size:8px;color:var(--muted);line-height:1.2;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.income-day-cell.has-income .income-day-obs{color:var(--accent2);}

/* ── INCOME TYPE CHIPS ── */
.income-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px;}
.income-type-chip{padding:8px 6px;border-radius:var(--r);border:1.5px solid var(--border2);background:transparent;color:var(--text2);font-weight:600;font-size:10px;cursor:pointer;transition:all .15s;font-family:inherit;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;}
.income-type-chip.selected{border-color:var(--accent);background:var(--accent3);color:var(--accent);}
.income-type-chip span{font-size:16px;line-height:1;}

/* ── CHART ── */
.chart-container{position:relative;height:220px;}
.chart-legend{display:flex;flex-direction:column;gap:8px;}
.legend-item{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.legend-left{display:flex;align-items:center;gap:8px;font-size:12px;}
.legend-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.legend-right{font-size:11px;color:var(--muted);text-align:right;white-space:nowrap;}
.legend-right strong{display:block;font-size:13px;color:var(--text);font-family:'DM Mono',monospace;font-weight:700;}

/* ── FILTERS ── */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;}
.filter-row input.fi,.filter-row select.fi{flex:1;min-width:100px;padding:8px 12px;font-size:13px;}

/* ── TOAST ── */
#toast{position:fixed;bottom:24px;right:24px;z-index:9999;padding:12px 20px;border-radius:var(--r2);font-weight:700;font-size:14px;box-shadow:var(--shadow3);transform:translateY(80px) scale(.95);opacity:0;transition:all .3s cubic-bezier(.34,1.4,.64,1);pointer-events:none;display:flex;align-items:center;gap:9px;}
#toast.show{transform:none;opacity:1;}
#toast.ok{background:var(--accent);color:#fff;}
#toast.err{background:var(--danger);color:#fff;}
#toast.warn{background:var(--warn);color:#fff;}
#toast svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;}
.modal-box{background:var(--bg2);border-radius:var(--r3);border:1px solid var(--border);padding:28px;width:100%;max-width:480px;box-shadow:var(--shadow3);animation:scaleIn .22s ease;max-height:90vh;overflow-y:auto;}
@keyframes scaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.modal-title{font-size:17px;font-weight:800;margin-bottom:4px;letter-spacing:-.3px;}
.modal-sub{font-size:13px;color:var(--muted);margin-bottom:22px;}
.modal-actions{display:flex;gap:8px;margin-top:20px;}
.btn-cancel{flex:1;padding:11px;border-radius:var(--r);border:1.5px solid var(--border2);background:transparent;color:var(--text2);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;}
.btn-cancel:hover{background:var(--bg3);}
.btn-add{flex:2;padding:11px;border-radius:var(--r);border:none;background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;box-shadow:0 3px 10px rgba(var(--accent-shadow),0.28);transition:all .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(var(--accent-shadow),0.35);}
.btn-add:active{transform:scale(.98);}
.btn-danger{flex:2;padding:11px;border-radius:var(--r);border:none;background:var(--danger);color:#fff;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;}
.btn-danger:hover{background:#a93226;}

/* ── DIVIDER ── */
.divider{height:1px;background:var(--border);margin:4px 0;}

/* ── EMPTY ── */
.empty-state{text-align:center;padding:32px 20px;color:var(--muted);}
.empty-state svg{width:36px;height:36px;stroke:var(--border2);fill:none;stroke-width:1.5;margin-bottom:10px;stroke-linecap:round;stroke-linejoin:round;}
.empty-state p{font-size:13px;}

/* ── CAT MANAGER ── */
.cat-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.cat-pill{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:700;border:1px solid var(--border2);background:var(--bg3);cursor:default;}
.cat-remove{background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;line-height:1;padding:0 0 0 2px;transition:color .15s;}
.cat-remove:hover{color:var(--danger);}

/* ── SYNC ── */
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:5px;animation:blink 2s ease infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ── HEATMAP ── */
.heatmap-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.heatmap-day{height:28px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);cursor:default;transition:transform .1s;}
.heatmap-day:hover{transform:scale(1.15);}
.heatmap-day.has-data{color:#fff;}
.heatmap-day-header{height:20px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--muted);letter-spacing:.5px;}

/* ── SCORE RING ── */
.score-ring-wrap{display:flex;align-items:center;justify-content:center;padding:8px 0;}

/* ── ALERT BANNERS ── */
.alert-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);font-size:13px;font-weight:600;margin-bottom:8px;}
.alert-banner svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.alert-warn{background:var(--warn2);color:var(--warn);border:1px solid rgba(217,119,6,0.25);}
.alert-danger{background:var(--danger2);color:var(--danger);border:1px solid rgba(192,57,43,0.25);}
.alert-ok{background:var(--accent3);color:var(--accent);border:1px solid rgba(var(--accent-shadow),0.2);}
.alert-info{background:var(--info2);color:var(--info);border:1px solid rgba(30,64,175,0.2);}

/* ── DEBT ── */
.debt-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.debt-card-left{display:flex;align-items:center;gap:10px;}
.debt-avatar{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff;flex-shrink:0;}
.debt-name{font-weight:700;font-size:13px;}
.debt-note{font-size:11px;color:var(--muted);}
.debt-amount{font-family:'DM Mono',monospace;font-weight:800;font-size:16px;}

/* ── GOALS ── */
.goal-item{padding:14px;background:var(--bg3);border-radius:var(--r2);border:1px solid var(--border);}
.goal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.goal-name{font-weight:700;font-size:13px;}
.goal-amounts{font-size:11px;color:var(--muted);}

/* ── ACHIEVEMENT TOOLTIP ── */
.achievements-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;
}
.achievement-card{
  position:relative;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r2);padding:14px;text-align:center;transition:all .2s;height:100%;
}
.achievement-card.unlocked{border-color:var(--accent);background:var(--accent3);}
.achievement-icon{font-size:28px;margin-bottom:6px;display:block;opacity:.3;filter:grayscale(1);}
.achievement-card.unlocked .achievement-icon{opacity:1;filter:none;}
.achievement-name{font-size:11px;font-weight:700;color:var(--text2);}
.achievement-desc{font-size:10px;color:var(--muted);margin-top:2px;}
.ach-info-btn{
  position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--border2);background:var(--bg2);color:var(--muted);
  font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;
  justify-content:center;transition:all .15s;z-index:2;user-select:none;
  font-family:'Instrument Sans',sans-serif;
}
.ach-info-btn:hover{background:var(--info2);border-color:var(--info);color:var(--info);}
#ach-floating-tip{
  position:fixed;background:var(--text);color:var(--bg2);border-radius:var(--r);
  padding:10px 13px;font-size:11px;font-weight:600;line-height:1.55;width:220px;
  text-align:left;pointer-events:none;opacity:0;transition:opacity .18s;z-index:99999;
  box-shadow:0 8px 32px rgba(0,0,0,0.28);
}
#ach-floating-tip.visible{opacity:1;}
#ach-floating-tip .tip-arrow{
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--text);
}
.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}

/* ── STREAK CARDS ── */
.streak-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.streak-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:20px;text-align:center;}
.streak-card-icon{font-size:36px;margin-bottom:8px;}
.streak-card-value{font-size:36px;font-weight:800;font-family:'DM Mono',monospace;line-height:1;}
.streak-card-label{font-size:11px;color:var(--muted);margin-top:4px;font-weight:600;}
.streak-card-sub{font-size:10px;color:var(--muted);margin-top:2px;}

/* ── WEEKLY SUMMARY ── */
.week-bar{display:flex;align-items:flex-end;gap:6px;height:80px;padding:0 2px;}
.week-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:0;position:relative;}
.week-bar-fill{
  width:100%;border-radius:5px 5px 0 0;
  background:linear-gradient(180deg,var(--danger),rgba(192,57,43,0.6));
  min-height:4px;transition:height .45s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.week-bar-fill.today{
  background:linear-gradient(180deg,var(--accent),rgba(4,120,87,0.6));
  box-shadow:0 0 0 2px rgba(var(--accent-shadow),.25);
}
.week-bar-fill:hover{filter:brightness(1.15);cursor:default;}
.week-bar-label{font-size:9px;color:var(--muted);font-weight:700;margin-top:5px;letter-spacing:.2px;}
.week-bar-label.today{color:var(--accent);font-weight:800;}
.week-bar-amount{
  font-size:8px;font-family:'DM Mono',monospace;font-weight:700;
  color:var(--text2);margin-bottom:3px;white-space:nowrap;
  opacity:0;transition:opacity .2s;
}
.week-bar-item:hover .week-bar-amount{opacity:1;}

/* ── DUPLICATE WARNING ── */
.dup-warning{background:var(--warn2);border:1px solid rgba(217,119,6,0.3);border-radius:var(--r);padding:8px 12px;font-size:12px;color:var(--warn);margin-top:6px;display:none;}
.dup-warning.show{display:block;}

/* ── CAT BUDGET ── */
.cat-budget-item{display:flex;flex-direction:column;gap:6px;padding:12px;background:var(--bg3);border-radius:var(--r2);}
.cat-budget-header{display:flex;justify-content:space-between;align-items:center;}
.cat-budget-name{font-size:12px;font-weight:700;}
.cat-budget-amounts{font-size:11px;color:var(--muted);}

/* ── PROJECTION ── */
.projection-box{padding:16px;border-radius:var(--r2);display:flex;align-items:center;gap:14px;}
.projection-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.projection-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;}

/* ── KEYBOARD SHORTCUTS MODAL ── */
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.shortcut-item{display:flex;align-items:center;gap:10px;padding:8px;background:var(--bg3);border-radius:var(--r);}
.kbd{font-family:'DM Mono',monospace;background:var(--bg2);border:1px solid var(--border2);border-radius:5px;padding:2px 7px;font-size:12px;font-weight:700;box-shadow:0 2px 0 var(--border2);}
.shortcut-desc{font-size:12px;color:var(--text2);}

/* ── INCOME TYPE BADGE ── */
.income-type-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:99px;font-size:8px;font-weight:600;}

/* ── NEW: REPORT INSIGHTS ── */
.insight-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;display:flex;align-items:flex-start;gap:12px;}
.insight-icon{font-size:20px;flex-shrink:0;margin-top:1px;}
.insight-title{font-size:12px;font-weight:800;color:var(--text);margin-bottom:2px;}
.insight-body{font-size:11px;color:var(--muted);line-height:1.5;}

/* ── NEW: SAVINGS RATE DISPLAY ── */
.savings-rate-display{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg3);border-radius:var(--r2);border:1px solid var(--border);}
.savings-rate-circle{width:70px;height:70px;flex-shrink:0;}

/* ── MODE TOGGLE SWITCH ── */
.mode-toggle-wrap{padding:8px 10px 14px;}
.mode-toggle{display:flex;align-items:center;gap:0;background:var(--bg3);border-radius:99px;padding:3px;border:1px solid var(--border);position:relative;cursor:pointer;user-select:none;}
.mode-toggle-label{flex:1;text-align:center;padding:7px 6px;font-size:11px;font-weight:700;color:var(--muted);z-index:1;transition:color .25s;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px;}
.mode-toggle-label.active{color:var(--bg2);}
.mode-toggle-slider{position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:99px;background:linear-gradient(135deg,var(--accent),var(--accent-deep));transition:left .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px rgba(var(--accent-shadow),0.3);}
.mode-toggle[data-mode="empresa"] .mode-toggle-slider{left:calc(50%);}
[data-mode="empresa"] .mode-toggle-slider,
.mode-toggle.empresa .mode-toggle-slider{left:calc(50%);background:linear-gradient(135deg,#1e40af,#2563eb);box-shadow:0 2px 8px rgba(37,99,235,0.3);}

/* ── MOBILE MENU ── */
.mobile-menu-btn{width:36px;height:36px;border-radius:var(--r);border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;font-family:inherit;}
.mobile-menu-btn:hover{background:var(--accent3);border-color:var(--accent);color:var(--accent);}
.mobile-menu-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.mobile-drawer{position:fixed;top:0;left:-280px;width:280px;height:100vh;background:var(--bg2);border-right:1px solid var(--border);z-index:1001;transition:left .3s ease;overflow-y:auto;}
.mobile-drawer.open{left:0;box-shadow:2px 0 16px rgba(0,0,0,0.15);}
.mobile-drawer-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;opacity:0;visibility:hidden;transition:all .3s ease;}
.mobile-drawer-overlay.show{opacity:1;visibility:visible;}
.mobile-drawer-header{padding:22px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.mobile-drawer-close{width:32px;height:32px;border-radius:var(--r);border:none;background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.mobile-drawer-close:hover{background:var(--bg3);color:var(--text);}
.mobile-drawer-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.mobile-drawer-content{padding:16px;}
.mobile-drawer-user{display:flex;align-items:center;gap:12px;padding:16px;background:var(--bg3);border-radius:var(--r);margin-bottom:16px;}
.mobile-drawer-nav{display:flex;flex-direction:column;gap:6px;}
.mobile-drawer-nav-title{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:1px;text-transform:uppercase;padding:14px 0 6px;}
.mobile-drawer-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px;}

@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){
  #app.visible{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .two-col,.three-col,.four-col{grid-template-columns:1fr;}
  .content{padding:16px;}
  .topbar{padding:12px 16px;}
  .mobile-menu-btn{display:flex !important;}
  .topbar-left{gap:12px;}
}

/* ══════════════════════════════════════════════
   PERSONAL: CASH FLOW & ENVELOPES
══════════════════════════════════════════════ */
.cashflow-day{
  border-radius:var(--r);border:1.5px solid var(--border);background:var(--bg3);
  min-height:58px;padding:6px 5px 5px;cursor:pointer;transition:all .18s;
  display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;
}
.cashflow-day:hover{border-color:var(--accent2);background:var(--accent3);}
.cashflow-day.has-income{border-color:var(--accent);}
.cashflow-day.has-expense{border-color:var(--danger);}
.cashflow-day.has-both{border-color:var(--warning);}
.cashflow-day.today-cell{box-shadow:0 0 0 2px var(--accent);}
.cashflow-day-num{font-size:10px;font-weight:800;color:var(--muted);line-height:1;}
.cashflow-day.has-income .cashflow-day-num,.cashflow-day.has-both .cashflow-day-num{color:var(--text);}
.cashflow-in{font-size:9px;font-weight:700;color:var(--accent);font-family:'DM Mono',monospace;line-height:1.2;}
.cashflow-out{font-size:9px;font-weight:700;color:var(--danger);font-family:'DM Mono',monospace;line-height:1.2;}
.cashflow-bar-wrap{width:100%;height:3px;border-radius:2px;background:var(--bg4);overflow:hidden;margin-top:2px;}
.cashflow-bar-in{height:100%;background:var(--accent);border-radius:2px;}
.fixed-expense-item{
  display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-radius:var(--r2);border:1px solid var(--border);background:var(--bg3);
  transition:all .15s;
}
.fixed-expense-item:hover{border-color:var(--border2);background:var(--bg4);}
.fixed-expense-due{
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:99px;
  white-space:nowrap;
}
.due-ok{background:var(--accent3);color:var(--accent);}
.due-soon{background:var(--warning2);color:var(--warning);}
.due-today{background:var(--danger2);color:var(--danger);}
.due-passed{background:var(--bg4);color:var(--muted);}
.envelope-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:16px;transition:all .2s;position:relative;overflow:hidden;
}
.envelope-card::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-radius:4px 0 0 4px;
}
.envelope-card.over::before{background:linear-gradient(180deg,var(--danger),#a93226);}
.envelope-card.warning::before{background:linear-gradient(180deg,var(--warning),#d97706);}
.envelope-name{font-weight:800;font-size:13px;margin-bottom:2px;}
.envelope-amounts{font-size:11px;color:var(--muted);font-family:'DM Mono',monospace;margin-bottom:8px;}
.emerg-ring-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 0;}

/* ══════════════════════════════════════════════
   ENTERPRISE: P&L / INVOICE / COST CENTERS
══════════════════════════════════════════════ */
.pnl-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 16px;border-radius:var(--r);font-size:13px;
}
.pnl-row.section-header{
  background:var(--bg3);font-weight:800;font-size:12px;
  color:var(--text2);text-transform:uppercase;letter-spacing:.5px;
  margin-top:8px;border:1px solid var(--border);
}
.pnl-row.total-row{
  background:var(--accent3);font-weight:800;font-size:14px;
  color:var(--accent);border:1px solid rgba(var(--accent-shadow),.2);margin-top:4px;
}
.pnl-row.total-row.negative{background:var(--danger2);color:var(--danger);border-color:rgba(var(--danger-shadow),.2);}
.pnl-row.subtotal{font-weight:700;background:var(--bg4);border:1px solid var(--border);}
.pnl-row.indent{padding-left:28px;font-size:12px;color:var(--text2);}
.pnl-amount{font-family:'DM Mono',monospace;font-weight:700;}
.invoice-item{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-radius:var(--r2);border:1px solid var(--border);background:var(--bg3);
  transition:all .15s;
}
.invoice-item:hover{border-color:var(--border2);}
.invoice-status{
  padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;
  white-space:nowrap;flex-shrink:0;
}
.inv-pending{background:var(--warning2);color:var(--warning);}
.inv-paid{background:var(--accent3);color:var(--accent);}
.inv-overdue{background:var(--danger2);color:var(--danger);}
.inv-partial{background:var(--info2);color:var(--info);}
.cost-center-card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  padding:16px;
}
.cc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cc-name{font-weight:800;font-size:13px;}
.cc-badge{padding:3px 9px;border-radius:99px;font-size:10px;font-weight:700;}
.product-margin-row{
  display:flex;align-items:center;gap:12px;padding:10px 14px;
  border-radius:var(--r2);border:1px solid var(--border);background:var(--bg3);
}
.margin-pill{
  padding:4px 10px;border-radius:99px;font-size:11px;font-weight:800;
  font-family:'DM Mono',monospace;white-space:nowrap;
}
.margin-good{background:var(--accent3);color:var(--accent);}
.margin-ok{background:var(--info2);color:var(--info);}
.margin-warn{background:var(--warning2);color:var(--warning);}
.margin-bad{background:var(--danger2);color:var(--danger);}
.liquidity-gauge{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px;background:var(--bg3);border-radius:var(--r2);
  border:1px solid var(--border);text-align:center;
}
.gauge-value{font-size:28px;font-weight:800;font-family:'DM Mono',monospace;line-height:1;}
.gauge-label{font-size:11px;color:var(--muted);font-weight:600;}
.gauge-sub{font-size:10px;color:var(--muted);}
.breakeven-box{
  padding:20px;border-radius:var(--r2);background:var(--bg3);
  border:1px solid var(--border);
}
.be-amount{font-size:32px;font-weight:800;font-family:'DM Mono',monospace;line-height:1;margin:8px 0;}
.period-tab-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.period-tab{
  padding:6px 14px;border-radius:99px;border:1.5px solid var(--border2);
  background:transparent;color:var(--text2);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .15s;font-family:inherit;
}
.period-tab.active{
  background:var(--accent3);border-color:var(--accent);color:var(--accent);
}
.mode-only-personal{display:block;}
.mode-only-empresa{display:none;}
[data-mode="empresa"] .mode-only-personal{display:none;}
[data-mode="empresa"] .mode-only-empresa{display:block;}
.nav-mode-personal,.nav-mode-empresa{display:none;}
[data-mode="personal"] .nav-mode-personal{display:flex;}
[data-mode="empresa"] .nav-mode-empresa{display:flex;}

/* ── INFO TOOLTIP SYSTEM ── */
.info-tip-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  border:2px solid #b8860b;background:#fbbf24;
  color:#1a1100;font-size:10px;font-weight:900;
  cursor:pointer;flex-shrink:0;transition:all .15s;
  font-family:'Instrument Sans',sans-serif;line-height:1;
  vertical-align:middle;margin-left:6px;padding:0;
  user-select:none;position:relative;top:-1px;
  box-shadow:0 1px 4px rgba(251,191,36,0.4);
}
.info-tip-btn:hover{
  background:#f59e0b;border-color:#92400e;color:#000;
  transform:scale(1.2);
  box-shadow:0 2px 8px rgba(251,191,36,0.6);
}
#info-floating-tip{
  position:fixed;background:var(--text);color:var(--bg2);
  border-radius:var(--r2);padding:11px 14px;font-size:11px;
  font-weight:500;line-height:1.6;width:260px;max-width:90vw;
  text-align:left;pointer-events:none;opacity:0;
  transition:opacity .18s,transform .18s;z-index:99999;
  box-shadow:0 8px 32px rgba(0,0,0,0.28);
  transform:translateY(4px);
}
#info-floating-tip.visible{opacity:1;transform:translateY(0);}
#info-floating-tip strong{display:block;font-size:12px;font-weight:800;margin-bottom:4px;opacity:1;}
#info-floating-tip .tip-arrow{
  position:absolute;left:50%;transform:translateX(-50%);
  border:5px solid transparent;
}
#info-floating-tip .tip-arrow.up{top:100%;border-top-color:var(--text);}
#info-floating-tip .tip-arrow.down{bottom:100%;border-bottom-color:var(--text);}

/* ── ONBOARDING ── */
.ob-tip-item{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;background:var(--bg3);border-radius:var(--r);font-size:12px;color:var(--text2);line-height:1.5;}
.ob-tip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.ob-dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:all .3s;}
.ob-dot.active{width:24px;border-radius:4px;background:var(--accent);}

/* ── EMPTY STATES ── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;text-align:center;gap:12px;
}
.empty-state-icon{
  width:56px;height:56px;border-radius:16px;
  background:var(--bg3);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
}
.empty-state-icon svg{width:24px;height:24px;stroke:var(--muted);fill:none;stroke-width:1.5;}
.empty-state-title{font-size:14px;font-weight:800;color:var(--text);}
.empty-state-desc{font-size:12px;color:var(--muted);max-width:260px;line-height:1.6;}
.empty-state-btn{
  margin-top:4px;padding:9px 20px;border-radius:var(--r2);border:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:#fff;font-size:12px;font-weight:700;cursor:pointer;
  font-family:inherit;box-shadow:var(--shadow-accent);transition:all .15s;
}
.empty-state-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--accent-shadow),.25);}

/* ── STAT CARD FORMULA HINT ── */
.stat-formula{
  font-size:9px;color:var(--muted);font-weight:500;margin-top:1px;
  font-family:'DM Mono',monospace;letter-spacing:.2px;opacity:.75;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ── PERIOD COMPLETENESS BAR ── */
.period-completeness{
  display:flex;align-items:center;gap:14px;padding:12px 16px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);
  margin-bottom:0;
}
.period-completeness-label{font-size:11px;font-weight:700;color:var(--text2);white-space:nowrap;}
.period-completeness-bar{flex:1;height:8px;background:var(--bg4);border-radius:4px;overflow:hidden;}
.period-completeness-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-light));transition:width .5s ease;}
.period-completeness-pct{font-size:11px;font-weight:800;color:var(--accent);font-family:'DM Mono',monospace;white-space:nowrap;}
.period-completeness-items{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
.pci-item{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted);}
.pci-dot{width:6px;height:6px;border-radius:50%;}

/* ── SAVE CONFIRMATION ANIMATION ── */
@keyframes saveCheck {
  0% { transform: scale(0.5) rotate(-10deg); opacity:0; }
  60% { transform: scale(1.15) rotate(3deg); opacity:1; }
  100% { transform: scale(1) rotate(0deg); opacity:1; }
}
.save-confirm-flash {
  animation: saveCheck 0.4s ease forwards;
}
#sync-dot.synced { background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-shadow),.2); }
#sync-dot.saving { background: var(--warning); box-shadow: 0 0 0 3px rgba(var(--warning-shadow),.2); }
#sync-dot.error  { background: var(--danger);  box-shadow: 0 0 0 3px rgba(var(--danger-shadow),.2);  }

/* ── COMPRA DE LICENCIA MP ─────────────────────────────── */

/* ── Botón comprar licencia ── */
.btn-buy-license {
  width: 100%;
  padding: 0 16px;
  height: 54px;
  margin-top: 8px;
  border-radius: var(--r2);
  border: 1.5px solid var(--border2);
  background: var(--bg3);
  color: var(--text2);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .2s;
}
.btn-buy-license:hover {
  border-color: var(--accent);
  background: var(--accent3);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(var(--accent-shadow), .2);
}
.btn-buy-license:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════════════════════════════
   MFP UI Refresh — Additional Refinements
═══════════════════════════════════════════════════════ */

/* Dark mode card separation — subtle border glow on active accent */
[data-theme="dark"] .card {
  border-color: rgba(255,255,255,0.07);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .stat-card {
  border-color: rgba(255,255,255,0.07);
}
[data-theme="dark"] .nav-item.active {
  box-shadow: inset 0 0 0 1.5px rgba(var(--accent-shadow),0.35);
}

/* Light mode cards — very subtle top border for depth */
[data-theme=""] .card, :root .card {
  border-top: 1.5px solid var(--bg2);
}

/* Selection color matches accent */
::selection {
  background: rgba(var(--accent-shadow), 0.2);
  color: var(--text);
}

/* Font rendering - using browser defaults for sharpness */

/* Empresa mode — blue tint on sidebar logo and user avatar */
[data-mode="empresa"] .sidebar-logo-icon,
[data-mode="empresa"] .user-avatar,
[data-mode="empresa"] .ls-icon,
[data-mode="empresa"] .auth-logo-icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
}

/* Period tabs — more pill style */
.period-tab {
  border-radius: 99px !important;
  font-size: 12px !important;
  padding: 6px 14px !important;
}
.period-tab.active {
  font-weight: 700 !important;
}

/* Input placeholder opacity */
input.fi::placeholder, textarea.fi::placeholder, .form-input::placeholder {
  opacity: 0.55;
}

/* Soft focus ring */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Table header — better contrast */
table th {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  background: var(--bg3) !important;
  padding: 10px 14px !important;
}

/* Table rows */
table td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
}

table tr:last-child td {
  border-bottom: none !important;
}

table tr:hover td {
  background: var(--bg3);
  transition: background .1s;
}

/* danger-row */
tr.danger-row td {
  background: rgba(239,68,68,0.04) !important;
}

[data-theme="dark"] tr.danger-row td {
  background: rgba(248,113,113,0.07) !important;
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* Card header separator */
.card-header {
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

/* Score ring - no filter to avoid text bleeding */


/* ── Botón Mercado Pago ── */
.btn-buy-license.btn-mp {
  background: linear-gradient(135deg, #ffe600, #f5c800) !important;
  color: #1a1a1a !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(255,230,0,.4) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  gap: 10px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

.btn-buy-license.btn-mp:hover {
  background: linear-gradient(135deg, #ffed00, #ffd000) !important;
  color: #1a1a1a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,230,0,.5) !important;
}

.btn-buy-license.btn-mp img {
  filter: none;
  height: 55px !important;
  width: auto !important;
  margin-right: 8px !important;
  flex-shrink: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — Revisión completa
   Breakpoints: 768px (tablet), 480px (móvil), 360px (small)
═══════════════════════════════════════════════════════════ */

/* ── Base: prevenir overflow horizontal ── */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}
*, *::before, *::after {
  max-width: 100%;
}

/* ── TABLET (≤ 768px) ── */
@media (max-width: 768px) {

  /* Auth */
  .auth-card { padding: 28px 20px; }
  .auth-logo { margin-bottom: 24px; }
  .auth-logo-name { font-size: 16px; }

  /* Stats grid — 2 columnas */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-card { padding: 16px; }
  .stat-value { font-size: 22px; }

  /* Topbar */
  .topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .page-title { font-size: 16px; }
  .month-label { font-size: 12px; min-width: 110px; }
  .topbar-actions { gap: 6px; }

  /* Content */
  .content { padding: 14px 12px; gap: 16px; }

  /* Grids */
  .two-col, .three-col, .four-col { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.g3 { grid-template-columns: 1fr 1fr; }

  /* Tables — scroll horizontal */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 540px; }
  table th, table td { padding: 8px 10px !important; font-size: 12px !important; }

  /* Cards */
  .card-header { padding: 14px 16px 0; }
  .card-body { padding: 12px 16px 16px; }
  .modal-card, .modal-box { padding: 20px 16px; max-width: 100%; }

  /* Achievements — 4 cols tablet */
  .ach-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; }

  /* P&L */
  .pnl-row { padding: 7px 10px; font-size: 12px; }
  .pnl-row.indent { padding-left: 18px; }

  /* Invoice items */
  .invoice-item { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }

  /* Period tab row */
  .period-tab-row { gap: 4px; }
  .period-tab { padding: 5px 10px; font-size: 11px; }

  /* Month nav */
  .month-nav button { width: 26px; height: 26px; }

  /* Gauge */
  .gauge-value { font-size: 22px; }
  .be-amount { font-size: 24px; }

  /* Modals width */
  .modal-overlay { padding: 12px; }

  /* Period completeness */
  .period-completeness { flex-wrap: wrap; gap: 8px; }
  .period-completeness-label { font-size: 10px; }
}

/* ── MÓVIL (≤ 480px) ── */
@media (max-width: 480px) {

  /* Auth */
  #auth-screen { padding: 12px; align-items: flex-start; padding-top: 40px; }
  .auth-card { padding: 24px 16px; border-radius: 16px; }
  .auth-logo { flex-direction: column; text-align: center; gap: 10px; margin-bottom: 20px; }
  .auth-logo-icon { width: 48px; height: 48px; }
  .auth-logo-name { font-size: 18px; }
  .auth-tabs { margin-bottom: 18px; }
  .form-group { margin-bottom: 12px; }
  .form-input { font-size: 16px; } /* Evita zoom en iOS */

  /* Botón comprar acceso */
  .btn-buy-license { font-size: 12px; height: 46px; }
  .btn-buy-license.btn-mp { font-size: 12px; }

  /* Stats — 2 columnas chicas */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 12px; }
  .stat-card-icon { width: 36px; height: 36px; margin-bottom: 10px; }
  .stat-value { font-size: 20px; letter-spacing: -0.5px; }
  .stat-label { font-size: 10px; }
  .stat-delta { font-size: 9px; padding: 2px 6px; }

  /* Topbar */
  .topbar { padding: 10px 12px; }
  .page-title { font-size: 15px; letter-spacing: -0.3px; }
  .month-label { font-size: 12px; min-width: 100px; }
  .page-version { display: none; }

  /* Content */
  .content { padding: 12px 10px; gap: 12px; }

  /* Tables */
  table { min-width: 480px; }
  table th, table td { padding: 7px 8px !important; font-size: 11px !important; }

  /* Cards */
  .card-header { padding: 12px 14px 0; }
  .card-body { padding: 10px 14px 14px; }
  .card-title { font-size: 13px; }

  /* Modals */
  .modal-overlay { padding: 8px; align-items: flex-end; }
  .modal-card, .modal-box {
    border-radius: 20px 20px 0 0;
    padding: 20px 16px 28px;
    max-height: 85vh;
    margin-bottom: 0;
  }

  /* Achievements — 3 cols mobile */
  .ach-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
  .achievement-card { min-height: 72px !important; padding: 8px 4px !important; }
  .ach-icon-wrap { font-size: 20px !important; }
  .ach-name { font-size: 8px !important; }

  /* Invoice items — stack vertical */
  .invoice-item { flex-direction: column; align-items: flex-start; gap: 6px; }
  .invoice-item > div:last-child { width: 100%; display: flex; justify-content: flex-end; }

  /* Fixed expense items */
  .fixed-expense-item { flex-wrap: wrap; padding: 8px 10px; gap: 6px; }

  /* Cashflow grid */
  .cashflow-day { min-height: 48px; padding: 4px 3px; }
  .cashflow-in, .cashflow-out { font-size: 8px; }
  .cashflow-day-num { font-size: 9px; }

  /* Envelopes */
  .envelope-card { padding: 12px; }

  /* P&L */
  .pnl-row { padding: 6px 8px; font-size: 11px; }
  .pnl-row.indent { padding-left: 14px; }

  /* Period tabs */
  .period-tab { padding: 4px 8px; font-size: 10px; }

  /* Reauth card */
  .reauth-card { padding: 24px 16px; }
  .reauth-actions { flex-direction: column; }

  /* License banner */
  #license-banner { font-size: 11px; padding: 10px 14px; }

  /* User card sidebar (drawer) */
  .mobile-drawer { width: 260px; }

  /* Form grids */
  .form-grid.g3 { grid-template-columns: 1fr; }

  /* Breakeven */
  .be-amount { font-size: 20px; }

  /* Gauge */
  .gauge-value { font-size: 20px; }

  /* Period completeness */
  .period-completeness { padding: 10px 12px; }

  /* Cost center cards */
  .cost-center-card { padding: 12px; }
  .product-margin-row { flex-wrap: wrap; gap: 6px; padding: 8px 10px; }

  /* Empty states */
  .empty-state { padding: 28px 16px; }

  /* Topbar month nav */
  .month-nav { gap: 4px; }
  .month-nav button { width: 24px; height: 24px; }
  .month-nav button svg { width: 12px; height: 12px; }

  /* Floating tip */
  #info-floating-tip { width: 220px; font-size: 10px; }

  /* Table wrap — full bleed en mobile */
  .table-wrap { border-radius: 10px; margin: 0 -2px; }
}

/* ── SMALL (≤ 360px) ── */
@media (max-width: 360px) {

  .auth-card { padding: 20px 14px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-value { font-size: 18px; }
  .content { padding: 10px 8px; }
  .topbar { padding: 8px 10px; }
  .page-title { font-size: 14px; }
  .month-label { min-width: 88px; font-size: 11px; }
  table th, table td { padding: 6px 6px !important; font-size: 10px !important; }
  .ach-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .btn-buy-license { height: 44px; font-size: 11px; }
  .card-header { padding: 10px 12px 0; }
  .card-body { padding: 8px 12px 12px; }
}

/* ── FIX: prevenir que textos monospace se salgan ── */
.pnl-amount,
.stat-value,
.user-email,
[style*="DM Mono"],
[style*="monospace"] {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── FIX: tablas con nombres largos ── */
td .truncate,
.user-name,
.invoice-item .name-cell {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── FIX: botones de acción en tablas no se salen ── */
@media (max-width: 480px) {
  .tbl-btn, .edit-btn, .del-btn {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
  }
  .tbl-btn span { display: none; }
}

/* ── FIX: modales de pago en mobile ── */
@media (max-width: 480px) {
  #mp-payment-modal > div,
  #mp-history-modal > div {
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    align-self: flex-end !important;
  }
  #mp-payment-modal,
  #mp-history-modal {
    align-items: flex-end !important;
  }
}

/* ══════════════════════════════════════════════
   MEJORAS v2 — Bottom Nav, FAB, Search, Skeleton,
   Animaciones, Touch Targets, Info Tips mejorados
══════════════════════════════════════════════ */

/* ── CARD ENTRANCE ANIMATION ── */
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.card-anim { animation: cardSlideIn 0.3s cubic-bezier(0.4,0,0.2,1) both; }
.card-anim:nth-child(1) { animation-delay: 0.03s; }
.card-anim:nth-child(2) { animation-delay: 0.07s; }
.card-anim:nth-child(3) { animation-delay: 0.11s; }
.card-anim:nth-child(4) { animation-delay: 0.15s; }
.card-anim:nth-child(5) { animation-delay: 0.19s; }
.card-anim:nth-child(6) { animation-delay: 0.23s; }

/* ── SKELETON LOADERS ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r);
}
.skeleton-text    { height: 14px; border-radius: 4px; margin-bottom: 8px; }
.skeleton-title   { height: 22px; width: 60%; border-radius: 4px; margin-bottom: 12px; }
.skeleton-value   { height: 32px; width: 75%; border-radius: 6px; margin-bottom: 8px; }
.skeleton-badge   { height: 20px; width: 50px; border-radius: 99px; }
.skeleton-card    {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.skeleton-bar {
  height: 180px; border-radius: var(--r2);
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.skeleton-avatar {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
}
.skeleton-lines { flex: 1; }

/* ── FLOAT ACTION BUTTON (FAB) ── */
#fab-container {
  position: fixed;
  bottom: 100px;
  right: 22px;
  z-index: 800;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
#fab-container.visible { display: flex; }
.fab-option {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 50px;
  padding: 10px 16px 10px 12px;
  box-shadow: var(--shadow3);
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  transition: all var(--transition-fast);
  animation: fabOptionIn 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes fabOptionIn {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.fab-option:nth-child(1) { animation-delay: 0.05s; }
.fab-option:nth-child(2) { animation-delay: 0.1s; }
.fab-option-icon {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fab-option-icon svg {
  width: 14px; height: 14px; stroke: #fff;
  fill: none; stroke-width: 2.5; stroke-linecap: round;
}
.fab-option.income-opt .fab-option-icon { background: linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.fab-option.expense-opt .fab-option-icon { background: linear-gradient(135deg, #c0392b, #a93226); }
.fab-option:hover { transform: translateX(-4px); box-shadow: var(--shadow3); }
#fab-main {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(var(--accent-shadow), 0.4);
  transition: all var(--transition-fast);
  position: relative;
  flex-shrink: 0;
}
#fab-main svg {
  width: 19px; height: 19px; stroke: #fff; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s ease;
}
#fab-main:hover { transform: scale(1.08); box-shadow: 0 8px 28px rgba(var(--accent-shadow), 0.5); }
#fab-main.open svg { transform: rotate(45deg); }
#fab-backdrop {
  position: fixed; inset: 0; z-index: 799;
  background: rgba(0,0,0,0.25); backdrop-filter: blur(2px);
  display: none;
}
#fab-backdrop.show { display: block; }

/* ── GLOBAL SEARCH ── */
#search-modal {
  position: fixed; inset: 0; z-index: 5000;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 60px 16px 16px;
}
#search-modal.show { display: flex; }
.search-box {
  background: var(--bg2); border-radius: var(--r3);
  border: 1px solid var(--border2); box-shadow: var(--shadow4);
  width: 100%; max-width: 560px;
  animation: searchBoxIn 0.22s cubic-bezier(0.34,1.4,0.64,1);
  overflow: hidden;
}
@keyframes searchBoxIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.search-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.search-header svg {
  width: 18px; height: 18px; stroke: var(--muted);
  fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0;
}
#search-input {
  flex: 1; border: none; background: transparent; font-family: inherit;
  font-size: 15px; color: var(--text); font-weight: 500;
  outline: none;
}
#search-input::placeholder { color: var(--muted); }
.search-close {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: var(--bg3); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; transition: all 0.15s; flex-shrink: 0;
}
.search-close:hover { background: var(--bg4); color: var(--text); }
.search-close svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.search-results { max-height: 400px; overflow-y: auto; padding: 8px; }
.search-hint-text {
  padding: 24px 16px; text-align: center;
  font-size: 13px; color: var(--muted); font-weight: 600;
}
.search-hint-text svg {
  display: block; margin: 0 auto 10px;
  width: 28px; height: 28px; stroke: var(--border2);
  fill: none; stroke-width: 1.5; stroke-linecap: round;
}
.search-result-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r2); cursor: pointer;
  transition: all 0.12s; border: 1px solid transparent;
}
.search-result-item:hover {
  background: var(--bg3); border-color: var(--border);
}
.search-result-icon {
  width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.search-result-icon svg {
  width: 16px; height: 16px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round;
}
.search-result-info { flex: 1; min-width: 0; }
.search-result-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-sub {
  font-size: 11px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-result-amount {
  font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 700;
  white-space: nowrap;
}
.search-no-results {
  padding: 32px 16px; text-align: center;
  font-size: 13px; color: var(--muted);
}
.search-section-title {
  font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1px;
  text-transform: uppercase; padding: 8px 12px 4px;
}
.search-shortcut {
  padding: 10px 16px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--muted);
}
.search-shortcut .kbd { font-size: 10px; }

/* ── BOTTOM NAV (MOBILE ONLY) ── */
#bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
  background: var(--bg2); border-top: 1px solid var(--border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.bnav-items {
  display: flex; align-items: stretch; justify-content: space-around;
  max-width: 480px; margin: 0 auto;
}
.bnav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; padding: 6px 4px;
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-family: inherit;
  transition: color 0.15s; min-height: 44px;
  border-radius: var(--r2); position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bnav-item svg {
  width: 20px; height: 20px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.15s, transform 0.15s;
}
.bnav-item span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
  transition: color 0.15s;
}
.bnav-item.active { color: var(--accent); }
.bnav-item.active svg { transform: translateY(-1px); }
.bnav-item:active svg { transform: scale(0.88); }
.bnav-badge {
  position: absolute; top: 4px; right: calc(50% - 16px);
  background: var(--danger); color: #fff;
  border-radius: 99px; min-width: 14px; height: 14px;
  font-size: 8px; font-weight: 800; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg2);
}

/* Show bottom nav and adjust content on mobile */
@media (max-width: 900px) {
  #bottom-nav { display: block; }
  #fab-container { display: flex; }
  /* Add padding to main content so it's not hidden behind bottom nav */
  .main { padding-bottom: 64px; }
  /* Adjust toast position to not overlap bottom nav */
  #toast { bottom: 80px; }
  /* Adjust search modal top position on mobile */
  #search-modal { padding-top: 20px; }
}

/* ── IMPROVED INFO TIP BUTTONS ── */
.info-tip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--border2);
  background: var(--bg3); color: var(--muted);
  font-size: 9px; font-weight: 900; cursor: pointer;
  margin-left: 6px; transition: all 0.15s;
  font-family: 'Instrument Sans', sans-serif;
  vertical-align: middle; flex-shrink: 0; line-height: 1;
  padding: 0; outline: none;
}
.info-tip-btn:hover, .info-tip-btn:focus {
  background: var(--info2); border-color: var(--info);
  color: var(--info); transform: scale(1.15);
}
/* Updated floating tip with better styles */
#info-floating-tip {
  position: fixed; z-index: 99999;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border2);
  border-radius: var(--r2); padding: 12px 14px;
  font-size: 12px; font-weight: 500; line-height: 1.6;
  width: 260px; max-width: calc(100vw - 24px);
  pointer-events: none; opacity: 0;
  transition: opacity 0.18s;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
}
#info-floating-tip.visible { opacity: 1; }
#info-floating-tip strong {
  display: block; font-size: 12px; font-weight: 800;
  color: var(--accent); margin-bottom: 5px; letter-spacing: -0.1px;
}
#info-floating-tip .tip-arrow {
  position: absolute; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
}
#info-floating-tip .tip-arrow.up {
  top: 100%; border-top-color: var(--border2);
}
#info-floating-tip .tip-arrow.down {
  bottom: 100%; border-bottom-color: var(--border2);
}

/* ── CONTEXT MENU (PC) ── */
#ctx-menu {
  position: fixed; z-index: 9998;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--r2); box-shadow: var(--shadow4);
  padding: 6px; min-width: 160px;
  animation: ctxIn 0.14s ease;
  display: none;
}
#ctx-menu.show { display: block; }
@keyframes ctxIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--r); cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text);
  transition: all 0.12s; border: none; background: none;
  width: 100%; text-align: left; font-family: inherit;
}
.ctx-item:hover { background: var(--bg3); }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:hover { background: var(--danger2); }
.ctx-item svg {
  width: 14px; height: 14px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0;
}
.ctx-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── IMPROVED TOUCH TARGETS ── */
@media (max-width: 900px) {
  /* All interactive elements ≥ 44px */
  .nav-item, .bnav-item, .btn-primary, .btn-secondary,
  .btn-submit, .btn-add, .btn-cancel, .btn-ghost, .btn-outline,
  .auth-tab { min-height: 44px; }

  .tbl-btn, .edit-btn, .del-btn {
    width: 34px !important; height: 34px !important;
  }

  /* Stat cards — better mobile touch area */
  .stat-card { padding: 16px; cursor: pointer; }

  /* Form inputs — prevent zoom on iOS, good touch height */
  input.fi, select.fi, textarea.fi,
  .form-input { font-size: 16px !important; min-height: 44px; }

  /* Month nav buttons bigger */
  .month-nav button { width: 36px; height: 36px; }

  /* Info tip buttons — bigger hit area on mobile */
  .info-tip-btn { width: 22px; height: 22px; font-size: 10px; }

  /* Tables — better row tap targets */
  table td, table th { padding: 12px 10px !important; }
}

/* ── IMPROVED MOBILE FONT SIZES ── */
@media (max-width: 480px) {
  /* Fix tiny text sizes */
  .stat-label    { font-size: 12px !important; letter-spacing: 0; }
  .stat-formula  { font-size: 10px; }
  .stat-hint     { font-size: 11px; }
  .stat-delta    { font-size: 10px; }
  .card-title    { font-size: 14px; }
  .card-badge    { font-size: 10px; }

  /* Achievement names */
  .ach-name, .achievement-name { font-size: 10px !important; }

  /* Table cells */
  table th, table td { font-size: 12px !important; }

  /* Cashflow grid */
  .cashflow-in, .cashflow-out { font-size: 9px; }
  .cashflow-day-num { font-size: 10px; }

  /* Income day amount */
  .income-day-amount { font-size: 11px; }

  /* P&L rows */
  .pnl-row { font-size: 12px; }

  /* Period tab */
  .period-tab { font-size: 11px; padding: 6px 10px; }

  /* Insight cards */
  .insight-title { font-size: 13px; }
  .insight-body  { font-size: 12px; }
}

/* ── SEARCH TRIGGER BUTTON (TOPBAR) ── */
#btn-search {
  display: flex;
}
#btn-search svg {
  width: 15px; height: 15px; stroke: currentColor;
  fill: none; stroke-width: 2; stroke-linecap: round;
}

/* ── STAT CARD ANIMATED BORDER ── */
.stat-card::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 16px; opacity: 0;
  background: linear-gradient(135deg, rgba(var(--accent-shadow),0.08), transparent);
  transition: opacity 0.25s;
  pointer-events: none;
}
.stat-card:hover::after { opacity: 1; }

/* ── TABLE ROW HOVER ── */
tbody tr {
  transition: background 0.12s;
}
tbody tr:hover td {
  background: var(--bg3);
}

/* ── SMOOTH SCROLL FOR CONTENT ── */
.content { scroll-behavior: smooth; }

/* ── BETTER NAV ITEM ACTIVE INDICATOR ── */
.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-item { position: relative; }

/* ── TOPBAR SEARCH BAR (DESKTOP) ── */
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--r2); padding: 7px 12px;
  cursor: pointer; transition: all 0.15s;
  min-width: 180px; max-width: 280px;
}
.topbar-search:hover {
  border-color: var(--accent); background: var(--bg2);
}
.topbar-search svg {
  width: 14px; height: 14px; stroke: var(--muted);
  fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0;
}
.topbar-search-text {
  font-size: 13px; color: var(--muted); flex: 1;
}
.topbar-search-kbd {
  font-size: 10px; color: var(--muted); font-family: 'DM Mono', monospace;
  background: var(--bg4); border-radius: 4px; padding: 1px 5px;
  border: 1px solid var(--border2); white-space: nowrap;
}
@media (max-width: 900px) {
  .topbar-search { display: none; }
}

/* ── BOTTOM NAV + MAIN PADDING ADJUSTMENTS ── */
@media (max-width: 900px) {
  /* Raise FAB above bottom nav and WhatsApp floating button */
  #fab-container { bottom: 150px; }
}

/* ── SMOOTH PAGE TRANSITIONS ── */
#view-dashboard, #view-income, #view-expenses, #view-debts,
#view-goals, #view-reports, #view-cashflow, #view-envelopes,
#view-pnl, #view-invoices, #view-costcenters,
#view-achievements, #view-settings {
  animation: contentFadeIn 0.2s ease;
}
@keyframes contentFadeIn {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* ── SWIPE HINT INDICATOR (MOBILE) ── */
.swipe-hint {
  display: none;
  text-align: center; font-size: 11px; color: var(--muted);
  padding: 4px; font-weight: 600;
}
@media (max-width: 900px) {
  .swipe-hint { display: block; }
}

/* ── IMPROVED EMPTY STATE ── */
.empty-state svg { width: 48px; height: 48px; stroke: var(--bg4); }
.empty-state h3 { font-size: 15px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.empty-state p { font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ── BOTTOM NAV SAFE AREA SUPPORT ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #bottom-nav {
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  @media (max-width: 900px) {
    .main { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  }
}

/* ═══════════════════════════════════════════════════════════════
   AUTH REDESIGN — SPLIT LAYOUT (appended, overrides prior auth)
═══════════════════════════════════════════════════════════════ */

/* ── Animated blobs background ── */
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(30px,-20px) scale(1.08); }
  66%      { transform: translate(-20px,25px) scale(0.94); }
}
@keyframes authShake {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-8px); }
  30%     { transform: translateX(8px); }
  45%     { transform: translateX(-6px); }
  60%     { transform: translateX(6px); }
  75%     { transform: translateX(-3px); }
  90%     { transform: translateX(3px); }
}
@keyframes tabSlideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tabSlideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes licenseGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb,39,174,96), 0.3); }
  50%     { box-shadow: 0 0 0 6px rgba(var(--accent-rgb,39,174,96), 0); }
}

/* ── Override: auth screen now uses the new wrap ── */
#auth-screen {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: stretch; justify-content: center;
  padding: 0; overflow: hidden;
  background: var(--bg);
}

/* ── Blobs container ── */
.auth-blobs {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.auth-blob {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18;
  animation: blobFloat 12s ease-in-out infinite;
}
.auth-blob-1 {
  width: 420px; height: 420px;
  background: var(--accent);
  top: -100px; left: -80px;
  animation-delay: 0s;
}
.auth-blob-2 {
  width: 340px; height: 340px;
  background: var(--accent2);
  bottom: -80px; left: 20%;
  animation-delay: -4s;
}
.auth-blob-3 {
  width: 280px; height: 280px;
  background: #a78bfa;
  top: 30%; right: -60px;
  animation-delay: -8s;
}

/* ── Split wrap ── */
.auth-wrap {
  display: flex; width: 100%; max-width: 1060px;
  margin: auto; position: relative; z-index: 1;
  box-shadow: 0 32px 80px rgba(0,0,0,0.18);
  border-radius: 24px; overflow: hidden;
  min-height: 580px; max-height: 96vh;
  align-self: center;
}

/* ═══ LEFT PANEL ═══ */
.auth-left {
  flex: 0 0 42%; display: flex; flex-direction: column;
  padding: 48px 44px;
  background: linear-gradient(145deg, var(--accent) 0%, var(--accent2) 60%, #6d28d9 100%);
  color: #fff; position: relative; overflow: hidden;
}
.auth-left::before {
  content: ''; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.auth-left-logo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 40px; position: relative;
}
.auth-left-logo-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.3);
}
.auth-left-logo-icon svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.auth-left-logo-text { }
.auth-left-logo-name { font-size: 20px; font-weight: 800; letter-spacing: -.4px; line-height: 1.1; }
.auth-left-logo-sub  { font-size: 11px; font-weight: 500; opacity: 0.75; margin-top: 2px; }

.auth-left-headline {
  font-size: 26px; font-weight: 800; line-height: 1.25;
  letter-spacing: -.5px; margin-bottom: 10px; position: relative;
}
.auth-left-tagline {
  font-size: 13px; opacity: 0.8; line-height: 1.5; margin-bottom: 36px; position: relative;
}

/* Features list */
.auth-features { list-style: none; padding: 0; margin: 0 0 auto; display: flex; flex-direction: column; gap: 12px; position: relative; }
.auth-feature-item {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 600;
}
.auth-feature-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center;
}
.auth-feature-icon svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* License status card (returning users) */
.auth-license-card {
  margin-top: 28px; padding: 16px 18px;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(8px);
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.22);
  position: relative; animation: fadeInUp .4s ease both;
}
.auth-license-card.expired { background: rgba(220,53,69,0.22); border-color: rgba(220,53,69,0.4); }
.auth-license-card.soon    { background: rgba(255,193,7,0.18); border-color: rgba(255,193,7,0.4); }
.auth-license-card.active  { animation: licenseGlow 3s ease-in-out infinite; }

.auth-lc-row { display: flex; align-items: center; gap: 8px; }
.auth-lc-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: #4ade80;
}
.auth-lc-dot.expired { background: #f87171; }
.auth-lc-dot.soon    { background: #fbbf24; }
.auth-lc-dot.pulse   { animation: licenseGlow 1.5s ease-in-out infinite; }

.auth-lc-name   { font-size: 12px; font-weight: 700; opacity: 0.9; }
.auth-lc-days   { font-size: 18px; font-weight: 800; line-height: 1.1; margin: 4px 0 2px; }
.auth-lc-exp    { font-size: 11px; opacity: 0.7; }
.auth-lc-link   {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; color: #fff; opacity: 0.85;
  text-decoration: none; margin-top: 8px; cursor: pointer;
  background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 20px;
  border: none; font-family: inherit;
  transition: opacity .15s, background .15s;
}
.auth-lc-link:hover { opacity: 1; background: rgba(255,255,255,0.25); }

/* ═══ RIGHT PANEL ═══ */
.auth-right {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 48px 44px; background: var(--bg2); overflow-y: auto;
  position: relative;
}

/* Override old .auth-card — no longer used as a floating card */
.auth-card {
  background: transparent; border: none; padding: 0; box-shadow: none;
  width: 100%; max-width: none; border-radius: 0;
}

.auth-right-title   { font-size: 24px; font-weight: 800; color: var(--text); letter-spacing: -.4px; margin-bottom: 4px; }
.auth-right-sub     { font-size: 13px; color: var(--muted); margin-bottom: 0; }

/* Tabs — pill style */
.auth-tabs {
  display: flex; gap: 0; margin-bottom: 28px;
  background: var(--bg3); border-radius: 12px; padding: 4px;
  position: relative;
}
.auth-tabs::after {
  content: ''; position: absolute;
  top: 4px; bottom: 4px;
  width: calc(50% - 4px);
  background: var(--bg2); border-radius: 9px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  z-index: 0;
}
.auth-tabs[data-active="login"]::after    { transform: translateX(0); }
.auth-tabs[data-active="register"]::after { transform: translateX(calc(100% + 0px)); }

.auth-tab {
  flex: 1; padding: 10px; border-radius: 9px; border: none;
  background: transparent; color: var(--muted);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: color .2s; font-family: inherit; letter-spacing: .1px;
  position: relative; z-index: 1;
}
.auth-tab.active { color: var(--accent); }

/* Form panels */
.auth-form-panel { display: none; }
.auth-form-panel.active {
  display: block;
  animation: tabSlideIn .22s ease both;
}
.auth-form-panel.slide-left { animation: tabSlideInLeft .22s ease both; }

/* Field groups */
.auth-field-group { margin-bottom: 14px; }
.auth-field-label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--text2); margin-bottom: 5px; letter-spacing: .2px;
}
.auth-field-wrap { position: relative; }
.auth-field-wrap input {
  width: 100%; padding: 11px 14px; border-radius: 10px;
  border: 1.5px solid var(--border2); background: var(--bg);
  color: var(--text); font-size: 14px; font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
  outline: none; box-sizing: border-box;
}
.auth-field-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(39,174,96,.12);
}
.auth-field-wrap input.field-valid {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
}
.auth-field-wrap input.field-error {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--bg));
}
.auth-field-wrap input.has-suffix { padding-right: 42px; }
.auth-field-wrap input.has-suffix-wide { padding-right: 100px; }

/* Field suffix icons */
.auth-field-suffix {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px;
}
.auth-field-valid-icon, .auth-field-error-icon {
  width: 18px; height: 18px; display: none; flex-shrink: 0;
}
.auth-field-valid-icon { color: var(--accent); }
.auth-field-error-icon { color: var(--danger); }
input.field-valid  ~ .auth-field-suffix .auth-field-valid-icon { display: block; }
input.field-error  ~ .auth-field-suffix .auth-field-error-icon { display: block; }

/* Password toggle */
.auth-pwd-toggle {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--muted); display: flex; align-items: center;
  transition: color .15s;
}
.auth-pwd-toggle:hover { color: var(--text); }
.auth-pwd-toggle svg   { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Field hint text */
.auth-field-hint {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
}
.auth-field-hint.valid { color: var(--accent); }
.auth-field-hint.error { color: var(--danger); }

/* Password strength */
.auth-pwd-strength-wrap { margin-top: 8px; }
.auth-pwd-strength-bars {
  display: flex; gap: 4px; margin-bottom: 4px;
}
.auth-pwd-bar {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--bg4);
  transition: background .3s;
}
.auth-pwd-bar.active-weak   { background: #f87171; }
.auth-pwd-bar.active-fair   { background: #fbbf24; }
.auth-pwd-bar.active-good   { background: #34d399; }
.auth-pwd-bar.active-strong { background: var(--accent); }
.auth-pwd-strength-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.auth-pwd-strength-label.weak   { color: #f87171; }
.auth-pwd-strength-label.fair   { color: #fbbf24; }
.auth-pwd-strength-label.good   { color: #34d399; }
.auth-pwd-strength-label.strong { color: var(--accent); }

/* License format badge */
.auth-license-fmt {
  font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap; margin-left: 4px;
  transition: all .2s;
}
.auth-license-fmt.valid  { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.auth-license-fmt.invalid{ background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

/* Error banner */
.auth-error {
  background: color-mix(in srgb, var(--danger) 10%, var(--bg));
  border: 1.5px solid color-mix(in srgb, var(--danger) 30%, transparent);
  color: var(--danger); border-radius: 10px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
  margin-bottom: 14px; display: none; align-items: center; gap: 8px;
}
.auth-error.show { display: flex; }
.auth-error.shake { animation: authShake .4s ease; }

/* Submit button */
.auth-submit {
  width: 100%; padding: 13px; border-radius: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff; font-size: 15px; font-weight: 800;
  border: none; cursor: pointer; font-family: inherit;
  letter-spacing: .2px; position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  margin-top: 6px;
}
.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(39,174,96,.35);
}
.auth-submit:active:not(:disabled) { transform: translateY(0); }
.auth-submit:disabled { opacity: .7; cursor: not-allowed; }

/* Loading bar on submit */
.auth-submit .auth-progress-bar {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background: rgba(255,255,255,0.6); width: 0;
  transition: width 1.5s linear;
  border-radius: 0 0 11px 11px;
}
.auth-submit.loading .auth-progress-bar { width: 85%; }
.auth-submit.success { background: linear-gradient(135deg,#16a34a,#15803d); }
.auth-submit.success .auth-progress-bar { width: 100%; transition: width .3s linear; }

/* Divider */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--muted); font-size: 12px; font-weight: 600;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--border2);
}

/* Buy license link */
.auth-buy-link {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px; height: 50px; border-radius: 11px; margin-top: 0;
  border: 1.5px solid var(--border2);
  background: var(--bg3);
  color: var(--text2); font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: border-color .15s, background .15s, color .15s;
  overflow: visible;
  position: relative;
}
.auth-buy-link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--bg3));
  color: var(--accent);
}
.auth-buy-link img {
  height: 35px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .9;
  /* Elimina fondo blanco del logo en modo claro */
  mix-blend-mode: multiply;
}
/* En modo oscuro usamos screen para que el logo no desaparezca */
[data-theme="dark"] .auth-buy-link img,
.dark .auth-buy-link img {
  mix-blend-mode: screen;
  opacity: .95;
}
.auth-buy-link:hover img { opacity: 1; }
.auth-buy-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Fila de botones de pago lado a lado ── */
.auth-pay-row {
  display: flex;
  gap: 8px;
  width: 100%;
  padding-top: 10px; /* espacio para que el badge no se corte */
}
.auth-pay-row .auth-buy-link {
  flex: 1;
  min-width: 0;
}

/* ── Borde amarillo MP / violeta Stripe ── */
.auth-pay-row .auth-buy-link:not(.auth-buy-soon) {
  border-color: #ffe600;
}
.auth-pay-row .auth-buy-link:not(.auth-buy-soon):hover {
  border-color: #f5c800;
  background: color-mix(in srgb, #ffe600 8%, var(--bg3));
  color: var(--text2);
}

/* ── Botón Stripe "Próximamente" ── */
.auth-buy-soon {
  opacity: .7;
  cursor: not-allowed !important;
  pointer-events: none;
  border-color: #7c3aed !important;
}
.auth-soon-badge {
  position: absolute;
  top: -9px;
  right: 8px;
  background: #7c3aed;
  color: #fff;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(124,58,237,.45);
}

/* ══════════════════════════════════════════════
   SPOTLIGHT TOUR
══════════════════════════════════════════════ */
#spt-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.68);
  z-index: 8000;
  animation: sptFadeIn .3s ease;
}

/* Elemento resaltado — "flota" sobre el overlay */
.spt-highlight {
  position: relative !important;
  z-index: 8001 !important;
  border-radius: 10px;
  outline: 2.5px solid var(--accent);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent),
              0 0 40px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: sptPulse 2s ease infinite;
}

/* Tooltip flotante */
#spt-tooltip {
  position: fixed;
  z-index: 8002;
  width: 310px;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: 18px;
  padding: 20px 20px 16px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.2);
  animation: sptPop .25s cubic-bezier(.34,1.56,.64,1);
}

/* Barra de progreso */
.spt-prog-bar {
  height: 3px; background: var(--border); border-radius: 99px;
  margin-bottom: 14px; overflow: hidden;
}
.spt-prog-fill {
  height: 100%; background: var(--accent);
  border-radius: 99px; transition: width .4s ease;
}

/* Contador */
.spt-counter {
  font-size: 10px; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px;
}

/* Emoji grande */
.spt-emoji {
  font-size: 28px; line-height: 1; margin-bottom: 8px;
}

/* Título y descripción */
.spt-title {
  font-size: 15px; font-weight: 800; color: var(--text);
  line-height: 1.3; margin-bottom: 8px;
}
.spt-desc {
  font-size: 13px; color: var(--text2); line-height: 1.65;
  margin-bottom: 14px;
}

/* Dots de navegación */
.spt-dots {
  display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap;
}
.spt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--border2); cursor: pointer;
  transition: background .2s, transform .2s;
}
.spt-dot.active  { background: var(--accent); transform: scale(1.4); }
.spt-dot:hover   { background: var(--text2); }

/* Botones */
.spt-actions {
  display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.spt-nav-btns { display: flex; gap: 7px; }

.spt-skip {
  background: none; border: none; color: var(--muted);
  font-size: 12px; font-family: inherit; cursor: pointer; padding: 0;
  transition: color .15s;
}
.spt-skip:hover { color: var(--text2); }

.spt-next {
  background: var(--accent); color: #fff; border: none;
  border-radius: 9px; padding: 8px 18px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.spt-next:hover  { opacity: .88; }
.spt-next:active { transform: scale(.97); }

.spt-prev {
  background: var(--bg3); color: var(--text2);
  border: 1.5px solid var(--border2); border-radius: 9px;
  padding: 8px 14px; font-size: 13px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.spt-prev:hover { border-color: var(--accent); color: var(--accent); }

/* Animaciones */
@keyframes sptFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sptPop {
  from { opacity: 0; transform: scale(.9) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes sptPulse {
  0%,100% { outline-offset: 5px; box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent); }
  50%     { outline-offset: 8px; box-shadow: 0 0 0 8px color-mix(in srgb,var(--accent) 10%,transparent); }
}

/* Móvil: tooltip centrado abajo */
@media (max-width: 679px) {
  #spt-tooltip {
    position: fixed !important;
    bottom: 16px !important; left: 12px !important; right: 12px !important;
    top: auto !important; width: auto !important;
    transform: none !important;
    border-radius: 16px;
    max-height: 55vh; overflow-y: auto;
  }
}

/* ── SHAKE wrapper ── */
.auth-right.shake { animation: authShake .4s ease; }

/* ══ MOBILE RESPONSIVE ══ */
@media (max-width: 860px) {
  .auth-wrap {
    flex-direction: column; max-width: 480px; min-height: unset;
    border-radius: 20px; max-height: 94vh;
  }
  .auth-left {
    flex: none; padding: 28px 28px 24px;
    background: linear-gradient(120deg, var(--accent) 0%, var(--accent2) 100%);
  }
  .auth-left-headline { font-size: 20px; margin-bottom: 6px; }
  .auth-left-tagline  { font-size: 12px; margin-bottom: 0; }
  .auth-features      { display: none; }
  .auth-license-card  { margin-top: 12px; padding: 12px 14px; }
  .auth-right { padding: 28px 28px 32px; flex: 1; }
  .auth-blobs .auth-blob { opacity: 0.1; }
}

@media (max-width: 480px) {
  #auth-screen { align-items: flex-start; }
  .auth-wrap { max-width: 100%; border-radius: 0; min-height: 100vh; max-height: none; align-self: flex-start; }
  .auth-left  { padding: 24px 20px 20px; border-radius: 0; }
  .auth-right { padding: 24px 20px 40px; }
  .auth-right-title { font-size: 20px; }
}

/* ════════════════════════════════════════
   AUTH THEME TOGGLE (esquina login)
════════════════════════════════════════ */
.auth-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}
.auth-card-header > div { flex: 1; min-width: 0; }

#auth-theme-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1.5px solid var(--border2);
  background: var(--bg3);
  color: var(--text);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
  margin-top: 2px;
}
#auth-theme-btn:hover {
  background: var(--bg4);
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(1.06);
}

/* ════════════════════════════════════════
   TOUR BUTTON (auth left panel)
════════════════════════════════════════ */
.auth-tour-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  padding: 10px 18px;
  background: rgba(255,255,255,0.18);
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 99px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(4px);
  width: fit-content;
  letter-spacing: .1px;
}
.auth-tour-btn:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-1px);
}
.auth-tour-btn:active { transform: scale(.97); }
.auth-tour-btn svg { flex-shrink: 0; }

/* ════════════════════════════════════════
   TOUR OVERLAY + CARD
════════════════════════════════════════ */
#tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: tourFadeIn .25s ease;
}
@keyframes tourFadeIn { from{opacity:0} to{opacity:1} }

.tour-card {
  background: var(--bg2, #fff);
  border-radius: 24px;
  border: 1px solid var(--border, rgba(0,0,0,.08));
  box-shadow: 0 32px 80px rgba(0,0,0,.28);
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  position: relative;
  animation: tourCardIn .3s cubic-bezier(.34,1.3,.64,1);
}
@keyframes tourCardIn { from{opacity:0;transform:scale(.9) translateY(20px)} to{opacity:1;transform:none} }

/* Progress bar */
.tour-progress-bar { height: 3px; background: var(--border, rgba(0,0,0,.08)); }
.tour-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent, #047857), var(--accent-light, #10b981)); border-radius: 0 3px 3px 0; transition: width .4s cubic-bezier(.4,0,.2,1); }

/* Visual zone */
.tour-visual {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: background .4s;
}
.tour-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: .12;
}
.tour-icon-wrap {
  width: 88px;
  height: 88px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255,255,255,0.25);
  position: relative;
  z-index: 1;
  transition: transform .35s cubic-bezier(.34,1.3,.64,1);
}
.tour-icon-svg {
  width: 40px;
  height: 40px;
  stroke: #fff;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tour-icon-wrap.pop { transform: scale(1.15); }

/* Body */
.tour-body { padding: 22px 26px 26px; }
.tour-step-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--accent, #047857);
  background: var(--accent3, rgba(4,120,87,.1));
  border-radius: 99px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.tour-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--text, #141920);
  letter-spacing: -.3px;
  line-height: 1.25;
  margin-bottom: 10px;
  transition: opacity .2s;
}
.tour-desc {
  font-size: 14px;
  color: var(--text2, #5f6875);
  line-height: 1.7;
  transition: opacity .2s;
}

/* Dots */
.tour-dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 18px 0 0;
}
.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--border2, rgba(0,0,0,.12));
  transition: all .3s;
  cursor: pointer;
}
.tour-dot.active {
  width: 20px;
  background: var(--accent, #047857);
}

/* Actions */
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  gap: 10px;
}
.tour-nav { display: flex; gap: 8px; }
.tour-btn-skip {
  background: none;
  border: none;
  color: var(--muted, #9ba5b0);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 4px;
  transition: color .15s;
}
.tour-btn-skip:hover { color: var(--text2, #5f6875); }
.tour-btn-prev {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--bg3, #f8f9fa);
  border: 1.5px solid var(--border2, rgba(0,0,0,.12));
  border-radius: 10px;
  color: var(--text2, #5f6875);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 9px 14px;
  transition: all .15s;
}
.tour-btn-prev:hover { background: var(--bg4, #eef0f3); color: var(--text, #141920); }
.tour-btn-prev:disabled { opacity: .35; cursor: default; }
.tour-btn-next {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--accent-light, #10b981), var(--accent-deep, #064e3b));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 9px 18px;
  box-shadow: 0 4px 14px rgba(4,120,87,.25);
  transition: all .15s;
}
.tour-btn-next:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(4,120,87,.35); }
.tour-btn-next:active { transform: scale(.97); }

/* CTA Final */
.tour-cta { margin-top: 20px; text-align: center; }
.tour-cta-sub { font-size: 13px; color: var(--text2, #5f6875); line-height: 1.6; margin-bottom: 14px; }
.tour-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--accent-light, #10b981), var(--accent-deep, #064e3b));
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  padding: 13px 28px;
  width: 100%;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(4,120,87,.3);
  transition: all .18s;
  margin-bottom: 10px;
}
.tour-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(4,120,87,.4); }
.tour-cta-close {
  background: none;
  border: none;
  color: var(--muted, #9ba5b0);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  padding: 6px;
  transition: color .15s;
}
.tour-cta-close:hover { color: var(--text2, #5f6875); }

/* Slide animation */
.tour-slide-out-left  { animation: tourSlideOutL .2s ease forwards; }
.tour-slide-in-right  { animation: tourSlideInR  .25s ease forwards; }
.tour-slide-out-right { animation: tourSlideOutR .2s ease forwards; }
.tour-slide-in-left   { animation: tourSlideInL  .25s ease forwards; }
@keyframes tourSlideOutL { to { opacity:0; transform:translateX(-30px); } }
@keyframes tourSlideInR  { from { opacity:0; transform:translateX(30px); } }
@keyframes tourSlideOutR { to { opacity:0; transform:translateX(30px); } }
@keyframes tourSlideInL  { from { opacity:0; transform:translateX(-30px); } }

@media (max-width: 540px) {
  .tour-card { border-radius: 18px; }
  .tour-visual { min-height: 140px; }
  .tour-icon-wrap { width: 70px; height: 70px; border-radius: 22px; }
  .tour-icon-svg { width: 32px; height: 32px; }
  .tour-body { padding: 18px 18px 22px; }
  .tour-title { font-size: 18px; }
}