@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700;800&display=swap');

html,body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;height: 100%;user-select: none;
}body::-webkit-scrollbar {display: none;}



header { /* Encabezado */
    z-index: 3;
    display: flex;justify-content: center;align-items: center;
    position: sticky;top: 0;height: 8%;background-color: #003c68;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2);
}header>img {height: 80%;}



section { /* Contenido */
    z-index: 2;
    position: relative;
    height: 92%;background-color: #ffffff;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

main {position: relative;overflow: scroll;height: 100%;}
main::-webkit-scrollbar {display: none;}

aside {
    position: absolute;overflow: scroll;
    background-image: url(src/indice-claro.webp);
    white-space: nowrap;word-wrap: normal;
    left: 0;right: 0;top: 0;bottom: 0;
    background-attachment: scroll;
    transition: all 0.4s linear;
    text-transform: uppercase;
    padding: 2vmin;
}aside::-webkit-scrollbar {display: none;}

@media (orientation: landscape) {
    main {left: calc(100% / 3);width: calc(100% / 3 * 2);}
    .elevador {display: none;}
    aside {right: calc(100% / 3 * 2);}
    aside:hover {right: 60%;}
}
@media (orientation: portrait) {
    main {height: 92%;}
    .elevador {
        display: flex;justify-content: center;align-items: center;
        position: absolute;bottom: 0;top: 92%;left: 0;right: 0;
        font-size: 10vmin;background-color: #003c68;color: #fff;
    }
    aside {background-size: cover;}
    aside.down {top: 100%;}
}

aside h1 {
    font-size: x-large;
    color: #003c68;
    font-weight: 800;
    margin: 1vmin 0;
}

footer { /* Pie de página */
    z-index: 1;
    position: sticky;bottom: 0;
    background-color: #ecf0f5;
    font-size: small;font-weight: 300;
    text-align: center;color: #7f8795;
}

.Candado { /* Ventana modal */
    z-index: 100;
    display: none;position: fixed;
    top: 0;right: 0;bottom: 0;left: 0;
    background-color: rgba(0, 0, 0, 0.6);--padding: 3%;--margin: 30%;
    align-items: center;justify-content: center;
}@media (orientation: portrait) {.Candado {--padding: 10% 5%;--margin: 10%;}}

.DenyCookie>div, .DenyInternet>div { /* Error interno */
    padding: var(--padding);margin: var(--margin);
    background-color: rgb(255, 0, 0);color: #fff;
    border: 3px solid rgb(150, 0, 0);border-radius: 25px;
    text-align: center;font-weight: 700;font-size: larger;
}

.UnderMaintenance>div { /* Error de servidor */
    padding: var(--padding);margin: var(--margin);
    background-color: rgb(255, 180, 0);color: #fff;
    border: 3px solid rgb(255, 150, 0);border-radius: 25px;
    text-align: center;font-weight: 700;font-size: larger;
}

.WarningCookie>div { /* Mensaje Normal */
    padding: var(--padding);margin: var(--margin);
    background-color: rgb(0, 61, 104);color: #fff;
    border: 3px solid rgb(0, 50, 100);border-radius: 25px;
    text-align: center;font-weight: 700;font-size: larger;
    pointer-events: all;
}.WarningCookie>div>button {
    font-family: inherit;font-weight: 700;font-size: large;
    background-color: rgb(0, 80, 120);color: #fff;
    width: 100%;cursor: pointer;
}

.AvisoDePrivacidad>div { /* Aviso de privacidad */
    position: absolute;top: 5%;bottom: 5%;left: 1%;right: 1%;
    background-color: rgb(0, 61, 104);pointer-events: all;
    border: 3px solid rgb(0, 50, 100);border-radius: 10px;
}.AvisoDePrivacidad>div>div {
    position: absolute;top: 3%;bottom: 15%;left: 2%;right: 2%;
    overflow-y: scroll;text-align: justify;user-select: text;
    background-color: #fff;cursor: text;padding: 3%;
}.AvisoDePrivacidad article, .AvisoDePrivacidad li,
.AvisoDePrivacidad ol, .AvisoDePrivacidad ul {
    margin-bottom: 5px;padding-left: 4vmin;
}.AvisoDePrivacidad ol article {
    font-weight: 300;color: black;
}.AvisoDePrivacidad ol {
    font-weight: 800;
}.AvisoDePrivacidad ul {font-weight: 300;}
.AvisoDePrivacidad>div>button {
    position: absolute;top: 88%;bottom: 3%;left: 2%;width: 96%;
    font-family: inherit;font-weight: 700;font-size: large;
    cursor: pointer;overflow: hidden;
}

/* Links del sitio */
.linkFL {cursor: pointer;transition: color 0.3s linear;}
.linkFL:hover {color: #35baf2;}