/* Smart Budget UI — 2026 floating look. Chart colors follow the validated
   dataviz palette; text always wears ink tokens, never series colors. */

:root {
  --brand: #1f3864;
  --accent: #4f6bed;          /* a calmer indigo, the Linear/Notion register */
  --accent-strong: #3a52c8;
  --accent-soft: #eef1fe;
  --surface: #ffffff;
  --page: #f7f8fa;            /* flat near-white canvas, no gradients */
  --ink: #1a1d24;
  --ink-2: #5b6472;
  --heading: #23272f;
  --heading-2: #3a3f4b;
  --muted: #9aa1ad;
  --line: #ececf0;            /* hairline */
  --line-2: #f2f2f5;          /* even fainter, for inner rows */
  --grid: #e1e0d9;
  --good: #14804a;
  --good-soft: #e7f4ec;
  --bad: #cf3a3a;
  --bad-soft: #fcecec;
  --hover: #f6f7f9;
  --series-1: #4f6bed;
  --series-2: #eb6834;
  --radius: 12px;
  /* Shadows almost gone — modern flat surfaces lean on hairlines, not lift. */
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 6px 24px rgba(16, 24, 40, .10);
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar: flat rail, hairline divider (Linear/Notion) ---------- */
.sidebar {
  width: 250px; flex-shrink: 0; background: var(--surface); color: var(--ink);
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px 14px; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 1.15rem;
}
.brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; color: var(--heading); }
.brand-sub { font-size: .7rem; color: var(--muted); }
.nav-menu { flex: 1; padding: 6px 12px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.nav-item {
  color: var(--ink-2); text-decoration: none; padding: 8px 10px; border-radius: 8px;
  font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: 10px; transition: background .1s, color .1s;
}
.nav-item i { font-size: 1.1rem; color: var(--muted); transition: color .1s; }
.nav-item:hover { background: var(--hover); color: var(--ink); }
.nav-item:hover i { color: var(--ink-2); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }
.nav-item.active i { color: var(--accent); }
.issue-badge {
  background: var(--bad); color: #fff; margin-left: auto; font-size: .68rem; font-weight: 700;
  border-radius: 999px; padding: 2px 8px; line-height: 1.3;
}
.sidebar-footer { padding: 14px; border-top: 1px solid var(--line); }
.user-picker-label { font-size: .7rem; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-weight: 600; }
.user-role { font-size: .7rem; color: var(--ink-2); margin-top: 4px; }
.user-role .role-chip {
  display: inline-flex; align-items: center; gap: 4px; background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; padding: 1px 9px; font-weight: 600;
}
.btn-export {
  background: var(--accent); color: #fff; font-weight: 600; border: none; border-radius: 8px; padding: 9px;
}
.btn-export:hover { background: var(--accent-strong); color: #fff; }
.export-menu {
  width: 100%; min-width: 0; border-radius: 12px; border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 6px;
}
.export-menu .dropdown-item {
  white-space: normal; border-radius: 8px; padding: 8px 10px;
  display: flex; gap: 10px; align-items: flex-start; font-size: .85rem;
}
.export-menu .dropdown-item i { color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.export-menu .dropdown-item:hover { background: var(--accent-soft); color: var(--accent); }
.export-title { font-weight: 600; display: block; line-height: 1.25; }
.export-sub { font-size: .72rem; color: var(--muted); display: block; line-height: 1.3; }

/* ---------- Main ---------- */
.main-content { flex: 1; min-width: 0; padding: 26px 30px 32px; max-width: calc(100vw - 250px); }
.page-title { font-size: 1.5rem; font-weight: 680; letter-spacing: -.025em; margin-bottom: 3px; color: var(--heading); }
.page-sub { color: var(--ink-2); font-size: .88rem; margin-bottom: 18px; }

/* Month close: says which months stopped being a forecast. */
.cutoff-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin: -10px 0 18px; padding: 5px 11px; border-radius: 999px;
  font-size: .8rem; font-weight: 500;
  color: #0f5c4a; background: #e5f6f0; border: 1px solid #b9e5d8;
}
.cutoff-note .ti { font-size: .95rem; }
/* Junto al título (dashboard, lines, analysis): sin el margen que lo separa. */
.page-title + .cutoff-note, .dash-head-right .cutoff-note,
.d-flex > .page-title + .cutoff-note { margin: 0; }

/* Header del dashboard: título a la izquierda, controles a la derecha. Los
   controles no dependen del ancho del título (no saltan al filtrar): su fila es
   independiente y se alinea a la derecha. En pantallas anchas caben en la misma
   línea; si no, bajan como una fila propia, siempre en el mismo orden. */
.dash-header { display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: nowrap; gap: 10px 14px; }
.dash-header-title { min-width: 0; flex: 1 1 auto; }
/* The title truncates instead of pushing the controls to a new row, so the
   filters stay in the same spot whether or not a center is selected. The cutoff
   badge next to it never shrinks. */
.dash-header-title > .d-flex { flex-wrap: nowrap !important; min-width: 0; }
.dash-header-title .page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex: 0 1 auto; }
.dash-header-title .cutoff-note { flex: 0 0 auto; }
.dash-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end; flex: 0 0 auto; }
/* On narrow screens let the header stack: title on top, controls below. */
@media (max-width: 720px) {
  .dash-header { flex-wrap: wrap; }
  .dash-controls { justify-content: flex-start; }
  .dash-header-title .page-title { white-space: normal; }
}

/* ---------- Currency toggle ---------- */
.cur-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.cur-btn { border: 0; background: transparent; padding: 5px 12px; font-size: .8rem; font-weight: 600;
  color: var(--ink-2); cursor: pointer; line-height: 1.4; }
.cur-btn + .cur-btn { border-left: 1px solid var(--line); }
.cur-btn.active { background: var(--accent); color: #fff; }
.cur-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Rate effect card ---------- */
.rate-effect { border-left: 3px solid var(--accent); }
.re-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: 12px; }
.re-rate { font-size: .78rem; color: var(--ink-2); }
.re-grid { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.re-metric { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface-2, #f4f6fa); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.re-metric.re-effect-box { border-color: var(--accent); background: var(--accent-soft, #eef2ff); }
.re-label { font-size: .74rem; color: var(--ink-2); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.re-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.re-sub { font-size: .74rem; color: var(--ink-2); }
.re-op { display: flex; align-items: center; font-size: 1.4rem; font-weight: 700; color: var(--ink-2); }
.re-note { margin-top: 12px; font-size: .82rem; color: var(--ink-2); padding: 9px 12px; border-radius: 9px;
  background: var(--surface-2, #f4f6fa); display: flex; gap: .5rem; align-items: flex-start; }
.re-note.warn { background: var(--bad-soft, #fef2f2); color: var(--ink); }
.re-note i { margin-top: 2px; flex-shrink: 0; }
.re-note > span { flex: 1; }
.re-note b { display: inline; font-weight: 600; }
@media (max-width: 640px) { .re-op { display: none; } }

/* ---------- Buttons & inputs ---------- */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: #1c5cab; border-color: #1c5cab; }
.form-control, .form-select { border-radius: 10px; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,120,214,.12); }
.form-control[readonly] { background: #f6f7f9; color: var(--ink-2); }

/* ---------- KPI tiles ---------- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; box-shadow: var(--shadow); }
.kpi .kpi-top { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.kpi .kpi-icon {
  width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: .9rem; background: var(--accent-soft); color: var(--accent); flex-shrink: 0;
}
.kpi.accent-2 .kpi-icon { background: #fdeee6; color: var(--series-2); }
/* Label stays on one line and truncates with … if a center name makes it long. */
.kpi .kpi-label { font-size: .68rem; color: var(--muted); font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .kpi-value { font-size: clamp(1rem, 2.1vw, 1.35rem); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.15; color: #2a3752; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi .kpi-foot { font-size: .74rem; color: var(--ink-2); margin-top: 3px; }
.delta-up { color: var(--bad); font-weight: 600; }     /* expense growth = warm */
.delta-down { color: var(--good); font-weight: 600; }

/* ---------- Cards & charts ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.panel h6 { font-weight: 600; letter-spacing: -.01em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--heading-2); }
.panel h6 i { color: var(--accent); }
.chart-box { position: relative; height: 300px; }
.chart-box.tall { height: 360px; }

/* ---------- Tables (flat, hairline-separated — Linear/Notion register) ---------- */
.table-budget { font-size: .82rem; margin-bottom: 0; }
.table-budget thead th {
  background: var(--surface); color: var(--muted); white-space: nowrap; font-weight: 600; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; z-index: 3;
  border-bottom: 1px solid var(--line); padding: .5rem .75rem;
}
/* No vertical rules, no zebra: just a faint hairline under each row and air. */
.table-budget td { vertical-align: middle; border: 0; border-bottom: 1px solid var(--line-2);
  padding: .5rem .75rem; color: var(--ink); }
.table-budget tbody tr:last-child td { border-bottom: 0; }
.table-budget th.sortable { cursor: pointer; user-select: none; }
.table-budget th.sortable:hover { color: var(--ink-2); }
.sort-icon { font-size: .82rem; opacity: .3; vertical-align: -1px; }
.sort-icon.active { opacity: 1; color: var(--accent); }
.table-budget .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow: auto; max-height: 66vh; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); }

/* One hover colour, applied to normal and pinned cells alike so the row reads
   as a single band even where columns are sticky. */
.sticky-col { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.table-budget tbody tr:hover > td { background: var(--hover); }
tr:hover .sticky-col, tr:hover .actions-col, tr:hover .diag-col { background: var(--hover); }

/* Totals row pinned to the bottom; a quiet tinted band (no more crema yellow),
   every cell carries it so nothing shows through when scrolling either axis. */
.table-budget tfoot td { position: sticky; bottom: 0; background: #f4f6fb; color: var(--heading);
  font-weight: 600; z-index: 2; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 12px -8px rgba(16, 24, 40, .12); }
.table-budget tfoot td.sticky-col { left: 0; z-index: 3; }
.table-budget tfoot td.actions-col { right: 0; z-index: 3; }
.table-budget tfoot .tfoot-label { color: var(--ink-2); font-weight: 500; white-space: nowrap; }

/* Actions column pinned right so buttons never sit under the scrollbar */
.actions-col {
  position: sticky; right: 0; background: var(--surface); z-index: 2;
  box-shadow: -8px 0 10px -8px rgba(16, 24, 40, .10); padding-right: 14px !important;
  text-align: right; white-space: nowrap;
}
thead .actions-col { z-index: 4; background: var(--surface); }
.btn-icon {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 9px; width: 30px; height: 30px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; font-size: .95rem; transition: all .12s;
}
.btn-icon:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.btn-icon.danger:hover { border-color: var(--bad); color: var(--bad); background: var(--bad-soft); }
.btn-icon:disabled { opacity: .35; pointer-events: none; }

/* ---------- Upload ---------- */
.dropzone {
  border: 2px dashed #c8d8ee; border-radius: var(--radius); background: #f8fbff;
  padding: 52px 24px; text-align: center; cursor: pointer; transition: all .15s;
}
.dropzone:hover, .dropzone.dragover { background: var(--accent-soft); border-color: var(--accent); transform: translateY(-1px); }
.dropzone i { font-size: 2.8rem; color: var(--accent); }

.result-card { border-left: 4px solid var(--series-1); }
.result-card.has-issues { border-left-color: #eda100; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 6px; background: #f4f6fa; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; font-size: .78rem; margin: 2px; color: var(--ink-2); font-weight: 500;
}
.stat-chip b { font-variant-numeric: tabular-nums; color: var(--ink); }
.stat-chip i { font-size: .95rem; }
.stat-chip.chip-add i { color: var(--good); }
.stat-chip.chip-edit i { color: #b26b00; }
.stat-chip.chip-del i { color: var(--bad); }
.stat-chip.chip-warn { background: #fff8e6; border-color: #f3dfa3; }
.stat-chip.chip-warn i { color: #b26b00; }

/* ---------- Versions ---------- */
.version-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 6px; border-bottom: 1px solid var(--line); }
.version-item:last-child { border-bottom: none; }
.version-dot {
  width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; font-size: 1.1rem;
}
.version-dot.excel { background: linear-gradient(135deg, var(--accent), #1c5cab); }
.version-dot.manual { background: linear-gradient(135deg, #667085, #475467); }
.btn-chg-toggle {
  border: 1px solid var(--line); background: var(--surface); border-radius: 999px;
  padding: 3px 12px; font-size: .78rem; color: var(--accent); font-weight: 600;
  display: inline-flex; gap: 5px; align-items: center; transition: all .12s;
}
.btn-chg-toggle:hover { background: var(--accent-soft); border-color: var(--accent); }
.chg-detail > td { background: #f8fafd; padding: 10px 14px; }
.chg-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.chg-chip {
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 3px 10px; font-size: .78rem; white-space: nowrap;
  display: inline-flex; gap: 7px; align-items: center;
}
.chg-chip b { color: var(--ink-2); font-weight: 600; }
.chg-chip .ti-arrow-right { font-size: .72rem; color: var(--muted); }
.change-added { color: var(--good); font-weight: 600; }
.change-updated { color: #b26b00; font-weight: 600; }
.change-deleted { color: var(--bad); font-weight: 600; }
.change-masked { color: var(--ink-2); font-weight: 600; }
.change-masked .ti-crown { color: #b8860b; }
.diff-old { color: var(--bad); text-decoration: line-through; font-variant-numeric: tabular-nums; }
.diff-new { color: var(--good); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Total that did NOT move in this version: shown plain so the changed one stands out. */
.tot-same { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Month the center changed but the Master overrides: real edit, no effect. */
.chg-chip.chg-masked { border-style: dashed; background: transparent; }
.chg-chip.chg-masked .ti-crown { font-size: .78rem; color: #b8860b; }
.masked-new { color: var(--ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Misc ---------- */
.month-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.month-grid input { font-size: .82rem; text-align: right; }
.month-grid label { font-size: .7rem; color: var(--muted); margin-bottom: 1px; }
.month-head { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; }
.month-head h6 { margin: 0; font-size: .88rem; }
.btn-copy-jan { font-size: .74rem; padding: 3px 10px; border-radius: 999px; }
.badge-tier { background: transparent; color: var(--ink-2); font-weight: 500; border-radius: 999px;
  border: 1px solid var(--line); font-size: .72rem; padding: 1px 7px; }
.badge-tier:empty { border: 0; }
.swal2-popup { font-family: inherit !important; border-radius: 18px !important; }
/* Default confirm color = theme accent (not the library purple). Dialogs that set
   confirmButtonColor pass an inline style, which wins over this rule. */
.swal2-confirm { background-color: var(--accent); }
.form-label-sm { font-size: .76rem; color: var(--ink-2); margin-bottom: 2px; font-weight: 600; }
/* ---------- Issues toolbar ---------- */
.issues-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.issues-filter { display: flex; flex-direction: column; }
/* Override the width/padding Bootstrap gives .form-check: here it is just a
   checkbox + label, tight and sized to content. */
.issues-check { display: inline-flex; align-items: center; gap: .35rem;
  width: auto; min-height: 0; margin: 0; padding: 0; padding-top: 1.15rem; }
.issues-check .form-check-input { float: none; margin: 0; }
.issues-check .form-check-label { padding: 0; line-height: 1; white-space: nowrap; }
.issues-resolve-btn { margin-left: auto; align-self: center; margin-top: 1.15rem; white-space: nowrap; }
/* The filter (and its TomSelect wrapper) is exactly as wide as needed, no stretch. */
.issues-filter, .issues-filter .ts-wrapper { width: 17rem; }
.pct-pill { border-radius: 999px; padding: 2px 9px; font-size: .77rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pct-pill.up { background: var(--bad-soft); color: var(--bad); }
.pct-pill.down { background: var(--good-soft); color: var(--good); }
.pct-pill.flat { background: #f2f4f7; color: var(--ink-2); }
/* ---------- Config tabs (segmented control) ---------- */
.config-tabs {
  display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px; box-shadow: var(--shadow); margin-bottom: 18px; flex-wrap: wrap;
}
.config-tab {
  border: none; background: transparent; color: var(--ink-2); font-weight: 500; font-size: .87rem;
  padding: 8px 18px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px;
  transition: all .12s; cursor: pointer;
}
.config-tab i { font-size: 1.05rem; }
.config-tab:hover { background: #f4f6fa; color: var(--heading); }
.config-tab.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 3px 8px rgba(42,120,214,.3); }

/* ---------- Tom Select (searchable dropdowns) ---------- */
.ts-wrapper .ts-control {
  border-radius: 10px; border-color: var(--line); font-size: .875rem;
  padding: .3rem .6rem; min-height: 31px; box-shadow: none;
}
.ts-wrapper.focus .ts-control { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,120,214,.12); }
.ts-dropdown {
  border-radius: 12px; border-color: var(--line); box-shadow: var(--shadow-lg);
  font-size: .855rem; overflow: hidden;
}
.ts-dropdown .option { padding: 7px 12px; }
.ts-dropdown .active { background: var(--accent-soft); color: var(--accent); }
.ts-dropdown .selected { background: var(--accent); color: #fff; }
.ts-control input::placeholder { color: var(--muted); }
.ts-dropdown .dropdown-input-wrap { padding: 6px; border-bottom: 1px solid var(--line); }
.ts-dropdown .dropdown-input {
  border-radius: 8px; border: 1px solid var(--line); padding: .35rem .6rem; font-size: .855rem;
}
.ts-dropdown .dropdown-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(42,120,214,.12); outline: none; }

/* ---------- Compact multi filter (BI-style summary button + checkbox panel) ---------- */
.multi-filter { position: relative; }
.mf-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 5px 12px; font-size: .855rem;
  color: var(--ink-2); min-width: 185px; max-width: 265px; height: 33px; transition: all .12s;
}
.mf-btn .mf-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; text-align: left; }
.mf-btn:hover { border-color: var(--accent); color: var(--heading); }
.mf-btn.has-value { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mf-caret { opacity: .55; font-size: .85rem; transition: transform .15s; }
.multi-filter.open .mf-caret { transform: rotate(180deg); }
.mf-panel {
  display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 330px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg); padding: 10px;
}
.multi-filter.open .mf-panel { display: block; }
.mf-list { max-height: 290px; overflow-y: auto; margin: 8px -4px 6px; }
.mf-row {
  display: flex; gap: 10px; align-items: flex-start; padding: 6px 9px; border-radius: 8px;
  cursor: pointer; font-size: .855rem; margin: 0; color: var(--ink);
}
.mf-row:hover { background: var(--accent-soft); }
.mf-row input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
/* Group header inside the multi-filter (e.g. by center type): selects the whole group. */
.mf-group + .mf-group { margin-top: 4px; }
.mf-group-head {
  display: flex; gap: 9px; align-items: center; padding: 6px 9px; margin: 2px 0 1px;
  border-radius: 8px; cursor: pointer; font-size: .78rem; font-weight: 700;
  color: var(--ink-2); text-transform: uppercase; letter-spacing: .03em;
  background: var(--accent-soft);
}
.mf-group-head input { accent-color: var(--accent); flex-shrink: 0; }
.mf-group-head small { margin-left: auto; font-weight: 600; opacity: .7; }
.mf-group .mf-row { margin-left: 14px; }
.mf-footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); padding-top: 8px; min-height: 30px;
}
.mf-clear { font-size: .8rem; text-decoration: none; }
.mf-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.mf-apply { padding: 3px 14px; font-size: .8rem; }
/* Single-select: lay the control out as flex so the chosen item can shrink and
   ellipsize instead of running under the caret. The caret sits in the reserved
   right padding; the item never reaches it. */
.ts-wrapper.single .ts-control { padding-right: 2rem; display: flex; align-items: center; flex-wrap: nowrap; }
.ts-wrapper.single .ts-control .item {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; flex: 1 1 auto; display: block;
}
.ts-wrapper.single .ts-control > input {
  flex: 0 0 0; min-width: 0; width: 0 !important; padding: 0; margin: 0;
}

/* ---------- Grouped import issues ---------- */
.iss-panel { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.iss-head { background: #f8f9fb; padding: 8px 14px; font-size: .8rem; font-weight: 600; color: var(--ink-2);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; }
.iss-group { border-bottom: 1px solid var(--line); }
.iss-group:last-child { border-bottom: none; }
.iss-group > summary { padding: 9px 14px; font-size: .84rem; cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: 9px; color: var(--ink); }
.iss-group > summary::-webkit-details-marker { display: none; }
.iss-group > summary:hover { background: #f8fafd; }
.iss-group > summary > i { font-size: 1rem; flex-shrink: 0; }
.iss-group > summary::after { content: "\ea5f"; font-family: "tabler-icons"; margin-left: auto;
  color: var(--muted); font-size: .9rem; }
.iss-group[open] > summary::after { content: "\ea62"; }
.iss-group.tone-soft > summary > i { color: var(--muted); }
.iss-group.tone-warn > summary > i { color: #b26b00; }
.iss-group.tone-bad > summary > i { color: var(--bad); }
.iss-group.tone-warn > summary { background: #fffbf2; }
.iss-group.tone-bad > summary { background: #fdf5f5; }
.iss-note { font-size: .78rem; color: var(--muted); padding: 0 14px 6px 40px; }
.iss-list { margin: 0; padding: 0 14px 10px 40px; font-size: .8rem; color: var(--ink-2); }
.iss-list li { margin: 3px 0; }
.iss-brief { padding: 0 14px 10px 40px; font-size: .78rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums; line-height: 1.6; }

/* ---------- Account detail disclosure under charts ---------- */
.acc-detail { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }
.acc-detail > summary { font-size: .8rem; color: var(--accent); font-weight: 600; cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.acc-detail > summary::-webkit-details-marker { display: none; }
.acc-detail > summary::before { content: "\ea5f"; font-family: "tabler-icons"; font-size: .95rem; }
.acc-detail[open] > summary::before { content: "\ea62"; }
.acc-detail > summary:hover { text-decoration: underline; }
.acc-detail .table-wrap { margin-top: 8px; }

/* ---------- Search box (filters as you type) ---------- */
.search-wrap { position: relative; }
.search-wrap .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: .95rem; pointer-events: none; }
.search-wrap input { padding-left: 30px; padding-right: 28px; }
.search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--muted); padding: 2px; line-height: 1; cursor: pointer; }
.search-clear:hover { color: var(--ink); }
.filter-status { font-size: .8rem; color: var(--ink-2); display: inline-flex; align-items: center;
  gap: 6px; height: 31px; }
/* Keep the current rows visible but muted while the next result loads. */
#lines-table.is-loading { opacity: .45; pointer-events: none; transition: opacity .12s; }
.table-skeleton { display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 44px 0; color: var(--ink-2); font-size: .88rem;
  border: 1px solid var(--line); border-radius: 12px; background: #fbfcfe; }

/* ---------- Recarga del dashboard al cambiar filtros ----------
   Mismo criterio que la tabla de líneas: en vez de vaciar la pantalla, se deja
   el contenido anterior atenuado y sin interacción, con un aviso flotante. Así
   se ve que la vista se está actualizando y no parece que se haya colgado. */
.view-busy { position: relative; }
.view-busy > *:not(.busy-overlay) { opacity: .4; pointer-events: none;
  transition: opacity .12s ease; filter: saturate(.6); }

.busy-overlay { position: absolute; inset: 0; z-index: 20; display: flex;
  align-items: flex-start; justify-content: center; pointer-events: all; }
.busy-overlay .busy-pill { position: sticky; top: 42vh; display: inline-flex;
  align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px;
  background: var(--surface, #fff); border: 1px solid var(--line);
  box-shadow: 0 6px 24px rgba(16, 24, 40, .12); color: var(--ink-2);
  font-size: .86rem; font-weight: 500; }

/* No aparece de inmediato: si la respuesta llega rápido, un parpadeo molesta
   más que ayudar. Solo se muestra si la espera pasa de ~180 ms. */
.busy-overlay { animation: busy-in .18s ease both; }
@keyframes busy-in { from { opacity: 0 } to { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .busy-overlay { animation: none; }
  .view-busy > *:not(.busy-overlay) { transition: none; }
}

/* ---------- Line diagnostics ---------- */
.diag-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.diag { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: .72rem;
  font-weight: 600; white-space: nowrap; cursor: help; }
.diag-ok { background: var(--good-soft); color: var(--good); }
.diag-s1 { background: #fdf3dc; color: #8a6100; }        /* worth a look */
.diag-s2 { background: #fdeee6; color: #a34a12; }        /* should review */
.diag-s3 { background: var(--bad-soft); color: var(--bad); }  /* must fix */
/* Diagnostic column: pinned next to the actions so it stays visible on a wide
   table — it is the column reviewers scan for. */
.diag-col { position: sticky; right: 92px; background: var(--surface); z-index: 2;
  text-align: left !important; box-shadow: -6px 0 8px -8px rgba(16,24,40,.14); }
thead .diag-col { z-index: 4; background: #fafbfc; }
tr:hover .diag-col { background: #f5f7fb; }
.lines-readonly .diag-col { right: 0; }
.diag-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.diag-bar-label { font-size: .78rem; color: var(--ink-2); font-weight: 600; margin-right: 4px;
  display: inline-flex; align-items: center; gap: 6px; }
.diag-chip { border: 1px solid transparent; border-radius: 999px; padding: 3px 11px;
  font-size: .74rem; font-weight: 600; cursor: pointer; transition: all .12s; }
.diag-chip:hover { filter: brightness(.96); }
.diag-chip.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.diag-chip.diag-clear { background: var(--surface-2, #f2f4f7); color: var(--ink-2); }
/* Not an alert: the lines nothing was said about. Kept apart from the rules. */
.diag-chip.diag-ok-chip { background: var(--good-soft); color: var(--good);
  margin-left: 6px; box-shadow: -7px 0 0 -6px var(--line); }

/* ---------- Exception modal ---------- */
.ov-modal .swal2-html-container { margin: 0; padding: 0 1.4rem .4rem; overflow: visible; }
.ov-form { text-align: left; display: flex; flex-direction: column; gap: 4px; }
.ov-intro { font-size: .84rem; color: var(--ink-2); margin: 0 0 10px; }
.ov-label { font-size: .76rem; font-weight: 600; color: var(--ink-2); margin: 8px 0 2px; }
.ov-hint { font-size: .74rem; color: var(--muted); margin-top: 4px; }
/* The list is portalled to <body>, so it must clear SweetAlert's overlay. */
.ts-dropdown { z-index: 2000; }

/* ---------- Config typography: one scale across every panel ---------- */
.config-tabs + .row .panel h6,
[data-pane] .panel h6 { font-size: .95rem; }
[data-pane] .panel > p.small,
[data-pane] .panel > .small.text-muted { font-size: .8rem; line-height: 1.45; }
[data-pane] .panel .table-budget { font-size: .82rem; }
[data-pane] .panel hr { border-color: var(--line); opacity: 1; }
/* Bootstrap's .small would shrink cells a second time on top of the table's
   own size, so cells keep one size regardless of the classes they carry. */
[data-pane] .panel .table-budget td,
[data-pane] .panel .table-budget td.small,
[data-pane] .panel .table-budget td code { font-size: .82rem; }
/* Selects inside a table must fit their column instead of being clipped. */
[data-pane] .panel .table-budget td .form-select { width: 100%; min-width: 0; }

/* ---------- Permission rules ---------- */
.th-src { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: .66rem; }
.perm-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; align-items: stretch; }
.perm-rule { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2, #f4f6fa);
  border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; }
.perm-rule > i { font-size: 1.2rem; color: var(--accent); margin-top: 1px; flex-shrink: 0; }
.perm-rule > div { display: flex; flex-direction: column; gap: 3px; }
/* Only the card title is a block; the <b> tags inside the text stay inline so
   the sentence is not broken. */
.perm-rule > div > b { display: block; font-size: .86rem; line-height: 1.25; }
.perm-rule span { font-size: .78rem; color: var(--ink-2); line-height: 1.35; }
.perm-rule span b { display: inline; font-weight: 600; }
.perm-roles { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.perm-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

/* ---------- History: execution bars & verdicts ---------- */
/* Execution bar: soft fills so the dark label stays readable at any width,
   and a distinct colour for overruns (over 100% is a problem, not a success). */
.exec-bar { position: relative; background: #eef1f6; border-radius: 999px;
  height: 20px; overflow: hidden; min-width: 140px; border: 1px solid var(--line); }
.exec-fill { height: 100%; border-radius: 999px; }
.exec-fill.bar-over { background: #f5b8b8; }   /* overrun  */
.exec-fill.bar-high { background: #a8e0c4; }   /* healthy  */
.exec-fill.bar-mid  { background: #ffe1a3; }   /* partial  */
.exec-fill.bar-low  { background: #cfd9e6; }   /* low use  */
.exec-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .73rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums;
  letter-spacing: .01em; }
.vd-chip { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .74rem;
  font-weight: 600; white-space: nowrap; margin-right: 6px; cursor: help; }
.vd-ok { background: var(--good-soft); color: var(--good); }
.vd-high { background: var(--bad-soft); color: var(--bad); }
.vd-low { background: var(--accent-soft); color: var(--accent); }
.vd-none { background: #fdeee6; color: #a34a12; }
.vd-new { background: #f3ecfd; color: #6b3fc4; }
.vd-nodata { background: #f2f4f7; color: var(--ink-2); }
.ratio { font-weight: 600; font-variant-numeric: tabular-nums; }
.ratio.up { color: var(--bad); }
.ratio.down { color: var(--accent); }

/* ---------- Analysis alerts ---------- */
.alert-tag { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 2px 10px; font-size: .74rem; font-weight: 600; white-space: nowrap; cursor: help; }
.alert-nuevo_gasto { background: var(--accent-soft); color: var(--accent); }
.alert-gasto_eliminado { background: var(--good-soft); color: var(--good); }
.alert-salto_fuerte { background: #fdeee6; color: #a34a12; }
.alert-sobre_aprobado { background: var(--bad-soft); color: var(--bad); }

/* ---------- Version comparison summary ---------- */
.cmp-summary { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; }
.cmp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.cmp-eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; }
.cmp-title { font-size: 1rem; font-weight: 650; color: var(--heading); }
.cmp-nets { display: flex; gap: 22px; }
.cmp-nets > div { display: flex; flex-direction: column; align-items: flex-end; }
.cmp-lab { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.cmp-val { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-chips { margin-top: 10px; }
.cmp-movers { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cmp-mover { font-size: .8rem; font-variant-numeric: tabular-nums; background: var(--surface-2, #f4f6fa);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }

/* ---------- Export center ---------- */
.exp-intro { font-size: .85rem; color: var(--ink-2); margin: 0 0 14px; }
.exp-tabs { display: inline-flex; gap: 4px; background: var(--surface-2, #f4f6fa); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.exp-tab { border: none; background: transparent; color: var(--ink-2); font-weight: 500; font-size: .85rem;
  padding: 6px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.exp-tab:hover { color: var(--heading); }
.exp-tab.active { background: var(--accent); color: #fff; font-weight: 600; }
.exp-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.exp-link { border: none; background: none; color: var(--accent); font-size: .8rem; font-weight: 600;
  padding: 0; cursor: pointer; }
.exp-link:hover { text-decoration: underline; }
.exp-count { margin-left: auto; font-size: .78rem; color: var(--muted); }
.exp-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.exp-row { display: flex; gap: 11px; align-items: flex-start; padding: 9px 13px; margin: 0; cursor: pointer;
  border-bottom: 1px solid var(--line); }
.exp-row:last-child { border-bottom: none; }
.exp-row:hover { background: var(--accent-soft); }
.exp-row input { margin-top: 4px; accent-color: var(--accent); flex-shrink: 0; }
.exp-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.exp-name { font-size: .87rem; font-weight: 600; color: var(--ink); }
.exp-meta { font-size: .75rem; color: var(--ink-2); }
.exp-centers { font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.exp-amt { font-size: .82rem; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; padding-top: 2px; }
.exp-hint { font-size: .78rem; color: var(--muted); margin: 9px 2px 0; display: flex; gap: 6px; align-items: flex-start; }
.exp-footer { display: flex; justify-content: flex-end; margin-top: 16px; }
.exp-options {
  display: flex; flex-direction: column; gap: 8px;
  background: #f6f8fb; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 13px; margin: 0 0 16px;
}
.exp-opt { display: flex; align-items: flex-start; gap: 9px; font-size: .85rem; cursor: pointer; }
.exp-opt input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.exp-opt small { display: block; color: var(--muted); font-size: .76rem; }

/* ---------- Danger zone ---------- */
.danger-zone { border-color: #f0c9c9; }
.danger-zone h6 { color: #b02a2a; }
.danger-zone h6 i { color: #b02a2a; }

.empty-icon {
  width: 74px; height: 74px; border-radius: 22px; margin: 0 auto 14px; display: flex; align-items: center;
  justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 2.2rem;
}
.role-badge { border-radius: 999px; font-weight: 600; }

@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: relative; top: 0; }
  .main-content { max-width: 100vw; }
}

/* ---------- Login: split brand panel + clean form ---------- */
/* Not flat: two soft indigo glows plus a faint dot grid so the canvas has depth
   without competing with the card. All CSS — no external images. */
body.login-mode {
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(79,107,237,.12), transparent 60%),
    radial-gradient(760px 480px at 100% 110%, rgba(79,107,237,.10), transparent 55%),
    radial-gradient(circle, rgba(20,25,45,.05) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--page);
}
#login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-split {
  width: 100%; max-width: 860px; display: grid; grid-template-columns: 1.05fr .95fr;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow-lg);
}
@media (max-width: 720px) { .login-split { grid-template-columns: 1fr; max-width: 420px; } .login-aside { display: none; } }

/* Brand side — the personality: deep indigo, soft radial light, feature list */
.login-aside {
  position: relative; color: #eef1ff; padding: 40px 38px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
  background:
    radial-gradient(120% 80% at 85% -5%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(160deg, #4f6bed 0%, #3a52c8 55%, #2c3ea6 100%);
}
.login-aside-top { display: flex; align-items: center; gap: 12px; }
.login-logo { border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.login-aside-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.login-aside-tag { font-size: .74rem; color: rgba(255,255,255,.7); letter-spacing: .04em; text-transform: uppercase; }
.login-aside-mid h1 { font-size: 1.75rem; line-height: 1.15; font-weight: 720; letter-spacing: -.025em; margin: 0 0 12px; }
.login-aside-mid p { font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.82); margin: 0; max-width: 34ch; }
.login-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.login-feats li { display: flex; align-items: center; gap: 9px; font-size: .86rem; color: rgba(255,255,255,.9); }
.login-feats li i { font-size: 1.05rem; color: #b9c6ff; }

/* Form side */
.login-card { padding: 44px 42px; display: flex; flex-direction: column; }
.login-card-head { margin-bottom: 22px; }
.login-brand { font-size: 1.4rem; font-weight: 700; color: var(--heading); letter-spacing: -.02em; }
.login-sub { color: var(--ink-2); font-size: .88rem; margin-top: 3px; }
.login-label { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
.login-field { position: relative; }
.login-field i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 1.05rem; pointer-events: none; }
.login-field .form-control { padding-left: 38px; height: 44px; border-radius: 10px; border-color: var(--line); }
.login-field .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,107,237,.14); }
.btn-login {
  margin-top: 22px; height: 46px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--accent); color: #fff; font-weight: 600; font-size: .95rem;
  display: flex; align-items: center; justify-content: center; gap: 8px; transition: background .12s, transform .12s;
}
.btn-login:hover { background: var(--accent-strong); }
.btn-login:active { transform: translateY(1px); }
.btn-login:disabled { opacity: .6; cursor: default; }
.btn-login i { font-size: 1.1rem; transition: transform .15s; }
.btn-login:hover:not(:disabled) i { transform: translateX(3px); }
.login-foot { margin-top: 18px; font-size: .76rem; color: var(--muted); text-align: center; }
.login-error {
  background: var(--bad-soft); color: var(--bad); border: 1px solid #fecdca;
  border-radius: 9px; padding: 10px 12px; font-size: .84rem; margin-bottom: 6px;
}
/* ---------- Fila de usuario en el sidebar (rail claro) ---------- */
.user-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 9px 10px; background: var(--hover); border: 1px solid var(--line); border-radius: 10px;
}
.user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.user-name {
  display: block; font-size: .82rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role-label { font-size: .7rem; color: var(--muted); font-weight: 500; }
.user-logout {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--line); color: var(--ink-2);
  cursor: pointer; padding: 5px 9px; border-radius: 8px; font-size: .78rem; font-weight: 500;
  transition: all .12s;
}
.user-logout i { font-size: 1rem; }
.user-logout:hover { background: var(--bad-soft); border-color: #fecdca; color: var(--bad); }

/* ---------- Tooltip propio (no el nativo del navegador) ---------- */
[data-tip] { position: relative; cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: #1d2739; color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.45;
  text-align: left; white-space: normal; width: max-content; max-width: 280px;
  padding: 8px 11px; border-radius: 9px; box-shadow: 0 10px 28px rgba(16,24,40,.22);
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 60;
}
[data-tip]::before {   /* la flechita */
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent; border-top-color: #1d2739;
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .14s ease; z-index: 60;
}
[data-tip]:hover::after, [data-tip]:hover::before,
[data-tip]:focus::after, [data-tip]:focus::before { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Cerca del borde derecho, alinea a la derecha para no salirse */
[data-tip].tip-right::after { left: auto; right: 0; transform: translateX(0) translateY(4px); }
[data-tip].tip-right:hover::after, [data-tip].tip-right:focus::after { transform: translateX(0) translateY(0); }

/* The credit mark in the month-close analysis */
.credit-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: .68rem; font-weight: 700; vertical-align: -1px;
}

/* ---------- Month-close analysis tabs (over / under projected) ---------- */
.close-tabs { display: inline-flex; gap: 4px; background: #f4f6fa; border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; margin-bottom: 12px; }
.close-tab { border: none; background: transparent; color: var(--ink-2); font-weight: 500; font-size: .85rem;
  padding: 6px 16px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.close-tab:hover { color: var(--heading); }
.close-tab.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ---------- Month-close analysis bridge (summary vs total) ---------- */
.bridge-box {
  background: #f8fafc; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; margin: 4px 0 16px;
}
.bridge-title { font-weight: 600; font-size: .92rem; color: var(--heading-2);
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.bridge-title .ti { color: var(--accent); }
.bridge-intro { font-size: .84rem; color: var(--ink-2); margin: 0 0 10px; }
.bridge-line, .bridge-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.bridge-total { border-bottom: none; border-top: 2px solid var(--line); margin-top: 4px;
  padding-top: 9px; font-weight: 700; }
.bridge-label { font-size: .85rem; color: var(--ink); }
.bridge-hint { display: block; font-size: .74rem; color: var(--muted); font-weight: 400; }
.bridge-val { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.bridge-total .bridge-val { font-size: 1.05rem; }
.bridge-foot { font-size: .82rem; color: var(--ink-2); margin: 11px 0 0;
  background: var(--accent-soft); border-radius: 8px; padding: 9px 12px; }