/* Estilos personalizados para la documentación */

:root {
    --webgis-primary: #29806f;
    --webgis-secondary: #4d9387;
    --webgis-primary-dark: #1f6659;
    --webgis-body-bg: #f8fafc;
}

body {
    background-color: var(--webgis-body-bg);
}

/* Variables de color personalizadas */
[data-md-color-primary=webgis-color] {
    --md-primary-fg-color: var(--webgis-primary);
    --md-primary-fg-color--light: var(--webgis-secondary);
    --md-primary-fg-color--dark: var(--webgis-primary-dark);
    --md-primary-bg-color: #ffffff;
    --md-primary-bg-color--light: rgba(255, 255, 255, 0.75);
}

[data-md-color-accent=webgis-accent] {
    --md-accent-fg-color: var(--webgis-secondary);
    --md-accent-fg-color--transparent: rgba(77, 147, 135, 0.1);
    --md-accent-bg-color: #ffffff;
    --md-accent-bg-color--light: rgba(255, 255, 255, 0.75);
}

.md-header {
    background-color: var(--webgis-primary);
}

.md-header__button.md-logo {
    align-items: center;
    display: inline-flex;
    margin: 0 0.3rem 0 0;
    padding: 0.18rem 0.3rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    filter: brightness(0) invert(1);
    height: 1.6rem;
    width: auto;
}

.md-header__institutional-logos {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 0.45rem;
    margin-left: auto;
    padding-left: 0.75rem;
}

.md-header__institutional-logos img {
    background: transparent;
    display: block;
    height: 1.65rem;
    max-width: 8.2rem;
    object-fit: contain;
    width: auto;
}

/* Cambiar color de los enlaces del azul predeterminado al verde */
.md-content a {
    color: var(--webgis-primary);
}

.md-content a:hover {
    color: var(--webgis-primary-dark);
}

@media screen and (max-width: 76.2344em) {
    .md-header__institutional-logos {
        display: none;
    }
}

/* Centrar imágenes de la documentación */
.md-content img {
    display: block;
    margin: 1.5rem auto;
}

/* Mostrar solo el logo en la cabecera */
.md-header__title {
    visibility: hidden;
}

.md-header__button.md-logo img {
    height: 40px;
}