:root {
  --navy-50: #f1f6fb;
  --navy-900: #0E2B47;
  --navy-950: #06223a;
  --ink: #0E2B47;
  --ink-soft: #48607A;
  --sand-50: #FBF9F4;
  --sand-100: #F7F4EE;
  --sand-200: #EFEADF;
  --sand-300: #E5DED1;
  --pennant: #F5C518;
  --sea: #1E6FA8;
  --sea-deep: #0C4F82;
  --surf: #E8F0F7;
  /* `--pos` / `--neg` mirror the semáforo `ok` / `over` swatches used
     across the dashboard (chips, bars, KPI tile pcts). Keeping them on
     the same palette ensures KPI deltas, asm-pos/neg badges and login
     error text all read with the same colour grammar as the rest of
     the app — and pick up matching dark-mode overrides below. */
  --pos: #1f8b54;
  --neg: #b03737;
}

/* Root typography. `text-size-adjust` is left at its default `auto`
   so the iOS Safari "Aa" slider (a per-site page zoom) can still scale
   text — setting it to `100%` or `none` would neutralise the slider.
   Every font-size in this file is expressed in rem (16px = 1rem) so
   browser zoom propagates uniformly across the UI. */
html {
  font-size: 100%;
  font-family: 'Inter', system-ui, sans-serif;
}
html, body { height: 100%; }
body { background: #F7F4EE; color: var(--ink); }

/* Strip user-agent button styling inside the app shell so our class-based
   styling is the only thing that paints chrome. :where() keeps this rule
   at zero specificity so individual button classes (.topbar-hamburger,
   .btn-primary-f, .sidebar-link-active …) override it cleanly. */
:where(.topbar button, .sidebar button, .f-split button, .f-tab-strip button) {
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

/* ------------------------------ Dark mode ------------------------------ */
html.dark {
  color-scheme: dark;
}
html.dark body {
  background: linear-gradient(180deg, #06223a 0%, #0b3a5b 100%);
  color: #dde9f4;
}
html.dark .card {
  background: #0b3a5b;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,.65);
}
html.dark .feature-card {
  background: #0b3a5b;
  border-color: rgba(255,255,255,.08);
}
html.dark .feature-card:hover {
  border-color: rgba(89,142,190,.55);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.7);
}
html.dark .input,
html.dark .select,
html.dark .textarea {
  background: #163a5c;
  color: #dde9f4;
  border-color: rgba(255,255,255,.12);
}
html.dark .input:focus,
html.dark .select:focus,
html.dark .textarea:focus {
  border-color: #598ebe;
  box-shadow: 0 0 0 4px rgba(89,142,190,.22);
}
html.dark .label { color: #8db3d6; }
html.dark .btn-secondary {
  background: #163a5c;
  color: #dde9f4;
  border-color: rgba(255,255,255,.12);
}
html.dark .btn-secondary:hover { background: #1c4670; }
html.dark .btn-ghost { color: #dde9f4; }
html.dark .btn-ghost:hover { background: rgba(255,255,255,.06); }
html.dark .dropzone {
  background: linear-gradient(180deg, #0b3a5b 0%, #163a5c 100%);
  border-color: rgba(255,255,255,.18);
}
html.dark .dropzone.dragging {
  background: #1c4670;
  border-color: #598ebe;
}
html.dark .table-wrap { border-color: rgba(255,255,255,.08); }
html.dark table.data thead th {
  background: #163a5c;
  color: #dde9f4;
  border-bottom-color: rgba(255,255,255,.08);
}
html.dark table.data tbody td { border-bottom-color: rgba(255,255,255,.06); }
html.dark table.data tbody tr:hover { background: rgba(255,255,255,.04); }
html.dark .modal { background: #0b3a5b; color: #dde9f4; }
html.dark .flag-chip {
  background: #163a5c;
  border-color: rgba(255,255,255,.12);
  color: #dde9f4;
}
html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); }
html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }
/* Navy backgrounds used inline in components: invert in dark mode */
html.dark .bg-navy-50    { background-color: #163a5c !important; }
html.dark .bg-navy-100   { background-color: #1c4670 !important; }
html.dark .bg-white\/80,
html.dark .bg-white      { background-color: rgba(11,58,91,.85) !important; }
html.dark .text-navy-900 { color: #dde9f4 !important; }
html.dark .text-navy-800 { color: #bcd2e8 !important; }
html.dark .text-navy-700 { color: #8db3d6 !important; }
html.dark .text-navy-600 { color: #8db3d6 !important; }
html.dark .text-navy-500 { color: #598ebe !important; }
html.dark .border-navy-900\/10,
html.dark .border-navy-900\/5 { border-color: rgba(255,255,255,.1) !important; }

/* Page transitions */
.view-enter {
  animation: fadeUp .35s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero ocean background */
.hero-ocean {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(89,142,190,.45), transparent 60%),
    radial-gradient(ellipse at 80% 10%, rgba(230,211,168,.35), transparent 55%),
    linear-gradient(180deg, #06223a 0%, #0b3a5b 60%, #163a5c 100%);
}

.hero-ocean::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.06) 0 1px, transparent 1.5px),
    radial-gradient(circle at 40% 88%, rgba(255,255,255,.05) 0 1px, transparent 1.5px);
  background-size: 220px 220px, 320px 320px, 280px 280px;
  pointer-events: none;
}

.wave-divider svg { display: block; width: 100%; }

/* Subtle card */
.card {
  background: #ffffff;
  border: 1px solid rgba(11,58,91,.08);
  border-radius: 1rem;
  box-shadow: 0 10px 40px -20px rgba(11,58,91,.25);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .65rem 1.1rem;
  border-radius: .75rem;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #0b3a5b; color: #fff; }
.btn-primary:hover { background: #163a5c; box-shadow: 0 8px 20px -10px rgba(11,58,91,.55); }
.btn-secondary { background: #f1f6fb; color: #0b3a5b; border: 1px solid rgba(11,58,91,.12); }
.btn-secondary:hover { background: #dde9f4; }
.btn-ghost { background: transparent; color: #0b3a5b; }
.btn-ghost:hover { background: rgba(11,58,91,.06); }
.btn-danger { background: #b91c1c; color: #fff; }
.btn-danger:hover { background: #991b1b; }

.input, .select, .textarea {
  width: 100%;
  border: 1px solid rgba(11,58,91,.15);
  background: #fff;
  border-radius: .65rem;
  padding: .55rem .8rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-size: .95rem;
  color: #0b3a5b;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: #356fa6;
  box-shadow: 0 0 0 4px rgba(53,111,166,.15);
}

.label { display:block; font-size:.8rem; font-weight:600; color:#23578a; margin-bottom:.3rem; letter-spacing:.02em; }

.badge { display:inline-flex; align-items:center; padding:.15rem .55rem; border-radius:9999px; font-size:.72rem; font-weight:600; }
.badge-admin { background:#fef3c7; color:#92400e; }
.badge-member { background:#dbeafe; color:#1e40af; }
.badge-none { background:#fee2e2; color:#991b1b; }

.dropzone {
  border: 2px dashed rgba(11,58,91,.25);
  border-radius: 1rem;
  background: linear-gradient(180deg, #f8fbfe 0%, #ffffff 100%);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.dropzone.dragging {
  border-color: #356fa6;
  background: #e8f1fb;
  transform: scale(1.005);
}

.table-wrap { overflow-x: auto; border-radius: .75rem; border: 1px solid rgba(11,58,91,.08); }
/* Pivot tables become their own vertical scroll viewport so the sticky
   thead (top:0) and sticky first column (left:0) actually freeze when
   the user scrolls. Without a height constraint here the wrap grows
   with content and the page scrolls instead, leaving sticky cells with
   no scroll container to anchor to. The max-height leaves room for the
   topbar + controls bar + description above the table. */
.pivot-wrap {
  overflow: auto;
  max-height: calc(100vh - 14rem);
}
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
/* Pivot tables (Tesorería, PyG, Presupuesto) carry many month columns and
   benefit from a denser layout — smaller type + tighter cell padding so
   more months fit without horizontal scroll. */
table.data.pivot { font-size: .78rem; }
table.data.pivot thead th { padding: .45rem .55rem; }
table.data.pivot tbody td { padding: .35rem .55rem; }
table.data.pivot tr.pivot-row-cuenta td { font-size: .72rem; }
/* Quarterly view: fixed layout so empty Q3/Q4 don't collapse to zero
   width and push all values to the left. The colgroup pins the row-label
   column to a fixed width and lets the remaining colgroup <col> elements
   (without width) share the remaining space equally. */
table.data.pivot.pivot-fixed { table-layout: fixed; }
table.data.pivot.pivot-fixed th,
table.data.pivot.pivot-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.data thead th {
  background: #f1f6fb;
  text-align: left;
  font-weight: 600;
  color: #163a5c;
  padding: .65rem .8rem;
  border-bottom: 1px solid rgba(11,58,91,.08);
  position: sticky; top: 0; z-index: 2;
}
table.data tbody td {
  padding: .55rem .8rem;
  border-bottom: 1px solid rgba(11,58,91,.05);
  vertical-align: top;
}
table.data tbody tr:hover { background: #fafcfe; }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Pivot tables (Tesorería, PyG): the first column carries the row label and
   must stay visible while the user scrolls the wide month columns horizontally
   inside .table-wrap. We give the cell an opaque background so the scrolling
   content underneath doesn't bleed through. Rows that set their own background
   inline (tipo/area/footer) win on specificity. */
table.data.pivot tbody td:first-child {
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 1;
  box-shadow: 1px 0 0 0 rgba(11,58,91,.06);
  /* Reserve enough width for the deepest label path so children don't
     get clipped behind the sticky column when the table is narrower
     than its natural content (e.g. 12 monthly columns on a tablet).
     Kept tight so the first period column sits close to the label. */
  min-width: 200px;
}
table.data.pivot thead th:first-child {
  position: sticky;
  left: 0;
  background: #f1f6fb;
  z-index: 3;
  box-shadow: 1px 0 0 0 rgba(11,58,91,.06);
  min-width: 200px;
}
/* Comparativa view stacks two header rows: month groups on top, sub-labels
   (PP / Real / Diff) below. Without an offset both rows would stick at
   top:0 and overlap. Anchor row 2 just below row 1's natural height. */
table.data.pivot thead tr:nth-child(2) th { top: 1.85rem; }
html.dark table.data.pivot tbody td:first-child { background: #0b3a5b; }
html.dark table.data.pivot thead th:first-child { background: #163a5c; }

/* Pivot row treatments — theme-aware versions of what used to be inline
   light-mode-only styles. Each row carries one of these classes; the
   first-child sticky cell needs its OWN opaque background painted (not
   `background: inherit`, which inherits from <tr> rather than from a
   sibling <td>, and would let the scrolling cells underneath show
   through during horizontal scroll). */
table.data.pivot tr.pivot-row-tipo      td { font-weight: 700; background: #eaf2fa; }
table.data.pivot tr.pivot-row-area      td { font-weight: 600; background: #f4f8fc; }
table.data.pivot tr.pivot-row-actividad td { font-weight: 500; }
/* When a parent row is collapsed, its numeric cells show rolled-up totals
   of hidden children. Keep the label bold for hierarchy, but drop the
   bold on the numbers so they don't read as a loud explicit subtotal. */
table.data.pivot tr.pivot-row-collapsed td.num { font-weight: 400; }
table.data.pivot tr.pivot-row-collapsed td.pivot-col-total { font-weight: 400; }
table.data.pivot tr.pivot-row-cuenta    td { color: #23578a; }
table.data.pivot tr.pivot-row-tipo td:first-child { background: #eaf2fa; }
table.data.pivot tr.pivot-row-area td:first-child { background: #f4f8fc; }
html.dark table.data.pivot tr.pivot-row-tipo      td { background: #1c4670; }
html.dark table.data.pivot tr.pivot-row-area      td { background: #133655; }
html.dark table.data.pivot tr.pivot-row-tipo td:first-child { background: #1c4670; }
html.dark table.data.pivot tr.pivot-row-area td:first-child { background: #133655; }

/* Total column: just bold + a divider on the left so it reads as a total
   without painting the cell. The old solid tint was visually loud. */
table.data.pivot .pivot-col-total {
  background: transparent;
  font-weight: 600;
  border-left: 1px solid rgba(11,58,91,.18);
}
table.data.pivot .pivot-col-sep   { border-left: 1px solid rgba(11,58,91,.12); }

/* Mixto-mode column flags. Chips tag each column as Real / Presupuesto /
   Mixed; the dashed border marks where actuals end and forecast begins;
   forecast cells are subtly italicised; the partial-month flag adds an
   asterisk to the column header for the in-progress month. */
table.data.pivot .pivot-col-chip {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  font-size: 0.65em;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
table.data.pivot .pivot-col-chip-r { background: rgba(11,58,91,.10);  color: #0b3a5b; }
table.data.pivot .pivot-col-chip-p { background: rgba(168,113,18,.14); color: #6e4a0d; }
table.data.pivot .pivot-col-chip-m { background: rgba(11,58,91,.06);  color: #4a6781; }
table.data.pivot .pivot-col-cutoff { border-left: 2px dashed rgba(168,113,18,.50); }
table.data.pivot .pivot-col-forecast { font-style: italic; color: #4a6781; }
table.data.pivot th.pivot-col-partial::after {
  content: '*';
  margin-left: 0.2rem;
  color: #a87112;
  font-weight: 700;
}
html.dark table.data.pivot .pivot-col-chip-r { background: rgba(255,255,255,.10); color: #dde9f4; }
html.dark table.data.pivot .pivot-col-chip-p { background: rgba(255,200,90,.18);  color: #f5d28a; }
html.dark table.data.pivot .pivot-col-chip-m { background: rgba(255,255,255,.06); color: #bcd2e8; }
html.dark table.data.pivot .pivot-col-cutoff { border-left-color: rgba(255,200,90,.45); }
html.dark table.data.pivot .pivot-col-forecast { color: #bcd2e8; }
html.dark table.data.pivot th.pivot-col-partial::after { color: #f5d28a; }

html.dark table.data.pivot tr.pivot-row-tipo      td { background: #163a5c; color: #fff; }
html.dark table.data.pivot tr.pivot-row-area      td { background: #122e4a; color: #dde9f4; }
html.dark table.data.pivot tr.pivot-row-actividad td { color: #dde9f4; }
html.dark table.data.pivot tr.pivot-row-cuenta    td { color: #8db3d6; }
html.dark table.data.pivot .pivot-col-total {
  background: transparent;
  color: #dde9f4;
  border-left-color: rgba(255,255,255,.18);
}

/* ---------------- Balance sheet (side-by-side) -------------------------- */
.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.balance-divider {
  background: rgba(11,58,91,.10);
}
html.dark .balance-divider { background: rgba(255,255,255,.10); }
.balance-side-wrap { overflow-x: auto; }
table.balance-side thead th.balance-side-title { text-align: left; }
table.balance-side tr.balance-section-header td { background: #f7fafd; font-weight: 600; }
html.dark table.balance-side tr.balance-section-header td { background: #122e4a; color: #dde9f4; }
table.balance-side tr.balance-subgroup-row td { color: var(--ink-soft); }
html.dark table.balance-side tr.balance-subgroup-row td { color: #bcd2e8; }
table.balance-side tr.balance-spacer td { padding: .25rem; border-bottom: none; }
table.balance-side tr.balance-total-row td {
  font-weight: 600;
  border-top: 1px solid rgba(11,58,91,.18);
  background: #f1f6fb;
}
html.dark table.balance-side tr.balance-total-row td {
  background: #163a5c;
  border-top-color: rgba(255,255,255,.12);
}
@media (max-width: 900px) {
  .balance-grid { grid-template-columns: 1fr; }
  .balance-divider { display: none; }
}
html.dark table.data.pivot .pivot-col-sep   { border-left-color: rgba(255,255,255,.10); }
/* Sticky first column needs to follow the row's background in dark mode too */
html.dark table.data.pivot tr.pivot-row-tipo td:first-child { background: #163a5c; }
html.dark table.data.pivot tr.pivot-row-area td:first-child { background: #122e4a; }

table.data.pivot tr.pyg-subtotal td { background: #d9e6f2; font-weight: 600; color: #0b3a5b; border-top: 1px solid rgba(11,58,91,.18); }
table.data.pivot tr.pyg-subtotal.pyg-subtotal-final td { font-weight: 700; border-top: 2px solid rgba(11,58,91,.35); }
/* Sticky first cell needs the row's bg painted explicitly — otherwise the
   scrolling value cells bleed through it. */
table.data.pivot tr.pyg-subtotal td:first-child { background: #d9e6f2; }
html.dark table.data.pivot tr.pyg-subtotal td { background: #1c4670; color: #dde9f4; border-top-color: rgba(255,255,255,.12); }
html.dark table.data.pivot tr.pyg-subtotal td:first-child { background: #1c4670; }
html.dark table.data.pivot tr.pyg-subtotal.pyg-subtotal-final td { border-top-color: rgba(255,255,255,.30); }

.toast {
  background: #0b3a5b;
  color: #fff;
  padding: .7rem 1rem;
  border-radius: .65rem;
  box-shadow: 0 12px 30px -10px rgba(11,58,91,.5);
  animation: slideIn .25s ease;
  font-size: .9rem;
  max-width: 360px;
}
.toast.success { background: #166534; }
.toast.error { background: #991b1b; }
.toast.warn { background: #92400e; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(6, 34, 58, .55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; z-index: 90;
  animation: fadeIn .15s ease;
}
.modal {
  background: #fff;
  border-radius: 1rem;
  max-width: 960px; width: 100%;
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(6,34,58,.55);
  animation: popIn .2s ease;
}
/* Modal slot rules — match the three-row layout produced by `modal()`
   in js/ui.js (header, body, optional footer). The body grows and
   scrolls; header and footer stay put so the action buttons can't be
   pushed off-screen and never overlap page content behind. */
.modal > div:first-child { flex-shrink: 0; }
.modal > div:nth-child(2) { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.modal > div:last-child:not(:nth-child(2)) { flex-shrink: 0; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popIn  { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }

/* Cloud-cache loading state — shown inside <main> while bootstrapCloudCache
   is still in flight so views never flash an empty-data state on refresh. */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 50vh;
  padding: 2rem;
  color: var(--ink-soft, #5b6b80);
  animation: fadeIn .2s ease both;
}
.loading-state .loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid rgba(11, 58, 91, .15);
  border-top-color: var(--sea, #356fa6);
  animation: spin .9s linear infinite;
}
.loading-state .loading-label {
  font-size: 0.9375rem;
  letter-spacing: .02em;
}
@keyframes spin { to { transform: rotate(360deg) } }

/* Marquee/feature card */
.feature-card {
  position: relative;
  background: #ffffff;
  border-radius: 1.25rem;
  padding: 1.5rem;
  border: 1px solid rgba(11,58,91,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(53,111,166,.35);
  box-shadow: 0 20px 50px -20px rgba(11,58,91,.35);
}
.feature-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(89,142,190,.0), rgba(89,142,190,.0));
  z-index: 0;
  transition: background .25s ease;
  border-radius: inherit;
  pointer-events: none;
}
.feature-card:hover::before {
  background: linear-gradient(135deg, rgba(89,142,190,.06), rgba(230,211,168,.10));
}
.feature-card > * { position: relative; z-index: 1; }

.glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18);
}

/* Scrollbar polish (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(11,58,91,.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(11,58,91,.32); }
::-webkit-scrollbar-track { background: transparent; }

/* Flag chip */
.flag-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .55rem; border-radius: 999px;
  background: #f1f6fb; border: 1px solid rgba(11,58,91,.1);
  font-weight: 500; font-size: .8rem;
}

/* ============================================================
   Sidebar app shell
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100vh;
  position: relative;
}
/* Sidebar is an off-canvas drawer at every viewport: hidden off-screen by
   default, slid in from the left when the user clicks the topbar
   hamburger. `sidebar-hidden` on <html> toggles visibility; the slide and
   backdrop fade are handled here. */
.sidebar {
  width: min(220px, 84vw);
  background: #ffffff;
  border-right: 1px solid rgba(11,58,91,.08);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 30;
  box-shadow: 0 10px 40px -10px rgba(11, 58, 91, 0.35);
  transform: translateX(0);
  transition: transform .22s ease;
}
html.sidebar-hidden .sidebar { transform: translateX(-100%); }

.sidebar-brand {
  padding: .4rem .5rem .35rem .5rem;
  border-bottom: 1px solid rgba(11,58,91,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  position: relative;
}
/* Amaris brand lockup at the top of the sidebar. Replaces the old
   navy "AMARIS" pill with a wave-A monogram tile + sentence-case
   Playfair wordmark. The mark inherits `currentColor` from the
   `.sidebar-brand-mark` tile so dark mode just flips one variable. */
.sidebar-brand-lockup {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: .55rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity .15s ease;
  /* Stop the lockup from shrinking smaller than its content — the brand
     container is a flex row sharing space with the close X, and on
     narrow sidebars the lockup was sometimes squeezed thin enough that
     the wordmark wrapped under the tile. */
  flex: 0 0 auto;
  min-width: 0;
}
.sidebar-brand-lockup:hover { opacity: .85; }
/* Nautical wordmark: Fraunces in engraved-style uppercase, generously
   letter-spaced. Echoes the brass-plaque lettering on a yacht club
   pediment — formal, maritime, deliberately un-italic. A thin
   horizontal rule above and below pulls the same nautical pediment
   cue without adding a graphic. */
.sidebar-brand-word {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-style: normal;
  font-weight: 600;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  /* Compensate for the right-padding caused by the trailing letter-
     spacing so the wordmark sits visually centred. */
  padding-left: .28em;
  white-space: nowrap;
  color: #0b3a5b;
  line-height: 1.3;
  border-top: 1px solid rgba(11,58,91,.35);
  border-bottom: 1px solid rgba(11,58,91,.35);
  padding-top: .1rem;
  padding-bottom: .1rem;
}
html.dark .sidebar-brand-word {
  color: #dde9f4;
  border-top-color: rgba(221,233,244,.35);
  border-bottom-color: rgba(221,233,244,.35);
}
.sidebar-brand-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .25rem;
  border-radius: .65rem;
  min-width: 0;
}
.sidebar-brand-btn:hover { background: rgba(11,58,91,.04); }
.sidebar-brand-text { min-width: 0; overflow: hidden; text-align: left; }
.sidebar-brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0b3a5b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand-sub {
  font-size: 0.625rem; letter-spacing: .15em; text-transform: uppercase; color: #356fa6;
}
.sidebar-close {
  width: 26px; height: 26px;
  border-radius: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f1f6fb;
  color: #23578a;
  font-size: .85rem;
  line-height: 1;
  flex: 0 0 26px;
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-close:hover { background: #dde9f4; }

.sidebar-nav {
  flex: 1;
  padding: .15rem .35rem .3rem .35rem;
  display: flex; flex-direction: column;
}
/* Sections get a thin top divider so the user can see at a glance which
   links belong to the same category. The first section sits flush under
   the brand and doesn't need its own rule (it already has the brand's
   bottom border above it). */
.sidebar-section {
  padding-top: .35rem;
  margin-top: .35rem;
  border-top: 1px solid rgba(11,58,91,.07);
}
.sidebar-section:first-child {
  border-top: 0;
  margin-top: 0;
}
.sidebar-section-title {
  font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase;
  color: #6b8aa8; padding: .15rem .65rem .15rem .65rem;
}
.sidebar-link {
  display: flex; align-items: center;
  padding: .2rem .65rem;
  border-radius: .45rem;
  font-size: .8125rem; font-weight: 500;
  color: #1c4670;
  width: 100%;
  text-align: left;
  white-space: nowrap;
  margin: 0;
  line-height: 1.3;
}
.sidebar-link:hover { background: #f1f6fb; color: #0b3a5b; }
.sidebar-link-active {
  background: linear-gradient(90deg, rgba(53,111,166,.14), rgba(53,111,166,.04));
  color: #0b3a5b;
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 #0b3a5b;
}
.sidebar-label { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
/* Admin-only links are tinted instead of carrying a pill — the colour
   alone signals "restricted" without the visual weight of a badge. The
   dark-mode variant is softened so it doesn't glow against the navy
   background. */
.sidebar-link-admin { color: #b03737; }
.sidebar-link-admin:hover { color: #8a2a2a; }
html.dark .sidebar-link-admin { color: #fca5a5; }
html.dark .sidebar-link-admin:hover { color: #fecaca; }

/* ------------------------------ Sidebar user card (bottom) ------------------ */
.sidebar-user {
  margin-top: auto;
  padding: .5rem;
  border-top: 1px solid rgba(11,58,91,.06);
  position: relative;
}
.sidebar-user-trigger {
  width: 100%;
  display: flex; align-items: center; gap: .55rem;
  padding: .55rem;
  border-radius: .65rem;
  text-align: left;
}
.sidebar-user-trigger:hover { background: rgba(11,58,91,.05); }
/* The user card is now an identity strip, not a popover trigger — the
   settings live behind the "User settings" nav link. Remove hover
   affordance and cursor for the static variant. */
.sidebar-user-static { cursor: default; }
.sidebar-user-static:hover { background: transparent; }
html.dark .sidebar-user-static:hover { background: transparent; }
.sidebar-user-text { min-width: 0; flex: 1; }
.sidebar-user-name {
  font-size: .75rem; font-weight: 600; color: #0b3a5b; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-sub {
  font-size: 0.5625rem; color: #6b8aa8; line-height: 1.15; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-user-caret {
  color: #6b8aa8; font-size: .8rem;
}
.sidebar-user-panel {
  /* Anchored above the trigger, opens upward. */
  position: absolute;
  bottom: calc(100% + 4px);
  left: .5rem;
  right: .5rem;
  background: #ffffff;
  border: 1px solid rgba(11,58,91,.1);
  border-radius: .75rem;
  box-shadow: 0 10px 40px -10px rgba(11,58,91,.4);
  padding: .5rem;
  z-index: 35;
  max-height: 70vh;
  overflow-y: auto;
}
.sidebar-user-panel.hidden { display: none; }
.sidebar-user-panel-section {
  padding: .25rem .5rem;
}
.sidebar-user-panel-section + .sidebar-user-panel-section {
  border-top: 1px solid rgba(11,58,91,.06);
  margin-top: .25rem;
  padding-top: .5rem;
}
.sidebar-user-panel-title {
  font-size: 0.625rem; letter-spacing: .15em; text-transform: uppercase;
  color: #6b8aa8;
  padding: .25rem 0;
}
.sidebar-user-panel-item {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .4rem .5rem;
  border-radius: .5rem;
  text-align: left;
  font-size: .85rem;
  color: #1c4670;
}
.sidebar-user-panel-item:hover { background: #f1f6fb; }
.sidebar-user-panel-item.active { font-weight: 600; color: #0b3a5b; }
.sidebar-user-panel-meta {
  font-size: .8rem; color: #23578a;
  padding: .15rem 0;
  display: flex; justify-content: space-between; gap: .5rem;
}
.sidebar-user-panel-meta-label {
  font-weight: 600; color: #6b8aa8;
  font-size: 0.6875rem; letter-spacing: .04em; text-transform: uppercase;
}

html.dark .sidebar-user { border-top-color: rgba(255,255,255,.06); }
html.dark .sidebar-user-trigger:hover { background: rgba(255,255,255,.05); }
html.dark .sidebar-user-name { color: #dde9f4; }
html.dark .sidebar-user-sub  { color: #8db3d6; }
html.dark .sidebar-user-panel {
  background: #163a5c;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 10px 40px -10px rgba(0,0,0,.7);
}
html.dark .sidebar-user-panel-section + .sidebar-user-panel-section {
  border-top-color: rgba(255,255,255,.08);
}
html.dark .sidebar-user-panel-title { color: #8db3d6; }
html.dark .sidebar-user-panel-item { color: #bcd2e8; }
html.dark .sidebar-user-panel-item:hover { background: rgba(255,255,255,.06); }
html.dark .sidebar-user-panel-item.active { color: #fff; }
html.dark .sidebar-user-panel-meta { color: #bcd2e8; }
html.dark .sidebar-user-panel-meta-label { color: #598ebe; }

/* Backdrop sits between the page content and the drawer when the drawer
   is open. Clicking it closes the drawer (wired up in layout.js). */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(6,34,58,.45);
  z-index: 25;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
html:not(.sidebar-hidden) .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.app-shell-main {
  /* Sidebar is now position:fixed so it doesn't take a column in the
     flex layout — main takes the full viewport width. */
  flex: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* Match the sidebar's slide transition so the docked-desktop layout
     animates the content shift instead of snapping. */
  transition: margin-left .22s ease;
}

/* Desktop: when the user opens the sidebar it docks beside the page
   instead of overlaying it. The main column slides right by the sidebar
   width, the dimming backdrop is suppressed (the page stays usable on
   the right), and the topbar hamburger hides since the sidebar already
   has its own close X. Mobile keeps the overlay+backdrop behavior. */
@media (min-width: 901px) {
  html:not(.sidebar-hidden) .app-shell-main {
    margin-left: min(220px, 84vw);
  }
  html:not(.sidebar-hidden) .sidebar-backdrop {
    display: none;
  }
  html:not(.sidebar-hidden) .topbar-hamburger {
    display: none;
  }
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem 1.25rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(11,58,91,.08);
}
.topbar-hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: .55rem;
  background: #f1f6fb;
  color: #0b3a5b;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.topbar-hamburger:hover { background: #dde9f4; }
html.dark .topbar-hamburger { background: #163a5c; color: #dde9f4; }
html.dark .topbar-hamburger:hover { background: #1c4670; }

/* App brand pill in the top-left. Click → About modal (developer, terms,
   rights). Styled to read as a permanent app name even when collapsed. */
.topbar-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .15em;
  color: #fff;
  background: #0b3a5b;
  padding: .35rem .7rem;
  border-radius: .55rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-brand:hover { background: #163a5c; }
html.dark .topbar-brand { background: #598ebe; color: #06223a; }
html.dark .topbar-brand:hover { background: #8db3d6; }
.topbar-crumbs {
  display: inline-flex; align-items: baseline; gap: .35rem;
  min-width: 0;
  flex-shrink: 1;
}
.topbar-club {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0b3a5b;
  padding: .15rem .35rem;
  border-radius: .5rem;
  white-space: nowrap;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-club:hover { background: rgba(11,58,91,.05); }
html.dark .topbar-club { color: #dde9f4; }
html.dark .topbar-club:hover { background: rgba(255,255,255,.05); }
.topbar-crumb-sep {
  color: #6b8aa8;
  font-weight: 400;
  font-size: .95rem;
}
.topbar-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f4f7d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.dark .topbar-crumb-sep { color: #598ebe; }
.topbar-spacer { flex: 1; }
.topbar-userchip {
  display: flex; align-items: center; gap: .55rem;
  padding: .25rem .35rem .25rem .25rem;
  border-radius: 999px;
  background: #f1f6fb;
  border: 1px solid rgba(11,58,91,.08);
}
.topbar-userchip:hover { background: #dde9f4; }
.topbar-avatar {
  width: 36px; height: 36px; border-radius: 999px;
  background: #0b3a5b; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  letter-spacing: .03em;
}
.topbar-user-text { display: none; text-align: left; padding-right: .3rem; }
@media (min-width: 640px) { .topbar-user-text { display: block; } }
.topbar-user-name {
  font-size: .85rem; font-weight: 600; color: #0b3a5b; line-height: 1.1;
}
.topbar-user-role {
  font-size: 0.6875rem; color: #6b8aa8; line-height: 1.1; text-transform: uppercase; letter-spacing: .08em;
}

.app-content {
  flex: 1;
  padding: 1.25rem 1.5rem;
  min-width: 0;
}

/* Edge-to-edge variant used by views that own their own padding (e.g. the
   alternate PyG layout that glues a filter bar to the topbar and lets the
   table fill the remaining viewport). No horizontal/vertical padding here;
   inner sections add what they need. */
.app-content-fullbleed {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Pin the shell to the viewport so .app-content-fullbleed can flex its
   inner table without the page scrolling. Other views are untouched. */
html.app-fullbleed,
html.app-fullbleed body {
  height: 100vh;
  overflow: hidden;
}
html.app-fullbleed .app-shell {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}
html.app-fullbleed .app-shell-main {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

/* Filter strip that sits flush under the topbar — no rounded corners, no
   side margins, full bleed from edge to edge. Used by the PyG 2 layout. */
.flush-filter-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem;
  background: #ffffff;
  border-bottom: 1px solid rgba(11,58,91,.1);
  overflow-x: auto;
  position: sticky;
  top: 0;
  z-index: 10;
}
html.dark .flush-filter-bar {
  background: #0b2643;
  border-bottom-color: rgba(255,255,255,.1);
}

/* Small icon-button used inside .flush-filter-bar for expand / collapse all. */
.flush-filter-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: .4rem;
  background: #f1f6fb;
  color: #0b3a5b;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.flush-filter-iconbtn:hover { background: #dde9f4; }
html.dark .flush-filter-iconbtn { background: #163a5c; color: #dde9f4; }
html.dark .flush-filter-iconbtn:hover { background: #1c4670; }

/* Table area that fills the remaining height below the flush filter bar.
   The inner .table-wrap scrolls (both axes), so the page itself never
   needs to scroll — no double-scroll feeling against a footer. */
.flush-table-host {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.flush-table-host .table-wrap.pivot-wrap {
  flex: 1;
  min-height: 0;
  /* Override the generic .pivot-wrap cap (calc(100vh - 14rem)) — in the
     fullbleed PyG 2 layout the parent flex chain already constrains the
     height, and the cap would otherwise leave an empty band below the
     table. */
  max-height: none;
  margin: 0;
  border-radius: 0;
  overflow: auto;
}

/* Mobile: tighter paddings and prevent rigid widths from causing horizontal
   page scroll. Tables still scroll horizontally inside their .table-wrap
   container — that's the only horizontal scroll we keep.
   Horizontal padding is dropped to zero here so report views and tables
   can use the full viewport width on phones; inner views still add a
   small `px-*` on their own root containers for breathing room. */
@media (max-width: 640px) {
  .app-content { padding: 1rem 0; }
  .topbar { padding: .55rem .8rem; }
  .topbar-title { font-size: 1rem; }
  .topbar-club { max-width: none; font-size: 1rem; }
  .topbar-userchip { padding: .35rem; }
  .topbar-user-text { display: none; }
  .card { padding: .9rem; }
  table.data { font-size: .82rem; }
  table.data thead th, table.data tbody td { padding: .45rem .5rem; }
  /* Pivot first column on phones: shrink it as far as readability allows
     so the value/month columns get the rest of the viewport. Header and
     body cells get the same min-width so the column stays aligned. */
  table.data.pivot tbody td:first-child,
  table.data.pivot thead th:first-child {
    min-width: 120px;
    max-width: 180px;
    padding-left: .45rem;
    padding-right: .35rem;
    white-space: normal;
    word-break: break-word;
  }
  /* Account leaf rows (cuenta · descripción) use a smaller font on phones
     so the long names fit in the tighter first column without forcing
     the whole table to grow. This is applied to every pivot view
     (Tesorería, PyG, Balance, etc.). */
  table.data.pivot tr.pivot-row-cuenta td:first-child {
    font-size: .72rem;
    line-height: 1.2;
  }
  /* Tighten numeric cells too — same idea, but cap the shrink at .8rem
     so digits stay legible. */
  table.data.pivot tbody td.num,
  table.data.pivot thead th.num {
    padding-left: .35rem;
    padding-right: .45rem;
  }
}

/* ============================================================
   KPI tiles (Home / dashboard)
   ============================================================ */
.kpi-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kpi {
  background: #ffffff;
  border: 1px solid rgba(11,58,91,.08);
  border-radius: 1rem;
  padding: 1.1rem 1.2rem;
  box-shadow: 0 10px 40px -25px rgba(11,58,91,.35);
  display: flex; flex-direction: column; gap: .35rem;
  position: relative;
  overflow: hidden;
}
.kpi-label {
  font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase; color: #6b8aa8;
}
.kpi-value {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.85rem;
  color: #0b3a5b;
  line-height: 1.1;
}
.kpi-sub { font-size: .8rem; color: #356fa6; }
.kpi-icon {
  position: absolute; top: .85rem; right: .85rem;
  width: 32px; height: 32px; border-radius: .55rem;
  background: #f1f6fb; color: #1c4670;
  display: flex; align-items: center; justify-content: center; font-size: 1rem;
}

/* ============================================================
   Dark-mode adjustments for the new shell
   ============================================================ */
html.dark .sidebar { background: #0b3a5b; border-right-color: rgba(255,255,255,.06); }
html.dark .sidebar-brand { border-bottom-color: rgba(255,255,255,.06); }
html.dark .sidebar-brand-btn:hover { background: rgba(255,255,255,.05); }
html.dark .sidebar-brand-name { color: #dde9f4; }
html.dark .sidebar-brand-sub  { color: #8db3d6; }
html.dark .sidebar-section-title { color: #598ebe; }
html.dark .sidebar-section { border-top-color: rgba(255,255,255,.07); }
html.dark .sidebar-link { color: #bcd2e8; }
html.dark .sidebar-link:hover { background: rgba(255,255,255,.04); color: #fff; }
html.dark .sidebar-link-active {
  background: linear-gradient(90deg, rgba(89,142,190,.28), rgba(89,142,190,.06));
  color: #fff;
  box-shadow: inset 3px 0 0 0 #8db3d6;
}
html.dark .sidebar-close {
  background: #163a5c; color: #dde9f4;
}
html.dark .sidebar-close:hover { background: #1c4670; }

html.dark .topbar { background: rgba(6,34,58,.88); border-bottom-color: rgba(255,255,255,.06); }
html.dark .topbar-title { color: #dde9f4; }
html.dark .topbar-userchip { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
html.dark .topbar-userchip:hover { background: rgba(255,255,255,.08); }
html.dark .topbar-avatar { background: #598ebe; color: #06223a; }
html.dark .topbar-user-name { color: #dde9f4; }
html.dark .topbar-user-role { color: #8db3d6; }

html.dark .kpi { background: #163a5c; border-color: rgba(255,255,255,.08); }
html.dark .kpi-label { color: #8db3d6; }
html.dark .kpi-value { color: #dde9f4; }
html.dark .kpi-sub   { color: #8db3d6; }
html.dark .kpi-icon  { background: rgba(255,255,255,.06); color: #dde9f4; }

/* ============================================================
   Design F — cream/navy direction with Fraunces typography.
   Applied across landing, login, dashboard, sidebar, topbar.
   ============================================================ */

/* Body baseline: cream surface, dark ink. The hero, login split, etc.
   bring their own gradients on top of this. */
.bg-sand-50  { background: var(--sand-50); }
.bg-sand-100 { background: var(--sand-100); }
.bg-sand-200 { background: var(--sand-200); }
.text-ink      { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.font-display, .font-fraunces { font-family: 'Fraunces', 'Playfair Display', Georgia, serif; }

/* Top bar repainted on sand. The hamburger becomes a bordered tile. */
.topbar {
  background: var(--sand-50);
  border-bottom-color: var(--sand-300);
}
.topbar-hamburger {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--sand-300);
}
.topbar-hamburger:hover { background: var(--sand-100); }
.topbar-club { color: var(--ink); font-family: 'Fraunces', serif; }
.topbar-title { color: var(--ink-soft); font-family: 'Fraunces', serif; }
.topbar-crumb-sep { color: var(--ink-soft); }

/* Sidebar repainted on sand-50 / sand-200 rules. */
.sidebar {
  background: var(--sand-50);
  border-right-color: var(--sand-300);
}
.sidebar-brand { border-bottom-color: var(--sand-300); }
/* Sand-themed sidebar wordmark — pulls the engraved-capital rule
   colours from --ink so the brand matches the parchment background. */
.sidebar-brand-word {
  color: var(--ink);
  border-top-color: rgba(14, 43, 71, .35);
  border-bottom-color: rgba(14, 43, 71, .35);
}
.sidebar-close {
  background: #fff;
  border: 1px solid var(--sand-300);
  color: var(--ink);
}
.sidebar-close:hover { background: var(--sand-100); }
.sidebar-section-title { color: var(--ink-soft); }
.sidebar-link { color: var(--ink-soft); }
.sidebar-link:hover { background: #fff; color: var(--ink); }
.sidebar-link-active {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--sand-300);
  box-shadow: inset 3px 0 0 0 var(--pennant);
}
.sidebar-user { border-top-color: var(--sand-300); }
.sidebar-user-name { color: var(--ink); }
.sidebar-user-sub  { color: var(--ink-soft); }

/* Card refresh: thicker corners, sand border. */
.card {
  background: #ffffff;
  border: 1px solid var(--sand-300);
  border-radius: 14px;
  box-shadow: 0 10px 30px -20px rgba(14,43,71,.18);
}
.feature-card {
  border: 1px solid var(--sand-300);
  border-radius: 14px;
}
.feature-card:hover { border-color: var(--ink-soft); }
.kpi {
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: 14px;
  box-shadow: none;
}
.kpi-label { color: var(--ink-soft); font-weight: 600; }
.kpi-value {
  font-family: 'Fraunces', serif;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: 1.85rem;
}
.kpi-sub { color: var(--ink-soft); }
.kpi-icon { background: var(--sand-100); color: var(--ink); }

/* Pill button (used for "Conoce la aplicación"). */
.btn-pill {
  border-radius: 9999px;
  padding: .55rem 1rem;
  border: 1px solid var(--sand-300);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
}
.btn-pill:hover { background: var(--sand-100); }

/* ----------------------------------------------------------------
   Split landing/login layout.
   ---------------------------------------------------------------- */
.f-split {
  display: flex;
  min-height: 100vh;
  background: #F7F4EE;
}
.f-split-visual {
  width: 44%;
  min-height: 100vh;
  background: linear-gradient(170deg, #0C4F82 0%, #1E6FA8 70%, #2C8FCC 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.f-split-visual .sun {
  position: absolute; right: 80px; top: 80px;
  width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, #F5C518 0%, rgba(245,197,24,.67) 60%, transparent 85%);
}
.f-split-visual .horizon {
  position: absolute; left: 0; right: 0; top: 52%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245,197,24,.53) 40%, rgba(245,197,24,.53) 60%, transparent);
}
.f-split-visual .brand-block {
  position: absolute; top: 36px; left: 40px;
  display: flex; align-items: center; gap: 12px; z-index: 3;
}
.f-split-visual .brand-name {
  font-family: 'Fraunces', serif; font-size: 1.375rem; font-weight: 600;
  line-height: 1.1;
}
.f-split-visual .brand-loc {
  font-size: 0.625rem; opacity: .7; letter-spacing: .14em; text-transform: uppercase;
}
.f-split-visual .tagline {
  position: absolute; left: 40px; right: 40px; bottom: 80px; z-index: 3;
  font-family: 'Fraunces', serif; font-size: 3.125rem; line-height: .98;
  letter-spacing: -0.02em; font-weight: 500;
}
.f-split-visual .tagline em {
  font-style: italic; color: #F5C518;
}
.f-split-visual svg.sails,
.f-split-visual svg.waves { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-split-visual svg.waves { top: auto; bottom: 0; height: 280px; }

.f-split-content {
  flex: 1;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  padding: 0 80px; position: relative; min-height: 100vh;
}
.f-split-content .inner { max-width: 460px; width: 100%; }
.f-split-content .eyebrow {
  font-size: 0.6875rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sea); font-weight: 600;
}
.f-split-content h1.f-headline {
  font-family: 'Fraunces', serif; font-size: 2.875rem;
  color: var(--ink); margin: 8px 0 8px;
  letter-spacing: -0.02em; font-weight: 500; line-height: 1.05;
}
.f-split-content h1.f-headline em {
  font-style: italic; color: var(--sea);
}
.f-split-content .f-lead {
  color: var(--ink-soft); font-size: 0.875rem;
  margin-bottom: 28px; line-height: 1.55;
}
.f-split-content .footer-credit {
  position: absolute; bottom: 24px; left: 80px; right: 80px;
  font-size: 0.6875rem; color: var(--ink-soft);
}
.f-split-content .lang-row {
  position: absolute; bottom: 24px; right: 80px;
  display: flex; gap: 6px;
}

/* Field block for the login form. */
.f-field { margin-bottom: 14px; }
.f-field label {
  font-size: 0.75rem; color: var(--ink-soft);
  display: block; margin-bottom: 6px; font-weight: 500;
}
.f-field input {
  width: 100%; height: 44px; padding: 0 14px;
  background: #fff; border: 1px solid var(--sand-300);
  border-radius: 8px; font-size: 0.875rem; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.f-field input:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 3px rgba(30,111,168,.18);
}
.btn-primary-f {
  width: 100%; height: 48px;
  background: var(--ink); color: #fff;
  border: none; border-radius: 8px;
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.btn-primary-f:hover { background: var(--sea-deep); }
.btn-secondary-f {
  width: 100%; height: 44px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--sand-300); border-radius: 8px;
  font-size: 0.8125rem; font-weight: 500;
  margin-top: 10px; cursor: pointer;
}
.btn-secondary-f:hover { background: var(--sand-100); }

/* Stack the split on mobile: visual becomes a header strip. */
@media (max-width: 900px) {
  .f-split { flex-direction: column; }
  .f-split-visual { width: 100%; min-height: 320px; }
  .f-split-visual .tagline { font-size: 2rem; bottom: 40px; }
  .f-split-content { padding: 32px 24px 90px; min-height: auto; }
  .f-split-content .footer-credit,
  .f-split-content .lang-row { position: static; left: auto; right: auto; bottom: auto; margin-top: 18px; }
  .f-split-content .lang-row { justify-content: center; }
}

/* ----------------------------------------------------------------
   Dashboard (Inicio) — Fraunces greeting, KPI band, atajos.
   ---------------------------------------------------------------- */
.f-greeting-date {
  font-size: 0.6875rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sea); font-weight: 600;
}
.f-greeting {
  font-family: 'Fraunces', serif; font-size: 2.625rem;
  color: var(--ink); margin: 6px 0 0;
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;
}
.f-greeting-sub { color: var(--ink-soft); margin-top: 4px; font-size: 0.8125rem; }
.f-greeting-sub b { color: var(--ink); }

.f-section-title {
  font-family: 'Fraunces', serif; font-size: 1.375rem;
  color: var(--ink); font-weight: 500; margin: 0 0 14px;
}
@media (max-width: 640px) {
  /* Tighter on phones so the title fits on one line instead of wrapping
     onto 3-4 lines when it shares a row with a hint pill. */
  .f-section-title { font-size: 1.0625rem; line-height: 1.25; }
}

.f-kpi-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: #fff; border: 1px solid var(--sand-300);
  border-radius: 14px; padding: 18px 0; overflow: hidden;
}
.f-kpi-band > div { padding: 0 24px; }
.f-kpi-band > div + div { border-left: 1px solid var(--sand-300); }
.f-kpi-band .label {
  font-size: 0.6875rem; color: var(--ink-soft); letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600;
}
.f-kpi-band .value {
  font-family: 'Fraunces', serif; font-size: 1.625rem;
  color: var(--ink); margin-top: 4px; font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.f-kpi-band .delta { font-size: 0.6875rem; font-weight: 600; }
.f-kpi-band .delta.pos { color: var(--pos); }
.f-kpi-band .delta.neg { color: var(--neg); }
.f-kpi-band .delta-suffix { font-weight: 500; color: var(--ink-soft); }
.f-kpi-band > div { min-width: 0; }
.f-kpi-band .value { word-break: break-word; overflow-wrap: break-word; }
.f-kpi-band .delta { white-space: normal; overflow-wrap: break-word; }
@media (max-width: 900px) {
  .f-kpi-band { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .f-kpi-band > div { padding: 14px 18px; }
  .f-kpi-band > div + div { border-left: none; }
  .f-kpi-band > div:nth-child(odd) + div { border-left: 1px solid var(--sand-300); }
  .f-kpi-band > div:nth-child(n+3) { border-top: 1px solid var(--sand-300); }
}
@media (max-width: 640px) {
  .f-kpi-band { padding: 10px 0; border-radius: 12px; }
  .f-kpi-band > div { padding: 10px 12px; }
  .f-kpi-band .label { font-size: 0.625rem; letter-spacing: .06em; }
  .f-kpi-band .value { font-size: 1.25rem; margin-top: 2px; }
  .f-kpi-band .delta { font-size: 0.625rem; line-height: 1.3; }
  .f-kpi-band .delta-suffix { display: none; }
}

.f-shortcut {
  padding: 12px 14px; border-radius: 10px;
  background: var(--sand-50); border: 1px solid var(--sand-300);
  cursor: pointer; text-align: left; width: 100%;
  transition: background .15s, border-color .15s;
}
.f-shortcut:hover { background: #fff; border-color: var(--ink-soft); }
.f-shortcut .title { font-size: 0.8125rem; color: var(--ink); font-weight: 600; }
.f-shortcut .sub   { font-size: 0.6875rem; color: var(--ink-soft); margin-top: 3px; }

/* Dashboard cumulative-line chart. Inline SVG with a viewBox so it scales
   to any width; gridlines and axis labels are part of the SVG, not
   external DOM. Two stacked charts on the dashboard: real-vs-prior-year
   and real-vs-presupuesto. */
.f-line-chart-wrap {
  width: 100%;
  overflow: hidden;
}
.f-line-chart {
  /* Width fills the card; height auto-derived from the viewBox aspect.
     Combined with the default `preserveAspectRatio: xMidYMid meet`, this
     keeps text and lines from being stretched anisotropically — the
     previous fixed-height + `preserveAspectRatio: 'none'` setup made the
     euro labels and month names look "zoomed" when the chart was wide. */
  width: 100%;
  height: auto;
  display: block;
  font-family: inherit;
}
.f-line-grid {
  stroke: rgba(11, 58, 91, 0.12);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.f-line-grid.is-base { stroke: rgba(11, 58, 91, 0.28); stroke-dasharray: none; }
.f-line-cutoff {
  stroke: rgba(11, 58, 91, 0.35);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.f-line-axis-label {
  /* In viewBox user units (viewBox width 800). With the SVG keeping
     aspect ratio, the rendered px size scales with container width. At
     a ~700px side-by-side card the label renders close to 14 actual px. */
  font-size: 16px;
  fill: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.f-line-axis-unit {
  font-size: 11px;
  fill: var(--ink-soft);
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .75;
}
.f-line-path {
  stroke-linejoin: round;
  stroke-linecap: round;
}
.f-line-legend {
  display: flex; flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}
.f-line-legend-item {
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.f-line-legend-stripe {
  display: inline-block;
  width: 18px; height: 3px;
  border-radius: 1.5px;
}

/* Cost-centre consumption widget on the dashboard. One row per cost
   centre where the current user is responsible. Each row has a header
   (name + % chip + chevron), a meter, a "spent / budget" line, and an
   on-demand expansion with the per-account breakdown. */
.f-cc-list { display: flex; flex-direction: column; gap: 1rem; }
.f-cc-row {
  display: flex; flex-direction: column; gap: 0.375rem;
}
.f-cc-row + .f-cc-row { border-top: 1px solid var(--sand-300); padding-top: 1rem; }
.f-cc-row-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
}
.f-cc-row-head .name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  /* Allow the responsibles suffix ("· Name 1, Name 2") to wrap onto a second
     line when the centro name + responsibles list outgrows the row width.
     Previously this was nowrap, which would clip the responsibles entirely. */
  white-space: normal;
  line-height: 1.3;
}
.f-cc-row-head .chev {
  font-size: 1.125rem;
  color: var(--ink-soft);
  transition: transform .15s ease;
  line-height: 1;
}
.f-cc-row-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* "Detalle ▾" pill — much more obvious affordance than the previous bare
   chevron character, which users were missing entirely. Looks like a small
   secondary button; hovers and rotates the arrow when the row is open. */
.f-cc-row-head .expand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  background: var(--sand-100, #f4ecd6);
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--sand-300, #e2d7b8);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.f-cc-row-head:hover .expand-pill,
.f-cc-row-head:focus-visible .expand-pill {
  background: #fff;
  color: var(--ink);
  border-color: var(--ink-soft);
}
.f-cc-row-head .expand-pill-chev {
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1;
  transition: transform .15s ease;
}
.f-cc-row-head[aria-expanded="true"] .expand-pill-chev { transform: rotate(180deg); }
.f-cc-row-head .chip {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  line-height: 1.4;
  letter-spacing: .02em;
}
.f-cc-row-head .chip.ok    { background: rgba(34, 139, 84, 0.12);  color: #1f8b54; }
.f-cc-row-head .chip.warn  { background: rgba(176, 134, 65, 0.16); color: #8a6420; }
.f-cc-row-head .chip.over  { background: rgba(196, 65, 65, 0.14);  color: #b03737; }
.f-cc-row-head .chip.under { background: rgba(64, 110, 180, 0.14); color: #2d5694; }

.f-cc-meter {
  position: relative;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--sand-200, #ece4d2);
  overflow: hidden;
}
.f-cc-meter .fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 9999px;
  transition: width .25s ease;
}
.f-cc-meter .fill.ok    { background: #2a9d63; }
.f-cc-meter .fill.warn  { background: #c79336; }
.f-cc-meter .fill.over  { background: #c44141; }
.f-cc-meter .fill.under { background: #4170b3; }
.f-cc-figures {
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.f-cc-figures .spent { color: var(--ink); font-weight: 600; }
.f-cc-figures .sep   { margin: 0 0.25rem; }

/* Forward-looking annual context — small line under the YTD figures
   so the responsable sees both "am I overspending the pace?" (chip,
   meter, figures above) and "what's left for the year?" (this line)
   without needing a toggle. Lower contrast than the YTD figures so
   the alarm signal still dominates. */
.f-cc-annual-context {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 0.125rem;
  padding-left: 1rem;
  position: relative;
}
.f-cc-annual-context::before {
  content: '↳';
  position: absolute;
  left: 0;
  color: var(--ink-soft);
  opacity: 0.6;
}

.f-cc-empty {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  padding: 1rem 0.25rem 0.25rem;
  line-height: 1.45;
}

/* Mis presupuestos page: make the card fill the available viewport height
   rather than sit at its natural size with empty space below. The list
   inside the card scrolls when there's more content than fits, so the
   user always lands on a full-bleed canvas instead of a half-empty one. */
.mis-presup-host {
  min-height: calc(100vh - 11rem);
  display: flex;
  flex-direction: column;
}
.mis-presup-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mis-presup-card .f-cc-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Inline "Mis presupuestos" rich-detail block — surfaces the same
   information that the dashboard tile shows in a modal (projection,
   suggested action, colour explainer) right under the centro's meter
   so the responsable doesn't have to drill in. Reuses the modal's
   .f-bs-modal-action / .f-bs-modal-color-block styling for visual
   consistency. */
.f-cc-rich-details {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.f-cc-rich-projection {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.f-cc-rich-projection-label { font-weight: 600; color: var(--ink); }
.f-cc-rich-projection-value { font-weight: 600; color: var(--ink); }
.f-cc-rich-projection-pct   { color: var(--ink-soft); }
.f-cc-rich-projection-explainer {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  margin-top: 0.125rem;
}

.f-cc-detail { margin-top: 0.5rem; }
.f-cc-detail-empty {
  font-size: 0.75rem;
  color: var(--ink-soft);
  padding: 0.5rem 0;
}
.f-cc-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}
.f-cc-detail-table th,
.f-cc-detail-table td {
  padding: 0.375rem 0.5rem;
  border-top: 1px solid var(--sand-300);
  text-align: left;
  vertical-align: middle;
}
.f-cc-detail-table thead th {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border-top: 0;
}
.f-cc-detail-table .num { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.f-cc-detail-table .r   { text-align: right; font-variant-numeric: tabular-nums; }
.f-cc-detail-table td.clickable { cursor: pointer; }
.f-cc-detail-table td.clickable:hover { background: var(--sand-200, rgba(0, 0, 0, 0.04)); }
html.dark .f-cc-detail-table td.clickable:hover { background: rgba(255, 255, 255, 0.06); }

/* Meter / YTD figures / annual context all act as part of the same
   expand affordance as the row header — the chevron alone is too easy
   to miss, so any click in the bar area should reveal the breakdown. */
.f-cc-meter.clickable,
.f-cc-figures.clickable,
.f-cc-annual-context.clickable { cursor: pointer; }

/* Mobile: 7 columns is too dense for a ~390px viewport — headers wrap to
   3 lines (RESTO / DEL / AÑO) and descriptions break across rows, making
   the table feel lopsided. Hide the last two columns (Resto del año,
   Presupuesto anual) on phones — the same info is already surfaced in
   the centro-de-coste header line just above the table ("Quedan X €
   del presupuesto anual…"). Desktop keeps the full 7-column layout.
   `overflow-x: auto` on the detail wrapper is a safety net for any
   edge case where the 5-column variant still ends up wider than the
   card. */
.f-cc-detail { overflow-x: auto; }
@media (max-width: 640px) {
  .f-cc-detail-table { font-size: 0.6875rem; }
  .f-cc-detail-table th,
  .f-cc-detail-table td { padding: 0.375rem 0.375rem; }
  .f-cc-detail-table th:nth-child(6),
  .f-cc-detail-table td:nth-child(6),
  .f-cc-detail-table th:nth-child(7),
  .f-cc-detail-table td:nth-child(7) {
    display: none;
  }
}
.f-cc-detail-table .comment {
  color: var(--ink-soft);
  font-style: italic;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Presupuesto Detalle: comment column wide enough for a phrase, with
   the inline editor sized to fit and the read-only fallback truncating
   the rest. */
table.data td.comment-cell {
  min-width: 14rem;
  max-width: 22rem;
}
table.data td.comment-cell input { width: 100%; }
.f-cc-detail-table .chip-sm {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.0625rem 0.375rem;
  border-radius: 9999px;
}
.f-cc-detail-table .chip-sm.ok    { background: rgba(34, 139, 84, 0.12);  color: #1f8b54; }
.f-cc-detail-table .chip-sm.warn  { background: rgba(176, 134, 65, 0.16); color: #8a6420; }
.f-cc-detail-table .chip-sm.over  { background: rgba(196, 65, 65, 0.14);  color: #b03737; }
.f-cc-detail-table .chip-sm.under { background: rgba(64, 110, 180, 0.14); color: #2d5694; }

/* Legend strip above the cost-centre list — small colour swatches paired
   with the status copy so users learn what each chip means at a glance. */
.f-cc-legend {
  display: flex; flex-wrap: wrap;
  gap: 0.75rem 1rem;
  font-size: 0.6875rem;
  color: var(--ink-soft);
  margin-bottom: 0.875rem;
}
.f-cc-legend .item {
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.f-cc-legend .sw {
  display: inline-block;
  width: 0.625rem; height: 0.625rem;
  border-radius: 9999px;
}
.f-cc-legend .sw.ok    { background: #2a9d63; }
.f-cc-legend .sw.warn  { background: #c79336; }
.f-cc-legend .sw.over  { background: #c44141; }
.f-cc-legend .sw.under { background: #4170b3; }

/* "Estado del presupuesto" dashboard card — one tile per centro de costes,
   compact KPI layout with a big % chip + an annual-context bar below.
   Two readings per tile: YTD ratio (the alarm signal, colour-coded) and
   the annual-budget bar (how much of the year is consumed). */
.f-budget-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.875rem;
}
.f-budget-status-tile {
  border: 1px solid var(--sand-300);
  border-radius: 12px;
  padding: 0.875rem 1rem;
  background: var(--sand-50, #fbf7ec);
  display: flex; flex-direction: column;
  gap: 0.375rem;
}
.f-budget-status-tile .name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.f-budget-status-tile .pct {
  font-family: 'Fraunces', serif;
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.f-budget-status-tile .pct.ok    { color: #1f8b54; }
.f-budget-status-tile .pct.warn  { color: #8a6420; }
.f-budget-status-tile .pct.over  { color: #b03737; }
.f-budget-status-tile .pct.under { color: #2d5694; }
.f-budget-status-tile .pct-suffix {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-family: inherit;
}
.f-budget-status-bar {
  position: relative;
  height: 0.375rem;
  border-radius: 9999px;
  background: var(--sand-200, #ece4d2);
  overflow: hidden;
}
.f-budget-status-bar .fill {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 9999px;
  transition: width .25s ease;
}
.f-budget-status-bar .fill.ok    { background: #2a9d63; }
.f-budget-status-bar .fill.warn  { background: #c79336; }
.f-budget-status-bar .fill.over  { background: #c44141; }
.f-budget-status-bar .fill.under { background: #4170b3; }
.f-budget-status-tile .spent {
  font-size: 0.6875rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.f-budget-status-tile .spent .sep { color: var(--ink-soft); }
.f-budget-status-tile .annual-suffix { letter-spacing: .04em; }
.f-budget-status-tile .projection {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-top: 0.125rem;
}
.f-budget-status-tile .projection.over { color: #b03737; }
.f-budget-status-tile.is-clickable { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.f-budget-status-tile.is-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(11, 58, 91, 0.25);
}
.f-budget-status-tile.is-clickable:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
}

/* Plain-language explanation modal opened from a budget-status tile.
   The generic `.modal` rule stretches to 960px (a comfortable canvas
   for the tabular drill-downs used elsewhere) but for a four-section
   explanation that maxes out at ~30rem of readable content, that
   leaves a half-empty modal on iPad / desktop. The `:has()` selector
   below shrinks the outer modal to ~34rem when this particular body
   is rendered inside it — single CSS rule, no change to ui.js. */
.modal:has(.f-bs-modal) { max-width: 34rem; }
.f-bs-modal { display: flex; flex-direction: column; gap: 1rem; }
.f-bs-modal-section {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.f-bs-modal-heading {
  font-size: 0.6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft);
}
.f-bs-modal-rows { display: flex; flex-direction: column; gap: 0.25rem; }
.f-bs-modal-row {
  display: grid; grid-template-columns: minmax(8rem, 1fr) auto;
  gap: 1rem; align-items: baseline;
  font-size: 0.875rem;
}
.f-bs-modal-row .k { color: var(--ink-soft); }
.f-bs-modal-row .v {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--ink); text-align: right;
}
.f-bs-modal-row .v .extra { font-weight: 400; color: var(--ink-soft); margin-left: 0.25rem; }
.f-bs-modal-note {
  font-size: 0.8125rem; color: var(--ink-soft);
  background: var(--sand-50, #fbf7ec); border-radius: 8px;
  padding: 0.5rem 0.75rem;
}
.f-bs-modal-explainer {
  font-size: 0.75rem; color: var(--ink-soft);
  line-height: 1.45;
}
.f-bs-modal-color-block {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.625rem 0.875rem; border-radius: 10px;
  font-size: 0.875rem; line-height: 1.4;
  border: 1px solid var(--sand-300);
}
.f-bs-modal-color-block.ok    { background: rgba(34, 139, 84, 0.08);  border-color: rgba(34, 139, 84, 0.25); }
.f-bs-modal-color-block.warn  { background: rgba(176, 134, 65, 0.10); border-color: rgba(176, 134, 65, 0.30); }
.f-bs-modal-color-block.over  { background: rgba(196, 65, 65, 0.08);  border-color: rgba(196, 65, 65, 0.28); }
.f-bs-modal-color-block.under { background: rgba(64, 110, 180, 0.08); border-color: rgba(64, 110, 180, 0.28); }
.f-bs-modal-swatch {
  flex-shrink: 0; width: 0.875rem; height: 0.875rem; border-radius: 9999px;
}
.f-bs-modal-swatch.ok    { background: #2a9d63; }
.f-bs-modal-swatch.warn  { background: #c79336; }
.f-bs-modal-swatch.over  { background: #c44141; }
.f-bs-modal-swatch.under { background: #4170b3; }

/* "Acción sugerida" — actionable recommendation derived from the same
   YTD vs annual numbers in the rows above. Coloured per status so it
   sits in the same visual family as the color-explanation block, but
   distinguished with its own UPPERCASE label and an icon. */
.f-bs-modal-action {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  background: var(--sand-50, #fbf7ec);
  border: 1px solid var(--sand-300);
  line-height: 1.45;
}
.f-bs-modal-action-icon {
  font-size: 1.125rem;
  line-height: 1.4;
  flex-shrink: 0;
}
.f-bs-modal-action-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.f-bs-modal-action-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.f-bs-modal-action-text {
  font-size: 0.875rem;
  color: var(--ink);
}
.f-bs-modal-action.over  { background: rgba(196, 65, 65, 0.06);  border-color: rgba(196, 65, 65, 0.25); }
.f-bs-modal-action.over  .f-bs-modal-action-label,
.f-bs-modal-action.over  .f-bs-modal-action-icon { color: #b03737; }
.f-bs-modal-action.ok    { background: rgba(34, 139, 84, 0.06);  border-color: rgba(34, 139, 84, 0.25); }
.f-bs-modal-action.ok    .f-bs-modal-action-label,
.f-bs-modal-action.ok    .f-bs-modal-action-icon { color: #1f8b54; }
.f-bs-modal-action.under { background: rgba(64, 110, 180, 0.06); border-color: rgba(64, 110, 180, 0.25); }
.f-bs-modal-action.under .f-bs-modal-action-label,
.f-bs-modal-action.under .f-bs-modal-action-icon { color: #2d5694; }
.f-bs-modal-hint {
  font-size: 0.75rem; line-height: 1.5;
  color: var(--ink-soft);
  border-top: 1px dashed var(--sand-300);
  padding-top: 0.75rem;
}

/* Chart card collapse/expand toggle hint shown in the card header. */
.f-line-toggle-hint {
  font-size: 0.6875rem; font-weight: 600;
  color: var(--ink-soft); letter-spacing: .03em;
  white-space: nowrap;
  align-self: flex-start;
  padding-top: 4px;
}
.card[role="button"]:hover .f-line-toggle-hint { color: var(--sea); }
.card[role="button"]:focus-visible {
  outline: 2px solid var(--sea); outline-offset: 2px;
}

/* Tab strip used on the chart card. */
.f-tab-strip {
  display: inline-flex; gap: 4px; padding: 3px;
  background: var(--surf); border-radius: 8px; font-size: 0.75rem;
}
.f-tab-strip .tab {
  padding: 5px 12px; border-radius: 6px;
  color: var(--ink); cursor: pointer;
}
.f-tab-strip .tab.active { background: #fff; font-weight: 600; }

/* Dark-mode: keep cream tones but pull surfaces darker. */
/* Brighten `--pos` / `--neg` so they read against the navy background —
   #1f8b54 / #b03737 are tuned for cream cards and lose contrast on
   #0b3a5b. Lifts every consumer at once (KPI band deltas, asm badges,
   login error text). Match the semáforo `ok` / `over` dark-mode tones. */
html.dark { --pos: #4ade80; --neg: #f87171; --ink-soft: #8db3d6; }
html.dark body { background: #06223a; color: #dde9f4; }
html.dark .topbar { background: #0b3a5b; border-bottom-color: rgba(255,255,255,.08); }
html.dark .topbar-hamburger { background: #163a5c; color: #dde9f4; border-color: rgba(255,255,255,.1); }
html.dark .topbar-club { color: #dde9f4; }
html.dark .sidebar { background: #0b3a5b; border-right-color: rgba(255,255,255,.06); }
html.dark .sidebar-link-active { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.1); }
html.dark .card,
html.dark .feature-card,
html.dark .kpi { background: #0b3a5b; border-color: rgba(255,255,255,.08); }
html.dark .f-kpi-band { background: #0b3a5b; border-color: rgba(255,255,255,.08); }
html.dark .f-kpi-band > div + div { border-left-color: rgba(255,255,255,.08); }
html.dark .f-shortcut { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html.dark .f-shortcut:hover { background: rgba(255,255,255,.08); }
html.dark .f-greeting,
html.dark .f-shortcut .title,
html.dark .kpi-value,
html.dark .f-kpi-band .value { color: #dde9f4; }
html.dark .f-greeting-sub,
html.dark .f-shortcut .sub,
html.dark .kpi-label,
html.dark .f-kpi-band .label { color: #8db3d6; }
html.dark .f-section-title { color: #dde9f4; }

/* Dark-mode overrides for the dashboard line chart + cost-centre widget. */
html.dark .f-line-axis-label,
html.dark .f-line-axis-unit { fill: #8db3d6; }
html.dark .f-line-grid  { stroke: rgba(255, 255, 255, 0.10); }
html.dark .f-line-grid.is-base { stroke: rgba(255, 255, 255, 0.22); }
html.dark .f-line-cutoff { stroke: rgba(255, 255, 255, 0.32); }
html.dark .f-line-legend { color: #8db3d6; }
html.dark .f-budget-status-tile { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html.dark .f-budget-status-tile .name { color: #dde9f4; }
html.dark .f-budget-status-bar { background: rgba(255,255,255,.08); }
html.dark .f-cc-row + .f-cc-row { border-top-color: rgba(255, 255, 255, 0.08); }
html.dark .f-cc-row-head .name { color: #dde9f4; }
html.dark .f-cc-row-head .chev { color: #8db3d6; }
html.dark .f-cc-row-head .expand-pill {
  background: rgba(255, 255, 255, 0.06);
  color: #8db3d6;
  border-color: rgba(255, 255, 255, 0.12);
}
html.dark .f-cc-row-head:hover .expand-pill,
html.dark .f-cc-row-head:focus-visible .expand-pill {
  background: rgba(255, 255, 255, 0.12);
  color: #dde9f4;
  border-color: rgba(255, 255, 255, 0.30);
}
/* "Total proyectado" label + value were rendering var(--ink) (dark navy)
   on the dark-mode card background (also dark navy) — unreadable. Lift
   them to the same light ink the rest of the dark UI uses. */
html.dark .f-cc-rich-projection { color: #8db3d6; }
html.dark .f-cc-rich-projection-label,
html.dark .f-cc-rich-projection-value { color: #dde9f4; }
html.dark .f-cc-rich-projection-pct,
html.dark .f-cc-rich-projection-explainer { color: #8db3d6; }
html.dark .f-cc-meter { background: rgba(255, 255, 255, 0.08); }
html.dark .f-cc-figures { color: #8db3d6; }
html.dark .f-cc-figures .spent { color: #dde9f4; }
html.dark .f-cc-annual-context,
html.dark .f-cc-annual-context::before { color: #8db3d6; }
html.dark .f-cc-empty { color: #8db3d6; }
html.dark .f-cc-detail-table th,
html.dark .f-cc-detail-table td { border-top-color: rgba(255, 255, 255, 0.08); }
html.dark .f-cc-detail-table thead th,
html.dark .f-cc-detail-table .num { color: #8db3d6; }
html.dark .f-cc-legend { color: #8db3d6; }

/* Dark-mode status-color palette. The light-mode hexes (#1f8b54, #8a6420,
   #b03737, #2d5694) are tuned for cream cards and lose contrast on a navy
   background — text reads as muddy and bars/swatches almost disappear.
   These overrides brighten each status to a saturated pastel that stays
   readable on #0b3a5b cards. Applied to every place the semáforo palette
   surfaces (chips, mini-chips, meter fills, legend swatches, KPI tile %,
   annual-budget bar, projection text) so the contrast fix is global. */
/* Text + tinted-pill foreground */
html.dark .f-cc-row-head .chip.ok,
html.dark .f-cc-detail-table .chip-sm.ok,
html.dark .f-budget-status-tile .pct.ok    { color: #4ade80; }
html.dark .f-cc-row-head .chip.warn,
html.dark .f-cc-detail-table .chip-sm.warn,
html.dark .f-budget-status-tile .pct.warn  { color: #fbbf24; }
html.dark .f-cc-row-head .chip.over,
html.dark .f-cc-detail-table .chip-sm.over,
html.dark .f-budget-status-tile .pct.over,
html.dark .f-budget-status-tile .projection.over { color: #f87171; }
html.dark .f-cc-row-head .chip.under,
html.dark .f-cc-detail-table .chip-sm.under,
html.dark .f-budget-status-tile .pct.under { color: #60a5fa; }
/* Tinted-pill backgrounds */
html.dark .f-cc-row-head .chip.ok,
html.dark .f-cc-detail-table .chip-sm.ok    { background: rgba(74, 222, 128, 0.16); }
html.dark .f-cc-row-head .chip.warn,
html.dark .f-cc-detail-table .chip-sm.warn  { background: rgba(251, 191, 36, 0.18); }
html.dark .f-cc-row-head .chip.over,
html.dark .f-cc-detail-table .chip-sm.over  { background: rgba(248, 113, 113, 0.18); }
html.dark .f-cc-row-head .chip.under,
html.dark .f-cc-detail-table .chip-sm.under { background: rgba(96, 165, 250, 0.18); }
/* Solid bar fills + legend swatches */
html.dark .f-cc-meter .fill.ok,
html.dark .f-budget-status-bar .fill.ok,
html.dark .f-cc-legend .sw.ok    { background: #4ade80; }
html.dark .f-cc-meter .fill.warn,
html.dark .f-budget-status-bar .fill.warn,
html.dark .f-cc-legend .sw.warn  { background: #fbbf24; }
html.dark .f-cc-meter .fill.over,
html.dark .f-budget-status-bar .fill.over,
html.dark .f-cc-legend .sw.over  { background: #f87171; }
html.dark .f-cc-meter .fill.under,
html.dark .f-budget-status-bar .fill.under,
html.dark .f-cc-legend .sw.under { background: #60a5fa; }
html.dark .f-bs-modal-row .k,
html.dark .f-bs-modal-row .v .extra,
html.dark .f-bs-modal-explainer,
html.dark .f-bs-modal-hint { color: #8db3d6; }
html.dark .f-bs-modal-row .v { color: #dde9f4; }
html.dark .f-bs-modal-note {
  background: rgba(255,255,255,.05);
  color: #b5d0ea;
}
html.dark .f-bs-modal-hint { border-top-color: rgba(255,255,255,.10); }
html.dark .f-bs-modal-color-block { border-color: rgba(255,255,255,.10); }
html.dark .f-bs-modal-color-block.ok    { background: rgba(74, 222, 128, 0.10);  border-color: rgba(74, 222, 128, 0.30); }
html.dark .f-bs-modal-color-block.warn  { background: rgba(251, 191, 36, 0.10);  border-color: rgba(251, 191, 36, 0.30); }
html.dark .f-bs-modal-color-block.over  { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.30); }
html.dark .f-bs-modal-color-block.under { background: rgba(96, 165, 250, 0.10);  border-color: rgba(96, 165, 250, 0.30); }
html.dark .f-bs-modal-swatch.ok    { background: #4ade80; }
html.dark .f-bs-modal-swatch.warn  { background: #fbbf24; }
html.dark .f-bs-modal-swatch.over  { background: #f87171; }
html.dark .f-bs-modal-swatch.under { background: #60a5fa; }
html.dark .f-bs-modal-action { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); }
html.dark .f-bs-modal-action-text { color: #dde9f4; }
html.dark .f-bs-modal-action.over  { background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.30); }
html.dark .f-bs-modal-action.over  .f-bs-modal-action-label,
html.dark .f-bs-modal-action.over  .f-bs-modal-action-icon { color: #f87171; }
html.dark .f-bs-modal-action.ok    { background: rgba(74, 222, 128, 0.10);  border-color: rgba(74, 222, 128, 0.30); }
html.dark .f-bs-modal-action.ok    .f-bs-modal-action-label,
html.dark .f-bs-modal-action.ok    .f-bs-modal-action-icon { color: #4ade80; }
html.dark .f-bs-modal-action.under { background: rgba(96, 165, 250, 0.10); border-color: rgba(96, 165, 250, 0.30); }
html.dark .f-bs-modal-action.under .f-bs-modal-action-label,
html.dark .f-bs-modal-action.under .f-bs-modal-action-icon { color: #60a5fa; }

/* ============================================================
   F · About page (Sobre la aplicación)
   ============================================================ */
.f-about {
  background: #F7F4EE;
  color: var(--ink);
  min-height: 100vh;
  display: flex; flex-direction: column;
  font-family: 'Inter', system-ui, sans-serif;
}
.f-pennant {
  background: #fff; border-radius: 10px;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(10,30,60,.18), 0 1px 0 rgba(255,255,255,.6) inset;
}

/* Top bar */
.f-about-top {
  height: 80px; padding: 0 56px;
  background: var(--sand-50);
  border-bottom: 1px solid var(--sand-300);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.f-about-brand {
  display: flex; align-items: center; gap: 14px;
  background: transparent; border: 0;
  cursor: pointer; padding: 0;
}
.f-about-brand-text { text-align: left; line-height: 1.15; }
.f-about-brand-text .club {
  font-family: 'Fraunces', serif;
  font-size: 1.125rem; color: var(--ink);
  font-weight: 600; letter-spacing: -0.01em;
}
.f-about-brand-text .app {
  font-size: 0.625rem; color: var(--ink-soft);
  letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; margin-top: 2px;
}

/* Hero */
.f-about-hero {
  position: relative; overflow: hidden;
  padding: 64px 80px 56px;
  border-bottom: 1px solid var(--sand-300);
}
.f-about-hero-decor { position: absolute; inset: 0; pointer-events: none; }
.f-about-hero-decor .sun {
  position: absolute; right: 40px; top: 40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,197,24,.25) 0%, transparent 70%);
}
.f-about-hero-decor .boat {
  position: absolute; right: 56px; top: 50px;
  width: 180px; height: 180px; opacity: 0.85;
}
.f-about-hero-inner { max-width: 700px; position: relative; z-index: 2; }
.f-about-hero-inner .eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sea); font-weight: 600; margin-bottom: 18px;
}
.f-about-hero-inner .headline {
  font-family: 'Fraunces', serif; font-size: 3.75rem;
  color: var(--ink); margin: 0;
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.02;
}
.f-about-hero-inner .headline em {
  font-style: italic; color: var(--sea);
}
.f-about-hero-inner .lead {
  font-size: 1.0625rem; color: var(--ink-soft);
  margin-top: 22px; line-height: 1.55; max-width: 620px;
}
.f-about-hero-inner .lead b { color: var(--ink); font-weight: 600; }

/* Content wrapper */
.f-about-content {
  flex: 1;
  padding: 56px 80px 64px;
  max-width: 1240px; width: 100%;
  margin: 0 auto;
}

/* Contexto card */
.f-about-context {
  background: #fff; border: 1px solid var(--sand-300);
  border-radius: 16px; padding: 36px 40px; margin-bottom: 56px;
  display: grid; grid-template-columns: 280px 1fr; gap: 36px;
}
.f-about-context .left .eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sea); font-weight: 600;
}
.f-about-context .left .h2 {
  font-family: 'Fraunces', serif; font-size: 2rem;
  color: var(--ink); margin: 8px 0 0; font-weight: 500;
  letter-spacing: -0.02em;
}
.f-about-context .right {
  font-size: 0.9375rem; color: var(--ink-soft); line-height: 1.65;
}
.f-about-context .right p { margin: 0; }
.f-about-context .right p + p { margin-top: 14px; }
.f-about-context .right b { color: var(--ink); font-weight: 600; }

/* Features section */
.f-about-features .head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 12px;
}
.f-about-features .h2 {
  font-family: 'Fraunces', serif; font-size: 1.875rem;
  color: var(--ink); margin: 0; font-weight: 500; letter-spacing: -0.02em;
}
.f-about-features .pills { display: flex; gap: 8px; }
.pill-available {
  font-size: 0.6875rem; color: var(--pos); font-weight: 600;
  padding: 4px 10px; background: rgba(31,139,84,0.13); border-radius: 999px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.pill-soon {
  font-size: 0.6875rem; color: var(--pennant); font-weight: 600;
  padding: 4px 10px; background: rgba(245,197,24,0.13); border-radius: 999px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.f-about-features .grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.f-about-feature {
  background: #fff; border: 1px solid var(--sand-300);
  border-radius: 14px; padding: 22px 24px;
  display: flex; gap: 18px; align-items: flex-start;
}
.f-about-feature.soon { border-style: dashed; }
.f-about-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--surf); color: var(--sea);
  display: grid; place-items: center; flex-shrink: 0;
}
.f-about-icon.f-about-icon-soon { background: var(--sand-50); }
.f-about-feature .body { flex: 1; }
.f-about-feature .title-row {
  display: flex; align-items: center; gap: 8px;
}
.f-about-feature .title {
  font-family: 'Fraunces', serif; font-size: 1.1875rem;
  color: var(--ink); font-weight: 600; letter-spacing: -0.01em;
}
.f-about-feature .pill-soon,
.f-about-feature .pill-available {
  font-size: 0.5625rem;
}
.f-about-feature .desc {
  font-size: 0.8125rem; color: var(--ink-soft);
  margin-top: 6px; line-height: 1.55;
}

/* Plans */
.f-about-plans { margin-top: 64px; }
.f-about-plans .head { margin-bottom: 22px; }
.f-about-plans .eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sea); font-weight: 600;
}
.f-about-plans .h2 {
  font-family: 'Fraunces', serif; font-size: 2.25rem;
  color: var(--ink); margin: 6px 0 0; font-weight: 500; letter-spacing: -0.02em;
}
.f-about-plans .sub {
  font-size: 0.875rem; color: var(--ink-soft); margin-top: 6px;
}
.plan-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.f-plan {
  position: relative;
  background: #fff; color: var(--ink);
  border: 1px solid var(--sand-300);
  border-radius: 18px; padding: 32px 34px;
  display: flex; flex-direction: column; gap: 22px;
}
.f-plan.highlight {
  background: var(--ink); color: #fff;
  border: 0;
  box-shadow: 0 30px 60px -25px rgba(14,43,71,0.35);
}
.f-plan .badge {
  position: absolute; top: 18px; right: 18px;
  background: var(--pennant); color: var(--ink);
  font-size: 0.625rem; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.f-plan .head { margin: 0; }
.f-plan .name {
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sea); font-weight: 700;
}
.f-plan.highlight .name { color: var(--pennant); }
.f-plan .tagline {
  font-size: 0.875rem; color: var(--ink-soft);
  margin-top: 8px; line-height: 1.5; max-width: 320px;
}
.f-plan.highlight .tagline { color: rgba(255,255,255,0.7); }
.f-plan .price {
  display: flex; align-items: baseline; gap: 8px;
}
.f-plan .price .fig {
  font-family: 'Fraunces', serif; font-size: 4rem;
  font-weight: 500; letter-spacing: -0.03em; line-height: 1;
  color: var(--ink);
}
.f-plan.highlight .price .fig { color: #fff; }
.f-plan .price .per {
  font-size: 1rem; color: var(--ink-soft);
}
.f-plan.highlight .price .per { color: rgba(255,255,255,0.6); }
.f-plan .monthly {
  font-size: 0.75rem; color: var(--ink-soft); margin-top: -14px;
}
.f-plan.highlight .monthly { color: rgba(255,255,255,0.55); }
.f-plan .feats {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 14px; border-top: 1px solid var(--sand-300);
}
.f-plan.highlight .feats { border-top-color: rgba(255,255,255,0.12); }
.f-plan .feat {
  display: flex; align-items: center; gap: 12px;
  font-size: 0.875rem;
}
.f-plan .feat .check {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surf); color: var(--sea);
  display: grid; place-items: center;
  font-size: 0.6875rem; font-weight: 700; flex-shrink: 0;
}
.f-plan.highlight .feat .check { background: var(--pennant); color: var(--ink); }
.f-plan .setup {
  margin-top: auto;
  padding: 14px 16px;
  background: var(--sand-50);
  border: 1px dashed var(--sand-300);
  border-radius: 10px;
}
.f-plan.highlight .setup {
  background: rgba(245,197,24,0.12);
  border: 1px solid rgba(245,197,24,0.25);
}
.f-plan .setup-label {
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700;
}
.f-plan.highlight .setup-label { color: var(--pennant); }
.f-plan .setup-fig {
  display: flex; align-items: baseline; gap: 8px; margin-top: 4px;
}
.f-plan .setup-fig .fig {
  font-family: 'Fraunces', serif; font-size: 1.5rem;
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.f-plan.highlight .setup-fig .fig { color: #fff; }
.f-plan .setup-fig .note {
  font-size: 0.6875rem; color: var(--ink-soft);
}
.f-plan.highlight .setup-fig .note { color: rgba(255,255,255,0.6); }
.f-plan .btn-cta {
  /* Buttons stretch full card width inside the plan card; we explicitly
     centre with flex so the label sits in the middle of the pill
     regardless of the browser default `text-align`. Display font
     (Fraunces) matches the price typography above. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px; padding: 0 24px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 10px;
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-size: 1.05rem; font-weight: 600; cursor: pointer;
  text-align: center;
}
.f-plan.highlight .btn-cta {
  background: var(--pennant); color: var(--ink); border: 0;
}
.f-plan.highlight .btn-cta:hover { filter: brightness(1.05); }
.f-plan .btn-cta:hover { background: var(--sand-100); }

/* Pricing CTA card (About page) */
.f-about-pricing-cta {
  margin-top: 64px;
  background: #fff; border: 1px solid var(--sand-300);
  border-radius: 16px; padding: 32px 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.f-about-pricing-cta .left { flex: 1; min-width: 240px; }
.f-about-pricing-cta .eyebrow {
  font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sea); font-weight: 600;
}
.f-about-pricing-cta .h2 {
  font-family: 'Fraunces', serif; font-size: 1.875rem;
  color: var(--ink); margin: 6px 0 8px; font-weight: 500; letter-spacing: -0.02em;
}
.f-about-pricing-cta p {
  font-size: 0.9375rem; color: var(--ink-soft); margin: 0; line-height: 1.55;
  max-width: 560px;
}

/* Pricing page notes section */
.f-about-pricing-notes {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.f-about-pricing-notes .note {
  background: #fff; border: 1px solid var(--sand-300);
  border-radius: 14px; padding: 22px 24px;
}
.f-about-pricing-notes .h3 {
  font-family: 'Fraunces', serif; font-size: 1.0625rem;
  color: var(--ink); font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.f-about-pricing-notes p {
  font-size: 0.8125rem; color: var(--ink-soft); margin: 0; line-height: 1.55;
}
html.dark .f-about-pricing-cta,
html.dark .f-about-pricing-notes .note { background: #0b3a5b; border-color: rgba(255,255,255,.08); }
html.dark .f-about-pricing-cta .h2,
html.dark .f-about-pricing-notes .h3 { color: #dde9f4; }
html.dark .f-about-pricing-cta p,
html.dark .f-about-pricing-notes p { color: #bcd2e8; }

@media (max-width: 900px) {
  .f-about-pricing-cta { margin-top: 28px; padding: 18px; gap: 14px; }
  .f-about-pricing-cta .h2 { font-size: 1.25rem; }
  .f-about-pricing-cta p { font-size: 0.8125rem; }
  .f-about-pricing-notes { grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
}

/* Back row */
.f-about-back { margin-top: 56px; }

/* Footer */
.f-about-footer {
  padding: 24px 80px;
  border-top: 1px solid var(--sand-300);
  font-size: 0.6875rem; color: var(--ink-soft);
  text-align: center; background: var(--sand-50);
}

/* ----- Mobile: stack hero, cards, plans. Removes the "huge banner" ----- */
@media (max-width: 900px) {
  .f-about-top { height: auto; padding: 14px 18px; gap: 12px; }
  .f-about-top .f-about-brand-text .club { font-size: 0.9375rem; }
  .f-about-hero {
    padding: 28px 22px 32px;
    background: var(--sand-50);
  }
  .f-about-hero-decor .sun { width: 140px; height: 140px; right: -20px; top: -20px; }
  .f-about-hero-decor .boat { width: 110px; height: 110px; right: 8px; top: 16px; opacity: 0.65; }
  .f-about-hero-inner .headline { font-size: 1.875rem; line-height: 1.05; }
  .f-about-hero-inner .lead { font-size: 0.8125rem; margin-top: 14px; }
  .f-about-content { padding: 20px 18px 60px; }
  .f-about-context {
    grid-template-columns: 1fr; gap: 14px;
    padding: 18px; margin-bottom: 24px;
  }
  .f-about-context .left .h2 { font-size: 1.375rem; }
  .f-about-context .right { font-size: 0.8125rem; }
  .f-about-features .grid { grid-template-columns: 1fr; gap: 10px; }
  .f-about-feature { padding: 14px; gap: 14px; align-items: center; }
  .f-about-feature .title { font-size: 0.875rem; }
  .f-about-feature .desc { font-size: 0.6875rem; margin-top: 2px; }
  .f-about-plans { margin-top: 28px; }
  .f-about-plans .h2 { font-size: 1.375rem; }
  .plan-grid { grid-template-columns: 1fr; gap: 14px; }
  .f-plan { padding: 18px; gap: 14px; border-radius: 14px; }
  .f-plan .price .fig { font-size: 2.375rem; }
  .f-about-footer { padding: 20px; }
}

/* Dark mode for About */
html.dark .f-about { background: #06223a; color: #dde9f4; }
html.dark .f-about-top { background: #0b3a5b; border-bottom-color: rgba(255,255,255,.08); }
html.dark .f-about-brand-text .club { color: #dde9f4; }
html.dark .f-about-brand-text .app  { color: #8db3d6; }
html.dark .f-about-hero { border-bottom-color: rgba(255,255,255,.08); }
html.dark .f-about-hero-inner .headline { color: #dde9f4; }
html.dark .f-about-hero-inner .lead { color: #bcd2e8; }
html.dark .f-about-hero-inner .lead b { color: #fff; }
html.dark .f-about-context,
html.dark .f-about-feature,
html.dark .f-plan { background: #0b3a5b; border-color: rgba(255,255,255,.08); }
html.dark .f-about-context .right { color: #bcd2e8; }
html.dark .f-about-context .right b { color: #fff; }
html.dark .f-about-context .left .h2,
html.dark .f-about-features .h2,
html.dark .f-about-feature .title,
html.dark .f-about-plans .h2 { color: #dde9f4; }
html.dark .f-about-feature .desc { color: #8db3d6; }
html.dark .f-plan .feats { border-top-color: rgba(255,255,255,.08); }
html.dark .f-plan .setup { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
html.dark .f-plan .price .fig { color: #dde9f4; }
html.dark .f-plan:not(.highlight) .name { color: #7fb6e6; }
html.dark .f-plan:not(.highlight) .tagline { color: #bcd2e8; }
html.dark .f-plan:not(.highlight) .price .per { color: #8db3d6; }
html.dark .f-plan:not(.highlight) .monthly { color: #8db3d6; }
html.dark .f-plan:not(.highlight) .feat { color: #dde9f4; }
html.dark .f-plan:not(.highlight) .setup-label { color: #8db3d6; }
html.dark .f-plan:not(.highlight) .setup-fig .fig { color: #dde9f4; }
html.dark .f-plan:not(.highlight) .setup-fig .note { color: #8db3d6; }
html.dark .f-plan:not(.highlight) .btn-cta { color: #dde9f4; border-color: rgba(255,255,255,.4); }
html.dark .f-plan:not(.highlight) .btn-cta:hover { background: rgba(255,255,255,.06); }
html.dark .f-about-footer { background: #0b3a5b; color: #8db3d6; border-top-color: rgba(255,255,255,.08); }

/* =========================================================================
   Assembly module
   -------------------------------------------------------------------------
   The deck is rendered into a fixed 1280×720 "stage" and scaled via CSS
   transform. Every measurement INSIDE a stage is in design pixels (px)
   because the wrapper does the scaling — keeping the inner CSS in px
   avoids transform-induced layout jitter that comes with em/rem at
   non-integer scales. Rules outside the stage (action bars, thumbnail
   grid chrome) follow the project-wide rem convention.
   ========================================================================= */

/* --- Hero band --- */
.asm-hero {
  background: var(--navy-900);
  color: #fff;
  padding: 1.5rem 1.75rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 1rem;
}
html.dark .asm-hero { background: #06223a; }
.asm-hero-text { flex: 1 1 32rem; min-width: 0; }
.asm-hero-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--pennant);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.asm-hero-title {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.asm-hero-sub {
  color: rgba(255,255,255,.78);
  max-width: 48rem;
  font-size: 0.95rem;
  margin: 0;
}
.asm-hero-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}
.asm-present-cta { background: var(--pennant); color: var(--navy-900); border: 0; }
.asm-present-cta:hover { background: #e2b412; }

/* --- Action bar --- */
.asm-actions { background: #fff; }
html.dark .asm-actions { background: #0b3a5b; }
.asm-present-btn { background: var(--pennant); color: var(--navy-900); }
.asm-present-btn:hover { background: #e2b412; }

/* --- Thumbnail grid --- */
.asm-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.5rem;
}
.asm-thumb {
  position: relative;
  border-radius: 14px;
  overflow: visible;
  background: transparent;
}
.asm-thumb .asm-stage-wrap {
  border: 1px solid rgba(14, 43, 71, 0.12);
  box-shadow: 0 6px 24px -10px rgba(14, 43, 71, 0.3);
}
html.dark .asm-thumb .asm-stage-wrap { border-color: rgba(255,255,255,.1); }
.asm-thumb-meta { padding: 0.5rem 0.25rem 0; }
.asm-thumb-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.6875rem;
  color: var(--ink-soft);
  font-weight: 700;
}
.asm-thumb-title {
  color: var(--ink);
  font-weight: 600;
  margin-top: 0.125rem;
}
html.dark .asm-thumb-title { color: #dde9f4; }
.asm-thumb-play {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(14, 43, 71, 0.85);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 0.875rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,.4);
}
.asm-thumb-add {
  border: 2px dashed rgba(14, 43, 71, 0.25);
  border-radius: 14px;
  min-height: 225px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.asm-thumb-add > :first-child { font-size: 2rem; line-height: 1; }
html.dark .asm-thumb-add { border-color: rgba(255,255,255,.18); color: #8db3d6; }

.asm-hint {
  padding: 0.85rem 1rem;
  border: 1px solid var(--pennant);
  border-radius: 12px;
  background: rgba(245, 197, 24, 0.08);
  color: var(--ink);
  display: flex; gap: 0.625rem; align-items: center;
  font-size: 0.875rem;
}
html.dark .asm-hint { color: #dde9f4; background: rgba(245, 197, 24, 0.12); }
.asm-hint-icon { font-size: 1.125rem; }

/* --- Mini avatar (used in user table + notes editor) --- */
.asm-mini-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--sea-deep);
  color: #fff;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.asm-mini-avatar img { width: 100%; height: 100%; object-fit: cover; }
.asm-mini-avatar-x {
  display: inline-flex;
  margin-left: 4px;
  background: transparent;
  color: var(--neg);
  border: 0;
  cursor: pointer;
  vertical-align: middle;
}

/* --- Cover-image picker --- */
.asm-cover-pic {
  width: 100%; max-width: 18rem;
  aspect-ratio: 16/9;
  border-radius: 10px;
  border: 1px dashed rgba(14, 43, 71, 0.25);
  background: var(--sand-100);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.asm-cover-pic img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   Slide stage — fixed 1280×720 design space.
   ========================================================================= */
.asm-stage {
  position: relative;
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  color: #0E2B47;
  overflow: hidden;
}
.asm-stage * { box-sizing: border-box; }
.asm-stage-light { background: #FBF9F4; color: #0E2B47; }
.asm-stage-dark  {
  background: linear-gradient(160deg, #0E2B47 0%, #163a5c 70%, #1E6FA8 130%);
  color: #FBF9F4;
}
.asm-stage h1, .asm-stage h2 {
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-weight: 600;
  margin: 0;
  line-height: 1.04;
}
.asm-eyebrow {
  position: absolute;
  top: 60px; left: 60px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #1E6FA8;
}
.asm-stage-dark .asm-eyebrow { color: #F5C518; }
.asm-title {
  font-size: 62px;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.asm-title-italic { font-style: italic; }

/* Footer (page number + brand) */
.asm-foot {
  position: absolute;
  left: 60px; right: 60px; bottom: 28px;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
}
.asm-foot-light { color: #48607A; }
.asm-foot-dark  { color: rgba(251, 249, 244, 0.7); }
.asm-foot-left { display: flex; gap: 8px; align-items: center; }

/* ---- Cover slide ---- */
.asm-cover { padding: 0; }
.asm-cover-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.45;
  mix-blend-mode: lighten;
}
/* Cover backdrop — mirrors the landing-page "hero-ocean" treatment:
   a warm pennant glow upper-right and a paler navy glow upper-left,
   layered on the dark stage. */
.asm-cover-blob {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 720px 600px at 90% -10%, rgba(245,197,24,.18), transparent 60%),
    radial-gradient(ellipse 700px 600px at -10% -20%, rgba(89,142,190,.32), transparent 60%);
}
.asm-club-badge {
  position: absolute;
  top: 60px; left: 60px;
  display: flex; gap: 14px; align-items: center;
}
.asm-club-logo {
  width: 80px; height: 80px;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}
/* On the dark cover/closing background a raw logo can be hard to read
   (most club marks are designed for light surfaces). Wrap it in a white
   rounded tile so the original colours come through. */
.asm-club-badge-dark .asm-club-logo-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  width: 80px; height: 80px;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.5);
}
.asm-club-badge-dark .asm-club-logo {
  width: 100%; height: 100%;
}
.asm-club-name { font-size: 18px; font-weight: 700; }
.asm-club-sub {
  font-size: 11px; letter-spacing: 0.22em; opacity: 0.7;
  text-transform: uppercase;
}
.asm-cover-title {
  position: absolute;
  left: 60px; top: 260px;
  max-width: 1100px;
}
.asm-cover-title .asm-title { font-size: 88px; }
.asm-cover-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--pennant);
  margin-bottom: 18px;
}
.asm-cover-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 36px;
  color: var(--pennant);
  margin-top: 12px;
}
.asm-cover-meta {
  position: absolute;
  left: 60px; bottom: 130px;
  font-size: 14px;
  display: flex; flex-direction: column; gap: 4px;
  color: rgba(251, 249, 244, 0.85);
}
.asm-cover-meta-line {
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(251, 249, 244, 0.55);
}
.asm-cover-presenters {
  position: absolute;
  right: 60px; bottom: 120px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 360px;
}
.asm-presenter {
  display: flex; gap: 12px; align-items: center;
  background: rgba(255,255,255,.06);
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.asm-avatar {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: #0C4F82;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  overflow: hidden;
  flex-shrink: 0;
}
.asm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.asm-presenter-name { font-weight: 700; font-size: 14px; }
.asm-presenter-role { font-size: 11px; opacity: 0.7; }

/* ---- Agenda slide ---- */
.asm-agenda .asm-title {
  position: absolute;
  top: 100px; left: 60px;
  max-width: 980px;
}
.asm-agenda-grid {
  position: absolute;
  top: 280px; left: 60px; right: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.asm-agenda-block {
  padding: 28px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--sand-300);
  min-height: 320px;
}
.asm-agenda-num {
  font-family: 'Fraunces', serif;
  font-size: 60px;
  color: var(--pennant);
  line-height: 1;
  font-weight: 700;
}
.asm-agenda-title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 600;
  margin-top: 16px;
}
.asm-agenda-body {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---- Divider slide ---- */
.asm-divider .asm-divider-bignum {
  position: absolute;
  top: 100px;
  right: 80px;
  font-family: 'Fraunces', serif;
  font-size: 280px;
  color: var(--pennant);
  font-weight: 700;
  line-height: 1;
}
.asm-divider-text {
  position: absolute;
  left: 60px; top: 240px;
  max-width: 700px;
}
.asm-divider-subtitle {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pennant);
  margin-bottom: 12px;
  font-weight: 700;
}
.asm-divider .asm-title { font-size: 96px; }
.asm-divider-summary {
  font-size: 18px;
  line-height: 1.5;
  color: rgba(251, 249, 244, 0.85);
  margin-top: 24px;
}

/* ---- KPI slide ---- */
.asm-kpis .asm-title {
  position: absolute;
  top: 100px; left: 60px;
  font-size: 56px;
  max-width: 1080px;
}
.asm-kpi-cards {
  position: absolute;
  top: 240px; left: 60px; right: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}
.asm-kpi-card {
  background: #fff;
  border: 1px solid var(--sand-300);
  padding: 24px;
  min-height: 200px;
  border-radius: 14px;
}
/* Slide-internal elements are theme-locked via .asm-stage-light /
   .asm-stage-dark — they MUST NOT respond to the app-level html.dark
   toggle, otherwise the cards lose their white background when a user
   is browsing in dark mode and the slide ends up unreadable (the user
   reported this in May 2026 with screenshots of slides 4 / 9). Each
   slide-internal selector is namespaced under .asm-stage-* below so
   the theme stays locked to the slide's own theme. */
.asm-kpi-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
}
.asm-kpi-value {
  font-family: 'Fraunces', serif;
  font-size: 46px;
  font-weight: 600;
  margin-top: 10px;
  line-height: 1.05;
}
.asm-kpi-sub {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-soft);
}
.asm-kpi-highlights {
  position: absolute;
  left: 60px; right: 60px; bottom: 90px;
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: 14px;
  padding: 16px 22px;
}
.asm-kpi-highlights-title {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.asm-kpi-highlights-list {
  margin: 0;
  padding-left: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  font-size: 13px;
  color: var(--ink-soft);
}
.asm-kpi-highlights-list li::marker { color: var(--pennant); }

.asm-pos { color: var(--pos); }
.asm-neg { color: var(--neg); }

/* ---- Flow chart slide ---- */
.asm-flow .asm-title {
  position: absolute;
  top: 100px; left: 60px;
  font-size: 56px;
  max-width: 1080px;
}
.asm-flow-sub {
  position: absolute;
  top: 200px; left: 60px;
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 980px;
}
.asm-flow-chart {
  position: absolute;
  top: 240px; left: 30px; right: 30px;
  height: 360px;
}
.asm-flow-chart svg { width: 100%; height: 100%; }
.asm-flow-legend {
  position: absolute;
  bottom: 80px; left: 60px;
  display: flex; gap: 28px;
  font-size: 13px;
  color: var(--ink-soft);
}
.asm-flow-leg { display: flex; gap: 8px; align-items: center; }
.asm-sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }

/* ---- Balance slide ---- */
.asm-balance .asm-title {
  position: absolute;
  top: 100px; left: 60px;
  font-size: 48px;
  max-width: 1080px;
}
.asm-balance-grid {
  position: absolute;
  top: 210px; left: 60px; right: 60px; bottom: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.asm-balance-tbl {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  color: var(--ink);
}
.asm-balance-tbl thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sand-300);
}
.asm-balance-side { font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; }
.asm-balance-y { text-align: right; }
.asm-balance-section td {
  font-weight: 700;
  padding: 10px 0 6px;
  border-top: 1px solid var(--sand-300);
}
.asm-balance-sub td {
  padding: 4px 0;
  color: var(--ink-soft);
}
.asm-balance-indent { padding-left: 14px !important; }
.asm-balance-total td {
  border-top: 2px solid var(--ink);
  padding-top: 8px;
  font-weight: 700;
  color: var(--ink);
}
.asm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- PyG slide ---- */
.asm-pyg .asm-title {
  position: absolute;
  top: 100px; left: 60px;
  font-size: 44px;
  max-width: 1080px;
}
.asm-pyg-tbl {
  position: absolute;
  top: 200px; left: 60px; right: 60px;
  font-size: 12px;
  border-collapse: collapse;
  width: calc(1280px - 120px);
}
.asm-pyg-tbl thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-soft);
  padding: 6px 6px;
  border-bottom: 1px solid var(--sand-300);
}
.asm-pyg-tbl thead th.asm-num { text-align: right; }
.asm-pyg-tbl tbody td { padding: 4px 6px; }
.asm-pyg-section td {
  background: var(--sand-100);
  font-weight: 700;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.asm-pyg-subtotal td {
  font-weight: 700;
  border-top: 1px solid var(--sand-300);
  padding-top: 6px !important;
}
.asm-pyg-result td {
  font-weight: 700;
  padding: 10px 6px !important;
  background: #f4f8ff;
  border-top: 2px solid var(--ink);
  font-size: 14px;
}

/* ---- Detail slide (income/expense breakdown) ---- */
.asm-detail .asm-title {
  position: absolute;
  top: 100px; left: 60px;
  font-size: 44px;
  max-width: 1080px;
}
.asm-detail-tbl {
  position: absolute;
  top: 200px; left: 60px; right: 60px;
  font-size: 13px;
  border-collapse: collapse;
  width: calc(1280px - 120px);
}
.asm-detail-tbl thead th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-soft);
  padding: 6px 8px;
  border-bottom: 2px solid var(--sand-300);
}
.asm-detail-tbl thead th.asm-num { text-align: right; }
.asm-detail-tbl tbody td { padding: 5px 8px; }
.asm-detail-more td {
  padding: 6px 8px !important;
  font-style: italic;
  color: var(--ink-soft);
}
.asm-detail-empty td {
  padding: 14px 8px !important;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}
.asm-detail-total td {
  font-weight: 700;
  background: var(--sand-100);
  padding: 8px !important;
  border-top: 1px solid var(--sand-300);
}

/* ---- Sports slide ---- */
.asm-sports .asm-title {
  position: absolute;
  top: 100px; left: 60px;
  font-size: 48px;
  max-width: 1080px;
}
.asm-sports-grid {
  position: absolute;
  top: 220px; left: 60px; right: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.asm-sports-card {
  background: #fff;
  border: 1px solid var(--sand-300);
  border-radius: 14px;
  padding: 22px;
  min-height: 240px;
}
.asm-sports-card-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
}
.asm-sports-row {
  display: flex; justify-content: space-between;
  margin-top: 14px;
  font-size: 14px;
}
.asm-sports-result {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--sand-300);
  font-weight: 700;
  font-size: 16px;
}
.asm-sports-summary {
  position: absolute;
  left: 60px; right: 60px; bottom: 90px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--navy-900);
  color: #fff;
  border-radius: 12px;
  padding: 14px 22px;
}
.asm-sports-summary > div { display: flex; flex-direction: column; gap: 4px; }
.asm-sports-sum-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}
.asm-sports-sum-val {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 700;
}
/* The summary band sits on navy-900. The default --pos / --neg are tuned
   for light backgrounds and turn nearly invisible on dark blue, so swap
   in brighter shades inside the band. */
.asm-sports-summary .asm-pos { color: #34d399; }
.asm-sports-summary .asm-neg { color: #f87171; }

/* ---- Note slide ---- */
.asm-note .asm-title {
  font-size: 40px;
  margin-top: 10px;
}
.asm-note-row {
  position: absolute;
  top: 130px; left: 60px; right: 60px; bottom: 80px;
  display: flex;
  gap: 40px;
}
.asm-note-avatar {
  width: 280px; height: 280px;
  border-radius: 18px;
  overflow: hidden;
  background: #0C4F82;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 96px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
}
.asm-note-avatar img { width: 100%; height: 100%; object-fit: cover; }
.asm-note-text { flex: 1; min-width: 0; }
.asm-note-intro {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.asm-note-p {
  font-size: 15px;
  line-height: 1.55;
  margin: 14px 0 0;
  color: var(--ink);
}
.asm-note-role {
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Closing slide ---- */
.asm-closing { padding: 0; }
.asm-closing-mark {
  position: absolute;
  top: 200px; left: 50%;
  transform: translateX(-50%);
}
.asm-closing-text {
  position: absolute;
  top: 270px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.asm-closing .asm-title { font-size: 110px; line-height: 1; white-space: nowrap; }
.asm-closing-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 28px;
  color: var(--pennant);
  margin-top: 12px;
}
.asm-closing-meta {
  position: absolute;
  bottom: 110px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 249, 244, 0.7);
  display: flex; flex-direction: column; gap: 8px;
}
.asm-closing-body {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(251, 249, 244, 0.85);
  margin-top: 4px;
}

/* =========================================================================
   Fullscreen presentation overlay
   ========================================================================= */
.asm-present-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #06223a;
  color: #fff;
  display: grid;
  grid-template-rows: 1fr auto;
}
.asm-present-stage { position: relative; min-height: 0; }
.asm-present-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 0;
  font-size: 1.25rem;
  width: 40px; height: 40px;
  border-radius: 999px;
  cursor: pointer;
  z-index: 2;
}
.asm-present-counter {
  position: absolute;
  bottom: 1.25rem; left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.08);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}
.asm-present-arrows {
  position: absolute;
  bottom: 1.25rem; right: 1.25rem;
  display: flex; gap: 0.5rem;
  z-index: 2;
}
.asm-present-arrow {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 0;
  font-size: 1.5rem;
  cursor: pointer;
}
.asm-present-arrow:hover { background: rgba(255,255,255,.16); }

/* Focus modal (open from thumbnail) */
.asm-focus-body { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.asm-focus-stage-wrap { display: flex; justify-content: center; }
.asm-focus-meta { color: var(--ink-soft); font-size: 0.8125rem; }
.asm-focus-counter { letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

/* Cover & copy modal extras: slide-visibility checklist. */
.asm-slide-toggles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem 1rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sand-300);
  border-radius: 10px;
  background: var(--sand-100);
}
html.dark .asm-slide-toggles { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }
.asm-slide-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  padding: 0.125rem 0.25rem;
  border-radius: 6px;
}
.asm-slide-toggle:hover { background: rgba(14, 43, 71, 0.04); }
html.dark .asm-slide-toggle { color: #dde9f4; }
html.dark .asm-slide-toggle:hover { background: rgba(255,255,255,.06); }
.asm-slide-toggle input { accent-color: var(--sea); }

/* Flow slide: the editorial sub-line is gone; reduce reserved space and
   pull the chart up so the slide still looks balanced. */
.asm-flow-sub { display: none; }
.asm-flow-chart { top: 200px; }