/* Colour scale of money (docs/propuesta-tarjetas-2.md §2): m0 en mano … m5 especulativo (green: money), m6–m8 debts by harm (red: danger);
   mcr: the available credit (hatched). --dng: the red of danger (warnings, losses), apart from the coral of the expenses (--exp) */
:root{--m0:#1e8e3e;--m1:#13917f;--m2:#1f77c9;--m3:#5b4fc4;--m4:#c99400;--m5:#e07a10;--m6:#e2541c;--m7:#d21f1f;--m8:#8e0b0b;--mcr:repeating-linear-gradient(135deg,var(--m5) 0 5px,#fbe3c8 5px 10px);--dng:var(--m7);--inc:var(--m0);--exp:#d9485f;--inv:var(--m4);--bal:var(--m1);--debt:var(--m7);--prop:var(--m3);--nwpos:var(--m0);--nwzero:#8a94a0;--nwneg:var(--m7);--bg:#eceff2;--card:#fff;--ink:#17222d;--mut:#66727e;--line:#d8dee4;--acc:#1c4e80;--tr:#64748b;--sh:rgba(0,0,0,.07);--s1:var(--m2);--s2:var(--m4);--s3:var(--m1);--s4:var(--m3);--s5:var(--m5);--s6:var(--m0);--s7:var(--tr);--s8:var(--acc);--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2366727e'/%3E%3C/svg%3E")}
/* Dark theme: the system's (prefers-color-scheme) unless «Claro» was chosen, or «Oscuro» chosen (Herramientas › Apariencia, data-theme on <html>) */
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--m0:#4cc26a;--m1:#3cc4b0;--m2:#5aa4f0;--m3:#9a8cf0;--m4:#f2c230;--m5:#ff9a3c;--m6:#ff7a50;--m7:#ff5252;--m8:#c84040;--mcr:repeating-linear-gradient(135deg,var(--m5) 0 5px,#4a3420 5px 10px);--exp:#ff7088;--nwzero:#a5b2be;--bg:#1d252e;--card:#2a3540;--ink:#eef2f5;--mut:#a5b2be;--line:#3f4c59;--acc:#7cb2e6;--tr:#94a3b8;--sh:rgba(0,0,0,.35);--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23a5b2be'/%3E%3C/svg%3E")}}
:root[data-theme=dark]{--m0:#4cc26a;--m1:#3cc4b0;--m2:#5aa4f0;--m3:#9a8cf0;--m4:#f2c230;--m5:#ff9a3c;--m6:#ff7a50;--m7:#ff5252;--m8:#c84040;--mcr:repeating-linear-gradient(135deg,var(--m5) 0 5px,#4a3420 5px 10px);--exp:#ff7088;--nwzero:#a5b2be;--bg:#1d252e;--card:#2a3540;--ink:#eef2f5;--mut:#a5b2be;--line:#3f4c59;--acc:#7cb2e6;--tr:#94a3b8;--sh:rgba(0,0,0,.35);--arr:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23a5b2be'/%3E%3C/svg%3E")}
:root{color-scheme:light dark}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}   /* native controls and scrollbars follow the theme */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
h1,h2{font-family:Georgia,"Iowan Old Style",serif;font-weight:600;margin:0}
h1{font-size:22px}h2{font-size:18px;margin:26px 0 10px}
/* Accent colours (one set per theme, same hues): --inc income, --exp expenses, --inv investments, --bal balance, --debt debts, --prop properties,
   net worth --nwpos/--nwzero/--nwneg by its sign (see nwColor), --tr transfers; --acc is the UI accent (buttons, tab bar) */
/* TOP: same height in every tab; caption on top and the tab tools (or its summary) centred below */
.top{background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 2px 10px var(--sh)}
.ti{max-width:920px;margin:auto;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 12px;min-height:calc(176px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:8px}
.tb{flex:1;display:flex;flex-direction:column;justify-content:center;gap:8px}
.cap{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.cap span{font-weight:400;letter-spacing:0;text-transform:none}.cap .capv{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
/* Patrimonio cards: accent on top like the KPI cards, totals, and the items of «Ver todo» (name and amount, bar, detail) */
.nwc{border-top:4px solid var(--c)}
.tl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;font-size:14px}.tl b{font-size:19px;font-variant-numeric:tabular-nums}
.its{border-top:1px solid var(--line);margin-top:6px}
.it{padding:9px 0;border-bottom:1px solid var(--line)}.it:last-child{border:0}
.ih{display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:14px}.ih>b{font-variant-numeric:tabular-nums;white-space:nowrap}
.it .tr{margin:6px 0 3px}.it small{font-size:12px}
.top .kpis{--g:8px}.top .kpi{padding:7px 10px;border-top-width:3px}.top .kpi span{font-size:12px}.top .kpi b{font-size:17px}
.tools{display:grid;grid-template-columns:1fr;gap:8px}   /* Movimientos: its three actions, one per row on the phone, three equal columns on a wide screen */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tabs .btn{padding:10px 6px}
/* Version banner (controllers/app.js onVer): below the TOP, until the page is reloaded */
.ban{max-width:920px;margin:10px auto 0;padding:10px 14px;display:flex;gap:12px;align-items:center;justify-content:space-between;background:var(--card);border:1px solid var(--exp);border-left:5px solid var(--exp);border-radius:8px;font-size:14px}
.ban[hidden]{display:none}
@media(max-width:952px){.ban{margin:10px 16px 0}}
/* Harm of a debt (views/net-worth.js harmTag): a small badge in the colour of its level */
.harm{display:inline-block;padding:0 7px;border-radius:9px;border:1px solid var(--c);color:var(--c);font-size:11px;font-weight:700;line-height:17px;white-space:nowrap}
/* Check box with its text on one line (forms) */
.chk{display:flex!important;gap:8px;align-items:center;color:var(--ink)}.chk input{width:auto}
/* Patrimonio: liquidity bar (views/net-worth.js liqBar) and its legend; items that open their form */
.lbar{display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--line);margin:4px 0 10px}.lbar i{display:block;height:100%}
.lq{display:grid;grid-template-columns:12px 1fr auto 42px;gap:8px;align-items:baseline;padding:4px 0;font-size:14px}.lq>i{width:12px;height:12px;border-radius:3px;align-self:center}.lq>small{text-align:right}.lq>b{font-variant-numeric:tabular-nums}
.it[role=button]{cursor:pointer}.it[role=button]:hover b:first-child{text-decoration:underline}
/* ⚙ Herramientas, top right of the TOP (controllers/app.js render); a dot when there are warnings */
.ti{position:relative}.gear{position:absolute;top:calc(4px + env(safe-area-inset-top,0px));right:8px;background:none;border:0;font-size:20px;line-height:1;color:var(--mut);cursor:pointer;padding:6px}
.gear.on{color:var(--acc)}.gear.dot::after{content:'';position:absolute;top:5px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--exp)}
/* the caption leaves room for the ⚙; sub-tabs of Productos as chips that wrap */
.ti>.cap{padding-right:34px}.chips{display:flex;flex-wrap:wrap;gap:6px}.chips .btn{flex:1 1 auto}
/* «＋ Añadir» wizard: one big button per kind of thing */
.wiz{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wiz .btn{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:12px}.wiz small{font-weight:400;color:var(--mut);font-size:12px}
@media(max-width:420px){.wiz{grid-template-columns:1fr}}
/* Patrimonio «Ver todo» grouped by institution: the header of each group with its subtotal */
.grp{display:flex;justify-content:space-between;gap:10px;padding:10px 0 2px;font-size:13px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}.grp b{font-variant-numeric:tabular-nums;text-transform:none;letter-spacing:0}
/* The lines of a card under it (Productos) */
.row.line{padding-left:22px;background:var(--bg)}
/* CONTENT */
main{max-width:920px;margin:auto;padding:12px 16px 0}
nav{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
nav[hidden]{display:none}   /* the login screen (features/acceso): display:flex would show it anyway */
nav button{flex:1;min-width:0;white-space:nowrap;padding:14px 4px;border:0;background:none;color:var(--mut);font:inherit;font-weight:600;cursor:pointer}
@media(max-width:420px){nav button{flex:1 1 auto;font-size:13px;padding:14px 4px}}   /* each name takes the room it needs: the four fit on a 360-375 px phone */
@media(max-width:340px){nav button{font-size:12px;padding:14px 2px}}
nav button.on{color:var(--acc);box-shadow:inset 0 3px var(--acc)}
button,input,select{font:inherit;color:inherit}
.btn{background:var(--acc);color:var(--card);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
.btn.sec{background:none;border:1px solid var(--line);color:var(--ink)}
.cw{position:relative;overflow:hidden}
.lc{display:block;max-width:100%;height:auto;margin:0 auto;touch-action:pan-y;border-radius:6px}
.tip{position:absolute;top:4px;width:max-content;z-index:3;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.2);pointer-events:none;max-width:min(280px,72%)}
.tip div+div{margin-top:3px}.tip b{font-variant-numeric:tabular-nums}
.tk{display:inline-block;width:14px;border-top:3px solid;vertical-align:middle;margin-right:6px}
.lg{display:flex;flex-direction:column;gap:5px;font-size:13px;padding:8px 0 2px}
.lgk{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:2px}
.lgi{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.sw{display:inline-block;width:18px;border-top:3px solid;vertical-align:middle;margin-right:2px;align-self:center}
.seg{display:flex;gap:6px;align-items:center}
.sw.dash{border-top-style:dashed}
.scr{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin:10px 0;font-size:14px}
textarea{font:inherit;color:inherit;resize:vertical}
.kpi small{display:block;font-size:12px;color:var(--mut);margin-top:2px}
.kpi span small{display:inline;margin:0;white-space:nowrap}   /* a note in the title («Ahorro · 10 %») stays on its line: every card keeps its figure at the same height */
.sub{font-size:14px;font-weight:600;margin:18px 0 2px;color:var(--ink)}
.crow{display:grid;grid-template-columns:96px 1fr auto;gap:8px;margin:6px 0}
.prow{border:1px solid var(--line);border-radius:10px;padding:0 10px 10px;margin:8px 0}
.btn:disabled{opacity:.5;cursor:wait}
.btn.dng{background:none;border:1px solid var(--exp);color:var(--exp)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
input,select,textarea{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%}
select:not([multiple]){appearance:none;-webkit-appearance:none;background-image:var(--arr);background-repeat:no-repeat;background-position:right 12px center;background-size:8px 5px;padding-right:28px}   /* the same ▾ as the drop-downs that search (.sf-box) */
.bar input,.bar select{width:auto;max-width:100%}
/* Drop-downs that shrink as the user types (controllers/selfilter.js) */
.sf{display:block;position:relative}.sf-native{display:none!important}
.sf-box{display:block;position:relative}.sf-box::after{content:'▾';position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--mut);pointer-events:none;font-size:13px}
.sf-in{padding-right:28px;text-overflow:ellipsis;cursor:pointer}.sf-in:focus{cursor:text}
.sf-list{margin-top:4px;border:1px solid var(--line);border-radius:8px;background:var(--card);max-height:min(45vh,320px);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 6px 18px var(--sh);color:var(--ink);text-align:left}
.sf-opt{padding:10px 12px;cursor:pointer;border-top:1px solid var(--line);font-size:15px}.sf-opt:first-child{border-top:0}
.sf-opt[aria-selected=true]{background:var(--bg)}.sf-opt.cur{font-weight:600}.sf-opt[aria-disabled]{color:var(--mut);cursor:default}.sf-add{color:var(--acc)}
.sf-grp{padding:8px 12px 2px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}.sf-none{padding:10px 12px;color:var(--mut)}
.bar .sf{display:inline-block;flex:0 1 17em;min-width:11em;max-width:100%}.bar .sf-in{width:100%}.bar .sf-list{position:absolute;z-index:30;left:0;right:0;min-width:15em}
@media(pointer:coarse){.sf-in,select{font-size:16px}}   /* below 16px iOS zooms the page on focus; both kinds of drop-down alike */
/* KPI cards: a wrapping flex row; each card takes an equal share but never more than 1/2 of the row (1/4 on desktop), so a lone or last card doesn't stretch */
.kpis{--g:10px;display:flex;flex-wrap:wrap;gap:var(--g)}
.kpi{flex:1 1 0;min-width:calc((100% - var(--g))/2);max-width:calc((100% - var(--g))/2);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;border-top:4px solid var(--c)}
.kpi span{color:var(--mut);font-size:13px}.kpi b{display:block;font-size:20px;font-variant-numeric:tabular-nums}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px}
.br{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.br:last-child{border:0}.br b{font-variant-numeric:tabular-nums}
.tr{height:10px;background:var(--bg);border-radius:5px;overflow:hidden}.tr i{display:block;height:100%}
.hist{display:flex;gap:8px;align-items:flex-end;height:140px;padding:10px 0}
.hist div{flex:1;min-width:0;text-align:center;font-size:12px;color:var(--mut);white-space:nowrap;overflow:hidden}   /* min-width:0: the columns never widen the card */
@media(max-width:480px){.hist{gap:4px}}
.hist .g{display:flex;gap:2px;align-items:flex-end;height:110px;justify-content:center}
.hist .g i{width:30%;min-height:2px;border-radius:3px 3px 0 0}
.row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.row:last-child{border:0}.row .a{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}.row small{color:var(--mut)}
.mut{color:var(--mut)}
.eur{font-size:12px;font-weight:400;color:var(--mut);white-space:nowrap}
dialog{border:0;border-radius:14px;background:var(--card);color:var(--ink);width:min(520px,94vw);max-height:92vh;padding:18px}
dialog::backdrop{background:rgba(0,0,0,.5)}
label{display:block;margin:10px 0 0;font-size:13px;color:var(--mut)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.busy{width:auto;min-width:220px;max-width:min(360px,86vw);text-align:center;padding:24px 28px}
.busy p{margin:14px 0 0;color:var(--mut);font-size:14px}
.spin{width:40px;height:40px;margin:auto;border:4px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.empty{text-align:center;padding:40px 10px;color:var(--mut)}
.sm{padding:4px 10px;font-size:13px}
@media(min-width:760px){
 nav{justify-content:center}
 nav button{flex:none;padding:14px 32px}
 .ti{min-height:132px}
 .kpi{min-width:0;max-width:calc((100% - 3*var(--g))/4)}
 .tools{grid-template-columns:repeat(3,1fr)}
 .tabs{display:flex;flex-wrap:wrap}.tabs .btn{padding:10px 16px}
 .br{grid-template-columns:170px 1fr auto}
}
/* «Tu cuenta» (features/acceso): the recovery codes, the key of the two-step verification, the open sessions */
pre.codes{font-size:15px;line-height:1.6;padding:10px 14px;background:var(--bg);border:1px solid var(--line);border-radius:8px;width:max-content;max-width:100%;overflow:auto}
code.secret{font-size:14px;word-break:break-all}
ul.sesiones{padding-left:18px;margin:6px 0 10px}ul.sesiones li{margin:6px 0}
/* «Deshacer» (controllers/deshacer.js): above the tab bar, a moment after an action is saved */
.undo{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px);padding:8px 8px 8px 14px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);font-size:14px;white-space:nowrap}
.undo[hidden]{display:none}
.undo span{overflow:hidden;text-overflow:ellipsis}
.undo .x{border:0;background:none;color:var(--mut);font:inherit;cursor:pointer;padding:4px 6px}