/* =====================================================================
   EMUCMS - MENÚ MÓVIL INDEPENDIENTE
   - En PC (> 1024px): TODO lo de este archivo está oculto.
   - En móvil (≤ 1024px): se oculta #blz-nav (main.css) y se activa esto.
   ===================================================================== */

/* ---------- PC: apagado total ---------- */
.m-topbar,
.m-backdrop,
.m-drawer {
    display: none;
}

/* ---------- MÓVIL ---------- */
@media (max-width: 1024px) {

    /* Barra superior compacta */
    .m-topbar {
        display: flex;
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 60px;
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
        z-index: 9990;
        background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.55));
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .m-brand img {
        height: 38px;
        display: block;
        filter: drop-shadow(0 2px 8px rgba(0,0,0,.8));
    }

    .m-topbar-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .m-burger,
    .m-bell {
        position: relative;
        width: 42px; height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        text-decoration: none;
        transition: border-color .2s, color .2s;
    }
    .m-burger:active,
    .m-bell:active { color: var(--wow-gold-600, #f8b700); border-color: var(--wow-gold-600, #f8b700); }

    .m-bell span {
        position: absolute;
        top: -5px; right: -5px;
        min-width: 18px;
        padding: 2px 5px;
        border-radius: 10px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        text-align: center;
    }

    /* Fondo oscuro */
    .m-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(0,0,0,.65);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }
    .m-backdrop.is-open { opacity: 1; visibility: visible; }

    /* Panel lateral */
    .m-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0;
        width: 82vw;
        max-width: 320px;
        height: 100%;
        height: 100dvh;
        z-index: 9999;
        background: linear-gradient(180deg, #14161c 0%, #0b0c10 100%);
        border-left: 1px solid rgba(248,183,0,.35);
        box-shadow: -12px 0 40px rgba(0,0,0,.7);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s ease, visibility .3s ease;
    }
    .m-drawer.is-open { transform: translateX(0); visibility: visible; }

    .m-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .m-drawer-head img { height: 34px; }

    .m-close {
        width: 38px; height: 38px;
        background: transparent;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 6px;
        color: #fff;
        font-size: 18px;
        cursor: pointer;
    }

    /* Enlaces (desde la BD) */
    .m-links {
        list-style: none;
        margin: 0;
        padding: 8px 0;
        flex: 1;
        overflow-y: auto;
    }
    .m-links a {
        display: block;
        padding: 14px 22px;
        color: #e5e7eb;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: .5px;
        text-transform: uppercase;
        text-decoration: none;
        border-left: 3px solid transparent;
    }
    .m-links a:active,
    .m-links a.active {
        color: var(--wow-gold-600, #f8b700);
        background: rgba(248,183,0,.06);
        border-left-color: var(--wow-gold-600, #f8b700);
    }

    /* Pie: idioma + cuenta */
    .m-drawer-foot {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        border-top: 1px solid rgba(255,255,255,.06);
    }
    .m-drawer-foot .blz-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .m-lang {
        width: 100%;
        padding: 10px;
        background: rgba(0,0,0,.5);
        color: #fff;
        border: 1px solid rgba(255,255,255,.2);
        border-radius: 4px;
        font-weight: 700;
        font-family: var(--font-body);
    }

    /* Bloquear scroll del fondo con el menú abierto */
    body.m-lock { overflow: hidden; }
}