/* ==========================================================================
   Budgets & Goals — the workbook sheet, mirrored, and its planner. Layout only; components are the
   house defaults (ev-table, tb-seg, bp-chip, bbb-goal). This file adds what
   Excel gave the sheet for free: frozen panes (sticky header row + sticky
   identity columns inside one scrolling wrapper), the TOTAL row bands, and
   the one added affordance — the LIVE columns are tinted so plan (the sheet's
   own numbers) and real (the Marketing Dashboard) read apart at a glance.
   Tokens only (`--bb-*`, `--bb-mono` = Outfit + tabular-nums).
   ========================================================================== */

.bg-root { display: flex; flex-direction: column; gap: 16px; padding-bottom: 64px; }

/* Head: title + Seguimiento/Planner on one line; the start picker + the chips under it. */
.bg-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; }
.bg-head .tb-title { margin: 0; }
.bg-startrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bg-starts button { font-variant-numeric: tabular-nums; }
.bg-starts .bg-start-draft { font-style: italic; }
.bg-newstart { display: inline-flex; align-items: center; gap: 6px; }
.bg-newstart input[type="date"] {
  height: 32px; padding: 0 8px; border: 1px solid var(--bb-line, #E4E1D8); border-radius: 8px;
  background: var(--bb-paper, #FFF); color: var(--bb-ink, #1A1A1A); font: 500 13px/1 'Outfit', system-ui, sans-serif;
}
.bg-head .tb-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.bg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-head .tb-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.bg-upload { cursor: pointer; }
.bg-weeks button[disabled] { opacity: .35; cursor: default; }
.bg-weeks button[disabled]:hover { background: transparent; color: var(--bb-ink-2, #5A564F); }

/* Division tabs — the segmented control, with the pace of that division's leads as a dot. */
.bg-divbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bg-divs { flex-wrap: wrap; }
.bg-divs button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 13px; }
.bg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bb-ink-4, #C9C4B8); flex: none; }
.bg-dot.is-good { background: var(--bb-green, #2E7D52); }
.bg-dot.is-warn { background: var(--bb-orange, #C77D1B); }
.bg-dot.is-bad  { background: var(--bb-red, #B23B3B); }

/* ---- the sheet ----------------------------------------------------------- */

/* The frozen panes: one scroller, header pinned to its top, identity columns pinned to its
 * left. A max-height + overflow:auto on the WRAPPER is what makes `position: sticky` work in
 * both axes — a wrapper that only scrolls horizontally cannot pin the header. */
.bg-sheetwrap {
  overflow: auto;
  max-height: calc(100vh - 230px);
  border: 1px solid var(--bb-line, #E4E1D8);
  border-radius: 10px;
  background: var(--bb-paper, #FFFFFF);
}

.bg-sheet { width: max-content; min-width: 100%; font-size: 12.5px; }
.bg-sheet th, .bg-sheet td { white-space: nowrap; padding: 6px 9px; }
.bg-sheet thead th {
  position: sticky; top: 0; z-index: 3;
  background: var(--bb-field, #F1EFE8);
  color: var(--bb-ink-2, #5A564F);
  font: 600 11px/1.25 'Outfit', system-ui, sans-serif;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--bb-line, #E4E1D8);
  box-shadow: 0 1px 0 var(--bb-paper, #FFF);
}
.bg-sheet td.num, .bg-sheet thead th.num {
  text-align: right;
  font-family: var(--bb-mono);
  font-variant-numeric: tabular-nums;
}
.bg-sheet tbody td { border-bottom: 1px solid var(--bb-line-2, #ECEAE2); }
.bg-sheet tbody tr:hover td { background: var(--bb-hover, #F4F2EC); }

/* Identity columns — pinned left, in stacking order over the scrolling cells. Left offsets
 * are the cumulative widths set inline per table (--st1/--st2/--st3). */
.bg-sheet .bg-id, .bg-sheet thead .bg-st1, .bg-sheet thead .bg-st2, .bg-sheet thead .bg-st3 {
  position: sticky; z-index: 2;
  background: var(--bb-paper, #FFFFFF);
  text-align: left;
}
.bg-sheet thead .bg-st1, .bg-sheet thead .bg-st2, .bg-sheet thead .bg-st3 { z-index: 4; background: var(--bb-field, #F1EFE8); }
.bg-sheet .bg-st1 { left: 0; min-width: var(--st1, 64px); }
.bg-sheet .bg-st2 { left: var(--st1, 64px); min-width: var(--st2, 128px); }
.bg-sheet .bg-st3 { left: calc(var(--st1, 96px) + var(--st2, 52px)); min-width: var(--st3, 124px); }
.bg-sheet .bg-id.bg-campus { font-weight: 600; color: var(--bb-ink, #1A1A1A); }
/* The pinned block ends with a real edge — the sheet's own frozen-pane line. */
.bg-sheet .bg-st2, .bg-sheet thead .bg-st2 { border-right: 1px solid var(--bb-line, #E4E1D8); }
.bg-sheet .bg-st3, .bg-sheet thead .bg-st3 { border-right: 1px solid var(--bb-line, #E4E1D8); }

/* Block starts: a hairline before identity end / paid / investment / budget. */
.bg-sheet .bg-blk { border-left: 1px solid var(--bb-line, #E4E1D8); }

/* Resumen: the helper columns (month splits, shares, achievable starts) step out; the block
 * that a hidden month column opened in Hoja is opened by its total instead (blkc). */
.bg-sheet.bg-compact .bg-ext { display: none; }
/* Run Rate toggle (per viewer, bb_budgets_rr): the two run-rate columns step out. */
.bg-sheet.bg-norr .bg-rr { display: none; }
.bg-sheet.bg-compact .bg-blkc { border-left: 1px solid var(--bb-line, #E4E1D8); }

/* LIVE columns — the same tint on the header and the cells, one hue. color-mix keeps it a
 * token (no hard-coded blue); the header carries a touch more so the block reads as a unit. */
.bg-sheet .bg-act { background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 5%, var(--bb-paper, #FFFFFF)); }
.bg-sheet thead .bg-act-h { background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 12%, var(--bb-field, #F1EFE8)); }
.bg-sheet tbody tr:hover .bg-act { background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 9%, var(--bb-hover, #F4F2EC)); }

/* Open but empty — the week is past what the MD book reaches (docs/rules/budget-goals.md,
 * "the By Program bridge"). Muted, italic, and never a number: it fills in by itself. */
.bg-sheet td.bg-pend { color: var(--bb-ink-3, #8A8578); font: italic 500 11px/1 'Outfit', system-ui, sans-serif; letter-spacing: .02em; }
/* A number the By Program supplied (tie-gated) — a dotted underline, the reason in its title. */
.bg-sheet td.bg-bp { text-decoration: underline dotted color-mix(in srgb, var(--bb-accent, #0D2A5E) 45%, transparent); text-underline-offset: 3px; }
.bg-bpchip { border-style: dashed; }

/* Campus rows cannot hold the money-actuals (spend is segment grain): an empty cell reads as
 * "no such number at this grain", never 0, never —. */
.bg-sheet .bg-na { background: transparent; }

/* TOTAL rows: the sheet's own band, plus the grand one shade deeper. */
.bg-sheet .bg-total td { background: var(--bb-field, #F1EFE8); font-weight: 600; }
.bg-sheet tbody tr:hover .bg-total td { background: var(--bb-field, #F1EFE8); }
.bg-sheet .bg-total .bg-act { background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 9%, var(--bb-field, #F1EFE8)); }
.bg-sheet .bg-grand td { background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 6%, var(--bb-field, #F1EFE8)); }
.bg-sheet .bg-grand .bg-act { background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 12%, var(--bb-field, #F1EFE8)); }

/* The pace cell (Ritmo) — narrower than the cards' rail. */
.bg-pacecell { min-width: 108px; }
.bg-pacecell > div { display: flex; align-items: center; gap: 7px; }
.bg-pacecell .bg-rail { height: 8px; }
.bg-rail.is-good > i { background: var(--bb-green, #2E7D52); }
.bg-rail.is-warn > i { background: var(--bb-orange, #C77D1B); }
.bg-rail.is-bad  > i { background: var(--bb-red, #B23B3B); }
.bg-rail.bg-rail-none::after { display: none; }
.bg-pace {
  flex: none; min-width: 40px; text-align: right;
  font: 600 12px/1 var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink-2, #5A564F);
}
.bg-pace.is-good { color: var(--bb-green, #2E7D52); }
.bg-pace.is-warn { color: var(--bb-orange, #C77D1B); }
.bg-pace.is-bad  { color: var(--bb-red, #B23B3B); }

/* On track / watch / off — a live cell's tone (col.tone in budgets.js; same thresholds as Ritmo:
 * ≥100% good, ≥90% watch; money ±10%; a cost at or under plan is good). The tone tints OVER the
 * live column's navy wash so plan vs real still reads apart, and colours the number. */
.bg-sheet td.bg-tone.is-good { color: var(--bb-green, #2E7D52); background: color-mix(in srgb, var(--bb-green, #2E7D52) 11%, var(--bb-paper, #FFFFFF)); }
.bg-sheet td.bg-tone.is-warn { color: var(--bb-orange, #C77D1B); background: color-mix(in srgb, var(--bb-orange, #C77D1B) 12%, var(--bb-paper, #FFFFFF)); }
.bg-sheet td.bg-tone.is-bad  { color: var(--bb-red, #B23B3B); background: color-mix(in srgb, var(--bb-red, #B23B3B) 10%, var(--bb-paper, #FFFFFF)); }
.bg-sheet td.bg-tone { font-weight: 600; }
.bg-sheet tbody tr:hover td.bg-tone.is-good { background: color-mix(in srgb, var(--bb-green, #2E7D52) 16%, var(--bb-paper, #FFFFFF)); }
.bg-sheet tbody tr:hover td.bg-tone.is-warn { background: color-mix(in srgb, var(--bb-orange, #C77D1B) 17%, var(--bb-paper, #FFFFFF)); }
.bg-sheet tbody tr:hover td.bg-tone.is-bad  { background: color-mix(in srgb, var(--bb-red, #B23B3B) 15%, var(--bb-paper, #FFFFFF)); }

/* The Executive Summary's gold cells, as a chip on the slim row under each TOTAL. */
.bg-yrow td { border-bottom: none !important; padding-top: 2px !important; padding-bottom: 2px !important; }
.bg-yellow {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  background: rgba(222, 184, 60, .22);
  font: 600 11px/1.4 'Outfit', system-ui, sans-serif;
  color: var(--bb-ink-2, #5A564F);
  white-space: nowrap;
}

/* Section title rows (Todas) and the cut note. */
.bg-sect td {
  background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 5%, var(--bb-paper, #FFFFFF));
  font: 700 12px/1.4 'Outfit', system-ui, sans-serif;
  letter-spacing: .04em;
  color: var(--bb-ink, #1A1A1A);
  border-bottom: 1px solid var(--bb-line, #E4E1D8);
}
.bg-cut { margin-left: auto; font: 500 11.5px/1.4 'Outfit', system-ui, sans-serif; color: var(--bb-ink-3, #8A8578); font-variant-numeric: tabular-nums; }

/* ---- the planner ---------------------------------------------------------- */

.bg-lbl { font: 600 11px/1.2 'Outfit', system-ui, sans-serif; letter-spacing: .03em; color: var(--bb-ink-3, #8A8578); text-transform: uppercase; }
.bg-realbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.bg-publish.is-armed { background: var(--bb-accent, #0D2A5E); border-color: var(--bb-accent, #0D2A5E); color: #fff; }
.bg-winrow { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.bg-sel {
  height: 30px; padding: 0 8px; border: 1px solid var(--bb-line, #E4E1D8); border-radius: 8px;
  background: var(--bb-paper, #FFF); color: var(--bb-ink, #1A1A1A); font: 500 13px/1 'Outfit', system-ui, sans-serif;
}

/* The workbook's own convention: a person types into the YELLOW cells; everything else is a
 * formula. The input fills its cell so the table keeps the sheet's grid. */
.bg-sheet td.bg-incell { padding: 2px 3px; background: rgba(222, 184, 60, .16); }
.bg-sheet tbody tr:hover td.bg-incell { background: rgba(222, 184, 60, .26); }
.bg-in {
  width: 100%; min-width: 64px; height: 26px; box-sizing: border-box; padding: 0 6px;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  font: 500 12.5px/1 var(--bb-mono); font-variant-numeric: tabular-nums; text-align: right;
  color: var(--bb-ink, #1A1A1A);
}
.bg-in:hover { border-color: rgba(222, 184, 60, .6); }
.bg-in:focus { outline: none; border-color: var(--bb-accent, #0D2A5E); background: var(--bb-paper, #FFF); }
.bg-in.is-bad { border-color: var(--bb-red, #B23B3B); }
.bg-in-pct { padding-right: 16px; }
.bg-incell { position: relative; }
.bg-incell:has(.bg-in-pct)::after { content: '%'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font: 500 11px/1 var(--bb-mono); color: var(--bb-ink-3, #8A8578); pointer-events: none; }
.bg-planwrap { max-height: none; }

/* Assumptions: budget per month + the solved stats per segment. */
.bg-assump { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.bg-budgets { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 12px 14px; border: 1px solid var(--bb-line, #E4E1D8); border-radius: 10px; background: var(--bb-paper, #FFF); }
.bg-field { display: flex; flex-direction: column; gap: 5px; min-width: 120px; }
.bg-field .bg-in { height: 32px; background: rgba(222, 184, 60, .16); font-size: 14px; text-align: left; }
.bg-val { font: 600 15px/32px var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink, #1A1A1A); }
.bg-mini-wrap { flex: 1 1 360px; min-width: 0; max-width: 100%; overflow-x: auto; }
.bg-mini-table { width: auto; font-size: 12.5px; border: 1px solid var(--bb-line, #E4E1D8); border-radius: 10px; overflow: hidden; background: var(--bb-paper, #FFF); }
.bg-mini-table th, .bg-mini-table td { padding: 6px 10px; white-space: nowrap; }
.bg-mini-table td.num, .bg-mini-table th.num { text-align: right; font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }
.bg-mini-table td.bg-incell { min-width: 96px; }
.bg-mini {
  margin-left: 6px; padding: 2px 7px; border: 1px solid var(--bb-line, #E4E1D8); border-radius: 6px;
  background: var(--bb-paper, #FFF); color: var(--bb-ink-2, #5A564F); font: 600 11px/1.4 'Outfit', system-ui, sans-serif; cursor: pointer;
}
.bg-mini:hover { border-color: var(--bb-ink-3, #8A8578); color: var(--bb-ink, #1A1A1A); }

/* "% of Leads" per segment, side by side when there are two. */
.bg-mixgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: 16px; align-items: start; }
/* A grid item's min-width is its content's (the table) — 0 lets the wrapper scroll instead. */
.bg-mixgrid > .bg-mixblock { min-width: 0; }
.bg-mixhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.bg-mixhead h3 { margin: 0 auto 0 0; font: 700 15px/1.3 'Outfit', system-ui, sans-serif; color: var(--bb-ink, #1A1A1A); }
.bg-mixwrap { max-height: none; }
.bg-mix { width: 100%; }
.bg-mix .bg-leaf td { background: var(--bb-field, #F1EFE8); font-weight: 600; }
.bg-mix .bg-leaf td.bg-act { background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 9%, var(--bb-field, #F1EFE8)); }
.bg-mix .bg-cat { padding-left: 20px !important; font-weight: 500; color: var(--bb-ink-2, #5A564F); }
.bg-mix tr.bg-zero .bg-cat { color: var(--bb-ink-3, #8A8578); }
.bg-mix td.bg-incell { width: 92px; }

.bg-rowlink { cursor: pointer; }
.bg-neg { color: var(--bb-red, #B23B3B); }
.bg-pos { color: var(--bb-green, #2E7D52); }

/* Phone: the wrapper already scrolls; keep the header chips from spilling. */
@media (max-width: 900px) {
  .bg-head .tb-head-side { align-items: stretch; }
  .bg-realbar, .bg-head .tb-controls { justify-content: flex-start; }
  .bg-winrow { margin-left: 0; }
  .bg-mixgrid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bg-sheet { font-size: 11.5px; }
  .bg-sheet th, .bg-sheet td { padding: 5px 7px; }
  .bg-pacecell { min-width: 84px; }
}
/* Variance To-Date — Power BI's diverging data bar (varCell in budgets.js). The axis is the
 * cell's centre; a miss grows LEFT, a gain RIGHT, length = % off the goal to date (cap 100%).
 * Colour follows the cell's tone; an untoned cell (campus money = reparto) gets the navy. */
.bg-sheet td.bg-varcell { min-width: 150px; }
.bg-var { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.bg-var-bar { position: relative; flex: none; width: 56px; height: 12px; }
.bg-var-bar::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px dotted var(--bb-ink-3, #8A8578); }
.bg-var-bar > i { position: absolute; top: 0; bottom: 0; width: var(--w); border-radius: 2px; background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 45%, transparent); }
.bg-var-bar > i.neg { right: 50%; }
.bg-var-bar > i.pos { left: 50%; }
.bg-varcell.is-good .bg-var-bar > i { background: color-mix(in srgb, var(--bb-green, #2E7D52) 70%, transparent); }
.bg-varcell.is-warn .bg-var-bar > i { background: color-mix(in srgb, var(--bb-orange, #C77D1B) 75%, transparent); }
.bg-varcell.is-bad  .bg-var-bar > i { background: color-mix(in srgb, var(--bb-red, #B23B3B) 65%, transparent); }
.bg-var-n { min-width: 44px; text-align: right; font: 600 12px/1 var(--bb-mono); font-variant-numeric: tabular-nums; }
.bg-var-p { min-width: 44px; text-align: right; font: 500 11px/1 var(--bb-mono); font-variant-numeric: tabular-nums; color: var(--bb-ink-3, #8A8578); }
.bg-varcell.is-good .bg-var-n { color: var(--bb-green, #2E7D52); }
.bg-varcell.is-warn .bg-var-n { color: var(--bb-orange, #C77D1B); }
.bg-varcell.is-bad  .bg-var-n { color: var(--bb-red, #B23B3B); }

/* --- the variance card (varPopHtml in budgets.js) --------------------------------------------
 * The catalog's popover (.bbh-pop tokens: surface, hairline, card radius, overlay shadow) in a
 * FIXED form, because the sheet's scroll container clips an absolute child. Two CollectUI
 * references and why it carries only three facts, both named in varPopHtml's comment.
 * Every number is var(--bb-mono) with tabular-nums, like every other figure on the page. */
#bbVarPop { position: fixed; z-index: 60; pointer-events: none; }
.bg-varpop { width: min(360px, calc(100vw - 16px)); padding: 10px 12px 11px;
  background: var(--bb-surface); border: 1px solid var(--bb-line); border-radius: var(--bb-r-card);
  box-shadow: var(--bb-sh-overlay); animation: bgVarIn 150ms cubic-bezier(0, 0, .58, 1) both; }
@keyframes bgVarIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bg-varpop { animation: none; } }
.bg-varpop-h { font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .07em;
  text-transform: uppercase; color: var(--bb-ink-3, #8A8578); margin-bottom: 7px; }
.bg-varpop-cs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; }
.bg-varpop-c { font: 600 10px/1 var(--bb-mono); padding: 2px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--bb-ink-3, #8A8578) 12%, transparent); color: var(--bb-ink-3, #8A8578); }
.bg-varpop-c.is-bp { color: var(--bb-accent, #0D2A5E); background: color-mix(in srgb, var(--bb-accent, #0D2A5E) 10%, transparent); }
.bg-varpop-eq { display: grid; grid-template-columns: 1fr auto auto; gap: 3px 8px; align-items: baseline;
  padding-bottom: 7px; margin-bottom: 7px; border-bottom: 1px solid var(--bb-line); }
.bg-varpop-k { font-size: 11px; line-height: 1.3; color: var(--bb-ink-3, #8A8578); }
.bg-varpop-v { font: 600 12px/1 var(--bb-mono); font-variant-numeric: tabular-nums; text-align: right; }
.bg-varpop-p { font: 600 12px/1 var(--bb-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--bb-ink-3, #8A8578); }
.bg-varpop-k.is-sum { font-weight: 700; color: var(--bb-ink); }
.bg-varpop.is-good .bg-varpop-v.is-sum, .bg-varpop.is-good .bg-varpop-p { color: var(--bb-green, #2E7D52); }
.bg-varpop.is-warn .bg-varpop-v.is-sum, .bg-varpop.is-warn .bg-varpop-p { color: var(--bb-orange, #C77D1B); }
.bg-varpop.is-bad  .bg-varpop-v.is-sum, .bg-varpop.is-bad  .bg-varpop-p { color: var(--bb-red, #B23B3B); }
.bg-varpop-wk { width: 100%; border-collapse: collapse; }
.bg-varpop-wk th { font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bb-ink-3, #8A8578); text-align: right; padding: 0 0 3px; }
.bg-varpop-wk td { font: 500 11px/1.5 var(--bb-mono); font-variant-numeric: tabular-nums; text-align: right; padding: 1px 0; }
.bg-varpop-w { text-align: left; color: var(--bb-ink-3, #8A8578); }
.bg-varpop-d { text-align: left; color: var(--bb-ink-3, #8A8578); font-size: 10px; }
.bg-varpop-wk td.neg { color: var(--bb-red, #B23B3B); }
.bg-varpop-wk td.pos { color: var(--bb-green, #2E7D52); }
.bg-varpop-wk tfoot td { border-top: 1px solid var(--bb-line); padding-top: 4px; font-weight: 700; }
.bg-varpop-why { font: 600 10px/1.2 var(--bb-mono); color: var(--bb-ink-3, #8A8578); }
.bg-varpop-src { display: none; }