/* ================================================
   FIX PARA ESPACIOS EN BLANCO EN MÓVILES
   Especialmente para iPhone 12 Pro y similares
   ================================================ */

/* Reset general para prevenir overflow horizontal */
* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

/* Fix para el wrapper principal */
.page-wrapper {
    width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
}

/* Fix para container-fluid */
.container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Fix específico para el sidebar en móviles */
@media (max-width: 767px) {
    /* OVERRIDE COMPLETO DEL SIDEBAR EN MÓVILES */
    .left-sidebar,
    .sidebar-nav {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 9999 !important;
    }

    /* Cuando el sidebar está visible */
    .left-sidebar.show-sidebar {
        transform: translateX(0) !important;
        box-shadow: 5px 0 20px rgba(0,0,0,0.3) !important;
    }

    /* CRÍTICO: Eliminar TODOS los márgenes del page-wrapper en móviles */
    .page-wrapper,
    .page-wrapper.main-content,
    body:not(.sidebar-collapsed) .page-wrapper,
    body.sidebar-collapsed .page-wrapper,
    body:not(.sidebar-collapsed) .page-wrapper.main-content,
    body.sidebar-collapsed .page-wrapper.main-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Ajustar el topbar para móviles */
    .topbar,
    .page-wrapper.main-content .topbar,
    body:not(.sidebar-collapsed) .page-wrapper.main-content .topbar,
    body.sidebar-collapsed .page-wrapper.main-content .topbar {
        left: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Fix para las tarjetas de mesas */
    .list-mesas {
        width: 100% !important;
        padding: 0 10px !important;
        overflow-x: hidden !important;
    }

    .hover-img {
        max-width: 100% !important;
    }

    /* Fix para modales */
    .modal {
        padding-right: 0 !important;
    }

    .modal-open {
        overflow-x: hidden !important;
        padding-right: 0 !important;
    }

    /* Fix para elementos que pueden causar overflow */
    .card,
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevenir que elementos grandes causen overflow */
    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix para el navbar */
    .topbar {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Ajustes para el contenido del body */
    #main-wrapper {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Fix para elementos con position fixed/absolute */
    .fixed-top,
    .fixed-bottom {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
    }
}

/* Fix específico para iPhone (390px width) */
@media (max-width: 390px) {
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Ajustar el grid de mesas para móviles */
    .list-mesas > div {
        padding: 5px !important;
    }

    .mesa {
        min-width: unset !important;
        width: 100% !important;
    }
}

/* Fix para iPad y tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    /* En tablets mantener el comportamiento de desktop pero con ajustes */
    body:not(.sidebar-collapsed) .page-wrapper,
    body:not(.sidebar-collapsed) .page-wrapper.main-content {
        margin-left: 260px !important;
    }

    body.sidebar-collapsed .page-wrapper,
    body.sidebar-collapsed .page-wrapper.main-content {
        margin-left: 70px !important;
    }
}

/* Prevenir scroll horizontal en elementos específicos */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.col,
[class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Fix para el contenido de venta específicamente */
@media (max-width: 767px) {
    .display-mesas {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .list-mesas {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
        gap: 10px !important;
        padding: 10px !important;
        width: 100% !important;
    }

    /* Asegurar que las pestañas no causen overflow */
    .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .nav-pills .nav-link {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   NAVBAR Y HAMBURGUESA PARA MÓVILES
   ======================================== */

/* Botón hamburguesa estilizado - OVERRIDE COMPLETO */
.mobile-hamburger-btn {
    display: none !important; /* Oculto por defecto */
}

.mobile-menu-btn {
    display: none !important; /* Oculto por defecto */
}

@media (max-width: 767px) {
    .mobile-hamburger-btn,
    .mobile-hamburger-btn.d-md-none {
        display: flex !important; /* Visible solo cuando sidebar está oculto */
        background: white !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        padding: 0 !important; /* Sin padding para centrado perfecto */
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        outline: none !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 36px !important; /* Ancho fijo */
        height: 36px !important;
        border-radius: 8px !important;
        margin-right: 8px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important; /* No permitir que se encoja */
    }

    .mobile-hamburger-btn:hover {
        background: rgba(255,255,255,0.3) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    }

    .mobile-menu-btn {
        display: block !important; /* Visible en móviles */
    }

    /* Asegurar que los iconos sean OSCUROS y estén CENTRADOS */
    .mobile-hamburger-btn i,
    .mobile-menu-btn i,
    .mobile-menu-btn a i,
    .mobile-hamburger-btn .ti,
    .mobile-menu-btn .ti {
        color: #5a6a85 !important; /* Gris oscuro */
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important; /* Block para centrado */
        font-size: 20px !important;
        line-height: 1 !important;
        margin: 0 !important; /* Sin márgenes */
        padding: 0 !important; /* Sin padding */
        position: relative !important; /* Posición relativa */
        left: auto !important; /* Reset left */
        right: auto !important; /* Reset right */
        top: auto !important; /* Reset top */
        bottom: auto !important; /* Reset bottom */
    }

    /* Forzar visibilidad del botón de menú */
    .navbar .mobile-menu-btn a {
        background: white !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        border-radius: 8px !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        padding: 0 !important; /* Sin padding para centrado perfecto */
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    .navbar .mobile-menu-btn a:hover {
        background: rgba(255,255,255,0.3) !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    }
}

@media (min-width: 768px) {
    .mobile-menu-btn,
    .mobile-hamburger-btn {
        display: none !important; /* Oculto cuando sidebar está visible */
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

button[onclick*="toggleSidebar"],
.btn.btn-link.text-white,
.navbar-toggler.sidebartoggler,
.navbar .btn.btn-link[onclick*="toggleSidebar"] {
    background: transparent !important;
    border: none !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    visibility: visible !important;
    opacity: 1 !important;
}

button[onclick*="toggleSidebar"]:hover,
.btn.btn-link.text-white:hover,
.navbar-toggler.sidebartoggler:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

button[onclick*="toggleSidebar"] i,
.btn.btn-link.text-white i,
.navbar-toggler.sidebartoggler i {
    color: white !important;
}

/* Navbar con elementos bien espaciados */
@media (max-width: 767px) {
    /* Layout del navbar para móviles */
    .navbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 5px !important;
        position: relative !important;
        z-index: 1030 !important;
    }

    /* Contenedor izquierdo fijo */
    .navbar > div:first-child {
        display: flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
    }

    /* Espaciador central flexible */
    .navbar .flex-grow-1 {
        flex: 1 1 auto !important;
    }

    /* Contenedor derecho con los botones */
    .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    /* Prevenir overlay de texto del perfil */
    .navbar .dropdown-toggle::after {
        display: none !important;
    }

    /* Ocultar cualquier texto flotante */
    .navbar .position-absolute,
    .navbar .position-fixed {
        position: static !important;
    }

    /* Dropdown de más opciones */
    .mobile-actions-menu {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        min-width: 48px !important;
        max-width: 48px !important;
        width: 48px !important;
        margin-top: 10px !important;
        background: white !important;
    }

    /* Fix para los items del dropdown en móviles */
    .mobile-actions-menu .dropdown-item {
        color: #333 !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .mobile-actions-menu .dropdown-item:hover {
        background: #f8f9fa !important;
        color: #000 !important;
    }

    .mobile-actions-menu .dropdown-item i,
    .mobile-actions-menu .dropdown-item .ti {
        color: #666 !important;
        opacity: 1 !important;
        font-size: 18px !important;
        display: inline-block !important;
        width: 24px !important;
        text-align: center !important;
    }

    .mobile-actions-menu .dropdown-item:hover i {
        color: #333 !important;
    }

    .mobile-actions-menu .dropdown-header {
        color: #6c757d !important;
    }

    .mobile-actions-menu .dropdown-divider {
        border-color: #dee2e6 !important;
    }
}

/* Logo responsive para móviles */
@media (max-width: 767px) {
    /* Ajustar tamaño del logo en móviles */
    .logo-responsive {
        transform: none !important;
        transform-origin: left center !important;
    }

    /* Aumentar tamaño del texto del logo */
    .logo-responsive .logo-main {
        display: flex !important;
        align-items: center !important;
    }

    .logo-responsive .text-open,
    .logo-responsive .text-rest {
        font-size: 22px !important;
        font-weight: 700 !important;
        letter-spacing: -0.5px !important;
    }

    .logo-text.logo-responsive {
        margin-left: 10px !important;
    }

    .logo-main .logo-icon {
        font-size: 24px !important;
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .logo-main .text-open,
    .logo-main .text-rest {
        font-size: 24px !important; /* Aumentar texto para móviles */
        font-weight: 700 !important;
    }

    /* Ocultar tagline en móviles pequeños */
    @media (max-width: 390px) {
        .logo-tagline {
            display: none !important;
        }
    }

    /* Ajustar navbar para móviles */
    .topbar {
        padding: 8px 5px !important;
        height: 60px !important;
        overflow: visible !important;
    }

    .navbar {
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Reducir espacio de botones del navbar en móviles */
    .navbar-nav {
        gap: 0.25rem !important;
        padding-right: 10px !important;
        overflow: visible !important;
    }

    .navbar-nav .nav-link {
        padding: 0.25rem !important;
    }

    /* Asegurar que el botón de perfil no se corte */
    .navbar-nav .dropdown:last-child {
        margin-right: 5px !important;
    }

    /* Imagen de perfil más pequeña en móviles */
    .profile-pic.round-30 {
        width: 30px !important;
        height: 30px !important;
    }

    /* Fix para el dropdown de perfil */
    #dropProfile {
        padding: 4px !important;
    }

    /* Ocultar TODOS los tooltips en móviles */
    .tooltip,
    .tooltip.show,
    .tooltip.bs-tooltip-top,
    .tooltip.bs-tooltip-bottom,
    .tooltip.bs-tooltip-start,
    .tooltip.bs-tooltip-end,
    [role="tooltip"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Asegurar que el dropdown de perfil no muestre texto adicional */
    .navbar-nav .dropdown [data-bs-original-title] {
        overflow: hidden !important;
    }

    /* Ocultar algunos elementos en móviles muy pequeños */
    @media (max-width: 390px) {
        .nav-item.d-none.d-lg-block {
            display: none !important;
        }

        /* Mostrar solo iconos esenciales */
        .navbar-nav .dropdown-toggle span {
            display: none !important;
        }
    }
}

/* Para tablets - mantener el logo completo */
@media (min-width: 768px) and (max-width: 1024px) {
    .logo-responsive {
        transform: scale(0.9) !important;
        transform-origin: left center !important;
    }
}

/* Asegurar que el botón hamburguesa funcione correctamente */
@media (max-width: 767px) {
    /* El botón hamburguesa SIEMPRE visible cuando sidebar está oculto */
    .navbar button[onclick*="toggleSidebar"],
    .navbar .btn.btn-link[onclick*="toggleSidebar"],
    .navbar-toggler.sidebartoggler {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Nunca ocultar con d-none en móviles */
    .navbar .d-md-none {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    /* Ocultar hamburguesa cuando sidebar está visible */
    .navbar button[onclick*="toggleSidebar"],
    .navbar-toggler.sidebartoggler {
        display: none !important;
    }
}

/* Fix para el sidebar cuando se abre desde el hamburguesa */
@media (max-width: 767px) {
    /* Sidebar moderno como drawer */
    .modern-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 260px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease !important;
        z-index: 9999 !important;
    }

    .modern-sidebar.show {
        transform: translateX(0) !important;
        box-shadow: 5px 0 20px rgba(0,0,0,0.3) !important;
    }

    .left-sidebar.show-sidebar {
        transform: translateX(0) !important;
        z-index: 10000 !important;
    }

    /* El botón de toggle dentro del sidebar debe ocultarse en móviles */
    .modern-sidebar .sidebar-toggle {
        display: none !important;
    }

    /* Mostrar textos del menú en móviles */
    .modern-sidebar .sidebar-text {
        display: inline-block !important;
        opacity: 1 !important;
        width: auto !important;
        color: #adb5bd !important;
        margin-left: 10px !important;
        visibility: visible !important;
    }

    /* Asegurar que los links del sidebar sean visibles */
    .modern-sidebar .sidebar-link {
        color: #adb5bd !important;
        display: flex !important;
        align-items: center !important;
    }

    .modern-sidebar .sidebar-link:hover {
        color: #fff !important;
        background: rgba(255,255,255,0.1) !important;
    }

    /* Texto del perfil visible */
    .modern-sidebar .sidebar-profile-info {
        display: block !important;
        opacity: 1 !important;
    }

    .modern-sidebar .sidebar-profile-name,
    .modern-sidebar .sidebar-profile-role {
        display: block !important;
        color: #adb5bd !important;
        opacity: 1 !important;
    }

    /* Asegurar que el sidebar no esté colapsado en móviles cuando se muestra */
    .modern-sidebar.show {
        width: 250px !important;
    }

    .modern-sidebar.show .sidebar-text {
        display: inline-block !important;
        opacity: 1 !important;
    }
}

/* Ajustar padding del contenido principal cuando hay navbar fijo */
@media (max-width: 767px) {
    .page-wrapper {
        padding-top: 60px !important; /* Altura del navbar móvil */
    }
}

/* Overlay para el sidebar en móviles */
.sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9998 !important;
    opacity: 0;
    transition: opacity 0.3s ease !important;
    cursor: pointer;
}

.sidebar-overlay:hover {
    background: rgba(0, 0, 0, 0.6) !important;
}

/* ========================================
   FIX ESPECÍFICO PARA iPHONE 12 PRO (390px)
   ======================================== */
@media (max-width: 390px) {
    /* Logo aún más pequeño */
    .logo-responsive {
        transform: scale(0.6) !important;
        margin-right: -40px !important;
    }

    /* Ocultar el icono del chef en móviles muy pequeños */
    .logo-main .logo-icon {
        display: none !important;
    }

    /* Texto del logo más pequeño */
    .logo-main .text-open,
    .logo-main .text-rest {
        font-size: 14px !important;
    }

    /* Navbar más compacto */
    .navbar {
        min-height: 50px !important;
        max-height: 60px !important;
    }

    /* CRÍTICO: Asegurar que el hamburguesa SIEMPRE sea visible */
    .btn.btn-link.text-white,
    button[onclick*="toggleSidebar"],
    .navbar button[type="button"] {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10000 !important;
        min-width: 40px !important;
        height: 40px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Icono del hamburguesa grande y visible */
    .btn.btn-link.text-white i,
    button[onclick*="toggleSidebar"] i {
        font-size: 24px !important;
        color: white !important;
    }

    /* Ajustar padding del navbar */
    .navbar-nav {
        padding-right: 5px !important;
    }

    /* Prevenir que el contenido se desborde */
    .topbar .with-vertical {
        overflow: visible !important;
    }

    /* Asegurar visibilidad del botón de perfil */
    .navbar-nav .dropdown:last-child {
        position: relative !important;
        z-index: 1001 !important;
    }

    /* Estilo para el menú de acciones móviles */
    .mobile-actions-menu {
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    /* Botón de más opciones visible */
    .nav-item .ti-dots-vertical {
        font-size: 22px !important;
        color: white !important;
    }
}

/* ========================================
   TABS DE ACCIÓN EN VENTA PARA MÓVILES
   ======================================== */

/* Desktop: centrar los tabs */
@media (min-width: 768px) {
    .mobile-action-tabs {
        justify-content: space-evenly !important;
    }
}

@media (max-width: 767px) {
    /* Hacer los tabs horizontalmente scrollables en móviles */
    .mobile-action-tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
        padding: 12px 8px !important;
        margin: 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .mobile-action-tabs .nav-item {
        flex: 0 0 auto !important;
        min-width: 90px !important;
    }

    .mobile-action-tabs .nav-link {
        padding: 10px 12px !important;
        white-space: nowrap !important;
    }

    /* Scrollbar sutil */
    .mobile-action-tabs::-webkit-scrollbar {
        height: 4px !important;
    }

    .mobile-action-tabs::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
    }

    .mobile-action-tabs::-webkit-scrollbar-thumb {
        background: #888 !important;
        border-radius: 10px !important;
    }

    /* Para iPhone específicamente */
    @media (max-width: 390px) {
        .mobile-action-tabs {
            padding: 8px 4px !important;
        }

        .mobile-action-tabs .nav-item {
            min-width: 75px !important;
        }

        .mobile-action-tabs .nav-link {
            padding: 10px 6px !important;
        }

        /* Mostrar solo iconos con badge */
        .mobile-action-tabs .nav-link span > span:not(.badge) {
            display: none !important;
        }

        .mobile-action-tabs .badge {
            display: inline-flex !important;
            margin-left: 2px !important;
            font-size: 10px !important;
            padding: 2px 4px !important;
        }
    }
}

/* ========================================
   FIX FINAL PARA NOMBRE DE USUARIO FLOTANTE
   ======================================== */
@media (max-width: 767px) {
    /* Ocultar cualquier tooltip o popover que pueda mostrar "CARLOS" */
    .bs-tooltip-auto,
    .bs-tooltip-top,
    .bs-tooltip-bottom,
    .bs-tooltip-start,
    .bs-tooltip-end,
    .tooltip-inner,
    [role="tooltip"] {
        display: none !important;
    }

    /* Prevenir que se muestre texto del data-bs-original-title */
    [data-bs-original-title]::before,
    [data-bs-original-title]::after {
        display: none !important;
    }

    /* Asegurar que el dropdown del perfil no tenga texto extra */
    .navbar-nav .dropdown > a {
        overflow: hidden !important;
        text-indent: -9999px !important;
    }

    .navbar-nav .dropdown > a img {
        text-indent: 0 !important;
    }

    /* Fix específico para el botón de perfil */
    #dropProfile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
}

/* ========================================
   OVERRIDE FINAL PARA BOTONES EN MÓVIL
   ======================================== */
@media (max-width: 767px) {
    /* Hamburguesa SIEMPRE visible - SUPER OVERRIDE */
    button.mobile-hamburger-btn,
    .topbar .mobile-hamburger-btn,
    .navbar .mobile-hamburger-btn,
    .topbar button.mobile-hamburger-btn,
    .navbar button.mobile-hamburger-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 9999 !important;
        background: white !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 8px !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
        padding: 6px !important;
        overflow: hidden !important; /* Evitar que el icono salga del botón */
    }

    .mobile-hamburger-btn:hover,
    .mobile-hamburger-btn:active,
    .mobile-hamburger-btn:focus {
        background: #f8f9fa !important; /* Gris claro al hacer hover */
        border-color: rgba(0,0,0,0.2) !important;
    }

    /* Tres puntos SIEMPRE visible */
    .topbar .mobile-menu-btn,
    .navbar .mobile-menu-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 9999 !important;
    }

    /* Los iconos deben ser OSCUROS para verse en botones BLANCOS */
    .mobile-hamburger-btn i,
    .mobile-hamburger-btn .ti-menu-2,
    .mobile-menu-btn .ti-dots-vertical,
    .mobile-menu-btn i {
        color: #5a6a85 !important; /* Gris oscuro como en iPad */
        font-size: 20px !important;
        display: inline-block !important;
        opacity: 1 !important;
        visibility: visible !important;
        line-height: 1 !important;
    }

    /* Asegurar que los iconos NO hereden color blanco */
    button.mobile-hamburger-btn i.ti-menu-2,
    .mobile-menu-btn a i {
        color: #5a6a85 !important;
        font-size: 20px !important;
    }

    /* Fix para iconos y colores en el dropdown menu */
    .mobile-actions-menu .dropdown-item {
        color: #333 !important;
    }

    .mobile-actions-menu .dropdown-item i {
        color: #5a6a85 !important; /* Mismo color que botones */
        display: inline-block !important;
        margin-right: 8px !important;
    }

    .mobile-actions-menu .text-danger,
    .mobile-actions-menu .text-danger i {
        color: #dc3545 !important;
    }

    .mobile-actions-menu .text-success {
        color: #28a745 !important;
    }
}

/* ========================================
   REGLAS ESTRICTAS PARA EVITAR OVERLAP SIDEBAR/HAMBURGUESA
   ======================================== */

/* Exactamente en 768px - punto de transición */
@media (min-width: 768px) {
    /* SIDEBAR VISIBLE - Asegurar que el sidebar esté visible */
    .left-sidebar {
        display: block !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        position: fixed !important;
        width: 260px !important;
    }

    /* HAMBURGUESA OCULTA - Ocultar completamente botones móviles */
    button.mobile-hamburger-btn,
    .mobile-hamburger-btn,
    .topbar .mobile-hamburger-btn,
    .navbar .mobile-hamburger-btn,
    .topbar button.mobile-hamburger-btn,
    .navbar button.mobile-hamburger-btn,
    .mobile-menu-btn,
    .topbar .mobile-menu-btn,
    .navbar .mobile-menu-btn,
    .d-md-none {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
    }

    /* Page wrapper con margen para el sidebar */
    .page-wrapper {
        margin-left: 260px !important;
    }
}

/* Menor a 768px - móviles */
@media (max-width: 767.98px) {
    /* SIDEBAR OCULTO por defecto */
    .left-sidebar {
        transform: translateX(-100%) !important;
        position: fixed !important;
    }

    /* HAMBURGUESA VISIBLE */
    button.mobile-hamburger-btn,
    .mobile-hamburger-btn.d-md-none {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
    }

    /* Page wrapper sin margen */
    .page-wrapper {
        margin-left: 0 !important;
    }
}

/* ========================================
   REGLA ADICIONAL DE SEGURIDAD PARA TRANSICIÓN
   ======================================== */
@media (min-width: 767px) and (max-width: 768px) {
    /* En el punto exacto de transición, priorizar sidebar */
    .mobile-hamburger-btn {
        display: none !important;
    }

    .left-sidebar {
        display: block !important;
        transform: translateX(0) !important;
    }
}

/* Debug: Muestra elementos que causan overflow (comentar en producción) */
/* * {
    outline: 1px solid red !important;
} */