/* vim: set foldmethod=expr: */

/**
 *
 * colores tema base (light)
 *
 */

:root {
    --app-theme-fg:             #293340;
    --app-theme-bg:             #fafafa;

    --app-theme-blue-dark:      #002147;
    --app-theme-blue-middle:    #214888;
    --app-theme-blue-light:     #83c0f7;

    --app-theme-light:          #ffffff;

    --app-theme-neutral-dark:   #7a8790;
    --app-theme-neutral-middle: #d6d6d6;
    --app-theme-neutral-light:  #f1eee6;
}

/**
 *
 * colores tema dark
 *
 */

[data-bs-theme="dark"] {
    --app-theme-fg:             #ffffff;
    --app-theme-bg:             #181818;

    --app-theme-blue-dark:      #ffffff;
    --app-theme-blue-middle:    #83c0f7;
    --app-theme-blue-light:     #214888;

    --app-theme-light:          #293340;

    --app-theme-neutral-dark:   #d6d6d6;
    --app-theme-neutral-middle: #444444;
    --app-theme-neutral-light:  #293340;
}

/**
 *
 * colores acento
 *
 */

:root {
    --app-theme-accent-dark:    #214888;
    --app-theme-accent-middle:  #83c0f7;
    --app-theme-accent-light:   #ffffff;
}

/**
 *
 * variables de color para elementos específicos
 *
 */

:root {
    --mh-color-toc-border-top: var(--app-theme-accent-dark);
    --mh-color-toc-header-fg: var(--app-theme-accent-light);
    --mh-color-toc-header-bg: var(--app-theme-accent-dark);
    --mh-color-hijo-bg: var(--app-theme-neutral-light);
    --mh-color-hijo-link-fg: var(--app-theme-blue-middle);
    --mh-color-pie-fg: var(--app-theme-accent-light);
    --mh-color-pie-bg: var(--app-theme-accent-dark);
    --mh-color-pie-link-fg: var(--app-theme-accent-light);
    --mh-color-pie-link-fg-active: var(--app-theme-accent-middle);
    --mh-color-pie-link-fg-hover: var(--app-theme-accent-middle);
}

/**
 *
 * body
 *
 */

body {
    font-family: "DM Sans", sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    > article {
        flex-grow: 1;
    }
}

/**
 *
 * navbar
 *
 */

nav.navbar {
    font-family: "Work Sans", sans-serif;
    padding-top: 20px;
    padding-bottom: 20px;

    .container {
        justify-content: space-around;

        .navbar-brand {
            flex-grow: 1;
            img {
                width: 160px;
            }
        }

        .navbar-collapse {
            justify-content: space-between;
        }
    }

}

/**
 *
 * article.nodo header
 *
 */

article.nodo.contexto-cols1 > header,
article.nodo.contexto-cols2 > header,
article.nodo.contexto-cols3 > header {
    display: none;
}

article.nodo.contexto-noticia > header {
    transition: background-size .2s;
    background-image: url("../images/header-MAklPpm.svg");
    background-size: 104%;
    background-position: center top 10vw;
    background-repeat: no-repeat;
}

@media (max-width: 991px) {
    article.nodo.contexto-noticia > header {
        background-size: 0;
    }
}

/**
 *
 * nodo/main/customs
 *
 */

article.nodo main .custom {
    a.boton& {
        border-radius: 5px;
    }
}

/**
 *
 * toc
 *
 */

aside.toc {
    border-radius: 5px;

    &.i-e928e31930076 {
        ul ul {
            display: none;
        }
    }
}

/**
 *
 * pie
 *
 */

body > footer {
    font-family: "Work Sans", sans-serif;
    padding: 30px 50px 40px 50px;
    border-radius: 10px 10px 0 0;
    background-image: url("../images/pie-NizjKen.svg");
    background-size: 104%;
    background-position: center bottom -2vw;
    background-repeat: no-repeat;
    .container {
        display: flex;
        justify-content: space-between;
        img {
            display: inline-block;
            width: 120px;
        }
        ul {
            list-style-type: none;
            padding-left: 0;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 6rem;
            gap: 0 6rem;
            padding-right: 6rem
        }
    }
}

@media (max-width: 767px) {
    body > footer .container img {
        display: none;
    }
}
/**
 *
 * personalizado: portada: presentacion
 *
 */

body.body-211e60ad59f86 > article > main {
    > section.presentacion {
        font-family: "Albert Sans", sans-serif;
        font-size: 120%;
        background-color: var(--mh-color-nav-bg);
        color: var(--mh-color-nav-fg);
        background-image: url("../images/portada-tlY-wMW.svg");
        background-size: 104%;
        background-position: center bottom -5vw;
        background-repeat: no-repeat;
        h3 {
            font-family: Assistant, sans-serif;
            margin-bottom: 1rem;
        }
        .container {
            margin-bottom: 0;
            .row {
                > div:first-child {
                    padding: 30px;
                }
                img {
                    border-radius: 50px 0 0 0;
                    aspect-ratio: 16/9;
                    object-fit: cover;
                }
            }
        }
    }
}

/**
 *
 * personalizado: portada: bajo presentacion (estrategias nacionales)
 *
 */

body.body-211e60ad59f86 > article > main {
    > section.bajo-presentacion {
        background-color: var(--app-theme-neutral-light);
        color: var(--mh-color-breadcrumb-fg);
        padding: 30px 0;
        .container {
            margin-bottom: 0;
            .card-body {
                flex-direction: row;
                justify-content: start;
                align-items: center;
                gap: .5rem;
                h4 {
                    line-height: 1.5;
                    i {
                        background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
                        border-radius: 50%;
                        padding: 10px;
                    }
                }
                a {
                    font-weight: 600;
                    gap: .5rem;
                }
            }
        }
    }
}

/**
 *
 * personalizado: portada: noticias
 *
 */

body.body-211e60ad59f86 > article > main {
    > section.noticias {
        padding: 40px 0;
        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
        section.hijos.formato-grilla {
            .card {
                transition: background-color .2s;
                position: relative;
                padding: 5px;
                border-radius: 5px;
                img {
                    border-radius: 5px;
                }
                &:hover {
                    background-color: var(--mh-color-nav-bg);
                }
                a:hover {
                    color: var(--mh-color-nav-fg);
                }
            }
        }
    }
}

/**
 *
 * personalizado: portada: recursos
 *
 */

body.body-211e60ad59f86 > article > main {
    > div.container {
        padding: 0;

        > section.recursos {
            background-color: var(--app-theme-neutral-light);
            color: var(--app-theme-neutral-dark);
            border-radius: 5px;
            padding: 40px;
            .resumen {
                font-size: 120%;
            }

            h2 {
                color: var(--bs-body-color);
            }

            .card.front-card-banner2 {
                transition: color .2s;
                transition: background-color .2s;
                background-color: var(--bs-card-bg);
                height: auto;
                padding: 10px;
                border: none;

                &:hover {
                    background-color: var(--mh-color-nav-bg);
                    color: var(--mh-color-nav-fg);
                    .card-body a, .card-body a:hover {
                        color: var(--mh-color-nav-fg);
                    }
                }

                &:not(:first-child) {
                    margin-top: 10px;
                }

                > div:first-child {
                    display: flex;
                    align-items: center;
                    height: 3rem;
                    img, i.bi {
                        text-align: center;
                        border-radius: 5px;
                        width: 48px;
                        object-fit: cover;
                    }
                }

                .card-body {
                    padding-top: 0;
                    padding-bottom: 0;
                    a {
                        color: var(--app-theme-blue-middle);
                    }
                }
            }
        }
    }
}