/* Finanzas del hogar — libro contable moderno: petróleo + caléndula sobre papel mineral */
:root{
  --bg:#F1F4F3;--card:#fff;--fg:#14201E;--mut:#5D6C68;--bd:#DAE2DF;--bd2:#E8EDEB;
  --acc:#0B6275;--acc2:#074757;--soft:#E7F0F2;--gold:#E3A72F;--goldsoft:#FFF5DC;
  --red:#B03A2A;--upbg:#F8E3DF;--dn:#2A7A4B;--dnbg:#DDF0E4;--amber:#FFF5DC;
  --side:#10252B;--sidefg:#A9BFC4;--shadow:0 1px 2px rgba(16,37,43,.05),0 4px 14px rgba(16,37,43,.04);
  --r:12px;
}
/* Oscuro (tono del menú lateral) por defecto en todos los dispositivos; se puede cambiar a claro en Hogar > Apariencia (se guarda en cada dispositivo) */
:root:not([data-theme="light"]){
  --bg:#0C1A1F;--card:#122A31;--fg:#E5EEEC;--mut:#92A9AD;--bd:#25454D;--bd2:#1B343B;
  --acc:#5CBBD0;--acc2:#8AD3E3;--soft:#16363F;--gold:#EDB94B;--goldsoft:#2E2814;
  --red:#F08A7A;--upbg:#3A1E1A;--dn:#6FCF97;--dnbg:#14301F;--amber:#2E2814;
  --side:#10252B;--shadow:0 1px 2px rgba(0,0,0,.25);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:14.5px/1.45 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
h1{font:600 24px/1.2 "Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;letter-spacing:-.4px;margin:0 0 6px}
h2{font-size:17px;font-weight:600;letter-spacing:-.2px;margin:0 0 8px}
h3{font-size:15px;font-weight:600;letter-spacing:-.1px;margin:0 0 8px}
a{color:var(--acc)}
.num{font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
.mut{color:var(--mut)}.sm{font-size:13px}.xs{font-size:12px}.red{color:var(--red)}.grn{color:var(--dn)}.b{font-weight:600}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}

/* ---- estructura ---- */
.layout{display:flex;min-height:100vh}
.side{width:224px;flex:none;background:var(--side);padding:20px 12px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow:auto}
.side .logo{display:flex;align-items:center;gap:10px;font:600 17px/1 "Segoe UI Variable Display","Segoe UI",sans-serif;color:#F2F7F6;letter-spacing:-.2px;margin:2px 8px 18px}
.side .logo i{width:26px;height:26px;border-radius:8px;background:var(--gold);color:#10252B;display:grid;place-items:center;font:700 14px/1 "Segoe UI",sans-serif;font-style:normal}
.side a{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:9px;color:var(--sidefg);cursor:pointer;text-decoration:none;position:relative;transition:background .12s,color .12s}
.side a svg{width:18px;height:18px;flex:none;opacity:.8}
.side a:hover{background:rgba(255,255,255,.06);color:#F2F7F6}
.side a.on{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.side a.on::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.side a.on svg{opacity:1;color:var(--gold)}
.side .gap{height:1px;background:rgba(255,255,255,.08);margin:8px 10px}
.side .who{margin-top:auto;font-size:12px;color:#7F979D;padding:10px 8px 2px;border-top:1px solid rgba(255,255,255,.08);overflow:hidden;text-overflow:ellipsis}
main{flex:1;min-width:0;padding:28px 32px 70px}
.wrap{max-width:940px;margin:0 auto}

/* ---- superficies ---- */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.hl{background:var(--soft);border-radius:10px;padding:10px 12px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:10px 0 16px}
.kpis .card{margin:0;padding:14px 16px}
.kpis .card .b{font:600 24px/1.2 "Segoe UI Variable Display","Segoe UI",sans-serif!important;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.kpis .card .xs.mut:first-child{font-size:12.5px}

/* ---- controles ---- */
.btn{background:var(--acc);color:#fff;border:0;border-radius:9px;padding:9px 16px;font:inherit;font-weight:600;cursor:pointer;transition:background .12s,transform .05s}
.btn:hover{background:var(--acc2)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:default}
:root:not([data-theme="light"]) .btn{color:#08181B}
:root:not([data-theme="light"]) .btn.ghost{color:var(--fg)}
.btn.ghost{background:var(--card);color:var(--fg);border:1px solid var(--bd)}.btn.ghost:hover{background:var(--soft);border-color:var(--acc)}
.btn.sm{padding:5px 11px;font-size:13px}
input,select{font:inherit;color:inherit;background:var(--card);border:1px solid var(--bd);border-radius:9px;padding:8px 10px;width:100%;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus{outline:0;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--acc)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.sp{justify-content:space-between}
.col{display:flex;flex-direction:column;gap:10px}
.auth{max-width:380px;margin:12vh auto;padding:0 16px}
.err{color:var(--red);font-size:13px;margin:6px 0}
.warn{background:var(--amber);border-radius:9px;padding:9px 12px;font-size:13px;margin-top:8px;border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:1px solid var(--bd);border-radius:99px;padding:5px 14px;cursor:pointer;background:var(--card);font-size:13.5px;transition:background .12s,border-color .12s}
.chip:hover{border-color:var(--acc);color:var(--acc2)}
.chip.on{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:600}
:root:not([data-theme="light"]) .chip.on{color:#08181B}
.undo{display:flex;align-items:center;gap:8px;margin:0 0 16px;padding:8px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:#DCE8EA;cursor:pointer;font:inherit;font-size:13.5px;transition:background .12s}
.undo:hover:not(:disabled){background:rgba(255,255,255,.1);border-color:var(--gold)}.undo:disabled{opacity:.4;cursor:default}.undo kbd{margin-left:auto;font:inherit;font-size:11px;color:#8FA9AF}
.undo svg{width:16px;height:16px}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#10252B;color:#fff;padding:11px 18px;border-radius:11px;z-index:99;box-shadow:0 10px 30px rgba(0,0,0,.25);font-size:14px}
.toast button{margin-left:16px;background:none;border:0;color:var(--gold);font:inherit;font-weight:700;cursor:pointer;text-decoration:underline}
.drop{border:2px dashed var(--bd);border-radius:var(--r);padding:34px;text-align:center;cursor:pointer;background:var(--card);transition:border-color .12s,background .12s}
.drop:hover,.drop.over{border-color:var(--acc);background:var(--soft)}
.list a.item{display:flex;justify-content:space-between;gap:10px;padding:13px 16px;background:var(--card);border:1px solid var(--bd);border-radius:11px;margin-bottom:8px;cursor:pointer;transition:border-color .12s,transform .12s}
.list a.item:hover{border-color:var(--acc)}

/* ---- tablas ---- */
.tblw{overflow:auto;border:1px solid var(--bd);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:760px}
th,td{padding:0;border-bottom:1px solid var(--bd2)}
tbody tr:last-child td{border-bottom:0}
th{padding:11px 14px;text-align:right;font-weight:600;font-size:13px;color:var(--mut);background:var(--card);position:sticky;top:0;z-index:2;border-bottom:1px solid var(--bd)}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--card);z-index:1}
th:first-child{z-index:3}
td:first-child{padding:6px 14px;min-width:190px}
tbody tr:hover td{background:color-mix(in srgb,var(--soft) 55%,var(--card))}
tr.sec td{background:var(--soft);font-size:12.5px;font-weight:700;color:var(--acc2);padding:7px 14px;letter-spacing:.1px;border-bottom:1px solid var(--bd)}
tr.sec:hover td{background:var(--soft)}
tr.tot td{padding:9px 14px;font-weight:600;border-top:1px solid var(--fg)}
tr.big td{background:var(--soft);font-weight:700;border-top:3px double var(--fg)}
tr.big:hover td{background:var(--soft)}
tr.mutr td{color:var(--mut);font-weight:400;border-top:0}
tr.sub td{color:var(--mut);background:transparent;font-size:13px}tr.sub td:first-child{background:var(--card)}tr.sub td:first-child{padding-left:32px}tr.sub .cell,tr.sub .nm{color:var(--mut)}
tr.sub td:first-child .nm::before{content:"↳ ";opacity:.6}
tr.sumrow td{font-weight:700;background:var(--soft);border-top:1px solid var(--bd)}tr.sumrow .cell{font-weight:700}
tr.addr td{padding:4px 14px;font-size:13px}
th.curm{color:var(--acc2);background:var(--goldsoft);box-shadow:inset 0 3px 0 var(--gold)}
td.curm{background:color-mix(in srgb,var(--goldsoft) 70%,var(--card))}
tr.big td.curm,tr.sumrow td.curm{background:color-mix(in srgb,var(--gold) 22%,var(--soft))}
tr.sec td.curm{background:var(--soft)}
tr.sub td.curm,tbody tr td.curm{background:color-mix(in srgb,var(--goldsoft) 70%,var(--card))}
tr.big td.curm,tr.sumrow td.curm{background:color-mix(in srgb,var(--gold) 22%,var(--soft))}
tbody tr:hover td.curm{background:color-mix(in srgb,var(--gold) 16%,var(--card))}
/* fila del mes en curso (pantalla ALI) */
tr.currow td{background:color-mix(in srgb,var(--goldsoft) 70%,var(--card))}
tr.currow td:first-child{box-shadow:inset 3px 0 0 var(--gold);color:var(--acc2)}
.cell{display:block;width:100%;padding:7px 10px;text-align:right;cursor:pointer;border-radius:7px;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .1s}
.cell:hover{background:color-mix(in srgb,var(--acc) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}
.cell.ro{cursor:default}.cell.ro:hover{background:none;box-shadow:none}.cell.zero{color:var(--mut);opacity:.7}
.cell-in{text-align:right;padding:6px 8px;border-radius:8px}
.pull{border:0;background:none;color:var(--acc);cursor:pointer;font-size:14px}
.vt td{padding:6px 14px}.vt th{padding:11px 14px}.vt td:first-child{padding:6px 14px}
a.nm{color:inherit;text-decoration:underline dotted;text-underline-offset:3px}
.ed{border:0;background:none;cursor:pointer;color:var(--mut);opacity:0;margin-left:6px;font-size:13px;transition:opacity .1s,color .1s}
tr:hover .ed,.ed:focus-visible{opacity:.9}.ed:hover{color:var(--acc)}.ed svg{display:block}
.ed[data-delc]:hover,.ed[data-delm]:hover,.ed[data-del]:hover,.ed[data-dl]:hover,.ed[data-clr]:hover{color:var(--red)}
.tagi{font-size:10.5px;font-weight:600;color:var(--mut);border:1px solid var(--bd);border-radius:999px;padding:1px 8px;margin-left:8px;white-space:nowrap;background:var(--card)}
.tagi.on{color:var(--acc2);border-color:currentColor}

/* ---- variaciones / indicadores ---- */
.pill{display:inline-block;border-radius:99px;padding:2px 9px;font-size:12.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.up{background:var(--upbg);color:var(--red)}.pill.dn{background:var(--dnbg);color:var(--dn)}.pill.eq{background:var(--bd2);color:var(--mut)}
.upt{color:var(--red);font-weight:600}.dnt{color:var(--dn);font-weight:600}
.vr{font-weight:600;white-space:nowrap}.vr.up{color:var(--red)}.vr.dn{color:var(--dn)}.vr.eq{color:var(--mut)}
.bar{height:6px;border-radius:4px;background:var(--bd2)}.bar i{display:block;height:100%;border-radius:4px;background:var(--acc)}.bar.b2 i{background:var(--gold)}
.kv{display:flex;justify-content:space-between;padding:3px 0}

/* ---- resumen de tarjeta ---- */
.tx{display:grid;grid-template-columns:1fr 120px 190px;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--bd2)}
.tx.sel{grid-template-columns:22px 1fr 120px 190px}.tx.sel input{margin:0;cursor:pointer}.tx.off>div,.tx.off .num{opacity:.45}
.rr{cursor:pointer;padding:6px 9px;border-radius:9px;transition:background .1s}.rr:hover{background:var(--soft)}.rr.on{background:var(--soft);box-shadow:inset 0 0 0 1px var(--acc)}
.rn{display:inline-flex;align-items:center;gap:9px}.rn input{margin:0;cursor:pointer}
.rr.off .num,.rr.off .rn span{opacity:.45}.rr.off .bar i{background:#94a3b8}
.prevr{cursor:default}.prevr:hover{background:none}
.cfbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:10px;background:var(--soft);margin-bottom:12px;border-left:3px solid var(--acc)}
.cfbar a{cursor:pointer;color:var(--acc2);text-decoration:underline;text-underline-offset:3px}

/* ---- ALI ---- */
table.al td,table.al th{padding:7px 6px;white-space:nowrap}table.al th{text-align:right;white-space:normal;line-height:1.2;vertical-align:bottom}table.al th:first-child,table.al th:nth-last-child(-n+2){text-align:left}
table.al .cell{display:inline-block;min-width:48px;text-align:right}table.al td:nth-last-child(2) .cell{text-align:left}
table.al tr:hover .ed{opacity:1!important}table.al{font-size:13px}

/* ---- hipotecario por años ---- */
tr.yr td{background:var(--soft);border-top:2px solid var(--acc);padding:10px 14px}
.yrn{font:700 18px/1 "Segoe UI Variable Display","Segoe UI",sans-serif;letter-spacing:-.3px;margin-right:14px}.yri{color:var(--mut);font-size:13px;margin-right:18px}.yri b{color:var(--fg)}

/* ---- ahorro ---- */
.ahgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:16px;align-items:start}@media(max-width:1000px){.ahgrid{grid-template-columns:1fr}}.ahgrid>div{min-width:0}
table.ah{width:100%;min-width:0;border-collapse:collapse;font-size:13.5px}
table.ah th{text-align:right;padding:9px 14px;color:var(--mut);font-weight:600;font-size:12.5px;position:static}table.ah th:first-child{text-align:left}
table.ah td{padding:3px 14px;border-top:1px solid var(--bd2);border-bottom:0}
table.ah td:first-child,table.ah th:first-child{min-width:0;position:static;background:transparent}
table.ah tr.big td{background:var(--soft)}table.ah tr:hover .ed{opacity:1}
table.ah .cell{display:inline-block;min-width:60px;text-align:right}
table.ah.side2 td{padding:3px 4px}table.ah.side2 td:last-child{width:28px;padding:0}table.ah.side2 td:nth-child(2){width:120px}
.lbl{cursor:text}.lbl:hover{text-decoration:underline dotted;text-underline-offset:3px}

/* ---- tarjetas unificadas ---- */
table.un td,table.un th{padding:8px 14px;vertical-align:top}table.un th:first-child,table.un td:first-child{min-width:230px}
tr.rb{cursor:pointer}tr.rb td:first-child{font-weight:600}
tr.sub td{font-size:13px}.caret{display:inline-block;width:14px;color:var(--mut);transition:transform .15s}

/* ---- ventanas ---- */
.ovl{position:fixed;inset:0;background:rgba(10,24,28,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.mdl{background:var(--card);border-radius:14px;padding:22px;width:min(480px,100%);max-height:86vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.rbrow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--bd2)}.rbrow:first-child{border-top:0}.rbn{flex:1;cursor:text;font-size:14px}.rbn:hover{text-decoration:underline dotted;text-underline-offset:3px}
.rbrow .ed{opacity:1}

.tblw.narrow{max-width:760px}.tblw.narrow table{min-width:0;width:100%}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.drop.webnote{cursor:default;padding:20px}.drop.webnote:hover{border-color:var(--bd);background:var(--card)}
/* ---- celular ---- */
@media (hover:none){.ed{opacity:.8!important}}
@media (max-width:720px){
  html{-webkit-text-size-adjust:100%}
  input,select{font-size:16px;padding:10px 12px}
  .layout{display:block}
  main{padding:14px 12px calc(86px + env(safe-area-inset-bottom));padding-top:calc(14px + env(safe-area-inset-top))}
  h1{font-size:21px}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;height:auto;z-index:40;flex-direction:row;gap:0;overflow-x:auto;overflow-y:hidden;padding:6px 6px calc(6px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.1);scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side .logo,.side .who,.side .gap,.side kbd{display:none}
  .side a{flex:0 0 auto;flex-direction:column;gap:3px;padding:6px 11px;min-width:64px;font-size:10.5px;text-align:center;border-radius:10px;white-space:nowrap}
  .side a svg{width:21px;height:21px}
  .side a.on::before{display:none}
  .side a.on{background:rgba(227,167,47,.16)}
  .undo{flex:0 0 auto;flex-direction:column;gap:3px;margin:0 4px 0 0;padding:6px 10px;min-width:56px;font-size:10.5px;border:0;background:transparent}
  .undo svg{width:21px;height:21px}
  .tblw{margin-left:-12px;margin-right:-12px;border-radius:0;border-left:0;border-right:0}
  table{min-width:0}
  td:first-child{min-width:104px;max-width:118px;padding:7px 6px 7px 12px;font-size:12.5px;line-height:1.25;box-shadow:1px 0 0 var(--bd2)}
  td:first-child{white-space:normal}td:first-child .ed{display:none;opacity:.9!important;padding:6px 7px}body.em td:first-child .ed{display:inline-block}
  .emb[aria-pressed=true]{background:rgba(227,167,47,.18);color:#fff}.emb[aria-pressed=true] svg{color:var(--gold)}
  td:first-child .vr{display:none}
  td,.cell{font-size:12.5px}td:not(:first-child){padding-left:2px;padding-right:2px}
  th{padding:9px 8px;font-size:12px;white-space:nowrap}
  table.ah td:first-child,table.ah th:first-child{max-width:none}
  tr.sec td,tr.tot td,tr.big td{padding-left:12px}
  .kpis{grid-template-columns:1fr 1fr;gap:8px}.kpis .card{padding:11px 12px}.kpis .card .b{font-size:19px!important}
  .card{padding:14px;border-radius:12px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:92vw}
  .tx,.tx.sel{gap:6px 8px}.tx{grid-template-columns:minmax(0,1fr) auto}.tx.sel{grid-template-columns:22px minmax(0,1fr) auto}.tx select{grid-column:1/-1;min-width:0;width:100%}.tx.sel select{grid-column:2/-1}
  main{overflow-x:clip}
  table.un td,table.un th{padding:8px 6px}table.un th:first-child,table.un td:first-child{min-width:108px;max-width:128px;padding-left:12px;white-space:normal}
  table.un th:first-child{font-size:11px;line-height:1.2}table.un td:first-child{font-size:12px;min-width:92px;max-width:104px;padding-right:4px}table.un td:first-child .caret{width:10px}
  tr.sub td:first-child{padding-left:20px}
  table.al td,table.al th{padding:7px 4px}
  table.vt{min-width:0!important}table.vt th{white-space:normal;line-height:1.15;padding:8px 5px;vertical-align:bottom}table.vt th:first-child{padding-left:12px}
  .auth{margin:8vh auto}
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-12px;margin-right:-12px;padding:0 12px 2px}.chip{flex:none}
  .row.sp{gap:8px}
}
@media (hover:none){.side a:hover{background:none;color:var(--sidefg)}.side a.on:hover{background:rgba(227,167,47,.16);color:#fff}}
.emb{display:none}@media (max-width:720px){.emb{display:flex}}

/* ---- estado de sincronización (celular) ---- */
.fhs{position:fixed;z-index:70;top:calc(8px + env(safe-area-inset-top));right:10px;max-width:calc(100vw - 20px);border:0;border-radius:999px;padding:6px 13px;font:600 12.5px/1.2 inherit;font-family:inherit;color:#fff;background:#5D6C68;box-shadow:0 2px 10px rgba(0,0,0,.22);cursor:pointer}
.fhs[hidden]{display:none}
.fhs.off{background:#8A5A00}.fhs.sync{background:var(--acc)}.fhs.ok{background:var(--dn)}.fhs.bad{background:var(--red)}
@media (prefers-reduced-motion:no-preference){.fhs.sync::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#fff;opacity:.9;animation:fhp 1s ease-in-out infinite}}
@keyframes fhp{50%{opacity:.25}}
@media (max-width:720px){.fhs{top:auto;right:auto;left:50%;transform:translateX(-50%);bottom:calc(78px + env(safe-area-inset-bottom));white-space:nowrap}}

#netdot{position:fixed;z-index:80;top:calc(7px + env(safe-area-inset-top));right:8px;width:10px;height:10px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 1px 4px rgba(0,0,0,.3)}
#netdot.on{background:#1FA45B}#netdot.off{background:#D8342B}
.act{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--bd2);color:var(--fg);font-size:13.5px}
.act:first-of-type{border-top:0}.act time{flex:none;color:var(--mut);font-size:12px;white-space:nowrap}.act i{color:var(--mut);font-style:normal}
/* Títulos de sección que acompañan al desplazarse hacia la derecha (celular) */
.stk{position:sticky;left:14px;display:inline-block;max-width:calc(100vw - 36px);vertical-align:top}
/* Modo privado */
body.priv .mny{user-select:none;-webkit-user-select:none}body.priv .mnyb{filter:blur(7px)}span.mny{display:inline-block}
body.priv .side .who,body.priv #content .hl,body.priv td input,body.priv .tx input{-webkit-text-security:disc;user-select:none}
.prv[aria-pressed=true]{background:rgba(227,167,47,.18);color:#fff}.prv[aria-pressed=true] svg{color:var(--gold)}
/* inflación */
.ib{border:1px solid var(--bd);background:var(--card);border-radius:var(--r);padding:10px 14px;margin:0 0 10px;box-shadow:var(--shadow)}
.ib .xs{margin-top:3px}
.tag{display:inline-block;border-radius:6px;padding:1px 7px;font-size:11.5px;font-weight:600;white-space:nowrap}
.tag.of{background:var(--dnbg);color:var(--dn)}.tag.ma{background:var(--upbg);color:var(--red)}.tag.es{background:var(--bd2);color:var(--mut)}
@media (max-width:720px){table.var1 .pill{padding:2px 6px;font-size:12px}table.var1 td{padding-left:3px;padding-right:3px}table.var1 th:nth-child(2),table.var1 td:nth-child(2){display:none}}
.istats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.istats>div{background:var(--bd2);border-radius:10px;padding:9px 10px}
.istats .b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
@media (max-width:720px){.istats .b{font-size:15px}.istats>div{padding:8px 7px}}
/* proyección y resumen */
.k2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px}.k2 .card{margin:0;padding:12px 14px}
.bar{height:10px;border-radius:9px;background:var(--bd2);overflow:hidden;margin:8px 0 4px}.bar i{display:block;height:100%;background:var(--acc)}
.cell.proj{font-style:italic;color:var(--mut)}
.est{color:var(--mut)}
@media (max-width:720px){.k2{grid-template-columns:1fr}}
table.un.mx th:first-child,table.un.mx td:first-child{min-width:64px}table.un.mx th{font-size:12px;line-height:1.2;font-weight:600}table.un.mx td.mut{color:var(--mut)}@media(max-width:700px){table.un.mx td,table.un.mx th{padding:7px 4px;font-size:12px}table.un.mx th:first-child,table.un.mx td:first-child{min-width:48px;max-width:60px}}

#kbar{position:fixed;left:0;top:0;z-index:60;display:none;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;background:var(--card);border-top:1px solid var(--bd);box-shadow:0 -2px 10px rgba(0,0,0,.25)}
#kbar button{flex:1;min-width:0;height:42px;border-radius:10px;border:1px solid var(--bd);background:var(--soft);color:var(--fg);font-size:20px;font-weight:600;padding:0}
#kbar button.ok{flex:2;background:var(--acc);border-color:var(--acc);color:#08181B;font-size:15px}
#kbar #kb-top{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:2px 4px 4px}#kbar #kb-top:has(#kb-f:empty){display:none}#kbar #kb-f{font-size:20px;font-weight:600;color:var(--fg);font-variant-numeric:tabular-nums;word-break:break-all;line-height:1.3}#kbar #kb-res{margin-left:auto;font-size:18px;font-weight:700;color:var(--acc2);white-space:nowrap}
@media(min-width:721px){.undo.u1{margin-bottom:6px}}

tr.excl td:not(:first-child){opacity:.45}
.btn.ghost.on{border-color:var(--acc);color:var(--acc)}

/* Notas en los importes, letras N/C y orden de conceptos */
.nt{display:inline-flex;align-items:center;flex:none;color:var(--gold);cursor:help;margin:0 3px 0 6px}.nt svg{display:block}
.nbtn{border:0;background:none;color:var(--mut);cursor:pointer;padding:4px 6px;display:inline-flex;align-items:center;flex:none}.nbtn:hover,.nbtn.on{color:var(--gold)}
.npop{position:absolute;z-index:60;width:250px;max-width:calc(100vw - 16px);background:var(--card);border:1px solid var(--acc);border-radius:12px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:13px;line-height:1.35;text-align:left;color:var(--fg)}
.npop .nh{font-size:11px;color:var(--mut);margin-bottom:5px}
.npop textarea{width:100%;box-sizing:border-box;min-height:60px;resize:none;font:inherit}
.npop .nb{display:flex;gap:10px;align-items:center;margin-top:8px}.npop .nb a{font-size:12px;color:var(--mut)}.npop .nb .btn{margin-left:auto}
.npop .chs{display:flex;gap:6px;margin-bottom:8px}.chp{border:1px solid var(--bd2,var(--bd));border-radius:999px;padding:3px 13px;font-weight:700;cursor:pointer;user-select:none}.chp.on{background:var(--gold);border-color:var(--gold);color:#1b1b1b}
.npop .mvb{display:flex;gap:14px;font-size:12px}.npop .mvb a{color:var(--mut);text-decoration:none}.npop .mvb a:hover{color:var(--acc)}
sup.lt{font-size:7.5px;font-weight:800;color:var(--gold);margin-left:4px;letter-spacing:.3px;vertical-align:baseline;position:relative;top:-6px;line-height:0}sup.lt i{font-style:normal;margin-right:2px}
.nm.opt{cursor:pointer}
.ed.mvg{cursor:grab;letter-spacing:-2px;font-size:15px}.ed.mvg:active{cursor:grabbing}span.ed{display:inline-block;font-size:11px;user-select:none}span.ed.mvg{font-size:15px}
tr.dragging{opacity:.35}tr.dropb td{box-shadow:inset 0 2px 0 var(--acc)}tr.dropa td{box-shadow:inset 0 -2px 0 var(--acc)}
.row:has(>.nt){justify-content:flex-end}.row:has(>.nt) .cell,.row:has(>.nt) .cell-in{width:auto}

.pcin{width:58px;text-align:right;padding:3px 6px;font-size:13px}.pcin:not(:placeholder-shown){font-weight:600}
.how{background:var(--card2,rgba(255,255,255,.03));border-radius:10px;padding:10px 16px;margin-top:12px;font-size:13px;line-height:1.55}.how p{margin:6px 0}.how ol{margin:4px 0 6px;padding-left:20px}.how li{margin:2px 0}
.caret[data-ao]{cursor:pointer;user-select:none}

.npop .nh{display:flex;justify-content:space-between;align-items:center;gap:10px}.npop .nx{background:none;border:0;color:var(--mut);font-size:22px;line-height:1;padding:2px 8px;margin:-4px -8px -4px 0;cursor:pointer;border-radius:8px}.npop .nx:hover{color:var(--fg,#fff);background:rgba(255,255,255,.08)}
@media (hover:none){.npop .nx{font-size:26px;padding:4px 12px}}
.mne{display:inline-block;margin-left:6px;opacity:0;cursor:pointer;color:var(--mut);font-style:normal;font-size:11px;vertical-align:middle}.mne:hover{color:var(--acc);opacity:1!important}
tr:hover .mne,.tx:hover .mne,div:hover>.mne{opacity:.75}@media (hover:none){.mne{opacity:.6}}
.warnb{margin-top:10px;padding:9px 13px;border-radius:9px;border:1px solid #6b5420;background:rgba(232,182,74,.09);font-size:12.5px;line-height:1.5}.warnb div+div{margin-top:4px}
#ahw td:first-child{overflow-wrap:anywhere;word-break:break-word}
@media (max-width:700px){#ahw td:first-child{width:150px;min-width:130px;max-width:150px}#ahw tr.sub td:first-child{padding-left:14px!important;font-size:12px}}
.pcin.der::placeholder{color:var(--acc2,#e8b64a);opacity:1;font-weight:600}

.cpt{cursor:help;border-bottom:1px dotted var(--mut)}
.cpop{width:auto;min-width:230px;max-width:calc(100vw - 16px);pointer-events:none}
.cpop .cpr{display:grid;grid-template-columns:auto auto auto;gap:4px 12px;justify-content:space-between;padding:2px 0;font-variant-numeric:tabular-nums}
.cpop .cpr span:nth-child(2){text-align:right}
.cpop .cpt2{border-top:1px solid var(--bd,#333);margin-top:3px;padding-top:4px;font-weight:600}

.mcat{cursor:pointer;margin-left:6px;font-style:normal;color:var(--mut);padding:0 4px;border-radius:6px}
.mcat:hover{color:var(--fg);background:rgba(255,255,255,.08)}
.catpop select{width:100%}

/* Notas en el celular: ícono más grande y fácil de tocar sin abrir el importe; cuadro para leerla; nota visible al editar */
@media (hover:none){.nt{cursor:pointer;padding:9px 7px 9px 9px;margin:-9px 1px -9px -3px;-webkit-tap-highlight-color:transparent}.nt svg{width:16px;height:16px}}
.npop.nview{width:280px}.npop.nview .ntx{font-size:14px;max-height:50vh;overflow:auto}
.nprev{display:flex;gap:5px;align-items:flex-start;margin:0 0 4px auto;max-width:240px;padding:4px 7px;border-left:2px solid var(--gold);border-radius:4px;background:rgba(227,167,47,.08);font-size:12px;line-height:1.3;color:var(--fg);text-align:left;white-space:pre-wrap;cursor:pointer}.nprev svg{flex:none;color:var(--gold);margin-top:2px}
/* Tarjetas unificadas: importe limpio + globito de variación debajo */
table.un .uv{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
table.un tr.sub .uv{font-weight:500}
.vchip{display:inline-block;margin-top:4px;border-radius:99px;padding:1px 8px;font-size:11.5px;font-weight:600;line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--bd2);color:var(--mut)}
.vchip.up{background:var(--upbg);color:var(--red)}.vchip.dn{background:var(--dnbg);color:var(--dn)}
.seg{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--bd);border-radius:10px;padding:2px;background:var(--card)}
.seg .xs{padding:0 6px 0 6px}
.seg button{border:0;background:none;color:var(--fg);font:inherit;font-size:13px;padding:4px 11px;border-radius:8px;cursor:pointer}
.seg button.on{background:var(--acc);color:#fff;font-weight:600}
:root:not([data-theme="light"]) .seg button.on{color:#08181B}
@media (max-width:700px){.vchip{font-size:11px;padding:1px 6px}.seg{margin-left:0!important}}
.cell.ded{color:var(--red)}
/* marca N / C / ½ de las tarjetas en la Caja */
.ctag{flex:none;position:relative;margin-left:3px;min-width:14px;height:14px;padding:0 3px;border-radius:99px;border:1px solid var(--gold);background:var(--gold);color:#1b1b1b;font:700 8.5px/12px "Segoe UI",system-ui,sans-serif;cursor:pointer;align-self:center}
.ctag::after{content:"";position:absolute;inset:-7px}
.ctag.def{background:transparent;color:var(--gold);opacity:.75}
.ctag.tNC{background:color-mix(in srgb,var(--gold) 45%,transparent)}
.ctag:hover{opacity:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--gold) 35%,transparent)}
@media (hover:none){.ctag{min-width:15px;height:15px;line-height:13px;font-size:9px}}
.npop .chs .chp{white-space:nowrap}
/* importes con detalle en la vista filtrada */
.cell.fdc{cursor:pointer;display:inline-flex;align-items:center;justify-content:flex-end;gap:5px}
.cell.fdc svg{color:var(--gold);width:13px;height:13px;flex:none}
.cell.fdc:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
/* panel de detalle */
.fsheet{position:fixed;inset:0;z-index:80;background:rgba(5,15,18,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.fsheet.on{opacity:1}
.fsb{background:var(--card);color:var(--fg);border:1px solid var(--bd);border-radius:16px;width:min(560px,calc(100vw - 32px));max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.fsh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--bd2);font-size:15px}
.fsh .nx{background:none;border:0;color:var(--mut);font-size:26px;line-height:1;padding:2px 10px;cursor:pointer;border-radius:8px}
.fsc{padding:12px 16px 18px;overflow:auto;font-size:14px}
.fdr{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--bd2)}.fdr b{white-space:nowrap;font-variant-numeric:tabular-nums}
.fdr.fdtot{border-bottom:0;border-top:1px solid var(--fg);margin-top:4px;padding-top:8px;font-weight:700}
.fdh{margin:14px 0 4px;font-size:12px;font-weight:700;color:var(--acc2);text-transform:uppercase;letter-spacing:.3px}
.fdl{display:flex;flex-direction:column;gap:8px}
.fdi{border:1px solid var(--bd2);border-radius:10px;padding:9px 11px;background:color-mix(in srgb,var(--soft) 50%,var(--card))}
.fdt{display:flex;justify-content:space-between;gap:10px}.fdt span{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.fdg{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin-top:5px;font-size:13px}
@media (max-width:700px){.fsheet{align-items:flex-end}.fsb{width:100%;max-height:85vh;border-radius:16px 16px 0 0;padding-bottom:env(safe-area-inset-bottom)}}
th.ptot,td.ptot{border-left:2px solid var(--bd);font-weight:700}

/* Variaciones: aumento en $ y, debajo, en % (misma columna) */
table.var1 td.aum{white-space:nowrap}table.var1 .aump{margin-top:4px}
/* ---- Compras avisadas por Galicia ---- */
.side a .nbdg{position:absolute;top:4px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--gold);color:#10252B;font:700 11px/18px "Segoe UI",system-ui,sans-serif;font-style:normal;text-align:center}
@media (max-width:720px){.side a .nbdg{top:2px;right:6px}}
.pchip{display:block;margin:2px 0 0 auto;padding:1px 6px;border:0;border-radius:6px;background:transparent;color:var(--mut);font:italic 11.5px/1.3 inherit;cursor:pointer;white-space:nowrap}
.pchip:hover{background:var(--soft);color:var(--fg)}
.pchip.pn{color:var(--gold)}
.pcd{margin-bottom:10px;padding:14px 16px}
.pcd .pmer{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfl{display:flex;align-items:center;gap:10px;margin-top:6px}.pfl label{width:96px;flex:none}.pfl select{flex:1;min-width:0}
.ftb .nowrap{white-space:nowrap}
.plist{padding:4px 14px}.prow{padding:9px 0;border-bottom:1px solid var(--bd2)}.prow:last-child{border-bottom:0}
.pr1,.pr2{display:flex;justify-content:space-between;align-items:center;gap:10px}.pr1 .pmer{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pr1 .num{font-weight:600}
.pr2{margin-top:2px}.pr2>.xs{min-width:0}.pact{flex:none;display:flex;gap:6px;align-items:center}
.capc{padding:14px 16px}
.capnav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 6px;text-align:center}
.caprow{padding:9px 0;border-bottom:1px solid var(--bd2);cursor:pointer}.caprow:last-of-type{border-bottom:0}
.capbar{height:8px;border-radius:4px;background:var(--bd2);margin-top:6px;overflow:hidden}.capbar i{display:block;height:100%;border-radius:4px}
/* ---- Bolsillos ---- */
.wenv{padding:9px 0;border-bottom:1px solid var(--bd2);cursor:pointer}
.wenv .capbar{position:relative}.wenv .capbar u{position:absolute;top:0;bottom:0;width:2px;background:var(--fg);opacity:.55;text-decoration:none}
.wpend{border-top:1px solid var(--bd2);margin-top:4px}
.wbtns{display:flex;gap:4px;margin-top:6px}.wbtns .btn{flex:1;padding:4px 2px;min-height:0;font-size:12px;white-space:nowrap}
.wdep{margin:8px 0 6px;padding:10px 12px;border-radius:10px;background:var(--bd2)}
.wdep .wbig{font-size:20px}
.wsplit{display:flex;gap:3px;height:10px;margin-top:8px}.wsplit span{position:relative;border-radius:4px;background:color-mix(in srgb,var(--dn) 25%,transparent);overflow:hidden}
.wsplit span i{position:absolute;left:0;top:0;bottom:0;background:var(--dn)}.wsplit span.free{background:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--gold) 40%,transparent) 4px 6px)}
.wleg{margin-top:4px}
.wstat{margin:8px 0 0;font-size:13px;line-height:1.4}.wstat.red{color:var(--red)}.wstat.gold{color:var(--gold)}.wstat.grn{color:var(--dn)}
#eok:disabled{opacity:.45;cursor:not-allowed}
#espare[hidden]{display:none}