/* ========================================= */
/* 🖥️ MODO ESCRITORIO TIPO DASHBOARD PROFESIONAL */
/* ========================================= */

/* Todo lo que esté aquí adentro SOLO se verá en Tablets y PC */
@media (min-width: 768px) {
    
    /* 1. Anclar el menú a la izquierda limpiamente */
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        transform: none !important;
        width: 250px !important;
        background: var(--surface) !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-right: 1px solid var(--separator);
        overflow-x: hidden;
        z-index: 1001;
    }
    .sidebar-overlay { display: none !important; } 
    
    /* Ocultar la hamburguesa de la barra superior */
    .top-bar .btn-menu { display: none !important; }
    
    /* 2. Empujar el contenido hacia la derecha */
    #mainApp { 
        margin-left: 250px !important; 
        width: calc(100% - 250px) !important;
        transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    }

    /* ========================================= */
    /* DISEÑO DE BOTONES ELEGANTES               */
    /* ========================================= */
    .sidebar-menu { padding: 15px 0 !important; }
    
    .sidebar-menu li button { 
        border-radius: 0 !important; 
        margin: 0 !important; 
        width: 100% !important;
        padding: 16px 25px !important;
        background: transparent !important;
        border-left: 4px solid transparent !important; 
    }
    
    /* Estilo del botón cuando está activo */
    .sidebar-menu li button.active { 
        background: var(--separator) !important; 
        border-left: 4px solid var(--accent) !important; 
        color: var(--accent) !important; 
    }

    /* ========================================= */
    /* 📱 MODO COLAPSADO (SOLO ICONOS)           */
    /* ========================================= */
    body.sidebar-mini .sidebar { width: 70px !important; }
    body.sidebar-mini #mainApp { 
        margin-left: 70px !important; 
        width: calc(100% - 70px) !important; 
    }
    
    /* Ajustes limpios para la cabecera del menú al encogerse */
    body.sidebar-mini #sidebarFullHeader { display: none !important; }
    body.sidebar-mini .sidebar-header { 
        padding: 0 !important; 
        justify-content: center !important; 
    }

    /* Ajuste perfecto de los botones icono-solamente */
    body.sidebar-mini .sidebar-menu li button { 
        font-size: 0 !important; 
        padding: 0 !important; 
        justify-content: center !important; 
        height: 56px !important;
    }
    body.sidebar-mini .sidebar-menu li button i { 
        margin: 0 !important; 
        font-size: 22px !important; 
        width: auto !important; 
    }

    /* ========================================= */
    /* 🛒 PANTALLA DE CAJA (SPLIT-SCREEN POS)    */
    /* ========================================= */
    
    .caja-layout-strict {
        display: grid !important;
        grid-template-columns: 1fr 380px !important; 
        grid-template-rows: 1fr auto !important;
        grid-template-areas: 
            "catalog ticket"
            "catalog footer" !important;
        overflow: hidden !important; 
        height: calc(100vh - 60px) !important; /* 1. Fija el límite exacto de la pantalla */
    }
    
    .area-catalogo {
        grid-area: catalog;
        overflow-y: auto !important; 
        padding: 25px !important;
        min-height: 0 !important; /* 2. Activa el scroll del catálogo */
    }
    
    .area-ticket {
        grid-area: ticket;
        overflow-y: auto !important; 
        border-left: 1px solid var(--separator) !important;
        background: var(--bg) !important;
        padding: 20px !important;
        min-height: 0 !important; /* 3. Activa el scroll de los productos */
    }
    
    .panel-inferior-caja {
        grid-area: footer;
        position: static !important;
        border-left: 1px solid var(--separator) !important;
        border-top: 1px dashed var(--separator) !important;
        padding: 20px !important;
        box-shadow: none !important;
        background: var(--surface) !important;
    }

    /* ========================================= */
    /* 📌 CABECERA DE TICKET FIJA (STICKY)       */
    /* ========================================= */
    .ticket-header {
        position: sticky !important;
        top: -20px !important; 
        background: var(--bg) !important; 
        z-index: 20 !important; 
        
        /* Compensamos el hueco superior */
        margin-top: -20px !important; 
        padding-top: 20px !important; 
        
        /* ✨ NUEVO: Compensamos los huecos laterales para que tape de orilla a orilla */
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        
        /* Le damos un pequeño respiro abajo para que se vea limpio */
        padding-bottom: 10px !important;
    }

} /* <--- AQUÍ SE CIERRAN LAS REGLAS DE TABLET/PC (min-width: 768px) */

/* ========================================= */
/* 📱 REGLAS EXCLUSIVAS PARA CELULARES       */
/* ========================================= */
@media (max-width: 767px) {
    /* Ocultar botones que son solo para PC */
    .hide-on-mobile { display: none !important; }
}