/* =========================================
   MOBILE OVERRIDES (MIDNIGHT LUXURY)
   ========================================= */
/* 
   Este archivo sobreescribe estilos de styles.css 
   SOLO para dispositivos móviles (max-width: 768px).
*/

@media (max-width: 768px) {

    /* 1. NAVBAR FIXED & GLASSMROPHISM */
    /* 1. NAVBAR FIXED & GLASSMROPHISM - HIGH SPECIFICITY */
    body .navbar {
        height: 60px !important;
        background-color: rgba(10, 10, 10, 0.95) !important;
        /* Slightly more opaque for contrast */
        backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid rgba(212, 175, 55, 0.1) !important;

        z-index: 21000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        /* PREVENT CLIPPING */
    }

    body .hamburger {
        display: block !important;
        /* Force show on mobile */
        z-index: 21001 !important;
        /* Ensure clickable */
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    body .nav-links {
        z-index: 20999 !important;
        /* High enough */

        /* MOBILE MENU LOGIC */
        position: fixed !important;
        top: 60px !important;
        /* Below navbar */
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 60px) !important;
        background: rgba(10, 10, 10, 0.98) !important;
        backdrop-filter: blur(20px);

        display: none !important;
        /* Hidden by default */
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 30px !important;
        padding-bottom: 100px !important;
        /* Avoid dock overlap */
    }

    .nav-links.active {
        display: flex !important;
        /* OPEN MENU */
        animation: fadeInMenu 0.3s ease forwards;
    }

    @keyframes fadeInMenu {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .logo-text {
        font-size: 1.5rem;
        /* Ajuste de tamaño */
        z-index: 21002 !important;
        /* Above menu bg */
        position: relative;
    }

    .nav-container {
        overflow: visible !important;
        /* CRITICAL FIX: Allow menu to spill out */
    }

    /* 2. MEJORA DE TOUCH TARGETS (Dedo gordo friendly) */
    .cat-btn,
    .move-btn,
    .btn,
    .action-btn {
        min-width: 44px;
        min-height: 44px;
        touch-action: manipulation;
        /* Evita zoom accidental */
    }

    /* 3. ESPACIADO DE CONTENIDO */
    .section {
        padding: 40px 0;
        /* Menos padding vertical */
    }

    .container {
        padding: 0 15px;
        /* Aprovechar más el ancho */
    }

    /* 4. TIPOGRAFÍA AJUSTADA */
    .section-title {
        font-size: 2.2rem;
        margin-bottom: 30px;
    }

    .hero-content h1 {
        font-size: 3rem;
        /* Reducir giant title */
    }

    /* 5. MENÚ GRID EN COLUMNA */
    .menu-grid {
        grid-template-columns: 1fr;
        /* Una sola columna obligatoria */
        gap: 20px;
    }

    /* 6. ESTABILIZACIÓN MODO EDICIÓN */
    .item-price[contenteditable="true"] {
        min-width: 60px;
        /* Evita colapse al borrar */
        min-height: 1.2em;
        display: inline-block;
        transition: none !important;
        /* CERO animaciones al escribir */
    }

    /* FIX ALERGENOS CUT-OFF (User Request: "Primera columna un pelin a la izquierda") */
    /* 1. Prevent Horizontal Scroll */
    #allergenModal .modal-content {
        padding: 1.5rem 0.5rem !important;
        /* Minimal side padding */
        width: 90vw !important;
        /* Safe width */
        max-width: 380px !important;
        box-sizing: border-box !important;
        /* CRITICAL for padding */
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
    }

    /* 2. Compact Grid layout */
    #allergenForm {
        column-gap: 2px !important;
        /* Tightest gap */
        row-gap: 5px !important;
    }

    /* 3. Shrink Content to Fit */
    #allergenForm label {
        gap: 6px !important;
        /* Reduce internal gap */
        font-size: 0.85rem !important;
        /* Slightly smaller text */
        white-space: nowrap !important;
        /* Prevent wrap */
    }

    /* =========================================
       3. MOBILE ADMIN CONTROLS (UNIFIED)
       ========================================= */

    /* Reuse #admin-controls but change layout to Horizontal & BOTTOM DOCK */
    #admin-controls,
    .mobile-edit-toolbar {
        display: flex !important;
        flex-direction: row !important;
        /* Horizontal layout */
        align-items: center;
        gap: 25px;
        /* Space between buttons - Wider for pleasant touch */

        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;

        /* FULL WIDTH DOCK STYLE */
        transform: none !important;
        justify-content: center !important;
        /* CENTER CONTENT ALWAYS */
        width: 100% !important;

        background: rgba(10, 10, 10, 0.95);
        /* Deeper, solid-ish background */
        height: 80px;
        padding: 0 0 15px 0;
        /* Padding for Home Indicator */

        border-top: 1px solid rgba(212, 175, 55, 0.3);
        /* Top gold border */
        border-right: none;
        border-left: none;
        border-bottom: none;
        border-radius: 20px 20px 0 0;
        /* Smooth top corners */

        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

        z-index: 20000 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        opacity: 1 !important;

        box-sizing: border-box;
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    }




    /* Ensure admin buttons are visible, sized correctly, and CENTERED (no margins) */
    #admin-controls .admin-btn,
    .mobile-edit-toolbar .admin-btn {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        display: none !important;
        /* DEFAULT HIDDEN to prevent Flash */
        margin: 0 !important;
        /* CRITICAL FOR CENTERING */
        pointer-events: auto !important;
        box-shadow: none;
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        /* HEARTBEAT ANIMATION */
        animation: dockHeartbeat 3s infinite ease-in-out;
    }

    @keyframes dockHeartbeat {
        0% {
            transform: scale(1);
            filter: brightness(1);
        }

        5% {
            transform: scale(1.1);
            filter: brightness(1.2);
        }

        10% {
            transform: scale(1);
            filter: brightness(1);
        }

        15% {
            transform: scale(1.15);
            filter: brightness(1.3);
            text-shadow: 0 0 5px var(--accent);
        }

        30% {
            transform: scale(1);
            filter: brightness(1);
        }

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

    /* Ocultar Solo Redundancias */
    .hero-edit-btn,
    .hero-pan-btn,
    #global-collapse-btn,
    .admin-dock {
        display: none !important;
    }

    /* FORCE VISIBILITY FOR MOBILE EDIT BUTTONS */
    /* On mobile, we want these visible in edit mode regardless of inline styles */
    .mode-editing #saveBtn,
    .mode-editing #organizeBtn,
    .mode-editing #logoutBtn,
    .mode-editing #brandingBtn,
    .mode-editing #premiumBanner {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* OCULTAR LETRAS DE TODOS LOS BOTONES EN MÓVIL (SÓLO ICONOS) MENOS GUARDAR */
    #organizeBtn .btn-label,
    #logoutBtn .btn-label,
    #brandingBtn .btn-label,
    #premiumBanner .btn-label {
        display: none !important;
    }

    #organizeBtn.with-text,
    #logoutBtn.with-text,
    #brandingBtn.with-text,
    #premiumBanner.with-text {
        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    /* BOTÓN GUARDAR: OVALADO INTERMEDIO (Equilibrio entre espacio y visibilidad) */
    #saveBtn.with-text {
        width: 115px !important;
        height: 42px !important;
        padding: 0 10px !important;
        border-radius: 42px !important;
        justify-content: center !important;
        background: rgba(76, 175, 80, 0.2) !important;
        border: 1px solid #4CAF50 !important;
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.3) !important;
    }

    #saveBtn.with-text .btn-icons {
        display: flex !important;
        font-size: 1.1rem !important;
        gap: 4px !important;
    }

    #saveBtn.with-text .btn-label {
        display: inline-block !important;
        font-size: 0.65rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        text-align: left !important;
        font-weight: 700 !important;
        color: #4CAF50 !important;
    }

    /* Ensure the edit button is visible when NOT editing */
    body:not(.mode-editing) #editBtn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }


}