/* ========================================
   VISTA EMPRESA - UX ENHANCEMENTS DARK MODE
   Estilos de modo oscuro para las mejoras UX
   ======================================== */

/* ===== MODO OSCURO - UX ENHANCEMENTS ===== */
body.dark-mode {
    
    /* ===== 1. HEADER Y NAVEGACIÓN ===== */
    header.fixed-top {
        background-color: #1a1a1a !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    header.fixed-top.header-scrolled {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    .navbar-nav .nav-link.active::after {
        background: linear-gradient(90deg, transparent, #4a9eff, transparent);
    }

    /* Breadcrumb en modo oscuro */
    .breadcrumb-indicator {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* ===== 2. HERO SECTION ===== */
    /* Imagen con blur de fondo más oscuro en dark mode */
    .hero-blur-bg::before {
        filter: blur(10px) brightness(0.6);
    }

    /* Imagen nítida con ligero oscurecimiento en dark mode */
    .hero-blur-bg::after {
        opacity: 0.9;
    }

    .scroll-indicator i {
        color: rgba(255, 255, 255, 0.9);
    }

    /* ===== 3. IMAGEN DE PERFIL ===== */
    .profile-image {
        border-color: #2d2d2d;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    }

    .profile-image-wrapper::before {
        background: linear-gradient(135deg, #4a9eff, #7b5fbd, #4a9eff);
    }

    /* ===== 4. FILTROS DE PRODUCTOS (REMOVIDO) =====
    /* Estilos removidos: filtros innecesarios */

    /* ===== 5. CARDS Y HOVER EFFECTS ===== */
    .card-unified,
    .product-card,
    .sucursal-card,
    .noticia-card {
        background: #2d2d2d;
        border-color: #3d3d3d;
    }

    .card-unified:hover,
    .product-card:hover,
    .sucursal-card:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    }

    /* ===== 6. NOTICIAS ===== */
    .noticia-date-badge {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Degradé solo para textos largos en dark mode */
    .card-compact__description--long::after {
        background: linear-gradient(to bottom, transparent, #1a1a1a);
    }

    /* ===== 7. SKELETON LOADING ===== */
    .skeleton-card {
        background: linear-gradient(
            90deg,
            #2d2d2d 25%,
            #3d3d3d 50%,
            #2d2d2d 75%
        );
    }

    /* ===== 8. UBICACIÓN Y MAPAS ===== */
    .casa-matriz-badge {
        background: linear-gradient(135deg, #4a9eff, #3780d8);
        box-shadow: 0 4px 12px rgba(74, 158, 255, 0.4);
    }

    .btn-directions {
        background: linear-gradient(135deg, #7b5fbd, #9d7cd8);
    }

    .btn-directions:hover {
        box-shadow: 0 6px 20px rgba(123, 95, 189, 0.5);
    }

    .contact-card,
    .casa-matriz-card,
    .sucursal-card {
        background: #2d2d2d;
        border-color: #3d3d3d;
    }

    /* ===== 9. CONTACTO ===== */
    .contact-panel {
        background: #2d2d2d;
        border-color: #3d3d3d;
    }

    .contact-chip {
        background: #3d3d3d;
        color: #e0e0e0;
        border: 1px solid #4d4d4d;
    }

    .contact-chip:hover {
        background: #4d4d4d;
        border-color: #5d5d5d;
    }

    .qr-wrapper {
        background: #2d2d2d;
        border: 1px solid #3d3d3d;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        padding: 16px;
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        width: fit-content;
    }

    /* ===== 10. BOTONES ===== */
    .btn-primary {
        background: #4a9eff;
        border-color: #4a9eff;
    }

    .btn-primary:hover {
        background: #3780d8;
        border-color: #3780d8;
    }

    .btn-outline-primary {
        color: #4a9eff;
        border-color: #4a9eff;
    }

    .btn-outline-primary:hover {
        background: #4a9eff;
        border-color: #4a9eff;
        color: white;
    }

    /* ===== 11. EMPTY STATES (RENUMERADO) ===== */
    .empty-state {
        color: #9e9e9e;
    }

    .empty-state i {
        color: #4d4d4d;
    }

    .empty-state h3 {
        color: #d0d0d0;
    }

    /* ===== 13. SECTION DIVIDERS ===== */
    .section-divider {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent
        );
    }

    /* ===== 14. PORTAL BANNER ===== */
    .portal-banner {
        color: #e0e0e0;
        background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(123, 95, 189, 0.15));
        border-color: rgba(74, 158, 255, 0.3);
    }

    .portal-banner__cta {
        color: #6ba3ff;
    }

    /* ===== 15. ACCORDION (MÓVIL) ===== */
    .accordion-button {
        background: #2d2d2d;
        color: #e0e0e0;
    }

    .accordion-button:not(.collapsed) {
        background: #4a9eff;
        color: white;
    }

    .accordion-item {
        background: #2d2d2d;
        border-color: #3d3d3d;
    }

    .accordion-body {
        background: #252525;
    }

    /* ===== 16. TABS ===== */
    .productos-tabs .nav-link {
        color: #c0c0c0;
        border-color: #3d3d3d;
        background: transparent;
    }

    .productos-tabs .nav-link:hover {
        color: #4a9eff;
        background: rgba(74, 158, 255, 0.08);
        border-color: rgba(74, 158, 255, 0.3);
    }

    .productos-tabs .nav-link.active {
        background: transparent;
        color: #4a9eff;
        border-color: #4a9eff;
        border-bottom-width: 3px;
        font-weight: 600;
    }

    .productos-tabs .nav-link .badge {
        background: #3d3d3d;
        color: white;
    }

    .productos-tabs .nav-link.active .badge {
        background: #4a9eff;
        color: white;
    }

    /* ===== 17. LOADING OVERLAY ===== */
    .loading-overlay {
        background: rgba(26, 26, 26, 0.95);
    }

    .spinner {
        border-color: #3d3d3d;
        border-top-color: #4a9eff;
    }

    /* ===== 18. FOCUS INDICATORS ===== */
    *:focus-visible {
        outline-color: rgba(74, 158, 255, 0.6);
    }

    /* ===== 19. NAVEGACIÓN MÓVIL ===== */
    @media (max-width: 991px) {
        .navbar-collapse {
            background: rgba(26, 26, 26, 0.98);
        }

        .navbar-nav .nav-link:hover {
            background: rgba(255, 255, 255, 0.05);
        }
    }

    /* ===== 20. TOOLTIPS Y POPOVERS ===== */
    .tooltip-inner {
        background-color: #2d2d2d;
        color: #e0e0e0;
    }

    .tooltip.bs-tooltip-top .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
        border-top-color: #2d2d2d;
    }

    .tooltip.bs-tooltip-end .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
        border-right-color: #2d2d2d;
    }

    .tooltip.bs-tooltip-bottom .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
        border-bottom-color: #2d2d2d;
    }

    .tooltip.bs-tooltip-start .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
        border-left-color: #2d2d2d;
    }

    /* ===== 21. BADGES Y ETIQUETAS ===== */
    .badge {
        background-color: #3d3d3d;
        color: #e0e0e0;
    }

    .badge.bg-primary {
        background-color: #4a9eff !important;
    }

    .badge.bg-success {
        background-color: #28a745 !important;
    }

    .badge.bg-warning {
        background-color: #ffc107 !important;
        color: #1a1a1a !important;
    }

    .badge.bg-danger {
        background-color: #dc3545 !important;
    }

    /* ===== 22. INPUTS Y FORMS (SI APLICA) ===== */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        background: #2d2d2d;
        color: #e0e0e0;
        border-color: #3d3d3d;
    }

    input[type="text"]:focus,
    input[type="email"]:focus,
    input[type="tel"]:focus,
    textarea:focus,
    select:focus {
        background: #353535;
        border-color: #4a9eff;
        color: #e0e0e0;
    }

    /* ===== 23. TRANSICIONES SUAVES ===== */
    body.dark-mode * {
        transition-property: background-color, color, border-color, box-shadow;
        transition-duration: 0.3s;
        transition-timing-function: ease;
    }

    /* Prevenir transiciones en imágenes y videos */
    body.dark-mode img,
    body.dark-mode svg,
    body.dark-mode video {
        transition: none;
    }

    /* ===== 24. MEJORAS DE CONTRASTE ===== */
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode h5,
    body.dark-mode h6 {
        color: #f0f0f0;
    }

    body.dark-mode p,
    body.dark-mode span,
    body.dark-mode li {
        color: #d0d0d0;
    }

    body.dark-mode a {
        color: #6ba3ff;
    }

    body.dark-mode a:hover {
        color: #89b7ff;
    }

    /* ===== 25. MODALES Y DRAWERS ===== */
    .modal-content {
        background: #2d2d2d;
        border-color: #3d3d3d;
    }

    .modal-header {
        border-bottom-color: #3d3d3d;
    }

    .modal-footer {
        border-top-color: #3d3d3d;
    }

    .drawer-content {
        background: #2d2d2d;
    }

    .drawer-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
}

/* ===== TRANSICIÓN SUAVE AL CAMBIAR MODO ===== */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}