/* ==================================================
   CABECERA Y PIE CON EL MISMO COLOR Y ALTURA
   ================================================== */

:root {
    --color-franjas: #343a40;
    --altura-franjas: 140px;
}

/* FRANJA SUPERIOR */
.container-header {
    min-height: var(--altura-franjas) !important;
    background-color: var(--color-franjas) !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Nombre: Partituras Orquesta */
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .site-description {
    color: #ffffff !important;
}

/* Letras del menú */
.container-header .mod-menu a,
.container-header .mod-menu span {
    color: #ffffff !important;
}

/* Menú al pasar el mouse o página seleccionada */
.container-header .mod-menu a:hover,
.container-header .mod-menu a:focus,
.container-header .mod-menu .active > a {
    color: #dddddd !important;
    text-decoration: underline;
}

/* Botón del menú en celular */
.container-header .navbar-toggler {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* FRANJA INFERIOR */
.container-footer,
footer.container-footer,
.footer {
    min-height: var(--altura-franjas) !important;
    background-color: var(--color-franjas) !important;
    background-image: none !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
}

/* El contenido inferior ocupa todo el ancho */
.container-footer .grid-child {
    width: 100%;
}

/* Elementos internos transparentes */
.container-footer .grid-child,
.container-footer .moduletable,
.container-footer .card,
.container-footer .card-body,
.footer .moduletable,
.footer .card,
.footer .card-body {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
}

/* Textos y enlaces inferiores */
.container-footer p,
.container-footer a,
.footer p,
.footer a {
    color: #ffffff !important;
}

/* ==================================================
   RUTA DE NAVEGACIÓN EN GRIS OSCURO
   ================================================== */

/* Texto general de la ruta */
.breadcrumb,
.breadcrumbs,
.mod-breadcrumbs,
.mod-breadcrumbs__wrapper,
.breadcrumb-item {
    color: #333333 !important;
}

/* Enlaces: Inicio, Descargar y demás */
.breadcrumb a,
.breadcrumb a *,
.breadcrumbs a,
.breadcrumbs a *,
a.pathway,
a.pathway *,
.mod-breadcrumbs a,
.mod-breadcrumbs a *,
.breadcrumb-item a,
.breadcrumb-item a *,
.mod-breadcrumbs__item a,
.mod-breadcrumbs__item a * {
    color: #555555 !important;
    text-decoration: underline !important;
}

/* Enlaces ya visitados */
.breadcrumb a:visited,
.breadcrumb a:visited *,
.breadcrumbs a:visited,
.breadcrumbs a:visited *,
a.pathway:visited,
a.pathway:visited *,
.mod-breadcrumbs a:visited,
.mod-breadcrumbs a:visited *,
.breadcrumb-item a:visited,
.breadcrumb-item a:visited * {
    color: #555555 !important;
}

/* Al pasar el mouse */
.breadcrumb a:hover,
.breadcrumb a:hover *,
.breadcrumb a:focus,
.breadcrumb a:focus *,
.breadcrumbs a:hover,
.breadcrumbs a:hover *,
.breadcrumbs a:focus,
.breadcrumbs a:focus *,
a.pathway:hover,
a.pathway:hover *,
a.pathway:focus,
a.pathway:focus *,
.mod-breadcrumbs a:hover,
.mod-breadcrumbs a:hover *,
.mod-breadcrumbs a:focus,
.mod-breadcrumbs a:focus *,
.breadcrumb-item a:hover,
.breadcrumb-item a:hover *,
.breadcrumb-item a:focus,
.breadcrumb-item a:focus * {
    color: #333333 !important;
    text-decoration: underline !important;
}

/* Adaptación para celular */
@media (max-width: 600px) {
    :root {
        --altura-franjas: 110px;
    }

    .container-header,
    .container-footer,
    footer.container-footer,
    .footer {
        min-height: var(--altura-franjas) !important;
    }
}