/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 02/01/2024, 06:10:31 PM
    Author     : pcgc7
*/

:root {
    --colorAzul: #003f6f;
    --colorDorado: #b59a47;
    --colorBlanco: #fff;
    --colorWhitesmoke: #f5f5f5;
    --colorAlabaster: #f2f0e6;
    --colorSilver: #ccc;
    --colorRojo: #cc0000;
}

/* Encabezado */
.encabezado { z-index: 50; background: linear-gradient(to right, var(--colorWhitesmoke) 0%, var(--colorDorado) 100%); box-shadow: 0 0.625em 0.625em 0 rgba(0,0,0,0.5); }
header a .img-fluid { max-width: 85%; }
header .p-4 { padding: 1.5em !important; }

/* Menú */
.menu ul li { font-size: 1.25em; }
.menu ul { justify-content: space-around; }

/* Botón del menú */
div.btnMenu i { font-size: 2em; }
div.btnMenu.mr-5 { margin-right: 3em !important; }
div.btnMenu.pb-3 { padding-bottom: 1em !important; }
li.nav-item.mx-5 { margin-left: 2em !important; margin-right: 2em !important; }

/* Sección de actividades */
.contenido { max-width: 80% !important; }

/* Cuerpo del documento  */
.imgFondoAzul { background-image: url('../imagenes/fondoAzul.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
h2 { font-size: 2em !important; }
h3 { font-size: 1.75em !important; }
hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
p { font-size: 1em; }
.modal-dialog { max-width: 70em !important; } 

/* Estilos para el día y mes del calendario de actividades */
.dia { font-size: 2em; font-weight: bold; color: var(--colorAzul); }
.mes { font-size: 1.5em; font-weight: bold; color: var(--colorRojo); }
.col-2 i { font-size: 2em; }

/* Estilos para el cuadro de diálogo de tipo modal  */
.modal-content { background-color: var(--colorWhitesmoke)!important; } 
.modal-header { border-bottom: 2px solid var(--colorAzul)!important; }

/********************* Media queries *********************/

/* Dispositivos con orientación horizontal con una resolución de pantalla mayor a 1424px y menor que 1648px */
@media screen and (min-width: 1424px) and (max-width: 1647.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 80%; }
    header .p-4 { padding: 1.5em !important; }
    
    /* Menú */
    .menu ul li { font-size: 95%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.75em !important; }
    li.nav-item.mx-5 { margin-left: 1.75em !important; margin-right: 1.75em !important; }
    
    /* Sección de noticias */
    .contenido { max-width: 85%!important; }
    
    /* Cuerpo del documento */
    h2 { font-size: 2em !important; }    
    h3 { font-size: 1.75em !important; } 
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; }
    p { font-size: 90%; }
    .dia, .mes { font-size: 1.5em; }
    .col-2 i { font-size: 1.75em; } 
    .modal-dialog { max-width: 70em !important; }    
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 1200px y menor que 1424px */
@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 80%; }
    header .p-4 { padding: 1.25em !important; }
            
    /* Menú */
    .menu ul li { font-size: 90%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.75em !important; }
    li.nav-item.mx-5 { margin-left: 1.25em !important; margin-right: 1.25em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 85% !important; }
    
    /* Cuerpo del documento */    
    h2 { font-size: 2em !important; }    
    h3 { font-size: 1.75em !important; } 
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 80%; }
    .dia, .mes { font-size: 1.5em; }
    .col-2 i { font-size: 1.75em; }        
    .modal-dialog { max-width: 70em !important; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 992px y menor que 1200px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 70%; }
    header .p-4 { padding: 1.25em !important; }        
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.5em !important; }
    li.nav-item.mx-5 { margin-left: 0.75em !important; margin-right: 0.75em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90% !important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */    
    h2 { font-size: 2em !important; }
    h3 { font-size: 1.5em !important; }    
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 80%; }
    .dia, .mes { font-size: 1.25em; }
    .col-2 i { font-size: 1.5em; }        
    .modal-dialog { max-width: 60em !important; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 768px y menor que 992px */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 70%; }
    header .p-4 { padding: 1.25em !important; }        
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { justify-content: space-around; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 2em; }
    div.btnMenu.mr-5 { margin-right: 2em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0.5em !important; }
    li.nav-item.mx-5 { margin-left: 0.75em !important; margin-right: 0.75em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90% !important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */
    h2 { font-size: 1.75em !important; }    
    h3 { font-size: 1.25em !important; }
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 80%; }
    .dia, .mes { font-size: 1em; }
    .col-2 i { font-size: 1.5em; }    
    .modal-dialog { max-width: 48em !important; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 576px y menor que 768px */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 65%; }
    header .p-4 { padding: 1em !important; }       
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }
            
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0 !important; }
    li.nav-item.mx-5 { margin-left: 0.75em !important; margin-right: 0.75em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90%!important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */    
    h2 { font-size: 1.5em !important; }    
    h3 { font-size: 1.25em !important; }
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 70%; }
    .dia, .mes { font-size: 1em; }
    .col-2 i { font-size: 1.25em; }
    .modal-dialog { max-width: 36em !important; }
}

/* Estilo para dispositivos con tamaño de pantalla menor que 576px */
@media screen and (min-width: 481px) and (max-width: 575.98px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 55%; }
    header .p-4 { padding: 0.75em!important; }
            
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }    
            
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em!important; }
    div.btnMenu.pb-3 { padding-bottom: 0!important; }
    li.nav-item.mx-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90%!important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento  */
    h2 { font-size: 1.5em!important; }   
    h3 { font-size: 1.25em!important; }  
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; } 
    p { font-size: 70%; }
    .dia, .mes { font-size: 1em; }
    .col-2 i { font-size: 1.25em; }    
}

@media screen and (max-width: 480px) {
    
    /* Encabezado */
    header a .img-fluid { max-width: 45%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Menú */
    .menu ul li { font-size: 80%; }
    .menu ul { display: flex; flex-direction: column; }
    
    /* Botón del menú */
    div.btnMenu i { font-size: 1.5em; }
    div.btnMenu.mr-5 { margin-right: 1.5em !important; }
    div.btnMenu.pb-3 { padding-bottom: 0 !important; }
    li.nav-item.mx-5 { margin-left: 0.5em !important; margin-right: 0.5em !important; }
    
    /* Sección de actividades */
    .contenido { max-width: 90%!important; border: 0.0625em solid #b59a47; }
    
    /* Cuerpo del documento */
    h2 { font-size: 1.25em!important; }
    h3 { font-size: 1em!important; }
    hr { width: 100%; border-top: 0.125em solid rgba(181,154,71,0.9)!important; }
    p { font-size: 70%; }
    .dia, .mes { font-size: 1em; }
    .col-2 i { font-size: 1.25em; }
}