:root {
    --bg: #f5f7fb;
    --text: #0f172a;
    --card-bg: #ffffff;
    --muted: #6b7280;
    --primary: #2563eb;
    --primary-soft: #e7efff;
    --border: #e5e7eb;
    --shadow: 0 8px 24px rgba(15, 23, 42, .06);
    --shadow-soft: 0 10px 24px rgba(15, 23, 42, .05);
    --success: #16a34a;
    --danger: #dc2626;
    --neutral: #64748b;
    --brand-soft-bg: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    --radius: 12px;
    --radius-sm: 8px;
    --spacing: 16px;
    --ring: 0 0 0 3px rgba(37, 99, 235, .15);
    --button-gradient: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
}

[data-theme="dark"] {
    --bg: #0f1115;
    --text: #e6e8eb;
    --card-bg: #161a22;
    --muted: #9aa3af;
    --primary: #4c8dff;
    --primary-soft: #203455;
    --border: #2a2f3a;
    --shadow: none;
    --shadow-soft: none;
    --success: #4ade80;
    --danger: #f87171;
    --neutral: #9aa3af;
    --brand-soft-bg: linear-gradient(135deg, #12161f 0%, #1b2230 100%);
}

body {
    font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1180px;
    margin: 24px auto;
    padding: 0 18px;
}

header {
    background: var(--card-bg);
    padding: 20px 18px;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 18px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* nav */
.nav { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.nav .brand { font-weight: 700; font-size: 20px; }
.nav .nav-links a { color:var(--primary); text-decoration:none; margin-right:12px; padding:8px 12px; border-radius:8px; font-weight:600; transition: all .15s ease; }
.nav .nav-links a:hover { background:var(--primary-soft); transform: translateY(-1px); }
.nav .nav-links a.active { background:var(--primary); color:#fff; box-shadow: 0 6px 16px rgba(37, 99, 235, .2) }
.nav-actions { display:flex; align-items:center; gap:8px; }
.nav-actions #themeToggle { background:var(--primary-soft); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:20px; cursor:pointer; transition: filter .15s ease; }
.nav-actions #themeToggle:hover { filter:brightness(0.98); }
.nav-toggle { display:none; background:var(--primary); color:#fff; border:none; border-radius:6px; padding:6px 10px; cursor:pointer; }

@media (max-width: 768px){
  .nav { gap:8px; }
  .nav-toggle { display:block; }
  .nav .nav-links { display:none; width:100%; }
  .nav.open .nav-links { display:flex; flex-direction:column; gap:6px; }
  .nav .nav-links a { margin-right:0; }
}

.lead { color: var(--muted); margin-top: 8px; }

h1, h2, h3 { margin: 0 0 10px 0; }
h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 1.05rem; font-weight: 700; color: var(--text); }

.form-card,
.filters-card,
.dashboard,
.balance-card {
    background: var(--card-bg);
    padding: var(--spacing);
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--border);
}

.balance-card { text-align: center; background: var(--brand-soft-bg); }

/* (eliminado) estilos de KPIs ingresos/egresos/neto */

.balance-amount {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-top: 8px;
    transition: color 0.2s ease;
}

.balance-amount.positive { color: var(--success); }
.balance-amount.negative { color: var(--danger); }
.balance-amount.zero { color: var(--neutral); }

.form-card form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.form-card label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 6px;
}

.form-card input,
.form-card select,
.form-card button,
.filters-card input,
.filters-card select,
.filters-card button {
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.form-card input:focus-visible,
.form-card select:focus-visible,
.filters-card input:focus-visible,
.filters-card select:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}

.form-card button { background: var(--button-gradient); color:#fff; border:none; cursor:pointer; font-weight:600 }
.form-card button:hover { filter: brightness(0.98); transform: translateY(-1px); }
.filters-card button { background: var(--button-gradient); color:#fff; border:none; cursor:pointer; font-weight:600 }
.filters-card button:hover { filter: brightness(0.98); transform: translateY(-1px); }

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center
}

.charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.chart-card { border:1px solid var(--border); border-radius:10px; padding:12px; height: 380px; background: var(--card-bg); box-shadow: var(--shadow-soft) }
.chart-card canvas { width: 100% !important; height: 100% !important; }

.list-card { margin-top: 12px; border:1px solid var(--border); border-radius:10px; padding:12px; background: var(--card-bg); box-shadow: var(--shadow-soft) }

#txList {
    max-height: 360px;
    overflow: auto
}

 .tx-item { display:grid; grid-template-columns: 1fr auto; gap: 8px; align-items:center; padding:10px; border-bottom:1px solid var(--border); transition: background .15s ease; }
 .tx-item:hover { background: var(--primary-soft); }
 .tx-item .badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; margin-bottom:4px; }
 .tx-item .badge.income { background: rgba(40, 167, 69, 0.12); color: var(--success); }
 .tx-item .badge.expense { background: rgba(220, 53, 69, 0.12); color: var(--danger); }
 .tx-item .amount { font-weight:700; text-align:right; letter-spacing: -0.01em; }
 .tx-item .amount.income { color: var(--success); }
 .tx-item .amount.expense { color: var(--danger); }

.tx-item .meta { color: var(--muted); font-size:13px }

.muted { color: var(--muted); margin-top:8px }

.category-manager { display:grid; gap:10px; }
#catForm { display:flex; gap:10px; }
#catForm input { flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--text); }
#catForm input:focus-visible { outline:none; border-color: var(--primary); box-shadow: var(--ring); }
#catForm button { background: var(--button-gradient); color:#fff; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700 }
#catForm button:hover { filter:brightness(0.98); transform: translateY(-1px); }
.cat-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.cat-list li { background:var(--primary-soft); border:1px solid #e2e8ff; color:var(--text); padding:10px; border-radius:8px; }

/* method balances */
/* (eliminado) estilos de saldos por método */

/* responsive tweaks */
@media (max-width: 768px){
  .charts { grid-template-columns: 1fr; }
  #txList { max-height: unset; }
  .kpis { grid-template-columns: 1fr; }
}