/* ============================================================
   Codex Theme — Light "home banking" v2 (2026-05-27)
   ------------------------------------------------------------
   Override del chrome (AppBar, Drawer, TabBar, Main) y de los
   componentes globales. Se carga DESPUES de app.css para pisar
   los selectores dark. Si algo se rompe, comentar el <link> en
   App.razor para volver al dark instantaneamente.

   v2 cambios: sidebar dark pizarra (#2b2f3a), accent vibrante
   (#2f6ee0), radius 14px en cards, 10px en inputs/botones,
   titulos peso 800.
   ============================================================ */

/* ---------- Body / canvas ---------- */
html, body {
    background: var(--bg-canvas) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
}

/* ---------- App Bar ---------- */
.codex-appbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
    box-shadow: var(--shadow-1) !important;
}

.codex-appbar .mud-icon-button {
    color: var(--text-secondary) !important;
}
.codex-appbar .mud-icon-button:hover {
    color: var(--accent) !important;
    background: var(--accent-soft) !important;
}

/* ---------- Drawer / Sidebar (DARK PIZARRA v2) ---------- */
.codex-drawer {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--sidebar-divider) !important;
}

.codex-title {
    color: var(--text-on-dark) !important;
    letter-spacing: 6px;
    font-weight: var(--fw-bold);
}
.codex-subtitle {
    color: var(--sidebar-text-muted) !important;
}

/* ---------- Nav menu (en sidebar dark) ---------- */
.codex-nav .mud-nav-link {
    color: var(--sidebar-text) !important;
    border-radius: var(--radius-input);
    font-size: var(--fs-base);
    height: 40px;
    margin: 2px 8px;
    transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.codex-nav .mud-nav-link:hover {
    background: var(--sidebar-bg-elevated) !important;
    color: var(--text-on-dark) !important;
}
.codex-nav .mud-nav-link:hover .mud-icon-root {
    color: var(--accent) !important;
}
.codex-nav .mud-nav-link .mud-icon-root {
    color: var(--sidebar-text-muted) !important;
}
.codex-nav-active {
    background: var(--sidebar-active-bg) !important;
    color: var(--text-on-dark) !important;
    border-left: 3px solid var(--sidebar-active-bar);
}
.codex-nav-active .mud-icon-root {
    color: var(--accent) !important;
}

/* Divisores dentro del sidebar */
.codex-drawer .mud-divider {
    border-color: var(--sidebar-divider) !important;
}

/* ---------- Main content ---------- */
.codex-main-content {
    background: var(--bg-canvas) !important;
}

/* ---------- Tab Bar ---------- */
.codex-tabbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    height: 40px;
    min-height: 40px;
}
.codex-tabbar-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
}
.codex-tab {
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    border-right: 1px solid var(--border);
    padding: 0 16px;
}
.codex-tab:hover {
    background: var(--surface-2);
    color: var(--text-primary);
}
.codex-tab-active {
    background: var(--bg-canvas) !important;
    color: var(--text-primary) !important;
    border-bottom: 2px solid var(--accent);
}
.codex-tab-active::after {
    background: var(--bg-canvas);
}
.codex-tab-close {
    color: var(--text-muted);
}
.codex-tab-close:hover {
    background: var(--danger-soft);
    color: var(--danger);
}
.codex-tab-active .codex-tab-close {
    color: var(--text-secondary);
}

/* ---------- Module landing / cards ---------- */
.module-card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-1);
    transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.module-card:hover {
    background: var(--surface) !important;
    border-color: var(--accent) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
}
.module-card:hover .mud-icon-root {
    color: var(--accent) !important;
}

/* ---------- Module-header (titulo de pagina v2: PESO 800 PROMINENTE) ---------- */
.module-landing .module-header .mud-typography-h4 {
    font-family: var(--font-display) !important;
    font-weight: var(--fw-black) !important;     /* 800 */
    font-size: var(--fs-2xl) !important;          /* 32px */
    letter-spacing: -0.02em !important;
    color: var(--text-primary) !important;
    line-height: var(--lh-tight) !important;
}
.module-landing .module-header .mud-typography-body2 {
    color: var(--text-muted) !important;
    font-size: var(--fs-sm) !important;
    margin-top: 2px;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-canvas);
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-sm);
    border: 2px solid var(--bg-canvas);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ---------- Home page ---------- */
.codex-home {
    background: linear-gradient(135deg, var(--surface) 0%, var(--bg-canvas) 100%) !important;
}
.codex-home-title {
    color: var(--text-primary) !important;
    text-shadow: none !important;
    font-weight: var(--fw-normal);
    letter-spacing: 14px;
}
.codex-home-subtitle {
    color: var(--text-muted) !important;
}
.codex-home-tagline {
    color: var(--text-secondary) !important;
}

/* ---------- CRUD tables ---------- */
.codex-table .mud-table-head .mud-table-cell {
    background: var(--surface-2) !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border) !important;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.codex-table .mud-table-body .mud-table-row:hover {
    background: var(--accent-soft) !important;
}
.codex-table .mud-table-body .mud-table-cell {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
}
.codex-table .mud-table-pagination {
    color: var(--text-secondary);
    border-top: 1px solid var(--border) !important;
}

/* MudTable card-style wrapper (cuando la tabla esta envuelta en una card) */
.codex-table.mud-table.mud-elevation-0 {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
}

/* ---------- Loading dot / spinner colors (CdxSavingOverlay) ---------- */
.cdx-dot {
    color: var(--accent) !important;
}

/* ---------- MudBlazor — Inputs OUTLINED (v2: radius 10px, fondo casi blanco) ---------- */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-strong) !important;
    border-radius: var(--radius-input) !important;
}
.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--text-muted) !important;
}
.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--accent) !important;
    border-width: 2px !important;
}

/* Fondo del input outlined */
.mud-input-outlined .mud-input-slot {
    background: var(--surface-3) !important;
    border-radius: var(--radius-input) !important;
}

/* Label del input outlined (float-up) */
.mud-input-label.mud-input-label-outlined {
    color: var(--text-secondary) !important;
}
.mud-input-label.mud-input-label-outlined.mud-input-label-inputcontrol {
    background: var(--surface) !important;   /* el chip blanco que tapa el border arriba del label shrink */
    padding: 0 4px;
}

/* Texto del valor del input */
.mud-input-outlined input,
.mud-input-outlined .mud-input-root {
    color: var(--text-primary) !important;
}

/* ---------- MudBlazor — Botones ---------- */
.mud-button-filled-primary {
    background: var(--accent) !important;
    color: var(--text-on-accent) !important;
    border-radius: var(--radius-input) !important;
    box-shadow: var(--shadow-1) !important;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: none;
}
.mud-button-filled-primary:hover {
    background: var(--accent-hover) !important;
    box-shadow: var(--shadow-2) !important;
}

.mud-button-root {
    border-radius: var(--radius-input) !important;
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    text-transform: none;
}

/* ---------- MudBlazor — MudPaper (cards default) ---------- */
.mud-paper.mud-elevation-0 {
    border-radius: var(--radius) !important;
}

/* ---------- MudBlazor — MudChip ---------- */
.mud-chip {
    border-radius: var(--radius-pill) !important;
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
}
.mud-chip.mud-chip-color-primary.mud-chip-variant-outlined {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* ---------- MudBlazor — MudAlert ---------- */
.mud-alert {
    border-radius: var(--radius) !important;
}

/* ---------- MudBlazor — MudDialog (modales) ---------- */
.mud-dialog {
    border-radius: var(--radius-lg) !important;
}

/* ---------- Vigencias timeline (Listas de Precios — light port) ---------- */
.vigencia-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-primary);
}
.vigencia-card:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}
.vigencia-card.seleccionada {
    background: var(--accent-soft);
    box-shadow: var(--shadow-2);
}
.vigencia-card.vigente { border-color: var(--success); }
.vigencia-card.proxima { border-color: var(--accent); }
.vigencia-titulo { color: var(--text-primary); }
.vigencia-rango { color: var(--text-secondary); }
.vigencia-meta { color: var(--text-muted); }

.badge-estado.vigente { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.badge-estado.proxima { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.badge-estado.pasada { background: var(--surface-3); color: var(--text-muted); border-color: var(--border); }
.badge-estado.inactiva { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); }