/* ╔══════════════════════════════════════════════════════════════════════════════════════════╗
   ║             LIGHT MODE — SECTION DEPTH & VISUAL HIERARCHY                               ║
   ║             Mejora la separación visual de secciones en modo claro                     ║
   ║             Técnica: fondo gris ceniza + tarjetas blancas elevadas                     ║
   ╚══════════════════════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════════
   1. FONDO DEL ÁREA DE CONTENIDO — ligeramente grisáceo
      Crea el "canvas" sobre el que flotan las tarjetas blancas.
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-main-content,
:root:not([data-vehitotal-theme]) .vt-main-content {
    background-color: #EFF2F7 !important;   /* gris azulado muy suave */
}

/* También el wrapper (visible en los costados del sidebar) */
[data-vehitotal-theme="light"] .vt-layout-body,
[data-vehitotal-theme="light"] .vt-layout-container,
:root:not([data-vehitotal-theme]) .vt-layout-body,
:root:not([data-vehitotal-theme]) .vt-layout-container {
    background-color: #EFF2F7 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOKENS COMPARTIDOS DE SECCIÓN — modo claro
   #F4F7FB = gris azulado muy suave (más oscuro que blanco,
   más claro que el fondo #EFF2F7 de la página)
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"],
:root:not([data-vehitotal-theme]) {
    --vt-section-bg:      #EDF1F7;
    --vt-section-head:    #E3EAF3;
    --vt-section-border:  rgba(203, 213, 225, 0.80);
    --vt-section-shadow:  0 1px 3px rgba(15, 23, 42, 0.07),
                          0 4px 12px rgba(15, 23, 42, 0.05);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. TARJETAS — fondo gris azulado suave
   ═══════════════════════════════════════════════════════════════════════ */

/* Tarjeta estándar VehiTotal */
[data-vehitotal-theme="light"] .vt-card,
:root:not([data-vehitotal-theme]) .vt-card {
    background-color: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

[data-vehitotal-theme="light"] .vt-card:hover,
:root:not([data-vehitotal-theme]) .vt-card:hover {
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.10),
        0 8px 24px rgba(15, 23, 42, 0.07) !important;
    border-color: rgba(203, 213, 225, 0.95) !important;
}

/* Tarjeta glass */
[data-vehitotal-theme="light"] .vt-card-glass,
:root:not([data-vehitotal-theme]) .vt-card-glass {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* Bootstrap .card */
[data-vehitotal-theme="light"] .card,
:root:not([data-vehitotal-theme]) .card {
    background-color: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.07),
        0 3px 8px rgba(15, 23, 42, 0.04) !important;
}

/* Glass card genérica */
[data-vehitotal-theme="light"] .glass-card,
:root:not([data-vehitotal-theme]) .glass-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* vt-glass-card (la más frecuente: 50 instancias) */
[data-vehitotal-theme="light"] .vt-glass-card,
:root:not([data-vehitotal-theme]) .vt-glass-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ── cl-card (Claims Detail) ─────────────────────────────────────── */
[data-vehitotal-theme="light"] .cl-card,
:root:not([data-vehitotal-theme]) .cl-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .cl-card__header,
:root:not([data-vehitotal-theme]) .cl-card__header {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* ── prd-panel (Productos) ───────────────────────────────────────── */
[data-vehitotal-theme="light"] .prd-panel,
:root:not([data-vehitotal-theme]) .prd-panel {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .prd-panel__header,
:root:not([data-vehitotal-theme]) .prd-panel__header {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* ── po-view-panel (Purchase Orders) ────────────────────────────── */
[data-vehitotal-theme="light"] .po-view-panel,
:root:not([data-vehitotal-theme]) .po-view-panel {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ── prd-form-section (Formularios producto) ─────────────────────── */
[data-vehitotal-theme="light"] .prd-form-section,
:root:not([data-vehitotal-theme]) .prd-form-section {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    border-radius: 12px;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .prd-form-section__header,
:root:not([data-vehitotal-theme]) .prd-form-section__header {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. SECCIONES DE PÁGINA (.vt-section)
   ═══════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-section,
:root:not([data-vehitotal-theme]) .vt-section {
    background: var(--vt-section-bg);
    border: 1px solid var(--vt-section-border);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: var(--vt-section-shadow);
}

/* Título de sección — acento izquierdo naranja */
[data-vehitotal-theme="light"] .vt-section-title,
:root:not([data-vehitotal-theme]) .vt-section-title {
    padding-left: 0.875rem;
    border-left: 3px solid #f8790c;
    color: #0F172A;
}

[data-vehitotal-theme="light"] .vt-section-description,
:root:not([data-vehitotal-theme]) .vt-section-description {
    color: #475569;
}

/* ═══════════════════════════════════════════════════════════════════
   4. KPI CARDS — blancas y bien definidas
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .kpi-card,
[data-vehitotal-theme="light"] .vt-kpi-card,
[data-vehitotal-theme="light"] .po-kpi-card,
:root:not([data-vehitotal-theme]) .kpi-card,
:root:not([data-vehitotal-theme]) .vt-kpi-card,
:root:not([data-vehitotal-theme]) .po-kpi-card {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.80) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.07),
        0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-vehitotal-theme="light"] .po-kpi-card:hover,
:root:not([data-vehitotal-theme]) .po-kpi-card:hover {
    box-shadow:
        0 4px 16px rgba(15, 23, 42, 0.12),
        0 2px 6px rgba(15, 23, 42, 0.06) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════
   5. TABLAS — fondo blanco con cabecera gris suave
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-table-container,
[data-vehitotal-theme="light"] .po-table-container,
:root:not([data-vehitotal-theme]) .vt-table-container,
:root:not([data-vehitotal-theme]) .po-table-container {
    background: #FFFFFF !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

[data-vehitotal-theme="light"] .po-table thead th,
:root:not([data-vehitotal-theme]) .po-table thead th {
    background: #F8FAFC !important;
    border-bottom: 2px solid #E2E8F0 !important;
}

[data-vehitotal-theme="light"] .vt-table thead,
:root:not([data-vehitotal-theme]) .vt-table thead {
    background: #F8FAFC !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. CONTENEDORES DE FILTROS Y BARRAS SECUNDARIAS
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .po-filter-bar,
:root:not([data-vehitotal-theme]) .po-filter-bar {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.72) !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. MODALES — blancos y con sombra pronunciada
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-modal,
:root:not([data-vehitotal-theme]) .vt-modal {
    background: #FFFFFF !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER — fondo blanco sólido para que destaque sobre el fondo gris
   El header usa background: var(--vt-glass-bg) = rgba(255,255,255,.7)
   transparente, que se funde con #EFF2F7 del container. Lo fijamos.
   ═══════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-header,
:root:not([data-vehitotal-theme]) .vt-header {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8. SIDEBAR — fondo ligeramente diferente al contenido
   ═══════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-layout-sidebar,
:root:not([data-vehitotal-theme]) .vt-layout-sidebar {
    background-color: #FFFFFF !important; /* sidebar blanco, contraste con gris del contenido */
    box-shadow: 1px 0 0 rgba(203, 213, 225, 0.7), 4px 0 20px rgba(15, 23, 42, 0.05) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   9. PAGE HEADER (.vt-page-header)
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-page-header,
:root:not([data-vehitotal-theme]) .vt-page-header {
    background: #FFFFFF !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.07),
        0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   10. TABS (contenedor) — elevado sobre el fondo gris
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-tabs,
:root:not([data-vehitotal-theme]) .vt-tabs {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(203, 213, 225, 0.7) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.07),
        0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   11. DASHBOARD — SUB-NAV STICKY
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-dash-tabnav,
:root:not([data-vehitotal-theme]) .vt-dash-tabnav {
    background: rgba(239, 242, 247, 0.97) !important;
    border-bottom-color: rgba(203, 213, 225, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   12. DROPDOWNS Y MENÚS FLOTANTES
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-dropdown-menu,
:root:not([data-vehitotal-theme]) .vt-dropdown-menu {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.13) !important;
}

[data-vehitotal-theme="light"] .po-actions-dropdown,
:root:not([data-vehitotal-theme]) .po-actions-dropdown {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   13. PANEL DETAIL (slide-in)  
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .po-detail-panel,
:root:not([data-vehitotal-theme]) .po-detail-panel {
    background: #FFFFFF !important;
    border-left-color: rgba(203, 213, 225, 0.8) !important;
    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   14. STAT / SUMMARY CARDS EXTRA
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-stat-card,
:root:not([data-vehitotal-theme]) .vt-stat-card {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.75) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.07),
        0 2px 8px rgba(15, 23, 42, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   15. LIST GROUP
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-list-group,
:root:not([data-vehitotal-theme]) .vt-list-group {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.72) !important;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 2px 6px rgba(15, 23, 42, 0.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   16. BREADCRUMB / PAGE-HEADER BACKGROUND
      Para módulos que usan .po-hero en modo claro
   ═══════════════════════════════════════════════════════════════════════ */

/* El .po-hero hero ya tiene su propio estilo light-mode bien definido  */
/* Aquí sólo reforzamos el contraste del wrapper del hero */
[data-vehitotal-theme="light"] .vt-dashboard-main,
:root:not([data-vehitotal-theme]) .vt-dashboard-main {
    /* hereda el fondo del main-content — sin override adicional */
}

/* ═══════════════════════════════════════════════════════════════════════
   17. GRID KPI DASHBOARD — asegurar fondo blanco en cada sección     
   ═══════════════════════════════════════════════════════════════════════ */

/* El .office-kpi-grid y .po-kpi-grid no necesitan fondo propio,
   pero los contenedores de sección dentro del dashboard sí */
[data-vehitotal-theme="light"] .vt-dashboard-section,
:root:not([data-vehitotal-theme]) .vt-dashboard-section {
    background: #FFFFFF;
    border: 1px solid rgba(203, 213, 225, 0.65);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 2px 8px rgba(15, 23, 42, 0.04);
}

/* ═══════════════════════════════════════════════════════════════════════
   18. BODY / HTML — transición suave al cambiar de tema
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] body,
:root:not([data-vehitotal-theme]) body {
    background-color: #EFF2F7 !important;
}


/* ╔══════════════════════════════════════════════════════════════════════════════════════════╗
   ║   SECCIÓN EXTENDIDA — ESTANDARIZACIÓN GLOBAL                                            ║
   ║   Aplica el mismo tono gris ceniza + tarjetas elevadas en blanco a TODOS los            ║
   ║   módulos del sitio, siguiendo el estándar establecido en Claims/Detail.                ║
   ║   Técnica: --vt-section-bg para las zonas de contenido, #FFFFFF para KPIs y            ║
   ║   elementos focales; cabeceras en --vt-section-head para contraste suave.              ║
   ╚══════════════════════════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════════════
   19. MÓDULO FORESIGHT — fsd-card, fs-method-card, fs-kpi-card, fs-chart-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .fsd-card,
:root:not([data-vehitotal-theme]) .fsd-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .fsd-card__hdr,
:root:not([data-vehitotal-theme]) .fsd-card__hdr {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

[data-vehitotal-theme="light"] .fs-chart-card,
:root:not([data-vehitotal-theme]) .fs-chart-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

[data-vehitotal-theme="light"] .fs-method-card,
:root:not([data-vehitotal-theme]) .fs-method-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .fs-method-card:hover,
:root:not([data-vehitotal-theme]) .fs-method-card:hover {
    border-color: rgba(203, 213, 225, 0.95) !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.07) !important;
}

[data-vehitotal-theme="light"] .fs-kpi-card,
:root:not([data-vehitotal-theme]) .fs-kpi-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   20. MÓDULO ÓRDENES DE COMPRA — od-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .od-card,
:root:not([data-vehitotal-theme]) .od-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .od-card__header,
:root:not([data-vehitotal-theme]) .od-card__header {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   21. MÓDULO REPORTES — rpt-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .rpt-card,
:root:not([data-vehitotal-theme]) .rpt-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .rpt-card:hover,
:root:not([data-vehitotal-theme]) .rpt-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   22. MÓDULO IMPORTACIONES — import-type-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .import-type-card,
:root:not([data-vehitotal-theme]) .import-type-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .import-type-card:hover,
:root:not([data-vehitotal-theme]) .import-type-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   23. MÓDULO PLANTILLAS — tpl-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .tpl-card,
:root:not([data-vehitotal-theme]) .tpl-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .tpl-card:hover,
:root:not([data-vehitotal-theme]) .tpl-card:hover {
    box-shadow: 0 4px 14px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   24. MÓDULO ADMINISTRACIÓN — role-card, settings-section
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .role-card,
:root:not([data-vehitotal-theme]) .role-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .role-card:hover,
:root:not([data-vehitotal-theme]) .role-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06) !important;
    transform: translateY(-2px);
}

[data-vehitotal-theme="light"] .settings-section,
:root:not([data-vehitotal-theme]) .settings-section {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    border-radius: 14px;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   25. MÓDULO PERFIL — prof-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .prof-card,
:root:not([data-vehitotal-theme]) .prof-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .prof-card__hd,
:root:not([data-vehitotal-theme]) .prof-card__hd {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   26. KPI CARDS EXTENDIDAS — claims-kpi-card, cr-kpi-card, cm-kpi-card,
       calc-kpi-card, fs-kpi-card, st-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .claims-kpi-card,
[data-vehitotal-theme="light"] .cr-kpi-card,
[data-vehitotal-theme="light"] .cm-kpi-card,
[data-vehitotal-theme="light"] .calc-kpi-card,
[data-vehitotal-theme="light"] .st-card,
:root:not([data-vehitotal-theme]) .claims-kpi-card,
:root:not([data-vehitotal-theme]) .cr-kpi-card,
:root:not([data-vehitotal-theme]) .cm-kpi-card,
:root:not([data-vehitotal-theme]) .calc-kpi-card,
:root:not([data-vehitotal-theme]) .st-card {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.80) !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.07), 0 2px 8px rgba(15,23,42,.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   27. TABLAS GENERALES — office-table, srch-table, bills-table,
       claim-products-table, err-table, cust-oc-table
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .office-table-wrap,
[data-vehitotal-theme="light"] .bills-table-wrap,
[data-vehitotal-theme="light"] .rt-wrap,
:root:not([data-vehitotal-theme]) .office-table-wrap,
:root:not([data-vehitotal-theme]) .bills-table-wrap,
:root:not([data-vehitotal-theme]) .rt-wrap {
    background: #FFFFFF !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04) !important;
    overflow: hidden;
}

/* Cabeceras de tabla = gris muy suave para contraste con filas blancas */
[data-vehitotal-theme="light"] .office-table thead th,
[data-vehitotal-theme="light"] .bills-table thead th,
[data-vehitotal-theme="light"] .srch-table thead th,
[data-vehitotal-theme="light"] .claim-products-table thead th,
[data-vehitotal-theme="light"] .err-table thead th,
[data-vehitotal-theme="light"] .cust-oc-table thead th,
:root:not([data-vehitotal-theme]) .office-table thead th,
:root:not([data-vehitotal-theme]) .bills-table thead th,
:root:not([data-vehitotal-theme]) .srch-table thead th,
:root:not([data-vehitotal-theme]) .claim-products-table thead th,
:root:not([data-vehitotal-theme]) .err-table thead th,
:root:not([data-vehitotal-theme]) .cust-oc-table thead th {
    background: #F8FAFC !important;
    border-bottom: 2px solid #E2E8F0 !important;
    color: #475569 !important;
}

/* Filas alternadas — par blanco, impar gris muy suave (estándar de Claims) */
[data-vehitotal-theme="light"] .office-table tbody tr:nth-child(odd) td,
[data-vehitotal-theme="light"] .bills-table tbody tr:nth-child(odd) td,
[data-vehitotal-theme="light"] .srch-table tbody tr:nth-child(odd) td,
[data-vehitotal-theme="light"] .claim-products-table tbody tr:nth-child(odd) td,
[data-vehitotal-theme="light"] .err-table tbody tr:nth-child(odd) td,
[data-vehitotal-theme="light"] .cust-oc-table tbody tr:nth-child(odd) td,
:root:not([data-vehitotal-theme]) .office-table tbody tr:nth-child(odd) td,
:root:not([data-vehitotal-theme]) .bills-table tbody tr:nth-child(odd) td,
:root:not([data-vehitotal-theme]) .srch-table tbody tr:nth-child(odd) td,
:root:not([data-vehitotal-theme]) .claim-products-table tbody tr:nth-child(odd) td,
:root:not([data-vehitotal-theme]) .err-table tbody tr:nth-child(odd) td,
:root:not([data-vehitotal-theme]) .cust-oc-table tbody tr:nth-child(odd) td {
    background-color: #ffffff !important;
}
[data-vehitotal-theme="light"] .office-table tbody tr:nth-child(even) td,
[data-vehitotal-theme="light"] .bills-table tbody tr:nth-child(even) td,
[data-vehitotal-theme="light"] .srch-table tbody tr:nth-child(even) td,
[data-vehitotal-theme="light"] .claim-products-table tbody tr:nth-child(even) td,
[data-vehitotal-theme="light"] .err-table tbody tr:nth-child(even) td,
[data-vehitotal-theme="light"] .cust-oc-table tbody tr:nth-child(even) td,
:root:not([data-vehitotal-theme]) .office-table tbody tr:nth-child(even) td,
:root:not([data-vehitotal-theme]) .bills-table tbody tr:nth-child(even) td,
:root:not([data-vehitotal-theme]) .srch-table tbody tr:nth-child(even) td,
:root:not([data-vehitotal-theme]) .claim-products-table tbody tr:nth-child(even) td,
:root:not([data-vehitotal-theme]) .err-table tbody tr:nth-child(even) td,
:root:not([data-vehitotal-theme]) .cust-oc-table tbody tr:nth-child(even) td {
    background-color: #f1f5f9 !important;
}

/* Hover de filas — acento índigo suave (igual que Claims) */
[data-vehitotal-theme="light"] .office-table tbody tr:hover td,
[data-vehitotal-theme="light"] .bills-table tbody tr:hover td,
[data-vehitotal-theme="light"] .srch-table tbody tr:hover td,
[data-vehitotal-theme="light"] .claim-products-table tbody tr:hover td,
[data-vehitotal-theme="light"] .err-table tbody tr:hover td,
[data-vehitotal-theme="light"] .cust-oc-table tbody tr:hover td,
:root:not([data-vehitotal-theme]) .office-table tbody tr:hover td,
:root:not([data-vehitotal-theme]) .bills-table tbody tr:hover td,
:root:not([data-vehitotal-theme]) .srch-table tbody tr:hover td,
:root:not([data-vehitotal-theme]) .claim-products-table tbody tr:hover td,
:root:not([data-vehitotal-theme]) .err-table tbody tr:hover td,
:root:not([data-vehitotal-theme]) .cust-oc-table tbody tr:hover td {
    background-color: rgba(99,102,241,.07) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   28. DASHBOARD — vt-dash-panel y srch-summary-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .vt-dash-panel,
:root:not([data-vehitotal-theme]) .vt-dash-panel {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

[data-vehitotal-theme="light"] .srch-summary-card,
:root:not([data-vehitotal-theme]) .srch-summary-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   29. FORMULARIOS EXTENDIDOS — rc-form-section, wz-panel, wizard-panel
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .rc-form-section,
:root:not([data-vehitotal-theme]) .rc-form-section {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    border-radius: 12px;
    box-shadow: var(--vt-section-shadow) !important;
}

[data-vehitotal-theme="light"] .wz-panel,
:root:not([data-vehitotal-theme]) .wz-panel {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   30. MÓDULO CARTERA — pl-card, brand-panel, bill-panel
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .pl-card,
:root:not([data-vehitotal-theme]) .pl-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

[data-vehitotal-theme="light"] .brand-panel,
:root:not([data-vehitotal-theme]) .brand-panel {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

[data-vehitotal-theme="light"] .bill-panel,
:root:not([data-vehitotal-theme]) .bill-panel {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   31. MÓDULO CLIENTES — cust-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .cust-card,
:root:not([data-vehitotal-theme]) .cust-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .cust-card:hover,
:root:not([data-vehitotal-theme]) .cust-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06) !important;
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   32. MÓDULO CALC/RECIBOS DE CAJA — calc-card, cm-card
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .calc-card,
[data-vehitotal-theme="light"] .cm-card,
:root:not([data-vehitotal-theme]) .calc-card,
:root:not([data-vehitotal-theme]) .cm-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   33. MÓDULO CLAIM — claim-type-card, cl-thumb-card
   ══════���════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .claim-type-card,
:root:not([data-vehitotal-theme]) .claim-type-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}
[data-vehitotal-theme="light"] .claim-type-card:hover,
:root:not([data-vehitotal-theme]) .claim-type-card:hover {
    box-shadow: 0 4px 16px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.06) !important;
}

[data-vehitotal-theme="light"] .cl-thumb-card,
:root:not([data-vehitotal-theme]) .cl-thumb-card {
    background: #FFFFFF !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   34. BÚSQUEDA GLOBAL — srch-panel (ya glass-card, pero refuerzo borders)
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .srch-panel,
:root:not([data-vehitotal-theme]) .srch-panel {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   35. WRAPPER CALENDARIO / FECHAS — po-date-wrap, po-search-wrap,
       po-ctrl-wrap, wz-preview-wrap
   ═══════════════════════════════════════════════════════════════════════ */

[data-vehitotal-theme="light"] .po-date-wrap,
[data-vehitotal-theme="light"] .po-search-wrap,
[data-vehitotal-theme="light"] .po-ctrl-wrap,
[data-vehitotal-theme="light"] .wz-preview-wrap,
:root:not([data-vehitotal-theme]) .po-date-wrap,
:root:not([data-vehitotal-theme]) .po-search-wrap,
:root:not([data-vehitotal-theme]) .po-ctrl-wrap,
:root:not([data-vehitotal-theme]) .wz-preview-wrap {
    background: #FFFFFF !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    box-shadow: 0 1px 4px rgba(15,23,42,.06) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   rc-card — Recibos de Caja (Document + Inspector pattern)
   Sigue el mismo tratamiento que cl-card (Reclamaciones)
   ═══════════════════════════════════════════════════════════════════════ */

/* Card principal (secciones del documento) */
[data-vehitotal-theme="light"] .rc-card,
:root:not([data-vehitotal-theme]) .rc-card {
    background: var(--vt-section-bg) !important;
    border: 1px solid var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* Cabecera de card — tono ligeramente más oscuro */
[data-vehitotal-theme="light"] .rc-card__head,
:root:not([data-vehitotal-theme]) .rc-card__head {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* Body de card — mismo fondo que cl-card (estandar Claims) */
[data-vehitotal-theme="light"] .rc-card__body,
:root:not([data-vehitotal-theme]) .rc-card__body {
    background: var(--vt-section-bg) !important;  /* #EDF1F7 — igual que cl-card en Claims */
}

/* Barra de tabs de facturas */
[data-vehitotal-theme="light"] .rc-bills-tabs,
:root:not([data-vehitotal-theme]) .rc-bills-tabs {
    background: var(--vt-section-head) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* Paneles internos de factura */
[data-vehitotal-theme="light"] .rc-bill-pane,
:root:not([data-vehitotal-theme]) .rc-bill-pane {
    background: #FFFFFF !important;
}

/* Summary del accordion de deducciones */
[data-vehitotal-theme="light"] .rc-deductions summary,
:root:not([data-vehitotal-theme]) .rc-deductions summary {
    background: #F1F5FB !important;
    border-color: rgba(203, 213, 225, 0.72) !important;
}
[data-vehitotal-theme="light"] .rc-deductions,
:root:not([data-vehitotal-theme]) .rc-deductions {
    border-color: rgba(203, 213, 225, 0.72) !important;
}
[data-vehitotal-theme="light"] .rc-deductions__body,
:root:not([data-vehitotal-theme]) .rc-deductions__body {
    background: #FFFFFF !important;
    border-top-color: rgba(203, 213, 225, 0.72) !important;
}

/* Inputs monetarios — fondo blanco explícito */
[data-vehitotal-theme="light"] .rc-input,
:root:not([data-vehitotal-theme]) .rc-input {
    background: #FFFFFF !important;
    border-color: rgba(203, 213, 225, 0.90) !important;
    color: #0F172A !important;
}
[data-vehitotal-theme="light"] .rc-input:focus,
:root:not([data-vehitotal-theme]) .rc-input:focus {
    border-color: #f8790c !important;
    box-shadow: 0 0 0 3px rgba(248,121,12,.12) !important;
    background: #FFFFFF !important;
}
[data-vehitotal-theme="light"] .rc-input[readonly],
:root:not([data-vehitotal-theme]) .rc-input[readonly] {
    background: #F1F5FB !important;
    color: #475569 !important;
}

/* Inspector — timeline, command stack y audit */
[data-vehitotal-theme="light"] .rc-timeline,
[data-vehitotal-theme="light"] .rc-cmd-stack,
[data-vehitotal-theme="light"] .rc-audit,
:root:not([data-vehitotal-theme]) .rc-timeline,
:root:not([data-vehitotal-theme]) .rc-cmd-stack,
:root:not([data-vehitotal-theme]) .rc-audit {
    background: var(--vt-section-bg) !important;
    border-color: var(--vt-section-border) !important;
    box-shadow: var(--vt-section-shadow) !important;
}

/* Cabecera del panel de acciones — igual que cl-card__header en Claims */
[data-vehitotal-theme="light"] .rc-cmd-stack__head,
:root:not([data-vehitotal-theme]) .rc-cmd-stack__head {
    background: var(--vt-section-head) !important;  /* #E3EAF3 */
    border-bottom-color: var(--vt-section-border) !important;
}

/* Modal panel */
[data-vehitotal-theme="light"] .rc-modal__panel,
:root:not([data-vehitotal-theme]) .rc-modal__panel {
    background: #FFFFFF !important;
    border: 1px solid rgba(203, 213, 225, 0.72) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22) !important;
}

/* Tab activo — acento naranja */
[data-vehitotal-theme="light"] .rc-bill-tab,
:root:not([data-vehitotal-theme]) .rc-bill-tab {
    background: transparent !important;
    border-color: rgba(203, 213, 225, 0.72) !important;
    color: #475569 !important;
}
[data-vehitotal-theme="light"] .rc-bill-tab:hover,
:root:not([data-vehitotal-theme]) .rc-bill-tab:hover {
    background: #FFFFFF !important;
    border-color: rgba(248,121,12,.35) !important;
}
[data-vehitotal-theme="light"] .rc-bill-tab.is-active,
:root:not([data-vehitotal-theme]) .rc-bill-tab.is-active {
    background: #FFFFFF !important;
    border-color: #fed7aa !important;
    color: #c2410c !important;
    box-shadow: inset 0 -2px 0 #f8790c, 0 1px 4px rgba(248,121,12,.15) !important;
}

/* Comandos de acción — fondo blanco en modo claro */
[data-vehitotal-theme="light"] .rc-cmd--ghost,
:root:not([data-vehitotal-theme]) .rc-cmd--ghost {
    background: #FFFFFF !important;
    color: #374151 !important;
    border-color: rgba(203, 213, 225, 0.90) !important;
}
[data-vehitotal-theme="light"] .rc-cmd--ghost:hover,
:root:not([data-vehitotal-theme]) .rc-cmd--ghost:hover {
    background: #F1F5FB !important;
}
[data-vehitotal-theme="light"] .rc-cmd--warning,
:root:not([data-vehitotal-theme]) .rc-cmd--warning {
    background: #FFFBEB !important;
}
[data-vehitotal-theme="light"] .rc-cmd--danger,
:root:not([data-vehitotal-theme]) .rc-cmd--danger {
    background: #FFF5F5 !important;
}

/* Tarjeta cliente (banner superior de la card) */
[data-vehitotal-theme="light"] .rc-customer,
:root:not([data-vehitotal-theme]) .rc-customer {
    background: linear-gradient(135deg, rgba(248,121,12,.06), rgba(251,146,60,.03)) !important;
    border-bottom-color: var(--vt-section-border) !important;
}

/* Toolbar código + estado */
[data-vehitotal-theme="light"] .rc-toolbar__code,
:root:not([data-vehitotal-theme]) .rc-toolbar__code {
    color: #0F172A !important;
}