/* ============================================================================
   Shared 3-theme token system + card component (27-Jul-2026).
   ----------------------------------------------------------------------------
   Every page that needed Dark/Light/Blue support so far (UserManagement,
   Module Launcher, FinanzasBanano) built its own private color values and its
   own card CSS from scratch — same colors typed three times under three
   different class prefixes (the um-prefixed tokens scoped to .um-page, the
   lin-prefixed tokens scoped to .lin-root, .fe-banano-tile's own hardcoded
   hex). Every new page repeated the same Blue-theme gap, the same "light
   canvas should be white not grey" fix, the same grid-toggle-vs-opaque-card
   interaction bug, because there was nothing shared to fix ONCE.

   This file is that shared layer. It does two things:
   1. Defines the pg- and um-prefixed tokens GLOBALLY on body.tw-shell (not
      inside a page-scoped class), for all three themes, using the exact values already
      established on UserManagement (the reference implementation — see
      reference_icon_rail_sidebar_and_3_themes.md in project memory for the
      full per-theme token table this was copied from).
   2. Defines .tw-tile — a themed, clickable card/tile component (icon chip +
      title + meta) any page can drop in directly. It already handles: Blue's
      transparent-card-over-canvas look with glass blur, Dark/Light's opaque
      card look, and the grid-toggle occlusion fix (a transparent card must
      repaint the canvas itself so ancestor grid-lines don't bleed through it;
      an opaque card blocks them for free).

   New pages should use .tw-tile (or read var(--pg-surface) / var(--um-accent)
   etc. directly) instead of inventing their own palette. Existing pages
   (UserManagement, Module Launcher) were NOT migrated onto this file in this
   pass — their own CSS already matches these values exactly, so nothing to
   fix there; migrating them to actually reference these shared rules (instead
   of duplicating the same values locally) is a safe follow-up cleanup, not
   done here to avoid touching already-verified pages.
   ============================================================================ */

/* ── Dark (default — no data-bs-theme/data-tw-theme attribute needed).
   larkon-light-palette.css has a MORE specific pre-existing rule,
   `html[data-tw-theme="dark"][data-menu-color] body.tw-shell { --pg-surface:
   #2d2c2b; }`, that silently overrides a plain `body.tw-shell` selector
   whenever Dark is explicitly selected (not just the no-attribute default
   state) — so every selector variant below is listed explicitly, with
   !important, to guarantee this always wins regardless of which dark-theme
   attribute combination is present. ── */
html[data-tw-theme="dark"] body.tw-shell,
html[data-tw-theme="dark"][data-menu-color] body.tw-shell,
body.tw-shell {
    --pg-surface:      #1a1a1f !important;
    --pg-surface-2:    #23232a !important;
    --pg-border:       #26262b !important;
    --um-radius:       14px !important;
    --um-shadow:       0 1px 2px rgba(0,0,0,.3), 0 10px 28px -12px rgba(0,0,0,.5) !important;
    --um-accent:       #d97757 !important;
    --um-accent-soft:  #3d2c24 !important;
    --um-accent-ink:   #e2917a !important;
    --um-accent-grad:  linear-gradient(135deg, #d97757, #c96442) !important;
    --um-amber:        #c8956c !important;   --um-amber-soft:   #3a322a !important;
    --um-red:          #e07a63 !important;   --um-red-soft:     #3a2620 !important;
    --um-blue:         #9fb4c7 !important;   --um-blue-soft:    #2e3339 !important;
    --um-success:      #8fce9f !important;   --um-success-soft: #22301f !important;
}

/* Generic Bootstrap .card in Light theme reads a SEPARATE, older token
   (--larkon-card, from larkon-light-palette.css's client-approved palette,
   #EAEAEA) instead of --pg-surface — a second, disconnected token family for
   the exact same "card background" concept. Align it to the same white the
   rest of the app's light theme now uses (27-Jul-2026: "cards match theme
   design in all pages, like users page"), so every page using plain .card
   (most of the FinanzasExportacion dashboards) gets the same white cards for
   free, not just the pages already migrated onto --pg-surface. */
html[data-bs-theme="light"] {
    --larkon-card: #ffffff !important;
}

/* ── Light — !important for the same reason as the Dark block above (a
   competing rule with an extra attribute could otherwise silently win). ── */
html[data-bs-theme="light"] body.tw-shell {
    --pg-surface:      #ffffff !important;
    --pg-surface-2:    #efefed !important;
    --pg-border:       #e9e9e7 !important;
    --pg-text:         #18181c !important;
    --pg-text-2:       #55555e !important;
    --pg-text-3:       #9d9da6 !important;
    --um-radius:       14px !important;
    --um-shadow:       0 1px 2px rgba(26,35,51,.05), 0 8px 24px -12px rgba(26,35,51,.12) !important;
    --um-accent:       #2563b0 !important;
    --um-accent-soft:  #e3edf9 !important;
    --um-accent-ink:   #1d4e8f !important;
    --um-accent-grad:  linear-gradient(135deg, #2f6fc4, #2563b0) !important;
    --um-amber:        #9a7222 !important;   --um-amber-soft:   #f5edd8 !important;
    --um-red:          #b3402f !important;   --um-red-soft:     #f6e2dd !important;
    --um-blue:         #2563b0 !important;   --um-blue-soft:    #e3edf9 !important;
    --um-success:      #1e7a45 !important;   --um-success-soft: #e0f1e7 !important;
}

/* (12-Aug-2026 one-design-language consolidation: the Deep Blue theme and its
   token block + escape-hatch rules were removed — the product ships Slate Dark
   + Slate Light only. Legacy localStorage 'blue' values are migrated to dark
   by the first-paint script in _VerticalLayout.cshtml.) */

/* ============================================================================
   Finanzas module — the `--f*` private palette (27-Jul-2026).
   ----------------------------------------------------------------------------
   The ~12 FinanzasExportacion pages each declare their OWN `:root` palette
   (--fbg/--fborder/--ftext/--fmuted plus --fp/--fs/--fd/--fw/--fi and their
   `-s` soft companions) with LIGHT values, and every `.fin-*` component reads
   those vars. tw-page-skin.css / tw-shell-skin.css then hijack the vars per
   theme on `[class*="fin-card"], [class*="fin-kpi"], .fin-wrap, .fin-page` —
   but only for DARK (unscoped) and LIGHT. That leaves two holes:

     1. BLUE has no block, so it falls through to the DARK values and
        `--fbg: #1a1a1f` paints an opaque slate slab over the whole blue
        radial canvas — the "black block" on every Finanzas page.
     2. The five soft variants are never overridden in ANY dark theme, so
        --fp-s #eef2ff / --fs-s #e8f8f5 / --fd-s #fdeeea / --fw-s #fff6e3 /
        --fi-s #e8f4fb stay LIGHT pastels, making badges and chips glow
        bright on the dark page.

   Both are fixed here once, for every Finanzas page at the same time, instead
   of per page. Selector shape mirrors the tw-page-skin.css block it has to
   beat, plus the theme attribute so it wins on specificity; `.fe-al-page`
   (Alertas) is included so that page shares the same palette.
   ============================================================================ */

/* Soft variants the base skins never set — routed through the shared soft
   tokens (12-Aug-2026 Phase 4): theme-correct in Dark AND Light from one rule,
   and they follow the tenant BrandAccentColor via --um-accent-soft. */
body.tw-shell [class*="fin-card"],
body.tw-shell [class*="fin-kpi"],
body.tw-shell .fin-wrap,
body.tw-shell .fin-page,
body.tw-shell .fe-al-page {
    --fp-s: var(--um-accent-soft, rgba(59,130,246,.16)) !important;
    --fs-s: var(--um-success-soft, rgba(78,203,126,.16)) !important;
    --fd-s: var(--um-red-soft, rgba(229,77,46,.16)) !important;
    --fw-s: var(--um-amber-soft, rgba(245,165,36,.16)) !important;
    --fi-s: var(--um-blue-soft, rgba(56,189,248,.16)) !important;
}

/* (12-Aug-2026: the Blue --f* palette, fin-page wrapper, .fe-pe-panel and
   .dashboard-home --ld-* Blue blocks were removed with the Deep Blue theme.) */

/* ============================================================================
   `.pg-page-head` — the shared page-title header (27-Jul-2026).
   ----------------------------------------------------------------------------
   Lifted verbatim from UserManagement's `.um-header` / `.um-title-wrap` so any
   page can show the same title treatment (Playfair Display on dark, Lora on
   light, 26px, -.02em) instead of inventing its own — or, as the Finanzas
   pages did, showing NO page title at all and opening straight on a lede
   sentence. Fonts come from _HeadCSS so this works app-wide.
   ============================================================================ */
.pg-page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-top: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.pg-page-head-titles { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.pg-page-title {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15;
    color: var(--pg-text);
}
html[data-bs-theme="light"] .pg-page-title { font-family: 'Lora', serif; }
.pg-page-sub {
    font-size: 12.5px; color: var(--pg-text-3); font-weight: 500;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .pg-page-title { font-size: 21px; }
}

/* ============================================================================
   `.fin-kpi-rich` KPI cards — theme coverage (27-Jul-2026).
   ----------------------------------------------------------------------------
   These cards (Proyección Semanal, Punto de Equilibrio) are defined ONLY in
   the two views' inline <style>, with `background:#fff` and pastel icon chips
   (#e8f4fb / #fff8e6 / #fdeeea). No shared stylesheet ever knew about them —
   grep for "fin-kpi-rich" across wwwroot/css returns nothing — so they stayed
   pure WHITE in Dark and Blue: bright cards on a dark canvas, with the emoji
   icon nearly invisible (1.1:1 contrast) on its pale chip.
   Route them through the shared tokens like every other card.
   ============================================================================ */
body.tw-shell .fin-kpi-rich {
    background: var(--pg-surface) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
    box-shadow: none !important;
}
body.tw-shell .fin-kpi-rich__value { color: var(--pg-text) !important; }
body.tw-shell .fin-kpi-rich__title,
body.tw-shell .fin-kpi-rich__desc { color: var(--pg-text-3) !important; }

/* Icon chips: translucent tints of the same accents, so the glyph stays legible
   on both the dark and the blue canvas (was pale-on-pale). */
body.tw-shell .fin-kpi-rich__ico--rev,
body.tw-shell .fin-kpi-rich__ico--exp { background: var(--um-blue-soft) !important;    color: var(--um-blue) !important; }
body.tw-shell .fin-kpi-rich__ico--pay { background: var(--um-amber-soft) !important;   color: var(--um-amber) !important; }
body.tw-shell .fin-kpi-rich__ico--cash,
body.tw-shell .fin-kpi-rich__ico--cas { background: var(--um-red-soft) !important;     color: var(--um-red) !important; }

/* Light theme keeps opaque white cards, matching the users page convention. */
html[data-bs-theme="light"] body.tw-shell .fin-kpi-rich {
    background: #ffffff !important;
}

/* ============================================================================
   Table action buttons — one consistent shape everywhere (27-Jul-2026).
   ----------------------------------------------------------------------------
   larkon-light-palette.css squeezes EVERY `.btn` inside a `<td>` into a fixed
   32x32 box with `padding: 0 !important`. That is right for icon-only actions
   (trash, eye) but wrong for buttons that carry a LABEL — "$ Abono" got
   crushed into 32px with no padding, so the icon and text collided with the
   border and with the neighbouring button (reported on Préstamos entre
   empresas; the same idiom is used across the ERP).

   Fix: stop hard-sizing. `min-width/min-height` keeps icon-only buttons square
   while label buttons grow to fit their text, and real padding + a gap between
   adjacent buttons restores breathing room. Radius/:gap follow the
   UserManagement `.um-btn` reference (8px radius) so table actions match the
   users page, which is the style the rest of the app is being aligned to.
   ============================================================================ */
body.tw-shell .page-content td .btn,
body.tw-shell .page-content td .btn-sm,
body.tw-shell .page-content td .d-flex .btn-sm,
body.tw-shell .page-content .table td .btn {
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
}

/* Space between stacked/adjacent row actions (the <td> is a table-cell, so
   `gap` on the cell does nothing — margin on the following button is what
   actually separates them). */
body.tw-shell .page-content td .btn + .btn,
body.tw-shell .page-content td .btn + a.btn,
body.tw-shell .page-content td a.btn + .btn {
    margin-left: 6px !important;
}

/* Keep a row's actions on ONE line. Without this the action column is sized by
   the table to whatever is left over (95px on Préstamos) while the buttons need
   ~115px, so the second button wrapped underneath the first — which is what
   read as the buttons overlapping. `nowrap` makes the table reserve the width
   the actions actually need. */
body.tw-shell .page-content td:has(> .btn),
body.tw-shell .page-content td:has(> a.btn),
body.tw-shell .page-content td:has(> .btn-group),
body.tw-shell .page-content td:has(> .d-flex > .btn) {
    white-space: nowrap !important;
}
/* ============================================================================
   Inline COLOURED pastel chips — Dark + Blue (27-Jul-2026).
   ----------------------------------------------------------------------------
   KPI icon chips are written as literal inline hex: `style="background:#eef2ff"`
   (Créditos Bancarios, Plan de Pagos, Proyección Semanal, …). larkon-light-
   palette.css only neutralizes these under `.fe-al-page`, i.e. Alertas alone —
   so on every OTHER page they stay pale mint/peach/lilac in BOTH dark themes,
   with the glyph nearly invisible on them. Map each to the matching translucent
   accent. Scoped `html:not([data-bs-theme="light"])` so light keeps the pastels.
   ============================================================================ */
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background:#eef2ff"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background: #eef2ff"] {
    background: rgba(59,130,246,.16) !important; color: #8ab4ff !important;
}
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background:#e8f4fb"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background: #e8f4fb"] {
    background: rgba(56,189,248,.16) !important; color: #7dd3fc !important;
}
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background:#e8f8f5"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background: #e8f8f5"] {
    background: rgba(52,211,153,.16) !important; color: #4ade80 !important;
}
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background:#fdeeea"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background: #fdeeea"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background:#fde8e4"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background: #fde8e4"] {
    background: rgba(239,106,106,.16) !important; color: #fca5a5 !important;
}
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background:#fff6e3"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background: #fff6e3"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background:#fff8e6"],
html:not([data-bs-theme="light"]) body.tw-shell .page-content [style*="background: #fff8e6"] {
    background: rgba(226,163,60,.16) !important; color: #fbbf24 !important;
}

/* ============================================================================
   Global page canvas — Light theme only.
   <html>, body.tw-shell, .wrapper and .page-content/.container-fluid each
   carry their OWN separate background rule elsewhere in the CSS (tw-shell-
   skin.css, tw-page-skin.css, larkon-light-palette.css) — four different
   elements, each a slightly different near-white grey (#f4f6fa / #f5f5f5 /
   #f4f4f5). Fixing just one of them (as done per-page on UserManagement and
   the Module Launcher, scoped via :has()) leaves the other three showing the
   old grey at the edges on every OTHER page. Doing it globally here instead
   of per-page (27-Jul-2026: same edge-strip bug found again on
   FinanzasExportacion/PanelEjecutivo) means it's fixed for every page at
   once, past and future, matching the "cards/page = white" convention
   established on UserManagement. `.wrapper` is included in the chain (not
   just `.page-content`) because a competing rule with that extra class
   outranks a plain `.page-content` override — see
   reference_icon_rail_sidebar_and_3_themes.md.
   14-Aug (Zain, vs Fiverr reference: "thora dim dim lag raha hai") — canvas
   changed from flat white to a distinct #F7F7F7 so the white --pg-surface
   cards visibly float instead of blending into an all-white page. */
html[data-bs-theme="light"],
html[data-bs-theme="light"]:has(body.tw-shell) {
    background-color: #F7F7F7 !important;
}
html[data-bs-theme="light"] body.tw-shell {
    background-color: #F7F7F7 !important;
}
html[data-bs-theme="light"] body.tw-shell .wrapper,
html[data-bs-theme="light"] body.tw-shell .wrapper .page-content,
html[data-bs-theme="light"] body.tw-shell .wrapper .page-content > .container-fluid,
html[data-bs-theme="light"] body.tw-shell .page-content,
html[data-bs-theme="light"] body.tw-shell .page-content > .container-fluid {
    background: #F7F7F7 !important;
}

/* ============================================================================
   .tw-tile — shared clickable card/tile (icon chip + title + meta line).
   Use for module-launcher-style navigation grids. Reads the tokens above, so
   it auto-adapts to whichever theme is active with zero page-specific CSS.
   ============================================================================ */
.tw-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 14px;
    border-radius: var(--um-radius);
    border: 1px solid var(--pg-border);
    background: var(--pg-surface);
    box-shadow: var(--um-shadow);
    text-decoration: none !important;
    color: inherit;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.tw-tile:hover {
    background: var(--pg-surface-2);
    transform: translateY(-1px);
    text-decoration: none;
}
.tw-tile-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: var(--pg-surface-2);
    border: 1px solid var(--pg-border);
    color: var(--pg-text-2);
    font-size: 18px;
}
.tw-tile-icon.is-primary,
.tw-tile-icon.is-info      { background: var(--um-blue-soft);    color: var(--um-blue); }
.tw-tile-icon.is-warning   { background: var(--um-amber-soft);   color: var(--um-amber); }
.tw-tile-icon.is-success   { background: var(--um-success-soft); color: var(--um-success); }
.tw-tile-icon.is-danger    { background: var(--um-red-soft);     color: var(--um-red); }
.tw-tile-icon.is-secondary { background: var(--pg-surface-2);    color: var(--pg-text-2); }
.tw-tile-title {
    font-size: 14px; font-weight: 600; line-height: 1.3; width: 100%;
    color: var(--pg-text);
}
.tw-tile-meta {
    font-size: 11.5px;
    color: var(--pg-text-3);
    display: inline-flex; align-items: center; gap: 5px;
}
.tw-tile-meta i, .tw-tile-meta iconify-icon { font-size: 12px; }


/* ===================================================================
   28-Jul-2026 — components with NO theme coverage in ANY theme
   ("LEAK 2" of the original audit; the Blue-specific "LEAK 1" mirrors
   were removed 12-Aug-2026 with the Deep Blue theme itself).
   Several .fin-* blocks live in per-page <style> tags with hardcoded
   light colors (#fff / #f8f9fa) and were never given a Dark variant —
   verified: they rendered white in every theme. Handled below with the
   shared --pg-* tokens so both themes are covered from one place
   instead of per page.
   =================================================================== */



/* ---- LEAK 2a: Bootstrap accordions. --bs-accordion-bg resolves to the
   opaque #282F36 under data-bs-theme="dark", so every collapsed section on
   the client Statement rendered as a grey slab on Blue. Token-driven so all
   three themes are covered at once. ---- */
body.tw-shell .page-content .accordion,
body.tw-shell .page-content .accordion-item {
    --bs-accordion-bg: transparent;
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-active-bg: transparent;
    background-color: var(--pg-surface) !important;
    border-color: var(--pg-border) !important;
}
body.tw-shell .page-content .accordion-button,
body.tw-shell .page-content .accordion-body {
    background-color: transparent !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content .accordion-button:not(.collapsed) {
    box-shadow: none !important;
}
body.tw-shell .page-content .accordion-item + .accordion-item {
    border-top-color: var(--pg-border) !important;
}

/* ---- LEAK 2b: .fin-* blocks defined in per-page <style> tags with
   hardcoded light colours. Verified white in Dark, Light and Blue before
   this rule existed, so these are theme-agnostic (token) rules rather than
   Blue-only patches. ---- */
body.tw-shell .fin-kpi-mini,
body.tw-shell .fin-sug-bar {
    background: var(--pg-surface-2) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .fin-var-card,
body.tw-shell .fin-hist-tab {
    background: var(--pg-surface) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .fin-kpi-mini *,
body.tw-shell .fin-var-card *,
body.tw-shell .fin-sug-bar > strong { color: inherit; }
/* Labels/captions inside those tiles stay secondary, values stay primary. */
body.tw-shell .fin-kpi-mini > :first-child,
body.tw-shell .fin-var-card > :first-child { color: var(--pg-text-3) !important; }

/* Active history tab keeps the accent treatment in every theme. */
body.tw-shell .fin-hist-tab.active,
body.tw-shell .fin-hist-tab[aria-selected="true"] {
    background: var(--um-blue-soft) !important;
    color: var(--um-blue) !important;
    border-color: var(--um-blue) !important;
}

/* ---- LEAK 2c: the "Consolidado" chip (.fin-badge.fb-m) is set to a fixed
   #f3f6f9 in larkon-light-palette.css with no theme scope at all, so it was
   a white chip in all three themes. ---- */
body.tw-shell .fin-badge.fb-m {
    background: var(--pg-surface-2) !important;
    color: var(--pg-text-2) !important;
    border-color: var(--pg-border) !important;
}

/* ---- LEAK 2d: bare <pre> (the suggestion output on Proyección semanal)
   renders on a near-black #08090a in dark-based themes, which sat as a black
   box inside a light bar. ---- */
body.tw-shell .page-content pre:not([class*="language-"]):not(.hljs),
body.tw-shell .page-content code:not([class*="language-"]):not(.hljs) {
    background: var(--pg-surface-2) !important;
    color: var(--pg-text-2) !important;
    border-color: var(--pg-border) !important;
}

/* ---- LEAK 2e: pastel status chips (.fin-stat-ok / .fin-stat-warn) are
   declared in page <style> blocks as solid pastels (#e8f8f5 / #fdeeea) with
   dark ink. Those read as bright stickers on both dark-based themes. Swap to
   the translucent accent-soft tokens; Light keeps the original pastels. ---- */
html:not([data-bs-theme="light"]) body.tw-shell .fin-stat-ok {
    background: var(--um-success-soft) !important;
    color: var(--um-success) !important;
}
html:not([data-bs-theme="light"]) body.tw-shell .fin-stat-warn {
    background: var(--um-red-soft) !important;
    color: var(--um-red) !important;
}

/* ---- QT audit: category chips on Clasificación de Clientes. .fb-d/.fb-s/.fb-w read
   `background: var(--fd-s)` + `color: var(--fd)`, but outside the `.fin-card`/`.fin-page`
   scopes the soft `-s` token resolves to the SOLID accent — so background equalled the
   ink and "Riesgoso" measured 1.00:1, i.e. completely invisible. Pin both sides to the
   shared accent tokens so the pair can never collapse again.

   Deliberately NOT theme-scoped: --um-red/--um-red-soft (and the success/amber
   twins) are already redefined per theme in the three blocks at the top of this
   file, so one rule gives Dark, Blue AND Light their own correct pair. An earlier
   pass scoped this to `html:not([data-bs-theme="light"])`, which left Light on
   larkon-light-palette.css's `body.tw-shell .fin-badge.fb-*` — that rule reads the
   page's private `--fd-s`/`--fd` and measured 3.93 / 2.94 / 3.26, all under AA for
   11px text. The leading bare `html` is what beats that rule: identical class count
   (3), so it comes down to element count (2 vs 1) — source order alone would also
   win (this file loads after larkon-light-palette.css in _HeadCSS.cshtml) but the
   specificity bump keeps it from depending on link order.
   Measured on the REAL page (/FinanzasExportacion/Clasificacion, chip inside
   `.fin-decision-banner`), fb-d / fb-s / fb-w — Dark 4.83 / 7.61 / 4.77,
   Blue 4.83 / 7.32 / 6.30, Light 4.56 / 4.56 / 5.38. The Light amber and Blue
   opacity follow-ups right below are what carry Light's fb-w and all of Blue.
   Measure on the real page, not an isolated repro: a chip on a neutral card
   reads ~1 point higher than the same chip inside a tinted banner. ---- */
html body.tw-shell .fin-badge.fb-d {
    background: var(--um-red-soft) !important;
    color: var(--um-red) !important;
}
html body.tw-shell .fin-badge.fb-s {
    background: var(--um-success-soft) !important;
    color: var(--um-success) !important;
}
html body.tw-shell .fin-badge.fb-w {
    background: var(--um-amber-soft) !important;
    color: var(--um-amber) !important;
}

/* Light is the one theme where the --um-amber pair is too close to carry 11px
   text: #9a7222 on #f5edd8 measures 3.74:1. Darkening --um-amber itself would
   move it everywhere it is used (tile icons, KPI chips, the ~17 amber+white-ink
   pages still on the audit backlog), so this only re-inks THIS chip — #7d5a12
   on the same soft amber = 5.38:1. Dark and Blue already clear AA and are left
   alone. ---- */
html[data-bs-theme="light"] body.tw-shell .fin-badge.fb-w {
    color: #7d5a12 !important;
}

/* ===================================================================
   28-Jul-2026 — findings from the full 251-page sweep.
   Everything below was measured as broken in Dark AND Blue (and in the
   Choices case, in Light too), not inferred from reading the markup.
   =================================================================== */

/* ---- Choices.js searchable dropdowns. The vendor stylesheet hardcodes
   #f9f9f9 and was never themed, so on every Add/Edit form the searchable
   selects rendered as white boxes sitting next to correctly-themed dark
   .form-control inputs (measured rgb(249,249,249) in all three themes).
   Mirror .form-control exactly so the two read as one control. ---- */
body.tw-shell .choices__inner {
    background: var(--pg-surface-2) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
}
/* Light's .form-control is pure white (not --pg-surface-2), so match that. */
html[data-bs-theme="light"] body.tw-shell .choices__inner,
html[data-bs-theme="light"] body.tw-shell .choices__list--dropdown,
html[data-bs-theme="light"] body.tw-shell .choices__list[aria-expanded] {
    background: #ffffff !important;
}
body.tw-shell .choices.is-focused .choices__inner,
body.tw-shell .choices.is-open .choices__inner {
    border-color: var(--um-blue) !important;
}
body.tw-shell .choices__list--dropdown,
body.tw-shell .choices__list[aria-expanded] {
    background: var(--pg-surface-2) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .choices__list--dropdown .choices__item,
body.tw-shell .choices__list[aria-expanded] .choices__item {
    color: var(--pg-text) !important;
}
body.tw-shell .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.tw-shell .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--um-blue-soft) !important;
    color: var(--um-blue) !important;
}
/* Placeholder was 3.05:1 against the white box — below AA even before the
   theme mismatch. --pg-text-3 is the established muted token. */
body.tw-shell .choices__placeholder { color: var(--pg-text-3) !important; opacity: 1 !important; }
body.tw-shell .choices__input { background: transparent !important; color: var(--pg-text) !important; }
/* Multi-select chips */
body.tw-shell .choices__list--multiple .choices__item {
    background: var(--um-blue-soft) !important;
    border-color: var(--um-blue) !important;
    color: var(--um-blue) !important;
}

/* ---- Hardcoded light bars/cells in page <style> blocks ----
   .fps-track   → background:#eef0f3 (RecuperacionFinanciera.cshtml:137)
   .fin-range-cell → background:#fafbfc (SimulacionRentabilidad.cshtml:579)
   Both painted a white strip across a dark card. */
body.tw-shell .fps-track,
body.tw-shell .fin-range-cell {
    background: var(--pg-surface-2) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
}
html[data-bs-theme="light"] body.tw-shell .fps-track { background: #eef0f3 !important; }
html[data-bs-theme="light"] body.tw-shell .fin-range-cell { background: #fafbfc !important; }


/* ============================================================================
   WCAG ink fixes — 12-Aug-2026 (July-28 audit §4.1 / §4.4).
   ----------------------------------------------------------------------------
   1. AMBER: Bootstrap paints white ink on --bs-warning #f9b931 → 1.45:1,
      unreadable on ~17 pages. The app's own correct pattern (StockDashboard
      "Low Stock" badge) is amber + dark ink #1f2d3d = 8.0:1. One rule makes
      every warning button/badge follow that proven pattern, all three themes.
   2. GREEN: --bs-success #22c55e + white ink = 2.28:1 on ~85 pages (Excel
      buttons, "Activo" badges). Fix = keep the brand green, flip the ink to
      deep green (#04240f ≈ 7.5:1). LIGHT theme's .btn-success is EXCLUDED:
      larkon-light-palette.css gives it the client-approved glossy-jade
      gradient (reference UI kit) — that design is not ours to change, so the
      button rule is scoped to dark+blue where only Bootstrap's default runs.
      Badges have no such approved treatment → re-inked in all themes.
   3. GREY: finance views hardcode color:#495057 on labels/legends that sit on
      THEMED dark cards (2.08:1). Only the no-own-background text elements are
      re-inked (light-chip elements like .atag-*, .fin-btn-l keep their
      hardcoded light bg + grey pair, which is already readable).
   `.text-white` children are overridden too — both rules are !important, so
   specificity decides, and these selectors outrank the (0,1,0) utility.
   ============================================================================ */

/* 1 ─ Amber ink, all themes (matches the app's own Low-Stock pattern). */
html body.tw-shell .btn-warning,
html body.tw-shell .btn-warning:hover,
html body.tw-shell .btn-warning:focus,
html body.tw-shell .btn-warning:active,
html body.tw-shell .btn-warning:disabled,
html body.tw-shell .btn-warning .text-white,
html body.tw-shell .badge.bg-warning,
html body.tw-shell .badge.bg-warning.text-white,
html body.tw-shell .bg-warning,
html body.tw-shell .bg-warning > .text-white,
html body.tw-shell .bg-warning .text-white {
    color: #1f2d3d !important;
}

/* 2a ─ Green buttons, dark + blue only (Light keeps the glossy-jade design).
   POSITIVE scoping on purpose: bsFor = {dark:'dark', blue:'dark', light:'light'},
   so [data-bs-theme="dark"] covers exactly the two dark themes; the bare
   :not([data-bs-theme]) variant covers the pre-toggle initial state. A
   :not([data-bs-theme="light"]) version measured as leaking into Light on the
   live site — don't reintroduce it. */
html[data-bs-theme="dark"] body.tw-shell .btn-success,
html[data-bs-theme="dark"] body.tw-shell .btn-success:hover,
html[data-bs-theme="dark"] body.tw-shell .btn-success:focus,
html[data-bs-theme="dark"] body.tw-shell .btn-success:active,
html[data-bs-theme="dark"] body.tw-shell .btn-success:disabled,
html[data-bs-theme="dark"] body.tw-shell .btn-success .text-white,
html:not([data-bs-theme]) body.tw-shell .btn-success,
html:not([data-bs-theme]) body.tw-shell .btn-success .text-white {
    color: #04240f !important;
}

/* 2b ─ Green badges/fills, all themes ("Activo" etc.). Exact-class only —
   .bg-success-subtle already pairs with dark text and is untouched. */
html body.tw-shell .badge.bg-success,
html body.tw-shell .badge.bg-success.text-white,
html body.tw-shell .bg-success > .text-white,
html body.tw-shell .bg-success .text-white {
    color: #04240f !important;
}

/* 3 ─ Hardcoded #495057 on themed dark surfaces → readable muted token.
   Dark + Blue only; on Light these sit on light surfaces where the original
   grey is fine (and --pg-text-2 there is nearly the same value anyway). */
html[data-bs-theme="dark"] body.tw-shell .alert-card-desc,
html[data-bs-theme="dark"] body.tw-shell .pressure-label,
html[data-bs-theme="dark"] body.tw-shell .kpi-pct,
html[data-bs-theme="dark"] body.tw-shell .fin-aging-pct,
html[data-bs-theme="dark"] body.tw-shell .fin-label,
html[data-bs-theme="dark"] body.tw-shell .fps-leg,
html[data-bs-theme="dark"] body.tw-shell .fin-breadcrumb span,
html:not([data-bs-theme]) body.tw-shell .alert-card-desc,
html:not([data-bs-theme]) body.tw-shell .pressure-label,
html:not([data-bs-theme]) body.tw-shell .kpi-pct,
html:not([data-bs-theme]) body.tw-shell .fin-aging-pct,
html:not([data-bs-theme]) body.tw-shell .fin-label,
html:not([data-bs-theme]) body.tw-shell .fps-leg,
html:not([data-bs-theme]) body.tw-shell .fin-breadcrumb span {
    color: var(--pg-text-2) !important;
}

/* ============================================================================
   FullCalendar on dark themes (12-Aug-2026, audit §4.3/§4.5 MarketingPlanner).
   The vendor ships light-only day headers (white TH, near-white cushion text
   → 1.2:1 on our dark shell). Adapt just the header + borders to the tokens;
   Light theme is untouched (vendor default is correct there).
   ============================================================================ */
html[data-bs-theme="dark"] body.tw-shell .fc .fc-col-header-cell,
html:not([data-bs-theme]) body.tw-shell .fc .fc-col-header-cell {
    background: var(--pg-surface-2) !important;
}
html[data-bs-theme="dark"] body.tw-shell .fc .fc-col-header-cell-cushion,
html:not([data-bs-theme]) body.tw-shell .fc .fc-col-header-cell-cushion {
    color: var(--pg-text) !important;
}
html[data-bs-theme="dark"] body.tw-shell .fc-theme-standard td,
html[data-bs-theme="dark"] body.tw-shell .fc-theme-standard th,
html[data-bs-theme="dark"] body.tw-shell .fc-theme-standard .fc-scrollgrid,
html:not([data-bs-theme]) body.tw-shell .fc-theme-standard td,
html:not([data-bs-theme]) body.tw-shell .fc-theme-standard th,
html:not([data-bs-theme]) body.tw-shell .fc-theme-standard .fc-scrollgrid {
    border-color: var(--pg-border) !important;
}

/* ============================================================================
   Shared page components — 12-Aug-2026 (UI consolidation Phase 4).
   ----------------------------------------------------------------------------
   The building blocks every list/dashboard page needs, token-driven so they
   are correct in both themes AND follow the tenant BrandAccentColor with no
   page CSS at all. Modeled on UserManagement (the reference implementation).
   Markup contract is deliberately tiny:

     <div class="pg-toolbar">
         <input class="pg-search" type="text" placeholder="Buscar…">
         <div class="pg-toolbar-actions"> …buttons… </div>
     </div>
     <div class="pg-filter-chips">
         <button class="pg-chip active">Todos</button>
         <button class="pg-chip">Abiertos</button>
     </div>
     <div class="pg-kpi-strip">
         <div class="pg-kpi"><div class="pg-kpi-num">128</div><div class="pg-kpi-lbl">Total</div></div>
     </div>
     <div class="pg-table-card"><div class="pg-table-scroll"> <table>…</table> </div></div>
   ============================================================================ */

/* ── Toolbar: search + actions row ── */
body.tw-shell .pg-toolbar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-bottom: 14px;
}
body.tw-shell .pg-toolbar .pg-search {
    flex: 1 1 260px; max-width: 420px;
    background: var(--pg-surface-2); border: 1px solid var(--pg-border);
    color: var(--pg-text); border-radius: 10px;
    padding: 8px 12px; font-size: 13px; outline: none;
}
body.tw-shell .pg-toolbar .pg-search:focus { border-color: var(--um-accent); }
body.tw-shell .pg-toolbar .pg-search::placeholder { color: var(--pg-text-3); }
body.tw-shell .pg-toolbar-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* ── Filter chips ── */
body.tw-shell .pg-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
body.tw-shell .pg-chip {
    background: var(--pg-surface-2); border: 1px solid var(--pg-border);
    color: var(--pg-text-2); border-radius: 999px;
    padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
body.tw-shell .pg-chip:hover { color: var(--pg-text); border-color: var(--um-accent); }
body.tw-shell .pg-chip.active {
    background: var(--um-accent-soft); color: var(--um-accent-ink);
    border-color: var(--um-accent);
}

/* ── KPI strip ── */
body.tw-shell .pg-kpi-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px; overflow: hidden;
    background: var(--pg-border);
    border: 1px solid var(--pg-border); border-radius: var(--um-radius, 14px);
    box-shadow: var(--um-shadow); margin-bottom: 16px;
}
body.tw-shell .pg-kpi { background: var(--pg-surface); padding: 14px 16px; }
body.tw-shell .pg-kpi-num { font-size: 22px; font-weight: 800; color: var(--pg-text); line-height: 1.15; }
body.tw-shell .pg-kpi-num.accent { color: var(--um-accent-ink); }
body.tw-shell .pg-kpi-lbl {
    font-size: 10.5px; font-weight: 600; color: var(--pg-text-3);
    text-transform: uppercase; letter-spacing: .06em; margin-top: 3px;
}

/* ── Table card: surface + sticky header + in-card scroll ── */
body.tw-shell .pg-table-card {
    background: var(--pg-surface); border: 1px solid var(--pg-border);
    border-radius: var(--um-radius, 14px); box-shadow: var(--um-shadow);
    overflow: hidden;
}
body.tw-shell .pg-table-scroll { overflow: auto; max-height: 68vh; }
body.tw-shell .pg-table-card table { margin: 0; width: 100%; }
body.tw-shell .pg-table-card thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--pg-surface-2); color: var(--pg-text-3);
    font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--pg-border); padding: 10px 12px; white-space: nowrap;
}
body.tw-shell .pg-table-card tbody td {
    color: var(--pg-text); border-bottom: 1px solid var(--pg-border);
    padding: 9px 12px; font-size: 13px; vertical-align: middle;
}
body.tw-shell .pg-table-card tbody tr:hover td { background: var(--pg-surface-2); }