/* ══════════════════════════════════════════════════════════
   MENÚ CENTRADO · jul 2026 (v2)
   Sobrescribe la alineación del panel del menú (menu.js) para que TODO
   (etiqueta, enlaces, números, línea de página actual) quede CENTRADO en
   todas las páginas. No toca menu.js. Enlazar DESPUÉS de tema-dia.css.
   PERILLAS: fondo → background · centrado → align-items.
   ══════════════════════════════════════════════════════════ */

/* panel a pantalla completa, contenido centrado con flexbox */
.mb-panel {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    align-items: center !important;
    /* fondo a pantalla completa, OPACO (antes se transparentaba y se veía la
       página detrás). Un degradado nocturno sutil para que no sea plano. */
    background: linear-gradient(160deg, #070b18 0%, #04060f 55%, #020309 100%) !important;
    border-left: none !important;
    /* entrada: sube suave con fundido en vez de deslizar de lado */
    transform: translateY(8%) !important;
    opacity: 0;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .5s ease !important;
    padding: 0 24px !important;
}

.mb-panel.mb-on {
    transform: translateY(0) !important;
    opacity: 1;
}

/* etiqueta "// menú" centrada */
.mb-panel .mb-eti {
    text-align: center !important;
    padding-right: 0 !important;
    width: 100% !important;
}

/* enlaces: centrados, SIN el transform lateral que antes chocaba.
   display inline-block + margin auto los centra dentro del panel-flex. */
.mb-panel a {
    text-align: center !important;
    padding: 10px 0 !important;
    width: auto !important;
    align-self: center !important;
    left: auto !important;
    transform: none !important;
}

/* el número (01, 02…) pegado a la derecha de cada palabra */
.mb-panel a::before {
    right: -22px !important;
    left: auto !important;
}

/* línea de la página actual: centrada bajo la palabra */
.mb-panel a.mb-actual::after {
    left: 50% !important;
    right: auto !important;
    width: 46% !important;
    transform: translateX(-50%) !important;
}

/* el velo oscurecedor detrás del panel, más opaco para que nunca se cuele la
   página durante la transición de entrada/salida */
.mb-fondo {
    background: rgba(2, 3, 9, .92) !important;
}