/* =========================================
   1. VARIABLES GLOBALES (PASO CAFÉ)
   ========================================= */
:root {
    /* Paleta Minimalista - Specialty Coffee */
    --paso-oscuro: #1A1A1A;      
    --paso-medio: #545454;       
    --acento-tostado: #C17767;   
    --crema-claro: #FFFFFF;      
    --fondo-app: #F8F6F4;        
    --fondo-secundario: #E8E6E3; 
    --texto-oscuro: #1A1A1A;     
    --texto-gris: #737373;       
}

* { 
    margin: 0; padding: 0; box-sizing: border-box; 
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif; 
    -webkit-tap-highlight-color: transparent;
}

body { 
    background-color: var(--fondo-app); 
    color: var(--texto-oscuro); 
    overflow-x: hidden; 
}

a { text-decoration: none; }

/* Ocultar barra de scroll (Estilo App Nativa) */
::-webkit-scrollbar { display: none; }

/* =========================================
   2. NAVEGACIÓN INFERIOR (DOCK) - PREMIUM DARK
   ========================================= */
.hub-dock-container {
    position: fixed; bottom: 20px; left: 0; width: 100%;
    display: flex; justify-content: center;
    z-index: 9000; pointer-events: none;
}

.hub-dock {
    display: flex; gap: 15px;
    /* Fondo oscuro carbón translúcido para máximo contraste */
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    padding: 12px 25px; border-radius: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    pointer-events: auto;
    border: 1px solid rgba(255,255,255,0.1);
    align-items: flex-end;
}

.hub-dock-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #888888; /* Iconos inactivos en gris suave */
    width: 50px; height: 50px; border-radius: 16px;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s, color 0.2s;
    position: relative;
}

.hub-dock-item:active, .hub-dock-item.active {
    color: var(--crema-claro); /* Icono activo en blanco */
    background: rgba(255, 255, 255, 0.15); /* Fondo sutil para el botón activo */
}

.hub-icon { font-size: 1.5rem; margin-bottom: 2px; z-index: 2; }

.hub-label {
    font-size: 0.7rem; font-weight: 700; opacity: 0;
    transform: translateY(10px); transition: all 0.2s;
    position: absolute; bottom: -15px; white-space: nowrap;
    color: var(--crema-claro); /* Texto flotante en blanco */
}

.hub-dock-item.active-label .hub-label { opacity: 1; transform: translateY(0); }

/* =========================================
   3. ESTRUCTURA DEL MENÚ DE PLATOS (CARDS)
   ========================================= */
.menu-container { padding: 0 20px 120px 20px; max-width: 800px; margin: 0 auto; }

.categoria-contenedor { margin-bottom: 40px; }
.categoria-titulo { 
    font-size: 1.5rem; font-weight: 800; color: var(--paso-oscuro); 
    margin-bottom: 15px; border-bottom: 2px solid var(--fondo-secundario); 
    padding-bottom: 10px; 
}

.plato { 
    display: flex; justify-content: space-between; align-items: center; 
    background: var(--crema-claro); padding: 18px; border-radius: 16px; 
    margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
    border: 1px solid transparent; transition: 0.2s;
}
.plato:active { border-color: var(--paso-oscuro); transform: scale(0.98); }

.plato-info { flex: 1; padding-right: 15px; }
.plato-info h3 { font-size: 1.1rem; color: var(--paso-oscuro); margin-bottom: 5px; font-weight: 700; }
.plato-info p { font-size: 0.85rem; color: var(--texto-gris); line-height: 1.4; }

.precio-contenedor { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px;}
.precio { font-weight: 800; color: var(--paso-oscuro); font-size: 1.1rem; }
.precio-variante { font-size: 0.85rem; color: var(--texto-gris); font-weight: 600; text-align: right; }
.precio-combo { font-size: 0.75rem; color: var(--acento-tostado); font-weight: bold; background: var(--fondo-secundario); padding: 3px 8px; border-radius: 6px; }

.btn-add-carrito { 
    background: var(--fondo-secundario); color: var(--paso-oscuro); 
    border: none; width: 35px; height: 35px; border-radius: 10px; 
    font-weight: bold; font-size: 1.2rem; cursor: pointer; 
    display: flex; justify-content: center; align-items: center; 
    transition: 0.2s; 
}
.btn-add-carrito:active { background: var(--paso-oscuro); color: white; transform: scale(0.9); }

/* =========================================
   4. FILTROS Y BUSCADOR
   ========================================= */
.filtros-menu { 
    display: flex; gap: 10px; padding: 0 20px 20px 20px; 
    max-width: 800px; margin: 0 auto; position: sticky; 
    top: 0; background: var(--fondo-app); z-index: 100; 
}

.buscador { 
    flex: 1; display: flex; align-items: center; 
    background: var(--crema-claro); border-radius: 12px; 
    padding: 0 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
    border: 1px solid var(--fondo-secundario);
}
.buscador input { 
    border: none; outline: none; padding: 12px 10px; 
    width: 100%; font-size: 0.95rem; background: transparent; color: var(--paso-oscuro);
}

.ordenador select { 
    height: 100%; border: 1px solid var(--fondo-secundario); 
    border-radius: 12px; padding: 0 15px; outline: none; 
    background: var(--crema-claro); color: var(--paso-oscuro); 
    font-weight: 600; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.03); 
}

/* =========================================
   5. BANNERS Y EXTRAS
   ========================================= */
.banner-mediodia { 
    background: var(--paso-oscuro); color: var(--crema-claro); 
    padding: 12px; border-radius: 12px; margin-bottom: 20px; 
    text-align: center; font-size: 0.9rem; 
}

.mesa-badge { 
    position: fixed; top: 15px; right: 15px; 
    background: var(--crema-claro); color: var(--paso-oscuro); 
    padding: 8px 15px; border-radius: 20px; font-weight: 800; 
    font-size: 0.85rem; box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    z-index: 1000; display: flex; align-items: center; gap: 8px; 
}

.mesa-punto { width: 10px; height: 10px; background: #1E8E3E; border-radius: 50%; animation: titilar 2s infinite; }
@keyframes titilar { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }