/* ==========================================================================
   Menú único del sitio (visual/menu.php): logo + buscador + barra de navegación.
   Se carga en las dos familias de plantillas (visual/header.php y vis/header.php),
   después de stylemol.css / stilosmol.css. Por eso:
     - los colores van escritos (stilosmol.css no define las variables --azul, etc.)
     - los selectores llevan .mol-cabecera / .mol-nav para ganarle a las reglas
       genéricas de .navbar-default, .navbar-nav… de ambas hojas.
   ========================================================================== */

/* Logo + buscador */
.mol-cabecera { min-height: 60px; width: 100%; overflow-x: clip; }
.mol-cabecera .img-logoMol { max-width: 200px; }
/* La franja gris mide 200% para llegar al borde derecho; overflow-x: clip evita el scroll horizontal */
.mol-cabecera .barrabuscador { width: 200%; height: 60px; background-color: #F8F8F8; margin: 35px 0; }
.mol-cabecera .barrabuscador label { margin-left: 20px; color: #283378; }
.mol-cabecera .barrabuscador input { width: 30%; border-color: #283378; height: 30px; margin: 15px 20px; }
.mol-cabecera .barrabuscador-btn { position: relative; left: -50px; padding: 0 4px; border: 0; background: none; color: #283378; cursor: pointer; }
.mol-cabecera .barrabuscador-btn:hover, .mol-cabecera .barrabuscador-btn:focus-visible { color: #4a5bb8; }
.mol-cabecera .barrabuscador input::-webkit-search-cancel-button { margin-right: 26px; }

/* Barra de navegación */
.mol-nav.navbar-default {
    /* 66px = 6px de borde superior + 60px de las opciones (box-sizing: border-box).
       Sin margen inferior: la opción activa/hover llega justo al contenido de abajo, sin franja blanca */
    height: 66px;
    min-height: 0;
    width: 100%;
    border: none;
    border-top: 6px solid #283378;
    margin-top: 0;
    margin-bottom: 0;
    z-index: 200;
    background-color: #fff;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.mol-nav.navbar-default.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999 !important;
    height: 66px !important;
    -webkit-box-shadow: rgba(0, 0, 0, .6) 2px 2px 8px;
    box-shadow: rgba(0, 0, 0, .6) 2px 2px 8px;
}
.mol-nav .navbar-nav { font-family: 'copperplate'; float: none; margin: 0 auto; display: table; table-layout: fixed; }
.mol-nav .navbar-nav > li > a {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 60px;
    text-align: center;
    color: #283378 !important;
    background-color: transparent !important;
}
.mol-nav .navbar-nav > li:hover { background-color: #283378; }
.mol-nav .navbar-nav > li:hover > a { color: #fff !important; }
/* Opción activa: azul con texto blanco (sin esto Bootstrap navbar-inverse la pinta negra) */
.mol-nav .navbar-nav > .active > a,
.mol-nav .navbar-nav > .active > a:hover,
.mol-nav .navbar-nav > .active > a:focus { background-color: #283378 !important; color: #fff !important; }

/* Submenús */
.mol-nav .navbar-nav .dropdown a { text-align: center; }
.mol-nav .dropdown-menu { background-color: #283378; margin-top: 0 !important; border: none; }
.mol-nav .dropdown-menu li a { padding-top: 0; padding-bottom: 0; line-height: 40px; min-width: 100%; text-align: left !important; color: #fff !important; }
.mol-nav .dropdown-menu li:hover a { color: #283378 !important; }
.mol-nav .dropdown:hover .dropdown-menu { display: block; }

/* Botón de menú (móvil): las rayas eran blancas sobre fondo blanco */
.mol-nav .navbar-toggle { border-color: #283378; }
.mol-nav .navbar-toggle .icon-bar { background-color: #283378; }
.mol-nav .navbar-toggle:hover, .mol-nav .navbar-toggle:focus { background-color: #F8F8F8; }

@media (max-width: 1210px) {
    .mol-nav .navbar-collapse.collapse, .mol-nav .collapse { background-color: #F8F8F8; }
    .mol-nav .navbar-toggle { display: inherit; }
}