/**
 * Tema claro: todos los hex/rgba de este modo aquí (no depender de theme-dark ni de tokens de color).
 */
:root,
[data-theme="light"] {
    --color-granate: #661414;
    --color-crema: #f7f3e8;
    --color-dorado: #d99a56;
    --color-blanco: #ffffff;
    --color-blanco-rgb: 255, 255, 255;
    --color-granate-rgb: 102, 20, 20;
    --color-crema-rgb: 247, 243, 232;
    --color-dorado-rgb: 217, 154, 86;
    --color-granate-hover: #7a1919;
    /* Estado activo / superficies secundarias granate; mismo tono que relleno botones accion pill rojo en tabla */
    --color-granate-active: #9a2d2d;
    --color-granate-deep: #5c1212;
    /* Pill acciones: relleno = granate-active; borde = granate-deep (un solo origen en --color-granate-active) */
    --btn-accion-pill-rojo-bg: var(--color-granate-active);
    --btn-accion-pill-rojo-border: var(--color-granate-deep);
    --btn-accion-pill-rojo-bg-hover: var(--color-granate-hover);
    --btn-accion-pill-rojo-border-hover: var(--color-granate);
    --color-text-default: #2d2d2d;
    --color-text-muted: #5c4a3d;
    /* Error / is-invalid: misma familia granate (no coral Material #ef5350) */
    --color-danger: var(--color-granate-active);
    --color-danger-rgb: 154, 45, 45; /* #9a2d2d */
    /* Informativo (no es marca): categorias, pill --info-traslucido. Material Blue 800 */
    --color-azul: #1565c0;
    --color-azul-rgb: 21, 101, 192;
    --color-info: var(--color-azul);
    --color-info-rgb: var(--color-azul-rgb);

    /* Verde semantico de conformidad. Ya se usaba a pelo como #2e7d32 en
       btn-accion-pill.css (--exito-traslucido, --neutro-exito); aqui pasa a token para
       que el resto del panel no vuelva a fijarlo. No es color de marca: solo estado. */
    --color-exito: #2e7d32;
    --color-exito-rgb: 46, 125, 50;
    --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(102, 20, 20, 0.25);

    --scrollbar-thumb-neutral: rgba(0, 0, 0, 0.08);

    /* Componente .scroll (public/css/components/scroll.css) — thumb granate de marca, no gris */
    --scroll-track: var(--color-crema);
    --scroll-thumb: rgba(var(--color-granate-rgb), 0.55);
    --scroll-thumb-hover: rgba(var(--color-granate-rgb), 0.78);
    --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='%239a2d2d' fill-opacity='0.55' 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='%239a2d2d' fill-opacity='0.55' 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='%239a2d2d' fill-opacity='0.55' 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='%239a2d2d' fill-opacity='0.55' d='M0 0l6 5-6 5z'/%3E%3C/svg%3E");

    /* Popovers compartidos: calendario-emergente, tiempo-emergente (design/02) */
    --ce-emergente-radio: 0.5rem;
    --ce-emergente-sombra: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
    --ce-emergente-line: rgba(102, 20, 20, 0.12);

    /* Sidebar: iconbar más profundo que la columna de categoría (referencia AIAPAEC / Atenea) */
    --panel-iconbar-bg: var(--color-granate-deep);
    --panel-category-bg: var(--color-granate-active);
    --panel-category-bg-hover: var(--overlay-white-06);
    --panel-category-bg-active: var(--color-granate-active);
    --panel-text: var(--color-crema);
    --panel-text-hover: var(--color-blanco);
    --panel-text-active: var(--color-blanco);
    --panel-muted: rgba(var(--color-crema-rgb), 0.75);
    --panel-category-header-color: var(--color-blanco);
    --panel-category-nav-heading-color: rgba(var(--color-crema-rgb), 0.72);
    --panel-nav-section-border: rgba(var(--color-crema-rgb), 0.2);
    --panel-search-bg: rgba(0, 0, 0, 0.22);
    --panel-search-border: rgba(var(--color-crema-rgb), 0.12);
    --panel-search-placeholder: rgba(var(--color-crema-rgb), 0.82);
    /* Submenús desplegados: tarjeta crema como en maqueta */
    --panel-sidebar-menu-card-bg: var(--color-crema);
    --panel-sidebar-menu-card-text: var(--color-granate);
    --panel-sidebar-menu-card-icon: var(--color-granate-active);
    --panel-sidebar-submenu-muted: rgba(var(--color-granate-rgb), 0.55);
    --panel-sidebar-submenu-hover-bg: rgba(var(--color-granate-rgb), 0.08);
    --panel-sidebar-submenu-active-border: var(--color-granate-active);
    --panel-sidebar-submenu-scrollbar: rgba(var(--color-granate-rgb), 0.2);
    --panel-border: rgba(var(--color-crema-rgb), 0.12);
    --panel-accent: var(--color-dorado);
    --panel-accent-soft: rgba(var(--color-dorado-rgb), 0.2);
    --panel-sidebar-tip-bg: var(--color-granate-deep);
    --panel-sidebar-tip-text: var(--color-crema);
    --panel-sidebar-tip-border: rgba(var(--color-dorado-rgb), 0.35);
    --panel-sidebar-tip-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    --panel-sidebar-icon-color: var(--color-blanco);
    --panel-search-icon-color: var(--color-dorado);
    --panel-search-icon-sidebar: var(--color-blanco);
    --panel-search-border-active: var(--color-dorado);
    --panel-topbar1-bg: var(--color-granate-active);
    --panel-topbar2-bg: var(--color-granate-deep);
    --panel-topbar2-border: rgba(var(--color-crema-rgb), 0.15);
    --panel-topbar2-crumb-color: var(--color-crema);
    --panel-topbar2-crumb-active-color: var(--color-blanco);
    --panel-topbar2-crumb-sep-color: rgba(var(--color-crema-rgb), 0.6);
    --panel-topbar1-icon-accent: var(--color-dorado);
    --panel-main-bg: var(--color-crema);
    --panel-main-text: var(--color-text-default);
    --panel-main-text-muted: var(--color-text-muted);
    /* Filas secundarias en datatable-panel (secciones admision, etc.) */
    --datatable-row-seccion-bg: rgba(var(--color-granate-rgb), 0.05);
    --panel-dropdown-bg: var(--color-granate-active);
    --panel-dropdown-border: rgba(var(--color-crema-rgb), 0.15);
    --panel-dropdown-text: var(--color-crema);
    --panel-dropdown-text-muted: rgba(var(--color-crema-rgb), 0.85);
    --panel-cta-from: var(--color-granate);
    --panel-cta-to: var(--color-granate-hover);
    --panel-cta-title-color: var(--color-dorado);
    --panel-cta-text-color: var(--color-crema);
    --panel-cta-link-color: var(--color-dorado);
    --panel-card-bg: var(--color-granate-active);
    --panel-card-bg-from: var(--color-granate-active);
    --panel-card-bg-to: var(--color-granate-deep);
    --panel-card-border: var(--color-dorado);
    --panel-card-shadow: var(--shadow-card-brand);
    --panel-card-title-color: var(--color-crema);
    --panel-card-text-color: rgba(var(--color-crema-rgb), 0.92);
    /* Titulos del area principal (h1–h6 en .panel-main__inner), no migas de topbar */
    --panel-heading-color: #1f1e1e;
    --panel-logo-accent: var(--color-blanco);

    /* Formularios flotantes (main, drawer, modales) */
    --panel-floating-bg: var(--color-blanco);
    --panel-floating-text: var(--color-text-default);
    --panel-floating-muted: var(--color-text-muted);
    --panel-floating-border: rgba(114, 114, 114, 0.25);
    --panel-floating-border-hover: rgba(114, 114, 114, 0.4);
    --panel-floating-focus: var(--color-granate);
    --panel-floating-shadow: 0 0 0 3px rgba(var(--color-granate-rgb), 0.2);
    --panel-floating-label-focus: var(--color-granate);
    --panel-floating-disabled-bg: rgba(var(--color-blanco), 0.65);

    /* Superficie elevada (listas desplegables drawer, panel x-selector) */
    --panel-surface-elevated: var(--color-blanco);
    --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-floating-border);
    --panel-selector-panel-shadow: var(--shadow-card-brand);
    --panel-selector-placeholder: var(--color-text-muted);
    --panel-selector-option-text: var(--color-text-default);
    --panel-selector-option-hover-bg: rgba(var(--color-granate-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-floating-bg);
    --panel-selector-etiqueta-flotante-color: var(--color-granate);
    --panel-selector-etiqueta-flotante-focus: var(--color-granate);

    /* Drawer lateral */
    --panel-drawer-bg: var(--color-blanco);
    --panel-drawer-text: var(--color-text-default);
    --panel-drawer-text-muted: var(--color-text-muted);
    --panel-drawer-border: rgba(var(--color-granate-rgb), 0.12);
    --panel-drawer-heading-color: var(--panel-heading-color);
    --panel-drawer-footer-shadow: 0 -0.2rem 0.5rem rgba(0, 0, 0, 0.04);
    --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: var(--color-blanco);
    --panel-drawer-btn-secondary-border: rgba(var(--color-granate-rgb), 0.18);
    --panel-drawer-btn-secondary-color: var(--color-text-default);
    --panel-drawer-btn-secondary-hover-bg: var(--color-crema);
    --panel-drawer-btn-secondary-active-bg: rgba(var(--color-crema-rgb), 0.85);
    --panel-drawer-close-bg: var(--color-blanco);
    --panel-drawer-close-border: var(--color-granate);
    --panel-drawer-close-icon: var(--color-granate);
    --panel-drawer-close-hover-bg: var(--color-blanco);
    --panel-drawer-close-hover-border: var(--color-granate-hover);
    --panel-drawer-close-hover-icon: var(--color-granate-hover);
    --panel-drawer-picker-bg: var(--panel-surface-elevated);
    --panel-drawer-picker-option-text: var(--color-text-default);
    --panel-drawer-picker-option-bg-active: var(--color-granate);
    --panel-drawer-picker-option-text-active: var(--color-crema);
    --panel-drawer-field-readonly-bg: var(--color-blanco);

    /* Modales del panel (exportar, importar, confirmar) */
    --panel-modal-bg: var(--color-blanco);
    --panel-modal-text: var(--color-text-default);
    --panel-modal-text-muted: var(--color-text-muted);
    --panel-modal-border: rgba(var(--color-granate-rgb), 0.12);
    --panel-modal-btn-close-filter: none;
    --panel-modal-btn-outline-color: var(--color-text-muted);
    --panel-modal-btn-outline-border: rgba(var(--color-granate-rgb), 0.35);
    --panel-modal-btn-outline-bg: transparent;
    --panel-modal-btn-outline-hover-color: var(--color-text-default);
    --panel-modal-btn-outline-hover-bg: rgba(var(--color-granate-rgb), 0.06);
    --panel-modal-btn-outline-hover-border: rgba(var(--color-granate-rgb), 0.45);
    --panel-modal-btn-outline-active-bg: rgba(var(--color-granate-rgb), 0.1);
    --panel-modal-badge-bg: rgba(var(--color-granate-rgb), 0.12);
    --panel-modal-badge-text: var(--color-text-default);

    /* Filtros de listado (x-filtros-listado, combobox pill) */
    --panel-filtro-bg: rgba(255, 255, 255, 0.28);
    --panel-filtro-field-bg: transparent;
    --panel-filtro-label-bg: rgba(255, 255, 255, 0.22);
    --panel-filtro-label-color: var(--color-granate);
    --panel-filtro-border: rgba(var(--color-granate-rgb), 0.12);
    --panel-filtro-border-hover: rgba(var(--color-granate-rgb), 0.22);
    --panel-filtro-value-text: var(--color-text-default);
    --panel-filtro-picker-bg: var(--panel-filtro-bg);
    --panel-filtro-picker-option-text: var(--color-text-default);
    --panel-filtro-picker-option-bg-active: var(--color-granate);
    --panel-filtro-picker-option-text-active: var(--color-crema);
}