/* app.css - Estilos globales para MasterMenu */
:root {
    --color-fondo: #5a9acf;
    --azul-header: #7ec3ff;
    --dorado: #d4af37;
    --blanco: #fff;
}
body, html {
    font-family: 'Inter', Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
    color: #fff;
    background-color: var(--color-fondo);
    background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
    background-attachment: fixed;
}
.bg-pattern {
    background-color: var(--color-fondo);
    background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
    background-attachment: fixed;
}
.header, nav.header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: var(--azul-header);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    box-shadow: 0 2px 12px #0002;
}
.header-inner {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-logo img {
    height: 44px;
    width: auto;
    display: block;
}
.header-menu {
    color: var(--blanco);
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2;
}
.header-placeholder {
    width: 44px;
    height: 44px;
}
.text-mesa {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    opacity: 0.8;
    line-height: 1;
    margin-top: 2px;
    text-align: center;
}
.text-mesa-dark {
    color: #222;
    opacity: 0.8;
}
.banners-container {
    margin-top: 96px;
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.banner-categoria {
    width: 80vw;
    max-width: 700px;
    min-height: 120px;
    background: rgba(255,255,255,0.07);
    border: 1.5px solid var(--dorado);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 24px #0002;
    transition: background 0.2s, box-shadow 0.2s;
    padding: 44px 18px;
    position: relative;
}
.banner-categoria:hover {
    background: rgba(255,255,255,0.13);
    box-shadow: 0 8px 32px #0003;
}
.banner-categoria:hover .banner-titulo {
    color: var(--dorado);
}
.banner-titulo {
    color: var(--blanco);
    font-family: 'Playfair Display', serif;
    font-size: 2.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    user-select: none;
    transition: color 0.2s;
}
@media (max-width: 900px) {
    .banners-container {
        max-width: 99vw;
    }
    .banner-categoria {
        width: 95vw;
        min-height: 80px;
        padding: 24px 4vw;
    }
    .header-inner {
        max-width: 99vw;
    }
}
/* Panel lateral y botones flotantes */
#sideOrderPanel, .offcanvas-custom {
    background: rgba(30,36,50,0.97);
    color: var(--blanco);
}
.pulse-red {
    box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
.animate-ring { animation: ring 2s infinite; }
@keyframes ring {
    0%, 50%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.active-tab { border-bottom: 4px solid white; transform: scale(1.1); font-weight: 900 !important; color: white !important; }