:root {
  /* raw palette */
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1;
  --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155;
  --slate-800:#1e293b; --slate-900:#0f172a;
  --indigo-50:#eef2ff; --indigo-100:#e0e7ff; --indigo-300:#a5b4fc; --indigo-400:#818cf8;
  --indigo-500:#6366f1; --indigo-600:#4f46e5; --indigo-700:#4338ca; --indigo-900:#312e81;
  --emerald-50:#ecfdf5; --emerald-400:#34d399; --emerald-500:#10b981; --emerald-600:#059669; --emerald-700:#047857;
  --rose-400:#fb7185; --rose-500:#f43f5e; --rose-600:#e11d48; --rose-700:#be123c;
  --amber-300:#fcd34d; --amber-400:#fbbf24; --amber-700:#b45309; --amber-800:#92400e;

  /* semantic tokens — light theme (default) */
  --bg: var(--slate-50);
  --surface: #ffffff;
  --surface-alt: var(--slate-50);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text: var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-muted: var(--slate-400);
  --text-on-accent: #ffffff;

  --accent: var(--indigo-600);
  --accent-hover: var(--indigo-500);
  --accent-soft-bg: var(--indigo-50);
  --accent-soft-text: var(--indigo-700);

  --success-text: var(--emerald-700);
  --success-bg: var(--emerald-50);
  --success-solid: var(--emerald-600);
  --success-solid-hover: var(--emerald-500);

  --danger-text: var(--rose-700);
  --danger-bg: #fef2f2;
  --danger-solid: var(--rose-500);
  --danger-hover-text: var(--rose-600);

  --warn-text: var(--amber-700);
  --warn-bg: #fffbeb;
  --warn-border: var(--amber-300);

  --budget-track: var(--slate-100);
  --input-bg: #ffffff;
}

[data-theme="dark"] {
  --bg: #0b1120;
  --surface: #141b2d;
  --surface-alt: #101728;
  --border: #263244;
  --border-strong: #334155;
  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-on-accent: #ffffff;

  --accent: var(--indigo-500);
  --accent-hover: var(--indigo-400);
  --accent-soft-bg: rgba(99, 102, 241, 0.16);
  --accent-soft-text: var(--indigo-300);

  --success-text: var(--emerald-400);
  --success-bg: rgba(16, 185, 129, 0.14);
  --success-solid: var(--emerald-600);
  --success-solid-hover: var(--emerald-500);

  --danger-text: var(--rose-400);
  --danger-bg: rgba(244, 63, 94, 0.14);
  --danger-solid: var(--rose-500);
  --danger-hover-text: var(--rose-400);

  --warn-text: var(--amber-400);
  --warn-bg: rgba(217, 119, 6, 0.14);
  --warn-border: var(--amber-800);

  --budget-track: #263244;
  --input-bg: #0f1626;
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  transition: background-color .15s ease, color .15s ease;
}
a { color: inherit; }
header.topbar { background:var(--surface); border-bottom:1px solid var(--border); }
.header-inner {
  max-width:1152px; margin:0 auto; padding:12px 24px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.logo-nav { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.logo { font-weight:600; font-size:16px; color:var(--text); white-space:nowrap; text-decoration:none; }
nav.main-nav { display:flex; flex-wrap:wrap; gap:4px; }
nav.main-nav a {
  font-size:14px; font-weight:500; padding:6px 12px; border-radius:6px; color:var(--text-secondary); text-decoration:none;
}
nav.main-nav a:hover { background:var(--surface-alt); }
nav.main-nav a.active { background:var(--accent-soft-bg); color:var(--accent-soft-text); }
.user-box { display:flex; align-items:center; gap:12px; }
.user-name { font-size:14px; color:var(--text-secondary); }
.logout-btn, .theme-toggle-btn {
  border:1px solid var(--border-strong); background:var(--surface); border-radius:6px; padding:6px 12px;
  font-size:14px; font-weight:500; color:var(--text-secondary); cursor:pointer; text-decoration:none; display:inline-block;
}
.theme-toggle-btn { padding:6px 10px; line-height:1; font-size:15px; }
main.page { max-width:1152px; margin:0 auto; padding:24px; }
h1 { font-size:24px; font-weight:600; color:var(--text); margin:0; }
.subtitle { margin:4px 0 0; font-size:14px; color:var(--text-secondary); }
.page-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.month-picker { display:flex; align-items:center; gap:8px; }
.month-picker a.nav-btn {
  border:1px solid var(--border-strong); background:var(--surface); border-radius:6px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--text-secondary);
}
.month-picker span { min-width:120px; text-align:center; font-size:14px; font-weight:500; color:var(--text); }

.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
@media (max-width:720px) { .grid-3, .grid-2 { grid-template-columns:1fr; } }

.stat-label { font-size:12px; font-weight:500; color:var(--text-secondary); margin:0; }
.stat-value { font-size:24px; font-weight:600; margin:4px 0 0; }
.tone-emerald { color:var(--success-text); }
.tone-rose { color:var(--danger-text); }

.currency-toggle { display:flex; justify-content:flex-end; margin-bottom:16px; }
.currency-toggle .group { display:inline-flex; border:1px solid var(--border-strong); background:var(--surface); border-radius:8px; padding:2px; font-size:14px; }
.currency-toggle a { padding:4px 12px; border-radius:6px; font-weight:500; color:var(--text-secondary); text-decoration:none; }
.currency-toggle a.active { background:var(--accent); color:var(--text-on-accent); }

table { width:100%; border-collapse:collapse; font-size:14px; }
thead { background:var(--surface-alt); }
th { text-align:left; font-weight:500; color:var(--text-secondary); padding:8px 16px; }
th.right, td.right { text-align:right; }
td { padding:8px 16px; border-top:1px solid var(--border); color:var(--text); }
tfoot td { border-top:1px solid var(--border-strong); font-weight:600; }
.table-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.eliminar { font-size:12px; color:var(--text-muted); cursor:pointer; background:none; border:none; font-family:inherit; padding:0; }
.eliminar:hover { color:var(--danger-hover-text); }

form.entry-form {
  display:grid; grid-template-columns:repeat(5,1fr) auto; gap:12px; align-items:end;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:24px;
}
@media (max-width:900px) { form.entry-form { grid-template-columns:1fr 1fr; } }
.field label { display:block; font-size:12px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; }
.field input, .field select {
  width:100%; border:1px solid var(--border-strong); border-radius:8px; padding:8px; font-size:14px; font-family:inherit;
  color:var(--text); background:var(--input-bg);
}
.btn { border:none; border-radius:8px; padding:9px 16px; font-size:14px; font-weight:500; cursor:pointer; color:#fff; font-family:inherit; white-space:nowrap; }
.btn-indigo { background:var(--accent); }
.btn-indigo:hover { background:var(--accent-hover); }
.btn-emerald { background:var(--success-solid); }
.btn-emerald:hover { background:var(--success-solid-hover); }
.btn-block { width:100%; text-align:center; }

.quick-add-form { display:flex; flex-direction:column; gap:10px; margin-top:8px; }

.editar { font-size:12px; color:var(--accent); cursor:pointer; background:none; border:none; font-family:inherit; padding:0; margin-right:10px; }
.editar:hover { color:var(--accent-hover); }
tr.edit-row td { padding:12px 16px; background:var(--surface-alt); }
.inline-edit-form { display:flex; flex-wrap:wrap; gap:10px; align-items:end; }
.inline-edit-form .field { min-width:130px; flex:1; }

.cat-chip { display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); background:var(--surface); border-radius:8px; padding:8px 12px; font-size:14px; }
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
@media (max-width:720px) { .cat-grid { grid-template-columns:1fr 1fr; } }
.section-heading { font-size:14px; font-weight:600; color:var(--text-secondary); margin:20px 0 8px; }
.muted-note { color:var(--text-muted); font-size:14px; }

.rec-item { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:8px; }
.rec-name { font-size:14px; font-weight:500; }
.rec-inactive-badge { margin-left:4px; background:var(--surface-alt); color:var(--text-muted); font-size:12px; padding:2px 8px; border-radius:999px; }
.rec-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.badge-done { background:var(--success-bg); color:var(--success-text); font-size:12px; font-weight:500; padding:4px 12px; border-radius:999px; }
.badge-generate { background:var(--accent-soft-bg); color:var(--accent-soft-text); font-size:12px; font-weight:500; padding:6px 12px; border-radius:8px; border:none; cursor:pointer; font-family:inherit; }
.link-btn { font-size:12px; color:var(--text-muted); background:none; border:none; cursor:pointer; font-family:inherit; text-decoration:none; padding:0; }
.link-btn:hover { color:var(--text); }

.budget-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
.budget-bar-track { height:8px; width:100%; background:var(--budget-track); border-radius:999px; overflow:hidden; margin-top:8px; }
.budget-bar-fill { height:100%; background:var(--accent); border-radius:999px; }
.budget-bar-fill.over { background:var(--danger-solid); }
.budget-row-labels { display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); margin-top:8px; }
.budget-row-labels .over-label { color:var(--danger-text); font-weight:500; }

.loan-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:12px; }
.loan-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.loan-title { font-size:14px; font-weight:600; }
.loan-direction-badge { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:middle; }
.loan-direction-badge.lent { background:var(--success-bg); color:var(--success-text); }
.loan-direction-badge.borrowed { background:var(--danger-bg); color:var(--danger-text); }
.loan-meta { font-size:12px; color:var(--text-secondary); margin-top:2px; }
.loan-add-payment-form { display:flex; flex-wrap:wrap; gap:8px; align-items:end; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.loan-add-payment-form .field { min-width:120px; }
.loan-payments-list { list-style:none; margin:10px 0 0; padding:0; font-size:13px; }
.loan-payments-list li { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-top:1px solid var(--border); color:var(--text-secondary); }
.loan-payments-list .amt { color:var(--text); font-weight:500; }

.amber-note { background:var(--warn-bg); color:var(--warn-text); font-size:13px; padding:8px 12px; border-radius:8px; margin-top:12px; }
.error-note { background:var(--danger-bg); color:var(--danger-text); font-size:13px; padding:8px 12px; border-radius:8px; margin-bottom:16px; }
.success-note { background:var(--success-bg); color:var(--success-text); font-size:13px; padding:8px 12px; border-radius:8px; margin-bottom:16px; }

.auth-wrap { display:flex; min-height:100vh; align-items:center; justify-content:center; padding:16px; position:relative; }
.auth-theme-toggle { position:absolute; top:16px; right:16px; }
.auth-card { width:100%; max-width:360px; border-radius:16px; border:1px solid var(--border); background:var(--surface); padding:32px; }
.auth-card h1 { font-size:20px; color:var(--text); }
.auth-card .subtitle { margin-bottom:24px; }
.auth-field { margin-bottom:16px; }
.auth-field label { display:block; font-size:14px; font-weight:500; color:var(--text-secondary); margin-bottom:4px; }
.auth-field input {
  width:100%; border:1px solid var(--border-strong); border-radius:8px; padding:8px 12px; font-size:14px; font-family:inherit;
  color:var(--text); background:var(--input-bg);
}
.auth-submit {
  width:100%; border:none; border-radius:8px; padding:9px; font-size:14px; font-weight:500; color:#fff; background:var(--accent); cursor:pointer; font-family:inherit;
}
.auth-submit:hover { background:var(--accent-hover); }
.auth-note { margin-top:16px; font-size:13px; color:var(--text-secondary); }

.chart-box { height: 280px; margin-top: 8px; }