/* ===== SISTEMA DE DISEÑO RESPONSIVO MODERNO ===== */
/* Variables CSS para consistencia */
:root {
    /* 🔵 Colores Principales (Azules) */
    --isos-navy: #0B1220;       /* Fondo principal */
    --isos-dark: #0F172A;       /* Azul corporativo (tarjetas/módulos) */
    --isos-secondary: #1E293B;  /* Azul secundario (bordes/sidebar) */

    /* 🟠 Colores de Acento (Naranjas) */
    --isos-orange: #F97316;     /* Naranja corporativo (botones primarios) */
    --isos-orange-cta: #EA580C; /* Naranja intenso (hover/active) */
    --isos-orange-soft: #FDBA74;/* Naranja suave (bordes/detalles) */

    /* ⚪ Colores Neutros */
    --text-white: #FFFFFF;      /* Texto principal */
    --text-light: #E5E7EB;      /* Texto secundario / inputs */
    --text-muted: #94A3B8;      /* Texto deshabilitado / placeholder */
    --text-dark: #64748B;       /* Texto oscuro para contraste */

    /* 🔴🟢 Estados del Sistema */
    --state-success: #22C55E;
    --state-warning: #FACC15;
    --state-error: #EF4444;
    --state-info: #38BDF8;

    /* Dimensiones y Efectos */
    --sidebar-width: 260px;
    --sidebar-collapsed: 80px;
    --header-height: 70px;
    --border-radius: 15px;
    --shadow-light: 0 4px 12px rgba(0,0,0,0.2);
    --shadow-medium: 0 10px 30px rgba(0,0,0,0.3);
    --transition-fast: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== MOBILE MENU BUTTON STYLES ===== */
.mobile-menu-toggle-btn {
    display: none; /* Hidden by default on desktop */
    background: transparent;
    border: none;
    color: #FFFFFF !important; /* FIX: White color for visibility on dark header */
    font-size: 1.8rem; /* Slightly larger */
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* Above header content */
    transition: color 0.3s ease;
    margin-right: 15px;
}

.mobile-menu-toggle-btn:hover {
    color: var(--isos-orange) !important;
}

/* Show on Mobile & Tablet */
@media (max-width: 991.98px) {
    .mobile-menu-toggle-btn {
        display: block !important;
    }
    
    .header {
        padding-left: 15px !important; /* FIX: Remove excessive desktop padding */
        justify-content: space-between;
    }
    
    .header-left {
        display: flex;
        align-items: center;
        gap: 15px;
        flex: 0 0 auto;
    }
    
    /* FIX: SIDEBAR BEHAVIOR FOR TABLETS/MOBILES (up to 991px) */
    .sidebar {
        width: 280px !important;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        transform: translateX(-100%) !important;
        z-index: 9999;
        transition: transform var(--transition-smooth);
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
        display: block !important;
    }
    
    .sidebar.active {
        transform: translateX(0) !important;
    }
    
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Hide on Desktop */
@media (min-width: 992px) {
    .mobile-menu-toggle-btn {
        display: none !important;
    }
}

/* ===== UNIFICACIÓN DE SIDEBAR RESPONSIVO (MÓVIL Y TABLET) ===== */
/* Aplica a todos los dispositivos menores a 992px (Móviles y Tablets verticales) */
@media (max-width: 991.98px) {
    /* 0. RESET GLOBAL PARA MÓVIL (CRÍTICO) */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 1. Sidebar Overlay (Fixed y fuera de pantalla) */
    .sidebar {
        width: 260px !important; /* Ajustado a 260px estándar */
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        
        /* Oculto por defecto */
        transform: translateX(-100%) !important;
        transition: transform 0.2s ease !important;
        
        /* Capa superior absoluta */
        z-index: 4000 !important; /* Usuario pidió 4000 */
        
        /* Visual */
        background-color: var(--isos-navy) !important;
        box-shadow: 4px 0 15px rgba(0,0,0,0.5) !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* 2. Sidebar Estado Activo (Abierto) */
    .sidebar.active,
    body.menu-open .sidebar {
        transform: translateX(0) !important;
    }

    /* Opcional: bloquear scroll cuando el menú está abierto */
    body.menu-open {
        overflow: hidden !important;
    }
    
    /* 3. Main Content Ajustado (SIN MARGEN IZQUIERDO) */
    .main-content, 
    .app-content, 
    #mainContent, 
    .content, 
    .content-view,
    .dashboard-container {
        margin-left: 0 !important;
        padding-left: 15px !important; /* Pequeño padding interno */
        padding-right: 15px !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 70px !important; /* Espacio para header fijo */
        box-sizing: border-box !important;
    }
    
    /* 4. Dashboard Grid: 1 Columna */
    .dashboard-grid,
    .stats-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 20px !important;
    }

    /* 5. Hero Full Width */
    .dashboard-hero,
    .dashboard-hero-card {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        padding: 15px !important;
        box-sizing: border-box !important;
    }

    /* 6. Header Fijo */
    .app-topbar,
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 3000 !important;
        padding-left: 15px !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }

    /* 7. Overlay para cerrar menú */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 3999 !important; /* Debajo del sidebar (4000) */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s;
    }

    body.menu-open .mobile-overlay,
    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* ===== RESET ESPECÍFICO PARA ESCRITORIO ===== */
@media (min-width: 992px) {
    .sidebar {
        transform: none !important;
        left: 0 !important;
        visibility: visible !important;
        z-index: 100 !important;
        position: fixed !important;
        height: 100vh !important;
        width: 260px !important;
    }
    
    .mobile-overlay {
        display: none !important;
    }
    
    /* Ocultar botón cerrar menú en desktop */
    .mobile-close-btn {
        display: none !important;
    }
    
    /* Restaurar margen izquierdo en escritorio */
    .main-content, 
    .app-content, 
    #mainContent {
        margin-left: 260px !important;
    }
}

/* Global Main Content Fix */
.main-content {
    transition: all 0.3s ease;
    /* Removed global width/padding to respect desktop flow */
}

@media (max-width: 991.98px) {
    .main-content {
        margin-left: 0 !important;
        padding: 15px !important;
        padding-top: 90px !important; /* Mobile Only: Space for fixed header */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Force all content views to respect the flow */
    .content-view, 
    .cotizacion-container,
    .dashboard-container,
    #motor-implementacion-container,
    #reportes-departamentos-container,
    #dashboardContent {
        margin-top: 0 !important; /* Reset any hardcoded margins */
        padding-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }
    
    /* Ensure Header stays on top */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        height: auto !important;
        min-height: 70px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
}

/* ===== SISTEMA DE DISEÑO RESPONSIVO (CLEANUP) ===== */

/* Desktop Reset - Limpieza de conflictos */
@media (min-width: 992px) {
    /* El layout se maneja principalmente en admin-style.css */
    /* Aquí solo aseguramos que no haya interferencias */
    
    .mobile-menu-toggle-btn {
        display: none !important;
    }
}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sidebar {
        width: var(--sidebar-width);
        position: fixed;
        left: 0;
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 2rem;
    }
    
    .user-menu .sidebar-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    .casa-matriz-selection {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .cotizaciones-card {
        padding: 2rem;
    }
    
    /* Mostrar SOLO tabla en desktop, ocultar tarjetas */
     #tableContainer {
         display: block !important;
     }
    
    .cotizaciones-cards {
        display: none !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .sidebar {
        width: var(--sidebar-width);
    }
    
    .main-content {
        margin-left: var(--sidebar-width);
        padding: 2.5rem;
    }
    
    .user-menu .sidebar-toggle {
        display: none !important;
        visibility: hidden !important;
    }
    
    .container-fluid {
        max-width: none;
        margin: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Mostrar SOLO tabla en desktop grande, ocultar tarjetas */
     #tableContainer {
         display: block !important;
     }
    
    .cotizaciones-cards {
        display: none !important;
    }
}

/* ===== COMPONENTES RESPONSIVOS ===== */

/* Estilos base para la vista de tarjetas móviles */
.cotizaciones-cards {
    display: none; /* Oculto por defecto, se mostrará en móviles */
    padding: 10px;
}

/* Por defecto mostrar tabla en todos los dispositivos */
#tableContainer {
    display: block !important;
}

/* ===== FIX: Mobile Menu Visibility and Interaction (ULTRA PRIORITY) ===== */

/* 1. Ensure Sidebar is fully visible when active */
@media (max-width: 991.98px) {
    /* Reset Sidebar Base State */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 280px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
        
        /* ULTRA HIGH Z-INDEX to beat any overlay/modal */
        z-index: 99999 !important; 
        
        background-color: var(--isos-navy) !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        box-shadow: 4px 0 15px rgba(0,0,0,0.5) !important;
        
        /* Interaction */
        pointer-events: auto !important;
        touch-action: pan-y !important; /* Allow scrolling but capture clicks */
    }
    
    /* Active State */
    .sidebar.active,
    body.menu-open .sidebar {
        transform: translateX(0) !important;
        left: 0 !important; /* Force left position */
        display: block !important;
        visibility: visible !important;
    }
    
    /* Ensure all children are clickable and visible */
    .sidebar * {
        pointer-events: auto !important;
        visibility: visible !important;
    }
    
    /* 2. Fix Overlay interaction */
    .mobile-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(2px);
        
        /* Z-Index just below sidebar - THIS IS CRITICAL */
        z-index: 99998 !important; 
        
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease !important;
        cursor: pointer !important; /* Indicate clickable to close */
    }
    
    .mobile-overlay.active,
    body.menu-open .mobile-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* 3. Ensure links have contrast and are clickable */
    .nav-link, .submenu a {
        color: #FFFFFF !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 100000 !important; /* Even higher than sidebar */
        /* FIX: Reset any inherited filter or overlay */
        filter: none !important;
        -webkit-filter: none !important;
        background-color: transparent; /* Clean background */
    }

    /* Active/Hover states for mobile */
    .nav-link:active, .submenu a:active,
    .nav-link:hover, .submenu a:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: var(--isos-orange) !important;
    }

    /* 4. Fix submenu visibility */
    .submenu {
        background-color: rgba(0,0,0,0.2) !important; /* Ligeramente oscuro pero transparente */
    }

    /* ===== ROBUST SUBMENU TOGGLE LOGIC ===== */
    /* Base state: Hidden */
    .sidebar-nav .submenu {
        max-height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        display: block !important; /* Always block, hidden by height */
        transition: all 0.3s ease-in-out !important;
        padding: 0 !important;
        margin: 0 !important;
        
        /* FIX: Z-Index hierarchy */
        position: relative !important;
        z-index: 100001 !important;
    }

    /* Active state: Visible */
    .sidebar-nav .nav-item.active .submenu,
    .sidebar-nav .nav-item.has-submenu.active .submenu {
        max-height: 1000px !important; /* Large enough to fit content */
        opacity: 1 !important;
        visibility: visible !important;
        margin-top: 5px !important;
        padding-bottom: 10px !important;
    }
    
    /* Ensure arrow rotation */
    .sidebar-nav .nav-item .submenu-arrow {
        transition: transform 0.3s ease;
    }
    .sidebar-nav .nav-item.active .submenu-arrow {
        transform: rotate(180deg);
    }
    
    /* 5. Mobile Toggle Button (Integrated in Header) */
    .header-left {
        display: flex !important;
        align-items: center !important;
    }
}

/* ===== ESTILOS DE CONTENIDO MÓVIL (TABLAS VS CARDS) ===== */
@media (max-width: 767.98px) {
    /* 1. Ocultar tablas complejas */
    #tableContainer, 
    #cotizacionesTable,
    #enviosCourierTable,
    #analisisVentasTable,
    #procesosCerradosTable {
        display: none !important;
    }
    
    /* 2. Mostrar vista de tarjetas */
    .cotizaciones-cards,
    #enviosCourierCards,
    #analisisVentasCards,
    #procesosCerradosCards {
        display: block !important;
        visibility: visible !important;
    }
    
    /* 3. Ajustes de tipografía y espaciado */
    .page-header h1 {
        font-size: 1.5rem;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* 4. Filtros en columna */
    .filter-section .col-md-3,
    .filter-section .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===== ESTILOS DE TARJETAS (Global) ===== */
.cotizacion-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-left: 4px solid var(--isos-orange);
}

.cotizacion-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.cotizacion-card-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.cotizacion-card-label {
    font-weight: 600;
    color: #666;
}

.cotizacion-card-value {
    text-align: right;
    font-weight: 500;
}

/* ===== FIX: BODY SCROLLING & Z-INDEX ===== */
body.menu-open {
    /* Evitar que el contenido se corte o salte al abrir el menú */
    overflow: hidden; /* Solo ocultar scroll si es necesario para evitar doble scroll con sidebar */
    position: relative !important; /* NUNCA fixed */
    height: 100% !important;
    width: 100% !important;
}

/* Z-Index Hierarchy */
.sidebar { z-index: 9999 !important; }
.mobile-overlay { z-index: 9998 !important; }
.header { z-index: 1000 !important; }
.main-content { z-index: 1 !important; position: relative; }

/* Desktop Logic (> 991.98px) */
@media (min-width: 992px) {
    /* Hide Mobile Toggle */
    .mobile-menu-toggle-btn {
        display: none !important;
    }

    /* Show Desktop Toggle (if needed) or keep hidden if sidebar is always static */
    .sidebar-toggle {
        /* Adjust based on design requirement. If sidebar is fixed on desktop, maybe hide this too? */
        /* For now, we assume user wants it hidden based on previous CSS, or visible if it was there. */
        /* User input: "Dejar solo un hamburguesa (preferible en topbar) y ocultar el otro por breakpoint" */
        display: none !important; 
    }
}

/* Ocultar el botón original dentro del user-menu en móvil para evitar duplicados o mala ubicación */
@media (max-width: 768px) {
    .user-menu .sidebar-toggle {
        display: none !important;
    }
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    pointer-events: none; /* FIX: Evitar bloqueo cuando es invisible */
    transition: opacity var(--transition-fast);
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
    pointer-events: auto; /* FIX: Permitir interacción solo cuando está activo */
}

/* Flexbox y Grid responsivos */
.responsive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.responsive-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

/* Imágenes responsivas */
.responsive-img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Contenedores fluidos */
.fluid-container {
    width: 100%;
    max-width: 100%;
    padding: 0 15px;
    margin: 0 auto;
}

/* ===== UTILIDADES RESPONSIVAS ===== */

/* Ocultar/mostrar elementos según dispositivo */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    .show-mobile-flex {
        display: flex !important;
    }
    
    .show-mobile-inline {
        display: inline !important;
    }
}

/* Espaciado responsivo */
.responsive-spacing {
    padding: 2rem;
}

@media (max-width: 767.98px) {
    .responsive-spacing {
        padding: 1rem;
    }
}

@media (max-width: 575.98px) {
    .responsive-spacing {
        padding: 0.5rem;
    }
}

/* Texto responsivo */
.responsive-text {
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    line-height: 1.6;
}

.responsive-title {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    line-height: 1.2;
}

/* ===== MEJORAS DE ACCESIBILIDAD ===== */

/* Focus visible mejorado */
.nav-link:focus-visible,
.btn:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--isos-orange);
    outline-offset: 2px;
}

/* Reducir movimiento para usuarios sensibles */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== FIX: VISIBILITY CONTROL (GLOBAL) ===== */
/* Force hide content views that are not active, applied to all breakpoints to prevent overlap */
.content-view:not(.active),
.cotizacion-container:not(.active),
#nuevaCotizacionContent:not(.active) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Specific fix for transitions */
.content-view.active,
.cotizacion-container.active,
#nuevaCotizacionContent.active {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Fix for Tablet/Desktop overlap issues specifically in header area */
@media (max-width: 991.98px) {
    /* Ensure proper spacing in header */
    .page-header .d-flex.gap-2 {
        margin-top: 1rem;
        width: 100%;
        justify-content: flex-start;
    }
    
    .page-header button {
        flex: 1;
    }
    
    /* Ensure no residual elements from other views */
    .main-content > div:not(.active) {
        display: none !important;
    }
}

/* Fix for Mobile Cards Visibility */
@media (max-width: 768px) {
    #mobileCotizacionesContainer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    /* Ensure individual cards are visible */
    #mobileCotizacionesContainer .card {
        display: block !important;
        visibility: visible !important;
    }
}

/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */

/* ===== CONTROL DE VISTA MÓVIL vs ESCRITORIO (LISTA COTIZACIONES) ===== */
.mobile-view-container {
    display: none !important;
}

.desktop-view-container {
    display: block !important;
}

@media (max-width: 768px) {
    /* Forzar visualización del contenedor móvil */
    .mobile-view-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 20px;
    }
    
        /* Forzar ocultamiento del contenedor de escritorio */
    .desktop-view-container,
    #tableContainer,
    .table-responsive:not(.table-mobile-allowed) {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* Asegurar que las tarjetas dentro sean visibles */
    .mobile-view-container .card {
        display: block !important;
        visibility: visible !important;
        margin-bottom: 1rem !important;
    }
}

/* Aceleración por hardware */
.sidebar,
.main-content,
.nav-link {
    transform: translateZ(0);
    will-change: transform;
}

/* Lazy loading para imágenes */
.lazy-img {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy-img.loaded {
    opacity: 1;
}

/* Mobile Header Logo Styles */
.mobile-header-logo {
    display: none; /* Hidden on desktop */
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin-left: 15px;
    padding: 5px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.mobile-header-logo:hover {
    background-color: rgba(255,255,255,0.05);
}

.mobile-header-logo .brand {
    display: block;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-main);
    line-height: 1.1;
}

.mobile-header-logo .slogan {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

@media (max-width: 768px) {
    .mobile-header-logo {
        display: flex;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a202c;
        --bg-secondary: #2d3748;
        --text-primary: #f7fafc;
        --text-secondary: #e2e8f0;
    }
}

/* Estilos específicos para filtros en móvil */
@media (max-width: 768px) {
    .search-filters-enhanced {
        padding: 1rem !important;
        margin-bottom: 1.5rem !important;
        background: #f8f9fa !important; /* Color plano para mejor rendimiento */
    }
    
    /* Separar visualmente las tarjetas */
    #mobileCotizacionesContainer .card {
        margin-bottom: 1rem !important;
        border: 1px solid #eee !important;
    }
    
    /* Asegurar que el botón Nueva Cotización sea visible en el header */
    .page-header .d-flex.gap-2 {
        display: flex !important;
        visibility: visible !important;
        width: 100%;
        margin-top: 10px;
    }
    
    .page-header button {
        flex: 1; /* Botones expandidos */
    }
}