/* ===================================================
   HEADER - Fondo, espaciado y centrado
   =================================================== */
header.container-header {
    background-color: whitesmoke !important;
    background-image: none !important;
    padding-top: 2px !important;
    padding-bottom: 0px !important;
}

/* Logo centrado */
header.container-header .navbar-brand:first-child {
    float: none !important;
    display: block !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Logo tamaño */
header.container-header .navbar-brand:first-child img {
    max-height: 60px !important;
    width: auto !important;
}

/* Layout vertical: logo arriba, menú abajo */
header.container-header .grid-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    gap: 0px !important;
}

/* Menú centrado horizontalmente */
header.container-header nav.navbar {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* Lista del menú */
header.container-header .mod-menu {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* ===== COLOR DEL TEXTO DEL MENÚ ===== */
header.container-header .mod-menu .nav-link,
header.container-header .mod-menu li a {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

header.container-header .mod-menu .nav-header,
header.container-header .mod-menu li.nav-header,
header.container-header .mod-menu .dropdown-header,
header.container-header .mod-menu li > span,
header.container-header .mod-menu .separator,
header.container-header .mod-menu li.separator,
header.container-header .mod-menu .mod-menu__heading,
header.container-header .mod-menu li.mod-menu__heading {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

header.container-header .mod-menu .nav-header span,
header.container-header .mod-menu li.nav-header span,
header.container-header .mod-menu .dropdown-header span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

header.container-header .mod-menu .nav-link:hover,
header.container-header .mod-menu li a:hover,
header.container-header .mod-menu .nav-header:hover,
header.container-header .mod-menu li.nav-header:hover {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ===================================================
   FOOTER - Centrado y color de fondo
   =================================================== */
body.wrapper-fluid footer .grid-child {
    max-width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.wrapper-fluid footer.container-footer {
    background-color: #1d7989 !important;
    background-image: none !important;
}

/* ===================================================
   MÓDULOS EN ANCHO COMPLETO (100vw)
   =================================================== */
#msj-presidencia-2026,
#ban-queja-2026 {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* ===================================================
   Estados Financieros 2026
   =================================================== */
.cedh-estados-financieros summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 3rem !important;
}

.cedh-estados-financieros summary::-webkit-details-marker {
    display: none;
}

.cedh-estados-financieros summary::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid currentColor;
    transition: transform 0.2s ease;
}

.cedh-estados-financieros details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
}

.cedh-estados-financieros summary:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}