/* ================================================================= */
/* 📱 FASE APP NATIVA: DISEÑO MÓVIL GLOBAL Y PWA                     */
/* ================================================================= */

/* Ocultamos la barra inferior táctil en PC por defecto */
.admin-bottom-bar { display: none; } 

@media (max-width: 768px) {
    /* 1. OCULTAR MENÚS LATERALES Y AJUSTAR CONTENEDOR */
    #sidebar, .sidebar { display: none !important; }
    #content, .main-content { 
        margin-left: 0 !important; 
        width: 100% !important; 
        padding: 15px !important; 
        padding-bottom: 100px !important; /* Espacio clave para que la barra inferior no tape el contenido */
    }
    
    /* 2. BARRA INFERIOR TÁCTIL (BOTTOM APP BAR) - Para Admin y Mozos */
    .admin-bottom-bar { 
        display: flex !important; 
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        background-color: #1e1e2d; /* Color oscuro base de tu sistema */
        z-index: 1050; 
        height: 75px; /* Altura ideal para tap táctil */
        padding-bottom: env(safe-area-inset-bottom, 5px); /* Margen de seguridad para iPhones (la barrita negra) */
        box-shadow: 0 -4px 15px rgba(0,0,0,0.2); 
        justify-content: space-around; 
        align-items: center; 
    }
    .admin-bottom-bar .nav-item-mobile { 
        flex: 1; 
        text-align: center; 
        color: #a2a3b7; 
        text-decoration: none; 
        font-size: 0.75rem; 
        font-weight: bold; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        gap: 5px; 
        height: 100%;
        transition: color 0.2s;
    }
    .admin-bottom-bar .nav-item-mobile i { 
        font-size: 1.4rem; 
    } 
    .admin-bottom-bar .nav-item-mobile.active { 
        color: #ffffff; /* Brilla en blanco cuando estás en esa pestaña */
    }

    /* 3. BOTONERA SUPERIOR MÓVIL (GRILLA 2x2 TIPO DASHBOARD) */
    .botones-kds-mobile { 
        display: grid !important; 
        grid-template-columns: 1fr 1fr; /* Crea exactamente 2 columnas simétricas */
        gap: 10px !important; 
        padding-bottom: 10px; 
        margin-top: 15px; 
        width: 100%;
    }
    .botones-kds-mobile .btn { 
        width: 100%; 
        white-space: normal; 
        border-radius: 12px !important; /* Estilo tarjeta moderna */
        font-size: 0.85rem; 
        padding: 12px 5px; 
        line-height: 1.2; 
        display: flex;
        justify-content: center; 
        align-items: center; 
        text-align: center; 
        flex-direction: column; /* Pone el ícono arriba del texto */
    }
    .botones-kds-mobile .btn i { 
        margin-right: 0 !important; 
        margin-bottom: 5px; 
        font-size: 1.3rem; 
    }

    /* 4. COLUMNAS DEL KDS (CARRUSEL HORIZONTAL TIPO TRELLO/KANBAN) */
    .kds-row-mobile {
        display: flex !important; 
        flex-wrap: nowrap !important; 
        overflow-x: auto !important; 
        gap: 15px; 
        scroll-snap-type: x mandatory; /* Fuerza a que se detenga justo en la columna al deslizar */
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch; /* Deslizamiento suave en iOS */
        width: calc(100% + 30px);
        margin-left: -15px; 
        padding-left: 15px; 
        padding-right: 15px;
    }
    .kds-row-mobile::-webkit-scrollbar { 
        display: none; /* Escondemos la fea barra de scroll de Windows/Android */
    }
    .kds-row-mobile > div { 
        min-width: 88vw; /* Cada columna ocupa el 88% del ancho de la pantalla */
        max-width: 88vw; 
        scroll-snap-align: center; 
        flex: 0 0 auto; 
    }
    
    /* 5. OPTIMIZACIÓN DE TARJETAS (MAPA DE MESAS) EN CELULAR */
    .card-mesa .card-body { padding: 0.75rem !important; }
    .card-mesa h4, .card-mesa h5, .card-mesa h6 { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
    .card-mesa .small { font-size: 0.75rem !important; }
    .card-mesa .badge { font-size: 0.65rem !important; padding: 0.4rem !important; white-space: normal; line-height: 1.1; }
    .card-mesa .btn { font-size: 0.75rem !important; padding: 0.3rem 0.5rem !important; }
    .card-mesa .mozo-nombre { font-size: 0.70rem !important; line-height: 1.1 !important; margin-top: 2px; }
    .card-mesa i.fa-user-tie { font-size: 0.75rem !important; }
}

/* ==========================================================
   MAGIA GASTRONOMÍA: Botones con identidad de cocina
   Recolorea los botones "Volver / Volver al Panel" (btn-outline-secondary)
   y agrega acentos reutilizables para acciones de salón / cocina / caja.
   ========================================================== */
:root {
    --gastro-oliva: #6b7c3a;        /* verde oliva de cocina */
    --gastro-oliva-oscuro: #566430;
    --gastro-terracota: #c1583b;    /* terracota de horno */
    --gastro-mostaza: #d9a441;      /* mostaza de panadería */
}

/* Botones "Volver" y secundarios: acento oliva gastronómico */
.btn-outline-secondary {
    --bs-btn-color: var(--gastro-oliva);
    --bs-btn-border-color: var(--gastro-oliva);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--gastro-oliva);
    --bs-btn-hover-border-color: var(--gastro-oliva);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--gastro-oliva-oscuro);
    --bs-btn-active-border-color: var(--gastro-oliva-oscuro);
    --bs-btn-focus-shadow-rgb: 107, 124, 58;
}

/* Botón sólido reutilizable (terracota) para acciones de salón/cocina */
.btn-gastro {
    background-color: var(--gastro-terracota);
    border-color: var(--gastro-terracota);
    color: #ffffff;
}
.btn-gastro:hover, .btn-gastro:focus { background-color: #a8482f; border-color: #a8482f; color: #ffffff; }

/* Botón sólido reutilizable (mostaza) para acciones destacadas */
.btn-gastro-mostaza {
    background-color: var(--gastro-mostaza);
    border-color: var(--gastro-mostaza);
    color: #221c0b;
}
.btn-gastro-mostaza:hover, .btn-gastro-mostaza:focus { background-color: #c8942f; border-color: #c8942f; color: #221c0b; }