/* Base de Cuadre — reset, tipografía, layout y componentes compartidos.
   design-system.md §5 (tipografía), §6 (forma y espaciado), §7 (componentes).

   Los prototipos dibujan un marco de teléfono 390×844 porque se revisaban en
   escritorio. La app real ocupa el viewport completo en móvil; el marco solo
   sobrevive como ancho máximo centrado cuando la pantalla es ancha. */

/* ---------- Fuente ---------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../../assets/fonts/inter-variable.woff2') format('woff2');
}

/* ---------- Reset ---------- */

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

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body.sin-scroll { overflow: hidden; }

img, svg { display: block; max-width: 100%; }

button, input, textarea, select {
  font: inherit;
  color: inherit;
  font-variant-numeric: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Layout de la app ---------- */

#app {
  width: 100%;
  max-width: 460px;         /* el marco 390 del prototipo, con aire */
  margin-inline: auto;
  min-height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* En pantallas anchas se marca el borde del "teléfono" para que no flote. */
@media (min-width: 520px) {
  body { background: #070707; }
  #app {
    background: var(--bg);
    border-inline: 1px solid var(--line);
  }
}

.pantalla {
  flex: 1;
  padding: 0 var(--pad-x) var(--barra);
  /* Zona segura de iPhone: la barra inferior no se come el contenido. */
  padding-bottom: calc(var(--barra) + env(safe-area-inset-bottom, 0px));
}

.pantalla-sin-barra { padding-bottom: 24px; }

/* ---------- Tipografía (§5) ---------- */

.heroe {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.heroe-xl { font-size: 46px; font-weight: 800; letter-spacing: -.02em; line-height: 1.02; }
.heroe-sm { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

.titulo {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.numero-seccion { font-size: 23px; font-weight: 800; letter-spacing: -.01em; }

.fila-txt { font-size: 14.5px; font-weight: 700; }
.fila-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.meta-txt { font-size: 12px; font-weight: 600; color: var(--muted); }

.micro {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.monto { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.buen-color  { color: var(--good); }
.mal-color   { color: var(--danger); }
.aviso-color { color: var(--gold); }
.muted       { color: var(--muted); }

/* ---------- Superficies ---------- */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--r-card);
  padding: 14px;
}

.divisor { height: 1px; background: var(--line); border: 0; }

/* ---------- Tile de icono ---------- */

.tile {
  display: grid;
  place-items: center;
  border-radius: var(--r-tile);
  flex: 0 0 auto;
}
.tile-42 { width: 42px; height: 42px; }
.tile-38 { width: 38px; height: 38px; border-radius: 11px; }
.tile-52 { width: 52px; height: 52px; border-radius: 15px; }

/* ---------- Botones ---------- */

.btn {
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: var(--r-btn);
  background: var(--panel2);
  color: var(--txt);
  font-size: 14.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, background .16s ease;
}
.btn:active { transform: scale(.97); }
.btn-primario { background: var(--good); color: #06231a; }
.btn-peligro  { background: var(--danger); color: #fff; }
.btn-fantasma { background: transparent; border: 1px solid var(--line); }
.btn-bloque   { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Objetivo táctil mínimo para cualquier control redondo (§6: ≥42px). */
.btn-icono {
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--txt);
  background: var(--panel2);
}

/* ---------- Chips ---------- */

.chip {
  min-height: 34px;
  padding: 0 14px;
  border-radius: var(--r-chip);
  background: var(--panel2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid transparent;
  position: relative;
}

/* El chip se ve de 34px pero se toca en 42px. La regla de accesibilidad
   (16–70+, objetivo ≥42px) no se negocia, y una tira de filtros con chips de
   42px de alto se come la pantalla. */
.chip::after {
  content: '';
  position: absolute;
  inset: -4px 0;
  min-height: var(--tap);
}
.chip[aria-pressed="true"], .chip.activo {
  background: var(--txt);
  color: var(--bg);
}
.chip-punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }

.tira-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 2px;
  margin-inline: calc(var(--pad-x) * -1);
  padding-inline: var(--pad-x);
}
.tira-chips::-webkit-scrollbar { display: none; }

/* ---------- Badges ---------- */

.badge {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 6px;
}
.badge-fijo { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.badge-hacia-ti { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); }

/* ---------- Donut (§7) ---------- */

.donut {
  position: relative;
  width: 100%;
  max-width: 216px;
  aspect-ratio: 1;
  margin-inline: auto;
}
.donut-svg { width: 100%; height: 100%; }
.donut-gajo { transition: stroke-dasharray .6s ease, stroke-dashoffset .6s ease; }

/* El agujero del donut mide 79 de 120 unidades del viewBox, o sea el 66% del
   ancho. El texto va centrado, así que el ancho seguro es ese agujero menos un
   margen: 24% de padding a cada lado deja el contenido dentro del hueco en
   cualquier tamaño, sin depender de píxeles fijos. */
.donut-centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding-inline: 24%;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}
.donut-micro {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  line-height: 1.2;
}
.donut-grande {
  font-size: 27px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
  white-space: nowrap;
}
/* Escalones para que una cifra larga quepa sin partirse en dos líneas. */
.donut-grande-sm { font-size: 22px; }
.donut-grande-xs { font-size: 18px; letter-spacing: -.03em; }
/* La secundaria es la que se desborda si el copy crece. Se limita a dos
   líneas y se corta con elipsis antes de tocar el aro. */
.donut-sec {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.donut-vacio { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---------- Sheet + scrim (§7) ---------- */

.scrim {
  position: fixed;
  inset: 0;
  background: #000a;
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
  opacity: 0;
  transition: opacity .24s ease;
}
.scrim.visible { opacity: 1; }

.sheet {
  width: 100%;
  max-width: 460px;
  max-height: 86%;
  overflow-y: auto;
  background: #141414;
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  border-top: 1px solid var(--hair2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.22, 1, .36, 1);
}
.sheet.visible { transform: translateY(0); }

.sheet-asa {
  width: 38px; height: 4px; border-radius: 999px;
  background: #ffffff22; margin: 10px auto 4px;
}

/* ---------- Toast (§7) ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra) + 16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 16px);
  background: #F4F4F2;
  color: #0E0E0E;
  font-size: 13.5px;
  font-weight: 700;
  padding: 11px 18px;
  border-radius: 999px;
  z-index: 90;
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 8px 24px #0009;
  max-width: min(90vw, 420px);
  text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Estados ---------- */

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 44px 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.error-pantalla {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
}

.aviso {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.aviso-gold   { background: color-mix(in srgb, var(--gold) 12%, transparent);   color: var(--gold); }
.aviso-danger { background: color-mix(in srgb, var(--danger) 14%, transparent); color: #FF8A9E; }

/* ---------- Utilidades ---------- */

.fila { display: flex; align-items: center; gap: 12px; }
.entre { justify-content: space-between; }
.crece { flex: 1; min-width: 0; }
.elipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.centro-txt { text-align: center; }
.derecha { text-align: right; }
.pila { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.oculto { display: none !important; }

/* ---------- Pantalla Hoy ---------- */

.hoy-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0 16px;
}

.chip-mes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tap);
  padding: 0 13px;
  border-radius: var(--r-chip);
  font-size: 12px;
  font-weight: 700;
  background: var(--panel2);
}
.chip-mes-punto { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
/* Verde = vivo y accionable. Rojo = bloqueado. No es bueno contra malo. */
.chip-mes.en-curso { color: var(--good); }
.chip-mes.en-curso .chip-mes-punto { background: var(--good); }
.chip-mes.cerrado { color: var(--danger); }
.chip-mes.cerrado .chip-mes-punto { background: var(--danger); }

.hoy-donut { padding: 6px 0 8px; }
.hoy-bs { text-align: center; margin-top: 10px; font-variant-numeric: tabular-nums; }

.hoy-sin-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  margin-top: 14px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--gold) 11%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  color: var(--gold);
  min-height: 58px;
}
.hoy-sin-plan .fila-sub { color: color-mix(in srgb, var(--gold) 72%, var(--muted)); }

.hoy-seccion { margin-top: 28px; }
.hoy-seccion .micro { display: block; margin-bottom: 12px; }

.hoy-pills { display: flex; flex-direction: column; gap: 8px; }

/* Pill de categoría — design-system §7. Tappable en toda su área. */
.pill-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--hair);
  min-height: 66px;
}
.pill-cat:active { background: var(--panel2); transform: scale(.995); }
.pill-cat-medio { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pill-cat-barra {
  height: 4px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
.pill-cat-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}

/* Lenguaje de "cuánto te queda", no ambiguo (design-system §9). */
.pill-cat-plan {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Sin objetivo no hay barra, así que la fila respira menos alto. */
.pill-cat.sin-objetivo { min-height: 58px; }

.hoy-ver-todo {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 6px 0;
  position: relative;
}
.hoy-ver-todo::after { content: ''; position: absolute; inset: -12px -8px; }

.hoy-movs { display: flex; flex-direction: column; }

.mov-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 2px;
  border-bottom: 1px solid var(--hair);
  min-height: 60px;
}
.mov-fila:last-child { border-bottom: none; }
.mov-fila:active { background: var(--panel); }
.mov-fila .badge { display: inline-block; vertical-align: baseline; }

/* ---------- Plan mensual ---------- */

.plan-cabecera { padding: 22px 0 14px; }

.plan-ingreso-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 15px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--hair);
  min-height: 64px;
}
.plan-ingreso-monto { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.plan-ingreso-lapiz { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

.plan-ingreso-edit {
  width: 100%;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  background: var(--bg);
  border: 1px solid var(--good);
  border-radius: 10px;
  padding: 4px 10px;
}
.plan-ingreso-edit:focus { outline: none; }

.plan-anexado {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--good);
  margin-top: 8px;
  padding-left: 2px;
}

.plan-donut { padding: 18px 0 4px; }

.plan-sugerencia {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  margin-top: 16px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--good) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--good) 30%, transparent);
  color: var(--good);
  min-height: 60px;
}
.plan-sugerencia .fila-sub { color: color-mix(in srgb, var(--good) 62%, var(--muted)); }

.plan-filas { display: flex; flex-direction: column; gap: 8px; }

.plan-fila {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--hair);
  min-height: 66px;
}
/* Ahorro e Inversión son "gasto hacia ti", no un residuo de fin de mes. */
.plan-fila.hacia-ti { border-color: color-mix(in srgb, var(--good) 34%, transparent); }
.plan-fila .badge { margin-left: 6px; vertical-align: 1px; }

@keyframes destello-plan {
  0%   { background: color-mix(in srgb, var(--good) 22%, var(--panel)); }
  100% { background: var(--panel); }
}
.plan-fila.recien-agregada { animation: destello-plan 1.1s ease; }

.plan-quitar {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  padding: 3px 0;
  position: relative;
}
.plan-quitar::after { content: ''; position: absolute; inset: -10px -8px; }

/* Stepper — botones de 42px, paso de $5 (design-system §7). */
.plan-stepper { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.plan-pm {
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--txt);
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  display: grid;
  place-items: center;
}
.plan-pm:active { background: var(--line); transform: scale(.94); }

.plan-monto {
  min-width: 66px;
  height: var(--tap);
  padding: 0 8px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
  text-align: center;
}
.plan-monto:active { background: var(--panel2); }

.plan-monto-edit {
  width: 78px;
  height: var(--tap);
  padding: 0 8px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--good);
}
.plan-monto-edit:focus { outline: none; }

.plan-agregar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  min-height: var(--tap);
  border-radius: var(--r-btn);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
}
.plan-agregar:active { background: var(--panel); }

/* ---------- Historial ---------- */

.hist-cabecera { padding: 22px 0 14px; }

.hist-navmes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}
.hist-flecha {
  width: var(--tap);
  height: var(--tap);
  border-radius: 12px;
  background: var(--panel2);
  color: var(--txt);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.hist-flecha:disabled { opacity: .3; pointer-events: none; }
.hist-mes-label {
  flex: 1;
  height: var(--tap);
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--txt);
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-transform: capitalize;
}

/* Un solo mes de datos: el nombre a secas, sin controles que no llevan a nada. */
.hist-mes-solo {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  text-transform: capitalize;
  padding: 2px 0;
}

.hist-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--hair);
  margin-top: 12px;
}
.hist-seg-btn {
  min-height: 36px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  position: relative;
}
.hist-seg-btn::after { content: ''; position: absolute; inset: -3px 0; min-height: var(--tap); }
.hist-seg-btn.on { background: var(--txt); color: var(--bg); }

.hist-chips { margin-top: 14px; }

.hist-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 14px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--hair);
}

.hist-dia { margin-top: 22px; }
.hist-dia-cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.hist-dia-cabeza .micro { text-transform: capitalize; }
.hist-dia-total { font-size: 12.5px; font-weight: 700; color: var(--muted); }

.hist-selector { padding: 0 18px 22px; display: flex; flex-direction: column; gap: 18px; }
.hist-selector-ano { display: flex; flex-direction: column; gap: 6px; }
.hist-selector-ano .micro { margin-bottom: 2px; }
.hist-selector-mes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--hair);
  text-align: left;
  min-height: var(--tap);
}
.hist-selector-mes .fila-txt { text-transform: capitalize; }
.hist-selector-mes.on { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }

/* ---------- Recibo ---------- */

.recibo-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  color: #0E0E0E;
}
.recibo-cabeza-txt { display: flex; flex-direction: column; min-width: 0; }
.recibo-cat {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; opacity: .75;
}
.recibo-usd { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
.recibo-ves { font-size: 12.5px; font-weight: 700; opacity: .78; }

.recibo-cuerpo { padding: 6px 20px 24px; }
.recibo-fila {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 13.5px;
}
.recibo-fila:last-of-type { border-bottom: none; }
.recibo-clave { color: var(--muted); flex: 0 0 auto; }
.recibo-valor {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.recibo-valor small {
  display: block;
  color: var(--muted);
  font-weight: 500;
  font-size: 11px;
  margin-top: 3px;
  font-variant-numeric: normal;
}

.recibo-nota {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--panel);
}
.recibo-nota p { font-size: 13.5px; margin-top: 5px; line-height: 1.45; overflow-wrap: anywhere; }

.recibo-foto {
  width: 100%;
  border-radius: 14px;
  margin-top: 14px;
  border: 1px solid var(--line);
}

/* ---------- Cierre de mes ---------- */

.cierre-cabecera, .stats-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 0 14px;
}

.cierre-donas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.cierre-dona { text-align: center; }
.cierre-dona .micro { display: block; margin-bottom: 8px; }
.cierre-dona .donut { max-width: 100%; }
.cierre-dona .donut-grande { font-size: 19px; }
.cierre-bs { text-align: center; margin-top: 12px; }

.cierre-veredicto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 22px 16px;
  margin-top: 20px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--hair);
}

.cierre-excedente {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px;
  margin-top: 16px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--gold) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
}
.cierre-excedente .fila-sub { line-height: 1.45; }
.cierre-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.cierre-margen {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px;
  margin-top: 16px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--hair);
}
.cierre-margen .fila-sub { line-height: 1.45; }

.cierre-decidido {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  margin-top: 16px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--good) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--good) 28%, transparent);
}
.cierre-deshacer {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  padding: 3px 0;
  text-decoration: underline;
}

.cierre-sugerencia {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
}
.cierre-sug-punto {
  width: 8px; height: 8px; border-radius: 50%;
  flex: 0 0 auto; margin-top: 6px;
}
.cierre-sugerencia .fila-txt { font-weight: 600; line-height: 1.4; }

.cierre-var {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 10px 13px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--hair);
  min-height: 58px;
}

.cierre-verplan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 24px;
  min-height: var(--tap);
  border-radius: var(--r-btn);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
  text-transform: capitalize;
}

/* ---------- Mi Ahorro ---------- */

.ahorro-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 0 10px;
}

.ahorro-heroe {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 18px 10px 6px;
}
.ahorro-heroe .meta-txt { line-height: 1.45; max-width: 32ch; }

.ahorro-donut { padding: 14px 0 0; }
.ahorro-objetivo { text-align: center; margin-top: 12px; }

.ahorro-racha {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  margin-top: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--lima) 11%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--lima) 28%, transparent);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lima);
  line-height: 1.4;
}
.ahorro-racha strong { font-weight: 800; }

.ahorro-mes {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 13px;
  border-radius: var(--r-pill);
  background: var(--panel);
  border: 1px solid var(--hair);
  min-height: 62px;
}
.ahorro-mes .fila-txt { text-transform: capitalize; }
.ahorro-mes .badge { margin-left: 6px; }

.ahorro-detalle { padding: 0 20px 22px; }

.ahorro-meta-mes {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.ahorro-meta-mes strong { color: var(--txt); font-weight: 800; }
.meta-forma { display: flex; flex-direction: column; gap: 7px; padding: 0 18px 24px; }

/* ---------- Categoría / Stats ---------- */

.stats-donut { padding: 8px 0 4px; }

.stats-veredicto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 16px auto 0;
  padding: 10px 18px;
  border-radius: var(--r-chip);
  font-size: 13.5px;
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
  text-align: center;
}
.stats-veredicto.bueno {
  background: color-mix(in srgb, var(--good) 14%, transparent);
  color: var(--good);
}
.stats-veredicto.malo {
  background: color-mix(in srgb, var(--danger) 16%, transparent);
  color: #FF8A9E;
}
.stats-sinplan { text-align: center; margin-top: 14px; line-height: 1.45; }

.stats-tira {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 22px;
}
.stats-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 6px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
  text-align: center;
}
.stats-tile-valor { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.stats-tile-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); line-height: 1.2;
}

.stats-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
}
.stats-insight-emoji { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.stats-insight p { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.stats-insight strong { font-weight: 800; }

.stats-comercio { display: flex; flex-direction: column; gap: 5px; }
.stats-barra {
  height: 5px;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
.stats-barra span { display: block; height: 100%; border-radius: 999px; }

.gap-10 { gap: 10px; }

/* ---------- Barra inferior (design-system §10) ---------- */

.barra {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  z-index: 50;
}

.barra-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 52px;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  border-radius: 12px;
  transition: color .16s ease;
}
.barra-btn.on { color: var(--txt); }
.barra-btn:active { background: var(--panel); }

/* El `+` es un botón circular elevado con el gradiente morado. */
.barra-mas {
  width: 56px;
  height: 56px;
  margin-top: -18px;
  border-radius: 50%;
  justify-self: center;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--plus-a), var(--plus-b));
  box-shadow: 0 8px 22px color-mix(in srgb, var(--plus-a) 45%, transparent);
}
.barra-mas:active { transform: scale(.93); }

/* ---------- Onboarding ---------- */

.onb {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 26px 0 22px;
  gap: 18px;
}
.onb-puntos { display: flex; gap: 6px; justify-content: center; }
.onb-puntos span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line);
  transition: background .2s ease, width .2s ease;
}
.onb-puntos span.on { background: var(--good); width: 18px; border-radius: 999px; }

.onb-cuerpo { flex: 1; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.onb-centro { align-items: center; text-align: center; }
.onb-marca { width: 92px; margin-bottom: 6px; }
.onb-marca svg { width: 100%; height: auto; }

.onb-linea {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 34ch;
  margin-bottom: 8px;
}
.onb-centro .onb-linea { margin-inline: auto; }

.onb-input {
  width: 100%;
  min-height: 58px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0 16px;
  font-size: 26px;
  font-weight: 800;
  text-align: center;
}
.onb-input:focus { outline: none; border-color: var(--good); background: var(--bg); }
.onb-input::placeholder { color: #4a4a4a; }

.onb-reparto { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.onb-fila {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 11px;
  border-radius: 13px;
  background: var(--panel);
}

.onb-privacidad {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 6px;
}
.onb-privacidad strong { color: var(--txt); font-weight: 700; }

.onb-pie { display: flex; flex-direction: column; gap: 8px; }
.onb-saltar {
  min-height: var(--tap);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}

/* ---------- Ajustes ---------- */

.ajustes-grupo { margin-top: 28px; }
.ajustes-grupo .micro { display: block; margin-bottom: 10px; }
.ajustes-nota { font-size: 12px; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }

.ajustes-tasas { margin-top: 12px; }
.ajustes-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
  min-height: var(--tap);
}
.ajustes-fila:last-child { border-bottom: none; }

.ajustes-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--hair);
  min-height: 62px;
}
.ajustes-switch {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  flex: 0 0 auto;
  transition: background .2s ease;
}
.ajustes-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform .2s ease, background .2s ease;
}
.ajustes-toggle[aria-pressed="true"] .ajustes-switch { background: color-mix(in srgb, var(--good) 40%, transparent); }
.ajustes-toggle[aria-pressed="true"] .ajustes-switch::after {
  transform: translateX(18px);
  background: var(--good);
}

/* ---------- Registro rápido ---------- */

.reg-cabeza { padding: 6px 20px 14px; }
.reg-titulo { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.reg-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* Paso 1: las 15 categorías. Cuatro por fila entran sin scroll en un teléfono. */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 8px;
  padding: 2px 16px 24px;
}
.reg-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.reg-cat:active { transform: scale(.94); }
.reg-cat-nombre {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  line-height: 1.15;
}

/* Paso 2: cabecera del color de la categoría. */
.reg-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 20px;
  color: #0E0E0E;
}
.reg-volver {
  width: 34px; height: 34px;
  margin-left: -6px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ffffff2e;
}
.reg-head-txt { display: flex; flex-direction: column; min-width: 0; }
.reg-head-cat {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; opacity: .75;
}
.reg-head-monto {
  font-size: 34px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}

/* Toggle de moneda. Grande a propósito: es Nivel 1, no un ajuste escondido. */
.reg-moneda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 14px 20px 0;
}
.reg-seg {
  min-height: var(--tap);
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.reg-seg.on { background: var(--txt); color: var(--bg); border-color: var(--txt); }

.reg-conv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 20px 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-height: 34px;
}
.reg-sin-tasa { color: var(--gold); }

.reg-fuente {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--panel2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  position: relative;
}
.reg-fuente::after { content: ''; position: absolute; inset: -6px 0; min-height: var(--tap); }

.reg-teclado {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 18px 8px;
}
.reg-tecla {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 15px 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
  min-height: 54px;
}
.reg-tecla:active { background: var(--panel2); transform: scale(.96); }

.reg-detalle-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 36px);
  margin: 4px 18px;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 700;
}
.reg-detalle-toggle.abierto svg { transform: rotate(180deg); }
.reg-detalle-toggle svg { transition: transform .2s ease; }

.reg-detalle-cuerpo {
  padding: 8px 20px 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.reg-input {
  width: 100%;
  min-height: var(--tap);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 13px;
  font-size: 14.5px;
  font-weight: 600;
}
.reg-input:focus { outline: none; border-color: var(--good); background: var(--bg); }
.reg-input::placeholder { color: #5a5a5a; font-weight: 500; }

.reg-sugerencias { margin-top: 2px; }

.reg-fijo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  padding: 10px 12px;
  margin-top: 8px;
  border-radius: 13px;
  background: var(--panel);
  border: 1px solid var(--hair);
  min-height: var(--tap);
}
.reg-fijo-caja {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--line);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--bg);
  flex: 0 0 auto;
}
.reg-fijo[aria-pressed="true"] .reg-fijo-caja { background: var(--good); border-color: var(--good); }

.reg-guardar {
  width: calc(100% - 36px);
  margin: 10px 18px 22px;
  min-height: 52px;
  border-radius: 16px;
  font-size: 15.5px;
  font-weight: 800;
  color: #08130d;
  background: linear-gradient(135deg, var(--lima), var(--good));
}
.reg-guardar:disabled { opacity: .35; }
.reg-guardar:not(:disabled):active { transform: scale(.98); }

/* Selector de fuente de tasa */
.reg-fuentes { display: flex; flex-direction: column; gap: 8px; padding: 0 18px 14px; }
.reg-fuente-op {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
  text-align: left;
  min-height: 58px;
}
.reg-fuente-op.on { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }
.reg-fuente-nombre { font-size: 14.5px; font-weight: 700; }
.reg-fuente-val { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

.reg-manual { display: flex; flex-direction: column; gap: 8px; padding: 4px 18px 22px; }
.reg-manual-input {
  width: 100%;
  min-height: 52px;
  background: var(--bg);
  border: 1px solid var(--good);
  border-radius: 13px;
  padding: 0 14px;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.reg-manual-input:focus { outline: none; }
.reg-manual-error { font-size: 12px; font-weight: 600; color: #FF8A9E; min-height: 16px; }

/* ---------- Puerta del piloto ---------- */

.puerta {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 44px 4px 32px;
  min-height: 100dvh;
  justify-content: center;
}

.puerta-marca { text-align: center; }
.puerta-donut { width: 96px; margin: 0 auto 18px; }
.puerta-donut svg { width: 100%; height: auto; }

.puerta-linea {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.5;
  max-width: 30ch;
  margin-inline: auto;
}

.puerta-forma { display: flex; flex-direction: column; gap: 10px; }

.puerta-input {
  width: 100%;
  min-height: 56px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-btn);
  padding: 0 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .14em;
  text-align: center;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.puerta-input::placeholder { color: #4a4a4a; letter-spacing: .14em; }
.puerta-input:focus {
  outline: none;
  border-color: var(--good);
  background: var(--bg);
}

.puerta-error {
  font-size: 12.5px;
  font-weight: 600;
  color: #FF8A9E;
  min-height: 18px;
  text-align: center;
  line-height: 1.4;
}

.puerta-pasos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: paso;
  padding: 0;
}
.puerta-pasos li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  counter-increment: paso;
}
.puerta-pasos li::before {
  content: counter(paso);
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--good);
  color: var(--bg);
  font-size: 12px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.puerta-pasos strong { color: var(--good); font-weight: 800; }

.puerta-aviso {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.puerta-aviso strong { color: var(--txt); font-weight: 700; }

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