/* Layout + component styles.
   Base structure extracted from index_presupuesto_v3.html, plus a Fiscalis
   polish section at the end that applies to both the light and dark themes. */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--text);font:14px/1.45 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}

/* Layout */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{background:var(--surface);border-right:1px solid var(--border);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px}
.logo{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.brand b{display:block;font-size:14px}
.brand span{font-size:12px;color:var(--text-3)}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--text-2);text-decoration:none;font-weight:500}
.nav a:hover{background:var(--surface-3);color:var(--text)}
.nav a.on{background:var(--accent-soft);color:var(--accent-text)}
.nav svg{width:16px;height:16px;flex:none}
.side-foot{margin-top:auto;font-size:12px;color:var(--text-3);padding:8px 10px;border-top:1px solid var(--border)}
.main{min-width:0;padding:22px 28px 48px}
.top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.top h1{font-size:22px;margin:0 0 2px;letter-spacing:-.01em}
.top p{margin:0;color:var(--text-2)}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--border-strong);background:var(--surface);border-radius:8px;cursor:pointer;font-weight:500;font-size:13px;box-shadow:var(--shadow)}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn svg{width:15px;height:15px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:3px 8px;border-radius:999px;background:var(--fc-bg);color:var(--fc-text)}

/* Filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.field{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface)}
.field label{font-size:12px;color:var(--text-3);white-space:nowrap}
.field select,.field input{border:0;background:transparent;outline:none;height:32px;max-width:190px}
.field select option{background:var(--surface);color:var(--text)}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.link{background:none;border:0;color:var(--accent-text);cursor:pointer;font-weight:500;font-size:13px;padding:0 6px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
.kpi{padding:16px 18px}
.kpi .lbl{font-size:12.5px;color:var(--text-2);font-weight:500;display:flex;align-items:center;gap:8px}
.kpi .key{width:12px;height:3px;border-radius:2px;display:inline-block}
.kpi .val{font-size:26px;font-weight:600;letter-spacing:-.02em;margin:6px 0 4px}
.kpi .sub{font-size:12.5px;color:var(--text-3)}
.delta{font-weight:600}
.delta.up{color:var(--up)} .delta.down{color:var(--down)}

/* Charts */
.charts{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;margin-bottom:16px}
.card-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 18px 0}
.card-h h2{font-size:14px;margin:0;font-weight:600}
.card-h p{margin:2px 0 0;font-size:12.5px;color:var(--text-3)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:2px;border-radius:2px;display:inline-block}
.legend i.dash{background:none!important;border-top:2px dashed currentColor;height:0}
.chart-wrap{position:relative;padding:6px 10px 10px}
.charts>.card{display:flex;flex-direction:column}
.charts>.card>.chart-wrap{flex:1;min-height:300px}
#lineChart{width:100%;height:100%;min-height:280px;display:block;position:absolute;inset:6px 10px 10px;width:calc(100% - 20px);height:calc(100% - 16px)}
.tip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--border-strong);border-radius:8px;padding:8px 10px;font-size:12.5px;box-shadow:0 6px 20px rgba(0,0,0,.12);min-width:170px;opacity:0;transition:opacity .08s;z-index:5}
.tip .t{color:var(--text-3);font-size:12px;margin-bottom:4px}
.tip .r{display:flex;align-items:center;gap:8px;justify-content:space-between}
.tip .r b{font-variant-numeric:tabular-nums;font-weight:600}
.tip .r span{display:flex;align-items:center;gap:6px;color:var(--text-2)}
.tip .r i{width:12px;height:2px;border-radius:2px;display:inline-block}
.bars{padding:10px 18px 16px;display:flex;flex-direction:column;gap:7px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:12.5px;cursor:default;border-radius:6px;padding:2px 4px;margin:0 -4px}
.bar-row:hover,.bar-row:focus{background:var(--surface-3);outline:none}
.bar-row .nm{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.bar-track{height:8px;border-radius:0 4px 4px 0;background:transparent}
.bar-fill{height:100%;border-radius:0 4px 4px 0;background:var(--s1);min-width:2px}
.bar-row .v{text-align:right;font-weight:600}
.bar-row .v small{display:block;font-weight:500;font-size:11.5px}

/* Table */
.tbl-card{overflow:hidden}
.tbl-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--border)}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;height:30px;padding:0 10px;font-size:12.5px;font-weight:500;cursor:pointer;color:var(--text-2)}
.seg button+button{border-left:1px solid var(--border-strong)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text)}
.tools-r{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tbl-scroll{overflow:auto;max-height:70vh}
table{border-collapse:separate;border-spacing:0;font-size:12.5px;width:max-content;min-width:100%}
th,td{border-bottom:1px solid var(--border);padding:0 10px;height:36px;white-space:nowrap;text-align:left;background:var(--surface)}
thead th{position:sticky;top:0;z-index:3;background:var(--surface-2);font-weight:600;color:var(--text-2);font-size:12px}
thead tr.grp th{height:30px;top:0;text-transform:none}
thead tr.hdr th{top:30px}
th.yr{text-align:center;border-left:1px solid var(--border-strong)}
th.yr small{font-weight:500;color:var(--text-3);margin-left:6px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
th.n.first,td.n.first{border-left:1px solid var(--border-strong)}
th.fc,td.fc{background:var(--fc-bg)}
th.fc{color:var(--fc-text)}
td.tot,th.tot{font-weight:600;background:var(--surface-3)}
.sticky{position:sticky;z-index:2}
thead .sticky{z-index:4}
.c-act{left:0;width:64px;min-width:64px;padding:0 4px;text-align:center}
.c-clase{left:64px;min-width:210px;max-width:210px}
.c-desc{left:274px;min-width:240px;max-width:240px;border-right:1px solid var(--border-strong)}
td.c-clase,td.c-desc{overflow:hidden;text-overflow:ellipsis}

/* --- Column dividers --------------------------------------------------- */
thead th,
tbody td,
tfoot td{border-right:1px solid var(--border)}
thead tr.grp th{border-right:1px solid var(--border-strong)}
th.c-desc,td.c-desc{border-right:1px solid var(--border-strong)}

/* --- Row readability -------------------------------------------------- */
tbody td.n{border-right:1px solid var(--border)}
tbody tr:not(.sub):nth-child(even) td,
tbody tr:not(.sub):nth-child(even) td.sticky{background:var(--zebra)}
tbody tr:not(.sub):nth-child(even) td.fc{background:var(--fc-bg)}
tbody tr:not(.sub):nth-child(even) td.tot{background:var(--surface-3)}
tbody tr:not(.sub):hover td,
tbody tr:not(.sub):hover td.sticky,
tbody tr:not(.sub):hover td.tot{background:var(--row-hover)}
tbody tr:not(.sub):hover td.fc{background:var(--fc-hover)}
tbody tr:not(.sub):hover td{box-shadow:inset 0 1px 0 var(--border-strong),inset 0 -1px 0 var(--border-strong)}

tr.sub td{background:var(--subtotal)!important;font-weight:600;color:var(--text)}
tr.sub td.c-clase{color:var(--accent-text)}
tfoot td{position:sticky;bottom:0;z-index:2;background:var(--surface-3);font-weight:700;border-top:1px solid var(--border-strong)}
tfoot td.sticky{z-index:3}
[contenteditable]{outline:none;border-radius:4px;padding:2px 4px;margin:0 -4px;display:inline-block;min-width:24px}
[contenteditable]:hover{box-shadow:inset 0 0 0 1px var(--border-strong)}
[contenteditable]:focus{box-shadow:inset 0 0 0 2px var(--accent);background:var(--surface)}
/* Excel-like cells: the editable area fills the whole table cell instead of
   being a small box around the text, so clicking anywhere in it edits. */
td > [contenteditable]{
  display:block;width:calc(100% + 8px);min-height:30px;line-height:26px;
  cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
td:has(> [contenteditable]){cursor:text}
td select{border:1px solid transparent;background:transparent;border-radius:6px;height:26px;max-width:100%;cursor:pointer}
td select:hover{border-color:var(--border-strong)}
td select option{background:var(--surface);color:var(--text)}
.del{border:0;background:none;color:var(--text-3);cursor:pointer;width:24px;height:24px;border-radius:6px;opacity:0}
tr:hover .del{opacity:1}
.del:hover{background:var(--surface-3);color:var(--up)}
.del:focus{opacity:1}
.pill{display:inline-block;padding:1px 8px;border-radius:999px;font-size:11.5px;font-weight:600}
.pill.si{background:var(--accent-soft);color:var(--accent-text)}
.pill.no{background:var(--surface-3);color:var(--text-2)}
.ceco{font-variant-numeric:tabular-nums;font-weight:500}
.empty{padding:40px;text-align:center;color:var(--text-3)}
.note{font-size:12px;color:var(--text-3);padding:10px 18px;border-top:1px solid var(--border);display:flex;gap:16px;flex-wrap:wrap}
.note i{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.toast{position:fixed;bottom:20px;right:20px;max-width:calc(100vw - 40px);transform:translateY(20px);background:var(--text);color:var(--bg);padding:9px 14px;border-radius:8px;font-size:13px;opacity:0;transition:.2s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:none}
.ops{border:1px solid var(--border-strong);background:var(--surface);color:var(--accent-text);cursor:pointer;width:26px;height:24px;border-radius:6px;font-weight:700;font-size:12px;font-style:italic;font-family:Georgia,serif;vertical-align:middle}
.ops:hover,.ops[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--accent)}
.pop{position:fixed;z-index:40;width:380px;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:14px}
.pop[hidden]{display:none}
.pop-h{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px}
.pop-h b{display:block;font-size:14px}
.pop-h span{display:block;font-size:12px;color:var(--text-3);margin-top:1px}
.pop-x{border:0;background:none;color:var(--text-3);cursor:pointer;width:26px;height:26px;border-radius:6px;flex:none}
.pop-x:hover{background:var(--surface-3);color:var(--text)}
.seg.full{display:flex;width:100%}
.seg.full button{flex:1;padding:0 6px}
.pop-body{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.pop-body .f{display:flex;flex-direction:column;gap:4px}
.pop-body .f.w{grid-column:1/-1}
.pop-body label{font-size:12px;color:var(--text-2);font-weight:500}
.pop-body input,.pop-body select{height:34px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);padding:0 10px;outline:none;width:100%}
.pop-body input:focus,.pop-body select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pop-body .chk{flex-direction:row;align-items:center;gap:8px}
.pop-body .chk input{width:16px;height:16px}
.pop-body .hint{font-size:12px;color:var(--text-3)}
.pop-prev{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--text-2);line-height:1.6}
.pop-prev b{color:var(--text);font-variant-numeric:tabular-nums}
.pop-prev .warn{color:var(--fc-text)}
.pop-f{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.toast button{background:none;border:0;color:inherit;font-weight:700;text-decoration:underline;cursor:pointer;margin-left:10px;padding:0}
.toast.act{pointer-events:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Top-of-table horizontal scrollbar (mirror of the real scroller). */
.tbl-scroll-top{overflow-x:auto;overflow-y:hidden}
.tbl-scroll-top > div{height:1px}
.tbl-scroll-top::-webkit-scrollbar{height:12px}
.tbl-scroll-top::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
.tbl-scroll-top::-webkit-scrollbar-track{background:var(--surface-3)}

@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .charts{grid-template-columns:1fr}
}
@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;align-items:center;padding:10px 16px;border-right:0;border-bottom:1px solid var(--border);overflow-x:auto}
  .brand{padding:0 8px 0 0}
  .nav{display:flex}
  .side-foot{display:none}
  .main{padding:16px}
  .c-clase{min-width:150px;max-width:150px}
  .c-desc{left:214px;min-width:170px;max-width:170px}
}
@media (max-width:520px){
  .kpis{grid-template-columns:1fr}
  .brand div{display:none}
  .field select,.field input{max-width:130px}
}

/* ====================================================================== */
/* Fiscalis polish — applies to BOTH themes (light + dark).               */
/* Vivid green accent, a filled deep-green hero KPI, pill buttons,        */
/* rounded chart bars, crisp uppercase table header.                      */
/* ====================================================================== */

/* Brand mark: deep green with a soft glow. */
.logo{background:var(--accent-deep);box-shadow:0 4px 12px rgba(23,65,42,.3)}

/* Sidebar active item: soft green pill with an accent edge. */
.nav a{border-radius:10px}
.nav a.on{box-shadow:inset 2px 0 0 var(--accent)}

.top h1{font-weight:700}

/* Cards: a touch more rounding + the themed shadow. */
.card{border-radius:var(--radius-card)}

/* KPI cards: hover lift. */
.card.kpi{transition:transform .15s ease,box-shadow .15s ease}
.card.kpi:hover{transform:translateY(-2px)}
.kpi .val{letter-spacing:-.025em}

/* HERO KPI — the first card is filled deep green with light text, echoing
   the Fiscalis "Income" card. */
.card.kpi.hero{
  background:var(--hero-bg);
  border-color:transparent;
  color:var(--hero-text);
  position:relative;
  overflow:hidden;
}
.card.kpi.hero .lbl{color:var(--hero-text-2)}
.card.kpi.hero .val{color:var(--hero-text)}
.card.kpi.hero .sub{color:var(--hero-text-2)}
.card.kpi.hero .delta.up{color:#ffb4a8}
.card.kpi.hero .delta.down{color:var(--hero-accent)}
.card.kpi.hero .key{background:var(--hero-accent)!important}
/* faint tech-grid texture in the corner, like the reference */
.card.kpi.hero::after{
  content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;
  background:
    repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.06) 9px 10px),
    repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.06) 9px 10px);
  border-radius:16px;transform:rotate(8deg);pointer-events:none;
}

/* Buttons: pill shape; green primary with glow. */
.btn{border-radius:999px}
.btn.primary{background:var(--accent);border-color:transparent;color:#07230f;font-weight:600;box-shadow:0 4px 14px rgba(91,191,58,.3)}
.btn.primary:hover{filter:brightness(1.05);box-shadow:0 6px 18px rgba(91,191,58,.4)}

/* Rounded inputs / segmented controls / popover / toast. */
.field{border-radius:999px}
.seg{border-radius:999px}
.pop{border-radius:16px}
.toast{border-radius:999px}

/* Class bars rendered as rounded pills (Fiscalis bar-chart feel). */
.bar-track{border-radius:999px;background:var(--surface-3)}
.bar-fill{border-radius:999px;background:var(--accent)}

/* Table: crisp uppercase header, clearer dividers. */
.tbl-card{border-radius:var(--radius-card)}
thead th{text-transform:uppercase;letter-spacing:.03em;font-size:11px;background:var(--surface-3)}
thead tr.grp th{color:var(--accent-text);font-size:12px;text-transform:none}
thead th,tbody td,tfoot td{border-right:1px solid var(--border-strong)}
th.yr{border-left:2px solid var(--accent-soft)}
td.n.first,th.n.first{border-left:2px solid var(--border-strong)}

/* ====================================================================== */
/* Per-class color coding. Each row / subtotal sets --cc (its class       */
/* color) inline; these rules turn it into visible cues.                  */
/* ====================================================================== */

/* Thick colored stripe on the left edge of every row (transparent default
   keeps column widths identical for rows without a color). */
.c-act{border-left:4px solid transparent}
tbody tr[style*="--cc"] td.c-act{border-left-color:var(--cc)}

/* Clase dropdown in each row: text in the class color. */
td.c-clase select.cl-sel{color:var(--cc);font-weight:600}

/* Subtotal (group header) rows: a stronger tint of the class color, colored
   label with a dot, so each class block starts with a clear title. */
tr.sub td{background:color-mix(in srgb,var(--cc,var(--accent)) 18%,var(--surface))!important}

/* Data rows (class "cl"): the WHOLE row is tinted with its class color —
   every cell, including the frozen left columns. This replaces the grey
   zebra striping, so anything outside a category stays plain white.
   Tints are mixed with --surface, so sticky cells stay opaque when the
   table scrolls under them. */
tbody tr.cl > td{
  background:color-mix(in srgb,var(--cc) 10%,var(--surface))!important;
  border-bottom-color:color-mix(in srgb,var(--cc) 22%,var(--border));
}
/* Year totals: slightly stronger tint of the same color. */
tbody tr.cl > td.tot{background:color-mix(in srgb,var(--cc) 15%,var(--surface))!important}
/* Forecast cells keep their yellow base, lightly blended with the class
   color, so forecast months stay recognisable. */
tbody tr.cl > td.fc{background:color-mix(in srgb,var(--cc) 8%,var(--fc-bg))!important}
/* Hover: a deeper shade of the row's own color across the whole line. */
tbody tr.cl:hover > td{background:color-mix(in srgb,var(--cc) 20%,var(--surface))!important}
tbody tr.cl:hover > td.fc{background:color-mix(in srgb,var(--cc) 16%,var(--fc-bg))!important}
tr.sub td.c-act{border-left-color:var(--cc)}
tr.sub td.c-clase{color:var(--cc,var(--accent-text))}
tr.sub td.c-clase::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--cc);margin-right:8px;vertical-align:-1px}

/* Class bars chart: color dot before each class name. */
.cdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px}

/* Dark mode: lighten class-colored text so it stays readable on dark. */
:root[data-theme="dark"] td.c-clase select.cl-sel,
:root[data-theme="dark"] tr.sub td.c-clase{color:color-mix(in srgb,var(--cc) 65%,#fff)}
:root[data-theme="dark"] tr.sub td{background:color-mix(in srgb,var(--cc,var(--accent)) 26%,var(--surface))!important}
/* Dark mode needs a bit more color to show on the dark surface. */
:root[data-theme="dark"] tbody tr.cl > td{background:color-mix(in srgb,var(--cc) 14%,var(--surface))!important}
:root[data-theme="dark"] tbody tr.cl > td.tot{background:color-mix(in srgb,var(--cc) 20%,var(--surface))!important}
:root[data-theme="dark"] tbody tr.cl:hover > td{background:color-mix(in srgb,var(--cc) 28%,var(--surface))!important}
:root[data-theme="dark"] tbody tr.cl > td.fc{background:color-mix(in srgb,var(--cc) 12%,var(--fc-bg))!important}
:root[data-theme="dark"] tbody tr.cl:hover > td.fc{background:color-mix(in srgb,var(--cc) 22%,var(--fc-bg))!important}

/* ====================================================================== */
/* White table grid lines (light mode only).                              */
/* Replaces the green-tinted column dividers, row separators and          */
/* year-group edges with white, in header, body and footer.               */
/* ====================================================================== */
:root:not([data-theme="dark"]) th,
:root:not([data-theme="dark"]) td{border-bottom-color:#fff}
:root:not([data-theme="dark"]) thead th,
:root:not([data-theme="dark"]) tbody td,
:root:not([data-theme="dark"]) tfoot td,
:root:not([data-theme="dark"]) thead tr.grp th,
:root:not([data-theme="dark"]) th.c-desc,
:root:not([data-theme="dark"]) td.c-desc{border-right-color:#fff}
:root:not([data-theme="dark"]) th.yr,
:root:not([data-theme="dark"]) th.n.first,
:root:not([data-theme="dark"]) td.n.first{border-left-color:#fff}
:root:not([data-theme="dark"]) tfoot td{border-top-color:#fff}
:root:not([data-theme="dark"]) tbody tr.cl > td{border-bottom-color:#fff}
/* Hover outline lines also white instead of green-grey. */
:root:not([data-theme="dark"]) tbody tr:not(.sub):hover td{box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #fff}

/* ====================================================================== */
/* Horizontal bar chart: spend by class, most → least expensive.          */
/* SaaS analytics style: two-line rows (name | amount · share · badge),   */
/* flat rounded bar on a light full-width track.                          */
/* ====================================================================== */
.hbars{display:flex;flex-direction:column;gap:2px;padding:10px 12px 14px}
.hbars .empty{padding:40px 10px}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:7px;align-items:center;
  padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13px;transition:background .15s,opacity .15s}
.hrow:hover,.hrow:focus-visible{background:var(--surface-2);outline:none}
.hrow:focus-visible{box-shadow:0 0 0 2px var(--accent-soft)}
.hname{color:var(--text);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hname .cdot{width:8px;height:8px;margin-right:8px}
.hmeta{display:flex;align-items:center;gap:8px;white-space:nowrap}
.hval{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.hshare{min-width:42px;text-align:right;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* Change badge: soft tinted pill (red = spend up, green = spend down). */
.hdelta{display:inline-block;min-width:58px;text-align:center;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.hdelta.up{color:var(--up);background:color-mix(in srgb,var(--up) 11%,var(--surface))}
.hdelta.down{color:var(--down);background:color-mix(in srgb,var(--down) 11%,var(--surface))}
.hdelta.new{color:var(--text-3);background:var(--surface-3)}
/* Full-width track + flat bar, scaled to the largest class. */
.htrack{grid-column:1/-1;height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden}
/* Full gradient across each bar, in its own class color: light tint on the
   left → pure color → deep shade on the right, plus a soft glow of the same
   color. The gradient spans the bar's own length, so short bars get it too. */
.hbar{height:100%;min-width:3px;border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--bc) 35%,#fff) 0%,
    var(--bc) 55%,
    color-mix(in srgb,var(--bc) 75%,#000) 100%);
  box-shadow:0 1px 4px color-mix(in srgb,var(--bc) 40%,transparent);
  transition:filter .15s}
.hrow:hover .hbar{filter:brightness(1.08)}
/* Footer: number of classes + total for the year. */
.hfoot{display:flex;justify-content:space-between;margin-top:6px;padding:10px 10px 0;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}
.hfoot b{color:var(--text);font-weight:600;margin-left:4px}

/* Selected class: highlighted row, other classes dimmed. */
.hbars.has-sel .hrow:not(.sel){opacity:.4}
.hbars.has-sel .hrow:not(.sel):hover{opacity:.8}
.hrow.sel{background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:inset 0 0 0 1px var(--accent-soft)}
.hrow.sel .hname{font-weight:600}

/* "Filtrado: <clase> ✕ Ver todas" chip in the card header. */
.chip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;max-width:100%;height:26px;padding:0 10px;
  border:1px solid var(--border-strong);border-radius:999px;background:var(--surface);color:var(--text-2);
  font-size:12px;font-weight:500;cursor:pointer}
.chip[hidden]{display:none}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chip b{color:var(--accent-text);font-weight:600;white-space:nowrap}
.chip:hover{background:var(--surface-3);border-color:var(--accent)}
.chip .cdot{margin-right:0}
/* Year switch in the card header: never shrink or get clipped. */
#segBarsYear{flex:none}
#segBarsYear button{height:26px;padding:0 9px;font-size:12px}
.charts .card-h > div:first-child{min-width:0}

/* ====================================================================== */
/* Adjustable chart sizing (see js/features/chart-size.js).               */
/* ====================================================================== */
/* Columns: line chart | 12px drag handle | class chart. Fractions come
   from --cw1/--cw2 set by JS (default 1.6fr : 1fr). */
.charts{grid-template-columns:minmax(0,var(--cw1,1.6fr)) 12px minmax(0,var(--cw2,1fr));gap:0;margin-bottom:4px}

/* Vertical width handle between the charts. */
.split{position:relative;cursor:col-resize;touch-action:none}
.split::before{content:"";position:absolute;left:50%;top:18%;bottom:18%;width:4px;transform:translateX(-50%);
  border-radius:4px;background:var(--border-strong);opacity:0;transition:opacity .15s,background .15s}
.charts:hover .split::before{opacity:.7}
.split:hover::before,.split:focus-visible::before,.split.drag::before{opacity:1;background:var(--accent)}
.split:focus-visible{outline:none}

/* Horizontal height handle under the charts. */
.vsize{position:relative;display:flex;align-items:center;justify-content:center;height:18px;margin-bottom:10px;
  cursor:row-resize;touch-action:none;border-radius:6px}
.vsize .grip{width:48px;height:4px;border-radius:4px;background:var(--border-strong);transition:width .15s,background .15s}
.vsize:hover .grip,.vsize:focus-visible .grip,.vsize.drag .grip{width:80px;background:var(--accent)}
.vsize:focus-visible{outline:none}
.vsize .reset{position:absolute;right:0;top:50%;transform:translateY(-50%);border:0;background:none;
  color:var(--accent-text);font-size:12px;font-weight:500;cursor:pointer;padding:2px 4px}
.vsize .reset[hidden]{display:none}
.vsize .reset:hover{text-decoration:underline}

/* Fixed height chosen by the user: both chart cards take it; the class
   list scrolls inside its card, the line chart redraws to fit. */
.charts.sized > .card{height:var(--ch)}
.charts.sized > .card > .chart-wrap{min-height:0}
.charts.sized #barsWrap{overflow:auto}
.charts.sized #lineWrap{overflow:hidden}
.charts.sized #lineChart{min-height:0}

/* While dragging: no text selection, keep the resize cursor everywhere. */
body.resizing{user-select:none;cursor:col-resize}
body.resizing:has(.vsize.drag){cursor:row-resize}

/* Narrow screens: charts stack, so the width handle is hidden. */
@media (max-width:1100px){
  .charts{grid-template-columns:1fr;gap:12px}
  .split{display:none}
}

/* ====================================================================== */
/* Entra ID sign-in screen + signed-in user box (Sandbox).                */
/* ====================================================================== */
/* Dashboard stays hidden until signed in. */
body:not(.authed) .app{display:none}
.login{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:var(--bg)}
.login[hidden]{display:none}
.login-card{width:100%;max-width:380px;text-align:center;padding:36px 28px;border:1px solid var(--border);
  border-radius:var(--radius-card,16px);background:var(--surface);box-shadow:var(--shadow)}
.login-card .logo{margin:0 auto 14px;width:44px;height:44px;border-radius:12px;font-size:16px}
.login-card h1{font-size:20px;margin:0 0 6px}
.login-card p{margin:0 0 20px;color:var(--text-2)}
.login-card .btn{width:100%;justify-content:center;height:42px;font-size:14px}
.login-card .btn svg{width:18px;height:18px}
.login-msg{margin:14px 0 0!important;font-size:12.5px;color:var(--up)!important;min-height:1em}
.side-foot .user{display:flex;flex-direction:column;gap:1px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.side-foot .user b{color:var(--text);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .user span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .user .link{padding:4px 0 0;text-align:left;font-size:12px}