/* IES Aguadulce — logo esquina superior izquierda, barra de menú debajo */

/* ── Banda del logotipo: azul pastel claro ── */
.container-header {
    background-color: #d6e4f7;
    background-image: linear-gradient(135deg, #d6e4f7 0%, #c2d8f0 100%);
}

/* ── Logotipos en sidebar derecho ── */
.logos-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px;
    align-items: center;
}

.logos-sidebar img {
    width: 150px;
    height: auto;
    object-fit: contain;
}

/* Tamaño del logotipo */
.container-header .brand-logo img {
    max-height: 90px;
    width: auto;
}

@media (max-width: 767.98px) {
    .container-header .brand-logo img {
        max-height: 60px;
    }
}

/* ── Barra horizontal de menú: fondo azul oscuro, ancho completo ── */
.container-header .container-nav {
    max-width: 100%;
    width: 100%;
    background-color: #112855;
    padding-top: 0;
    padding-bottom: 0;
    /* Centra el contenido del menú igual que el resto de la página */
    padding-left:  max(1rem, calc((100% - 1320px) / 2));
    padding-right: max(1rem, calc((100% - 1320px) / 2));
    box-sizing: border-box;
}

/* Texto e ítems del menú en blanco (sobre fondo oscuro) */
.container-header .container-nav .mod-menu,
.container-header .container-nav .mod-menu > li > a,
.container-header .container-nav .mod-menu > li > span {
    color: #ffffff;
}

.container-header .container-nav .mod-menu > li > a:hover,
.container-header .container-nav .mod-menu > li.active > a {
    color: #90bce8;
}

.container-header .container-nav .mod-menu > li.active::after,
.container-header .container-nav .mod-menu > li:hover::after {
    background-color: #90bce8;
}

/* Submenús desplegables: más anchos para nombres largos */
.container-header .mod-menu .mod-menu__sub {
    min-width: 250px;
    white-space: nowrap;
}

.container-header .container-nav .mod-menu .mod-menu__sub {
    background-color: #1a3a6b;
}

.container-header .container-nav .mod-menu .mod-menu__sub a {
    color: #d6e4f7;
}

.container-header .container-nav .mod-menu .mod-menu__sub a:hover {
    color: #ffffff;
    background-color: #112855;
}