/* Ahorra — tokens y componentes del handoff de diseño (superficie móvil). */

:root {
  /* Tinta: un solo tema, oscuro. Los colores van por función, no por cómo
     se ven: con un solo tema, "crema" o "tinta" ya no dicen para qué sirven.
     Las superficies de Tinta B (el fondo casi negro) con el texto arena
     pastel de Tinta suave. */
  color-scheme: dark;              /* inputs, selector de fecha y scrollbars nativos en oscuro */

  /* Superficies */
  --bg: #15120E;                   /* fondo de la app, del celular y del escritorio */
  --surface: #221D17;              /* tarjeta de meta, insight, barra de registro, hojas y modales */
  --surface-2: #2A241D;            /* ítem activo, rieles sobre --bg, campos fuera de hojas, esqueletos */
  --line: #2E2821;                 /* separadores entre filas y secciones */
  --line-strong: #3A332A;          /* bordes de controles, separadores y rieles dentro de --surface, barras inactivas */

  /* Texto */
  --text: #E8DCC6;                 /* arena pastel: 13,8:1 sobre --bg, 12,3:1 sobre --surface */
  --text-2: #CDBFA8;               /* secundario: frases de apoyo */
  --text-3: #A99C87;               /* metadatos, overlines, íconos inactivos, placeholders: 6,9:1 sobre --bg, 5,7:1 sobre --surface-2 */
  --text-4: #7D7263;               /* no es para texto (4:1): el borde de las cuentas Tinta y Pizarra */

  /* Acción y estado */
  --accent: #EB8450;               /* CTA, FAB, arco del anillo, progreso de la meta */
  --on-accent: #15120E;            /* texto sobre --accent: 7,1:1 */
  --accent-text: #F2A077;          /* links y texto naranja: 9:1 sobre --bg */
  --positive: #A8D4B4;             /* "vas bien", gastaste menos, "puedes gastar hoy", semana actual, switch encendido */
  --on-positive: #15120E;
  --otras: #6E6456;                /* la porción "Otras N" de la dona y "gastaste" en Ingresos: relleno, no texto */
  --danger-fill: #C2562B;          /* toast de error, barra pasada del límite, medio de pago crédito */
  --on-danger: #FFFFFF;            /* 4,5:1 */
  --on-cuenta: #FFFFFF;            /* texto de las tarjetas de cuenta: ≥ 4,8:1 sobre los 14 fondos (--text no llega en Violeta y Azul) */

  /* La paleta de categorías y fuentes: 18, para que cada categoría tenga un
     color que ninguna otra usa. El servidor guarda el nombre y acá está el
     relleno y lo que va encima (blanco sobre los oscuros, --bg sobre los
     claros). Todos dan 3:1 o más contra --bg, y el texto encima 4,5:1 o más.
     El orden es el de la paleta en server/db.js. */
  --cat-frambuesa: #b24a70;   --cat-frambuesa-on: #ffffff;
  --cat-vino: #a44954;        --cat-vino-on: #ffffff;
  --cat-cuero: #915e40;       --cat-cuero-on: #ffffff;
  --cat-mostaza: #b68b16;     --cat-mostaza-on: var(--bg);
  --cat-oliva: #708c34;       --cat-oliva-on: var(--bg);
  --cat-verde: #2e8046;       --cat-verde-on: #ffffff;
  --cat-petroleo: #0d9298;    --cat-petroleo-on: var(--bg);
  --cat-azul: #1a79b9;        --cat-azul-on: #ffffff;
  --cat-indigo: #4c60aa;      --cat-indigo-on: #ffffff;
  --cat-violeta: #7c60bd;     --cat-violeta-on: #ffffff;
  --cat-ciruela: #a85a99;     --cat-ciruela-on: #ffffff;
  --cat-pizarra: #77889b;     --cat-pizarra-on: var(--bg);
  --cat-rosa: #f7acbc;        --cat-rosa-on: var(--bg);
  --cat-arena: #cbbba1;       --cat-arena-on: var(--bg);
  --cat-limon: #e0d385;       --cat-limon-on: var(--bg);
  --cat-cielo: #8dceee;       --cat-cielo-on: var(--bg);
  --cat-lavanda: #c3bcf5;     --cat-lavanda-on: var(--bg);
  --cat-malva: #d9a3d3;       --cat-malva-on: var(--bg);
  /* El relleno neutro de las barras de "Mes a mes": el arena de antes, que
     el de la paleta nueva es demasiado claro para eso. */
  --barra-neutra: #9a8c76;

  /* Cómo va algo contra su límite. El servidor manda el nombre del tono
     (ok, warn, over, neutral) y acá se decide el color. */
  --tone-ok: var(--positive);
  --tone-warn: var(--accent-text);
  --tone-over: var(--accent-text); /* en 700 con "↑ " */
  --tone-over-fill: var(--danger-fill);
  --tone-neutral: var(--text-3);
  /* Los esqueletos de la primera carga. */
  --skeleton: var(--surface-2);

  /* Tamaños de letra: los únicos 8. */
  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 15px;  --fs-lg: 17px;
  --fs-xl: 21px;  --fs-2xl: 25px; --fs-3xl: 31px; --fs-display: 62px;
  /* Espacio, base 4. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  /* Radios: 5 niveles y el círculo. El mismo en celular y escritorio. */
  --radius-sm: 4px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
  --radius-pill: 999px; --radius-round: 50%;

  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Alto útil de la tab bar, **sin** el área segura: íconos y textos van en
     estos 64, y debajo el área segura con el mismo fondo. */
  --tabbar: 64px;
  --tabbar-total: calc(var(--tabbar) + var(--safe-bottom));
  /* Lo que el FAB ocupa sobre el final de una pantalla: tab bar 64 + FAB 62
     + 16 de separación + 16 de aire. Sin esto tapaba la última fila. */
  --fab-clear: 158px;
  /* Alto que el teclado le come a la ventana; lo mantiene app.js. */
  --kb: 0px;

  --ease-sheet: cubic-bezier(.32, .72, 0, 1);
}

* { box-sizing: border-box; }

/* El fondo de html y body es lo que se ve debajo de la tab bar, en la zona
   del indicador de inicio del iPhone: tiene que ser el de la app. */
html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
}

/* El alto de la app. En el navegador, 100dvh: 100lvh la escondería detrás
   de la barra de Safari. Instalada, 100lvh: medido en un iPhone de 874,
   iOS da innerHeight, 100dvh y 100% de 812 —la pantalla menos la barra de
   estado (62)— y la tab bar quedaba 62pt arriba del borde. 100vh y 100lvh
   dan los 874 de la pantalla entera. */
#app { height: 100%; height: 100dvh; }
@media (display-mode: standalone) {
  html, body, #app { height: 100lvh; }
}

/* Sin esto, iOS pinta de azul lo que no tenga color propio (la campana, el
   engranaje): el color por defecto de sus botones. */
button { color: inherit; }

body {
  font-family: var(--sans);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* El alto (arriba, con html y body) decide dónde termina la tab bar, que
   va a su fondo. */
#app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  transition: background 260ms ease;
}

#app.is-onb { background: var(--bg); }

/* Una franja con el fondo de la app debajo de la hora: si no, lo que se
   scrollea pasa por abajo de la barra de estado y queda encimado con ella
   (la barra es translúcida, black-translucent). Sin área segura mide 0.
   Queda debajo de las hojas, que oscurecen también esa zona. */
#app::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: var(--bg);
  z-index: 1;
  pointer-events: none;
}
#sheet-layer { z-index: 2; }

#screen {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.view {
  padding: calc(var(--safe-top) + var(--space-6)) var(--space-5) calc(var(--fab-clear) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------------------------------------------------------- tipografía --- */

.overline {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}

.overline--dark {
  letter-spacing: .12em;
  color: var(--text-3);
}

.serif { font-family: var(--serif); font-weight: 400; }

.view-title {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  line-height: 1.1;
}

.section-title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
}

.pretty { text-wrap: pretty; }

/* --------------------------------------------------------------- íconos --- */

/* Trazo de 2px que hereda el color de quien lo contiene: el estado lo
   sigue poniendo el CSS de siempre (tab activa, alerta, texto apagado). */
.ico { display: block; flex: none; }

/* ------------------------------------------------------------ presiones --- */

.pressable { cursor: pointer; transition: transform 120ms ease, background 120ms ease; }
.pressable:active { transform: scale(.98); }

.cta {
  height: 54px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 100%;
  transition: transform 120ms ease;
}
.cta:active { transform: scale(.985); }
/* El botón principal: el que avanza. En Tinta, uno solo. */
.cta--principal { background: var(--accent); color: var(--on-accent); }
.cta--tall { height: 56px; border-radius: var(--radius-pill); }
/* Lo que borra: con borde y texto naranja, sin relleno. */
.cta--peligro {
  background: var(--surface);
  color: var(--accent-text);
  border: 1.5px solid var(--danger-fill);
}

.link-quiet {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-3);
  cursor: pointer;
  padding: var(--space-2);
  background: none;
  border: 0;
  font-family: var(--sans);
}
.link-quiet--dark { color: var(--text-3); }

/* --------------------------------------------------------- onboarding --- */

.onb {
  min-height: 100%;
  padding: calc(var(--safe-top) + var(--space-12)) var(--space-6) calc(var(--space-12) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  background: var(--bg);
  color: var(--text);
}

.onb__bars { display: flex; gap: var(--space-2); }
.onb__bar {
  height: 3px;
  flex: 1;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transition: background 260ms ease;
}
.onb__bar.is-on { background: var(--accent); }

.onb__body { display: flex; flex-direction: column; gap: var(--space-5); }

.onb__glyph {
  width: 92px;
  height: 92px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  /* Es el logo, no texto: no sigue la escala de letra. */
  font-size: 44px;
  color: var(--text);
}

.onb__title {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  line-height: 1.06;
  letter-spacing: -.5px;
}

.onb__text {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 300px;
}

.onb__actions { display: flex; flex-direction: column; gap: var(--space-3); }

.onb__fade { animation: fade-up 320ms ease both; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- setup --- */

.setup {
  min-height: 100%;
  justify-content: space-between;
  gap: var(--space-8);
  padding-top: calc(var(--safe-top) + var(--space-12));
  /* Sin FAB ni tab bar: el alta se queda con el espacio de antes. */
  padding-bottom: calc(var(--tabbar-total) + var(--space-12));
}

.setup__intro { display: flex; flex-direction: column; gap: var(--space-3); }
.setup__title {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  line-height: 1.08;
  letter-spacing: -.5px;
  margin: var(--space-1) 0 0;
  font-weight: 400;
}
.setup__text {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: 300px;
}

.setup__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: auto;
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--fs-sm); color: var(--text-3); font-weight: 500; }

.field__box {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 0 var(--space-5);
  height: 58px;
  transition: border-color 160ms ease;
}
.field__box:focus-within { border-color: var(--accent-text); }
.field__sign { font-size: var(--fs-lg); color: var(--text-3); font-weight: 500; }

/* Un error de este campo: el borde lo marca y la línea de abajo dice qué
   hacer. */
.field__box.is-error { border-color: var(--danger-fill); }
.field__error {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--accent-text);
}
.amount + .field__error { text-align: center; margin-top: 0; }

.field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  /* 17px evita que iOS haga zoom al enfocar el campo. */
  font-size: var(--fs-lg);
  font-weight: 500;
  color: var(--text);
  user-select: text;
  -webkit-user-select: text;
}
.field__input::placeholder { color: var(--text-3); font-weight: 400; }

.field__hint {
  color: var(--text-3);
  font-weight: 400;
}

.sheet__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Los campos de fecha de iOS se pintan solos; hay que alinearlos a mano. */
.field__input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  min-height: 22px;
  text-align: left;
}

.setup__note {
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
  margin: 2px 0 0;
}

/* -------------------------------------------------------------- header --- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ---------------------------------------------------- el mes elegido --- */
/* La píldora ‹ Mes › del escritorio, en chico: ‹ y › de 32 y el mes en serif
   22. El nombre tiene el ancho de "Septiembre" (el molde, invisible, en la
   misma celda), así las flechas no saltan al cambiar de mes. El escritorio
   la agranda en desktop.css. */
.mes-movil { display: flex; align-items: center; gap: var(--space-3); }
.mes-movil__anio { font-size: var(--fs-sm); color: var(--text-3); }
.mes-pildora {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
}
.mes-pildora__btn {
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--surface-2);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
}
.mes-pildora__btn[aria-disabled="true"] { background: transparent; color: var(--text-4); cursor: default; }
.mes-pildora__nombre {
  display: grid;
  margin: 0 12px;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.mes-pildora__nombre > span { grid-area: 1 / 1; }
.mes-pildora__molde { visibility: hidden; }

/* Mirando un mes pasado, debajo de la píldora. */
.mes-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-2);
}
.mes-aviso > span { flex: 1; }
.mes-aviso strong { color: var(--text); font-weight: 700; }
.mes-aviso__volver {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--accent-text);
  cursor: pointer;
}

/* Un mes pasado sin foto de sus límites. */
.sin-limites { font-size: var(--fs-sm); color: var(--text-3); }
.budget-hero__amount.is-over { color: var(--tone-over); }

/* --------------------------------------------------------------- inicio --- */
/* El Inicio del celular (viewHome): el Resumen del escritorio en una columna. */

.view.inicio { gap: 22px; }
.inicio .topbar__greeting { font-size: 30px; line-height: 1; margin-top: 0; }

/* Cuánto puedes gastar hoy, o cómo cerró un mes pasado. */
.hoy__monto {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  letter-spacing: -1px;
}
.hoy__monto.is-ok { color: var(--positive); }
.hoy__monto.is-over { color: var(--accent-text); }
.hoy__cierre {
  font-family: var(--serif);
  font-size: 44px;
  line-height: 1.05;
}
.hoy__cierre.is-sobro { color: var(--positive); }
.hoy__cierre.is-over { color: var(--tone-over); }
.hoy__nota { margin-top: var(--space-1); font-size: 14px; color: var(--text-2); }
.hoy .sin-limites { margin-top: var(--space-1); }

/* El anillo en chico, y al lado las categorías que más gastaron. */
.anillo-movil { display: flex; align-items: center; gap: 18px; }
.anillo-movil__anillo { position: relative; flex: none; width: 168px; height: 168px; }
.anillo-movil__anillo svg { display: block; }
.anillo-movil__centro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.anillo-movil__rotulo { font-size: 10px; letter-spacing: .14em; color: var(--text-3); }
.anillo-movil__monto { font-family: var(--serif); font-size: 30px; line-height: 1.05; }
.anillo-movil__pct { font-size: var(--fs-xs); color: var(--text-2); }
.anillo-movil__pct.is-over { color: var(--accent-text); font-weight: 700; }
.anillo-movil__lado {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
}
p.anillo-movil__lado { display: block; margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); }

.top-cat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  text-align: left;
  cursor: pointer;
}
.top-cat__punto { width: 10px; height: 10px; flex: none; border-radius: 3px; }
.top-cat__nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-cat__nota { flex: none; text-align: right; }

/* Un link que es un botón: "Ver las 15 →". */
.link-accion {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-text);
  cursor: pointer;
}

/* La leyenda del anillo, en chico. El escritorio la agranda. */
.anillo-leyenda { display: flex; flex-direction: column; gap: 5px; font-size: var(--fs-xs); color: var(--text-2); }
.anillo-leyenda__fila { display: flex; align-items: center; gap: var(--space-2); }
.anillo-leyenda__muestra { width: 16px; height: 5px; flex: none; border-radius: 3px; }

/* La meta, compacta: el aro a la izquierda y el plan en una línea. */
.meta-movil {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 18px;
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.meta-movil--pasada { padding: var(--space-4) 18px; }
.aro-meta { position: relative; flex: none; width: 84px; height: 84px; }
.aro-meta svg { display: block; }
.aro-meta__pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 22px;
}
.meta-movil__cuerpo { flex: 1; min-width: 0; }
.meta-movil__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.meta-movil__nombre { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.meta-movil__monto { font-size: 18px; font-weight: 700; }
.meta-movil__linea { margin-top: 2px; font-size: var(--fs-xs); line-height: 1.4; color: var(--text-2); }
.meta-movil--pasada .meta-movil__linea { font-size: 14px; }
.meta-movil__acciones { display: flex; flex-direction: column; gap: var(--space-1); }
.meta-movil__cta { height: 48px; }

.topbar__greeting {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  margin-top: 2px;
}

.bell {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.bell__dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: 2px solid var(--surface);
}

/* ---------------------------------------------------------- tarjetas --- */

.card {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.card--destacada {
  background: var(--surface);
  color: var(--text);
  border: 0;
  border-radius: var(--radius-xl);
}

.card--tenue {
  background: transparent;
}

/* -------------------------------------------------------- tarjeta meta --- */

.goal {
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Sin meta, o con la meta cumplida: el vacío ocupa la tarjeta entera. */
.goal--vacia { padding: 0; }

.goal__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.goal__deadline { font-size: var(--fs-sm); color: var(--text-3); }

.goal__row { display: flex; align-items: flex-end; gap: var(--space-4); }

.ring {
  position: relative;
  width: 116px;
  height: 116px;
  flex: none;
  border-radius: var(--radius-round);
  background: conic-gradient(var(--accent) var(--p, 0%), var(--line-strong) var(--p, 0%) 100%);
}

.ring__hole {
  position: absolute;
  inset: 13px;
  border-radius: var(--radius-round);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ring__pct { font-family: var(--serif); font-size: var(--fs-3xl); line-height: 1; }
.ring__label {
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: .1em;
  margin-top: 2px;
}

.goal__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-1);
  min-width: 0;
}
.goal__name { font-family: var(--serif); font-size: var(--fs-xl); }
.goal__saved { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.6px; }
.goal__target { font-size: var(--fs-sm); color: var(--text-3); }

.goal__cta {
  height: 48px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-md);
}

/* ------------------------------------------------------ tarjetas métrica --- */

.metrics { display: flex; gap: var(--space-3); }

.metric {
  flex: 1;
  min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-4);
}
.metric__label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 500; }
.metric__value { font-family: var(--serif); font-size: var(--fs-2xl); margin-top: var(--space-1); }
/* "Puedes gastar hoy" según el tono que manda el servidor. */
.metric__value--ok { color: var(--positive); }
.metric__value--limite { color: var(--text); }
.metric__value--over { color: var(--accent-text); }
.metric__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }

.bar {
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  margin-top: var(--space-3);
}
.bar__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--accent);
  transition: width 400ms ease-out;
}

.dots { display: flex; gap: var(--space-1); margin-top: var(--space-3); }
.dots__i { flex: 1; height: 7px; border-radius: var(--radius-pill); background: var(--surface-2); }
.dots__i.is-on { background: var(--positive); }

/* ------------------------------------------------------------ listas --- */

.list {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }

.avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 700;
  color: #fff;
}
.avatar--sm {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  background: var(--line);
  color: var(--text-2);
}
.avatar--tile {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.row__main { flex: 1; min-width: 0; }
.row__title {
  font-size: var(--fs-md);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }
.row__amt { font-size: var(--fs-md); font-weight: 700; flex: none; }

.row__foot {
  padding: var(--space-3) 0;
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-2);
  border-top: 1px solid var(--line);
}
.row__foot b { color: var(--text); font-weight: 700; }

.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}
.list-head__link {
  font-size: var(--fs-sm);
  color: var(--accent-text);
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: 0;
  font-family: var(--sans);
  padding: var(--space-1) 0;
}

/* Estados vacíos: una frase en serif, una línea de apoyo y como mucho una
   acción, centrados. Nunca ceros ni gráficos vacíos. */
.vacio {
  padding: var(--space-12) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.vacio__frase { font-family: var(--serif); font-size: var(--fs-xl); line-height: 1.2; color: var(--text); }
.vacio__apoyo { font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); max-width: 320px; }
.vacio__cta { width: auto; padding: 0 var(--space-6); margin-top: var(--space-3); }
.vacio__link { margin-top: var(--space-1); color: var(--accent-text); }
/* Dentro de la tarjeta ink. */
.vacio--oscuro .vacio__frase { color: var(--text); }
.vacio--oscuro .vacio__apoyo { color: var(--text-2); }

/* ------------------------------------------------------- presupuesto --- */

.budget-hero {
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.budget-hero__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.budget-hero__head b { font-weight: 500; }
.budget-hero__amount {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  letter-spacing: -1px;
}
.budget-hero__amount span {
  font-size: var(--fs-md);
  font-family: var(--sans);
  color: var(--text-2);
  font-weight: 500;
}
.budget-hero__bar {
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.budget-hero__bar > div {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--text);
  transition: width 400ms ease-out;
}

.cat-card {
  border-radius: 0;
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.cat-card__head { display: flex; align-items: center; gap: var(--space-3); }
.cat-card__name { flex: 1; font-size: var(--fs-md); font-weight: 500; }
.cat-card__spent { font-size: var(--fs-sm); font-weight: 700; }
.cat-card__limit { font-size: var(--fs-sm); color: var(--text-3); }
.cat-card__bar {
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.cat-card__bar > div {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 400ms ease-out;
}
.cat-card__hint { font-size: var(--fs-sm); }

.dashed-btn {
  height: 52px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-md);
  font-weight: 500;
  font-family: var(--sans);
  cursor: pointer;
  width: 100%;
}

.subsection {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  margin-top: var(--space-2);
}

/* ---------------------------------------------------------- análisis --- */

.chart {
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.chart__label { font-size: var(--fs-xl); color: var(--text); font-weight: 400; font-family: var(--serif); }
.chart__trend { font-size: var(--fs-sm); font-weight: 500; color: var(--positive); }
.chart__trend.is-up { color: var(--accent-text); }

.bars {
  --bar-max: 108px;
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  height: 150px;
}
.bars__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  height: 100%;
}
.bars__amt { font-size: var(--fs-xs); font-weight: 700; }
.bars__bar {
  width: 100%;
  flex: none;
  border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm);
  background: var(--line-strong);
  min-height: 4px;
  transition: height 400ms ease-out;
}
.bars__bar.is-current { background: var(--positive); }
.bars__label { font-size: var(--fs-xs); color: var(--text-3); }

.donut-card {
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5);
  display: flex;
  gap: var(--space-4);
  align-items: center;
}
/* La dona (dona.js y bloqueDona/donaChica): una porción por círculo; por
   el corte entre porciones se ve el fondo. */
.dona-bloque--chica { flex: 1; min-width: 0; display: flex; gap: var(--space-4); align-items: center; }
.dona { position: relative; flex: none; }
.dona__svg { display: block; }
/* Al pasar o tocar una porción (o un tramo del anillo), las demás se atenúan. */
.dona__seg, .anillo__seg { transition: opacity 150ms ease-out; }
.dona__seg.is-atenuada, .anillo__seg.is-atenuada { opacity: .35; }
.dona__centro {
  position: absolute;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.donut__total { font-family: var(--serif); font-size: var(--fs-lg); line-height: 1.1; }
.donut__label { font-size: var(--fs-xs); color: var(--text-3); letter-spacing: .08em; }

.legend { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.legend__row { display: flex; align-items: center; gap: var(--space-2); }
.legend__dot { width: 9px; height: 9px; border-radius: var(--radius-pill); flex: none; }
.legend__name { flex: 1; font-size: var(--fs-sm); }
.legend__pct { font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }

.insight {
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.insight__title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.25;
}
.insight__body {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text-2);
}

/* Todas las categorías contra el mes pasado, dentro de la tarjeta ink. El
   verde de la marca se pierde sobre el fondo oscuro: acá va uno más claro. */
.insight-cats {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line-strong);
}
.insight-cats__label {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}
.insight-cats__row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); }
.insight-cats__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.insight-cats__pct { color: var(--text-3); font-size: var(--fs-sm); }
.insight-cats__amt { font-weight: 700; min-width: 76px; text-align: right; }
.insight-cats__row.is-up .insight-cats__amt { color: var(--accent-text); }
.insight-cats__row.is-down .insight-cats__amt { color: var(--positive); }
.insight-cats__row.is-same .insight-cats__amt { color: var(--text-3); }
/* El monto del titular del insight: verde si se gastó menos, naranja si más. */
.insight-destacado.is-down { color: var(--positive); }
.insight-destacado.is-up { color: var(--accent-text); }

/* ----------------------------------------------------------- cuentas --- */

.account {
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  color: var(--on-cuenta);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  border: 1px solid var(--line-strong);
}
.account__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.account__kind { font-size: var(--fs-sm); color: var(--on-cuenta); font-weight: 500; }
.account__name { font-size: var(--fs-lg); font-weight: 700; margin-top: 2px; }
.account__chip {
  width: 34px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: rgba(247, 241, 232, .22);
}
.account__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.account__balance { font-family: var(--serif); font-size: var(--fs-3xl); }
.account__last4 {
  font-size: var(--fs-sm);
  color: var(--on-cuenta);
  letter-spacing: .16em;
}

.pref {
  border-radius: 0;
  padding: var(--space-4) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.pref__main { flex: 1; }
.pref__label { font-size: var(--fs-md); font-weight: 500; }
.pref__desc { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }

.switch {
  width: 50px;
  height: 30px;
  flex: none;
  border-radius: var(--radius-pill);
  padding: var(--space-1);
  border: 0;
  cursor: pointer;
  display: flex;
  background: var(--line-strong);
  justify-content: flex-start;
  transition: background 200ms ease;
}
.switch.is-on { background: var(--positive); justify-content: flex-end; }
.switch__knob {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* ---------------------------------------------------- tab bar y FAB --- */

/* Al fondo de #app: su alto decide dónde termina. Fija al borde del
   viewport no alcanzaba, porque instalada iOS da un viewport más corto que
   la pantalla. Opaca: con el blur de antes se desenfocaba lo de atrás —la
   sombra naranja del + entre otras cosas— y se veía un brillo. */
.tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--tabbar-total);
  padding: 0 var(--space-2) var(--safe-bottom);
  background: var(--bg);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  color: var(--text-3);
  background: none;
  border: 0;
  font-family: var(--sans);
  padding: 2px 0;
}
.tab.is-active { color: var(--text); }
.tab__icon {
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab__label { font-size: var(--fs-xs); font-weight: 500; }

.fab {
  position: absolute;
  right: 20px;
  bottom: calc(var(--tabbar-total) + 16px);
  width: 62px;
  height: 62px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-3xl);
  font-weight: 400;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(235, 132, 80, .35);
  cursor: pointer;
  transition: transform 140ms ease;
}
.fab:active { transform: scale(.94); }

#chrome:empty { display: none; }

/* ------------------------------------------------------------ sheets --- */

#sheet-layer { position: absolute; inset: 0; pointer-events: none; }
#sheet-layer.is-active { pointer-events: auto; }

.scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity 240ms ease;
}
#sheet-layer.is-open .scrim { opacity: 1; }

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--kb);
  max-height: calc(100% - var(--kb) - var(--safe-top) - 24px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-4) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
  transition: transform 280ms var(--ease-sheet), bottom 200ms ease-out;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transform: translateY(100%);
}
#sheet-layer.is-open .sheet { transform: none; }
/* Si la hoja no entra, se scrollea: sin esto la columna flex aplastaba a
   sus hijos, y "Guardar gasto" quedaba de 22px de alto. */
.sheet > * { flex-shrink: 0; }

.sheet__handle {
  width: 40px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  align-self: center;
  flex: none;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sheet__title { font-family: var(--serif); font-size: var(--fs-2xl); }
.sheet__cancel {
  font-size: var(--fs-sm);
  color: var(--text-3);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  background: none;
  border: 0;
  font-family: var(--sans);
}
.sheet__text {
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.5;
}

.amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) 0 2px;
}
.amount__sign { font-size: var(--fs-3xl); color: var(--text-3); font-weight: 500; }
.amount__value {
  font-family: var(--serif);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -2px;
  color: var(--text-3);
}
.amount__value.has-value { color: var(--text); }

.chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: 2px;
  margin: 0 calc(var(--space-5) * -1);
  padding-left: var(--space-5);
  padding-right: var(--space-8);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--sans);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-2);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.chip.is-on { color: #fff; }
/* Sobre un fondo claro, el blanco no se lee: el chip de "sin marcar". */
.chip--claro.is-on { color: var(--bg); }

/* ------------------------------------------- categoría de un gasto --- */

/* El campo: la elegida a la derecha, y tocarlo abre la lista. */
.campo-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  height: 52px;
  flex: none;
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: transparent;
  font-family: var(--sans);
  font-size: var(--fs-md);
  cursor: pointer;
}
.campo-cat__rotulo { color: var(--text-3); flex: none; }
.campo-cat__valor { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.campo-cat__punto { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.campo-cat__nombre {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.campo-cat__elegir { font-weight: 500; color: var(--accent-text); }
.campo-cat__flecha { color: var(--text-3); font-size: var(--fs-sm); flex: none; }

/* La lista, en una hoja encima de la del gasto. */
.lista-cat-capa { position: absolute; inset: 0; }
.lista-cat__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity 220ms ease;
}
.lista-cat-capa.is-open .lista-cat__scrim { opacity: 1; }

.lista-cat {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-4) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .35);
  transform: translateY(100%);
  transition: transform 260ms var(--ease-sheet);
}
.lista-cat-capa.is-open .lista-cat { transform: none; }
/* Si la hoja de abajo se cierra con la lista abierta, bajan juntas. */
#sheet-layer:not(.is-open) .lista-cat { transform: translateY(100%); }

/* De acá se arrastra para cerrar: el dedo no scrollea la página. */
.lista-cat__asidero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  touch-action: none;
  flex: none;
}
.lista-cat__titulo { font-size: 24px; }

.lista-cat__filas {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.lista-cat__fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  height: 52px;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.lista-cat__fila:last-child { border-bottom: 0; }
.lista-cat__fila[aria-selected="true"] { font-weight: 500; }
.lista-cat__punto { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.lista-cat__nombre { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-cat__check { color: var(--accent-text); font-weight: 700; flex: none; }

/* Día del gasto: la etiqueta se ve, el input nativo va transparente encima. */
.when { display: flex; justify-content: center; margin-top: calc(var(--space-1) * -1); }

.when__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-lg);
  background: transparent;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
}
.when__pill.is-set { color: var(--text); border-color: var(--line-strong); }

.when__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .5;
}

/* El input es transparente: el foco de teclado se ve en la píldora. */
.when__pill:has(.when__input:focus-visible),
.quick__dia:has(.when__input:focus-visible) {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.when__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.swatches { display: flex; gap: var(--space-3); }

.swatch {
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.swatch.is-on {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
  transform: scale(1.05);
}

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.key {
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--bg);
  border: 0;
  font-family: var(--sans);
  font-size: var(--fs-xl);
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: background 90ms ease;
}
.key:active { background: var(--line); }

/* "Nuevo gasto" entera, con "Guardar" a la vista, en pantallas bajas: a
   812 (iPhone mini) sobraban unos 40px, y a 667 (SE) más de 120. */
@media (max-height: 820px) {
  .sheet:has(.keypad) { gap: var(--space-3); }
  .sheet:has(.keypad) .key { height: 50px; }
}
@media (max-height: 700px) {
  .sheet:has(.keypad) { gap: var(--space-2); }
  .sheet:has(.keypad) .key { height: 44px; }
  .sheet:has(.keypad) .amount__value { font-size: 48px; }
  .sheet:has(.keypad) .cta--tall { height: 50px; }
}

.picks { display: flex; gap: var(--space-3); }
.pick {
  flex: 1;
  height: 62px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pick.is-on {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}

.alert-card {
  border-radius: 0;
  padding: var(--space-4) var(--space-4);
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border-bottom: 1px solid var(--line);
}
.alert-card__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  margin-top: var(--space-1);
  flex: none;
}
.alert-card__title { font-size: var(--fs-md); font-weight: 500; }
.alert-card__body {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: var(--space-1);
  line-height: 1.45;
}

/* ------------------------------------------------------------- toast --- */

#toast-layer {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: calc(190px + var(--safe-bottom));
  pointer-events: none;
  z-index: 20;
}

.toast {
  background: var(--positive);
  color: var(--on-positive);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-md);
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(21, 18, 14, .28);
  animation: toast-in 180ms ease both;
}
.toast--error { background: var(--danger-fill); color: var(--on-danger); }
.toast.is-out { animation: toast-out 180ms ease both; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(10px); }
}

/* ------------------------------------------------------------ carga --- */

.boot {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

body.is-busy { cursor: progress; }

/* ------------------------------------------------ pantallas anchas --- */
/* Franja de tablet: demasiado ancha para pegar la app a los bordes y
   demasiado angosta para el dashboard, que entra recién a 1000px
   (ver desktop.css). En el medio, la app se centra como una columna. */

@media (min-width: 640px) and (max-width: 999px) {
  #app {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 430px;
    box-shadow: 0 0 0 1px var(--line-strong), 0 24px 60px rgba(21, 18, 14, .14);
  }
}

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

/* ------------------------------------------------------------ esqueleto --- */

/* La primera carga, si tarda: la forma del contenido en --skeleton, que
   pulsa. Nada de spinner a pantalla completa. */
.esqueleto {
  padding: calc(var(--safe-top) + var(--space-6)) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 720px;
  margin: 0 auto;
}
.esqueleto * { animation: esq-pulso 1.2s ease-in-out infinite alternate; }
.esq-metricas { display: flex; gap: var(--space-3); }
.esq-metrica {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  animation: none;
}
.esq-lista {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xl);
  background: var(--surface);
  animation: none;
}
.esq-fila { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); animation: none; }
.esq-textos { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); animation: none; }
.esq-linea { height: 12px; width: 70%; border-radius: var(--radius-sm); background: var(--skeleton); }
.esq-linea--corta { width: 40%; }
.esq-bloque { height: 28px; width: 60%; border-radius: var(--radius-sm); background: var(--skeleton); }
.esq-avatar { width: 40px; height: 40px; flex: none; border-radius: var(--radius-md); background: var(--skeleton); }
.esq-monto { width: 56px; height: 16px; flex: none; border-radius: var(--radius-sm); background: var(--skeleton); }
@keyframes esq-pulso { from { opacity: 1; } to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .esqueleto * { animation: none !important; }
}

/* Registrar el porcentaje como propiedad tipada permite animar el anillo.
   Los navegadores sin @property simplemente lo pintan sin transición. */
@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.ring { transition: --p 400ms ease-out; }

/* Nota del gasto: la misma caja de campo, más baja, porque la hoja de
   nuevo gasto ya viene llena (monto, día, categorías y teclado). */
.field__box--slim {
  height: 46px;
  border-radius: var(--radius-lg);
  padding: 0 var(--space-4);
}
.field__box--slim .field__input { font-size: var(--fs-md); }

/* --------------------------------------------------------- editores --- */

/* El valor actual a la derecha de una fila de ajuste ("Tu nombre  Matías"). */
.pref__value {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-2);
  flex: none;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* La misma fila, pero suelta dentro de una hoja: sin tarjeta debajo. */
.pref--bare { padding: 0; }

/* Un vacío que va suelto entre secciones, sin la tarjeta que lo enmarque. */

/* Borrar no es la acción principal de ninguna hoja: se ve, no se grita. */
.link-quiet--danger { color: var(--accent-text); }

/* ------------------------------------------------------- mes a mes --- */

/* La serie de meses. Las barras se miden entre ellas, no contra el
   presupuesto: la pregunta es cómo viene uno respecto de sí mismo. */
.hist {
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hist__head { display: flex; align-items: center; justify-content: space-between; }
.hist__nota { font-size: var(--fs-sm); color: var(--text-3); }

.hist__row { display: flex; align-items: center; gap: var(--space-3); }
.hist__mes {
  width: 62px;
  flex: none;
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-transform: capitalize;
}
.hist__row.is-current .hist__mes { color: var(--text); font-weight: 500; }
.hist__hoy {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-weight: 400;
  text-transform: none;
}

.hist__barra {
  flex: 1;
  min-width: 0;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
}
.hist__barra > div {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--barra-neutra);
  transition: width 400ms ease-out;
}
.hist__row.is-current .hist__barra > div { background: var(--text); }

.hist__cifras { width: 92px; flex: none; text-align: right; }
.hist__gastado { font-size: var(--fs-sm); font-weight: 700; }
.hist__ingresado { font-size: var(--fs-xs); color: var(--positive); }

/* --------------------------------------------- detalle de categoría --- */

/* El encabezado de la hoja que se abre al tocar una categoría: la cifra
   grande primero, y debajo las frases que la explican. */
.detalle { display: flex; flex-direction: column; gap: var(--space-3); }
.detalle__head { display: flex; align-items: center; gap: var(--space-3); }
.detalle__cifras { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.detalle__amt { font-family: var(--serif); font-size: var(--fs-3xl); line-height: 1; }
.detalle__de { font-size: var(--fs-sm); color: var(--text-3); }
.detalle__hint { font-size: var(--fs-sm); }
.detalle__datos { font-size: var(--fs-sm); color: var(--text-3); }

/* El día del mes en lugar de la inicial: dentro de una categoría, todas las
   iniciales serían la misma letra. */
.detalle + .list .avatar--sm { font-size: var(--fs-sm); }

/* ------------------------------------------------------------- íconos --- */

/* Los usan las categorías y las suscripciones. El avatar es el mismo de
   siempre; si hay ícono, lo ocupa entero. */
.avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.icono { display: flex; align-items: center; gap: var(--space-4); }

.icono__muestra {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: 700;
  overflow: hidden;
}
.icono__muestra img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* La suscripción no tiene color propio como la categoría: su muestra usa el
   mismo tono suave que el avatar de su fila, para que se vea igual. */
.icono__muestra--suave { background: var(--line); color: var(--text-2); }

.icono__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }

.icono__btn {
  height: 38px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--sans);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 140ms ease;
}
.icono__btn:hover { border-color: var(--line-strong); }

.icono__quitar {
  border: 0;
  background: none;
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-family: var(--sans);
  cursor: pointer;
  padding: var(--space-1) 2px;
}

.icono__nota {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--text-3);
}

/* ------------------------------------------- recibo del ingreso (PDF) --- */

.recibo { display: flex; flex-direction: column; gap: var(--space-3); }

.recibo__estado {
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.recibo__estado.is-on {
  color: var(--text);
  font-weight: 500;
  word-break: break-word;
}

.recibo__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ------------------------------------------------- moneda de la meta --- */

.monedas { display: flex; gap: var(--space-3); }

.moneda {
  flex: 1;
  height: 52px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: var(--fs-md);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.moneda b { font-size: var(--fs-md); font-weight: 700; }
.moneda.is-on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.goal__equiv {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: var(--space-1);
}

/* --------------------------------------------------------- cotización --- */

.pref__btn {
  flex: none;
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.pref__btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pref__btn:active { transform: scale(.98); }

/* Una cotización de ayer no es un error, pero conviene que se note. */
.pref__desc--warn { color: var(--accent-text); }

.sheet__nota {
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-align: center;
  margin-top: calc(var(--space-2) * -1);
}

/* Un campo que existe pero ahora lo manda otra cosa (el saldo de la cuenta
   marcada como la de la meta). Se ve, se entiende, no se toca. */
.field__box--quieto {
  background: var(--line);
  border-color: var(--line);
}
.field__box--quieto .field__input { color: var(--text-3); }

.field__nota {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: 2px;
}

.moneda:disabled {
  opacity: .45;
  cursor: default;
}

/* ------------------------------------------------- plan de la meta --- */

/* El monto que hay que poner fijo. Vivía dentro de la frase de la meta;
   acá es la cifra la que manda. */
.plan {
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plan__label {
  font-size: var(--fs-sm);
  color: var(--text-3);
  font-weight: 500;
}

.plan__row { display: flex; align-items: flex-start; gap: var(--space-4); }

.plan__monto { flex: 1; min-width: 0; }
.plan__cifra {
  font-family: var(--serif);
  font-size: var(--fs-3xl);
  line-height: 1.05;
  letter-spacing: -.5px;
}
.plan__monto--chico .plan__cifra { font-size: var(--fs-xl); color: var(--text-2); }

.plan__unidad { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
.plan__equiv { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--space-1); }

.plan__sep { width: 1px; align-self: stretch; background: var(--line); flex: none; }

.plan__hint {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

/* Cómo viene el mes en curso: lo que ya se movió a mano contra la cuota que
   le toca. El plan deja de ser una cifra fija y pasa a tener un estado. */
.plan__mes {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.plan__mes-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-2);
}
.plan__mes-name { color: var(--text-3); text-transform: capitalize; }
.plan__mes-nums { color: var(--text-2); font-weight: 500; }
.plan__mes-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.plan__mes-bar > div {
  height: 100%;
  border-radius: var(--radius-sm);
  background: var(--accent);
  transition: width 400ms ease-out;
}
.plan__mes--ok .plan__mes-bar > div { background: var(--positive); }
.plan__mes--ok .plan__mes-nums { color: var(--positive); }

/* Dos líneas seguidas con raya arriba parten la tarjeta en tres: la raya la
   lleva el mes, y el veredicto se le pega debajo. */
.plan__mes + .plan__hint { border-top: 0; padding-top: 0; }

/* La cuenta rehecha con lo que el mes vaya a dar. Se lee después del
   veredicto, sin competirle. */
.plan__ajuste {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-3);
}

.plan__meses { font-size: var(--fs-xs); color: var(--text-3); }

/* Cuota del mes ya puesta: la tarjeta se tiñe de verde suave. Sigue siendo
   el plan hacia adelante, pero el mes en curso está ganado. */
.plan--cubierto {
  background: transparent;
  border-color: var(--line-strong);
}
.plan--cubierto .plan__label {
  color: var(--positive);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.plan--cubierto .plan__label .ico { flex: none; }
.plan--cubierto .plan__sep { background: var(--line-strong); }
.plan--cubierto .plan__hint,
.plan--cubierto .plan__mes { border-top-color: var(--line-strong); }

/* Meta cumplida: la misma tarjeta, en verde y en fila, como un logro. */
.plan--logro {
  background: var(--positive);
  border: 0;
  color: var(--on-positive);
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}
.plan__logro-ico {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-round);
  background: var(--line-strong);
  color: var(--on-positive);
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan__logro-texto { min-width: 0; }
.plan__label--logro {
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--fs-xs);
}
.plan__logro-titulo {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -.5px;
  margin-top: 2px;
}
.plan__logro-sub {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--text-2);
  margin-top: var(--space-1);
}


.sheet__plan {
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}
.sheet__plan b { color: var(--text); font-weight: 700; }

/* Vaciar el mes no es una acción cualquiera: se ve distinta y se apaga
   cuando no hay nada que borrar. */
/* Vaciar el mes: una píldora con borde, que se ve distinta de los demás
   botones de ajustes sin gritar. */
.pref__btn--danger { color: var(--accent-text); border-color: var(--danger-fill); }
.pref__btn--danger:hover { border-color: var(--danger-fill); background: var(--surface); }
.pref__btn:disabled {
  opacity: .45;
  cursor: default;
  color: var(--text-3);
}
.pref__btn:disabled:hover { border-color: var(--line-strong); background: var(--surface); }

/* ------------------------------------------------------------ cuotas --- */

/* El avatar de una cuota dice en cuál va: "3/6" en vez de una inicial. */
.cuota-badge {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -.3px;
  background: var(--line);
  color: var(--text-2);
}

/* La cuenta que se arma mientras se escribe el total y las cuotas. */
.cuota-calc {
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-align: center;
  min-height: 20px;
  margin-top: calc(var(--space-1) * -1);
}
.cuota-calc b { color: var(--text); font-weight: 700; font-size: var(--fs-md); }

/* Lo ya pagado no ocupa lugar: una línea al pie y listo. */
.cuota-listas {
  font-size: var(--fs-sm);
  color: var(--text-3);
  padding: 2px var(--space-1);
}

/* En la tabla, la cuota no se borra: el botón lleva a su compra. */
.mv-borrar--cuota:hover { color: var(--text); }

/* ----------------------------------------------------- marcas de tarjeta --- */

/* Los logos son representaciones dibujadas, no los archivos de marca: lo justo
   para reconocer cuál es cuál en la tarjeta propia. */
.account__marca {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 38px;
  height: 26px;
}
.marca { display: block; }

.marca--visa {
  font-family: var(--sans);
  font-weight: 700;
  font-style: italic;
  letter-spacing: .04em;
  color: #F7F1E8;
}
.marca--amex {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .1em;
  color: #F7F1E8;
  background: #2E77BC;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}
.marca--oca {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .06em;
  color: #F7F1E8;
  border: 1.5px solid rgba(247, 241, 232, .7);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
}

/* El selector, en la hoja de cuenta. */
.marcas { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.marca-op {
  height: 46px;
  min-width: 62px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong);
  background: var(--surface-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 140ms ease, transform 120ms ease;
}
.marca-op:active { transform: scale(.97); }
.marca-op.is-on { border-color: var(--text); box-shadow: 0 0 0 2px var(--text); }

/* "Ninguna" muestra el chip liso, que es lo que va a quedar en la tarjeta. */
.marca-op__chip {
  width: 24px;
  height: 17px;
  border-radius: var(--radius-sm);
  background: rgba(247, 241, 232, .22);
}
.marca-op__txt { display: none; }

/* Con catorce colores no entran en una fila. */
.swatches { flex-wrap: wrap; }

/* La paleta de categorías y fuentes: las 18 en dos filas de 9. Las que ya
   usa otra categoría, atenuadas y sin poder elegirse. */
.swatches--paleta { display: grid; grid-template-columns: repeat(9, 32px); gap: var(--space-2); }
.swatches--paleta .swatch { width: 32px; height: 32px; }
.swatches--paleta .swatch.is-usada { opacity: .3; cursor: not-allowed; }
.swatches__aviso { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--text-3); }
.swatches__aviso[hidden] { display: none; }

/* ------------------------------------ cuentas, ingresos e inversiones --- */
/* En el celular, Cuentas abre Ingresos e Inversiones, que son las pantallas
   del escritorio en una columna. Las clases que comparten con el escritorio
   (.ing-fuente, .inv-total, .inv-menu…) llevan acá los tamaños del celular;
   desktop.css los agranda. */

/* Un ingreso suma: se escribe con más, y en verde. */
.row__amt--mas { color: var(--positive); }

/* Las dos filas grandes de arriba de Cuentas. */
.entrada {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: var(--space-4) 18px;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
}
.entrada:active { transform: scale(.98); }
.entrada__ico {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.entrada__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.entrada__titulo { font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.entrada__linea { font-size: var(--fs-sm); color: var(--text-2); }
.entrada__sub { font-size: var(--fs-xs); color: var(--text-3); }
.entrada__flecha { flex: none; font-size: 22px; color: var(--text-3); }
.cuentas__titulo { margin-top: var(--space-3); }

/* El botón secundario: con borde y sin relleno. */
.boton-sec {
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
/* "Ver PDF" y "Adjuntar PDF" en una fila; "Cambiar", al lado. */
.boton-chico {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: none;
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.link-chico {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: var(--fs-xs);
  color: var(--accent-text);
  cursor: pointer;
}

/* Ingresos. */
.view.ing-movil { gap: 20px; }
.ing-movil__entro { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--positive); }
.ing-movil__dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ing-movil__dos > div { min-width: 0; padding: 14px 14px 14px 0; }
.ing-movil__dos > div + div { padding: 14px 0 14px 14px; border-left: 1px solid var(--line); }
.ing-movil__rotulo { font-size: var(--fs-xs); color: var(--text-3); }
.ing-movil__num { font-family: var(--serif); font-size: 28px; line-height: 1.2; }
.ing-movil__num.is-over { color: var(--tone-over); }
.ing-movil__linea { margin-top: 2px; font-size: var(--fs-xs); color: var(--text-2); }
.ing-movil__invertido { color: var(--text-3); }
.ing-movil__acciones { display: flex; gap: 10px; }
.ing-movil__acciones .cta { flex: 1; width: auto; height: 48px; }
.ing-movil__acciones .boton-sec { flex: none; }
.ing-movil__titulo { margin-bottom: 10px; }

.ing-fila-movil .row__main { min-width: 0; }
.ing-fila-movil .row__amt { flex: none; align-self: flex-start; margin-top: 2px; }
.ing-fila-movil__recibo { display: flex; align-items: center; gap: var(--space-3); margin-top: 6px; }
/* A la vista: en el celular no hay mouse que la haga aparecer. */
.row__borrar {
  width: 26px;
  height: 26px;
  flex: none;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--surface);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ing-fuentes { display: flex; flex-direction: column; gap: var(--space-4); }
.ing-fuente { border-radius: var(--radius-sm); }
.ing-fuente__fila { display: flex; align-items: baseline; font-size: 14px; }
.ing-fuente__punto { width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; flex: none; }
.ing-fuente__nombre { flex: 1; min-width: 0; font-weight: 500; }
.ing-fuente__monto { font-weight: 700; }
.ing-fuente__pct { width: 44px; margin-left: 10px; text-align: right; color: var(--text-3); }
.ing-fuente__barra { height: 8px; margin-top: var(--space-2); border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.ing-fuente__barra > div { height: 100%; border-radius: 4px; }

.ing-seis { background: var(--surface); border-radius: 22px; padding: 18px; }
.ing-seis__cabeza { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.ing-seis__cabeza h2 { flex: 1; margin: 0; font-family: var(--serif); font-weight: 400; font-size: 20px; }
.ing-seis__leyenda { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.ing-seis__leyenda i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; }
.ing-seis__leyenda i:first-child { margin-left: 0; }
.ing-seis__leyenda .is-entro { background: var(--positive); }
.ing-seis__leyenda .is-gasto { background: var(--otras); }
.ing-meses__barras,
.ing-meses__ejes {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: 10px;
}
.ing-meses__barras { height: 110px; align-items: end; }
.ing-meses__par { height: 100%; display: flex; align-items: flex-end; gap: 3px; }
.ing-meses__par > div { flex: 1; border-radius: 4px 4px 0 0; }
.ing-meses__entro { background: var(--positive); }
.ing-meses__gasto { background: var(--otras); }
.ing-meses__ejes { margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--text-3); text-align: center; }
.ing-meses__ejes .is-actual { color: var(--text); font-weight: 700; }
.ing-meses__solo { margin: 0; font-size: var(--fs-sm); color: var(--text-3); }

/* Inversiones. */
.view.inv-movil { gap: var(--space-4); }
.inv-movil__acciones { display: flex; gap: 10px; }
.inv-movil__acciones > * { flex: 1; width: auto; height: 48px; }
.inv-movil__acciones .boton-sec { font-size: 15px; }

.inv-total {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border-radius: 22px;
  background: var(--surface);
}
.inv-total__cabeza { display: flex; align-items: baseline; }
.inv-total__cabeza .overline { flex: 1; font-weight: 700; }
.inv-total__fondos { font-size: var(--fs-sm); color: var(--text-3); }
.inv-total__fila { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.inv-total__valor { font-family: var(--serif); font-size: 40px; line-height: 1; white-space: nowrap; }
.inv-total__estimado { margin-top: var(--space-1); font-size: var(--fs-xs); color: var(--text-3); }
.inv-total__cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 10px;
  border-top: 1px solid var(--line-strong);
}
.inv-total__cifras > div + div { padding-left: 10px; border-left: 1px solid var(--line-strong); }
.inv-total__rotulo { font-size: var(--fs-xs); color: var(--text-3); }
.inv-total__cifra { margin-top: 2px; font-size: 15px; font-weight: 700; }
.inv-total__sin { font-size: var(--fs-sm); color: var(--text-3); }

.inv-fecha { font-size: var(--fs-xs); color: var(--text-3); }
.inv-fecha.is-vieja { color: var(--accent-text); }
.is-ganancia { color: var(--positive); }
.is-perdida { color: var(--accent-text); }
.inv-rinde { font-weight: 700; }
.inv-rinde.is-pendiente { font-size: var(--fs-xs); font-weight: 400; color: var(--text-3); }
.inv-despues { font-size: var(--fs-xs); color: var(--text-3); }
.inv-ganancia { font-weight: 700; }
.inv-fondo__nombre { font-size: 15px; font-weight: 500; }
.inv-fondo__sub { font-size: var(--fs-xs); color: var(--text-3); }
.inv-chip {
  min-width: 40px;
  height: 26px;
  padding: 0 6px;
  flex: none;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text);
}
.inv-chip.is-usd { background: var(--cat-petroleo); color: var(--cat-petroleo-on); }

/* El "⋯" de un fondo y su menú, alineado al borde derecho del botón. */
.inv-acciones__botones { position: relative; display: flex; justify-content: flex-end; gap: var(--space-2); }
.inv-mas {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 15px;
  cursor: pointer;
}
.inv-mas[aria-expanded="true"] { border-color: var(--text-4); color: var(--text); }
.inv-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  z-index: 5;
  min-width: 180px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
}
.inv-menu .is-peligro { color: var(--accent-text); }

.fondo-movil {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.fondo-movil__cabeza { display: flex; align-items: center; gap: 10px; }
.fondo-movil__nombre { flex: 1; min-width: 0; }
.fondo-movil__cifras { display: flex; align-items: flex-end; gap: 10px; }
.fondo-movil__cifras > div:first-child { flex: 1; min-width: 0; }
.fondo-movil__saldo { font-size: var(--fs-lg); font-weight: 700; }
.fondo-movil__derecha { flex: none; text-align: right; font-size: var(--fs-sm); }
.fondo-movil__anio { color: var(--text-3); }
.fondo-movil__cargar { width: 100%; height: 40px; color: var(--text); }

.inv-mes { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inv-mes h2 { margin: 0 0 6px; font-family: var(--serif); font-weight: 400; font-size: 24px; }
.inv-mes__moneda { margin-top: var(--space-2); }
.inv-mes__fila { display: flex; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.inv-mes__fila > span:first-child { flex: 1; color: var(--text-2); }
.inv-mes__monto { font-weight: 700; }
.inv-mes__nota { margin: var(--space-2) 0 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-3); }

/* Las opciones del menú "⋯", en el celular (en el escritorio son las del
   registro rápido, en desktop.css). */
@media (max-width: 999px) {
  .inv-menu .quick__opcion {
    padding: 10px 12px;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text);
    font-family: var(--sans);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
  }
  .inv-menu .quick__opcion:active { background: var(--line-strong); }
}

/* Las hojas de inversiones, iguales en las dos superficies: el fondo arriba,
   el monto grande de "Cargar saldo", el recuadro en vivo y la confirmación
   de un saldo raro. */
.inv-hoja__fondo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
}
.field__box--grande { height: 58px; }
.field__box--grande .field__input,
.field__box--grande .field__sign { font-size: 22px; font-weight: 500; }
.inv-vivo {
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.inv-vivo strong { color: var(--text); }
.inv-vivo strong.is-ganancia { color: var(--positive); }
.inv-vivo strong.is-perdida { color: var(--accent-text); }
/* .cta y los recuadros tienen su display: [hidden] tiene que ganarles. */
.field__hint.is-error { color: var(--accent-text); }
.inv-vivo[hidden], .inv-raro[hidden], #inv-saldo-form .cta[hidden] { display: none; }
/* La ayuda debajo de un campo, chica: dentro del rótulo hereda su tamaño. */
.inv-hoja .field > .field__hint, #inv-saldo-form .field > .field__hint, #inv-flujo-form .field > .field__hint { font-size: var(--fs-xs); }
.inv-raro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 14px 16px;
  border: 1px solid var(--accent-text);
  border-radius: var(--radius-lg);
}
.inv-raro__texto { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text); }
.inv-raro__botones { display: flex; justify-content: flex-end; gap: var(--space-2); }
.inv-raro__botones .cta { width: auto; height: 44px; padding: 0 var(--space-6); }

.inv-historial { display: flex; flex-direction: column; }
.inv-historial__fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.inv-historial__fecha { width: 96px; flex: none; color: var(--text-3); }
.inv-historial__tipo { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-historial__monto { font-weight: 700; }
.inv-historial__monto.is-saldo { font-weight: 500; color: var(--text); }
.inv-historial__x {
  width: 28px;
  height: 28px;
  flex: none;
  border: 0;
  border-radius: var(--radius-round);
  background: none;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.inv-historial__x:hover { background: var(--surface-2); color: var(--accent-text); }


/* --------------------------------------------------- medio de pago --- */

/* No `.pagos`: ése es el bloque "Con qué pagaste" de Análisis, y sus
   estilos de columna aplastaban estos botones. */
.pago-chips { display: flex; gap: var(--space-2); }

.pago {
  flex: 1;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-2);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.pago.is-on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* En la tabla, una etiqueta discreta al lado de la nota. */
.pago-tag {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-md);
  margin-left: var(--space-2);
  background: var(--line);
  color: var(--text-2);
  white-space: nowrap;
}
/* El crédito se marca distinto: es plata que todavía no salió. */
.pago-tag--credito { background: var(--surface-2); color: var(--accent-text); }

/* En la lista del móvil, junto a la categoría y la hora. */
.row__sub .pago-tag { margin-left: var(--space-2); }

/* ------------------------------------------------------ movimientos --- */

/* El buscador y los chips de categoría los comparten las dos superficies;
   desktop.css sólo les cambia la forma. Lo demás es del móvil: la pantalla
   de escritorio ordena tocando el encabezado de la tabla, y acá no hay
   encabezado que tocar. */

.mv-cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Movimientos es la única pantalla del móvil que está dentro de otra: se
   entra desde Inicio y no tiene pestaña propia, así que la salida tiene que
   estar a la vista. */
.volver {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-round);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease;
}
.volver:active { background: var(--surface-2); }

.mv-buscar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 46px;
  padding: 0 var(--space-4);
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: border-color 160ms ease;
}
.mv-buscar:focus-within { border-color: var(--accent-text); }

.mv-buscar__lupa {
  display: flex;
  flex: none;
  /* Un escalón más oscura que el gris de íconos apagados: es chica y va
     sobre crema, no sobre blanco. */
  color: var(--text-3);
  transition: color 160ms ease;
}
.mv-buscar:focus-within .mv-buscar__lupa { color: var(--text-2); }

.mv-buscar__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-family: var(--sans);
  font-size: var(--fs-md);
  color: var(--text);
  user-select: text;
  -webkit-user-select: text;
}
.mv-buscar__input::placeholder { color: var(--text-3); }
.mv-buscar__input::-webkit-search-cancel-button { display: none; }

.mv-buscar__x {
  flex: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--line);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
.mv-buscar__x:hover { background: var(--line-strong); color: var(--text); }

/* Como los chips de la hoja de gasto: se desbordan a lo ancho y llegan hasta
   el borde de la pantalla, para que se vea que hay más. */
.mv-chips {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--space-5) * -1);
  padding: 2px var(--space-8) 2px var(--space-5);
}
.mv-chips::-webkit-scrollbar { display: none; }
.mv-chips .chip { flex: none; }

/* Toda franja de chips que se desplaza se desvanece a la derecha mientras
   queda algo por ver; app.js le pone `is-end` al llegar al final (o si entra
   entera), y ahí el desvanecido se va. */
.chips,
.mv-chips,
.quick__chips {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
.chips.is-end,
.mv-chips.is-end,
.quick__chips.is-end { -webkit-mask-image: none; mask-image: none; }

.mv-orden {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: -2px;
}
.mv-orden__label {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-right: 2px;
}

.mv-sort {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.mv-sort.is-on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.mv-sort__flecha { font-size: var(--fs-xs); }

/* Cuántos se están viendo y cuánto suman. Va antes de la lista: al final
   quedaría debajo del FAB, y es lo primero que uno quiere saber al filtrar. */
.mv-resumen {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--text-2);
  padding: 0 var(--space-1);
}
.mv-resumen b { color: var(--text); font-weight: 700; }

/* ------------------------------------------- con qué se pagó (Análisis) --- */

/* La otra forma de partir el mismo total: la dona dice en qué se fue, esto
   de dónde salió. Una sola barra, porque son tres o cuatro tramos y una
   segunda dona al lado se leería como otra cosa distinta. */

.pagos {
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pagos__nota { font-size: var(--fs-sm); color: var(--text-2); }

.pagos__barra {
  display: flex;
  gap: var(--space-1);
  height: 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--surface-2);
}
.pagos__tramo {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 400ms ease-out;
}

.pagos__lista { display: flex; flex-direction: column; }

.pagos__fila {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 2px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.pagos__fila:last-child { border-bottom: 0; }
.pagos__nombre { flex: 1; min-width: 0; }
.pagos__pct {
  font-size: var(--fs-sm);
  color: var(--text-3);
  min-width: 34px;
  text-align: right;
}
.pagos__monto { font-weight: 700; min-width: 74px; text-align: right; }

.pagos__pendiente {
  font-size: var(--fs-sm);
  color: var(--text-3);
  text-wrap: pretty;
}


/* -------------------------------------------- ícono sin fondo (categoría) --- */

/* Un logo con su propia forma no queda bien encerrado en un cuadrado de un
   color que no es suyo: el ícono va solo, sobre la superficie de la lista.
   Sin recorte redondeado y entero —`contain`—, porque acá la silueta es el
   ícono y no una foto de la que sobra el borde. */
.avatar--bare {
  background: transparent;
  border-radius: 0;
}
.avatar--bare .avatar__img { object-fit: contain; border-radius: 0; }

/* La muestra de la hoja hace lo mismo, para que se vea antes de guardar. */
.icono__muestra--bare { background: transparent; border-radius: 0; }
.icono__muestra--bare img { object-fit: contain; }

/* La fila del interruptor, dentro del campo de ícono. Sin ícono no tiene
   nada que decir y se esconde; el `display: flex` de `.pref` le gana al
   `[hidden]` del navegador, así que hay que decirlo acá. */
.icono__fondo { margin-top: var(--space-4); }
.icono__fondo[hidden] { display: none; }

/* ------------------------------------------------ números en columna --- */

/* Las cifras en DM Sans con dígitos de ancho fijo, para que los montos de
   una lista queden alineados dígito con dígito. Las de Instrument Serif no:
   son sueltas y grandes, y ahí el ancho proporcional se ve mejor. */
.row__amt,
.desk-row__amt,
.mv-td--monto,
.cat-card__spent,
.cat-card__limit,
.desk-cat__spent,
.desk-cat__limit,
.desk-catcard__spent,
.desk-catcard__limit,
.legend__pct,
.insight-cats__pct,
.insight-cats__amt,
.bars__amt,
.hist__cifras,
.pagos__pct,
.pagos__monto,
.ingresos__monto,
.plan__mes-nums,
.pref__value,
.side__goal-nums,
.account__last4,
.key,
.quick__amt { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tonos --- */

/* Van al final para ganarle al color propio del elemento (el del plan). El
   "pasado" no se distingue sólo por color: va en negrita y con una flecha. */
.tone-ok { color: var(--tone-ok); }
.tone-warn { color: var(--tone-warn); }
.tone-over { color: var(--tone-over); font-weight: 700; }
.tone-over::before { content: '↑ '; }
.tone-neutral { color: var(--tone-neutral); }

/* ------------------------------------------------------------- ajustes --- */

.ajustes__titulo {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  font-weight: 400;
  margin: var(--space-8) 0 0;
}

/* ------------------------------------------------------ tinta: menos cajas --- */

/* En Tinta casi nada es tarjeta: la meta, el insight, la barra de registro,
   las hojas y las cuentas. El resto va directo sobre el fondo, separado con
   --line, así que pierde también el relleno de los costados. */
.card:not(.card--destacada),
.list .row { padding-left: 0; padding-right: 0; }

/* Dentro de una hoja o un modal (--surface), un campo en --surface-2 no se
   ve: ahí va sobre el fondo. */
.sheet .field__box { background: var(--bg); }

/* Las cuentas Tinta y Pizarra casi no se distinguen del fondo: su borde es
   más claro (3,3:1). */
.account--oscura { border-color: var(--text-4); }

/* Foco visible en todo control. Los campos lo marcan con el borde de su caja. */
button:focus-visible,
a:focus-visible,
[role="switch"]:focus-visible,
input:focus-visible:not(.field__input):not(.mv-buscar__input) {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}
.field__box:focus-within,
.mv-buscar:focus-within { border-color: var(--accent-text); }

/* ------------------------------------------------------------ tooltip --- */

/* El de los tramos del anillo y de las donas: nombre, monto con su parte
   del total, y cómo viene contra el límite (el mismo texto que la tabla).
   No atrapa el mouse: sigue al cursor sin taparlo. */
.tooltip {
  position: fixed;
  z-index: 50;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  pointer-events: none;
  font-size: 14px;
  line-height: 1.45;
  white-space: nowrap;
}
.tooltip[hidden] { display: none; }
.tooltip__nombre { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; color: var(--text); }
.tooltip__punto { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tooltip__monto b { font-weight: 700; color: var(--text); }
.tooltip__monto span { color: var(--text-3); }
.tooltip__nota { font-size: var(--fs-sm); }

/* Los tramos se enfocan con Tab: el resaltado (los demás al 35%) y el
   tooltip muestran cuál; el contorno de un círculo entero no diría nada. */
.anillo__seg:focus, .dona__seg:focus { outline: none; }
.anillo__seg, .dona__seg { cursor: default; }

/* ------------------------------------------------------------- entrar --- */

/* La pantalla de entrar: la misma forma que el alta, con el logo arriba. */
.login__logo {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-round);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--serif);
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login__recordar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-2);
  cursor: pointer;
}
.login__recordar input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

/* ------------------------------------------------------------ logros --- */

/* La insignia (public/insignias.js): hexágono, glifo centrado y, si está
   bloqueada, el candado abajo a la derecha. */
.insignia { position: relative; display: inline-block; flex: none; }
.insignia__hex { position: absolute; inset: 0; }
.insignia__glifo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.insignia__candado {
  position: absolute;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Las insignias y las filas son botones: sin el aspecto de botón. */
.logro, .logro-cerca, .logro-ultimo {
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sans);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.logro-barra {
  display: block;
  height: 6px;
  border-radius: 6px;
  background: var(--line-strong);
  overflow: hidden;
}
.logro-barra > * { display: block; height: 100%; border-radius: 6px; }

.logros-titulo {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1;
  margin: 0;
}
.logros-resumen { display: flex; flex-direction: column; gap: 10px; }
.logros-resumen__linea { display: flex; align-items: baseline; gap: var(--space-2); }
.logros-resumen__texto { font-weight: 500; flex: 1; }
.logros-resumen__pct { font-size: var(--fs-sm); color: var(--text-3); }

.logro-ultimo {
  display: flex;
  align-items: center;
  background: var(--surface);
  width: 100%;
}
.logro-ultimo__texto { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.logro-ultimo__texto .overline { font-size: 11px; font-weight: 700; }
.logro-ultimo__nombre { font-family: var(--serif); line-height: 1.1; }
.logro-ultimo__desc { font-size: var(--fs-md); color: var(--text-2); }
.logro-ultimo__vacio { margin: 0; font-size: var(--fs-md); color: var(--text-2); }

.logros-seccion { display: flex; flex-direction: column; gap: 14px; }
.logros-seccion__titulo { font-family: var(--serif); font-weight: 400; margin: 0; }

.logros-cerca { background: var(--surface); display: flex; flex-direction: column; gap: var(--space-4); }
.logro-cerca { display: flex; align-items: center; gap: 14px; width: 100%; }
.logro-cerca__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.logro-cerca__linea { display: flex; align-items: baseline; gap: var(--space-2); }
.logro-cerca__nombre { font-weight: 500; flex: 1; min-width: 0; }
.logro-cerca__avance { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; }

.logros-familia { display: flex; flex-direction: column; gap: 14px; }
.logros-familia__cabeza { display: flex; align-items: baseline; gap: 10px; }
.logros-familia__punto { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.logros-familia__titulo { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0; flex: 1; }
.logros-familia__cuenta { font-size: var(--fs-sm); color: var(--text-3); }

.logros-grilla { display: grid; gap: 18px var(--space-2); }
.logro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}
.logro__nombre { font-size: var(--fs-sm); line-height: 1.25; color: var(--text-3); }
.logro.is-hecho .logro__nombre { color: var(--text); font-weight: 500; }
/* En --text-3 y no en --text-4 como la referencia: --text-4 no es para texto. */
.logro__fecha { font-size: 11px; color: var(--text-3); }

.logros-records { background: var(--surface); }
.logros-records .logros-seccion__titulo { margin-bottom: var(--space-1); }
.logros-records__nota { margin: 0 0 6px; font-size: var(--fs-sm); color: var(--text-3); }
.logros-records__vacio { margin: var(--space-3) 0 var(--space-3); font-size: var(--fs-sm); color: var(--text-2); }
.logro-record {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.logro-record:last-child { border-bottom: 0; }
.logro-record__texto { flex: 1; min-width: 0; }
.logro-record__nombre { font-size: 14px; color: var(--text-2); }
.logro-record__periodo { font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; }
.logro-record__valor { font-weight: 700; white-space: nowrap; }

/* La hoja de detalle. */
.logro-detalle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding-bottom: var(--space-2);
}
.logro-detalle .insignia { margin-bottom: var(--space-2); }
.logro-detalle__nombre { font-family: var(--serif); font-weight: 400; font-size: var(--fs-2xl); margin: 0; }
.logro-detalle__desc { margin: 0; color: var(--text-2); font-size: var(--fs-md); line-height: 1.45; }
.logro-detalle__estado { margin: var(--space-2) 0 0; font-size: var(--fs-sm); color: var(--text-3); }
.logro-detalle__avance { width: 100%; display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-2); text-align: left; }

.logros-cargando { min-height: 240px; }

/* En el celular: una columna, sin tarjeta en "Cerca" ni en los récords. */
.logros-movil { display: flex; flex-direction: column; gap: 26px; }
.logros-movil .logros-titulo { font-size: 34px; }
.logros-movil .logro-ultimo { border-radius: var(--radius-xl); padding: 18px; gap: var(--space-4); }
.logros-movil .logro-ultimo__texto { gap: 2px; }
.logros-movil .logro-ultimo__nombre { font-size: 24px; line-height: 1.15; }
.logros-movil .logro-ultimo__desc { font-size: var(--fs-sm); }
.logros-movil .logros-seccion { gap: var(--space-4); }
.logros-movil .logros-seccion__titulo { font-size: 24px; }
.logros-movil .logros-cerca { background: none; gap: var(--space-4); }
.logros-movil .logros-records { background: none; }
.logros-movil .logros-grilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.logros-movil .logro__nombre { font-size: var(--fs-xs); }

/* La fila de Cuentas. */
.entrada--logros .entrada__titulo { font-size: 24px; }
.entrada--logros .entrada__linea { margin: 2px 0 10px; }
.entrada--logros .entrada__linea:last-child { margin-bottom: 0; }
.logros-tira { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.logros-tira__mas { font-size: var(--fs-sm); color: var(--text-3); margin-left: var(--space-1); }

/* El aviso de logro desbloqueado. En el celular, arriba, debajo del área
   segura; en el escritorio, abajo a la derecha (desktop.css). Entra con un
   deslizamiento corto; con prefers-reduced-motion, la regla general de
   arriba lo deja sin animación. */
#aviso-logro {
  position: absolute;
  top: calc(var(--safe-top) + 12px);
  left: var(--space-4);
  right: var(--space-4);
  z-index: 30;
}
.aviso-logro {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px var(--space-4);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  color: var(--text);
  font-family: var(--sans);
  text-align: left;
  cursor: pointer;
  animation: aviso-entra 200ms var(--ease-sheet);
  transition: opacity 180ms ease, transform 180ms ease;
}
.aviso-logro.is-out { opacity: 0; transform: translateY(-8px); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-8px); } }
.aviso-logro__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.aviso-logro__rotulo {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.aviso-logro__nombre { font-weight: 700; font-size: 16px; margin-top: 2px; }
.aviso-logro--varios .aviso-logro__nombre { font-size: var(--fs-md); }
.aviso-logro__desc { font-size: var(--fs-sm); color: var(--text-2); }
.aviso-logro__ver { font-size: var(--fs-sm); font-weight: 700; color: var(--accent-text); }
.aviso-logro__pila { display: flex; flex: none; }
.aviso-logro__pila .insignia + .insignia { margin-left: -12px; }

/* "Nuevo récord: …" en Inicio, debajo del bloque "hoy". */
.record-hoy {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.record-hoy__ico {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.record-hoy__texto { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.35; }
.record-hoy__texto strong { color: var(--text); font-weight: 700; }