/* ============================================================
   SALDO · calculadora de liquidez — sistema ODÓMETRO
   (lima ácido + carbón + papel milimetrado, 3 voces tipográficas)
   ============================================================ */

:root {
  --bg: #EAECDF;
  --bg-grid: #DFE2D0;
  --surface: #F7F8F3;
  --surface-sub: #EFF1E6;
  --surface-inverse: #14170D;
  --surface-inverse-sub: #1E2216;
  --surface-lift: #FFFFFF;
  /* cards anidadas de VIVIR (grupo · fila) */
  --vivir-group: #FFFFFF; --vivir-row: #ECEEE1; --vivir-border: #E6E9DC;

  --ink: #14170D;
  --ink-2: #5F6454;
  --ink-ghost: #8A8F7C;
  --ink-on-inverse: #F2F4E8;
  --ink-on-accent: #14170D;

  --lime: #D6F248;
  --lime-soft: rgba(226,255,93,.42); /* lima tenue sobre el hero carbón */
  --lavender: #C9BCF4;
  /* tags de banco, ligados a la marca pero apagados (BI azul · BAM ámbar · BAC terracota) */
  --bi-soft: #EAEDF3; --bi-ink: #566780; --bi-dot: #8090AC;
  --bam-soft: #F2EBDD; --bam-ink: #7A6038; --bam-dot: #BE9A64;
  --bac-soft: #F3E6E1; --bac-ink: #86544B; --bac-dot: #C08578;
  --ok: #1F8A4E; --ok-soft: #EAF5EE; --ok-ink: #14532B;
  --warn: #F5B31B; --warn-soft: #FBEFD9; --warn-ink: #7A5600;
  --danger: #E8402C; --danger-soft: #FADDD7; --danger-ink: #9B2415;

  --font-display: 'Clash Display', sans-serif;
  --font-ui: 'General Sans', -apple-system, system-ui, sans-serif;
  --font-mono: 'Spline Sans Mono', ui-monospace, monospace;

  --r-card: 24px; --r-sub: 16px; --r-pill: 999px;
  --hatch: repeating-linear-gradient(-45deg, transparent 0 4px, currentColor 4px 6px);
  --t-fast: 180ms; --t-base: 340ms;
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);      /* salida amable, sin rebote */
  --ease-soft: cubic-bezier(0.4, 0.14, 0.16, 1);   /* para lo que crece y se encoge */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101208;
    --bg-grid: #171B0E;
    --surface: #1B1F12;
    --surface-sub: #242A17;
    --surface-inverse: #0C0E07;
    --surface-inverse-sub: #171B0E;
    --surface-lift: #242A17;
    --vivir-group: #202615; --vivir-row: #2C3320; --vivir-border: #2F3623;

    --ink: #F2F4E8;
    --ink-2: #A8AD98;
    --ink-ghost: #757A66;

    --lime: #E2FF5D;
    --lime-soft: rgba(226,255,93,.40);
    --lavender: #B4A3EE;
    --bi-soft: rgba(128,144,172,.15); --bi-ink: #AEBAD0; --bi-dot: #8C9BB8;
    --bam-soft: rgba(190,154,100,.15); --bam-ink: #D6BE96; --bam-dot: #BFA06E;
    --bac-soft: rgba(192,133,120,.15); --bac-ink: #D6A79C; --bac-dot: #C08578;
    --ok: #3DDC91; --ok-soft: rgba(61,220,145,.14); --ok-ink: #3DDC91;
    --warn: #FFC93D; --warn-soft: rgba(255,201,61,.14); --warn-ink: #FFC93D;
    --danger: #FF5C42; --danger-soft: rgba(255,92,66,.12); --danger-ink: #FF5C42;
  }
}

* { box-sizing: border-box; box-shadow: none; }
[hidden] { display: none !important; } /* gana sobre los display: flex/grid de abajo */
html, body { min-height: 100%; }
html {
  -webkit-text-size-adjust: 100%;   /* iPhone: no re-escalar al rotar */
  overscroll-behavior-y: contain;   /* iPhone: sin rebote de página */
}
body {
  margin: 0;
  touch-action: manipulation;       /* iPhone: sin zoom por doble tap */
  -webkit-tap-highlight-color: transparent;
  color: var(--ink);
  background-color: var(--bg);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
input { user-select: text; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
p, h1 { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---- accesibilidad base ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 6px;
}
.hero :focus-visible { outline-color: var(--lime); }
.skip {
  position: absolute; left: 12px; top: -60px;
  background: var(--ink); color: var(--lime);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; text-decoration: none;
  padding: 10px 14px; border-radius: var(--r-pill);
  z-index: 10; transition: top var(--t-fast) var(--ease-out);
}
.skip:focus { top: 12px; }

#app {
  max-width: 560px;
  margin: 0 auto;
  /* las safe-area son para el iPhone (notch / barra de gestos) */
  padding: calc(22px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
           calc(40px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.col { display: flex; flex-direction: column; gap: 14px; }

/* ---- voces ---- */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2);
}
.mono-label.lime { color: var(--lime); }
.mono-label.dim { color: rgba(242,244,232,.62); }
.digits, .q {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ---- hero carbón (la única superficie oscura) ---- */
.hero {
  background: var(--surface-inverse);
  border-radius: var(--r-card);
  padding: 24px;
  color: var(--ink-on-inverse);
}
@media (prefers-color-scheme: dark) { .hero { border: 1px solid #2E3324; } }
.hero-money { margin-top: 16px; display: flex; align-items: baseline; }
.hero-money .q { font-size: 28px; color: var(--lime); margin-right: 0.55em; }
.hero-money .digits { font-size: 56px; color: var(--ink-on-inverse); transition: color var(--t-base); }
.hero-money .digits.rojo { color: var(--danger); }
.hero-sub {
  margin-top: 10px; font-size: 12.5px; color: rgba(242,244,232,.72);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.5;
}

/* ---- composición: a dónde va cada quetzal ---- */
.comp-wrap { margin-top: 22px; }
.comp {
  display: flex; gap: 2px;
  height: 16px; margin-top: 8px;
  border-radius: var(--r-pill); overflow: hidden;
  background: rgba(242,244,232,.09);
}
.comp.vacia { background: transparent; border: 1px dashed rgba(242,244,232,.28); }
.comp-seg { height: 100%; transition: width var(--t-base) var(--ease-out); min-width: 2px; }
.seg-pres  { background: rgba(242,244,232,.82); }
.seg-deuda { background: #C7A24E; }
.seg-visa  { background: rgba(242,244,232,.42); }
.seg-ahorro { background: var(--lime); }
.seg-libre { background: var(--lime-soft); }
.seg-sobre { color: var(--danger); background-color: rgba(232,64,44,.25); background-image: var(--hatch); }

.comp-leyenda { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.leg-row { display: flex; align-items: center; gap: 8px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.leg-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: rgba(242,244,232,.72); flex: 1;
}
.leg-pct {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: rgba(242,244,232,.55); width: 40px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.leg-monto {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--ink-on-inverse); width: 76px; text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ---- bloques dentro del hero (banco · resumen) ---- */
.hero-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(242,244,232,.12); }
.bankbar.en-hero { background: rgba(242,244,232,.09); margin: 9px 0 10px; height: 12px; }
/* sobre carbón los chips van translúcidos: el color lo lleva el punto, no el fondo.
   (especificidad alta a propósito: si no, gana el fondo claro de marca y el monto
   queda blanco sobre crema, ilegible) */
.hero .bancos-split .bank-chip,
.hero .bancos-split .bank-chip.banco-bi,
.hero .bancos-split .bank-chip.banco-bam,
.hero .bancos-split .bank-chip.banco-bac {
  background: rgba(242,244,232,.09);
  color: rgba(242,244,232,.94);
}
.hero .bancos-split .bank-chip .bank-amt { color: rgba(242,244,232,.66); opacity: 1; }
.hero .bancos-split .bank-chip.sin {
  background: transparent; color: rgba(242,244,232,.5);
  border: 1px dashed rgba(242,244,232,.28);
}
.hero .bancos-split { margin-bottom: 0; }

.hero-extra {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid rgba(242,244,232,.12);
}
.hx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hx-val {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  color: var(--ink-on-inverse); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hx-val.lima { color: var(--lime); }
.hx-val .q { font-size: 11px; color: rgba(242,244,232,.5); margin-right: 0.3em; }
.hx-val.lima .q { color: var(--lime); opacity: .7; }
.hx-sub { font-size: 10.5px; line-height: 1.35; color: rgba(242,244,232,.5); }
@media (max-width: 400px) {
  .hero-extra { grid-template-columns: 1fr 1fr; }
  .hx:last-child { grid-column: 1 / -1; }
}

/* entra / sale / por día — tres cifras en línea */
.hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.flujo {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(242,244,232,.12);
}
.flujo-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flujo-val {
  display: inline-flex; align-items: baseline;
  font-family: var(--font-display); font-weight: 600; font-size: 19px;
  color: var(--ink-on-inverse); font-variant-numeric: tabular-nums;
}
.flujo-val .q { font-size: 11px; color: rgba(242,244,232,.5); margin-right: 0.3em; }
.flujo-val.entra .q { color: var(--lime); }
.flujo-sub { font-size: 10.5px; color: rgba(242,244,232,.45); }

/* ---- tarjetas ---- */
.card {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 18px;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; }
.card summary { display: flex; flex-direction: column; gap: 0; }
.sum-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.card summary {
  cursor: pointer; list-style: none;
  /* blanco de toque cómodo: se estira al ancho de la tarjeta sin mover el layout */
  padding: 12px 18px; margin: -12px -18px 0;
  min-height: 44px; justify-content: center;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .card summary:hover { background: var(--surface-sub); } }
.card details[open] > summary { margin-bottom: 0; }
.card summary::-webkit-details-marker { display: none; }
.sum-left { display: flex; align-items: center; gap: 8px; }
.caret {
  width: 0; height: 0; flex: none;
  border-left: 5px solid var(--ink-2);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--t-fast) var(--ease-out);
}
details[open] .caret { transform: rotate(90deg); }
.card details > .body { margin-top: 12px; }

.tot { display: inline-flex; align-items: baseline; gap: 2px; }
.tot .q { font-size: 12px; color: var(--ink-2); margin-right: 0.35em; }
.tot span:nth-child(2) { font-family: var(--font-display); font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; }
.tot-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); margin-left: 6px; text-transform: uppercase; letter-spacing: 0.08em; }

/* línea de síntesis dentro de una tarjeta */
.resumen {
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2);
  background: var(--surface-sub);
  border-radius: var(--r-sub);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.resumen strong { color: var(--ink); font-weight: 600; }

.rows { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-sub);
  border-radius: var(--r-sub);
  padding: 6px 8px 6px 12px;
}
.row input[type="text"] {
  flex: 1; min-width: 90px;
  background: transparent; border: none; outline: none;
  font-family: var(--font-ui); font-size: 13.5px; font-weight: 500; color: var(--ink);
  padding: 8px 0;
  text-overflow: ellipsis;  /* un nombre largo se corta con … , no de golpe */
}
.row .monto {
  width: 82px;
  background: var(--surface-lift);
  border: none; outline: none;
  border-radius: 10px;
  padding: 9px 10px;
  text-align: right;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink);
}
.row .cuotitas {
  width: 46px;
  background: var(--surface-lift);
  border: none; outline: none;
  border-radius: 10px;
  padding: 9px 6px;
  text-align: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink);
}
.row .neto {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2);
  white-space: nowrap;
}
.row-nota {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2);
  white-space: nowrap; letter-spacing: 0.04em;
}
.pct-mini {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--ink-2); width: 34px; text-align: right; flex: none;
  font-variant-numeric: tabular-nums;
}

/* tag de banco: <select> disfrazado de chip (nativo = teclado + rueda en iPhone) */
.banco {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 66px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  background: var(--surface-lift);
  border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 8px 8px 8px 12px;
  cursor: pointer;
  /* flechita propia */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 11px center, right 7px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.banco.banco-bi  { background-color: var(--bi-soft);  color: var(--bi-ink); }
.banco.banco-bam { background-color: var(--bam-soft); color: var(--bam-ink); }
.banco.banco-bac { background-color: var(--bac-soft); color: var(--bac-ink); }
.banco option { color: var(--ink); background: var(--surface-lift); }

/* reparto por banco: banda de chips arriba de las líneas */
.bancos-split {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.bancos-lbl {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.08em; color: var(--ink-ghost); text-transform: uppercase;
  margin-right: 2px;
}
.bank-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: var(--r-pill); padding: 5px 10px;
  background: var(--surface-sub); color: var(--ink-2);
}
.bank-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.bank-amt { font-weight: 500; opacity: .85; }
.bank-chip.banco-bi  { background: var(--bi-soft);  color: var(--bi-ink); }
.bank-chip.banco-bi  .bank-dot { background: var(--bi-dot); }
.bank-chip.banco-bam { background: var(--bam-soft); color: var(--bam-ink); }
.bank-chip.banco-bam .bank-dot { background: var(--bam-dot); }
.bank-chip.banco-bac { background: var(--bac-soft); color: var(--bac-ink); }
.bank-chip.banco-bac .bank-dot { background: var(--bac-dot); }
.bank-chip.sin { background: transparent; color: var(--ink-ghost); border: 1px dashed var(--ink-ghost); }

/* ============================================================
   VIVIR · dos grupos (VIDA sí-o-sí / OCIO gustos) con drag & drop
   ============================================================ */
/* dos columnas lado a lado (kanban) cuando la tarjeta da el ancho */
.grupos { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
@container (min-width: 440px) { .grupos { grid-template-columns: 1fr 1fr; } }
/* cada grupo es su propia card dentro de la card de VIVIR */
.grupo {
  min-width: 0;
  background: var(--vivir-group);
  border: 1px solid var(--vivir-border);
  border-radius: var(--r-sub);
  padding: 12px 12px 14px;
}
.grupo-head { display: flex; justify-content: space-between; align-items: center; margin: 0 2px 10px; }
.grupo-lbl {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 7px;
}
.grupo-lbl::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--ink-2); }
.grupo-ocio .grupo-lbl::before { background: var(--lime); }
.grupo-tot { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.grupo-tot .q { font-size: 10px; color: var(--ink-2); margin-right: 0.2em; }

.dropzone {
  min-height: 52px; border-radius: var(--r-sub);
  display: flex; flex-direction: column; gap: 6px;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.dropzone.dz-over { background: var(--lime-soft); box-shadow: inset 0 0 0 1.5px var(--lime); }

/* fila-tarjeta: nombre + borrar arriba, banco + monto abajo, asa al costado */
.row-gasto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "grip name del"
    "grip meta meta";
  column-gap: 8px; row-gap: 8px; align-items: center;
  padding: 9px 11px 9px 6px;
  background: var(--vivir-row);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
.row-gasto > input[type="text"] { grid-area: name; padding: 2px 0; min-width: 0; }
.row-gasto > .del { grid-area: del; align-self: start; }
.dg-meta { grid-area: meta; display: flex; align-items: center; gap: 8px; }
.dg-meta .monto { width: 88px; }
.row-gasto .grip {
  grid-area: grip; align-self: center;
  width: 22px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-ghost); font-size: 13px; line-height: 1; letter-spacing: -1px;
  cursor: grab; border-radius: 7px; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
  transition: color var(--t-fast), background var(--t-fast);
}
/* el fantasma que sigue al cursor: se "levanta" con sombra y una leve rotación */
.row-gasto.ghost {
  position: fixed; z-index: 9999; pointer-events: none; margin: 0; opacity: .98;
  background: var(--vivir-row); border-radius: var(--r-sub);
  box-shadow: 0 16px 38px rgba(20,23,13,.28);
  transform: rotate(-1.8deg) scale(1.04);
  animation: pickup 240ms var(--ease-soft);
}
@keyframes pickup {
  from { transform: rotate(0deg) scale(1); box-shadow: 0 2px 6px rgba(20,23,13,.08); }
}
/* el hueco de donde salió: contorno punteado, sin contenido */
.row-gasto.dragging {
  background: transparent;
  outline: 1.5px dashed var(--ink-ghost); outline-offset: -2px;
  transition: none;
}
.row-gasto.dragging > * { visibility: hidden; }
/* aterrizaje: la tarjeta que acabás de mover hace un pop con destello lima */
.row-gasto.landed { animation: landed 560ms var(--ease-soft); }
@keyframes landed {
  0%   { transform: scale(.94); background: var(--lime-soft); }
  55%  { transform: scale(1.02); }
  100% { transform: scale(1); background: var(--vivir-row); }
}
@media (hover: hover) { .row-gasto .grip:hover { color: var(--ink); background: var(--surface-sub); } }
.row-gasto .grip:active { cursor: grabbing; }
.grip-inline { color: var(--ink-2); letter-spacing: -1px; }

/* medidor: ¿alcanza para gustos tras lo obligatorio? */
.gustos-meter { background: var(--surface-sub); border-radius: var(--r-sub); padding: 12px 14px; margin-bottom: 14px; }
.gm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gm-top .mono-label { color: var(--ink-2); }
.gm-verdict { font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; }
.gm-verdict.rojo { color: var(--danger-ink); }
.gm-bar { height: 10px; border-radius: var(--r-pill); background: var(--surface-lift); overflow: hidden; margin: 10px 0 8px; }
.gm-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--lime); transition: width var(--t-base) var(--ease-out); }
.gm-fill.rojo { background: var(--danger); }
.gm-legend { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.gm-legend strong { color: var(--ink); font-weight: 600; }

/* card POR BANCO: barra de reparto + chips */
.card.compact { padding: 16px 18px; }
.bankbar {
  display: flex; gap: 2px; height: 14px;
  border-radius: var(--r-pill); overflow: hidden;
  background: var(--surface-sub);
  margin: 4px 0 12px;
}
.bankbar .seg { height: 100%; min-width: 3px; transition: width var(--t-base) var(--ease-out); }
.bankbar .seg.banco-bi  { background: var(--bi-dot); }
.bankbar .seg.banco-bam { background: var(--bam-dot); }
.bankbar .seg.banco-bac { background: var(--bac-dot); }
.bankbar .seg.sin { color: var(--ink-ghost); background-image: var(--hatch); }


/* select de banco destino del ahorro */
.ahorro-banco { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ahorro-banco .mono-label { flex: none; }

/* deudas: día de pago + próximo pago */
.dr-prox {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--ink-2); margin-top: -2px;
}
.dr-prox strong { color: var(--ink); font-weight: 700; }
.row .del {
  color: var(--ink-2); font-size: 16px; line-height: 1;
  width: 30px; height: 30px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; transition: color var(--t-fast), background var(--t-fast);
}
@media (hover: hover) { .row .del:hover { color: var(--danger); background: var(--danger-soft); } }

/* régimen: pills F / P / N */
.reg { display: inline-flex; gap: 3px; flex: none; }
.reg button {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  min-width: 30px; padding: 8px 8px; border-radius: var(--r-pill);
  background: var(--surface-lift); color: var(--ink-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.reg button.on { background: var(--ink); color: var(--lime); }

/* ---- deudas: cuota fija + abono extra ---- */
.row-deuda { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
.dr-top { display: flex; align-items: center; gap: 8px; }
.dr-top input[type="text"] { font-size: 15px; font-weight: 600; }
.dr-top .dia {
  flex: none; width: 52px;
  background: var(--surface-lift); border: none; outline: none;
  border-radius: 10px; padding: 8px 8px;
  text-align: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink);
}
.dr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo .mono-label { font-size: 10px; letter-spacing: 0.07em; }
.campo .monto { width: 100%; }
.campo-extra .mono-label { color: var(--ink); }
.campo-extra .monto { border: 1.5px solid var(--lime); }

.dr-bot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap;
  padding-top: 2px; border-top: 1px solid var(--surface);
}
.dr-pago {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.04em; padding-top: 8px;
  font-variant-numeric: tabular-nums;
}
.dr-pago-sub { color: var(--ink-2); font-size: 10px; margin-left: 3px; }
.dr-plazo {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  color: var(--ink-2); letter-spacing: 0.05em; text-align: right; padding-top: 8px;
}
.chip {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.04em; line-height: 1.4;
  border-radius: var(--r-pill); padding: 6px 12px;
}
.chip.lima { background: var(--lime); color: #14170D; }
.chip.warn { background: var(--warn-soft); color: var(--warn-ink); }
.chip.ghost { background: transparent; color: var(--ink-2); padding: 0 2px; }

.cta {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink);
  margin-top: 12px; padding: 6px 2px;
}
@media (hover: hover) { .cta:hover { text-decoration: underline; text-underline-offset: 3px; } }
.hint { font-size: 12px; line-height: 1.5; color: var(--ink-2); margin-top: 8px; }

/* ---- ahorro: slider % ---- */
.pct-big {
  font-family: var(--font-display);
  font-weight: 600; font-size: 26px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#slider-ahorro {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: var(--r-pill);
  outline: none;
  margin: 14px 0 16px;
  /* el relleno lima lo pinta JS con background-size */
  background-image: linear-gradient(var(--lime), var(--lime));
  background-color: var(--surface-sub);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  border-radius: var(--r-pill);
}
#slider-ahorro::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--ink);
  border: 3px solid var(--surface);
  cursor: grab;
  transition: transform var(--t-fast) var(--ease-out);
}
#slider-ahorro::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
#slider-ahorro:focus-visible { outline-offset: 4px; }

.ahorro-split { display: flex; gap: 10px; }
.ahorro-caja {
  flex: 1;
  background: var(--surface-sub);
  border-radius: var(--r-sub);
  padding: 12px 14px;
}
.ahorro-caja.lima { background: var(--lime); }
.ahorro-caja.lima .mono-label { color: rgba(20, 23, 13, .72); }
.caja-money { margin-top: 6px; display: flex; align-items: baseline; }
.caja-money .q { font-size: 12px; color: var(--ink-2); margin-right: 0.4em; }
.ahorro-caja.lima .caja-money .q { color: rgba(20, 23, 13, .6); }
.caja-money span:nth-child(2) {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.ahorro-caja.lima .caja-money span:nth-child(2) { color: #14170D; }
.caja-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); margin-left: 5px; text-transform: uppercase; }
.ahorro-caja.lima .caja-sub { color: rgba(20, 23, 13, .6); }

/* ---- proyección ---- */
.proy-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--surface-sub);
}
.proy-row:last-child { border-bottom: none; }
.proy-mes { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-2); width: 52px; text-transform: uppercase; letter-spacing: 0.06em; flex: none; }
.proy-barra { flex: 1; height: 10px; border-radius: var(--r-pill); background: var(--surface-sub); overflow: hidden; position: relative; transform: translateZ(0); }
.proy-fill { height: 100%; border-radius: var(--r-pill); background: var(--ink); transition: width var(--t-base) var(--ease-out); }
.proy-fill.lima { background: var(--lime); }
.proy-fill.roja { background: var(--danger); }
.proy-val { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; width: 74px; text-align: right; flex: none; font-variant-numeric: tabular-nums; color: var(--ink); }
.proy-val.rojo { color: var(--danger-ink); }
.proy-libera {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  color: var(--ok-ink); background: var(--ok-soft);
  border-radius: var(--r-pill); padding: 3px 8px; flex: none;
  letter-spacing: 0.04em;
}

.footpad { text-align: center; padding-top: 6px; color: var(--ink); opacity: .6; font-size: 10.5px; }

/* estados vacíos */
.empty {
  border: 1.5px dashed var(--ink-ghost);
  border-radius: var(--r-sub);
  padding: 16px;
  text-align: center;
  color: var(--ink-2);
  font-size: 12.5px;
}

/* teléfono: la fila de ingreso no cabe en una línea — el nombre se lleva la suya */
@media (max-width: 560px) {
  #rows-ingresos .row { flex-wrap: wrap; gap: 6px; padding: 8px 8px 8px 12px; }
  #rows-ingresos .row input[type="text"] { flex: 1 1 100%; min-width: 0; padding: 2px 0; }
  #rows-ingresos .row .neto { margin-left: auto; }
  .row-nota { display: none; }
  /* presupuesto: el % cede su lugar al tag de banco */
  #rows-presupuesto .pct-mini { display: none; }
}

@media (max-width: 420px) {
  .dr-grid { grid-template-columns: 1fr; }
  .leg-monto { width: 68px; }
}

/* ============================================================
   iPHONE · pantalla táctil
   los inputs van a 16px porque Safari hace zoom si son más chicos,
   y los blancos de toque suben a 44px (mínimo de Apple)
   ============================================================ */
@media (pointer: coarse) {
  .row input[type="text"] { font-size: 16px; }
  .row .monto { font-size: 16px; width: 96px; padding: 11px 10px; }
  .row .cuotitas { font-size: 16px; width: 56px; padding: 11px 6px; }
  .row .del { width: 44px; height: 44px; font-size: 20px; }
  .reg button { min-width: 38px; padding: 11px 10px; font-size: 12px; }
  .cta { padding: 12px 2px; font-size: 13.5px; }
  .card summary { padding: 8px 0; }
  #slider-ahorro { height: 14px; }
  #slider-ahorro::-webkit-slider-thumb { width: 32px; height: 32px; }
  .row-nota { display: none; }        /* no cabe junto a los campos grandes */
}

/* ============================================================
   ESCRITORIO · tres zonas, no columnas de tarjetas
   El error anterior era partir las tarjetas en dos columnas angostas:
   VIVIR se volvía una torre y los nombres se cortaban. Ahora cada zona
   tiene el ancho que su contenido pide.
     A · veredicto (hero + ahorro)   — se queda fijo
     B · lo que se edita             — ancho de lectura, nunca estirado
     C · los 12 meses                — columna angosta, aparece en pantallas grandes
   ============================================================ */

/* el dashboard manda: ocupa todo el ancho arriba, y abajo van las columnas de edición */
.dash { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }

/* angosto: una sola columna, orden de lectura */
@media (max-width: 1019px) {
  .col, .dash { display: contents; }
  /* primero lo que mirás y movés; al final lo que se configura una vez */
  .hero            { order: 1 }
  #sec-presupuesto { order: 2 }
  #sec-deudas      { order: 3 }
  #sec-ahorro      { order: 4 }
  #sec-calendario  { order: 5 }
  #sec-ingresos    { order: 6 }
  #sec-visacuotas  { order: 7 }
  #sec-proyeccion  { order: 8 }
}

@media (min-width: 1020px) {
  #app {
    max-width: 1500px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start;
    gap: 16px;
    padding-top: 26px;
  }
  .dash { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; }
  .col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .col-b { grid-column: 1; }
  .col-c { grid-column: 2; }

  /* con más aire, el número del saldo puede crecer */
  .hero-money .digits { font-size: 62px; }
}

@media (min-width: 1360px) {
  #app { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}

/* ------------------------------------------------------------
   dentro de cada tarjeta: si la tarjeta es ancha, las líneas de
   VIVIR se acomodan en dos columnas en vez de hacer una torre
   ------------------------------------------------------------ */
.card { container-type: inline-size; }

@container (min-width: 500px) {
  #rows-presupuesto {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  /* en dos columnas el nombre necesita cada píxel: el % cede su lugar al banco */
  #rows-presupuesto .pct-mini { display: none; }
  #rows-presupuesto .monto { width: 56px; padding-left: 6px; padding-right: 8px; }
  #rows-presupuesto .banco { width: 54px; padding-left: 9px; }
  #rows-presupuesto .row { padding-left: 10px; gap: 6px; }
  #rows-presupuesto .row input[type="text"] { font-size: 13px; min-width: 0; }
  #rows-presupuesto .del { width: 26px; }
  #rows-visacuotas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .row-nota { display: none; }
}

@container (min-width: 460px) {
  /* los 12 meses en dos columnas que se leen hacia abajo: jul–dic, ene–jun */
  #proyeccion {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 28px;
  }
  #proyeccion .proy-row:nth-child(6) { border-bottom: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.15s !important; animation: none !important; }
  .card, .hero { opacity: 1 !important; transform: none !important; }
  button:active:not(:disabled) { transform: none; }
}

/* ============================================================
   CALENDARIO · cuándo entra y cuándo sale la plata
   ============================================================ */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px; margin: 4px 0 12px;
}
.cal-dow {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  color: var(--ink-ghost); text-align: center; padding-bottom: 4px;
  letter-spacing: .04em;
}
.cal-cell {
  position: relative; aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 9px; background: var(--surface-sub);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast) var(--ease-soft);
}
.cal-cell.vacia { background: transparent; }
.cal-num { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); line-height: 1; }

/* días que ya pasaron: se apagan, para ver de un vistazo en qué parte del mes vas */
.cal-cell.ido { background: transparent; }
.cal-cell.ido .cal-num { color: var(--ink-ghost); }
.cal-cell.ido .cal-dots { opacity: .45; }

/* días con movimiento: el número pesa */
.cal-cell.con-ev .cal-num { color: var(--ink); font-weight: 700; }

/* HOY · fondo oscuro fijo en ambos temas (antes usaba --ink, que en oscuro
   es casi blanco y dejaba el número lima ilegible) + anillo lima que lo ancla */
.cal-cell.hoy {
  background: var(--surface-inverse);
  outline: 1.5px solid var(--lime); outline-offset: -1.5px;
}
.cal-cell.hoy .cal-num { color: var(--ink-on-inverse); font-weight: 700; }
.cal-cell.hoy.ido { background: var(--surface-inverse); }
.cal-cell.hoy.ido .cal-num { color: var(--ink-on-inverse); }

.cal-dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-dots .dot { width: 6px; height: 6px; border-radius: 999px; display: block; }
.cal-dots .dot.in { background: var(--ok); }
.cal-dots .dot.out { background: var(--bam-dot); }
.cal-cell.hoy .cal-dots .dot.in { background: var(--lime); }
.cal-cell.hoy .cal-dots .dot.out { background: #E0B770; }

.cal-lista { display: flex; flex-direction: column; gap: 5px; }
.cal-ev {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; padding: 5px 8px;
  border-radius: 9px; background: var(--surface-sub);
}
.cal-ev-dia {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  color: var(--ink-2); width: 52px; flex: none; letter-spacing: .03em;
}
.cal-ev-nom { flex: 1; min-width: 0; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-ev-monto {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; flex: none;
}
.cal-ev.in .cal-ev-monto { color: var(--ok-ink); }
.cal-ev.out .cal-ev-monto { color: var(--ink-2); }
.cal-ev.vacio { color: var(--ink-ghost); font-size: 12px; background: transparent; padding: 2px; }

/* ============================================================
   AHORRO · switch entre % y monto fijo
   ============================================================ */
.modo-switch {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--surface-sub); border-radius: var(--r-pill);
}
.modo-switch button {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  min-width: 34px; padding: 6px 10px; border-radius: var(--r-pill);
  color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast);
}
.modo-switch button.on { background: var(--ink); color: var(--lime); }
.ahorro-cifra { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.ahorro-q { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 14px; }
.ahorro-q-in {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--surface-lift); border-radius: 12px; padding: 10px 14px;
}
.ahorro-q-in .q { font-family: var(--font-display); font-size: 15px; color: var(--ink-2); }
.ahorro-q-in input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FILAS · ingreso y visacuota (tarjetas de 2 líneas, sin desborde)
   ============================================================ */
.row-ingreso, .row-visa {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; align-items: center;
  padding: 10px 11px;
  background: var(--vivir-row);
}
.row-ingreso > input[type="text"], .row-visa > input[type="text"] { min-width: 0; padding: 2px 0; font-size: 14.5px; font-weight: 600; }
.ri-meta, .ri-fecha, .rv-meta { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ri-meta .monto { width: 90px; }
.ri-meta .neto { margin-left: auto; }
.ri-fecha { padding-top: 8px; border-top: 1px solid var(--surface); }
.reg.frec button { font-size: 9.5px; letter-spacing: .06em; padding: 7px 9px; }
.dias-in { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.dia-y { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }
.row-ingreso .dia, .row-visa .dia {
  width: 46px; flex: none;
  background: var(--surface-lift); border: none; outline: none;
  border-radius: 9px; padding: 8px 6px; text-align: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink);
}
/* visacuota: monto × cuotas · día, cada campo con su unidad */
.campo-in {
  display: inline-flex; align-items: baseline; gap: 4px; min-width: 0;
  background: var(--surface-lift); border-radius: 10px; padding: 7px 10px;
}
.campo-in .q, .campo-in .uni {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); flex: none;
}
.campo-in input {
  width: 58px; min-width: 0; background: transparent; border: none; outline: none;
  text-align: right;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink);
}
.campo-in input.cuotitas { width: 34px; }
.rv-hasta {
  grid-column: 1 / -1;
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-ghost);
  letter-spacing: .04em;
}

/* barra de bancos al pie de VIVIR */
.viv-bancos { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--surface-sub); }
.bankbar.sm { height: 10px; margin: 0 0 9px; }

/* ============================================================
   NUBE · botón de sesión y panel de login
   ============================================================ */
.nube-barra { display: flex; justify-content: flex-end; margin-bottom: -4px; }
.nube-btn {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 13px; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--vivir-border);
  transition: background var(--t-fast), color var(--t-fast);
}
.nube-btn.dentro { background: var(--ink); color: var(--lime); border-color: transparent; }
.nube-btn.clave { background: var(--warn-soft); color: var(--warn-ink); border-color: transparent; }
.nube-btn.sincronizando { color: var(--ink); }
.nube-btn.error { background: var(--danger-soft); color: var(--danger-ink); border-color: transparent; }
@media (hover: hover) { .nube-btn:hover { background: var(--surface-sub); } }

.nube-fondo {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(20, 23, 13, .55); backdrop-filter: blur(3px);
  animation: nubeIn 160ms var(--ease-out);
}
@keyframes nubeIn { from { opacity: 0 } }
.nube-panel {
  width: 100%; max-width: 380px;
  background: var(--surface); border-radius: var(--r-card);
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 60px rgba(20,23,13,.35);
}
.nube-nota { font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.nube-campo { display: flex; flex-direction: column; gap: 5px; }
.mono-label.dim2 { color: var(--ink-2); font-size: 10.5px; }
.nube-campo input {
  background: var(--surface-lift); border: 1px solid var(--vivir-border); outline: none;
  border-radius: 11px; padding: 11px 12px;
  font-family: var(--font-ui); font-size: 16px; color: var(--ink); /* 16px: Safari no hace zoom */
}
.nube-campo input:focus { border-color: var(--ink-2); }
.nube-error {
  font-size: 12.5px; color: var(--danger-ink);
  background: var(--danger-soft); border-radius: 10px; padding: 8px 10px;
}
.nube-acciones { display: flex; gap: 8px; margin-top: 4px; }
.nube-pri, .nube-sec {
  flex: 1; padding: 12px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.nube-pri { background: var(--ink); color: var(--lime); }
.nube-pri:disabled { opacity: .6; }
.nube-sec { background: var(--surface-sub); color: var(--ink-2); }
.nube-link {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px; padding: 4px;
}

/* ============================================================
   JERARQUÍA · lo que se configura una vez pesa menos
   ============================================================ */
.card.compacta { padding: 14px 16px; }
.card.compacta summary { padding: 11px 16px; margin: -11px -16px 0; min-height: 40px; }
.card.compacta .mono-label { font-size: 10.5px; }
.card.compacta .tot span:nth-child(2) { font-size: 17px; }
.card.compacta .tot .q { font-size: 10px; }
.card.compacta .row { padding: 7px 9px; }
.card.compacta .row input[type="text"] { font-size: 12.5px; }
.card.compacta .monto { font-size: 12px; padding: 7px 9px; }
.card.compacta .cta { font-size: 11.5px; margin-top: 9px; }
.card.compacta .neto { font-size: 10.5px; }
.card.compacta .reg button { font-size: 9.5px; padding: 6px 7px; min-width: 26px; }

/* ============================================================
   VISTAZO · al colapsar una sección no se va: deja su resumen
   ============================================================ */
.sum-peek {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 10px;
  opacity: 1;
  animation: peek-in 460ms var(--ease-soft) both;
}
details[open] .sum-peek { display: none; }   /* abierta: manda el contenido real */
@keyframes peek-in { from { opacity: 0; transform: translateY(-3px); } }
.pk {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.03em; line-height: 1;
  padding: 5px 9px; border-radius: var(--r-pill);
  background: var(--surface-sub); color: var(--ink-2);
  white-space: nowrap;
}
.pk.tenue { background: transparent; color: var(--ink-ghost); padding-left: 2px; padding-right: 2px; }
.pk.lima  { background: var(--lime-soft); color: var(--ink); }
.pk.alerta{ background: var(--danger-soft); color: var(--danger-ink); }

/* ============================================================
   MOVIMIENTO · abrir y cerrar con altura animada
   (progresivo: donde no exista, abre y cierra de golpe como antes)
   ============================================================ */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .card details::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size 480ms var(--ease-soft), content-visibility 480ms allow-discrete;
  }
  .card details[open]::details-content { block-size: auto; }
}
.caret { transition: transform 420ms var(--ease-soft); }

/* las tarjetas entran escalonadas la primera vez */
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } }
.card, .hero { animation: card-in 640ms var(--ease-soft) both; }
.hero { animation-delay: 0ms }
#sec-calendario  { animation-delay: 70ms }
#sec-presupuesto { animation-delay: 250ms }
#sec-deudas      { animation-delay: 200ms }
#sec-ahorro      { animation-delay: 250ms }
#sec-ingresos    { animation-delay: 300ms }
#sec-visacuotas  { animation-delay: 345ms }
#sec-proyeccion  { animation-delay: 390ms }

/* una fila recién agregada se desliza en su lugar */
@keyframes fila-in { from { opacity: 0; transform: translateY(-4px); } }
.row.nueva { animation: fila-in 460ms var(--ease-soft); }

/* respuesta al tacto: todo lo clicable se hunde un poco */
button:active:not(:disabled) { transform: scale(.99); }
button { transition: transform 200ms var(--ease-soft), background 220ms, color 220ms; }
summary { transition: background 220ms var(--ease-soft); }
.grip:active { transform: none; }   /* el asa ya tiene su propio gesto */

/* los números cambian con un pulso corto en vez de saltar */
@keyframes num-tick { 0% { opacity: .5; transform: translateY(-1px); } 100% { opacity: 1; transform: none; } }
.tick { animation: num-tick 520ms var(--ease-soft); }