/* =====================================================================
   Exploremos — Sistema de diseño 2.0 "Noche clara"
   Contrato completo (tokens, componentes con su HTML, reglas): docs/DISENO.md
   Orden del archivo:
     1. Tokens            2. Base y tipografía      3. Botones
     4. Formularios       5. Superficies flotantes  6. Datos (cifras, filas, estados)
     7. Estructura (shell) 8. Pantallas fase 1      9. Módulos existentes
    10. Acceso (auth)     11. Movimiento            12. Movimiento reducido e impresión
   Base: Bootstrap 5.3 (CDN). Colores de marca inyectados desde Ajustes en partials/head.php.
   Reglas: solo tokens (nada de hex sueltos en vistas), sin !important salvo para neutralizar
   utilidades de Bootstrap, un solo botón lleno por pantalla.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   :root = tema claro; [data-bs-theme="dark"] = tema oscuro (el predeterminado).
   Exp.tokens() en app.js lee: --exp-primary --text --muted --faint --control --rule
   --negative --warning --surface --raised --font-text. No cambies esos nombres.
   ===================================================================== */
:root {
  /* Marca (Ajustes) */
  --exp-primary: #059669; --exp-primary-rgb: 5,150,105;
  --exp-secondary: #0F5E6E; --exp-secondary-rgb: 15,94,110;
  --exp-warning: #F97316; --exp-warning-rgb: 249,115,22;
  --exp-danger: #DC2626; --exp-danger-rgb: 220,38,38;

  /* Color: superficies (claro) */
  --ground: #F4F5F7;          /* fondo de la página */
  --surface: #FFFFFF;         /* hojas (cards) */
  --raised: #EEF0F3;          /* chips, campos, filas al pasar, segmentados */
  --overlay: #FFFFFF;         /* menús, hojas inferiores, modales */
  --border: #E3E6EA;          /* borde de hoja */
  --rule: #ECEEF1;            /* línea entre filas */
  --control: #C3C9D0;         /* borde de campos y controles */
  --field: #FFFFFF;
  /* Color: tinta */
  --text: #0E1116;
  --muted: #545B65;           /* 7:1 sobre surface */
  --faint: #6B727C;           /* 4.8:1 sobre surface: solo metadatos */
  /* Color: acento y señales */
  --accent: var(--exp-primary);                                   /* rellenos y gráficos */
  --accent-ink: color-mix(in srgb, var(--exp-primary) 74%, black); /* texto en acento sobre superficie */
  --accent-fill: color-mix(in srgb, var(--exp-primary) 80%, black);/* botón principal */
  --on-accent: #FFFFFF;
  --accent-soft: color-mix(in srgb, var(--exp-primary) 12%, transparent);
  --positive: #13804F;
  --negative: #C62F35;
  --warning: #9A5B06;
  --info: #2563EB;
  --positive-soft: color-mix(in srgb, var(--positive) 12%, transparent);
  --negative-soft: color-mix(in srgb, var(--negative) 10%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 12%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 10%, transparent);

  /* Tipografía: una familia (Plus Jakarta Sans) con dígitos tabulares en cifras */
  --font-text: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-figure: var(--font-text);
  --fs-display: clamp(2.375rem, 1.9rem + 2.4vw, 3.25rem);  /* cifra protagonista 38 → 52 */
  --fs-title: clamp(1.5rem, 1.32rem + .8vw, 1.875rem);     /* título de pantalla 24 → 30 */
  --fs-h2: 1.0625rem;   /* 17: título de sección */
  --fs-h3: 1rem;        /* 16 */
  --fs-figure: 1.25rem; /* 20: cifra de indicador */
  --fs-body: 1rem;      /* 16 */
  --fs-sm: .875rem;     /* 14: secundario */
  --fs-xs: .8125rem;    /* 13: metadatos */
  --fs-2xs: .75rem;     /* 12: etiquetas de la barra inferior y estados (mínimo) */
  --lh-tight: 1.15;
  --lh-body: 1.55;

  /* Espacio (ritmo de 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --gutter: 16px;

  /* Radios */
  --r-xs: 6px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --radius: var(--r-lg); --radius-sm: var(--r-sm);

  /* Elevación (solo lo que flota lleva sombra fuerte) */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);
  --shadow-2: 0 12px 32px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
  --shadow-3: 0 24px 60px rgba(16, 24, 40, .18), 0 4px 12px rgba(16, 24, 40, .08);
  --float-shadow: var(--shadow-2);
  --scrim: rgba(10, 12, 16, .45);

  /* Movimiento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);       /* entradas y respuestas */
  --ease-expo: cubic-bezier(.16, 1, .3, 1);       /* líneas que se dibujan, cifras */
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1); /* hojas, íconos (rebote mínimo) */
  --ease-exit: cubic-bezier(.55, .06, .68, .19);  /* lo que se va */
  --dur-press: 120ms; --dur-hover: 180ms; --dur-ui: 240ms; --dur-enter: 420ms; --dur-sheet: 420ms; --dur-draw: 900ms;
  --stagger: 40ms;
  /* Alias de la versión anterior (vistas sin rediseñar los usan) */
  --t-press: var(--dur-press); --t-hover: var(--dur-hover); --t-ui: var(--dur-ui); --t-enter: var(--dur-enter); --t-sheet: var(--dur-sheet); --t-draw: var(--dur-draw);

  /* Medidas de la estructura */
  --sidebar-w: 256px;
  --topbar-h: 60px;
  --bottom-h: 68px;
  --content-max: 1120px;

  /* Derivados */
  --hairline: color-mix(in srgb, var(--text) 8%, transparent);
  --hairline-strong: color-mix(in srgb, var(--text) 15%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 32%, transparent);
  --sheen: var(--surface);

  /* Compatibilidad con nombres anteriores (vistas y admin.css) */
  --exp-bg: var(--ground); --exp-surface: var(--surface); --exp-surface-2: var(--raised);
  --exp-border: var(--border); --exp-border-strong: var(--control); --exp-text: var(--text);
  --exp-muted: var(--muted); --exp-success: var(--positive); --exp-info: var(--text);
  --exp-font-text: var(--font-text); --exp-font-display: var(--font-figure); --exp-radius: var(--radius);

  /* Bootstrap */
  --bs-body-font-family: var(--font-text);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: var(--lh-body);
  --bs-body-bg: var(--ground);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--raised);
  --bs-primary: var(--accent);
  --bs-primary-rgb: var(--exp-primary-rgb);
  --bs-link-color: var(--text);
  --bs-link-color-rgb: 14,17,22;
  --bs-link-hover-color: var(--accent-ink);
  --bs-border-radius: var(--r-md);
  --bs-border-radius-lg: var(--r-lg);
  --bs-border-radius-sm: var(--r-sm);
  --bs-focus-ring-color: var(--accent-ring);
}

/* Oscuro (predeterminado): grafito frío, superficies por tono, el acento menta solo en datos y acción principal */
[data-bs-theme="dark"] {
  --ground: #0B0C0E;
  --surface: #131518;
  --raised: #1C1F23;
  --overlay: #181B1F;
  --border: #23272C;
  --rule: #1E2125;
  --control: #383D45;
  --field: #1C1F23;
  --text: #F3F4F6;
  --muted: #A6ACB5;          /* 8:1 sobre surface */
  --faint: #828993;          /* 5.1:1 sobre surface */
  --accent: color-mix(in srgb, var(--exp-primary) 58%, #A7F3D0);
  --accent-ink: var(--accent);
  --accent-fill: var(--accent);
  --on-accent: #052419;
  --positive: #52D69B;
  --negative: #FF7B7F;
  --warning: #F2B84B;
  --info: #7DB4FF;
  --positive-soft: color-mix(in srgb, var(--positive) 14%, transparent);
  --negative-soft: color-mix(in srgb, var(--negative) 13%, transparent);
  --warning-soft: color-mix(in srgb, var(--warning) 14%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 13%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 16px 40px rgba(0, 0, 0, .55), 0 0 0 1px #262A30;
  --shadow-3: 0 28px 72px rgba(0, 0, 0, .65), 0 0 0 1px #262A30;
  --float-shadow: var(--shadow-2);
  --scrim: rgba(0, 0, 0, .62);
  --accent-glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --sheen: color-mix(in srgb, var(--surface) 94%, #fff);
  --bs-body-bg: var(--ground);
  --bs-body-color: var(--text);
  --bs-emphasis-color: var(--text);
  --bs-heading-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--raised);
  --bs-link-color: var(--text);
  --bs-link-color-rgb: 243,244,246;
  color-scheme: dark;
}

/* =====================================================================
   2. BASE Y TIPOGRAFÍA
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
body { background: var(--ground); color: var(--text); font-family: var(--font-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.005em; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-text); font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.25; }
h5, .h5 { font-size: 1.125rem; }
h6, .h6 { font-size: 1rem; letter-spacing: -0.01em; }
strong, b, .fw-bold, .fw-semibold { font-weight: 600; }
.fw-800 { font-weight: 700; }
a { color: var(--text); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.min-w-0 { min-width: 0; }
.skip-link { position: absolute; z-index: 2000; top: 8px; left: 8px; background: var(--overlay); color: var(--text); padding: 10px 14px; border-radius: var(--r-sm); box-shadow: var(--shadow-2); }
.visually-hidden { max-width: 1px; }
table.visually-hidden { display: block; width: 1px !important; height: 1px !important; overflow: hidden !important; contain: strict; }
.small, small { font-size: var(--fs-sm); }
.text-muted, .text-body-secondary, .text-secondary { color: var(--muted) !important; }
.text-faint { color: var(--faint) !important; }
.text-uppercase { text-transform: none !important; }
.small-caps { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
hr { border-color: var(--rule); opacity: 1; }
canvas { max-width: 100%; }

/* Cifras: dígitos tabulares y alineados; peso 600 */
.tabular, .money, .num, td.num, .tx-amount, .stat-value, .figure-value, .fs-1, .fs-2, .fs-3, .fs-4, .fs-5 {
  font-family: var(--font-figure); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em;
}
.row.text-center .fs-5.tabular { font-size: clamp(1rem, .85rem + 1.4vw, 1.25rem) !important; white-space: nowrap; }

/* Señales: el color solo dice algo cuando pide atención (siempre con signo o texto) */
.amount-in, .text-income { color: var(--positive) !important; }
.amount-out, .text-expense { color: var(--text) !important; }
.amount-alert, .text-debt { color: var(--warning) !important; }
.text-danger { color: var(--negative) !important; }
.text-success { color: var(--positive) !important; }
.text-warning { color: var(--warning) !important; }
.text-primary { color: var(--accent-ink) !important; }

/* Bootstrap: los fondos "subtle" decorativos pasan a neutros */
.bg-primary-subtle, .bg-success-subtle, .bg-danger-subtle, .bg-warning-subtle, .bg-info-subtle, .bg-secondary-subtle, .bg-light, .bg-body-tertiary { background-color: var(--raised) !important; }
.text-bg-light, .text-bg-secondary { background-color: var(--raised) !important; color: var(--text) !important; }
.text-bg-primary, .bg-primary { background-color: var(--accent-fill) !important; color: var(--on-accent) !important; }
.badge { white-space: nowrap; font-weight: 600; border-radius: var(--r-pill); }
.rounded-xl { border-radius: var(--radius) !important; }
.cursor-pointer { cursor: pointer; }
.container-narrow { max-width: 720px; margin: 0 auto; }

/* =====================================================================
   3. BOTONES
   .btn-primary (uno por pantalla) · .btn-light (secundario, tono) · .btn-ghost · .btn-link
   .btn-icon (siempre con aria-label) · .btn-outline-danger / .btn-danger · .btn-sm · .btn-lg
   ===================================================================== */
.btn {
  --bs-btn-font-weight: 600;
  border-radius: var(--r-md); font-weight: 600; font-size: .9375rem; line-height: 1.2;
  padding: .625rem 1.125rem; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:active:not(:disabled):not(.disabled) { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
.btn-sm { min-height: 36px; padding: .4rem .8rem; border-radius: var(--r-sm); font-size: var(--fs-sm); }
.btn-lg { min-height: 52px; font-size: 1rem; padding: .75rem 1.375rem; border-radius: 14px; }
@media (pointer: coarse) { .btn-sm { min-height: 44px; } }
.btn-primary {
  --bs-btn-bg: var(--accent-fill); --bs-btn-border-color: var(--accent-fill); --bs-btn-color: var(--on-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent-fill) 88%, var(--text)); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--on-accent);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent-fill) 80%, black); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--on-accent);
  --bs-btn-disabled-bg: var(--accent-fill); --bs-btn-disabled-border-color: var(--accent-fill); --bs-btn-disabled-color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
@media (hover: hover) { [data-bs-theme="dark"] .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 28px -12px var(--accent); } }
.btn-dark, .btn-ink { --bs-btn-bg: var(--text); --bs-btn-border-color: var(--text); --bs-btn-color: var(--surface); --bs-btn-hover-bg: color-mix(in srgb, var(--text) 85%, var(--surface)); --bs-btn-hover-color: var(--surface); --bs-btn-hover-border-color: transparent; }
.btn-light, .btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-soft, .btn-outline-dark, .btn-outline-light {
  --bs-btn-bg: var(--raised); --bs-btn-border-color: transparent; --bs-btn-color: var(--text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--raised) 86%, var(--text)); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: var(--text);
  --bs-btn-active-bg: color-mix(in srgb, var(--raised) 80%, var(--text)); --bs-btn-active-border-color: transparent; --bs-btn-active-color: var(--text);
  --bs-btn-disabled-bg: var(--raised); --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-border-color: transparent;
  background: var(--bs-btn-bg); border: 1px solid transparent; color: var(--bs-btn-color);
}
.btn-ghost { --bs-btn-bg: transparent; --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--raised); --bs-btn-hover-color: var(--text); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; }
.btn-check:checked + .btn-outline-primary, .btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-light {
  background: var(--surface); color: var(--text); border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text);
}
.btn-outline-danger, .btn-danger-soft { --bs-btn-bg: transparent; --bs-btn-color: var(--negative); --bs-btn-border-color: color-mix(in srgb, var(--negative) 40%, transparent); --bs-btn-hover-bg: var(--negative); --bs-btn-hover-border-color: var(--negative); --bs-btn-hover-color: #fff; }
.btn-danger { --bs-btn-bg: var(--negative); --bs-btn-border-color: var(--negative); --bs-btn-color: #fff; --bs-btn-hover-bg: color-mix(in srgb, var(--negative) 85%, black); --bs-btn-hover-border-color: transparent; --bs-btn-hover-color: #fff; }
[data-bs-theme="dark"] .btn-danger { --bs-btn-color: #2A0A0B; --bs-btn-hover-color: #2A0A0B; --bs-btn-hover-bg: color-mix(in srgb, var(--negative) 85%, white); }
.btn-link { --bs-btn-color: var(--text); --bs-btn-hover-color: var(--accent-ink); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; padding-left: .25rem; padding-right: .25rem; }
.btn-link.text-danger:hover { color: var(--negative) !important; text-decoration-color: currentColor; }
.btn-icon {
  width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; border-radius: var(--r-md);
  color: var(--muted); background: transparent; border: 0; font-size: 1.15rem;
}
.btn-icon:hover, .btn-icon:focus-visible { background: var(--raised); color: var(--text); }
.btn-icon:active { transform: scale(.92); }
.btn-close { min-height: 0; }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.btn-group.w-100 > .btn, .btn-group.d-flex > .btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; }
.btn .btn-arrow { transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) { .btn:hover .btn-arrow, a:hover > .btn-arrow { transform: translateX(3px); } }
/* Botón ocupado: spinner centrado, el botón conserva su tamaño (app.js lo pone al enviar un POST) */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading:disabled { opacity: 1; }
.btn.is-loading > * { opacity: 0; }
.btn.is-loading::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.15em; height: 1.15em; border-radius: 50%;
  border: 2px solid var(--bs-btn-color, var(--text)); border-right-color: transparent; animation: exp-spin .7s linear infinite;
}
.btn-primary.is-loading::after { border-color: var(--on-accent); border-right-color: transparent; }

/* =====================================================================
   4. FORMULARIOS
   Etiqueta visible arriba · error debajo con la solución · 48 px · 16 px en celular.
   .money-field (alias .vv-money): el monto principal como un recibo.
   .segmented: control segmentado (enlaces o radios). .chip / .chip-row: filtros y atajos.
   .more-details: lo opcional plegado. .form-actions: barra de acciones del formulario.
   ===================================================================== */
.form-label { font-weight: 600; font-size: var(--fs-sm); margin-bottom: .4rem; color: var(--text); transition: color var(--dur-hover) ease; }
.form-label .text-muted, .form-label .fw-normal { font-weight: 400; }
.form-control, .form-select {
  border-radius: var(--r-md); padding: .7rem .9rem; min-height: 48px; background-color: var(--field); border: 1px solid var(--control);
  color: var(--text); font-size: 1rem;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, box-shadow var(--dur-ui) var(--ease-out);
}
[data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { border-color: color-mix(in srgb, var(--control) 70%, transparent); }
.form-control::placeholder { color: var(--faint); opacity: 1; }
.form-control-sm, .form-select-sm { min-height: 40px; padding: .4rem .7rem; border-radius: var(--r-sm); }
textarea.form-control { min-height: 96px; }
@media (hover: hover) { .form-control:hover:not(:focus):not(:disabled):not([readonly]), .form-select:hover:not(:focus):not(:disabled) { border-color: var(--muted); } }
.form-control:focus, .form-select:focus { background-color: var(--field); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); color: var(--text); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background: var(--raised); color: var(--muted); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--negative); background-image: none; padding-right: .9rem; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--negative) 25%, transparent); }
.form-control.is-valid, .was-validated .form-control:valid { border-color: color-mix(in srgb, var(--positive) 55%, transparent); background-image: none; padding-right: .9rem; }
.invalid-feedback { color: var(--negative); font-weight: 500; font-size: var(--fs-xs); }
.form-text { color: var(--muted); font-size: var(--fs-xs); margin-top: .35rem; }
.form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23828993' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
.form-check-input { width: 1.25em; height: 1.25em; margin-top: .15em; border: 1.5px solid var(--control); background-color: var(--field);
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, background-position var(--dur-ui) var(--ease-spring); }
.form-check-input:checked { background-color: var(--accent-fill); border-color: var(--accent-fill); }
[data-bs-theme="dark"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23052419' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--accent-ring); border-color: var(--accent); }
.form-switch .form-check-input { width: 2.5em; height: 1.4em; margin-top: 0; }
.form-switch.form-check { min-height: 44px; display: flex; align-items: center; gap: .6rem; }
.form-check-label { cursor: pointer; }
.input-group-text { background: var(--raised); border-color: var(--control); color: var(--muted); }
[data-bs-theme="dark"] .input-group-text { border-color: color-mix(in srgb, var(--control) 70%, transparent); }
.input-group { border-radius: var(--r-md); transition: box-shadow var(--dur-ui) var(--ease-out); }
.input-group:focus-within { box-shadow: 0 0 0 4px var(--accent-ring); }
.input-group:focus-within:has(.is-invalid) { box-shadow: 0 0 0 4px color-mix(in srgb, var(--negative) 25%, transparent); }
.input-group > .form-control:focus, .input-group > .form-select:focus { box-shadow: none; }
.btn-pass { min-width: 48px; min-height: 48px; border-color: var(--control); }
.input-group > .btn-pass { min-width: 48px; padding: 0 .75rem; color: var(--muted); }
.input-group > .btn-pass:hover, .input-group > .btn-pass:focus-visible { color: var(--text); }
.input-group > .btn-pass:active { transform: none; }
.mb-3:focus-within > .form-label, .auth-field:focus-within .form-label, [class*="col"]:focus-within > .form-label { color: var(--text); }
/* El monto principal se escribe en la cara de cifras, grande, como en un recibo */
.input-money { font-family: var(--font-figure); font-weight: 600; font-size: 1.75rem; min-height: 64px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 767.98px) {
  .form-control, .form-select, .form-control-sm, .form-select-sm, input, select, textarea { font-size: 16px; }
  .input-money { font-size: 1.75rem; }
}
.money-row { display: flex; gap: 8px; align-items: stretch; }
.money-row .input-money { flex: 1 1 auto; min-width: 0; }
.money-row .form-select { flex: 0 0 96px; min-height: 64px; font-weight: 600; }

/* Campo de monto protagonista (.money-field = .vv-money) */
.money-field, .vv-money { position: relative; padding: 16px 18px 14px; border-radius: var(--r-lg); background: var(--raised);
  transition: box-shadow var(--dur-ui) var(--ease-out), background-color var(--dur-hover) ease; }
.money-field:focus-within, .vv-money:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-ring); }
.money-field:has(.is-invalid), .vv-money:has(.is-invalid) { box-shadow: inset 0 0 0 1.5px var(--negative); }
.money-field .form-label, .vv-money .form-label { margin-bottom: .15rem; color: var(--muted); font-weight: 500; }
.money-field .money-row, .vv-money .money-row { gap: 10px; align-items: center; }
.money-field .input-money, .vv-money .input-money { background: transparent; border: 0; box-shadow: none; padding: 0;
  font-size: clamp(2.25rem, 1.75rem + 2.2vw, 2.875rem); letter-spacing: -0.04em; line-height: 1.1; min-height: 64px; caret-color: var(--accent); color: var(--text); }
.money-field .input-money:focus, .vv-money .input-money:focus { box-shadow: none; background: transparent; }
.money-field .input-money::placeholder, .vv-money .input-money::placeholder { color: var(--faint); opacity: .75; }
.money-field .money-row .form-select, .vv-money .money-row .form-select { flex: 0 0 auto; width: auto; min-height: 44px; border-radius: var(--r-pill); background-color: var(--surface);
  font-weight: 600; font-size: var(--fs-sm); padding-left: .9rem; padding-right: 2rem; border-color: transparent; }
.money-field .form-text, .vv-money .form-text, .vv-money-echo { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.vv-money-echo { min-height: 1.3em; font-variant-numeric: tabular-nums; }
.vv-money-echo:empty { min-height: 0; }
.money-field .invalid-feedback, .vv-money .invalid-feedback, .money-field .live-feedback, .vv-money .live-feedback { margin-top: .35rem; }
.vv-sign { font-size: clamp(2rem, 1.6rem + 2vw, 2.5rem); font-weight: 600; line-height: 1; margin-right: -4px; color: var(--muted); }
.money-field.is-income .vv-sign, .vv-money.is-income .vv-sign, .money-field.is-income .input-money:not(:placeholder-shown), .vv-money.is-income .input-money:not(:placeholder-shown) { color: var(--positive); }
.money-field.is-expense .vv-sign, .vv-money.is-expense .vv-sign { color: var(--muted); }

/* Hoja de formulario: secciones con aire y sin márgenes sueltos */
.form-sheet .card-body { display: grid; gap: 22px; }
.form-sheet .card-body > * { margin-bottom: 0 !important; }
.form-sheet .card-body > fieldset > .mb-3 { margin-bottom: 0 !important; }
.form-section-label { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin: 0 0 -10px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.card-footer.form-actions { padding: 14px 18px; }
@media (max-width: 575.98px) {
  .form-actions { flex-direction: column-reverse; align-items: stretch; }
  .form-actions .btn { width: 100%; }
}
/* Barra de acciones pegada abajo en celular: el botón principal siempre a mano */
@media (max-width: 991.98px) {
  .form-sheet > .form-actions.is-sticky { position: sticky; bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); z-index: 5;
    background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); }
  .form-sheet > .form-actions.is-sticky .btn-ghost { display: none; }
}
/* Lo opcional, plegado */
.more-details { border-top: 1px solid var(--rule); padding-top: 4px; }
.more-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; font-weight: 600; border-radius: var(--r-sm); }
.more-details > summary::-webkit-details-marker { display: none; }
.more-details > summary small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-xs); }
.more-details > summary .bi { color: var(--muted); transition: transform 320ms var(--ease-spring); flex-shrink: 0; }
.more-details[open] > summary .bi { transform: rotate(180deg); }
.more-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-details .more-body { display: grid; gap: 20px; padding: 6px 0 4px; }

/* Control segmentado: <nav class="segmented"> con <a> o radios .btn-check + label.
   El activo lleva .is-active o aria-current; con JS una "pastilla" se desliza al activo (motion.js). */
.segmented { position: relative; display: inline-flex; align-items: stretch; gap: 2px; padding: 4px; border-radius: 14px; background: var(--raised); max-width: 100%; overflow-x: auto; scrollbar-width: none; isolation: isolate; }
.segmented::-webkit-scrollbar { display: none; }
.segmented.is-block { display: flex; width: 100%; }
.segmented.is-block > * { flex: 1 1 0; }
.segmented > a, .segmented > button, .segmented > label, .segmented .seg-item {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
@media (pointer: coarse) { .segmented > a, .segmented > button, .segmented > label, .segmented .seg-item { min-height: 44px; } }
.segmented > a:hover, .segmented > label:hover { color: var(--text); }
.segmented > .is-active, .segmented > [aria-current="page"], .segmented > [aria-current="true"], .segmented > input:checked + label {
  color: var(--text); background: var(--surface); box-shadow: var(--shadow-1);
}
[data-bs-theme="dark"] .segmented > .is-active, [data-bs-theme="dark"] .segmented > [aria-current="page"], [data-bs-theme="dark"] .segmented > [aria-current="true"], [data-bs-theme="dark"] .segmented > input:checked + label { background: #2A2E34; }
.segmented > input { position: absolute; opacity: 0; pointer-events: none; }
.segmented > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Con la pastilla deslizante (motion.js agrega .has-thumb y .seg-thumb) */
.segmented.has-thumb > .is-active, .segmented.has-thumb > [aria-current], .segmented.has-thumb > input:checked + label { background: transparent; box-shadow: none; }
.seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 1px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1);
  transform-origin: 0 0; transition: transform 380ms var(--ease-out), width 380ms var(--ease-out); pointer-events: none; }
[data-bs-theme="dark"] .seg-thumb { background: #2A2E34; }

/* Chips: atajos y filtros (enlaces o botones). .chip.is-active = elegido */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row.is-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); }
.chip-row.is-scroll::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--raised); color: var(--text);
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; text-decoration: none; border: 1px solid transparent; flex-shrink: 0;
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
@media (pointer: coarse) { .chip { min-height: 40px; } }
.chip .bi { color: var(--muted); }
.chip:hover { color: var(--text); background: color-mix(in srgb, var(--raised) 86%, var(--text)); }
.chip:active { transform: scale(.96); }
.chip.is-active, .chip[aria-current], .chip[aria-pressed="true"] { background: var(--text); color: var(--surface); }
.chip.is-active .bi, .chip[aria-current] .bi { color: inherit; }
.chip .chip-x { margin-right: -4px; opacity: .7; }

/* Selector de categoría */
.cat-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cat-picker input { position: absolute; opacity: 0; pointer-events: none; }
.cat-picker label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; min-height: 80px;
  border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; font-size: var(--fs-xs); font-weight: 500; text-align: center;
  background: var(--raised); line-height: 1.2; color: var(--text); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.cat-picker label .bi { font-size: 1.15rem; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, currentColor 14%, transparent); transition: transform var(--dur-ui) var(--ease-spring); }
.cat-picker label:active { transform: scale(.97); }
@media (hover: hover) { .cat-picker label:hover { background: color-mix(in srgb, var(--raised) 88%, var(--text)); } }
.cat-picker input:checked + label { background: var(--surface); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); }
.cat-picker input:checked + label .bi { transform: scale(1.08); }
.cat-picker input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat-picker.is-invalid label { border-color: color-mix(in srgb, var(--negative) 40%, transparent); }
@media (max-width: 575.98px) { .cat-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 359.98px) { .cat-picker label { font-size: var(--fs-2xs); } }

/* Revisión en vivo (data-live) */
.live-feedback { font-size: var(--fs-xs); margin-top: .4rem; display: flex; align-items: center; gap: .35rem; }
.live-feedback:empty { display: none; }
.live-feedback.is-error { color: var(--negative); }
.live-feedback.is-ok { color: var(--positive); }
.live-feedback.is-error::before, .live-feedback.is-ok::before {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: currentColor;
  -webkit-mask: var(--fb-icon) center / contain no-repeat; mask: var(--fb-icon) center / contain no-repeat;
}
.live-feedback.is-error { --fb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M8 4.6v4.2' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.2' r='.95'/%3E%3C/svg%3E"); }
.live-feedback.is-ok { --fb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-7' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Pestañas de Bootstrap (.nav-pills): subrayado fino; el subrayado se desliza al activo (motion.js) */
.nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: transparent; padding: 0; gap: 20px; border-bottom: 1px solid var(--rule); border-radius: 0; width: 100%; max-width: 100%; }
.nav-pills::-webkit-scrollbar { display: none; }
.nav-pills .nav-item { flex: 0 0 auto; }
.nav-pills .nav-link { padding: .5rem 0; min-height: 44px; border-radius: 0; color: var(--muted); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem;
  box-shadow: none; background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-hover) ease; }
.nav-pills .nav-link:hover { color: var(--text); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--text); background: transparent; border-bottom-color: var(--text); }
.nav-pills.has-ink { position: relative; }
.nav-pills.has-ink .nav-link { border-bottom-color: transparent; }
.nav-ink { position: absolute; left: 0; bottom: 0; width: 1px; height: 2px; background: var(--text); transform-origin: 0 0; pointer-events: none; opacity: 0;
  transition: transform 340ms var(--ease-out), opacity var(--dur-hover) ease; }
.page-link { color: var(--text); min-width: 44px; min-height: 44px; display: grid; place-items: center; border-color: var(--border); background: var(--surface); }
.active > .page-link, .page-link.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.pagination { --bs-pagination-border-width: 0; gap: 4px; }
.pagination .page-link { border-radius: var(--r-sm) !important; background: var(--raised); font-variant-numeric: tabular-nums; transition: background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.pagination .page-link:hover { background: color-mix(in srgb, var(--raised) 85%, var(--text)); color: var(--text); }
.pagination .page-link:active { transform: scale(.94); }
.pagination .active > .page-link { background: var(--text); color: var(--surface); }
.pagination .disabled > .page-link { background: transparent; color: var(--faint); }

/* =====================================================================
   5. SUPERFICIES
   .card (hoja) · .card-header / .card-link-row (título + enlace) · .section-head (título fuera de hoja)
   Menús, modales, hojas inferiores (.sheet), avisos (.alert / .flash), toasts (.exp-toast)
   ===================================================================== */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; color: var(--text); --bs-card-inner-border-radius: calc(var(--radius) - 1px); }
[data-bs-theme="light"] .card { box-shadow: var(--shadow-1); }
.card-header { background: transparent; border-bottom: 0; font-family: var(--font-text); font-weight: 600; padding: 16px 18px 4px; }
.card-header h2, .card-header h3, .card-header .h6, .card-header .h5 { font-size: var(--fs-h2); font-weight: 700; margin: 0; letter-spacing: -0.015em; }
.card-header .bi { color: var(--muted); }
.card-body { padding: 18px; }
.card-footer { background: transparent; border-top: 1px solid var(--rule); }
.card-title { font-weight: 700; }
.card-link-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-link-row > a, .section-head > a, .section-link {
  display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color var(--dur-hover) ease; white-space: nowrap; flex-shrink: 0;
}
.card-link-row > a::after, .section-head > a::after, .section-link::after { content: "\203A"; font-size: 1.25em; line-height: 1; margin-left: 3px; transition: transform var(--dur-ui) var(--ease-out); }
.card-link-row > a:hover, .section-head > a:hover, .section-link:hover, .card-link-row > a:focus-visible { color: var(--text); }
@media (hover: hover) { .card-link-row > a:hover::after, .section-head > a:hover::after, .section-link:hover::after { transform: translateX(3px); } }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 28px 0 10px; }
.section-head h2, .section-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.section-title { margin: 28px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.section-sub { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
@media (max-width: 575.98px) {
  .card-body { padding: 16px; }
  .card-header { padding: 14px 16px 2px; }
}

/* Menús */
.dropdown-menu { border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-2); padding: 6px; background: var(--overlay); color: var(--text);
  --bs-dropdown-link-active-bg: var(--raised); --bs-dropdown-link-active-color: var(--text); --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--raised); --bs-dropdown-link-hover-color: var(--text); }
.dropdown-item { border-radius: var(--r-sm); padding: .6rem .75rem; font-weight: 500; min-height: 44px; display: flex; align-items: center; gap: .5rem; transition: background-color var(--dur-hover) ease; }
.dropdown-item .bi { color: var(--muted); }
.dropdown-item.active .bi { color: var(--accent-ink); }
.dropdown-item-text { padding: .5rem .75rem; }
.dropdown-header { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; padding: .5rem .75rem .25rem; }
.dropdown-divider { border-color: var(--rule); margin: 6px 0; }
/* Modales */
.modal-content { border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-3); background: var(--overlay); color: var(--text); }
.modal-header, .modal-footer { border-color: var(--rule); }
.modal-backdrop { --bs-backdrop-bg: #000; }
.modal-backdrop.show { opacity: .6; }
.offcanvas { background: var(--overlay); color: var(--text); }
.offcanvas-backdrop.show { opacity: .6; }
.confirm-icon { width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: var(--negative-soft); color: var(--negative); }

/* Hojas inferiores (.sheet sobre .offcanvas-bottom): asa, esquinas redondas, entran con resorte */
.sheet { height: auto !important; max-height: 88vh; max-height: 88dvh; border-radius: 26px 26px 0 0; border: 0 !important; border-top: 1px solid var(--border) !important;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--shadow-3); --bs-offcanvas-transition: transform var(--dur-sheet) var(--ease-spring); }
.sheet::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 99px; background: var(--control); }
.sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px; background: var(--overlay); }
.sheet.hiding { transition: transform 240ms var(--ease-exit) !important; }
.sheet .offcanvas-header { padding: 24px 20px 8px; }
.sheet .offcanvas-title { font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; }
.sheet .offcanvas-body { padding: 8px 20px 20px; }
@media (min-width: 576px) { .sheet { max-width: 560px; margin: 0 auto; } }

/* Avisos y flash */
.alert { border-radius: var(--r-md); border: 1px solid transparent; background: var(--raised); color: var(--text); display: flex; gap: .65rem; align-items: flex-start; padding: 12px 14px; }
.alert:not(:has(> .bi)):not(:has(> .flash-check)) { display: block; }
.alert > .bi:first-child { margin-top: .15em; flex-shrink: 0; }
.alert-success > .bi:first-child { color: var(--positive); }
.alert-danger { background: var(--negative-soft); border-color: color-mix(in srgb, var(--negative) 30%, transparent); }
.alert-danger > .bi:first-child, .alert-danger strong { color: var(--negative); }
.alert-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.alert-warning > .bi:first-child { color: var(--warning); }
.alert-info, .alert-secondary, .alert-light { background: var(--raised); border-color: transparent; }
.alert-info > .bi:first-child { color: var(--info); }
.alert .alert-link { color: inherit; }
.alert.fade { transition: opacity 200ms ease; }
.alert-success.flash, .alert.flash-success { background: var(--positive-soft); border-color: color-mix(in srgb, var(--positive) 28%, transparent); }
.flash-check { width: 20px; height: 20px; flex-shrink: 0; margin-top: .1em; color: var(--positive); display: inline-grid; }
.flash-check svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flash-check circle { stroke-opacity: .4; --len: 54; stroke-dasharray: 54; }
.flash-check path { --len: 13; stroke-dasharray: 13; }
.announcement { margin-bottom: 16px; }
.scope-banner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--info-soft); color: var(--text); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; font-size: var(--fs-sm); }
.scope-banner .bi { color: var(--info); }
.scope-banner a { font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }

/* Toasts: tinta sobre el fondo con un punto que dice el tipo. Arriba en escritorio; abajo, sobre la barra, en celular */
.toast-container { z-index: 1090; }
.exp-toasts { top: 0; right: 0; }
.exp-toast { background: var(--text); color: var(--surface); border: 0; border-radius: 14px; box-shadow: var(--shadow-3); --bs-toast-max-width: 380px; }
.exp-toast .toast-body { display: flex; align-items: center; gap: 10px; font-weight: 500; padding: 12px 14px; }
.exp-toast .toast-body::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
.exp-toast-success .toast-body::before { background: #22C55E; }
.exp-toast-error .toast-body::before { background: #EF4444; }
.exp-toast-warning .toast-body::before { background: #F59E0B; }
.exp-toast .btn-close { filter: invert(1) grayscale(1) brightness(2); }
[data-bs-theme="dark"] .exp-toast .btn-close { filter: none; }
@media (max-width: 991.98px) {
  .exp-toasts { top: auto; bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
  .exp-toasts .toast { width: 100%; }
}

/* =====================================================================
   6. DATOS
   Cifra protagonista (.figure-hero, .hero-panel) · indicadores (.stat-grid) · filas (.tx-item)
   Pares dato/valor (.kv) · estados (.badge-status, .pill) · progreso · vacío · esqueletos
   La línea del mes · línea de tiempo · tablas · gráficos
   ===================================================================== */
/* Cifra protagonista: etiqueta, cifra grande y una línea de apoyo */
.figure-hero { position: relative; margin-bottom: 20px; }
.figure-label, .hero-balance .label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.figure-value, .hero-balance .amount { font-family: var(--font-figure); font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.045em; line-height: 1.04; margin: 4px 0 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.figure-value.is-negative { color: var(--negative); }
.figure-value.is-md { font-size: clamp(2rem, 1.7rem + 1.6vw, 2.625rem); }
.figure-sub { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: var(--fs-sm); }
.figure-sub strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-balance { background: none; color: var(--text); padding: 0; margin-bottom: 18px; border-radius: 0; }
.hero-balance .opacity-75 { color: var(--muted); opacity: 1 !important; }
/* Panel protagonista: una sola vez por pantalla. Brillo suave del acento (rojo si vas en rojo) */
.hero-panel { position: relative; isolation: isolate; overflow: hidden; padding: 20px 20px 18px; border-radius: var(--r-xl); border: 1px solid var(--border);
  background: radial-gradient(120% 90% at 0% 0%, var(--accent-glow), transparent 60%), radial-gradient(80% 70% at 100% 100%, color-mix(in srgb, var(--info) 7%, transparent), transparent 70%), var(--surface); }
[data-bs-theme="light"] .hero-panel { box-shadow: var(--shadow-1); }
.hero-panel:has(.figure-value.is-negative) { background: radial-gradient(120% 90% at 0% 0%, var(--negative-soft), transparent 60%), var(--surface); }
.hero-panel .figure-value { margin-bottom: 4px; }
@media (min-width: 768px) { .hero-panel { padding: 26px 28px 24px; } }
/* Dos cifras lado a lado (entró / salió) */
.hero-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.hero-split > div { display: block; min-width: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--raised) 80%, transparent); }
.hero-split .bi { font-size: .8rem; margin-right: 2px; }
.hero-split .is-in .bi { color: var(--positive); }
.hero-split .is-out .bi { color: var(--muted); }
.hero-split small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.2; }
.hero-split strong { display: block; margin-top: 2px; font-weight: 700; font-size: clamp(1rem, .9rem + .6vw, 1.1875rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Indicadores: tipografía en un contenedor dividido. 2 columnas en celular, hasta 4 en escritorio */
.stat-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
[data-bs-theme="light"] .stat-grid { box-shadow: var(--shadow-1); }
.stat-card { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; min-width: 0; color: inherit; text-decoration: none; border-left: 1px solid var(--rule); background: transparent;
  container-type: inline-size; transition: background-color var(--dur-hover) ease; position: relative; }
.stat-grid > .stat-card:first-child { border-left: 0; }
a.stat-card:hover { background: var(--raised); color: inherit; }
a.stat-card::after { content: "\203A"; position: absolute; top: 12px; right: 14px; color: var(--faint); font-size: 1.1rem; line-height: 1; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) { a.stat-card:hover::after { transform: translateX(2px); color: var(--muted); } }
.stat-icon { display: none; }
.stat-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; line-height: 1.3; padding-right: 12px; }
.stat-value { font-size: clamp(.875rem, 13cqi, var(--fs-figure)); font-weight: 700; line-height: 1.2; color: var(--text); white-space: nowrap; letter-spacing: -0.025em; }
.stat-hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; }
.tone-danger .stat-value { color: var(--negative); }
.tone-warning .stat-value { color: var(--warning); }
.tone-success .stat-value, .tone-primary .stat-value, .tone-info .stat-value, .tone-secondary .stat-value { color: var(--text); }
.tone-danger .stat-hint { color: var(--negative); }
.row > [class*="col"] > .stat-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); height: 100%; }
@media (min-width: 768px) {
  .stat-grid:has(> :nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-grid > .stat-card:nth-child(4n+1) { border-left: 0; }
  .stat-grid > .stat-card:nth-child(n+5) { border-top: 1px solid var(--rule); }
}
@media (max-width: 767.98px) {
  .stat-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { border-left: 0; border-top: 1px solid var(--rule); padding: 14px 16px; }
  .stat-grid > .stat-card:nth-child(2n) { border-left: 1px solid var(--rule); }
  .stat-grid > .stat-card:nth-child(-n+2) { border-top: 0; }
  .stat-grid > .stat-card:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
}

/* Filas de la libreta: .list-clean > .tx-item (una hoja, filas separadas por línea; nunca una tarjeta por fila) */
.list-clean { list-style: none; margin: 0; padding: 0; }
.tx-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); min-height: 64px; }
.tx-item:last-child { border-bottom: 0; }
a.tx-item, .tx-item > a { color: inherit; text-decoration: none; }
.tx-icon { --cat: var(--muted); width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem;
  background: color-mix(in srgb, var(--cat) 15%, var(--surface)) !important; color: var(--cat) !important; transition: transform var(--dur-ui) var(--ease-spring); }
[data-bs-theme="dark"] .tx-icon { background: color-mix(in srgb, var(--cat) 17%, var(--surface)) !important; color: color-mix(in srgb, var(--cat) 70%, white) !important; }
.tx-main { flex: 1 1 auto; min-width: 0; }
.tx-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.tx-title .bi { color: var(--faint); font-size: .8em; margin-left: 4px; }
.tx-sub { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; margin-top: 1px; }
.tx-amount { font-weight: 600; white-space: nowrap; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.tx-end, .tx-item > .text-end, .tx-item > .ms-auto { flex-shrink: 0; text-align: right; }
.tx-share { font-size: var(--fs-xs); color: var(--muted); text-align: right; white-space: nowrap; }
.tx-chev { color: var(--faint); flex-shrink: 0; }
.tx-item .stretched-link::after { z-index: 1; }
.tx-item .btn, .tx-item .dropdown, .tx-item form, .tx-item .form-check-input { position: relative; z-index: 2; }
/* Fila enlazada: fondo al pasar y al tocar (sin mover el diseño) */
a.tx-item, .tx-item:has(.stretched-link) { isolation: isolate; -webkit-tap-highlight-color: transparent; }
a.tx-item::before, .tx-item:has(.stretched-link)::before {
  content: ""; position: absolute; z-index: -1; inset: 2px -10px; border-radius: var(--r-md); pointer-events: none;
  background: var(--raised); opacity: 0; transition: opacity var(--dur-hover) ease;
}
@media (hover: hover) { a.tx-item:hover::before, .tx-item:has(.stretched-link):hover::before { opacity: .8; } }
a.tx-item:active::before, .tx-item:has(.stretched-link):active::before { opacity: 1; }
@media (hover: hover) { a.tx-item:hover .tx-icon, .tx-item:has(.stretched-link):hover .tx-icon { transform: scale(1.06); } }
.cat-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; background: var(--raised); white-space: nowrap; color: var(--text); }
.cat-chip .bi { color: var(--muted); }
.day-header { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); padding: 18px 0 6px; border-bottom: 0; display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.day-header:first-child { padding-top: 4px; }
@media (max-width: 359.98px) { .tx-item { gap: 10px; } .tx-icon { width: 36px; height: 36px; border-radius: 12px; font-size: .95rem; } }

/* Pares dato/valor */
.kv, .kv-list { list-style: none; margin: 0; padding: 0; }
.kv > li, .kv > div, .kv-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.kv > :last-child, .kv-list > div:last-child { border-bottom: 0; }
.kv .k, .kv-list dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
.kv .v, .kv-list dd { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; margin: 0; }

/* Estados: píldora suave con punto de color (el color nunca va solo: siempre lleva texto) */
.badge-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; padding: .25em .65em; border-radius: var(--r-pill); font-size: var(--fs-2xs); white-space: nowrap; line-height: 1.3; background: var(--raised); color: var(--muted); }
.badge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.st-pagada, .st-pagado, .st-al_dia, .st-activa, .st-cumplida { color: var(--positive); background: var(--positive-soft); }
.st-pagada::before, .st-pagado::before, .st-al_dia::before, .st-activa::before, .st-cumplida::before { background: var(--positive); }
.st-vencida, .st-en_mora { color: var(--negative); background: var(--negative-soft); }
.st-vencida::before, .st-en_mora::before { background: var(--negative); }
.st-parcial, .st-pausada, .st-refinanciada { color: var(--warning); background: var(--warning-soft); }
.st-parcial::before, .st-pausada::before, .st-refinanciada::before { background: var(--warning); }
.st-pendiente { color: var(--text); }
.st-pendiente::before { background: var(--text); }
/* Píldora de tono (.pill + .is-pos | .is-neg | .is-warn | .is-info) */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--r-pill); font-size: var(--fs-2xs); font-weight: 600; line-height: 1.6; background: var(--raised); color: var(--muted); white-space: nowrap; }
.pill.is-pos { background: var(--positive-soft); color: var(--positive); }
.pill.is-neg { background: var(--negative-soft); color: var(--negative); }
.pill.is-warn { background: var(--warning-soft); color: var(--warning); }
.pill.is-info { background: var(--info-soft); color: var(--info); }

/* Progreso */
.progress { --bs-progress-bg: var(--raised); --bs-progress-height: 6px; border-radius: 99px; overflow: hidden; }
.progress-bar, .progress-bar.bg-success, .progress-bar.bg-primary, .progress-bar.bg-info { background-color: var(--accent) !important; border-radius: 99px; }
.progress-bar.bg-warning, .progress.is-warning .progress-bar { background-color: var(--warning) !important; }
.progress-bar.bg-danger, .progress.is-danger .progress-bar { background-color: var(--negative) !important; }
.progress-bar.bg-secondary { background-color: var(--faint) !important; }
.vv-share { display: block; height: 4px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.vv-share > i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); min-width: 2px; border-radius: inherit; background: var(--c, var(--muted)); }
.vv-bar, .vv-grow .progress-bar { transform-origin: left center; }

/* Estado vacío: invita a actuar. partials/empty */
.empty-state { text-align: center; padding: 36px 16px 32px; max-width: 440px; margin: 0 auto; }
.empty-icon { position: relative; isolation: isolate; width: 64px; height: 64px; margin: 14px auto 26px; border-radius: 20px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--accent-soft); color: var(--accent-ink); }
.empty-icon::before { content: ""; position: absolute; inset: -10px; border-radius: 26px; border: 1px dashed var(--hairline-strong); pointer-events: none; }
.empty-state h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 6px; }
.empty-state p { max-width: 36ch; margin-left: auto; margin-right: auto; color: var(--muted); font-size: var(--fs-sm); }
.empty-state .btn { min-height: 44px; }
.empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* Esqueletos: lo que está cargando conserva su lugar */
.skeleton { display: block; border-radius: var(--r-sm); background: var(--raised); position: relative; overflow: hidden; }
.skeleton-text { height: .875em; margin: .35em 0; width: 60%; }
.skeleton-figure { height: 2.4rem; width: 55%; border-radius: var(--r-md); }
.skeleton-row { height: 56px; margin: 6px 0; }
.skeleton::after, .chart-box.is-loading::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent); }

/* La línea del mes (elemento propio): días de pago, vencimientos y hoy */
.month-line { position: relative; margin: 4px 0 18px; padding: 28px 0 0; }
.ml-track { position: relative; height: 28px; }
.ml-rail { position: absolute; left: 0; right: 0; top: 13px; height: 2px; border-radius: 2px; background: var(--raised); }
.ml-traveled { position: absolute; left: 0; top: 13px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), var(--accent)); }
.ml-payday { position: absolute; top: 3px; width: 2px; height: 22px; margin-left: -1px; background: var(--muted); border-radius: 2px; }
.ml-payday.is-past { background: var(--accent); }
.ml-mark { position: absolute; top: 9px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.ml-mark.st-pagada { background: var(--accent); border-color: var(--accent); }
.ml-mark.st-vencida { background: var(--negative); border-color: var(--negative); box-shadow: 0 0 0 3px var(--negative-soft); }
.ml-mark.st-pagada::before, .ml-mark.st-vencida::before, .ml-mark.st-pendiente::before { display: none; }
.ml-today { position: absolute; top: -22px; width: 2px; height: 50px; margin-left: -1px; background: var(--text); border-radius: 2px; }
.ml-today::after { content: ""; position: absolute; bottom: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--surface); }
.ml-today.is-end .ml-today-label { left: auto; right: 8px; }
.ml-today-label { position: absolute; top: -4px; left: 8px; font-size: var(--fs-2xs); font-weight: 700; color: var(--text); white-space: nowrap; line-height: 1; }
.ml-scale { position: relative; height: 34px; margin-top: 6px; }
.ml-day { position: absolute; transform: translateX(-50%); font-weight: 600; font-size: var(--fs-2xs); color: var(--muted); text-align: center; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ml-day small { display: block; font-weight: 500; font-size: var(--fs-2xs); color: var(--faint); }
.ml-day.is-pay { color: var(--text); }
.ml-scale .ml-day:first-child { transform: none; }
.ml-scale .ml-day:last-child { transform: translateX(-100%); text-align: right; }
@media (max-width: 575.98px) { .ml-day.is-minor { display: none; } }
.ml-next { border-top: 1px solid var(--rule); margin-top: 4px; }
.ml-next > .text-muted { display: block; padding: 14px 0 4px; font-size: var(--fs-sm); }
.ml-next-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "day title amount" "day when amount"; column-gap: 12px; align-items: center;
  padding: 10px 8px; margin: 0 -8px; border-radius: var(--r-md); color: var(--text); text-decoration: none; min-height: 56px; transition: background-color var(--dur-hover) ease; }
.ml-next li + li .ml-next-item { border-top: 1px solid var(--rule); border-radius: 0; }
.ml-next-item:hover { color: var(--text); background: var(--raised); border-radius: var(--r-md); }
.ml-next-item > .bi { display: none; }
.ml-next-day { grid-area: day; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--raised); font-weight: 700; font-size: .9375rem; font-variant-numeric: tabular-nums; color: var(--text); }
.ml-next-day.is-late { color: var(--negative); background: var(--negative-soft); }
.ml-next-title { grid-area: title; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-next-when { grid-area: when; font-size: var(--fs-xs); color: var(--muted); }
.ml-next-day.is-late ~ .ml-next-when { color: var(--negative); }
.ml-next-amount { grid-area: amount; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.month-line-static { margin: 8px 0 4px; }
.month-line:not(.month-line-static) .ml-mark { cursor: pointer; transition: transform var(--dur-ui) var(--ease-spring); }
.month-line:not(.month-line-static) .ml-mark::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }
@media (hover: hover) { .month-line:not(.month-line-static) .ml-mark:hover { transform: scale(1.45); } }
/* Aviso de la marca: superficie elevada con tinta del tema (legible en claro y oscuro) */
.ml-tip { position: absolute; z-index: 5; transform: translateY(-100%); pointer-events: none; background: var(--overlay); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 8px 11px; font-size: var(--fs-xs); line-height: 1.35; white-space: normal; width: max-content; max-width: min(260px, 100%);
  box-shadow: var(--shadow-2); opacity: 0; visibility: hidden; }
.ml-tip.is-measuring { visibility: hidden; opacity: 0; display: block; }
.ml-tip.is-shown { opacity: 1; visibility: visible; }
.ml-tip::after { content: ""; position: absolute; top: 100%; left: var(--tip-arrow, 50%); margin-left: -5px; border: 5px solid transparent; border-top-color: var(--overlay); }
.ml-tip-head { font-weight: 600; overflow-wrap: anywhere; }
.ml-tip-sub { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Línea de tiempo */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.timeline li:last-child { border-bottom: 0; }
.timeline .date-badge, .date-badge { width: 44px; min-height: 48px; border-radius: 12px; background: var(--raised); display: grid; place-content: center; text-align: center; flex-shrink: 0; line-height: 1.05; }
.date-badge .d { font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.date-badge .m { font-size: var(--fs-2xs); color: var(--muted); font-weight: 600; text-transform: lowercase; }
.date-badge.is-late { background: var(--negative-soft); }
.date-badge.is-late .d, .date-badge.is-late .m { color: var(--negative); }
/* Chip de fecha (.vv-date): día grande + mes corto; .is-soon / .is-late / .is-off */
.vv-date { flex-shrink: 0; width: 46px; min-height: 50px; border-radius: 13px; background: var(--raised); display: grid; place-content: center; text-align: center; line-height: 1; color: var(--text); transition: transform var(--dur-ui) var(--ease-spring); }
.vv-date b { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vv-date small { display: block; margin-top: 4px; font-size: var(--fs-2xs); color: var(--muted); }
.vv-date.is-soon { background: var(--warning-soft); }
.vv-date.is-soon small { color: var(--warning); }
.vv-date.is-late { color: var(--negative); background: var(--negative-soft); }
.vv-date.is-late small { color: var(--negative); }
.vv-date.is-off { opacity: .55; }
@media (hover: hover) { .tx-item:hover > .vv-date { transform: scale(1.05); } }

/* Tablas: líneas y alineación; en celular pasan a filas de dos líneas (.table-mobile-cards) */
.table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-striped-bg: transparent; --bs-table-hover-bg: var(--raised); --bs-table-hover-color: var(--text); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem .75rem; border-color: var(--rule); color: var(--text); }
.table thead th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--border); background: transparent; }
.table td.num, .table th.num, .table .text-end { font-variant-numeric: tabular-nums; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--raised); }
.table-responsive { border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
@media (max-width: 639.98px) {
  .table-mobile-cards thead { display: none; }
  .table-mobile-cards, .table-mobile-cards tbody { display: block; width: 100%; }
  .table-mobile-cards tr { display: block; border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .table-mobile-cards td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0 !important; padding: 3px 0 !important; text-align: right; }
  .table-mobile-cards td[data-label]::before { content: attr(data-label); color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-align: left; }
  .table-mobile-cards th[scope="row"] { display: block; border: 0 !important; padding: 2px 0 !important; font-weight: 600; }
}

/* Gráficos */
.chart-box { position: relative; width: 100%; min-height: 220px; }
.chart-box.is-short { min-height: 210px; }
.chart-box canvas { max-width: 100%; }
.chart-box.is-loading { border-radius: var(--r-md); background: color-mix(in srgb, var(--raised) 50%, transparent); overflow: hidden; }
@media (max-width: 575.98px) { .chart-box { min-height: 190px; } }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
/* Dona con cifra al centro y lista de categorías al lado (si la hoja tiene espacio) */
.card-body:has(> .donut-layout) { container-type: inline-size; }
.donut-layout { display: flex; flex-direction: column; align-items: center; gap: 20px; }
@container (min-width: 480px) { .donut-layout { flex-direction: row; } }
.donut-wrap { position: relative; width: 176px; height: 176px; flex-shrink: 0; overflow: hidden; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-center small { color: var(--muted); font-size: var(--fs-xs); }
.donut-center strong { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .donut-wrap { width: 156px; height: 156px; } }
.cat-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 3.2rem; align-items: center; column-gap: 10px; row-gap: 6px;
  padding: 10px 8px; margin: 0 -8px; border-radius: var(--r-md); transition: background-color var(--dur-hover) ease; }
.cat-rows li + li { border-top: 1px solid var(--rule); }
.cat-rows .vv-share { grid-column: 2 / -1; }
.cat-rows .pct { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-rows strong { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .cat-rows li:hover { background: var(--raised); } .cat-rows li:hover + li { border-top-color: transparent; } }

/* =====================================================================
   7. ESTRUCTURA (layouts/app.php)
   Escritorio ≥ 992: barra lateral agrupada + barra superior. Celular: barra superior + barra inferior
   Inicio · Movimientos · [+] · Cuentas · Más. "+" abre #addSheet; "Más" abre #moreMenu.
   ===================================================================== */
.app-shell { display: flex; min-height: 100vh; min-height: 100dvh; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); flex-direction: column; background: var(--ground); border-right: 1px solid var(--rule); padding: 18px 14px 14px; z-index: 1030; overflow-y: auto; scrollbar-width: thin; }
.sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; font-weight: 700; font-size: 1.125rem; color: var(--text); text-decoration: none; letter-spacing: -0.03em; }
.sidebar-brand:hover { color: var(--text); }
.sidebar-add { width: 100%; margin-bottom: 14px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-section { font-size: var(--fs-2xs); color: var(--faint); padding: 18px 12px 6px; font-weight: 600; }
.sidebar-link { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 12px; min-height: 40px; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; font-weight: 500; font-size: var(--fs-sm);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease; }
.sidebar-link .bi { font-size: 1.05rem; transition: transform var(--dur-ui) var(--ease-spring); }
.sidebar-link:hover { background: var(--raised); color: var(--text); }
@media (hover: hover) { .sidebar-link:hover .bi { transform: scale(1.08); } }
.sidebar-link.active { background: var(--raised); color: var(--text); font-weight: 600; }
.sidebar-link.active .bi { color: var(--accent-ink); }
.sidebar-link.active::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.sidebar-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--negative); color: #fff; font-size: var(--fs-2xs); font-weight: 700; display: inline-grid; place-items: center; }
.sidebar-footer { margin-top: auto; padding: 14px 4px 0; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-md); color: var(--text); text-decoration: none; min-height: 52px; }
.sidebar-user:hover { background: var(--raised); color: var(--text); }
.sidebar-user .min-w-0 > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: var(--muted); font-size: var(--fs-xs); }

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 992px) { .app-main { margin-left: var(--sidebar-w); } }
.app-topbar { position: sticky; top: 0; z-index: 1020; min-height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) var(--gutter) 0;
  display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--ground) 86%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--dur-hover) ease; }
.app-topbar.is-scrolled { border-bottom-color: var(--rule); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .app-topbar { background: var(--ground); } }
@media (min-width: 992px) { .app-topbar { padding-left: 40px; padding-right: 40px; } }
.topbar-brand { display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.topbar-actions .btn-icon { color: var(--text); }
.scope-switch { min-width: 0; flex: 0 1 auto; }
.btn-scope { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; min-height: 40px; background: var(--raised); border: 1px solid transparent; border-radius: var(--r-pill);
  padding: 4px 12px 4px 6px; font-weight: 600; font-size: var(--fs-sm); color: var(--text); transition: background-color var(--dur-hover) ease; }
.btn-scope:hover { background: color-mix(in srgb, var(--raised) 86%, var(--text)); color: var(--text); }
.btn-scope .scope-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); font-size: .875rem; }
.btn-scope.is-group .scope-ic { background: var(--info-soft); color: var(--info); }
.btn-scope .scope-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.btn-scope.dropdown-toggle::after { border: 0; content: "\F282"; font-family: bootstrap-icons; font-size: .7rem; vertical-align: 0; margin-left: 2px; color: var(--muted); }
.scope-menu { min-width: 260px; }
.btn-icon .notif-badge { position: absolute; top: 6px; right: 5px; font-size: .625rem; min-width: 1.45em; padding: .25em .4em; background: var(--negative) !important; color: #fff; box-shadow: 0 0 0 2px var(--ground); }
.topbar-avatar { width: 44px; height: 44px; border-radius: 50%; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.topbar-avatar .avatar { box-shadow: 0 0 0 2px var(--ground), 0 0 0 3px var(--hairline-strong); }

.app-content { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 12px var(--gutter) calc(var(--bottom-h) + 40px + env(safe-area-inset-bottom)); }
.app-content-wide { max-width: 1400px; }
@media (min-width: 992px) { .app-content { padding: 24px 40px 64px; } }
.app-footer { color: var(--faint); font-size: var(--fs-xs); text-align: center; margin: 48px 0 8px; }
.app-footer a { color: var(--muted); }
.avatar { border-radius: 50%; object-fit: cover; display: inline-block; flex-shrink: 0; }
.avatar-initials { --av-h: 160; display: inline-grid; place-items: center; font-weight: 700; font-family: var(--font-text); background: hsl(var(--av-h) 50% 90%); color: hsl(var(--av-h) 45% 25%); }
[data-bs-theme="dark"] .avatar-initials { background: hsl(var(--av-h) 24% 22%); color: hsl(var(--av-h) 55% 82%); }

/* Encabezado de pantalla (partials/page_header) */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-header .min-w-0 { flex: 1 1 12rem; }
.page-eyebrow { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.page-title { font-size: var(--fs-title); font-weight: 700; margin: 0; letter-spacing: -0.035em; line-height: var(--lh-tight); }
.page-subtitle { color: var(--muted); margin: 4px 0 0; font-size: .9375rem; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-actions .btn { white-space: nowrap; }
.btn-back { margin-left: -10px; align-self: flex-start; margin-top: 2px; color: var(--text); }
@media (min-width: 992px) { .page-header { margin-bottom: 28px; } }
@media (max-width: 575.98px) {
  .page-actions:has(> :nth-child(2)) { width: 100%; }
  .page-actions:has(> :nth-child(2)) > .btn, .page-actions:has(> :nth-child(2)) > form { flex: 1 1 0; }
  .page-actions > form > .btn { width: 100%; }
  .page-header:not(:has(.page-actions > :nth-child(2))) { align-items: center; }
}
@media (min-width: 400px) and (max-width: 575.98px) {
  /* Con una sola acción el título y el botón comparten fila; en 320–399px el botón baja para no exprimir el subtítulo */
  .page-header:not(:has(.page-actions > :nth-child(2))) { flex-wrap: nowrap; }
}

/* Selector de mes (dashboard/_month_nav) */
.month-nav { display: inline-flex; align-items: center; height: 44px; border-radius: 14px; background: var(--raised); padding: 2px; }
.month-nav > .btn.btn-icon { flex: 0 0 auto; width: 40px; height: 40px; min-height: 40px; border-radius: 11px; font-size: 1rem; color: var(--text); }
.month-nav > .btn.btn-icon:hover { background: var(--surface); }
.month-nav-input { width: 158px; min-height: 40px !important; height: 40px; padding: 0 4px; border: 0 !important; background: transparent !important; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.month-nav-input:focus { box-shadow: inset 0 0 0 2px var(--accent) !important; border-radius: 8px; }
[data-bs-theme="dark"] .month-nav-input::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }
@media (max-width: 575.98px) {
  .page-header:has(> .page-actions > .month-nav) { flex-wrap: wrap; align-items: flex-end; }
  .page-actions:has(> .month-nav) { width: 100%; }
  .page-actions > .month-nav { width: 100%; }
  .month-nav .month-nav-input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Barra inferior (celular y tableta) */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom)); padding: 0 6px env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--ground) 88%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid var(--rule); }
.bottom-link { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); text-decoration: none;
  font-size: var(--fs-2xs); font-weight: 600; background: none; border: 0; padding: 0; min-width: 0; -webkit-tap-highlight-color: transparent; transition: color var(--dur-hover) ease; }
.bottom-link span { position: relative; z-index: 1; white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 359.98px) { .bottom-link { font-size: .6875rem; } }
.bottom-link .bi { position: relative; z-index: 1; font-size: 1.35rem; line-height: 1; transition: transform var(--dur-ui) var(--ease-spring); }
.bottom-link:hover { color: var(--text); }
.bottom-link.active { color: var(--text); }
.bottom-link::before { content: ""; position: absolute; top: 9px; left: 50%; width: 58px; height: 30px; margin-left: -29px; border-radius: 99px;
  background: var(--accent-soft); opacity: 0; transform: scaleX(.4); transition: opacity var(--dur-ui) ease, transform 380ms var(--ease-spring); }
.bottom-link.active::before { opacity: 1; transform: none; }
.bottom-link.active .bi { color: var(--accent-ink); }
.bottom-link:active .bi { transform: scale(.88); }
.bottom-add { display: grid; place-items: center; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
.bottom-add .add-dot { position: relative; width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; font-size: 1.5rem; background: var(--accent-fill); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent); transition: transform var(--dur-press) var(--ease-out); }
.bottom-add:active .add-dot { transform: scale(.92); }
.bottom-add .add-dot .bi { transition: transform 320ms var(--ease-spring); }
.bottom-add[aria-expanded="true"] .add-dot .bi { transform: rotate(45deg); }
.bottom-add .add-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.bottom-add:focus-visible { outline: none; }
.bottom-add:focus-visible .add-dot { outline: 2px solid var(--text); outline-offset: 3px; }
.fab-wrap { display: none !important; }

/* Hoja "¿Qué quieres registrar?" (#addSheet) y menú de escritorio (.add-menu) */
.add-menu { min-width: 280px; }
.add-ic { --tone: var(--muted); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem;
  background: color-mix(in srgb, var(--tone) 15%, transparent); color: var(--tone); }
.add-menu .add-ic { width: 32px; height: 32px; border-radius: 10px; font-size: .95rem; }
.ic-gasto { --tone: var(--negative); } .ic-ingreso { --tone: var(--positive); } .ic-transferencia { --tone: var(--info); }
.ic-factura { --tone: var(--warning); } .ic-deuda { --tone: #A78BFA; } .ic-compra { --tone: #2DD4BF; }
.ic-recordatorio { --tone: #F472B6; } .ic-importar { --tone: var(--muted); }
[data-bs-theme="light"] .ic-deuda { --tone: #7C3AED; } [data-bs-theme="light"] .ic-compra { --tone: #0F766E; } [data-bs-theme="light"] .ic-recordatorio { --tone: #BE185D; }
.add-primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.add-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 112px; padding: 14px; border-radius: 18px; background: var(--raised);
  color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.add-tile strong { display: block; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.add-tile small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; }
.add-tile:hover { color: var(--text); background: color-mix(in srgb, var(--raised) 88%, var(--text)); }
.add-tile:active { transform: scale(.97); }
.add-tile.is-main { background: var(--accent-fill); color: var(--on-accent); }
.add-tile.is-main small { color: color-mix(in srgb, var(--on-accent) 78%, transparent); }
.add-tile.is-main .add-ic { background: color-mix(in srgb, var(--on-accent) 14%, transparent); color: var(--on-accent); }
.add-tile.is-main:hover { color: var(--on-accent); background: color-mix(in srgb, var(--accent-fill) 90%, var(--text)); }
.add-list { list-style: none; margin: 0; padding: 0; }
.add-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 10px; margin: 0 -10px; border-radius: 14px; color: var(--text); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.add-row:hover, .add-row:focus-visible { background: var(--raised); color: var(--text); }
.add-row:active { transform: scale(.98); }
.add-row strong { display: block; font-weight: 600; }
.add-row small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.add-row > .bi:last-child { margin-left: auto; color: var(--faint); }
.add-list li + li .add-row { position: relative; }
.add-list li + li .add-row::before { content: ""; position: absolute; top: 0; left: 58px; right: 10px; height: 1px; background: var(--rule); }

/* Menú "Más" (#moreMenu): perfil arriba, secciones agrupadas en rejilla de íconos */
.more-profile { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 6px; border-radius: 16px; background: var(--raised); color: var(--text); text-decoration: none; }
.more-profile:hover { color: var(--text); background: color-mix(in srgb, var(--raised) 88%, var(--text)); }
.more-profile strong, .more-profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more-profile small { color: var(--muted); font-size: var(--fs-xs); }
.more-profile > .bi { margin-left: auto; color: var(--faint); }
.more-group-title { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin: 18px 0 8px; }
.more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.more-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 2px 10px; min-height: 80px; border-radius: 16px; color: var(--text); text-decoration: none;
  font-size: var(--fs-2xs); font-weight: 600; text-align: center; line-height: 1.2; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.more-item .bi { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; background: var(--raised); color: var(--text); transition: background-color var(--dur-hover) ease; }
.more-item:hover { color: var(--text); background: color-mix(in srgb, var(--raised) 50%, transparent); }
.more-item:active { transform: scale(.95); }
.more-item.active .bi { background: var(--accent-soft); color: var(--accent-ink); }
.more-item.active { color: var(--text); }
.more-foot { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.more-foot .btn { flex: 1 1 0; }
@media (max-width: 359.98px) { .more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Celular muy angosto */
@media (max-width: 359.98px) {
  :root { --gutter: 12px; }
  .btn-scope { padding-right: 10px; }
  .btn-scope .scope-ic { display: none; }
}

/* =====================================================================
   8. PANTALLAS (fase 1)
   ===================================================================== */
/* ---- Inicio */
.dash-hero { margin-bottom: 14px; }
.dash-used { margin-top: 16px; }
.dash-used-head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 8px; }
.dash-used-head strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-used .progress { --bs-progress-height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.dash-finding { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--negative-soft); color: var(--text); text-decoration: none; min-height: 52px; }
.dash-finding > .bi:first-child { color: var(--negative); font-size: 1.1rem; flex-shrink: 0; }
.dash-finding span { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: var(--fs-sm); }
.dash-finding .dash-finding-cta { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; padding: 6px 10px; border-radius: 99px; background: var(--surface); color: var(--text); }
.dash-finding:hover { color: var(--text); }
@media (hover: hover) { .dash-finding:hover .btn-arrow { transform: translateX(3px); } }
/* Accesos rápidos: 4 círculos bajo la cifra */
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 22px; }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 4px 0; color: var(--text); text-decoration: none; font-size: var(--fs-xs); font-weight: 600; text-align: center; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
.quick-action .add-ic { width: 52px; height: 52px; border-radius: 18px; font-size: 1.3rem; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease; }
.quick-action:hover { color: var(--text); }
@media (hover: hover) { .quick-action:hover .add-ic { background: color-mix(in srgb, var(--tone) 24%, transparent); } }
.quick-action:active .add-ic { transform: scale(.92); }
@media (min-width: 768px) { .quick-actions { grid-template-columns: repeat(4, minmax(0, 120px)); } }
.dash-accounts .card-body { container-type: inline-size; }
.dash-accounts-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; }
.dash-accounts-grid > * { min-width: 0; }
.dash-accounts-grid .tx-sub { overflow-wrap: anywhere; white-space: normal; }
.dash-accounts-total { font-size: clamp(1.5rem, 9cqi, 2rem); font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.dash-accounts-list .tx-item { min-height: 52px; padding: 8px 0; gap: 12px; }
.dash-card-due { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--warning-soft); color: var(--text); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; min-height: 52px; }
.dash-card-due > .bi:first-child { color: var(--warning); }
.dash-card-due.is-late { background: var(--negative-soft); }
.dash-card-due.is-late > .bi:first-child { color: var(--negative); }
.dash-card-due:hover { color: var(--text); }
.dash-accounts-cta { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px dashed var(--hairline-strong); color: var(--muted); font-size: var(--fs-sm); text-decoration: none; margin-bottom: 16px; }
.dash-accounts-cta strong { color: var(--text); display: block; }
.dash-accounts-cta:hover { color: var(--muted); border-color: var(--accent); }
@container (min-width: 560px) { .dash-accounts-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; } }
.advice-row { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.advice-row:last-child { border-bottom: 0; }
.advice-row h3 { font-size: var(--fs-h3); font-weight: 600; }
.advice-row p { margin: 2px 0 4px; color: var(--muted); font-size: var(--fs-sm); max-width: 70ch; }
.advice-row a { font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; font-size: var(--fs-sm); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
@media (min-width: 992px) { .dash-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.dash-grid > .card { margin: 0; }
.disclaimer-box, .dash-note { font-size: var(--fs-xs); color: var(--muted); background: var(--raised); border-radius: var(--r-sm); padding: 10px 12px; }

/* ---- Movimientos */
.mov-summary { margin-bottom: 16px; }
.tx-item.is-scheduled .tx-icon, .tx-item.is-scheduled .tx-amount { opacity: .6; }
.mov-flow { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--raised); gap: 3px; margin-top: 14px; }
.mov-flow > i { display: block; height: 100%; border-radius: 99px; }
.mov-flow .in { background: var(--positive); }
.mov-flow .out { background: color-mix(in srgb, var(--text) 35%, transparent); }
.mov-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.mov-search { display: flex; gap: 8px; flex: 1 1 100%; }
.mov-search .search-field { position: relative; flex: 1 1 auto; min-width: 0; }
.mov-search .search-field > .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.mov-search .search-field .form-control { padding-left: 2.6rem; border-radius: 14px; }
.mov-search .btn-filters { min-height: 48px; border-radius: 14px; }
.mov-search .btn-filters .bi { transition: transform var(--dur-ui) var(--ease-spring); }
.mov-search .btn-filters[aria-expanded="true"] .bi { transform: rotate(90deg); }
.filter-count { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem; border-radius: 99px; background: var(--accent-fill); color: var(--on-accent); font-size: var(--fs-2xs); font-weight: 700; }
.mov-filters { margin-top: 10px; }
.mov-filters .card { background: var(--surface); }
.mov-active { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.mov-list-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mov-list-head .count { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.mov-day .day-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top)); z-index: 3;
  background: var(--surface); margin: 0 -2px; padding-left: 2px; padding-right: 2px; }
.mov-day:first-child .day-header { padding-top: 8px; }
.day-header .day-sum { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); white-space: nowrap; }
.mov-pager { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* ---- Gasto: detalle */
.expense-cat { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; }
.expense-cat .tx-icon { width: 44px; height: 44px; font-size: 1.15rem; }
.expense-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.div-row .tx-main { display: grid; gap: 6px; }
.div-row .vv-share { max-width: 240px; }
.note-box { margin: 4px 0 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--raised); }
.receipt-img { border-radius: var(--r-md); max-height: 420px; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) { a:hover > .receipt-img { transform: scale(1.01); } }
.receipt-pick .btn .bi { transition: transform var(--dur-ui) var(--ease-spring); }
@media (hover: hover) { .receipt-pick .btn:hover .bi { transform: scale(1.12) rotate(-6deg); } }
.file-chip:not(:empty) { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--positive-soft); color: var(--text) !important; }
.file-chip:not(:empty)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.danger-zone { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 20px; }

/* ---- Cuentas y tarjetas */
.acct-tile { position: relative; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--acct, var(--raised)); color: var(--acct-ink, var(--text)); font-weight: 700; font-size: 1rem; line-height: 1;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); transition: transform var(--dur-ui) var(--ease-spring); }
.acct-tile-sm { width: 28px; height: 28px; border-radius: 8px; font-size: .8125rem; }
.acct-tile-lg { width: 48px; height: 48px; border-radius: 14px; font-size: 1.15rem; }
.acct-tile-chip { position: absolute; right: 4px; bottom: 5px; width: 9px; height: 6px; border-radius: 2px; background: color-mix(in srgb, var(--acct-ink, #fff) 55%, transparent); }
.acct-tile-sm .acct-tile-chip { right: 3px; bottom: 3px; width: 6px; height: 4px; }
@media (hover: hover) { .tx-item:has(.stretched-link):hover .acct-tile { transform: scale(1.06); } }
.acct-group { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin: 16px 0 0; }
.acct-group:first-child { margin-top: 6px; }
.acct-group-total { float: right; font-variant-numeric: tabular-nums; }
.acct-flag { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 99px; background: var(--raised); color: var(--muted); font-size: var(--fs-2xs); font-weight: 600; line-height: 1.6; }
.acct-flag.is-main { background: var(--accent-soft); color: var(--accent-ink); }
.acct-last4 { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.acct-row.is-archived { opacity: .7; }
.acct-card-row { flex-wrap: wrap; }
.acct-card-row > .tx-main { flex: 1 1 0; }
.acct-card-extra { flex: 1 0 100%; padding-left: 52px; display: grid; gap: 6px; min-width: 0; }
.acct-cupo { --bs-progress-height: 6px; max-width: 420px; }
.acct-cupo-lg { --bs-progress-height: 8px; margin: 10px 0 8px; max-width: 560px; }
.acct-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-xs); color: var(--muted); }
.acct-meta strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.acct-meta .is-soon, .stmt-due.is-soon { color: var(--warning); }
.acct-meta .is-late, .stmt-due.is-late { color: var(--negative); }
.acct-suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 0 16px; }
.acct-archived { margin-bottom: 16px; }
.acct-archived > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.acct-archived > summary::-webkit-details-marker { display: none; }
.acct-archived > summary .bi { transition: transform var(--dur-ui) var(--ease-out); }
.acct-archived[open] > summary .bi { transform: rotate(180deg); }
/* Tarjeta de crédito como objeto: el color de la cuenta, sin logos de marcas */
.card-visual-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 768px) { .card-visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-visual { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; min-height: 176px;
  color: var(--acct-ink, #fff); text-decoration: none;
  background: radial-gradient(140% 120% at 100% 0%, color-mix(in srgb, var(--acct, #334) 60%, white) 0%, transparent 55%), linear-gradient(135deg, var(--acct, #334), color-mix(in srgb, var(--acct, #334) 62%, black));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .15) inset, 0 14px 30px -18px color-mix(in srgb, var(--acct, #000) 80%, black); transition: transform var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) ease; }
.card-visual:hover { color: var(--acct-ink, #fff); }
@media (hover: hover) { .card-visual:hover { transform: translateY(-2px); } }
.card-visual:active { transform: scale(.985); }
.card-visual-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card-visual-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-visual-sub { font-size: var(--fs-xs); opacity: .82; }
.card-visual-chip { width: 34px; height: 24px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .2)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.card-visual-amount { margin-top: auto; }
.card-visual-amount small { display: block; font-size: var(--fs-xs); opacity: .82; }
.card-visual-amount strong { display: block; font-size: 1.625rem; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.card-visual .progress { --bs-progress-bg: rgba(255, 255, 255, .22); --bs-progress-height: 5px; }
.card-visual .progress-bar { background-color: currentColor !important; }
.card-visual-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: var(--fs-xs); opacity: .92; font-variant-numeric: tabular-nums; }
.card-visual-foot .is-late, .card-visual-foot .is-soon { font-weight: 700; }
.card-visual-last4 { font-variant-numeric: tabular-nums; letter-spacing: .08em; font-size: var(--fs-sm); opacity: .9; }
.acct-hero-card { min-height: 200px; padding: 20px; border-radius: 24px; }
.acct-hero-card .card-visual-amount .figure-value { font-size: clamp(2.125rem, 1.8rem + 1.8vw, 2.75rem); margin: 2px 0 0; color: inherit; }
@media (hover: hover) { section.card-visual:hover { transform: none; } }
@media (min-width: 768px) { .acct-hero-card { max-width: 560px; } }
/* Detalle: movimientos con saldo acumulado */
.acct-moves .tx-item.is-future { opacity: .62; }
.acct-run { font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-moves .acct-move-del { margin-left: -4px; }
.acct-start { min-height: 56px; }
.acct-start .tx-title { color: var(--muted); font-weight: 500; }
.acct-adjust > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 56px; font-weight: 600; }
.acct-adjust > summary::-webkit-details-marker { display: none; }
.acct-adjust > summary > .bi { color: var(--muted); transition: transform var(--dur-ui) var(--ease-out); }
.acct-adjust[open] > summary > .bi { transform: rotate(180deg); }
.acct-adjust-input { flex: 1 1 180px; min-width: 0; max-width: 280px; }
/* Extracto de la tarjeta: pago total frente a pago mínimo */
.stmt-due { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--raised); font-size: var(--fs-sm); }
.stmt-due .bi { margin-top: 2px; }
.stmt-due.is-soon { background: var(--warning-soft); }
.stmt-due.is-late { background: var(--negative-soft); }
.stmt-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.stmt-option { display: grid; gap: 2px; padding: 14px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; min-width: 0;
  transition: border-color var(--dur-hover) ease, transform var(--dur-press) ease, background-color var(--dur-hover) ease; }
.stmt-option.is-main { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: var(--accent-soft); }
@media (hover: hover) { .stmt-option:hover { border-color: var(--text); color: var(--text); } }
.stmt-option:active { transform: scale(.98); }
.stmt-option-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.stmt-option-label small { font-size: var(--fs-2xs); color: var(--faint); }
.stmt-option-value { font-size: clamp(1.15rem, 1rem + 1.2vw, 1.5rem); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stmt-option.is-main .stmt-option-value { color: var(--accent-ink); }
.stmt-option-hint { font-size: var(--fs-xs); color: var(--muted); }
.stmt-kv { margin: 0 0 10px; }
.stmt-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.stmt-kv > div:last-child { border-bottom: 0; }
.stmt-kv dt { font-weight: 400; color: var(--muted); min-width: 0; font-size: var(--fs-sm); }
.stmt-kv dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Simulador de cuotas */
.sim-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 10px; }
.sim-result > div { display: grid; gap: 2px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--raised); }
.sim-result span { font-size: var(--fs-xs); color: var(--muted); }
.sim-result strong { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; letter-spacing: -0.02em; }
/* Formularios de cuenta y transferencia */
.acct-form .card-body { display: grid; gap: 22px; }
.acct-form .card-body > * { margin-bottom: 0 !important; }
.acct-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.acct-types .btn { display: flex; align-items: center; gap: 10px; justify-content: flex-start; min-height: 52px; text-align: left; white-space: normal; line-height: 1.2; font-weight: 600; border-radius: 14px; }
.acct-types .btn .bi { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); flex-shrink: 0; }
.acct-types .btn-check:checked + .btn { background: var(--accent-soft); border-color: var(--accent); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
.acct-types .btn-check:checked + .btn .bi { color: var(--accent-ink); }
.acct-types .btn-check:focus-visible + .btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-color { width: 100%; min-height: 48px; padding: 6px; }
.acct-rate-type { max-width: 9.5rem; }
.acct-switches { display: grid; gap: 4px; }
.acct-danger { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 16px; }
.transfer-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: end; }
.transfer-swap { justify-self: center; }
.pay-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pay-preset { display: grid; gap: 1px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); color: var(--text); text-decoration: none; min-width: 0; background: var(--surface);
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.pay-preset span, .pay-preset small { font-size: var(--fs-xs); color: var(--muted); }
.pay-preset strong { font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; letter-spacing: -0.02em; }
.pay-preset.is-active, .pay-preset:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.pay-preset:active { transform: scale(.98); }
@media (hover: hover) { .pay-preset:hover { border-color: var(--text); color: var(--text); } }
/* Gasto: cuenta y cuotas */
.acct-cuotas { margin-top: 14px; }
.acct-cuotas-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.acct-cuotas-row .form-control { width: 96px; flex: 0 0 96px; }
.acct-cuotas-est { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; }
@media (min-width: 576px) {
  .acct-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .transfer-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .transfer-swap { transform: rotate(90deg); margin-bottom: 4px; }
  .transfer-swap.is-arrow { transform: rotate(-90deg); margin-bottom: 12px; }
}
@media (max-width: 575.98px) {
  .acct-card-extra { padding-left: 52px; }
  .sim-result { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sim-result > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 359.98px) {
  .stmt-options { grid-template-columns: minmax(0, 1fr); }
  .acct-types { grid-template-columns: minmax(0, 1fr); }
  .acct-card-extra { padding-left: 0; }
}

/* =====================================================================
   9. MÓDULOS EXISTENTES (se ajustan solos con los tokens; fase 2 los rediseña)
   ===================================================================== */
.debt-row { flex-wrap: wrap; align-items: flex-start; padding: 14px 0; }
.debt-row > .tx-main { flex: 1 1 0; }
.debt-row > .text-end { flex: 0 0 auto; }
.debt-row .debt-progress { flex: 1 0 100%; padding-left: 52px; }
@media (max-width: 359.98px) { .debt-row .debt-progress { padding-left: 0; } }
.tip-card .card-body { position: relative; padding-left: 1.4rem; }
.tip-card .card-body::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: 3px; background: var(--accent); }
.tip-card.tip-warning .card-body::before { background: var(--warning); }
.tip-card.tip-danger .card-body::before { background: var(--negative); }
.shop-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); min-height: 56px; }
.shop-item.done .shop-name { text-decoration: line-through; color: var(--muted); }
.shop-item .form-check-input, .shop-check { width: 1.75rem; height: 1.75rem; flex-shrink: 0; margin: 0; }
.activity-item { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.activity-item:last-child { border-bottom: 0; }
.legal-content { max-width: 70ch; }
.legal-content h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.legal-content p, .legal-content li { line-height: 1.65; }
.division-fields { border-color: var(--border) !important; border-radius: var(--r-lg) !important; background: color-mix(in srgb, var(--raised) 45%, transparent); }
@media (max-width: 575.98px) { .division-members .division-input { max-width: 132px !important; } }
.steps { display: flex; gap: 4px; margin-bottom: 20px; }
.steps .step { flex: 1; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--text) 12%, transparent); position: relative; overflow: hidden; }
.steps .step.done { background: var(--text); }
.steps .step.current { background: color-mix(in srgb, var(--text) 12%, transparent); }
.steps .step.current::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; }
.steps-label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; margin: -12px 0 16px; }


/* =====================================================================
   10. ACCESO: registro, inicio de sesión, onboarding y recorrido (sin cambios de diseño en la fase 1)
   ===================================================================== */
.auth-body { min-height: 100vh; min-height: 100dvh; background: var(--ground); }
.auth-wrap { max-width: 440px; margin: 0 auto; padding: 32px var(--gutter) 40px; }
.auth-wrap.auth-wide { max-width: 720px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; color: var(--text); }
.auth-brand:hover { color: var(--text); }
.auth-brand-name { font-family: var(--font-figure); font-weight: 700; font-size: 1.375rem; letter-spacing: -0.03em; }
.auth-slogan { text-align: center; color: var(--muted); margin: 4px 0 4px; font-size: .875rem; }
.auth-card { border-radius: 16px; border-color: transparent; }
.auth-card .card-body { padding: 1.5rem; }
.auth-card h1, .auth-card .h3, .auth-card .h4 { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.025em; }
@media (max-width: 575.98px) { .auth-card .card-body { padding: 1.15rem; } }
.auth-alt { text-align: center; margin-top: 16px; color: var(--muted); }
.auth-alt a { font-weight: 600; }
/* =====================================================================
   REGISTRO, INICIO DE SESIÓN Y ONBOARDING
   Escritorio: escena de la marca a la izquierda, formulario a la derecha.
   Celular: una columna; la escena se reduce a una franja con el logo y la línea.
   ===================================================================== */
.auth-body { background: var(--ground); }
.auth-shell { min-height: 100vh; min-height: 100dvh; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.auth-brand-name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.03em; }
.auth-brand .logo-needle { transform-box: view-box; transform-origin: 32px 32px; }
.js-motion .auth-brand .logo-needle { animation: exp-needle-settle 1500ms var(--ease-out) 250ms backwards; }

/* Columna del formulario: sin hoja, directo sobre el fondo */
.auth-main { width: 100%; max-width: 440px; margin: 0 auto; padding: 24px var(--gutter) 32px; outline: none; }
.auth-main.auth-wide { max-width: 720px; }
.has-scene .auth-card { background: transparent !important; border: 0 !important; border-radius: 0; }
.has-scene .auth-card > .card-body { padding: 0; }
.auth-main .page-title { font-size: clamp(1.5rem, 1.3rem + .9vw, 1.875rem) !important; font-weight: 600 !important; letter-spacing: -0.035em; line-height: 1.15; margin: 0 0 6px; }
.auth-main .page-subtitle { font-size: .9375rem; color: var(--muted); margin: 0 0 24px; }
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-form > fieldset { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; border: 0; min-width: 0; }
.auth-field { margin: 0; }
.auth-field .form-control { min-height: 50px; font-size: 1rem; }
.auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.auth-label-link { font-size: .8125rem; color: var(--muted); text-decoration: none; margin-bottom: .4rem; }
.auth-label-link:hover { color: var(--text); text-decoration: underline; }
.auth-form .btn-lg { min-height: 52px; font-size: 1rem; }
.auth-submit { margin-top: 4px; }
.auth-alt { text-align: center; margin: 24px 0 0; color: var(--muted); font-size: .9375rem; }
.auth-alt a { font-weight: 500; color: var(--text); }
.auth-legal { text-align: center; font-size: .8125rem; color: var(--faint); margin: 32px 0 0; }
.auth-legal a { color: var(--muted); }
.auth-top { display: flex; justify-content: center; padding: 8px 0 20px; }
.auth-check { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .65rem; padding-left: 0; min-height: 44px; margin: 0; }
.auth-check .form-check-input { float: none; flex-shrink: 0; margin: .1em 0 0; width: 1.375em; height: 1.375em; }
.auth-check .form-check-label { flex: 1 1 0; min-width: 0; line-height: 1.5; color: var(--muted); }
.auth-check .form-check-label a { font-weight: 500; color: var(--text); }
.auth-check .invalid-feedback, .auth-check .live-feedback { flex-basis: 100%; margin-top: 0; padding-left: 2rem; }
.auth-check .invalid-feedback { display: block; }
.auth-terms { padding: 14px; border-radius: 12px; background: var(--raised); }
.auth-main .alert { margin-bottom: 20px; }

/* Medidor de fuerza y reglas de la contraseña */
.password-meter { height: 4px; border-radius: 99px; background: var(--raised); overflow: hidden; margin-top: 10px; }
.password-meter > span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; border-radius: 99px; background: var(--faint);
  transition: transform 420ms var(--ease-out), background-color var(--t-ui) ease; }
.password-meter > span[data-level="1"] { background: var(--negative); }
.password-meter > span[data-level="2"] { background: var(--warning); }
.password-meter > span[data-level="3"] { background: color-mix(in srgb, var(--warning) 50%, var(--positive)); }
.password-meter > span[data-level="4"], .password-meter > span[data-level="5"] { background: var(--positive); }
.pw-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-top: 8px; }
.pw-label { font-size: .8125rem; font-weight: 500; white-space: nowrap; color: var(--muted); }
.pw-label[data-level="1"] { color: var(--negative); }
.pw-label[data-level="2"] { color: var(--warning); }
.pw-label[data-level="4"], .pw-label[data-level="5"] { color: var(--positive); }
.pw-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8125rem; color: var(--muted); }
.pw-rules li { display: inline-flex; align-items: center; gap: 5px; transition: color var(--t-hover) ease; }
.pw-rules li::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--control); flex-shrink: 0;
  background: transparent center / 10px no-repeat;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease, transform var(--t-ui) var(--ease-spring);
}
.pw-rules li.is-met { color: var(--text); }
.pw-rules li.is-met::before {
  border-color: var(--positive); background-color: var(--positive); transform: scale(1.05);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230F1011' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}

[data-bs-theme="light"] .pw-rules li.is-met::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
}

/* Registro por pasos (solo con JS: .is-stepped). Sin JS se ve todo junto. */
.stepper-head { margin-bottom: 4px; }
.stepper-dots { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stepper-dots li { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--faint); min-width: 0; transition: color var(--t-ui) ease; }
.stepper-num {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0;
  font-size: .75rem; font-weight: 500; font-variant-numeric: tabular-nums; background: var(--raised); color: var(--muted);
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform 320ms var(--ease-spring);
}
.stepper-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper-dots li.is-current { color: var(--text); }
.stepper-dots li.is-current .stepper-num { background: var(--text); color: var(--ground); transform: scale(1.06); }
.stepper-dots li.is-done { color: var(--muted); }
.stepper-dots li.is-done .stepper-num { background: color-mix(in srgb, var(--positive) 22%, var(--raised)); color: var(--positive); }
.stepper-bar { height: 3px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.stepper-bar > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-expo); }
.is-stepped .reg-step:not(.is-current) { display: none; }
.step-nav { display: flex; gap: 8px; margin-top: 4px; }
.step-nav[hidden] { display: none; }
.step-nav .btn-light { min-width: 52px; padding-left: 0; padding-right: 0; }
.is-stepped .step-nav-final .w-100 { width: auto !important; }

/* Onboarding y páginas sin escena */
.no-scene .auth-main { padding-top: 16px; }
.no-scene .auth-card { border-radius: 18px; }
@media (min-width: 576px) { .no-scene .auth-card > .card-body { padding: 1.75rem 2rem; } }

/* ---------------------------------------------------------------- La escena de la marca: un recorrido de tres paneles
   partials/auth_scene.php. Cada panel: una frase y una mini ilustración hecha con piezas de la interfaz.
   .is-touring (lo pone motion.js solo con movimiento): los paneles se apilan y rotan con fundido
   y desplazamiento corto; el punto activo se llena en 5,2 s y al terminar pasa al siguiente.
   Sin .is-touring (sin JS o movimiento reducido): escritorio muestra las tres frases como lista;
   celular, solo el primer panel. */
.auth-scene { position: relative; isolation: isolate; overflow: hidden; }
.auth-scene::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 55% at 22% 68%, var(--accent-glow), transparent 70%),
    radial-gradient(45% 35% at 85% 10%, color-mix(in srgb, var(--text) 4%, transparent), transparent 70%);
}
.scene-slogan { color: var(--muted); font-size: .9375rem; margin: 0; max-width: 32ch; }

.tour { --tour-interval: 5200ms; position: relative; width: 100%; max-width: 440px; }
.tour-kicker { font-size: .8125rem; color: var(--muted); margin: 0 0 14px; }
.tour-slides { list-style: none; margin: 0; padding: 0; }
.tour-title {
  display: flex; align-items: center; gap: 12px; margin: 0; color: var(--text); text-wrap: balance;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.15;
}
.tour-ic { display: none; width: 36px; height: 36px; border-radius: 50%; place-items: center; flex-shrink: 0; background: var(--raised); color: var(--muted); font-size: 1rem; }
.tour-art { margin-top: 22px; }

/* Mini tarjeta (piezas reales de la interfaz, cifras de ejemplo) */
.tour-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px 16px; background: color-mix(in srgb, var(--ground) 45%, var(--surface)); }
.tour-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 14px; font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tour-tag { flex-shrink: 0; font-size: .75rem; font-weight: 500; line-height: 1.5; padding: 0 8px; border-radius: 99px; border: 1px solid var(--hairline-strong); color: var(--muted); }

/* 1. Gastos del mes por categoría */
.tour-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tour-cats li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; row-gap: 6px; font-size: .875rem; color: var(--text); }
.tour-cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tour-cat-amount { font-variant-numeric: tabular-nums; }
.tour-bar { grid-column: 2 / -1; height: 4px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.tour-bar > i { display: block; height: 100%; border-radius: inherit; background: color-mix(in srgb, var(--text) 58%, transparent); transform-origin: left; }

/* 2. Cuentas de la casa */
.tour-debt { display: flex; align-items: center; gap: 14px; }
.tour-people { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tour-av { width: 40px; height: 40px; font-size: .9375rem; font-weight: 600; }
.tour-arrow { display: inline-grid; place-items: center; width: 22px; color: var(--muted); }
.tour-arrow i, .tour-bell i { display: inline-block; }
.tour-debt-text { font-size: .9375rem; line-height: 1.35; color: var(--muted); }
.tour-debt-text strong { font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tour-debt-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.tour-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 10px; background: var(--raised); color: var(--text); font-size: .875rem; font-weight: 500; }
.tour-note { font-size: .8125rem; color: var(--muted); }

/* 3. Aviso antes del vencimiento */
.tour-push { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline-strong); }
.tour-push + .tour-push { margin-top: 8px; }
.tour-push.is-later { background: transparent; border-color: var(--hairline); }
.tour-bell { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.is-later .tour-bell { background: var(--raised); color: var(--muted); }
.tour-push-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.tour-push-title { font-size: .875rem; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.tour-push-sub { font-size: .75rem; color: var(--muted); }
.tour-paid { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 2px 9px; border-radius: 99px; font-size: .75rem; font-weight: 500; background: color-mix(in srgb, var(--positive) 16%, transparent); color: var(--positive); }

/* Puntos: uno por panel; el activo se llena mientras está a la vista */
.tour-dots { display: flex; margin: 20px 0 0 -8px; }
.tour-dots[hidden] { display: none; }
.tour-dot { appearance: none; border: 0; background: transparent; padding: 0; width: 40px; height: 32px; display: inline-grid; place-items: center; border-radius: 8px; cursor: pointer; }
.tour-dot > span { position: relative; display: block; width: 24px; height: 4px; border-radius: 99px; overflow: hidden; background: var(--faint); transition: background-color var(--t-hover) ease; }
.tour-dot:hover > span { background: var(--muted); }
.tour-dot[aria-current="true"] > span { background: var(--hairline-strong); }
.tour-dot > span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--text); transform: scaleX(0); transform-origin: left; }
.tour-dot[aria-current="true"] > span::after { transform: none; }
.tour-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
@keyframes tour-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tour-in-x { from { opacity: 0; transform: translateX(-8px); } }
@keyframes tour-ring { 0%, 100% { transform: none; } 20% { transform: rotate(14deg); } 45% { transform: rotate(-10deg); } 70% { transform: rotate(5deg); } }
.tour.is-touring .tour-dot[aria-current="true"] > span::after { animation: tour-progress var(--tour-interval) linear forwards; }
.tour.is-paused .tour-dot > span::after { animation-play-state: paused; }

/* Rotación: los paneles comparten la misma celda (la altura no salta entre uno y otro) */
.tour.is-touring .tour-slides { display: grid; }
.tour.is-touring .tour-slide {
  grid-area: 1 / 1; opacity: 0; transform: translateX(16px); pointer-events: none;
  transition: opacity 240ms var(--ease-exit), transform 240ms var(--ease-exit);
}
.tour.is-touring .tour-slide.was-active { transform: translateX(-16px); }
.tour.is-touring .tour-slide.is-active {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity 460ms var(--ease-out) 120ms, transform 600ms var(--ease-out) 120ms;
}
/* Lo que hay dentro llega al entrar el panel */
.tour.is-touring .is-active .tour-cats li { animation: exp-rise 420ms var(--ease-out) backwards; animation-delay: calc(160ms + var(--i, 0) * 60ms); }
.tour.is-touring .is-active .tour-bar > i { animation: exp-grow-x 900ms var(--ease-expo) backwards; animation-delay: calc(280ms + var(--i, 0) * 90ms); }
.tour.is-touring .is-active .tour-av { animation: exp-pop 440ms var(--ease-spring) 180ms backwards; }
.tour.is-touring .is-active .tour-av:last-child { animation-delay: 420ms; }
.tour.is-touring .is-active .tour-arrow i { animation: tour-in-x 420ms var(--ease-out) 300ms backwards; }
.tour.is-touring .is-active .tour-debt-text { animation: exp-rise 420ms var(--ease-out) 460ms backwards; }
.tour.is-touring .is-active .tour-debt-foot { animation: exp-rise 420ms var(--ease-out) 600ms backwards; }
.tour.is-touring .is-active .tour-push:not(.is-later) { animation: exp-menu-in 420ms var(--ease-out) 180ms backwards; }
.tour.is-touring .is-active .tour-push:not(.is-later) .tour-bell i { transform-origin: 50% 15%; animation: tour-ring 700ms ease-in-out 600ms; }
.tour.is-touring .is-active .tour-paid { animation: exp-pop 420ms var(--ease-spring) 1500ms backwards; }
.tour.is-touring .is-active .tour-push.is-later { animation: exp-rise 420ms var(--ease-out) 380ms backwards; }

/* Sin rotación: las tres frases como lista, sin ilustraciones */
.tour:not(.is-touring) .tour-slides { display: flex; flex-direction: column; gap: 18px; }
.tour:not(.is-touring) .tour-ic { display: inline-grid; }
.tour:not(.is-touring) .tour-title { font-size: clamp(1.25rem, 1rem + .6vw, 1.5rem); }
.tour:not(.is-touring) .tour-art { display: none; }

/* Celular y tableta: la escena es una franja arriba con un solo panel */
@media (max-width: 991.98px) {
  .auth-scene { display: grid; padding: calc(14px + env(safe-area-inset-top)) var(--gutter) 16px; border-bottom: 1px solid var(--rule); }
  .auth-scene > .auth-brand, .auth-scene .tour { width: 100%; max-width: 560px; margin-inline: auto; }
  .auth-scene .auth-brand { margin-bottom: 10px; }
  .auth-scene .tour { position: static; }
  .tour-kicker, .auth-scene .scene-slogan { display: none; }
  .tour-title { font-size: 1.0625rem; letter-spacing: -0.02em; }
  .tour-art { margin-top: 10px; }
  .tour-card { padding: 10px 12px 12px; border-radius: 12px; }
  .tour-card-head { margin-bottom: 8px; font-size: .75rem; }
  .tour-cats { gap: 8px; }
  .tour-cats li { font-size: .8125rem; row-gap: 4px; }
  .tour-cats li:nth-child(n+3), .tour-debt-foot, .tour-push.is-later { display: none; }
  .tour-av { width: 32px; height: 32px; font-size: .8125rem; }
  .tour-debt { gap: 12px; }
  .tour-debt-text { font-size: .875rem; }
  .tour-push { padding: 8px 10px; gap: 10px; }
  .tour-bell { width: 30px; height: 30px; font-size: .875rem; }
  .tour-push-title { font-size: .8125rem; }
  .tour-dots { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: calc(var(--gutter) - 8px); margin: 0; }
  /* Sin rotación: solo el primer panel, con su ilustración */
  .tour:not(.is-touring) .tour-slide:not(:first-child) { display: none; }
  .tour:not(.is-touring) .tour-art { display: block; }
  .tour:not(.is-touring) .tour-ic { display: none; }
  .tour:not(.is-touring) .tour-title { font-size: 1.0625rem; }
  .has-scene .auth-main { padding-top: 28px; }
}
/* Escritorio: dos zonas */
@media (min-width: 992px) {
  .has-scene .auth-shell { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .auth-scene {
    position: sticky; top: 12px; height: calc(100vh - 24px); height: calc(100dvh - 24px); margin: 12px 0 12px 12px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 36px 48px 40px;
    border-radius: 22px; border: 1px solid var(--hairline);
    background: linear-gradient(160deg, var(--sheen), var(--surface) 55%);
  }
  .has-scene .auth-main { align-self: center; max-width: 420px; padding: 56px 24px; }
  .auth-main .page-subtitle { margin-bottom: 28px; }
}
@media (min-width: 1400px) {
  .auth-scene { padding: 44px 64px 48px; }
  .tour { max-width: 460px; }
}
@media (max-height: 700px) and (min-width: 992px) {
  .tour-art { margin-top: 14px; }
  .tour-push.is-later, .tour-kicker { display: none; }
}

/* Variante 'scene' de partials/month_line_static (ya no se usa en el acceso; se conserva por si otra vista la usa) */
.month-line-scene { margin: 0; padding-top: 0; }
.month-line-scene .ml-chip {
  position: absolute; bottom: 30px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0;
  padding: 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--raised) 85%, transparent); border: 1px solid var(--hairline);
  font-size: .75rem; line-height: 1.25; white-space: nowrap; color: var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.month-line-scene .ml-chip::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 10px; background: var(--hairline-strong); }
.month-line-scene .ml-chip-detail { color: var(--muted); font-variant-numeric: tabular-nums; }
.month-line-scene .ml-chip.is-paid .ml-chip-detail { color: var(--positive); }
.js-motion .month-line-scene .ml-chip { animation: exp-rise 420ms var(--ease-out) backwards; animation-delay: calc(700ms + var(--i, 0) * 140ms); }

/* Casilla de aceptación y escena de acceso (ajustes tras la revisión visual) */
.auth-check { display: flex; gap: 10px; align-items: flex-start; }
.auth-check .form-check-input { width: 1.4rem; height: 1.4rem; flex-shrink: 0; margin: .1rem 0 0; }
.auth-check .form-check-input.is-invalid ~ .form-check-label { color: var(--muted); }
.auth-check .form-check-input.is-invalid { border-color: var(--negative); }
.auth-scene .auth-brand { align-self: flex-start; justify-content: flex-start; }

/* =====================================================================
   11. MOVIMIENTO
   Un solo lenguaje: lo que entra sube 10 px y aparece (exp-rise, 420 ms, ease-out);
   lo que se dibuja crece de izquierda a derecha (expo); lo que se toca responde en ≤ 120 ms.
   - Solo transform y opacity. Nada bloquea el scroll ni mueve el diseño.
   - Lo que entra se oculta solo con .js-motion (head.php, si no se pidió reducir movimiento)
     y con animation-fill-mode: backwards: sin JS todo se ve.
   - [data-reveal] espera a .motion-ready (motion.js) y a entrar en pantalla.
   ===================================================================== */
@keyframes exp-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes exp-fade { from { opacity: 0; } }
@keyframes exp-pop { from { opacity: 0; transform: scale(0); } }
@keyframes exp-grow-x { from { transform: scaleX(0); } }
@keyframes exp-grow-y { from { transform: scaleY(0); } }
@keyframes exp-spin { to { transform: rotate(360deg); } }
@keyframes exp-menu-in { from { opacity: 0; translate: 0 -4px; scale: .98; } }
@keyframes exp-pill-in { from { opacity: 0; transform: scaleX(.4); } }
@keyframes exp-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
@keyframes exp-draw { from { stroke-dashoffset: var(--len, 60); } }
@keyframes exp-needle-settle { 0% { transform: rotate(-38deg); } 45% { transform: rotate(14deg); } 70% { transform: rotate(-6deg); } 88% { transform: rotate(2deg); } 100% { transform: none; } }
@keyframes exp-shimmer { to { transform: translateX(100%); } }
@keyframes exp-sheen-pass { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@keyframes ml-tip-in { from { opacity: 0; translate: 0 4px; } }
@keyframes vv-ring { from { opacity: 0; transform: scale(.55); } }
@keyframes vv-float { 50% { transform: translateY(-3px); } }

/* Transición entre páginas: la vieja se desvanece rápido; el título y la cifra viajan (nombres en head.php) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 140ms var(--ease-exit) both vt-out; }
::view-transition-new(root) { animation: 220ms var(--ease-out) both vt-in; }
::view-transition-group(exp-title), ::view-transition-group(exp-figure) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }
::view-transition-group(exp-steps) { animation-duration: 420ms; animation-timing-function: var(--ease-out); }
.app-sidebar { view-transition-name: exp-sidebar; }
.app-topbar { view-transition-name: exp-topbar; }
.bottom-nav { view-transition-name: exp-bottom; }
::view-transition-group(exp-sidebar), ::view-transition-group(exp-topbar), ::view-transition-group(exp-bottom) { animation: none; }
::view-transition-old(exp-sidebar), ::view-transition-old(exp-topbar), ::view-transition-old(exp-bottom) { display: none; }
::view-transition-new(exp-sidebar), ::view-transition-new(exp-topbar), ::view-transition-new(exp-bottom) { animation: none; }
.steps { view-transition-name: exp-steps; }

/* Entrada orquestada (una vez por carga): cada bloque de primer nivel, 40 ms entre cada uno */
.js-motion #main.app-content > *, .js-motion .auth-main > *, .js-motion .auth-card .card-body > * { animation: exp-rise var(--dur-enter) var(--ease-out) backwards; }
.js-motion #main.app-content > :nth-child(2), .js-motion .auth-main > :nth-child(2), .js-motion .auth-card .card-body > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.js-motion #main.app-content > :nth-child(3), .js-motion .auth-main > :nth-child(3), .js-motion .auth-card .card-body > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.js-motion #main.app-content > :nth-child(4), .js-motion .auth-main > :nth-child(4), .js-motion .auth-card .card-body > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.js-motion #main.app-content > :nth-child(5), .js-motion .auth-main > :nth-child(5), .js-motion .auth-card .card-body > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.js-motion #main.app-content > :nth-child(6), .js-motion .auth-main > :nth-child(6), .js-motion .auth-card .card-body > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.js-motion #main.app-content > :nth-child(n+7), .js-motion .auth-main > :nth-child(n+7), .js-motion .auth-card .card-body > :nth-child(n+7) { animation-delay: calc(var(--stagger) * 6); }
.js-motion #main.app-content > .modal, .js-motion #main.app-content > .offcanvas, .js-motion #main.app-content > script,
.js-motion #main.app-content > .disclaimer, .js-motion .auth-main > .auth-card { animation: none; }
/* Lo que ya está en [data-reveal] no entra dos veces */
.js-motion #main.app-content > [data-reveal] { animation: none; }
/* La cifra protagonista aparece un poco después del título y cuenta (motion.js) */
.js-motion .figure-value, .js-motion .hero-balance .amount { animation: exp-fade 380ms var(--ease-out) 60ms backwards; }
/* Panel protagonista: un brillo pasa una vez */
.hero-panel::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 5%, transparent), transparent); transform: translateX(-120%) skewX(-18deg); }
.js-motion .hero-panel::after { animation: exp-sheen-pass 1400ms var(--ease-out) 500ms 1 both; }
/* Accesos rápidos y hero-split en cascada */
.js-motion .quick-actions > *, .js-motion .hero-split > * { animation: exp-rise 420ms var(--ease-out) backwards; }
.js-motion .quick-actions > :nth-child(1), .js-motion .hero-split > :nth-child(1) { animation-delay: 120ms; }
.js-motion .quick-actions > :nth-child(2), .js-motion .hero-split > :nth-child(2) { animation-delay: 160ms; }
.js-motion .quick-actions > :nth-child(3) { animation-delay: 200ms; }
.js-motion .quick-actions > :nth-child(4) { animation-delay: 240ms; }
.js-motion .dash-used .progress-bar { animation: exp-grow-x var(--dur-draw) var(--ease-expo) 260ms backwards; transform-origin: left; }

/* Aparecer al entrar en pantalla: data-reveal */
.js-motion.motion-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(14px); }
.js-motion [data-reveal] { transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out); }

/* Filas en cascada (.vv-stagger): dentro de [data-reveal], esperan a que aparezca */
.js-motion .vv-stagger > * { animation: exp-rise 420ms var(--ease-out) backwards; }
.js-motion .vv-stagger > :nth-child(1) { animation-delay: 60ms; }
.js-motion .vv-stagger > :nth-child(2) { animation-delay: 100ms; }
.js-motion .vv-stagger > :nth-child(3) { animation-delay: 140ms; }
.js-motion .vv-stagger > :nth-child(4) { animation-delay: 180ms; }
.js-motion .vv-stagger > :nth-child(5) { animation-delay: 220ms; }
.js-motion .vv-stagger > :nth-child(6) { animation-delay: 260ms; }
.js-motion .vv-stagger > :nth-child(7) { animation-delay: 300ms; }
.js-motion .vv-stagger > :nth-child(n+8) { animation-delay: 340ms; }
.js-motion [data-reveal]:not(.is-in) .vv-stagger > * { animation: none; opacity: 0; }
/* Barras que crecen (.vv-grow, .vv-bar) */
.js-motion .vv-bar, .js-motion .vv-grow .progress-bar { animation: exp-grow-x var(--dur-draw) var(--ease-expo) 220ms backwards; }
.js-motion [data-reveal]:not(.is-in) .vv-bar, .js-motion [data-reveal]:not(.is-in) .vv-grow .progress-bar { animation: none; transform: scaleX(0); }

/* Hojas: el borde responde al pasar */
.card, .stat-grid { transition: border-color var(--dur-hover) ease; }
@media (hover: hover) {
  .card:has(.stretched-link):hover, a.card:hover { border-color: var(--hairline-strong); }
}

/* Estados vacíos: el halo se dibuja una vez y el ícono flota un poco */
.js-motion .empty-icon { animation: exp-pop 520ms var(--ease-spring) 140ms backwards; }
.js-motion .empty-icon::before { animation: vv-ring 640ms var(--ease-out) 300ms backwards; }
.js-motion .empty-icon .bi { display: inline-block; animation: vv-float 4.8s ease-in-out 1.4s 2; }

/* Esqueletos y gráficos por dibujar */
.js-motion .skeleton::after, .js-motion .chart-box.is-loading::after { animation: exp-shimmer 1.3s ease-in-out infinite; }
.js-motion .chart-box.is-drawn canvas { animation: exp-fade 300ms ease; }

/* Campos y retroalimentación */
.js-motion .live-feedback:not(:empty) { animation: exp-rise 220ms var(--ease-out); }
.js-motion .vv-money-echo:not(:empty) { animation: exp-fade 240ms ease; }
.js-motion .more-details[open] > .more-body > * { animation: exp-rise 360ms var(--ease-out) backwards; }
.js-motion .more-details[open] > .more-body > :nth-child(2) { animation-delay: 40ms; }
.js-motion .more-details[open] > .more-body > :nth-child(3) { animation-delay: 80ms; }
.js-motion .more-details[open] > .more-body > :nth-child(n+4) { animation-delay: 120ms; }
.js-motion .mov-filters.show .card, .js-motion .mov-filters.collapsing .card { animation: exp-rise 300ms var(--ease-out) backwards; }

/* Menús, modales, hojas */
.dropdown-menu.show { animation: exp-menu-in 170ms var(--ease-out); }
.modal.fade .modal-dialog { transform: translateY(10px) scale(.97); transition: transform 360ms var(--ease-spring); }
.modal.show .modal-dialog { transform: none; }
.add-sheet, .more-menu { --bs-offcanvas-transition: transform var(--dur-sheet) var(--ease-spring); }
.add-sheet.hiding, .more-menu.hiding { transition: transform 240ms var(--ease-exit) !important; }
.js-motion .offcanvas:is(.showing, .show) :is(.add-primary, .add-list, .more-grid, .add-grid) > * { animation: exp-rise 360ms var(--ease-out) backwards; animation-delay: 80ms; }
.js-motion .offcanvas:is(.showing, .show) :is(.add-primary, .add-list, .more-grid, .add-grid) > :nth-child(2) { animation-delay: 110ms; }
.js-motion .offcanvas:is(.showing, .show) :is(.add-primary, .add-list, .more-grid, .add-grid) > :nth-child(3) { animation-delay: 140ms; }
.js-motion .offcanvas:is(.showing, .show) :is(.add-primary, .add-list, .more-grid, .add-grid) > :nth-child(4) { animation-delay: 170ms; }
.js-motion .offcanvas:is(.showing, .show) :is(.add-primary, .add-list, .more-grid, .add-grid) > :nth-child(5) { animation-delay: 200ms; }
.js-motion .offcanvas:is(.showing, .show) :is(.add-primary, .add-list, .more-grid, .add-grid) > :nth-child(n+6) { animation-delay: 230ms; }
.js-motion .offcanvas:is(.showing, .show) .add-list { animation: none; }
@media (hover: hover) { .add-row:hover .add-ic, .add-tile:hover .add-ic, .more-item:hover .bi { transform: scale(1.08); } }
.add-ic, .more-item .bi { transition: transform var(--dur-ui) var(--ease-spring), background-color var(--dur-hover) ease; }

/* Avisos flotantes: entran con resorte y salen rápido */
.exp-toast.toast { transition: opacity 200ms ease, transform 360ms var(--ease-spring); }
.exp-toast.toast:not(.show), .exp-toast.toast.showing { transform: translateY(-10px) scale(.97); }
@media (max-width: 991.98px) { .exp-toast.toast:not(.show), .exp-toast.toast.showing { transform: translateY(10px) scale(.97); } }
.exp-toast.toast.show:not(.showing) { transform: none; }

/* Flash de éxito: un check que se dibuja */
.js-motion .flash-check circle { animation: exp-draw 520ms var(--ease-out) 140ms backwards; }
.js-motion .flash-check path { animation: exp-draw 340ms var(--ease-out) 460ms backwards; }

/* Navegación */
.js-motion .sidebar-link.active::before { animation: exp-grow-y 380ms var(--ease-spring) 120ms backwards; }
.js-motion .bottom-link.active::before { animation: exp-pill-in 420ms var(--ease-spring) 140ms backwards; }
.js-motion .bottom-add.is-hint .add-dot::after { animation: exp-ring 1.6s var(--ease-out) 900ms 3; }

/* La línea del mes: se dibuja una vez */
.js-motion .month-line .ml-traveled { animation: exp-grow-x var(--dur-draw) var(--ease-expo) 120ms backwards; transform-origin: left; }
.js-motion .month-line .ml-payday { transform-origin: bottom; animation: exp-grow-y 420ms var(--ease-out) backwards; animation-delay: calc(160ms + var(--i, 0) * 60ms); }
.js-motion .month-line .ml-mark { animation: exp-pop 380ms var(--ease-spring) backwards; animation-delay: calc(320ms + var(--i, 0) * 50ms); }
.js-motion .month-line .ml-today { animation: exp-fade 300ms ease 700ms backwards; }
.js-motion .month-line .ml-scale { animation: exp-fade 500ms ease 200ms backwards; }
.js-motion .ml-tip.is-shown { animation: ml-tip-in 200ms var(--ease-out); }
/* Pasos del onboarding: el actual se llena */
.js-motion .steps .step.current::after { animation: exp-grow-x 700ms var(--ease-expo) 200ms backwards; }

/* =====================================================================
   12. MOVIMIENTO REDUCIDO E IMPRESIÓN
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  .bottom-add .add-dot::after, .hero-panel::after, .skeleton::after { display: none; }
  .seg-thumb { transition: none; }
}
@media print {
  .app-sidebar, .app-topbar, .bottom-nav, .page-actions, .btn, .add-sheet, .more-menu, .quick-actions, .toast-container { display: none !important; }
  .app-main { margin: 0 !important; }
  .app-content { padding: 0 !important; }
  .card, .hero-panel { box-shadow: none !important; border-color: #ccc !important; }
}

/* ===== FASE 2 · LOTE A ===== */
/* Plata y pagos: facturas, suscripciones, deudas (me deben, simulador), ingresos y salario.
   Importar extracto conserva sus reglas en assets/css/importar.css (alineado a los mismos tokens). */

/* ---- Segmentado con contador: <a>Pendientes <span class="seg-count">3</span></a> */
.seg-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--faint); }
.segmented > .is-active .seg-count, .segmented > [aria-current] .seg-count { color: var(--muted); }
.segmented.is-block > a { padding: 0 10px; }

/* ---- Cifra protagonista: estado junto a la etiqueta y barra de avance dentro del panel */
.figure-label.has-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.hero-panel .figure-sub { align-items: center; }
.hero-meter { margin: 12px 0 10px; max-width: 560px; }
.hero-meter .progress { --bs-progress-height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.hero-note { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--muted); }

/* ---- Semáforo (.signal): cómo se reparte una lista por urgencia. Segmentos <i class="s-late" style="--n:2;--i:0"> */
.signal { margin-top: 16px; }
.signal-bar { display: flex; gap: 3px; height: 8px; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.signal-bar > i { display: block; height: 100%; flex: var(--n, 1) 1 0; border-radius: 99px; transform-origin: left center; }
.signal-legend { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.signal-legend a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: inherit; text-decoration: none; transition: color var(--dur-hover) ease; }
.signal-legend a:hover { color: var(--text); }
.signal-legend strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.signal-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.s-late { background: var(--negative); }
.s-soon { background: var(--warning); }
.s-later { background: var(--faint); }
.js-motion .signal-bar > i { animation: exp-grow-x var(--dur-draw) var(--ease-expo) backwards; animation-delay: calc(260ms + var(--i, 0) * 120ms); }

/* ---- Vencimiento en texto (.due): ícono + palabra; el color nunca va solo */
.due { display: inline; }
.due .bi { font-size: .9em; margin-right: 3px; }
.due.is-late { color: var(--negative); font-weight: 600; }
.due.is-soon { color: var(--warning); font-weight: 600; }
/* Encabezado de grupo con tono (vencidas, esta semana) */
.day-header > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.day-header .g-count { color: var(--faint); font-variant-numeric: tabular-nums; }
.day-header.is-late, .day-header.is-late .bi { color: var(--negative); }
.day-header.is-soon, .day-header.is-soon .bi { color: var(--warning); }
.day-header .day-sum.is-strong { color: var(--text); }
.js-motion .tx-item > .vv-date.is-late { animation: exp-pop 420ms var(--ease-spring) 260ms backwards; }

/* ---- Tabla que se apila (.stack-table dentro de .stack-wrap): en una hoja angosta, cada fila en dos líneas
   celdas: .r-a (arriba izq.) .r-b (arriba der.) .r-c (abajo izq.) .r-d (abajo der.) .r-x (solo en tabla ancha) .r-n (solo apilada) */
.stack-wrap { container-type: inline-size; }
.stack-table { margin: 0; }
.stack-table .r-n { display: none; }
.stack-table td.num { white-space: nowrap; }
.stack-table th, .stack-table td { padding-left: .5rem; padding-right: .5rem; }
@container (max-width: 600px) {
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody { display: block; width: 100%; }
  .stack-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "a b" "c d"; column-gap: 12px; row-gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .stack-table tr:last-child { border-bottom: 0; }
  .stack-table td { border: 0 !important; padding: 0 !important; background: none; min-width: 0; }
  .stack-table .r-a { grid-area: a; font-weight: 600; }
  .stack-table .r-b { grid-area: b; text-align: right; font-weight: 700; }
  .stack-table .r-c { grid-area: c; font-size: var(--fs-xs); color: var(--muted); text-align: left !important; }
  .stack-table .r-d { grid-area: d; font-size: var(--fs-xs); color: var(--muted); text-align: right; }
  .stack-table [data-label]::before { content: attr(data-label) " "; }
  .stack-table .r-x { display: none; }
  .stack-table .r-n { display: inline; }
}

/* ---- Leyenda de gráfico con muestras de serie: <span><i class="is-accent"></i>Este mes</span> */
.chart-legend i.is-accent { background: var(--accent); }
.chart-legend i.is-faint { background: var(--faint); }
.chart-legend i.is-dash, .chart-legend i.is-line { width: 16px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--muted); }
.chart-legend i.is-line { border-top: 3px solid var(--accent); }
.chart-legend strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }

/* ---- Desplegable de detalle en una hoja (tabla por mes, abonos) */
.inline-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.inline-more > summary::-webkit-details-marker { display: none; }
.inline-more > summary:hover { color: var(--text); }
.inline-more > summary .bi { transition: transform var(--dur-ui) var(--ease-out); }
.inline-more[open] > summary .bi { transform: rotate(180deg); }

/* ---- Hoja inferior con formulario (deudas: registrar pago). En escritorio queda centrada con ancho máximo */
.sheet-form { display: flex; flex-direction: column; min-height: 0; }
.offcanvas-bottom.sheet.is-capped { max-height: 90vh; max-height: 90dvh; }
.sheet.is-capped > .sheet-form { height: 100%; }
.sheet-form .offcanvas-body { display: grid; gap: 18px; overflow-y: auto; }
.sheet-form .offcanvas-body > * { margin-bottom: 0 !important; }
.sheet-form .form-actions { padding: 12px 20px 16px; border-top: 1px solid var(--rule); }
.sheet-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--raised); font-size: var(--fs-sm); color: var(--muted); }
.sheet-sum strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Suscripciones: fila con el logo de la plataforma, el cobro y el costo al mes */
.sub-row { align-items: flex-start; gap: 14px; padding: 14px 0; }
.sub-row.is-inactive .tx-title, .sub-row.is-inactive .sub-amount { color: var(--muted); }
.sub-row.is-inactive .sub-logo { filter: grayscale(1); opacity: .6; }
.sub-when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); color: var(--muted); }
.sub-when .sub-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.sub-when.is-soon { color: var(--text); font-weight: 600; }
.sub-when.is-soon .sub-dot { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-soft); }
.sub-when.is-late { color: var(--negative); font-weight: 600; }
.sub-when.is-late .sub-dot { background: var(--negative); }
.sub-flag { color: var(--warning); font-weight: 600; white-space: nowrap; }
.sub-right { display: flex; align-items: flex-start; gap: 2px; flex-shrink: 0; }
.sub-amount { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-year { font-size: var(--fs-xs); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-row .vv-share { margin-top: 10px; max-width: 220px; }
.sub-row .dropdown .btn-icon { width: 44px; height: 44px; }
.sub-split { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sub-logo { width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0; display: grid; place-items: center; overflow: hidden; transition: transform var(--dur-ui) var(--ease-spring); }
.sub-logo.has-img { background: #fff; padding: 7px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.sub-logo.has-img .platform-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
.sub-logo.is-mono { background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 1.15rem; font-weight: 700; color: var(--text); }
.sub-logo.is-cat { --cat: var(--muted); background: color-mix(in srgb, var(--cat) 15%, var(--surface)); color: var(--cat); font-size: 1.15rem; }
[data-bs-theme="dark"] .sub-logo.is-cat { background: color-mix(in srgb, var(--cat) 17%, var(--surface)); color: color-mix(in srgb, var(--cat) 70%, white); }
@media (hover: hover) { .sub-row:hover .sub-logo { transform: scale(1.06); } }
@media (max-width: 575.98px) { .sub-row .vv-share { max-width: none; } }
@media (max-width: 359.98px) { .sub-row { gap: 10px; } .sub-logo { width: 40px; height: 40px; border-radius: 12px; } }

/* ---- Selector de plataforma (suscripciones/form): radios name=plataforma_id como íconos de app.
   Va acotado a .platform-picker para no chocar con el administrador (admin.css). */
.platform-picker { min-width: 0; }
.platform-chosen { font-size: var(--fs-xs); color: var(--muted); min-height: 1.3em; }
.platform-chosen:empty::before { content: "Toca una para llenar el nombre y el valor por ti."; }
.platform-chosen strong { color: var(--text); font-weight: 600; }
.platform-search { position: relative; margin-bottom: 12px; }
.platform-search > .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.platform-search .form-control { padding-left: 2.6rem; border-radius: 14px; }
.platform-picker .platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 400px) { .platform-picker .platform-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 576px) { .platform-picker .platform-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; } }
.platform-picker .platform-option { position: relative; min-width: 0; }
.platform-picker .platform-option[hidden] { display: none; }
.platform-picker .platform-radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.platform-picker .platform-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  aspect-ratio: 1 / 1; min-height: 84px; width: 100%; padding: 8px 6px; border-radius: var(--r-lg); background: var(--raised); border: 1px solid transparent;
  color: var(--text); cursor: pointer; overflow: hidden; user-select: none; box-shadow: none;
  transition: border-color var(--dur-hover) ease, box-shadow var(--dur-hover) ease, background-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
[data-bs-theme="light"] .platform-picker .platform-tile { border-color: var(--border); }
.platform-picker .platform-mono { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text);
  background: color-mix(in srgb, var(--tile-color, var(--text)) 16%, var(--surface)); box-shadow: inset 0 0 0 1px var(--hairline); transition: transform var(--dur-ui) var(--ease-spring); pointer-events: none; }
.platform-picker .platform-tile.has-color .platform-mono { color: color-mix(in srgb, var(--tile-color) 60%, var(--text)); }
/* El logo va sobre una placa clara: se lee igual en los dos temas */
.platform-picker .platform-plate { width: 74%; aspect-ratio: 1 / 1; border-radius: 14px; background: #fff; display: grid; place-items: center; padding: 12%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent); transition: transform var(--dur-ui) var(--ease-spring); pointer-events: none; }
.platform-picker .platform-logo { display: block; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.platform-picker .platform-name { font-size: var(--fs-2xs); font-weight: 600; line-height: 1.15; text-align: center; color: var(--muted); max-width: 100%;
  overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: none; }
@media (hover: hover) {
  .platform-picker .platform-option:hover .platform-tile { background: color-mix(in srgb, var(--raised) 88%, var(--text)); }
  .platform-picker .platform-option:hover .platform-mono, .platform-picker .platform-option:hover .platform-plate { transform: scale(1.06); }
}
.platform-picker .platform-option:active .platform-tile { transform: scale(.97); }
/* Elegida: anillo del acento y un check que aparece con resorte */
.platform-picker .platform-radio:checked + .platform-tile, .platform-picker .platform-tile.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 3px var(--accent-soft); background: var(--surface); }
.platform-picker .platform-radio:checked + .platform-tile .platform-name, .platform-picker .platform-tile.is-selected .platform-name { color: var(--text); }
.platform-picker .platform-tile::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--accent-fill);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23052419' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.8 8.4l2.8 2.8 5.6-6'/%3E%3C/svg%3E");
  background-position: center; background-size: 11px; background-repeat: no-repeat; opacity: 0; transform: scale(.3); transition: opacity 160ms ease, transform 320ms var(--ease-spring); }
[data-bs-theme="light"] .platform-picker .platform-tile::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.8 8.4l2.8 2.8 5.6-6'/%3E%3C/svg%3E"); }
.platform-picker .platform-radio:checked + .platform-tile::after, .platform-picker .platform-tile.is-selected::after { opacity: 1; transform: none; }
.platform-picker .platform-radio:focus-visible + .platform-tile { outline: 2px solid var(--accent); outline-offset: 3px; }
.platform-picker .platform-other .platform-tile { color: var(--muted); border: 1px dashed var(--control); background: transparent; }
.platform-picker .platform-other .platform-tile .bi { font-size: 1.25rem; transition: transform 320ms var(--ease-spring); }
@media (hover: hover) { .platform-picker .platform-other:hover .platform-tile .bi { transform: rotate(90deg); } }
.platform-picker .platform-other .platform-radio:checked + .platform-tile { color: var(--text); border-style: solid; }
.platform-picker .platform-grid.is-collapsed .platform-option.is-extra { display: none; }
.platform-picker .platform-empty { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-sm); padding: 8px 0; margin: 0; text-align: center; }
.platform-picker .platform-more { margin-top: 8px; min-height: 44px; font-weight: 600; }
@media (min-width: 576px) { .platform-picker .platform-grid.is-collapsed .platform-option.is-extra { display: block; } .platform-picker .platform-more { display: none !important; } }
.js-motion .platform-picker .platform-grid > .platform-option { animation: exp-rise 380ms var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * 22ms); }
/* Días que faltan para el cobro, bajo la fecha */
.when-hint { display: inline-flex; align-items: center; gap: 6px; }
.when-hint:not(:empty)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.when-hint.is-soon::before { background: var(--warning); }

/* ---- Deudas: fila con avance, meta y fecha de fin */
.debt-row .tx-title { color: var(--text); }
.debt-row.is-late .tx-icon { --cat: var(--negative); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--negative) 55%, transparent); }
.debt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.debt-pct { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.debt-end { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--raised); color: var(--text); font-weight: 500; }
.debt-end .bi { color: var(--muted); font-size: .8em; }
/* Barra con la línea de lo sano (.limit-meter): la marca dice dónde está el límite recomendado */
.limit-meter { position: relative; max-width: 560px; margin: 10px 0 0; padding-bottom: 22px; }
.limit-meter .progress { --bs-progress-height: 6px; }
.limit-mark { position: absolute; top: -4px; height: 14px; width: 2px; border-radius: 2px; background: var(--text); transform: translateX(-1px); }
.limit-mark-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); white-space: nowrap; }
.tip-card h2 { font-size: var(--fs-h3, 1rem); font-weight: 700; margin: 0 0 4px; }

/* ---- Me deben: préstamo con avance, acciones y paneles plegables */
.loan-row { flex-wrap: wrap; align-items: flex-start; }
.loan-row > .tx-main { flex: 1 1 0; }
.loan-extra { flex: 1 0 100%; padding-left: 52px; min-width: 0; }
.loan-extra .progress { margin-top: 4px; }
.loan-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.loan-meta .is-late { color: var(--negative); font-weight: 600; }
.loan-actions { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.loan-panel { display: grid; gap: 12px; background: var(--raised); border-radius: var(--r-md); padding: 14px; margin-top: 10px; }
.loan-panel > * { margin: 0; }
.loan-panel .form-control, .loan-panel .form-select { background-color: var(--surface); }
@media (max-width: 575.98px) { .loan-extra { padding-left: 0; } }

/* ---- Simulador de deudas */
.sim-answer { position: relative; isolation: isolate; padding: 4px 0 6px; margin-bottom: 14px; }
.sim-answer::before { content: ""; position: absolute; z-index: -1; inset: -20px -8px -10px; pointer-events: none; background: radial-gradient(50% 80% at 12% 50%, var(--accent-glow), transparent 72%); opacity: 0; transition: opacity 400ms ease; }
.sim-answer.is-good::before { opacity: 1; }
.sim-answer-label { font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.sim-figure { display: block; font-size: clamp(2rem, 1.6rem + 1.8vw, 2.625rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1.06; font-variant-numeric: tabular-nums; margin: 4px 0 6px; color: var(--text); overflow-wrap: anywhere; }
.sim-figure.is-good { color: var(--accent-ink); }
.sim-figure.is-muted { color: var(--muted); }
.sim-answer-sub { font-size: var(--fs-sm); color: var(--muted); }
.sim-answer-sub strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.sim-dial { margin: 4px 0 18px; }
.sim-dial-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; font-size: var(--fs-xs); color: var(--muted); }
.sim-dial-head output { font-weight: 700; font-size: 1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.sim-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; --p: 0%; margin: 0; }
.sim-range:focus { outline: none; }
.sim-range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--accent) 0 var(--p), var(--raised) var(--p) 100%); }
.sim-range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--raised); }
.sim-range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--accent); }
.sim-range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-2); transition: transform var(--dur-press) var(--ease-out); }
.sim-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--accent); box-shadow: var(--shadow-2); }
.sim-range:active::-webkit-slider-thumb { transform: scale(1.12); }
.sim-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.sim-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip.is-lg { min-height: 44px; font-variant-numeric: tabular-nums; }
.sim-race { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.sim-race li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lbl val" "bar bar"; gap: 4px 12px; font-size: var(--fs-sm); }
.sim-race .r-lbl { grid-area: lbl; color: var(--muted); min-width: 0; }
.sim-race .r-val { grid-area: val; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.sim-race .r-track { grid-area: bar; height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; }
.sim-race .r-fill { display: block; height: 100%; border-radius: inherit; background: var(--faint); transform-origin: left center; transform: scaleX(var(--s, 1)); transition: transform 620ms var(--ease-expo); }
.sim-race .is-best .r-fill { background: var(--accent); }
.sim-race .is-never .r-fill { background: repeating-linear-gradient(135deg, var(--faint) 0 6px, transparent 6px 11px); }
.js-motion .sim-race[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.js-motion .sim-race[data-reveal]:not(.is-in) .r-fill { transform: scaleX(0); }
.js-motion .sim-race[data-reveal] li:nth-child(2) .r-fill { transition-delay: 120ms; }
.sim-compare { width: 100%; }
.sim-compare th, .sim-compare td { padding: 10px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.sim-compare tr:last-child th, .sim-compare tr:last-child td { border-bottom: 0; }
.sim-compare thead th { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); padding-top: 0; }
.sim-compare tbody th { font-weight: 500; color: var(--muted); padding-right: 12px; font-size: var(--fs-sm); }
.sim-compare td { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 12px; white-space: nowrap; }
.sim-compare td.is-best { font-size: 1.125rem; font-weight: 700; color: var(--text); }
.sim-compare td small { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 575.98px) { .sim-compare td { font-size: .9375rem; padding-left: 8px; } .sim-compare td.is-best { font-size: 1rem; } }
@media (max-width: 374.98px) { .sim-compare { table-layout: fixed; font-size: var(--fs-sm); } .sim-compare th, .sim-compare td { overflow-wrap: anywhere; white-space: normal; } .sim-compare tbody th { padding-right: 6px; } }
.sim-verdict { font-size: 1rem; margin: 16px 0 0; }
.sim-verdict .is-good { color: var(--accent-ink); }
.sim-order { counter-reset: n; list-style: none; padding: 0; margin: 0; }
.sim-order li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.sim-order li:last-child { border-bottom: 0; }
.sim-order li::before { counter-increment: n; content: counter(n); font-weight: 700; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); background: var(--raised); color: var(--muted); }
.sim-order .fw-semibold { font-weight: 600; }
.sim-form { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: 16px; }
@media (min-width: 768px) { .sim-form { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; } .sim-form.is-two { grid-template-columns: minmax(0, 1fr) auto; } }
.sim-sub-title { font-size: var(--fs-sm); font-weight: 700; margin: 24px 0 8px; }
.sim-form > .is-full { grid-column: 1 / -1; }
.sim-key { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--accent); vertical-align: middle; margin-right: 6px; }
.sim-key.is-other { border-top: 2px dashed var(--faint); }
@keyframes sim-tick { from { opacity: .35; transform: translateY(3px); } }
.js-motion .is-ticked { animation: sim-tick 320ms var(--ease-out); }

/* ---- Trabajos y salario: estado del pago de cada trabajo */
.job-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 0; }
.job-row + .job-row { border-top: 1px solid var(--rule); }
.job-row .tx-main { flex: 1 1 220px; }
.job-row .tx-title { white-space: normal; }
.job-row .btn { min-height: 44px; }
.job-amount { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--positive); white-space: nowrap; }
.job-row.is-pending .tx-icon { --cat: var(--warning); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) { .js-motion .job-row.is-pending .tx-icon { animation: job-ping 1.6s var(--ease-out) 600ms 3; } }
@keyframes job-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warning) 40%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
.pay-count .progress { --bs-progress-height: 6px; }
.job-note { flex-basis: 100%; margin: -4px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.pay-count { flex-basis: 100%; display: grid; gap: 6px; }
.pay-count-head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-xs); color: var(--muted); }
.pay-count-head strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-manage { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin-top: -4px; }
.job-manage .job-monthly { flex: 1 1 200px; font-size: var(--fs-xs); color: var(--muted); }
.job-manage .job-monthly strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.job-manage .btn { padding-left: .5rem; padding-right: .5rem; }
.job-manage form { margin: 0; }
@media (max-width: 575.98px) { .job-row > .btn { width: 100%; } }
.jobs-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: var(--fs-sm); color: var(--muted); }
.jobs-foot .btn { min-height: 44px; }
/* Pago de salario */
.money-cur { flex: 0 0 auto; min-width: 56px; padding: 0 12px; min-height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-weight: 600; font-size: var(--fs-sm); }
.notice-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--warning-soft); }
.notice-row > .bi { color: var(--warning); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.notice-row p { margin: 0; }
.notice-row small { display: block; color: var(--muted); margin-top: 2px; font-size: var(--fs-xs); }
.date-shortcuts { margin-top: 8px; }
.pay-explain { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-size: var(--fs-sm); color: var(--text); }
.pay-explain > .bi { color: var(--positive); margin-top: 2px; flex-shrink: 0; }
.pay-explain small { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.dup-box { padding: 14px 16px; border-radius: var(--r-md); background: var(--warning-soft); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); }
.dup-box p { margin: 0 0 8px; font-size: var(--fs-sm); }
.dup-box .bi { color: var(--warning); }
.dup-box .form-check { min-height: 44px; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
.dup-box .form-check-input { margin: 0; flex-shrink: 0; float: none; }
.freq-days { display: flex; gap: 8px; align-items: center; }
.freq-days input[type="number"] { text-align: center; font-variant-numeric: tabular-nums; }

/* ---- Ingresos: selector de mes dentro de la hoja */
.month-head { display: flex; align-items: center; gap: 4px; padding-bottom: 8px; }
.month-head h2 { flex: 1; text-align: center; }
.month-head .btn-icon { width: 44px; height: 44px; }
.jobs-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.jobs-total { font-size: var(--fs-sm); color: var(--muted); }
.jobs-total strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Movimiento reducido: los mosaicos y cifras quedan quietos */
@media (prefers-reduced-motion: reduce) {
  .platform-picker .platform-tile, .platform-picker .platform-mono, .platform-picker .platform-plate, .platform-picker .platform-tile::after, .sim-race .r-fill { transition: none; }
  .platform-picker .platform-option:active .platform-tile { transform: none; }
}
/* ===== FIN FASE 2 · LOTE A ===== */

/* ===== FASE 2 · LOTE C ===== */
/* Grupos, categorías, perfil, notificaciones, onboarding y páginas legales.
   Componentes con nombre propio (no de vista); todo con tokens. */

/* ---- Hoja de peligro: una hoja sobria con la consecuencia en palabras y una sola acción roja */
.danger-sheet { border-color: color-mix(in srgb, var(--negative) 28%, var(--border)); }
.danger-sheet .card-body { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.danger-sheet .card-body.is-stacked { display: block; }
.danger-sheet h2 { font-size: var(--fs-h3); font-weight: 700; color: var(--negative); margin: 0 0 2px; }
@media (max-width: 575.98px) { .danger-sheet .btn { width: 100%; } }
/* Acción de fila destructiva en texto (44 px) */
.btn-text-danger { color: var(--negative); font-weight: 600; font-size: var(--fs-sm); background: none; border: 0; padding: 0 2px; min-height: 44px; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: .2em; border-radius: var(--r-xs); }
.btn-text-danger:hover { color: var(--negative); text-decoration-color: currentColor; }
.btn-text-danger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Botón que se "arma" al cumplir la confirmación (eliminar cuenta / grupo) */
.js-motion .btn.is-armed { animation: lc-arm 360ms var(--ease-spring); }
@keyframes lc-arm { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: none; } }
/* Hoja angosta centrada (invitaciones y confirmaciones dentro de la app) */
.sheet-narrow { max-width: 480px; margin: 0 auto; }
/* Bloques dentro de una hoja, separados por una línea */
.sheet-block + .sheet-block { border-top: 1px solid var(--rule); margin-top: var(--sp-5); padding-top: var(--sp-5); }
.sheet-block h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: 4px; }
/* Texto de fila que puede ocupar varias líneas */
.tx-wrap { white-space: normal; overflow-wrap: anywhere; }
/* Pista pequeña bajo una opción de .cat-picker */
.cat-hint { font-size: var(--fs-2xs); color: var(--muted); font-weight: 500; }

/* ---- Grupos: marca del grupo (ícono del tipo en círculo neutro) */
.grp-mark { flex-shrink: 0; display: inline-flex; }
.grp-mark > span.avatar { background: var(--raised) !important; color: var(--text) !important; border-radius: 50% !important; }
.grp-mark > img.avatar { border-radius: 50% !important; }
/* Encabezado del grupo: marca, nombre, personas y acciones */
.grp-head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-4); }
.grp-head .page-title { overflow-wrap: anywhere; margin: 0; }
.grp-head > .min-w-0 { flex: 1 1 0; }
.grp-head-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 575.98px) {
  .grp-head { flex-wrap: wrap; }
  .grp-head-actions { width: 100%; margin-left: 0; }
  .grp-head-actions > .btn { flex: 1 1 0; }
}
.people-stack { display: inline-flex; align-items: center; flex-shrink: 0; }
.people-stack > .avatar { box-shadow: 0 0 0 2px var(--ground); }
.people-stack > .avatar + .avatar { margin-left: -8px; }
.people-more { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-left: 8px; white-space: nowrap; }
.grp-people { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.js-motion .grp-people .people-stack > .avatar { animation: exp-pop 380ms var(--ease-spring) backwards; }
.js-motion .grp-people .people-stack > .avatar:nth-child(2) { animation-delay: 50ms; }
.js-motion .grp-people .people-stack > .avatar:nth-child(3) { animation-delay: 100ms; }
.js-motion .grp-people .people-stack > .avatar:nth-child(n+4) { animation-delay: 150ms; }
/* Hero del grupo: frase con cifra y una acción */
.grp-hero-line { font-size: var(--fs-body); color: var(--muted); margin: 0; }
.grp-hero-line strong { color: var(--text); font-weight: 600; }
.grp-hero-act { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 419.98px) { .grp-hero-act .btn { width: 100%; } }

/* Lista de grupos: el saldo es protagonista */
.grp-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; grid-template-areas: "mark main bal act";
  align-items: center; column-gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.grp-row:last-child { border-bottom: 0; }
.grp-row .grp-mark { grid-area: mark; transition: transform var(--dur-ui) var(--ease-spring); }
.grp-row .grp-main { grid-area: main; min-width: 0; }
.grp-row .grp-bal { grid-area: bal; text-align: right; }
.grp-row .grp-act { grid-area: act; min-width: 96px; text-align: right; }
.grp-row::before { content: ""; position: absolute; z-index: -1; inset: 2px -10px; border-radius: var(--r-md); background: var(--raised); opacity: 0; transition: opacity var(--dur-hover) ease; pointer-events: none; }
@media (hover: hover) { .grp-row:hover::before { opacity: .6; } .grp-row:hover .grp-mark { transform: scale(1.06) rotate(-3deg); } }
.grp-name { font-weight: 700; font-size: var(--fs-h2); color: var(--text); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grp-name::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.grp-name:hover { color: var(--text); }
.grp-row .grp-act .btn { position: relative; z-index: 1; }
.grp-bal-value { font-weight: 700; font-size: var(--fs-h2); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.02em; }
.grp-bal-label { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.grp-current { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--text); min-height: 36px; }
.grp-current::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.js-motion .grp-row { animation: exp-rise var(--dur-enter) var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * var(--stagger)); }
@media (max-width: 575.98px) {
  .grp-row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "mark main bal" ". act act"; row-gap: 8px; }
  .grp-row .grp-act { text-align: left; min-width: 0; }
}

/* Deudas simplificadas: de quién a quién, la frase y una sola acción */
.owe-row { position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); min-height: 64px; }
.owe-row:last-child { border-bottom: 0; }
.owe-text { flex: 1 1 auto; min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
.owe-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.owe-row.is-mine .owe-text { font-weight: 600; }
.owe-row.is-mine::before { content: ""; position: absolute; z-index: -1; inset: 4px -10px; border-radius: var(--r-md); background: color-mix(in srgb, var(--raised) 70%, transparent); pointer-events: none; }
.owe-row .btn { flex-shrink: 0; }
.owe-flow { display: inline-flex; align-items: center; flex-shrink: 0; }
.owe-flow > .avatar { box-shadow: 0 0 0 2px var(--surface); position: relative; z-index: 1; }
.owe-arrow { position: relative; width: 22px; height: 2px; margin: 0 -2px; background: var(--hairline-strong); overflow: hidden; }
.owe-arrow > span { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--muted), transparent); transform: translateX(-100%); }
.owe-row.is-in .owe-arrow > span { background: linear-gradient(90deg, transparent, var(--positive), transparent); }
.js-motion .owe-arrow > span { animation: lc-run 1.6s var(--ease-out) 500ms 2; }
@keyframes lc-run { to { transform: translateX(100%); } }
.js-motion .owe-row { animation: exp-rise var(--dur-enter) var(--ease-out) backwards; }
.js-motion .owe-row:nth-child(2) { animation-delay: 40ms; }
.js-motion .owe-row:nth-child(n+3) { animation-delay: 80ms; }
@media (max-width: 419.98px) {
  .owe-row { flex-wrap: wrap; }
  .owe-row .owe-text { flex-basis: calc(100% - 106px); }
  .owe-row .btn { margin-left: 106px; }
}

/* Personas del grupo: mosaico de avatares */
.people-grid { list-style: none; margin: 0; padding: 12px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px 8px; }
.people-grid li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.people-grid .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--hairline); }
.people-grid li.is-me .avatar { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--accent); }
.pg-name { font-size: var(--fs-sm); font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-role { font-size: var(--fs-2xs); color: var(--muted); margin-top: -4px; }
.js-motion .people-grid li { animation: exp-rise var(--dur-enter) var(--ease-out) backwards; animation-delay: calc(140ms + var(--i, 0) * var(--stagger)); }

/* Enlaces "lo del grupo": dos columnas de filas */
.grp-links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.grp-links a { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--rule); color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); border-radius: var(--r-xs); transition: color var(--dur-hover) ease; }
.grp-links li:nth-last-child(-n+2) a { border-bottom: 0; }
.grp-links a .bi:first-child { color: var(--muted); font-size: 1.05rem; }
.grp-links a .bi:last-child { margin-left: auto; color: var(--faint); font-size: .85rem; transition: transform var(--dur-ui) var(--ease-out); }
@media (hover: hover) { .grp-links a:hover .bi:last-child { transform: translateX(3px); color: var(--muted); } }
.grp-links a:hover { color: var(--accent-ink); }
@media (max-width: 399.98px) { .grp-links { grid-template-columns: minmax(0, 1fr); } .grp-links li:nth-last-child(2) a { border-bottom: 1px solid var(--rule); } }

/* Libreta de actividad: un hilo une a las personas */
.grp-feed .activity-item { position: relative; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 0; }
.grp-feed .activity-item > .avatar { position: relative; z-index: 1; margin-top: 2px; box-shadow: 0 0 0 3px var(--surface); }
.grp-feed .activity-item:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 52px; bottom: -10px; width: 1.5px; background: var(--rule); transform-origin: top; }
.act-line { line-height: 1.45; overflow-wrap: anywhere; }
.act-line strong { font-weight: 600; }
.act-meta { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.act-meta a { font-weight: 600; text-underline-offset: .2em; display: inline-flex; min-height: 32px; align-items: center; }
.grp-feed .day-header { padding-top: 18px; }
.grp-feed .day-header:first-child { padding-top: 4px; }
.js-motion .grp-feed .activity-item { animation: exp-rise 400ms var(--ease-out) backwards; }
.js-motion .grp-feed .activity-item::before { animation: exp-grow-y 520ms var(--ease-expo) 200ms backwards; }
.js-motion .grp-feed .activity-item:nth-child(2) { animation-delay: 40ms; }
.js-motion .grp-feed .activity-item:nth-child(3) { animation-delay: 80ms; }
.js-motion .grp-feed .activity-item:nth-child(n+4) { animation-delay: 120ms; }

/* Comentarios */
.cmt-item { gap: 12px; padding: 12px 0; align-items: flex-start; }
.cmt-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--fs-sm); }
.cmt-meta time { font-size: var(--fs-xs); }
.cmt-text { margin-top: 2px; line-height: 1.5; }
.cmt-item form { margin: -6px -10px 0 0; }
.cmt-item .btn-icon:hover, .cmt-item .btn-icon:focus-visible { color: var(--negative) !important; }

/* Código de invitación: grande, en cifras tabulares */
.invite-code { font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); letter-spacing: .06em; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.js-motion .invite-code { animation: exp-rise var(--dur-enter) var(--ease-out) 120ms backwards; }
.code-input { font-weight: 700; font-size: 1.6rem !important; letter-spacing: .12em; text-align: center; text-transform: uppercase; min-height: 60px; font-variant-numeric: tabular-nums; }
.code-input::placeholder { color: var(--faint); letter-spacing: .12em; }

/* Miembro con controles de administración */
.member-row { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.member-row:last-child { border-bottom: 0; }
.member-admin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-left: 52px; }
.member-admin .form-select { width: auto; min-width: 150px; min-height: 44px; }
.member-admin .btn-sm { min-height: 44px; }
@media (max-width: 575.98px) { .member-admin { padding-left: 0; } .member-admin > form:first-child { flex: 1 1 100%; } .member-admin > form:first-child .form-select { flex: 1 1 auto; min-width: 0; } }
.js-motion .member-row { animation: exp-rise 400ms var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * var(--stagger)); }
.role-legend { display: grid; gap: 4px; }
.role-legend strong { color: var(--text); font-weight: 600; }

/* Saldos: tabla que en celular pasa a filas de dos líneas */
.saldos-table { margin: 0; }
.saldos-table td.num, .saldos-table th.num { text-align: right; white-space: nowrap; }
.saldos-table .who { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.saldos-table .who-name { font-weight: 600; }
@media (max-width: 639.98px) {
  .saldos-table thead { display: none; }
  .saldos-table, .saldos-table tbody { display: block; width: 100%; }
  .saldos-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .saldos-table tr:last-child { border-bottom: 0; }
  .saldos-table td { border: 0 !important; padding: 0 !important; }
  .saldos-table td.who-cell { grid-column: 1; grid-row: 1; min-width: 0; }
  .saldos-table td.balance { grid-column: 2; grid-row: 1; }
  .saldos-table td.paid, .saldos-table td.share { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--muted); text-align: left; padding-left: 38px !important; white-space: normal; }
  .saldos-table td.paid { grid-row: 2; margin-top: 4px; }
  .saldos-table td.share { grid-row: 3; }
  .saldos-table td.paid::before, .saldos-table td.share::before { content: attr(data-label) " "; }
}
/* Saldo de cada persona: barra que crece desde el centro (derecha: le deben; izquierda: debe) */
.bal-track { position: relative; display: block; width: 100%; max-width: 180px; height: 4px; margin-top: 6px; border-radius: 99px; background: var(--raised); }
.bal-track::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--hairline-strong); }
.bal-fill { position: absolute; top: 0; bottom: 0; width: calc(var(--w, 0) * 50%); border-radius: 99px; background: var(--muted); }
.bal-fill.is-pos { left: 50%; background: var(--positive); transform-origin: left; }
.bal-fill.is-neg { right: 50%; transform-origin: right; }
.js-motion .bal-fill { animation: exp-grow-x var(--dur-draw) var(--ease-expo) 300ms backwards; }
@media (max-width: 639.98px) { .saldos-table .bal-track { margin-left: 38px; max-width: calc(100% - 38px); } }
/* Registrar pago: llega resaltado desde "Ya le pagué" y anuncia la frase completa */
#liquidar:target { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.js-motion #liquidar:target { animation: exp-rise 600ms var(--ease-out); }
.settle-preview { font-size: var(--fs-sm); padding: 10px 12px; border-radius: var(--r-sm); background: var(--raised); line-height: 1.45; margin: 0; }
.settle-preview strong { font-weight: 700; font-variant-numeric: tabular-nums; }
.settle-preview:empty { display: none; }

/* ---- Categorías */
.cat-count { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: var(--r-pill); background: var(--raised);
  font-size: var(--fs-2xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.cat-own .tx-main { display: grid; gap: 4px; }
.cat-own .vv-share { max-width: 180px; }
.cat-go { color: var(--faint); flex-shrink: 0; transition: transform var(--dur-ui) var(--ease-out), color var(--dur-hover) ease; }
@media (hover: hover) { .cat-own .tx-item:hover .cat-go { transform: translateX(3px); color: var(--text); } }
.cat-sys .tx-item.is-hidden .tx-icon { opacity: .6; }
.cat-sys .tx-item.is-hidden .tx-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.cat-toggle { min-height: 44px; min-width: 112px; border-radius: var(--r-pill) !important; }
.cat-toggle .bi { transition: transform var(--dur-ui) var(--ease-spring); }
@media (hover: hover) { .cat-toggle:hover .bi { transform: scale(1.15); } }
.cat-visible-meter { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; white-space: nowrap; }
.cat-visible-meter .vv-share { width: 56px; }
.cat-sys > .card-link-row { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 359.98px) { .cat-visible-meter .vv-share { display: none; } }
.js-motion #nueva-categoria.show .card-body > * { animation: exp-rise 360ms var(--ease-out) backwards; }
.icon-picker { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)) !important; }
.icon-picker label { min-height: 48px; font-size: 1.1rem; padding: 6px; }
.icon-picker label .bi { background: transparent; }
/* Vista previa de la fila */
.cat-preview { position: relative; border-radius: var(--r-md); padding: 2px 14px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; }
.cat-preview::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--preview-c, var(--muted)); transition: background-color var(--dur-ui) ease; }
.cat-preview .tx-item { border: 0; }
.cat-preview-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.cat-preview-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--positive); }
.color-field { height: 48px; padding: 6px; cursor: pointer; width: 100%; }
.ob-cats label .bi, .cat-picker label .bi.is-cat { color: color-mix(in srgb, var(--cat, var(--muted)) 75%, var(--text)); background: color-mix(in srgb, var(--cat, var(--muted)) 16%, transparent); }

/* ---- Perfil */
.profile-id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-name { font-weight: 700; font-size: var(--fs-h2); line-height: 1.25; }
.profile-photo { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-avatar { position: relative; display: inline-grid; border-radius: 50%; cursor: pointer; flex-shrink: 0; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--hairline-strong); }
.profile-avatar:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
.profile-avatar .avatar { transition: transform var(--dur-ui) var(--ease-spring); }
.profile-avatar-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem;
  background: var(--text); color: var(--ground); box-shadow: 0 0 0 3px var(--surface); transition: transform var(--dur-ui) var(--ease-spring); }
@media (hover: hover) { .profile-avatar:hover .avatar { transform: scale(1.04); } .profile-avatar:hover .profile-avatar-cam { transform: scale(1.12); } }
.profile-avatar:active .avatar { transform: scale(.97); }
.js-motion .profile-avatar .avatar { animation: exp-pop 460ms var(--ease-spring) 80ms backwards; }
.js-motion .profile-avatar-cam { animation: exp-pop 360ms var(--ease-spring) 420ms backwards; }
@media (max-width: 575.98px) { .profile-photo { width: 100%; } .profile-photo > form { flex: 1 1 0; } .profile-photo .btn { width: 100%; } }
.settings-rows .tx-item > .btn, .settings-rows .tx-item > form { flex-shrink: 0; }
.settings-rows .tx-title, .settings-rows .tx-sub { white-space: normal; overflow: visible; text-overflow: clip; }
.settings-rows .tx-icon { transition: transform var(--dur-ui) var(--ease-spring); }
@media (hover: hover) { .settings-rows .tx-item:hover .tx-icon { transform: scale(1.08); } }
/* Apariencia: tres muestras (colores fijos de cada tema, para verlos sin importar el tema actual) */
.theme-pick { --tp-light: #F4F5F7; --tp-light-ink: #0E1116; --tp-dark: #0B0C0E; --tp-dark-ink: #F3F4F6;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.theme-pick > input { position: absolute; opacity: 0; pointer-events: none; }
.theme-pick label { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-weight: 600; font-size: var(--fs-sm); min-height: 44px;
  transition: border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.theme-pick label:active { transform: scale(.97); }
.tp-label { display: flex; align-items: center; gap: 6px; }
.tp-swatch { position: relative; height: 54px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--hairline-strong); }
.tp-swatch::before, .tp-swatch::after { content: ""; position: absolute; left: 10px; height: 6px; border-radius: 99px; }
.tp-swatch::before { top: 14px; width: 46%; background: var(--sw-ink); opacity: .8; }
.tp-swatch::after { top: 28px; width: 30%; background: var(--accent); }
.tp-light .tp-swatch { background: var(--tp-light); --sw-ink: var(--tp-light-ink); }
.tp-dark .tp-swatch { background: var(--tp-dark); --sw-ink: var(--tp-dark-ink); }
.tp-auto .tp-swatch { background: linear-gradient(105deg, var(--tp-light) 50%, var(--tp-dark) 50%); --sw-ink: var(--muted); }
.tp-check { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--control); display: grid; place-items: center; background: var(--surface); transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease; }
.tp-check::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); transform: scale(0); transition: transform var(--dur-ui) var(--ease-spring); }
.theme-pick input:checked + label { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.theme-pick input:checked + label .tp-check { background: var(--text); border-color: var(--text); }
.theme-pick input:checked + label .tp-check::after { transform: scale(1); }
.theme-pick input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .theme-pick label:hover { border-color: var(--control); } }
@media (max-width: 419.98px) { .theme-pick { gap: 8px; } .theme-pick label { padding: 8px; font-size: var(--fs-xs); } .tp-label .bi { display: none; } .tp-check { top: 13px; right: 13px; } }
/* Lista de consecuencias (eliminar cuenta) */
.consequence-list { padding-left: 1.1rem; margin: 0; }
.consequence-list li { margin-bottom: .5rem; line-height: 1.55; }
.consequence-list li::marker { color: var(--muted); }
.confirm-word.is-match { border-color: var(--negative); box-shadow: 0 0 0 3px var(--negative-soft); }

/* ---- Preferencias de avisos: tabla de interruptores (en celular, nombre arriba y tres interruptores en fila) */
.pref-table { margin: 0; }
.pref-table th[scope="col"] { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; width: 76px; text-align: center; }
.pref-table th[scope="row"] { font-weight: 600; }
.pref-table .form-switch { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-left: 0; margin: 0; }
.pref-table .form-switch .form-check-input { margin: 0; float: none; width: 2.6em; height: 1.4em; cursor: pointer;
  transition: background-color var(--dur-ui) ease, border-color var(--dur-ui) ease, background-position 320ms var(--ease-spring), transform var(--dur-press) var(--ease-out); }
.pref-table .form-switch .form-check-input:active { transform: scale(.92); }
.pref-table tr.is-off th[scope="row"] { color: var(--muted); }
.pref-table tr.is-off th[scope="row"]::after { content: " · apagado"; font-weight: 400; font-size: var(--fs-xs); color: var(--faint); }
.pref-ch { display: none; }
.js-motion .pref-table tbody tr { animation: exp-rise 380ms var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * 30ms); }
@media (max-width: 639.98px) {
  .pref-table thead { display: none; }
  .pref-table, .pref-table tbody { display: block; width: 100%; }
  .pref-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; padding: 12px 0 6px; border-bottom: 1px solid var(--rule); }
  .pref-table tr:last-child { border-bottom: 0; }
  .pref-table th[scope="row"] { grid-column: 1 / -1; border: 0; padding: 0 0 4px; }
  .pref-table td { border: 0; padding: 0 !important; text-align: left !important; }
  .pref-table .form-switch { justify-content: flex-start; gap: 8px; width: 100%; }
  .pref-ch { display: inline; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; white-space: nowrap; }
}
/* Barra de cambios sin guardar: aparece al tocar un interruptor */
.prefs-bar { position: fixed; z-index: 1030; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); width: min(520px, calc(100% - 32px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: var(--r-lg);
  background: var(--overlay); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-3);
  transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform var(--dur-sheet) var(--ease-spring), opacity var(--dur-ui) ease; }
.prefs-bar.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.prefs-bar span { font-size: var(--fs-sm); font-weight: 600; }
@media (max-width: 991.98px) { .prefs-bar { bottom: calc(var(--bottom-h) + 16px + env(safe-area-inset-bottom)); } }

/* ---- Centro de notificaciones */
.notif-text { white-space: normal; overflow-wrap: anywhere; }
.notif-title { font-weight: 600; color: var(--muted); }
.notif-item.is-unread .notif-title { font-weight: 700; color: var(--text); }
.notif-when { font-size: var(--fs-xs); color: var(--faint); margin-top: 4px; }
.notif-dot { width: 8px; height: 8px; background: var(--accent); vertical-align: .12em; display: inline-block; border-radius: 50%; margin-right: 6px; transition: transform var(--dur-ui) var(--ease-exit), opacity var(--dur-ui) ease; }
.notif-feed .day-header { padding-top: 14px; }
.notif-feed .day-header:first-child { padding-top: 6px; }
.notif-item { isolation: isolate; }
.notif-item::before { content: ""; position: absolute; z-index: -1; inset: 3px -10px; border-radius: var(--r-sm); background: var(--accent-soft); opacity: 0; transition: opacity var(--dur-enter) ease; pointer-events: none; }
.notif-item::after { content: ""; position: absolute; left: -10px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transform: scaleY(0); transition: transform 360ms var(--ease-out); }
.notif-item.is-unread::before { opacity: .7; }
.notif-item.is-unread::after { transform: none; }
.notif-item.is-unread .notif-when { color: var(--muted); }
.notif-item .tx-icon { transition: transform var(--dur-ui) var(--ease-spring); }
.notif-item.is-reading .notif-dot, .notif-item.is-reading [data-notif-read] { transform: scale(.6); opacity: 0; }
.notif-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.notif-open { color: inherit; text-decoration: none; display: block; border-radius: var(--r-xs); }
.notif-open:hover { color: inherit; }
.notif-open:hover .notif-title { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--faint); }
.js-motion .notif-item.just-read .tx-icon { animation: lc-ok 460ms var(--ease-spring); }
@keyframes lc-ok { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.js-motion .notif-item { animation: exp-rise 380ms var(--ease-out) backwards; animation-delay: calc(80ms + var(--i, 0) * 30ms); }
.js-motion .notif-item.is-unread::after { animation: exp-grow-y 420ms var(--ease-out) backwards; animation-delay: calc(220ms + var(--i, 0) * 30ms); }
.push-card .card-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; }
.push-card .push-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 575.98px) { .push-card .push-acts { width: 100%; } .push-card .push-acts .btn { flex: 1 1 0; } }

/* ---- Onboarding (/bienvenida) */
.ob-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 6px; }
.ob-count { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ob-skip-all .btn { min-height: 44px; color: var(--muted); }
.ob-hello { font-weight: 600; color: var(--accent-ink); margin: 0 0 4px; }
.ob-group + .ob-group { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.ob-group-title { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ob-pct { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.ob-total { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ob-presets { margin-bottom: 12px; }
.ob-row { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ob-row:first-child { border-top: 1px solid var(--rule); }
.ob-row .form-label { font-size: var(--fs-sm); margin-bottom: .25rem; }
.ob-row.is-leaving { transition: opacity 200ms ease, transform 200ms var(--ease-exit); opacity: 0; transform: translateX(12px); }
.ob-add { margin-top: 8px; }
.ob-budget { width: 9.5rem; flex-shrink: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-budget-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 14px 0 0; margin-top: 8px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.ob-budget-total strong { font-variant-numeric: tabular-nums; }
.ob-meter { height: 6px; border-radius: 99px; background: var(--raised); overflow: hidden; margin-top: 10px; }
.ob-meter > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--ease-expo), background-color var(--dur-ui) ease; }
.ob-meter > span.is-over { background: var(--negative); }
.ob-cat-count { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; margin-right: auto; }
.ob-cat-count strong { color: var(--text); font-weight: 600; }
.js-motion .ob-cats > div { animation: exp-rise 360ms var(--ease-out) backwards; animation-delay: calc(160ms + var(--i, 0) * 20ms); }
.ob-actions { display: flex; align-items: center; gap: 8px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.ob-actions .ob-primary { margin-left: auto; }
.ob-done-mark { position: relative; width: 48px; height: 48px; margin-bottom: 10px; display: grid; place-items: center; }
.ob-done-mark .flash-check { width: 44px; height: 44px; margin: 0; }
.ob-summary .tx-item.is-ok .tx-icon { --cat: var(--positive); }
.js-motion .ob-summary .tx-item { animation: exp-rise 380ms var(--ease-out) backwards; animation-delay: calc(260ms + var(--i, 0) * 70ms); }
.js-motion .ob-summary .tx-item.is-ok .tx-icon { animation: exp-pop 420ms var(--ease-spring) backwards; animation-delay: calc(360ms + var(--i, 0) * 70ms); }
.ob-confetti { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: var(--c, var(--positive)); animation: lc-burst 950ms var(--ease-out) forwards; animation-delay: calc(560ms + var(--d, 0ms)); }
@keyframes lc-burst { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r, 34px)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .ob-confetti { display: none; } }
@media (max-width: 575.98px) {
  .ob-actions { flex-wrap: wrap; }
  .ob-actions .ob-primary { order: -1; flex: 1 0 100%; margin-left: 0; }
  .ob-actions .ob-skip { margin-left: auto; }
  .ob-budget { width: 8rem; }
}

/* ---- Páginas legales: barra de lectura que avanza como el mes */
.legal-progress { position: fixed; z-index: 1040; top: 0; left: 0; right: 0; height: 3px; pointer-events: none; }
.legal-progress > span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; will-change: transform; }
.legal-content { font-size: var(--fs-body); overflow-wrap: anywhere; }
.legal-content h2, .legal-content h3 { scroll-margin-top: 80px; font-weight: 700; letter-spacing: -0.015em; }
.legal-content h2 { font-size: var(--fs-h2); padding-top: .25rem; }
.legal-content a { text-underline-offset: .2em; }
.legal-content ul, .legal-content ol { padding-left: 1.2rem; }
.legal-content li::marker { color: var(--muted); }
.legal-content table { display: block; max-width: 100%; overflow-x: auto; }
.legal-meta { display: inline-flex; align-items: center; gap: 6px; }
/* ===== FIN FASE 2 · LOTE C ===== */


/* ===== FASE 2 · LOTE B ===== */
/* Planear y entender: presupuesto, metas, compras, recordatorios, reportes y consejos.
   Solo tokens (sin hex). El movimiento usa el lenguaje común (.vv-stagger, .vv-grow, [data-reveal], exp-*). */

/* ---- Hojas inferiores con formulario (.sheet > form.sheet-form): cabecera, campos que se desplazan y acciones fijas */
.sheet-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; max-height: inherit; }
.sheet-form > .offcanvas-body { min-height: 0; }
.sheet-fields { display: grid; gap: 18px; align-content: start; }
.sheet-fields > * { margin-bottom: 0 !important; }
.sheet-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--rule); flex-shrink: 0; }
@media (max-width: 575.98px) { .sheet-actions > .btn-primary { flex: 1 1 auto; } }

/* ---- Chips como radios (input.btn-check + label.chip dentro de .chip-row) */
.chip-row > .btn-check + .chip { cursor: pointer; min-height: 44px; }
.chip-row > .btn-check:checked + .chip { background: var(--text); color: var(--surface); }
.chip-row > .btn-check:checked + .chip .bi { color: inherit; }
.chip-row > .btn-check:focus-visible + .chip, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button.chip { border: 0; font: inherit; font-size: var(--fs-sm); font-weight: 500; }
@media (pointer: coarse) { button.chip { min-height: 44px; } }

/* ---- Dos columnas: formulario a la izquierda, historia a la derecha (se apila en celular, formulario primero) */
.split-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; align-items: start; }
.split-grid > .card { margin: 0; }
@media (min-width: 992px) { .split-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---- Presupuesto */
.bud-hero-bar { margin-top: 16px; max-width: 620px; }
.bud-hero-bar .progress { --bs-progress-height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.bud-pct { font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; min-width: 3.25rem; color: var(--text); }
.bud-pct.is-warning { color: var(--warning); }
.bud-pct.is-danger { color: var(--negative); }
.bud-signal { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.bud-signal .pill { font-size: var(--fs-xs); padding: 3px 10px; }
.bud-signal .pill strong { font-variant-numeric: tabular-nums; }
.js-motion .bud-signal .pill { animation: exp-pop 380ms var(--ease-spring) backwards; }
.js-motion .bud-signal .pill:nth-child(1) { animation-delay: 360ms; }
.js-motion .bud-signal .pill:nth-child(2) { animation-delay: 420ms; }
.js-motion .bud-signal .pill:nth-child(3) { animation-delay: 480ms; }
.bud-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.bud-tools.is-center { justify-content: center; }
.bud-legend { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.bud-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; grid-template-areas: "ic name nums menu" "ic bar bar bar" "ic msg msg msg";
  column-gap: 12px; row-gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.bud-row:last-child { border-bottom: 0; }
.bud-row:not(:has(.bud-menu)) { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "ic name nums" "ic bar bar" "ic msg msg"; }
.bud-row > .tx-icon { grid-area: ic; align-self: start; }
.bud-row.is-over > .tx-icon { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--negative) 60%, transparent); }
.bud-row.is-near > .tx-icon { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--warning) 55%, transparent); }
.bud-name { grid-area: name; min-width: 0; }
.bud-nums { grid-area: nums; text-align: right; line-height: 1.25; }
.bud-nums .spent { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.015em; }
.bud-nums .limit { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bud-menu { grid-area: menu; margin-right: -8px; }
.bud-bar { grid-area: bar; display: flex; align-items: center; gap: 10px; }
.bud-bar .progress { flex: 1 1 auto; }
.bud-msg { grid-area: msg; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 359.98px) { .bud-row { grid-template-columns: 36px minmax(0, 1fr) auto auto; column-gap: 10px; } .bud-row:not(:has(.bud-menu)) { grid-template-columns: 36px minmax(0, 1fr) auto; } }

/* ---- Regla 50/30/20: barra de tres partes, leyenda y tu reparto en vivo */
.rule-bar { display: flex; gap: 3px; height: 10px; border-radius: 99px; overflow: hidden; max-width: 620px; margin: 14px 0 10px; }
.rule-bar > span { display: block; height: 100%; min-width: 0; transform-origin: left center; transition: flex-grow var(--dur-ui) var(--ease-out); }
.b-necesidades { background: var(--text); }
.b-deseos { background: var(--muted); }
.b-ahorro { background: var(--accent); }
.rule-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--fs-sm); color: var(--muted); }
.rule-legend li { display: inline-flex; align-items: center; gap: 6px; }
.rule-legend i, .rule-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rule-legend strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rule-mine { max-width: 620px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.rule-mine-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); }
.rule-mine-pcts { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.rule-mine-pcts strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.rule-bar.is-mine { height: 6px; margin: 8px 0 0; }
.rule-note { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--muted); max-width: 62ch; }
.js-motion .rule-bar:not(.is-mine) > span { animation: exp-grow-x 760ms var(--ease-expo) backwards; }
.js-motion .rule-bar:not(.is-mine) > span:nth-child(1) { animation-delay: 200ms; }
.js-motion .rule-bar:not(.is-mine) > span:nth-child(2) { animation-delay: 320ms; }
.js-motion .rule-bar:not(.is-mine) > span:nth-child(3) { animation-delay: 440ms; }
.sug-blocks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 12px; }
.sug-blocks > .card { margin: 0; }
@media (min-width: 992px) { .sug-blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sug-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sug-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.sug-pct { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; }
.sug-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.015em; }
.sug-desc { font-size: var(--fs-xs); color: var(--muted); margin: 4px 0 6px; }
.sug-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 9.5rem); grid-template-areas: "lbl inp" "hint hint"; column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.sug-item:last-child { border-bottom: 0; }
.sug-item label { grid-area: lbl; margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.sug-item input { grid-area: inp; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 44px; }
.sug-item .form-text { grid-area: hint; margin: 0; font-size: var(--fs-xs); }
/* Con tres columnas angostas, el nombre va arriba y el monto debajo para no cortar la categoría */
@media (min-width: 992px) and (max-width: 1399.98px) { .sug-item { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lbl" "inp" "hint"; row-gap: 6px; } .sug-item input { text-align: left; } }
.sug-save .card-body { display: grid; gap: 12px; }
.sug-save-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: end; }
@media (min-width: 576px) { .sug-save-grid { grid-template-columns: minmax(0, 1fr) auto; } }
.sug-grand small { display: block; font-size: var(--fs-xs); color: var(--muted); }
.sug-grand strong { display: block; font-size: var(--fs-figure); font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
@media (min-width: 576px) { .sug-grand { text-align: right; } }
@keyframes sug-tick { from { opacity: .4; transform: translateY(3px); } }
.js-motion .is-ticked { display: inline-block; animation: sug-tick 300ms var(--ease-out); }

/* ---- Metas de ahorro */
.goal-hero-bar { margin-top: 14px; max-width: 620px; }
.goal-hero-bar .progress { --bs-progress-height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.goal-hint { margin: 10px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.goal-win { color: var(--positive); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.goal-row { flex-wrap: wrap; align-items: flex-start; padding: 14px 0; }
.goal-row > .tx-main { flex: 1 1 0; }
.goal-row .tx-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.goal-row .tx-icon { position: relative; }
.goal-row.is-archived .tx-title, .goal-row.is-archived .tx-amount { color: var(--muted); }
.goal-row.is-archived .tx-icon { opacity: .6; }
.goal-row.is-done .progress-bar { background-color: var(--positive) !important; }
.goal-progress { flex: 1 0 100%; padding-left: 52px; min-width: 0; }
.goal-progress .progress { --bs-progress-height: 6px; }
.goal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 8px; font-size: var(--fs-xs); color: var(--muted); }
.goal-meta strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.goal-meta .is-late { color: var(--warning); font-weight: 600; }
.goal-done-mark { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .65rem;
  background: var(--positive); color: var(--surface); box-shadow: 0 0 0 2px var(--surface); }
.js-motion .goal-done-mark { animation: exp-pop 460ms var(--ease-spring) 700ms backwards; }
@media (max-width: 359.98px) { .goal-progress { padding-left: 0; } }
/* Anillo de progreso (detalle) */
.goal-hero-grid { display: flex; align-items: center; gap: 22px; }
.goal-hero-grid > .min-w-0 { flex: 1 1 auto; }
.goal-hero-label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.goal-ring { --size: 116px; position: relative; width: var(--size); height: var(--size); flex-shrink: 0; }
.goal-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.goal-ring circle { fill: none; stroke-width: 9; }
.goal-ring .ring-track { stroke: color-mix(in srgb, var(--text) 9%, transparent); }
.goal-ring .ring-val { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset 1200ms var(--ease-expo) 150ms; }
.goal-ring.is-zero .ring-val { opacity: 0; }
.goal-ring.is-late .ring-val { stroke: var(--warning); }
.goal-ring.is-done .ring-val { stroke: var(--positive); }
.goal-ring-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; }
.goal-ring-pct { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.goal-ring-cap { display: block; font-size: var(--fs-2xs); color: var(--muted); margin-top: 2px; }
.goal-ring-check { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--positive-soft); color: var(--positive); font-size: 1.5rem; }
@media (max-width: 575.98px) { .goal-ring { --size: 92px; } .goal-ring-pct { font-size: 1.2rem; } .goal-hero-grid { gap: 16px; } .goal-ring-check { width: 40px; height: 40px; font-size: 1.25rem; } }
@media (max-width: 359.98px) { .goal-ring { --size: 80px; } .goal-hero-grid { gap: 12px; } }
.js-motion .goal-ring[data-reveal]:not(.is-in) { opacity: 1; transform: none; }
.js-motion .goal-ring[data-reveal]:not(.is-in) .ring-val { stroke-dashoffset: 100; }
.js-motion .goal-ring[data-reveal] .goal-ring-check { transition: transform 520ms var(--ease-spring) 1050ms, opacity 300ms ease 1050ms; }
.js-motion .goal-ring[data-reveal]:not(.is-in) .goal-ring-check { transform: scale(0); opacity: 0; }
/* Celebración breve al cumplirla: unas chispas salen del anillo una sola vez */
.goal-burst { position: absolute; inset: 0; pointer-events: none; }
.goal-burst i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; border-radius: 50%; background: var(--positive); opacity: 0; }
.goal-burst i:nth-child(3n) { background: var(--accent); }
.goal-burst i:nth-child(4n) { background: var(--warning); width: 5px; height: 5px; }
@keyframes goal-spark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-30px) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--size) * -.72)) scale(1); } }
@keyframes goal-cheer { 50% { transform: scale(1.06); } }
.js-motion .goal-ring.is-in .goal-burst i { animation: goal-spark 900ms var(--ease-out) backwards; animation-delay: calc(1150ms + var(--d, 0ms)); }
.js-motion .goal-ring.is-in.is-celebrate { animation: goal-cheer 520ms var(--ease-spring) 1150ms; }
.goal-purchase .section-link { display: inline-flex; min-height: 32px; }
.goal-switches { display: grid; gap: 14px; }
.goal-member { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.goal-member:last-child { border-bottom: 0; }
.goal-member-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-weight: 600; min-width: 0; }
.goal-member-head .tabular { white-space: nowrap; }
.goal-member-head small { color: var(--muted); font-weight: 500; }
.goal-side { min-width: 0; }

/* ---- Compras: listas */
.shop-row { flex-wrap: nowrap; }
.shop-row-progress { --bs-progress-height: 4px; max-width: 220px; margin-top: 8px; }
.shop-row.is-full .progress-bar { background-color: var(--positive) !important; }
.shop-ready { color: var(--positive); font-weight: 600; }
.shop-link .add-ic { width: 40px; height: 40px; border-radius: 13px; }
@media (hover: hover) { .shop-link .tx-item:hover .tx-chev { transform: translateX(3px); } }
.shop-link .tx-chev { transition: transform var(--dur-ui) var(--ease-out); }
.shop-qty-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-new-list { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.shop-new-list[hidden] { display: none; }
@media (max-width: 359.98px) { .shop-qty-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-qty-row > :last-child { grid-column: 1 / -1; } .shop-new-list { grid-template-columns: minmax(0, 1fr); } }
/* Detalle de la lista: cifra en vivo, agregar en una fila, casillas grandes */
.shop-hero .figure-sub [data-total-est], .shop-hero .figure-sub [data-total-count] { display: inline-block; }
.shop-hero .is-bump { display: inline-block; }
/* En móvil "Producto rápido" queda como botón de ícono; "Nueva lista" toma el resto */
@media (max-width: 575.98px) { .page-actions:has(> :nth-child(2)) > .btn.shop-quick { flex: 0 0 44px; padding-inline: 0; } }
.js-motion .shop-hero .is-bump { animation: shop-bump 420ms var(--ease-spring); }
@keyframes shop-bump { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
.shop-progress { margin-top: 16px; max-width: 620px; }
.shop-progress .progress { --bs-progress-height: 8px; position: relative; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.shop-progress .progress-bar { transition: width 620ms var(--ease-expo), background-color var(--dur-ui) ease; }
.shop-progress.is-complete .progress-bar { background-color: var(--positive) !important; }
.shop-diff { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.shop-diff:empty { display: none; }
.shop-progress.is-complete .shop-diff { color: var(--text); }
.js-motion .shop-progress.just-complete .progress::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); transform: translateX(-100%); animation: exp-shimmer 900ms var(--ease-out) 200ms; }
.shop-add { padding: 14px 18px 10px; border-bottom: 1px solid var(--rule); }
.shop-add-row { display: flex; gap: 8px; }
.shop-add-field { position: relative; flex: 1 1 auto; min-width: 0; }
.shop-add-field > .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.shop-add-field .form-control { padding-left: 2.5rem; border-radius: 14px; }
.shop-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; border-radius: var(--r-sm); }
.shop-more > summary::-webkit-details-marker { display: none; }
.shop-more > summary .bi { transition: transform 320ms var(--ease-spring); }
.shop-more[open] > summary .bi { transform: rotate(180deg); }
.shop-more > summary:hover { color: var(--text); }
.shop-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-more-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 4px 0 8px; }
@media (min-width: 768px) { .shop-add .shop-more-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.js-motion .shop-more[open] .shop-more-grid > * { animation: exp-rise 300ms var(--ease-out) backwards; }
.shop-list { padding: 0 18px 8px; }
.shop-list .shop-group { padding-top: 16px; }
.shop-list .shop-group:first-child { padding-top: 12px; }
.shop-group .tabular { font-size: var(--fs-xs); color: var(--muted); transition: color var(--dur-ui) ease; }
.shop-group.is-done .tabular { color: var(--positive); }
.shop-item { position: relative; isolation: isolate; gap: 6px; padding: 4px 0; min-height: 60px; }
.shop-item:last-child { border-bottom: 0; }
.shop-item::before { content: ""; position: absolute; inset: 2px -8px; z-index: -1; border-radius: 10px; background: var(--positive-soft); opacity: 0; pointer-events: none; }
.shop-check { width: 44px; height: 44px; margin-left: -8px; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; font-size: 1.4rem; }
.shop-check .bi-check-circle-fill { color: var(--positive); }
.shop-item .shop-check .form-check-input { width: 28px; height: 28px; margin: 0; border-width: 2px; border-radius: 9px; cursor: pointer; border-color: var(--control); background-color: transparent;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, transform var(--dur-ui) var(--ease-spring); }
.shop-item .shop-check .form-check-input:checked { background-color: var(--positive); border-color: var(--positive); }
.shop-item .shop-check .form-check-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
@media (hover: hover) { .shop-check:hover .form-check-input:not(:checked) { border-color: var(--positive); transform: scale(1.06); } }
.shop-check:active .form-check-input { transform: scale(.9); }
.shop-main { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 6px 0; text-align: left; background: none; border: 0; color: inherit; border-radius: var(--r-sm); }
button.shop-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-name { position: relative; display: inline-block; max-width: 100%; vertical-align: top; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-name::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 1.5px; border-radius: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; pointer-events: none; }
.shop-sub, .shop-last { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-price { flex-shrink: 0; text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
button.shop-price { min-width: 44px; min-height: 44px; padding: 0 2px 0 6px; background: none; border: 0; color: var(--text); text-decoration: underline dotted var(--control); text-underline-offset: .3em; border-radius: var(--r-sm); }
button.shop-price:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shop-price.is-est { color: var(--muted); font-weight: 500; }
.shop-price small { font-size: var(--fs-2xs); }
.shop-item.done .shop-name { color: var(--muted); }
.shop-item.done .shop-name::after { transform: scaleX(1); }
.shop-item.done .shop-main { opacity: .6; transition: opacity var(--dur-ui) ease; }
@keyframes shop-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shop-pop { 0% { transform: scale(.7); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes shop-dim { from { opacity: 1; } }
@keyframes shop-in { from { opacity: 0; transform: translateY(-6px); } }
.js-motion .shop-item.just-done::before { animation: shop-flash 900ms var(--ease-out); }
.js-motion .shop-item.just-done .form-check-input { animation: shop-pop 460ms var(--ease-spring); }
.js-motion .shop-item.just-done .shop-name::after { animation: exp-grow-x 380ms var(--ease-out) 90ms backwards; }
.js-motion .shop-item.just-done .shop-main { animation: shop-dim 520ms ease 160ms backwards; }
.js-motion .shop-item.just-done .shop-price { animation: exp-rise 360ms var(--ease-out) 180ms backwards; }
.js-motion .shop-item.just-undone .form-check-input { animation: shop-pop 360ms var(--ease-out); }
.js-motion .shop-item.just-added { animation: shop-in 420ms var(--ease-out); }
.js-motion .shop-item.just-added::before { background: color-mix(in srgb, var(--text) 7%, transparent); animation: shop-flash 1100ms var(--ease-out); }
.shop-finish-wrap { margin: 0 0 24px; }
.shop-finish-wrap p { margin: 8px 0 0; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
@keyframes shop-ready { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-ring); } 50% { box-shadow: 0 0 0 8px transparent; } }
.js-motion .shop-finish.is-ready { animation: shop-ready 1.2s var(--ease-out) 2; }
.shop-total-box { padding: 14px 16px; border-radius: var(--r-lg); background: var(--raised); }
.shop-total-row { display: flex; align-items: baseline; gap: 4px; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.shop-total-row .form-control-plaintext { padding: 0; font: inherit; color: var(--text); min-height: 0; }
.shop-warn { color: var(--warning); }
.shop-warn:empty { display: none; }
/* Compra finalizada: check que se dibuja y una celebración breve, una vez */
.shop-finished { position: relative; align-items: center; gap: .75rem; overflow: visible; }
.shop-finished-mark { position: relative; flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; }
.shop-finished-mark .flash-check { width: 32px; height: 32px; margin: 0; }
.shop-confetti { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 2px; pointer-events: none; opacity: 0;
  background: var(--c, var(--positive)); animation: shop-burst 900ms var(--ease-out) forwards; animation-delay: calc(380ms + var(--d, 0ms)); }
@keyframes shop-burst { 0% { opacity: 0; transform: rotate(var(--a)) translateX(0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r, 30px)) scale(1); } }
@media (prefers-reduced-motion: reduce) { .shop-confetti, .goal-burst { display: none; } }

/* ---- Compras planeadas (lista de deseos) */
.wish-salary { display: block; min-width: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--raised) 80%, transparent); color: var(--text); text-decoration: none; }
.wish-salary small { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.2; }
.wish-salary strong { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-weight: 700; font-size: var(--fs-sm); }
.wish-salary:hover { color: var(--text); background: var(--raised); }
@media (hover: hover) { .wish-salary:hover .btn-arrow { transform: translateX(3px); } }
.wish-row { padding: 16px 0; border-bottom: 1px solid var(--rule); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.wish-row:last-child { border-bottom: 0; }
.wish-row:target { background: var(--accent-soft); border-radius: var(--r-md); margin: 0 -10px; padding: 16px 10px; }
.wish-head { display: flex; align-items: flex-start; gap: 12px; }
.wish-head > .min-w-0 { flex: 1 1 auto; }
.wish-name { font-size: 1rem; font-weight: 600; margin: 0 0 6px; overflow-wrap: anywhere; letter-spacing: -0.01em; }
.wish-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-xs); color: var(--muted); }
.wish-meta a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 600; }
.wish-price { flex-shrink: 0; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wish-note { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.wish-plan { position: relative; margin-top: 12px; padding: 10px 12px 10px 16px; border-radius: var(--r-md); background: var(--raised); font-size: var(--fs-sm); }
.wish-plan::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transform-origin: top; }
.wish-plan p { margin: 0; }
.wish-plan small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.js-motion .wish-plan::before { animation: exp-grow-y 620ms var(--ease-expo) 240ms backwards; }
.wish-goal { margin-top: 12px; }
.wish-goal-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 6px; }
.wish-goal-head strong { color: var(--text); font-weight: 600; }
.wish-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.wish-actions > form > .btn { white-space: nowrap; }
.wish-past .tx-title { color: var(--muted); }
@media (max-width: 359.98px) { .wish-actions > form { flex: 1 1 auto; } .wish-actions > form > .btn { width: 100%; } }

/* ---- Recordatorios: línea de tiempo (fecha · nodo sobre un riel · detalle) */
.rem-timeline > li { position: relative; display: flex; align-items: center; gap: 0; padding: 10px 0; min-height: 64px; isolation: isolate; }
.rem-timeline .vv-date { margin-right: 2px; }
.rem-dot { position: relative; align-self: stretch; width: 26px; flex-shrink: 0; }
.rem-dot::before { content: ""; position: absolute; left: 50%; top: -10px; bottom: -10px; width: 1.5px; margin-left: -.75px; background: var(--rule); transform-origin: top; }
.rem-timeline > li:first-child .rem-dot::before { top: 50%; }
.rem-timeline > li:last-child .rem-dot::before { bottom: 50%; }
.rem-timeline > li:only-child .rem-dot::before { display: none; }
.rem-dot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--control); transition: transform var(--dur-ui) var(--ease-spring); }
.rem-timeline .tone-warning .rem-dot::after { border-color: var(--warning); }
.rem-timeline .tone-danger .rem-dot::after, .rem-timeline .is-late .rem-dot::after { border-color: var(--negative); background: var(--negative); }
.rem-timeline .is-today .rem-dot::after { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); }
.rem-timeline .tx-main { padding-left: 4px; }
.rem-timeline .tx-end { padding-left: 10px; }
.rem-when { font-weight: 600; color: var(--text); }
.rem-when.is-soon { color: var(--warning); }
.rem-when.is-late { color: var(--negative); }
.rem-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.rem-link:focus-visible { outline: none; }
.rem-timeline > li::before { content: ""; position: absolute; z-index: -1; inset: 2px -10px; border-radius: var(--r-md); background: var(--raised); opacity: 0; transition: opacity var(--dur-hover) ease; pointer-events: none; }
@media (hover: hover) { .rem-timeline > li:hover::before { opacity: .8; } .rem-timeline > li:hover .rem-dot::after { transform: scale(1.3); } }
.rem-timeline > li:active::before { opacity: 1; }
.rem-timeline > li:has(.rem-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-md); }
.js-motion .rem-timeline > li { animation: exp-rise 420ms var(--ease-out) backwards; animation-delay: calc(120ms + var(--i, 0) * 40ms); }
.js-motion .rem-timeline .rem-dot::before { animation: exp-grow-y 520ms var(--ease-expo) backwards; animation-delay: calc(140ms + var(--i, 0) * 40ms); }
.js-motion .rem-timeline .rem-dot::after { animation: exp-pop 380ms var(--ease-spring) backwards; animation-delay: calc(220ms + var(--i, 0) * 40ms); }
.rem-item.is-paused .tx-title { color: var(--muted); }
.rem-switch { min-height: 44px; display: flex; align-items: center; padding-left: 0; }
.rem-switch .form-check-input { width: 2.75rem; height: 1.5rem; margin: 0; cursor: pointer; }
.rem-switch .form-check-input:active { transform: scale(.94); }
@keyframes rem-fill { 0% { transform: scale(.985); opacity: .6; } 100% { transform: none; opacity: 1; } }
.js-motion #titulo.is-filled { animation: rem-fill 420ms var(--ease-out); }

/* ---- Reportes */
.rep-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.rep-period .month-nav-input[type="number"] { width: 96px; -moz-appearance: textfield; appearance: textfield; }
.rep-period .month-nav-input[type="number"]::-webkit-inner-spin-button, .rep-period .month-nav-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 575.98px) {
  .rep-period > .segmented { flex: 1 1 100%; display: flex; }
  .rep-period > .segmented > * { flex: 1 1 0; }
  .rep-period > .month-nav { flex: 1 1 100%; }
  .rep-period > .month-nav .month-nav-input { flex: 1 1 auto; width: auto; min-width: 0; }
}
.rep-split { margin-top: 16px; max-width: 620px; }
.rep-split .progress { --bs-progress-height: 8px; background: color-mix(in srgb, var(--text) 8%, transparent); }
.rep-split .progress:not(.is-danger):not(.is-warning) .progress-bar { background-color: color-mix(in srgb, var(--text) 55%, transparent) !important; }
.chart-legend { margin-bottom: 10px; }
.chart-legend .is-now { background: var(--accent); }
.chart-legend .is-prev { background: var(--faint); }
.chart-legend .is-line { width: 14px; height: 2px; border-radius: 2px; background: var(--text); }
.rep-compare { min-height: calc(56px + var(--rows, 4) * 46px); margin-bottom: 12px; }
.rep-moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin-bottom: 18px; }
.rep-move { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--raised); min-width: 0; }
.rep-move-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); color: var(--text); font-size: 1rem; }
.rep-move.is-up .rep-move-ic { color: var(--warning); }
.rep-move.is-down .rep-move-ic { color: var(--positive); }
.rep-move-label { font-size: var(--fs-xs); color: var(--muted); }
.rep-move-name { font-weight: 600; display: flex; align-items: center; gap: 6px; min-width: 0; }
.rep-move-val { margin-left: auto; text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rep-move.is-down .rep-move-val { color: var(--positive); }
.rep-move-val small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.js-motion .rep-move .rep-move-ic { animation: exp-pop 460ms var(--ease-spring) 220ms backwards; }
.js-motion [data-reveal]:not(.is-in) .rep-move .rep-move-ic { animation: none; transform: scale(.4); }
.rep-var { display: inline-flex; align-items: center; gap: 1px; font-variant-numeric: tabular-nums; }
.rep-var.is-up { color: var(--text); }
.rep-var.is-down { color: var(--positive); }
.rep-var .bi { font-size: 1.1em; }
.rep-table th[scope="row"] { font-weight: 600; }
.rep-cat-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rep-muted { color: var(--muted) !important; font-weight: 500; }
.rep-note { font-size: var(--fs-xs); color: var(--muted); margin: 10px 0 0; }
.rep-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 992px) { .rep-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } .rep-two.is-wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.rep-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.rep-pair > .card { margin: 0; }
@media (min-width: 992px) { .rep-pair:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rep-sum { padding: 6px 0 4px; }
@media (max-width: 639.98px) {
  .rep-table td.num .rep-var { justify-content: flex-end; }
  .table-mobile-cards th[scope="row"] > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
}

/* ---- Consejos */
.tip-feature { display: flex; gap: 16px; align-items: flex-start; }
.tip-feature-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--warning-soft); color: var(--warning); font-size: 1.2rem; }
.tip-feature-title { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); font-weight: 700; letter-spacing: -0.025em; margin: 4px 0 6px; line-height: var(--lh-tight); }
.tip-feature-text { margin: 0; color: var(--muted); max-width: 66ch; }
@keyframes tip-glow { 0% { transform: scale(.6) rotate(-20deg); opacity: 0; } 40% { transform: scale(1.08) rotate(4deg); opacity: 1; } 70%, 100% { transform: none; } }
.js-motion .tip-feature-ic { animation: tip-glow 900ms var(--ease-out) 300ms backwards; }
@media (max-width: 575.98px) { .tip-feature { flex-direction: column; gap: 12px; } }
.advice-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.advice-item:last-child { border-bottom: 0; }
.advice-item.is-compact { padding: 12px 0; }
.advice-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; font-size: 1.05rem;
  background: var(--accent-soft); color: var(--accent-ink); transition: transform var(--dur-ui) var(--ease-spring); }
.advice-item.is-warning .advice-ic { background: var(--warning-soft); color: var(--warning); }
.advice-item.is-danger .advice-ic { background: var(--negative-soft); color: var(--negative); }
@media (hover: hover) { .advice-item:hover .advice-ic { transform: scale(1.06) rotate(-6deg); } }
.advice-main { flex: 1 1 auto; min-width: 0; }
.advice-main > .pill { margin-bottom: 6px; }
.advice-title { font-size: var(--fs-h3); font-weight: 600; margin: 0 0 4px; line-height: 1.4; overflow-wrap: anywhere; }
.advice-title strong { font-weight: 700; }
.advice-text { margin: 0; font-size: var(--fs-sm); color: var(--muted); max-width: 70ch; }
.advice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 10px; }
.advice-actions .section-link { min-height: 44px; display: inline-flex; align-items: center; }
.advice-vote { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.advice-vote .btn { min-height: 44px; }
.advice-date { font-size: var(--fs-xs); color: var(--faint); margin-top: 6px; }
@media (max-width: 575.98px) { .advice-item { gap: 12px; } .advice-ic { width: 36px; height: 36px; border-radius: 12px; font-size: .95rem; } .advice-vote { margin-left: 0; } }
.js-motion [data-advice].is-leaving { transition: opacity 260ms var(--ease-exit), transform 300ms var(--ease-exit) !important; opacity: 0 !important; transform: translateX(24px) !important; }
.advice-past { align-items: flex-start; }
.advice-past-title { font-weight: 600; overflow-wrap: anywhere; }
.advice-past-text { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.advice-hist-empty { margin: 16px 0; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
/* ===== FIN FASE 2 · LOTE B ===== */