/*
 * Menú público (views/layouts/_menu.php).
 *
 * Se apoya en el tema de 2022 —#navbar, .nav-link, .dropdown-menu— y solo añade lo que
 * faltaba. No se reescribe el menú entero: el JS del tema depende de esa estructura para
 * el menú móvil, y cambiarla lo rompe.
 *
 * Lo que añade:
 *
 * - Marcar la página actual. No había NADA que dijera dónde estabas, ni en el
 *   desplegable.
 * - Destacar «Submit a report», que es la razón de ser del sitio y era un enlace igual
 *   que los demás.
 * - Bajar el peso de «Admin login» / «Dashboard», que es para el equipo, no para el
 *   vecino que entra a reportar.
 */

/* --- página actual --- */
#navbar .nav-link.menu-aqui {
    color: #b3557a;
    font-weight: 700;
    position: relative;
}
/* Subrayado bajo el enlace activo. Con solo el color, en la cabecera blanca del tema
   apenas se distingue del resto. */
#navbar .nav-link.menu-aqui::after {
    content: '';
    position: absolute;
    left: .5rem;
    right: .5rem;
    bottom: 2px;
    height: 2px;
    background: #f2849e;
    border-radius: 2px;
}
#navbar .dropdown-item.menu-aqui {
    background: #fdf2f5;
    color: #b3557a;
    font-weight: 600;
}

/* --- la acción principal --- */
#navbar .nav-link.menu-destacado {
    background: #f2849e;
    color: #fff !important;
    border-radius: 999px;
    padding: .4rem 1rem;
    margin: 0 .25rem;
    transition: background-color .12s;
}
#navbar .nav-link.menu-destacado:hover { background: #e06e8a; }
/* Destacado y además activo: el subrayado sobre el fondo rosa no se ve, así que se
   marca con un aro. */
#navbar .nav-link.menu-destacado.menu-aqui { box-shadow: 0 0 0 3px rgba(242,132,158,.3); }
#navbar .nav-link.menu-destacado.menu-aqui::after { display: none; }

/* --- el enlace del equipo, más discreto --- */
#navbar .nav-link.menu-apagado { color: #9aa5b1; font-size: 14px; }
#navbar .nav-link.menu-apagado:hover { color: #6c7d8e; }

/* --- desplegables un poco más presentables --- */
#navbar .dropdown-menu {
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    padding: .35rem;
}
#navbar .dropdown-item {
    border-radius: 5px;
    font-size: 14px;
    padding: .45rem .7rem;
}
#navbar .dropdown-item:hover { background: #f4f5f7; color: #585858; }

/* El icono del menú móvil es un <i>: sin esto no se ve que se puede pulsar. */
.mobile-nav-toggle { cursor: pointer; }
.mobile-nav-toggle:focus-visible { outline: 2px solid #f2849e; outline-offset: 3px; }

/* En el menú móvil el tema pinta el panel sobre fondo oscuro, así que el destacado y el
   activo necesitan otro tratamiento para que se lean. */
@media (max-width: 991px) {
    #navbar.navbar-mobile .nav-link.menu-destacado {
        display: inline-block;
        margin: .5rem 1rem;
    }
    #navbar.navbar-mobile .nav-link.menu-aqui::after { display: none; }
    #navbar.navbar-mobile .nav-link.menu-aqui { color: #f2849e; }
}


/* ⚠️ El hueco de la cabecera fija.
   Lo daba el `margin-top: 100px` de un <div class="container"> que solo existía para
   colgar de él el selector de idioma. Al mover el selector a la cabecera había que poner
   ese hueco en algún sitio, o TODAS las páginas se meterían debajo del menú. */
.sitio-contenido { padding-top: 100px; }


/* La barra lleva logo + siete entradas + selector de idioma + cuatro redes. Se aprietan
   un poco los enlaces para que quepa todo sin que nada se toque. */
@media (min-width: 992px) and (max-width: 1400px) {
    #navbar .nav-link { padding-left: .55rem; padding-right: .55rem; font-size: 15px; }
    #navbar .nav-link.menu-destacado { padding: .35rem .8rem; }
}