/* =====================================================================
   app.css · base, componentes y disposición
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Un título pegado a su texto se lee como una sola mancha. Separa abajo, y
   respira arriba cuando sigue a otro contenido. */
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: var(--lh-tight); font-weight: 650; letter-spacing: var(--tracking-title); }
h1 { font-size: var(--fs-h1); color: var(--navy-900); letter-spacing: var(--tracking-display); font-weight: 700; }
h2 { font-size: var(--fs-h2); color: var(--navy-800); }
h3 { font-size: var(--fs-h3); color: var(--navy-800); }
* + h2, * + h3 { margin-top: var(--sp-5); }
.card__head + *, .card > :first-child { margin-top: 0; }
p { margin: 0 0 var(--sp-3); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
a { color: var(--navy-600); }
a:hover { color: var(--navy-800); }

:focus-visible { outline: 2px solid var(--navy-500); outline-offset: 2px; border-radius: 6px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--sp-3); top: -3rem; z-index: 100;
  background: var(--navy-800); color: #fff; padding: .6rem 1rem;
  border-radius: var(--r-pill); transition: top .15s ease;
}
.skip-link:focus { top: var(--sp-3); }

/* ------------------------------------------------------- cascarón ---- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* Barra superior translúcida, como la de apple.com: el contenido se adivina
   borroso al pasar por debajo. Donde el navegador no sabe desenfocar, queda
   el color sólido del cromo. */
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--chrome-bg); color: var(--chrome-fg);
  border-bottom: 1px solid var(--chrome-line);
  padding-top: env(safe-area-inset-top);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-header, .app-nav {
    background: var(--chrome-glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}
.app-header__inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: var(--sp-2) max(var(--sp-45), env(safe-area-inset-right)) var(--sp-2) max(var(--sp-45), env(safe-area-inset-left));
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  min-height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  /* El cuadro de la «L»: el mismo azul marino del ícono de la app (2026-10-21). */
  background: #0b2545; font-size: .95rem; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.brand__name { font-size: 1.05rem; font-weight: 650; }
.brand__sub { font-size: var(--fs-xs); color: var(--chrome-fg-dim); font-weight: 500; display: block; margin-top: -3px; }

.header-spacer { flex: 1 1 auto; }

/* Selector de espacio + "nuevo": una sola pieza, en una sola línea. Antes
   se partía en dos renglones y el botón caía suelto debajo del desplegable. */
.space-switcher { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: nowrap; }
.space-switcher select {
  background-color: var(--chrome-bg-2); color: var(--chrome-fg); border: 1px solid var(--chrome-line);
  border-radius: var(--r-pill); padding: 0 2.2rem 0 1rem; font: inherit; font-size: var(--fs-sm);
  max-width: 14rem; width: auto; height: 2.25rem; line-height: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23d2d2d7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right .85rem center;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.space-switcher .btn { padding-left: .85rem; padding-right: .85rem; }
.space-switcher select:hover { border-color: var(--navy-500); }

/* Los botones DENTRO de la barra oscura no pueden usar la paleta clara: un
   botón "ghost" tiene fondo blanco y sobre el azul marino se ve como un
   parche flotando. Aquí se visten con el cromo. */
.app-header .btn--ghost,
.app-header .btn--quiet {
  background: transparent; color: var(--chrome-fg-soft); border-color: var(--chrome-line);
  height: 2.25rem; min-height: 2.25rem;
}
.app-header .btn--ghost:hover:not(:disabled),
.app-header .btn--quiet:hover:not(:disabled) {
  background: var(--chrome-hover); color: var(--chrome-fg); border-color: var(--navy-500);
}

.app-nav { background: var(--chrome-bg-2); border-bottom: 1px solid var(--chrome-line); position: sticky; top: var(--header-h); z-index: 25; }
.app-nav__inner {
  max-width: var(--max-w); margin: 0 auto; padding: .35rem var(--sp-4);
  display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
}
.app-nav__inner::-webkit-scrollbar { display: none; }
/* ------------------------------------------- flujo día por día ----- */
.flujo__resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.flujo__resumen > div { background: var(--surface-alt); border-radius: 14px; padding: .65rem .8rem; display: flex; flex-direction: column; }
.flujo__resumen span { font-size: var(--fs-xs); color: var(--muted); }
.flujo__resumen strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.flujo__resumen small { font-size: var(--fs-xs); color: var(--muted); }
.flujo__dias { list-style: none; margin: 0; padding: 0; }
.flujo__dia { padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.flujo__dia--hoy { background: var(--surface-alt); border-radius: 12px; padding-left: .6rem; padding-right: .6rem; border-top-color: transparent; }
.flujo__dia--pasado { opacity: .72; }
.flujo__fecha { font-weight: 650; font-size: var(--fs-sm); margin-bottom: .3rem; }
.flujo__items { list-style: none; margin: 0; padding: 0; }
.flujo__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding: .18rem 0; font-size: var(--fs-sm); }
.flujo__titulo { min-width: 0; }
.flujo__titulo small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.flujo__monto { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.flujo__monto--fuera, .flujo__item--fuera, .flujo__item--corte { color: var(--muted); font-weight: 500; }
.flujo__item--fuera details { width: 100%; }
.flujo__item--fuera summary { cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-3); }
.flujo__item--reserva .flujo__titulo { color: var(--navy-600); }
.flujo__comparacion { margin: 0 0 var(--sp-3); font-weight: 600; font-size: var(--fs-sm); }
.leyenda-linea { display: inline-block; width: 22px; height: 0; vertical-align: middle; border-top: 2.5px solid #0e8f7e; }
.leyenda-linea--plan { border-top: 2px dashed #ff9f0a; }
.por-confirmar { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 14px; background: var(--surface-alt); }
/* «Así quedaría» al registrar un pago: se recalcula al escribir la cantidad. */
.vista-previa:empty { display: none; }
/* «Lo que falta lo pago con el siguiente pago» (2026-10-29). */
.vista-previa__check { display: flex; align-items: flex-start; gap: .55rem; margin-top: var(--sp-3); font-size: var(--fs-sm); line-height: 1.4; cursor: pointer; }
.vista-previa__check input { width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--navy-500); }
.vista-previa { margin: var(--sp-4) 0 var(--sp-5); padding: var(--sp-4); border-radius: 18px; background: var(--surface-alt); border: 1px solid var(--line); }
.vista-previa__titulo { font-weight: 600; margin-bottom: var(--sp-2); }
.vista-previa__nota { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); }
.vista-previa__fila { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .45rem 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.vista-previa__fila > :last-child { text-align: right; }
.flujo__queda { text-align: right; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .25rem; }
@media (max-width: 560px) { .flujo__resumen { grid-template-columns: 1fr 1fr; } }

/* Desplegables de texto chico que se tocan con el dedo: medían 19 px de alto
   y conviene al menos 44 (QA 5.2). La letra sigue chica; crece el área. */
.desplegable-dedo {
  cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .35rem;
  color: var(--navy-600); font-weight: 600;
}
.desplegable-dedo::-webkit-details-marker { display: none; }
.desplegable-dedo::before { content: '▸'; font-size: .8em; transition: transform .15s ease; }
details[open] > .desplegable-dedo::before { transform: rotate(90deg); }

/* Pista de «hay más secciones» en pantallas angostas (QA 1.4). */
.app-nav__mas {
  position: absolute; top: 0; bottom: 1px; width: 2.4rem; display: none;
  align-items: center; pointer-events: none;
  font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--chrome-fg);
}
.app-nav__mas--der { right: 0; justify-content: flex-end; padding-right: .45rem;
  background: linear-gradient(to right, transparent, var(--chrome-bg-2) 70%); }
.app-nav__mas--izq { left: 0; justify-content: flex-start; padding-left: .45rem;
  background: linear-gradient(to left, transparent, var(--chrome-bg-2) 70%); }
.app-nav.hay-mas-der .app-nav__mas--der, .app-nav.hay-mas-izq .app-nav__mas--izq { display: flex; }
/* Pestañas en forma de pastilla: la activa se "ilumina" en lugar de
   subrayarse, como el selector de secciones de las apps de Apple. */
.app-nav a {
  flex: 0 0 auto; color: var(--chrome-fg-soft); text-decoration: none; padding: .5rem .9rem;
  font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-pill);
  white-space: nowrap; transition: color .15s ease, background .15s ease;
  display: flex; align-items: center; gap: .45rem;
}
/* El icono se enciende solo en la sección activa: da posición de un vistazo
   sin convertir el menú en un semáforo de ocho colores. */
.app-nav a .ico { opacity: .6; transition: opacity .15s ease; }
.app-nav a:hover .ico, .app-nav a[aria-current="page"] .ico { opacity: 1; }
.app-nav a:hover { color: var(--chrome-fg); background: var(--chrome-hover); }
.app-nav a[aria-current="page"] { color: var(--chrome-fg); background: rgba(255, 255, 255, .14); font-weight: 600; }

.app-main {
  flex: 1 1 auto; max-width: var(--max-w); width: 100%; margin: 0 auto;
  padding: var(--sp-6) max(var(--sp-45), env(safe-area-inset-right)) calc(var(--sp-7) + env(safe-area-inset-bottom)) max(var(--sp-45), env(safe-area-inset-left));
}

.app-footer {
  border-top: 1px solid var(--line); background: var(--surface);
  padding: var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-xs);
}

/* --------------------------------------------------------- bloques --- */
.page-head { margin-bottom: var(--sp-6); }
.page-head__row { display: flex; gap: var(--sp-4); align-items: flex-start; flex-wrap: wrap; }
.page-head p { color: var(--muted); max-width: 62ch; margin-bottom: 0; }

/* Sin borde: en Apple la tarjeta blanca se separa del fondo gris por
   contraste. El borde transparente conserva la medida por si una variante
   necesita dibujarlo. */
.card {
  background: var(--surface); border: 1px solid transparent;
  border-radius: var(--r-card); padding: var(--pad-card); box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--gap-card); }
/* Ritmo DENTRO de la tarjeta. Sin esto, una fila de botones y el aviso que
   viene debajo quedaban pegados: cada bloque traía su propio margen o
   ninguno, y el resultado dependía del orden en que se apilaran.
   Los márgenes de hermanos se funden, así que esto no duplica el que ya
   traen los avisos: gana el mayor de los dos. */
.card > * + * { margin-top: var(--sp-45); }
.card > .row + .row { margin-top: var(--sp-3); }
/* La tarjeta de mes maneja su propio espaciado: cabecera pegada al cuerpo. */
.month-card > * + * { margin-top: 0; }
/* La cabecera de una tarjeta necesita MÁS aire abajo que el resto: es el
   corte entre "de qué trata esto" y el contenido. */
.card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-45); flex-wrap: wrap; }
.card__title { font-size: var(--fs-h2); font-weight: 650; color: var(--navy-800); margin: 0; letter-spacing: var(--tracking-title); }
.card__hint { color: var(--muted); font-size: var(--fs-sm); margin: .3rem 0 0; max-width: var(--measure); line-height: 1.45; }

.grid { display: grid; gap: var(--gap-grid); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Dos filas de campos seguidas: el último campo de cada fila no lleva margen
   y «Zona horaria» quedaba pegada a la nota del campo de arriba (2026-10-22). */
form > .grid + * { margin-top: var(--gap-field); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Dos columnas densas necesitan más aire ENTRE ellas que dentro de ellas,
   o se leen como una sola mancha de datos. */
.grid--sidebar { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--sp-5) var(--sp-6); }
@media (max-width: 860px) { .grid--sidebar { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* Ritmo vertical automático entre hermanos, para no repartir márgenes a mano. */
.flow > * + * { margin-top: var(--sp-4); }
.flow--tight > * + * { margin-top: var(--sp-3); }
.flow--loose > * + * { margin-top: var(--sp-5); }

/* Cada bloque de primer nivel de una pantalla se separa del anterior, venga
   de donde venga. La clase la pone app.js al pintar, así no hay que
   acordarse en cada pantalla. */
.pagina > * + * { margin-top: var(--gap-card); }
/* Un título de sección suelto («Su panorama») abre un grupo: más aire arriba
   que entre tarjetas, y su contenido pegado a él (si no, flota a la misma
   distancia de lo de arriba y de lo de abajo y no se sabe de quién es). */
.pagina > .pagina-seccion { margin-top: var(--sp-7); }
.pagina > .pagina-seccion:first-child { margin-top: 0; }
.pagina > .pagina-seccion + * { margin-top: var(--sp-3); }

.stack { display: flex; flex-direction: column; gap: var(--gap-card); }
/* El hueco ya lo pone `gap`: sin esto se sumaba el margen de .card + .card. */
.stack > * + * { margin-top: 0 !important; }
.stack > .note { margin-bottom: 0; }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }

/* ------------------------------------------------------- métricas ---- */
.stat {
  background: var(--surface); border: 1px solid transparent; border-radius: var(--r-card);
  padding: var(--pad-card); box-shadow: var(--shadow-sm);
}
/* Sin MAYÚSCULAS con interletrado abierto: ese recurso lee a software de
   los 2000. La jerarquía se hace con peso y color, no gritando. */
.stat__label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; line-height: 1.35; }
/* La cifra es el dato; el rótulo, su etiqueta. Separarlos deja claro cuál
   de los dos hay que leer primero. */
.stat__value {
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem); font-weight: 700;
  color: var(--navy-900); letter-spacing: var(--tracking-display);
  margin-top: .35rem; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat__value--teal { color: var(--teal-700); }
.stat__value--amber { color: var(--amber-700); }
.stat__value--red { color: var(--red-700); }
.stat__note { font-size: var(--fs-xs); color: var(--muted); margin-top: .45rem; line-height: 1.45; }

.hero-card {
  background: linear-gradient(150deg, var(--chrome-bg), var(--chrome-bg-2) 60%, var(--chrome-bg-3));
  color: var(--chrome-fg); border-radius: var(--r-card); padding: var(--sp-6); box-shadow: var(--shadow-md);
}
.hero-card h1, .hero-card h2, .hero-card h3 { color: var(--chrome-fg); }
.hero-card > p { color: var(--chrome-fg-soft); }
.hero-card .stat__label { color: var(--chrome-fg-dim); }
.hero-card .stat__value { color: var(--chrome-fg); }
.hero-card .muted, .hero-card .xsmall { color: var(--chrome-fg-dim); }
/* Bloque dominante del encabezado: una cifra grande y una barra de avance.
   Sin un elemento claramente mayor, tres datos del mismo tamaño se leen como
   una lista y la pantalla no dice por dónde empezar. */
.hero-hero { display: grid; gap: var(--sp-5) var(--sp-6); grid-template-columns: minmax(0, 1.8fr) minmax(200px, 1fr); align-items: end; }
@media (max-width: 720px) { .hero-hero { grid-template-columns: 1fr; align-items: start; } }
.hero-hero__figure {
  font-size: clamp(2rem, 1.3rem + 3.2vw, 3.1rem); font-weight: 700; line-height: 1.02;
  letter-spacing: var(--tracking-display); margin: .3rem 0 var(--sp-4);
  font-variant-numeric: tabular-nums;
}
.hero-hero__bar { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.16); overflow: hidden; margin-bottom: .6rem; }
.hero-hero__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal-500), #7ce0cc); }
.hero-hero__side-figure {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); font-weight: 700; line-height: 1.1;
  letter-spacing: var(--tracking-title); margin: .3rem 0 .35rem;
  color: #ffd79a; font-variant-numeric: tabular-nums;
}

.hero-card__grid { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.hero-card__block { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: var(--sp-4); }

/* -------------------------------------------------------- botones ---- */
/* Botones de Apple: pastilla, sin sombra, y una jerarquía de tres
   - sólido azul para LA acción de la pantalla,
   - relleno gris con texto azul para lo secundario ("ghost"),
   - solo texto para lo terciario ("quiet").
   44px de alto: la medida mínima cómoda para un dedo. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1;
  padding: .72rem 1.3rem; border-radius: var(--r-pill); min-height: 2.75rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease;
  -webkit-tap-highlight-color: transparent;
  /* Un botón nunca se parte en dos renglones: «+ Nuevo» salía apilado en el
     encabezado y el botón se veía como una caja ancha y torpe. */
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }
.btn--accent { background: var(--btn-accent-bg); color: var(--btn-accent-fg); }
.btn--accent:hover:not(:disabled) { background: var(--btn-accent-bg-hover); color: var(--btn-accent-fg); }
.btn--ghost { background: var(--btn-soft-bg); color: var(--navy-700); }
.btn--ghost:hover:not(:disabled) { background: var(--btn-soft-bg-hover); }
.btn--quiet { background: transparent; color: var(--navy-700); }
.btn--quiet:hover:not(:disabled) { background: var(--btn-soft-bg); }
.btn--danger { background: var(--btn-soft-bg); color: var(--red-600); }
.btn--danger:hover:not(:disabled) { background: var(--red-050); }
.btn--sm { padding: .5rem 1rem; font-size: var(--fs-sm); min-height: 2.25rem; }
/* Botón que solo lleva icono: cuadrado, no pastilla alargada con aire muerto. */
.btn--icon { padding: .45rem; width: 2.25rem; min-width: 2.25rem; }
.btn--block { width: 100%; }
.btn--loading { position: relative; color: transparent !important; }
.btn--loading::after {
  content: ""; position: absolute; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .7s linear infinite; color: #fff;
}
.btn--ghost.btn--loading::after { color: var(--navy-700); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn--loading::after { animation-duration: 2s; } }

/* ------------------------------------------------------ formularios -- */
/* Un campo es una unidad: rótulo, control y ayuda van juntos y MUY separados
   del siguiente campo. Antes la distancia entre campos (12px) casi igualaba
   la del rótulo a su propio control, y el ojo no sabía qué iba con qué. */
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: var(--gap-field); }
.field:last-child { margin-bottom: 0; }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); line-height: 1.35; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; max-width: var(--measure); }
.field__error { font-size: var(--fs-xs); color: var(--red-700); font-weight: 600; }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--red-600); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-input); padding: var(--pad-input); width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Flecha propia en las listas desplegables. La del sistema queda pegada al
   borde, cambia de forma en cada navegador y en el encabezado oscuro se veía
   descuidada. Esta es un chevron fino, con su propio aire a la derecha. */
select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .95rem center; background-size: 12px 8px;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--navy-400); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy-500); box-shadow: var(--focus); }
input[type="range"] { width: 100%; accent-color: var(--teal-600); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--navy-600); }

.check { display: flex; align-items: flex-start; gap: .65rem; font-size: var(--fs-sm); line-height: 1.5; }
.check input { margin-top: .28rem; flex: 0 0 auto; }
.check + .check { margin-top: .55rem; }

.fieldset { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-45); margin: 0 0 var(--sp-45); background: var(--surface-alt); }
.fieldset legend { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); padding: 0 .5rem; margin-left: -.25rem; }
.fieldset > :last-child { margin-bottom: 0; }

details.adv { border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: var(--sp-45); background: var(--surface-alt); }
details.adv > summary {
  cursor: pointer; padding: .8rem 1rem; font-size: var(--fs-sm); font-weight: 600;
  color: var(--navy-700); list-style: none; display: flex; align-items: center; gap: .5rem;
  border-radius: var(--r-card);
}
details.adv > summary:hover { background: var(--navy-050); }
details.adv[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--r-card) var(--r-card) 0 0; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: "▸"; transition: transform .15s ease; }
details.adv[open] > summary::before { transform: rotate(90deg); }
details.adv > .adv__body { padding: var(--sp-45) 1rem 1rem; }

.unknown-toggle { font-size: var(--fs-xs); color: var(--navy-600); background: none; border: none; cursor: pointer; padding: 0; text-decoration: underline; text-align: left; }

/* --------------------------------------------------------- avisos ---- */
.note {
  display: flex; gap: .7rem; align-items: flex-start;
  border-radius: 14px; padding: .9rem 1.05rem; font-size: var(--fs-sm);
  line-height: 1.5; border: 1px solid; margin-bottom: var(--sp-4);
}
.note:last-child { margin-bottom: 0; }
.note > div { min-width: 0; }
.note p { max-width: none; }
/* El icono va en su propio hueco, alineado a la primera línea del texto. */
.note__icon { flex: 0 0 auto; display: grid; place-items: center; margin-top: .05rem; }

/* Los dibujos heredan el color del texto y se alinean como una letra más. */
.ico { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }
.note--info { background: var(--navy-050); border-color: transparent; color: var(--ink-soft); }
.note--info .note__icon { color: var(--navy-600); }
.note--ok { background: var(--teal-050); border-color: var(--teal-100); color: var(--teal-700); }
.note--warn { background: var(--amber-050); border-color: var(--amber-100); color: var(--amber-700); }
.note--danger { background: var(--red-050); border-color: var(--red-100); color: var(--red-700); }
.note--demo { background: var(--amber-050); border-color: var(--amber-600); color: var(--amber-700); }

.chip {
  display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); font-weight: 650;
  padding: .28rem .7rem; border-radius: var(--r-chip); border: 1px solid;
  line-height: 1.3; white-space: nowrap;
}
.chip--neutral { background: var(--surface-sunken); border-color: transparent; color: var(--ink-soft); }
.chip--ok { background: var(--teal-050); border-color: var(--teal-100); color: var(--teal-700); }
.chip--warn { background: var(--amber-050); border-color: var(--amber-100); color: var(--amber-700); }
.chip--danger { background: var(--red-050); border-color: var(--red-100); color: var(--red-700); }

/* --------------------------------------------------------- tablas ---- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-input); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 520px; }
table.data th, table.data td { padding: var(--pad-cell); text-align: left; border-bottom: 1px solid var(--line); }
table.data th:first-child, table.data td:first-child { padding-left: 1.05rem; }
table.data th:last-child, table.data td:last-child { padding-right: 1.05rem; }
table.data thead th { background: var(--navy-050); color: var(--muted); font-weight: 600; position: sticky; top: 0; font-size: var(--fs-xs); padding-top: .65rem; padding-bottom: .65rem; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-alt); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tfoot td { font-weight: 700; background: var(--navy-050); }

.num-pos { color: var(--teal-700); }
.num-neg { color: var(--red-700); }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }

/* ------------------------------------------------------- listados ---- */
/* Lista agrupada, como Ajustes del iPhone: un solo bloque redondeado con
   renglones separados por una línea fina, en vez de una caja por renglón.
   Diez cajas con borde se leen como diez cosas sueltas; un grupo se lee
   como UNA lista. */
.item-list {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden;
}
.item {
  display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between;
  padding: var(--pad-item); background: transparent; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
}
.item:last-child { border-bottom: none; }
.item:hover { background: var(--surface-alt); }
.item__main { min-width: 0; flex: 1 1 260px; display: flex; flex-direction: column; gap: .2rem; }
.item__title { font-weight: 600; color: var(--navy-800); line-height: 1.35; }
.item__meta { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }
/* El importe se separa del texto y nunca queda pegado a los botones. */
.item__amount { font-weight: 600; font-size: var(--fs-body); color: var(--navy-900); white-space: nowrap; margin-left: auto; padding-left: var(--sp-2); font-variant-numeric: tabular-nums; }
.item__actions { display: flex; gap: .45rem; flex-wrap: wrap; }
/* Cuentas de pruebas: la franja de la fecha simulada (amarilla mientras está activa). */
.fecha-simulada { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .5rem 1rem;
  background: var(--surface-alt); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.fecha-simulada--activa { background: #ffd60a; color: #1d1d1f; border-bottom-color: #e6c000; }
.fecha-simulada__controles { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-left: auto; }
.fecha-simulada__controles .input { width: auto; padding: .3rem .5rem; min-height: 0; }
/* Inicio: «Su panorama», lo más importante de sus finanzas en un solo lugar. */
.pano-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); align-items: start; }
.pano-grid > .card { margin: 0; }
@media (max-width: 860px) { .pano-grid { grid-template-columns: 1fr; } }
.pano-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.pano-kpi { padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface-alt); }
.pano-kpi__valor { font-size: 1.25rem; font-weight: 680; font-variant-numeric: tabular-nums; }
.pano-barra__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); margin-bottom: .25rem; }
.pano-barra__cabeza > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Movimientos: «Así va su mes», lo planeado contra lo anotado. */
.asiva__fila { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.asiva__fila:last-of-type { border-bottom: 0; }
.asiva__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
.asiva__cabeza > strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Mi plan: los pagos del mes agrupados por deuda, con su total arriba. */
.pago-grupo { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pago-grupo__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.pago-grupo__cabeza > span { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); }
.pago-grupo .item-list { border: 0; border-radius: 0; }
/* Reparto de lo que les llega al mes (Simulador): una cuenta que cuadra. */
.reparto { margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface-alt); }
.reparto__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: .2rem 0; font-size: var(--fs-sm); }
.reparto__fila > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reparto__nota { display: block; font-size: var(--fs-xs); color: var(--ink-soft); font-weight: 400; }
.reparto__fila--total { border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .4rem; font-weight: 650; }
/* Una deuda que la familia movió fuera del orden de su regla. */
.item--movida { box-shadow: inset 3px 0 0 var(--teal-600); background: var(--surface-alt); }

/* ---------------------------------------------------------- barras --- */
.bar { height: 10px; border-radius: var(--r-pill); background: var(--navy-100); overflow: hidden; }
.bar__fill { height: 100%; background: var(--teal-600); border-radius: var(--r-pill); }
.bar__fill--amber { background: var(--amber-600); }
.bar__fill--navy { background: var(--navy-600); }

/* «Para gastar» por rubro (2026-10-25): cifra + barra a la vista, cada gasto al abrir. */
.para-gastar__cifra { font-size: 2.25rem; font-weight: 700; letter-spacing: var(--tracking-title); margin: .2rem 0 var(--sp-3); font-variant-numeric: tabular-nums; }
.para-gastar__total .bar { margin-bottom: var(--sp-2); }
.rubros { display: flex; flex-direction: column; }
.rubro { border-top: 1px solid var(--line); }
.rubro:first-child { border-top: none; }
.rubro__cabeza { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; cursor: pointer; list-style: none; }
.rubro__cabeza::-webkit-details-marker { display: none; }
.rubro__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .35rem; }
.rubro__fila { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.rubro__nombre { font-weight: 600; overflow-wrap: anywhere; }
.rubro__queda { font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rubro__barra { height: 8px; }
.rubro__detalle { padding: 0 0 var(--sp-3) calc(36px + var(--sp-3)); }
.rubro__gasto { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .4rem 0; border-top: 1px dashed var(--line); font-size: var(--fs-sm); }
.rubro__gasto > span:last-child { text-align: right; white-space: nowrap; }
.opciones-rejilla--chicas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.opciones-rejilla--chicas .opcion-grande { min-height: 48px; }

.legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--muted); }
.legend__key { display: inline-flex; align-items: center; gap: .35rem; }
.legend__swatch { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---------------------------------------------------------- pasos ---- */
.steps { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: var(--sp-4); list-style: none; padding: 0; }
.steps li {
  font-size: var(--fs-xs); font-weight: 650; padding: .35rem .8rem; border-radius: var(--r-chip);
  border: 1px solid var(--line-strong); color: var(--muted); background: var(--surface);
}
.steps li[aria-current="step"] { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.steps li.done { background: var(--teal-050); border-color: var(--teal-100); color: var(--teal-700); }

/* --------------------------------------------------------- modales --- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 60;
  display: grid; place-items: center; padding: var(--sp-4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
/* `dvh` es la altura VISIBLE en el teléfono, sin la barra del navegador.
   Con `vh` el botón de Guardar podía quedar escondido detrás de ella. */
.modal {
  background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg);
  width: min(620px, 100%); max-height: 88vh; max-height: 88dvh; overflow: auto; padding: var(--sp-6);
  overscroll-behavior: contain;
}
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.modal__head h2 { margin: 0; }
/* Los botones de acción se separan del contenido con una línea: dejan de
   parecer parte del formulario y se leen como la decisión final. */
.modal__foot {
  display: flex; justify-content: flex-end; gap: var(--sp-3);
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

/* --------------------------------------------------------- avisos ---- */
.toast-stack { position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 80; display: flex; flex-direction: column; gap: .5rem; max-width: min(420px, calc(100vw - 2rem)); }
.toast {
  background: var(--chrome-bg); color: var(--chrome-fg); border-radius: 16px; padding: .85rem 1.05rem;
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--chrome-line);
}
.toast--ok { background: var(--teal-700); }
.toast--error { background: var(--red-700); }
.toast--warn { background: var(--amber-700); }

/* ------------------------------------------------------ estados ------ */
.empty {
  text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--muted);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: var(--surface-alt);
}
.empty h3 { color: var(--navy-800); }

.skeleton { background: linear-gradient(90deg, var(--navy-050), #fff, var(--navy-050)); background-size: 200% 100%; animation: sheen 1.4s ease-in-out infinite; border-radius: var(--r-input); height: 1rem; }
@keyframes sheen { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

.offline-bar {
  background: var(--amber-600); color: #fff; text-align: center; padding: .45rem;
  font-size: var(--fs-sm); font-weight: 600;
}

/* ------------------------------------------------------ autenticación */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-4); background: linear-gradient(160deg, var(--chrome-bg), var(--chrome-bg-3)); }
.auth-card { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-lg); padding: var(--sp-6); width: min(440px, 100%); }
.auth-card h1 { margin-bottom: .35rem; }
.auth-tabs { display: flex; gap: .3rem; background: var(--navy-050); padding: .25rem; border-radius: var(--r-pill); margin-bottom: var(--sp-4); }
.auth-tabs button { flex: 1; border: none; background: transparent; font: inherit; font-size: var(--fs-sm); font-weight: 650; padding: .5rem; border-radius: var(--r-pill); cursor: pointer; color: var(--muted); }
.auth-tabs button[aria-selected="true"] { background: var(--surface); color: var(--navy-800); box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------- gráfica -- */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font-sans); fill: var(--muted); font-size: 11px; }
.chart .axis line, .chart .axis path { stroke: var(--line); }
.chart .grid line { stroke: var(--line); stroke-dasharray: 3 3; }
.chart-caption { font-size: var(--fs-xs); color: var(--muted); margin-top: .4rem; }

/* ------------------------------------------------------- comparador -- */
.compare { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.compare__col { border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--pad-card); background: var(--surface);
  display: flex; flex-direction: column; }
/* Botón y notas al pie: a la misma altura en las tres columnas. */
.compare__pie { margin-top: auto; padding-top: var(--sp-4); }
.compare__pie:empty { display: none; }
.compare__col--best { border-color: var(--teal-500); box-shadow: 0 0 0 1px var(--teal-500); }
.compare__col h3 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
/* Renglón de rótulo + cifra. Con .35rem de alto las filas se tocaban y el
   ojo no separaba un concepto del siguiente. */
.compare__row {
  display: flex; justify-content: space-between; gap: var(--sp-4); align-items: baseline;
  padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm);
}
.compare__row > span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.compare__row:last-child { border-bottom: none; }

/* Bolsas: barras de colores, cifra grande y anillo de la reserva. */
.bolsa-cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.bolsa-cabeza .card__title { display: flex; align-items: center; }
.bolsa-cifra { font-size: 1.6rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.apilada { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: var(--surface-alt); margin-top: var(--sp-3); }
.apilada--delgada { height: 12px; margin-top: .45rem; }
.apilada__parte { display: block; height: 100%; min-width: 3px; }
.apilada__parte + .apilada__parte { box-shadow: inset 2px 0 0 var(--surface); }
.leyenda-apilada { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .3rem .9rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); font-size: var(--fs-sm); }
.leyenda-apilada li { display: grid; grid-template-columns: .7rem minmax(0, 1fr) auto auto; gap: .45rem; align-items: center; }
.leyenda-apilada strong { font-variant-numeric: tabular-nums; }
.leyenda-apilada .muted { font-size: var(--fs-xs, .78rem); min-width: 2.4rem; text-align: right; }
.leyenda-apilada__punto { width: .7rem; height: .7rem; border-radius: 50%; }
.reserva-vista { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.anillo { position: relative; width: 112px; height: 112px; flex: none; }
.anillo__centro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.anillo__centro span { display: flex; flex-direction: column; line-height: 1.15; }
.anillo__centro strong { font-size: 1.35rem; }
.prestacion-reparto + .prestacion-reparto { padding-top: var(--sp-4); border-top: 1px dashed var(--line); }

/* «Lo último que anotaron · Deshacer» bajo la captura rápida. */
.captura__ultimo { margin-top: .4rem; display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* Cómo se repartió un ingreso real: tres importes en fila. */
.reparto-real { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 14px; background: var(--surface-alt); }
.reparto-real__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2) var(--sp-3); margin-bottom: .4rem; }
.reparto-real__campo { display: flex; flex-direction: column; gap: .2rem; font-size: var(--fs-sm); }

/* Bitácora de cambios: hora a la izquierda, quién y qué a la derecha. */
.bitacora { list-style: none; margin: 0; padding: 0; }
.bitacora li {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: var(--sp-2);
  padding: .4rem 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm);
}
.bitacora li:last-child { border-bottom: none; }
.bitacora__hora { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Leyenda de «real contra planeado». */
.leyenda { display: inline-flex; align-items: center; gap: .4rem; margin-right: var(--sp-4); }
.leyenda::before { content: ''; display: inline-block; width: 1.4rem; height: 0; border-top: 3px solid #0e8f7e; }
.leyenda--planeada::before { border-top: 2px dashed #5d7285; }

/* El color de cada deuda: un punto junto a su nombre. */
.punto-deuda {
  display: inline-block; width: .62rem; height: .62rem; border-radius: 50%;
  margin-right: .45rem; vertical-align: .05em; flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}
/* El selector de color del editor de deudas. */
.colores { display: flex; flex-wrap: wrap; gap: .5rem; margin: .35rem 0; }
.color-opcion {
  width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.color-opcion[aria-pressed="true"] { border-color: var(--surface); box-shadow: 0 0 0 2px var(--navy-900); }
.color-opcion:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }
/* 24 colores en dos filas de 12 en pantallas anchas. */
@media (min-width: 640px) { .colores { display: grid; grid-template-columns: repeat(12, 2rem); } }
.color-otro {
  grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .5rem; width: max-content;
  font-size: var(--fs-sm); color: var(--navy-700); cursor: pointer; padding: .2rem .7rem .2rem .25rem;
  border-radius: 999px; border: 1px solid var(--line);
}
.color-otro input[type="color"] {
  width: 1.6rem; height: 1.6rem; border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer;
}
.color-otro input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-otro input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.color-otro--activo { border-color: var(--navy-900); font-weight: 650; }

/* «Hoy tienes» en el mes en curso: la cifra que más se consulta, destacada. */
.hoy-tienes {
  margin: .5rem 0; padding: .65rem .8rem; border-radius: 14px;
  background: var(--teal-050); border: 1px solid var(--teal-100);
}
.hoy-tienes__fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4);
  font-weight: 650; color: var(--teal-700);
}
.hoy-tienes__fila strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hoy-tienes--neg { background: var(--red-050); border-color: var(--red-100); }
.hoy-tienes--neg .hoy-tienes__fila { color: var(--red-700); }
.hoy-tienes .xsmall { margin-top: .2rem; }
.compare__row dt { color: var(--muted); }
.compare__row dd { margin: 0; font-weight: 650; text-align: right; }

/* "¿Para qué sirve esta sección?": plegado, para que no estorbe a quien ya
   lo sabe, pero siempre a mano en el mismo sitio de cada pantalla. */
.objetivo { margin-top: var(--sp-4); background: var(--navy-050); border-color: var(--navy-100); }
.objetivo > summary { color: var(--navy-700); }
.objetivo__lista { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .4rem var(--sp-4); }
.objetivo__lista dt { font-weight: 650; color: var(--navy-800); font-size: var(--fs-sm); white-space: nowrap; }
.objetivo__lista dd { margin: 0; font-size: var(--fs-sm); color: var(--ink-soft); line-height: 1.5; }
@media (max-width: 560px) {
  .objetivo__lista { grid-template-columns: 1fr; gap: .15rem; }
  .objetivo__lista dd { margin-bottom: .5rem; }
}

/* -------------------------------------------- captura rápida -------- */
/* Una sola línea: tipo, importe, concepto y guardar. El importe es el
   elemento grande porque es el único dato que el usuario siempre tiene. */
.captura { display: flex; gap: var(--sp-3); align-items: stretch; flex-wrap: wrap; }
.captura__tipo { display: flex; gap: .3rem; background: var(--navy-050); padding: .25rem; border-radius: var(--r-pill); }
.captura__tipo .btn { border: none; }

.captura__importe {
  display: flex; align-items: center; gap: .35rem; flex: 1 1 11rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-input);
  padding-left: .85rem; background: var(--surface);
}
.captura__importe:focus-within { border-color: var(--navy-500); box-shadow: var(--focus); }
.captura__signo { font-size: 1.25rem; font-weight: 700; color: var(--muted); }
.captura__importe input {
  border: none; background: transparent; padding: .55rem .85rem .55rem 0;
  font-size: 1.35rem; font-weight: 700; letter-spacing: var(--tracking-title);
  font-variant-numeric: tabular-nums;
}
.captura__importe input:focus { box-shadow: none; }

.captura__concepto { flex: 2 1 14rem; display: flex; }
.captura__resumen {
  margin-top: var(--sp-3); font-size: var(--fs-sm);
  padding-top: var(--sp-3); border-top: 1px dashed var(--line);
}

/* Anotar paso a paso (2026-10-22): cuánto → qué fue → con qué → revisar. */
.captura-pasos { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.captura-pasos__texto { font-weight: 600; font-size: var(--fs-sm); }
.captura-pasos__puntos { display: flex; gap: .3rem; margin-top: .35rem; }
.captura-pasos__punto { width: 22px; height: 4px; border-radius: 4px; background: var(--line); }
.captura-pasos__punto.es-hecho { background: var(--navy-500); }
.captura-pasos__acciones { margin-top: var(--sp-4); }
.captura .btn--primary { flex: 0 0 auto; }

.opciones-titulo { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin: var(--sp-4) 0 var(--sp-2); }
.opciones-titulo:first-child { margin-top: 0; }
.opciones-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-2); }
.opcion-grande {
  display: flex; align-items: center; gap: .7rem; text-align: left; width: 100%;
  min-height: 56px; padding: .55rem .75rem; border-radius: 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); font: inherit;
}
.opcion-grande:hover { border-color: var(--line-strong); }
.opcion-grande:focus-visible { outline: none; box-shadow: var(--focus); }
.opcion-grande[aria-pressed="true"] { border-color: var(--navy-500); box-shadow: 0 0 0 1px var(--navy-500); background: var(--surface-alt); }
.opcion-grande__icono {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.opcion-grande__texto { display: flex; flex-direction: column; min-width: 0; }
.opcion-grande__nombre { font-weight: 600; font-size: var(--fs-sm); line-height: 1.25; }
.opcion-grande__meta { font-size: var(--fs-xs); color: var(--muted); }

.captura-revisar { display: flex; flex-direction: column; gap: var(--sp-3); }
.captura-revisar .btn--accent { width: 100%; }
.captura-eleccion { padding: var(--sp-4); border-radius: 18px; background: var(--surface-alt); border: 1px solid var(--line); }
.captura-eleccion__monto { font-size: 1.75rem; font-weight: 700; letter-spacing: var(--tracking-title); margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; }
.captura-eleccion__fila { display: flex; align-items: center; gap: var(--sp-3); padding: .5rem 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.captura-eleccion__fila > strong { flex: 1; text-align: right; }
.captura-eleccion__cambiar { background: none; border: none; color: var(--navy-500); font: inherit; font-size: var(--fs-xs); cursor: pointer; padding: .4rem 0 .4rem .4rem; min-height: 36px; }

@media (max-width: 560px) {
  .opciones-rejilla { grid-template-columns: 1fr 1fr; }
  .opcion-grande { flex-direction: column; align-items: flex-start; gap: .45rem; min-height: 84px; }
  .captura { flex-direction: column; }
  .captura__tipo { align-self: flex-start; }
  .captura .btn--accent, .captura .btn--primary { width: 100%; }
  /* Apiladas en columna, la base de 11rem/14rem se volvía ALTO: las cajas
     del importe y del concepto medían ~180 px en el celular (Etapa 5). */
  .captura__importe, .captura__concepto { flex: 0 0 auto; }
}

/* ------------------------------------------------ barra de abajo ---- */
/* Celular: las secciones de todos los días fijas abajo, al alcance del
   pulgar, y «Más» para el resto. En pantallas anchas no existe. */
.barra-abajo, .barra-mas { display: none; }
@media (max-width: 720px) {
  .app-nav { display: none; }
  .barra-abajo {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: .35rem max(.5rem, env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
    background: var(--chrome-glass, var(--chrome-bg)); border-top: 1px solid var(--chrome-line);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  }
  .barra-abajo__item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    min-height: 52px; padding: .2rem 0; border: none; background: transparent; cursor: pointer;
    font: inherit; font-size: .72rem; font-weight: 500; color: var(--chrome-fg-soft); text-decoration: none;
    border-radius: 12px; -webkit-tap-highlight-color: transparent;
  }
  .barra-abajo__item .ico { opacity: .7; }
  .barra-abajo__item[aria-current="page"] { color: var(--chrome-fg); font-weight: 650; }
  .barra-abajo__item[aria-current="page"] .ico { opacity: 1; }
  .barra-abajo__item span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* «Anotar»: el botón de todos los días, destacado al centro. */
  .barra-abajo__mas {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--teal-600, #0f8a6c); color: #fff; font-size: 1.5rem; font-weight: 500; line-height: 1;
  }
  .barra-mas:not([hidden]) {
    display: flex; align-items: flex-end; position: fixed; inset: 0; z-index: 39;
    background: rgba(0, 0, 0, .35); padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .barra-mas__lista {
    width: 100%; margin: 0 .5rem; background: var(--surface); border-radius: 18px;
    box-shadow: var(--shadow-lg); overflow: hidden;
  }
  .barra-mas__item {
    display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: 0 1rem;
    color: var(--ink); text-decoration: none; font-weight: 550; border-bottom: 1px solid var(--line);
  }
  .barra-mas__item:last-child { border-bottom: none; }
  .barra-mas__item span { flex: 1 1 auto; }
  .barra-mas__item[aria-current="page"] { color: var(--navy-600); }
  /* Que la barra no tape el pie de página (el de .app-main está en «móvil», abajo). */
  .app-footer { padding-bottom: calc(var(--sp-4) + 64px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------ guía de captura ---- */
.guia__avance { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-45); }
.guia__barra { flex: 1 1 auto; height: 8px; border-radius: var(--r-pill); background: var(--navy-100); overflow: hidden; }
.guia__barra-fill { height: 100%; border-radius: var(--r-pill); background: var(--teal-600); transition: width .3s ease; }

.guia__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-list); }
.guia__paso {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--pad-item); border: 1px solid var(--line); border-radius: var(--r-input);
  background: var(--surface);
}
/* Lo ya hecho se apaga: la vista tiene que llevar el ojo a lo que falta. */
.guia__paso--hecho { background: var(--surface-alt); border-style: dashed; opacity: .72; }

/* El número del paso se vuelve palomita al completarse: el mismo hueco
   cuenta dos historias sin mover nada de sitio. */
.guia__marca {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: var(--r-chip);
  display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700;
  background: var(--navy-050); color: var(--navy-700); border: 1px solid var(--navy-100);
  margin-top: .1rem;
}
.guia__paso--hecho .guia__marca { background: var(--teal-050); color: var(--teal-700); border-color: var(--teal-100); }

.guia__texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.guia__titulo { font-weight: 650; color: var(--navy-800); line-height: 1.35; }
.guia__detalle { font-weight: 500; color: var(--muted); font-size: var(--fs-sm); }
.guia__porque { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; max-width: var(--measure); }

@media (max-width: 560px) {
  .guia__paso { flex-wrap: wrap; }
  .guia__paso .btn { width: 100%; }
}

/* --------------------------------------------------- mes del plan ---- */
/* La tarjeta desplegable de cada mes en "Mi plan". Antes llevaba el
   espaciado en estilos en línea, así que no seguía el ritmo del resto. */
.month-card { padding: 0; overflow: hidden; }
.month-card > summary {
  cursor: pointer; padding: var(--sp-45) var(--pad-card);
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-4); flex-wrap: wrap; list-style: none;
  transition: background .15s ease;
}
.month-card > summary:hover { background: var(--navy-050); }
.month-card > summary::-webkit-details-marker { display: none; }
.month-card[open] > summary { border-bottom: 1px solid var(--line); background: var(--surface-alt); }
.month-card__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.month-card__name { font-size: 1.08rem; font-weight: 700; color: var(--navy-800); letter-spacing: -.015em; }
.month-card__facts { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: baseline; }
.month-card__fact { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: .35rem; align-items: baseline; }
.month-card__fact strong { font-size: var(--fs-sm); color: var(--navy-800); font-variant-numeric: tabular-nums; }
.month-card__body { padding: var(--sp-5) var(--pad-card) var(--pad-card); }

/* -------------------------------------------------------- móvil ------ */
@media (max-width: 720px) {
  /* En móvil se aprieta el relleno LATERAL (la pantalla es estrecha) pero se
     conserva el ritmo VERTICAL: lo que hace ilegible una pantalla chica es
     que las cosas se peguen entre sí, no que tengan poco margen al borde. */
  :root {
    --pad-card: 1.05rem;
    --gap-card: 1rem;
    --gap-grid: 1rem;
    --pad-item: 0.85rem 0.9rem;
  }
  .app-main {
    /* Abajo, +64 px: lo que mide la barra de secciones, para que no tape nada. */
    padding: var(--sp-45) max(var(--sp-4), env(safe-area-inset-right)) calc(var(--sp-6) + 64px + env(safe-area-inset-bottom)) max(var(--sp-4), env(safe-area-inset-left));
  }
  /* En el teléfono el encabezado se parte en dos o tres renglones y mide
     mucho más que --header-h, pero el menú estaba clavado a esa altura: al
     desplazarte se metía DEBAJO del encabezado. Aquí solo se queda fijo el
     menú, pegado arriba, y el encabezado se va con el resto. */
  .app-header { position: static; }
  .app-nav { top: 0; padding-top: env(safe-area-inset-top); }
  .header-email { display: none; }
  .hero-card { padding: var(--sp-45); }
  .item { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  /* Al apilar en vertical, la base de 260px del texto se volvía 260px de
     ALTO: cada renglón de cada lista salía con un hueco en blanco enorme en
     el teléfono. Se nota en cuanto alguien abre la app en uno. */
  .item__main { flex-basis: auto; width: 100%; }
  .item__amount { margin-left: 0; padding-left: 0; }
  /* Los renglones tocables NO se apilan: icono, texto, importe y flecha en
     una línea, como en Ajustes del iPhone. */
  .item.fila { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: var(--sp-3); }
  .item.fila .item__main { width: auto; flex: 1 1 auto; }
  .item.fila .item__amount { margin-left: auto; padding-left: var(--sp-2); text-align: right; font-size: var(--fs-sm); }
  .item__actions { width: 100%; justify-content: flex-end; }
  .modal { padding: var(--sp-45); }
  .modal__foot .btn { flex: 1 1 auto; }
}

/* Resumen desplegable que sustituye a tablas enormes en móvil */
.mobile-summary { display: none; }
@media (max-width: 720px) {
  .table-wrap.collapse-mobile { display: none; }
  .mobile-summary { display: block; }
  .mobile-summary details {
    border: 1px solid var(--line); border-radius: var(--r-input);
    margin-bottom: .5rem; background: var(--surface);
  }
  .mobile-summary summary { padding: .85rem 1rem; cursor: pointer; font-weight: 650; font-size: var(--fs-sm); display: flex; justify-content: space-between; gap: var(--sp-3); }
  .mobile-summary summary::-webkit-details-marker { display: none; }
  .mobile-summary .kv { display: flex; justify-content: space-between; gap: var(--sp-3); padding: .55rem 1rem; font-size: var(--fs-sm); border-top: 1px solid var(--line); }
  .mobile-summary .kv span:first-child { color: var(--muted); }
}

/* ============================================ componentes estilo Apple == */

/* Control segmentado, como el de iOS: opciones excluyentes a la vista, en
   lugar de esconderlas en una lista desplegable. Se usa para preguntas de
   2 a 4 respuestas ("¿del hogar o de una persona?", "¿fijo o prescindible?"). */
.segmento {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px;
  background: var(--surface-sunken); border-radius: 11px; max-width: 100%;
}
.segmento__opcion {
  appearance: none; border: none; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--ink);
  padding: .5rem .95rem; border-radius: 9px; min-height: 2.25rem;
  transition: background .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.segmento__opcion:hover { background: rgba(0, 0, 0, .04); }
.segmento__opcion[aria-pressed="true"] {
  background: var(--segment-on); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
  font-weight: 600;
}
.segmento__opcion:disabled { opacity: .4; cursor: not-allowed; }
.segmento--bloque { display: flex; width: 100%; }
/* Pestañas de «Su dinero»: son enlaces (cambian la dirección) con forma de segmento. */
.dinero-pestanas { margin-bottom: var(--sp-5); flex-wrap: nowrap; }
.dinero-pestanas .segmento__opcion {
  display: flex; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; white-space: nowrap; padding-left: .4rem; padding-right: .4rem;
}
.segmento--bloque .segmento__opcion { flex: 1 1 0; }

/* Encabezado de grupo: título con su total a la derecha. Es lo primero que
   se lee, así que dice de quién es el grupo y cuánto pesa al mes. */
.grupo + .grupo { margin-top: var(--sp-5); }
.grupo__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  padding: 0 .25rem .5rem;
}
.grupo__titulo { font-size: var(--fs-body); font-weight: 650; color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.grupo__total { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grupo__pie { font-size: var(--fs-xs); color: var(--muted); padding: .5rem .25rem 0; }

/* Renglón que se toca entero para editar, con su flecha a la derecha. */
.fila { cursor: pointer; }
.fila:focus-visible { outline: none; background: var(--surface-alt); box-shadow: inset 0 0 0 2px var(--navy-500); }
.fila__ico {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; color: #fff; font-size: .95rem;
}
.fila__flecha { color: var(--muted-soft); flex: 0 0 auto; }
.fila .item__main { flex-basis: 180px; }
/* El renglón de "+ Agregar" dentro del grupo: azul y sin importe, como el
   último renglón de una lista de Ajustes. */
.fila--agregar { color: var(--navy-700); font-weight: 500; justify-content: flex-start; gap: .6rem; }
.fila--agregar:hover { background: var(--surface-alt); }

/* Cifra protagonista: lo que una pantalla quiere que leas primero. */
.cifra { font-family: var(--font-num); font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.05; color: var(--navy-900); font-variant-numeric: tabular-nums; }
.cifra--md { font-size: var(--fs-h1); }
.cifra__nota { font-size: var(--fs-sm); color: var(--muted); margin-top: .35rem; }

/* Reparto de lo que se necesita al mes: barra apilada + leyenda. */
.reparto { margin-top: var(--sp-45); }
.reparto__barra { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-sunken); gap: 2px; }
.reparto__barra > span { display: block; height: 100%; min-width: 3px; }
/* Columnas de ancho acotado: con `1fr` dos partidas ocupaban media pantalla
   cada una y la cifra quedaba lejísimos de su nombre. */
.reparto__leyenda { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: .55rem var(--sp-6); grid-template-columns: repeat(auto-fill, minmax(200px, 250px)); }
.reparto__leyenda li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); }
.reparto__punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.reparto__monto { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Tres cifras lado a lado dentro de una tarjeta, separadas por una línea
   fina: más ligero que tres tarjetas, que se leían como tres temas. */
.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4) var(--sp-45); }
.trio > div { min-width: 0; }
.trio__valor { font-size: 1.35rem; font-weight: 650; letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; color: var(--navy-900); margin-top: .2rem; }

/* Campo de importe grande, para el dato que siempre se tiene. */
.importe-grande { display: flex; align-items: center; gap: .35rem; border: 1px solid var(--line-strong); border-radius: var(--r-input); padding-left: .9rem; background: var(--surface); }
.importe-grande:focus-within { border-color: var(--navy-500); box-shadow: var(--focus); }
.importe-grande > span { font-size: 1.35rem; font-weight: 600; color: var(--muted); }
.importe-grande input { border: none; background: transparent; font-size: 1.6rem; font-weight: 650; letter-spacing: var(--tracking-title); padding: .55rem .9rem .55rem 0; }
.importe-grande input:focus { box-shadow: none; }

/* Pregunta con su control segmentado debajo. */
.pregunta { margin-bottom: var(--gap-field); }
.pregunta__texto { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: .45rem; display: block; }
.pregunta__ayuda { font-size: var(--fs-xs); color: var(--muted); margin-top: .45rem; line-height: 1.5; }

/* Botón «?» con su globo de explicación. */
.ayuda-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: .3rem; }
.ayuda {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--muted); font: inherit; font-size: .7rem; font-weight: 700;
  line-height: 1; cursor: pointer; display: inline-grid; place-items: center; padding: 0;
}
.ayuda:hover, .ayuda[aria-expanded="true"] { color: var(--navy-600); border-color: var(--navy-500); }
.ayuda__burbuja {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 40;
  width: min(19rem, 78vw); padding: .75rem .9rem; border-radius: 12px;
  background: var(--chrome-bg); color: var(--chrome-fg); box-shadow: var(--shadow-lg);
  font-size: var(--fs-xs); font-weight: 400; line-height: 1.5; text-align: left; white-space: normal;
  letter-spacing: 0;
}
.ayuda__burbuja[hidden] { display: none; }
@media (hover: hover) { .ayuda-wrap:hover .ayuda__burbuja { display: block; } }
.equivalente { font-weight: 400; display: flex; align-items: center; justify-content: flex-end; }

/* Lista de deudas: un renglón por cuenta que se despliega para ver su
   detalle. Antes cada deuda era una tarjeta grande con TODO abierto y cuatro
   cuentas sumaban casi tres pantallas de scroll. */
.deudas { padding: 0; overflow: hidden; }
.deuda { border-bottom: 1px solid var(--line); }
.deuda:last-child { border-bottom: none; }
.deuda > summary {
  list-style: none; cursor: pointer; display: grid; align-items: center; gap: .25rem var(--sp-4);
  grid-template-columns: auto minmax(0, 1fr) auto auto; padding: var(--sp-4) var(--pad-card);
  transition: background .15s ease;
}
.deuda > summary::-webkit-details-marker { display: none; }
.deuda > summary:hover { background: var(--surface-alt); }
.deuda[open] > summary { background: var(--surface-alt); border-bottom: 1px solid var(--line); }
.deuda__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.deuda__nombre { font-weight: 600; color: var(--ink); line-height: 1.3; }
.deuda__meta { font-size: var(--fs-xs); color: var(--muted); margin-top: .15rem; }
.deuda__saldo { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.deuda__saldo small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.deuda__chevron { color: var(--muted-soft); transition: transform .2s ease; }
.deuda[open] .deuda__chevron { transform: rotate(90deg); }
.deuda__barra { grid-column: 2 / 4; height: 4px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
.deuda__barra > span { display: block; height: 100%; background: var(--teal-500); border-radius: 999px; }
.deuda__cuerpo { padding: var(--sp-45) var(--pad-card) var(--pad-card); }
.deuda__cuerpo > .card { box-shadow: none; padding: 0; border: none; background: transparent; }

/* Pestañas de un formulario largo: una sección a la vez. */
.pestanas { position: sticky; top: calc(-1 * var(--sp-6)); z-index: 5; background: var(--surface);
  padding: .25rem 0 var(--sp-4); margin-bottom: var(--sp-2); }
.pestana-siguiente { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }

@media (max-width: 720px) {
  .deuda > summary { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--sp-4); align-items: start; }
  /* «Próximo pago $437.63 · 12 nov 2026» en una sola línea dejaba al nombre
     sin espacio: «Liverpool / Rosa / Gis» y «departamental» encimado (2026-10-22). */
  .deuda__saldo { max-width: 9.5rem; }
  .deuda__saldo small { margin-top: .15rem; line-height: 1.35; }
  .deuda__nombre, .deuda__meta { overflow-wrap: anywhere; }
  .deuda__chevron { display: none; }
  .deuda__barra { grid-column: 2 / 4; }
  .deuda__cuerpo { padding: var(--sp-4); }
}

@media (prefers-contrast: more) {
  .card, .item, .table-wrap { border-color: var(--ink-soft); }
  .muted, .field__hint { color: var(--ink-soft); }
}