/* ================================================================
   css/header.css
   Migrado desde el <style> inline de includes/header.php.
   Estilos del badge de notificaciones + nav links desktop.
   ================================================================ */

        #hdr-notif-badge:not(.hidden) { position: absolute; }
        #hdr-notif-badge:not(.hidden)::before {
            content: ''; position: absolute; inset: -3px; border-radius: 9999px;
            background: rgba(249, 115, 22, 0.55); animation: mzNotifPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite; z-index: -1; pointer-events: none;
        }
        @keyframes mzNotifPing { 0% { transform: scale(0.9); opacity: 0.8; } 70%, 100% { transform: scale(2.2); opacity: 0; } }
        @media (prefers-reduced-motion: reduce) { #hdr-notif-badge::before { animation: none; } }

        /* ===== Desktop nav links (≥ lg) ===== */
        .mz-hdr-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            transition: color .15s ease, background-color .15s ease;
            white-space: nowrap;
        }
        .mz-hdr-link:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }
        .mz-hdr-link.mz-hdr-active {
            color: #f97316;
            background-color: rgba(249, 115, 22, 0.08);
            box-shadow: inset 0 -2px 0 0 #f97316;
        }
        .mz-hdr-link.mz-hdr-cta {
            color: #fff;
            background: linear-gradient(135deg, rgba(249,115,22,0.18), rgba(249,115,22,0.08));
            box-shadow: inset 0 0 0 1px rgba(249,115,22,0.35);
        }
        .mz-hdr-link.mz-hdr-cta:hover { background: linear-gradient(135deg, rgba(249,115,22,0.28), rgba(249,115,22,0.15)); }


/* ================================================================
   MIGRADO DESDE includes/bottom_nav.css
   (Bottom nav mobile — siempre se renderiza junto al header)
   ================================================================ */
/* =========================================================
   BOTTOM NAV MOBILE · CSS autosuficiente (Rediseño Radical)
   ========================================================= */
#mz-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 70;
    /* Fondo oscuro premium con desenfoque */
    background: rgba(10, 10, 12, 0.95);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
    padding-bottom: env(safe-area-inset-bottom);
}
.mz-btm-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center; /* Alineación central uniforme */
    height: 62px;
}
.mz-btm-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    /* Color por defecto ultra-oscuro para parecer negro */
    color: rgba(255, 255, 255, 0.25); 
    text-decoration: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
    -webkit-tap-highlight-color: transparent;
}
/* Feedback de toque limpio (solo escala) */
.mz-btm-item:active { transform: scale(.94); }
.mz-btm-item > i { font-size: 18px; line-height: 1; }
.mz-btm-item > .mz-btm-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
}

/* Estado activo: Naranja característico */
.mz-btm-item.mz-active { color: #D35400; }

/* Avatar dentro del item (5to puesto) */
.mz-btm-avatar {
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margen visual para alinear con los íconos de 18px */
    margin-top: -2px;
    margin-bottom: -2px;
}
/* Forzamos al avatar generado a respetar el contenedor */
.mz-btm-avatar > div { width: 100% !important; height: 100% !important; }
.mz-btm-avatar img    { width: 100% !important; height: 100% !important; object-fit: cover; }

/* En PC ocultamos toda la bottom nav */
@media (min-width: 1024px) {
    #mz-bottom-nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .mz-btm-item { transition: none; }
}