:root {
  --fondo: #ECEFEA;
  --panel: #FBFCFA;
  --tinta: #1B2A2F;
  --tinta-2: #55656A;
  --linea: #D5DBD3;
  --verde: #1F5C4A;
  --verde-claro: #DCEBE3;
  --ingreso: #2E7D5B;
  --gasto: #B3402F;
  --gasto-claro: #F4DEDA;
  --aviso: #B77A12;
  --aviso-claro: #F6EBD0;
  --idea: #2F5D8A;
  --idea-claro: #DDE8F3;
  --radio: 10px;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #121A1C; --panel: #1A2427; --tinta: #E6ECE8; --tinta-2: #9BAAA9;
    --linea: #2C3A3D; --verde: #63B594; --verde-claro: #1F3A31;
    --ingreso: #63B594; --gasto: #E2806F; --gasto-claro: #3B2723;
    --aviso: #E0AC4B; --aviso-claro: #3A2F17; --idea: #86B3E0; --idea-claro: #1F3042;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--tinta); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--idea); outline-offset: 2px; }

/* Cabecera */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--linea); background: var(--panel); }
.top h1 { font-family: var(--serif); font-size: 24px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.top .sub { color: var(--tinta-2); font-size: 13px; }
.top-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mes { display: flex; align-items: center; gap: 4px; }
.mes span { min-width: 150px; text-align: center; font-weight: 600; text-transform: capitalize; }

button, .btn { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--linea); background: var(--panel); color: var(--tinta); padding: 8px 14px; }
button:hover, .btn:hover { border-color: var(--verde); }
button.primario { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { button.primario { color: #0E1A15; } }
button.chico { padding: 4px 9px; font-size: 13px; }
button.peligro:hover { border-color: var(--gasto); color: var(--gasto); }

/* Estructura */
.wrap { display: grid; grid-template-columns: 340px 1fr; gap: 24px; padding: 24px 28px 48px; max-width: 1280px; margin: 0 auto; align-items: start; }
@media (max-width: 920px) { .wrap { grid-template-columns: 1fr; padding: 16px; } .top { padding: 14px 16px; } }
.panel { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; }
.panel + .panel { margin-top: 16px; }
.panel h2 { font-family: var(--serif); font-size: 18px; margin: 0 0 12px; }
aside { position: sticky; top: 16px; }
@media (max-width: 920px) { aside { position: static; } }

/* Formulario */
.campo { display: block; margin-bottom: 12px; }
.campo > span { display: block; font-size: 13px; color: var(--tinta-2); margin-bottom: 4px; }
input, select { font: inherit; width: 100%; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta); }
.tipo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.tipo button { padding: 9px; }
.tipo button[aria-pressed="true"].g { background: var(--gasto); border-color: var(--gasto); color: #fff; font-weight: 600; }
.tipo button[aria-pressed="true"].i { background: var(--ingreso); border-color: var(--ingreso); color: #fff; font-weight: 600; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aviso-form { font-size: 13px; color: var(--gasto); min-height: 18px; margin: 4px 0 8px; }

/* Pestañas */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; overflow-x: auto; }
.tabs button { border: none; border-radius: 8px 8px 0 0; background: transparent; padding: 10px 16px; color: var(--tinta-2); border-bottom: 3px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--verde); }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.kpi .et { font-size: 13px; color: var(--tinta-2); }
.kpi .val { font-family: var(--serif); font-size: 26px; font-weight: 700; margin-top: 2px; }
.kpi .det { font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; }
.kpi.saldo { background: var(--verde); border-color: var(--verde); color: #fff; }
.kpi.saldo .et, .kpi.saldo .det { color: rgba(255,255,255,.82); }
@media (prefers-color-scheme: dark) { .kpi.saldo { color: #0E1A15; } .kpi.saldo .et, .kpi.saldo .det { color: rgba(14,26,21,.75); } }
.neg { color: var(--gasto); } .pos { color: var(--ingreso); }
.kpi.saldo .neg { color: #FFD3CB; }

/* Gráficos */
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); margin-top: 6px; }
.grafico .leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .dos { grid-template-columns: 1fr; } }
.dos .panel + .panel { margin-top: 0; }

/* Tablas */
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; font-size: 13px; color: var(--tinta-2); padding: 8px 8px; border-bottom: 1px solid var(--linea); }
td { padding: 9px 8px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
td.der, th.der { text-align: right; }
.scroll { overflow-x: auto; }
.barra { height: 8px; border-radius: 4px; background: var(--linea); overflow: hidden; min-width: 80px; }
.barra > div { height: 100%; border-radius: 4px; background: var(--verde); }
.barra > div.alto { background: var(--aviso); }
.barra > div.exceso { background: var(--gasto); }
.vacio { padding: 28px 12px; text-align: center; color: var(--tinta-2); }

/* Consejos */
.consejo { display: grid; grid-template-columns: 5px 1fr; border-radius: 8px; overflow: hidden; margin-bottom: 10px; background: var(--fondo); }
.consejo .b { background: var(--idea); }
.consejo.alerta .b { background: var(--gasto); } .consejo.aviso .b { background: var(--aviso); } .consejo.ok .b { background: var(--ingreso); }
.consejo .c { padding: 11px 14px; }
.consejo strong { display: block; }
.consejo p { margin: 2px 0 0; color: var(--tinta-2); font-size: 14px; }

.filtros { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.filtros select { width: auto; }
.pie { color: var(--tinta-2); font-size: 12.5px; margin-top: 12px; }
.chip-tipo { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 99px; }
.chip-tipo.g { background: var(--gasto-claro); color: var(--gasto); }
.chip-tipo.i { background: var(--verde-claro); color: var(--ingreso); }
@media (prefers-reduced-motion: no-preference) { .barra > div { transition: width .35s ease; } }