/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');
@import 'mulish.font.styles.css';
@import 'opens.sans.font.styles.css';
/* Cal Sans (Fuente de la web) */
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');
@import 'cal.sans.font.styles.css';
/* Lexend Zetta Fuente de la web */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Zetta:wght@100..900&display=swap');
@import 'lexend.zetta.font.sytles.css';

@import 'custom.widths.css';

:root{
    --amarillo-ministerio: #ecece2;
    --color-claro: #ffffff;
    --color-corporativo-1: #002F87;
    --color-corporativo-2: #333333;
    --color-corporativo-contraste-1: #377dbe;
    --color-corporativo-contraste-2: #ecece2;
    --color-error: #d21616;
    --color-ok: #57cb0c;

    /*ordenacion del juego*/
    --color-fondos-0: #E6E2C6 ;
    --color-fondos-1: #ECECE2;
    --color-fondos-2: #004481; /* anterior color-corporativo-1 */
    --color-fondos-3: #44b0e1; /* anterior color-corporativo-contraste-1 */
    --color-fondos-4: #b2e7fb;
    --color-fondos-5: #57cb0c;
    --color-textos-1: #1E110D;
    --color-textos-2: #004481;
    --color-textos-2-light: #44b0e1;
    --color-textos-3: #333333;

    /* colores areas */
    --color-1: #4C3547;
    --color-2: #E1523C;
    --color-3: #D8B08C;
    --color-4: #EE8B16;
    --color-5: #025E54;
    --color-6: #D68B8B;

    /* colores areas light */
    --color-1-light: #4C3547B2;
    --color-2-light: #E1523CB3;
    --color-3-light: #D8B08CB3;
    --color-4-light: #EE8B16B3;
    --color-5-light: #025E54B3;
    --color-6-light: #D68B8BB3;
}

*{
    font-family: "Mulish", "Open Sans", "Arial", sans-serif;

}

body{
    background-color: #f6f6f6;
}

a
{
    color: var(--color-textos-2-light);
}

a:hover
{
    color: var(--color-textos-2);
    font-style: italic;
}


/* Grid */
.w-65 {
    width: 65% !important;
}

.w-35 {
    width: 35% !important;
}

/* Cursores */
.cursor-pointer{
    cursor: pointer;
}

/* Fondos */
.bg-ministerio{
    background-color: var(--amarillo-ministerio);
}

.bg-color-blanco{
    background-color: #ffffff;
}

.bg-corporativo-0
{
    background-color: var(--color-fondos-1);
}

.bg-corporativo-1{
    background-color: var(--color-fondos-2);
}

.bg-corporativo-2{
    background-color: var(--color-fondos-4);
}

.bg-color-1
{
    background-color: var(--color-1);
}

.bg-color-2
{
    background-color: var(--color-2);
}

.bg-color-3
{
    background-color: var(--color-3);
}

.bg-color-4
{
    background-color: var(--color-4);
}

.bg-color-5
{
    background-color: var(--color-5);
}

.bg-color-6
{
    background-color: var(--color-6);
}

/* Bordes */
.sst-borde-corporativo-1
{
    border-color: var(--color-fondos-2);
    border-radius: 6px;
    border: 2px solid;
}

.sst-borde-corporativo-2
{
    border: 2px solid var(--color-fondos-2);
}


/* Selector de idioma */
.language-selector
{
    z-index: 9999;
}

.language-selector a.active{
    font-weight: bold;
    background-color: var(--color-fondos-2);
    color: var(--color-claro);
}



/* Formulario */
.form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-control-plaintext ~ label, .form-floating > .form-select ~ label{
    color: var(--color-5);
    font-weight: 700;
}

input.form-control, textarea.form-control, select.form-select{
    border: 1px solid var(--color-fondos-2);

}

#invitados-form input, #invitados-form textarea, #invitados-form label, #invitados-form select, #invitados-form select option{
    font-size: 0.9rem;
    font-weight: 600;
}

#invitados-form textarea{
    height: 5.5rem;
}

#contacto-web-form  textarea#mensaje{
    height: 8.5rem;
}

.callout {
    color: var(--color-error);
    font-style: italic !important;
    border: 1px solid var(--color-error);
    font-size: 0.90rem;
}


/* Textos */
.clc-color-0{
    color: var(--color-textos-1);
}

.clc-color-1{
    color: var(--amarillo-ministerio);
}

.clc-color-2{
    color: var(--color-textos-2);
}

.clc-color-2-light{
    color: var(--color-textos-2-light);
}

.clc-color-3{
    color: var(--color-textos-3);
}

.clc-color-4{
    color: var(--color-4);
}

.clc-color-5{
    color: var(--color-5);
}

.clc-color-error{
    color: var(--color-error);
}

.clc-color-ok{
    color: var(--color-ok);
}

/* Menú */
ul.navbar-nav * {
    font-size: 0.95rem;
}

#navbarNav ul li a:hover, #navbarNav ul li a.active{
    font-weight: bold;
    color: var(--color-fondos-2);
    text-decoration: underline;
}

#navbarNav .nav-item-dark{
    background-color: var(--color-fondos-2);
    border-radius: 5px;
    color: var(--color-claro);
    max-width: max-content;
}

/* Menu pie */
#menu-pie a:hover
{
    font-weight: bold;
    text-decoration: underline;
}


/*Timeline*/
ul.timeline {
    list-style-type: none;
    position: relative;
}
ul.timeline:before {
    content: " ";
    background: var(--color-4);
    display: inline-block;
    position: absolute;
    left: 28px;
    width: 4px;
    height: 100%;
    z-index: 400;
}
ul.timeline > li {
    margin: 20px 0;
    padding-left: 20px;
}
ul.timeline > li:before {
    content: " ";
    background: var(--color-claro);
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid var(--color-fondos-3);
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
}

/*horario*/
ul.horario{
    list-style-type: none;
}

/* Elementos */
#logotipo-cabecera {
    height: auto;
    max-height: 70px;
    max-width: 100%;
}


#primera-fila-pie{
    border-bottom: 1px solid var(--color-claro);
}

.redes_sociales, .redes_sociales_dark {
    flex-wrap: wrap;
    display: flex;
    align-items: center;
}

.social_item, .social_item_dark{
    padding-right: 1em;
}

.social_item a {
    color: var(--color-claro);
    border: solid 1px var(--color-claro);
    border-radius: 50%;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease 0.3s;
    text-decoration: none;

}

.social_item i {
    color: var(--color-claro);
}

.social_item_dark a {
    color: var(--color-fondos-2);
    border: solid 0px var(--color-fondos-2);
    border-radius: 50%;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease 0.3s;
    text-decoration: none;

}

.social_item_dark i {
    color: var(--color-fondos-2);
    font-size: 1.25rem;
}

.btn-insst{
    color: white;
    border: 2px solid var(--color-fondos-2);
    background-color: var(--color-fondos-2);
    font-weight: 700;
}

.btn-insst:hover{
    color: var(--color-corporativo-contraste-2);
    border-color: var(--color-corporativo-contraste-2);
    background-color: var(--color-fondos-3);
    font-weight: 800;
}

.btn-white-insst{
    color: var(--color-fondos-2);
    border: 3px solid var(--color-fondos-2);
    background-color: var(--color-claro);
    font-weight: 700;
}

.btn-white-insst:hover{

    border: 3px solid var(--color-claro);

}

.custom-tooltip {
    --bs-tooltip-bg: var(--color-fondos-2);
    --bs-tooltip-color: var(--color-claro);
}

.streamingLink div.content{
    flex: 1 1 auto;
}

/* Videos embebidos */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* pagina programa */
p.mulish-regular {
    padding-bottom: 0.6rem;
}

.textoPrograma{
    display: block;
    padding-left: 5.85rem;
    padding-left: 9.85rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.subtextoPrograma{
    display: block;
    padding-left: 2rem;
    margin-top: 0.5rem;
}

.horaPrograma{
    font-weight: 700;
    padding-left: 2rem;
    min-width: 8.5rem;
    display: inline-block;
    text-align: right;
}
.tituloPrograma{
    font-weight: 700;
    padding-left: 1rem;
}




/* pag en construcción */
#anuncio{
    /*top: 15%;
    right: 6%;*/
    top: 10%;
    right: 2%;
}

#anuncio.in-mobile{
    top: 3%;
    right: 0%;
}

#anuncio .anuncio-icono{
    height: 3.2rem;
}

#anuncio .texto-icono{
    /*color: var(--color-claro);*/
    font-size: 1.15rem;
}


#lienzo404{
    flex: 1 1 auto;
    background-image: url('../../imagenes/fondo.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}


@media (max-width: 576px) {

    #lienzo404{

        background-position: center 4.2rem;
    }

}