*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{background:var(--bg)}
body{font-family:var(--font);background:transparent;color:var(--text);
-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45;overscroll-behavior-y:none}
/* El fondo no es blanco: es el verde de la casa deshaciéndose hacia abajo, con
dos destellos arriba del color de la pantalla en la que estás. Va en una capa
fija detrás de todo para que no se arrastre al hacer scroll. */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(1000px 520px at 6% -12%,
color-mix(in srgb,var(--screen) var(--wash-1),transparent), transparent 64%),
radial-gradient(820px 460px at 110% -6%,
color-mix(in srgb,var(--screen) var(--wash-2),transparent), transparent 66%),
linear-gradient(180deg,
color-mix(in srgb,var(--screen) var(--wash-3),var(--bg-base)) 0%,
color-mix(in srgb,var(--screen) var(--wash-4),var(--bg-base)) 38%,
var(--bg-base) 78%);
transition:background .45s ease}
/* ── un color por pantalla ───────────────────────────────────────────────
El router ya escribe body[data-view]. Cada vista se queda con su tinte: el
destello del fondo, los títulos de grupo y los detalles pequeños lo siguen,
así que se reconoce dónde estás antes de leer el título. */
body[data-view="dashboard"] {--screen:var(--brand-vivid);--screen-ink:var(--brand)}
body[data-view="movements"] {--screen:#0EA5E9;--screen-ink:#0369A1}
body[data-view="accounts"],
body[data-view="account"] {--screen:#14B8A6;--screen-ink:#0F766E}
body[data-view="cards"] {--screen:#8B5CF6;--screen-ink:#6D28D9}
body[data-view="budgets"] {--screen:#F59E0B;--screen-ink:#B45309}
body[data-view="calendar"] {--screen:#F472B6;--screen-ink:#BE185D}
body[data-view="goals"] {--screen:#06B6D4;--screen-ink:#0E7490}
body[data-view="reports"] {--screen:#6366F1;--screen-ink:#4338CA}
body[data-view="businesses"]{--screen:#F97316;--screen-ink:#C2410C}
body[data-view="more"] {--screen:#64748B;--screen-ink:#334155}
[data-theme="dark"] body[data-view]{--screen-ink:var(--brand-ink)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:var(--brand);text-decoration:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
#app{display:flex;min-height:100%}
.sidebar{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.view{padding:12px 16px 120px;max-width:1180px;width:100%;margin:0 auto}
/* La barra de arriba deja ver el fondo: si la pinto de un color plano, corta el
degradado justo donde más se nota. Se difumina en vez de taparlo. */
.topbar{position:sticky;top:0;z-index:20;padding:14px 16px 8px;
display:flex;align-items:center;gap:10px;
background:color-mix(in srgb,var(--bg) 80%,transparent);
backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.topbar.brand{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.topbar h1{font-size:19px;margin:0;font-weight:700;letter-spacing:-.02em}
.topbar .sub{font-size:12px;color:var(--muted);margin-top:1px}
.topbar .spacer{flex:1}
.iconbtn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:var(--surface);box-shadow:var(--shadow);font-size:16px}
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.card h3{margin:0 0 12px;font-size:14px;font-weight:700;letter-spacing:-.01em}
.card .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.card .hd h3{margin:0}
.link{font-size:12.5px;color:var(--brand);font-weight:600}
.hero{background:var(--band);color:#fff;border-radius:20px;padding:20px;margin-bottom:14px}
.hero .lbl{font-size:12px;opacity:.85;font-weight:600;letter-spacing:.02em}
.hero .big{font-size:34px;font-weight:800;letter-spacing:-.03em;margin:4px 0 2px}
.hero .row{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.hero .row div{font-size:12px;opacity:.9}
.hero .row b{display:block;font-size:15px;font-weight:700;opacity:1}
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.tile{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 14px;min-width:0}
.tile .v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .t{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;
display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden}
.tile .v{font-size:19px;font-weight:750;margin-top:6px;letter-spacing:-.02em}
.tile .s{font-size:11.5px;color:var(--muted);margin-top:2px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{text-align:center}
.kpi .t{font-size:11px;color:var(--muted);font-weight:600}
.kpi .v{font-size:16px;font-weight:750;margin-top:3px}
.pos{color:var(--income)}
.neg{color:var(--expense)}
.wrn{color:var(--warn)}
.mut{color:var(--muted)}
.row-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);width:100%;text-align:left}
.row-item:last-child{border-bottom:0}
.row-item .ico{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:17px;flex:0 0 38px}
.row-item .mid{flex:1;min-width:0}
.row-item .ttl{display:block;font-weight:600;font-size:14px;line-height:1.3;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .sub{display:block;font-size:12px;color:var(--muted);line-height:1.35;margin-top:1px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-item .amt{flex:0 0 auto;max-width:42%;font-weight:700;font-size:14.5px;text-align:right;white-space:nowrap}
.row-item .amt small{display:block;font-weight:500;font-size:11px;color:var(--muted);margin-top:1px}
.row-item .chev{flex:0 0 auto;color:var(--muted);font-size:19px;line-height:1}
.bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 12px;border-radius:99px;background:var(--surface-2);font-size:13px;font-weight:600;white-space:nowrap}
.chip.on{background:var(--brand);color:var(--on-brand)}
.pill{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--muted)}
.empty{text-align:center;padding:34px 16px;color:var(--muted)}
.empty .e{font-size:34px}
.empty p{margin:8px 0 14px;font-size:13.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--touch);
padding:0 18px;border-radius:14px;font-weight:700;font-size:15px;background:var(--surface-2);color:var(--text)}
.btn.pri{background:var(--brand);color:var(--on-brand)}
.btn.dgr{background:var(--expense);color:#fff}
.btn.gho{background:transparent;border:1.5px solid var(--line)}
.btn.sm{min-height:38px;font-size:13.5px;padding:0 14px;border-radius:11px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btnrow{display:flex;gap:10px;margin-top:14px}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;
background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:10.5px;font-weight:600;color:var(--muted)}
.tabbar button .e{font-size:19px;line-height:1}
.tabbar button.on{color:var(--brand)}
.tabbar .fab{flex:0 0 62px}
.tabbar .fab i{width:52px;height:52px;border-radius:50%;background:var(--brand);color:#fff;
display:grid;place-items:center;font-size:26px;font-style:normal;box-shadow:0 6px 18px rgba(15,98,254,.4);margin-top:-22px}
.backdrop{position:fixed;inset:0;background:rgba(6,10,20,.5);z-index:40;animation:fade .18s ease}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;background:var(--surface);
border-radius:22px 22px 0 0;max-height:92vh;overflow-y:auto;
padding:8px 18px calc(24px + env(safe-area-inset-bottom));animation:up .24s cubic-bezier(.2,.8,.2,1)}
.sheet .grab{width:40px;height:4px;border-radius:99px;background:var(--line);margin:6px auto 12px}
.sheet h2{font-size:17px;margin:0 0 14px;font-weight:750}
@keyframes up{from{transform:translateY(100%)}
to{transform:translateY(0)}
}
@keyframes fade{from{opacity:0}
to{opacity:1}
}
.f{margin-bottom:13px}
.f label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.f input,.f select,.f textarea{width:100%;min-height:var(--touch);padding:11px 13px;border-radius:13px;
border:1.5px solid var(--line);background:var(--surface-2);outline:none;font-size:15px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--brand);background:var(--surface)}
.f textarea{min-height:74px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.amount-in{font-size:32px;font-weight:800;text-align:center;letter-spacing:-.02em;min-height:64px}
.err{color:var(--expense);font-size:12.5px;font-weight:600;margin:-6px 0 10px}
details.more{margin:4px 0 8px}
details.more>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--brand);padding:8px 0;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
.toast-root{position:fixed;left:0;right:0;bottom:78px;z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:#0B1220;color:#fff;border-radius:14px;padding:11px 15px;
font-size:13.5px;font-weight:600;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;max-width:92vw;animation:up .2s ease}
[data-theme="dark"] .toast{background:#17352A}
.toast button{color:#6EE7B7;font-weight:800;font-size:13px}
body.priv .money{filter:blur(7px)}
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:3px;gap:3px;margin-bottom:12px}
.seg button{flex:1;padding:9px 4px;border-radius:10px;font-size:13px;font-weight:700;color:var(--muted)}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.warnbox{background:rgba(245,158,11,.14);border-radius:12px;padding:11px 13px;font-size:13px;margin-bottom:12px}
/* ---------- pantalla de bloqueo ---------- */
body.locked #app, body.locked .tabbar, body.locked #sheet-root{ display:none }
.lock-screen{
position:fixed;inset:0;z-index:100;background:var(--bg);
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:24px 22px calc(24px + env(safe-area-inset-bottom));text-align:center;overflow-y:auto}
.lock-brand{font-weight:800;font-size:16px;color:var(--brand);margin-bottom:22px;letter-spacing:-.02em}
.lock-screen h2{font-size:21px;font-weight:750;margin:0 0 6px;letter-spacing:-.02em}
.lock-sub{font-size:13.5px;color:var(--muted);margin:0 0 22px;max-width:340px;line-height:1.5}
.lock-wait{font-size:13px;color:var(--warn);font-weight:600;margin:0 0 10px}
.dots{display:flex;gap:14px;margin-bottom:28px}
.dots span{width:13px;height:13px;border-radius:50%;background:var(--surface-2);border:1.5px solid var(--line);transition:.15s}
.dots span.on{background:var(--brand);border-color:var(--brand);transform:scale(1.12)}
.dots.shake{animation:shake .32s}
@keyframes shake{0%,100%{transform:translateX(0)}
25%{transform:translateX(-8px)}
75%{transform:translateX(8px)}
}
.keypad{display:grid;grid-template-columns:repeat(3,74px);gap:14px;justify-content:center}
.keypad button{
height:68px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow);
font-size:24px;font-weight:600;color:var(--text);transition:transform .08s}
.keypad button:active{transform:scale(.93);background:var(--brand-soft)}
.keypad button.ghost{background:transparent;box-shadow:none;font-size:18px;color:var(--muted)}
.lock-link{margin-top:22px;font-size:13.5px;font-weight:600;color:var(--brand)}
.lock-note{font-size:11.5px;color:var(--muted);max-width:330px;margin:18px 0 0;line-height:1.5}
@media (max-height:640px){
.keypad{grid-template-columns:repeat(3,64px);gap:10px}
.keypad button{height:58px;font-size:21px}
.lock-note{display:none}
}
/* ---------- calendario ---------- */
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.cal-head span{text-align:center;font-size:11px;font-weight:700;color:var(--muted)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-cell{aspect-ratio:1;border-radius:11px;background:var(--surface-2);display:flex;
flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:2px;min-height:38px}
.cal-cell.empty{background:transparent}
.cal-cell .n{font-size:12.5px;font-weight:600;line-height:1}
.cal-cell.today{background:var(--brand);color:#fff}
.cal-cell.today .n{font-weight:800}
.cal-cell.has{box-shadow:inset 0 0 0 1.5px var(--line)}
.cal-cell .dots{display:flex;gap:2px;height:6px;align-items:center}
.cal-cell .dots i{width:5px;height:5px;border-radius:50%;display:block}
/* ---------- selector de categorías en dos pasos ---------- */
.cat-picker .cat-parents{max-height:112px;overflow-y:auto}
.cat-picker .cat-parent{background:var(--surface-2)}
.cat-picker .cat-parent.on{background:var(--brand);color:#fff}
.cat-picker .cat-children{min-height:40px;padding:8px;border-radius:13px;background:var(--surface-2)}
.cat-picker .cat-child{background:var(--surface)}
.cat-picker .cat-child.on{background:var(--brand);color:#fff}
/* ═══════════ Fase 11 · sistema visual ═══════════ */
.ic{display:block;flex:0 0 auto}
.ic-txt{display:inline-block}
.ic-badge{border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.row-item .ico{background:transparent}
/* Escala tipográfica: menos tamaños, jerarquía más clara */
.card h3{font-size:13.5px;letter-spacing:-.005em;color:var(--text)}
.card .hd{margin-bottom:10px}
.section-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* El gasto deja de ser rojo por defecto: el rojo se reserva para lo urgente */
.amt-out{color:var(--text)}
.row-item .amt{font-weight:650}
/* Chips desplazables sin corte brusco */
.chips.scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
-webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
mask-image:linear-gradient(to right,#000 88%,transparent);padding-right:26px}
.chips.scroll::-webkit-scrollbar{display:none}
/* Lista de movimientos: una sola tarjeta con separadores discretos */
.day-sep{display:flex;align-items:center;gap:10px;padding:14px 0 6px;font-size:11.5px;
font-weight:700;color:var(--muted);letter-spacing:.03em}
.day-sep::after{content:'';flex:1;height:1px;background:var(--line)}
.day-sep:first-child{padding-top:2px}
/* Tiles más compactos: caben cinco sin comerse la pantalla */
.tile{padding:11px 13px}
.tile .t{font-size:10.5px;gap:6px;margin-bottom:2px}
.tile .v{font-size:17px;margin-top:3px}
.tile .s{font-size:11px}
/* Encabezado: sin subtítulo redundante */
.topbar h1{font-size:22px;letter-spacing:-.025em}
.topbar .sub{font-size:12px}
/* Barra inferior con iconos de línea */
.tabbar button{gap:3px;font-size:10px;font-weight:600}
.tabbar button .ic{stroke-width:1.8}
.tabbar button.on .ic{stroke-width:2.2}
/* Tarjetas de crédito: jerarquía de datos */
.kv{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0;font-size:13px}
.kv .k{color:var(--muted)}
.kv .v{font-weight:650}
.kv.main{padding:2px 0 8px}
.kv.main .v{font-size:21px;font-weight:800;letter-spacing:-.02em}
.badge-due{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:99px;
font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--muted)}
.badge-due.soon{background:rgba(245,158,11,.16);color:var(--warn)}
.badge-due.urgent{background:rgba(220,38,38,.14);color:var(--expense)}
/* Texto de ayuda: presente pero sin robar protagonismo */
.hint{font-size:12px;color:var(--muted);line-height:1.5}
.lock-brand{display:flex;align-items:center;justify-content:center;gap:8px}
.sidebar button{align-items:center}
.sidebar .brand{display:flex;align-items:center;gap:8px;color:var(--brand)}
.chip .ic{display:inline-block;vertical-align:-3px;margin-right:2px}
.btn .ic{display:inline-block}
/* Hero más contenido: la cifra manda, el resto acompaña */
.hero{padding:18px 20px 16px;border-radius:18px}
.hero .lbl{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;opacity:.8}
.hero .big{font-size:31px;margin:2px 0 0}
.hero .row{gap:16px;margin-top:12px}
.hero .row div{font-size:11.5px;opacity:.8}
.hero .row b{font-size:14px}
/* Estados vacíos con el icono en su sitio */
.empty .e{margin-bottom:2px}
.empty p{max-width:280px;margin-left:auto;margin-right:auto}
/* Tema oscuro: menos contraste bruto en superficies y bordes */
[data-theme="dark"] .card{border:1px solid rgba(255,255,255,.04)}
[data-theme="dark"] .chip{background:var(--surface-2)}
[data-theme="dark"] .keypad button{background:var(--surface-2)}
/* Fecha: campo compacto con atajos, no una barra de lado a lado */
.date-row{display:flex;gap:8px;align-items:center}
.date-row input[type="date"]{flex:0 1 auto;width:auto;min-width:150px;text-align:left}
.date-row .chip{flex:0 0 auto}
.date-row .chip.on{background:var(--brand);color:var(--on-brand)}
/* ---------- portada de entrada ---------- */
.lock-screen.welcome{padding:0;justify-content:flex-start;display:flex;flex-direction:column;background:var(--bg)}
.wl-top{
width:100%;background:var(--band);color:#fff;
border-radius:0 0 30px 30px;padding:calc(22px + env(safe-area-inset-top)) 24px 44px;
text-align:center;flex:0 0 auto}
.wl-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;opacity:.95;margin-bottom:34px}
.wl-hi{font-size:17px;font-weight:600;opacity:.9}
.wl-name{font-size:36px;font-weight:850;letter-spacing:-.03em;margin-top:2px;line-height:1.1;
word-break:break-word}
.wl-body{flex:1;display:flex;flex-direction:column;justify-content:center;width:100%;
max-width:460px;margin:0 auto;padding:26px 22px calc(26px + env(safe-area-inset-bottom))}
.wl-q{font-size:16.5px;font-weight:750;text-align:center;margin:0 0 20px;color:var(--text)}
.wl-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.wl-body .btn.pri{height:58px;border-radius:16px;font-size:16.5px}
.wl-body .lock-link{margin-top:18px;text-decoration:underline}
.lock-back{position:absolute;top:calc(16px + env(safe-area-inset-top));left:16px;
display:flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;color:var(--muted)}
.lock-back .ic{transform:rotate(180deg)}
[data-theme="dark"] .wl-ic{background:var(--surface-2)}
@media (min-width:768px){
.wl-top{border-radius:0 0 40px 40px;padding-bottom:52px}
.wl-name{font-size:42px}
}
/* ═══════════ v2.3 · cabecera de marca, operaciones y menú lateral ═══════════ */
/* La cabecera del inicio se funde con la banda azul */
.topbar{gap:6px;padding:calc(10px + env(safe-area-inset-top)) 12px 8px}
.topbar .tb-title h1{font-size:19px}
.topbar.brand{background:transparent;color:#fff}
/* La barra superior toma el color con el que arranca la banda: se ven como una sola pieza */
.topbar.brand{background:var(--band-top)}
.topbar.brand h1,.topbar.brand .sub{color:#fff}
.topbar.brand .sub{opacity:.75}
.iconbtn.ghost{background:transparent;box-shadow:none;color:inherit}
.topbar.brand .iconbtn.ghost{color:#fff}
.menu-btn{margin-right:2px}
body[data-view="dashboard"] .topbar{position:static}
body[data-view="dashboard"] .view{padding-top:0}
.headband{
background:var(--band);color:#fff;margin:0 -16px 16px;padding:4px 20px 20px;
border-radius:0 0 26px 26px;box-shadow:0 10px 26px rgba(11,44,107,.18)}
.headband .lbl{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.headband .big{font-size:33px;font-weight:850;letter-spacing:-.03em;margin:3px 0 0}
.headband .row{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
.headband .row div{font-size:11px;opacity:.75;font-weight:600}
.headband .row b{display:block;font-size:14px;opacity:1;font-weight:750;margin-top:1px}
.hb-ops-t{font-size:12.5px;font-weight:700;opacity:.8;margin:20px 0 10px}
.ops{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:10px}
.ops button{display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff}
.op-ic{width:100%;aspect-ratio:1;border-radius:15px;background:rgba(255,255,255,.14);
display:grid;place-items:center;transition:transform .08s}
.ops button:active .op-ic{transform:scale(.94);background:rgba(255,255,255,.24)}
.op-lb{font-size:10.5px;line-height:1.25;text-align:center;font-weight:600;opacity:.9}
@media (min-width:768px){
.headband{margin:0 -24px 18px;padding:6px 28px 24px;border-radius:0 0 32px 32px}
.headband .big{font-size:38px}
.ops{max-width:520px}
}
/* Menú lateral */
#drawer{position:fixed;inset:0;z-index:70;pointer-events:none}
body.menu-open #drawer{pointer-events:auto}
.dw-scrim{position:absolute;inset:0;background:rgba(6,12,26,.5);opacity:0;transition:opacity .22s}
body.menu-open .dw-scrim{opacity:1}
.dw-panel{position:absolute;top:0;left:0;bottom:0;width:88%;max-width:340px;background:var(--surface);
display:flex;flex-direction:column;transform:translateX(-100%);transition:transform .24s cubic-bezier(.2,.8,.2,1);
box-shadow:8px 0 32px rgba(6,12,26,.22)}
body.menu-open .dw-panel{transform:translateX(0)}
.dw-head{background:var(--band);color:#fff;padding:calc(18px + env(safe-area-inset-top)) 20px 20px;position:relative}
.dw-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:12px;width:34px;height:34px;
border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center}
.dw-close .ic{transform:rotate(180deg)}
.dw-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:16px}
.dw-user{font-size:13px;opacity:.8;margin-top:10px}
.dw-body{flex:1;overflow-y:auto;padding:6px 0 calc(20px + env(safe-area-inset-bottom))}
.dw-group{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
padding:16px 20px 6px;background:var(--surface-2);margin-top:6px}
.dw-item{display:flex;align-items:center;gap:12px;width:100%;padding:13px 18px;text-align:left;
border-bottom:1px solid var(--line)}
.dw-item:active{background:var(--surface-2)}
.dw-ic{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand);
display:grid;place-items:center;flex:0 0 34px}
.dw-txt{flex:1;min-width:0}
.dw-txt b{display:block;font-size:14.5px;font-weight:620}
.dw-txt small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.dw-ch{color:var(--muted);display:flex}
.dw-foot{font-size:11px;color:var(--muted);text-align:center;padding:18px 20px 0;line-height:1.5}
@media (min-width:1024px){ .dw-panel{max-width:380px}
}
/* ═══════════ v2.4 · cabecera con vida y operaciones en relieve ═══════════ */
.headband{padding:6px 20px 22px}
.hb-top{display:flex;align-items:flex-start;gap:12px}
.hb-net{flex:1;min-width:0}
.headband .lbl{opacity:.7}
.headband .big{font-size:clamp(27px,8.4vw,36px);line-height:1.05;margin-top:2px}
.hb-chip{display:inline-flex;align-items:center;gap:5px;margin-top:10px;padding:5px 11px;
border-radius:99px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.16);line-height:1.35;text-align:left}
.hb-chip.up{color:#8BF3C6}
.hb-chip.up .ic{transform:rotate(0)}
.hb-chip.down{color:#FFB3B3}
.hb-art{flex:0 0 118px;margin-top:6px;opacity:.95}
@media (max-width:359px){ .hb-art{display:none}
}
.hb-stats{display:flex;gap:0;margin-top:16px;border-radius:14px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.hb-stats div,.hb-stats button{flex:1;padding:9px 10px;text-align:center;
border-right:1px solid rgba(255,255,255,.12);background:none;border-top:0;border-left:0;border-bottom:0;color:inherit}
.hb-stats div:last-child,.hb-stats button:last-child{border-right:0}
.hb-stats span{display:block;font-size:10.5px;opacity:.72;font-weight:600;letter-spacing:.03em}
.hb-stats b{display:block;font-size:14px;font-weight:750;margin-top:2px}
.hb-stats b.bien{color:#8BF3C6}
.hb-stats b.mal{color:#FFB3B3}
/* el patrimonio pasa a segunda fila: sigue estando, pero ya no es lo primero */
.hb-net2{display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;
margin-top:9px;padding:10px 13px;border-radius:13px;color:inherit;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.hb-net2 span{font-size:11px;opacity:.72;font-weight:600;text-align:left}
.hb-net2 b{font-size:15px;font-weight:780;white-space:nowrap}
.hb-ops-t{margin:18px 0 11px;font-size:13px;font-weight:700;opacity:.85}
.ops{gap:11px}
.ops button{animation:opIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.op-ic{
position:relative;aspect-ratio:1;border-radius:19px;overflow:hidden;color:var(--acc,#fff);
background:linear-gradient(160deg,rgba(255,255,255,.26),rgba(255,255,255,.06) 60%,rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.22);
box-shadow:0 10px 20px -8px rgba(2,12,40,.75), inset 0 1px 0 rgba(255,255,255,.42),
inset 0 -10px 18px -12px rgba(0,0,0,.5);
transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s}
.op-ic::after{content:'';position:absolute;inset:-40% -60% auto auto;width:120%;height:80%;
background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.30),transparent 62%);pointer-events:none}
.op-ic .ic{filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));position:relative;z-index:1}
.ops button:active .op-ic{transform:translateY(2px) scale(.96);
box-shadow:0 4px 10px -6px rgba(2,12,40,.8), inset 0 1px 0 rgba(255,255,255,.28)}
.op-lb{font-size:11px;opacity:.95;font-weight:650}
@keyframes opIn{from{opacity:0;transform:translateY(12px) scale(.94)}
to{opacity:1;transform:none}
}
.art-line{stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1.5s cubic-bezier(.3,.8,.3,1) .2s forwards}
.art-area{opacity:0;animation:fadeIn .9s ease 1s forwards}
.art-dot{opacity:0;animation:fadeIn .4s ease 1.4s forwards}
.art-ring{fill:none;opacity:0;transform-origin:center;animation:pulse 2.8s ease-out 1.5s infinite}
.art-ring.r2{animation-delay:2.9s}
@keyframes draw{to{stroke-dashoffset:0}
}
@keyframes fadeIn{to{opacity:1}
}
@keyframes pulse{0%{opacity:.55;transform:scale(.5)}
70%{opacity:0;transform:scale(1.9)}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
.ops button,.art-line,.art-area,.art-dot,.art-ring{animation:none!important;
opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
}
/* ═══════════ Efecto cristal (opcional, se activa en Apariencia) ═══════════ */
/* Interruptor con vista previa dentro de la hoja de ajustes */
/* Si el navegador no sabe desenfocar, las superficies se vuelven opacas otra vez */
/* ═══════════ v2.6 · portada con botones reales y barra de burbujas ═══════════ */
/* Escena animada detrás del saludo */
.wl-top{position:relative;overflow:hidden}
.wl-art{position:absolute;inset:0;pointer-events:none}
.wl-art svg{width:100%;height:100%}
.pa-bub{animation:flotar 7s ease-in-out infinite}
.pa-bub.b2{animation-duration:9s;animation-delay:-2s}
.pa-bub.b3{animation-duration:6s;animation-delay:-4s}
.pa-bars line{stroke-dasharray:60;stroke-dashoffset:60;animation:crecer .8s cubic-bezier(.2,.8,.2,1) forwards}
.pa-bars .ba2{animation-delay:.12s}
.pa-bars .ba3{animation-delay:.24s}
.pa-coin{transform-origin:272px 36px;animation:girar 6s ease-in-out infinite}
@keyframes flotar{0%,100%{transform:translateY(0)}
50%{transform:translateY(-9px)}
}
@keyframes crecer{to{stroke-dashoffset:0}
}
@keyframes girar{0%,70%,100%{transform:rotateY(0)}
80%{transform:rotateY(180deg)}
90%{transform:rotateY(360deg)}
}
.wl-logo,.wl-hi,.wl-name{position:relative;z-index:1}
/* Atajos: botones con relieve, no cuadros planos */
.wl-actions button{
display:flex;align-items:center;gap:13px;width:100%;padding:13px 14px;border-radius:17px;
background:var(--surface);border:1px solid var(--line);text-align:left;
box-shadow:0 1px 2px rgba(11,30,80,.05), 0 10px 22px -14px rgba(11,30,80,.55);
animation:opIn .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms);
transition:transform .12s cubic-bezier(.2,.8,.2,1), box-shadow .12s, border-color .12s}
.wl-actions button:active{transform:translateY(2px) scale(.985);border-color:var(--acc);
box-shadow:0 1px 2px rgba(11,30,80,.06)}
.wl-ic{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
color:#fff;background:linear-gradient(155deg,var(--acc),color-mix(in srgb,var(--acc) 62%,#000));
box-shadow:0 6px 14px -6px var(--acc), inset 0 1px 0 rgba(255,255,255,.45)}
.wl-tx{flex:1;min-width:0}
.wl-tx b{display:block;font-size:15px;font-weight:680;color:var(--text)}
.wl-tx small{display:block;font-size:12px;color:var(--muted);margin-top:1px}
.wl-go{color:var(--muted);display:flex}
/* Barra inferior: burbujas flotantes */
.tabbar{background:var(--surface);padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 0;position:relative}
.tb-bubble{
width:46px;height:34px;border-radius:99px;display:grid;place-items:center;position:relative;
color:var(--muted);background:transparent;transition:background .22s, color .22s, transform .22s cubic-bezier(.2,.8,.2,1)}
.tb-lb{font-size:10.5px;font-weight:650;color:var(--muted);transition:color .2s}
.tb.on .tb-bubble{background:var(--brand);color:var(--on-brand);transform:translateY(-3px);
box-shadow:0 8px 16px -6px color-mix(in srgb,var(--brand) 75%,transparent)}
.tb.on .tb-lb{color:var(--brand)}
.tb:active .tb-bubble{transform:scale(.9)}
/* Estallido al entrar en una vista */
.tb.pop .tb-bubble{animation:burbuja .5s cubic-bezier(.2,1.5,.4,1)}
.tb.pop .tb-bubble::after{content:'';position:absolute;inset:0;border-radius:99px;
border:2px solid var(--brand);animation:onda .6s ease-out forwards}
@keyframes burbuja{
0%{transform:translateY(-3px) scale(.6)}
45%{transform:translateY(-6px) scale(1.18)}
70%{transform:translateY(-2px) scale(.94)}
100%{transform:translateY(-3px) scale(1)}
}
@keyframes onda{0%{opacity:.9;transform:scale(1)}
100%{opacity:0;transform:scale(2.1)}
}
@media (prefers-reduced-motion:reduce){
.pa-bub,.pa-coin,.pa-bars line,.wl-actions button,.tb.pop .tb-bubble,.tb.pop .tb-bubble::after{
animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
}
/* La decoración vive detrás de las cifras, nunca encima */
.headband{position:relative;overflow:hidden}
.hb-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.hb-deco svg{width:100%;height:100%}
.headband > *:not(.hb-deco){position:relative;z-index:1}
/* ═══════════ v2.7 · botones flotantes y "+" tipo burbuja ═══════════ */
/* Accesos de la cabecera: relieve marcado para que se lean como pulsables */
.op-ic{
border-radius:20px;
background:linear-gradient(160deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 55%,rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.30);
box-shadow:0 14px 24px -10px rgba(2,10,36,.85),
inset 0 1.5px 0 rgba(255,255,255,.55),
inset 0 -14px 22px -14px rgba(0,0,0,.55)}
.ops button:active .op-ic{transform:translateY(3px) scale(.95);
box-shadow:0 5px 10px -7px rgba(2,10,36,.9), inset 0 1px 0 rgba(255,255,255,.3)}
.op-lb{font-size:11px;line-height:1.3;opacity:.96}
/* Aviso numérico cuando algo reclama atención */
.op-badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
border-radius:99px;background:#E24A4A;color:#fff;font-size:10.5px;font-weight:800;font-style:normal;
display:grid;place-items:center;box-shadow:0 3px 8px -2px rgba(226,74,74,.9);
border:1.5px solid rgba(255,255,255,.55);z-index:2}
/* El "+" como burbuja: halo, brillo y latido lento */
.tabbar .fab i{
position:relative;background:radial-gradient(120% 120% at 30% 22%, #6EE7B7 0%, var(--brand-vivid) 45%, #047857 100%);
box-shadow:0 12px 26px -8px color-mix(in srgb,var(--brand-vivid) 80%,transparent),
0 3px 8px rgba(2,10,36,.28),
inset 0 2px 0 rgba(255,255,255,.45),
inset 0 -10px 16px -10px rgba(0,0,0,.55);
transition:transform .14s cubic-bezier(.2,.9,.3,1.4), box-shadow .14s}
.tabbar .fab i::before{content:'';position:absolute;inset:5px 7px auto 7px;height:38%;border-radius:99px;
background:linear-gradient(180deg,rgba(255,255,255,.45),transparent);pointer-events:none}
.tabbar .fab i::after{content:'';position:absolute;inset:-6px;border-radius:50%;
border:2px solid color-mix(in srgb,var(--brand) 60%,transparent);animation:halo 3.2s ease-out infinite}
.tabbar .fab:active i{transform:scale(.9) translateY(2px)}
@keyframes halo{0%{opacity:.55;transform:scale(.92)}
70%{opacity:0;transform:scale(1.35)}
100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){ .tabbar .fab i::after{animation:none;opacity:0}
}
/* ═══════════ v2.8 · barra flotante, "+" dorado y avisos visibles ═══════════ */
/* El aviso cuelga del botón, no del recuadro que lo recortaba */
.ops button{position:relative}
.op-badge{top:-6px;right:6px}
@media (max-width:380px){ .op-badge{right:0}
}
/* Barra inferior: una burbuja alargada flotando, no una barra pegada al borde */
.tabbar{
left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
border-radius:30px;border:1px solid var(--line);padding:9px 8px;
background:color-mix(in srgb,var(--surface) 88%,transparent);
box-shadow:0 10px 30px -8px rgba(9,20,50,.28), 0 2px 6px rgba(9,20,50,.10),
inset 0 1px 0 rgba(255,255,255,.55);
overflow:visible}
[data-theme="dark"] .tabbar{box-shadow:0 12px 32px -8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08)}
.view{padding-bottom:136px}
@media (min-width:1024px){ .view{padding-bottom:60px}
}
/* "+" en color de acción: se distingue del azul de la interfaz */
.tabbar .fab{position:relative;flex:0 0 66px}
.tabbar .fab i{
width:56px;height:56px;margin-top:-26px;overflow:hidden;
background:radial-gradient(120% 120% at 30% 20%, #FFD36A 0%, var(--accent) 45%, var(--accent-2) 100%);
color:#3B2408;
box-shadow:0 14px 28px -8px color-mix(in srgb,var(--accent) 80%,transparent),
0 3px 8px rgba(60,35,3,.3),
inset 0 2px 0 rgba(255,255,255,.55),
inset 0 -12px 18px -12px rgba(120,70,0,.6)}
.tabbar .fab i::after{content:none}
.tabbar .fab::after{content:'';position:absolute;top:-26px;left:50%;width:56px;height:56px;
margin-left:-28px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 65%,transparent);
animation:halo 3.2s ease-out infinite;pointer-events:none}
.tabbar .fab i .ic{position:relative;z-index:2;filter:drop-shadow(0 1px 1px rgba(255,255,255,.5))}
/* Monedas que suben desde el fondo de la burbuja y se desvanecen */
.fab-coins{position:absolute;inset:0;z-index:1;pointer-events:none}
.fab-coins b{position:absolute;bottom:-16px;font-size:12px;font-weight:800;color:rgba(255,255,255,.85);
text-shadow:0 1px 2px rgba(120,70,0,.45);opacity:0;animation:subeSol 4.2s ease-out infinite}
.fab-coins b:nth-child(1){left:12px;animation-delay:.0s}
.fab-coins b:nth-child(2){left:26px;animation-delay:1.4s;font-size:10px}
.fab-coins b:nth-child(3){left:38px;animation-delay:2.7s;font-size:11px}
@keyframes subeSol{
0%{opacity:0;transform:translateY(0) scale(.7)}
15%{opacity:.95}
70%{opacity:.5}
100%{opacity:0;transform:translateY(-54px) scale(1.05)}
}
@media (prefers-reduced-motion:reduce){
.fab-coins b,.tabbar .fab::after{animation:none;opacity:0}
}
/* Sin soporte de desenfoque, se vuelve opaco para no quedar ilegible */
/* El gesto no debe escaparse a la página de atrás, pero SÍ debe funcionar
dentro del menú y de las hojas. Ojo: touch-action:none en el body bloquea
también a sus hijos, así que solo se aplica al fondo oscurecido. */
body.menu-open, body.locked{overscroll-behavior:none}
.dw-panel{min-height:0}
.dw-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.dw-scrim{touch-action:none}
.sheet{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.backdrop{touch-action:none}
.lock-screen{overscroll-behavior:contain}
/* Los botones de acción de una hoja quedan siempre a mano, aunque el
contenido sea largo: se pegan al pie mientras se desplaza el resto. */
.sheet .sheet-body > .btnrow:last-child{
position:sticky;z-index:3;margin-top:16px;
/* La hoja tiene relleno abajo, y el contenido que se desplaza PASA POR DENTRO de
ese relleno: por eso asomaba media fila por debajo de los botones. La barra se
pega por debajo de ese relleno y se lo come con su propio padding, así nada
puede aparecer bajo ella. Fondo opaco por el mismo motivo. */
bottom:calc(-24px - env(safe-area-inset-bottom));
margin-bottom:calc(-24px - env(safe-area-inset-bottom));
padding:12px 0 calc(24px + env(safe-area-inset-bottom));
background:var(--surface)}
.sheet .sheet-body > .btnrow:last-child::before{
content:'';position:absolute;left:0;right:0;top:-18px;height:18px;pointer-events:none;
background:linear-gradient(to top, var(--surface), transparent)}
/* ═══════════ v4.0 · el "+" vuelve al color de la app, integrado en la barra ═══════════ */
.tabbar .fab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.tabbar .fab i{
width:50px;height:50px;margin-top:-16px;border-radius:50%;
background:radial-gradient(120% 120% at 32% 22%, #6EE7B7 0%, var(--brand-vivid) 48%, #047857 100%);
color:#fff;
box-shadow:0 10px 20px -8px color-mix(in srgb,var(--brand-vivid) 80%,transparent),
0 2px 6px rgba(6,18,50,.25),
inset 0 2px 0 rgba(255,255,255,.42),
inset 0 -10px 16px -10px rgba(0,0,0,.45)}
.tabbar .fab i .ic{filter:none}
.tabbar .fab::after{border-color:color-mix(in srgb,var(--brand-vivid) 55%,transparent);
top:-16px;width:50px;height:50px;margin-left:-25px}
.fab-lb{font-size:10.5px;font-weight:700;color:var(--brand)}
.fab-coins b{color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,20,70,.5)}
/* Barra de error: nada de fallos silenciosos */
#errbar{position:fixed;left:10px;right:10px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:90;
display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;
background:#C62828;color:#fff;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);font-size:12.5px}
#errbar .eb-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#errbar .eb-txt span{opacity:.9;word-break:break-word;line-height:1.35}
#errbar button{color:#fff;font-weight:700;font-size:12px;padding:6px 8px;border-radius:8px;
background:rgba(255,255,255,.18);flex:0 0 auto}
/* ── negocios ──────────────────────────────────────────────────────────────
Una cuenta compartida por varios negocios: el color es lo que permite leer
de un vistazo de quién es cada sol, así que el chip lleva el color del
negocio y el punto se mantiene visible incluso cuando está seleccionado. */
.biz-f{margin-bottom:13px}
.chip.biz{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface)}
.chip.biz .dot{width:9px;height:9px;border-radius:99px;flex:0 0 auto;box-shadow:0 0 0 2px rgba(255,255,255,.55) inset}
.chip.biz.on{background:var(--bz);border-color:var(--bz);color:#fff}
.chip.biz.on .dot{background:#fff !important}
.biz-hint{margin-top:7px;min-height:1px}
.biz-hint.warn{color:var(--warn);font-weight:650}
/* barra de reparto: una cuenta partida entre negocios */
.split{display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--surface-2);margin:9px 0 7px}
.split i{display:block;height:100%}
.split-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.split-legend span{display:inline-flex;align-items:center;gap:6px}
.split-legend i{width:8px;height:8px;border-radius:99px;flex:0 0 auto}
.split-legend b{color:var(--text);font-variant-numeric:tabular-nums}
/* tarjeta de negocio en Inicio y en Reportes */
.bizcard{display:flex;align-items:center;gap:12px;padding:13px;border-radius:16px;background:var(--surface);
border:1px solid var(--line);margin-bottom:9px;width:100%;text-align:left}
.bizcard .bar{width:4px;align-self:stretch;border-radius:99px;flex:0 0 auto}
.bizcard .nm{font-weight:700;font-size:14.5px;display:block}
.bizcard .mt{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.bizcard .amt{margin-left:auto;text-align:right;font-weight:750;font-variant-numeric:tabular-nums}
.bizcard .amt small{display:block;font-weight:600;font-size:11.5px;color:var(--muted);margin-top:2px}
.bizdot{display:inline-block;width:7px;height:7px;border-radius:99px;vertical-align:1px;margin-right:6px;flex:0 0 auto}
/* ── administración de categorías y negocios ─────────────────────────────── */
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:34px;height:34px;border-radius:11px;border:2px solid transparent;flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center}
.sw.on{border-color:var(--text);box-shadow:0 0 0 2px var(--surface) inset}
.sw.ico{background:var(--surface-2);color:var(--text)}
.sw.ico.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.catgroup{border:1px solid var(--line);border-radius:15px;padding:11px 13px;margin-bottom:10px;background:var(--surface)}
.cathead{display:flex;align-items:center;gap:9px;font-size:14.5px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.cathead .dot{width:10px;height:10px;border-radius:99px;flex:0 0 auto}
.catchild{display:flex;align-items:center;gap:9px;width:100%;padding:10px 0;font-size:14px;
border-bottom:1px solid var(--line);color:var(--text)}
.catchild:last-child{border-bottom:0}
.pill{font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand)}
.pill.soft{background:var(--surface-2);color:var(--muted);font-weight:600}
.iconbtn.sm{width:28px;height:28px;flex:0 0 auto}
/* Con cinco accesos el icono se estrecha: la etiqueta baja un punto para que
no se corte ninguna palabra en pantallas de 360 px. */
.ops[style*="--cols:5"] .op-lb{font-size:10.5px;line-height:1.18}
.ops[style*="--cols:5"]{gap:8px}
/* tabla de resultados por negocio */
.biztable{font-size:13px}
.bt-head,.bt-row{display:grid;grid-template-columns:1.5fr .9fr .9fr .95fr;gap:6px;align-items:center;
padding:9px 0;border-bottom:1px solid var(--line);text-align:right}
.bt-head{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.bt-head span:first-child,.bt-row span:first-child{text-align:left}
.bt-row{width:100%;color:var(--text)}
.bt-row.total{border-bottom:0;border-top:1px solid var(--text);font-weight:700}
.bt-nm{display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-nm i{width:9px;height:9px;border-radius:99px;flex:0 0 auto}
.biztable .num{font-variant-numeric:tabular-nums}
/* ── nube ──────────────────────────────────────────────────────────────────── */
.cloud-state{display:flex;align-items:center;gap:12px;padding:13px;border-radius:15px;
background:var(--surface-2);margin-bottom:14px}
.cloud-state .ci{width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;
justify-content:center;flex:0 0 auto;color:#fff}
.cloud-state.good .ci{background:var(--income)}
.cloud-state.bad .ci{background:var(--expense)}
.cloud-state b{display:block;font-size:14.5px}
.cloud-state small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;word-break:break-all}
.pasos{display:grid;gap:10px;margin-bottom:15px}
.paso{display:flex;gap:11px;font-size:13.5px;line-height:1.5}
.paso b{width:22px;height:22px;border-radius:99px;background:var(--brand);color:#fff;flex:0 0 auto;
display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
.sqlbox{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:11px;margin-bottom:15px}
.sqlbox pre{margin:0;font-size:10.5px;line-height:1.5;max-height:170px;overflow:auto;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;color:var(--text);
-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.cloud-dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px;vertical-align:1px}
.verdict{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
border-radius:8px;vertical-align:-6px;margin-right:4px;color:#fff}
.verdict.ok{background:var(--income)}
.verdict.bad{background:var(--warn)}
/* ── selector de categoría desplegable ─────────────────────────────────────
Una sola fila cuando está cerrado; una sola lista cuando está abierto.
Nunca las dos a la vez: era lo que llenaba la pantalla de botones. */
.cat-picker{margin-bottom:14px}
.cat-trigger{display:flex;align-items:center;gap:11px;width:100%;padding:12px 13px;
border:1px solid var(--line);border-radius:14px;background:var(--surface-2);text-align:left;
min-height:var(--touch)}
.cat-trigger .ci{width:34px;height:34px;border-radius:11px;flex:0 0 auto;display:inline-flex;
align-items:center;justify-content:center;background:var(--surface);color:var(--muted);
border:1px solid var(--line)}
.cat-trigger.elegido .ci{background:var(--brand);border-color:var(--brand);color:#fff}
.cat-trigger .tx{flex:1;min-width:0}
.cat-trigger .tx b{display:block;font-size:14.5px;font-weight:700;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-trigger .tx b.vacio{color:var(--muted);font-weight:600}
.cat-trigger .tx small{display:block;font-size:12px;color:var(--muted);margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-trigger .ch{color:var(--muted);flex:0 0 auto;transition:transform .16s}
.cat-picker:not([data-paso="cerrado"]) .cat-trigger .ch{transform:rotate(90deg)}
.cat-picker:not([data-paso="cerrado"]) .cat-trigger{border-color:var(--brand)}
.cat-rapidas{margin-top:8px}
.cat-panel{margin-top:8px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
overflow:hidden}
.cat-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);
background:var(--surface-2)}
.cat-head .volver{display:inline-flex;align-items:center;gap:3px;font-size:12.5px;font-weight:700;
color:var(--brand);flex:0 0 auto}
.cat-head .volver .ic{transform:rotate(180deg)}
.cat-head b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-lista{max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch}
.cat-fila{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;text-align:left;
border-bottom:1px solid var(--line);min-height:46px;color:var(--text)}
.cat-fila:last-child{border-bottom:0}
.cat-fila .ci{flex:0 0 auto;display:inline-flex}
.cat-fila .nm{flex:1;min-width:0;font-size:14px;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-fila .cu{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:0 0 auto}
.cat-fila .ch{color:var(--muted);flex:0 0 auto}
.cat-fila.on{background:var(--brand-soft)}
.cat-fila.on .nm{color:var(--brand);font-weight:750}
.cat-fila:active{background:var(--surface-2)}
/* `display:flex` gana a [hidden] por especificidad: hay que decirlo explícito o la
cabecera «‹ Todas» se queda visible estando en el primer nivel. */
.cat-head[hidden],.cat-panel[hidden],.cat-rapidas[hidden]{display:none}
/* En las subcategorías el chevron mentiría —no llevan a ningún sitio—, así que es
un visto que solo se enciende en la elegida. */
.cat-fila[data-tipo="hijo"] .ch{opacity:0;color:var(--brand)}
.cat-fila[data-tipo="hijo"].on .ch{opacity:1}
/* ── deudas: una tarjeta por préstamo ──────────────────────────────────────
Con seis préstamos seguidos en un solo bloque no se distinguía de quién era
cuál. Cada uno tiene ahora su marco, una banda de color (verde si te deben,
rojo si debes) y dice en palabras hacia dónde va la plata. */
.debtcard{position:relative;padding-left:13px}
.debtcard::before{content:'';position:absolute;left:0;top:2px;bottom:2px;width:4px;
border-radius:99px;background:var(--dc)}
.dc-top{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.dc-nm{flex:1;min-width:0}
.dc-nm b{display:block;font-size:15.5px;font-weight:750;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-nm small{display:block;font-size:12px;color:var(--muted);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-tag{flex:0 0 auto;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
padding:4px 9px;border-radius:99px;background:var(--dc);color:#fff;opacity:.92}
.dc-amt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.dc-amt .lbl{font-size:12.5px;color:var(--muted)}
.dc-amt b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.dc-sub{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;margin-top:7px}
.dc-sub b{font-variant-numeric:tabular-nums}
.dc-btn{margin-top:13px}
.dc-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dc-head .t{font-size:15px;font-weight:750}
.dc-head b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
/* buscador dentro del selector de categoría */
.cat-buscar{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line);
background:var(--surface-2);color:var(--muted)}
.cat-buscar input{flex:1;min-width:0;border:0;background:transparent;padding:4px 0;font-size:14px;
min-height:auto;color:var(--text)}
.cat-buscar input:focus{outline:none}
.cat-buscar .limpiar{flex:0 0 auto;width:24px;height:24px;border-radius:99px;background:var(--line);
color:var(--text);font-size:15px;line-height:1}
.cat-buscar .limpiar[hidden]{display:none}
.cat-fila .nm small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-vacio{padding:18px 14px;font-size:13.5px;color:var(--muted);text-align:center;line-height:1.6}
.cat-vacio .link{display:block;margin-top:6px;color:var(--brand);font-weight:700}
/* ── cuentas: una tarjeta por cuenta ───────────────────────────────────────
Con el reparto por negocio debajo de cada saldo, las filas seguidas se leían
como una masa. Cada cuenta en su marco y el grupo como etiqueta suelta. */
.group-label{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
color:var(--screen-ink);padding:4px 6px 8px 0;margin-top:6px;
display:flex;align-items:center;gap:8px}
.group-label::before{content:'';width:4px;height:13px;border-radius:99px;
background:var(--screen);flex:0 0 auto}
.acct{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.ac-nm{flex:1;min-width:0}
/* El nombre puede ocupar dos líneas antes de recortarse: «Interbank Empresa» y
«BCP reto emprendedor» se quedaban en «Interbank Em…» por ahorrar una línea. */
.ac-nm b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
font-size:15px;font-weight:700;line-height:1.25;overflow:hidden}
.ac-nm small{display:block;font-size:12px;color:var(--muted);margin-top:2px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-amt{flex:0 0 auto;text-align:right}
.ac-amt b{display:block;font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;
letter-spacing:-.3px;white-space:nowrap}
.ac-amt small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.ac-go{flex:0 0 auto;color:var(--muted);display:flex;align-items:center;margin-right:-4px}
.ac-split{margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
/* qué entró y qué salió de la cuenta este mes, bajo su saldo */
.ac-flow{display:flex;align-items:center;gap:14px;margin-top:11px;padding-top:10px;
border-top:1px solid var(--line);font-size:12.5px}
.ac-flow span{display:inline-flex;align-items:center;gap:4px}
.ac-flow .in{color:var(--income)}
.ac-flow .out{color:var(--expense)}
.ac-flow b{font-weight:750;font-variant-numeric:tabular-nums}
.ac-flow .n{margin-left:auto;color:var(--muted);font-size:11.5px}
/* ── detalle de UNA cuenta ──────────────────────────────────────────────── */
.volver{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:700;
color:var(--muted);background:none;border:0;padding:4px 6px;margin:0 0 6px}
.volver .ic{transform:rotate(180deg)}
.acd-top{display:flex;align-items:center;gap:12px}
.acd-nm{flex:1;min-width:0}
.acd-nm b{display:block;font-size:17px;font-weight:780;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acd-nm small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.acd-saldo{margin-top:14px;padding:13px 0 12px;border-top:1px solid var(--line);
border-bottom:1px solid var(--line);text-align:center}
.acd-saldo .lbl{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
text-transform:uppercase;color:var(--muted)}
.acd-saldo b{display:block;font-size:30px;font-weight:800;letter-spacing:-.8px;
font-variant-numeric:tabular-nums;margin-top:4px}
.acd-saldo b.neg{color:var(--expense)}
.acd-saldo small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.acd-flujo{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:13px;text-align:center}
.acd-flujo>div{background:var(--surface-2,rgba(127,127,127,.07));border-radius:12px;padding:9px 6px}
.acd-flujo span{display:block;font-size:11px;color:var(--muted);font-weight:650}
.acd-flujo b{display:block;font-size:14.5px;font-weight:780;margin-top:3px;
font-variant-numeric:tabular-nums}
.acd-flujo .pos{color:var(--income)}
.acd-flujo .neg{color:var(--expense)}
.acd-mov{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
padding:9px 0;border-bottom:1px solid var(--line)}
.acd-mov:last-of-type{border-bottom:0}
.acd-mov .fl{flex:0 0 auto;width:28px;height:28px;border-radius:9px;
display:flex;align-items:center;justify-content:center}
.acd-mov .fl.in{background:var(--income-soft,rgba(22,163,74,.12));color:var(--income)}
.acd-mov .fl.out{background:var(--expense-soft,rgba(220,38,38,.1));color:var(--expense)}
.acd-mov .tx{flex:1;min-width:0}
.acd-mov .tx b{display:block;font-size:14px;font-weight:650;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acd-mov .tx small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acd-mov .tx small i{font-style:normal;font-weight:650;color:var(--text)}
.acd-mov .am{flex:0 0 auto;font-size:14.5px;font-weight:750;font-variant-numeric:tabular-nums}
.acd-mov .am.pos{color:var(--income)}
.acd-mov .am.neg{color:var(--expense)}
/* estado del respaldo: lo único que sobrevive a un teléfono perdido */
.respaldo{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border-radius:14px;
margin-bottom:11px;border:1.5px solid var(--line)}
.respaldo .ri{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:10px}
.respaldo b{display:block;font-size:14px;font-weight:700}
.respaldo small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
.respaldo.ok .ri{background:color-mix(in srgb,var(--income) 14%,transparent);color:var(--income)}
.respaldo.urge{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
background:color-mix(in srgb,var(--warn) 8%,transparent)}
.respaldo.urge .ri{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
/* cubrir el consumo de tarjeta en el momento de registrarlo */
.cubrir{border:1.5px solid var(--line);border-radius:14px;padding:12px 13px;margin-bottom:13px}
.cub-sw{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.cub-sw input{width:19px;height:19px;flex:0 0 auto;margin-top:1px;accent-color:var(--brand)}
.cub-sw b{display:block;font-size:14px;font-weight:700}
.cub-sw small{display:block;font-size:12px;color:var(--muted);line-height:1.45;margin-top:2px}
#cub-cta{margin-top:12px}
#cub-cta .f{margin-bottom:8px}
#cub-aviso:empty{display:none}
/* vista previa del plan de cobro dentro del formulario */
.planprev{background:var(--brand-soft);border-radius:13px;padding:11px 13px;margin-bottom:13px}
.planprev .kv{padding:5px 0}
.planprev .kv.main{border-bottom:1px solid color-mix(in srgb,var(--brand) 22%,transparent);padding-bottom:8px;margin-bottom:3px}
.planprev .kv.main .v{font-size:19px;font-weight:800}