/*
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 : 08/06/2023, 09:15:27 AM
    Author     : pcgc7
*/

/*********************** Estilos generales de la página ***********************/

* {
    box-sizing: border-box;
}
body {
    font-family: 'Open Sans', sans-serif;
    background-image: url('../imagenes/fondoAzul.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
:root {
    --colorAzul: #003958;
    --colorDorado: #b59a47;
    --colorBlanco: #fff;
    --colorWhitesmoke: #f5f5f5;
    --colorAlabaster: #f2f0e6;
    --colorSilver: #ccc;
    --colorRojo: #cc0000;
}
::-webkit-scrollbar {display: none;}

/********************** Estilos contenedor de la página ***********************/

.contenedor {
    display: grid;
    
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: 15.25em repeat(10, 1fr);
    
    grid-template-areas:
    "encabezado encabezado encabezado encabezado encabezado encabezado"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad"
    "actividad  actividad  actividad  actividad  actividad  actividad";
}

/*************************** Estilos sección header ***************************/

.contenedor .encabezado {
    grid-area: encabezado;
    
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 20;
    background: linear-gradient(to right, #f5f5f5 0%, #b59a47 100%);
    box-shadow: 0 0.625em 0.625em 0 rgba(0,0,0,0.5);
}
.contenedor .encabezado .logo {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.contenedor .encabezado .logo img {
    width: 65%;
    padding: 1em;
    margin: 1.85em 0;
}
.contenedor .encabezado .logo .btnMenu {
    display: none;
    color: var(--colorAzul);
    text-decoration: none;
    font-size: 1.5em;
}
.contenedor .encabezado .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-top: 0.0625em solid var(--colorAzul);
}
.contenedor .encabezado .menu a {
    padding: 0.5em 0;
    margin: 0.5em 0;
    font-size: 1em;
    font-weight: 700;
    color: var(--colorAzul);
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 0.16em solid transparent;
}
.contenedor .encabezado .menu i {
    margin-right: 0.5em;
}
.contenedor .encabezado .menu a:hover {
    border-bottom: 0.16em solid var(--colorAzul);
}

/************************* Estilos sección principal **************************/

.contenedor .contenido {
    grid-area: actividad;
    
    margin: 0 auto;
    max-width: 85%;    
    padding: 1.25em;
    background: var(--colorWhitesmoke);
    border-radius: 0.625em;
    border: 0.125em solid var(--colorDorado);
    box-shadow: 0 0.625em 0.625em 0 rgba(0,0,0,0.5);
}
.contenedor .contenido h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 0.3125em 0;
    color: var(--colorAzul);
}
.contenedor .contenido hr {
    margin-bottom: 1.5em;
    height: 0.2em;
    background: var(--colorDorado);
    border: none;
}

/*********************** Estilos sección de actividades ***********************/

.contenedorActividades {
    display: grid;
    
    grid-gap: 0 1.5em;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
}
h2 {
    margin: 0.5em 0;
    color: var(--colorAzul);
}
.actividad {
    display: grid;
    
    grid-gap: 0 1em;
    grid-template-columns: 6em 4em 1fr;
    grid-template-rows: repeat(1, 5em);
        
    justify-items: center;
    align-items: center;
    
    border-bottom: 1px solid var(--colorSilver);
}
.actividad:last-child {
    border-bottom: none;
}
.dia {
    font-size: 2em;
    text-align: center;
    font-weight: bold;
    color: var(--colorAzul);
}
.mes {
    font-weight: bold;
    color: var(--colorRojo);
}
.actividad > i {
    font-size: 2em;
    color: var(--colorAzul);
}
.actividad > p {
    justify-self: start;
    align-content: center;
    color: var(--colorAzul);
}
.contenedorOtrasActividades {
    display: grid;
    grid-gap: 0 1em;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
}
.item {
   grid-template-columns: 6em 1fr;
   grid-template-rows: repeat(1, 6em);
   
   text-align: justify;
}
.actividadEspecial img {
    cursor: pointer;
}

/***************** Estilos galería de imagenes tipo lightBox ******************/

/* Definimos el tamaño de las imagenes para que ocupen el tamaño de la celda y
   no de la pantalla completa */
.img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Para que la imagen no se deteriore si pierde resolución */
}

/* Agregamos estilos al contenedor donde se va a almacenar la imagen de tipo
   lightbox */
.contenedor-img {
    position: fixed; /* Este contenedor se sale del grupo y se fija al navegador */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 50;
    transform: translateX(-100%); /* Ocultamos la imagen en dirección izquierda */
    background: rgba(0,0,0,0.7);
    
    /* Centramos vertical y horizontalmente la imagen de tipo lightbox */
    display: flex;
    justify-content: center;
    align-items: center;
    
    transition: transform .4s ease-in;
}

/* Creamos una clase extra para lograr que el valor de la propiedad transform
   pase de -100 a 0 */
.moverContenedor {
    transform: translateX(0);
}

/* Definimos el tamaño de la imagen que se va a agrandar cuando la escojamos */
.img-mostrar {
    height: 80%;
    transform: scale(0);
    display: block;
    object-fit: cover;
    transition: transform .2s .4s;
}

/* Se muestra la imagen en un tamaño más amplio */
.mostrar-img {
    transform: scale(1);
}

/* Agregamos estilos al icono y una posición en la pantalla */
.btn {
    position: absolute;
    top: 0.5em;
    right: 0.75em;
    font-size: 2.5em;
    color: #fff;
    cursor: pointer;
}

/********************* Estilos para dispositivos móviles **********************/

/* 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) {
    .contenedor {
        grid-template-rows: 14em repeat(9, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 60%;   
        margin: 1.5em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 1em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
    
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 85%;
    }  
    .contenedor .contenido article h1 {
        font-size: 1.75em;
    }
    .contenedor .contenido hr {
        height: 0.2em;
        margin-bottom: 1em;
    } 
    .contenedorActividades h2,
    .contenedorOtrasActividades h2 {
        font-size: 1.5em;
    }
    .contenedorActividades .actividad,
    .contenedorOtrasActividades .actividad {
        font-size: 0.9em;
    }
    
    /*  Imagenes tipo lightbox */
    .img-mostrar {
        height: 100%;
    }    
    .btn {
        font-size: 2em;
    }   
}

/* Dispositivos con orientación horizontal con una resolución de pantalla mayor a 1200px y menor que 1424px */
@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    .contenedor {
        grid-template-rows: 13em repeat(9, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 55%;        
        margin: 1.25em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 0.95em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
    
    /* Sección del artículo  */
    .contenedor .contenido {
        max-width: 85%;
    }         
    .contenedor .contenido article h1 {
        font-size: 1.75em;
    }
    .contenedor .contenido hr {
        height: 0.2em;
        margin-bottom: 1em;
    } 
    .contenedorActividades h2,
    .contenedorOtrasActividades h2 {
        font-size: 1.25em;
    }
    .contenedorActividades .actividad,
    .contenedorOtrasActividades .actividad {
        font-size: 0.9em;
    }
    
    /*  Imagenes tipo lightbox */
    .img-mostrar {
        height: 95%;
    }    
    .btn {
        font-size: 1.5em;
    }      
}

/* Dispositivos con orientación horizontal con una resolución de pantalla mayor a 992px y menor que 1200px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .contenedor {
        grid-template-rows: 11.75em repeat(10, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 50%;  
        margin: 1em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 0.85em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
    
    /* Sección de las actividades */
    .contenedor .contenido {
        max-width: 85%;
    }  
    .contenedor .contenido h1 {
        font-size: 1.5em;
    }
    .contenedor .contenido hr {
        height: 0.2em;
        margin-bottom: 0.5em;
    } 
    .contenedorActividades h2,
    .contenedorOtrasActividades h2 {
        font-size: 1em;
    }
    .contenedorActividades .actividad,
    .contenedorOtrasActividades .actividad {
        font-size: 0.75em;
    }
    
    /*  Imagenes tipo lightbox */
    .img-mostrar {
        height: 85%;
    }    
    .btn {
        font-size: 1.5em;
    }    
}

/* 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) {
    .contenedor {
        grid-template-rows: 10.25em repeat(10, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo img {
        width: 45%;  
        margin: 0.75em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .menu a {
        font-size: 0.75em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }  
    
    /* Sección de las actividades */
    .contenedor .contenido {
        max-width: 90%;
    } 
    .contenedor .contenido h1 {
        font-size: 1.5em;
    }
    .contenedor .contenido hr {
        height: 0.1em;
        margin-bottom: 0.5em;
    } 
    .contenedorActividades h2,
    .contenedorOtrasActividades h2 {
        font-size: 1em;
    }
    .contenedorActividades .actividad,
    .contenedorOtrasActividades .actividad {
        font-size: 0.75em;
    }
    
    /*  Imagenes tipo lightbox */
    .img-mostrar {
        height: 75%;
    }    
    .btn {
        font-size: 1.5em;
    }
}

/* 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) {
    .contenedor {
        grid-template-rows: 7em repeat(10, 1fr);
    } 
    
    /* Encabezado */
    .contenedor .encabezado .logo {
        justify-content: space-between;
        margin-right: 1em;                    
    }    
    .contenedor .encabezado .logo img {
        width: 40%;
        margin: 0.5em 0;
    }
    
    /* Menú de opciones */
    .contenedor .encabezado .logo .btnMenu {
        display: inline-block;
        font-size: 1.25em;                                    
    }
    .contenedor .encabezado .menu a {
        font-size: 0.75em;
        padding: 0.75em 1em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }
    
    /* Sección de las actividades   */
    .contenedor .contenido {
        max-width: 90%;
    }  
    .contenedor .contenido h1 {
        font-size: 1.25em;
    } 
    .contenedor .contenido hr {
        height: 0.1em;
        margin-bottom: 0.5em;
    } 
    .contenedorActividades, .contenedorOtrasActividades {
        display: flex;
        flex-direction: column;
    }
    .contenedorActividades .grupoUno {        
        border-bottom: 0.125em solid var(--colorDorado);
        padding-bottom: 0.5em;
    }
    .contenedorActividades .grupoDos h2 {
        margin-top: 1.25em;
    }  
    .contenedorActividades h2,
    .contenedorOtrasActividades h2 {
        font-size: 0.85em;
    }
    .contenedorActividades .actividad,
    .contenedorOtrasActividades .actividad {
        font-size: 0.6em;
    }
    
/*    .actividadEspecial {
        width: 70%;
        margin: 0 auto;        
    }    */
            
    /*  Imagenes tipo lightbox */
    .img-mostrar {
        height: 65%;
    }    
    .btn {
        font-size: 1.5em;
    }
}

/* Dispositivos con orientación horizontal con una resolución de pantalla máxima de 576px */
@media screen and (max-width: 575.98px) {
    .contenedor {
        grid-template-rows: 6em repeat(10, 1fr);
    }
    
    /* Encabezado */
    .contenedor .encabezado .logo {
        justify-content: space-between;
        margin-right: 1em;                    
    }  
    .contenedor .encabezado .logo img {
        width: 35%;  
        margin: 0.25em 0;
    }
        
    /* Menú de opciones */
    .contenedor .encabezado .logo .btnMenu {
        display: inline-block;
        font-size: 1.25em;
    }        
    .contenedor .encabezado .menu a {
        font-size: 0.75em;
        padding: 0.75em 1em;
    }
    .contenedor .encabezado .menu i {
        margin-right: 0.75em;
    }
        
    /* Sección de las actividades  */
    .contenedor .contenido {
        max-width: 90%;
    }
    .contenedor .contenido h1 {
        font-size: 1.25em;
    } 
    .contenedor .contenido hr {
        height: 0.1em;
        margin-bottom: 0.5em;
    }    
    .contenedorActividades, .contenedorOtrasActividades {
        display: flex;
        flex-direction: column;
    }
    .contenedorActividades .grupoUno {        
        border-bottom: 0.125em solid var(--colorDorado);
        padding-bottom: 0.5em;
    }
    .contenedorActividades .grupoDos h2 {
        margin-top: 1.25em;
    }    
    .contenedorActividades h2,
    .contenedorOtrasActividades h2 {
        font-size: 0.85em;
    }
    .contenedorActividades .actividad,
    .contenedorOtrasActividades .actividad {
        font-size: 0.6em;
    }
    
/*    .actividadEspecial {
        width: 70%;
        margin: 0 auto;        
    }    */
    
    /*  Imagenes tipo lightbox */
    .img-mostrar {
        height: 55%;
    }    
    .btn {
        font-size: 1.5em;
    }
}