@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/*
    Created on : 22 nov. 2021, 9:40:50
    Author     : bematem
    Comment    : Estilos para incrustar la parte pública en la web institucional
*/

/*** LAYOUT: Diseño para movil por defecto (mobile-first) ***/
body, p {
    font-family: "IBM Plex Sans", Sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 22px;
    color: #022030;
}

p {
    margin-top: 0;
    margin-bottom: .9rem;
}

h1 { /* Nunca tendremos H1 al ser un iframe incrustado */
    font-size: 30px;
    font-weight: 300 !important;
    line-height: 40px !important;
    color: #022030;
}

h2 { /* Normalmente no tendremos H2 al ser un iframe incrustado */
    font-size: 28px;
    font-weight: 300 !important;
    line-height: 34px !important;
    color: #007D79;
}

h3 {
    font-size: 26px !important;
    line-height: 28px;
    font-weight: 400 !important;
    color: #022030;
}

h4 {
    font-size: 22px !important;
    line-height: 24px;
    font-weight: 500 !important;
    color: #007D79;
}

h5 {
    font-size: 20px !important;
    line-height: 20px;
    font-weight: 500 !important;
    color: #022030;
}

h6 {
    font-size: 18px !important;
    line-height: 18px;
    font-weight: 500 !important;
    color: #007D79;
}

/*@media (min-width: 768px) and (max-width:1024px){*/
/*@media (min-width: 384px) and (max-width:512px){*/ /* es el tamaño del div donde va incrustado el iframe */
@media (min-width: 576px) and (max-width: 768px) {
    /* es el tamaño del div donde va incrustado el iframe (en este caso no tiene menú a la derecha y ocupa más espacio) */
    h1 { /* Nunca tendremos H1 al ser un iframe incrustado */
        font-size: 34px;
        font-weight: 300 !important;
        line-height: 44px !important;
        color: #022030;
    }

    h2 { /* Normalmente no tendremos H2 al ser un iframe incrustado */
        font-size: 30px;
        font-weight: 300 !important;
        line-height: 28px !important;
        color: #007D79;
    }

    h3 {
        font-size: 28px !important;
        line-height: 34px;
        font-weight: 400 !important;
        color: #022030;
    }

    h4 {
        font-size: 24px !important;
        line-height: 28px;
        font-weight: 500 !important;
        color: #007D79;
    }

    h5 {
        font-size: 22px !important;
        line-height: 24px;
        font-weight: 500 !important;
        color: #022030;
    }

    h6 {
        font-size: 20px !important;
        line-height: 20px;
        font-weight: 500 !important;
        color: #007D79;
    }
}

/*** LAYOUT: Diseño para ordenador ***/
/*@media (min-width: 1025px) {*/
/*@media (min-width: 513px) { *//* es el tamaño del div donde va incrustado el iframe */
@media (min-width: 769px) {
    /* es el tamaño del div donde va incrustado el iframe (en este caso no tiene menú a la derecha y ocupa más espacio) */
    h1 { /* Nunca tendremos H1 al ser un iframe incrustado */
        font-size: 40px;
        font-weight: 300 !important;
        line-height: 44px !important;
        color: #022030;
    }

    h2 { /* Normalmente no tendremos H2 al ser un iframe incrustado */
        font-size: 36px;
        font-weight: 300 !important;
        line-height: 40px !important;
        color: #007D79;
    }

    h3 {
        font-size: 30px !important;
        line-height: 34px;
        font-weight: 400 !important;
        color: #022030;
    }

    h4 {
        font-size: 24px !important;
        line-height: 28px;
        font-weight: 500 !important;
        color: #007D79;
    }

    h5 {
        font-size: 24px !important;
        line-height: 24px;
        font-weight: 500 !important;
        color: #022030;
    }

    h6 {
        font-size: 24px !important;
        line-height: 20px;
        font-weight: 500 !important;
        color: #007D79;
    }
}

a, .btn-link, .piso-feature a {
    font-size: 16px;
    font-weight: normal;
    text-decoration: none !important;
    line-height: 22px;
    color: #CC0000;
    text-decoration: none;
    padding: 0px 0px 0px 0px;
    align-self: flex-start;
}

a:hover, .btn-link:hover {
    text-decoration: underline;
    color: #A2191F !important;
}

.btn-primary, .btn-outline-primary {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: #CC0000;
    border-radius: 5px 5px 5px 5px;
    border: none;
    padding: 7px 30px 7px 30px;
}

.btn-primary:hover, .btn-outline-primary:hover {
    color: #FFFFFF !important;
    background-color: #A2191F !important;
    text-decoration: none;
}

/* No se usan botones pequeños en los iframes */
/*.btn-sm {
    padding: 6px 40px 6px 40px;
    font-size: 0.8em;
}*/
.boton-detalles {
    padding: 6px 20px 6px 20px;
}

.boton-sin-sombra.btn-check:focus, .boton-sin-sombra.btn:focus {
    box-shadow: none;
}

.boton-info {
    color: #2F66CD;
    padding: 0;
}

.boton-info:hover, .boton-info:focus {
    color: #1D4080 !important;
}

.table th {
    width: 50%;
}

.piso-feature {
    font-size: 16px !important;
    font-weight: normal !important;
}

.piso-feature strong {
    margin-top: 0.2em;
    font-size: 24px;
    font-weight: bold;
}

.card-text {
    font-size: 16px !important;
}

a.page-link {
    font-size: 14px;
}

.nav-link-order {
    text-decoration: none !important;
    color: black;
    font-weight: bold;
}

/* No se usan controles y selectores pequeños en los iframes */
.form-control, .form-select {
    font-size: 16px; /*1.1rem;*/
    border: 1px solid #bbb;
}