/* Habita Finanzas · identidad «Tinta y lima». Personal = lima · Negocio = celeste. El acento indica SIEMPRE en qué espacio estás. */
@font-face { font-family: Geist; src: url(../fonts/geist.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #0b0d0c; --s1: #131615; --s2: #1a1e1c; --s3: #232826; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.14);
  --tx: #f1f4f0; --tx2: #a9b2ac; --tx3: #838c87;
  --pos: #5fe0a2; --neg: #ff8674; --warn: #ffc466; --pos-bg: rgba(95,224,162,.12); --neg-bg: rgba(255,134,116,.13); --warn-bg: rgba(255,196,102,.13);
  --acc: #c9f56a; --acc-t: #c9f56a; --on-acc: #10140a; --acc-bg: rgba(201,245,106,.1); --acc-glow: rgba(201,245,106,.2);
  --c0:#ff9f6b; --c1:#6fb8ff; --c2:#b79cff; --c3:#ffd166; --c4:#ff7fa3; --c5:#5ed6c8; --c6:#8aa2ff; --c7:#f29bdc; --c8:#9aa39d; --c9:#7fe08f; --c10:#ffb347; --c11:#c7d36f;
  --r: 20px; --r2: 14px; --sh: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.6);
  --f: Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --ease: cubic-bezier(.2,.8,.2,1);
  --sab: env(safe-area-inset-bottom, 0px); --sat: env(safe-area-inset-top, 0px); color-scheme: dark;
}
:root[data-esp="negocio"] { --acc: #8fd0ff; --acc-t: #8fd0ff; --on-acc: #05131d; --acc-bg: rgba(143,208,255,.1); --acc-glow: rgba(143,208,255,.2); }
:root[data-tema="claro"] {
  --bg: #f3f2ec; --s1: #ffffff; --s2: #f0eee7; --s3: #e6e3da; --line: rgba(20,24,19,.09); --line2: rgba(20,24,19,.17);
  --tx: #141713; --tx2: #535b54; --tx3: #626a63;
  --pos: #0b7a4a; --neg: #c03a27; --warn: #8f5b00; --pos-bg: rgba(15,138,85,.1); --neg-bg: rgba(200,64,44,.09); --warn-bg: rgba(166,106,0,.1);
  --acc-t: #456b0c; --acc-bg: rgba(160,205,50,.2); --acc-glow: rgba(160,205,50,.35);
  --c0:#d9662b; --c1:#2377c9; --c2:#7453d6; --c3:#b88a00; --c4:#cf3f6c; --c5:#12897c; --c6:#4a63d6; --c7:#b0469a; --c8:#6b736d; --c9:#2c8f3f; --c10:#c46f00; --c11:#7f8a1c;
  --sh: 0 1px 2px rgba(20,24,19,.05), 0 16px 32px -22px rgba(20,24,19,.25); color-scheme: light;
}
:root[data-tema="claro"][data-esp="negocio"] { --acc-t: #0b5ea8; --acc-bg: rgba(60,150,230,.15); --acc-glow: rgba(60,150,230,.3); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100%; background: var(--bg); color: var(--tx); font: 400 15px/1.45 var(--f); font-feature-settings: 'tnum' 1, 'ss01' 1; -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--acc-t); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mute { color: var(--tx2); } .pos { color: var(--pos); } .neg { color: var(--neg); } .warn { color: var(--warn); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- estructura ---------- */
.app { display: grid; min-height: 100dvh; grid-template-columns: 1fr; }
.rail { display: none; }
.main { min-width: 0; padding: calc(12px + var(--sat)) 16px calc(104px + var(--sab)); max-width: 1180px; width: 100%; margin: 0 auto; }
.top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.top .hola { flex: 1; min-width: 0; }
.top .hola small { display: block; color: var(--tx2); font-size: 13px; }
.top .hola b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); color: var(--tx2); transition: transform .15s var(--ease), color .15s; }
.ib:active { transform: scale(.94); } .ib:hover { color: var(--tx); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.02em; font-size: 16px; }
.marca i { width: 30px; height: 30px; border-radius: 9px; background: var(--acc); color: var(--on-acc); display: grid; place-items: center; transition: background .3s; }
.marca i svg { width: 18px; height: 18px; stroke-width: 2.2; }
.marca span { color: var(--tx2); font-weight: 400; }

/* selector de espacio */
.esp { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 16px; }
.esp::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: var(--acc); transition: transform .32s var(--ease), background .3s; }
:root[data-esp="negocio"] .esp::before { transform: translateX(100%); }
.esp button { position: relative; z-index: 1; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--tx2); border-radius: 12px; transition: color .2s; min-width: 0; }
.esp button[aria-pressed="true"] { color: var(--on-acc); }
.esp button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esp svg.i { width: 18px; height: 18px; }

/* navegación móvil */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr 72px 1fr 1fr; align-items: center; padding: 8px 8px calc(8px + var(--sab)); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid var(--line); }
.tabs a { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; font-size: 11px; font-weight: 500; color: var(--tx3); text-decoration: none; border-radius: 12px; min-height: 48px; }
.tabs a[aria-current="page"] { color: var(--acc-t); }
.tabs a svg.i { width: 22px; height: 22px; }
.fab { justify-self: center; width: 58px; height: 58px; border-radius: 20px; background: var(--acc); color: var(--on-acc); display: grid; place-items: center; box-shadow: 0 10px 28px -8px var(--acc-glow), 0 0 0 6px var(--bg); transform: translateY(-14px); transition: transform .18s var(--ease), background .3s; }
.fab:active { transform: translateY(-14px) scale(.92); }
.fab svg.i { width: 26px; height: 26px; stroke-width: 2.2; }

@media (min-width: 1000px) {
  .app { grid-template-columns: 264px 1fr; }
  .rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100dvh; padding: 22px 16px; border-right: 1px solid var(--line); background: var(--s1); }
  .rail nav { display: grid; gap: 2px; }
  .rail nav a { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--tx2); text-decoration: none; font-weight: 500; font-size: 14.5px; transition: background .15s, color .15s; }
  .rail nav a:hover { background: var(--s2); color: var(--tx); }
  .rail nav a[aria-current="page"] { background: var(--acc-bg); color: var(--acc-t); }
  .rail .esp { margin: 0; background: var(--s2); }
  .rail .nuevo { margin-top: 2px; }
  .rail .pie { margin-top: auto; display: grid; gap: 8px; }
  .tabs, .main > .esp { display: none; }
  .main { padding: 28px 36px 60px; }
  .top .marca { display: none; }
}
@media (max-width: 999px) { .top .hola small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .top .hola small .f { display: none; } .top .hola small .m { text-transform: none; } .top .hola b { font-size: 17px; }
  .main > .esp { position: sticky; top: calc(6px + var(--sat)); z-index: 20; box-shadow: inset 0 0 0 1px var(--line2), 0 10px 24px -14px rgba(0,0,0,.55); background: color-mix(in srgb, var(--s1) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } }

/* ---------- piezas ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 20px; border-radius: 14px; font-weight: 600; font-size: 15px; background: var(--acc); color: var(--on-acc); transition: transform .15s var(--ease), filter .15s, background .3s; white-space: nowrap; text-decoration: none; }
.btn:hover { filter: brightness(1.06); } .btn:active { transform: scale(.97); }
.btn.s { background: var(--s2); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line); }
.btn.t { background: none; color: var(--acc-t); padding: 0 10px; height: 40px; }
.btn.p { height: 40px; padding: 0 14px; font-size: 13.5px; border-radius: 11px; }
.btn.pel { background: var(--neg-bg); color: var(--neg); }
.btn.ancho { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--s2); color: var(--tx2); white-space: nowrap; }
.chip.acc { background: var(--acc-bg); color: var(--acc-t); } .chip.pos { background: var(--pos-bg); color: var(--pos); } .chip.neg { background: var(--neg-bg); color: var(--neg); } .chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip svg.i { width: 14px; height: 14px; stroke-width: 2; }
.sim { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--warn); background: var(--warn-bg); border: 1px dashed color-mix(in srgb, var(--warn) 50%, transparent); }

.card { background: var(--s1); border-radius: var(--r); padding: 18px; box-shadow: inset 0 0 0 1px var(--line), var(--sh); min-width: 0; }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; min-height: 28px; }
.card > header h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.card > header a, .card > header button { font-size: 13px; font-weight: 600; color: var(--acc-t); text-decoration: none; display: inline-flex; align-items: center; justify-content: flex-end; min-height: 40px; min-width: 44px; margin: -6px 0; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.grid > * { grid-column: span 12; }
@media (min-width: 720px) { .c6 { grid-column: span 6; } .c4 { grid-column: span 6; } .c8 { grid-column: span 12; } .c3 { grid-column: span 3; } }
@media (min-width: 1100px) { .c4 { grid-column: span 4; } .c8 { grid-column: span 8; } .c5 { grid-column: span 5; } .c7 { grid-column: span 7; } }
.vh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 16px; flex-wrap: wrap; }
.vh h1 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.vh p { color: var(--tx2); font-size: 14px; margin-top: 4px; }

/* héroe del panel */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(16px, 4.6vw, 22px); border-radius: 26px; background: radial-gradient(120% 140% at 0% 0%, var(--acc-glow), transparent 55%), var(--s1); box-shadow: inset 0 0 0 1px var(--line2), var(--sh); }
.hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; box-shadow: 0 0 0 36px color-mix(in srgb, var(--acc) 5%, transparent), 0 0 0 72px color-mix(in srgb, var(--acc) 3%, transparent); pointer-events: none; }
.hero .fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
.hero .et { font-size: 13px; color: var(--tx2); display: flex; align-items: center; gap: 6px; }
.hero .et button { color: var(--tx2); display: grid; place-items: center; width: 40px; height: 40px; margin: -10px -8px; }
.hero .monto { font-size: clamp(38px, 10.5vw, 58px); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; margin: 8px 0 4px; position: relative; z-index: 1; }
.hero .sub { font-size: 13px; color: var(--tx2); position: relative; z-index: 1; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; padding-top: 18px; position: relative; z-index: 1; }
.kpi { padding: 11px 9px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 55%, transparent); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.kpi small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tx2); white-space: nowrap; }
.kpi small i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.kpi b { display: block; margin-top: 4px; font-size: clamp(13px, 3.8vw, 20px); font-weight: 600; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi em { font-style: normal; font-size: 11.5px; line-height: 1.25; color: var(--tx3); display: block; margin-top: 3px; }
.stat { display: grid; gap: 4px; }
.stat small { color: var(--tx2); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.stat b { font-size: 26px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.stat em { font-style: normal; font-size: 12.5px; color: var(--tx2); }

/* período */
.per { display: flex; gap: 4px; padding: 4px; border-radius: 13px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; scrollbar-width: none; }
.per::-webkit-scrollbar { display: none; }
.per button { height: 40px; padding: 0 13px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--tx2); white-space: nowrap; transition: background .2s, color .2s; }
.per button[aria-pressed="true"] { background: var(--s3); color: var(--tx); }
.rango { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.rango input { height: 40px; }

/* listas */
.lista { display: grid; }
.it { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; text-align: left; width: 100%; border-top: 1px solid var(--line); min-height: 60px; }
.it:first-child { border-top: 0; }
.ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--k, var(--tx3)) 16%, transparent); color: var(--k, var(--tx2)); }
.it .t { min-width: 0; }
.it .t b { display: block; font-weight: 500; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it .t small { display: block; color: var(--tx2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it .m { text-align: right; font-weight: 600; font-size: 15px; white-space: nowrap; }
.it .m small { display: block; font-weight: 400; font-size: 12px; color: var(--tx2); }
button.it:hover .t b { color: var(--acc-t); }
.dia { font-size: 12px; font-weight: 600; color: var(--tx3); text-transform: uppercase; letter-spacing: .07em; padding: 16px 0 4px; display: flex; justify-content: space-between; }

.barra { height: 8px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.barra i { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: var(--k, var(--acc)); transition: width .7s var(--ease); }
.barra.neg i { background: var(--neg); } .barra.warn i { background: var(--warn); }
.pres { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; }
.pres:first-child { border-top: 0; padding-top: 0; }
.pres .a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 14px; }
.pres .a b { font-weight: 500; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pres .a b i { width: 9px; height: 9px; border-radius: 3px; background: var(--k); flex: none; }
.pres .b { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--tx2); gap: 8px; }

/* observaciones */
.obs { display: grid; gap: 8px; }
.ob { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: var(--s2); font-size: 14px; line-height: 1.4; }
.ob i { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--s3); color: var(--tx2); }
.ob.alerta i { background: var(--neg-bg); color: var(--neg); } .ob.ojo i { background: var(--warn-bg); color: var(--warn); } .ob.bien i { background: var(--pos-bg); color: var(--pos); }
.ob i svg { width: 16px; height: 16px; }

/* vacíos */
.vacio { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 26px 12px; color: var(--tx2); font-size: 14px; }
.vacio .d { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--acc-bg); color: var(--acc-t); margin-bottom: 4px; }
.vacio .d svg { width: 28px; height: 28px; }
.vacio b { color: var(--tx); font-size: 16px; font-weight: 600; }
.vacio p { max-width: 34ch; }
.aviso { display: flex; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--s2); color: var(--tx2); font-size: 13px; line-height: 1.45; }
.aviso svg.i { width: 18px; height: 18px; margin-top: 1px; color: var(--tx3); }
.aviso.warn { background: var(--warn-bg); color: var(--tx); } .aviso.warn svg.i { color: var(--warn); }
.aviso b { color: var(--tx); }

/* gráficos */
.gr { position: relative; }
.gr svg { display: block; width: 100%; height: 170px; overflow: visible; }
.gr .ejes { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tx3); margin-top: 6px; }
.gr .tip { position: absolute; top: 0; transform: translate(-50%, -8px); padding: 6px 10px; border-radius: 10px; background: var(--tx); color: var(--bg); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2; }
.gr .tip small { display: block; font-weight: 400; opacity: .7; }
.gr .guia { position: absolute; top: 0; bottom: 22px; width: 1px; background: var(--line2); pointer-events: none; opacity: 0; }
.gr.on .tip, .gr.on .guia { opacity: 1; }
.area-l { fill: none; stroke: var(--acc-t); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; opacity: 0; animation: aparece .5s ease .1s forwards; }
.area-f { fill: url(#gA); opacity: 0; animation: aparece .7s ease .25s forwards; }
@keyframes aparece { to { opacity: 1; } }
.cols { display: flex; align-items: flex-end; gap: clamp(6px, 2.4vw, 18px); height: 170px; padding-top: 26px; }
.col { flex: 1; display: grid; grid-template-rows: 1fr auto; gap: 8px; height: 100%; min-width: 0; position: relative; background: none; }
.col .bs { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 100%; }
.col .bs i { width: min(46%, 20px); border-radius: 6px 6px 3px 3px; height: var(--h, 0%); min-height: 3px; transition: height .7s var(--ease); background: var(--acc); }
.col .bs i + i { background: var(--s3); box-shadow: inset 0 0 0 1px var(--line2); }
.col span { font-size: 11.5px; color: var(--tx3); text-align: center; text-transform: capitalize; }
.col[aria-pressed="true"] span { color: var(--tx); font-weight: 600; }
.col .tip { position: absolute; left: 50%; top: -4px; transform: translateX(-50%); padding: 6px 10px; border-radius: 10px; background: var(--tx); color: var(--bg); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 3; text-align: left; }
.col:hover .tip, .col:focus-visible .tip, .col[aria-pressed="true"] .tip { opacity: 1; }
.col:first-child .tip { left: 0; transform: none; } .col:last-child .tip { left: auto; right: 0; transform: none; }
.ley { display: flex; gap: 14px; font-size: 12.5px; color: var(--tx2); flex-wrap: wrap; }
.ley i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; background: var(--k, var(--acc)); }
.dona { display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: center; }
.dona .d { position: relative; width: 132px; height: 132px; }
.dona svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.dona circle { fill: none; stroke-width: 15; transition: stroke-dasharray .8s var(--ease); }
.dona .c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dona .c small { font-size: 11.5px; color: var(--tx2); } .dona .c b { font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.dona ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; min-width: 0; }
.dona li { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.dona li i { width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
.dona li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dona li b { font-weight: 500; color: var(--tx2); }
.anillo { position: relative; width: var(--t, 76px); height: var(--t, 76px); flex: none; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.anillo circle + circle { stroke: var(--acc); transition: stroke-dashoffset .9s var(--ease); }
.anillo b { position: absolute; inset: 0; display: grid; place-content: center; font-size: 15px; font-weight: 600; letter-spacing: -.03em; }

/* metas */
.metas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.meta { position: relative; overflow: hidden; display: grid; gap: 14px; padding: 18px; border-radius: 22px; text-align: left; background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 9%, var(--s1)), var(--s1) 60%); box-shadow: inset 0 0 0 1px var(--line), var(--sh); transition: transform .2s var(--ease); width: 100%; }
.meta:hover { transform: translateY(-2px); }
.meta .h { display: flex; gap: 14px; align-items: center; }
.meta .h div { min-width: 0; } .meta h3 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta .h small { color: var(--tx2); font-size: 13px; }
.meta .n { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meta .n b { font-size: 22px; font-weight: 600; letter-spacing: -.04em; } .meta .n span { font-size: 13px; color: var(--tx2); }
.meta.ok { background: linear-gradient(160deg, var(--pos-bg), var(--s1) 70%); } .meta.ok .anillo circle + circle { stroke: var(--pos); }

/* hoja y formularios */
.velo { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s; display: grid; align-items: end; }
.velo.on { opacity: 1; }
.hoja { background: var(--s1); border-radius: 26px 26px 0 0; max-height: 94dvh; display: grid; grid-template-rows: auto 1fr auto; transform: translateY(100%); transition: transform .34s var(--ease); box-shadow: 0 -20px 60px rgba(0,0,0,.4); width: 100%; }
.velo.on .hoja { transform: none; }
.hoja > header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.hoja > header h2 { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.hoja .cu { overflow-y: auto; padding: 8px 18px 16px; overscroll-behavior: contain; }
.hoja > footer { display: flex; gap: 10px; padding: 12px 18px calc(14px + var(--sab)); border-top: 1px solid var(--line); }
.hoja > footer .btn { flex: 1; } .hoja > footer .btn.pel { flex: none; width: 48px; padding: 0; }
@media (min-width: 720px) { .velo { align-items: center; justify-items: center; } .hoja { width: min(520px, 94vw); border-radius: 26px; max-height: 88dvh; transform: translateY(18px) scale(.98); opacity: 0; transition: transform .25s var(--ease), opacity .2s; } .velo.on .hoja { opacity: 1; } }
.campo { display: grid; gap: 6px; margin-top: 14px; }
.campo > span, .campo > label { font-size: 13px; font-weight: 500; color: var(--tx2); }
.campo small { color: var(--tx3); font-size: 12.5px; }
input[type=text], input[type=date], input[type=search], input:not([type]), select, textarea { width: 100%; height: 48px; padding: 0 14px; border-radius: 13px; background: var(--s2); border: 0; box-shadow: inset 0 0 0 1px var(--line); outline: 0; transition: box-shadow .15s; font-size: 16px; -webkit-appearance: none; appearance: none; }
textarea { height: 76px; padding: 12px 14px; resize: none; }
input:focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 2px var(--acc-t); }
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239aa39d' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.err { color: var(--neg); font-size: 13px; margin-top: 10px; display: flex; gap: 6px; align-items: center; }
.err:empty { display: none; }
.montoin { display: flex; align-items: baseline; justify-content: center; gap: 4px; padding: 14px 0 6px; }
.montoin span { font-size: 30px; font-weight: 500; color: var(--tx3); }
.montoin input { all: unset; font-size: clamp(40px, 13vw, 56px); font-weight: 600; letter-spacing: -.05em; text-align: left; min-width: 1ch; width: 3ch; max-width: 80vw; caret-color: var(--acc-t); font-variant-numeric: tabular-nums; }
.montoin input::placeholder { color: var(--tx3); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: var(--s2); }
.seg button { height: 40px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--tx2); padding: 0 6px; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--s1); color: var(--tx); box-shadow: 0 1px 4px rgba(0,0,0,.25), inset 0 0 0 1px var(--line); }
.seg button[aria-pressed="true"][data-v="gasto"] { color: var(--neg); } .seg button[aria-pressed="true"][data-v="ingreso"] { color: var(--pos); }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.cats button { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; font-size: 11.5px; font-weight: 500; color: var(--tx2); background: var(--s2); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s, transform .15s var(--ease); line-height: 1.15; text-align: center; min-height: 76px; min-width: 0; overflow-wrap: anywhere; }
.cats button .ic { width: 34px; height: 34px; border-radius: 11px; } .cats button .ic svg { width: 18px; height: 18px; }
.cats button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--k); color: var(--tx); transform: scale(1.03); }
.rap { display: flex; gap: 6px; flex-wrap: wrap; }
.rap button { height: 40px; padding: 0 12px; border-radius: 10px; background: var(--s2); font-size: 13px; font-weight: 500; color: var(--tx2); box-shadow: inset 0 0 0 1px var(--line); }
.rap button[aria-pressed="true"] { background: var(--acc-bg); color: var(--acc-t); box-shadow: inset 0 0 0 1px transparent; }
details.mas { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 4px; }
details.mas summary { list-style: none; cursor: pointer; height: 42px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 500; color: var(--tx2); }
details.mas summary::-webkit-details-marker { display: none; }
details.mas[open] summary svg { transform: rotate(180deg); }
.filtros { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 6px; }
@media (min-width: 720px) { .filtros { grid-template-columns: 1.4fr 1fr 1fr; } }
.bus { position: relative; } .bus svg { position: absolute; left: 14px; top: 14px; color: var(--tx3); } .bus input { padding-left: 42px; }

/* avisos flotantes y celebración */
.toast { position: fixed; left: 50%; bottom: calc(96px + var(--sab)); z-index: 70; transform: translate(-50%, 20px); opacity: 0; padding: 12px 16px; border-radius: 14px; background: var(--tx); color: var(--bg); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 10px; transition: transform .3s var(--ease), opacity .2s; max-width: calc(100vw - 32px); box-shadow: 0 12px 30px rgba(0,0,0,.35); pointer-events: none; }
.toast.on { transform: translate(-50%, 0); opacity: 1; }
.toast i { width: 22px; height: 22px; border-radius: 50%; background: var(--pos); color: #04130b; display: grid; place-items: center; flex: none; } .toast i svg { width: 13px; height: 13px; stroke-width: 3; }
@media (min-width: 1000px) { .toast { bottom: 32px; } }
.fiesta { position: fixed; inset: 0; z-index: 80; pointer-events: none; overflow: hidden; }
.fiesta i { position: absolute; top: 42%; left: 50%; width: 8px; height: 14px; border-radius: 2px; background: var(--k); animation: papel 1.5s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes papel { to { transform: translate(var(--x), var(--y)) rotate(var(--g)); opacity: 0; } }

/* bienvenida */
.ob-w { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(16px + var(--sat)) 20px calc(20px + var(--sab)); max-width: 560px; margin: 0 auto; }
.ob-top { display: flex; align-items: center; gap: 12px; height: 44px; }
.ob-pr { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.ob-pr i { height: 4px; border-radius: 9px; background: var(--s3); overflow: hidden; position: relative; }
.ob-pr i::after { content: ''; position: absolute; inset: 0; background: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.ob-pr i.on::after { transform: none; }
.ob-c { display: grid; align-content: center; gap: 18px; padding: 20px 0; animation: entra .45s var(--ease); }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }
.ob-c h1 { font-size: clamp(30px, 8.4vw, 40px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.ob-c h1 em { font-style: normal; color: var(--acc-t); }
.ob-c > p { color: var(--tx2); font-size: 16px; max-width: 42ch; text-wrap: pretty; }
.ob-op { display: grid; gap: 10px; }
.ob-op button { display: grid; grid-template-columns: 44px 1fr 22px; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line); text-align: left; transition: box-shadow .15s, transform .15s var(--ease), background .2s; }
.ob-op button b { display: block; font-weight: 600; font-size: 15.5px; } .ob-op button small { color: var(--tx2); font-size: 13px; }
.ob-op button .ck { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line2); display: grid; place-items: center; color: transparent; transition: all .2s var(--ease); }
.ob-op button .ck svg { width: 12px; height: 12px; stroke-width: 3; }
.ob-op button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--acc-t); background: var(--acc-bg); transform: scale(1.01); }
.ob-op button[aria-pressed="true"] .ck { background: var(--acc); color: var(--on-acc); box-shadow: none; }
.ob-f { display: grid; gap: 8px; }
.ob-arte { height: 190px; border-radius: 28px; position: relative; overflow: hidden; background: radial-gradient(90% 120% at 20% 0%, var(--acc-glow), transparent 60%), var(--s1); box-shadow: inset 0 0 0 1px var(--line2); display: grid; place-items: center; }
.ob-arte .mini { width: 78%; display: grid; gap: 10px; }
.ob-arte .mini b { font-size: 34px; font-weight: 600; letter-spacing: -.05em; }
.ob-arte .mini .bs { display: flex; align-items: flex-end; gap: 7px; height: 60px; }
.ob-arte .mini .bs i { flex: 1; border-radius: 5px; background: var(--acc); opacity: .9; height: var(--h); animation: sube .8s var(--ease) backwards; animation-delay: calc(var(--n) * 70ms); transform-origin: bottom; }
@keyframes sube { from { transform: scaleY(0); } }
.demo-esp { padding: 16px; border-radius: 22px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--line2); display: grid; gap: 12px; transition: background .3s; }
.demo-esp .esp { margin: 0; background: var(--s2); }
.demo-esp .fila { display: flex; justify-content: space-between; font-size: 14px; color: var(--tx2); }
.demo-esp .fila b { color: var(--tx); font-weight: 600; }

.carga { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--tx2); font-size: 14px; text-align: center; padding: 24px; }
.carga i { width: 54px; height: 54px; border-radius: 18px; background: var(--acc); animation: late 1.1s ease-in-out infinite alternate; }
@keyframes late { to { transform: scale(.86); opacity: .6; } }
.vista { animation: vista .3s var(--ease); }
@keyframes vista { from { opacity: 0; transform: translateY(6px); } }
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.t th { text-align: left; font-weight: 500; color: var(--tx2); padding: 8px 6px; font-size: 12.5px; }
table.t td { padding: 9px 6px; border-top: 1px solid var(--line); }
table.t td.n, table.t th.n { text-align: right; white-space: nowrap; }
.iva-eq { display: grid; gap: 10px; }
.iva-eq .l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.iva-eq .l span { color: var(--tx2); } .iva-eq .l b { font-weight: 600; font-size: 18px; letter-spacing: -.03em; }
.iva-eq .l.tot { border-top: 1px solid var(--line2); padding-top: 12px; } .iva-eq .l.tot b { font-size: 28px; }
.cx { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--s2); font-size: 13px; text-decoration: none; width: 100%; text-align: left; }
.cx .p { width: 9px; height: 9px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 4px var(--pos-bg); flex: none; }
.cx.atrasada .p, .cx.sin_sincronizar .p { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-bg); } .cx.error .p { background: var(--neg); box-shadow: 0 0 0 4px var(--neg-bg); } .cx.sin_conexion .p { background: var(--tx3); box-shadow: none; }
.cx div { min-width: 0; flex: 1; } .cx b { display: block; font-weight: 600; } .cx small { color: var(--tx2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linea3 { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .linea3 { grid-template-columns: repeat(3, 1fr); } }
.paso { padding: 14px; border-radius: 16px; background: var(--s2); display: grid; gap: 4px; }
.paso small { color: var(--tx2); font-size: 12.5px; } .paso b { font-size: 21px; font-weight: 600; letter-spacing: -.03em; } .paso em { font-style: normal; font-size: 12.5px; color: var(--tx2); }
.paso.si { background: var(--pos-bg); } .paso.si small { color: var(--pos); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; } .area-l, .area-f { opacity: 1; } }
@media print { .rail, .tabs, .top, .esp, .per, .fab, .btn { display: none !important; } body { background: #fff; color: #000; } }