/* =========================================
   1. VARIABLES Y RESET BASE
   ========================================= */
:root {
    /* Variables dinámicas (Se sobreescribirán con JS según el tenant) */
    --color-primary: #ff4757;
    --color-primary-dark: #ff1e34;
    --color-bg: #f1f2f6;
    --color-surface: #ffffff;
    --color-text: #2f3542;
    --color-text-light: #747d8c;

    /* ⭐ FIX: Agregamos el color del borde (Gris claro) ⭐ */
    --color-border: #dfe4ea;

    /* Variables estáticas de UI */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-circle: 50%;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

html[data-theme="dark"] {
    --color-bg: #1e272e;
    --color-surface: #2f3640;
    --color-text: #f5f6fa;
    --color-text-light: #dcdde1;

    /* ⭐ FIX: Color del borde para modo oscuro (Gris oscuro) ⭐ */
    --color-border: #57606f;

    --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* 👇 FIX: Elimina el parpadeo/cuadro azul al tocar elementos en móviles */
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.hidden {
    display: none !important;
}

/* =========================================
   2. COMPONENTES COMPARTIDOS (UI)
   ========================================= */

/* Círculo para Logo / Avatar */
.logo-circle {
    width: 80px;
    height: 80px;
    background-color: var(--color-surface);
    border-radius: var(--radius-circle);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: var(--shadow);
    border: 3px solid var(--color-primary);
    overflow: hidden;
}

.logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Formularios */
.input-group {
    text-align: left;
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--color-text);
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #dfe4ea;
    border-radius: var(--radius-md);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
    background-color: var(--color-surface);
    color: var(--color-text);
}

html[data-theme="dark"] .input-group input,
html[data-theme="dark"] .input-group select,
html[data-theme="dark"] .input-group textarea {
    border-color: #57606f;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus {
    border-color: var(--color-primary);
}

/* Botones */
.btn-primary {
    width: 100%;
    padding: 14px;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    margin-top: 10px;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-primary:disabled {
    background-color: #a4b0be;
    cursor: not-allowed;
}

.btn-outline {
    flex: 1;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 600;
}

.btn-outline:hover {
    background-color: var(--color-primary);
    color: white;
}

/* Mensaje de Error */
.error-message {
    color: #ff4757;
    font-size: 0.85rem;
    margin: 10px 0;
    background-color: #ffeaea;
    padding: 10px;
    border-radius: var(--radius-sm);
}

/* Loader */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loader-container p {
    margin-top: 15px;
    font-weight: 600;
    color: var(--color-text-light);
}

.loader-container .logo-circle {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(255, 71, 87, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
    }
}

/* Modales */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    /* Antes era 100vw */
    height: 100% !important;
    /* Antes era 100dvh */

    /* Efecto Glassmorphism (Usa color-mix para adaptarse a claro/oscuro) */
    background-color: color-mix(in srgb, var(--color-bg) 60%, transparent) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    /* Soporte Safari/iOS */

    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px !important;
}

.modal-content {
    background-color: var(--color-surface);
    width: 100%;
    max-width: 500px;
    border-radius: var(--radius-lg);
    padding: 20px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #dfe4ea;
    padding-bottom: 10px;
}

.btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-light);
    border-radius: 100%;
    height: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Toasts */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 250px;
    padding: 15px 20px;
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-weight: 600;
    border-left: 5px solid;
}

.toast.show {
    transform: translateX(0);
}

.toast-success {
    border-left-color: #2ed573;
}

.toast-error {
    border-left-color: #ff4757;
}

.toast-warning {
    border-left-color: #ffa502;
}

/* =========================================
   3. VISTAS DE AUTENTICACIÓN (LOGIN/BLOQUEOS)
   ========================================= */
.auth-container {
    width: 100%;
    max-width: 400px;
    padding: 20px;
}

.auth-card {
    background-color: var(--color-surface);
    padding: 30px 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    text-align: center;
}

.header-logo {
    margin: 0 auto 20px auto;
}

.auth-card h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.auth-card p {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 25px;
}

/* =========================================
   4. INTERFAZ DE ADMINISTRACIÓN / STAFF
   ========================================= */
.dashboard-header {
    width: 100%;
    background: var(--color-surface);
    /* 👇 FIX: calc() empuja el padding hacia abajo respetando el Notch */
    padding: calc(15px + env(safe-area-inset-top)) 20px 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
    border-bottom: 1px solid var(--color-border);
    flex-direction: row;
    margin-bottom: 0px;
    box-shadow: none;
    border: none;
}


.brand-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.brand-info .logo-circle {
    width: 50px;
    height: 50px;
    border-width: 2px;
}

.brand-info h2 {
    font-size: 1.2rem;
    color: var(--color-text);
}

.btn-logout {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-light);
    transition: color 0.2s;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Estilos de Navegación de Administración (Desktop por defecto) */
.mobile-only-btn {
    display: none;
}

.mobile-only-header {
    display: none !important;
}

.admin-nav {
    background-color: var(--color-surface);
    border: none;
    position: sticky;
    top: 0;
    /* <-- Aquí estaba en 75px */
    z-index: 90;
    width: 100%;
}

.admin-nav-container {
    display: flex;
    justify-content: center;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-nav-buttons {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    overflow-x: auto;
}

.main-tab-btn {
    padding: 10px 15px;
    border: 1px solid #dfe4ea;
    background: transparent;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.main-tab-btn.active {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* El engrane se queda como círculo de 40px siempre */
#btn-settings {
    width: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
}

/* El botón de Accesos Rápidos en PC (Estilo igual a "Modo Claro") */
#btn-mobile-menu {
    padding: 0 15px;
    border-radius: 20px;
    font-weight: 600;
    width: auto;
    font-size: 0.95rem;
}

/* Ocultar el icono de hamburguesa en PC */
.mobile-icon {
    display: none;
}

.desktop-text {
    display: inline;
}



/* Forzar que el menú de hamburguesa sea un panel deslizable a la izquierda en TODAS las pantallas */
.drawer-izquierdo {
    position: fixed;
    top: 0;
    left: -320px;
    /* Oculto fuera de la pantalla por defecto */
    width: 300px;
    max-width: 85vw;
    height: 100vh;
    background-color: var(--color-bg);
    z-index: 1050;
    transition: left 0.3s ease-in-out;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
}

/* El JavaScript añade esta clase para sacarlo */
.drawer-izquierdo.open {
    left: 0;
}



/* Limpieza y estructura base del Header (Aplica a PC) */


.header-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Estilos compartidos para los botones del header */
.action-btn {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}



.btn-theme {
    padding: 0 15px;
    border-radius: 20px;
    font-weight: 600;
}




/* =========================================
   OCULTAR ELEMENTOS MÓVILES EN PC
   ========================================= */
@media (min-width: 769px) {
    .mobile-only-btn {
        display: none !important;
    }
}

/* =========================================
   OCULTAR ELEMENTOS PC EN MÓVIL
   ========================================= */
@media (max-width: 768px) {
    .desktop-only-btn {
        display: none !important;
    }


    /* =========================================
       BOTÓN HAMBURGUESA (MODO MÓVIL)
       ========================================= */
    #btn-mobile-menu {
        width: 40px !important;
        height: 40px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 1.2rem !important;
        justify-content: center !important;
    }

    /* Intercambiar la visibilidad: Mostrar Hamburguesa, ocultar Texto */
    .mobile-icon {
        display: inline !important;
    }

    .desktop-text {
        display: none !important;
    }


    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .brand-info {
        width: 100%;
    }

    .header-actions {
        width: 100%;
        justify-content: space-between;
        /* Separa los botones equitativamente */
    }




    .categorias-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }


    /* Asegurar que el engrane se vea en móvil y se alinee bien */
    .mobile-only-btn {
        display: flex !important;
    }

    /* REDISEÑO DE LOS BOTONES DEL PANEL DE CONTROL (MODO MÓVIL) */
    .admin-nav-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* Separación como en los accesos rápidos */
        padding: 20px;
    }

    .main-tab-btn {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left;
        padding: 15px !important;
        font-size: 1rem !important;
        background-color: var(--color-surface) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 8px !important;
        color: var(--color-text) !important;
        font-weight: 600 !important;
        width: 100% !important;
        transition: all 0.2s ease !important;
    }

    /* Agregamos la flechita a la derecha mágicamente con CSS */
    .main-tab-btn::after {
        content: '❯';
        color: var(--color-text-light);
        font-size: 1rem;
        font-weight: bold;
    }

    /* Cuando el botón está seleccionado (Activo) */
    .main-tab-btn.active {
        border-color: var(--color-primary) !important;
        background-color: transparent !important;
        color: var(--color-primary) !important;
    }

    .main-tab-btn.active::after {
        color: var(--color-primary) !important;
    }

    /* Ajuste especial para el botón rojo de Cerrar Sesión */
    #btn-logout.main-tab-btn {
        margin-top: 15px !important;
        /* Lo separamos un poco del resto */
        border-color: #ff4757 !important;
        color: #ff4757 !important;
    }

    #btn-logout.main-tab-btn::after {
        color: #ff4757 !important;
    }

    /* =========================================
       TRANSFORMAR NAVEGACIÓN EN PANEL LATERAL (SOLO MÓVIL)
       ========================================= */
    .admin-nav {
        position: fixed !important;
        top: 0 !important;
        left: -320px !important;
        /* Lo esconde fuera de la pantalla por defecto */
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        background-color: var(--color-bg) !important;
        z-index: 1050 !important;
        transition: left 0.3s ease-in-out !important;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5) !important;
        overflow-y: auto !important;
        border: none !important;
        margin-top: 0 !important;
    }

    /* Esta es la clase que el Javascript le agrega cuando tocas el engrane */
    .admin-nav.open {
        left: 0 !important;
        /* Lo desliza hacia adentro de la pantalla */
    }

    .admin-nav-container {
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Asegurar que la cabecera del menú ocupe todo el ancho */
    .mobile-only-header {
        width: 100% !important;
    }

    /* Mostrar la cabecera (Título y botón X) solo en móviles */
    .mobile-only-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        /* 👇 FIX: Aplicamos el mismo ajuste al menú deslizable */
        padding: calc(15px + env(safe-area-inset-top)) 20px 15px;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .mobile-only-header h2 {
        font-size: 1.2rem;
        margin: 0;
        color: var(--color-text);
    }
}

.dashboard-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

@media (min-width: 768px) {
    .dashboard-layout {
        grid-template-columns: 2fr 1fr;
    }
}

.section-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    height: auto;
}

.section-header {
    border-bottom: 2px solid var(--color-bg);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    color: white;
    font-weight: bold;
    margin-left: 5px;
    background-color: var(--color-primary);
}

@keyframes pulseBadge {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0.7);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 5px rgba(255, 71, 87, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 71, 87, 0);
    }
}

.badge.pulse-active {
    animation: pulseBadge 1.5s infinite;
    background-color: var(--color-primary) !important;
}

.order-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-card {
    border: 1px solid #dfe4ea;
    border-radius: var(--radius-md);
    padding: 15px;
    border-left: 5px solid var(--color-primary);
    background-color: var(--color-surface);
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--color-text-light);
}

.order-items {
    list-style: none;
    margin-bottom: 15px;
}

.order-items li {
    padding: 5px 0;
    border-bottom: 1px dashed #dfe4ea;
    font-size: 0.95rem;
}

.order-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f6;
}

/* =========================================
   5. INTERFAZ DE CLIENTES (MESA Y DELIVERY)
   ========================================= */
.client-layout {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.client-header {
    background-color: var(--color-surface);
    padding: 80px 20px 30px 20px;
    text-align: center;
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.client-header .logo-circle {
    margin: 0 auto 15px auto;
    width: 100px;
    height: 100px;
}

.client-header h1 {
    font-size: 1.5rem;
    color: var(--color-text);
}

/* Grid del Menú Cliente */
.client-menu-grid {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.client-menu-item {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 15px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-menu-info h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.client-menu-info p {
    color: var(--color-primary);
    font-weight: 600;
}

.btn-add {
    background-color: var(--color-primary);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--shadow);
}

/* Carrito Flotante */
.floating-cart {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 560px;
    background-color: var(--color-primary);
    color: white;
    border-radius: var(--radius-lg);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    z-index: 900;
}

.floating-cart-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.1rem;
}

.cart-badge {
    background-color: white;
    color: var(--color-primary);
    width: 25px;
    height: 25px;
    border-radius: var(--radius-circle);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
}

.cart-items-list {
    list-style: none;
    margin-bottom: 20px;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f2f6;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Tracker de Pedidos */
.tracker-card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 30px 20px;
    box-shadow: var(--shadow);
    text-align: center;
    margin: 20px;
}

.order-stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin: 20px 0;
    padding: 0 10px;
}

.stepper-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 3px;
    background-color: #dfe4ea;
    z-index: 1;
    transform: translateY(-50%);
}

.step {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
}

.step .step-icon {
    background-color: var(--color-surface);
    color: var(--color-text-light);
    border: 2px solid #dfe4ea;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.step.active .step-icon {
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 5px var(--color-primary);
}

.step p {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 10px;
}

/* =========================================
   6. REGLAS EXCLUSIVAS DE IMPRESIÓN (QR)
   ========================================= */
#qr-print-area {
    display: none;
}

@media print {

    /* 1. Regresamos el body a su estado normal para evitar cortes por Flexbox */
    body {
        display: block !important;
        background-color: white !important;
        min-height: auto !important;
    }

    /* 2. Ocultamos y ELIMINAMOS el espacio físico de toda la app */
    body>* {
        display: none !important;
    }

    /* 3. Mostramos SOLO nuestra área de impresión en el flujo normal */
    #qr-print-area {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        width: 100%;
        padding: 20px;
    }

    /* Mantenemos tus tarjetas de QR intactas */
    .qr-card {
        border: 2px dashed #000;
        padding: 15px;
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        page-break-inside: avoid;
        /* Evita que un QR se parta en dos hojas */
    }

    /* Aseguramos que cualquier imagen, canvas o svg se ajuste a 5cm exactos */
    .qr-card img,
    .qr-card svg,
    .qr-card canvas {
        width: 5cm !important;
        height: 5cm !important;
        max-width: 100%;
        object-fit: contain;
        margin-bottom: 10px;
    }

    .qr-card h3 {
        font-size: 14pt;
        margin: 0;
        color: #000;
    }
}

/* =========================================
   7. CARRITO (DRAWER Y ANIMACIONES)
   ========================================= */

/* Drawer General Overlay */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.drawer-overlay.show {
    opacity: 1;
    visibility: visible;
}

.drawer-content {
    position: fixed;
    top: 0;
    right: -400px;
    width: 100%;
    max-width: 400px;
    height: 100dvh;
    background-color: var(--color-surface);
    z-index: 1001;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895);
    display: flex;
    flex-direction: column;
}

@media (prefers-color-scheme: dark) {
    .drawer-content {
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    }
}

.drawer-overlay.show .drawer-content {
    right: 0;
}

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid var(--color-bg);
}

.drawer-body {
    flex: 1;
    padding: 20px;
    padding-bottom: 120px;
    overflow-y: auto;
}

.drawer-footer {
    padding: 20px;
    border-top: 1px solid var(--color-bg);
    background-color: var(--color-surface);
}

/* Animación de agregar al carrito */
@keyframes popIn {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.btn-add:active {
    animation: popIn 0.2s ease;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
    border-radius: var(--radius-circle);
    transition: background-color 0.2s;
    color: var(--color-text);
}

.theme-toggle-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .theme-toggle-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Animación para indicar pedidos activos */
@keyframes glowingButton {
    0% {
        box-shadow: 0 0 5px var(--color-primary);
    }

    50% {
        box-shadow: 0 0 20px var(--color-primary);
        border-color: var(--color-primary);
    }

    100% {
        box-shadow: 0 0 5px var(--color-primary);
    }
}

.btn-glow {
    animation: glowingButton 2s infinite !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}


/* Grid para las categorías del menú */
.categorias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}




/* Botones de subida IA */
.btn-upload-choice {
    flex: 1;
    background: var(--color-bg);
    border: 2px dashed #dfe4ea;
    border-radius: var(--radius-md);
    padding: 20px 10px;
    cursor: pointer;
    color: var(--color-text);
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-upload-choice:hover,
.btn-upload-choice:active {
    border-color: #8e44ad;
    background: rgba(142, 68, 173, 0.05);
    color: #8e44ad;
}

html[data-theme="dark"] .btn-upload-choice {
    border-color: #57606f;
}

/* Barra de progreso IA */
.progress-bar-container {
    width: 100%;
    height: 12px;
    background-color: var(--color-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8e44ad, #ff4757);
    border-radius: 10px;
    transition: width 1s linear;
}



/* Nuevas Tarjetas Resumen de Órdenes */
.orden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.tarjeta-resumen {
    background-color: var(--color-surface);
    border: 1px solid #dfe4ea;
    border-radius: var(--radius-md);
    padding: 15px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.tarjeta-resumen:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.tarjeta-resumen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-bg);
    padding-bottom: 8px;
}

.tarjeta-resumen-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tarjeta-estado-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
}

/* Colores de estado */
.estado-pendiente {
    background-color: #ffeaea;
    color: #ff4757;
}

.estado-preparando {
    background-color: #fff3cd;
    color: #ffa502;
}

.estado-completado {
    background-color: #e5f9ed;
    color: #2ed573;
}

.estado-encamino {
    background-color: #e8e8ff;
    color: #3742fa;
}



/* =========================================
   NUEVO: SWITCH MESAS VS ÓRDENES
   ========================================= */
.view-toggle-container {
    display: flex;
    background-color: #dfe4ea;
    border-radius: var(--radius-lg);
    padding: 5px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .view-toggle-container {
    background-color: #1e272e;
    border: 1px solid var(--color-border);
}

.view-toggle-btn {
    flex: 1;
    padding: 12px 15px;
    border: none;
    background: transparent;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-light);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-toggle-btn.active {
    background-color: var(--color-surface);
    color: var(--color-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Forzamos a que el main deje de ser Grid en celular cuando usamos el switch */
@media (max-width: 767px) {



    .mesero-grid {
        display: block !important;
    }
}





.top-nav-tabs {
    position: sticky !important;
    top: 0px !important;
    z-index: 100 !important;
    background-color: transparent !important;
    padding: 12px 20px !important;
    margin-bottom: 15px !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

html[data-theme="dark"] .top-nav-tabs {
    background-color: none !important;
    border-bottom: none !important;
}

.segmented-control {
    display: flex !important;
    background-color: var(--color-bg) !important;
    border-radius: var(--radius-md) !important;
    padding: 5px !important;
    width: calc(100% - 20px) !important;
    max-width: 600px !important;
    margin: 20px 0px 20px 0px;
    border: 1px solid #dfe4ea !important;
    box-sizing: border-box !important;

}

.top-nav-tabs-pro {
    position: fixed;
    z-index: 1000;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    background: color-mix(in srgb, var(--color-bg) 92%, transparent);
    /* 👉 FIX 1: Padding estabilizado para evitar saltos */
    padding: 10px 0px 15px 0px;
    border-radius: 0px;
    /* 👉 FIX 2: Centrado perfecto */
    display: flex;
    justify-content: center;
    align-items: center;
}

.segmented-control {
    display: flex;
    width: calc(100% - 20px);
    margin: 0 auto;
    /* Obliga al menú a centrarse */
}

html[data-theme="dark"] .segmented-control {
    border-color: #5e5e5e !important;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5) !important;
}

.segment-btn {
    flex: 1 !important;
    padding: 12px 5px !important;
    border: none !important;
    background: transparent !important;
    /* Quita el fondo gris del navegador */
    border-radius: var(--radius-sm) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: var(--color-text-light) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;

    /* 🔴 ESTO ES LO QUE QUITA EL DISEÑO FEO DEL NAVEGADOR 🔴 */
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
}

.segment-btn.active {
    background-color: var(--color-surface) !important;
    /* Se vuelve blanca (o gris oscuro en modo noche) */
    color: var(--color-primary) !important;
    /* 🟠 Aquí jalará automáticamente tu color naranja 🟠 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    /* Le da el efecto de relieve 3D */
}


/* =========================================
   AJUSTES FINOS DE MODALES Y MENÚ
   ========================================= */
/* Oculta la "X" roja de eliminar ticket cuando estamos en el modal flotante */
#body-carrito-flotante #btn-cancelar-nuevo-ticket {
    display: none !important;
}

/* Le damos un borde y sombra más definidos a las categorías para que no se pierdan */
.category-card {
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

html[data-theme="dark"] .category-card {
    border-color: #57606f !important;
    background-color: var(--color-surface) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}


/* =========================================
   ESTILOS DE MODIFICADORES TIPO PÍLDORA (CLIENTE)
   ========================================= */
.mod-pill-input {
    display: none;
    /* Ocultamos el círculo/cuadrito original */
}

.mod-pill-content {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    background-color: var(--color-bg);
    /* Gris claro por defecto */
    border: 1px solid var(--color-border);
    border-radius: 20px;
    /* Bordes redondeados tipo píldora */
    color: var(--color-text);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

/* Estado cuando se selecciona (Verde) */
.mod-pill-input:checked+.mod-pill-content {
    background-color: #2ed573;
    /* Verde principal */
    color: white;
    border-color: #2ed573;
    box-shadow: 0 4px 6px rgba(46, 213, 115, 0.2);
}

.mod-pill-check {
    display: none;
    /* Oculto por defecto */
    font-weight: bold;
}

/* Mostrar la palomita solo cuando está seleccionado */
.mod-pill-input:checked+.mod-pill-content .mod-pill-check {
    display: inline;
}

.mod-pill-input:checked+.mod-pill-content .mod-pill-check::before {
    content: '✓';
}

/* Modo oscuro de las píldoras (opcional pero recomendado) */
html[data-theme="dark"] .mod-pill-content {
    background-color: var(--color-surface);
}

html[data-theme="dark"] .mod-pill-input:checked+.mod-pill-content {
    background-color: #2ed573;
}




/* =========================================
   ESTILOS DEL BUSCADOR DE GOOGLE MAPS (WEB COMPONENT NUEVO)
   ========================================= */

/* 1. Contenedor principal (El fondo que veías rojo) */
gmp-place-autocomplete {
    width: 100%;
    margin-bottom: 15px;
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box;
    display: block;
}

/* Cambio de borde al enfocar el buscador */
gmp-place-autocomplete:focus-within {
    border-color: var(--color-primary) !important;
}

/* 2. El input interno (Transparente para que herede el color del contenedor) */
gmp-place-autocomplete::part(input) {
    background-color: transparent !important;
    color: var(--color-text) !important;
    border: none !important;
    /* El borde ahora lo controla el contenedor principal */
    padding: 12px 15px !important;
    font-size: 1rem !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100%;
}

/* 3. Icono de la lupa y cruz */
gmp-place-autocomplete::part(search-icon),
gmp-place-autocomplete::part(clear-button) {
    color: var(--color-text-light) !important;
}

/* ====================================================
   NUEVO: ESTILOS PARA LA LISTA DE PREDICCIONES
   ==================================================== */



/* Hover en las sugerencias */
gmp-place-autocomplete::part(prediction-item):hover {
    background-color: var(--color-bg) !important;
}

/* 5. Textos dentro de las sugerencias (Nombre de la calle/lugar) */
gmp-place-autocomplete::part(prediction-item-main-text) {
    color: var(--color-text) !important;
    font-size: 0.95rem !important;
}

/* Texto de coincidencia exacta (ej. la "V" en rojo o resaltada) */
gmp-place-autocomplete::part(prediction-item-match) {
    color: var(--color-primary) !important;
    font-weight: bold !important;
}

/* Detalles secundarios de la dirección (Colonia, Estado, etc.) */
gmp-place-autocomplete::part(prediction-item-secondary-text) {
    color: var(--color-text-light) !important;
    font-size: 0.85rem !important;
}


/* 1. Fondo general de la lista desplegable (Arregla el cuadro negro de Google Maps) */
gmp-place-autocomplete::part(prediction-list) {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--color-text-light) !important;
    /* Para que el texto de Google se adapte */
}

/* 2. Cada sugerencia más compacta ("chaparrita") */
gmp-place-autocomplete::part(prediction-item) {
    background-color: var(--color-surface) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 8px 15px !important;
    /* <-- Bajamos de 12px a 8px el padding vertical */
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

/* 3. Color dinámico para el icono del "Pin" al lado de las direcciones */
gmp-place-autocomplete::part(prediction-item-icon) {
    color: var(--color-text-light) !important;
}

/* 5. Cada dirección sugerida */
.pac-item {
    border-top: 1px solid var(--color-border) !important;
    color: var(--color-text-light) !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    font-size: 0.9rem !important;
    transition: background-color 0.2s ease !important;
}

.pac-item:hover,
.pac-item-selected {
    background-color: var(--color-bg) !important;
}

/* 6. Textos y coincidencias dentro del buscador */
.pac-item-query {
    color: var(--color-text) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding-right: 5px !important;
}

.pac-matched {
    color: var(--color-primary) !important;
    font-weight: bold !important;
}

html[data-theme="dark"] .pac-icon {
    filter: invert(0.8) !important;
}

.pac-logo::after {
    background-color: transparent !important;
}


/* =========================================
   TABS DE ÓRDENES (DESKTOP - Vista clásica)
   ========================================= */
.admin-orders-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    overflow-x: auto;
}

.admin-tab-btn {
    flex: 1;
    min-width: 150px;
    padding: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: bold;
    color: var(--color-text-light);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Separación entre el icono, el texto y el contador */
}

/* Estado activo en PC */
.admin-tab-btn.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
}

/* =========================================
   TABS DE ÓRDENES (MÓVIL - Píldoras / Botones)
   ========================================= */
@media (max-width: 768px) {






    .admin-orders-tabs {
        flex-wrap: wrap;
        /* Permite que bajen a la siguiente línea */
        overflow-x: visible;
        /* Quitamos el scroll */
        border-bottom: none;
        /* Quitamos la línea gigante inferior */
        padding-bottom: 0;
    }

    .admin-tab-btn {
        flex: 1 1 calc(50% - 10px);
        /* 2 botones por fila para que se acomoden perfecto */
        min-width: auto;
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 12px 5px;
    }

    /* Botón encendido (se rellena de color) */
    .admin-tab-btn.active {
        background-color: var(--color-primary) !important;
        color: white !important;
        border-color: var(--color-primary) !important;
    }

    /* Truco: Si el botón está relleno, el contador invierte sus colores para destacar */
    .admin-tab-btn.active .badge {
        background-color: white !important;
        color: var(--color-primary) !important;
    }
}


/* Oculta las flechas de los inputs numéricos en Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


#report-print-area {
    display: none;
}

@media print {
    #report-print-area.active-print {
        display: block !important;
        width: 100%;
        background: white;
    }
}


/* =========================================
   CALENDARIO DE CIERRES FINANCIEROS
   ========================================= */
.cal-day-box {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: bold;
    font-size: 0.9rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-light);
    transition: transform 0.2s, box-shadow 0.2s;
}

.cal-day-pending {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.cal-day-closed {
    background-color: #2ed573;
    color: white;
    border-color: #2ed573;
}

/* Personalizacion de las barras de desplazamiento (Scrollbars) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
    /* Sin fondo en la pista */
}

::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.4);
    /* Barra semitransparente */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.7);
}

/* Soporte para Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
}




/* =========================================
   Toggle Facturacion
   ========================================= */

.switch-ui {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch-ui input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-ui .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-border);
    transition: .3s;
}

.switch-ui .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.switch-ui input:checked+.slider {
    background-color: var(--color-primary);
}

.switch-ui input:checked+.slider:before {
    transform: translateX(24px);
}

.switch-ui .slider.round {
    border-radius: 26px;
}

.switch-ui .slider.round:before {
    border-radius: 50%;
}



/* ==============================================================
   MODO SPLIT-SCREEN (COMANDA A LA DERECHA/IZQUIERDA) EN TABLET Y ESCRITORIO
   ============================================================== */
@media (min-width: 900px) {



    /* ==============================================================
       1. BLOQUEO GLOBAL DE PANTALLA (Detiene el crecimiento infinito)
       ============================================================== */
    html,
    body {
        height: 100%;
        overflow: hidden !important;
    }

    #app-content {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    main {
        flex: 1 !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        /* Permite scroll natural si estás en la vista de Mesas u Órdenes */
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Mostramos botones exclusivos de PC */
    .desktop-only-btn {
        display: flex !important;
    }

    /* 1. Contenedor Maestro: Lo bloqueamos al tamaño exacto de la pantalla */
    #vista-menu:not(.hidden) {
        display: flex !important;
        flex-direction: row !important;
        /* 🔥 MAGIA: 'stretch' obliga a la comanda a medir exactamente lo mismo que la pantalla */
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 20px;
        padding: 0 20px !important;
    }


    /* Invertir el orden (Botón Mover) */
    #vista-menu.comanda-izquierda {
        flex-direction: row-reverse !important;
    }

    /* 2. El Menú de Alimentos: Toma solo el espacio que sobra */
    #wrapper-menu-alimentos {
        flex: 1 !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        /* Hereda la altura por el stretch del padre */
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    /* 3. El Ticket / Comanda: Panel Rígido Inamovible */
    #panel-nuevo-ticket {
        display: flex !important;
        position: relative !important;
        width: 380px !important;
        min-width: 380px !important;
        max-width: 380px !important;
        height: auto !important;
        /* Hereda la altura por el stretch del padre */
        max-height: 100% !important;
        min-height: 0 !important;
        /* 🔥 Impide que flexbox lo expanda por la fuerza */
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-lg) !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
        overflow: hidden !important;
        /* Bloquea la caja, obligando al scroll de los platillos */
    }

    /* 4. Ocultamos botones flotantes que solo sirven en celular */
    #btn-ver-comanda-flotante,
    #contenedor-regresar-confirmar {
        display: none !important;
    }

    /* 5. Modal de personalización con un margen y espacio separado de la comanda */
    #modal-opciones-platillo {
        position: fixed !important;
        top: 90px !important;
        bottom: 20px !important;
        /* 🔥 FIX: Se estira anclándose al fondo */
        height: auto !important;
        width: calc(100% - 440px) !important;
        /* 🔥 FIX: 100% en lugar de 100vw */
        background: transparent !important;
        padding: 0 !important;
        align-items: flex-start !important;
        z-index: 3500 !important;
    }


    #modal-opciones-platillo .modal-content {
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: var(--radius-lg) !important;
        box-shadow: var(--shadow-lg) !important;
        border: 1px solid var(--color-border) !important;
        margin: 0 !important;
    }

    /* ==============================================================
       LÓGICA RESPONSIVA DEL MODAL (IZQUIERDA/DERECHA)
       ============================================================== */
    /* 1. Estado por defecto -> Modal a la DERECHA (Comanda en la izquierda) */
    body:not(.comanda-izquierda-activa) #modal-opciones-platillo {
        right: 20px !important;
        left: auto !important;
        border-left: 1px solid var(--color-border) !important;
        border-right: none !important;
    }

    /* 2. Estado invertido -> Modal a la IZQUIERDA (Comanda en la derecha) */
    body.comanda-izquierda-activa #modal-opciones-platillo {
        left: 20px !important;
        right: auto !important;
        border-right: 1px solid var(--color-border) !important;
        border-left: none !important;
    }

    /* 6. Control de Botones del Ticket (Minimizar vs Cancelar) */
    .btn-minimizar-movil {
        display: none !important;
    }

    .btn-cancelar-pc {
        display: flex !important;
    }



    .grid-platillos-inline {
        grid-template-columns: repeat(2, 1fr) !important;
        /* Estricto 2 columnas en PC/Tablet */

    }
}

/* ==============================================================
   NUEVA CUADRÍCULA DE PLATILLOS (2 COLUMNAS PC / 1 COLUMNA MÓVIL)
   ============================================================== */
.grid-platillos-inline {
    display: grid;
    grid-template-columns: 1fr;
    /* 1 columna por defecto (Celulares) */
    gap: 15px;
}


/* ==============================================================
   EFECTO GLASSMORPHISM (CRISTAL) EN LA COMANDA
   ============================================================== */

/* 1. El fondo de la comanda debe ser el color base */
#panel-nuevo-ticket {
    background-color: var(--color-bg) !important;
}

/* 🔥 FIX: Devolvemos el comportamiento de pantalla completa en celulares */
@media (max-width: 899px) {
    #panel-nuevo-ticket {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        z-index: 3000 !important;
        margin: 0 !important;
    }
}


/* 2. Capa superior unificada: Encabezado y Pestañas flotantes juntas */
#header-glass-comanda {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20 !important;
    background: color-mix(in srgb, var(--color-surface) 75%, transparent) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* 4. Las Vistas (Nueva orden / Ya pedido) ocupan el 100% de la pantalla */
#vista-side-nueva,
#vista-side-cuenta {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100% !important;
    background: transparent !important;
}

/* 5. Listas de platillos: Les damos padding para que no queden tapadas por los cristales */
#nuevo-ticket-items,
#body-cuenta-side {
    background: transparent !important;
    height: 100% !important;
    box-sizing: border-box;
    padding-top: 130px !important;
    /* Deja el hueco superior para los headers */
    padding-bottom: 200px !important;
    /* Deja el hueco inferior para los botones */
}

/* 6. Capa inferior: Footers (Botones de Siguiente, Cobrar, etc.) flotantes */
#vista-side-nueva>div:last-child,
#footer-cuenta-side {
    position: absolute !important;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20 !important;
    background: color-mix(in srgb, var(--color-surface) 10%, transparent) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}