/**
 * DARK GLASS THEME - VARIABLES CSS
 * Tema oscuro premium con glassmorphism para sidebar + dashboard claro
 * Apolonia Dental Software
 */

:root {
    /* ========================================
       COLORES PRIMARIOS DEL TEMA
       ======================================== */
    --apolonia-cyan:#4c4859;
    --apolonia-cyan-light: #22D3EE;
    --apolonia-cyan-dark: #0891B2;

    --apolonia-purple: #4c4859;
    --apolonia-purple-light: #4c4859;
    --apolonia-purple-dark: #4c4859;

    --apolonia-pink: #EC4899;
    --apolonia-pink-light: #F472B6;
    --apolonia-pink-dark: #DB2777;

    /* ========================================
       SIDEBAR DARK GLASSMORPHISM
       ======================================== */
    --sidebar-bg: rgba(15, 23, 42, 0.95);
    --sidebar-bg-solid: #0F172A; /* Fallback para navegadores sin backdrop-filter */
    --sidebar-border: rgba(6, 182, 212, 0.2);
    --sidebar-border-subtle: rgba(148, 163, 184, 0.1);

    --sidebar-text: #d3d3d4;
    --sidebar-text-hover: #F1F5F9;
    --sidebar-text-active: #FFFFFF;
    --sidebar-text-muted: #64748B;

    --sidebar-icon: #94A3B8;
    --sidebar-icon-hover: #06B6D4;
    --sidebar-icon-active: #06B6D4;

    --sidebar-hover-bg: rgba(6, 182, 212, 0.08);
    --sidebar-active-bg: rgba(6, 182, 212, 0.15);
    --sidebar-active-border: #06B6D4;

    --sidebar-submenu-bg: rgba(15, 23, 42, 0.5);
    --sidebar-submenu-hover: rgba(6, 182, 212, 0.05);

    /* ========================================
       GRADIENTES
       ======================================== */
    --gradient-sidebar-glow: #4c4859;
    --gradient-active-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(76, 72, 89, 0.15) 100%);
    --gradient-button-primary: #4c4859;
    --gradient-button-hover: #4c4859;

    /* ========================================
       DASHBOARD LIGHT
       ======================================== */
    --dashboard-bg: #FFFFFF;
    --dashboard-topbar-bg: #4c4859;
    --dashboard-card-bg: #FFFFFF;
    --dashboard-card-border: #E2E8F0;
    --dashboard-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --dashboard-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

    --dashboard-text-primary: #0F172A;
    --dashboard-text-secondary: #64748B;
    --dashboard-text-muted: #94A3B8;
    --dashboard-divider: #E2E8F0;

    /* ========================================
       BADGES Y ETIQUETAS
       ======================================== */
    /* Cyan badges */
    --badge-cyan-bg: rgba(6, 182, 212, 0.1);
    --badge-cyan-bg-solid: #E0F2FE;
    --badge-cyan-text: #0891B2;
    --badge-cyan-border: rgba(6, 182, 212, 0.3);

    /* Purple badges */
    --badge-purple-bg: rgba(139, 92, 246, 0.1);
    --badge-purple-bg-solid: #EDE9FE;
    --badge-purple-text: #4c4859;
    --badge-purple-border: #4c4859;

    /* Pink badges */
    --badge-pink-bg: rgba(236, 72, 153, 0.1);
    --badge-pink-bg-solid: #FCE7F3;
    --badge-pink-text: #DB2777;
    --badge-pink-border: rgba(236, 72, 153, 0.3);

    /* Gray badges */
    --badge-gray-bg: rgba(148, 163, 184, 0.1);
    --badge-gray-bg-solid: #F1F5F9;
    --badge-gray-text: #64748B;
    --badge-gray-border: rgba(148, 163, 184, 0.3);

    /* ========================================
       OVERRIDES DE VARIABLES APOLONIA EXISTENTES
       ======================================== */
    /* Estas variables sobrescriben las del root.css por defecto */
    --blue-header:#ffffff;
    --blue-header-txt: #3b3b4d;
    --blue-header-btn: #4c4859;
    --blue-header-btn-txt: #FFFFFF;

    --apolonia-blue-super: #cecece;
    --apolonia-blue-super_rgba: rgba(202, 216, 248, 0.95);
    --apolonia-blue-super-2: #0891B2;

    --apolonia-orange-super: #F472B6; /* Usamos rosa en vez de naranja para este tema */

    /* Bootstrap overrides */
    --bs-primary: #187ab3;
    --bs-primary-rgb: 6, 182, 212;
    --bs-primary-active: #4c4859;
    --bs-primary-inverse: #FFFFFF;

    --bs-pagination-active-bg-v2: #06B6D4;
    --bs-pagination-active-color: #FFFFFF;

    --bs-link-color: #06B6D4;
    --bs-link-hover-color: #1c2227;

    /* ========================================
       VARIABLES BÁSICAS COMPATIBILIDAD
       ======================================== */
    --white: #FFFFFF;
    --black: #0F172A;
    --grey-card-header: #F1F5F9;
    --blue-even: #E0F2FE;
    --blue-btn: #06B6D4;
    --blue-btn-bg: #E0F2FE;
    --pink: #EC4899;
    --apolonia-light-blue: #06B6D4;
    --grey-list: #64748B;
    --grey-pearl-river: #CBD5E1;

    /* ========================================
       MODALES Y DRAWERS
       ======================================== */
    --bs-drawer-bg-color: #FFFFFF;
    --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.4);
    --bs-drawer-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    --bs-modal-bg: #FFFFFF;
    --bs-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
    --bs-modal-backdrop-opacity: 0.5;
    --bs-offcanvas-bg: #FFFFFF;
    --bs-offcanvas-backdrop-bg: rgba(0, 0, 0, 0.5);

    /* ========================================
       EFECTOS Y SOMBRAS
       ======================================== */
    --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.4);
    --shadow-glow-purple: 0 0 20px rgba(139, 92, 246, 0.4);
    --shadow-glow-pink: 0 0 20px rgba(236, 72, 153, 0.4);

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* ========================================
   FORZAR DRAWERS Y MODALES OPACOS
   Reglas con alta especificidad para el tema dark-sidebar
   ======================================== */
body[data-kt-app-layout="dark-sidebar"] .drawer,
body.app-default[data-kt-app-layout="dark-sidebar"] .drawer {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

body[data-kt-app-layout="dark-sidebar"] .drawer-overlay,
body.app-default[data-kt-app-layout="dark-sidebar"] .drawer-overlay {
    background-color: rgba(0, 0, 0, 0.5) !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

body[data-kt-app-layout="dark-sidebar"] .modal-content,
body.app-default[data-kt-app-layout="dark-sidebar"] .modal-content {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

body[data-kt-app-layout="dark-sidebar"] .modal-backdrop,
body.app-default[data-kt-app-layout="dark-sidebar"] .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
    --bs-backdrop-bg: rgba(0, 0, 0, 0.5) !important;
}

body[data-kt-app-layout="dark-sidebar"] .offcanvas,
body.app-default[data-kt-app-layout="dark-sidebar"] .offcanvas {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
}

body[data-kt-app-layout="dark-sidebar"] .offcanvas-backdrop,
body.app-default[data-kt-app-layout="dark-sidebar"] .offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
    --bs-backdrop-bg: rgba(0, 0, 0, 0.5) !important;
}