/* vim: set foldmethod=expr: */

/**
 *
 * Comunes
 *
 */

[data-bs-theme="light"] {
    --bs-body-color: #343a40;
    --bs-body-bg: #f7f9fb;
    --app-heading-color: #343a40;
    --app-alternate-color: #31708e;
    --app-alternate-bg: #8fc1e3;
}

[data-bs-theme="dark"] {
    --bs-body-color: #c8c8c8;
    --bs-body-bg: #2b2b2b;
    --app-heading-color: #f8f9fa;
    --app-alternate-color: #f7f9fb;
    --app-alternate-bg: #31708e;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: Open Sans, serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    opacity: 1;
    padding-top: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: #31708e;
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6, nav.navbar, .breadcrumb, time {
    font-family: Exo, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

time {
    text-transform: uppercase;
    font-size: .9rem;
    font-weight: 700;
    color: #31708e;
}

.resumen {
    font-style: italic;
}

@counter-style rocket {
    system: cyclic;
    symbols: "\F846";
    suffix: " ";
}

/**
 *
 * Navbar
 *
 */

nav.navbar {
    font-weight: 600;
    background-color: #31708e;
    padding-left: 2rem;
    padding-right: 2rem;

    a.navbar-brand {
        color: #fff;
        text-transform: uppercase;
    }

    ul.navbar-nav {
        margin-left: auto;
    }

    a.nav-link {
        & {
            color: hsla(0, 0%, 100%, .5);
        }
        &.active {
            color: #fff;
        }
        &:hover {
            color: hsla(0, 0%, 100%, .75);
        }
    }
}

/**
 *
 * Portada
 *
 */

body.portada {
    background-color: #31708e;
    background-image: radial-gradient(#5085a5 1px, #31708e 0);
    background-size: 30px 30px;

    &.header-not-at-top nav.navbar {
        opacity: 1;
        transition: .4s ease;
    }

    nav.navbar {
        opacity: 0;
        transition: .4s ease;
    }

    header {
        color: #f7f9fb;
        letter-spacing: .25rem;
        line-height: 1.5em;
        margin-bottom: 60px;
        text-align: center;
        text-transform: uppercase;

        h1 {
            font-size: 2rem;
            font-weight: 700;
        }
    }

    .container {
        background-color: var(--bs-body-bg);
        color: var(--bs-body-color);
        padding: 2rem;
        margin-bottom: 3rem;
        border-radius: 5px;

        h2 {
            border-bottom: 1px solid #dee2e6;
            font-size: 1.5rem;
            font-weight: 400;
            letter-spacing: .25rem;
            line-height: 1.5em;
            margin-bottom: 2rem;
            padding: 0 0 1.5rem;
            text-align: center;
            text-transform: uppercase;

            a {
                color: var(--app-heading-color);
            }
        }

        .row {
            > * {
                position: relative;
                margin-bottom: 1.5rem;
            }

            h3 {
                font-weight: 700;
                text-transform: uppercase;
                font-size: 1.25rem;
            }

            .card {
                height: 100%;
                position: relative;
                top: 0;
                transition: all 0.3s ease-in-out;
                &:hover {
                    top: -5px;
                }
                .card-body {
                    padding-bottom: 0;
                }
            }

            .flex-shrink-0 img {
                border-radius: 5px;
            }

            .d-flex {
                margin-bottom: 1.5rem;
            }
        }
    }
}

/**
 *
 * Aside toc
 *
 */

aside.menu-seccion {
    background-color: #8fc1e3;
    padding: 10px 20px;

    h3 {
        font-size: 1.2rem;
        border-bottom: 1px solid #31708e;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
    }

    ul {
        font-size: .9rem;
        li {
            margin-bottom: .5rem;
        }
    }

    &.i-5ef160c62e296 {
        ul {
            list-style: rocket;
            li {
                margin-bottom: .5rem;
                &::marker {
                    font-family: bootstrap-icons;
                    color: #31708e;
                }
            }
        }
    }
}

/**
 *
 * Aside rel
 *
 */

aside.rel {
    h3 {
        display: none;
    }
    span a::before {
        content: "» ";
    }
    img {
        max-width: 200px;
    }
    .resumen {
        font-size: 1rem;
        margin-top: .5rem;
    }
}
/**
 *
 * Nodo
 *
 */

article.nodo {
    font-size: 110%;
    flex-grow: 1;

    header {
        color: #f8f9fa;
        background-color: #31708e;

        h2, .resumen, time {
            display: block;
            max-width: 764px;
            padding-left: 2rem;
            padding-right: 2rem;
            margin-left: auto;
            margin-right: auto;
            padding-top: 1rem;
        }


        time {
            color: #8fc1e3;
        }

        h2 {
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
        }

        /*
        .resumen {
            padding-bottom: 3rem;
        }
        */

    }

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        padding: .75rem 1rem;
        margin-bottom: 1rem;
        list-style: none;
        background-color: var(--app-alternate-bg);
        a {
            color: var(--bs-body-color);
        }
    }

    main {
        margin: 3rem 0;

        h3 {
            font-size: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            margin: 1.2rem 0 1rem 0;
        }
    }
}

/**
 *
 * Nodo: contexto cols1
 *
 */

article.nodo.contexto-cols1 {
    header {
        padding-bottom: 3rem;
        > * {
            max-width: 1000px;
        }
    }

    main {

        div.imagen {
            float: right;
            max-width: 32%;
            margin-left: 1rem;
        }

        section.hijos {
            max-width: 768px;
            margin-left: auto;
            margin-right: auto;

            &.formato-listadoConImagenesRelacionadas {
                max-width: 1000px;
                .flex-shrink-0 img {
                    max-width: 500px;
                }
            }
        }

    }
}

/**
 *
 * Nodo: contexto noticia
 *
 */

article.nodo.contexto-noticia {
    header {
        padding-bottom: 3rem;
        div.imagen {
            background-color: #000;
            img {
                max-width: calc(min(1100px, 100vw));
                margin: 3rem auto -3rem auto;
                display: block;
            }
        }
    }
    main {
        .body-main-center {
            max-width: 764px;
            margin-left: auto;
            margin-right: auto;
        }
        aside.rel {
            background: var(--app-alternate-bg);
            float: right;
            margin: 0 2rem 2rem 2rem;
            padding: 2rem;
            width: 20rem;

            h3 {
                display: none;
            }

            .relacionado {
                margin-bottom: 1rem;
                img {
                    margin-bottom: 1rem;
                    max-width: 100%;
                }
                span a {
                    color: var(--app-alternate-color);
                    &::before {
                        content: "» ";
                    }
                }
                .resumen {
                    font-size: 1rem;
                    margin-top: .5rem;
                }
            }

        }
    }
}

/**
 *
 * Hijos: grilla
 *
 */

section.hijos.formato-grilla {

    .col-lg-4 {
        width: 100%;
        margin-bottom: 2rem;
    }

    h3 {
        font-size: 1.2rem;
        margin-top: 0;
    }
}

/**
 *
 * Hijos: galería a lo ancho
 *
 */

section.hijos.formato-galeriaALoAncho {
    div.hijo > a > img {
        margin: 2rem auto;
        display: block;
    }
}

/**
 *
 * Hijos: listado
 *
 */

section.hijos.formato-listado {
    h3 {
        align-items: center;
        display: flex;
        font-size: 1.5rem;
        text-align: left;

        time {
            float: right;
            font-size: 1rem;
            font-weight: 400;
            margin-left: .5rem;
            order: 2;
        }
    }
}

/**
 *
 * Hijos: listado con imagenes relacionadas
 *
 */

section.hijos.formato-listadoConImagenesRelacionadas {
    .hijo {
        margin-bottom: 2rem;
        gap: 1rem;
    }
}

/**
 *
 * Footer
 *
 */

footer {
    background-color: #31708e;
    color: #f8f9fa;
    padding: 30px;
    text-align: center;
}

/**
 *
 * Excepciones
 *
 */

article.u-c6196e9d52d06 aside.rel {
    display: none;
}