/* ============================================================================
 * Tailwind-shell Page skin — Bootstrap component-level overrides
 * ----------------------------------------------------------------------------
 * Scoped to `body.tw-shell` so it ONLY applies under the modern Linear shell.
 * Re-paints every common Bootstrap building block (card, table, form-control,
 * badge, dropdown, alert, button) with the Linear dark palette so legacy list
 * / detail / form pages inherit the new theme without per-page changes.
 *
 * Companions: tw-shell-skin.css (shell), tw-dashboard-skin.css (Dashboard),
 *             tw-page-skin.css (this file — generic pages).
 * 12-May-2026.
 * ============================================================================ */

body.tw-shell {
    /* DARK theme tokens (default). Light tokens at the bottom of this block. */
    --pg-bg:          #08090a;
    --pg-surface:     #1a1a1f;
    --pg-surface-2:   #23232a;
    --pg-elev:        #2a2a2e;
    --pg-border:      #26262b;
    --pg-border-2:    #36363c;
    --pg-text:        #e6e6e6;
    --pg-text-2:      #b4b4b4;
    --pg-text-3:      #8a8a93;
    --pg-text-4:      #6e6e76;
    --pg-accent:      #3b82f6;
    --pg-accent-2:    #60a5fa;
    --pg-success:     #4ecb7e;
    --pg-warning:     #f5a524;
    --pg-danger:      #e54d2e;
    --pg-info:        #38bdf8;
    --pg-row-hover:   rgba(255, 255, 255, 0.025);
    --pg-row-divider: rgba(255, 255, 255, 0.04);
    --pg-card-sheen:  rgba(255, 255, 255, 0.018);
}

/* ── LIGHT THEME ───────────────────────────────────────────────────────
   Toggles via the topbar moon button which sets html[data-bs-theme="light"].
   All `--pg-*` variables flip to light-theme equivalents; everything that
   reads from them (cards, tables, forms, badges, etc.) auto-updates. */
html[data-bs-theme="light"] body.tw-shell,
html:not(.dark)[data-bs-theme="light"] body.tw-shell {
    --pg-bg:          #f4f4f5;   /* page canvas */
    --pg-surface:     #ffffff;   /* card surface */
    --pg-surface-2:   #fafafa;   /* lifted input/hover surface */
    --pg-elev:        #f4f4f5;   /* chip / track */
    --pg-border:      #e4e4e7;   /* hairline */
    --pg-border-2:    #d4d4d8;   /* hover hairline */
    --pg-text:        #18181b;   /* primary text */
    --pg-text-2:      #3f3f46;   /* secondary text */
    --pg-text-3:      #71717a;   /* tertiary text */
    --pg-text-4:      #a1a1aa;   /* placeholder / label */
    --pg-accent:      #3b82f6;
    --pg-accent-2:    #1d4ed8;
    --pg-success:     #16a34a;
    --pg-warning:     #d97706;
    --pg-danger:      #dc2626;
    --pg-info:        #0284c7;
    --pg-row-hover:   rgba(0, 0, 0, 0.025);
    --pg-row-divider: rgba(0, 0, 0, 0.06);
    --pg-card-sheen:  rgba(0, 0, 0, 0.0);

    color-scheme: light;
}

/* Light-theme global background. */
html[data-bs-theme="light"] body.tw-shell {
    background-color: #f4f4f5 !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .page-content,
html[data-bs-theme="light"] body.tw-shell .page-content > .container-fluid,
html[data-bs-theme="light"] body.tw-shell .wrapper,
html[data-bs-theme="light"] body.tw-shell #tw-main {
    background-color: #f4f4f5 !important;
}

/* Default `.html` was forced #08090a for first-paint flash prevention.
   Override it when light theme is active. */
html[data-bs-theme="light"] {
    background-color: #f4f4f5 !important;
}

/* Light-theme override for the dark page-canvas paint in `tw-shell-skin.css`. */
html[data-bs-theme="light"] body.tw-shell {
    --tw-bg:          #f4f4f5;
    --tw-surface:     #ffffff;
    --tw-elev:        #f4f4f5;
    --tw-border:      #e4e4e7;
    --tw-text:        #18181b;
    --tw-text-dim:    #3f3f46;
    --tw-text-faint:  #a1a1aa;
}

/* ── Cards (generic Bootstrap .card) — compact Linear refinement. ─────── */
body.tw-shell .page-content .card {
    background: var(--pg-surface) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 60px) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 10px !important;
    color: var(--pg-text) !important;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.02) inset, 0 1px 2px 0 rgba(0,0,0,0.25) !important;
    transition: border-color .15s ease, transform .15s ease;
}
html body.tw-shell .page-content .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pg-border) !important;
    padding: 10px 14px !important;
    color: var(--pg-text) !important;
    min-height: 0 !important;
}
html body.tw-shell .page-content .card-header h1,
html body.tw-shell .page-content .card-header h2,
html body.tw-shell .page-content .card-header h3,
html body.tw-shell .page-content .card-header h4,
html body.tw-shell .page-content .card-header h5,
html body.tw-shell .page-content .card-header h6,
html body.tw-shell .page-content .card-header .card-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pg-text) !important;
    letter-spacing: -0.005em !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}
html body.tw-shell .page-content .card-header iconify-icon {
    font-size: 14px !important;
}
body.tw-shell .page-content .card-body { color: var(--pg-text) !important; padding: 10px 12px !important; }
/* Tighten the gap between filter row and the table beneath it. */
body.tw-shell .page-content .card-body .row.g-3.mb-3 { margin-bottom: 10px !important; }
body.tw-shell .page-content .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--pg-border) !important;
    color: var(--pg-text-3) !important;
    padding: 10px 14px !important;
}
body.tw-shell .page-content .card-title {
    color: var(--pg-text) !important;
    font-weight: 600 !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 14px !important;
    letter-spacing: -0.005em;
}

/* ── Summary tiles (KPI-style cards at top of list pages) ─────────────── */
/* Pattern: `<div class="card"><div class="card-body">[avatar-md + h4 + p.fs-22]</div></div>` */
body.tw-shell .page-content a.text-reset .card,
body.tw-shell .page-content a.text-decoration-none .card { cursor: pointer; }
body.tw-shell .page-content a.text-reset .card:hover,
body.tw-shell .page-content a.text-decoration-none .card:hover {
    border-color: var(--pg-border-2) !important;
    transform: translateY(-1px);
}
body.tw-shell .page-content .card .avatar-md {
    width: 28px !important;
    height: 28px !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.tw-shell .page-content .card .avatar-md .avatar-title,
body.tw-shell .page-content .card .avatar-md iconify-icon {
    font-size: 14px !important;
}
/* Summary-tile title (h4 inside avatar+title block) — Space Grotesk, compact. */
body.tw-shell .page-content .card .card-body h4,
body.tw-shell .page-content .card .card-body h4.mb-0 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--pg-text) !important;
    margin: 0 !important;
    letter-spacing: -0.005em;
    line-height: 1.2;
}
body.tw-shell .page-content .card .card-body h4 + p {
    font-size: 10px !important;
    color: var(--pg-text-4) !important;
    margin: 1px 0 0 !important;
    line-height: 1.2;
}
/* Summary count (the big number) — small but still readable. */
body.tw-shell .page-content .card .card-body p.fs-22 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--pg-text) !important;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
}

/* ── List-page summary tiles using `.dashboard-hstat` pattern ─────────────
   (PurchaseOrders, SalesOrders, Items, Bookings, etc.) — re-align with the
   BusinessPartners summary cards (compact, monochrome icon chip). */
body.tw-shell .page-content:not(:has(.dashboard-home > .dashboard-hero-row)) .dashboard-hstat,
body.tw-shell .page-content .dashboard-home:not(.is-actual-dashboard) .dashboard-hstat {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    transition: border-color .15s, transform .15s;
}
body.tw-shell .page-content .dashboard-hstat .card-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px !important;
}
body.tw-shell .page-content .dashboard-hstat-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 8px !important;
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text-2) !important;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
body.tw-shell .page-content .dashboard-hstat-icon iconify-icon,
body.tw-shell .page-content .dashboard-hstat-icon .iconify {
    font-size: 16px !important;
}
body.tw-shell .page-content .dashboard-hstat-icon--success,
body.tw-shell .page-content .dashboard-hstat-icon.dashboard-hstat-icon--success { color: var(--pg-success) !important; }
body.tw-shell .page-content .dashboard-hstat-icon--danger  { color: var(--pg-danger)  !important; }
body.tw-shell .page-content .dashboard-hstat-icon--warning { color: var(--pg-warning) !important; }
body.tw-shell .page-content .dashboard-hstat-icon--info    { color: var(--pg-info)    !important; }
body.tw-shell .page-content .dashboard-hstat-icon--primary { color: var(--pg-accent)  !important; }
body.tw-shell .page-content .dashboard-hstat-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--pg-text-4) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}
body.tw-shell .page-content .dashboard-hstat-value {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--pg-text) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
    font-variant-numeric: tabular-nums;
}
body.tw-shell .page-content .dashboard-hstat-badge {
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text-2) !important;
    white-space: nowrap;
}
body.tw-shell .page-content .dashboard-hstat-badge--success { background: rgba(78,203,126,.14)  !important; color: #6fe3a0 !important; border-color: transparent !important; }
body.tw-shell .page-content .dashboard-hstat-badge--danger  { background: rgba(229,77,46,.14)   !important; color: #f37a5d !important; border-color: transparent !important; }
body.tw-shell .page-content .dashboard-hstat-badge--warning { background: rgba(245,165,36,.14)  !important; color: #f7c163 !important; border-color: transparent !important; }
body.tw-shell .page-content .dashboard-hstat-badge--info    { background: rgba(56,189,248,.14)  !important; color: #7cd2f7 !important; border-color: transparent !important; }

/* ── Dashboard-welcome banner used by list pages — compact restyle ─────── */
body.tw-shell .page-content .dashboard-welcome {
    margin: 4px 4px 14px !important;
    padding: 0 !important;
    background: transparent !important;
}
body.tw-shell .page-content .dashboard-welcome-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: clamp(20px, 1.8vw, 24px) !important;
    font-weight: 700 !important;
    color: var(--pg-text) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    margin: 0 0 4px !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}
body.tw-shell .page-content .dashboard-welcome-meta {
    font-size: 12.5px !important;
    color: var(--pg-text-3) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* ── Panel cards used for filters/wrappers (dashboard-panel-card) ──────── */
body.tw-shell .page-content .dashboard-panel-card {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body.tw-shell .page-content .dashboard-panel-card .card-header {
    border-bottom: 1px solid var(--pg-border) !important;
    padding: 10px 14px !important;
    background: transparent !important;
}
body.tw-shell .page-content .dashboard-panel-card .card-header h5,
body.tw-shell .page-content .dashboard-panel-card .card-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pg-text) !important;
    margin: 0 !important;
}
body.tw-shell .page-content .dashboard-chart-hero-icon {
    width: 28px !important;
    height: 28px !important;
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 7px !important;
    display: inline-flex; align-items: center; justify-content: center;
}
body.tw-shell .page-content .dashboard-chart-hero-icon iconify-icon {
    font-size: 14px !important;
    color: var(--pg-accent) !important;
}

/* ── Table cards (dashboard-table-card) ────────────────────────────────── */
body.tw-shell .page-content .dashboard-table-card {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
body.tw-shell .page-content .dashboard-table-card .card-header {
    border-bottom: 1px solid var(--pg-border) !important;
    padding: 10px 14px !important;
    background: transparent !important;
}
body.tw-shell .page-content .dashboard-table-card .card-title {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--pg-text) !important;
    margin: 0 !important;
}
body.tw-shell .page-content .dashboard-table-card-icon {
    width: 28px !important;
    height: 28px !important;
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 7px !important;
    display: inline-flex; align-items: center; justify-content: center;
}
body.tw-shell .page-content .dashboard-table-card-icon iconify-icon {
    font-size: 14px !important;
    color: var(--pg-accent) !important;
}
/* Tighten the gap between the icon-title block and the count. */
body.tw-shell .page-content .card .card-body .mb-3 {
    margin-bottom: 8px !important;
}
/* Override fs-32 → smaller for icon in avatar-md */
body.tw-shell .page-content .card .card-body iconify-icon.fs-32,
body.tw-shell .page-content .card .card-body .fs-32 {
    font-size: 14px !important;
}
/* Removes ".border-primary"/"border-success" etc. on summary cards — replaced
   below by a Linear-style segmented accent on active state. */
body.tw-shell .page-content .card.border-primary,
body.tw-shell .page-content .card.border-success,
body.tw-shell .page-content .card.border-warning,
body.tw-shell .page-content .card.border-info,
body.tw-shell .page-content .card.border-danger { border-color: var(--pg-border) !important; }
body.tw-shell .page-content .card.border-2 {
    border-color: var(--pg-accent) !important;
    box-shadow: 0 0 0 1px var(--pg-accent) inset, 0 8px 24px -10px rgba(59, 130, 246,.35) !important;
}

/* ── Tables ───────────────────────────────────────────────────────────── */
/* The .table-responsive wrapper MUST allow horizontal scroll so wide tables
   (11+ columns) don't get clipped at narrower viewports. */
body.tw-shell .page-content .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
body.tw-shell .page-content .table-responsive::-webkit-scrollbar {
    height: 8px;
}
body.tw-shell .page-content .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}
body.tw-shell .page-content .table-responsive::-webkit-scrollbar-thumb {
    background: var(--pg-elev);
    border-radius: 4px;
}
body.tw-shell .page-content .table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--pg-border-2);
}
body.tw-shell .page-content .table,
body.tw-shell .page-content .table > :not(caption) > * > * {
    --bs-table-bg: transparent !important;
    --bs-table-color: inherit !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content .table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 !important;
    font-size: 11px;
}
body.tw-shell .page-content .table thead,
body.tw-shell .page-content .table thead tr {
    background: transparent !important;
}
body.tw-shell .page-content .table thead th {
    background: transparent !important;
    color: var(--pg-text-4) !important;
    font-weight: 500 !important;
    font-size: 11px !important;            /* matches body row size */
    text-transform: uppercase;
    letter-spacing: 0.04em;                /* tighter — no wrap on short headers */
    border: 0 !important;
    border-bottom: 1px solid var(--pg-border) !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;        /* forced — keep on one line */
    text-align: left;
    vertical-align: middle;
}
body.tw-shell .page-content .table tbody td {
    background: transparent !important;
    color: var(--pg-text-2) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
    padding: 8px 10px !important;
    vertical-align: middle;
    font-size: 11px;                       /* matches column header size */
    line-height: 1.4;
}
body.tw-shell .page-content .table tbody tr {
    transition: background-color .12s ease;
}
body.tw-shell .page-content .table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.025) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content .table tbody tr:last-child td { border-bottom: 0 !important; }
body.tw-shell .page-content .table a.text-body,
body.tw-shell .page-content .table .text-body { color: var(--pg-text) !important; }
body.tw-shell .page-content .table a {
    color: var(--pg-accent-2) !important;
    text-decoration: none;
}
body.tw-shell .page-content .table a.text-body:hover,
body.tw-shell .page-content .table a:hover { color: var(--pg-accent-2) !important; }
body.tw-shell .page-content .table h6,
body.tw-shell .page-content .table strong { color: var(--pg-text) !important; }

/* ── Form controls — input / select / textarea ───────────────────────── */
body.tw-shell .page-content .form-control,
body.tw-shell .page-content .form-select,
body.tw-shell .page-content textarea.form-control,
body.tw-shell .page-content .input-group .form-control {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
    font-size: 13px;
    border-radius: 6px;
}
body.tw-shell .page-content .form-control::placeholder { color: var(--pg-text-4) !important; }
body.tw-shell .page-content .form-control:focus,
body.tw-shell .page-content .form-select:focus {
    background: var(--pg-surface-2) !important;
    border-color: var(--pg-accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content .form-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--pg-text-3) 50%),
                      linear-gradient(135deg, var(--pg-text-3) 50%, transparent 50%) !important;
    background-position: calc(100% - 16px) 14px, calc(100% - 11px) 14px !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    padding-right: 32px;
}
body.tw-shell .page-content .form-label {
    color: var(--pg-text-2) !important;
    font-size: 12px;
    font-weight: 500;
}
/* Search box — input with an absolutely-positioned magnifier glyph on the left. */
body.tw-shell .page-content .search-box {
    position: relative !important;
    display: block;
}
body.tw-shell .page-content .search-box .form-control {
    padding-left: 32px !important;
    height: 32px;
    font-size: 11px;
}
body.tw-shell .page-content .search-box .search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--pg-text-3) !important;
    font-size: 13px !important;
    pointer-events: none;
    z-index: 2;
    margin: 0 !important;
}

/* Filter row controls — equal 32 px height across inputs, selects and buttons. */
body.tw-shell .page-content .form-control,
body.tw-shell .page-content .form-select {
    height: 32px;
    padding: 0 10px;
    line-height: 1.4;
    font-size: 11px;
}
body.tw-shell .page-content textarea.form-control { height: auto; padding: 7px 10px; font-size: 11px; }
body.tw-shell .page-content .row.g-3.mb-3 .btn,
body.tw-shell .page-content .row.g-3 > [class*="col-"] > .btn {
    height: 32px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
}
body.tw-shell .page-content .form-check-input {
    background-color: var(--pg-surface-2) !important;
    border-color: var(--pg-border-2) !important;
}
body.tw-shell .page-content .form-check-input:checked {
    background-color: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
}

/* ── Buttons — compact 11 px, consistent with table & filter sizing. ───── */
html body.tw-shell .page-content .btn,
html body.tw-shell .page-content a.btn,
html body.tw-shell .page-content button.btn {
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
}
html body.tw-shell .page-content .btn-sm {
    font-size: 11px !important;
    padding: 5px 10px !important;
}
html body.tw-shell .page-content .btn iconify-icon,
html body.tw-shell .page-content .btn i.bx,
html body.tw-shell .page-content .btn i {
    font-size: 13px !important;
}
/* Card-header action buttons (PDF / Print / Más opciones / Import / Add) */
html body.tw-shell .page-content .card-header .btn,
html body.tw-shell .page-content .card-header a.btn,
html body.tw-shell .page-content .card-header button.btn,
html body.tw-shell .page-content .card-header .dropdown-toggle {
    height: 30px !important;
    padding: 0 12px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
}
html body.tw-shell .page-content .card-header .btn iconify-icon,
html body.tw-shell .page-content .card-header .btn i {
    font-size: 13px !important;
}
body.tw-shell .page-content .btn-primary {
    background: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
}
body.tw-shell .page-content .btn-primary:hover {
    background: var(--pg-accent-2) !important;
    border-color: var(--pg-accent-2) !important;
}
body.tw-shell .page-content .btn-secondary {
    background: var(--pg-surface-2) !important;
    border-color: var(--pg-border-2) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content .btn-secondary:hover {
    background: var(--pg-elev) !important;
    border-color: #4a4a52 !important;
    color: #fff !important;
}
body.tw-shell .page-content .btn-light,
body.tw-shell .page-content .btn-soft-secondary {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text-2) !important;
}
body.tw-shell .page-content .btn-light:hover,
body.tw-shell .page-content .btn-soft-secondary:hover {
    background: var(--pg-elev) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content .btn-soft-primary {
    background: rgba(59, 130, 246, 0.12) !important;
    color: var(--pg-accent-2) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}
body.tw-shell .page-content .btn-soft-primary:hover {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #fff !important;
}
body.tw-shell .page-content .btn-soft-success {
    background: rgba(78, 203, 126, 0.12) !important;
    color: #6fe3a0 !important;
    border: 1px solid rgba(78, 203, 126, 0.25) !important;
}
body.tw-shell .page-content .btn-soft-warning {
    background: rgba(245, 165, 36, 0.12) !important;
    color: #f7c163 !important;
    border: 1px solid rgba(245, 165, 36, 0.25) !important;
}
body.tw-shell .page-content .btn-soft-info {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #7cd2f7 !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}
body.tw-shell .page-content .btn-soft-danger {
    background: rgba(229, 77, 46, 0.12) !important;
    color: #f37a5d !important;
    border: 1px solid rgba(229, 77, 46, 0.25) !important;
}
body.tw-shell .page-content .btn-outline-primary {
    color: var(--pg-text) !important;
    border-color: var(--pg-border-2) !important;
    background: transparent !important;
}
body.tw-shell .page-content .btn-outline-primary:hover {
    background: var(--pg-elev) !important;
    color: #fff !important;
}
body.tw-shell .page-content .btn-outline-secondary {
    color: var(--pg-text-2) !important;
    border-color: var(--pg-border) !important;
    background: transparent !important;
}
body.tw-shell .page-content .btn-outline-secondary:hover {
    background: var(--pg-elev) !important;
    color: var(--pg-text) !important;
    border-color: var(--pg-border-2) !important;
}

/* ── Badges (flat soft pills, no border) ─────────────────────────────── */
body.tw-shell .page-content .badge {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    border: 0 !important;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.4;
}
body.tw-shell .page-content .bg-success-subtle,
body.tw-shell .page-content .badge.bg-success-subtle { background: rgba(78,203,126,.14) !important; color: #6fe3a0 !important; }
body.tw-shell .page-content .bg-warning-subtle,
body.tw-shell .page-content .badge.bg-warning-subtle { background: rgba(245,165,36,.14) !important; color: #f7c163 !important; }
body.tw-shell .page-content .bg-info-subtle,
body.tw-shell .page-content .badge.bg-info-subtle    { background: rgba(56,189,248,.14) !important; color: #7cd2f7 !important; }
body.tw-shell .page-content .bg-danger-subtle,
body.tw-shell .page-content .badge.bg-danger-subtle  { background: rgba(229,77,46,.14)  !important; color: #f37a5d !important; }
body.tw-shell .page-content .bg-primary-subtle,
body.tw-shell .page-content .badge.bg-primary-subtle { background: rgba(59, 130, 246,.14) !important; color: #b3b8f1 !important; }
body.tw-shell .page-content .bg-secondary-subtle,
body.tw-shell .page-content .badge.bg-secondary-subtle { background: rgba(255,255,255,.06) !important; color: var(--pg-text-2) !important; }
body.tw-shell .page-content .bg-light-subtle,
body.tw-shell .page-content .badge.bg-light-subtle  { background: rgba(255,255,255,.06) !important; color: var(--pg-text-2) !important; }

body.tw-shell .page-content .text-success { color: #6fe3a0 !important; }
body.tw-shell .page-content .text-warning { color: #f7c163 !important; }
body.tw-shell .page-content .text-info    { color: #7cd2f7 !important; }
body.tw-shell .page-content .text-danger  { color: #f37a5d !important; }
body.tw-shell .page-content .text-primary { color: var(--pg-accent-2) !important; }
body.tw-shell .page-content .text-muted,
body.tw-shell .page-content .text-body-secondary { color: var(--pg-text-3) !important; }
body.tw-shell .page-content .text-dark,
body.tw-shell .page-content .text-body { color: var(--pg-text) !important; }

/* Soft icon backgrounds (avatar-md helpers used widely on lists) */
body.tw-shell .page-content .bg-primary.bg-opacity-10 { background: rgba(59, 130, 246,.14) !important; }
body.tw-shell .page-content .bg-success.bg-opacity-10 { background: rgba(78,203,126,.14) !important; }
body.tw-shell .page-content .bg-warning.bg-opacity-10 { background: rgba(245,165,36,.14) !important; }
body.tw-shell .page-content .bg-info.bg-opacity-10    { background: rgba(56,189,248,.14) !important; }
body.tw-shell .page-content .bg-danger.bg-opacity-10  { background: rgba(229,77,46,.14)  !important; }
body.tw-shell .page-content .avatar-md,
body.tw-shell .page-content .avatar-sm {
    border-radius: 10px !important;
}
/* Tighter avatar inside table rows so rows aren't forced tall. */
body.tw-shell .page-content .table .avatar-sm,
body.tw-shell .page-content .table img.avatar-sm,
body.tw-shell .page-content .table img.rounded-circle {
    width: 26px !important;
    height: 26px !important;
}
/* Table inner block titles (e.g. h6 inside cells) — match row text. */
html body.tw-shell .page-content .table h6,
html body.tw-shell .page-content .table h5,
html body.tw-shell .page-content .table h4 {
    font-size: 11px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    color: var(--pg-text) !important;
}
html body.tw-shell .page-content .table h6 + p,
html body.tw-shell .page-content .table p.fs-13,
html body.tw-shell .page-content .table .fs-13,
html body.tw-shell .page-content .table small {
    font-size: 10px !important;
    margin: 1px 0 0 !important;
    line-height: 1.3 !important;
    color: var(--pg-text-3) !important;
}
/* Force long single-token values (phones, codes) NOT to wrap. */
html body.tw-shell .page-content .table tbody td span,
html body.tw-shell .page-content .table tbody td a.text-body {
    white-space: nowrap;
}
/* Allow customer name / email block to wrap but stay tight. */
html body.tw-shell .page-content .table tbody td .d-flex {
    white-space: normal;
}

/* Payment terms column — force exactly 2 lines with ellipsis. */
html body.tw-shell .page-content .table tbody td .d-flex.flex-wrap .badge {
    white-space: normal !important;
    width: 160px !important;
    max-width: 160px !important;
    text-align: left;
    line-height: 1.3 !important;
    padding: 4px 8px !important;
    font-size: 10px !important;
    /* Hard cap at 2 lines with ellipsis. */
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
html body.tw-shell .page-content .table tbody td .d-flex.flex-wrap {
    width: 170px;
    max-width: 170px;
}
/* Row action buttons (.btn-sm in tables) — keep tight. */
body.tw-shell .page-content .table .btn,
body.tw-shell .page-content .table .btn-sm {
    height: 24px;
    width: 24px;
    padding: 0 !important;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.tw-shell .page-content .table .btn iconify-icon,
body.tw-shell .page-content .table .btn i { font-size: 13px !important; }

/* ── Dropdowns ───────────────────────────────────────────────────────── */
body.tw-shell .page-content .dropdown-menu,
body.tw-shell .dropdown-menu {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border-2) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 32px -10px rgba(0,0,0,0.6) !important;
    padding: 4px !important;
}
body.tw-shell .dropdown-item {
    color: var(--pg-text-2) !important;
    font-size: 12.5px;
    padding: 7px 10px !important;
    border-radius: 6px;
}
body.tw-shell .dropdown-item:hover,
body.tw-shell .dropdown-item:focus {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #fff !important;
}
body.tw-shell .dropdown-item.active {
    background: var(--pg-accent) !important;
    color: #fff !important;
}
body.tw-shell .dropdown-divider { border-color: var(--pg-border) !important; }

/* ── Alerts ──────────────────────────────────────────────────────────── */
body.tw-shell .page-content .alert {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
    border-radius: 10px !important;
}
body.tw-shell .page-content .alert-success { border-color: rgba(78,203,126,.35) !important; background: rgba(78,203,126,.06) !important; color: #6fe3a0 !important; }
body.tw-shell .page-content .alert-warning { border-color: rgba(245,165,36,.35) !important; background: rgba(245,165,36,.06) !important; color: #f7c163 !important; }
body.tw-shell .page-content .alert-danger  { border-color: rgba(229,77,46,.35)  !important; background: rgba(229,77,46,.06)  !important; color: #f37a5d !important; }
body.tw-shell .page-content .alert-info    { border-color: rgba(56,189,248,.35) !important; background: rgba(56,189,248,.06) !important; color: #7cd2f7 !important; }
body.tw-shell .page-content .btn-close {
    filter: invert(.9);
}

/* ── Page-content canvas — paint dark like the dashboard. ─────────────── */
body.tw-shell .page-content { color: var(--pg-text); }

/* ── Modals ──────────────────────────────────────────────────────────── */
body.tw-shell .modal-content {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 12px !important;
    color: var(--pg-text) !important;
}
body.tw-shell .modal-header,
body.tw-shell .modal-footer {
    border-color: var(--pg-border) !important;
}
body.tw-shell .modal-title { color: var(--pg-text) !important; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }

/* ── Pagination ──────────────────────────────────────────────────────── */
body.tw-shell .pagination .page-link {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text-2) !important;
    font-size: 12.5px;
}
body.tw-shell .pagination .page-link:hover {
    background: var(--pg-surface-2) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .pagination .page-item.active .page-link {
    background: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
    color: #fff !important;
}

/* ── Tabs / nav-pills ─────────────────────────────────────────────────── */
body.tw-shell .nav-tabs {
    border-bottom: 1px solid var(--pg-border) !important;
    margin-bottom: 16px;
    gap: 4px;
    flex-wrap: wrap;
}
body.tw-shell .nav-tabs .nav-link,
body.tw-shell .nav-tabs .nav-item .nav-link {
    color: var(--pg-text-3) !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
    padding: 8px 12px !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .12s, border-color .12s, background-color .12s;
}
body.tw-shell .nav-tabs .nav-link iconify-icon,
body.tw-shell .nav-tabs .nav-link i {
    font-size: 14px !important;
}
body.tw-shell .nav-tabs .nav-link:hover {
    color: var(--pg-text) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}
body.tw-shell .nav-tabs .nav-link.active,
body.tw-shell .nav-tabs .nav-item .nav-link.active {
    color: var(--pg-text) !important;
    background: transparent !important;
    border-bottom-color: var(--pg-accent) !important;
    font-weight: 600 !important;
}
body.tw-shell .nav-pills .nav-link {
    color: var(--pg-text-2) !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
    padding: 6px 12px !important;
}
body.tw-shell .nav-pills .nav-link:hover {
    background: rgba(255,255,255,0.04) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .nav-pills .nav-link.active {
    background: var(--pg-accent) !important;
    color: #fff !important;
}
body.tw-shell .tab-content {
    color: var(--pg-text);
}

/* ── File inputs (Choose file picker) ─────────────────────────────────── */
body.tw-shell .page-content input[type="file"],
body.tw-shell input[type="file"].form-control {
    color: var(--pg-text) !important;
    cursor: pointer;
}
body.tw-shell .page-content input[type="file"]::file-selector-button,
body.tw-shell input[type="file"]::file-selector-button {
    background: var(--pg-elev) !important;
    color: var(--pg-text) !important;
    border: 0 !important;
    border-right: 1px solid var(--pg-border) !important;
    padding: 0 14px !important;
    height: 100%;
    margin-right: 10px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
    transition: background-color .12s;
}
body.tw-shell .page-content input[type="file"]::file-selector-button:hover,
body.tw-shell input[type="file"]::file-selector-button:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #b3b8f1 !important;
}
body.tw-shell input[type="file"]::-webkit-file-upload-button {
    background: var(--pg-elev) !important;
    color: var(--pg-text) !important;
    border: 0 !important;
    border-right: 1px solid var(--pg-border) !important;
    padding: 0 14px !important;
    margin-right: 10px;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 600;
}

/* ── Date / time / number / color inputs (native pickers) ────────────── */
body.tw-shell .page-content input[type="date"],
body.tw-shell .page-content input[type="time"],
body.tw-shell .page-content input[type="datetime-local"],
body.tw-shell .page-content input[type="month"],
body.tw-shell .page-content input[type="week"],
body.tw-shell .page-content input[type="number"] {
    color-scheme: dark;
}
body.tw-shell .page-content input[type="date"]::-webkit-calendar-picker-indicator,
body.tw-shell .page-content input[type="time"]::-webkit-calendar-picker-indicator,
body.tw-shell .page-content input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity .12s;
}
body.tw-shell .page-content input[type="date"]:hover::-webkit-calendar-picker-indicator,
body.tw-shell .page-content input[type="time"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

/* ── DataTables length / search controls ──────────────────────────────── */
body.tw-shell .page-content .dataTables_wrapper { color: var(--pg-text); font-size: 12px; }
body.tw-shell .page-content .dataTables_length,
body.tw-shell .page-content .dataTables_filter,
body.tw-shell .page-content .dataTables_info,
body.tw-shell .page-content .dataTables_paginate {
    color: var(--pg-text-3) !important;
    font-size: 12px;
    margin: 8px 0;
}
body.tw-shell .page-content .dataTables_length select,
body.tw-shell .page-content .dataTables_filter input {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
    border-radius: 6px;
    padding: 4px 8px !important;
    height: 28px;
    font-size: 12px;
}
body.tw-shell .page-content .dataTables_filter input:focus,
body.tw-shell .page-content .dataTables_length select:focus {
    border-color: var(--pg-accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important;
    outline: none !important;
}
body.tw-shell .page-content .dataTables_paginate .paginate_button {
    color: var(--pg-text-2) !important;
    background: transparent !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 6px !important;
    margin: 0 2px !important;
    padding: 4px 10px !important;
    font-size: 11.5px;
}
body.tw-shell .page-content .dataTables_paginate .paginate_button:hover {
    background: var(--pg-surface-2) !important;
    border-color: var(--pg-border-2) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content .dataTables_paginate .paginate_button.current,
body.tw-shell .page-content .dataTables_paginate .paginate_button.current:hover {
    background: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
    color: #ffffff !important;
}
body.tw-shell .page-content .dataTables_paginate .paginate_button.disabled,
body.tw-shell .page-content .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--pg-text-4) !important;
    background: transparent !important;
    border-color: var(--pg-border) !important;
    cursor: not-allowed;
}

/* ── Sortable table headers (DataTables sort icons) ──────────────────── */
body.tw-shell .page-content table.dataTable thead .sorting,
body.tw-shell .page-content table.dataTable thead .sorting_asc,
body.tw-shell .page-content table.dataTable thead .sorting_desc {
    cursor: pointer;
    background-image: none !important;
}
body.tw-shell .page-content table.dataTable thead .sorting::after,
body.tw-shell .page-content table.dataTable thead .sorting_asc::after,
body.tw-shell .page-content table.dataTable thead .sorting_desc::after {
    color: var(--pg-text-4);
    font-size: 9px;
    margin-left: 4px;
}

/* ── Offcanvas (right-side drawer used for Theme settings + Activity) ─ */
body.tw-shell .offcanvas {
    background: var(--pg-surface) !important;
    color: var(--pg-text) !important;
    border-color: var(--pg-border) !important;
}
body.tw-shell .offcanvas-header {
    background: var(--pg-surface-2) !important;
    border-bottom: 1px solid var(--pg-border) !important;
    padding: 14px 18px !important;
}
body.tw-shell .offcanvas-header .offcanvas-title {
    color: var(--pg-text) !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 14px !important;
    font-weight: 600 !important;
}
body.tw-shell .offcanvas-body {
    background: var(--pg-surface) !important;
    color: var(--pg-text) !important;
    padding: 16px 18px !important;
}
body.tw-shell .offcanvas .btn-close {
    filter: invert(0.9);
    opacity: 0.7;
}
body.tw-shell .offcanvas .btn-close:hover { opacity: 1; }

/* ── Toasts ──────────────────────────────────────────────────────────── */
body.tw-shell .toast {
    background: var(--pg-surface) !important;
    color: var(--pg-text) !important;
    border: 1px solid var(--pg-border-2) !important;
    border-radius: 10px !important;
    box-shadow: 0 12px 32px -10px rgba(0,0,0,0.6) !important;
}
body.tw-shell .toast-header {
    background: var(--pg-surface-2) !important;
    border-bottom: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
}

/* ── Misc small fixes for legacy markup ────────────────────────────── */
body.tw-shell .page-content .border,
body.tw-shell .page-content .border-top,
body.tw-shell .page-content .border-bottom,
body.tw-shell .page-content .border-start,
body.tw-shell .page-content .border-end {
    border-color: var(--pg-border) !important;
}
body.tw-shell .page-content code,
body.tw-shell .page-content kbd {
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
}
body.tw-shell .page-content pre {
    background: #08090a !important;
    color: var(--pg-text-2) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 8px;
    padding: 10px 12px !important;
    font-size: 12px;
}
body.tw-shell .page-content blockquote {
    border-left: 3px solid var(--pg-accent) !important;
    background: var(--pg-surface-2) !important;
    color: var(--pg-text-2) !important;
    padding: 8px 14px !important;
    border-radius: 0 6px 6px 0;
}
body.tw-shell .page-content hr {
    border-color: var(--pg-border) !important;
    opacity: 1;
}
body.tw-shell .page-content .list-group {
    background: transparent !important;
    border-radius: 8px !important;
    border: 1px solid var(--pg-border) !important;
    overflow: hidden;
}
body.tw-shell .page-content .list-group-item {
    background: var(--pg-surface) !important;
    color: var(--pg-text) !important;
    border-color: var(--pg-border) !important;
    font-size: 12.5px;
}
body.tw-shell .page-content .list-group-item.active {
    background: rgba(59, 130, 246, 0.14) !important;
    border-color: rgba(59, 130, 246, 0.30) !important;
    color: #fff !important;
}
body.tw-shell .page-content .list-group-item-action:hover {
    background: var(--pg-surface-2) !important;
}

/* ── Avatar fallback badges ──────────────────────────────────────────── */
body.tw-shell .page-content .avatar-title {
    background: var(--pg-elev) !important;
    color: var(--pg-text-2) !important;
}
body.tw-shell .page-content .bg-primary-subtle .avatar-title,
body.tw-shell .page-content .avatar-sm .text-primary {
    color: var(--pg-accent-2) !important;
}

/* ── Switch (form-switch) ────────────────────────────────────────────── */
body.tw-shell .page-content .form-switch .form-check-input {
    width: 32px;
    height: 18px;
    background-color: var(--pg-elev) !important;
    border-color: var(--pg-border-2) !important;
}
body.tw-shell .page-content .form-switch .form-check-input:checked {
    background-color: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
}

/* ── Spinner / loading ───────────────────────────────────────────────── */
body.tw-shell .spinner-border { color: var(--pg-accent); }
body.tw-shell .spinner-grow { color: var(--pg-accent); }

/* ============================================================================ */
/*  FINANZAS · CEO PANELS (PanelEjecutivo, Alertas, Recuperación, etc.)         */
/*  These pages define their own inline <style> blocks with LIGHT-theme         */
/*  colors (#fff bg, #111827 text). Override them all to Linear dark.           */
/* ============================================================================ */

/* Override CSS vars defined inside `.fe-pe-panel` so all `var(--border)` etc.
   resolve to dark theme values automatically. */
body.tw-shell .fe-pe-panel,
body.tw-shell .fe-pe-wrap {
    --primary: #3b82f6 !important;
    --success: #4ecb7e !important;
    --danger:  #e54d2e !important;
    --warning: #f5a524 !important;
    --info:    #38bdf8 !important;
    --border:  #26262b !important;
    --muted:   #8a8a93 !important;
    --text:    #e6e6e6 !important;
}

/* ── KPI cards ─────────────────────────────────────────────────────── */
body.tw-shell .kpi-card {
    background: var(--pg-surface) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 60px) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
}
body.tw-shell .kpi-card:hover {
    border-color: var(--pg-border-2) !important;
    box-shadow: 0 8px 24px -10px rgba(0,0,0,0.55) !important;
}
body.tw-shell .kpi-label {
    color: var(--pg-text-4) !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
}
body.tw-shell .kpi-value {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    color: var(--pg-text) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    font-size: 24px !important;
}
body.tw-shell .kpi-desc,
body.tw-shell .kpi-indicator-label {
    color: var(--pg-text-3) !important;
}
body.tw-shell .kpi-icon {
    color: var(--pg-text-4) !important;
    opacity: 0.55 !important;
}
body.tw-shell .kpi-bar {
    background: var(--pg-elev) !important;
    border-radius: 999px;
    overflow: hidden;
}
body.tw-shell .kpi-pct {
    color: var(--pg-text-2) !important;
    font-weight: 700;
}

/* ── Inline badges used in CEO panel ───────────────────────────────── */
body.tw-shell .badge-box-22xu,
body.tw-shell .badge-box-208 {
    background: rgba(56, 189, 248, 0.14) !important;
    color: #7cd2f7 !important;
    border: 0 !important;
}
body.tw-shell .badge-weeks {
    background: rgba(245, 165, 36, 0.14) !important;
    color: #f7c163 !important;
    border: 0 !important;
}

/* ── Section heading / lede ─────────────────────────────────────────── */
body.tw-shell .analysis-headline {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    color: var(--pg-text) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}
body.tw-shell .fe-pe-toolbar-lede {
    color: var(--pg-text-3) !important;
}

/* ── Metric boxes (the gray rounded blocks) ─────────────────────────── */
body.tw-shell .metric-box {
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 10px;
}
body.tw-shell .metric-box .metric-val {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    color: var(--pg-text) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}
body.tw-shell .metric-box .metric-lbl {
    color: var(--pg-text-4) !important;
}
body.tw-shell .fe-wa-kpi .metric-box {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    box-shadow: none !important;
}

/* ── Weekly Analysis bars ───────────────────────────────────────────── */
body.tw-shell .fe-wa-bars {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    box-shadow: none !important;
}
body.tw-shell .fe-wa-bar-title {
    color: var(--pg-text) !important;
}
body.tw-shell .fe-wa-bar-val {
    color: var(--pg-text) !important;
    font-variant-numeric: tabular-nums;
}
body.tw-shell .fe-wa-bar-val.neg {
    color: #f37a5d !important;
}
body.tw-shell .fe-wa-bar-track {
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
}

/* ── Section links ─────────────────────────────────────────────────── */
body.tw-shell .section-link {
    color: #6fe3a0 !important;
}
body.tw-shell .section-link-danger {
    color: #f37a5d !important;
}

/* ── Card / card-header overrides for Finanzas wrappers ─────────────── */
body.tw-shell .fe-pe-wrap .card {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 12px !important;
}
body.tw-shell .fe-pe-wrap .card-header,
body.tw-shell .fe-pe-wrap .card-header[style] {
    background: transparent !important;
    border-bottom: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
}

/* ── Donut center label inside the chart ──────────────────────────── */
body.tw-shell .fe-donut-center-inner strong {
    color: var(--pg-text) !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
}
body.tw-shell .fe-donut-center-inner small {
    color: var(--pg-text-3) !important;
}

/* ── CEO Hero Band — Health Score · Priorities · Cash Runway ───────── */
body.tw-shell .health-score-status {
    color: var(--pg-text) !important;
}
body.tw-shell .health-score-detail {
    color: var(--pg-text-3) !important;
}
body.tw-shell .health-score-ring {
    box-shadow: 0 4px 14px rgba(0,0,0,.4) !important;
}
body.tw-shell .health-score-bars,
body.tw-shell .health-bar-track {
    background: var(--pg-elev) !important;
}

/* ── Priorities list ──────────────────────────────────────────────── */
body.tw-shell .priority-item {
    color: var(--pg-text) !important;
    border-bottom: 1px dashed var(--pg-border) !important;
}
body.tw-shell .priority-item:hover {
    background: rgba(59, 130, 246, 0.08) !important;
}
body.tw-shell .priority-title {
    color: var(--pg-text) !important;
}
body.tw-shell .priority-meta {
    color: var(--pg-text-4) !important;
}
body.tw-shell .priority-amount {
    color: var(--pg-text) !important;
    font-variant-numeric: tabular-nums;
}

/* ── Cash Runway block ────────────────────────────────────────────── */
body.tw-shell .runway-big {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    color: var(--pg-text) !important;
    font-variant-numeric: tabular-nums;
}
body.tw-shell .runway-warn.healthy { color: #6fe3a0 !important; }
body.tw-shell .runway-warn.caution { color: #f7c163 !important; }
body.tw-shell .runway-warn.danger  { color: #f37a5d !important; }
body.tw-shell .runway-axis {
    color: var(--pg-text-4) !important;
}

/* Tables inside Finanzas pages — inherit the standard list-page styling. */
body.tw-shell .fe-pe-wrap table.table thead th,
body.tw-shell .fe-pe-wrap table.table tbody td {
    background: transparent !important;
    color: inherit !important;
}

/* Bootstrap text-dark / text-light helpers leaking through */
body.tw-shell .fe-pe-wrap .text-dark,
body.tw-shell .fe-pe-wrap [style*="color:#111827"],
body.tw-shell .fe-pe-wrap [style*="color: #111827"] {
    color: var(--pg-text) !important;
}
body.tw-shell .fe-pe-wrap [style*="color:#878a99"],
body.tw-shell .fe-pe-wrap [style*="color: #878a99"] {
    color: var(--pg-text-3) !important;
}
body.tw-shell .fe-pe-wrap [style*="background:#fff"],
body.tw-shell .fe-pe-wrap [style*="background: #fff"],
body.tw-shell .fe-pe-wrap [style*="background:#f8f9fa"],
body.tw-shell .fe-pe-wrap [style*="background:#fdfdfd"] {
    background: var(--pg-surface) !important;
}

/* ── `.fin-*` family (RecuperacionFinanciera, RecuperacionIa, etc.) ── */
body.tw-shell .fin-card,
body.tw-shell .fin-card-alerts,
body.tw-shell .fin-card-header,
body.tw-shell .fin-card-body,
body.tw-shell .fin-kpi {
    background: var(--pg-surface) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 60px) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
    box-shadow: none !important;
}
body.tw-shell .fin-card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--pg-border) !important;
}
body.tw-shell .fin-card-title { color: var(--pg-text) !important; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; }
body.tw-shell .fin-breadcrumb,
body.tw-shell .fin-aging-lbl,
body.tw-shell .fin-aging-pct,
body.tw-shell .fin-analisis-foot { color: var(--pg-text-3) !important; }
body.tw-shell .fin-aging-num {
    color: var(--pg-text) !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums;
}
body.tw-shell .fin-aging-bar,
body.tw-shell .fin-cap-progress {
    background: var(--pg-elev) !important;
    border: 1px solid var(--pg-border) !important;
}

/* KPI strip (BankPolicies + Alertas etc.) — match the project's standard
   .card treatment so these tiles feel native to the dark shell rather than
   bolted-on with white backgrounds. (16-May-2026 — Bank Policies theme fix.)
   Mirrors the rule at body.tw-shell .page-content .card up at line ~96. */
body.tw-shell .fin-strip-cell {
    background: var(--pg-surface) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.018) 0%, transparent 60px) !important;
    border: 1px solid var(--pg-border) !important;
    border-radius: 10px !important;
    color: var(--pg-text) !important;
    box-shadow: 0 1px 0 0 rgba(255,255,255,0.02) inset, 0 1px 2px 0 rgba(0,0,0,0.25) !important;
    transition: border-color .15s ease, transform .15s ease;
}
body.tw-shell .fin-strip-cell:hover {
    border-color: rgba(148,163,184,0.30) !important;
}
body.tw-shell .fin-strip-cell-num {
    color: var(--pg-text) !important;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums;
}
body.tw-shell .fin-strip-cell-lbl { color: var(--pg-text-3) !important; }

html[data-bs-theme="light"] body.tw-shell .fin-strip-cell {
    background: #ffffff !important;
    background-image: none !important;
    border-color: #e4e4e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-strip-cell-num { color: #111827 !important; }
html[data-bs-theme="light"] body.tw-shell .fin-strip-cell-lbl { color: #6b7280 !important; }

body.tw-shell .fin-input,
body.tw-shell .fin-select,
body.tw-shell .fin-textarea,
body.tw-shell select.fin-input,
body.tw-shell textarea.fin-input {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .fin-input::placeholder { color: var(--pg-text-4) !important; }
body.tw-shell .fin-input:focus,
body.tw-shell .fin-select:focus {
    border-color: var(--pg-accent) !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18) !important;
}

body.tw-shell .fin-btn,
body.tw-shell .fin-btn-l,
body.tw-shell .fin-btn-sm {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border-2) !important;
    color: var(--pg-text) !important;
    font-weight: 600;
}
body.tw-shell .fin-btn:hover,
body.tw-shell .fin-btn-l:hover {
    background: var(--pg-elev) !important;
    color: #fff !important;
}
body.tw-shell .fin-btn-p {
    background: var(--pg-accent) !important;
    border-color: var(--pg-accent) !important;
    color: #fff !important;
}
body.tw-shell .fin-btn-p:hover { background: var(--pg-accent-2) !important; }
body.tw-shell .fin-btn-d {
    background: rgba(229,77,46,.14) !important;
    border-color: rgba(229,77,46,.30) !important;
    color: #f37a5d !important;
}
body.tw-shell .fin-btn-w {
    background: rgba(245,165,36,.14) !important;
    border-color: rgba(245,165,36,.30) !important;
    color: #f7c163 !important;
}
body.tw-shell .fin-btn-s {
    background: rgba(78,203,126,.14) !important;
    border-color: rgba(78,203,126,.30) !important;
    color: #6fe3a0 !important;
}

body.tw-shell .fin-table {
    background: transparent !important;
    color: var(--pg-text) !important;
}
body.tw-shell .fin-table th {
    background: var(--pg-surface-2) !important;
    color: var(--pg-text-3) !important;
    border-bottom: 1px solid var(--pg-border) !important;
    font-weight: 600 !important;
    font-size: 10.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
body.tw-shell .fin-table td {
    background: transparent !important;
    color: var(--pg-text-2) !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

body.tw-shell .fin-badge,
body.tw-shell .fin-badge-info,
body.tw-shell .fin-badge-soft,
body.tw-shell .fin-badge-soft-iq {
    background: rgba(59, 130, 246,.14) !important;
    color: #b3b8f1 !important;
    border: 0 !important;
}

body.tw-shell .fin-box,
body.tw-shell .fin-box-d,
body.tw-shell .fin-box-p,
body.tw-shell .fin-box-s,
body.tw-shell .fin-box-w,
body.tw-shell .fin-box-break-info,
body.tw-shell .fin-box-break-success {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
}

body.tw-shell .fin-auto-alert,
body.tw-shell .fin-auto-alert-bad,
body.tw-shell .fin-auto-alert-warn,
body.tw-shell .fin-auto-alert-ok {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .fin-auto-alert-bad { border-color: rgba(229,77,46,.40) !important; }
body.tw-shell .fin-auto-alert-warn { border-color: rgba(245,165,36,.40) !important; }
body.tw-shell .fin-auto-alert-ok { border-color: rgba(78,203,126,.40) !important; }
body.tw-shell .fin-auto-alert-title { color: var(--pg-text) !important; }
body.tw-shell .fin-auto-alert-text { color: var(--pg-text-2) !important; }

/* Local CSS-var hijacks for `.fin-*` styled pages — DARK theme. */
body.tw-shell [class*="fin-card"],
body.tw-shell [class*="fin-kpi"],
body.tw-shell .fin-wrap,
body.tw-shell .fin-page {
    --fborder: #26262b !important;
    --ftext:   #e6e6e6 !important;
    --fmuted:  #8a8a93 !important;
    --fbg:     #1a1a1f !important;
    --fp:      #3b82f6 !important;
    --fs:      #4ecb7e !important;
    --fd:      #e54d2e !important;
    --fw:      #f5a524 !important;
    --fi:      #38bdf8 !important;
}
/* LIGHT theme — swap `.fin-*` page vars to light surfaces. */
html[data-bs-theme="light"] body.tw-shell [class*="fin-card"],
html[data-bs-theme="light"] body.tw-shell [class*="fin-kpi"],
html[data-bs-theme="light"] body.tw-shell .fin-wrap,
html[data-bs-theme="light"] body.tw-shell .fin-page {
    --fborder: #e4e4e7 !important;
    --ftext:   #18181b !important;
    --fmuted:  #71717a !important;
    --fbg:     #f4f4f5 !important;
    --fp:      #3b82f6 !important;
    --fs:      #16a34a !important;
    --fd:      #dc2626 !important;
    --fw:      #d97706 !important;
    --fi:      #0284c7 !important;
}
/* LIGHT theme — `.fin-*` element overrides (cards, inputs, tables, buttons). */
html[data-bs-theme="light"] body.tw-shell .fin-card,
html[data-bs-theme="light"] body.tw-shell .fin-card-alerts,
html[data-bs-theme="light"] body.tw-shell .fin-kpi {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e4e4e7 !important;
    color: #18181b !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-card-header {
    background: transparent !important;
    border-bottom: 1px solid #e4e4e7 !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-input,
html[data-bs-theme="light"] body.tw-shell .fin-select,
html[data-bs-theme="light"] body.tw-shell .fin-textarea,
html[data-bs-theme="light"] body.tw-shell select.fin-input,
html[data-bs-theme="light"] body.tw-shell textarea.fin-input {
    background: #ffffff !important;
    border: 1px solid #d4d4d8 !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-input::placeholder { color: #a1a1aa !important; }
html[data-bs-theme="light"] body.tw-shell .fin-btn,
html[data-bs-theme="light"] body.tw-shell .fin-btn-l,
html[data-bs-theme="light"] body.tw-shell .fin-btn-sm {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    color: #3f3f46 !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-btn:hover,
html[data-bs-theme="light"] body.tw-shell .fin-btn-l:hover {
    background: #f4f4f5 !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-table th {
    background: #fafafa !important;
    color: #52525b !important;
    border-bottom: 1px solid #e4e4e7 !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-table td {
    background: transparent !important;
    color: #3f3f46 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-table tbody tr:hover td {
    background: rgba(0,0,0,0.025) !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-tabs {
    border-bottom: 1px solid #e4e4e7 !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-tabs .fin-tab {
    color: #71717a !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-tabs .fin-tab:hover,
html[data-bs-theme="light"] body.tw-shell .fin-tabs .fin-tab.active {
    color: #3b82f6 !important;
    border-bottom-color: #3b82f6 !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-row {
    border-bottom-color: rgba(0,0,0,0.08) !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-row .lbl { color: #71717a !important; }
html[data-bs-theme="light"] body.tw-shell .fin-row .val { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .fin-page,
html[data-bs-theme="light"] body.tw-shell .fin-wrap {
    background: transparent !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-badge {
    border: 0 !important;
}
html[data-bs-theme="light"] body.tw-shell .fin-mini-kpi {
    background: #fafafa !important;
    border: 1px solid #e4e4e7 !important;
    color: #18181b !important;
}

/* `.fe-*` family (Centro Financiero) — LIGHT theme overrides too. */
html[data-bs-theme="light"] body.tw-shell .fe-pe-panel,
html[data-bs-theme="light"] body.tw-shell .fe-pe-wrap {
    --primary: #3b82f6 !important;
    --success: #16a34a !important;
    --danger:  #dc2626 !important;
    --warning: #d97706 !important;
    --info:    #0284c7 !important;
    --border:  #e4e4e7 !important;
    --muted:   #71717a !important;
    --text:    #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .kpi-card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e4e4e7 !important;
    color: #18181b !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
html[data-bs-theme="light"] body.tw-shell .kpi-label,
html[data-bs-theme="light"] body.tw-shell .kpi-desc,
html[data-bs-theme="light"] body.tw-shell .kpi-indicator-label { color: #71717a !important; }
html[data-bs-theme="light"] body.tw-shell .kpi-value { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .kpi-bar {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
}
html[data-bs-theme="light"] body.tw-shell .metric-box {
    background: #fafafa !important;
    border: 1px solid #e4e4e7 !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .metric-box .metric-val { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .metric-box .metric-lbl { color: #71717a !important; }
html[data-bs-theme="light"] body.tw-shell .fe-wa-bars,
html[data-bs-theme="light"] body.tw-shell .fe-wa-kpi .metric-box {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
html[data-bs-theme="light"] body.tw-shell .fe-wa-bar-title,
html[data-bs-theme="light"] body.tw-shell .fe-wa-bar-val { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .fe-wa-bar-track {
    background: #f4f4f5 !important;
    border: 1px solid #e4e4e7 !important;
}
html[data-bs-theme="light"] body.tw-shell .health-score-status { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .health-score-detail,
html[data-bs-theme="light"] body.tw-shell .priority-meta,
html[data-bs-theme="light"] body.tw-shell .runway-axis { color: #71717a !important; }
html[data-bs-theme="light"] body.tw-shell .priority-item {
    color: #18181b !important;
    border-bottom: 1px dashed #e4e4e7 !important;
}
html[data-bs-theme="light"] body.tw-shell .priority-item:hover {
    background: rgba(59, 130, 246, 0.06) !important;
}
html[data-bs-theme="light"] body.tw-shell .priority-title,
html[data-bs-theme="light"] body.tw-shell .priority-amount,
html[data-bs-theme="light"] body.tw-shell .runway-big { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .fe-donut-center-inner strong { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .fe-donut-center-inner small { color: #71717a !important; }
html[data-bs-theme="light"] body.tw-shell .fe-pe-wrap .card-header,
html[data-bs-theme="light"] body.tw-shell .fe-pe-wrap .card-header[style] {
    background: transparent !important;
    border-bottom: 1px solid #e4e4e7 !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .fe-pe-wrap .card {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
}
/* Alert-class family (Alertas page) — light theme */
html[data-bs-theme="light"] body.tw-shell .alert-card,
html[data-bs-theme="light"] body.tw-shell .alert-kpi {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    color: #18181b !important;
}
html[data-bs-theme="light"] body.tw-shell .alert-metric { color: #18181b !important; }
html[data-bs-theme="light"] body.tw-shell .alert-btn {
    background: #ffffff !important;
    border: 1px solid #e4e4e7 !important;
    color: #3f3f46 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
 *  PROFESSIONAL COLOR SCHEMES — selected via `html[data-tw-theme="<name>"]`.
 *  Six schemes total, all paired with the `data-bs-theme` flag (dark/light)
 *  so the existing dark/light tokens stay in sync with the picked scheme:
 *
 *     - slate-dark  (default)
 *     - slate-light
 *     - indigo      (corporate navy shell + light canvas)
 *     - forest      (deep teal shell + mint canvas)
 *     - royal       (deep indigo shell + lavender canvas)
 *     - ocean       (cyan-900 shell + sky canvas)
 *
 *  Each scheme overrides the canvas (page bg), surface (card bg) and accent
 *  while keeping the established type hierarchy.
 * ════════════════════════════════════════════════════════════════════════════ */

/* INDIGO — corporate navy shell + clean light canvas */
html[data-tw-theme="indigo"] body.tw-shell {
    --pg-bg:          #f1f5f9;
    --pg-surface:     #ffffff;
    --pg-surface-2:   #f8fafc;
    --pg-elev:        #f1f5f9;
    --pg-border:      #e2e8f0;
    --pg-border-2:    #cbd5e1;
    --pg-text:        #0f172a;
    --pg-text-2:      #334155;
    --pg-text-3:      #64748b;
    --pg-text-4:      #94a3b8;
    --pg-accent:      #3b82f6;
    --pg-accent-2:    #2563eb;
    --pg-row-hover:   rgba(0,0,0,0.025);
    --pg-row-divider: rgba(0,0,0,0.06);
    --pg-card-sheen:  rgba(0,0,0,0);
    color-scheme: light;
}
html[data-tw-theme="indigo"] {
    background-color: #f1f5f9 !important;
}
html[data-tw-theme="indigo"] body.tw-shell {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

/* FOREST — deep teal shell + mint canvas */
html[data-tw-theme="forest"] body.tw-shell {
    --pg-bg:          #f0fdf4;
    --pg-surface:     #ffffff;
    --pg-surface-2:   #f7fef9;
    --pg-elev:        #ecfdf5;
    --pg-border:      #d1fae5;
    --pg-border-2:    #a7f3d0;
    --pg-text:        #0f1f1c;
    --pg-text-2:      #14532d;
    --pg-text-3:      #4d7c70;
    --pg-text-4:      #84a098;
    --pg-accent:      #10b981;
    --pg-accent-2:    #059669;
    --pg-row-hover:   rgba(16,185,129,0.05);
    --pg-row-divider: rgba(0,0,0,0.06);
    --pg-card-sheen:  rgba(0,0,0,0);
    color-scheme: light;
}
html[data-tw-theme="forest"] {
    background-color: #f0fdf4 !important;
}
html[data-tw-theme="forest"] body.tw-shell {
    background-color: #f0fdf4 !important;
    color: #0f1f1c !important;
}

/* ROYAL — deep indigo shell + lavender canvas */
html[data-tw-theme="royal"] body.tw-shell {
    --pg-bg:          #faf5ff;
    --pg-surface:     #ffffff;
    --pg-surface-2:   #fcfaff;
    --pg-elev:        #f5f0ff;
    --pg-border:      #e9d5ff;
    --pg-border-2:    #d8b4fe;
    --pg-text:        #1e1b4b;
    --pg-text-2:      #581c87;
    --pg-text-3:      #7c3aed;
    --pg-text-4:      #a78bfa;
    --pg-accent:      #7c3aed;
    --pg-accent-2:    #6d28d9;
    --pg-row-hover:   rgba(124,58,237,0.05);
    --pg-row-divider: rgba(0,0,0,0.06);
    --pg-card-sheen:  rgba(0,0,0,0);
    color-scheme: light;
}
html[data-tw-theme="royal"] {
    background-color: #faf5ff !important;
}
html[data-tw-theme="royal"] body.tw-shell {
    background-color: #faf5ff !important;
    color: #1e1b4b !important;
}

/* OCEAN — cyan-900 shell + sky canvas */
html[data-tw-theme="ocean"] body.tw-shell {
    --pg-bg:          #ecfeff;
    --pg-surface:     #ffffff;
    --pg-surface-2:   #f0fdff;
    --pg-elev:        #e0f7fa;
    --pg-border:      #cffafe;
    --pg-border-2:    #a5f3fc;
    --pg-text:        #083344;
    --pg-text-2:      #155e75;
    --pg-text-3:      #0e7490;
    --pg-text-4:      #67e8f9;
    --pg-accent:      #06b6d4;
    --pg-accent-2:    #0891b2;
    --pg-row-hover:   rgba(6,182,212,0.05);
    --pg-row-divider: rgba(0,0,0,0.06);
    --pg-card-sheen:  rgba(0,0,0,0);
    color-scheme: light;
}
html[data-tw-theme="ocean"] {
    background-color: #ecfeff !important;
}
html[data-tw-theme="ocean"] body.tw-shell {
    background-color: #ecfeff !important;
    color: #083344 !important;
}

/* ── `.alert-*` family (Alertas page) ─────────────────────────────── */
body.tw-shell .alert-card,
body.tw-shell .alert-kpi {
    background: var(--pg-surface) !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text) !important;
    box-shadow: none !important;
}
body.tw-shell .alert-metric { color: var(--pg-text) !important; font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif !important; }
body.tw-shell .alert-btn {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border-2) !important;
    color: var(--pg-text) !important;
}

/* ── Other lone classes used across Finanzas / CEO views ─────────── */
body.tw-shell .ceo-hero-card,
body.tw-shell .expense-card,
body.tw-shell .amount-box,
body.tw-shell .analysis-head,
body.tw-shell .action-row,
body.tw-shell .escenarios-table,
body.tw-shell .fe-clasif-panel,
body.tw-shell .fe-strat-box,
body.tw-shell .fe-rec-block,
body.tw-shell .fe-fin-dash-tile,
body.tw-shell .fe-plan-kpi,
body.tw-shell .fe-analysis-kpi,
body.tw-shell .fe-bank-row,
body.tw-shell .fe-cred-detail-row,
body.tw-shell .fe-deuda-row,
body.tw-shell .fe-ia-pri-row,
body.tw-shell .fe-ia-trigger-wrap,
body.tw-shell .fe-peq-kpi-row,
body.tw-shell .fe-plan-saved-table,
body.tw-shell .card-head {
    background: var(--pg-surface) !important;
    border-color: var(--pg-border) !important;
    color: var(--pg-text) !important;
    box-shadow: none !important;
}
body.tw-shell .fe-deuda-btn,
body.tw-shell .fe-plan-btn,
body.tw-shell .fe-plan-calc-btn,
body.tw-shell .fe-fin-tb-btn,
body.tw-shell .fe-fin-topbar-btn,
body.tw-shell .fe-ia-planlink-btn,
body.tw-shell .fe-ia-run-btn,
body.tw-shell .fe-rec-btn {
    background: var(--pg-surface-2) !important;
    border: 1px solid var(--pg-border-2) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .fe-deuda-btn:hover,
body.tw-shell .fe-plan-btn:hover,
body.tw-shell .fe-plan-calc-btn:hover {
    background: var(--pg-elev) !important;
    color: #fff !important;
}

/* Aggressive catch-all: any element with inline white/light bg becomes dark.
   Scoped to body.tw-shell so it never affects pages outside the modern shell. */
body.tw-shell .page-content [style*="background:#fff"]:not([class*="badge"]):not([class*="btn-primary"]),
body.tw-shell .page-content [style*="background: #fff"]:not([class*="badge"]):not([class*="btn-primary"]),
body.tw-shell .page-content [style*="background:#ffffff"]:not([class*="badge"]):not([class*="btn-primary"]),
body.tw-shell .page-content [style*="background:#f8f9fa"]:not([class*="badge"]),
body.tw-shell .page-content [style*="background: #f8f9fa"]:not([class*="badge"]),
body.tw-shell .page-content [style*="background:#fafafa"]:not([class*="badge"]),
body.tw-shell .page-content [style*="background-color:#fff"]:not([class*="badge"]),
body.tw-shell .page-content [style*="background-color: #fff"]:not([class*="badge"]),
body.tw-shell .page-content [style*="background-color:#ffffff"]:not([class*="badge"]) {
    background: var(--pg-surface) !important;
    color: var(--pg-text) !important;
}
body.tw-shell .page-content [style*="color:#111827"]:not(.badge),
body.tw-shell .page-content [style*="color: #111827"]:not(.badge),
body.tw-shell .page-content [style*="color:#000"]:not(.badge),
body.tw-shell .page-content [style*="color: #000"]:not(.badge) {
    color: var(--pg-text) !important;
}
body.tw-shell .page-content [style*="color:#495057"],
body.tw-shell .page-content [style*="color: #495057"] {
    color: var(--pg-text-2) !important;
}
body.tw-shell .page-content [style*="color:#878a99"],
body.tw-shell .page-content [style*="color: #878a99"] {
    color: var(--pg-text-3) !important;
}
body.tw-shell .page-content [style*="border:1px solid #e9ebec"],
body.tw-shell .page-content [style*="border: 1px solid #e9ebec"],
body.tw-shell .page-content [style*="border:1px solid #dfe4ea"],
body.tw-shell .page-content [style*="border: 1px solid #dfe4ea"] {
    border-color: var(--pg-border) !important;
}

/* ── Page header / breadcrumb banner (legacy _PageHeader.cshtml restyled) ──
   Hidden by default — the topbar already shows breadcrumb + page title.
   The flag `ViewBag.HidePageHeaderTitle` is preserved so per-page opt-outs work,
   but globally the topbar is the single source of truth for navigation context. */
body.tw-shell .page-header-erp {
    display: none !important;
    background: transparent !important;
    border: 0 !important;
    margin: 4px 4px 18px !important;
    padding: 0 !important;
    box-shadow: none !important;
}
body.tw-shell .page-header-erp .page-title-box {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.tw-shell .page-header-erp .page-header-erp-title {
    font-family: 'Space Grotesk', 'InterDisplay', 'Inter', system-ui, sans-serif !important;
    font-size: clamp(22px, 2.2vw, 30px) !important;
    font-weight: 700 !important;
    color: var(--pg-text) !important;
    letter-spacing: -0.022em;
    line-height: 1.15;
    margin: 0 0 4px !important;
    text-shadow: none !important;
}
body.tw-shell .page-header-erp .page-header-erp-title-icon {
    color: var(--pg-accent-2) !important;
    font-size: 22px !important;
    margin-right: 4px;
}
body.tw-shell .page-header-erp .page-header-erp-back {
    background: transparent !important;
    border: 1px solid var(--pg-border) !important;
    color: var(--pg-text-2) !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    height: auto !important;
}
body.tw-shell .page-header-erp .page-header-erp-back:hover {
    background: var(--pg-elev) !important;
    color: var(--pg-text) !important;
}

/* Breadcrumb chain — Linear style: quiet text with chevron separators. */
body.tw-shell .page-header-erp .breadcrumb,
body.tw-shell .page-header-erp ol.breadcrumb,
body.tw-shell .page-header-erp nav[aria-label="breadcrumb"] ol {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 2px 0 0 !important;
    font-size: 13px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
}
body.tw-shell .page-header-erp .breadcrumb-item,
body.tw-shell .page-header-erp .breadcrumb li {
    color: var(--pg-text-3) !important;
    font-size: 12.5px !important;
    font-weight: 500;
    padding: 0 !important;
}
body.tw-shell .page-header-erp .breadcrumb-item + .breadcrumb-item::before,
body.tw-shell .page-header-erp .breadcrumb li + li::before {
    content: '/' !important;
    color: var(--pg-text-4) !important;
    padding: 0 8px 0 0 !important;
    float: none;
}
body.tw-shell .page-header-erp .breadcrumb-item.active,
body.tw-shell .page-header-erp .breadcrumb li.active {
    color: var(--pg-text) !important;
    font-weight: 600;
}
body.tw-shell .page-header-erp .breadcrumb a,
body.tw-shell .page-header-erp .breadcrumb li a {
    color: var(--pg-text-3) !important;
    text-decoration: none !important;
    transition: color .12s ease;
}
body.tw-shell .page-header-erp .breadcrumb a:hover,
body.tw-shell .page-header-erp .breadcrumb li a:hover {
    color: var(--pg-text) !important;
}

/* ── Subtle entrance animation per page (excluded for Module Launcher's ── */
/* ── self-animating .lin-root container to avoid double animation). ───── */
body.tw-shell .page-content .container-fluid > *:not(.lin-root):not(style):not(script) {
    animation: tw-page-rise .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes tw-page-rise {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}