/* Fresco 2.0 — capa de diseño inspirada en la guía de Wise (pedido del usuario 2026-10-16; guía en «Wise Diseño/DESIGN.md»).
   Se carga DESPUÉS de styles.css, movil.css y cuenta.css: solo cambia variables y la apariencia de los componentes, nada de lógica.
   Para volver al diseño anterior basta con quitar el <link> a tema.css.
   Decisiones: se mantiene el verde de la marca (#38e54d) como acento (el usuario no quiso el lima de Wise); igual que el lima en
   Wise, el verde va SOLO como relleno (botones y estados activos) y nunca como texto sobre fondo claro (para eso: verde bosque).
   Pasos aplicados: 1 paleta · 2 tipografía (Inter; números en Inter Black) · 3 formas (píldoras) · 4 componentes · 5 superficies
   (Patrimonio en tarjeta bosque) · 6 diseño plano (sin sombras salvo en ventanas). */

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

/* ---------- 1. Paleta ---------- */
:root {
  --forest: #163300;        /* Forest Ink: peso de la marca, superficies oscuras */
  --spruce: #054d28;        /* verde oscuro para texto verde sobre claro */
  --obsidian: #0e0f0c;      /* títulos y números grandes */
  --bg: #f2f4f0;            /* lienzo con un toque verde (entre Paper y Fog) */
  --surface: #ffffff;
  --surface-2: #f4f6f2;
  --surface-3: #e8ebe6;     /* Fog */
  --border: #e1e5de;
  --border-strong: #c3c8bf;
  --text: #1c1e1b;
  --text-2: #454745;        /* Charcoal */
  --muted: #5f625e;         /* Slate (un poco más oscuro: 4,5:1 también sobre los grises claros) */
  --hover: rgba(22, 51, 0, .05);
  --accent-text: #163300;   /* texto sobre el verde: bosque, no negro */
  --accent-fg: #054d28;     /* verde como texto sobre claro (Spruce) */
  --accent-soft: #e2f6d5;   /* Linen Mist */
  --ok: #1d7a3a; --ok-soft: #e2f6d5;
  --info: #0b4c72; --info-soft: #e0edf5;   /* Signal Blue */
  --err: #cb272f; --err-soft: #fbe6e6;     /* Alarm Red */
  --warn: #9a5b00; --warn-soft: #fbf0dc;
  --chart-2: #0b4c72;
  --shadow: none;
  --shadow-pop: 0 10px 32px rgba(0, 0, 0, .15), 0 40px 40px rgba(0, 0, 0, .04);
  --radius: 16px;           /* tarjetas */
  --radius-lg: 28px;        /* tarjetas protagonistas y ventanas */
  --radius-sm: 10px;        /* campos */
  --pill: 9999px;           /* botones, chips, pestañas, insignias */
  --font: 'Inter', 'DM Sans', system-ui, 'Segoe UI', sans-serif;
  --hero-bg: #163300; --hero-fg: #ffffff; --hero-num: #38e54d; --hero-sub: rgba(255, 255, 255, .72);
}
/* Oscuro: la misma familia verde (casi negro con tono verde), no negro neutro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0e0a; --surface: #141911; --surface-2: #1a2116; --surface-3: #222b1c;
    --border: #242d1e; --border-strong: #38452f;
    --text: #eef2ea; --text-2: #c9d0c3; --muted: #9aa394; --hover: rgba(255, 255, 255, .05);
    --accent-text: #0e1f00; --accent-fg: #5fe870; --accent-soft: #19301a;
    --ok: #5fe870; --ok-soft: #19301a; --info: #78bfeb; --info-soft: #12263a; --err: #ff7a75; --err-soft: #331817; --warn: #f0b04a; --warn-soft: #2d2412;
    --chart-2: #78bfeb; --shadow: none; --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
    --hero-bg: #1d4200; --hero-fg: #ffffff; --hero-num: #5fe870; --hero-sub: rgba(255, 255, 255, .7);
  }
}
:root[data-theme="dark"] {
  --bg: #0c0e0a; --surface: #141911; --surface-2: #1a2116; --surface-3: #222b1c;
  --border: #242d1e; --border-strong: #38452f;
  --text: #eef2ea; --text-2: #c9d0c3; --muted: #9aa394; --hover: rgba(255, 255, 255, .05);
  --accent-text: #0e1f00; --accent-fg: #5fe870; --accent-soft: #19301a;
  --ok: #5fe870; --ok-soft: #19301a; --info: #78bfeb; --info-soft: #12263a; --err: #ff7a75; --err-soft: #331817; --warn: #f0b04a; --warn-soft: #2d2412;
  --chart-2: #78bfeb; --shadow: none; --shadow-pop: 0 16px 48px rgba(0, 0, 0, .6);
  --hero-bg: #1d4200; --hero-fg: #ffffff; --hero-num: #5fe870; --hero-sub: rgba(255, 255, 255, .7);
}

/* ---------- 2. Tipografía: Inter para todo; títulos y números compactos y gruesos ---------- */
body { font-family: var(--font); font-feature-settings: 'calt'; letter-spacing: -.006em; }
input, select, textarea, button { font-family: inherit; }
.head h1 { font-size: 40px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--text); }
.head h1 small { font-size: 15px; font-weight: 400; letter-spacing: -.005em; margin-top: 8px; color: var(--muted); }
.card h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.modal h2 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.kpi .val, .acc-saldo, .prest-monto b, .cq-html b { font-variant-numeric: tabular-nums; }
.kpi .val { font-size: 26px; font-weight: 800; letter-spacing: -.035em; }
.kpi .lbl { font-weight: 500; }
@media (max-width: 900px) { .head h1 { font-size: 32px; } }

/* ---------- 3 y 4. Formas y componentes ---------- */
/* Botones: píldoras. Principal = relleno verde con texto bosque; secundario = píldora con borde bosque. */
.btn { border-radius: var(--pill); padding: 9px 18px; font-weight: 600; border-color: color-mix(in srgb, var(--accent-text) 28%, var(--border)); }
.btn:hover { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-text) 45%, var(--border)); }
.btn.primary { color: var(--accent-text); font-weight: 700; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { background: var(--hover); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn.sm { border-radius: var(--pill); padding: 5px 14px; }
.btn.wa { border-radius: var(--pill); }
:root[data-theme="dark"] .btn:not(.primary):not(.ghost):not(.wa) { border-color: var(--border-strong); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.primary):not(.ghost):not(.wa) { border-color: var(--border-strong); } }
.icon-btn { border-radius: 50%; }
/* Chips y filtros: el activo se rellena (como las pestañas de Wise). */
.chip { border-radius: var(--pill); }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.chip.on .cnt { background: var(--accent-text); color: var(--accent); }
.badge, .nav-count, .rol-badge, .nov-num { border-radius: var(--pill); }
/* Pestañas: control segmentado (píldora contenedora; la activa rellena). Se desliza de lado si no cabe. */
.tabs { display: flex; flex-wrap: nowrap; gap: 4px; width: max-content; max-width: 100%; padding: 4px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface-3); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; min-height: 36px; padding: 7px 16px; border: 0; border-radius: var(--pill); color: var(--text-2); font-weight: 600; white-space: nowrap; }
.tabs button.on { background: var(--accent); color: var(--accent-text); border: 0; }
.tabs button:hover:not(.on) { background: var(--hover); color: var(--text); }
/* Gasto / Ingreso / Transferencia: misma píldora segmentada (cada tipo conserva su color, que dice algo). */
.seg { border-radius: var(--pill); background: var(--surface-3); }
.seg button { border-radius: var(--pill); font-weight: 600; }
/* Campos: 10 px, borde gris; al enfocar, borde bosque sin halo difuso (pero bien visible). */
input, select, textarea { border-radius: var(--radius-sm); border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: var(--accent-fg); box-shadow: 0 0 0 1px var(--accent-fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input:focus, :root:not([data-theme="light"]) select:focus, :root:not([data-theme="light"]) textarea:focus { border-color: var(--accent-fg); box-shadow: 0 0 0 1px var(--accent-fg); } }
.money-in .mon-sel { border-radius: var(--radius-sm); }
/* Menú lateral: el activo en píldora rellena. */
.nav a, .side-theme { border-radius: var(--pill); }
.nav a.on { color: var(--accent-text); font-weight: 700; }

/* ---------- 5. Superficies: Patrimonio = la «tarjeta oscura» de Wise ---------- */
.kpis.bento .hero { background: var(--hero-bg); border-color: var(--hero-bg); color: var(--hero-fg); border-radius: var(--radius-lg); }
.kpis.bento .hero:hover { background: color-mix(in srgb, var(--hero-bg) 88%, #fff); }
.kpis.bento .hero .lbl, .kpis.bento .hero .sub { color: var(--hero-sub); }
.kpis.bento .hero .val { color: var(--hero-num); font-size: 52px; font-weight: 900; letter-spacing: -.045em; line-height: .95; }
@media (max-width: 900px) { .kpis.bento .hero .val { font-size: 44px; } }
/* El resumen de Cuentas usa la misma tarjeta verde bosque que Inicio. */
.acc-hero .hero { background: var(--hero-bg); border-color: var(--hero-bg); color: var(--hero-fg); border-radius: var(--radius-lg); }
.acc-hero .hero .lbl, .acc-hero .hero .sub { color: var(--hero-sub); }
.acc-hero .hero .val { color: var(--hero-num); font-weight: 900; letter-spacing: -.045em; font-size: clamp(26px, 2.9vw, 40px); white-space: nowrap; }
/* Avisos y destacados: verde muy pálido. */
.info-card { background: var(--accent-soft); border-color: transparent; }
.ay-hero { border-radius: var(--radius-lg); }

/* ---------- 6. Plano: bordes finos; sombra solo en ventanas y menús ---------- */
.card, .kpi { box-shadow: none; }
.card { border-radius: var(--radius); }
.kpi { border-radius: var(--radius); }
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
.modal .foot .btn { border-radius: var(--pill); }

/* ---------- 7. Insignias de moneda (círculos, como las banderas de Wise) ---------- */
.mon-ic { display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(14, 15, 12, .12); vertical-align: -4px; margin-right: 6px; }
.mon-ic.sm { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.mon-VES { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='8' fill='%23FFCC00'/%3E%3Crect y='8' width='24' height='8' fill='%2300247D'/%3E%3Crect y='16' width='24' height='8' fill='%23CF142B'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='6.5' cy='13.2' r='.95'/%3E%3Ccircle cx='8.8' cy='11' r='.95'/%3E%3Ccircle cx='12' cy='10.2' r='.95'/%3E%3Ccircle cx='15.2' cy='11' r='.95'/%3E%3Ccircle cx='17.5' cy='13.2' r='.95'/%3E%3C/g%3E%3C/svg%3E"); }
.mon-USD { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23fff'/%3E%3Cg fill='%23B22234'%3E%3Crect width='24' height='2'/%3E%3Crect y='4' width='24' height='2'/%3E%3Crect y='8' width='24' height='2'/%3E%3Crect y='12' width='24' height='2'/%3E%3Crect y='16' width='24' height='2'/%3E%3Crect y='20' width='24' height='2'/%3E%3C/g%3E%3Crect width='12' height='12' fill='%233C3B6E'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='3' cy='3' r='.85'/%3E%3Ccircle cx='7' cy='3' r='.85'/%3E%3Ccircle cx='5' cy='6' r='.85'/%3E%3Ccircle cx='9' cy='6' r='.85'/%3E%3Ccircle cx='3' cy='9' r='.85'/%3E%3Ccircle cx='7' cy='9' r='.85'/%3E%3C/g%3E%3C/svg%3E"); }
.mon-USDT { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%2326A17B'/%3E%3Cg fill='%23fff'%3E%3Crect x='6.5' y='6' width='11' height='2.6' rx='.4'/%3E%3Crect x='10.7' y='8' width='2.6' height='10.5' rx='.4'/%3E%3C/g%3E%3Cellipse cx='12' cy='11.8' rx='5.8' ry='1.6' fill='none' stroke='%23fff' stroke-width='1.1'/%3E%3C/svg%3E"); }
.mon-EUR { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect width='24' height='24' fill='%23003399'/%3E%3Cg fill='%23FFCC00'%3E%3Ccircle cx='18.5' cy='12' r='.95'/%3E%3Ccircle cx='17.63' cy='15.25' r='.95'/%3E%3Ccircle cx='15.25' cy='17.63' r='.95'/%3E%3Ccircle cx='12' cy='18.5' r='.95'/%3E%3Ccircle cx='8.75' cy='17.63' r='.95'/%3E%3Ccircle cx='6.37' cy='15.25' r='.95'/%3E%3Ccircle cx='5.5' cy='12' r='.95'/%3E%3Ccircle cx='6.37' cy='8.75' r='.95'/%3E%3Ccircle cx='8.75' cy='6.37' r='.95'/%3E%3Ccircle cx='12' cy='5.5' r='.95'/%3E%3Ccircle cx='15.25' cy='6.37' r='.95'/%3E%3Ccircle cx='17.63' cy='8.75' r='.95'/%3E%3C/g%3E%3C/svg%3E"); }
/* En la tarjeta de cada cuenta: la moneda va pegada al ícono del tipo de cuenta (abajo a la derecha). */
.acc-ic { position: relative; }
.mon-ic.sobre { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; margin: 0; box-shadow: 0 0 0 2px var(--surface); }
.monto-mon { display: inline-flex; align-items: flex-start; justify-content: flex-end; gap: 0; }
.monto-mon > .mon-ic { margin-top: 2px; }
.kpi .lbl .mon-ic { margin-right: 2px; }
.prest-monto b { display: inline-flex; align-items: center; justify-content: flex-end; }

/* ---------- 9. Móvil: barra de pestañas con píldoras ---------- */
@media (max-width: 900px) {
  .tabbar a, .tabbar button { font-weight: 600; }
  /* La pestaña activa lleva su ícono dentro de una píldora verde pálida. */
  .tabbar a i, .tabbar button:not(.tab-nuevo) i { display: grid; place-items: center; width: 54px; height: 30px; border-radius: var(--pill); transition: background .15s var(--ease); }
  .tabbar .on { color: var(--text); }
  .tab-nuevo:focus-visible { outline: none; }
  .tab-nuevo:focus-visible .plus { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
  .tabbar .on i { transform: none; background: var(--accent-soft); color: var(--accent-fg); }
  /* El «+» es una píldora verde, sin sombra (plano, como en Wise). */
  .tab-nuevo .plus { width: 60px; height: 42px; margin-top: -6px; border-radius: var(--pill); box-shadow: none; color: var(--forest); }
  .tab-nuevo .plus i { font-size: 26px; }
  /* Hojas: esquinas grandes arriba, asa más visible, botones de píldora. */
  .modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .modal::before { width: 42px; background: var(--muted); opacity: .35; }
  .mas-lista { border-radius: var(--radius); }
  .mas-ic { border-radius: var(--pill); }
  /* Montos de las tarjetas chicas en una sola línea. */
  .kpi:not(.hero) .val { font-size: 21px; letter-spacing: -.03em; }
}

/* Lista de movimientos por tandas. */
.mas-movs { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 10px; }

/* ---------- 2.2 · revisión de reglas, grupo 3: teléfono ---------- */
@media (max-width: 900px) {
  /* Al saltar a un campo o a una sección, que no quede debajo de la barra de arriba (con muesca) ni de las pestañas. */
  html, main { scroll-padding-top: calc(64px + env(safe-area-inset-top)); scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media (pointer: coarse) {
  /* Botones del tamaño del dedo (antes había de 28–32 px en Tasas, PDF y chips). */
  .icon-btn, .t-tasas .icon-btn, .t-contratos td:nth-child(8) .icon-btn, .t-recibos td:nth-child(7) .icon-btn { min-width: 40px; min-height: 40px; }
  .btn.sm { min-height: 38px; }
  .chip { min-height: 36px; }
  .nav a:active, .usr2:active { background: var(--hover); }
  .tabbar a:active i, .tabbar button:not(.tab-nuevo):active i { background: var(--hover); }
}

/* ---------- 2.4 · revisión de reglas, grupo 4: foco visible para teclado ---------- */
/* Buscadores (Ayuda, Consultas, Usuarios): el anillo va en la cápsula completa. */
.ay-buscar:focus-within { border-color: var(--accent-fg); box-shadow: 0 0 0 2px var(--accent-fg); }
/* Tarjetas elegibles (perfil, roles) y botones que contienen un campo de archivo. */
.bv-perfil:has(input:focus-visible), .fi-rol:has(input:focus-visible), label.btn:has(input:focus-visible) { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
/* Campos: anillo de 2 px (antes 1 px). */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 2px var(--accent-fg); }
.ay-buscar input:focus { box-shadow: none; }
/* Filas y tarjetas que se abren con Enter. */
tr.click:focus-visible, .kpi[tabindex]:focus-visible, .cli-card:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: -2px; }

/* ---------- 2.5 · arreglos vistos por el usuario ---------- */
/* Presupuestos «Te pasaste este mes»: rojo profundo con la cifra en blanco (antes salía verde sobre rojo claro). */
.kpis.bento .hero.bad, .kpis.bento .hero.bad:hover { background: #a3161e; border-color: #a3161e; color: #fff; }
.kpis.bento .hero.bad .val { color: #fff; }
.kpis.bento .hero.bad .lbl, .kpis.bento .hero.bad .sub, .kpis.bento .hero.bad .hint { color: rgba(255, 255, 255, .82); }
.kpis.bento .hero.bad .hero-bar { background: rgba(255, 255, 255, .25); }
.kpis.bento .hero.bad .hero-bar i { background: #fff; }
/* Botón «Registrar movimiento» del menú: cabe completo (la tecla N queda en el aviso al pasar el ratón). */
.nav .quick { padding: 9px 12px; font-size: 14px; gap: 6px; }
.nav .quick kbd { display: none; }
/* Barra de presupuesto sobre la tarjeta verde bosque: pista clara, avance verde, rayita del mes en blanco. */
.kpis.bento .hero .hero-bar { background: rgba(255, 255, 255, .18); }
.kpis.bento .hero .hero-bar i { background: var(--hero-num); }
.kpis.bento .hero .hero-bar b { background: #fff; }
.kpis.bento .hero.bad .hero-bar i { background: #fff; }

/* ---------- 2.5 · revisión de reglas, grupo 5: detalles ---------- */
/* Colores de los roles legibles también en modo claro (antes eran los del oscuro: violeta, celeste y amarillo pálidos). */
:root { --rol-admin: #5b3fd6; --rol-soporte: #0b6a9e; --rol-prop: #8a5a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rol-admin: #a993ff; --rol-soporte: #5cc3f5; --rol-prop: #f5b400; } }
:root[data-theme="dark"] { --rol-admin: #a993ff; --rol-soporte: #5cc3f5; --rol-prop: #f5b400; }
.avatar.admin, .rol-badge.admin { color: var(--rol-admin); }
.avatar.soporte, .rol-badge.soporte { color: var(--rol-soporte); }
.rol-badge.prop { color: var(--rol-prop); }
/* Títulos: se reparten parejo en dos líneas y una palabra larga (p. ej. el asunto de un ticket) no se sale de la pantalla. */
.head h1, .modal h2, .sec-title, .brand-panel .lema, .box h2 { text-wrap: balance; overflow-wrap: anywhere; }
.head { min-width: 0; }
.head > div, .head > h1 { min-width: 0; }
/* Ficha de usuario: nombre y correo largos se ajustan. */
.fi-cab > * { min-width: 0; }
.fi-cab h2, .fi-cab .hint { overflow-wrap: anywhere; }
/* Cifras que se comparan en columnas, con números del mismo ancho. */
.goal-meta, .money-in input, .budget-t .pres, .chart text { font-variant-numeric: tabular-nums; }
/* Foco de campos en modo oscuro: también 2 px. */
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { box-shadow: 0 0 0 2px var(--accent-fg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input:focus, :root:not([data-theme="light"]) select:focus, :root:not([data-theme="light"]) textarea:focus { box-shadow: 0 0 0 2px var(--accent-fg); } }
:root .ay-buscar input:focus { box-shadow: none; }
/* Modal de escritorio: el desplazamiento no se pasa a la página de atrás. */
.modal { overscroll-behavior: contain; }

/* ---------- 2.6 · recorrido visual (playwright-cli): contraste ---------- */
/* Tarjetas oscuras grandes: los textos internos usaban el color pensado para la tarjeta verde clara de antes
   (Reportes «Reserva ISLR…», Tasas «vs. día anterior» y «Mañana» quedaban invisibles). */
.kpis.bento .hero, .acc-hero .hero { --accent-text: var(--hero-fg); }
.kpis.bento .hero.bad { --accent-text: #fff; }
/* Contadores rojos (menú, pestañas): rojo intenso con número blanco también en modo oscuro. */
.nav-count, .tab-badge { background: #cb272f; color: #fff; }
.nav a.on .nav-count { background: var(--forest); color: #fff; }
/* Número dentro del chip elegido. */
.chip.on .hint { color: inherit; opacity: .8; }
/* Teléfono: casillas del tamaño del dedo. */
@media (pointer: coarse) { input[type=checkbox], input[type=radio] { width: 20px; height: 20px; } }
@media (pointer: coarse) { .btn.sm.sm.sm { min-height: 36px; } }

/* ---------- rediseño 2.7 (taste-skill + redesign-skill, elegido por el usuario) ---------- */
/* Tarjetas sin borde: se separan del fondo solo por el tono, como en Wise. */
.card, .kpi, .acc-card, .filters, .cli-card { border-color: transparent; }
/* Sin mayúsculas chicas espaciadas: grupos del menú, encabezados de tablas y títulos de sección en texto normal. */
.nav-group, .table th, .ay-titulo, .fi-h, .mas-grupo { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; }
.nav-group { padding-top: 16px; }
/* Gastos por categoría / ingresos por cliente: el nombre completo arriba y la barra debajo, a todo el ancho. */
.bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n m" "b b"; row-gap: 5px; }
.bar-row > span { grid-area: n; white-space: normal; overflow: visible; }
.bar-row > .bar { grid-area: b; }
.bar-row > b { grid-area: m; }
/* Tasas en Inicio: «+14,9 %» no se parte. */
.tasas-mini b { white-space: nowrap; font-size: clamp(17px, 1.6vw, 22px); }
/* Patrimonio: cambio vs. el mes pasado y en qué monedas está. */
.hero-cambio { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 5px 12px; border-radius: var(--pill); background: rgba(255, 255, 255, .1); font-size: 14px; color: var(--hero-sub); align-self: flex-start; }
.hero-cambio b { color: #fff; font-weight: 700; }
.hero-cambio { flex-wrap: wrap; border-radius: 14px; max-width: 100%; }
.hero-cambio b { white-space: nowrap; }
.hero-cambio.baja i { color: #ffb4b4; }
.hero-cambio.sube i { color: var(--hero-num); }
.hero-mezcla { margin-top: 16px; }
.hm-barra { display: flex; gap: 3px; height: 8px; border-radius: var(--pill); overflow: hidden; }
.hm-barra i { display: block; min-width: 4px; }
.hm-ley { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--hero-sub); }
.hm-ley span { display: inline-flex; align-items: center; gap: 6px; }
.hm-ley i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* Cuentas: sin la franja de color de arriba (el color va en el ícono), sin espacio vacío al fondo y botones discretos. */
.acc-card::before { display: none; }
.acc-card .acc-ic { background: color-mix(in srgb, var(--c, var(--accent)) 22%, var(--surface)); color: var(--text); }
.acc-grid { align-items: start; }
.acc-card .acc-actions .btn.sm:not(.more) { border-color: transparent; background: var(--surface-3); }
.acc-card .acc-actions .btn.sm:not(.more):hover { background: var(--accent-soft); }
/* Pestañas que no caben (computadora): desvanecido al borde derecho. */
.tabs.mas-der { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent); }
/* Lo que solo existe en un tamaño. */
.solo-tel { display: none !important; }
.filtros-fila { display: contents; }
@media (max-width: 900px) {
  .solo-pc { display: none !important; }
  .solo-tel { display: inline-grid !important; }
  /* Cabecera: el «⋯» arriba a la derecha, junto al título. */
  .page > .head { position: relative; }
  .page > .head:has(.mas-acc) > h1 { padding-right: 52px; }
  .mas-acc { position: absolute; top: 0; right: 0; min-width: 44px; min-height: 44px; background: var(--surface); border-radius: var(--pill); }
  /* Inicio: el aviso de recurrentes en una sola línea. */
  .rec-aviso > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .rec-aviso { padding-top: 12px; padding-bottom: 12px; }
  /* Movimientos: filtros en una fila deslizable de píldoras; mes arriba y buscador abajo. */
  .filters { padding: 10px 0; gap: 10px; }
  .filters > .month-nav { flex: 1 1 100%; padding: 0 10px; }
  .filters > .search { flex: 1 1 100%; padding: 0 10px; }
  .filtros-fila { display: flex; gap: 8px; overflow-x: auto; flex: 1 1 100%; padding: 0 10px; scrollbar-width: none; }
  .filtros-fila::-webkit-scrollbar { display: none; }
  .filtros-fila select { flex: none; width: auto !important; max-width: 78vw; min-height: 40px; border-radius: var(--pill); padding: 6px 34px 6px 14px; font-weight: 600; }
  /* Totales en una franja: un monto por línea, alineados a la derecha. */
  #tot { display: flex; flex-direction: column; gap: 0; background: var(--surface); border-radius: var(--radius); padding: 4px 16px; }
  #tot .kpi { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; background: none; border: 0; padding: 10px 0; min-height: 0; }
  #tot .kpi + .kpi { border-top: 1px solid var(--border); }
  #tot .kpi .lbl { margin: 0; }
  #tot .kpi .val { font-size: 19px; margin: 0; }
  #tot .kpi .sub { flex-basis: 100%; margin: 0; }
  /* Configuración: todas las pestañas a la vista (en varias líneas), sin nada escondido a la derecha. */
  .tabs { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none !important; mask-image: none !important; border-radius: 22px; gap: 4px; padding: 6px; }
  #tot .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; border-radius: 0; }
  #tot .kpi .sub { grid-column: 1 / -1; }
}