/* Bolsillo */

:root {
  /* Paleta Bosque en claro. Cada paleta redefine estos tonos y sus equivalentes oscuros (--d-*). */
  --paper: #ECF1EE;
  --surface: #FFFFFF;
  --surface-2: #F3F6F4;
  --ink: #15201E;
  --muted: #5A6865;
  --line: #D7DFDB;
  --line-strong: #B7C3BE;
  --sidebar: #0C3F39;
  --on-sidebar: #F1F7F5;
  --on-sidebar-muted: #A9C6BF;
  --sidebar-mark: #7FD9B9;
  --accent: #0C5A50;
  --accent-text: #0B5B50;
  --on-accent: #FFFFFF;
  --in: #1A7A4A;
  --in-soft: #DDEFE4;
  --out: #B2361F;
  --out-soft: #F7E3DD;
  --credit: #95590A;
  --credit-soft: #F6E8D0;
  --transfer: #3A5C8E;
  --transfer-soft: #E0E8F3;
  --due-soft: #FBF1DE;
  --focus-ring: #2F7DF6;

  /* Los mismos tonos en oscuro. Los de gasto, ingreso, crédito y transferencia los comparten todas las paletas. */
  --d-paper: #0E1513;
  --d-surface: #151F1C;
  --d-surface-2: #1B2723;
  --d-ink: #E4ECE9;
  --d-muted: #9AABA6;
  --d-line: #26332F;
  --d-line-strong: #3A4A45;
  --d-sidebar: #0A2622;
  --d-on-sidebar: #EAF4F1;
  --d-on-sidebar-muted: #8FB0A8;
  --d-sidebar-mark: #6FD1AE;
  --d-accent: #5DBBA6;
  --d-accent-text: #7ACDB9;
  --d-on-accent: #06201B;
  --d-in: #62C491;
  --d-in-soft: #16352A;
  --d-out: #F08B73;
  --d-out-soft: #3B211B;
  --d-credit: #E3A94F;
  --d-credit-soft: #372A15;
  --d-transfer: #92B3E6;
  --d-transfer-soft: #1B2A40;
  --d-due-soft: #2E2716;
  --d-focus-ring: #7FB2FF;

  --font-ui: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Bricolage Grotesque", "Instrument Sans", system-ui, "Segoe UI", sans-serif;
  color-scheme: light;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
/* Reserva el espacio de la barra de desplazamiento para que nada se corra al pasar de una pantalla corta a una larga. */
html { scrollbar-gutter: stable; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-text); text-underline-offset: 2px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; line-height: 1.15; }
.pos { color: var(--in); }
.neg { color: var(--out); }
.hint { margin: 0; color: var(--muted); font-size: 13px; }
.optional { color: var(--muted); font-size: 13px; font-weight: 400; }
.lede { max-width: 62ch; margin: 6px 0 0; color: var(--muted); }
.empty { margin: 8px 0; color: var(--muted); }

/* Estructura */

.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px 14px;
  background: var(--sidebar);
  color: var(--on-sidebar);
}
.wordmark {
  margin: 0;
  padding: 0 10px;
  color: inherit;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  text-decoration: none;
}
.btn.btn--new { margin: 0 4px; background: var(--sidebar-mark); color: #06241F; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--on-sidebar-muted);
  font-weight: 500;
  text-decoration: none;
}
.nav a:hover { background: rgb(255 255 255 / 0.06); color: var(--on-sidebar); }
.nav a[aria-current="page"] {
  background: rgb(255 255 255 / 0.1);
  color: var(--on-sidebar);
  box-shadow: inset 3px 0 0 var(--sidebar-mark);
}
.sidebar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 12px 10px 0;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 14px;
}
.sidebar-foot a {
  overflow: hidden;
  color: var(--on-sidebar);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-foot a:hover { text-decoration: underline; }
.sidebar-foot form { margin: 0; }
.sidebar-foot .linkbtn { color: var(--on-sidebar-muted); }
.main { width: 100%; max-width: 1160px; padding: 32px clamp(16px, 4vw, 48px) 72px; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    z-index: 20;
    height: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 14px 6px;
  }
  .wordmark { padding: 0; font-size: 22px; }
  .btn.btn--new { grid-column: 3; grid-row: 1; margin: 0; padding: 7px 12px; }
  .sidebar-foot { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0; padding: 0; border: 0; }
  .sidebar-foot a { display: none; }
  .nav { grid-column: 1 / -1; flex-direction: row; gap: 4px; margin: 0 -14px; padding: 0 14px 4px; overflow-x: auto; scrollbar-width: none; }
  .nav a { padding: 6px 10px; white-space: nowrap; }
  .nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--sidebar-mark); }
  .main { padding-top: 22px; }
}

/* Al cambiar de sección deslizando, la pantalla se va hacia un lado y la nueva entra desde el otro.
   El recorte de lado evita que el movimiento haga aparecer una barra de desplazamiento. */

.shell { overflow-x: clip; }
.main.leaving-next { animation: section-leave-next 0.12s ease-in both; }
.main.leaving-prev { animation: section-leave-prev 0.12s ease-in both; }
.main.entering-next { animation: section-enter-next 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.main.entering-prev { animation: section-enter-prev 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes section-leave-next { to { opacity: 0; transform: translateX(-16px); } }
@keyframes section-leave-prev { to { opacity: 0; transform: translateX(16px); } }
@keyframes section-enter-next { from { opacity: 0; transform: translateX(20px); } }
@keyframes section-enter-prev { from { opacity: 0; transform: translateX(-20px); } }
@media (prefers-reduced-motion: reduce) {
  .main.leaving-next, .main.leaving-prev, .main.entering-next, .main.entering-prev { animation: none; }
}

/* Botones y avisos */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { filter: none; border-color: var(--ink); }
.btn--quiet { background: transparent; color: var(--muted); }
.btn--quiet:hover { filter: none; background: var(--surface-2); color: var(--ink); }
.btn--quiet-danger:hover { color: var(--out); }
.btn--danger { background: transparent; border-color: currentColor; color: var(--out); }
.btn--danger:hover { filter: none; background: var(--out-soft); }
.btn--small { padding: 5px 10px; border-radius: 6px; font-size: 13px; }
.btn--block { width: 100%; padding: 12px 16px; }
.linkbtn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.flashes { display: grid; gap: 8px; margin: 0 0 22px; }
.flash {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--surface);
}
.flash--error { border-color: transparent; border-left-color: var(--out); background: var(--out-soft); }
.flash--info { border-left-color: var(--transfer); }

/* Encabezados */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 26px;
}
.page-head h1 { margin: 0; font-size: clamp(30px, 4vw, 42px); font-weight: 700; letter-spacing: -0.03em; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.section-title { margin: 0 0 12px; font-size: 19px; font-weight: 700; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 6px; }
.section-head h2 { margin: 0; font-size: 20px; font-weight: 700; }
.section-head a { font-size: 14px; font-weight: 600; }

.month-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 22px; }
.month-head h1 { margin: 0; font-size: clamp(38px, 6vw, 64px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
@media (max-width: 560px) {
  /* El nombre del mes ocupa su propia línea y las flechas quedan juntas debajo. */
  .month-head h1 { flex-basis: 100%; order: -1; font-size: 42px; }
}
.month-step {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
}
.month-step:hover { border-color: var(--ink); }
.month-today { margin-left: 4px; font-size: 14px; font-weight: 600; }
.month-switch { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.month-switch .month-step { width: 32px; height: 32px; font-size: 18px; }
.month-switch-label { min-width: 9.5em; font-weight: 600; text-align: center; }

/* Balance del mes */

.flow {
  margin-bottom: 34px;
  padding: 26px clamp(18px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.flow-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(8ch, auto); align-items: center; gap: 16px; }
.flow-row + .flow-row { margin-top: 12px; }
.flow-label { color: var(--muted); font-weight: 600; }
.flow-track { height: 34px; overflow: hidden; border-radius: 7px; background: var(--surface-2); }
.flow-bar {
  width: var(--w);
  height: 100%;
  border-radius: 7px;
  transform-origin: left center;
  animation: flow-grow 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.flow-row--in .flow-bar { background: var(--in); }
.flow-row--out .flow-bar { background: var(--out); animation-delay: 0.08s; }
.flow-amount {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.6vw, 28px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}
.flow-result { margin: 20px 0 0; font-size: 17px; }
.flow-projection { margin: 4px 0 0; color: var(--muted); }
@keyframes flow-grow { from { transform: scaleX(0); } }
@media (max-width: 560px) {
  .flow-row { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .flow-track { grid-column: 1 / -1; grid-row: 2; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-bar { animation: none; }
}

.onboarding { margin-bottom: 22px; padding: 18px 22px; border-radius: 14px; background: var(--in-soft); }
.onboarding h2 { margin: 0 0 8px; font-size: 18px; }
.onboarding ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; }

/* Resumen */

.dash { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); align-items: start; gap: 36px; }
.dash-main { display: grid; gap: 34px; min-width: 0; }
.rail {
  display: grid;
  gap: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.rail > section + section { padding-top: 22px; border-top: 1px solid var(--line); }
.rail h2 { margin: 0 0 12px; font-size: 17px; font-weight: 700; }
.rail .section-head { margin-bottom: 8px; }
.rail .section-head h2 { margin: 0; font-size: 17px; }
@media (max-width: 1020px) {
  .dash { grid-template-columns: 1fr; }
}

.due { padding: 16px 18px 6px; border-radius: 14px; background: var(--due-soft); }
.due .sched { border-color: rgb(0 0 0 / 0.08); }

.tx-list, .sched-list, .bars, .legend, .balances, .cat-list, .account-list { margin: 0; padding: 0; list-style: none; }

.tx {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}
.tx:last-child { border-bottom: 0; }
.tx-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.tx-body { min-width: 0; }
.tx-desc {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.tx-desc:hover { text-decoration: underline; }
.tx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 2px; color: var(--muted); font-size: 13px; }
.tx-amount { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; white-space: nowrap; }
.tx--ingreso .tx-amount { color: var(--in); }
.tx--transferencia .tx-amount { color: var(--transfer); }

.pill {
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}
.pill--credito { border-color: transparent; background: var(--credit-soft); color: var(--credit); }
.pill--transferencia { border-color: transparent; background: var(--transfer-soft); color: var(--transfer); }
.pill--auto { border-color: transparent; background: var(--in-soft); color: var(--in); }
.pill--intl { border-color: transparent; background: var(--transfer-soft); color: var(--transfer); }

/* Cupos de una cuenta: nacional e internacional de una tarjeta, o saldo y línea de crédito de una cuenta corriente */
.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 28px; }
.limit { display: grid; align-content: start; gap: 6px; }
.limit-title { font-size: 13px; font-weight: 700; }
.limit-figures { display: grid; gap: 2px; margin: 0; }
.limit-figures div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.limit-figures dt { color: var(--muted); }
.limit-figures dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.limit .meter { grid-column: auto; margin-top: 4px; }
.sched .tx-amount .hint { display: block; font-weight: 500; }

.cards-debt { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.cards-debt li { display: grid; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.cards-debt li:last-child { padding-bottom: 0; border-bottom: 0; }
.card-debt-name { font-weight: 700; }

.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 14px; }
.bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.bar-value .hint { display: inline-block; min-width: 3.2ch; margin-left: 8px; font-weight: 400; text-align: right; }
.bar-note { grid-column: 1 / -1; margin-top: 1px; }
.bar-track { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.bar-fill { display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--c); }

.stack-bar { display: flex; gap: 2px; height: 14px; margin-bottom: 12px; overflow: hidden; border-radius: 4px; }
.stack-bar span { width: var(--w); background: var(--c); }
.method-debito { --c: var(--accent); }
.method-credito { --c: var(--credit); }
.method-efectivo { --c: var(--muted); }
.method-transferencia { --c: var(--transfer); }
.method-otro { --c: var(--line-strong); }
.legend { display: grid; gap: 6px; font-size: 14px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.legend-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.legend-inline { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.legend-inline .swatch:not(:first-child) { margin-left: 10px; }

.balances li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.balances li:last-child { border-bottom: 0; }
.balances .hint { display: block; font-size: 12px; }
.balance-value { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; white-space: nowrap; }

.hist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; height: 132px; }
.hist-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
}
.hist-col:hover { background: var(--surface-2); }
.hist-col.is-current { color: var(--ink); font-weight: 700; }
.hist-bars { display: flex; flex: 1; align-items: flex-end; justify-content: center; gap: 3px; width: 100%; }
.hist-bars span { width: 9px; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; }
.hist-bars .in { background: var(--in); }
.hist-bars .out { background: var(--out); }
.hist-label { font-size: 12px; }

/* Programados */

.sched {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.sched:last-child { border-bottom: 0; }
.sched-date {
  display: grid;
  justify-items: center;
  padding: 5px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  line-height: 1.05;
}
.sched-date.is-due { border-color: transparent; background: var(--credit-soft); color: var(--credit); }
.sched-day { font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.sched-month { color: inherit; font-size: 12px; opacity: 0.8; }
.sched-actions { display: flex; flex-wrap: wrap; grid-column: 2 / -1; gap: 6px; }
.sched-actions form { margin: 0; }
.paused { margin-top: 40px; opacity: 0.8; }

/* Movimientos */

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.filters input, .filters select { width: auto; padding: 7px 10px; font-size: 14px; }
.filters-search { flex: 1 1 220px; }
.filters select { flex: 0 1 auto; max-width: 220px; }
.filters-clear { font-size: 14px; font-weight: 600; }
.js .filters-submit { display: none; }

.totals { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 26px; }
.totals dt { color: var(--muted); font-size: 13px; }
.totals dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.totals-note { margin: -18px 0 22px; }

.day + .day { margin-top: 26px; }
.day-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 2px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.day-net { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 600; }

.empty-block { padding: 36px 24px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; }
.empty-block p { margin: 0 0 6px; }
.empty-block .btn { margin-top: 12px; }

/* Formularios */

.form { max-width: 660px; }
.field { display: grid; align-content: start; gap: 6px; min-width: 0; margin-bottom: 18px; }
.field > label, .choice > legend { font-size: 14px; font-weight: 600; }
.field-note { max-width: 62ch; margin: -6px 0 18px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; }
input[type="text"], input[type="password"], input[type="search"], input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
textarea { resize: vertical; }
input[type="color"] {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.choice { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.choice > legend { margin-bottom: 8px; padding: 0; }
.segmented { display: flex; flex-wrap: wrap; gap: 6px; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented label {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.segmented label:hover { border-color: var(--ink); }
.segmented input:checked + label { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.segmented input:focus-visible + label { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.segmented--kind label { padding: 10px 20px; font-size: 16px; }
.segmented--kind input[value="gasto"]:checked + label { border-color: var(--out); background: var(--out); }
.segmented--kind input[value="ingreso"]:checked + label { border-color: var(--in); background: var(--in); }
.segmented--kind input[value="transferencia"]:checked + label { border-color: var(--transfer); background: var(--transfer); }

.amount-wrap {
  display: flex;
  align-items: center;
  padding-left: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}
.amount-wrap:focus-within { border-color: var(--ink); outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.amount-symbol { color: var(--muted); font-family: var(--font-display); font-size: 28px; font-weight: 600; }
.amount-wrap .amount-input {
  padding: 8px 12px 8px 6px;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: 36px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.amount-wrap .amount-input:focus-visible { outline: none; }

.inline-pair { display: grid; grid-template-columns: 80px 1fr; gap: 8px; }
.check-field { display: flex; align-items: flex-start; gap: 10px; max-width: 62ch; margin: 0 0 20px; }
.check-field input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.check-field label { font-weight: 600; }
.check { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 14px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.danger-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 660px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.danger-zone form { margin: 0; }
.danger-zone .hint { flex-basis: 100%; }

/* Cuentas */

.account-list { border-top: 2px solid var(--ink); }
.account {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  align-items: center;
  gap: 10px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.account-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.account-name:hover { text-decoration: underline; }
.account-main .hint { display: block; }
.account-figures { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 32px; }
.account-figures div { display: grid; text-align: right; }
.account-figures strong { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 650; }
.meter { grid-column: 2; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface-2); }
.meter span { display: block; width: var(--w); height: 100%; background: var(--credit); }
.account-actions { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 16px; font-size: 14px; font-weight: 600; }
.account.is-archived { opacity: 0.6; }
@media (max-width: 640px) {
  .account { grid-template-columns: 1fr; }
  .account-figures { justify-content: flex-start; }
  .account-figures div { text-align: left; }
  .meter { grid-column: 1; }
}

/* Categorías */

.cat-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; gap: 32px; }
.cat-group > summary,
.cat-archived > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.cat-group > summary::-webkit-details-marker,
.cat-archived > summary::-webkit-details-marker { display: none; }
.cat-group > summary::before,
.cat-archived > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.cat-group[open] > summary::before,
.cat-archived[open] > summary::before { transform: rotate(45deg); }
.cat-group > summary { padding: 4px 0 8px; border-bottom: 2px solid var(--ink); }
.cat-group[open] > summary { margin-bottom: 12px; }
.cat-group > summary .section-title { margin: 0; }
.cat-group > summary:hover .section-title { text-decoration: underline; text-underline-offset: 3px; }
.cat-archived { margin-top: 16px; }
.cat-archived > summary { padding: 4px 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.cat-archived > summary:hover { color: var(--ink); }
.cat-archived[open] > summary { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
  .cat-group > summary::before, .cat-archived > summary::before { transition: none; }
}
.cat-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
}
.cat-add input[type="text"] { padding: 7px 10px; }
.cat { display: flex; align-items: center; gap: 4px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.cat form { margin: 0; }
.cat-edit { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; }
.cat-edit input[type="color"] { width: 26px; height: 26px; border-radius: 6px; }
.cat-edit input[type="text"] { padding: 6px 8px; border-color: transparent; background: transparent; }
.cat-edit input[type="text"]:hover, .cat-edit input[type="text"]:focus { border-color: var(--line-strong); background: var(--surface); }
.cat-usage { white-space: nowrap; }
.js .cat-edit:not(.is-dirty) .cat-save { display: none; }
.cat.is-archived .cat-edit input[type="text"] { color: var(--muted); }

/* Acceso */

.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; }
.auth-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 6vw, 72px);
  background: var(--sidebar);
  color: var(--on-sidebar);
}
.auth-intro .wordmark { padding: 0; font-size: clamp(44px, 7vw, 92px); }
.auth-tagline {
  max-width: 18ch;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.auth-points { display: grid; gap: 10px; max-width: 42ch; margin: 0; padding: 0; color: var(--on-sidebar-muted); list-style: none; }
.auth-points li { position: relative; padding-left: 18px; }
.auth-points li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--sidebar-mark);
}
.auth-panel { align-self: center; width: 100%; max-width: 420px; margin: 0 auto; padding: 40px 24px; }
.auth-panel h1 { margin: 0 0 20px; font-size: 32px; letter-spacing: -0.03em; }
.auth-switch { margin-top: 20px; color: var(--muted); }
@media (max-width: 820px) {
  .auth { grid-template-columns: 1fr; }
  .auth-intro { gap: 8px; padding: 24px; }
  .auth-intro .wordmark { font-size: 40px; }
  .auth-tagline { margin: 0; font-size: 20px; }
  .auth-points { display: none; }
}

.settings { display: grid; gap: 40px; max-width: 520px; }
.settings .actions { margin-top: 12px; }
.backup-restore { margin-top: 22px; }
input[type="file"] { max-width: 100%; font: inherit; }

.boot { margin: 40vh auto 0; padding: 0 24px; color: var(--muted); text-align: center; }
.auth-note { margin-top: 18px; }
.sidebar-foot .linkbtn { font-size: 14px; }

/* Teléfonos: nada debe obligar a la página a ser más ancha que la pantalla */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.main { min-width: 0; }
.cat-columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.cat { flex-wrap: wrap; }
.cat-edit { flex: 1 1 220px; }
.cat-edit input[type="text"],
.cat-add input[type="text"] { flex: 1; min-width: 0; }
input[type="file"],
select { max-width: 100%; }
input[type="file"] { width: 100%; }
/* Columnas que pueden angostarse aunque su contenido (un selector con opciones largas, un campo de archivo) pida más ancho. */
.field,
.settings { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 520px) {
  /* Categorías: nombre a lo ancho y las acciones en una segunda línea, alineadas con el nombre. */
  .cat { padding: 6px 0 8px; }
  .cat-edit { flex-basis: 100%; }
  .cat-edit + .btn { margin-left: 30px; }
}
@media (max-width: 1020px) {
  .dash { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  /* Una sola columna que se puede angostar; el encabezado no se estira aunque la página sea corta. */
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }
  .main {
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 48px));
    padding-left: max(16px, env(safe-area-inset-left));
  }
  /* Safari acerca la página al tocar un campo con letra menor a 16 px y no vuelve a su tamaño. */
  input:not([type="color"]):not([type="checkbox"]):not([type="radio"]):not(.amount-input),
  select,
  .filters select,
  textarea { font-size: 16px; }
  /* En iPhone las fechas tienen un ancho mínimo propio que puede salirse de la columna. */
  input[type="date"] { min-width: 0; min-height: 45px; -webkit-appearance: none; appearance: none; text-align: left; }
  input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}

@media (max-width: 820px) {
  .auth-intro { padding-top: max(24px, env(safe-area-inset-top)); }
  .auth-panel { padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); }
}

@media (max-width: 380px) {
  .btn.btn--new { padding: 6px 10px; font-size: 14px; }
  .month-head h1 { font-size: 36px; }
  .totals { gap: 10px 24px; }
  .totals dd { font-size: 21px; }
  .segmented--kind label { padding: 9px 14px; font-size: 15px; }
}

/* Gastos: gráfico de participación, lista de categorías y presupuestos */

/* El gráfico se queda arriba y solo se desplazan las categorías. --sticky-top lo pone
   justo debajo de la barra de secciones cuando esta va arriba (teléfonos). */
.spend {
  position: sticky;
  top: var(--sticky-top, 14px);
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 18px 36px;
  margin-bottom: 16px;
  padding: 10px 0 14px;
  background: var(--paper);
  box-shadow: 0 12px 14px -14px rgb(0 0 0 / 0.4);
}
.spend--wide { grid-template-columns: minmax(0, 1fr); }
.spend-aside { display: grid; align-content: center; gap: 12px; min-width: 0; }
.spend-totals { margin: 0; }
.spend-chart { min-width: 0; }
.spend-svg { display: block; width: 100%; height: auto; }
.slice { transition: opacity 0.15s ease; }
.slice path { stroke: var(--paper); stroke-width: 2; }
.slice.is-dim, .spend-seg.is-dim { opacity: 0.28; }
.slice:hover, .spend-seg:hover { opacity: 0.82; }
.spend-center-value { fill: var(--ink); font-family: var(--font-display); font-size: 26px; font-variant-numeric: tabular-nums; font-weight: 700; }
.spend-center-label { fill: var(--muted); font-size: 11px; }
.spend-stack { display: flex; gap: 3px; width: 100%; height: 52px; }
.spend-seg { width: var(--w); min-width: 6px; border-radius: 8px; background: var(--c); transition: opacity 0.15s ease; }

.spend-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.spend-item { border-bottom: 1px solid var(--line); }
.spend-item:last-child { border-bottom: 0; }
.spend-link { display: grid; grid-template-columns: 12px minmax(0, 1fr) 4ch auto; align-items: center; gap: 6px 14px; padding: 11px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.spend-link:hover { background: var(--surface-2); }
.spend-item.is-selected .spend-link { background: var(--surface); box-shadow: inset 3px 0 0 var(--c); }
.spend-dot { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.spend-name { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.spend-share { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
.spend-amount { font-variant-numeric: tabular-nums; font-weight: 650; white-space: nowrap; }
.spend-budget { display: grid; gap: 4px; padding: 0 10px 12px; }

.budget { margin: 0 0 26px; padding: 18px 20px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.budget h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 20px; }
.budget .lede { margin-bottom: 14px; }
.budget-form { max-width: 420px; }

@media (max-width: 700px) {
  .spend { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
  .spend-chart { width: 100%; max-width: min(240px, 34vh); }
  .spend--wide .spend-chart { max-width: none; }
  .spend-totals { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .slice, .spend-seg { transition: none; }
}

/* Apariencia: muestra de cada paleta en Ajustes */

.palette-swatch { display: inline-flex; width: 36px; height: 14px; margin-right: 8px; overflow: hidden; border: 1px solid rgb(0 0 0 / 0.14); border-radius: 4px; vertical-align: -2px; }
.palette-swatch i { flex: 1; }

/* Paletas de colores (Ajustes → Apariencia). Bosque es la de :root; cada una trae sus tonos claros y oscuros. */

:root[data-palette="indigo"] {
  --paper: #EEF0F8;
  --surface-2: #F2F4FB;
  --ink: #161B2E;
  --muted: #5B6480;
  --line: #DADFEF;
  --line-strong: #B6BDD6;
  --sidebar: #1F2657;
  --on-sidebar: #EFF1FB;
  --on-sidebar-muted: #A9B2DC;
  --sidebar-mark: #9DB0FF;
  --accent: #333E96;
  --accent-text: #333E96;
  --due-soft: #F3EDDD;
  --d-paper: #0D1020;
  --d-surface: #151A2E;
  --d-surface-2: #1C2238;
  --d-ink: #E5E8F5;
  --d-muted: #A0A8C6;
  --d-line: #262C44;
  --d-line-strong: #3A4262;
  --d-sidebar: #0A0E22;
  --d-on-sidebar: #EAEDFA;
  --d-on-sidebar-muted: #99A3CE;
  --d-sidebar-mark: #93A6FF;
  --d-accent: #8C9BF0;
  --d-accent-text: #A3B0F5;
  --d-on-accent: #10152E;
  --d-due-soft: #2C2718;
}

:root[data-palette="burdeo"] {
  --paper: #F6EFF0;
  --surface-2: #FAF3F4;
  --ink: #241419;
  --muted: #6B565B;
  --line: #E7D9DC;
  --line-strong: #CBB3B8;
  --sidebar: #3E1230;
  --on-sidebar: #FBF0F4;
  --on-sidebar-muted: #CFA5B6;
  --sidebar-mark: #E3B04B;
  --accent: #7C2B4E;
  --accent-text: #7C2B4E;
  --due-soft: #F7EEDA;
  --d-paper: #150E11;
  --d-surface: #1D1417;
  --d-surface-2: #251A1E;
  --d-ink: #F0E4E7;
  --d-muted: #B29CA2;
  --d-line: #33232A;
  --d-line-strong: #4A343C;
  --d-sidebar: #240B18;
  --d-on-sidebar: #F7E9EC;
  --d-on-sidebar-muted: #C69FAA;
  --d-sidebar-mark: #E3B04B;
  --d-accent: #E2748C;
  --d-accent-text: #EC8DA1;
  --d-on-accent: #240B18;
  --d-due-soft: #2F2716;
}

:root[data-palette="grafito"] {
  --paper: #EFEFEC;
  --surface-2: #F5F5F2;
  --ink: #1A1C1B;
  --muted: #5E615F;
  --line: #DEDED9;
  --line-strong: #BCBDB7;
  --sidebar: #23262A;
  --on-sidebar: #F2F3F1;
  --on-sidebar-muted: #A9AEAF;
  --sidebar-mark: #E0A93C;
  --accent: #3F4A52;
  --accent-text: #3B4650;
  --due-soft: #F6EFDC;
  --d-paper: #101211;
  --d-surface: #181B1A;
  --d-surface-2: #1F2322;
  --d-ink: #E8EAE8;
  --d-muted: #A2A7A5;
  --d-line: #2A2E2D;
  --d-line-strong: #3E4442;
  --d-sidebar: #15181A;
  --d-on-sidebar: #EDEFEE;
  --d-on-sidebar-muted: #9DA3A4;
  --d-sidebar-mark: #E7B354;
  --d-accent: #9FB0B8;
  --d-accent-text: #B3C3CA;
  --d-on-accent: #14181A;
  --d-due-soft: #2E2716;
}

:root[data-palette="arena"] {
  --paper: #F4EFE6;
  --surface-2: #FAF5EC;
  --ink: #241D12;
  --muted: #6B6151;
  --line: #E6DCCB;
  --line-strong: #C7BBA5;
  --sidebar: #3B2A18;
  --on-sidebar: #F7F0E5;
  --on-sidebar-muted: #CBB79B;
  --sidebar-mark: #E8B45C;
  --accent: #8A5A1E;
  --accent-text: #85571A;
  --due-soft: #F6E9CF;
  --d-paper: #14110C;
  --d-surface: #1C1813;
  --d-surface-2: #241F18;
  --d-ink: #EFE7DA;
  --d-muted: #B0A492;
  --d-line: #2F2920;
  --d-line-strong: #47402F;
  --d-sidebar: #221A10;
  --d-on-sidebar: #F3EADC;
  --d-on-sidebar-muted: #C0AE93;
  --d-sidebar-mark: #E8B45C;
  --d-accent: #D9A159;
  --d-accent-text: #E3B06D;
  --d-on-accent: #221A10;
  --d-due-soft: #322816;
}

:root[data-palette="lavanda"] {
  --paper: #F1EEF8;
  --surface-2: #F6F3FC;
  --ink: #1E1729;
  --muted: #635B75;
  --line: #E2DCF0;
  --line-strong: #C2B8DA;
  --sidebar: #362459;
  --on-sidebar: #F3EFFB;
  --on-sidebar-muted: #BCA9DF;
  --sidebar-mark: #C3A5F5;
  --accent: #5B3E9E;
  --accent-text: #59399D;
  --due-soft: #F3EBDA;
  --d-paper: #110E1A;
  --d-surface: #191426;
  --d-surface-2: #211B30;
  --d-ink: #E9E3F5;
  --d-muted: #A79CC0;
  --d-line: #2B2340;
  --d-line-strong: #40355C;
  --d-sidebar: #1D1233;
  --d-on-sidebar: #EFE9FA;
  --d-on-sidebar-muted: #B6A6D8;
  --d-sidebar-mark: #C3A5F5;
  --d-accent: #A88DF0;
  --d-accent-text: #B79FF5;
  --d-on-accent: #1D1233;
  --d-due-soft: #2E2716;
}

:root[data-palette="oceano"] {
  --paper: #E9F1F4;
  --surface-2: #F0F6F8;
  --ink: #0F2227;
  --muted: #52696F;
  --line: #D2E1E5;
  --line-strong: #AEC4CA;
  --sidebar: #0B3A47;
  --on-sidebar: #ECF6F8;
  --on-sidebar-muted: #9AC0CB;
  --sidebar-mark: #67D6E0;
  --accent: #0D6072;
  --accent-text: #0C5E70;
  --due-soft: #F7EEDA;
  --d-paper: #0A1417;
  --d-surface: #111E22;
  --d-surface-2: #17272C;
  --d-ink: #DFEBEE;
  --d-muted: #96AEB5;
  --d-line: #21343A;
  --d-line-strong: #354C53;
  --d-sidebar: #07222B;
  --d-on-sidebar: #E8F4F7;
  --d-on-sidebar-muted: #8FB4BF;
  --d-sidebar-mark: #5CCBD6;
  --d-accent: #4FB6C8;
  --d-accent-text: #6AC6D5;
  --d-on-accent: #06222A;
  --d-due-soft: #2E2716;
}

/* Modo oscuro: el del sistema salvo que se haya elegido claro, o siempre si se eligió oscuro.
   Estas reglas van al final para ganarle a los tonos claros de cada paleta. */

@media (prefers-color-scheme: dark) {
  :root:not([data-mode="claro"]) {
    --paper: var(--d-paper);
    --surface: var(--d-surface);
    --surface-2: var(--d-surface-2);
    --ink: var(--d-ink);
    --muted: var(--d-muted);
    --line: var(--d-line);
    --line-strong: var(--d-line-strong);
    --sidebar: var(--d-sidebar);
    --on-sidebar: var(--d-on-sidebar);
    --on-sidebar-muted: var(--d-on-sidebar-muted);
    --sidebar-mark: var(--d-sidebar-mark);
    --accent: var(--d-accent);
    --accent-text: var(--d-accent-text);
    --on-accent: var(--d-on-accent);
    --in: var(--d-in);
    --in-soft: var(--d-in-soft);
    --out: var(--d-out);
    --out-soft: var(--d-out-soft);
    --credit: var(--d-credit);
    --credit-soft: var(--d-credit-soft);
    --transfer: var(--d-transfer);
    --transfer-soft: var(--d-transfer-soft);
    --due-soft: var(--d-due-soft);
    --focus-ring: var(--d-focus-ring);
    color-scheme: dark;
  }
}

:root[data-mode="oscuro"] {
  --paper: var(--d-paper);
  --surface: var(--d-surface);
  --surface-2: var(--d-surface-2);
  --ink: var(--d-ink);
  --muted: var(--d-muted);
  --line: var(--d-line);
  --line-strong: var(--d-line-strong);
  --sidebar: var(--d-sidebar);
  --on-sidebar: var(--d-on-sidebar);
  --on-sidebar-muted: var(--d-on-sidebar-muted);
  --sidebar-mark: var(--d-sidebar-mark);
  --accent: var(--d-accent);
  --accent-text: var(--d-accent-text);
  --on-accent: var(--d-on-accent);
  --in: var(--d-in);
  --in-soft: var(--d-in-soft);
  --out: var(--d-out);
  --out-soft: var(--d-out-soft);
  --credit: var(--d-credit);
  --credit-soft: var(--d-credit-soft);
  --transfer: var(--d-transfer);
  --transfer-soft: var(--d-transfer-soft);
  --due-soft: var(--d-due-soft);
  --focus-ring: var(--d-focus-ring);
  color-scheme: dark;
}