@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── TOKENS ── */
:root {
  --primary:       #4F46E5;
  --primary-soft:  #EEF2FF;
  --primary-glow:  #C7D2FE;
  --primary-dark:  #3730A3;
  --primary-gradient: linear-gradient(135deg, #6366F1 0%, #4F46E5 50%, #3730A3 100%);
  --white:         #FFFFFF;
  --surface:       #F8FAFC;
  --border:        #E2E8F0;
  --border-focus:  #C7D2FE;
  --font-display:  'Inter', system-ui, sans-serif;
  --text-main:     #0F172A;
  --text-muted:    #475569;
  --text-hint:     #94A3B8;
  --success:       #10B981;
  --success-soft:  #D1FAE5;
  --danger:        #EF4444;
  --danger-soft:   #FEE2E2;
  --warning:       #F59E0B;
  --warning-soft:  #FEF3C7;
  
  --sidebar-w:     240px;
  --header-h:      60px;
  --radius-sm:     10px;
  --radius-md:     14px;
  --radius-lg:     20px;
  --radius-full:   999px;
  
  --shadow-sm:     0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-md:     0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-lg:     0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
  --shadow-glow:   0 10px 25px rgba(79, 70, 229, 0.15);
  --shadow-glow-hover: 0 15px 35px rgba(79, 70, 229, 0.25);
  
  --transition:    all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; max-width: 100vw; }
body { font-family: 'Inter', system-ui, sans-serif; background: #EAECF3; color: var(--text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100vw; }
a { text-decoration: none; color: inherit; transition: var(--transition); }
button { cursor: pointer; border: none; background: none; font: inherit; outline: none; transition: var(--transition); }
input, select, textarea { font: inherit; outline: none; transition: var(--transition); }
img, svg { display: block; }

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

/* ── SIDEBAR ── */
.sidebar { width: var(--sidebar-w); background: var(--white); border-right: 1px solid var(--border); border-radius: 0 26px 26px 0; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 100; overflow: hidden; }
/* Etiqueta de sección del menú (Menú / Finanzas / Herramientas) */
.nav-group { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; color: var(--text-hint); text-transform: uppercase; padding: 14px 12px 5px; }
.nav-group:first-child { padding-top: 4px; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px; border-bottom: 1px solid var(--border); }
.sidebar-brand-icon { width: 34px; height: 34px; background: var(--primary-gradient); border-radius: 10px; display: grid; place-items: center; color: white; font-weight: 800; font-size: 15px; flex-shrink: 0; box-shadow: var(--shadow-glow); }
.sidebar-brand-name { font-weight: 800; font-size: 16px; color: var(--text-main); letter-spacing: -0.02em; }
.sidebar-brand-biz { font-size: 11px; color: var(--text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 155px; }
.sidebar-nav { flex: 1; padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13.5px; font-weight: 600; position: relative; }
.nav-item:hover { background: var(--surface); color: var(--text-main); transform: translateX(3px); }
.nav-item.active { background: var(--primary-gradient); color: white; font-weight: 700; box-shadow: var(--shadow-glow); }
.nav-item.active:hover { transform: none; color: white; }
.nav-icon { width: 20px; height: 20px; flex-shrink: 0; display: grid; place-items: center; }
.nav-icon svg { width: 18px; height: 18px; }
.nav-badge { margin-left: auto; background: var(--primary); color: white; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: var(--radius-full); min-width: 20px; text-align: center; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4); }
.nav-item.active .nav-badge { background: white; color: var(--primary); box-shadow: none; }
.sidebar-bottom { padding: 10px 8px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
/* Tarjeta oscura "Mejora a Pro" (reemplaza al plan-badge en el sidebar) */
.upsell { background: linear-gradient(160deg, #232A45 0%, #171C2E 100%); border-radius: 18px; padding: 15px 14px; color: #fff; position: relative; overflow: hidden; }
.upsell::before { content: ""; position: absolute; top: -40px; right: -30px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(99,102,241,.45), transparent 70%); pointer-events: none; }
.upsell-ic { width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.14); display: grid; place-items: center; margin-bottom: 10px; }
.upsell-plan { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.6); position: relative; }
.upsell-title { font-size: 14px; font-weight: 800; position: relative; margin-top: 1px; }
.upsell-desc { font-size: 11px; opacity: .72; margin: 5px 0 11px; position: relative; line-height: 1.45; }
.upsell-cta { display: block; text-align: center; background: var(--primary-gradient); color: #fff; font-weight: 700; font-size: 12.5px; padding: 9px; border-radius: 11px; position: relative; }
.upsell-cta:hover { filter: brightness(1.08); box-shadow: var(--shadow-glow); }
.plan-badge { background: var(--primary-soft); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(79, 70, 229, 0.1); }
.plan-badge-label { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.plan-badge-name { font-size: 12px; font-weight: 800; color: var(--primary); margin-top: 1px; }
.btn-upgrade { font-size: 11px; font-weight: 700; color: var(--primary); border: 1.5px solid var(--primary); border-radius: var(--radius-full); padding: 5px 10px; white-space: nowrap; }
.btn-upgrade:hover { background: var(--primary); color: white; box-shadow: var(--shadow-glow); }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: white; font-size: 12px; font-weight: 800; flex-shrink: 0; background: var(--primary-gradient); box-shadow: var(--shadow-sm); }
.sidebar-user-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
.sidebar-user-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── MAIN ── */
.main-area { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* ── TOPBAR ── */
.topbar { height: var(--header-h); background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 50; }
.topbar-title { font-size: 16px; font-weight: 800; color: var(--text-main); white-space: nowrap; }
.topbar-search { flex: 1; max-width: 380px; margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0 14px; height: 36px; transition: var(--transition); }
.topbar-search:focus-within { border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 3px var(--primary-soft); }
.topbar-search svg { color: var(--text-hint); flex-shrink: 0; width: 18px; height: 18px; }
.topbar-search input { border: none; background: none; font-size: 14px; color: var(--text-main); width: 100%; font-weight: 500; }
.topbar-search input::placeholder { color: var(--text-hint); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.topbar-icon-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); position: relative; border: 1px solid transparent; }
.topbar-icon-btn:hover { background: var(--surface); color: var(--text-main); border-color: var(--border); transform: translateY(-1px); }
.topbar-icon-btn svg { width: 18px; height: 18px; }
.notif-dot { width: 8px; height: 8px; background: var(--danger); border-radius: 50%; border: 2px solid white; position: absolute; top: 8px; right: 8px; }
.privacy-btn { display: flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.privacy-btn:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.privacy-btn.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.privacy-btn svg { width: 15px; height: 15px; }

/* ── CONTENT ── */
.content { flex: 1; padding: 24px; }

/* ── PAGE HEADER ── */
.page-header { background: var(--primary-gradient); border-radius: var(--radius-lg); padding: 20px 24px; color: white; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; overflow: hidden; box-shadow: var(--shadow-glow); }
.page-header::before { content: ""; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 60%); pointer-events: none; }
.page-header-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.page-header-sub { font-size: 13px; opacity: 0.88; margin-top: 3px; font-weight: 500; }
.page-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; position: relative; z-index: 2; }

/* ── KPI GRID ── */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kpi-card { min-width: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; overflow: hidden; }
.kpi-card:hover { transform: translateY(-3px); border-color: var(--border-focus); box-shadow: var(--shadow-md); }
.kpi-icon-wrap { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid var(--border); transition: var(--transition); }
.kpi-card:hover .kpi-icon-wrap { transform: scale(1.05); border-color: transparent; }
.kpi-icon-wrap svg { width: 18px; height: 18px; }
.kpi-icon-wrap.indigo { background: var(--primary-soft); color: var(--primary); }
.kpi-icon-wrap.green  { background: var(--success-soft); color: var(--success); }
.kpi-icon-wrap.amber  { background: var(--warning-soft); color: var(--warning); }
.kpi-icon-wrap.red    { background: var(--danger-soft);  color: var(--danger);  }
.kpi-card:hover .kpi-icon-wrap.indigo { background: var(--primary-gradient); color: white; }
.kpi-card:hover .kpi-icon-wrap.green { background: var(--success); color: white; }
.kpi-card:hover .kpi-icon-wrap.amber { background: var(--warning); color: white; }
.kpi-card:hover .kpi-icon-wrap.red { background: var(--danger); color: white; }
.kpi-value { font-size: 26px; font-weight: 800; color: var(--text-main); line-height: 1.1; letter-spacing: -0.02em; }
.kpi-label { font-size: 13px; color: var(--text-muted); font-weight: 600; margin-top: 6px; }
.kpi-sub { font-size: 12px; color: var(--text-hint); margin-top: 4px; font-weight: 500; }
.kpi-sub.up { color: var(--success); }
.kpi-sub.down { color: var(--danger); }

/* ── PILL / STATUS ── */
.pill { display: inline-flex; align-items: center; border-radius: var(--radius-full); padding: 6px 12px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.pill-vencido   { background: var(--danger-soft);  color: var(--danger); border-color: rgba(239, 68, 68, 0.2); }
.pill-pendiente, .pill-saldo { background: var(--warning-soft); color: var(--warning); border-color: rgba(245, 158, 11, 0.2); }
.pill-pagado, .pill-al-dia   { background: var(--success-soft); color: var(--success); border-color: rgba(16, 185, 129, 0.2); }
.pill-activo    { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-border); }
.pill-anulado   { background: var(--surface); color: var(--text-muted); border-color: var(--border); }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border-radius: var(--radius-md); padding: 0 20px; font-size: 14px; font-weight: 700; white-space: nowrap; border: 1px solid transparent; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--primary-gradient); color: white; box-shadow: 0 4px 15px rgba(79, 70, 229, 0.25); }
.btn-primary:hover { box-shadow: 0 8px 25px rgba(79, 70, 229, 0.35); filter: brightness(1.1); }
.btn-secondary { background: var(--white); border-color: var(--border); color: var(--text-main); }
.btn-secondary:hover { border-color: var(--primary-border-focus); color: var(--primary); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface); color: var(--text-main); }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); border-color: rgba(239, 68, 68, 0.2); }
.btn-danger-soft:hover { background: var(--danger); color: white; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.25); }
.btn-white { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); color: white; backdrop-filter: blur(10px); }
.btn-white:hover { background: rgba(255,255,255,0.25); border-color: white; }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-xs { min-height: 28px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius-sm); display: grid; place-items: center; }

/* ── CHIPS ── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border-radius: var(--radius-full); padding: 8px 16px; font-size: 14px; font-weight: 600; border: 1px solid var(--border); background: var(--white); color: var(--text-muted); }
.chip:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.chip.active { background: var(--primary-gradient); border-color: transparent; color: white; box-shadow: var(--shadow-glow); }

/* ── INPUTS ── */
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-label { font-size: 13px; font-weight: 700; color: var(--text-main); }
.input-label .req { color: var(--danger); margin-left: 4px; }
.input { border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 9px 14px; font-size: 14px; color: var(--text-main); background: var(--white); width: 100%; font-weight: 500; }
.input::placeholder { color: var(--text-hint); font-weight: 400; }
.input:focus { border-color: var(--primary); background: var(--white); box-shadow: 0 0 0 3px var(--primary-soft); }
.input.error { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.input-wrap { position: relative; }
.input-wrap .input { padding-left: 42px; }
.input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-hint); width: 16px; height: 16px; pointer-events: none; }
select.input { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
textarea.input { border-radius: var(--radius-md); resize: vertical; min-height: 80px; }

/* ── SEARCH BAR ── */
.search-bar { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0 14px; height: 38px; min-width: 220px; }
.search-bar:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.search-bar svg { color: var(--text-hint); width: 16px; height: 16px; flex-shrink: 0; }
.search-bar input { border: none; background: none; font-size: 13.5px; color: var(--text-main); width: 100%; font-weight: 500; }
.search-bar input::placeholder { color: var(--text-hint); font-weight: 400; }

/* ── CARD ── */
.card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); overflow: hidden; }
.card:hover { border-color: var(--border-focus); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--white); }
.card-title { font-size: 14px; font-weight: 800; color: var(--text-main); }
.card-body { padding: 16px 18px; }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; width: 100%; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
.table td { padding: 11px 16px; border-bottom: 1px solid var(--border); color: var(--text-main); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: var(--transition); }
.table tbody tr:hover { background: var(--surface); }

/* ── MODAL ── */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s ease; }
.modal-overlay.open { opacity: 1; }
.modal { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2); transform: translateY(24px) scale(0.96); transition: all .28s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid var(--border); }
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-lg .modal { max-width: 720px; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 16px; font-weight: 800; color: var(--text-main); }
.modal-close { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); background: var(--surface); }
.modal-close:hover { background: var(--danger-soft); color: var(--danger); transform: rotate(90deg); }
.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; background: var(--surface); }

/* ── TOGGLE ── */
.toggle-wrap { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.toggle { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track { position: absolute; inset: 0; background: var(--border); border-radius: var(--radius-full); transition: var(--transition); border: 1px solid var(--border); }
.toggle-thumb { position: absolute; width: 20px; height: 20px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: var(--transition); box-shadow: var(--shadow-sm); }
.toggle input:checked ~ .toggle-track { background: var(--primary); border-color: var(--primary); }
.toggle input:checked ~ .toggle-thumb { transform: translateX(22px); }
.toggle-label { font-size: 14px; font-weight: 600; color: var(--text-main); }

/* ── AVATAR ── */
.avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: white; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.avatar-md { width: 44px; height: 44px; font-size: 16px; }
.avatar-sm { width: 36px; height: 36px; font-size: 13px; }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }

/* ── EMPTY STATE ── */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; text-align: center; gap: 16px; }
.empty-state svg { width: 56px; height: 56px; opacity: 0.3; color: var(--text-muted); }
.empty-state-title { font-size: 18px; font-weight: 800; color: var(--text-main); }
.empty-state-sub { font-size: 14px; color: var(--text-muted); max-width: 300px; }

/* ── TOAST ── */
.toast-container { position: fixed; bottom: 32px; right: 32px; z-index: 300; display: flex; flex-direction: column; gap: 12px; pointer-events: none; }
.toast { background: var(--text-main); color: white; border-radius: var(--radius-md); padding: 14px 20px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: slideIn .3s cubic-bezier(0.16, 1, 0.3, 1); max-width: 320px; }
.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warning { background: var(--warning); color: var(--text-main); }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── TOOLBAR ── */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar-left { display: flex; align-items: center; gap: 12px; flex: 1; flex-wrap: wrap; }
.toolbar-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* ── STEP WIZARD ── */
.step-bar { display: flex; align-items: flex-start; margin-bottom: 24px; }
.step-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.step-bar-item::before { content: ''; position: absolute; top: 16px; left: -50%; right: 50%; height: 3px; background: var(--border); border-radius: 3px; }
.step-bar-item:first-child::before { display: none; }
.step-bar-item.done::before, .step-bar-item.active::before { background: var(--primary-gradient); }
.step-circle { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--border); display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--text-muted); background: var(--white); position: relative; z-index: 1; transition: var(--transition); }
.step-bar-item.active .step-circle { border-color: var(--primary); background: var(--primary); color: white; box-shadow: var(--shadow-glow); }
.step-bar-item.done .step-circle { border-color: var(--success); background: var(--success); color: white; }
.step-label { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-top: 8px; text-align: center; }
.step-bar-item.active .step-label { color: var(--primary); font-weight: 800; }
.step-panel { display: none; }
.step-panel.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── ALERT ── */
.alert { border-radius: var(--radius-md); padding: 16px; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: var(--transition); }
.alert:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.alert-danger  { background: var(--danger-soft);  color: #B91C1C; border-color: rgba(239, 68, 68, 0.2); }
.alert-warning { background: var(--warning-soft); color: #92400E; border-color: rgba(245, 158, 11, 0.2); }
.alert-success { background: var(--success-soft); color: #065F46; border-color: rgba(16, 185, 129, 0.2); }
.alert svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.alert-link { font-weight: 800; text-decoration: underline; margin-left: auto; white-space: nowrap; }

/* ── QUICK ACTIONS ── */
.quick-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 16px; }
.quick-btn { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-muted); transition: var(--transition); box-shadow: var(--shadow-sm); }
.quick-btn:hover { border-color: var(--primary-border-focus); color: var(--primary); background: var(--white); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.quick-btn svg { width: 20px; height: 20px; color: var(--text-main); transition: var(--transition); }
.quick-btn:hover svg { color: var(--primary); transform: scale(1.1); }

/* ── GRID ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* ── CLIENT LIST ITEM ── */
.client-item { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; transition: var(--transition); margin-bottom: 12px; box-shadow: var(--shadow-sm); }
.client-item:hover { box-shadow: var(--shadow-md); border-color: var(--primary-border-focus); transform: translateX(4px); }
.accent-bar { width: 6px; flex-shrink: 0; align-self: stretch; border-radius: 4px 0 0 4px; }
.accent-bar.green  { background: var(--success); }
.accent-bar.amber  { background: var(--warning); }
.accent-bar.red    { background: var(--danger); }
.accent-bar.indigo { background: var(--primary-gradient); }
.client-body { display: flex; align-items: center; gap: 16px; flex: 1; padding: 16px 20px; min-width: 0; }
.client-info { flex: 1; min-width: 0; }
.client-name { font-size: 15px; font-weight: 800; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-tel { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
.client-amount { text-align: right; flex-shrink: 0; }
.client-amount-val { font-size: 16px; font-weight: 800; color: var(--text-main); }
.client-amount-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.client-actions { display: flex; align-items: center; gap: 6px; padding: 0 16px; border-left: 1px solid var(--border); opacity: 0; transition: var(--transition); background: var(--surface); height: 100%; }
.client-item:hover .client-actions { opacity: 1; }

/* ── ACTIVITY ── */
.activity-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); transition: var(--transition); }
.activity-item:hover { transform: translateX(4px); }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; box-shadow: var(--shadow-sm); }
.activity-dot.green  { background: var(--success); }
.activity-dot.indigo { background: var(--primary); }
.activity-dot.red    { background: var(--danger); }
.activity-content { flex: 1; min-width: 0; }
.activity-title { font-size: 14px; font-weight: 700; color: var(--text-main); }
.activity-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.activity-right { text-align: right; flex-shrink: 0; }
.activity-amount { font-size: 15px; font-weight: 800; color: var(--text-main); }
.activity-date { font-size: 12px; color: var(--text-hint); margin-top: 2px; font-weight: 500; }

/* ── PRODUCT GRID ── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.product-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-sm); }
.product-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary-border-focus); transform: translateY(-4px); }
.product-bar { height: 6px; }
.product-bar.green { background: var(--success); }
.product-bar.amber { background: var(--warning); }
.product-bar.red   { background: var(--danger); }
.product-body { padding: 20px; }
.product-name { font-size: 15px; font-weight: 800; color: var(--text-main); margin-bottom: 6px; }
.product-price { font-size: 20px; font-weight: 900; color: var(--primary); letter-spacing: -0.02em; }
.product-stock { font-size: 13px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
.product-cat { display: inline-block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 10px; }
.product-actions { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; background: var(--surface); }

/* ── SETTINGS ── */
.settings-section { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }
.settings-section-title { font-size: 14px; font-weight: 800; padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; color: var(--text-main); background: var(--white); }
.settings-section-body { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-row-label { font-size: 14px; font-weight: 700; color: var(--text-main); }
.settings-row-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-weight: 500; }
.settings-section-footer { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 10px; background: var(--surface); }

/* ── REMINDER ── */
.reminder-item { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; transition: var(--transition); box-shadow: var(--shadow-sm); margin-bottom: 12px; }
.reminder-item:hover { border-color: var(--primary-border-focus); transform: translateX(4px); box-shadow: var(--shadow-md); }
.reminder-item.selected { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.reminder-check { padding: 16px 20px; display: flex; align-items: center; }
.reminder-check input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.reminder-body { flex: 1; display: flex; align-items: center; gap: 16px; padding: 16px 0; min-width: 0; }
.reminder-info { flex: 1; min-width: 0; }
.reminder-name { font-size: 15px; font-weight: 800; color: var(--text-main); }
.reminder-tel  { font-size: 13px; color: var(--text-muted); margin-top: 2px; font-weight: 500; }
.reminder-amount { text-align: right; flex-shrink: 0; padding-right: 12px; }
.reminder-amount-val { font-size: 16px; font-weight: 800; }
.reminder-days { font-size: 12px; margin-top: 2px; font-weight: 600; color: var(--danger); }
.reminder-actions { padding: 0 16px; border-left: 1px solid var(--border); display: flex; align-items: center; background: var(--surface); height: 100%; }

/* ── PLAN CARD EXTRAS ── */
.plan-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.plan-card { border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 32px 24px; background: var(--white); display: flex; flex-direction: column; gap: 20px; transition: var(--transition); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.plan-card:hover { border-color: var(--primary-border-focus); transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.plan-card.current { border-color: var(--success); background: var(--success-soft); }
.plan-card.popular { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.plan-card.popular::before { content: "RECOMENDADO"; position: absolute; top: 12px; right: -30px; background: var(--primary-gradient); color: white; font-size: 10px; font-weight: 800; padding: 4px 30px; transform: rotate(45deg); letter-spacing: 0.1em; }
.plan-name { font-size: 18px; font-weight: 800; color: var(--text-main); }
.plan-price-amount { font-size: 36px; font-weight: 900; color: var(--text-main); letter-spacing: -0.03em; }
.plan-price-period { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.plan-desc { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.plan-features li { font-size: 14px; color: var(--text-main); display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.plan-features li svg { flex-shrink: 0; color: var(--success); width: 18px; height: 18px; margin-top: 2px; }

/* ── BIZ TYPE SELECTOR ── */
.biz-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.biz-type-btn { border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 20px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; color: var(--text-muted); background: var(--white); transition: var(--transition); cursor: pointer; box-shadow: var(--shadow-sm); }
.biz-type-btn:hover { border-color: var(--primary-border-focus); color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.biz-type-btn.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.biz-type-emoji { font-size: 32px; transition: var(--transition); }
.biz-type-btn:hover .biz-type-emoji { transform: scale(1.15); }

/* ── FAB ── */
.fab { position: fixed; bottom: 32px; right: 32px; width: 64px; height: 64px; border-radius: 50%; background: var(--primary-gradient); color: white; display: grid; place-items: center; box-shadow: 0 10px 25px rgba(79, 70, 229, 0.4); z-index: 100; transition: var(--transition); }
.fab:hover { transform: scale(1.1) rotate(90deg); box-shadow: 0 15px 35px rgba(79, 70, 229, 0.5); }
.fab svg { width: 28px; height: 28px; }

/* ── BULK BAR ── */
.bulk-bar { position: fixed; bottom: 0; left: var(--sidebar-w); right: 0; background: var(--text-main); color: white; padding: 16px 32px; align-items: center; gap: 20px; z-index: 150; box-shadow: 0 -10px 30px rgba(0,0,0,0.1); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); display: none; }
.bulk-bar.visible { display: flex; animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.bulk-bar-inner { display: flex; align-items: center; gap: 20px; width: 100%; }
.bulk-count { font-size: 16px; font-weight: 800; flex: 1; }

/* ── BALANCE PREVIEW ── */
.balance-preview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; }
.balance-label { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.balance-val { font-size: 22px; font-weight: 900; margin-top: 4px; letter-spacing: -0.02em; }
.balance-before .balance-val { color: var(--danger); }
.balance-after .balance-val { color: var(--success); }
.balance-arrow { color: var(--text-muted); font-size: 24px; opacity: 0.5; }

/* ── CHART BARS ── */
.bar-chart-simple { display: flex; align-items: flex-end; gap: 12px; height: 120px; padding-top: 10px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; border-radius: 6px 6px 0 0; min-height: 4px; transition: height 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.bar.primary { background: var(--primary-gradient); box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2); }
.bar.success { background: var(--success); }
.bar.amber   { background: var(--warning); }
.bar-lbl { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* ── MISC / UTILS ── */
.section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 18px 0 10px; }
.divider { height: 1px; background: var(--border); margin: 16px 0; }
.back-link { color: var(--text-muted); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px; transition: var(--transition); }
.back-link:hover { color: var(--primary); transform: translateX(-2px); }
.settings-max { max-width: 700px; display: flex; flex-direction: column; gap: 0; }
.card-gap { margin-top: 14px; }
.confirm-box { background: var(--surface); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.confirm-row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; }
.confirm-row-label { color: var(--text-muted); }
.confirm-row-val { font-weight: 600; }
.text-muted    { color: var(--text-muted); }
.text-primary  { color: var(--primary); }
.text-success  { color: var(--success); }
.text-danger   { color: var(--danger); }
.text-warning  { color: var(--warning); }
.font-bold     { font-weight: 800; }
.font-semi     { font-weight: 700; }
.text-sm       { font-size: 14px; }
.text-xs       { font-size: 12px; }
.text-lg       { font-size: 18px; }
.privacy-mask  { filter: blur(8px); user-select: none; pointer-events: none; opacity: 0.6; transition: var(--transition); }
.flex          { display: flex; }
.items-center  { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.flex-1 { flex: 1; }
.mt-4   { margin-top: 4px; }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }
.mt-20  { margin-top: 20px; }
.mb-8   { margin-bottom: 8px; }
.mb-16  { margin-bottom: 16px; }
.list-gap { display: flex; flex-direction: column; gap: 12px; }
.two-col-layout { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
.bg-muted { background: var(--surface); }

/* ── MENU TOGGLE (hamburger) ── */
.menu-toggle { display: none; width: 38px; height: 38px; border-radius: var(--radius-sm); place-items: center; color: var(--text-main); border: 1px solid var(--border); background: var(--white); flex-shrink: 0; }
.menu-toggle:hover { background: var(--surface); }
.menu-toggle svg { width: 20px; height: 20px; }

/* ── SIDEBAR OVERLAY ── */
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 99; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sidebar-overlay.open { display: block; animation: fadeIn 0.2s ease; }

/* ── KPI GRID VARIANTS ── */
.kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(3, 1fr); }
  .plan-cards { grid-template-columns: repeat(2, 1fr); }
  .two-col-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-left: 0; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; }
  .bulk-bar { left: 0; }
  .menu-toggle { display: grid; }
  .topbar-search { max-width: 220px; }
  .fab { bottom: 20px; right: 20px; }
  .toast-container { bottom: 20px; right: 16px; left: 16px; }
  .toast { max-width: 100%; }
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .quick-actions { grid-template-columns: repeat(3, 1fr); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header-actions { flex-wrap: wrap; gap: 8px; }
  .page-header-actions .btn { flex: 1; min-width: 130px; justify-content: center; }
  .biz-types { grid-template-columns: repeat(2, 1fr); }
  .plan-cards { grid-template-columns: 1fr; }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar-left { flex-direction: column; align-items: stretch; }
  .toolbar-right { width: 100%; }
  .toolbar-right .input, .toolbar-right input { width: 100% !important; max-width: 100% !important; }
  .search-bar { max-width: 100% !important; }
  .chips { flex-wrap: wrap; }
  .chip { font-size: 12px; padding: 6px 12px; }
  .topbar-search { display: none; }
  .privacy-text { display: none; }
  .settings-row { flex-wrap: wrap; gap: 10px; }
  .client-actions { display: none; }
  .client-item:hover .client-actions { display: none; }
  .kpi-value { font-size: 20px; }
  .summary-card-value { font-size: 1.2rem; }
  .page-header-title { font-size: 17px; }
  .card-body { padding: 12px 14px; }
  .card-header { padding: 12px 14px; }
  .modal-body { padding: 16px; gap: 12px; }
  .modal-footer { padding: 12px 16px; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .content { padding: 12px; }
  .topbar-title { font-size: 14px; }
  .page-header { padding: 14px 16px; }
  .page-header-actions .btn { min-width: unset; }
  .kpi-card { padding: 12px 14px; }
  .kpi-value { font-size: 18px; }
  .kpi-icon-wrap { width: 34px; height: 34px; }
  .summary-card { padding: 14px 16px; }
  .fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }
  .fab svg { width: 22px; height: 22px; }
  .modal { border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-height: 92vh; }
  .topbar-icon-btn { width: 30px; height: 30px; }
  .client-body { padding: 12px 14px; gap: 10px; }
  .reminder-check { padding: 12px 14px; }
  .reminder-body { padding: 12px 0; }
}

/* ── AUTH ── */
.auth-page { min-height: 100vh; background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; }
.auth-page::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 10% 20%, rgba(79, 70, 229, 0.05) 0%, transparent 50%), radial-gradient(circle at 90% 80%, rgba(79, 70, 229, 0.05) 0%, transparent 50%); pointer-events: none; }
.auth-card { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 440px; padding: 36px 32px; border: 1px solid var(--border); box-shadow: var(--shadow-lg); position: relative; z-index: 2; transition: var(--transition); }
.auth-card:hover { box-shadow: 0 24px 48px -10px rgba(0, 0, 0, 0.1); border-color: var(--border-focus); }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; }
.auth-logo-icon { width: 42px; height: 42px; background: var(--primary-gradient); border-radius: 14px; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: white; box-shadow: var(--shadow-glow); }
.auth-logo-name { font-size: 22px; font-weight: 900; color: var(--text-main); letter-spacing: -0.02em; }
.auth-title { font-size: 20px; font-weight: 800; color: var(--text-main); margin-bottom: 6px; text-align: center; letter-spacing: -0.02em; }
.auth-sub { font-size: 13.5px; color: var(--text-muted); margin-bottom: 22px; text-align: center; font-weight: 500; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-link { text-align: center; font-size: 13.5px; color: var(--text-muted); margin-top: 20px; font-weight: 500; }
.auth-link a { color: var(--primary); font-weight: 800; }
.auth-link a:hover { text-decoration: underline; }

/* ── PORTAL ── */
.portal-page { min-height: 100vh; background: var(--surface); }
.portal-header { background: var(--primary-gradient); padding: 40px 24px; text-align: center; color: white; box-shadow: var(--shadow-glow); }
.portal-header h1 { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; }
.portal-header p  { font-size: 15px; opacity: 0.9; margin-top: 8px; font-weight: 500; }
.portal-content { max-width: 520px; margin: 32px auto; padding: 0 24px; }

/* ── DROPDOWN ── */
.dropdown-list { position: absolute; z-index: 200; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; width: 100%; top: calc(100% + 8px); left: 0; padding: 8px; animation: slideDown 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.dropdown-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: var(--transition); border-radius: 10px; color: var(--text-main); }
.dropdown-item:hover { background: var(--primary-soft); color: var(--primary); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── GOOGLE AUTH BUTTON & DIALOG ── */
.btn-google { background: var(--white); border: 2px solid var(--border); color: var(--text-main); font-weight: 700; box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); border-radius: var(--radius-md); }
.btn-google:hover { background: var(--surface); border-color: var(--border-focus); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-google:active { transform: translateY(0); }
.google-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 0.3s ease; }
.google-overlay.open { display: flex; opacity: 1; }
.google-modal { background: var(--white); border-radius: var(--radius-lg); width: 100%; max-width: 440px; padding: 40px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3); transform: translateY(30px) scale(0.95); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative; border: 1px solid var(--border); }
.google-overlay.open .google-modal { transform: translateY(0) scale(1); }
.google-modal-close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); cursor: pointer; transition: var(--transition); background: var(--surface); }
.google-modal-close:hover { background: var(--danger-soft); color: var(--danger); transform: rotate(90deg); }
.google-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.google-logo-svg { width: 32px; height: 32px; }
.google-title { font-size: 22px; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; }
.google-subtitle { font-size: 15px; color: var(--text-muted); font-weight: 500; }
.google-accounts { display: flex; flex-direction: column; gap: 12px; margin: 32px 0; }
.google-account-item { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); background: var(--white); box-shadow: var(--shadow-sm); }
.google-account-item:hover { background: var(--surface); border-color: var(--primary-border-focus); transform: translateX(4px); box-shadow: var(--shadow-md); }
.google-account-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: var(--white); background: var(--primary-gradient); }
.google-account-info { display: flex; flex-direction: column; min-width: 0; }
.google-account-name { font-size: 16px; font-weight: 700; color: var(--text-main); }
.google-account-email { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.google-footer { font-size: 13px; color: var(--text-muted); text-align: center; line-height: 1.5; font-weight: 500; }
.google-footer a { color: var(--primary); font-weight: 700; }

/* ── INTL-TEL-INPUT PREMIUM OVERRIDES ── */
.iti {
  width: 100% !important;
  display: block !important;
}
.iti__dropdown-content, .iti__country-list {
  z-index: 10000 !important;
  background-color: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: inherit !important;
}
.iti__country {
  padding: 10px 14px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
  color: var(--text-main) !important;
}
.iti__country:hover, .iti__country.iti__highlight {
  background-color: var(--primary-soft) !important;
  color: var(--primary) !important;
}
.iti--disabled {
  pointer-events: none !important;
  opacity: 0.75 !important;
}



/* ── Títulos internos ── */
.page-header h1, .page-header h2, .page-header-title,
.topbar-title, .card-title, .modal-title,
.stat-value, .empty-title { font-family: 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }
.topbar-title { font-weight: 700; font-size: 17px; }
.card-title { font-size: 15px; font-weight: 700; }

/* ── Tarjetas resumen ── */
.page-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.summary-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.summary-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.summary-card-value {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.summary-card-value.danger  { color: var(--danger); }
.summary-card-value.success { color: var(--success); }
.summary-card-value.amber   { color: #D97706; }
.summary-card-sub {
  font-size: 12px;
  color: var(--text-hint);
  margin-top: 2px;
}
.summary-card.accent {
  background: linear-gradient(135deg, #4F46E5, #3730A3);
  border-color: transparent;
}
.summary-card.accent .summary-card-label,
.summary-card.accent .summary-card-sub { color: rgba(255,255,255,0.65); }
.summary-card.accent .summary-card-value { color: #fff; }

/* ── Date Picker ── */
.date-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1.5px solid var(--border);
  border-radius: 24px;
  padding: 0 14px;
  height: 42px;
  background: rgba(255,255,255,0.7);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-sizing: border-box;
}
.date-picker-wrap:focus-within {
  border-color: var(--primary-glow);
  box-shadow: 0 0 0 3px rgba(79,70,229,0.08);
}
.dp-sel {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-main);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 2px;
  text-align: center;
}
.dp-day  { width: 34px; }
.dp-month { width: 34px; }
.dp-year  { width: 50px; }
.dp-sep {
  color: var(--text-hint);
  font-size: 0.85rem;
  user-select: none;
  padding: 0 1px;
}

/* Ítems de los desplegables de sugerencias (buscar cliente / producto en
   fiados y abonos). El resaltado al pasar el mouse se hacía con
   onmouseover="this.style.background=..." dentro del HTML generado; el CSP sin
   'unsafe-inline' ignora esos atributos, y de todos modos un :hover es lo que
   corresponde para un efecto puramente visual. */
.sugg-item {
  cursor: pointer;
  transition: background var(--transition, .15s);
}
.sugg-item:hover {
  background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD V2 — nuevo diseño (estilo analytics del mockup)
   Componentes con prefijo dx- para no colisionar con el resto.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --dx-brand:#4B57E6;
  --dx-grad:linear-gradient(135deg,#5B67F0 0%,#4B57E6 55%,#3B45C7 100%);
  --dx-ok:#17B26A; --dx-ok-soft:#E4F7EE;
  --dx-bad:#F04438; --dx-bad-soft:#FEECEB;
  --dx-line:#EDEFF4;
  --dx-sh:0 8px 24px rgba(20,26,46,.06);
  --dx-sh-brand:0 14px 30px rgba(75,87,230,.28);
  --dx-r:24px;
}
/* Encabezado de página (título grande + fecha) */
.dx-page-title{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--text-main); }
.dx-page-sub{ font-size:13.5px; color:var(--text-muted); margin-top:3px; font-weight:500; }

/* Layout */
.dx-grid{ display:grid; grid-template-columns:1.62fr 1fr; gap:20px; align-items:start; }
.dx-col{ display:flex; flex-direction:column; gap:20px; min-width:0; }

/* KPIs */
.dx-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.dx-kpi{ background:var(--white); border-radius:var(--dx-r); padding:20px; box-shadow:var(--dx-sh); min-width:0; transition:var(--transition); }
.dx-kpi:hover{ transform:translateY(-3px); }
.dx-kpi-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
.dx-kpi-ic{ width:40px; height:40px; border-radius:12px; background:var(--primary-soft); color:var(--dx-brand); display:grid; place-items:center; }
.dx-kpi-ic svg{ width:20px; height:20px; }
.dx-kpi-ic.bad{ background:var(--dx-bad-soft); color:var(--dx-bad); }
.dx-delta{ display:inline-flex; align-items:center; gap:3px; font-size:11.5px; font-weight:800; padding:4px 9px; border-radius:99px; }
.dx-delta.up{ background:var(--dx-ok-soft); color:var(--dx-ok); }
.dx-delta.down{ background:var(--dx-bad-soft); color:var(--dx-bad); }
.dx-delta.neutral{ background:var(--surface); color:var(--text-muted); }
.dx-delta svg{ width:11px; height:11px; }
.dx-kpi.hero .dx-delta.neutral{ background:rgba(255,255,255,.2); color:#fff; }
.dx-kpi.hero .dx-delta.down{ background:rgba(255,255,255,.2); color:#fff; }
.dx-kpi-label{ font-size:13px; color:var(--text-muted); font-weight:600; }
.dx-kpi-val{ font-size:27px; font-weight:800; letter-spacing:-.02em; margin-top:3px; color:var(--text-main); }
.dx-kpi-note{ font-size:11.5px; color:var(--text-hint); margin-top:6px; }
.dx-kpi.hero{ background:var(--dx-grad); color:#fff; box-shadow:var(--dx-sh-brand); }
.dx-kpi.hero .dx-kpi-ic{ background:rgba(255,255,255,.18); color:#fff; }
.dx-kpi.hero .dx-kpi-label{ color:rgba(255,255,255,.82); }
.dx-kpi.hero .dx-kpi-val{ color:#fff; }
.dx-kpi.hero .dx-kpi-note{ color:rgba(255,255,255,.72); }
.dx-kpi.hero .dx-delta.up{ background:rgba(255,255,255,.2); color:#fff; }

/* Card v2 */
.dx-card{ background:var(--white); border-radius:var(--dx-r); box-shadow:var(--dx-sh); padding:22px; }
.dx-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; }
.dx-card-title{ font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--text-main); }
.dx-card-sub{ font-size:12.5px; color:var(--text-hint); margin-top:2px; }
.dx-link{ font-size:13px; font-weight:700; color:var(--dx-brand); white-space:nowrap; }
.dx-pick{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--text-muted); background:var(--surface); border-radius:99px; padding:7px 13px; }
.dx-pick svg{ width:14px; height:14px; }

/* Anillo (estado de cartera) */
.dx-ring-wrap{ display:flex; flex-direction:column; align-items:center; }
.dx-ring-box{ position:relative; width:186px; height:186px; }
.dx-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dx-ring-center b{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--text-main); }
.dx-ring-center span{ font-size:11.5px; color:var(--text-hint); font-weight:600; }
.dx-legend{ width:100%; margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.dx-leg-row{ display:flex; align-items:center; gap:11px; }
.dx-leg-dot{ width:11px; height:11px; border-radius:4px; flex-shrink:0; }
.dx-leg-name{ font-size:13.5px; font-weight:600; color:var(--text-muted); }
.dx-leg-val{ margin-left:auto; font-size:14px; font-weight:800; color:var(--text-main); }
.dx-leg-delta{ font-size:10.5px; font-weight:800; padding:3px 7px; border-radius:99px; }

/* Barras (cobros de la semana) */
.dx-bars{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; height:200px; padding-top:34px; position:relative; }
.dx-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; justify-content:flex-end; }
.dx-bar-pair{ display:flex; justify-content:center; align-items:flex-end; gap:5px; width:100%; height:100%; position:relative; }
.dx-bar{ width:18px; max-width:60%; border-radius:7px; transition:.3s; background:var(--primary-soft); }
.dx-bar.on{ background:var(--dx-grad); }
.dx-bar-col:hover .dx-bar{ filter:brightness(1.05); }
.dx-bar-x{ font-size:11.5px; color:var(--text-hint); font-weight:600; }
.dx-legend-inline{ display:flex; gap:18px; margin-top:6px; }
.dx-li{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:600; color:var(--text-muted); }
.dx-li i{ width:10px; height:10px; border-radius:3px; display:block; }
.dx-tip{ position:absolute; background:#181D2F; color:#fff; border-radius:12px; padding:8px 12px; font-size:11.5px; font-weight:700; top:0; left:50%; transform:translateX(-50%); white-space:nowrap; box-shadow:0 8px 20px rgba(0,0,0,.2); pointer-events:none; opacity:0; transition:.2s; }
.dx-bar-col:hover .dx-tip{ opacity:1; }

@media(max-width:1100px){ .dx-grid{ grid-template-columns:1fr; } }
@media(max-width:560px){ .dx-kpis{ grid-template-columns:1fr; } }