/**
 * Tema oscuro: valores propios; no usa tokens de color ni theme-light.
 */
[data-theme="dark"] {
    --color-granate: #7a2525;
    --color-crema: #1e1a14;
    --color-dorado: #e0b070;
    --color-blanco: #f0ebe0;
    --color-blanco-rgb: 240, 235, 224;
    --color-granate-rgb: 122, 37, 37;
    --color-crema-rgb: 30, 26, 20;
    --color-dorado-rgb: 224, 176, 112;
    --color-granate-hover: #8f3030;
    --color-granate-active: #5c1515;
    --color-granate-deep: #4a1010;
    --color-text-default: var(--color-blanco);
    --color-text-muted: rgba(var(--color-blanco-rgb), 0.72);
    /* Error legible sobre fondo oscuro, anclado a la familia granate */
    --color-danger: #c07070;
    --color-danger-rgb: 192, 112, 112;
    /* Informativo (no es marca): Blue 200 sobre carbon. Claro usa #1565c0 */
    --color-azul: #90caf9;
    --color-azul-rgb: 144, 202, 249;

    /* Verde de conformidad, aclarado: #2e7d32 sobre fondo oscuro no llega al 3:1 que
       pide WCAG 1.4.11 para elementos no textuales. */
    --color-exito: #81c784;
    --color-exito-rgb: 129, 199, 132;
    --color-info: var(--color-azul);
    --color-info-rgb: var(--color-azul-rgb);
    --color1: var(--color-granate);
    --color2: var(--color-granate-hover);
    --color3: var(--color-granate-active);

    --overlay-white-06: rgba(255, 255, 255, 0.06);
    --overlay-white-08: rgba(255, 255, 255, 0.08);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-12: rgba(255, 255, 255, 0.12);
    --overlay-white-15: rgba(255, 255, 255, 0.15);
    --overlay-backdrop: rgba(0, 0, 0, 0.5);

    --shadow-card-dark: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-sidebar-panel: 8px 0 32px rgba(0, 0, 0, 0.3);
    --shadow-dropdown-panel: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-card-brand: 0 4px 12px rgba(122, 37, 37, 0.25);

    --scrollbar-thumb-neutral: rgba(255, 255, 255, 0.12);

    /* Componente .scroll — thumb granate legible sobre fondo oscuro */
    --scroll-track: rgba(255, 255, 255, 0.06);
    --scroll-thumb: rgba(var(--color-granate-rgb), 0.75);
    --scroll-thumb-hover: rgba(var(--color-dorado-rgb), 0.85);
    --scroll-flecha-arriba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e0b070' fill-opacity='0.7' d='M5 0L10 6H0z'/%3E%3C/svg%3E");
    --scroll-flecha-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23e0b070' fill-opacity='0.7' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    --scroll-flecha-izquierda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath fill='%23e0b070' fill-opacity='0.7' d='M6 0v10L0 5z'/%3E%3C/svg%3E");
    --scroll-flecha-derecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath fill='%23e0b070' fill-opacity='0.7' d='M0 0l6 5-6 5z'/%3E%3C/svg%3E");

    --ce-emergente-radio: 0.5rem;
    --ce-emergente-sombra: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
    --ce-emergente-line: rgba(255, 255, 255, 0.12);
    --ce-emergente-sombra-panel-oscura: 0 0.4rem 1.15rem rgba(0, 0, 0, 0.35);

    --panel-iconbar-bg: #3d0c0c;
    --panel-category-bg: #2d0808;
    --panel-category-bg-hover: var(--overlay-white-06);
    --panel-category-bg-active: #2d0808;
    --panel-text: rgba(var(--color-blanco-rgb), 0.9);
    --panel-text-hover: var(--color-blanco);
    --panel-text-active: var(--color-blanco);
    --panel-muted: rgba(var(--color-blanco-rgb), 0.65);
    --panel-category-header-color: var(--color-blanco);
    --panel-category-nav-heading-color: rgba(var(--color-blanco-rgb), 0.58);
    --panel-nav-section-border: rgba(var(--color-blanco-rgb), 0.14);
    --panel-search-border: var(--overlay-white-08);
    --panel-search-placeholder: rgba(var(--color-blanco-rgb), 0.45);
    --panel-sidebar-menu-card-bg: #3d1212;
    --panel-sidebar-menu-card-text: rgba(var(--color-blanco-rgb), 0.95);
    --panel-sidebar-menu-card-icon: var(--color-dorado);
    --panel-sidebar-submenu-muted: rgba(var(--color-blanco-rgb), 0.55);
    --panel-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.06);
    --panel-sidebar-submenu-active-border: var(--color-dorado);
    --panel-sidebar-submenu-scrollbar: rgba(255, 255, 255, 0.12);
    --panel-border: rgba(var(--color-blanco-rgb), 0.12);
    --panel-accent: var(--color-dorado);
    --panel-accent-soft: rgba(var(--color-dorado-rgb), 0.18);
    --panel-sidebar-tip-bg: #1a0505;
    --panel-sidebar-tip-text: var(--color-blanco);
    --panel-sidebar-tip-border: rgba(var(--color-dorado-rgb), 0.4);
    --panel-sidebar-tip-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
    --panel-sidebar-icon-color: var(--color-blanco);
    --panel-search-icon-color: var(--color-dorado);
    --panel-search-icon-sidebar: rgba(var(--color-blanco-rgb), 0.78);
    --panel-search-border-active: var(--color-dorado);
    --panel-topbar1-bg: #2d0808;
    --panel-topbar2-bg: #3d0c0c;
    --panel-topbar2-border: var(--overlay-white-08);
    --panel-topbar2-crumb-color: rgba(var(--color-blanco-rgb), 0.88);
    --panel-topbar2-crumb-active-color: var(--color-blanco);
    --panel-topbar2-crumb-sep-color: rgba(var(--color-blanco-rgb), 0.5);
    --panel-topbar1-icon-accent: var(--color-dorado);
    --panel-main-bg: #12100d;
    --panel-main-text: rgba(var(--color-blanco-rgb), 0.92);
    --panel-main-text-muted: rgba(var(--color-blanco-rgb), 0.72);
    --datatable-row-seccion-bg: rgba(var(--color-blanco-rgb), 0.06);
    --panel-dropdown-bg: #2d0808;
    --panel-dropdown-border: rgba(var(--color-blanco-rgb), 0.12);
    --panel-dropdown-text: var(--color-blanco);
    --panel-dropdown-text-muted: rgba(var(--color-blanco-rgb), 0.78);
    --panel-cta-from: var(--color-granate-active);
    --panel-cta-to: var(--color-granate);
    --panel-cta-title-color: var(--color-dorado);
    --panel-cta-text-color: rgba(var(--color-blanco-rgb), 0.9);
    --panel-cta-link-color: var(--color-dorado);
    --panel-card-bg: #2d0808;
    --panel-card-bg-from: #2d0808;
    --panel-card-bg-to: #3d0c0c;
    --panel-card-border: var(--color-dorado);
    --panel-card-shadow: var(--shadow-card-dark);
    --panel-card-title-color: var(--color-blanco);
    --panel-card-text-color: rgba(var(--color-blanco-rgb), 0.88);
    --panel-heading-color: #ffffff;
    --panel-logo-accent: var(--color-blanco);

    /* Formularios flotantes (main, drawer, modales) */
    --panel-floating-bg: rgba(var(--color-blanco-rgb), 0.08);
    --panel-floating-text: var(--color-blanco);
    --panel-floating-muted: var(--panel-main-text-muted);
    --panel-floating-border: var(--overlay-white-10);
    --panel-floating-border-hover: var(--overlay-white-15);
    --panel-floating-focus: var(--color-granate);
    --panel-floating-shadow: 0 0 0 3px rgba(var(--color-granate-rgb), 0.26);
    --panel-floating-label-focus: var(--color-dorado);
    --panel-floating-disabled-bg: rgba(var(--color-blanco-rgb), 0.06);

    /* Superficie elevada (listas desplegables drawer, panel x-selector; neutra) */
    --panel-surface-elevated: #23201c;
    --panel-selector-combobox-bg: var(--panel-floating-bg);
    --panel-selector-combobox-border: var(--panel-floating-border);
    --panel-selector-combobox-border-hover: var(--panel-floating-border-hover);
    --panel-selector-panel-bg: var(--panel-surface-elevated);
    --panel-selector-panel-border: var(--panel-border);
    --panel-selector-panel-shadow: var(--shadow-card-dark);
    --panel-selector-placeholder: var(--panel-main-text-muted);
    --panel-selector-option-text: var(--color-blanco);
    --panel-selector-option-hover-bg: rgba(var(--color-blanco-rgb), 0.08);
    --panel-selector-option-active-bg: var(--color-granate-active);
    --panel-selector-option-active-text: var(--color-blanco);
    --panel-selector-etiqueta-flotante-bg: var(--panel-main-bg);
    --panel-selector-etiqueta-flotante-color: var(--color-dorado);
    --panel-selector-etiqueta-flotante-focus: var(--color-dorado);

    /* Drawer lateral (misma superficie oscura que el panel) */
    --panel-drawer-bg: var(--panel-main-bg);
    --panel-drawer-text: var(--panel-main-text);
    --panel-drawer-text-muted: var(--panel-main-text-muted);
    --panel-drawer-border: var(--panel-border);
    --panel-drawer-heading-color: var(--panel-heading-color);
    --panel-drawer-footer-shadow: 0 -0.2rem 0.5rem rgba(0, 0, 0, 0.28);
    --panel-drawer-footer-padding-top: var(--space-4, 1rem);
    --panel-drawer-footer-padding-x: var(--bs-offcanvas-padding-x, 1rem);
    --panel-drawer-footer-padding-bottom: calc(var(--space-6, 1.5rem) + env(safe-area-inset-bottom, 0px));
    --panel-drawer-chat-gap-pie: var(--space-5, 1.25rem);
    --panel-drawer-floating-bg: var(--panel-floating-bg);
    --panel-drawer-floating-text: var(--panel-floating-text);
    --panel-drawer-floating-muted: var(--panel-floating-muted);
    --panel-drawer-floating-border: var(--panel-floating-border);
    --panel-drawer-floating-border-hover: var(--panel-floating-border-hover);
    --panel-drawer-floating-focus: var(--panel-floating-focus);
    --panel-drawer-floating-shadow: var(--panel-floating-shadow);
    --panel-drawer-floating-label-focus: var(--panel-floating-label-focus);
    --panel-drawer-floating-disabled-bg: var(--panel-floating-disabled-bg);
    --panel-drawer-btn-secondary-bg: transparent;
    --panel-drawer-btn-secondary-border: rgba(var(--color-blanco-rgb), 0.38);
    --panel-drawer-btn-secondary-color: rgba(var(--color-blanco-rgb), 0.9);
    --panel-drawer-btn-secondary-hover-bg: rgba(var(--color-blanco-rgb), 0.12);
    --panel-drawer-btn-secondary-active-bg: rgba(var(--color-blanco-rgb), 0.18);
    --panel-drawer-close-bg: transparent;
    --panel-drawer-close-border: rgba(var(--color-blanco-rgb), 0.55);
    --panel-drawer-close-icon: var(--color-blanco);
    --panel-drawer-close-hover-bg: rgba(var(--color-blanco-rgb), 0.1);
    --panel-drawer-close-hover-border: var(--color-blanco);
    --panel-drawer-close-hover-icon: var(--color-blanco);
    --panel-drawer-picker-bg: var(--panel-surface-elevated);
    --panel-drawer-picker-option-text: rgba(var(--color-blanco-rgb), 0.92);
    --panel-drawer-picker-option-bg-active: var(--color-granate-active);
    --panel-drawer-picker-option-text-active: var(--color-blanco);
    --panel-drawer-field-readonly-bg: rgba(var(--color-blanco-rgb), 0.06);

    /* Modales del panel */
    --panel-modal-bg: var(--panel-card-bg);
    --panel-modal-text: var(--color-blanco);
    --panel-modal-text-muted: var(--panel-main-text-muted);
    --panel-modal-border: var(--panel-border);
    --panel-modal-btn-close-filter: invert(1) grayscale(100%) brightness(200%);
    --panel-modal-btn-outline-color: rgba(var(--color-blanco-rgb), 0.9);
    --panel-modal-btn-outline-border: rgba(var(--color-blanco-rgb), 0.38);
    --panel-modal-btn-outline-bg: transparent;
    --panel-modal-btn-outline-hover-color: var(--color-blanco);
    --panel-modal-btn-outline-hover-bg: rgba(var(--color-blanco-rgb), 0.12);
    --panel-modal-btn-outline-hover-border: rgba(var(--color-blanco-rgb), 0.5);
    --panel-modal-btn-outline-active-bg: rgba(var(--color-blanco-rgb), 0.18);
    --panel-modal-badge-bg: rgba(var(--color-blanco-rgb), 0.18);
    --panel-modal-badge-text: var(--color-blanco);

    /* Filtros de listado (x-filtros-listado, combobox pill) */
    --panel-filtro-bg: rgba(var(--color-blanco-rgb), 0.08);
    --panel-filtro-field-bg: transparent;
    --panel-filtro-label-bg: rgba(var(--color-blanco-rgb), 0.1);
    --panel-filtro-label-color: var(--color-dorado);
    --panel-filtro-border: var(--overlay-white-15);
    --panel-filtro-border-hover: rgba(var(--color-blanco-rgb), 0.22);
    --panel-filtro-value-text: var(--color-blanco);
    --panel-filtro-picker-bg: var(--panel-surface-elevated);
    --panel-filtro-picker-option-text: rgba(var(--color-blanco-rgb), 0.92);
    --panel-filtro-picker-option-bg-active: var(--color-granate-active);
    --panel-filtro-picker-option-text-active: var(--color-blanco);
}

[data-theme="dark"] body {
    background-color: var(--color-crema);
    color: var(--color-blanco);
}

[data-theme="dark"] .panel-topbar2 {
    color: var(--panel-topbar2-crumb-color);
}

[data-theme="dark"] .panel-main {
    color: var(--panel-main-text);
}