/* ============================================================================
   Gastos — rediseño "Suave" (refinamiento del sistema "Tablero").
   Una sola familia (Figtree, números con tabular-nums; IBM Plex Mono queda
   SOLO para strings técnicos), coral desaturado para egresos, tarjetas SIN
   borde (el contraste tarjeta/fondo hace el trabajo), labels sentence case,
   radios grandes. Rail lateral en desktop y barra inferior en mobile.
   Tema oscuro (el de diseño) + variante clara; se sigue el sistema salvo
   elección manual (html[data-theme]). Spec: design_handoff_suave/README.md.
   ========================================================================== */

/* ---------------- Tokens ---------------- */
/* Roles al estilo Material 3: superficies por nivel (bg · card · card-deep ·
   surface-high), tinta en tres niveles — text / muted / faint; faint es
   DECORATIVO (placeholders, rayitas, ejes): lo que informa va en muted o text —,
   acento con su "on", coral de egreso/destructivo con su "on", y TONO derivado
   para los colores que elige el usuario (categorías, tarjetas, marcas:
   --tone-ink / --tone-fill, ver inkOf()/fillOf() en app.js). Todos los pares
   texto/superficie dan ≥ 4,5:1 en los dos temas (docs/ux-analisis-diseno.md;
   la red es test/design-tokens.test.mjs). */
:root {
  color-scheme: light dark;
  /* claro */
  --bg: #F2F0EB;
  --card: #FFFFFF;
  --card-deep: #EEEBE5;       /* card2: icon-squares, inputs, tracks, pills neutras */
  --optrail-track: #EEEBE5;      /* riel de opciones (F2) y la elegida, que flota encima */
  --optrail-on: #FFFFFF;
  --surface-high: #FFFFFF;    /* sheets, menús, diálogos (en oscuro, un paso más claro que la tarjeta) */
  --outline: #DDD8D0;         /* divisores (~1,4:1 contra la tarjeta: el outline-variant de M3) */
  --text: #1C1915;
  --muted: #635E56;
  --faint: #6F675E;           /* 4,7–5,6:1; antes #877F76 (3,3–3,9) */
  --accent: #C6F24E;          /* lima de relleno (CTA, heat, barras) */
  --accent-ink: #4E6B04;      /* lima "para texto": ≥ 4,5:1 sobre todas las superficies claras (antes #587605, 4,4 sobre card-deep) */
  --on-accent: #10151A;       /* texto sobre lima: nunca blanco */
  --neg: #9C554B;             /* coral desaturado — egresos y destructivo (5,5:1 sobre tarjeta) */
  --neg-ink: #9C554B;
  --on-neg: #FFFFFF;          /* texto sobre coral pleno (en oscuro, tinta) */
  --purple: #6A5AE0;
  --blue: #2E86C8;
  --yellow: #A9570F;          /* el 4º color de cuentas: naranja (el amarillo se confundía con el lima) */
  --navy: #2546B8;            /* colores extra de cuentas/cajitas */
  --teal: #0F7D6D;
  --pink: #B5377B;
  --slate: #5A6676;
  --gray-seg: #C4BBB0;
  --brand-meli: #2D3277;      /* logo Mercado Libre: el amarillo no se lee sobre claro */
  --accent-soft: rgba(140, 190, 20, .12);
  --neg-soft: rgba(156, 85, 75, .1);
  --purple-soft: rgba(106, 90, 224, .12);
  --blue-soft: rgba(46, 134, 200, .12);
  --chip-bg: #EEEBE5;
  --hole: var(--card);        /* agujero del donut / fondo de celdas */
  --logo-bg: #FFFFFF;         /* placa del logo: blanca en claro, card-deep en oscuro */
  --logo-url: url('/icons/logo-light.svg'); /* variante con limas oscurecidos */
  --focus: var(--accent-ink); /* anillo de foco: ≥ 3:1 sobre cualquier superficie */
  /* Colores del usuario: el matiz es suyo, el tono lo pone el tema (relative
     color syntax: oklch(from <color> var(--tone-ink) c h)). */
  --tone-ink: min(l, .52);    /* ícono/texto teñido sobre superficie */
  --tone-fill: min(l, .5);    /* relleno pleno con --on-tone encima */
  --on-tone: #FFFFFF;
  --scrim: rgba(23, 29, 22, .4);
  /* Toast (snackbar): superficie oscura en los dos temas, ancho de la pantalla menos
     el margen, con ícono/acción/✕ opcionales (toast() en app.js). */
  --toast-bg: #2C2926; --toast-text: #F2F0EB; --toast-muted: #BDB8B0; --toast-act: #C6F24E; --toast-err: #E3A89F;
  --chev-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23635E56' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");

  /* paleta de categorías (donut + leyenda + píldoras), índice compartido */
  --c1: #6F9606; --c2: #D0776A; --c3: #7B6EF6; --c4: #3690D4; --c5: #C9721E; --c6: #8E968C; /* c1: lima oscurecido (3,5:1 sobre blanco; el #9CCB1B daba 1,9) */

  --font: "Figtree", system-ui, sans-serif;
  /* --mono ES Figtree (los montos ya no van en monoespaciada); --code queda
     para strings técnicos: API keys, links de invitación, serie. */
  --mono: "Figtree", system-ui, sans-serif;
  --code: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala tipográfica (M3: label · body · title · headline · display) en rem,
     así sigue el tamaño de letra del sistema. Piso 11px; nada de medios px. */
  --t-label-s: .6875rem;    /* 11 */
  --t-label: .75rem;        /* 12 */
  --t-body-s: .8125rem;     /* 13 */
  --t-body-m: .875rem;      /* 14 */
  --t-body: .9375rem;       /* 15 */
  --t-body-l: 1rem;         /* 16 */
  --t-title-s: 1.0625rem;   /* 17 */
  --t-title: 1.125rem;      /* 18 */
  --t-title-l: 1.25rem;     /* 20 */
  --t-headline-s: 1.375rem; /* 22 */
  --t-headline: 1.5rem;     /* 24 */
  --t-headline-l: 1.625rem; /* 26 */
  --t-display-s: 1.75rem;   /* 28 */
  --t-display: 2.125rem;    /* 34 */
  --t-display-m: 2.25rem;   /* 36 */
  --t-display-l: 2.75rem;   /* 44 */
  --tracking-tight: -.03em; /* heroes "emphasized" */

  /* Forma (escala M3): xs 8 · s 12 · m 16 · l 28 · full. */
  --r-xs: 8px; --r-s: 12px; --r-m: 16px; --r-l: 28px;
  --r-group: 20px; --r-group-in: 6px; /* lista agrupada (alta mobile): afuera / entre filas */
  --r-card: var(--r-l); --r-sm: var(--r-l); --r-chip: var(--r-xs); --r-full: 999px;
  /* Espaciado en grilla de 4. */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --pad-card: var(--sp-5);
  /* Elevación por tema: claro, sombras suaves dobles; oscuro, cortas y densas. */
  --e1: 0 1px 2px rgba(0, 0, 0, .08), 0 2px 6px rgba(0, 0, 0, .06);
  --e2: 0 1px 3px rgba(0, 0, 0, .12), 0 6px 16px rgba(0, 0, 0, .10);
  --e3: 0 4px 10px rgba(0, 0, 0, .14), 0 16px 40px -8px rgba(0, 0, 0, .18);
  /* Motion (M3 Expressive): resorte ESPACIAL con rebote para lo que se mueve o
     cambia de forma, curva de EFECTO sin rebote para color y opacidad. */
  --ease-effect: cubic-bezier(.2, 0, 0, 1);
  --ease: var(--ease-effect);
  --spring: linear(0 0.0%, 0.0516 2.5%, 0.1731 5.0%, 0.3253 7.5%, 0.4815 10.0%, 0.6252 12.5%, 0.7478 15.0%, 0.8458 17.5%, 0.9197 20.0%, 0.972 22.5%, 1.0063 25.0%, 1.0264 27.5%, 1.036 30.0%, 1.0384 32.5%, 1.0362 35.0%, 1.0314 37.5%, 1.0255 40.0%, 1.0195 42.5%, 1.0141 45.0%, 1.0094 47.5%, 1.0057 50.0%, 1.0029 52.5%, 1.001 55.0%, 0.9997 57.5%, 0.999 60.0%, 0.9986 62.5%, 0.9985 65.0%, 0.9986 67.5%, 0.9988 70.0%, 0.999 72.5%, 0.9993 75.0%, 0.9995 77.5%, 0.9996 80.0%, 0.9998 82.5%, 0.9999 85.0%, 1 87.5%, 1 90.0%, 1 92.5%, 1.0001 95.0%, 1.0001 97.5%, 1);
  --spring-soft: linear(0 0.0%, 0.0376 2.5%, 0.126 5.0%, 0.2378 7.5%, 0.3555 10.0%, 0.4687 12.5%, 0.5713 15.0%, 0.6606 17.5%, 0.7361 20.0%, 0.7984 22.5%, 0.8485 25.0%, 0.8882 27.5%, 0.9191 30.0%, 0.9426 32.5%, 0.9603 35.0%, 0.9734 37.5%, 0.9828 40.0%, 0.9895 42.5%, 0.9941 45.0%, 0.9972 47.5%, 0.9992 50.0%, 1.0004 52.5%, 1.0011 55.0%, 1.0014 57.5%, 1.0015 60.0%, 1.0015 62.5%, 1.0013 65.0%, 1.0012 67.5%, 1.001 70.0%, 1.0008 72.5%, 1.0007 75.0%, 1.0005 77.5%, 1.0004 80.0%, 1.0003 82.5%, 1.0002 85.0%, 1.0002 87.5%, 1.0001 90.0%, 1.0001 92.5%, 1.0001 95.0%, 1 97.5%, 1);
  --dur-s: 150ms; --dur-m: 250ms; --dur-l: 400ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-meli: #FFE600;
  --bg: #100F0E;
  --card: #242220;
  --card-deep: #302D2A;
  --optrail-track: #161514;  /* en oscuro el riel va más oscuro y la elegida bien más clara */
  --optrail-on: #46413C;
  --surface-high: #2C2926;
  --outline: #443F3B;
  --text: #EAE8E6;
  --muted: #A4A09B;
  --faint: #9A958F;
  --accent: #B7D45E;      /* lima ablandado para oscuro (el claro mantiene #C6F24E) */
  --accent-ink: #B7D45E;
  --on-accent: #10151A;
  --neg: #D49A91;
  --neg-ink: #D49A91;
  --on-neg: #1C1915;
  --purple: #9C90EE;
  --blue: #6FB4E4;
  --yellow: #F0A868;
  --navy: #7B97F7;
  --teal: #5CC8B6;
  --pink: #EE8FC2;
  --slate: #A8B4C2;
  --gray-seg: #45403C;
  --accent-soft: rgba(183, 212, 94, .12);
  --neg-soft: rgba(212, 154, 145, .1);
  --purple-soft: rgba(156, 144, 238, .14);
  --blue-soft: rgba(111, 180, 228, .14);
  --chip-bg: #302D2A;
  --hole: var(--card);
  --logo-bg: #302D2A;
  --logo-url: url('/icons/logo.svg');
  --focus: var(--accent);
  --tone-ink: max(l, .74);
  --tone-fill: max(l, .72);
  --on-tone: #1C1915;
  --scrim: rgba(6, 9, 12, .6);
  --toast-bg: #3A3633; --toast-text: #EAE8E6; --toast-muted: #A4A09B; --toast-act: #B7D45E; --toast-err: #D49A91;
  --chev-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4A09B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --c1: #B7D45E; --c2: #E39086; --c3: #9C90EE; --c4: #6FB4E4; --c5: #F0A868; --c6: #6A7682;
  --e1: 0 1px 2px rgba(0, 0, 0, .35);
  --e2: 0 2px 6px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
  --e3: 0 6px 16px rgba(0, 0, 0, .45), 0 20px 48px -8px rgba(0, 0, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-meli: #FFE600;
    --bg: #100F0E;
    --card: #242220;
    --card-deep: #302D2A;
    --optrail-track: #161514;
    --optrail-on: #46413C;
    --surface-high: #2C2926;
    --outline: #443F3B;
    --text: #EAE8E6;
    --muted: #A4A09B;
    --faint: #9A958F;
    --accent: #B7D45E;      /* lima ablandado para oscuro (el claro mantiene #C6F24E) */
    --accent-ink: #B7D45E;
    --on-accent: #10151A;
    --neg: #D49A91;
    --neg-ink: #D49A91;
    --on-neg: #1C1915;
    --purple: #9C90EE;
    --blue: #6FB4E4;
    --yellow: #F0A868;
    --navy: #7B97F7;
    --teal: #5CC8B6;
    --pink: #EE8FC2;
    --slate: #A8B4C2;
    --gray-seg: #45403C;
    --accent-soft: rgba(183, 212, 94, .12);
    --neg-soft: rgba(212, 154, 145, .1);
    --purple-soft: rgba(156, 144, 238, .14);
    --blue-soft: rgba(111, 180, 228, .14);
    --chip-bg: #302D2A;
    --hole: var(--card);
    --logo-bg: #302D2A;
    --logo-url: url('/icons/logo.svg');
    --focus: var(--accent);
    --tone-ink: max(l, .74);
    --tone-fill: max(l, .72);
    --on-tone: #1C1915;
    --scrim: rgba(6, 9, 12, .6);
    --toast-bg: #3A3633; --toast-text: #EAE8E6; --toast-muted: #A4A09B; --toast-act: #B7D45E; --toast-err: #D49A91;
  --chev-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4A09B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    --c1: #B7D45E; --c2: #E39086; --c3: #9C90EE; --c4: #6FB4E4; --c5: #F0A868; --c6: #6A7682;
    --e1: 0 1px 2px rgba(0, 0, 0, .35);
    --e2: 0 2px 6px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
    --e3: 0 6px 16px rgba(0, 0, 0, .45), 0 20px 48px -8px rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { font-size: 100%; } /* la escala en rem sigue el tamaño de letra del sistema */
body {
  margin: 0; font-family: var(--font); font-size: var(--t-body-l); line-height: 1.45;
  font-variant-numeric: tabular-nums; /* todos los números alineados */
  background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* nada debe generar scroll horizontal (correría la barra inferior) */
}
button, select, input { font: inherit; color: inherit; }
button, summary { -webkit-user-select: none; user-select: none; }
select:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Foco devuelto al cerrar una capa abierta con el dedo/mouse: sin anillo (focusQuiet). */
[data-pfocus]:focus-visible { outline: none; }
a { color: var(--accent-ink); }
::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Íconos de línea: stroke 1.8 en toda la app (pisa los width de los SVG inline;
   los que necesitan otro valor lo fijan con style="", ej. el sparkline). */
svg[stroke] { stroke-width: 1.8; }

/* montos/fechas: misma Figtree del resto (tabular-nums ya viene del body).
   La clase queda por compatibilidad con el markup existente. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* strings técnicos (API keys, links, serie): la única monoespaciada que queda */
.code { font-family: var(--code); }

/* label de sección: sentence case, sin uppercase ni tracking */
.lbl { font-size: var(--t-body-m); font-weight: 500; color: var(--muted); }

/* tarjeta base del sistema: sin borde (el contraste tarjeta/fondo separa) */
.tcard { background: var(--card); border: none; border-radius: var(--r-card); padding: var(--pad-card); min-width: 0; }

/* ---------------- Shell: rail + stage ---------------- */
.shell { display: flex; min-height: 100vh; }
.shell[hidden] { display: none; }
/* Sidebar completa en desktop: ícono + nombre de cada vista. */
/* Layout tipo Gmail (desktop): el shell entero es la superficie del marco
   (sidebar incluida) y el contenido central es un contenedor redondeado que
   flota con márgenes arriba/abajo/derecha (ver @media min-960 abajo). */
.rail { width: 220px; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 18px 14px;
  position: sticky; top: 0; height: 100vh; transition: width var(--dur-m) var(--spring-soft); }
.rail__top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.rail__toggle { width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; padding: 0; margin-left: auto;
  display: grid; place-items: center; background: transparent; color: var(--muted); }
.rail__toggle:hover { background: var(--card-deep); color: var(--text); }
.rail__toggle svg { width: 20px; height: 20px; }
/* FAB del rail (M3: el "+" vive en el rail, no en la topbar). Extendido con
   etiqueta en el rail abierto; cuadrado de 56 con radio 16 en el colapsado. */
.rail__fab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; align-self: flex-start;
  min-width: 56px; height: 56px; padding: 0 20px 0 16px; margin: 0 0 12px 4px; border: none; cursor: pointer;
  border-radius: var(--r-m); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; font-size: var(--t-body);
  box-shadow: var(--e2); transition: border-radius var(--dur-m) var(--spring), transform var(--dur-m) var(--spring); }
.rail__fab svg { width: 24px; height: 24px; }
.rail__fab:active { border-radius: var(--r-xs); transform: scale(.97); }
.rail--collapsed { width: 96px; }
.rail--collapsed .rail__lbl { font-size: var(--t-label-s); }
.rail--collapsed .rail__fab { padding: 0; width: 56px; }
.rail--collapsed .rail__fablbl { display: none; }
.rail--collapsed .rail__toggle { margin-left: 0; }
.rail--collapsed .rail__top { flex-direction: column; align-items: flex-start; }
.rail--collapsed .rail__btn { flex-direction: column; gap: 4px; height: 56px; padding: 0; justify-content: center; }
/* Rail colapsado: indicador activo como píldora detrás del ícono (56×32). */
.rail--collapsed .rail__btn { position: relative; background: transparent; }
.rail--collapsed .rail__btn::before { content: ''; position: absolute; top: 4px; left: 50%; width: 56px; height: 32px; border-radius: var(--r-full);
  background: var(--accent-soft); transform: translateX(-50%) scaleX(.35); opacity: 0;
  transition: transform var(--dur-m) var(--spring), opacity var(--dur-s) var(--ease-effect); }
.rail--collapsed .rail__btn.active::before { transform: translateX(-50%) scaleX(1); opacity: 1; }
.rail--collapsed .rail__btn.active { background: transparent; }
.rail--collapsed .rail__btn svg { position: relative; z-index: 1; }
.rail__logo { width: 38px; height: 38px; border-radius: var(--r-s); margin: 0 0 0 4px;
  background: var(--logo-bg) var(--logo-url) center / 64% no-repeat; }
.rail__nav { display: flex; flex-direction: column; gap: 4px; }
.rail__btn { width: 100%; height: 48px; border-radius: var(--r-full); border: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 0 16px; text-align: left;
  background: transparent; color: var(--muted);
  transition: background var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.rail__btn svg { width: 24px; height: 24px; stroke-width: 1.8; flex-shrink: 0; }
.rail__lbl { font-size: var(--t-body); font-weight: 600; font-family: inherit; }
.rail__btn:hover { background: var(--card-deep); color: var(--text); }
.rail__btn.active { background: var(--accent-soft); color: var(--accent-ink); }
.rail__avatar { margin-top: auto; margin-left: 4px; }

.stage { flex: 1; min-width: 0; padding: 28px 36px 40px; max-width: 1160px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 0; }
.stage[hidden] { display: none; }

/* ---------------- Topbar ---------------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--bg);
  display: flex; flex-direction: column; gap: 8px; padding: 0 0 16px; margin: 0 0 4px; }
.topbar[hidden] { display: none; }
.topbar__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 2px; }
.topbar__logo { display: none; width: 36px; height: 36px; border-radius: var(--r-s); flex-shrink: 0;
  background: var(--logo-bg) var(--logo-url) center / 64% no-repeat; }
.topbar__title { margin: 0; font-size: var(--t-headline-s); font-weight: 700; letter-spacing: -.01em; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__tools { display: flex; gap: 10px; align-items: center; min-width: 0; }
/* Píldora de período ("Sep 2026 ▾"): en qué mes estás + cambiarlo, desde
   cualquier vista con período. En desktop va al lado del título; en mobile,
   en el header pegada al avatar. Gris = mes actual; lima = otro mes (estás
   mirando el pasado, que se note). */
.perpill { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; border: none; cursor: pointer;
  background: var(--card); color: var(--muted); padding: 7px 10px 7px 12px; border-radius: var(--r-full);
  font: inherit; font-size: var(--t-body-s); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background-color var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.perpill svg { width: 14px; height: 14px; }
.perpill:hover { color: var(--text); }
.perpill--past { background: var(--accent); color: var(--on-accent); }
/* Vista anclada a hoy (Compromisos/Tarjetas/Cuentas): la píldora queda, sin chevron ni relleno. */
.perpill--fixed, .perpill--fixed:hover { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--outline); cursor: default; }
.perpill--fixed svg { display: none; }
.perpill[hidden] { display: none; }

.searchpill { display: flex; align-items: center; gap: 8px; min-width: 0;
  background: var(--card); border: none; border-radius: var(--r-full);
  padding: 0 14px; height: 38px; transition: background var(--dur-s) var(--ease-effect); }
.searchpill:focus-within, .searchpill--search { background: var(--card-deep); }
.searchpill__ic { width: 15px; height: 15px; color: var(--faint); flex-shrink: 0; }
.pill-lead { flex-shrink: 0; width: 28px; height: 28px; margin-left: -6px; border: none; cursor: pointer; padding: 0;
  background: transparent; color: var(--text); border-radius: 50%; display: grid; place-items: center; }
.pill-lead svg { width: 18px; height: 18px; }
.pill-lead:hover { background: var(--card-deep); }
.pill-lead[hidden] { display: none; }
/* La lupa queda SIEMPRE visible (también en modo búsqueda): ancla fija, nada
   se corre al entrar/salir del buscador. */
.pill-input { flex: 1; min-width: 60px; width: 150px; border: none; background: transparent; color: var(--text);
  font-size: var(--t-body-m); padding: 0; outline: none; }
.pill-input::placeholder { color: var(--faint); }
.pill-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.pill-clear { position: relative; flex-shrink: 0; width: 26px; height: 26px; margin-right: -6px; border: none; cursor: pointer; padding: 0;
  background: transparent; color: var(--muted); border-radius: 50%; display: grid; place-items: center; }
.pill-clear svg { width: 15px; height: 15px; }
.pill-clear:hover { background: var(--card-deep); color: var(--text); }
.pill-clear[hidden] { display: none; }
.pill-clear::after { content: ''; position: absolute; inset: -9px; } /* 44px de toque */

.newbtn { display: none; } /* desktop: el "+" es el FAB del rail; mobile: el FAB flotante */
.newbtn--unused { flex-shrink: 0; font-size: var(--t-body-m); font-weight: 600;
  background: var(--accent); color: var(--on-accent); border: none; border-radius: var(--r-full);
  padding: 0 16px; height: 38px; cursor: pointer; transition: filter var(--dur-s) var(--ease-effect); }
.newbtn:hover { filter: brightness(1.06); }
.newbtn:active { transform: translateY(1px); }

.avatar-btn { position: relative; flex-shrink: 0; width: 40px; height: 40px; padding: 0;
  border: none; cursor: pointer; border-radius: 50%;
  background: var(--card-deep); color: var(--text); display: grid; place-items: center; }
.avatar-btn:active { transform: scale(.94); }
.avatar-btn__fallback { font-weight: 700; font-size: var(--t-body); line-height: 1; }
.avatar-btn__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Versión nueva esperando: la misma flechita lima de Ajustes ▸ Novedades, en la
   esquina del avatar. El aro es del color de lo que hay atrás (--ava-ring). */
.avatar-btn__upd { position: absolute; right: -3px; bottom: -3px; z-index: 1; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  box-shadow: 0 0 0 2.5px var(--ava-ring, var(--bg)); pointer-events: none; }
.avatar-btn__upd svg { width: 12px; height: 12px; stroke-width: 3; }
/* Al aparecer (M3 Expressive): el badge crece desde el centro con un resorte que se
   pasa y vuelve, la flecha sube a su lugar (dice "actualizar") y un halo lima se
   expande y se apaga dos veces. Una sola vez: es un aviso, no una alarma. */
.avatar-btn__upd--in { animation: updbadge-pop 550ms var(--ease-effect) both; }
.avatar-btn__upd--in svg { animation: updbadge-arrow 450ms var(--spring) 180ms both; }
.avatar-btn__upd--in::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: var(--accent); pointer-events: none; opacity: 0;
  animation: updbadge-halo 1.1s var(--ease-effect) 300ms 2; }
@keyframes updbadge-pop {
  0% { transform: scale(0); }
  55% { transform: scale(1.22); }
  78% { transform: scale(.94); }
  100% { transform: scale(1); }
}
@keyframes updbadge-arrow { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@keyframes updbadge-halo {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Chips de filtro (estilo Gmail): una sola fila scrolleable de dropdowns
   semi-rectangulares bajo la barra de búsqueda. */
.filters { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px;
  width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  animation: revealfilters var(--dur-m) var(--ease-effect); }
.filters::-webkit-scrollbar { display: none; }
.filters[hidden] { display: none; }
.fchip { appearance: none; -webkit-appearance: none; cursor: pointer; flex: 0 0 auto; font-family: inherit;
  border: none; background: var(--card); color: var(--muted);
  padding: 7px 26px 7px 12px; border-radius: var(--r-chip); font-size: var(--t-body-s); font-weight: 500;
  background-image: var(--chev-url);
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
  transition: background-color var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.fchip:hover { color: var(--text); }
.fchip[hidden] { display: none; }
/* Chip con valor elegido: tonal, como el elegido de los chips de Movimientos
   (.movquick__btn) y de las tarjetas de elección; el lima lleno es de las acciones. */
.fchip--on { background-color: color-mix(in srgb, var(--accent) 24%, var(--card)); color: var(--text); font-weight: 600; }
/* "Limpiar": chip cuadrado con la cruz, al final de la fila. */
.fchip--clear { display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 9px; background-image: none; }
.fchip--clear svg { width: 13px; height: 13px; }
.fchip--clear[hidden] { display: none; }
@keyframes revealfilters { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.filt-sel { appearance: none; -webkit-appearance: none; cursor: pointer;
  border: none; background: var(--card); color: var(--muted);
  padding: 8px 34px 8px 14px; border-radius: var(--r-full); font-size: var(--t-body-m); font-weight: 500;
  background-image: var(--chev-url);
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }
.filt-sel:hover { color: var(--text); }
.filt-hint { margin: 2px 0 0; font-size: var(--t-body-s); color: var(--muted); }
.search__sentinel { height: 1px; } /* disparador del scroll infinito del buscador */

/* ------- Chrome mobile: header por vista + tab bar + sheet "Más" ------- */
/* Sólo existen en <960px (ver @media); acá viven los estilos que no dependen
   del breakpoint. El header trae título (o ‹Mes Año›) + avatar → Ajustes. */
.mhead, .tabbar, .moresheet, .fab, .tabguard { display: none; } /* chrome mobile: se muestran en <960px */
.moresheet__scrim { position: absolute; inset: 0; background: var(--scrim); }
.moresheet__panel { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface-high);
  border-radius: var(--r-l) var(--r-l) 0 0; padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
  box-shadow: var(--e3);
  animation: popup var(--dur-l) var(--spring); }
.moresheet__grab { display: block; width: 40px; height: 5px; border-radius: var(--r-full);
  background: var(--faint); opacity: .5; border: none; cursor: pointer; padding: 0; margin: 2px auto 16px; }
.moresheet__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.moresheet__tile { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 84px; border: none; border-radius: var(--r-m); cursor: pointer;
  background: var(--card-deep); color: var(--muted); font-size: var(--t-body-s); font-weight: 600; font-family: inherit; }
.moresheet__tile svg { width: 22px; height: 22px; stroke-width: 1.8; }
.moresheet__tile.active { background: var(--accent-soft); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) {
  .moresheet__panel { animation: none; }
}

/* ---------------- Loading ---------------- */
.loadbar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100;
  overflow: hidden; pointer-events: none; }
.loadbar[hidden] { display: none; }
.loadbar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  border-radius: var(--r-full); background: var(--accent); animation: loadbar 1.05s var(--ease-effect) infinite; }
@keyframes loadbar {
  0%   { left: -35%; width: 35%; }
  50%  { width: 45%; }
  100% { left: 100%; width: 35%; }
}
.loading { display: block; }
.loading[hidden] { display: none; }
/* El texto es para el lector de pantalla: lo que se ve son las siluetas. */
.loading__txt { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Siluetas de la primera carga (skeletonHtml): tarjetas con la forma de la
   vista y bloques que laten, sin texto. */
.skel { display: grid; gap: 16px; }
.skel--rsm { grid-template-columns: 1.35fr 1fr 1fr; }
.skel__card { background: var(--card); border-radius: var(--r-card); padding: var(--pad-card); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.skel__card--hero { grid-row: span 2; }
.skel--rsm .skel__card--wide { grid-column: 1 / -1; }
.skel i { display: block; height: 12px; border-radius: var(--r-full); background: var(--card-deep);
  animation: skelpulse 1.4s var(--ease-effect) infinite alternate; }
.skel .skel__lbl { width: 30%; height: 10px; }
.skel .skel__big { width: 70%; height: 40px; border-radius: var(--r-s); }
.skel .skel__mid { width: 60%; height: 24px; border-radius: var(--r-xs); }
.skel .skel__spark { height: 72px; margin-top: auto; border-radius: var(--r-m); }
.skel__row { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.skel .skel__ic { width: 40px; height: 40px; flex: none; border-radius: var(--r-s); }
.skel__lines { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.skel .skel__sub { height: 9px; }
.skel .skel__amt { width: 64px; flex: none; }
@keyframes skelpulse { from { opacity: 1; } to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .skel i { animation: none; } }
@media (max-width: 959px) {
  .skel { gap: var(--sp-3); }
  .skel--rsm { grid-template-columns: 1fr 1fr; }
  .skel__card--hero { grid-column: 1 / -1; grid-row: auto; }
  .skel .skel__spark { height: 60px; }
}
/* Indicador de carga Expressive: una forma llena que muta (galleta → trébol →
   círculo) mientras gira, en vez del anillo con borde. */
.spinner { width: 40px; height: 40px; background: var(--accent); clip-path: polygon(100.0% 50.0%, 98.9% 54.3%, 96.0% 58.1%, 92.2% 61.3%, 88.7% 64.1%, 86.3% 66.9%, 85.2% 70.3%, 85.1% 74.6%, 85.1% 79.5%, 84.3% 84.3%, 82.1% 88.2%, 78.4% 90.6%, 73.8% 91.1%, 68.8% 90.4%, 64.3% 89.3%, 60.4% 88.8%, 57.0% 89.7%, 53.7% 92.0%, 50.0% 95.0%, 45.8% 97.7%, 41.4% 98.9%, 37.1% 98.1%, 33.5% 95.3%, 30.8% 91.2%, 28.8% 86.8%, 26.8% 83.1%, 24.2% 80.7%, 20.7% 79.3%, 16.2% 78.4%, 11.4% 77.0%, 7.3% 74.7%, 4.7% 71.1%, 4.1% 66.7%, 5.3% 62.0%, 7.4% 57.5%, 9.3% 53.6%, 10.0% 50.0%, 9.3% 46.4%, 7.4% 42.5%, 5.3% 38.0%, 4.1% 33.3%, 4.7% 28.9%, 7.3% 25.3%, 11.4% 23.0%, 16.2% 21.6%, 20.7% 20.7%, 24.2% 19.3%, 26.8% 16.9%, 28.7% 13.2%, 30.8% 8.8%, 33.5% 4.7%, 37.1% 1.9%, 41.4% 1.1%, 45.8% 2.3%, 50.0% 5.0%, 53.7% 8.0%, 57.0% 10.3%, 60.4% 11.2%, 64.3% 10.7%, 68.8% 9.6%, 73.8% 8.9%, 78.4% 9.4%, 82.1% 11.8%, 84.3% 15.7%, 85.1% 20.5%, 85.1% 25.4%, 85.2% 29.7%, 86.3% 33.1%, 88.7% 35.9%, 92.2% 38.7%, 96.0% 41.9%, 98.9% 45.7%);
  animation: m3spin 2.6s var(--ease-effect) infinite; }
@keyframes m3spin {
  0% { clip-path: polygon(100.0% 50.0%, 98.9% 54.3%, 96.0% 58.1%, 92.2% 61.3%, 88.7% 64.1%, 86.3% 66.9%, 85.2% 70.3%, 85.1% 74.6%, 85.1% 79.5%, 84.3% 84.3%, 82.1% 88.2%, 78.4% 90.6%, 73.8% 91.1%, 68.8% 90.4%, 64.3% 89.3%, 60.4% 88.8%, 57.0% 89.7%, 53.7% 92.0%, 50.0% 95.0%, 45.8% 97.7%, 41.4% 98.9%, 37.1% 98.1%, 33.5% 95.3%, 30.8% 91.2%, 28.8% 86.8%, 26.8% 83.1%, 24.2% 80.7%, 20.7% 79.3%, 16.2% 78.4%, 11.4% 77.0%, 7.3% 74.7%, 4.7% 71.1%, 4.1% 66.7%, 5.3% 62.0%, 7.4% 57.5%, 9.3% 53.6%, 10.0% 50.0%, 9.3% 46.4%, 7.4% 42.5%, 5.3% 38.0%, 4.1% 33.3%, 4.7% 28.9%, 7.3% 25.3%, 11.4% 23.0%, 16.2% 21.6%, 20.7% 20.7%, 24.2% 19.3%, 26.8% 16.9%, 28.7% 13.2%, 30.8% 8.8%, 33.5% 4.7%, 37.1% 1.9%, 41.4% 1.1%, 45.8% 2.3%, 50.0% 5.0%, 53.7% 8.0%, 57.0% 10.3%, 60.4% 11.2%, 64.3% 10.7%, 68.8% 9.6%, 73.8% 8.9%, 78.4% 9.4%, 82.1% 11.8%, 84.3% 15.7%, 85.1% 20.5%, 85.1% 25.4%, 85.2% 29.7%, 86.3% 33.1%, 88.7% 35.9%, 92.2% 38.7%, 96.0% 41.9%, 98.9% 45.7%); transform: rotate(0deg); }
  33% { clip-path: polygon(100.0% 50.0%, 99.3% 54.3%, 97.2% 58.3%, 93.9% 61.8%, 90.0% 64.6%, 85.7% 66.7%, 81.6% 68.3%, 77.9% 69.6%, 74.9% 70.9%, 72.6% 72.6%, 70.9% 74.9%, 69.6% 77.9%, 68.3% 81.6%, 66.7% 85.7%, 64.6% 90.0%, 61.8% 93.9%, 58.3% 97.2%, 54.3% 99.3%, 50.0% 100.0%, 45.7% 99.3%, 41.7% 97.2%, 38.2% 93.9%, 35.4% 90.0%, 33.3% 85.7%, 31.8% 81.6%, 30.4% 77.9%, 29.1% 74.9%, 27.4% 72.6%, 25.1% 70.9%, 22.1% 69.6%, 18.4% 68.3%, 14.3% 66.7%, 10.0% 64.6%, 6.1% 61.8%, 2.8% 58.3%, 0.7% 54.3%, 0.0% 50.0%, 0.7% 45.7%, 2.8% 41.7%, 6.1% 38.2%, 10.0% 35.4%, 14.3% 33.3%, 18.4% 31.8%, 22.1% 30.4%, 25.1% 29.1%, 27.4% 27.4%, 29.1% 25.1%, 30.4% 22.1%, 31.7% 18.4%, 33.3% 14.3%, 35.4% 10.0%, 38.2% 6.1%, 41.7% 2.8%, 45.7% 0.7%, 50.0% 0.0%, 54.3% 0.7%, 58.3% 2.8%, 61.8% 6.1%, 64.6% 10.0%, 66.7% 14.3%, 68.3% 18.4%, 69.6% 22.1%, 70.9% 25.1%, 72.6% 27.4%, 74.9% 29.1%, 77.9% 30.4%, 81.6% 31.7%, 85.7% 33.3%, 90.0% 35.4%, 93.9% 38.2%, 97.2% 41.7%, 99.3% 45.7%); }
  66% { clip-path: polygon(100.0% 50.0%, 99.1% 54.3%, 97.0% 58.3%, 95.4% 62.2%, 94.9% 66.3%, 94.6% 70.8%, 93.3% 75.0%, 90.3% 78.2%, 86.6% 80.7%, 83.2% 83.2%, 80.7% 86.6%, 78.2% 90.3%, 75.0% 93.3%, 70.8% 94.6%, 66.3% 94.9%, 62.2% 95.4%, 58.3% 97.0%, 54.3% 99.1%, 50.0% 100.0%, 45.7% 99.1%, 41.7% 97.0%, 37.8% 95.4%, 33.7% 94.9%, 29.2% 94.6%, 25.0% 93.3%, 21.8% 90.3%, 19.3% 86.6%, 16.8% 83.2%, 13.4% 80.7%, 9.7% 78.2%, 6.7% 75.0%, 5.4% 70.8%, 5.1% 66.3%, 4.6% 62.2%, 3.0% 58.3%, 0.9% 54.3%, 0.0% 50.0%, 0.9% 45.7%, 3.0% 41.7%, 4.6% 37.8%, 5.1% 33.7%, 5.4% 29.2%, 6.7% 25.0%, 9.7% 21.8%, 13.4% 19.3%, 16.8% 16.8%, 19.3% 13.4%, 21.8% 9.7%, 25.0% 6.7%, 29.2% 5.4%, 33.7% 5.1%, 37.8% 4.6%, 41.7% 3.0%, 45.7% 0.9%, 50.0% 0.0%, 54.3% 0.9%, 58.3% 3.0%, 62.2% 4.6%, 66.3% 5.1%, 70.8% 5.4%, 75.0% 6.7%, 78.2% 9.7%, 80.7% 13.4%, 83.2% 16.8%, 86.6% 19.3%, 90.3% 21.8%, 93.3% 25.0%, 94.6% 29.2%, 94.9% 33.7%, 95.4% 37.8%, 97.0% 41.7%, 99.1% 45.7%); }
  100% { clip-path: polygon(100.0% 50.0%, 98.9% 54.3%, 96.0% 58.1%, 92.2% 61.3%, 88.7% 64.1%, 86.3% 66.9%, 85.2% 70.3%, 85.1% 74.6%, 85.1% 79.5%, 84.3% 84.3%, 82.1% 88.2%, 78.4% 90.6%, 73.8% 91.1%, 68.8% 90.4%, 64.3% 89.3%, 60.4% 88.8%, 57.0% 89.7%, 53.7% 92.0%, 50.0% 95.0%, 45.8% 97.7%, 41.4% 98.9%, 37.1% 98.1%, 33.5% 95.3%, 30.8% 91.2%, 28.8% 86.8%, 26.8% 83.1%, 24.2% 80.7%, 20.7% 79.3%, 16.2% 78.4%, 11.4% 77.0%, 7.3% 74.7%, 4.7% 71.1%, 4.1% 66.7%, 5.3% 62.0%, 7.4% 57.5%, 9.3% 53.6%, 10.0% 50.0%, 9.3% 46.4%, 7.4% 42.5%, 5.3% 38.0%, 4.1% 33.3%, 4.7% 28.9%, 7.3% 25.3%, 11.4% 23.0%, 16.2% 21.6%, 20.7% 20.7%, 24.2% 19.3%, 26.8% 16.9%, 28.7% 13.2%, 30.8% 8.8%, 33.5% 4.7%, 37.1% 1.9%, 41.4% 1.1%, 45.8% 2.3%, 50.0% 5.0%, 53.7% 8.0%, 57.0% 10.3%, 60.4% 11.2%, 64.3% 10.7%, 68.8% 9.6%, 73.8% 8.9%, 78.4% 9.4%, 82.1% 11.8%, 84.3% 15.7%, 85.1% 20.5%, 85.1% 25.4%, 85.2% 29.7%, 86.3% 33.1%, 88.7% 35.9%, 92.2% 38.7%, 96.0% 41.9%, 98.9% 45.7%); transform: rotate(360deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Capa abierta (modal, detalle, sheets, pickers, diálogos): el fondo no scrollea.
   Lo prende/apaga syncInert (la pila de trampas de foco), no cada overlay. Va en
   <html>: en mobile html tiene overflow-x: clip y el overflow del body deja de
   propagarse al viewport. iOS igual ignora esto para el dedo: el filtro táctil
   de app.js (touchScrollOk) es el que lo frena ahí. */
html.pop-open { overflow: hidden; }

@keyframes popfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes popup { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------------- Chips (quedan pocos: fuera de las filas de movimiento) ---------------- */
.chip { font-size: var(--t-label); font-weight: 500; white-space: nowrap;
  color: var(--muted); background: var(--chip-bg); border-radius: var(--r-chip); padding: 3px 10px; line-height: 1.4;
  display: inline-flex; align-items: center; gap: 4px; }
.chip svg { width: 12px; height: 12px; }
/* ⓘ de fila interna ("no cuenta en el total", ahora sin texto): sólo el glifo
   circulado, sin fondo — el propio SVG ya es el círculo. */
.chip--info { padding: 0; background: transparent; color: var(--faint); }
.chip--info svg { width: 15px; height: 15px; }
.chip--purple { color: var(--purple); background: var(--purple-soft); }
.chip--accent { color: var(--on-accent); background: var(--accent); }
.chip--blue { color: var(--blue); background: var(--blue-soft); }
/* píldora de tendencia ("+11%", sin flecha) */
.trendpill { font-size: var(--t-label); font-weight: 500; border-radius: var(--r-chip); padding: 3px 9px; white-space: nowrap; }
.trendpill--pos { color: var(--accent-ink); background: var(--accent-soft); }
.trendpill--neg { color: var(--neg-ink); background: var(--neg-soft); }
.trendpill--flat { color: var(--faint); background: var(--chip-bg); }

/* dot redondo de leyendas */
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }

/* montos con signo */
.amt-in { color: var(--accent-ink); }
.amt-out { color: var(--neg-ink); }

/* chip de gasto compartido: lima apagado (tint, no el lima sólido) */
.chip--share { color: var(--accent-ink); background: var(--accent-soft); }

/* chip de AVISO de tarjeta: la compra está hecha pero el resumen todavía no la
   cobró — azul (ni lima de compartido ni púrpura de tarjeta) porque no es plata
   que ya salió. La fila entera va apagada (.mrow--aviso). */
.chip--aviso { color: var(--blue); background: var(--blue-soft); }
/* Reintegro (hasReintegro): lima cuando llegó, apagado mientras está por llegar. */
.chip--rein { color: var(--accent-ink); background: var(--accent-soft); }
.chip--rein svg { width: 12px; height: 12px; }
.chip--sena { color: var(--accent-ink); background: var(--accent-soft); }
.chip--reinwait { color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); }
.mrow--aviso .mrow__amt { color: var(--muted); }

/* Cara de un reparto extremo ("pagué por Juli" / "lo pagó Juli"): el monto que
   se muestra es la plata que se movió, pero el gasto NO es de esta persona y no
   suma en ningún total — se lee apagado, igual que un aviso. */
.mrow--presta .mrow__amt { color: var(--muted); }

/* chips de un movimiento (½, tarjeta+cuota, ↻), bajo el monto en los listados */
.movchips { display: flex; gap: 4px; justify-content: flex-end; }
/* TRANSACTION ROW (.txrow, transactionRowHtml en app.js): la única fila de un
   movimiento, en todas las listas. Sobre la base .mrow (la fila de lista que
   comparte con las proyecciones de Compromisos/Tarjetas y los pagos), todas del
   MISMO alto: título arriba y, abajo, sólo los chips (½ Juli, tarjeta/cuota, ↻) en
   .row__meta — la categoría la dice el ícono (en los últimos del Inicio va el día
   adelante; en una transferencia, las puntas). A la derecha sólo plata: el monto en
   la línea del título y, en un compartido, el total ("de $38.900", .row__of) en la
   de abajo. Las dos columnas comparten alturas de línea (1,5rem cada una), así
   quedan a la par aunque los chips sean más altos que el texto. Sin chips ni total
   (.row--solo) la fila mide lo mismo, con el título y el monto al medio. */
.mrow.txrow { align-items: center; }
.txrow .mrow__title, .txrow .mrow__amt { line-height: 1.5rem; }
.txrow .mrow__right { gap: 0; align-self: flex-start; }
.txrow .mrow__text { min-height: 3rem; display: flex; flex-direction: column; justify-content: center; }
.txrow.row--solo .mrow__right { align-self: center; }
.row__meta { display: flex; align-items: center; gap: 6px; min-width: 0; height: 1.5rem; }
.row__meta > .mrow__subline { flex: 0 1 auto; min-width: 0; margin-top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta:empty { display: none; }
.row__meta .movchips { flex: none; justify-content: flex-start; }
.row__meta .chip { padding-block: 1px; }
.row__of { display: block; line-height: 1.5rem; font-size: var(--t-body-s); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Modo compacto (Ajustes ▸ Apariencia ▸ Filas de los movimientos → data-rows en
   <html>): la misma fila un escalón más chica — ícono 32, título 14, chips y total
   11, líneas de 1,25rem — y el encabezado del día más bajo. */
:root[data-rows="compact"] .mrow.txrow { gap: 10px; padding-block: 7px; }
:root[data-rows="compact"] .txrow .mrow__ic { width: 32px; height: 32px; border-radius: var(--r-s); }
:root[data-rows="compact"] .txrow .mrow__ic svg { width: 16px; height: 16px; }
:root[data-rows="compact"] .txrow .mrow__ic .gic--brand-img { width: 18px; height: 18px; }
:root[data-rows="compact"] :is(.txrow .mrow__title, .txrow .mrow__amt) { font-size: var(--t-body-m); line-height: 1.25rem; }
:root[data-rows="compact"] .txrow .mrow__text { min-height: 2.375rem; }
:root[data-rows="compact"] .txrow .row__meta { height: 1.125rem; gap: 4px; }
:root[data-rows="compact"] .txrow .row__meta > .mrow__subline { font-size: var(--t-label-s); }
:root[data-rows="compact"] .txrow .row__meta .chip { font-size: var(--t-label-s); padding: 0 7px; line-height: 1.125rem; gap: 3px; }
:root[data-rows="compact"] .txrow .row__meta .chip svg { width: 10px; height: 10px; }
:root[data-rows="compact"] .txrow .row__meta .movchips { gap: 3px; }
:root[data-rows="compact"] .txrow .row__of { font-size: var(--t-label-s); line-height: 1.125rem; }
:root[data-rows="compact"] .mday__head { padding: 10px 0 4px; }
:root[data-rows="compact"] .mday__date { font-size: var(--t-body-s); }

/* ---------------- Vista: Resumen (bento) ---------------- */
.rsm { display: flex; flex-direction: column; gap: var(--sp-4); }
.rsm-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 16px; }
/* Tarjeta principal oculta (Ajustes ▸ Pantalla de inicio): sin la columna del
   hero, ingresos-vs-egresos y el donut se reparten el ancho. */
.rsm-grid--nohero { grid-template-columns: 1.6fr 1fr; }
.rsm-grid.rsm-grid--nohero .ivsg { grid-column: 1; }
.rsm-grid.rsm-grid--nohero .cmap { grid-column: 2; }
/* Hero + una sola tarjeta al lado (la otra apagada en Ajustes): el hero ya no
   necesita doble alto. Con UNA tarjeta en total, va entera. */
.rsm-grid--one { grid-template-columns: 1.35fr 2fr; }
.rsm-grid--one .bal { grid-row: auto; }
.rsm-grid.rsm-grid--one :is(.ivsg, .cmap) { grid-column: 2; }
.rsm-grid--solo { grid-template-columns: 1fr; }
.rsm-grid--solo > * { grid-column: 1 / -1 !important; grid-row: auto; }
.rsm-grid2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.rsm-grid2--solo { grid-template-columns: 1fr; }

.bal { grid-row: span 2; padding: var(--sp-6); display: flex; flex-direction: column; cursor: default; }
.bal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bal__num { font-size: clamp(1.875rem, 4vw, 2.625rem); font-weight: 800; letter-spacing: var(--tracking-tight);
  margin-top: 12px; line-height: 1.05; }
.bal__num--gasto { color: var(--text); }   /* gastos: siempre positivo, sin color de signo */
.bal__num--pos { color: var(--accent-ink); } /* ingresos / balance a favor */
.bal__num--neg { color: var(--neg-ink); }    /* balance en rojo */
.bal__sub { font-size: var(--t-body-m); color: var(--muted); margin-top: 2px; }
.bal__sub b { font-weight: 500; }
.bal__spacer { flex: 1; min-height: 18px; }
.bal__sparkwrap { position: relative; }
.bal__spark { width: 100%; height: 84px; display: block; }
/* Marcador "hoy" al final del sparkline: dot lima con borde de la tarjeta +
   halo suave. Overlay HTML (round de verdad; en el SVG estirado se ovalaría). */
.bal__dot { position: absolute; left: 100%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--card); box-sizing: content-box;
  transform: translate(-50%, -50%); }
.bal__dot::before { content: ''; position: absolute; inset: -7px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 20%, transparent); }
.bal__axis { display: flex; justify-content: space-between; font-size: var(--t-label-s);
  color: var(--faint); margin-top: 8px; }
/* El mes anterior, punteado detrás de la línea del período (mismo eje y escala). */
.bal__prev { stroke: var(--faint); stroke-width: 1.6; stroke-dasharray: 4 4; stroke-linecap: round; opacity: .8; }
.bal__legend { display: flex; gap: 14px; margin-top: 10px; font-size: var(--t-label); color: var(--muted); }
.bal__legend span { display: inline-flex; align-items: center; gap: 6px; }
.bal__ln { width: 14px; border-top: 2.4px solid var(--accent); border-radius: 2px; }
.bal__ln--prev { border-top: 2px dashed var(--faint); }


/* Categorías del Inicio: MOSAICO (treemap). Cada bloque ocupa el lugar que pesa
   su categoría, en su color suave con el ícono y, si entran, monto y nombre
   (catMosaicHtml). Es un <button> → resets de tipografía/alineación. */
.cmap { grid-column: 2 / 4; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px;
  border: none; text-align: left; font-family: inherit; cursor: pointer; color: inherit; }
div.cmap { cursor: default; }
.cmap__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
/* El "Ver →" de adentro no es un botón propio (toda la tarjeta lo es): sin el alto mínimo de toque. */
:is(.cmap__head, .ldays__head) .morelink { min-height: 0; }
.cmap__box { position: relative; display: block; height: 196px; margin: -2px; }
.cmap__b { position: absolute; padding: 2px; display: block; container-type: size; }
.cmap__in { display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: hidden;
  padding: 9px 10px; border-radius: var(--r-m); background: color-mix(in srgb, var(--cm) 18%, transparent); }
.cmap__in svg { width: 18px; height: 18px; flex-shrink: 0; }
.cmap__txt { display: flex; flex-direction: column; min-width: 0; }
.cmap__txt b { font-size: var(--t-body); font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmap__txt small { font-size: var(--t-label-s); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Qué entra lo decide el tamaño real de cada bloque (container queries), nunca un
   texto cortado: grande → monto y nombre abajo; chico → ícono y monto al centro;
   bajo y ancho → en fila; diminuto → sólo el ícono (el nombre y el monto quedan en
   el title y en la lista de Categorías). */
@container (width >= 170px) and (height >= 120px) { .cmap__txt b { font-size: var(--t-headline-s); letter-spacing: var(--tracking-tight); } }
@container (width < 96px) or (height < 84px) {
  .cmap__in { padding: 6px; align-items: center; justify-content: center; gap: 4px; }
  .cmap__txt { align-items: center; max-width: 100%; }
  .cmap__txt small { display: none; }
  .cmap__txt b { font-size: var(--t-label); }
}
@container ((height < 84px) and (width >= 132px)) or ((height < 56px) and (width >= 96px)) {
  .cmap__in { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 6px 12px; }
  .cmap__txt { align-items: flex-start; }
}
@container (height < 84px) and (width >= 132px) {
  .cmap__txt b { font-size: var(--t-body); }
  .cmap__txt small { display: block; }
}
@container (height < 60px) { .cmap__txt small { display: none; } }
@container (width < 56px) or (height < 34px) or ((height < 50px) and (width < 96px)) { .cmap__txt { display: none; } }
.last { padding: 20px; }
.last__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 10px; }
/* Cabecera suelta (fuera de una tcard, ej. "Últimos consumos" en Tarjetas):
   alineada con el padding interno de las tarjetas del listado. */
.rsm > .last__head { margin: 4px 0 -6px; padding: 0 20px; }
.morelink { font-size: var(--t-body-s); color: var(--accent-ink); font-weight: 600; cursor: pointer; border: none;
  background: none; padding: 0; white-space: nowrap; }
.morelink:hover { text-decoration: underline; }

.rsm-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Ingresos vs egresos: UNA barra por mes, del alto de lo que entró — abajo lo que
   salió (coral), un hueco, arriba lo que quedó (lima). Si salió más de lo que
   entró, arriba del hueco va rayado lo que se pasó. Corona cada barra lo que quedó;
   arriba, los tres números del mes elegido (tocar un mes lo elige). */
.rsm-grid .ivsg { grid-column: 2 / 4; }
.ivsg { padding: 18px 20px 14px; }
.ivsg__nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin-top: 10px; }
.ivsg__nums > span { min-width: 0; }
.ivsg__nums b { display: block; font-size: var(--t-title); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.ivsg__k { display: flex; align-items: center; gap: 6px; font-size: var(--t-label); color: var(--muted); }
.ivsg__sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ivsg__sw--out { background: var(--neg); } .ivsg__sw--left { background: var(--accent); }
.ivsg__chart { display: grid; grid-template-columns: repeat(var(--ivsg-n, 6), 1fr); gap: 4px; margin-top: 12px; }
.ivsg__mes { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  border: none; background: none; padding: 4px 2px; cursor: pointer; font-family: inherit; color: inherit;
  border-radius: var(--r-m); transition: background var(--dur-s) var(--ease-effect); }
.ivsg__mes:hover { background: var(--card-deep); }
.ivsg__plot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 100%; height: 140px; }
.ivsg__val { font-size: var(--t-label-s); font-weight: 700; white-space: nowrap; margin-bottom: 4px; }
.ivsg__mes--neg .ivsg__val { background: var(--neg-soft); padding: 1px 5px; border-radius: var(--r-chip); margin-bottom: 8px; }
.ivsg__bar { display: flex; flex-direction: column; gap: 2px; width: 100%; max-width: 34px; min-height: 4px; }
.ivsg__seg { display: block; flex: none; min-height: 3px; }
.ivsg__seg--left, .ivsg__seg--over { border-radius: 10px 10px 3px 3px; }
.ivsg__seg--out { border-radius: 3px 3px 10px 10px; }
.ivsg__seg:only-child { border-radius: 10px; }
.ivsg__seg--out { background: color-mix(in srgb, var(--neg) 45%, var(--card-deep)); }
.ivsg__seg--left { background: color-mix(in srgb, var(--accent) 55%, var(--card-deep)); }
.ivsg__seg--over { min-height: 6px; background: repeating-linear-gradient(135deg, var(--neg) 0 4px, color-mix(in srgb, var(--neg) 45%, transparent) 4px 8px); }
/* El mes elegido y uno en rojo van en color pleno; los demás, apagados. */
.ivsg__mes--sel .ivsg__seg--out, .ivsg__mes--neg .ivsg__seg--out { background: var(--neg); }
.ivsg__mes--sel .ivsg__seg--left { background: var(--accent); }
.ivsg__lbl { font-size: var(--t-label); color: var(--muted); }
.ivsg__mes--sel .ivsg__lbl { color: var(--text); font-weight: 700; }

/* Últimos días: una línea por día con sus íconos apilados, cuántos movimientos
   y el total. Toda la tarjeta lleva a Movimientos. */
.ldays { display: block; width: 100%; padding: 16px 20px 8px; border: none; text-align: left; font-family: inherit; color: inherit; cursor: pointer; }
.ldays__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.ldays__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.ldays__row + .ldays__row { border-top: 1px solid var(--outline); }
.ldays__ics { display: flex; width: 92px; flex-shrink: 0; }
.ldays__ic { width: 32px; height: 32px; border-radius: var(--r-s); margin-right: -8px; display: grid; place-items: center;
  background: var(--card-deep); border: 2px solid var(--card); color: var(--muted); flex-shrink: 0; }
.ldays__ic svg { width: 16px; height: 16px; }
.ldays__ic .gic--brand-img { width: 18px; height: 18px; }
.ldays__ic--in { background: var(--accent-soft); color: var(--accent-ink); }
.ldays__ic--n { font-size: var(--t-label-s); font-weight: 700; }
.ldays__t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-body-s); color: var(--muted); }
.ldays__t b { color: var(--text); font-size: var(--t-body); font-weight: 600; }
.ldays__v { font-size: var(--t-body); font-weight: 600; white-space: nowrap; text-align: right; }

/* Compartidos del Inicio: arriba, las caras de los que tienen saldo y cuánto te
   deben / debés; abajo, qué parte de lo que gastaste en el mes fue compartida.
   Es un <button> (linkea a la vista Compartidos). */
.shc { display: block; width: 100%; padding: 16px 18px; border: none; text-align: left; font-family: inherit; color: inherit; cursor: pointer; }
div.shc { cursor: default; }
.shc__top { display: flex; align-items: center; gap: 12px; }
.shc__avas { display: flex; padding-right: 8px; flex-shrink: 0; }
.shc__ava { width: 32px; height: 32px; margin-right: -8px; display: grid; place-items: center; border-radius: 42%;
  font-size: var(--t-label); font-weight: 700; color: var(--on-tone); border: 2px solid var(--card); box-sizing: border-box; }
.shc__ava.frd-ava--nc { border: 2px dashed; background: var(--card); }
.shc__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--t-body-s); color: var(--muted); }
.shc__txt b { font-size: var(--t-body-l); font-weight: 700; color: var(--text); }
.shc__chev { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.shc__sep { display: block; height: 1px; background: var(--outline); margin: 14px 0 12px; }
.shc__splitlbl { display: block; font-size: var(--t-body-s); color: var(--muted); margin-bottom: 8px; }
.shc__bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.shc__bar > span { display: block; height: 100%; }
.shc__bar--own, .shc__dot--own { background: color-mix(in srgb, var(--text) 22%, transparent); }
.shc__bar--sh, .shc__dot--sh { background: var(--accent); }
.shc__rows { display: flex; flex-direction: column; gap: 12px; }
.shc__row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; }
.shc__rowic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 42%;
  color: var(--on-tone); font-weight: 700; font-size: var(--t-label); }
.shc__rowic.frd-ava--nc { border: 2px dashed; background: var(--card); }
.shc__rowic--own { background: var(--card-deep); }
.shc__who, .shc__amt { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-body); color: var(--text); }
.shc__who > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shc__amt { text-align: right; }
.shc__amt b { font-weight: 700; }
.shc__who small, .shc__amt small { font-size: var(--t-label); color: var(--muted); }
.shc__more { font-size: var(--t-body-s); color: var(--muted); padding-left: 38px; }
.shc__tot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--outline); padding-top: 10px;
  font-size: var(--t-body-m); color: var(--muted); }
.shc__tot b { color: var(--text); font-weight: 700; }
.shc__bar--tot { margin-top: -4px; }

/* ---------------- Vista: Movimientos ---------------- */
.mov-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.movmore { display: flex; justify-content: center; margin: 12px 0; }
/* Filtros rápidos de Movimientos: sólo mobile (en desktop filtran los chips del buscador). */
.mday { padding: 8px 22px 8px; }
.mday__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 14px 0 6px; }
.mday__date { font-size: var(--t-body-m); font-weight: 500; color: var(--muted); white-space: nowrap; }
.mday__tot { font-size: var(--t-body-s); color: var(--muted); text-align: right; margin-left: auto; }
.mday__cur { white-space: nowrap; } /* un monto por moneda: nunca se corta adentro */
.mday__tot .amt-out { color: var(--muted); } /* el total del día sólo se colorea si es positivo */
/* Fila de movimiento: 2 líneas (título + sublínea con metadata "·"), sin chips
   y sin divisores entre filas (el padding separa). */
.mrow { display: flex; align-items: center; gap: 14px; padding: 12px; margin: 0 -12px; border: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; /* mantener apretado = menú de acciones (openRowActions), no selección */
  font-size: var(--t-body); cursor: pointer; width: calc(100% + 24px); text-align: left; background: none; color: inherit;
  border-radius: var(--r-group); transition: background var(--dur-s) var(--ease-effect); }
/* El fondo al tocar/pasar queda concéntrico con la tarjeta: a ~8px de su borde y
   con su radio menos ese margen (28 − 8 = --r-group), no un rectángulo de radio
   chico pegado al borde. */
.mrow:hover { background: var(--card-deep); }
.mrow__ic { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--card-deep); color: var(--muted);
  display: grid; place-items: center; flex-shrink: 0; }
.mrow__ic svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; }
.mrow__ic--in { background: var(--accent-soft); color: var(--accent-ink); }
/* Logos de marca (brandIconSvg): 'fill' = Simple Icons (relleno), 'line' = Arcticons
   (trazo, viewBox 48). Pisan el stroke que los contenedores le ponen a los .gic. */
.gic.gic--brand-fill { fill: currentColor; stroke: none; }
.gic.gic--brand-line { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.gic.gic--brand-mono { fill: currentColor; stroke: none; font-family: inherit; font-weight: 800; font-size: var(--t-label-s); letter-spacing: -.02em; }
.gic--brand-mono text { fill: var(--on-tone); }
/* Íconos de sitio (PNG/SVG en /brands/): tamaño del glifo; 'plate' les pone fondo claro. */
.gic--brand-img { width: 22px; height: 22px; object-fit: contain; display: block; }
.gic--brand-img.gic--plate { background: #fff; border-radius: var(--r-xs); padding: 2px; box-sizing: border-box; }
/* Mini logo de banco (bankLogoHtml): llena el cuadrado del ícono de la cuenta o la
   tarjeta, con su radio; el glifo de Simple Icons va al 58% sobre el color de la marca. */
.blogo { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: grid; place-items: center;
  overflow: hidden; box-sizing: border-box; flex-shrink: 0; }
.blogo.blogo--glyph svg { width: 58%; height: 58%; fill: currentColor; stroke: none; }
.blogo--mono { color: var(--on-tone); font-weight: 800; font-size: var(--t-label-s); letter-spacing: -.02em; line-height: 1; }
.chip .blogo { width: 14px; height: 14px; border-radius: 4px; }
.chip .blogo--mono { font-size: .4375rem; }
.chip--logo { padding: 0; background: none; }
/* Las puntas de una transferencia ("Brubank → Zurich"): el logo chico adelante del nombre. */
.punta { display: inline-block; vertical-align: -.15em; margin-right: 4px; }
.punta .blogo { width: 1em; height: 1em; border-radius: 4px; }
:root[data-rows="compact"] .txrow .row__meta .chip .blogo { width: 12px; height: 12px; border-radius: 3px; }
/* Sobre la tarjeta (fila de Tarjetas y la tarjeta grande): el logo con un borde suave. */
.tarmes__logo, .cardfic__lg { width: 32px; height: 32px; border-radius: var(--r-xs); overflow: hidden; flex-shrink: 0;
  display: block; box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-tone) 30%, transparent); }
.tarmes__logo + .tarmes__tileleft { flex: 1; }
.tarmes__tile--idle .tarmes__logo { width: 28px; height: 28px; }
.cardfic { position: relative; }
.cardfic__logo { position: absolute; top: 20px; right: 20px; }
.cardfic__lg { width: 40px; height: 40px; border-radius: var(--r-s); }
.mrow__text { flex: 1; min-width: 0; }
.mrow__title { display: block; font-size: var(--t-body-l); font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__sub { color: var(--faint); font-size: var(--t-body-m); }
.mrow__subline { display: block; color: var(--muted); font-size: var(--t-body-s); margin-top: 1px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.mrow__amt { font-size: var(--t-body); font-weight: 500; flex-shrink: 0; text-align: right; white-space: nowrap; }
.search__count { font-size: var(--t-body-s); font-weight: 600; color: var(--muted); padding: 0 4px 10px; }
#view-buscar { padding-top: 4px; }

/* filas apiladas dentro de un contenedor (detalle de tarjeta, compromisos) */
.gcard { display: flex; flex-direction: column; }

/* ---------------- Vista: Categorías ---------------- */
.catgrid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.catcard { padding: 24px; }
.catcard__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.catcard__vs { font-size: var(--t-label); color: var(--muted); }
/* Categorías: arriba el mosaico (cada bloque abre su categoría), abajo TODAS las
   categorías como filas: ícono, nombre + píldora vs el mes anterior, monto y una
   barrita de cuánto pesa (relativa a la más grande). */
.catcard--map { display: flex; flex-direction: column; gap: 12px; }
.catcard--map .cmap__box { height: 280px; }
.cmap__b:is(button) { border: none; background: none; font-family: inherit; color: inherit; text-align: left; cursor: pointer; }
.cmap__b:is(button):hover .cmap__in { background: color-mix(in srgb, var(--cm) 26%, transparent); }
.catlist { padding: 8px 20px; display: flex; flex-direction: column; }
.catrow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0;
  width: 100%; border: none; background: transparent; color: inherit; font-family: inherit; text-align: left; cursor: pointer; }
.catrow + .catrow { border-top: 1px solid var(--outline); }
.catrow__ic { grid-row: span 2; width: 36px; height: 36px; border-radius: var(--r-s); display: grid; place-items: center; }
.catrow__ic svg { width: 18px; height: 18px; }
.catrow__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--t-body); font-weight: 600; }
.catrow__name > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.catrow__name .trendpill { font-size: var(--t-label-s); padding: 2px 7px; flex-shrink: 0; }
.catrow__amt { grid-row: span 2; font-size: var(--t-body); font-weight: 600; white-space: nowrap; }
.catrow__bar { height: 5px; border-radius: 3px; background: var(--card-deep); overflow: hidden; }
.catrow__bar > span { display: block; height: 100%; border-radius: 3px; }
/* Detalle de categoría: una tarjeta con el total, la píldora (con su "contra qué"),
   el histórico y las barras de los últimos meses (tocar una filtra los movimientos). */
.catdet { padding: var(--pad-card); margin-bottom: var(--sp-3); }
.catdet__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.catdet__amt { font-size: var(--t-display-s); font-weight: 800; letter-spacing: var(--tracking-tight); }
.catdet__sub { font-size: var(--t-body-s); color: var(--muted); margin-top: 2px; }
.catspark__bars { display: flex; align-items: flex-end; gap: 4px; height: 84px; margin-top: 12px; }
.catspark__bar { flex: 1; min-width: 0; background: var(--gray-seg); border-radius: 4px 4px 2px 2px; cursor: pointer; transition: background var(--dur-s) var(--ease-effect), opacity var(--dur-s) var(--ease-effect); }
.catspark__bar:hover { opacity: .85; }
/* Un solo estado de selección (mismo formato para el mes por defecto y el que se
   toca): siempre hay una sola barra resaltada. */
.catspark__bar--active { background: var(--accent); }
.catdet-monthchip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 12px; border: none; border-radius: var(--r-chip); background: color-mix(in srgb, var(--accent) 24%, var(--card)); color: var(--text); font-size: var(--t-body-s); font-weight: 600; cursor: pointer; }
.catspark__empty { padding: 4px; }

/* ---------------- Vista: Compromisos ---------------- */
/* Arriba, el total del mes con una barra partida en lo pagado, cada resumen de
   tarjeta (en su color) y los gastos del mes; abajo, la línea de pasos. */
.cmphero { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); }
.cmphero__num { font-size: var(--t-display); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; }
.cmphero__bar { display: flex; gap: 3px; height: 10px; margin-top: 10px; }
.cmphero__bar > span { min-width: 6px; border-radius: var(--r-full); }
.cmphero__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; font-size: var(--t-body-s); color: var(--muted); }
/* El próximo pago, debajo de la barra: qué, cuándo y cuánto. Es un botón (abre su
   detalle) que se lee como una línea más de la tarjeta, separado por un divisor. */
.cmphero__next { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 12px 0 0;
  border: none; border-top: 1px solid var(--outline); background: none; color: var(--text); font: inherit;
  font-size: var(--t-body-s); text-align: left; cursor: pointer; }
.cmphero__next svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--accent-ink); }
.cmphero__nextlbl { flex: 0 0 auto; color: var(--muted); }
.cmphero__nextwhat { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmphero__nextamt { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--neg-ink); }
.cmphero__next:hover .cmphero__nextwhat { text-decoration: underline; }
.cmphero__next:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: var(--r-xs); }
/* Cada paso es una tarjeta grande con su ESTADO en el lugar del ícono; la línea
   sale del círculo hasta el borde de la tarjeta (el summary la recorta) y sigue
   por el hueco hasta la próxima. Abierta, se corta: no pisa las filas. */
.cmpsteps { display: flex; flex-direction: column; gap: var(--sp-3); --cmp-x: calc(var(--sp-5) + 21px); }
.cmpstep { position: relative; background: var(--card); border-radius: var(--r-card); --cmp-line: var(--outline); }
.cmpstep--done { --cmp-line: var(--accent); }
.cmpstep__sum { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px;
  padding: 18px var(--sp-5); cursor: pointer; border-radius: var(--r-card); }
.cmpstep__mark { position: relative; flex: 0 0 44px; height: 44px; }
.cmpstep__mark::before, .cmpstep__mark::after { content: ''; position: absolute; left: 21px; width: 2px; height: 200px; }
.cmpstep__mark::before { bottom: 100%; background: var(--cmp-up, transparent); }
.cmpstep__mark::after { top: 100%; background: var(--cmp-line); }
.cmpstep:last-child .cmpstep__mark::after, .cmpstep[open] .cmpstep__mark::after { display: none; }
.cmpstep--after-done { --cmp-up: var(--accent); }
.cmpstep--after-rest { --cmp-up: var(--outline); }
/* El tramo del hueco entre tarjetas: el color del paso de arriba. */
.cmpstep + .cmpstep::before { content: ''; position: absolute; left: var(--cmp-x); bottom: 100%; width: 2px;
  height: var(--sp-3); background: var(--cmp-up); }
.cmpstep__dot { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; z-index: 1; }
.cmpstep__dot svg { width: 20px; height: 20px; }
.cmpstep--done .cmpstep__dot { background: var(--accent); color: var(--on-accent); }
.cmpstep--todo .cmpstep__dot { background: var(--card); box-shadow: inset 0 0 0 3px var(--neg); }
.cmpstep--later .cmpstep__dot { background: var(--card); box-shadow: inset 0 0 0 2px var(--muted); }
.cmpstep__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmpstep__tot { font-size: var(--t-headline); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.15;
  color: var(--cmp-c, var(--text)); overflow-wrap: anywhere; }
.cmpstep__chev { width: 20px; height: 20px; color: var(--faint); flex-shrink: 0; transition: transform var(--dur-m) var(--spring); }
.cmpstep[open] .cmpstep__chev { transform: rotate(180deg); }
.cmpstep__body { padding: 0 var(--sp-5) 10px; }
/* Las filas del cuerpo son las mismas .mrow de Movimientos, sin divisores. */
.cmpstep__ttl { font-size: var(--t-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* En el título, un chip por tarjeta de crédito que hay adentro, en su color. */
.cmpstep__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cmptag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-chip);
  font-size: var(--t-label); font-weight: 600; color: var(--cmp-tag); background: color-mix(in srgb, var(--cmp-tag) 14%, transparent); }
.cmptag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Con el logo del banco (bankLogoHtml) en lugar del puntito. */
.cmptag--logo { padding-left: 3px; }
.cmptag--logo::before { content: none; }
.cmptag .blogo { width: 16px; height: 16px; border-radius: 4px; }
/* Un grupo adentro de un paso: una tarjeta de crédito, los gastos del mes, lo demás. */
.cmpstep__grp { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-top: 8px;
  border-top: 1px solid var(--outline); }
.cmpstep__grp:first-child { border-top: 0; }
.cmpstep__gdot { flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--cmp-g); }
.cmpstep__glogo { flex: 0 0 20px; height: 20px; border-radius: 6px; overflow: hidden; display: block; }
.cmpstep__gttl { flex: 1; min-width: 0; font-size: var(--t-body-m); font-weight: 600; }
.cmpstep__gttl > span { font-weight: 500; color: var(--muted); }
.cmpstep__gtot { font-size: var(--t-body-m); font-weight: 700; white-space: nowrap; color: var(--cmp-g); }
.cmpstep__pay { display: block; width: 100%; min-height: 48px; margin: 6px 0 10px; border: none; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: var(--t-body-m); font-weight: 600; cursor: pointer; }
.cmpstep__pay:hover { filter: brightness(1.06); }
/* Chip "variable" de las filas estimadas por categoría: un atributo, como la
   tarjeta o el ↻ (sin color: no es plata ni una acción). */
.chip--var { color: var(--muted); background: var(--card-deep); }
.cmprow .row__meta > .mrow__subline { color: var(--muted); }
/* Detalle de un variable: la cuenta mes por mes. */
.cmpvar__calc { display: flex; flex-direction: column; gap: 6px; width: 100%; margin: 4px 0 8px; }
.cmpvar__line { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t-body); color: var(--muted); }
.cmpvar__line .mono { font-variant-numeric: tabular-nums; color: var(--text); }
.cmpvar__line--strong { color: var(--text); font-weight: 600; padding-top: 6px; border-top: .5px solid var(--sep); }
.cpage__hint { font-size: var(--t-body-s); color: var(--muted); line-height: 1.5; padding: 4px 8px; margin: 0; }
/* Lo que dejó de aparecer: una fila con borde al pie, que se abre en el lugar. Sus
   filas son las de siempre y "Agregar el gasto" / "Dar de baja" viven en el detalle. */
.cmpoff { margin-top: var(--sp-3); border-radius: var(--r-group); box-shadow: inset 0 0 0 1.5px var(--outline); }
.cmpoff__sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 var(--sp-5); cursor: pointer; }
.cmpoff__ic { width: 18px; height: 18px; flex-shrink: 0; color: var(--muted); }
span.cmpoff__ic { display: grid; } /* la de las señas lleva el ícono adentro */
span.cmpoff__ic svg { width: 100%; height: 100%; }
.cmpoff__ttl { flex: 1; min-width: 0; font-size: var(--t-body-m); }
.cmpoff__ttl > span { color: var(--muted); }
.cmpoff[open] .cmpstep__chev { transform: rotate(180deg); }
.cmpoff__body { padding: 0 var(--sp-5) 8px; }
.cmpoff__hint { margin: 0 0 4px; font-size: var(--t-body-s); color: var(--muted); line-height: 1.4; }
.cmp-help { text-align: center; margin-top: var(--sp-2); }
.cpage__empty { color: var(--muted); font-size: var(--t-body-m); padding: 8px 0; }
/* Sheet "Pagar tarjeta": listas de lo que se va a confirmar/crear + selector de
   cuenta. Las filas son sólo lectura (el sheet ES la confirmación). */
.cpay__sec { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; }
.cpay__sec--muted { color: var(--muted); }
.cpay__row { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--outline); }
.cpay__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.cpay__txt b { font-size: var(--t-body-m); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpay__txt span { font-size: var(--t-label); color: var(--muted); }
.cpay__amt { font-size: var(--t-body-m); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------------- Vista: Tarjetas ---------------- */

/* Gráfico de barras "próximos 6 meses" (Tarjetas): apilado por tarjeta,
   una barra por mes, seleccionable. */
.tarchart { display: flex; align-items: stretch; gap: 8px; height: 150px; margin: 10px 0 14px; }
.tarbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: none; background: transparent; cursor: pointer; padding: 4px 2px 6px; border-radius: var(--r-s);
  transition: background var(--dur-s) var(--ease-effect); }
.tarbar:hover { background: var(--card-deep); }
.tarbar--sel { background: var(--card-deep); }
.tarbar__amt { font-size: var(--t-label-s); color: var(--muted); height: 12px; line-height: 12px; }
.tarbar__col { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column-reverse;
  gap: 2px; justify-content: flex-start; }
.tarbar__seg { display: block; width: 100%; border-radius: 4px; min-height: 3px; }
.tarbar__lbl { font-size: var(--t-label-s); font-weight: 600; color: var(--muted); }
.tarbar--sel .tarbar__lbl { color: var(--accent-ink); }
.tarmes__hint { font-size: var(--t-label); color: var(--muted); }
.tarmes { display: flex; flex-direction: column; gap: 12px; }
/* Cabecera = la tarjeta en sí (gradiente del color registrado); abre su detalle. */
.tarmes__tile { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  width: 100%; border: none; border-radius: var(--r-m); padding: 12px 16px;
  /* --tile = fillOf() del color de la tarjeta; el arranque del degradé se aleja de --on-tone
     (más oscuro en claro, más claro en oscuro), así el texto nunca pierde contraste. */
  background: linear-gradient(135deg, color-mix(in oklch, var(--tile) 72%, var(--text)), var(--tile)); color: var(--on-tone); text-align: left; margin-bottom: 6px; }
button.tarmes__tile { cursor: pointer; font: inherit; }
button.tarmes__tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tarmes__chev { margin-left: 4px; font-size: 1.6rem; line-height: 1; opacity: .9; flex-shrink: 0; }
/* Ficha de la tarjeta (openCardFicha): la tarjeta en grande, sigue lo que se edita. */
/* Margen arriba: el fade de .modal__head::after cae sobre el panel y no sobre la tarjeta. */
.cardfic { height: 150px; border-radius: var(--r-l); padding: 20px; margin: var(--sp-2) 0 var(--sp-4);
  display: flex; flex-direction: column; justify-content: space-between; color: var(--on-tone); /* como .tarmes__tile */
  background: linear-gradient(135deg, color-mix(in oklch, var(--tile) 72%, var(--text)), var(--tile)); }
.cardfic__name { font-size: var(--t-title-l); font-weight: 800; letter-spacing: var(--tracking-tight); }
.cardfic__num { font-size: var(--t-body-m); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.cardfic__view { display: flex; flex-direction: column; gap: 8px; }
.cardfic__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px; }
.cardfic__sum b { font-size: var(--t-title-l); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; color: var(--text); }
.cardfic__rows { display: flex; flex-direction: column; }
.cardfic__edit { margin-left: auto; }
.cardfic__edit + .modal__x { margin-left: 0; }
/* Hoja de una tarjeta (cardFormHtml): la de una cuenta (.accf) con banco y últimos 4 lado a lado. */
.cardf .cardfic { margin-bottom: var(--sp-2); }
.cardf__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 8.5rem); gap: var(--sp-2); }
/* "Sin consumos": las tarjetas del registro sin nada en el mes, compactas. */
.tarmes .tarmes__tile, .tarmes__idle .tarmes__tile { margin-bottom: 0; }
.tarmes__idle { display: flex; flex-direction: column; gap: 8px; }
.tarmes__idlelbl { padding: 4px 4px 0; }
.tarmes__tile--idle { padding: 10px 16px; }
.tarmes__tileleft { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarmes__tilename { font-size: var(--t-body-m); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarmes__tilenum { font-size: var(--t-label-s); opacity: .9; letter-spacing: .06em; }
.tarmes__tileright { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.tarmes__tiletot { font-size: var(--t-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.tarmes__tilesub { font-size: var(--t-label-s); opacity: .9; }
.mrow--proj { cursor: pointer; } /* es un botón: abre el detalle del compromiso */
.mrow--proj .mrow__title, .mrow--proj .mrow__amt { color: var(--muted); } /* proyección: apagado por rol, sigue en AA */
.tarmes__tot { font-size: var(--t-body-m); font-weight: 600; font-variant-numeric: tabular-nums; }
.tarmes__empty { margin: 0; font-size: var(--t-body-s); color: var(--faint); }
.split { padding: 20px 22px; }
.split__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.split__tot { font-size: var(--t-body-m); font-weight: 500; }
.splitbar { display: flex; height: 12px; border-radius: var(--r-full); overflow: hidden; background: var(--chip-bg); margin-top: 10px; }
.splitbar span { height: 100%; }
.split__legend { display: flex; gap: 20px; margin-top: 12px; font-size: var(--t-body-s); color: var(--muted); flex-wrap: wrap; }
.split__legend span { display: flex; align-items: center; gap: 7px; }

/* ---------------- Vista: Compartidos ---------------- */
/* Dos niveles: la lista de amigos con su saldo y el estado de cuenta de uno
   (cada gasto y cada pago con cuánto movió el saldo). Las filas del estado de
   cuenta reusan .mrow de Movimientos. */
.shrwrap { display: flex; flex-direction: column; gap: 14px; }
.shrhero { padding: 24px; }
.shrhero__who { display: flex; align-items: center; gap: 14px; }
.shrhero__who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.shrhero__ava { width: 56px; height: 56px; font-size: var(--t-title-l); }
.shrhero__num { font-size: clamp(1.875rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: var(--tracking-tight);
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.shrhero__sub { font-size: var(--t-body-m); color: var(--muted); margin-top: 6px; }
.shrhero__sub b { font-weight: 600; }
.shrhero__acts { display: flex; gap: 10px; margin-top: 16px; max-width: 440px; }
.shrhero__btn { flex: 1; height: 48px; border-radius: var(--r-full); border: none; cursor: pointer;
  font-family: inherit; font-size: var(--t-body); font-weight: 600;
  background: var(--card-deep); color: var(--text); }
.shrhero__btn--pri { background: var(--accent); color: var(--on-accent); font-weight: 700; }
/* Lista de amigos: arriba, en chico, el neto y lo compartido del mes; abajo un tile
   por amigo (su cara, el saldo en grande, lo último que pasó) y el tile punteado. */
.shrsum { padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
.shrsum__net { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shrsum__net b { font-size: var(--t-title); font-weight: 800; }
.shrsum__sub { font-size: var(--t-body-s); color: var(--muted); }
.shrsum__sub b { font-weight: 600; }
.shrfrd__ic { width: 44px; height: 44px; clip-path: url(#shape-clover); display: grid;
  place-items: center; flex-shrink: 0; font-size: var(--t-body-l); font-weight: 800; }
.shrtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.shrtile { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: none; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer; min-width: 0; border-radius: var(--r-group); }
.shrtile:hover { background: color-mix(in srgb, var(--card-deep) 50%, var(--card)); }
.shrtile__top { display: flex; justify-content: space-between; align-items: center; }
.shrtile__chev { width: 18px; height: 18px; color: var(--muted); }
.shrtile__mid { display: flex; flex-direction: column; min-width: 0; }
.shrtile__amt { font-size: var(--t-title-l); font-weight: 800; letter-spacing: var(--tracking-tight); white-space: nowrap; }
.shrtile__amt--cero { color: var(--muted); font-weight: 700; }
.shrtile__k, .shrtile__sub { font-size: var(--t-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shrtile--add { border: 2px dashed var(--outline); background: transparent; align-items: center; justify-content: center;
  color: var(--muted); font-weight: 600; font-size: var(--t-body-s); min-height: 132px; }
.shrtile--add:hover { color: var(--text); background: transparent; }
.shrled__chev { color: var(--faint); font-size: var(--t-title-l); line-height: 1; }
/* Estado de cuenta */
.shrback { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: none;
  background: none; cursor: pointer; font-family: inherit; color: var(--text); padding: 4px 6px 4px 0;
  font-size: var(--t-headline); font-weight: 700; min-height: 44px; }
.shrback span { color: var(--muted); font-size: var(--t-display-s); line-height: 1; }
.shrled__sec { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 6px 0; }
.shrled__old { display: flex; flex-direction: column; gap: 10px; }
.shrled__old > summary { list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; color: var(--muted); font-size: var(--t-body-m); cursor: pointer; border-radius: var(--r-group); }
.shrled__old > summary::-webkit-details-marker { display: none; }
.shrled__old[open] .shrled__chev { transform: rotate(90deg); }
/* Fila de pago para saldar: igual que un movimiento, con el ícono en lima. */
.shrpay__ic { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); }

/* ---------------- Vista: Cuentas ---------------- */
.bkwrap { display: flex; flex-direction: column; gap: var(--sp-3); }
/* La pieza que resume: el total, la barra partida por cuenta y cuentas vs. ahorrado. */
.acchero { padding: var(--sp-6) var(--sp-5); }
.acchero__lbl { display: flex; align-items: center; justify-content: space-between; }
.acchero__num { font-size: var(--t-display); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; margin-top: var(--sp-1); }
.acchero__sub { font-size: var(--t-body-s); color: var(--muted); margin-top: 2px; }
.acchero__grp { margin-top: var(--sp-5); }
.acchero__grphd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-2); font-size: var(--t-body); font-weight: 600; }
.acchero__grpamt { font-weight: 700; text-align: right; }
.acchero__bar { display: flex; gap: 3px; height: 10px; }
.acchero__bar > span { min-width: 6px; border-radius: var(--r-full); }
.acchero__keys { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-2); font-size: var(--t-label-s); color: var(--muted); }
.acchero__keys > span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 5px; }
/* Título de grupo ("Cuentas", "Cajitas de ahorro"), como los de Ajustes. */
.accsub { padding: var(--sp-2) var(--sp-1) 0; font-size: var(--t-body-m); font-weight: 600; color: var(--accent-ink); }
/* Una cuenta: fila de la lista agrupada (.setlist) con ícono de 40, saldo y ›. */
.setlist__row.accrow { gap: 14px; padding: 14px var(--sp-4); }
.accrow__ic { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--card-deep); display: grid; place-items: center; flex-shrink: 0; }
.accrow__ic svg { width: 22px; height: 22px; }
.accrow__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.accrow__t b { font-size: var(--t-body-l); font-weight: 600; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* el nombre entero: baja de renglón antes que cortarse */
.accrow__t small, .accrow__r small { font-size: var(--t-body-s); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accrow__r { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.accrow__amt { font-size: var(--t-body-l); font-weight: 700; white-space: nowrap; }
.accrow__chev { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.acctrack { display: block; height: 6px; border-radius: var(--r-full); background: var(--card-deep); overflow: hidden; margin: 4px 0 2px; }
.acctrack > span { display: block; height: 100%; border-radius: var(--r-full); }
.acctrack--lg { height: 8px; margin-top: var(--sp-3); }
/* Ficha de una cuenta (hoja del modal). */
.accfic { display: flex; flex-direction: column; gap: var(--sp-2); }
.accfic__who { display: flex; align-items: center; gap: 14px; }
.accfic__ic { width: 48px; height: 48px; }
.accfic__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.accfic__name b { font-size: var(--t-title-l); font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.accfic__name small { font-size: var(--t-body-s); color: var(--muted); }
.accfic__edit { width: 44px; height: 44px; border-radius: var(--r-full); border: none; background: var(--card-deep); color: var(--text);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.accfic__edit svg { width: 18px; height: 18px; }
.accfic__saldo { display: flex; flex-direction: column; margin-top: var(--sp-3); }
.accfic__saldo b { font-size: var(--t-display); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; }
.accfic__saldo small { font-size: var(--t-body-s); color: var(--muted); margin-top: 2px; }
.accfic__acts { display: flex; gap: 10px; margin-top: var(--sp-2); }
.accfic__acts .setcta { flex: 1; width: auto; margin-top: 0; }
.accfic__acts .set__btn--lg { min-width: 0; }
.accfic__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: var(--sp-4); }
.accfic__head .accsub { padding: 0; }
.accfic__sum { font-size: var(--t-body-s); color: var(--muted); text-align: right; }
.accfic__sum b { color: var(--text); font-weight: 700; }
.accfic__day { font-size: var(--t-body-s); font-weight: 600; color: var(--muted); padding: var(--sp-3) 0 0; }
.accfic__rows { display: flex; flex-direction: column; }
/* El ícono teñido de una cuenta en los sheets y pickers (ajustar saldo, Sale de…). */
.bkcard__ic { width: 38px; height: 38px; border-radius: var(--r-s); display: grid; place-items: center; flex-shrink: 0; }
.bkcard__ic svg { width: 19px; height: 19px; }
/* Tile punteado "Nuevo chanchito" (cierra la grilla). */
.bknew { border: 1.5px dashed var(--gray-seg); border-radius: var(--r-card); padding: 18px;
  background: none; cursor: pointer; font-family: inherit; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 168px; transition: border-color var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.bknew:hover { border-color: var(--faint); color: var(--muted); }
.bknew__ic { width: 38px; height: 38px; border-radius: var(--r-s); border: 1.5px dashed currentColor;
  display: grid; place-items: center; }
.bknew__ic svg { width: 17px; height: 17px; }
.bknew > span:last-child { font-size: var(--t-body-m); font-weight: 600; }
/* Variante fila (vista Cuentas): debajo del hero, a lo ancho, con sublínea de ejemplos. */
.bknew--row { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 0; padding: 14px 18px; text-align: left; }
.bknew__txt { display: flex; flex-direction: column; min-width: 0; }
.bknew--row .bknew__txt > span { font-size: var(--t-body-m); font-weight: 600; color: var(--text); }
.bknew__txt small { font-size: var(--t-body-s); color: var(--faint); }
/* Sheet depositar/retirar */
.bkm__who { display: flex; align-items: center; gap: 12px; }
.bkm__who .bkcard__ic { width: 44px; height: 44px; border-radius: var(--r-s); }
.bkm__whotext { min-width: 0; flex: 1; display: flex; flex-direction: column; text-align: left; }
.bkm__whotext b { font-size: var(--t-body); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bkm__whotext > span { font-size: var(--t-body-s); color: var(--faint); margin-top: 1px; }
.bkm__quick { justify-content: center; }
.bkm__note { margin: 2px 0 0; font-size: var(--t-label); color: var(--faint); text-align: center; line-height: 1.4; }
/* Picker de filas (openRowPicker, bkpickRowHtml): una fila por opción y un radio.
   La elegida va tonal con aro accent-ink, nunca en lima lleno (el lima es de las acciones). */
.bkpick { display: flex; flex-direction: column; margin-top: 4px; }
.bkpick__row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; width: 100%;
  border: none; border-bottom: 1px solid var(--outline); background: none; cursor: pointer;
  font-family: inherit; color: inherit; text-align: left;
  transition: background var(--dur-s) var(--ease-effect), box-shadow var(--dur-s) var(--ease-effect); }
.bkpick__row:last-child { border-bottom: none; }
.bkpick__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--faint);
  flex-shrink: 0; display: grid; place-items: center; }
.bkpick__row--sel { border-bottom-color: transparent; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 2px var(--accent-ink); }
.bkpick__row--sel .bkpick__radio { border-color: var(--accent-ink); }
.bkpick__row--sel .bkpick__radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-ink); }
/* Fila "El resumen · Cobrado | Aviso" del alta (sólo con tarjeta): una línea,
   label a la izquierda y segmentado a la derecha, para no sumar scroll. */
.cobro { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.cobro[hidden] { display: none; }
.cobro__lbl { align-self: flex-start; text-align: left; font-size: var(--t-body-s); font-weight: 600; color: var(--muted); white-space: nowrap; }
.bkpick__row--danger { color: var(--neg-ink); }
/* "Nueva cuenta o cajita" / "Nueva tarjeta" al pie de las puntas del alta (mvNewRows):
   como las filas punteadas de crear (.bknew), sin radio. */
.bkpick__row--new b { color: var(--accent-ink); font-weight: 600; }
.bkpick__row--new .bkcard__ic { border: 1.5px dashed var(--accent-ink); color: var(--accent-ink); background: transparent; }
/* Detalle: acciones y hero de chanchito */
.mdet__act--bucket { background: var(--purple-soft); color: var(--purple); }
.mdet__act--bucket:hover { background: var(--purple-soft); filter: brightness(1.1); }
.mdet__hero--bucket .mdet__amt { color: var(--text); }

/* ---------------- Estado vacío / notas ---------------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; text-align: center; color: var(--muted); }
.empty__ic { width: 56px; height: 56px; clip-path: url(#shape-cookie); background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-title-l); }
.empty__ic--warn { background: var(--neg); color: var(--on-neg); }
.empty p { margin: 0; max-width: 34ch; line-height: 1.45; }
.empty__title { color: var(--text); font-size: var(--t-title); font-weight: 700; margin: 0; }
.empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.empty__btn { border: none; border-radius: var(--r-full); padding: var(--sp-3) var(--sp-5); font: inherit; font-weight: 600; font-size: var(--t-body);
  cursor: pointer; background: var(--accent); color: var(--on-accent); }
.empty__btn--ghost { background: var(--card-deep); color: var(--text); }

/* Barra "sin conexión" (snapshot offline / red caída). En flujo normal, arriba
   del shell: empuja el contenido en vez de taparlo. */
.offbar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
  background: var(--neg); color: var(--on-neg); font-size: var(--t-body-m); font-weight: 500; line-height: 1.3; text-align: center; }
.offbar[hidden] { display: none; }
.offbar__btn { flex: none; border: 1px solid color-mix(in srgb, var(--on-neg) 60%, transparent); background: transparent; color: var(--on-neg);
  border-radius: var(--r-full); padding: 4px 12px; font: inherit; font-size: var(--t-body-s); font-weight: 600; cursor: pointer; }
.note { font-size: var(--t-body-m); color: var(--muted); text-align: center; margin: 4px 0; }
/* Error de validación: se tiene que VER (coral, no gris). */
.note--err { color: var(--neg); font-weight: 600; }

/* ============================================================================
   Detalle (bottom sheet)
   ========================================================================== */
.move-detail { position: fixed; inset: 0; z-index: 70; }
.move-detail[hidden] { display: none; }
.move-detail__scrim { position: absolute; inset: 0; background: var(--scrim); animation: popfade var(--dur-m) var(--ease-effect); }
.mdet { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 100%; max-width: 560px;
  background: var(--bg); border: none; border-radius: var(--r-l) var(--r-l) 0 0;
  padding: 10px clamp(16px, 4vw, 24px) calc(28px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; animation: popup var(--dur-l) var(--spring);
  transition: transform var(--dur-m) var(--spring); touch-action: pan-y; }
.mdet__grab { position: sticky; top: 0; z-index: 3; align-self: center; width: 40px; height: 5px;
  border: none; padding: 0; border-radius: var(--r-full); background: var(--faint); opacity: .5;
  cursor: grab; margin: 2px 0 8px; flex-shrink: 0; } /* sin esto, con un detalle largo (un compartido) el flex la aplastaba a 0 */
.mdet__grab::after { content: ''; position: absolute; inset: -16px -40px; } /* 44px de toque para la rayita */
.mdet__grab:hover, .mdet__grab:active { opacity: .8; }
/* Cabecera del detalle: sólo en el drawer de desktop (en mobile manda la raya). */
.mdet__head { display: none; }
/* ‹ › : recorrer la lista de donde se abrió el detalle. Van en el pie, a los costados de
   las acciones (mdetActionsHtml); ese pie queda pegado abajo para no cortarse ni
   alejarse del dedo al pasar de un movimiento a otro. El `bottom` negativo iguala el
   padding de abajo del sheet: sticky mide contra la caja SIN ese padding, y con
   `bottom: 0` el pie subía y tapaba el final de la lista aunque todo entrara. */
.mdet__actions--nav { position: sticky; bottom: calc(-28px - env(safe-area-inset-bottom)); z-index: 2; background: var(--bg);
  margin-bottom: calc(-28px - env(safe-area-inset-bottom));
  padding: var(--sp-2) 0 calc(28px + env(safe-area-inset-bottom)); align-items: center; }
.mdet__actions--nav .mdet__act { padding-inline: 0; }
.mdet__actions--nav .mdet__actlbl { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mdet__actions--nav .mdet__act svg { width: 20px; height: 20px; }
.mdet__pgbtn { flex: none; width: 48px; height: 48px; border: none; border-radius: var(--r-full); background: transparent; color: var(--text);
  display: grid; place-items: center; cursor: pointer; transition: border-radius var(--dur-s) var(--spring), opacity var(--dur-s) var(--ease-effect), background var(--dur-s) var(--ease-effect); }
.mdet__pgbtn svg { width: 20px; height: 20px; }
.mdet__pgbtn:hover:not(:disabled) { background: var(--card); }
.mdet__pgbtn:active:not(:disabled) { border-radius: var(--r-s); background: var(--card); }
.mdet__pgbtn:disabled { opacity: .3; cursor: default; }
.mdet--step-n > :not(.mdet__grab) { animation: mdetstepn var(--dur-m) var(--spring-soft); }
.mdet--step-p > :not(.mdet__grab) { animation: mdetstepp var(--dur-m) var(--spring-soft); }
/* Gemelo del carrusel: el vecino pintado al lado mientras se arrastra el detalle. */
.mdet--peek { animation: none; pointer-events: none; }
@keyframes mdetstepn { from { opacity: 0; translate: 24px 0; } }
@keyframes mdetstepp { from { opacity: 0; translate: -24px 0; } }
.mdet__hero { border-radius: var(--r-card); background: var(--card); border: none;
  padding: 18px 20px 16px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mdet__herotop { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; }
.mdet__heromain { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mdet__amtrow { display: flex; align-items: baseline; gap: 6px; }
.mdet__arrow { font-weight: 700; line-height: 1; font-size: var(--t-title-l); }
.mdet__hero--out .mdet__arrow { color: var(--neg-ink); }
.mdet__hero--in .mdet__arrow { color: var(--accent-ink); }
.mdet__badge { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-m); flex-shrink: 0; }
.mdet__badge .gic { width: 24px; height: 24px; }
.mdet__hero--out .mdet__badge { background: var(--neg-soft); color: var(--neg-ink); }
.mdet__hero--in .mdet__badge { background: var(--accent-soft); color: var(--accent-ink); }
.mdet__type { margin-top: 14px; margin-bottom: 12px; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-label); font-weight: 600;
  padding: 5px 12px; border-radius: var(--r-chip); }
.mdet__hero--out .mdet__type { background: var(--neg-soft); color: var(--neg-ink); }
.mdet__hero--in .mdet__type { background: var(--accent-soft); color: var(--accent-ink); }
.mdet__amt { font-size: clamp(var(--t-headline-l), 6vw, var(--t-display-s)); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1; }
.mdet__hero--out .mdet__amt { color: var(--neg-ink); }
.mdet__hero--in .mdet__amt { color: var(--accent-ink); }
.mdet__orig, .mdet__shareof { font-size: var(--t-body-m); color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
.mdet__heromain .mdet__merchant { font-size: var(--t-body-l); font-weight: 600; margin-top: 7px; }
.mdet__merchant { font-size: var(--t-title-s); font-weight: 600; margin-top: 14px; }
.mdet__submerchant { font-size: var(--t-body-m); color: var(--muted); margin-top: 3px; }
/* chips de metadata del hero del detalle */
.mdet__chips { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; margin-top: 14px; width: 100%; }
.mdet__chips .chip { padding: 5px 11px; }
.mdet__chips .gic { width: 13px; height: 13px; }
.mdet__hero--card .mdet__badge { color: var(--on-tone); }

.mdet__actions { display: flex; gap: 10px; }
.mdet__act { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; background: var(--card); color: var(--text);
  border-radius: var(--r-full); padding: 12px 14px; font-weight: 600; font-size: var(--t-body-m);
  cursor: pointer; transition: background var(--dur-s) var(--ease-effect), filter var(--dur-s) var(--ease-effect); }
.mdet__act svg { width: 18px; height: 18px; stroke-width: 1.8; }
.mdet__act:hover { background: var(--card-deep); }
.mdet__act--danger { color: var(--neg-ink); background: var(--neg-soft); }
.mdet__act--danger:hover { background: var(--neg-soft); filter: brightness(1.1); }
.mdet__act--pay { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.mdet__act--pay:hover { filter: brightness(1.06); }
.mdet__act:disabled { opacity: .5; cursor: default; }

.mdet__list { margin: 0; background: var(--card); border: none; border-radius: var(--r-card); padding: 6px 20px; }
.mdet__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--outline); }
.mdet__row:last-child { border-bottom: none; }
.mdet__row dt { flex-shrink: 0; color: var(--muted); font-weight: 500; font-size: var(--t-body-m); }
.mdet__row dd { margin: 0; text-align: right; font-size: var(--t-body-m); font-weight: 500; word-break: break-word; }
/* La cuenta se asigna desde su fila (antes, un botón aparte abajo de todo). */
.mdet__ddbtn { border: none; background: none; padding: 4px 0; font: inherit; font-weight: 600; color: var(--accent-ink); cursor: pointer; text-align: right; }
/* Una línea + ⓘ (helpLineHtml): lo que importa a la vista, la explicación detrás del ⓘ. */
.helpline { display: flex; align-items: center; gap: 2px; margin: 4px 0 16px; color: var(--muted); font-size: var(--t-body-m); line-height: 1.45; }
.helpline > span { min-width: 0; }
.helpline .helpbtn { margin: -8px 0; color: var(--muted); }
.helpline.mdet__help { margin: 0; padding: 0 var(--sp-2); }
/* Lo irreversible de una ficha (dangerFootHtml): solo al pie, texto coral tras un divisor. */
.dangerfoot { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--outline); }
.dangerfoot__btn { display: block; width: 100%; min-height: 48px; border: none; border-radius: var(--r-full); background: none;
  color: var(--neg-ink); font: inherit; font-size: var(--t-body-m); font-weight: 600; cursor: pointer;
  transition: background var(--dur-s) var(--ease-effect); }
.dangerfoot__btn:hover { background: color-mix(in srgb, var(--neg) 10%, transparent); }
.dangerfoot__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mdet__sharenote { margin: 0; padding: 12px 14px; border-radius: var(--r-m);
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; /* el texto y el ⓘ (40px de toque) en la misma línea */
  background: var(--accent-soft); color: var(--accent-ink); font-size: var(--t-body-m); font-weight: 500; line-height: 1.45; }

/* "vs. el pago anterior": el % de un fijo contra su instancia previa. Misma
   caja que la barra de cuotas (su vecina debajo del hero), en una sola linea. */
.mdet__serietrend { background: var(--card); border: none; border-radius: var(--r-card);
  padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
.mdet__serietrend-lbl { font-size: var(--t-body-m); color: var(--muted); font-weight: 500; }

/* Barra de cuotas del detalle */
.cuota { background: var(--card); border: none; border-radius: var(--r-card); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px; }
.cuota__head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--t-body-s); font-weight: 600; }
.cuota__head span:first-child { color: var(--muted); font-weight: 500; font-size: var(--t-body-m); }
.cuota__left { color: var(--accent-ink); }
.cuota__bar { position: relative; height: 12px; border-radius: var(--r-full); overflow: hidden; background: var(--chip-bg); }
.cuota__fill { position: absolute; top: 0; left: 0; bottom: 0; min-width: 12px; border-radius: var(--r-full);
  background: var(--accent); box-shadow: 4px 0 0 var(--card); transition: width var(--dur-l) var(--spring-soft); } /* hueco de 4px entre relleno y pista */
.cuota__bar::after { content: ''; position: absolute; right: 4px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); } /* punto de tope */
.cuota__axis { display: flex; justify-content: space-between;
  font-size: var(--t-label-s); color: var(--faint); margin-top: 2px; }
/* Seña (senaBlockHtml): la barra de lo pagado del total y cada pago, con tilde; el
   resto que falta con un aro, como un paso de Compromisos. */
.sena__pagos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sena__pago { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.sena__dot { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--muted); display: grid; place-items: center; }
.sena__dot--ok { border: none; background: var(--accent); color: var(--on-accent); }
.sena__dot svg { width: 14px; height: 14px; stroke-width: 2.6; }
.sena__pt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sena__pt b { font-size: var(--t-body-m); font-weight: 600; }
.sena__pt small { font-size: var(--t-body-s); color: var(--muted); }
.sena__pm { font-weight: 700; font-size: var(--t-body-m); }
.sena__pago--resto .sena__pm { color: var(--muted); }
.mdet__senaask { margin: 0; text-align: center; }

/* ============================================================================
   Modal (alta / import / API keys / saldar)
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal__scrim { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); }
.modal__panel { position: relative; background: var(--surface-high); border: none; border-radius: var(--r-l);
  width: 100%; max-width: 460px; max-height: 86vh; overflow-y: auto; padding: 0 22px 22px;
  box-shadow: var(--e3); }
/* Cabecera fija: el scroll del panel no se lleva el título ni la ✕ (espejo del
   patrón sticky de .mvf__foot, con fade hacia el contenido). El panel no tiene
   padding-top: sticky no puede subir por encima del padding del scroller, así
   que la cabecera arranca en 0 y trae su propio aire (18px). */
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 4; margin: 0 -22px 4px; padding: 18px 22px 12px;
  background: var(--surface-high); }
/* Fade suave DEBAJO de la cabecera (fuera de su caja) para que el contenido no
   aparezca por detrás del título al scrollear. */
.modal__head::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  background: linear-gradient(var(--surface-high), transparent); pointer-events: none; }
.modal__head h2 { margin: 0; font-size: var(--t-title); font-weight: 700; letter-spacing: -.01em; }
.modal__x { border: none; background: var(--card-deep); width: 40px; height: 40px; border-radius: 50%;
  cursor: pointer; font-size: var(--t-body); color: var(--muted); flex-shrink: 0; }
.modal__x:hover { color: var(--text); }
/* La ✕ es un dibujo y no el carácter: el glifo cae según la fuente (en Figtree
   quedaba ~1px arriba del centro, y en iOS sale de otra fuente). El texto queda
   en 0 para que el botón siga diciendo lo mismo sin mostrarlo. */
.modal__x { position: relative; padding: 0; font-size: 0; }
.modal__x::before { content: ''; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--x-mask) center / contain no-repeat; mask: var(--x-mask) center / contain no-repeat;
  --x-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2 2 12' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
@media (forced-colors: active) { .modal__x::before { background: ButtonText; } }
.modal__lead { margin: 4px 0 16px; color: var(--muted); font-size: var(--t-body-m); }

.apibase { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--card-deep); border: none; border-radius: var(--r-m); padding: 10px 12px; }
.apibase__lbl { font-size: var(--t-label); font-weight: 500; color: var(--faint); }
/* keys/links: strings técnicos → la única monoespaciada que queda */
.apibase code, .freshkey code { font-family: var(--code); font-size: var(--t-body-s); word-break: break-all; flex: 1; min-width: 120px; }
.copybtn { border: none; background: var(--card); border-radius: var(--r-full);
  padding: 6px 12px; font-weight: 600; font-size: var(--t-body-s); cursor: pointer; flex-shrink: 0; }
.copybtn:hover { filter: brightness(1.08); }
.freshkey { margin: 14px 0; background: var(--accent-soft); border-radius: var(--r-m); padding: 12px 14px; }
.freshkey p { margin: 0 0 8px; font-weight: 600; font-size: var(--t-body-m); color: var(--accent-ink); }
.freshkey__row { display: flex; align-items: center; gap: 8px; }

/* Formulario de alta / edición */
.mvf { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.mvf__hero { grid-area: hero; }
.mvf__fchips { grid-area: chips; }
.mvf__dupnote { margin: 4px 0 0; padding: 10px 14px; border-radius: var(--r-m); background: var(--card-deep); color: var(--muted); font-size: var(--t-body-s); line-height: 1.35; }
.mvf__destnote { margin: 2px 0 0; display: flex; align-items: center; gap: 8px;
  background: var(--purple-soft); color: var(--purple); border-radius: var(--r-m); padding: 10px 14px;
  font-size: var(--t-body-s); font-weight: 500; line-height: 1.35; }
.mvf__destnote[hidden] { display: none; }
.mvf__destnote svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Campo no aplicable (Tarjeta sin Crédito, Cuenta sin cuentas creadas): se grisa. */
.mvf__f:has(> .filt-sel:disabled) { opacity: .45; }
/* Monto protagonista: input transparente centrado + moneda como pill debajo. */
.mvf__hero { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0 2px; }
.mvf__hero input { width: 100%; border: none; background: transparent; text-align: center;
  font-size: var(--t-display-l); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.1; color: var(--text); padding: 0; }
.mvf__hero input:focus { outline: none; }
.mvf__hero input::placeholder { color: var(--faint); }
/* Resultado en vivo de la cuenta ("= 1.500"). */
.mvf__calc { margin: 0; font-size: var(--t-body-m); font-weight: 600; color: var(--accent-ink);
  font-variant-numeric: tabular-nums; }
.mvf__calc[hidden] { display: none; }
/* Selector custom de moneda: pill con chevron SVG + menú flotante propio. */
.mvf__curwrap { position: relative; display: inline-flex; }
.mvf__curbtn { display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer;
  background: var(--card-deep); color: var(--muted); border-radius: var(--r-full);
  padding: 6px 11px 6px 14px; font-size: var(--t-body-m); font-weight: 600; }
.mvf__curbtn:hover { color: var(--text); }
.mvf__curbtn[aria-expanded="true"] { color: var(--text); }
.mvf__curchev { width: 15px; height: 15px; flex-shrink: 0; }
.mvf__curmenu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; flex-direction: column; gap: 2px; min-width: 86px;
  background: var(--card-deep); border-radius: var(--r-m); padding: 6px;
  box-shadow: var(--e2); }
.mvf__curmenu[hidden] { display: none; }
.mvf__curopt { border: none; background: transparent; cursor: pointer; border-radius: var(--r-s);
  padding: 8px 12px; font-size: var(--t-body-m); font-weight: 600; color: var(--muted); text-align: center; }
.mvf__curopt:hover { color: var(--text); background: var(--card); }
.mvf__curopt.active { background: var(--accent-soft); color: var(--accent-ink); }
.mvf__tipobtn--egreso { background: color-mix(in srgb, var(--neg-ink) 14%, transparent); color: var(--neg-ink); }
.mvf__tipobtn--ingreso { background: var(--accent-soft); color: var(--accent-ink); }
.mvf__cat { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-width: 56px; border: none; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.mvf__catic { width: 46px; height: 46px; border-radius: var(--r-m); background: var(--card-deep);
  color: var(--muted); display: grid; place-items: center;
  transition: background var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.mvf__catic .gic { width: 20px; height: 20px; stroke-width: 1.8; }
.mvf__catlbl { font-size: var(--t-label); color: var(--muted); max-width: 76px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvf__cat.active .mvf__catic { background: var(--accent-soft); color: var(--accent-ink); }
/* Morph de forma al elegir (Expressive): el tile pasa de cuadrado redondeado a círculo, con resorte. */
.mvf__catic { transition: background var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect), border-radius var(--dur-m) var(--spring); }
.mvf__cat.active .mvf__catic { border-radius: var(--r-full); }
.mvf__cat:active .mvf__catic { border-radius: var(--r-xs); }
.mvf__cat.active .mvf__catlbl { color: var(--accent-ink); font-weight: 600; }
/* Popup de todas las categorías (sobre el modal del alta). */
.catpick { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end;
  justify-content: center; opacity: 0; transition: opacity var(--dur-s) var(--ease-effect); }
.catpick--in { opacity: 1; }
.catpick__scrim { position: absolute; inset: 0; background: var(--scrim); }
.catpick__sheet { position: relative; width: min(560px, 100%); max-height: 78vh; overflow-y: auto;
  background: var(--surface-high); border-radius: var(--r-l) var(--r-l) 0 0; padding: 20px;
  box-shadow: var(--e3);
  transform: translateY(100%); transition: transform var(--dur-l) var(--spring); }
.catpick--in .catpick__sheet { transform: translateY(0); }
/* Rayita de toda hoja de abajo (sheetGestures en los pickers, openModal en el
   modal): un botón "Cerrar" que además se arrastra. Sólo en mobile; en la compu
   no hay gesto y cierra la ✕. Misma medida que .mdet__grab y .moresheet__grab. */
.sheet__grab { display: none; }
@media (max-width: 959px) {
  .sheet__grab { display: block; position: relative; width: 40px; height: 5px; flex-shrink: 0; padding: 0; border: none;
    border-radius: var(--r-full); background: var(--faint); opacity: .5; cursor: grab; margin: -8px auto 14px; }
  .sheet__grab::after { content: ''; position: absolute; inset: -16px -40px; } /* 44px de toque */
  .sheet__grab:hover, .sheet__grab:active { opacity: .8; }
  .modal__head > .sheet__grab { position: absolute; top: 8px; left: 50%; margin: 0; transform: translateX(-50%); }
  /* Con rayita y gesto, la ✕ sobra; queda sólo en el alta (con el teclado abierto
     no hay afuera para tocar y arrastrar se mezcla con el scroll del formulario). */
  .catpick__head .modal__x, .modal__head:not(.modal__head--b3) .modal__x { display: none; }
}
.catpick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.catpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 16px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.catpick__grid .mvf__cat { min-width: 0; width: 100%; }
@media (min-width: 640px) { .catpick { align-items: center; }
  .catpick__sheet { border-radius: var(--r-l); max-height: 82vh; } }
/* Sheets del alta mobile (Pago / Cuotas / Compartir) sobre el shell .catpick.
   Van DENTRO de #modal (position absolute): heredan el achique del viewport
   visual que kbAdjustModal le hace al modal cuando se abre el teclado. */
#modal .catpick { position: absolute; }
/* Cabecera sticky del sheet: título + ✕ siempre a la vista, el contenido pasa
   por detrás con fade (espejo del pie). El padding-top del sheet se muda acá
   para que al scrollear no quede banda descubierta arriba. */
.mvsheet .catpick__sheet { padding-top: 0; }
.mvsheet .sheet__grab { margin: 10px auto -10px; position: relative; z-index: 4; }
.mvsheet .catpick__head { position: sticky; top: 0; z-index: 3; margin: 0 -20px 10px;
  padding: 18px 20px 10px;
  background: linear-gradient(to bottom, var(--surface-high) calc(100% - 12px), transparent); }
.mvsheet .catpick__head .lbl { font-size: var(--t-body); font-weight: 700; color: var(--text); }
/* Aire entre el contenido y el pie "Listo" (el hint de cuotas / "No compartir"
   quedaban pegados al botón). */
.mvsheet__body { display: flex; flex-direction: column; gap: 18px; padding-bottom: 12px; }
.mvsheet__sec { display: flex; flex-direction: column; gap: 8px; }
.mvsheet__sec > span { font-size: var(--t-body-s); font-weight: 500; color: var(--muted); }
/* Sección no aplicable (Tarjeta sin Crédito, Cuenta sin cuentas / paga el
   amigo): grisada pero presente — estructura fija, misma regla que el form. */
.mvsheet__sec--off { opacity: .45; pointer-events: none; }
/* "Listo" siempre a la vista: pie sticky con gradiente y el contenido scrollea
   por detrás (mismo patrón que .mvf__foot del form; compensa el padding 20px
   del .catpick__sheet con márgenes negativos). Opaco salvo la franja de arriba;
   la sombra tapa el hueco del padding inferior del sheet (ver .mvf__foot). */
.mvsheet__foot { position: sticky; bottom: 0; z-index: 3; margin: 4px -20px -20px;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--surface-high) calc(100% - 18px), transparent);
  box-shadow: 0 calc(24px + env(safe-area-inset-bottom, 0px)) 0 var(--surface-high); }
/* Sheet "Avisar" del detalle de un compartido ajeno: la opción elegida despliega su campo debajo. */
.nudge__field { margin-top: 10px; }
.nudge__lbl { display: block; font-size: var(--t-label); font-weight: 500; color: var(--muted); }
.nudge__in { margin: 6px 0 0; }
.nudge__err { margin: 8px 0 0; color: var(--neg-ink); font-size: var(--t-body-s); }
.catpick__sheet .mvf__submit:disabled { opacity: .45; cursor: default; }
/* "No compartir" del sheet de Compartir: acción secundaria, link-style. */
.mvsheet__none { align-self: center; border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: var(--t-body-m); font-weight: 600; padding: 4px 8px; font-family: inherit; }
.mvsheet__none:hover { color: var(--text); }
/* En edición, dejar de compartir se presenta como una acción destructiva real:
   área táctil amplia, ícono reconocible y coral semántico en ambos temas. */
.mvsheet__none--danger { align-self: stretch; min-height: 44px; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; padding: 11px 16px; border-radius: var(--r-full);
  color: var(--neg-ink); background: var(--neg-soft); font-size: var(--t-body-m); }
.mvsheet__none--danger svg { width: 18px; height: 18px; flex-shrink: 0; }
.mvsheet__none--danger:hover { color: var(--neg-ink); filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) {
  .catpick, .catpick__sheet { transition: none; }
}
.mvf__tog { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; border-radius: var(--r-full); border: none;
  background: var(--card-deep); color: var(--muted); font-size: var(--t-body-m); font-weight: 600; cursor: pointer;
  transition: background var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.mvf__tog:hover { color: var(--text); }
.mvf__tog.active { background: var(--accent-soft); color: var(--accent-ink); }
.mvf__tog:disabled { opacity: .6; cursor: default; }
.mvf__tog svg { width: 16px; height: 16px; flex-shrink: 0; }
.mvf__toglbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvf__panel[hidden] { display: none; }
/* Colchón para el scrollIntoView al abrir un chip: que el panel asome COMPLETO
   por encima del botón Guardar sticky (alto del foot + un aire). */
.mvf__panel { scroll-margin-bottom: 96px; }
/* Sin flechitas de spinner en los numéricos chicos (cuota, %). */
.mvf input[type="number"]::-webkit-outer-spin-button,
.mvf input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mvf input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.mvf__minilbl { font-size: var(--t-body-s); font-weight: 500; color: var(--muted); }
/* Filas del panel Compartir: amigos · cuánto le toca al otro · quién pagó.
   El reparto tiene atajos (Nada / Mitad / Todo) + el % a mano: "Nada" y "Todo"
   son "me lo pagó" y "pagué por él", que fijan el pagador (syncSharePctPayer). */
.mvf__sharerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mvf__sharerow #mv-friends { flex: 1; min-width: 0; }
/* Reparto: segmentado a todo el ancho (Nada · Mitad · Todo) + el % a mano en su
   propia fila. Como segmentado no se envuelve nunca — con pills, "Todo" se caía
   a una segunda línea en mobile y el input quedaba flotando al costado. */
.mvf__sharesplit { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mvf__splithead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mvf__splitpct { font-size: var(--t-body); font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
/* Barra del reparto (input range): el relleno lima es la parte del AMIGO y crece
   hacia la derecha, así "todo suyo" es el tope del riel — el caso "pagué por X"
   sale de un arrastre al final, sin apuntar fino. --pct lo pinta paintShareBar. */
.mvf__splitbar { -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
  background: none; cursor: pointer; margin: 0; }
.mvf__splitbar::-webkit-slider-runnable-track { height: 26px; margin: 9px 0; border-radius: var(--r-full);
  background: linear-gradient(to right, var(--accent) var(--pct), var(--chip-bg) var(--pct)); }
.mvf__splitbar::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 44px; margin-top: -9px;
  border-radius: 2px; background: var(--text); border: none;
  box-shadow: -6px 0 0 var(--surface-high), 6px 0 0 var(--surface-high); } /* hueco a cada lado */
.mvf__splitbar::-moz-range-track { height: 26px; border-radius: var(--r-full); background: var(--chip-bg); }
.mvf__splitbar::-moz-range-progress { height: 26px; border-radius: var(--r-full); background: var(--accent); }
.mvf__splitbar::-moz-range-thumb { width: 4px; height: 44px; border-radius: 2px;
  background: var(--text); border: none; box-shadow: -6px 0 0 var(--surface-high), 6px 0 0 var(--surface-high); }
.mvf__splitbar:focus-visible { outline: none; }
.mvf__splitbar:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
.mvf__splitbar:focus-visible::-moz-range-thumb { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Riel + puntos cada 10% + burbuja con la plata. La capa de puntos va encima
   del input pero no recibe toques; la manija (4px) tapa el punto en el que cae,
   y ese se esconde (.at) para que no asome a los costados. */
.mvf__splitwrap { position: relative; }
.mvf__splitticks { position: absolute; inset: 0 2px; pointer-events: none; }
.mvf__splitticks i { position: absolute; top: 50%; left: var(--at); width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--muted); transition: background-color var(--dur-s) var(--ease-effect); }
.mvf__splitticks i.on { background: var(--on-accent); opacity: .55; }
.mvf__splitticks i.at { visibility: hidden; }
/* Burbuja sobre la manija mientras se arrastra: el translate va de 0 a −100%
   con el %, así en los topes queda pegada al borde en vez de salirse. */
.mvf__splitbubble { position: absolute; bottom: calc(100% - 2px); left: var(--pct);
  transform: translate(calc(-1 * var(--pct)), 4px) scale(.9); opacity: 0; pointer-events: none;
  padding: 6px 12px; border-radius: var(--r-full); white-space: nowrap;
  background: var(--text); color: var(--bg); font-size: var(--t-body-s); font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: var(--e2); transition: opacity var(--dur-s) var(--ease-effect), transform var(--dur-s) var(--spring); }
.mvf__splitwrap--drag .mvf__splitbubble { opacity: 1; transform: translate(calc(-1 * var(--pct)), 0) scale(1); }
/* Monto de cada uno: lo que dice la barra, en plata y tipeable. */
.mvf__splitamts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.mvf__splitamt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mvf__splitamtlbl { font-size: var(--t-label); font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvf__splitamtin { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px;
  border-radius: var(--r-s); background: var(--chip-bg); color: var(--muted); font-weight: 600; }
.mvf__splitamtin:focus-within { outline: 3px solid var(--focus); outline-offset: 0; }
.mvf__splitamtin input { flex: 1; min-width: 0; border: none; background: none; padding: 0; outline: none;
  font: inherit; font-size: var(--t-body); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.mvf__splitamtin input:disabled { font-weight: 500; }
.mvf__splitamtin input::placeholder { color: var(--muted); font-weight: 500; }
.mvf__splitamt--friend .mvf__splitamtin input { color: var(--accent-ink); }
/* Marcas de la barra: atajos tocables alineados con 0 / 50 / 100 del riel. */
.mvf__marks { display: flex; justify-content: space-between; }
.mvf__mark { border: none; background: none; padding: 2px 8px; cursor: pointer;
  font-size: var(--t-body-s); font-weight: 600; color: var(--faint); }
.mvf__mark:hover { color: var(--muted); }
.mvf__mark.active { color: var(--accent-ink); }
.mvf__mark:first-child { padding-left: 0; }
.mvf__mark:last-child { padding-right: 0; }
.mvf__fecha { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; padding: 10px 8px; background: var(--card-deep); border: none;
  border-radius: var(--r-m); font-size: var(--t-body-s); font-weight: 600; color: var(--muted); cursor: pointer; }
.mvf__fecha svg { width: 18px; height: 18px; color: var(--faint); flex-shrink: 0; }
.mvf__fecha input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; padding: 0; border: none; }
.mvf__grid { display: grid; grid-template-columns: 1fr 108px; gap: 10px; }
.mvf__grid--half { grid-template-columns: 1fr 1fr; }
.mvf__f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mvf__f[hidden] { visibility: hidden; } /* mantiene la grilla de a pares */
.mvf__f > span { font-size: var(--t-body-s); font-weight: 500; color: var(--muted); }
.mvf__f input { border: none; border-radius: var(--r-m); padding: 12px 14px; min-height: 48px;
  background: var(--card-deep); color: var(--text); width: 100%; }
.mvf__f input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Pie sticky: opaco detrás y debajo del botón (nada se lee ahí) y sólo la
   franja de arriba se desvanece, para que se vea cómo el contenido se esconde
   al scrollear. La sombra sin blur corrida hacia abajo tapa el hueco que queda
   entre el foot pegado (bottom:0 = borde interno del scrollport) y el padding
   inferior del panel, por donde antes se veía el contenido scrolleado. Es una
   sombra y no un ::after absoluto a propósito: el ::after suma al área
   scrolleable (y Chrome le agrega el padding del panel debajo), así que el form
   scrolleaba unos px aunque todo entrara; la sombra no cuenta para el scroll. */
.mvf__foot { position: sticky; bottom: 0; z-index: 3; margin: 4px -22px -22px;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--surface-high) calc(100% - 18px), transparent);
  box-shadow: 0 calc(22px + env(safe-area-inset-bottom, 0px)) 0 var(--surface-high); }
.mvf__submit { width: 100%; border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--r-full);
  padding: 14px 16px; font-weight: 700; font-size: var(--t-body); cursor: pointer; }
.mvf__submit:hover { filter: brightness(1.06); }
.mvf__submit:disabled { opacity: .5; cursor: default; }
/* Estado "guardando": spinner + label, para que se vea que el request está en vuelo. */
.mvf__submit--busy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mvf__submit--busy:disabled { opacity: .75; }
.mvf__spin { width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor;
  animation: mvf-spin .7s linear infinite; }
@keyframes mvf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mvf__spin { animation-duration: 1.6s; } }
.mvf__more { border-top: 1px solid var(--outline); padding-top: 8px; }
.mvf__more > summary { cursor: pointer; font-size: var(--t-body-s); font-weight: 600; color: var(--muted); padding: 4px 0; }
.mvf__more[open] > summary { color: var(--text); }
.mvf__more .mvf__f { margin-top: 10px; }
.mvf__cuota { display: flex; align-items: center; gap: 8px; }
.mvf__cuota input { flex: 1; min-width: 0; border: none; border-radius: var(--r-m); padding: 10px 12px;
  background: var(--card-deep); color: var(--text); }
.mvf__cuota span { color: var(--faint); font-size: var(--t-body-s); }
/* Máximo 2 filas de sugeridos: el alto corta la tercera (filas uniformes de
   ~32px + gap 6, ver padding/font del chip). */
.mvf__chips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px;
  max-height: 74px; overflow: hidden; }
.mvf__chips[hidden] { display: none; }
.mvf__chip { border: none; background: var(--card-deep); color: var(--muted); cursor: pointer;
  border-radius: var(--r-chip); padding: 7px 12px; font-size: var(--t-body-s); font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; }
.mvf__chip .gic { width: 13px; height: 13px; flex-shrink: 0; }
.mvf__chip:hover { color: var(--text); }
/* Mejor match mientras se tipea el título ("Título · $monto"). */
.mvf__chip--best { background: var(--accent-soft); color: var(--accent-ink); }
.mvf__chip--best:hover { color: var(--accent-ink); }
.mvf__recunit { color: var(--faint); font-size: var(--t-label); margin-left: 2px; align-self: center; }
.mvf__req { color: var(--accent-ink); }
.mvf__opt { color: var(--faint); font-weight: 500; font-size: var(--t-label-s); text-transform: none; letter-spacing: 0; }
.mvf__share { border-top: 1px dashed var(--outline); padding-top: 12px; }
.mvf__shareopts { margin-top: 8px; }
.mvf__shareopts .filt-hint { margin-top: 6px; font-weight: 600; color: var(--accent-ink); min-height: 1.1em; }
.mvf select.filt-sel { width: 100%; padding-top: 12px; padding-bottom: 12px; border-radius: var(--r-m);
  font-size: var(--t-body); color: var(--text); background-color: var(--card-deep); }
/* Compartido que cargó el otro: sólo quedan Título, Categoría, Repetir y Serie. Lo que
   no se puede editar NO se grisa, se va: un input deshabilitado igual promete
   que se llena. Esos datos viven arriba en .mvf__ajeno, como texto. Los campos
   siguen en el DOM (el submit los lee — ver applyShareRestricted), sólo que
   ocultos. */
.mvf--ajeno .mvf__hero,
.mvf--ajeno .mvf__fchips,
.mvf--ajeno .mvf__destnote,
.mvf--ajeno .mvf__fnotas,
.mvf--ajeno #mv-tog-cuota,
.mvf--ajeno #mv-panel-cuota { display: none !important; }
/* La Serie SÍ se corrige (va con Categoría y Repetir en FRIEND_PATCHABLE), así
   que el bloque "Serie y notas" queda a la vista — sin las notas, que son del
   creador — y ocupa el ancho entero al quedarse solo en la grilla de a dos. */
.mvf--ajeno .mvf__fserie { grid-column: 1 / -1; }
/* Resumen de sólo lectura: qué gasto se está clasificando y de quién es. */
.mvf__ajeno { padding: 14px 16px; border-radius: var(--r-m); background: var(--card-deep); }
.mvf__ajenottl { margin: 0; font-size: var(--t-title-s); font-weight: 600; color: var(--text); }
.mvf__ajenometa { margin: 4px 0 0; font-size: var(--t-body-m); color: var(--muted); font-variant-numeric: tabular-nums; }
.mvf__ajenowho { margin: 8px 0 0; font-size: var(--t-body-s); line-height: 1.35; color: var(--muted); }
/* Toggle "Cobro" (ya se cobró / todavía no): mismo look que los triggers de
   pickers, pero sin chevron — no abre nada, alterna. Prendido = aviso, en azul
   como su chip. Vive en el sheet "Pago" en mobile y en el form en desktop. */
.mvf__avisobtn { background-image: none !important; padding-right: 14px !important; }
.mvf__avisobtn.active { color: var(--blue); background-color: var(--blue-soft); font-weight: 600; }
.mvf__paybtn { display: flex; align-items: center; gap: 10px; width: 100%; border: none;
  background: var(--card-deep); color: var(--text); border-radius: var(--r-m); padding: 11px 14px;
  font-size: var(--t-body-m); font-weight: 600; font-family: inherit; cursor: pointer; text-align: left; }
.mvf__paybtn > svg:first-child { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.mvf__paytext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvf__paychev { width: 15px; height: 15px; color: var(--faint); flex-shrink: 0; }
/* Wrapper de los chips sugeridos: ancla las flechitas ‹ › del scroll-x mobile
   (inerte en desktop, donde los chips hacen wrap y las flechas no aparecen). */
.mvf__chipswrap { position: relative; }
/* Sugeridos pegados al pie mientras se escribe el título (dockMvChips, mobile):
   su fila de siempre queda vacía y se cierra. */
.mvf--chipsdock .mvf__fchips { display: none; }
.mvf__foot .mvf__chipswrap { margin-bottom: 10px; }
.mvf__foot .mvf__chips { padding-block: 0; }
.mvf__chiparr { display: none; }

/* Alta de tarjetas / keys */
.cardform { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 8px; }
.cardform input { border: none; border-radius: var(--r-m); padding: 10px 12px; min-height: 44px; background: var(--card-deep); color: var(--text); width: 100%; }
.cardform__meta { display: grid; grid-template-columns: 1fr 96px; gap: 8px; }
/* Swatches de color (modal de edición de tarjeta). */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0 4px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--sw); position: relative; transition: transform var(--dur-s) var(--spring); }
.swatch:hover { transform: scale(1.12); }
.swatch--sel::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--on-tone); font-size: var(--t-body); font-weight: 700; }
.keyform { display: flex; gap: 8px; margin: 4px 0 8px; }
.keyform[hidden] { display: none; }
.keyform input { flex: 1; min-width: 0; border: none; border-radius: var(--r-m);
  padding: 10px 12px; background: var(--card-deep); color: var(--text); }
.keyform__btn { border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--r-m);
  padding: 10px 16px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.keyform__btn:disabled { opacity: .5; cursor: default; }
.keys-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.keyrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: none; background: var(--card-deep); border-radius: var(--r-m); padding: 10px 12px; }
/* Apagada (revocada/vencida): se atenúa el TEXTO, no la fila entera, así el botón
   «Borrar» de una invitación vencida no parece deshabilitado. */
.keyrow--off .keyrow__meta { opacity: .55; }
.keyrow__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.keyrow__meta b { font-size: var(--t-body-m); }
.keyrow__meta b.keyrow__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keyrow__meta span { font-size: var(--t-body-s); color: var(--muted); }
.keyrow__rev { border: none; background: var(--neg-soft); color: var(--neg-ink);
  border-radius: var(--r-full); padding: 6px 12px; font-weight: 600; font-size: var(--t-body-s); cursor: pointer; flex-shrink: 0; }
.keyrow__rev:hover { filter: brightness(1.1); }

/* ---------------- Categorías (Ajustes) ---------------- */
.catmg { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.catmg__row { justify-content: flex-start; }
.catmg__row .keyrow__meta { flex: 1; }
.catmg__dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: var(--on-tone); flex-shrink: 0; }
.catmg__dot .gic { width: 18px; height: 18px; }
/* Grid del picker de íconos (modal de categoría). */
.iconpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; padding: 2px 0 4px; }
.iconpick__b { display: grid; place-items: center; height: 44px; border: none; cursor: pointer;
  border-radius: var(--r-s); background: var(--card-deep); color: var(--muted);
  transition: background var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.iconpick__b:hover { color: var(--text); }
.iconpick__b .gic { width: 20px; height: 20px; }
.iconpick__b--sel { background: color-mix(in srgb, var(--accent) 24%, var(--card-deep)); color: var(--accent-ink);
  outline: 2px solid var(--accent-ink); outline-offset: -2px; }

/* ---------------- Import Excel/CSV ---------------- */
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
  border: 2px dashed var(--outline); border-radius: var(--r-card); padding: 32px 20px;
  color: var(--muted); font-weight: 500; text-align: center; transition: border-color var(--dur-s) var(--ease-effect); }
.imp-drop:hover { border-color: var(--accent); color: var(--accent-ink); }
.imp-drop__ic { display: grid; place-items: center; color: var(--muted); }
.imp-drop__ic svg { width: 36px; height: 36px; }
.imp-tablewrap { overflow-x: auto; border: 1px solid var(--outline); border-radius: var(--r-m); margin: 4px 0 12px; }
.imp-table { width: 100%; border-collapse: collapse; font-size: var(--t-body-s); }
.imp-table th { text-align: left; font-size: var(--t-label); font-weight: 500;
  color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--outline); }
.imp-table td { padding: 8px 10px; border-bottom: 1px solid var(--outline); white-space: nowrap; }
.imp-table tr:last-child td { border-bottom: none; }
.imp-table .imp-amt { font-family: var(--mono); font-weight: 600; }
.imp-table .imp-dup td { color: var(--faint); background: var(--card-deep); }
/* Mapeo de categorías fuera del catálogo (preview del import). */
.imp-cats { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.imp-catrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.imp-catname { font-size: var(--t-body-m); font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-catn { color: var(--faint); font-size: var(--t-label); font-weight: 400; }
.imp-catrow .fchip { flex-shrink: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Omitir los N duplicados»: el switch de siempre (.setrow), sólo si hay duplicados. */
.imp-skip { margin: 4px 0 14px; }
.imp-actions { display: flex; gap: 8px; justify-content: flex-end; }
.imp-cancel { border: none; background: var(--card-deep); border-radius: var(--r-m);
  padding: 10px 16px; font-weight: 600; cursor: pointer; }
.imp-confirm { border: none; background: var(--accent); color: var(--on-accent); border-radius: var(--r-m);
  padding: 10px 18px; font-weight: 700; cursor: pointer; }
.imp-confirm:disabled { opacity: .5; cursor: default; }
.imp-ok { color: var(--accent-ink); font-weight: 600; margin: 12px 0 0; }

/* ---------------- Ajustes (pantalla completa) ----------------
   Desktop: dos paneles — sidebar con el menú de secciones (el mismo .setmenu
   de mobile) + panel derecho con SÓLO la tarjeta de la sección activa
   (.setcard--active; siempre hay una, buildSettings arranca en 'datos').
   Mobile (media query más abajo): menú a pantalla completa; tocar una fila
   abre su sub-pantalla. */
/* padding-top con safe-area: Ajustes esconde el header sticky, así que en el
   PWA de iPhone su encabezado propio ("Volver · Ajustes") debe despejar la
   barra de estado por su cuenta (en desktop/Android env() vale 0). */
.setwrap { display: grid; grid-template-columns: minmax(260px, 320px) 1fr;
  gap: 14px; padding-top: calc(4px + env(safe-area-inset-top, 0px)); align-items: start; }
.setpage__head { grid-column: 1 / -1; }
.setgrid { min-width: 0; }
.setcol { display: contents; } /* las tarjetas cuelgan directo del panel */
.setgrid .setcard { display: none; }
.setgrid .setcard--active { display: block; }
.setcard { padding: var(--pad-card); }
.setcard__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.setcard__head .lbl { display: inline-flex; align-items: center; gap: 8px; }
.setcard__lead { margin: -4px 0 12px; color: var(--muted); font-size: var(--t-body-m); line-height: 1.5; }
.setcard__hint { margin: 12px 0 0; color: var(--muted); font-size: var(--t-body-s); line-height: 1.5;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.setcard__hint code { font-family: var(--mono); }
/* Ajustes ▸ API para el agente ▸ "Cómo conectarlo con Claude": diálogo con pestañas
   (claude.ai · Claude Code · Otro agente) y pasos numerados con líneas copiables. El
   panel es columna flex: el encabezado y "Listo" quedan fijos, scrollean los pasos. */
.mcphow__cta { margin-top: 12px; }
.mcphow__cta .set__btn svg { width: 16px; height: 16px; margin-right: 6px; }
.cdlg__panel:has(.mcphow) { max-width: 460px; }
.upd-dialog__panel > .mcphow { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 14px; text-align: left; }
.mcphow__pick { margin: 0 0 12px; }
.mcphow__scroll { flex: 0 1 auto; min-height: 140px; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain;
  padding-right: 2px; }
.mcphow__lead { margin: 0 0 12px; font-size: var(--t-body-m); line-height: 1.5; color: var(--muted); }
.mcphow__steps { margin: 0; padding: 0; list-style: none; counter-reset: mcpstep;
  display: flex; flex-direction: column; gap: 12px; }
.mcphow__steps li { position: relative; padding-left: 36px; font-size: var(--t-body-m); line-height: 1.5; color: var(--text); }
.mcphow__steps li::before { content: counter(mcpstep); counter-increment: mcpstep;
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: var(--t-body-s);
  display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.mcphow code { font-family: var(--code); font-size: var(--t-body-s);
  background: var(--card-deep); border-radius: var(--r-xs); padding: 1px 5px; }
.mcphow__cmd { display: flex; align-items: center; gap: 8px; margin-top: 8px;
  background: var(--card-deep); border-radius: var(--r-m); padding: 10px 12px; }
.mcphow__cmd code { flex: 1; min-width: 120px; background: none; padding: 0; word-break: break-word; }
.mcphow__cmd--prose code { font-family: inherit; font-size: var(--t-body-m); line-height: 1.45; }
.mcphow__link { color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.mcphow__go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 10px 20px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: var(--t-body); text-decoration: none; margin: 2px 0 8px; }
.mcphow__go:hover { filter: brightness(1.06); }
.mcphow__go:active { transform: scale(.98); }
.mcphow__or { display: block; font-size: var(--t-body-s); color: var(--muted); line-height: 1.45; }
.mcphow__foot { margin-top: 14px; font-size: var(--t-body-s); line-height: 1.5; color: var(--muted); }
.mcphow__foot p { margin: 10px 0 0; }
.mcphow__foot .mcphow__cmd { background: var(--card); }
/* Zona de riesgo: sin borde coral; el título y el botón van en coral sobre tint. */
.setcard--danger { }
.setcard--danger .lbl { color: var(--neg-ink); }
.set__acct-ava { width: 46px; height: 46px; border-radius: 50%; background: var(--card-deep); color: var(--text);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-title); flex-shrink: 0; }
/* Fila de amigo (Ajustes ▸ Amigos): UN botón con nombre, saldo y "›"; las acciones
   viven en la ficha (openFriendCard). */
.frd-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 8px; margin: 0 -8px;
  box-sizing: content-box; border: none; border-radius: var(--r-m); background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-s) var(--ease-effect); }
.frd-row:hover { background: var(--card-deep); }

.frd-row__ava { width: 40px; height: 40px; clip-path: url(#shape-clover); color: var(--on-tone);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-body); flex-shrink: 0; }
/* Amigo sin cuenta: el avatar punteado, en su color y sin relleno (sin el trébol:
   el recorte se comería el borde). */
.frd-ava--nc { clip-path: none; border-radius: var(--r-s); border: 2px dashed; background: transparent; box-sizing: border-box; }
.frd-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frd-row__nm { font-size: var(--t-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frd-row__sub { font-size: var(--t-body-s); color: var(--muted); }
.frd-row__amt { flex-shrink: 0; font-size: var(--t-body); font-weight: 500; }
.frd-row__amt--cero { color: var(--muted); }
.frd-row__chev { flex-shrink: 0; color: var(--muted); font-size: var(--t-title); }
/* Ficha del amigo. */
.frdc__head { gap: 12px; justify-content: flex-start; }
.frdc__head .modal__x { margin-left: auto; }
.frdc__who { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-body-m); }
.frdc__cero { color: var(--muted); }
.frdc__ava { width: 48px; height: 48px; font-size: var(--t-title); }
.frdc__conn { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: none; border-radius: var(--r-m);
  background: var(--accent-soft); color: var(--accent-ink); font: inherit; text-align: left; cursor: pointer; }
.frdc__conntxt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.frdc__conntxt b { font-size: var(--t-body); font-weight: 600; }
.frdc__conntxt span { font-size: var(--t-body-s); color: var(--muted); }
.frdc__btn--wide { width: 100%; }
.frdc__btn { flex: 1; min-height: 44px; border: none; border-radius: var(--r-full); background: var(--card-deep);
  color: var(--text); font: inherit; font-size: var(--t-body-m); font-weight: 600; cursor: pointer; }
.frd-add { width: 100%; margin-top: var(--sp-3); }
/* Hoja "Agregar amigo" (openAddFriend): nombre + switch "Mandarle un link" y, en
   el paso 2, el link a la vista con el botón grande para compartirlo. */
.afr__title { font-size: var(--t-title-l); font-weight: 700; letter-spacing: -0.01em; }
.afr__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.afr__field { display: flex; flex-direction: column; gap: 6px; }
.afr__lbl { font-size: var(--t-body-s); font-weight: 500; color: var(--muted); }
.afr__in { box-sizing: border-box; width: 100%; padding: 14px 16px; border-radius: var(--r-m); border: none;
  background: var(--card-deep); color: var(--text); font: inherit; font-size: var(--t-body-l); }
.afr__in:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.afr__sw { padding: 12px 16px; border-radius: var(--r-m); background: var(--card-deep); }
.afr__swtxt { display: flex; flex-direction: column; gap: 2px; }
.afr__swtxt small { font-size: var(--t-body-s); color: var(--muted); line-height: 1.4; }
.afr__err { margin: 0; color: var(--neg-ink); font-size: var(--t-body-s); }
.afr__who { display: flex; align-items: center; gap: 12px; }
.afr__sub { margin: 0; font-size: var(--t-body-m); color: var(--muted); }
.afr__linkbox { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px;
  border-radius: var(--r-m); background: var(--card-deep); }
.afr__code { font-family: var(--code); font-size: var(--t-body-s); word-break: break-all; color: var(--text); }
.afr__copy { min-height: 36px; padding: 0 14px; border: none; border-radius: var(--r-full); background: var(--surface-high);
  color: var(--text); font: inherit; font-size: var(--t-label); font-weight: 600; cursor: pointer; }
.afr__share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.afr__later { align-self: center; }
.setpage__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
/* Menú de secciones ("B compacta"): buscador, cuenta y tres bloques —Tu app (cuatro
   tarjetas con una muestra de lo que cambian), Tu gente y tus cosas (lista agrupada)
   y Más (píldoras)— con Borrar todo al pie. En desktop es la sidebar (sticky: acompaña
   el scroll del panel derecho); en mobile, la pantalla principal de Ajustes. */
.setmenu { display: flex; flex-direction: column; gap: var(--sp-3);
  position: sticky; top: 14px; }
/* Bloques: el título en el color del acento, como los encabezados de lista de Android. */
.setmenu__group { display: flex; flex-direction: column; gap: var(--sp-2); }
.setmenu__title { margin-top: var(--sp-2); padding: 0 var(--sp-4); color: var(--accent-ink); font-size: var(--t-body-m); font-weight: 600; }
.setmenu__chev { color: var(--muted); font-size: var(--t-body-l); line-height: 1; flex-shrink: 0; }
.setlist__row, .setpill, .setdanger { border: none; font: inherit; color: var(--text); cursor: pointer; text-align: left;
  transition: background var(--dur-s) var(--ease-effect), box-shadow var(--dur-s) var(--ease-effect); }
/* Lista agrupada (radio grande afuera, chico entre filas). En el menú de Ajustes, Tu app y Tu gente
   y tus cosas son la misma lista (.setmenu, abajo). */
.setlist { display: flex; flex-direction: column; gap: 2px; }
.setlist__row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 56px; padding: var(--sp-2) var(--sp-4);
  background: var(--card); border-radius: var(--r-group-in); }
.setlist > .setlist__row:first-child { border-top-left-radius: var(--r-group); border-top-right-radius: var(--r-group); }
.setlist > .setlist__row:last-child { border-bottom-left-radius: var(--r-group); border-bottom-right-radius: var(--r-group); }
.setlist__lead { width: 48px; flex-shrink: 0; display: flex; align-items: center; gap: 3px; color: var(--muted); }
.setlist__lead:not(.setprev) > i { width: 14px; height: 14px; border-radius: 5px; }
.setlist__lead:not(.setprev) > i.is-empty { background: none; outline: 1.5px dashed var(--outline); outline-offset: -1.5px; }
.setlist__lead svg { width: 20px; height: 20px; }
.setlist__avas { display: flex; }
.setlist__ava { width: 26px; height: 26px; clip-path: url(#shape-clover); color: var(--on-tone); display: grid; place-items: center;
  font-size: var(--t-label); font-weight: 700; }
.setlist__ava + .setlist__ava { margin-left: -6px; }
.setlist__ava.frd-ava--nc { clip-path: none; border-radius: 50%; border: 1.5px dashed; box-sizing: border-box; background: var(--card); }
.setlist__ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card-deep); font-weight: 700; }
.setlist__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.setlist__t b { font-size: var(--t-body); font-weight: 600; }
.setlist__t small { font-size: var(--t-label); color: var(--muted); }
.setlist__t small.amt-in { color: var(--accent-ink); }
/* El menú de Ajustes: una sola fila para Tu app y Tu gente y tus cosas —64 de alto y, a la
   izquierda, un cuadro de 56×40 con la muestra de lo que cambia (los dos temas, las tarjetas
   del Inicio con la escondida punteada, la barra, las monedas) o lo que se reconoce (caras,
   colores, un ícono)—, así todos los nombres arrancan en la misma línea. */
.setmenu .setlist__row { min-height: 64px; gap: 14px; padding: 10px var(--sp-4) 10px var(--sp-3); }
.setmenu .setlist__lead { position: relative; width: 56px; height: 40px; justify-content: center; border-radius: var(--r-s);
  background: var(--card-deep); overflow: hidden; box-sizing: border-box; }
.setmenu .setlist__lead:not(.setprev) > i { width: 12px; height: 12px; border-radius: 4px; }
.setmenu .setlist__ava, .setmenu .setlist__ic { width: 24px; height: 24px; }
.setmenu .setlist__ic { background: var(--card); }
.setprev--theme > span { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 7px 4px 0 6px; background: #F2F0EB; }
.setprev--theme > span + span { padding: 7px 6px 0 4px; background: #100F0E; }
.setprev--theme i { display: block; height: 8px; border-radius: 3px; background: #FFFFFF; }
.setprev--theme i:first-child { height: 3px; width: 60%; border-radius: 2px; background: #1C1915; }
.setprev--theme > span + span i { background: #242220; }
.setprev--theme > span + span i:first-child { background: #EAE8E6; }
.setmenu .setprev--home { flex-direction: column; align-items: stretch; gap: 2px; padding: 5px; }
.setprev--home i { display: block; flex: 1; border-radius: 2px; background: var(--card); }
.setprev--home i.is-hero { flex: 2; box-shadow: inset 0 -2px 0 var(--accent); }
.setprev--home i.is-off { background: none; outline: 1px dashed var(--outline); outline-offset: -1px; }
.setmenu .setprev--tabs { align-items: flex-end; padding: 5px; }
.setprev--tabs > span { display: flex; justify-content: space-around; align-items: center; width: 100%; padding: 3px;
  border-radius: var(--r-full); background: var(--card); }
.setprev--tabs i { width: 6px; height: 6px; border-radius: 2px; background: var(--card-deep); }
.setprev--tabs i:first-child { width: 11px; border-radius: var(--r-full); background: var(--accent); }
.setmenu .setprev--cur { gap: 2px; color: var(--text); font-size: var(--t-body-m); font-weight: 800; line-height: 1; letter-spacing: var(--tracking-tight); }
.setprev--cur i { display: flex; align-items: center; font-style: normal; font-size: var(--t-label); color: var(--accent-ink); }
.setprev--cur i::before { content: '+'; margin-right: 2px; font-size: var(--t-label-s); font-weight: 500; color: var(--muted); }
/* Más: píldoras de 48 en dos columnas. */
.setpills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.setpill { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: 0 var(--sp-3);
  border-radius: var(--r-full); background: var(--card); font-size: var(--t-body-s); font-weight: 600; text-align: center; }
.setpill svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.setdanger { align-self: center; margin-top: var(--sp-2); min-height: 44px; padding: 0 var(--sp-5); border-radius: var(--r-full);
  background: none; color: var(--neg-ink); font-size: var(--t-body-m); font-weight: 600; }
.setlist__row:hover, .setpill:hover { background: color-mix(in srgb, var(--text) 4%, var(--card)); }
.setdanger:hover { background: var(--neg-soft); }
/* En la sidebar de la compu las píldoras no entran de a dos: una columna. */
@media (min-width: 960px) {
  #view-ajustes .setpills { grid-template-columns: 1fr; } #view-ajustes .setpill { justify-content: flex-start; }
}
/* La sección abierta (sólo se ve en la sidebar de desktop): aro lima. */
.setmenu .is-active { box-shadow: inset 0 0 0 2px var(--accent); }
.setmenu .setdanger.is-active { box-shadow: inset 0 0 0 2px var(--neg-ink); }
/* Un subtítulo dentro de una tarjeta de Ajustes (Tema, Filas…, Compromisos). */
.setsub { display: block; margin: var(--sp-5) 0 var(--sp-2); color: var(--accent-ink); font-size: var(--t-body-m); font-weight: 600; }
.setcard__head + .setsub, .setcard__lead + .setsub { margin-top: 0; }
/* Elegir tocando una muestra (Apariencia): la muestra arriba, el nombre abajo, la
   elegida con aro lima. */
.setpick { display: grid; gap: 10px; padding: var(--sp-3); border-radius: var(--r-group); background: var(--set-surf, var(--card-deep)); }
.setpick--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setpick--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.setpick__opt { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 0; border: none;
  background: none; color: var(--muted); font: inherit; font-size: var(--t-body-s); font-weight: 600; cursor: pointer; }
.setpick__opt.active { color: var(--text); }
.setpick__box { display: flex; width: 100%; height: 116px; box-sizing: border-box; overflow: hidden; border-radius: var(--r-s);
  background: var(--set-well, var(--card)); outline: 1px solid var(--outline); outline-offset: -1px;
  transition: outline-color var(--dur-s) var(--ease-effect); }
/* El aro va como outline: se pinta encima de la muestra (un box-shadow inset lo tapaba). */
.setpick__opt.active .setpick__box { outline: 2.5px solid var(--accent-ink); outline-offset: -2.5px; }
.setpick__opt:focus-visible { outline: none; }
.setpick__opt:focus-visible .setpick__box { box-shadow: 0 0 0 3px var(--focus); }
#set-rows .setpick__box { height: 120px; }
/* Montos y moneda: la muestra es el número como se va a ver (el total de un mes de
   ejemplo, o el monto del alta al abrir) y, debajo, qué se convierte en qué. */
#set-display .setpick__box, #set-defcur .setpick__box { height: 96px; }
.mtp { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; text-align: center; }
.mtp__two { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mtp__n { display: flex; align-items: baseline; gap: 3px; font-size: var(--t-body-l); font-weight: 800; letter-spacing: var(--tracking-tight, -.01em);
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.1; }
.mtp__two .mtp__n { font-size: var(--t-body-m); }
.mtp__n small { font-size: var(--t-label-s); font-weight: 700; color: var(--muted); }
.mtp__n--alta { font-size: var(--t-headline); }
.mtp__n--alta .mtp__sym { font-size: var(--t-body-s); }
.mtp__cv { display: flex; align-items: center; gap: 2px; font-size: var(--t-label-s); font-weight: 600; color: var(--muted); }
.mtp__cv em, .mtp__cur { font-style: normal; padding: 1px 4px; border-radius: 6px; background: var(--set-surf, var(--card-deep)); color: var(--text); }
.mtp__cur { font-size: var(--t-label-s); font-weight: 700; color: var(--muted); }
#set-brand-mode .setpick__box, #set-bank-logos .setpick__box { height: 72px; align-items: center; justify-content: center; gap: 8px; }
/* Redondear montos: dos montos de muestra (uno grande, uno de miles) como quedan en cada modo. */
#set-round .setpick__box { height: 72px; align-items: center; justify-content: center; }
.rndp { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 0 6px; white-space: nowrap; }
.rndp b { font-size: var(--t-body-s); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--text); }
.rndp small { font-size: var(--t-label); font-weight: 600; color: var(--muted); }
.thp { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border: 2.5px solid transparent; }
.thp i { display: block; height: 26px; border-radius: 6px; }
.thp i:first-child { height: 8px; width: 60%; border-radius: 4px; }
.thp--light { background: #F2F0EB; } .thp--light i { background: #FFFFFF; } .thp--light i:first-child { background: #1C1915; }
.thp--dark { background: #100F0E; } .thp--dark i { background: #242220; } .thp--dark i:first-child { background: #EAE8E6; }
.rwps { display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; padding: 0 12px; }
.rwp { display: flex; align-items: center; gap: 8px; }
.rwp__ic { width: 30px; height: 30px; border-radius: var(--r-xs); background: color-mix(in srgb, var(--text) 14%, transparent); flex-shrink: 0; }
.rwp__l { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.rwp__l i { display: block; height: 7px; width: 80%; border-radius: 2px; background: var(--text); }
.rwp__l i + i { height: 5px; width: 40%; background: var(--muted); }
.rwp__l i.is-card { width: 50%; background: var(--purple); }
.rwp__amt { width: 22px; height: 7px; border-radius: 3px; background: var(--text); }
.rwps--compact { gap: 8px; }
.rwps--compact .rwp__ic { width: 22px; height: 22px; border-radius: 6px; }
.rwps--compact .rwp__l i { height: 5px; } .rwps--compact .rwp__l i + i { height: 4px; }
.rwps--compact .rwp__amt { width: 18px; height: 5px; }
.setpick__ic { width: 36px; height: 36px; border-radius: var(--r-s); background: var(--set-surf, var(--card-deep)); display: grid; place-items: center; overflow: hidden; }
.setpick__ic .gic, .setpick__ic svg { width: 20px; height: 20px; }
.setpick__ic .gic--brand-img, .setpick__ic .gic--brand-mono { width: 100%; height: 100%; }
/* Ajustes ▸ Pantalla de inicio: una fila por tarjeta del Inicio con miniatura y ojo. */
#set-home-cards { display: flex; flex-direction: column; gap: 2px; }
.hset { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); min-height: 64px; padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  border-radius: var(--r-group-in); background: var(--set-surf, var(--card-deep)); box-sizing: border-box; }
.hset:first-child { border-top-left-radius: var(--r-group); border-top-right-radius: var(--r-group); }
.hset:last-child { border-bottom-left-radius: var(--r-group); border-bottom-right-radius: var(--r-group); }
.hset__th { width: 64px; height: 44px; flex-shrink: 0; box-sizing: border-box; padding: 6px; border-radius: var(--r-s); background: var(--set-well, var(--card));
  display: flex; gap: 3px; overflow: hidden; }
.hset__th i { display: block; border-radius: 3px; }
.hset__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hset__t b { font-size: var(--t-body); font-weight: 600; }
.hset__t small { font-size: var(--t-label); color: var(--muted); }
.hset__eye { position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  color: var(--text); cursor: pointer; }
.hset__eye:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.hset__eye input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.hset__eye svg { width: 22px; height: 22px; }
.hset__eye:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--focus); }
.hset__off { display: none; }
.hset--off { background: none; outline: 1.5px dashed var(--outline); outline-offset: -1.5px; }
.hset--off .hset__th { opacity: .4; }
.hset--off .hset__t b, .hset--off .hset__eye { color: var(--muted); }
.hset--off .hset__on { display: none; }
.hset--off .hset__off { display: block; }
/* Tarjeta principal: qué número muestra, con muestras (la tarjeta del Inicio en chico). */
.setpick.hset__pick { flex-basis: 100%; padding: 0 var(--sp-1) var(--sp-1) 0; background: none; }
.hset__pick .setpick__box { height: 84px; background: var(--set-well, var(--card)); }
.hset__pick .setpick__opt:disabled { cursor: default; opacity: .45; }
.hpp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px 0; }
.hpp__n { font-size: var(--t-body-l); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hpp__spark { display: block; width: calc(100% + 20px); height: 30px; margin: auto -10px 0; }
.hpp__spark path { stroke-width: 2.2; stroke-linecap: round; }
/* Las miniaturas: la línea del mes, las barras, el mosaico, las caras y los días. */
.hset__th--hero { flex-direction: column; justify-content: space-between; }
.hset__th--hero i:nth-child(1) { height: 7px; width: 60%; background: var(--text); }
.hset__th--hero i:nth-child(2) { height: 3px; width: 100%; margin-bottom: 4px; background: var(--accent); transform: rotate(-8deg); }
.hset__th--hero i:nth-child(n+3) { display: none; }
.hset__th--ivsg { align-items: flex-end; }
.hset__th--ivsg i { flex: 1; background: color-mix(in srgb, var(--neg) 45%, var(--card-deep)); }
.hset__th--ivsg i:nth-child(1) { height: 55%; } .hset__th--ivsg i:nth-child(2) { height: 75%; }
.hset__th--ivsg i:nth-child(3) { height: 60%; } .hset__th--ivsg i:nth-child(4) { height: 90%; background: var(--neg); }
.hset__th--cats { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; }
.hset__th--cats i:nth-child(1) { grid-row: span 2; background: color-mix(in srgb, var(--c1) 45%, var(--card)); }
.hset__th--cats i:nth-child(2) { background: color-mix(in srgb, var(--c2) 45%, var(--card)); }
.hset__th--cats i:nth-child(3) { background: color-mix(in srgb, var(--c3) 45%, var(--card)); }
.hset__th--cats i:nth-child(4) { display: none; }
.hset__th--share { flex-wrap: wrap; align-content: space-between; }
.hset__th--share i:nth-child(1), .hset__th--share i:nth-child(2) { width: 14px; height: 14px; border-radius: 42%; background: var(--c3); }
.hset__th--share i:nth-child(2) { margin-left: -6px; background: var(--c4); }
.hset__th--share i:nth-child(3) { flex: 3; height: 5px; background: color-mix(in srgb, var(--text) 22%, transparent); }
.hset__th--share i:nth-child(4) { flex: 1; height: 5px; background: var(--accent); }
.hset__th--share i:nth-child(3) { margin-left: 0; }
.hset__th--last { flex-direction: column; justify-content: space-around; }
.hset__th--last i { height: 6px; background: color-mix(in srgb, var(--text) 14%, transparent); }
.hset__th--last i:nth-child(4) { display: none; }
/* ---- Sub-pantallas de Ajustes, todas con el mismo lenguaje ----
   Las superficies van en variables: en la compu la sección vive en una tarjeta y sus
   grupos van en card-deep (lo hundido, en card); en el celular los grupos van sueltos
   sobre el fondo, en card, y lo hundido pasa a card-deep (ver la media query mobile). */
.setcard { --set-surf: var(--card-deep); --set-well: var(--card); }
.setgroup { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-group); background: var(--set-surf); }
.setgroup--row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; box-sizing: border-box; }
.setgroup--row code { flex: 1; min-width: 0; font-family: var(--code); font-size: var(--t-body-s); overflow-wrap: anywhere; }
.setgroup--row .copybtn { background: var(--set-well); }
.setgroup__t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.setgroup__t b { font-size: var(--t-body); font-weight: 600; }
.setgroup__t small { font-size: var(--t-label); color: var(--muted); }
.setgroup__t small .amt-in { color: var(--accent-ink); font-weight: 600; }
.setgroup__hint { margin: var(--sp-2) var(--sp-1) 0; font-size: var(--t-body-s); color: var(--muted); }
.setgroup__hint:empty { display: none; }
.setgroup__txt { margin: 0; font-size: var(--t-body-m); line-height: 1.5; }
.setgroup .set__btn { background: var(--set-well); }
.setgroup .setcta { margin-top: var(--sp-3); }
.setgroup .setcard__hint { display: block; margin: 0; }
/* Un grupo conectado a lo ancho (moneda, tipo de feedback). */
/* El botón principal de una sub-pantalla: píldora lima a lo ancho (danger: coral tonal). */
.setcta { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; min-height: 48px;
  margin-top: var(--sp-3); padding: 0 var(--sp-5); border: none; border-radius: var(--r-full); box-sizing: border-box;
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: var(--t-body); font-weight: 700; cursor: pointer; }
.setcta svg { width: 18px; height: 18px; }
.setcta:disabled { opacity: .5; cursor: default; }
.setcta--danger { background: var(--neg-soft); color: var(--neg-ink); }
.mcphow__cta .setcta { margin-top: 0; }
.setnew { width: 100%; box-sizing: border-box; margin-top: var(--sp-2); }
/* Las listas de las sub-pantallas son listas agrupadas: 2px entre filas, radio chico
   adentro y grande afuera. */
.setcard :is(.keys-list, .catmg, #set-views, .setrows) { display: flex; flex-direction: column; gap: 2px; margin-top: 0; }
.setcard :is(.keys-list, .catmg, .setrows) > :is(.keyrow, .frd-row, .setrow),
.setcard #set-views .setrow { border-radius: var(--r-group-in); background: var(--set-surf); }
.setcard .setrow:has(input:checked) { background: color-mix(in srgb, var(--accent) 12%, var(--set-surf)); }
.setcard :is(.keys-list, .catmg, .setrows) > :first-child,
.setcard #set-views .vrow:first-child .setrow:first-of-type { border-top-left-radius: var(--r-group); border-top-right-radius: var(--r-group); }
.setcard :is(.keys-list, .catmg, .setrows) > :last-child,
.setcard #set-views .vrow:last-child .setrow:last-of-type { border-bottom-left-radius: var(--r-group); border-bottom-right-radius: var(--r-group); }
.setcard #set-views { gap: 2px; }
.setcard .keyrow { min-height: 56px; padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); box-sizing: border-box; }
.setcard .keyrow__meta b { font-size: var(--t-body); }
.setcard .frd-row { margin: 0; padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-3); min-height: 56px; box-sizing: border-box; }
.setcard .frd-row:hover { background: color-mix(in srgb, var(--text) 4%, var(--set-surf)); }
.setcard .keys-list > .note, .setcard .catmg > .note { padding: var(--sp-4); border-radius: var(--r-group); background: var(--set-surf); margin: 0; }
.setcard > .setrow { margin-top: var(--sp-2); background: var(--set-surf); border-radius: var(--r-group); min-height: 56px; padding-inline: var(--sp-4) var(--sp-3); }
.setcard .setlist--in { margin-top: var(--sp-3); }
.setcard .setlist--in .setlist__row { background: var(--set-surf); }
.catmg__del { width: 40px; height: 40px; border-radius: 50%; color: var(--neg-ink); }
.catmg__del svg { width: 18px; height: 18px; }
.catmg__row .cardwrap__pen { width: 40px; height: 40px; }
.catmg__row .cardwrap__pen svg { width: 18px; height: 18px; }
.notifprefs { margin-top: 0; padding-top: 0; border-top: none; }
.fbform__in { background: var(--set-surf); }
/* Una opción dentro de una tarjeta de Ajustes: nombre a la izquierda, control a la derecha. */
.setopt { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px;
  font-size: var(--t-body); font-weight: 500; }
.setopt--sep { border-top: 1px solid var(--outline); margin-top: 16px; padding-top: 16px; }
.setpage__title { margin: 0; font-size: var(--t-headline-s); font-weight: 700; letter-spacing: -.01em; }
/* El pie del menú de Ajustes, después de Borrar todo: la línea del cafecito y la versión
   que corre (abre las novedades), centradas y en gris. */
.setfoot { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--outline); }
.setfoot__ver { min-height: 36px; padding: 0 14px; border: none; border-radius: var(--r-full); background: none; cursor: pointer;
  color: var(--muted); font: inherit; font-size: var(--t-body-s); font-weight: 600; font-variant-numeric: tabular-nums; }
.setfoot__ver:hover { color: var(--text); }
/* Versión nueva esperando: su propio banner, arriba de todo en Ajustes; abre el modal. */
.setupd { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: none; cursor: pointer;
  border-radius: var(--r-l); background: var(--accent-soft); color: var(--text); font: inherit; text-align: left; }
.setupd__ico { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; flex-shrink: 0; }
.setupd__ico svg { width: 20px; height: 20px; }
.setupd__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.setupd__txt b { font-size: var(--t-body); }
.setupd__txt small { font-size: var(--t-body-s); color: var(--muted); }
#set-upd:empty { display: none; }
.setpage__back { flex-shrink: 0; width: 40px; height: 40px; border: none; cursor: pointer; padding: 0;
  display: grid; place-items: center; border-radius: 50%; background: var(--card); color: var(--text); }
.setpage__back svg { width: 20px; height: 20px; stroke-width: 1.8; }
.setpage__back:hover { background: var(--card-deep); }
/* La cuenta: una fila con la cara, el nombre, la actualización si hay y Salir. */
.set__acct { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) 14px; border-radius: var(--r-group); }
.set__acct[hidden] { display: none; }
.set__acct img { width: 40px; height: 40px; border-radius: 50%; }
.set__acct .set__acct-ava { width: 40px; height: 40px; background: var(--accent); color: var(--on-accent); font-weight: 800; }
.set__acct-info { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.set__acct-info b { font-size: var(--t-body); }
.set__acct-info span { font-size: var(--t-label); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set__out { display: inline-flex; align-items: center; gap: 6px; height: 40px; flex-shrink: 0; padding: 0 14px 0 10px;
  border: none; border-radius: var(--r-full); background: var(--card-deep); color: var(--text); cursor: pointer;
  font: inherit; font-size: var(--t-body-s); font-weight: 600; }
.set__out:hover { background: color-mix(in srgb, var(--text) 8%, var(--card-deep)); }
.set__out svg { width: 18px; height: 18px; color: var(--muted); }
.set__badge { font-size: var(--t-label); font-weight: 600; color: var(--muted); background: var(--chip-bg);
  border-radius: var(--r-chip); padding: 1px 8px; letter-spacing: 0; }
.set__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; }
.set__row span { font-size: var(--t-body); }
.set__btn { flex-shrink: 0; border: none; background: var(--card-deep); color: var(--text);
  border-radius: var(--r-full); padding: 9px 16px; font-weight: 600; font-size: var(--t-body-m); cursor: pointer;
  transition: filter var(--dur-s) var(--ease-effect); }
.set__btn:hover { filter: brightness(1.08); }
.set__btn:disabled { opacity: .5; cursor: default; }
.set__btn--danger { color: var(--neg-ink); background: var(--neg-soft); }
.set__btn--danger:hover { filter: brightness(1.1); }
a.set__btn { text-decoration: none; display: inline-flex; align-items: center; }
.set__btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* Checkbox de una preferencia de Ajustes: ver .setrow más abajo (toggles de
   notificación, mostrar la tarjeta principal del Inicio, Mis pantallas…). */
.notifprefs { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--outline);
  display: flex; flex-direction: column; gap: 8px; }
.notifprefs .note { margin: 0 0 2px; }
.set__btn--lg { flex: 1; min-width: 140px; justify-content: center; align-items: center; padding: 11px 16px; display: inline-flex; }
.catlist__sub { display: block; font-size: var(--t-label); color: var(--muted); }

/* Tarjetas registradas (Ajustes) */
.cardwrap__pen { position: relative; border: none; background: none; padding: 2px; cursor: pointer; color: var(--muted);
  display: grid; place-items: center; flex-shrink: 0; }
.cardwrap__pen svg { width: 14px; height: 14px; }
.cardwrap__pen:hover { color: var(--text); }
.cardwrap__pen::after { content: ''; position: absolute; inset: -12px; }

/* Compartidos / amigos */
.frd-accept { display: flex; gap: 8px; margin-top: 10px; }
.frd-accept input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-m);
  border: none; background: var(--card-deep); color: var(--text); }
.frd-accept input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Toast (snackbar), el mismo para toda la app: flota arriba de la barra / de
   Guardar, ancho de la pantalla menos el margen (tope 480 en la compu), superficie
   oscura en los dos temas (--toast-*). Opcionales: ícono a la izquierda (spinner,
   error, ok) o miniatura, una frase en negrita al principio, una acción en lima y ✕.
   Se saca deslizándolo de costado o hacia abajo (`toastGestures`). */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); transform: translate(-50%, 12px);
  z-index: 95; width: min(calc(100vw - 32px), 480px); min-height: 52px; display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: var(--r-m); background: var(--toast-bg); color: var(--toast-text);
  font-size: var(--t-body-m); font-weight: 500; line-height: 1.35; text-align: left;
  box-shadow: var(--e3); opacity: 0; pointer-events: none; touch-action: none; /* se desliza para sacarlo */
  transition: opacity var(--dur-m) var(--ease-effect), transform var(--dur-m) var(--spring); }
.toast--show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast--tail { padding-right: 6px; } /* con acción o ✕: el botón trae su propio aire */
.toast--thumb { padding-left: 8px; }
.toast__msg { flex: 1; min-width: 0; }
.toast__lead { font-weight: 700; }
.toast__dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--toast-act); vertical-align: middle; }
.toast__ic { flex: none; display: flex; width: 20px; height: 20px; color: var(--toast-act); }
.toast__ic svg { width: 20px; height: 20px; }
.toast__ic--error { color: var(--toast-err); }
.toast__ic--spin svg { animation: toast-spin .9s linear infinite; }
@keyframes toast-spin { to { transform: rotate(360deg); } }
.toast__thumb { flex: none; width: 30px; height: 38px; border-radius: 6px; object-fit: cover; background: var(--toast-muted); }
.toast__act { flex: none; border: none; background: transparent; color: var(--toast-act);
  font: inherit; font-weight: 700; min-height: 36px; padding: 0 10px; border-radius: var(--r-full); cursor: pointer; }
.toast__act:hover { background: rgba(255, 255, 255, .08); }
.toast__x { flex: none; border: none; background: transparent; color: var(--toast-muted); width: 36px; height: 36px;
  border-radius: var(--r-full); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.toast__x:hover { color: var(--toast-text); background: rgba(255, 255, 255, .08); }
.toast__x svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .toast__ic--spin svg { animation: none; } }

/* Cartelito para activar notificaciones (sólo con la app instalada, primera vez).
   Mismo aspecto que el toast (superficie --toast-*, ancho, radio, sombra), pero se
   queda hasta que se responde. */
.notif-nudge { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  transform: translateX(-50%); z-index: 88; width: min(calc(100vw - 32px), 480px); min-height: 52px;
  display: flex; align-items: center; gap: 12px; padding: 10px 6px 10px 16px;
  border-radius: var(--r-m); background: var(--toast-bg); color: var(--toast-text);
  box-shadow: var(--e3);
  animation: nudge-in var(--dur-m) var(--ease-effect) both; }
@keyframes nudge-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
.notif-nudge__txt { flex: 1; font-size: var(--t-body-m); font-weight: 500; line-height: 1.35; }
.notif-nudge__act { flex: none; padding: 0 10px; border-radius: var(--r-full); border: none;
  background: transparent; color: var(--toast-act); font-weight: 700; font-size: var(--t-body-m); cursor: pointer; }
.notif-nudge__act:hover { background: rgba(255, 255, 255, .08); }
.notif-nudge__act:disabled { opacity: .6; }
.notif-nudge__x { flex: none; background: none; border: none; border-radius: var(--r-full);
  color: var(--toast-muted); font-size: var(--t-body); line-height: 1; padding: 6px; cursor: pointer; }
.notif-nudge__x:hover { color: var(--toast-text); background: rgba(255, 255, 255, .08); }
/* Diálogo de versión nueva (showUpdateNudge): centrado, con scrim, y SOBRE el
   gate de login (z 100) — la update tiene que poder aplicarse aún sin sesión. */
.upd-dialog { position: fixed; inset: 0; z-index: 101; display: flex; align-items: center;
  justify-content: center; padding: 16px; overscroll-behavior: contain; touch-action: none; }
/* El fondo no scrollea con el aviso abierto (iOS ignora el overflow del body: por eso
   también el touch-action de arriba). Lo que scrollea son sólo las Novedades, que pueden
   ser largas: el encabezado y "Actualizar ahora" quedan siempre a la vista. */
body.upd-open { overflow: hidden; }
.upd-dialog__notes { touch-action: pan-y; overscroll-behavior: contain; }
/* Diálogos propios (askConfirm / askPrompt / showError): mismo shell, más chicos. */
.cdlg__panel { max-width: 360px; text-align: center; padding: 26px 22px 20px; }
.cdlg__ico { display: grid; place-items: center; width: 56px; height: 56px; clip-path: url(#shape-cookie); margin: 0 auto 12px;
  background: var(--card-deep); color: var(--muted); }
.cdlg__ico svg { width: 24px; height: 24px; }
.cdlg__ico--danger { background: var(--neg-soft); color: var(--neg); }
.cdlg__title { margin: 0; font-size: var(--t-title-l); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; text-wrap: balance; }
.cdlg__text { margin: 8px auto 0; font-size: var(--t-body); line-height: 1.45; color: var(--muted); max-width: 30ch; }
.cdlg__input { display: block; width: 100%; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-m); border: none;
  background: var(--card-deep); color: var(--text); font: inherit; font-size: var(--t-body-l); text-align: left; }
.cdlg__input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Botones a mitad y mitad del ancho: cancelar a la izquierda, la acción a la derecha. */
.cdlg__acts { display: flex; gap: 8px; margin-top: 20px; }
.cdlg__btn { flex: 1; min-width: 0; border: none; border-radius: var(--r-full); padding: 13px 14px; font: inherit; font-weight: 700; font-size: var(--t-body); cursor: pointer; }
.cdlg__btn--cancel { background: var(--card-deep); color: var(--text); }
.cdlg__btn--ok { background: var(--accent); color: var(--on-accent); }
.cdlg__btn--danger { background: var(--neg); color: var(--on-neg); }
.cdlg__btn:disabled { opacity: .45; cursor: default; }
.cdlg__lbl { display: block; margin: 16px 0 -8px; font-size: var(--t-body-s); font-weight: 600; color: var(--muted); text-align: left; }
.cdlg__link { margin-top: 10px; border: none; background: none; padding: 6px 0; font: inherit; font-size: var(--t-body-m); font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.upd-dialog__scrim { position: absolute; inset: 0; background: rgba(6, 9, 12, .62); backdrop-filter: blur(4px);
  animation: upd-fade var(--dur-m) var(--ease-effect) both; }
.upd-dialog__panel { position: relative; width: 100%; max-width: 420px; max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column; overflow: hidden; background: var(--surface-high); color: var(--text); border-radius: var(--r-card);
  padding: 30px 24px 20px; text-align: center; box-shadow: var(--e3);
  animation: upd-pop var(--dur-m) var(--spring) both; }
@keyframes upd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes upd-pop { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
.upd-dialog__panel > * { flex: none; }
.upd-dialog__logo { align-self: center; display: inline-block; width: 64px; height: 64px; border-radius: var(--r-m);
  background: var(--logo-bg) var(--logo-url) center / 64% no-repeat; background-color: var(--card-deep);
  box-shadow: 0 0 0 6px var(--accent-soft); }
.upd-dialog__kicker { margin: 18px 0 2px; font-size: var(--t-body-s); font-weight: 600; color: var(--accent-ink); }
.upd-dialog__title { margin: 0; font-size: var(--t-headline); font-weight: 700; letter-spacing: -.01em; }
.upd-dialog__meta { margin: 12px 0 0; }
.upd-dialog__meta p { margin: 0; }
.upd-dialog__ver { font-size: var(--t-body-l); font-variant-numeric: tabular-nums; }
.upd-dialog__ver b { font-weight: 700; }
.upd-dialog__old { color: var(--muted); }
.upd-dialog__date { margin-top: 4px !important; font-size: var(--t-body-m); color: var(--muted); }
.upd-dialog__date:empty { display: none; }
.upd-dialog__panel > .upd-dialog__notes { flex: 0 1 auto; min-height: 72px; overflow-y: auto; }
.upd-dialog__notes { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-m); background: var(--card-deep);
  text-align: left; }
.upd-dialog__notes[hidden] { display: none; }
.upd-dialog__h { margin: 0 0 6px; font-size: var(--t-body-m); font-weight: 700; }
.upd-dialog__nv { margin: 10px 0 2px; font-size: var(--t-body-s); font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.upd-dialog__list { margin: 0; padding-left: 18px; font-size: var(--t-body-m); line-height: 1.45; }
.upd-dialog__list li + li { margin-top: 4px; }
.upd-dialog__acts { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.upd-dialog__go { width: 100%; padding: 14px 18px; border: none; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent); font: inherit; font-size: var(--t-body-l); font-weight: 700;
  cursor: pointer; transition: filter var(--dur-s) var(--ease-effect); }
.upd-dialog__go:hover { filter: brightness(1.06); }
/* "Abrir la nueva" de la mudanza de dominio es un link (navega a otra dirección). */
a.upd-dialog__go { display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
.mud__note { margin: 0; font-size: var(--t-body-m); line-height: 1.45; }
.upd-dialog__go:disabled { opacity: .7; cursor: default; }
.upd-dialog__later { padding: 10px; border: none; background: none; color: var(--muted); font: inherit;
  font-size: var(--t-body); font-weight: 600; cursor: pointer; }
.upd-dialog__later:hover { color: var(--text); }
/* La línea del cafecito (cafeLineHtml): gris salvo el ícono y el link, que van en lima.
   En el aviso de versión nueva va separada de los botones por un divisor. */
.cafeline { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  color: var(--muted); font-size: var(--t-body); text-decoration: none; }
.cafeline svg { width: 20px; height: 20px; flex: none; color: var(--accent-ink); }
.cafeline b { color: var(--accent-ink); font-weight: 700; }
.cafeline:hover b { text-decoration: underline; }
.upd-dialog__panel > .cafeline { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--outline); }
.upd-dialog__later:disabled { visibility: hidden; }

/* ============================================================================
   Gate de login
   ========================================================================== */
.login-gate { position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-gate[hidden] { display: none; }
.login-card { background: var(--card); border: none;
  border-radius: var(--r-card); padding: 40px 32px; max-width: 360px; width: 100%; text-align: center; }
.login-card__logo { display: inline-block; width: 56px; height: 56px; border-radius: var(--r-m);
  background: var(--logo-bg) var(--logo-url) center / 64% no-repeat;
  /* la card de login ya es blanca en claro: placa card-deep para que no se funda */
  background-color: var(--card-deep); }
.login-card__title { margin: 14px 0 4px; font-size: var(--t-headline); font-weight: 700; letter-spacing: -.01em; }
.login-card__msg { margin: 0 0 24px; color: var(--muted); font-size: var(--t-body); }
.login-card__msg--error { color: var(--neg-ink); }
.login-card__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 18px; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none;
  transition: filter var(--dur-s) var(--ease-effect); }
.login-card__btn:hover { filter: brightness(1.06); }
.login-card__btn svg { background: #fff; border-radius: 50%; padding: 3px; box-sizing: content-box; }

/* ============================================================================
   Mobile (<960px): sin rail; barra inferior pill con "+" central. Grillas a
   una columna, topbar apilada.
   ========================================================================== */
@media (max-width: 959px) {
  .rail { display: none; }
  /* Chrome mobile nuevo: sin topbar; header por vista arriba + tab bar abajo.
     El padding-bottom despeja barra + FAB. */
  /* El padding-bottom despeja la fila inferior (barra ~62px / FAB 56px + bottom
     16 + un respiro). */
  .stage { padding: 0 16px calc(104px + env(safe-area-inset-bottom)); }
  .topbar { display: none; }

  /* Header por vista: título 20/700 + avatar 34px.
     Sticky: título y avatar siempre visibles al scrollear. El padding-top suma
     env(safe-area-inset-top): en el PWA de iPhone (status bar translúcida +
     viewport-fit=cover) la app corre DEBAJO de la hora/íconos del sistema y sin
     esto el título se pisaba con la barra de estado. */
  .mhead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 2px 12px;
    position: sticky; top: 0; z-index: 40; background: var(--bg); }
  .mhead[hidden] { display: none; }
  .mhead__title { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden;
    font-size: min(var(--t-display-s), var(--mhead-fit, 99rem)); font-weight: 800; letter-spacing: var(--tracking-tight); color: var(--text); line-height: 1.2;
    transition: font-size var(--dur-m) var(--spring-soft); }
  /* Top app bar flexible (Expressive): título grande arriba de todo, chico al scrollear. */
  .mhead--compact .mhead__title { font-size: min(var(--t-title-l), var(--mhead-fit, 99rem)); }
  .mhead__txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mhead__acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
  .mhead .perpill { height: 40px; }
  .mhead__search { position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
    border: none; border-radius: 50%; cursor: pointer; background: var(--card); color: var(--muted); }
  .mhead__search svg { width: 17px; height: 17px; }
  .mhead__search[hidden] { display: none; }
  .mhead__search::after { content: ''; position: absolute; inset: -5px; } /* 44px de toque, ver F4 */
  .mhead__ava { display: grid; width: 40px; height: 40px; font-size: var(--t-body-m); font-weight: 700;
    flex-shrink: 0; }
  /* Área de toque de 44px (WCAG 2.5.8 / HIG) sin cambiar el dibujo: un ::after
     transparente agranda el hit area de los controles chicos del header y del buscador. */
  .perpill, .mhead__ava, .mvsearch__back, .mvsearch__clear, .modal__x { position: relative; }
  .perpill::after, .mhead__ava::after { content: ''; position: absolute; inset: -5px; }
  .modal__x::after { content: ''; position: absolute; inset: -6px; }
  .mvsearch__back::after, .mvsearch__clear::after { content: ''; position: absolute; inset: -7px; }
  .newbtn { display: none; } /* en mobile el "+" es el FAB */

  /* Tab bar inferior: pill flotante compacta con 5 tabs; activo = píldora
     accent-soft. Los tabs reparten el ancho (flex) para que entren todos. */
  /* Velo inferior: bloquea los taps entre el borde y la barra (y funde el
     contenido que scrollea por detrás). */
  .tabguard { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 49;
    height: calc(92px + env(safe-area-inset-bottom)); pointer-events: auto;
    background: linear-gradient(to top, var(--bg) 55%, transparent); }
  /* La barra deja lugar a la derecha para el FAB, que baja a su misma altura:
     conviven en la misma fila, separados. Va en surface-high (lo que flota) y
     lleva 4 lugares (TAB_SLOTS), así cada tab tiene ~80px y la etiqueta entra entera. */
  .tabbar { position: fixed; left: 14px; right: 82px; bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 50; display: flex; justify-content: space-around; align-items: stretch; gap: 0;
    background: var(--surface-high); border-radius: var(--r-full); padding: 2px 4px;
    box-shadow: var(--e3); }
  /* Barra baja: ícono arriba + etiqueta abajo, SIEMPRE visible. El activo lleva la
     píldora detrás; todos los tabs (también "Más") reparten el ancho. Anclados
     arriba (no centrados) para que la píldora caiga justo detrás del ícono aunque
     la letra del sistema sea más grande. Apagados en muted: la etiqueta informa. */
  .tabbar__tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
    flex: 1 1 0; min-width: 0; padding: 10px 0 8px; border: none; border-radius: var(--r-m); cursor: pointer;
    background: transparent; color: var(--muted); font-family: inherit;
    font-size: var(--t-label-s); font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
    transition: background-color var(--dur-m) var(--ease-effect), color var(--dur-m) var(--ease-effect); }
  .tabbar__tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar__tab svg { width: 24px; height: 24px; stroke-width: 1.8; flex-shrink: 0; position: relative; z-index: 1; }
  /* Indicador activo M3: píldora 56×32 detrás del ícono (la etiqueta queda
     afuera), que se estira con resorte al cambiar de tab. */
  /* Un solo indicador por barra (.tabbar__pill) que VIAJA al tab activo con resorte
     (left lo fija moveTabPill en app.js); en el primer pintado aparece sin viaje. */
  .tabbar__pill { position: absolute; top: 8px; left: 0; width: 56px; height: 32px; border-radius: var(--r-full); pointer-events: none;
    background: var(--accent-soft); transition: left var(--dur-l) var(--spring), opacity var(--dur-s) var(--ease-effect); }
  .tabbar__pill--off { opacity: 0; }
  /* Ícono de trazo apagado, relleno prendido (par trazo/relleno por vista). */
  .tabbar__tab .ic--fill, .tabbar__tab.active .ic--line { display: none; }
  .tabbar__tab.active .ic--fill { display: block; }
  @media (prefers-reduced-motion: reduce) { .tabbar__tab { transition: none; } }
  /* FAB "+" aislado, a la derecha de la barra y centrado con ella (barra ~64px,
     FAB 56: 4px más arriba que el borde de la barra). */
  .fab { position: fixed; right: 14px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 50;
    width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
    display: grid; place-items: center; background: var(--accent); color: var(--on-accent); padding: 0;
    box-shadow: var(--e3);
    transition: transform var(--dur-m) var(--spring); }
  .fab:active { transform: scale(.94); }
  .fab svg { width: 24px; height: 24px; }
  /* Grabando desde el micrófono de arriba (#fab-mic), el + es el ✓ que carga. */
  .fab .fab__ok, .fab--rec .fab__plus { display: none; }
  .fab--rec .fab__ok { display: block; }
  /* El micrófono chico apilado sobre el + (syncFabMic): un toque dicta un gasto. Vive
     DETRÁS del + (z-index 49 < 50): al bajar se guarda ahí —baja, se achica y queda
     tapado— y libera la esquina; arriba de todo vuelve a salir. La opacidad se apaga
     recién cuando terminó de bajar (y se prende al empezar a subir), así se lo ve
     entrar y salir del +. Grabando, tampoco está. */
  .fabmic { position: fixed; right: 21px; bottom: calc(20px + env(safe-area-inset-bottom) + 56px + 12px); z-index: 49;
    width: 42px; height: 42px; border: none; border-radius: var(--r-s); padding: 0; cursor: pointer; display: grid; place-items: center;
    background: var(--surface-high); color: var(--accent-ink); box-shadow: var(--e2);
    transition: transform var(--dur-m) var(--spring), opacity 0s linear 0s; }
  .fabmic svg { width: 20px; height: 20px; }
  .fabmic[hidden] { display: none; }
  body.fabmic-off .fabmic, body.vrec-on .fabmic, body.no-nav .fabmic {
    transform: translateY(54px) scale(.6); opacity: 0; pointer-events: none;
    transition: transform var(--dur-m) var(--spring), opacity 0s linear var(--dur-m); }
  @media (prefers-reduced-motion: reduce) { .fabmic, body.fabmic-off .fabmic, body.vrec-on .fabmic { transition: none; } }
  @media (prefers-reduced-motion: reduce) { .fab { transition: none; } }
  body.no-nav .fab, .fab--hidden { display: none; }
  /* Activo: etiqueta en tinta plena + negrita; el lima queda para el ícono y la píldora. */
  .tabbar__tab.active { color: var(--text); font-weight: 700; }
  .tabbar__tab.active svg { color: var(--accent-ink); }
  body.no-nav .tabbar, body.no-nav .tabguard, .tabbar--hidden { display: none; }
  .moresheet { display: block; position: fixed; inset: 0; z-index: 70; }
  .moresheet[hidden] { display: none; }

  /* Pill del modo búsqueda (vista Buscar): Volver + lupa + ✕, sticky bajo el
     header, + chips. (El launcher embebido en Movimientos se sacó: la lupa del
     header ya abre el buscador en todas las vistas.) */
  .mvsearch { position: sticky; top: calc(62px + env(safe-area-inset-top, 0px)); z-index: 5; display: block; width: 100%;
    background: var(--bg); padding: 2px 0 10px; border: none; text-align: left; font-family: inherit; cursor: pointer; } /* top = alto del header sticky (que suma el safe-area) */
  .mvsearch__pill { display: flex; align-items: center; gap: 10px; height: 56px;
    border-radius: var(--r-full); background: var(--card); padding: 0 16px; }
  .mvsearch__pill--deep { background: var(--card-deep); }
  .mvsearch__ic { width: 16px; height: 16px; color: var(--faint); flex-shrink: 0; }
  .mvsearch__ph { font-size: var(--t-body-l); color: var(--faint); }
  .mvsearch__input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text);
    font-size: max(var(--t-body-l), 16px); padding: 0; outline: none; } /* ≥16px: evita el auto-zoom de iOS */
  .mvsearch__input::placeholder { color: var(--faint); }
  .mvsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
  .mvsearch__back, .mvsearch__clear { flex-shrink: 0; width: 30px; height: 30px; border: none;
    cursor: pointer; padding: 0; background: transparent; color: var(--muted);
    border-radius: 50%; display: grid; place-items: center; }
  .mvsearch__back svg { width: 18px; height: 18px; }
  .mvsearch__clear svg { width: 15px; height: 15px; }
  .mvsearch--active { cursor: default; }
  .mvsearch--active .filters { margin-top: 10px; }

  /* (el FAB flotante ya no existe: el "+" vive dentro de la tab bar) */

  .rsm-grid2, .catgrid { grid-template-columns: 1fr; }
  /* Resumen compacto (mock mobile): balance a lo ancho, Ingresos/Egresos lado a
     lado con monto corto, donut chico con top-3 + "+ N más", previsto en una
     línea, movimientos con ícono + sub "Hoy · categoría". */
  .rsm { gap: var(--sp-3); }
  .rsm-grid, .rsm-grid2 { gap: var(--sp-3); }
  .rsm-grid { grid-template-columns: 1fr 1fr; }
  .rsm-grid > * { grid-column: 1 / -1 !important; grid-row: auto; }
  .bal { padding: 20px 20px 16px; }
  .bal__spark { height: 60px; }
  .bal__axis { display: none; } /* el eje de fechas del sparkline es sólo desktop */
  .rsm-side { order: -1; } /* previsto + compartidos arriba de los movimientos */
  /* Barras in/eg más finas y bajas en mobile; la tarjeta ocupa el ancho. */
  .rsm-grid .ivsg { grid-column: 1 / -1; }
  .ivsg { padding: 16px 16px 12px; }
  .ivsg__chart { gap: 2px; }
  .ivsg__plot { height: 120px; }
  .ivsg__bar { max-width: 30px; }
  .cmap { padding: 16px 16px 18px; }
  .cmap__box { height: 180px; }
  /* Ajustes mobile: una sola columna; menú de secciones a pantalla completa y
     una sub-pantalla muestra sólo su tarjeta (mismas reglas de visibilidad de
     .setcard--active que en desktop; acá menú y tarjeta no conviven). */
  /* align-items: el `start` de la base sirve al GRID desktop (no estirar la
     sidebar en alto); en este flex COLUMNA controla el ANCHO y encogía las
     tarjetas al contenido → volver al stretch para que ocupen todo el ancho. */
  .setwrap { display: flex; flex-direction: column; align-items: stretch; }
  .setmenu { position: static; }
  /* Encabezado de Ajustes = top app bar flexible como .mhead: sticky, título grande
     (display-s/800) arriba de todo y chico (title-l) al scrollear (.setpage__head--compact,
     mismo listener de scroll). El safe-area pasa del .setwrap al encabezado, que es lo
     que queda pegado arriba. */
  .setwrap { padding-top: 0; }
  .setpage__head { position: sticky; top: 0; z-index: 40; background: var(--bg); margin: 0 -2px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 2px 12px; }
  .setpage__title { font-size: var(--t-display-s); font-weight: 800; letter-spacing: var(--tracking-tight);
    line-height: 1.2; transition: font-size var(--dur-m) var(--spring-soft); }
  .setpage__head--compact .setpage__title { font-size: var(--t-title-l); }
  #view-ajustes[data-sec] .setmenu { display: none; }
  .setgrid { display: none; }
  #view-ajustes[data-sec] .setgrid { display: block; }
  /* La sub-pantalla ya se titula con su sección: el label de la tarjeta sobra. */
  #view-ajustes[data-sec] .setcard__head > .lbl { display: none; }
  #view-ajustes[data-sec] .setcard__head:not(:has(> :not(.lbl))) { display: none; }
  #view-ajustes[data-sec] .setpage__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Cada sub-pantalla son grupos sueltos sobre el fondo (como la lista de Android),
     sin la tarjeta que la envuelve en la compu: lo de adentro sube a card y lo
     hundido baja a card-deep. */
  #view-ajustes[data-sec] .setgrid .setcard { background: none; padding: 0; --set-surf: var(--card); --set-well: var(--card-deep); }
  #view-ajustes[data-sec] .setcard__lead { margin: 0 var(--sp-1) var(--sp-4); }
  #view-ajustes[data-sec] .setcard .setsub, #view-ajustes[data-sec] .setcard > .setcard__hint,
  #view-ajustes[data-sec] .setcard .fbform > .setcard__hint, #view-ajustes[data-sec] .notifprefs .setsub { margin-left: var(--sp-4); }
  #view-ajustes[data-sec] .setcard__head { margin-bottom: var(--sp-3); }
  /* Alta como bottom sheet: modal pegado abajo, radio 28 arriba, monto primero
     y gigante (44px mono centrado) con la moneda como pill debajo. */
  .modal { align-items: flex-end; padding: 0; }
  .modal__panel { max-width: none; border-radius: var(--r-l) var(--r-l) 0 0; border-bottom: none;
    /* 100% (no 92vh): con el teclado abierto el modal se achica al viewport visual
       (ver kbAdjustModal) y el panel se mide contra ESA altura. A 92% quedaba un
       hueco arriba donde el scrim translúcido dejaba ver la página de atrás. */
    /* …pero nunca por encima de la barra de estado del iPhone (safe-area-top). */
    max-height: calc(100% - env(safe-area-inset-top, 0px)); animation: popup var(--dur-l) var(--spring);
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
    touch-action: pan-y; transition: transform var(--dur-m) var(--spring); }
  /* Un toque más de aire arriba que en desktop: lugar para la rayita. */
  .modal__head { padding-top: 22px; }
  /* La rayita (.sheet__grab) vive dentro de la cabecera sticky, así acompaña al
     título en todos los contenidos del modal. */
  /* Más aire entre la cabecera y el monto gigante: el fade de 12px que cuelga
     de .modal__head::after dejaba de tapar el borde superior del número. */
  .mvf__hero { padding-top: 16px; }
  /* Alta/edición de movimiento a PANTALLA COMPLETA (modal--full): deja de ser
     sheet parcial — ocupa todo el alto, sin radios. La cabecera absorbe la barra
     de estado del iPhone (safe-area-top, mismo patrón que el header de la app);
     rayita y swipe-down para cerrar se conservan. */
  .modal--full .modal__panel { max-height: none; height: 100%; border-radius: 0; }
  .modal--full .modal__head { padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
  .modal--full .modal__head > .sheet__grab { top: calc(8px + env(safe-area-inset-top, 0px)); }
  /* (El alta mobile es la lista agrupada "B3", ver el bloque al final del
     archivo. Lo que sigue queda para el tile de fecha compartido.) */
  .mvf__fecha { flex-direction: row; justify-content: center; gap: 8px;
    padding: 12px 10px; font-weight: 500; color: var(--text); }
  .mvf__fecha svg { width: 16px; height: 16px; }
  .bal__num { font-size: var(--t-display-m); }
  .mday { padding: 4px 16px 8px; }
  /* La fila de 2 líneas ya es el patrón global; acá sólo se compacta. */
  .mrow { gap: 12px; padding: 13px 8px; margin: 0 -8px; width: calc(100% + 16px); }
  .mrow__sub { display: none; } /* el "· comercio" del título va en la sublínea */
}
@media (min-width: 960px) {
  /* Marco Gmail: fondo del shell = superficie card (la sidebar vive sobre él,
     sin caja propia) y el stage es el contenedor redondeado con márgenes. */
  .shell { background: var(--card); padding: 12px 12px 12px 0; }
  .rail { --ava-ring: var(--card); }
  .rail { top: 12px; height: calc(100vh - 24px); }
  .stage { background: var(--bg); border-radius: var(--r-card); }

  /* Chrome mobile fuera de desktop; del modo búsqueda sólo se esconde la pill
     (los chips de filtro #filters se comparten con el modo desktop). */
  .mhead, .tabbar, .tabbar[hidden], .moresheet, .moresheet[hidden] { display: none; }
  .mvsearch--active .mvsearch__pill { display: none; }
  /* Detalle como drawer lateral derecho (reemplaza al bottom sheet en desktop). */
  .mdet { left: auto; top: 0; right: 0; bottom: 0; margin: 0; width: 420px; max-width: 92vw;
    max-height: none; border-radius: 0; border: none;
    background: var(--bg); padding: 24px; animation: drawerin var(--dur-m) var(--spring-soft); }
  .mdet__grab { display: none; }
  .mdet__actions--nav { bottom: -24px; margin-bottom: -24px; padding-bottom: 24px; }
  .mdet__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

  .mvf__hero { flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .mvf__hero input { flex: 1; width: auto; min-width: 0; text-align: left; font-size: var(--t-headline-l);
    letter-spacing: -.01em; background: var(--card-deep); border-radius: var(--r-m); padding: 10px 14px; }
  .mvf__calc { white-space: nowrap; }
  .mvf__curbtn { padding: 9px 13px 9px 16px; }
  .mvf__fecha { flex-direction: row; justify-content: space-between; gap: 8px; padding: 12px 14px;
    font-size: var(--t-body-m); font-weight: 400; color: var(--text); }
  .mvf__fecha svg { width: 16px; height: 16px; order: 2; }
  .mvf__cat { min-width: 56px; gap: 5px; }
  .mvf__catic { width: 42px; height: 42px; border-radius: var(--r-m); }
  .mvf__catlbl { font-size: var(--t-label); }
}
@keyframes drawerin { from { transform: translateX(100%); } to { transform: none; } }
@media (max-width: 959px) {
  .cuota__axis { display: none; } /* el eje de meses es sólo desktop */
}
@media (max-width: 640px) {
  /* Chips de filtro en mobile: un toque más de alto para el dedo. */
  .fchip { padding-top: 8px; padding-bottom: 8px; }
}

/* Swipe entre vistas (mobile): el eje X es del gesto en JS; el vertical sigue
   siendo scroll nativo. clip evita scroll horizontal de página con la vista corrida. */
@media (max-width: 959px) {
  .view { touch-action: pan-y; }
  html, body { overflow-x: clip; }
}

/* ---------------- Mis pantallas + wizard "Armá tu app" ---------------- */
.rail__btn[hidden], .tabbar__tab[hidden] { display: none; }
.ob { display: flex; flex-direction: column; gap: 14px; padding: 8px 20px 24px; max-width: 460px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.ob h3 { margin: 4px 0 0; font-size: var(--t-headline-s); font-weight: 700; letter-spacing: -.01em; }
.ob p { margin: 0; color: var(--muted); font-size: var(--t-body); line-height: 1.45; }
.ob__ic { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--r-s); display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-ink); }
.ob__ic svg { width: 18px; height: 18px; }
.ob__hero { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; padding: 18px 0 4px; }
.ob__hero > span { display: flex; align-items: center; gap: 10px; background: var(--card-deep); border-radius: var(--r-m); padding: 8px 12px 8px 8px;
  font-size: var(--t-body-m); font-weight: 600; }
.ob__ttl { display: flex; align-items: center; gap: 10px; }
.ob__shot { background: var(--card-deep); border-radius: var(--r-l); padding: 14px; min-height: 170px; display: flex; align-items: center; justify-content: center; }
.ob__shot > * { width: 100%; }
.ob__pick { align-self: stretch; }
.ob__sum .setlist__row { background: var(--card-deep); }
.ob__sum .setlist__t small { color: var(--muted); font-size: var(--t-body-m); }
.ob__sum .ob__off .setlist__t b { color: var(--muted); }
.ob__sum .ob__off .ob__ic { background: var(--card); color: var(--faint); }
.ob__dots { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.ob__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--card-deep); }
.ob__dots i.on { width: 20px; border-radius: var(--r-full); background: var(--accent-ink); }
.ob__nav { display: flex; gap: 10px; }
/* Mini-pantallas de la guía: esquemas de cada vista de hoy (aria-hidden). */
.ob-col { display: flex; flex-direction: column; gap: 8px; }
.ob-lbl { font-size: var(--t-label); color: var(--muted); }
.ob-hero { display: flex; flex-direction: column; gap: 2px; background: var(--card); border-radius: var(--r-m); padding: 10px 12px; }
.ob-hero b { font-size: var(--t-title-l); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.ob-hero small { font-size: var(--t-label); color: var(--muted); }
.ob-bar { display: flex; gap: 3px; height: 6px; margin-top: 6px; }
.ob-bar i { border-radius: var(--r-full); min-width: 4px; }
.ob-mos { display: flex; flex-direction: column; gap: 6px; background: var(--card); border-radius: var(--r-m); padding: 10px; }
.ob-mos .cmap__box { height: 120px; }
.ob-steps { display: flex; flex-direction: column; gap: 4px; }
.ob-step { position: relative; display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: var(--r-s); padding: 7px 10px; }
.ob-step > i { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; box-sizing: border-box; }
.ob-step > i svg { width: 12px; height: 12px; }
.ob-step--done > i { background: var(--accent); color: var(--on-accent); }
.ob-step--todo > i { box-shadow: inset 0 0 0 2.5px var(--neg); }
.ob-step--later > i { box-shadow: inset 0 0 0 2.5px var(--outline); }
.ob-step > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ob-step small { font-size: var(--t-label-s); color: var(--muted); }
.ob-step b { font-size: var(--t-body-m); font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-step--done b { color: var(--accent-ink); }
.ob-step--todo b { color: var(--neg-ink); }
.ob-tag { font-style: normal; font-size: var(--t-label-s); font-weight: 600; color: var(--ob-c); background: color-mix(in srgb, var(--ob-c) 14%, transparent);
  border-radius: var(--r-chip); padding: 2px 7px; }
.ob-chart { display: flex; gap: 6px; height: 92px; background: var(--card); border-radius: var(--r-m); padding: 10px 10px 6px; }
.ob-chart > span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: var(--t-label-s); color: var(--muted); }
.ob-chart > span.on { color: var(--text); font-weight: 700; }
.ob-chart u { flex: 1; width: 100%; display: flex; flex-direction: column-reverse; gap: 2px; text-decoration: none; }
.ob-chart u i { border-radius: 4px; }
.ob-chart > span:not(.on) u { opacity: .55; }
.ob-ccard { display: flex; align-items: center; justify-content: space-between; border-radius: var(--r-m); padding: 12px 14px; background: linear-gradient(135deg, color-mix(in oklch, var(--tile) 72%, var(--text)), var(--tile)); color: var(--on-tone); }
.ob-ccard span { display: flex; flex-direction: column; }
.ob-ccard b { font-size: var(--t-body); font-weight: 700; }
.ob-ccard small { font-size: var(--t-label-s); opacity: .85; }
.ob-ccard strong { font-size: var(--t-title); font-variant-numeric: tabular-nums; }
.ob-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-acc, .ob-frd { display: flex; flex-direction: column; gap: 4px; background: var(--card); border-radius: var(--r-m); padding: 10px 12px; min-width: 0; }
.ob-acc > span { display: flex; align-items: center; gap: 6px; font-size: var(--t-label); font-weight: 600; }
.ob-acc > span i { width: 12px; height: 12px; border-radius: 4px; }
.ob-acc b, .ob-frd b { font-size: var(--t-body); font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-acc small { font-size: var(--t-label-s); font-weight: 600; color: var(--accent-ink); }
.ob-acc u { display: block; height: 5px; margin-top: 3px; border-radius: var(--r-full); background: var(--card-deep); overflow: hidden; text-decoration: none; }
.ob-acc u i { display: block; height: 100%; }
.ob-frd small { font-size: var(--t-label-s); color: var(--muted); }
.ob-ava { width: 28px; height: 28px; clip-path: url(#shape-clover); color: var(--on-tone); display: grid; place-items: center;
  font-size: var(--t-label); font-weight: 700; }
.ob-muted { color: var(--muted); }

/* Checkbox de Ajustes (Mis pantallas, notificaciones, tarjetas del Inicio): fila
   entera tocable con el mismo formato que las filas de Categorías/Tarjetas
   (.keyrow: fondo card-deep, radio 14, padding 10/12, nombre 14px en negrita). */
#set-views { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 14px; }
.vrow { display: flex; align-items: center; gap: 8px; }
.vrow .setrow { flex: 1; min-width: 0; }
/* Una opción de la pantalla colgada de su fila (Compromisos ▸ Estimar gastos
   variables): la misma lista, una fila más adentro, con su explicación debajo. */
.vrow--sub { flex-direction: column; align-items: stretch; gap: 2px; }
.vrow--sub .setrow { flex: none; }
.vrow--sub .setrow--sub { padding-left: var(--sp-8); font-weight: 600; }
.vrow--sub .setrow--sub small { display: block; margin-top: 2px; font-size: var(--t-label); font-weight: 500; color: var(--muted); line-height: 1.35; }
.vrow__where { margin-left: 6px; font-size: var(--t-label); font-weight: 500; color: var(--muted); }
/* Modo "Reordenar": manija de seis puntos a la izquierda (se arrastra o se mueve
   con las flechas), sin switches; la fila levantada flota con sombra. */
.vrow__grip { width: 44px; height: 44px; flex-shrink: 0; border: none; border-radius: var(--r-s); background: var(--card-deep); color: var(--muted);
  display: grid; place-items: center; cursor: grab; padding: 0; touch-action: none; }
.vrow__grip svg { width: 20px; height: 20px; }
.vrow__grip:active { cursor: grabbing; }
.setrow--static { cursor: default; }
.vrow--lift { position: relative; z-index: 2; }
.vrow--lift .setrow, .vrow--lift .vrow__grip { background: var(--surface-high); box-shadow: var(--e2); }
.vrow--lift .vrow__grip { color: var(--accent-ink); }
.vrow--drag { transition: transform var(--dur-s) var(--ease-effect);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* el toque largo no selecciona ni duplica la fila */
.vrow--drag * { -webkit-user-drag: none; }
.vrow--lift { transition: none; }
body.dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
.set__btn--ico { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px 0 10px; }
.set__btn--ico svg { width: 16px; height: 16px; }
.set__btn--ico.active { background: var(--accent); color: var(--on-accent); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; box-sizing: border-box;
  padding: 10px 12px; border-radius: var(--r-m); background: var(--card-deep); color: var(--text); font-size: var(--t-body-m); font-weight: 700; cursor: pointer; }
/* Switch M3 (52×32): una preferencia que se prende y apaga no es un checkbox.
   Manija chica apagada, grande y con ✓ prendida; el resorte la lleva. */
.setrow input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 52px; height: 32px; margin: 0;
  border-radius: var(--r-full); border: 2px solid var(--muted); background: var(--card); position: relative; cursor: pointer;
  transition: background-color var(--dur-s) var(--ease-effect), border-color var(--dur-s) var(--ease-effect); }
.setrow input::after { content: ''; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: var(--muted);
  transition: transform var(--dur-m) var(--spring), width var(--dur-m) var(--spring), height var(--dur-m) var(--spring), margin var(--dur-m) var(--spring), left var(--dur-m) var(--spring), background-color var(--dur-s) var(--ease-effect); }
.setrow input:checked { background: var(--accent); border-color: var(--accent); }
.setrow input:checked::after { left: 2px; width: 24px; height: 24px; margin-top: -12px; transform: translateX(22px); background: var(--on-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6F24E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  background-size: 14px; background-position: center; background-repeat: no-repeat; }
.setrow input:active::after { width: 28px; height: 28px; margin-top: -14px; }
.setrow:has(input:checked) { background: var(--accent-soft); }
.setrow:active { filter: brightness(.96); }

/* Ayuda larga (showHelp) y lista de atajos: texto a la izquierda, no centrado. */
/* Una ayuda larga no entra en un teléfono chico: el texto scrollea adentro del panel
   (que es overflow hidden) y el título y "Entendido" quedan a la vista. */
.upd-dialog__panel > .cdlg__help { flex: 0 1 auto; min-height: 0; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; }
.cdlg__help { margin-top: 12px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.cdlg__help p { margin: 0; font-size: var(--t-body); line-height: 1.45; color: var(--muted); }
.helplink { display: inline-flex; align-items: center; gap: 5px; border: none; background: none; padding: 4px 0; font: inherit; font-weight: 600; color: var(--accent-ink); cursor: pointer; }
.helplink svg { width: 15px; height: 15px; }
.helpbtn { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px 0 -6px 2px; border: none; border-radius: 50%; background: none; color: var(--faint); cursor: pointer; vertical-align: middle; }
.helpbtn svg { width: 16px; height: 16px; }
.helpbtn { position: relative; }
.helpbtn::after { content: ''; position: absolute; inset: -8px; }
/* Atajos de teclado (showShortcuts). */
.kbdlist div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.kbdlist dt { flex-shrink: 0; }
.kbdlist dd { margin: 0; color: var(--muted); font-size: var(--t-body-m); text-align: right; }
kbd { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: var(--r-xs); background: var(--card-deep); color: var(--text); font: inherit; font-size: var(--t-body-s); font-weight: 700; text-align: center; }
/* Foco programático en el panel de un overlay (trapFocus): sin anillo, no es un control. */
.modal__panel:focus, .mdet:focus, .moresheet__panel:focus, .catpick__sheet:focus, .cdlg__panel:focus, .upd-dialog__panel:focus { outline: none; }

/* Filtros rápidos de Movimientos: chips con su total (L3), sólo en el celular
   (en la compu filtra el buscador). Una fila que se desliza si no entra; el elegido, tonal. */
@media (min-width: 960px) { #movquick { display: none; } }
.movquick { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sp-1)) 12px; padding: 3px var(--sp-1); }
.movquick[hidden] { display: none; }
.movquick::-webkit-scrollbar { display: none; }
.movquick__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border: 1px solid var(--outline); border-radius: var(--r-chip); background: none; color: var(--muted);
  font: inherit; font-size: var(--t-body-s); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-s) var(--ease-effect), border-color var(--dur-s) var(--ease-effect); }
.movquick__btn b { font-size: var(--t-body-s); font-weight: 800; color: var(--text); }
.movquick__btn b.amt-in { color: var(--accent-ink); } .movquick__btn b.amt-out { color: var(--neg-ink); }
.movquick__btn.active { border-color: transparent; background: color-mix(in srgb, var(--accent) 24%, var(--card)); color: var(--text); }
.movquick__btn:active { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 10%, transparent); }
.movquick__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ============================================================================
   Capa Material 3 Expressive compartida (sobre las clases existentes)
   ========================================================================== */
/* Botones: tres tamaños (32 · 40 · 48/56), una forma (píldora) que se "cuadra"
   al presionar —el morph de Expressive— y una capa de estado al apretar. */
.keyrow__rev, .copybtn, .catdet-monthchip, .offbar__btn { min-height: 32px; }
.set__btn, .imp-confirm, .imp-cancel, .keyform__btn, .mvf__tog, .fchip, .mvf__chip, .perpill, .mhead__search,
.mvf__curbtn, .morelink, .mdet__ddbtn, .mvsheet__none, .upd-dialog__later, .cdlg__link, .helplink, .notif-nudge__x { min-height: 40px; }
.empty__btn, .cdlg__btn, .mdet__act, .notif-nudge__act { min-height: 48px; }
.mvf__submit, .upd-dialog__go, .login-card__btn { min-height: 56px; }
.keyform__btn, .imp-confirm, .imp-cancel { border-radius: var(--r-full); }
.notif-nudge__x { min-width: 40px; }
.shrhero__btn, .keyrow__rev, .copybtn, .catdet-monthchip, .offbar__btn,
.set__btn, .imp-confirm, .imp-cancel, .keyform__btn, .mvf__tog, .perpill,
.empty__btn, .cdlg__btn, .mdet__act, .notif-nudge__act, .mvf__submit, .upd-dialog__go, .login-card__btn, .fab, .mvf__chip, .fchip {
  transition: border-radius var(--dur-m) var(--spring), transform var(--dur-m) var(--spring), box-shadow var(--dur-s) var(--ease-effect),
    background-color var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect), filter var(--dur-s) var(--ease-effect), flex-grow var(--dur-m) var(--spring); }
/* Press. Botones chicos y medianos (32/40): capa de estado (12% de su tinta) y un
   encogimiento leve; la píldora NO cambia de forma (a ese tamaño el morph a
   cuadrado se veía raro). Los grandes (48/56) y el FAB sí hacen el morph
   Expressive: la píldora pasa a radio 16. */
.shrhero__btn:active, .keyrow__rev:active, .copybtn:active, .catdet-monthchip:active, .offbar__btn:active,
.set__btn:active, .imp-confirm:active, .imp-cancel:active, .keyform__btn:active:active, .perpill:not(.perpill--fixed):active {
  transform: scale(.98); box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 12%, transparent); }
.empty__btn:active, .cdlg__btn:active, .mdet__act:active, .notif-nudge__act:active, .mvf__submit:active, .upd-dialog__go:active, .login-card__btn:active {
  border-radius: var(--r-m); transform: scale(.97); box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 12%, transparent); }
.fab:active { border-radius: var(--r-m); transform: scale(.94); }
.mvf__chip:active, .fchip:active, .mvf__tog:active, .mrow:active, .catrow:active, .shrtile:active, .setlist__row:active, .setpill:active, .moresheet__tile:active, .bkpick__row:active {
  box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 10%, transparent); }
/* Botones de ícono: 40px mínimo (M3 "small"). */
.pill-lead, .modal__x, .mhead__search, .mhead__ava, .avatar-btn, .vrow__grip, .rail__toggle { min-width: 40px; min-height: 40px; }

/* Alto contraste del sistema: los grises decorativos suben a muted y los
   divisores se ven; en forced-colors (Windows) las tarjetas recuperan un borde
   y los controles custom conservan su dibujo. */
@media (prefers-contrast: more) {
  :root { --faint: var(--muted); --outline: var(--muted); --accent-soft: color-mix(in srgb, var(--accent) 30%, transparent); }
}
@media (forced-colors: active) {
  .tcard, .cmpstep, .mrow, .modal__panel, .mdet, .moresheet__panel, .catpick__sheet, .upd-dialog__panel, .notif-nudge, .toast, .tabbar, .keyrow, .setrow, .mvf__f input, .cardform input { border: 1px solid CanvasText; }
  .setrow input, .bkpick__radio, .splitbar span, .cuota__fill, .bkcard__track span, .ivsg__seg, .shc__bar > span, .cmap__in, .catspark__bar, .tabbar__tab::before, .rail--collapsed .rail__btn::before { forced-color-adjust: none; }
  .setrow input { border-color: ButtonText; background: Canvas; }
  .setrow input::after { background: ButtonText; }
  .setrow input:checked { background: Highlight; border-color: Highlight; }
  .setrow input:checked::after { background: HighlightText; background-image: none; }
  .fab, .mvf__submit, .newbtn, .rail__fab { border: 2px solid ButtonText; }
}
/* Menos movimiento: todo lo que se mueve o muta queda quieto; los fades se van al instante. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .spinner { clip-path: circle(50%); }
}

/* Breakpoint medium (600–959, M3): tablet, plegable abierto, teléfono apaisado.
   Rail compacto de 96px (sólo íconos + etiqueta chica, con el FAB adentro) en
   vez de la barra inferior estirada, y el Inicio/Categorías a dos
   columnas. El header por vista sigue (sin avatar: ya está en el rail). */
@media (min-width: 600px) and (max-width: 959px) {
  .rail { display: flex; width: 96px; background: var(--bg); }
  .rail__toggle { display: none; }
  .tabbar, .tabguard, .fab, .mhead__ava { display: none !important; }
  .stage { padding: 0 24px 32px; }
  .rsm-grid2, .catgrid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   Alta de movimiento: "B3 · Lista agrupada con teclado propio"
   (handoff design_handoff_carga_b3). Es LA plantilla del alta, en el celular y
   en la compu (movementFormShellMobile() en app.js); lo que es del teclado
   táctil va en los @media (max-width: 959px) de más abajo.
   ========================================================================== */
/* Piezas que el alta mobile agrega a componentes compartidos (apagadas en desktop). */
.mvf__fav { display: none; }
.mvf__chipic { display: inline-flex; }
.mvf__chipslbl { display: none; }
/* Selector de categoría (todas las plataformas): buscador, "Más usadas" y "Las
   demás"; cada tile con el color de su categoría y la elegida en círculo lima. */
.catpick__search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; margin-bottom: 14px;
  border-radius: var(--r-full); background: var(--card-deep); color: var(--faint); }
.catpick__search svg { width: 18px; height: 18px; flex-shrink: 0; }
.catpick__search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text);
  font: inherit; font-size: max(var(--t-body), 16px); outline: none; }
.catpick__search input::placeholder { color: var(--faint); }
.catpick__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.catpick__search:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.catpick__sec { display: flex; flex-direction: column; gap: 10px; }
.catpick__sec[hidden] { display: none; }
.catpick__seclbl { font-size: var(--t-body-m); font-weight: 500; color: var(--muted); }
.catpick__sep { height: 1px; background: var(--outline); margin: 14px -20px; }
.catpick__sep[hidden] { display: none; }
.catpick--cats .catpick__sheet { max-height: 88vh; }
.catpick--cats .catpick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; padding-bottom: 0; }
.catpick--cats .catpick__sec:last-of-type .catpick__grid { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.catpick--cats .mvf__catic { width: 48px; height: 48px;
  background: color-mix(in srgb, var(--cf, var(--muted)) 16%, transparent); color: var(--ct, var(--muted)); }
.catpick--cats .catpick__grid--top .mvf__catic { width: 56px; height: 56px; }
.catpick--cats .mvf__cat.active .mvf__catic { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--accent-ink);
  outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.catpick--cats .mvf__cat.active .mvf__catlbl { color: var(--accent-ink); font-weight: 700; }
/* Tile "Nueva" al final de la grilla: crear la categoría desde el selector del alta. */
.catpick--cats .mvf__cat--new .mvf__catic { background: transparent; border: 1.5px dashed var(--accent-ink); color: var(--accent-ink); }
.catpick--cats .mvf__cat--new .mvf__catlbl { color: var(--accent-ink); font-weight: 600; }
.catpick--cats .mvf__cat[hidden] { display: none; }
.catpick__none { margin: 8px 0 0; color: var(--muted); font-size: var(--t-body-m); }
.catpick__none[hidden] { display: none; }
@media (min-width: 640px) { .catpick--cats .catpick__grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } }

/* Sheet: 16px de gutter, cabecera con la ✕ a la izquierda y sublínea al scrollear. */
.modal__panel--b3 { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
.modal__panel--b3 .modal__head { margin: 0 -16px 0; padding: 18px 16px 10px; justify-content: flex-start; gap: 10px; }
.modal__panel--b3 .modal__head > .modal__x { margin-left: auto; }
/* El fade de 12px que cuelga de la cabecera (::after) pisaba el borde de arriba
   de la tarjeta del monto, que arranca pegada: sólo hace falta cuando hay
   contenido pasando por detrás, o sea con el panel scrolleado. */
.modal__panel--b3 .modal__head::after { opacity: 0; transition: opacity var(--dur-s) var(--ease-effect); }
.modal__panel--b3.modal__panel--scrolled .modal__head::after { opacity: 1; }
.modal__ttl { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.modal__ttl h2 { margin: 0; }
.modal__sub { font-size: var(--t-body-s); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-height: 0; opacity: 0; transition: max-height var(--dur-m) var(--spring-soft), opacity var(--dur-s) var(--ease-effect); }
.modal__sub[hidden] { display: none; }
.modal__panel--scrolled .modal__sub { max-height: 20px; opacity: 1; }
.modal__sub b { font-weight: 600; }
.mvm__neg { color: var(--neg-ink); }
.mvm__pos { color: var(--accent-ink); }

.mvf--b3 { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.mvf--b3 .mvf__dupnote { margin: 0; }
/* ---- Tarjeta del monto ---- */
.mvm__amt { background: var(--card); border-radius: var(--r-l); padding: 14px; display: flex; flex-direction: column; gap: 12px; }
/* Tipo: el título del alta ES el selector ("Nuevo gasto ▾"), en una píldora como
   la del mes —lo que en la app ya quiere decir "tocá para cambiar"—. Va TONAL (el
   color del tipo, mezclado con la superficie del sheet) y con un aro del mismo tono:
   en card-deep liso se perdía contra surface-high en oscuro (#302D2A sobre #2C2926)
   y no se leía como tocable. Coral el gasto, lima el ingreso, neutra la transferencia;
   la palabra del tipo y la flecha van en la tinta del tono. */
.mvm__tipopill { --tp: var(--muted); --tp-ink: var(--muted);
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 16px; margin-left: -4px;
  border: none; border-radius: var(--r-full); color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--tp) 12%, var(--surface-high));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tp-ink) 60%, transparent);
  font: inherit; font-weight: 700; white-space: nowrap;
  transition: background-color var(--dur-s) var(--ease-effect), transform var(--dur-m) var(--spring); }
.mvm__tipopill--egreso { --tp: var(--neg); --tp-ink: var(--neg-ink); }
.mvm__tipopill--ingreso { --tp: var(--accent); --tp-ink: var(--accent-ink); }
@media (hover: hover) { .mvm__tipopill:not(:disabled):hover { background: color-mix(in srgb, var(--tp) 18%, var(--surface-high)); } }
.mvm__tipopill:active { transform: scale(.97); background: color-mix(in srgb, var(--tp) 22%, var(--surface-high)); }
.mvm__tipopill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.mvm__tipopill:disabled { cursor: default; background: transparent; box-shadow: none; padding: 0; margin: 0; }
.mvm__tipopill:disabled .mvm__tipochev { display: none; }
.mvm__tipochev { width: 22px; height: 22px; margin-right: -2px; color: var(--tp-ink); stroke-width: 2.4; flex-shrink: 0; }
.mvm__tipopill .mvm__tipow { color: var(--tp-ink); }
@media (forced-colors: active) { .mvm__tipopill:not(:disabled) { border: 1px solid ButtonText; } }
.mvm__tipopill--transfer .mvm__tipow { color: var(--text); }
.bkpick__row--off { opacity: .45; cursor: default; }
.mvm__disp { display: flex; flex-direction: column; gap: 8px; padding: 0 6px 2px; }
.mvm__lbl { font-size: var(--t-body-m); font-weight: 500; color: var(--muted); }
/* El número ES el input (#mv-monto, teclado decimal del sistema): grande, sin caja. */
.mvm__numrow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mvm__num { position: relative; display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; cursor: text; }
.mvm__sym { font-size: var(--amt-fs, var(--t-display-l)); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05; color: var(--text); flex-shrink: 0; }
.mvm__sym--empty { color: var(--faint); }
.mvm__amtin { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; margin: 0; color: var(--text);
  font: inherit; font-size: var(--amt-fs, var(--t-display-l)); font-weight: 800; letter-spacing: var(--tracking-tight); line-height: 1.05;
  font-variant-numeric: tabular-nums; caret-color: var(--accent); outline: none; }
.mvm__amtin::placeholder { color: var(--faint); }
/* Medidor invisible del número (fitMontoFont): mismo texto y tipografía, a tamaño base. */
.mvm__amtmeasure { position: absolute; visibility: hidden; pointer-events: none; white-space: pre; left: 0; top: 0;
  font-size: var(--t-display-l); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.mvm__amtin:focus-visible { outline: none; }
/* Resultado de la cuenta en vivo ("= 12.400"), en lima, debajo del número. */
.mvm__disp .mvf__calc { margin: -4px 0 0; font-size: var(--t-title); font-weight: 700; }
.mvm__numrow .mvf__curwrap { flex-shrink: 0; }
.mvm__numrow .mvf__curbtn { height: 32px; padding: 0 9px 0 12px; font-size: var(--t-body-s); }
/* Pegado al borde derecho: el menú abre hacia adentro, no centrado. */
.mvm__numrow .mvf__curmenu { left: auto; right: 0; transform: none; }
.mvm__hint { font-size: var(--t-body-s); color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvm__hint[hidden] { display: none; }
/* Tira de operadores pegada al teclado (va en el pie sticky, que queda encima
   del teclado). Mientras se escribe el monto ocupa el lugar de Guardar. */
.mvm__ops { display: flex; align-items: center; gap: 6px; }
.mvm__ops[hidden] { display: none; }
.mvm__op { flex: 1 1 0; height: 44px; min-width: 0; border: none; border-radius: var(--r-full); background: var(--accent-soft);
  color: var(--accent-ink); font: inherit; font-size: var(--t-headline-s); font-weight: 700; cursor: pointer; padding: 0;
  transition: border-radius var(--dur-m) var(--spring), box-shadow var(--dur-s) var(--ease-effect); }
.mvm__op:active { border-radius: var(--r-s); box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 12%, transparent); }
.mvm__next { flex: 1.6 1 0; height: 44px; border: none; border-radius: var(--r-full); background: var(--accent); color: var(--on-accent);
  font: inherit; font-size: var(--t-body-m); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; white-space: nowrap; }
.mvm__next svg { width: 18px; height: 18px; }
.mvm__next:active { filter: brightness(.95); }
.mvf--b3.mvf--amtfocus .mvf__submit, .mvf--b3.mvf--chipsdock .mvf__submit { display: none; }
/* Con el teclado arriba el pie es sólo la tira o los sugeridos: pegados a él, sin aire de más. */
.mvf--b3.mvf--amtfocus .mvf__foot { padding-bottom: 8px; }
.mvf--b3.mvf--chipsdock .mvf__foot { padding-bottom: 0; }
.mvf--b3.mvf--chipsdock .mvf__foot .mvf__chipswrap { margin-bottom: 0; }

/* ---- Lista agrupada: filas de 52px; el grupo recorta a 20 y entre filas quedan 6 + 3 de aire ---- */
.mvm__group { display: flex; flex-direction: column; gap: 3px; }
.mvm__group > .mvm__first { border-start-start-radius: var(--r-group); border-start-end-radius: var(--r-group); }
.mvm__group > .mvm__last { border-end-start-radius: var(--r-group); border-end-end-radius: var(--r-group); }
.mvm__row { position: relative; min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 8px; margin: 0;
  width: 100%; box-sizing: border-box; border: none; border-radius: var(--r-group-in); background: var(--card-deep); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: opacity var(--dur-s) var(--ease-effect); }
.mvm__row[hidden] { display: none; }
.mvm__row:disabled { opacity: .45; cursor: default; }
.mvm__row:active { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 8%, transparent); }
.mvm__ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-s); background: var(--surface-high); color: var(--muted);
  display: grid; place-items: center; }
.mvm__ic svg, .mvm__ic .gic { width: 18px; height: 18px; stroke-width: 1.8; }
.mvm__lab { width: 74px; flex-shrink: 0; font-size: var(--t-body-m); font-weight: 500; color: var(--muted); }
.mvm__val { flex: 1; min-width: 0; font-size: var(--t-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvm__val--empty { color: var(--faint); font-weight: 500; }
.mvm__val--warn { color: var(--neg-ink); }
.mvm__meta { font-size: var(--t-body-s); color: var(--muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mvm__chev { width: 18px; height: 18px; color: var(--faint); flex-shrink: 0; transition: transform var(--dur-m) var(--spring); }
.mvm__date { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; padding: 0; border: none; }
/* Tarjeta nueva (inputs inline) y la fila "El resumen · Cobrado | Aviso" viven en el grupo. */
.mvm__row--block { display: block; padding: 10px; cursor: default; margin-top: 0; }
.mvm__row--block input { background: var(--surface-high); }
.mvm__row--cobro { padding: 10px 10px 10px 14px; cursor: default; --choice-bg: var(--surface-high); }
.mvf--b3:not(.mvf--transfer) .mvm__row--dest { display: none; }
/* Las puntas, dentro de la tarjeta del monto. Cada punta es una celda (ícono,
   rótulo chico arriba, valor abajo; el saldo como tercera línea). En un gasto o un
   ingreso hay una sola ("Sale de" / "Entra a"); en una transferencia van las dos
   lado a lado con la flecha: "Sale de → Entra a". */
.mvm__flow { display: flex; align-items: stretch; gap: 4px; }
.mvm__flow > .mvm__row { flex: 1 1 0; min-width: 0; min-height: 56px; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 1px; align-content: center; padding: 8px 10px; border-radius: var(--r-m); background: var(--card-deep); text-align: start; }
.mvm__flow .mvm__ic { grid-row: 1 / span 3; align-self: center; width: 32px; height: 32px; background: var(--surface-high); }
.mvm__flow .mvm__lab { width: auto; font-size: var(--t-label-s); line-height: 1.2; }
.mvm__flow .mvm__val { font-size: var(--t-body-m); line-height: 1.25; }
.mvm__flow .mvm__meta { grid-column: 2; font-size: var(--t-label-s); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mvm__flow .mvm__meta:empty { display: none; }
/* Sin saldo (Efectivo, una tarjeta, el destino vacío) el ícono abarca sólo las dos
   líneas de texto: si seguía tomando tres, la fila fantasma del saldo dejaba el texto
   ~5px más arriba que el ícono. */
.mvm__flow > .mvm__row:has(.mvm__meta:empty) .mvm__ic { grid-row: 1 / span 2; }
.mvm__flow .mvm__chev { display: none; }
/* Una celda escondida (la de la cuenta en otra moneda, syncMvAccFx) se esconde de verdad: el
   display: grid de arriba le ganaba al [hidden] de .mvm__row, que va antes. */
.mvm__flow > .mvm__row[hidden] { display: none; }
.mvm__flowarr { flex: none; align-self: center; display: grid; place-items: center; color: var(--muted); }
.mvm__flowarr svg { width: 16px; height: 16px; }
/* En un gasto o un ingreso la punta queda sola pero del MISMO tamaño que en una
   transferencia (media fila menos la flecha): sólo se van la flecha y la otra celda. */
.mvf--b3:not(.mvf--transfer) .mvm__flowarr { display: none; }
.mvf--b3:not(.mvf--transfer) .mvm__flow > .mvm__row--origen { flex: 0 1 calc((100% - 24px) / 2); }
/* Cuenta en otra moneda que el monto (syncMvAccFx): la otra mitad de la fila dice
   cuánto le sale a la cuenta en SU moneda. Las dos celdas van mitad y mitad. */
.mvf--b3:not(.mvf--transfer) .mvm__flow:has(> .mvm__row--acfx:not([hidden])) > .mvm__row--origen { flex: 1 1 0; }
.mvf--b3.mvf--transfer .mvm__row--acfx { display: none; }
.mvm__row--acfx .mvm__ic { color: var(--accent-ink); }
.mvm__row--acfx .mvm__val { font-variant-numeric: tabular-nums; }
/* Lo que dijo el banco (no un estimado): el valor en la tinta del acento. */
.mvm__row--acfx-exact .mvm__val { color: var(--accent-ink); }
/* La hoja (alta) y el modal (detalle) para poner lo que cobró la cuenta. */
.acfx { display: flex; flex-direction: column; gap: 12px; }
.acfx__lead { margin: 0; font-size: var(--t-body-m); color: var(--muted); line-height: 1.4; }
.acfx__field { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: var(--r-group);
  background: var(--card-deep); cursor: text; }
.acfx__cur { font-size: var(--t-title); font-weight: 700; color: var(--muted); }
.acfx__in { flex: 1; min-width: 0; border: none; background: transparent; padding: 0; color: var(--text); outline: none;
  font: inherit; font-size: var(--t-headline-s); font-weight: 800; letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums;
  caret-color: var(--accent); }
.acfx__in::placeholder { color: var(--faint); }
.acfx__in:focus-visible { outline: none; } /* el foco lo marca el campo entero */
.acfx__field:focus-within { box-shadow: 0 0 0 3px var(--focus); }
.acfx__rate { margin: 0; min-height: 1.4em; font-size: var(--t-body-m); font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.acfx__est { margin: 0; font-size: var(--t-body-s); color: var(--muted); font-variant-numeric: tabular-nums; }
.acfx__clear { align-self: stretch; }
/* Una transferencia mueve plata: no tiene categoría, ni se repite, ni se comparte, ni
   lleva notas (mvClearForTransfer limpia lo que se hubiera elegido antes). */
.mvf--b3.mvf--transfer #mv-cat-row, .mvf--b3.mvf--transfer .mvm__group--x { display: none; }
/* Título: en reposo es una fila más; con el foco se vuelve el campo (label lima,
   anillo, ✕) y las filas de abajo se apagan. */
.mvm__in { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font: inherit;
  font-size: max(var(--t-body), 16px); font-weight: 600; padding: 0; outline: none; }
.mvm__in::placeholder { color: var(--faint); font-weight: 500; }
.mvm__in:focus, .mvm__in:focus-visible { outline: none; box-shadow: none; } /* el anillo lo lleva la fila */
.mvm__clear { display: none; width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--surface-high); color: var(--muted);
  flex-shrink: 0; cursor: pointer; font: inherit; font-size: var(--t-body-m); }
.mvf--titling .mvm__row--title { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "lab clear" "in clear";
  align-items: center; gap: 2px 12px; padding: 10px 10px 10px 16px; min-height: 64px; box-shadow: inset 0 0 0 2px var(--accent); }
.mvf--titling .mvm__row--title .mvm__ic, .mvf--titling .mvm__row--title .mvm__chev { display: none; }
.mvf--titling .mvm__row--title .mvm__lab { grid-area: lab; width: auto; font-size: var(--t-body-s); font-weight: 600; color: var(--accent-ink); }
.mvf--titling .mvm__row--title .mvm__in { grid-area: in; font-size: max(var(--t-title-s), 16px); font-weight: 500; }
.mvf--titling .mvm__row--title .mvm__clear { grid-area: clear; display: grid; place-items: center; }
/* Con el teclado del celular arriba: las demás filas se apagan y la tarjeta del
   monto se va (el monto queda dicho en la cabecera). En la compu no hace falta. */
@media (max-width: 959px) {
  .mvf--titling .mvm__row:not(.mvm__row--title), .mvf--titling .mvm__group--x { opacity: .55; }
  .mvf--titling .mvm__amt { display: none; }
  .modal__panel--titling .modal__sub { max-height: 20px; opacity: 1; }
}
/* Compu: los sugeridos van debajo del Título mientras se escribe (dockMvChips). */
.mvf--chipsinline .mvm__group > .mvf__chipswrap { display: flex; align-items: center; padding: 8px 10px; background: var(--card-deep);
  border-radius: var(--r-group-in); }
.mvf--chipsinline .mvm__group > .mvf__chipswrap.mvm__last { border-end-start-radius: var(--r-group); border-end-end-radius: var(--r-group); }
.mvf--chipsinline .mvf__chipslbl { display: none; }
.mvf--chipsinline .mvf__chips { margin: 0; padding: 0; }

/* ---- Cargar desde una foto (readReceiptPhoto) ----
   El botón es un ícono en la línea del monto, al lado de la moneda: no se roba una
   fila. Leyendo: la cámara pasa a spinner, los campos a rayas de carga y Guardar se
   apaga. Lo que salió de la foto lleva un puntito en tinta lima (.mvm--photo). */
.mvm__photo { flex: none; width: 40px; height: 40px; border: none; border-radius: var(--r-full); padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; background: var(--card-deep); color: var(--accent-ink); }
.mvm__photo:hover { filter: brightness(1.08); }
.mvm__photo:disabled { cursor: default; }
.mvm__photo svg { width: 20px; height: 20px; }
.mvm__photo svg:not(.mvm__photoic) { display: none; }
.mvm__photo.is-busy .mvm__photoic { display: none; }
.mvm__photo.is-busy svg:not(.mvm__photoic):not(.mvm__stopic) { display: block; animation: toast-spin .9s linear infinite; }
.mvf--transfer .mvm__photo { display: none; }
/* Cargar con la voz (startVoice): el mismo botón redondo, con el micrófono. Escuchando
   pasa a coral con un cuadradito de "parar" y un aro que late. */
.mvm__voice.is-rec { background: var(--neg); color: var(--on-neg); animation: mv-rec 1.4s var(--ease-effect) infinite; }
.mvm__voice.is-rec .mvm__photoic { display: none; }
.mvm__voice.is-rec .mvm__stopic { display: block; }
@keyframes mv-rec {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--neg) 45%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--neg) 0%, transparent); }
}
/* ---- Grabar con la voz (startVoice) ----
   El medidor es el mismo en los dos lugares: tiempo, el aro de los 30 s (.vring,
   lo mueve voiceTick) y las ondas con el nivel del micrófono (.vwave). */
.vring { flex: none; width: 28px; height: 28px; transform: rotate(-90deg); }
.vring circle { fill: none; stroke-width: 4; }
.vring__bg { stroke: var(--card-deep); }
.vring__fg { stroke: var(--accent-ink); stroke-linecap: round; stroke-dasharray: 75.4; }
.vwave { display: flex; align-items: center; gap: 3px; height: 30px; min-width: 0; overflow: hidden; }
.vwave i { flex: none; width: 4px; height: 12%; border-radius: 2px; background: var(--neg); transition: height 90ms linear; }
/* Barra de grabación de abajo (fabRecHtml), desde el micrófono de arriba del +. */
.vrec { position: fixed; inset: auto 0 0 0; z-index: 51; pointer-events: none; }
body.vrec-on .tabbar { visibility: hidden; }
.vrec__bar { position: absolute; left: 12px; right: 96px; bottom: calc(20px + env(safe-area-inset-bottom)); height: 56px; display: flex; align-items: center;
  gap: 8px; padding: 0 12px 0 5px; border-radius: var(--r-full); background: var(--surface-high); box-shadow: var(--e3); pointer-events: auto;
  animation: vrec-in var(--dur-m) var(--spring) both; }
.vrec__x { flex: none; width: 46px; height: 46px; border: none; border-radius: var(--r-full); background: var(--card-deep); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; padding: 0; }
.vrec__x svg { width: 18px; height: 18px; }
.vrec__dot { flex: none; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--neg); animation: vrec-blink 1s steps(2, start) infinite; }
.vrec__time, .mvm__vtime { font-variant-numeric: tabular-nums; font-weight: 700; }
.vrec .vwave { flex: 1; }
.vrec__chip { position: absolute; right: 12px; bottom: calc(20px + env(safe-area-inset-bottom) + 72px); padding: 8px 12px;
  border-radius: var(--r-full); background: var(--surface-high); box-shadow: var(--e2); font-size: var(--t-body-s); font-weight: 600; }
@keyframes vrec-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes vrec-blink { to { visibility: hidden; } }
/* Desde el alta: la tarjeta del monto es el grabador (C) y después dice
   "Entendiendo…" (D); el pie cambia Guardar por Cancelar · Terminar. */
.mvm__vrec, .mvm__vthink { display: flex; flex-direction: column; gap: 12px; }
.mvm__vrec[hidden], .mvm__vthink[hidden] { display: none; }
.mvm__vthink { flex-direction: row; align-items: center; }
.mvm__vrow { display: flex; align-items: center; gap: 12px; }
.mvm__vstop { flex: none; width: 44px; height: 44px; border: none; border-radius: var(--r-full); background: var(--neg); color: var(--on-neg);
  display: grid; place-items: center; cursor: pointer; padding: 0; animation: mv-rec 1.4s var(--ease-effect) infinite; }
.mvm__vstop svg { width: 20px; height: 20px; }
.mvm__vtxt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mvm__vtxt b { font-weight: 800; }
.mvm__vtxt span { color: var(--muted); font-size: var(--t-body-s); }
.mvm__vtime { font-size: var(--t-title-m); }
.mvm__vrec .vwave { height: 34px; }
.mvm__vspin { flex: none; width: 44px; height: 44px; border-radius: var(--r-full); background: var(--card-deep); color: var(--accent-ink); display: grid; place-items: center; }
.mvm__vspin svg { width: 22px; height: 22px; animation: toast-spin .9s linear infinite; }
.mvm__vcancel { flex: none; border: none; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; padding: 8px; }
.mvm__heard { margin: 0; font-size: var(--t-body-s); color: var(--muted); overflow-wrap: anywhere; }
.mvm__heard[hidden] { display: none; }
.mvf--listening .mvm__amt, .mvf--thinking .mvm__amt { box-shadow: inset 0 0 0 2px var(--neg); }
.mvf--thinking .mvm__amt { box-shadow: inset 0 0 0 2px var(--accent-ink); }
.mvf--listening #mv-amt-disp, .mvf--listening #mv-flow, .mvf--thinking #mv-amt-disp, .mvf--thinking #mv-flow { display: none; }
.mvf--listening .mvm__group { opacity: .45; pointer-events: none; }
.mvf__vfoot { display: flex; gap: 10px; }
.mvf__vfoot[hidden] { display: none; }
.mvf__vfoot > * { flex: 1; }
.mvf__vbtn { border: none; border-radius: var(--r-full); background: var(--card-deep); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; padding: 14px 16px; }
.mvf--listening .mvf__foot > button[type="submit"], .mvf--listening #mv-ops { display: none; }
@media (prefers-reduced-motion: reduce) {
  .vrec__bar, .vrec__dot, .mvm__vstop, .mvm__vspin svg { animation: none; }
  .vwave i { transition: none; }
}
.mvf--reading #mv-monto, .mvf--reading #mv-amt-sym, .mvf--reading #mv-titulo, .mvf--reading #mv-cat-val, .mvf--reading #mv-fecha-label {
  color: transparent; border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--card-deep), var(--outline), var(--card-deep)) 0 0 / 200% 100%;
  animation: mv-shimmer 1.4s linear infinite; }
.mvf--reading #mv-titulo::placeholder, .mvf--reading #mv-monto::placeholder { color: transparent; }
@keyframes mv-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
.mvm__row.mvm--photo::after { content: ''; order: 1; flex: none; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--accent-ink); }
.mvm__row.mvm--photo .mvm__chev { order: 2; }
#mv-amt.mvm--photo .mvm__lbl::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: middle;
  border-radius: var(--r-full); background: var(--accent-ink); }
.cdlg__photo { display: block; max-width: 100%; max-height: 60vh; margin: 0 auto var(--sp-3); border-radius: var(--r-s); object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
  .mvm__voice.is-rec, .mvf--reading .mvm__photo svg, .mvf--reading #mv-monto, .mvf--reading #mv-amt-sym, .mvf--reading #mv-titulo,
  .mvf--reading #mv-cat-val, .mvf--reading #mv-fecha-label { animation: none; }
}

/* ---- Extras: switches que expanden su panel en el lugar ---- */
.mvx { display: flex; flex-direction: column; background: var(--card-deep); border-radius: var(--r-group-in); }
.mvx__head { display: flex; align-items: center; gap: 12px; min-height: 50px; width: 100%; box-sizing: border-box; padding: 0 12px 0 16px;
  border: none; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: inherit; }
.mvf__tog.mvx__head, .mvf__tog.mvx__head.active { background: transparent; color: var(--text); padding: 0 12px 0 16px; justify-content: flex-start; }
.mvf__tog.mvx__head:disabled { opacity: .45; }
.mvx__ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); display: grid; place-items: center; }
.mvx__ic svg { width: 20px; height: 20px; }
.mvf__tog.active .mvx__ic { color: var(--accent-ink); }
#mv-x-cuota .mvx__ic { color: var(--purple); }
.mvx__lbl { flex: 1; min-width: 0; font-size: var(--t-body); font-weight: 600; }
/* Switch M3 (52×32, como .setrow input): perilla chica apagada, grande con ✓ prendida. */
.mvx__sw { position: relative; flex-shrink: 0; width: 52px; height: 32px; border-radius: var(--r-full); background: transparent;
  box-shadow: inset 0 0 0 2px var(--faint);
  transition: background-color var(--dur-s) var(--ease-effect), box-shadow var(--dur-s) var(--ease-effect); }
.mvx__sw::after { content: ''; position: absolute; top: 50%; left: 8px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  background: var(--faint);
  transition: transform var(--dur-m) var(--spring), width var(--dur-m) var(--spring), height var(--dur-m) var(--spring),
    margin var(--dur-m) var(--spring), left var(--dur-m) var(--spring), background-color var(--dur-s) var(--ease-effect); }
.mvf__tog.active .mvx__sw { background: var(--accent); box-shadow: none; }
.mvf__tog.active .mvx__sw::after { left: 4px; width: 24px; height: 24px; margin-top: -12px; transform: translateX(20px); background: var(--on-accent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C6F24E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>");
  background-size: 14px; background-position: center; background-repeat: no-repeat; }
.mvx__body { padding: 0 12px 14px 16px; display: flex; flex-direction: column; gap: 12px; scroll-margin-bottom: 96px; }
.mvx__body[hidden] { display: none; }
.mvx__hint { margin: 0; font-size: var(--t-body-s); color: var(--muted); line-height: 1.35; }
.mvx__hint[hidden] { display: none; }
.mvx__cuota { display: flex; align-items: center; gap: 10px; }
.mvx__minilbl { font-size: var(--t-body-m); font-weight: 500; color: var(--muted); }
.mvx__de { font-size: var(--t-body-m); color: var(--muted); }
.mvx__cuota input { width: 52px; height: 44px; border: none; border-radius: var(--r-s); background: var(--surface-high); color: var(--text);
  text-align: center; font: inherit; font-size: max(var(--t-title-s), 16px); font-weight: 600; padding: 0; }
.mvx__cuota input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.mvx__chip { margin-left: auto; height: 28px; padding: 0 10px; border-radius: var(--r-chip); background: var(--purple-soft); color: var(--purple);
  display: inline-flex; align-items: center; font-size: var(--t-label); font-weight: 500; white-space: nowrap; }
.mvx__chip[hidden] { display: none; }
/* Extras como filas (Se paga · Compartir · Notas): cada una abre su sheet
   (openMvxSheet). Los switches y paneles viven ocultos en #mv-x-store y el sheet
   se lleva el panel mientras está abierto. */
.mvx-store { display: none !important; }
.mvm__ic--on { background: var(--accent-soft); color: var(--accent-ink); }
.mvm__val--on { color: var(--accent-ink); }
.mvm__valsub { font-weight: 500; color: var(--muted); }
.mvm__code { font-family: var(--code); font-size: var(--t-body-s); font-weight: 500; color: var(--muted); }
/* El panel adentro del sheet: sin la caja de fila, sobre el fondo del sheet. */
.mvx--sheet { background: transparent; border-radius: 0; }
.mvx--sheet[hidden] { display: none; }
.mvx--sheet > .mvx__body { padding: 0; }
.mvx--sheet .mvx__cuota input, .mvx--sheet .mvx__more .mvf__f input,
.mvx--sheet .mvf__splitamtin { background: var(--card-deep); }
.mvx--sheet .mvf__splitbar::-webkit-slider-thumb { box-shadow: -6px 0 0 var(--surface-high), 6px 0 0 var(--surface-high); }
.mvx--sheet .mvf__splitbar::-moz-range-thumb { box-shadow: -6px 0 0 var(--surface-high), 6px 0 0 var(--surface-high); }
.mvsheet--ajeno .mvf__fnotas { display: none; }
.mvx__more { gap: 10px; }
/* Reintegro: el % y la plata lado a lado (uno sigue al otro), cuándo llega y a dónde. */
.mvx__reinnums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mvx__reinf { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mvx__reinin { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; border-radius: var(--r-m);
  background: var(--card-deep); color: var(--muted); font-weight: 600; }
.mvx__reinin:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.mvx__reinin input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); padding: 0;
  font: inherit; font-size: max(var(--t-title-s), 16px); font-weight: 600; font-variant-numeric: tabular-nums; }
.mvx__reinin input:focus { outline: none; }
.mvx__reingrp .mvm__row { background: var(--card-deep); }
/* En cuotas: "¿Cómo te lo devuelven?" Único · En las cuotas (prorrateado, sin fecha ni destino). */
.mvx__reinmodo { display: flex; flex-direction: column; gap: 6px; }
.mvx__reinmodo[hidden], .mvx__reingrp[hidden] { display: none; }
.mvx__hint--err { color: var(--neg-ink); }
.mvx__more .mvf__f { margin-top: 0; }
.mvx__more .mvf__f input { background: var(--surface-high); }
/* Compartir: shareBlockHtml con otra piel (avatares, % grande, barra Expressive,
   y "¿Quién pagó?" en tarjetas de elección con la deuda de cada una). */
.mvx .mvf__sharerow { gap: 6px; }
.mvx .mvf__sharesplit { margin-top: 0; gap: 2px; }
.mvx .mvf__minilbl { font-size: var(--t-body-m); color: var(--muted); }
.mvx .mvf__splitpct { font-size: var(--t-headline-l); font-weight: 800; letter-spacing: var(--tracking-tight); }
.mvx .mvf__splitbar::-webkit-slider-runnable-track { height: 16px; margin: 14px 0; border-radius: 8px;
  background: linear-gradient(to right, var(--accent) var(--pct), var(--outline) var(--pct)); }
.mvx .mvf__splitbar::-webkit-slider-thumb { margin-top: -14px; background: var(--accent);
  box-shadow: -6px 0 0 var(--card-deep), 6px 0 0 var(--card-deep); }
.mvx .mvf__splitbar::-moz-range-track { height: 16px; background: var(--outline); }
.mvx .mvf__splitbar::-moz-range-progress { height: 16px; }
.mvx .mvf__splitbar::-moz-range-thumb { background: var(--accent); box-shadow: -6px 0 0 var(--card-deep), 6px 0 0 var(--card-deep); }
.mvx .mvf__marks { margin-top: -6px; }
.mvx .mvf__splitamts { margin: 6px 0 8px; }
.mvx .mvf__splitamtin { background: var(--surface-high); }
.mvx .mvf__mark { color: var(--muted); font-size: var(--t-body-s); }
.mvx .mvf__mark.active { color: var(--accent-ink); }
.mvx .mvsheet__none--danger { margin-top: 2px; }

/* ---- Sugeridos acoplados al pie (dockMvChips), arriba del teclado del sistema ---- */
.mvf--b3 .mvf__fchips { display: none; }
.mvf--b3 .mvf__foot .mvf__chipswrap { margin: 0 -16px 10px; padding: 12px 12px 10px; background: var(--card); border-radius: var(--r-l) var(--r-l) 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 8px; }
.mvf--b3 .mvf__foot .mvf__chipslbl { display: block; font-size: var(--t-body-s); font-weight: 500; color: var(--muted); padding-left: 4px; }
/* Una sola fila con scroll de costado: los títulos largos dejaban media segunda fila vacía. */
.mvf--b3 .mvf__chips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; max-height: none; padding: 0;
  scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -12px; padding: 0 12px; }
.mvf--b3 .mvf__chips::-webkit-scrollbar { display: none; }
.mvf--b3 .mvf__chip { flex-shrink: 0; white-space: nowrap; min-height: 40px; padding: 0 12px 0 6px; gap: 8px; font-size: var(--t-body-m); color: var(--text); }
.mvf--b3 .mvf__chipic { width: 28px; height: 28px; border-radius: var(--r-xs); display: grid; place-items: center; flex-shrink: 0;
  background: color-mix(in srgb, var(--cf, var(--muted)) 16%, transparent); color: var(--ct, var(--muted)); }
.mvf--b3 .mvf__chipic .gic { width: 16px; height: 16px; }
.mvf--b3 .mvf__chip--best { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.mvf--b3 .mvf__chiparr { display: none; }

/* ---- Pie: Guardar píldora lima con ✓ ---- */
.mvf--b3 .mvf__foot { margin: 4px -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
.mvf--b3 .mvf__foot { box-shadow: 0 calc(16px + env(safe-area-inset-bottom, 0px)) 0 var(--surface-high); }
.mvf__submit--ic { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--t-body-l); }
.mvf__submit--ic svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* ---- Corregir (compartido ajeno): sólo Título, Categoría, Repetir y Serie ---- */
.mvf--b3.mvf--ajeno .mvm__amt, .mvf--b3.mvf--ajeno .mvm__row--date, .mvf--b3.mvf--ajeno .mvm__row--origen,
.mvf--b3.mvf--ajeno .mvm__row--dest, .mvf--b3.mvf--ajeno .mvm__row--cobro, .mvf--b3.mvf--ajeno .mvm__row--block,
.mvf--b3.mvf--ajeno #mv-x-cuota, .mvf--b3.mvf--ajeno #mv-x-share, .mvf--b3.mvf--ajeno .mvf__fnotas,
.mvf--b3.mvf--ajeno .mvf__destnote { display: none !important; }
.mvf--b3.mvf--ajeno .mvf__fserie { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) {
  .mvm__op, .mvx__sw, .mvx__sw::after, .mvm__chev, .modal__sub { transition: none; }
}

/* Ajustes ▸ Enviar feedback: tipo (grupo conectado) + título + texto + datos técnicos. */
.fbform { display: flex; flex-direction: column; gap: var(--sp-3); }
.fbform__in { width: 100%; border: none; border-radius: var(--r-m); padding: 12px 14px;
  background: var(--card-deep); color: var(--text); font: inherit; font-size: var(--t-body-m); }
.fbform__in::placeholder { color: var(--faint); }
.fbform__in:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.fbform__txt { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.fbform .setcard__hint { margin-top: calc(-1 * var(--sp-2)); }
.fbform__send { padding-inline: 28px; }

/* ---- Pago con una persona: Transferencia con un amigo en una punta ----
   El alta es la de siempre; lo que un pago no usa (categoría, el resumen de la
   tarjeta, sugeridos y los extras) se va, y donde una transferencia dice "esto no
   es un gasto" va qué hace el pago con el saldo (#mv-friendfx). */
.bkpick__sec { padding: 14px 4px 4px; font-size: var(--t-body-s); font-weight: 600; color: var(--muted); }
.bkpick__row--ava .bkcard__ic, .mvm__ic--ava { border-radius: var(--r-full); font-weight: 800; font-size: var(--t-body-m); }
.mvf--b3.mvf--friend #mv-cat-row, .mvf--b3.mvf--friend #mv-cobro,
.mvf--b3.mvf--friend .mvf__destnote, .mvf--b3.mvf--friend .mvf__fchips, .mvf--b3.mvf--friend #mv-chips,
.mvf--b3.mvf--friend .mvm__group--x { display: none !important; }
.mvf__friendfx { margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  border-radius: var(--r-group); background: var(--accent-soft); }
.mvf__friendfx[hidden] { display: none; }
.mvf__fxque { font-size: var(--t-body-s); font-weight: 600; color: var(--accent-ink); }
.mvf__fxrow { display: flex; align-items: center; gap: 10px; }
.mvf__fxrow > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mvf__fxrow small { font-size: var(--t-label-s); color: var(--muted); }
.mvf__fxrow b { font-size: var(--t-body-m); font-weight: 700; font-variant-numeric: tabular-nums; }
.mvf__fxrow svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.mvf__fxok { color: var(--accent-ink); }
.mvf__fxnota { font-size: var(--t-label-s); color: var(--muted); }

/* ---------- Tarjetas de elección ("F3", choiceOptHtml) ----------
   Para elegir dentro de un formulario: Se paga, El resumen, Cuenta/Cajita, el tipo
   de feedback, "Cómo conectar" y la guía. Cada opción es una tarjeta con ícono,
   nombre y qué hace; la elegida va en tono lima con aro accent-ink (el lima lleno
   queda para las acciones). */
.choice { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-2); }
.choice__opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; padding: 10px 12px 11px;
  border: none; border-radius: var(--r-s); background: var(--choice-bg, var(--card-deep)); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; outline: 1px solid transparent; outline-offset: -1px;
  transition: background-color var(--dur-s) var(--ease-effect), outline-color var(--dur-s) var(--ease-effect); }
.choice__opt b { font-size: var(--t-body-m); font-weight: 700; line-height: 1.25; }
.choice__opt small { font-size: var(--t-label); color: var(--muted); line-height: 1.3; }
.choice__ic { display: grid; color: var(--muted); margin-bottom: 2px; }
.choice__ic svg { width: 20px; height: 20px; }
.choice__opt:hover { background: color-mix(in srgb, var(--text) 5%, var(--choice-bg, var(--card-deep))); }
.choice__opt.active { background: color-mix(in srgb, var(--accent) 24%, var(--choice-bg, var(--card-deep))); outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.choice__opt.active .choice__ic { color: var(--accent-ink); }
.choice__opt:disabled { opacity: .45; cursor: default; }
.choice__opt:focus-visible { box-shadow: 0 0 0 3px var(--focus); }
.choice__opt:active:not(:disabled) { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 8%, transparent); }
/* ---------- Lista para tildar (checkRowHtml) ----------
   Elegir VARIAS opciones (con quién compartir una cuenta): filas de lista agrupada
   con lo suyo a la izquierda y un tilde a la derecha. Vacío = un cuadradito con borde; marcado = el
   tilde en tono lima con aro accent-ink, como la tarjeta elegida (nunca lima lleno). */
.checklist { display: flex; flex-direction: column; gap: 2px; }
.checkrow { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 60px; padding: 10px 14px;
  border: none; border-radius: var(--r-group-in); background: var(--choice-bg, var(--card-deep)); color: var(--text);
  font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-s) var(--ease-effect); }
.checklist > .checkrow:first-child { border-top-left-radius: var(--r-group); border-top-right-radius: var(--r-group); }
.checklist > .checkrow:last-child { border-bottom-left-radius: var(--r-group); border-bottom-right-radius: var(--r-group); }
.checkrow__lead { display: grid; flex: none; }
.checkrow__lead .mvf__fav { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font-size: var(--t-label); font-weight: 700; }
.checkrow__t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.checkrow__t b { font-size: var(--t-body-m); font-weight: 700; line-height: 1.25; }
.checkrow__t small { font-size: var(--t-label); color: var(--muted); line-height: 1.3; }
.checkrow__box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; box-sizing: border-box;
  border-radius: var(--r-xs); box-shadow: inset 0 0 0 2px var(--muted); color: var(--accent-ink);
  transition: background-color var(--dur-s) var(--ease-effect), box-shadow var(--dur-s) var(--ease-effect); }
.checkrow__box svg { width: 16px; height: 16px; stroke-width: 3; opacity: 0; transform: scale(.6);
  transition: opacity var(--dur-s) var(--ease-effect), transform var(--dur-s) var(--spring); }
.checkrow.active .checkrow__box { background: color-mix(in srgb, var(--accent) 24%, var(--choice-bg, var(--card-deep))); box-shadow: inset 0 0 0 2px var(--accent-ink); }
.checkrow.active .checkrow__box svg { opacity: 1; transform: none; }
@media (hover: hover) { .checkrow:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 5%, var(--choice-bg, var(--card-deep))); } }
.checkrow:active:not(:disabled) { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, currentColor 8%, transparent); }
.checkrow:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; }
.checkrow:disabled { cursor: default; }
.checkrow:disabled > * { opacity: .45; }
.mvx__payseg { margin-bottom: var(--sp-2); }
/* Con "Con seña" son cuatro: de a dos, así cada una conserva su línea de qué hace. */
.mvx__payseg--4 { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fbform__tipo, .ob__pick, .mcphow__pick { align-self: stretch; }
.setcard .choice { --choice-bg: var(--set-surf, var(--card-deep)); }
/* Muchas opciones (los amigos de un compartido, las monedas): bajan de renglón en
   vez de achicarse hasta no leerse. */
.choice--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.choice__ic .mvf__fav { display: grid; width: 28px; height: 28px; border-radius: 50%; place-items: center;
  font-size: var(--t-label); font-weight: 700; }
.mvf__payer { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: 10px; }
.mvx .mvf__payer { margin-top: 0; }

/* ---------- Riel de opciones ("F2", freqPillsHtml) ----------
   Varias opciones cortas en un riel; la elegida es una tarjeta que flota encima, sin
   color de acento. En oscuro el riel va más oscuro que la superficie y la elegida bien
   más clara, si no casi no se distinguían. Hoy: la frecuencia de "Se repite". */
.optrail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--r-s); background: var(--optrail-track); }
.optrail__opt { min-width: 0; min-height: 40px; padding: 0 8px; border: none; border-radius: calc(var(--r-s) - 3px); background: none;
  color: var(--muted); font: inherit; font-size: var(--t-body-m); font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-s) var(--ease-effect), color var(--dur-s) var(--ease-effect); }
.optrail__opt:hover { color: var(--text); }
/* Una sola fila con todas las opciones (las cuotas rápidas 3 · 6 · 12 · 18). */
.optrail--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mvx__qm .optrail__opt { font-variant-numeric: tabular-nums; }
.optrail__opt.active { background: var(--optrail-on); color: var(--text); font-weight: 700; box-shadow: var(--e1); }
.optrail__opt:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---------------- Cuentas compartidas ----------------
   Una persona es una cara redonda con su inicial (.pava), en el color estable que
   le da personColor(). Se usa en el chip "Lo anotó" de la fila (.chip--who), el
   detalle, el form de una fila ajena, la fila de la cuenta (.pstack, caras
   apiladas) y la lista "Quiénes la usan" de su ficha (.accmem). */
.pava { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-body-m); font-weight: 700; line-height: 1; }
.pava--sm { width: 24px; height: 24px; font-size: var(--t-label-s); }
.pava--xs { width: 18px; height: 18px; font-size: var(--t-label-s); box-shadow: 0 0 0 2px var(--card); }
.pava--chip { width: 14px; height: 14px; font-size: var(--t-label-s); }
.pstack { display: inline-flex; flex-shrink: 0; }
.pstack .pava + .pava { margin-left: -6px; }
.chip--who { color: var(--text); background: var(--chip-bg); padding-left: 3px; }
.mdet__who { display: inline-flex; align-items: center; gap: 8px; }
.accrow__t small.accrow__who { display: flex; align-items: center; gap: 6px; }
/* El pie del alta con una cuenta compartida: quién más lo va a ver. */
.mvf__sharedacc { margin: 2px 0 0; padding: 10px 14px; border-radius: var(--r-m);
  background: var(--card-deep); color: var(--muted); font-size: var(--t-body-s); line-height: 1.35; }
.mvf__sharedacc[hidden] { display: none; }
/* Editar una fila que anotó otro: quién y qué no se cambia. */
.mvf__foreign { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-radius: var(--r-m); background: var(--card-deep); color: var(--muted);
  font-size: var(--t-body-s); line-height: 1.35; }
/* Ficha: quiénes la usan. */
.accmem { margin-bottom: var(--sp-2); }
.accmem__row { cursor: default; }
.accmem__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.accmem__t b { font-weight: 600; }
.accmem__t small { font-size: var(--t-body-s); color: var(--muted); }
.accmem__x { width: 40px; height: 40px; border: none; border-radius: 50%; flex-shrink: 0;
  background: var(--card-deep); color: var(--muted); font: inherit; cursor: pointer; }
.accmem__x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.accmem__add { margin-top: var(--sp-2); }

/* ---------------- Hoja de una cuenta o cajita (crear / editar) ----------------
   Arriba la fila de la cuenta como va a quedar (.accprev, en vivo: accFormSync);
   abajo los campos con su nombre arriba (.accf__field), los títulos de sección en
   .setsub, el color en una sola fila y, al crear, con quién compartirla. */
.accf { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0 var(--sp-1); }
.accf .setsub { margin: var(--sp-3) 0 0; }
.accf__opt { color: var(--muted); font-weight: 500; font-size: var(--t-label); }
/* La vista previa no es un campo: va sin relleno, separada por una rayita, con el
   ícono en su tile teñido como en la lista de Cuentas. */
.accprev { display: flex; align-items: center; gap: 14px; padding: 4px 4px var(--sp-4); margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--outline); }
.accprev__ic { flex-shrink: 0; transition: color var(--dur-s) var(--ease-effect), background-color var(--dur-s) var(--ease-effect); }
.accprev__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.accprev__t b { font-size: var(--t-body-l); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accprev__t small { font-size: var(--t-body-s); color: var(--muted); }
.accprev__who:empty { display: none; }
.accprev__who .mvf__fav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: var(--t-label); font-weight: 700; box-shadow: 0 0 0 2px var(--surface-high); }
.accprev__who .pstack .mvf__fav + .mvf__fav { margin-left: -8px; }
.accf__field { display: flex; flex-direction: column; gap: 2px; padding: 10px var(--sp-4) 8px;
  border-radius: var(--r-group); background: var(--card-deep); cursor: text; }
.accf__field[hidden] { display: none; }
.accf__field > span { font-size: var(--t-label); color: var(--muted); font-weight: 500; }
.accf__field input { border: none; background: transparent; color: var(--text); font: inherit;
  font-size: var(--t-body-l); font-weight: 600; padding: 2px 0; min-height: 32px; width: 100%; outline: none; }
.accf__field input::placeholder { color: var(--faint); font-weight: 500; }
.accf__field:focus-within { box-shadow: 0 0 0 2px var(--accent-ink); }
.accf__hint { margin: 0; font-size: var(--t-body-s); color: var(--muted); line-height: 1.4; }
.accf__hint .helplink { font: inherit; }
.accf__go { margin-top: var(--sp-3); }
/* La paleta (18 colores) en tres filas parejas de seis: se reparten el ancho en vez de quedar sueltos. */
.swatches--row { display: grid; grid-template-columns: repeat(6, 1fr); justify-items: center; gap: 8px 6px; }
.swatches--row .swatch { width: 36px; height: 36px; flex-shrink: 0; }