/* =========================================
   MODO MINIMALISTA - NIVEL PISCOLABIS (Final)
   ========================================= */

/* 1. ESTRUCTURA INVISIBLE Y CENTRADA */
.menu-grid {
    display: block !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

.menu-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 3px 0 !important; /* Menos espacio, más compacto como un folio */
    margin: 0 0 10px 0 !important;
    display: block !important; 
    text-align: center !important; 
    position: relative !important;
}

/* 2. OCULTAR LO QUE SOBRA (Incluso mientras editas) */
.item-img, 
.item-desc,
.badge-wrapper {
    display: none !important; 
}

/* 3. ELIMINAR LOS BORDES FEOS AL HACER CLIC PARA EDITAR EL TEXTO */
[contenteditable="true"]:focus,
[contenteditable="true"]:hover {
    outline: none !important;
    border-bottom: 1px dashed rgba(255,255,255,0.3) !important;
}

/* 4. TIPOGRAFÍA PREMIUM (El secreto de Piscolabis) */
.item-name {
    display: inline !important; 
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 300 !important; /* Letra muy fina y elegante */
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: 0.5px !important; /* Un poco de aire entre letras */
}

.item-price {
    display: inline !important; 
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 500 !important; 
    color: #ffffff !important; /* Todo blanco como Piscolabis */
    margin-left: 15px !important; /* Le damos mucho más aire para separarlo del nombre */
    padding: 0 !important;
}

/* Domamos la fila de alérgenos */
.allergen-row {
    display: inline-block !important;
    vertical-align: baseline !important;
    margin-left: 8px !important;
}

/* Convertimos el botón gigante del "+" en un micro-botón premium */
.allergen-add-btn {
    display: inline-flex !important;
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 50% !important;
    opacity: 0.15 !important; /* Casi fantasma para no ensuciar el diseño */
    transform: translateY(-2px) !important; /* Lo alineamos perfecto con el texto */
    transition: opacity 0.2s ease, background 0.2s ease !important;
    cursor: pointer !important;
}

/* Hacemos que el "+" brille solo cuando pasas el ratón por el plato */
.menu-item:hover .allergen-add-btn {
    opacity: 1 !important;
    background: #D4AF37 !important; /* Tu dorado corporativo al hacer hover */
    color: #000 !important;
}

/* 5. MAGIA EN EL EDITOR: Botones fantasmas (Sólo se ven al pasar el ratón) */
.item-controls-footer {
    display: flex !important; 
    justify-content: center !important;
    opacity: 0 !important; /* Invisibles por defecto */
    height: 0 !important;
    overflow: hidden !important;
    transition: opacity 0.2s ease, height 0.2s ease !important;
    margin: 0 !important;
}

/* Al pasar el ratón (o tocar en móvil), los botones de edición aparecen */
.menu-item:hover .item-controls-footer {
    opacity: 1 !important;
    height: 35px !important; 
    margin-top: 5px !important;
}

/* =========================================
   6. DECORACIONES SVG (Los dibujos laterales)
   ========================================= */
.menu-category {
    position: relative !important; 
    z-index: 1;
}

.category-title {
    display: block !important;
    text-align: center !important;
    font-family: 'Oswald', 'Montserrat', sans-serif !important;
    font-size: 1.8rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    margin-top: 50px !important;
    margin-bottom: 25px !important;
    border: none !important;
    letter-spacing: 1px !important;
}

.decoracion-svg {
    position: absolute;
    top: 50%; 
    width: 150px; /* Un pelín más pequeño para que sea más sutil */
    pointer-events: none; 
    z-index: -1; 
}

.decoracion-svg svg {
    width: 100%;
    height: auto;
    fill: #ffffff; 
    opacity: 0.8; /* Ligeramente transparente */
}

.decoracion-svg.izquierda {
    left: 0px; 
    transform: translateY(-50%) rotate(-10deg);
}

.decoracion-svg.derecha {
    right: 0px;
    transform: translateY(-50%) rotate(10deg);
}

@media (max-width: 768px) {
    .decoracion-svg {
        left: 50% !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0.05 !important;
        width: 220px;
    }
}