/* Define las variables para los colores */
:root{
    --colorA: #ffffff;
    --colorB: #eceee4;
    --colorC: #646464;
    --colorD: #000000;
    --colorE: #e43333;
    --colorF: #03800f;
    --colorG: #0c09cc;
    --colorH: #E1A807;
    --colorI: #B35150;
    --colorJ: #3a77d8;
}

html{
    margin: 0;
    padding: 0;
    height: 100%;
}

/* Estilos generales para elementos de la página */
* {
    /* Hace que se incluyan en las dimensiones de los elementos los rellenos y los bordes, pero no los margenes */
    box-sizing: border-box;

    /* Tipo de letra general */
    font-family: Arial, sans-serif;
}

h1{
    display: none;
}

/* -------------- Estilos base: para móviles (desde 4´ en adelante) -------------------- */
body{
    display:grid;
    /* Define el número y tamaño de las columnas y filas  */
    grid-template-columns: 99%;    grid-template-rows: auto 0px auto 0px 0px auto;
    /* Define la separación entre filas y columnas */
    grid-row-gap: 0px;
    /* grid-column-gap: 1px;*/
    /* Define las celdas*/
    grid-template-areas:    "header"
                            "nav"
                            "contenido_1"
                            "contenido_2"
                            "contenido_3"
                            "footer";   
    background-color: var(--colorB);                                            
    justify-content: center;
    /* max-width: 1500px; */
    max-width: 999px;
    min-height: 100%;
    margin: 0 auto;


        border: rgb(255, 0, 0) 0px solid;
}

/* Área de Cabecera */
header {
    grid-area:header;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    background-color: var(--colorA);

        border: rgb(38, 0, 255) 0px solid;
}

.cabecera_imagen{
    width: 100%;
    max-width: 999px;

        border: rgb(0, 255, 55) 0px solid;
}

/* Área de navegación*/
nav{
    grid-area: nav;
    width: 100%;
    display: none;

        border: rgb(25, 0, 255) 0px solid;
}

/* Área del contenido */
main{
    display: contents;
}

#contenido_1{
    grid-area:contenido_1;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: center;

    background-image: url('/imagenes/diseno/fondo_500x1700.jpg');
    background-size: 100%;
    background-position: top;
    background-repeat: repeat;
    /* background-attachment: fixed; */
    width: 100%;

    min-height: 150vh;

        border: rgb(255, 0, 0) 0px solid;
}

#eventos{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    width: 100%;

    min-height: 150vh;

        border: rgb(17, 0, 255) 0px solid;
}

#eventos_titulo{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 90%;
    max-width: 580px;
    height: 6vh;
    font-size: 4vw;
    color:var(--colorJ);
    background-image: url('/imagenes/diseno/sombra_titulo.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;

        border: rgb(255, 0, 0) 0px solid;
}

.link_capsula{
    text-decoration: none;
    color: var(--colorD);
}

.capsula{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    box-shadow: -5px -5px 20px -5px var(--colorC), 5px 5px 20px -5px var(--colorC);
    border-radius: 15px;
    background-color: var(--colorA);
    width: 90%;
    margin: 5%;
    margin-top: 2%;

        border: rgb(0, 255, 34) 0px solid;
}

.div_superior{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 99%;

                border: rgb(255, 0, 0) 0px solid;
}

.nombre{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 93%;
    max-height: 5.5vh;
    text-align: center;
    font-size: 3.5vw;

        border: rgb(255, 0, 0) 0px solid;
}

.imagen_link{
    width: 6vw;
}

.div_info{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: start;
    justify-content: space-evenly;
    width: 99%;

        border: rgb(255, 0, 0) 0px solid;
}

.div_imagen{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content:start;
    width: 54%;
    margin-bottom: 5px;
    overflow: hidden;   /* Oculta partes que sobresalgan */

        border: rgb(38, 0, 255) 0px solid;
}

.imagen_evento{
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Hace que la imagen cubra el div */
}

.div_calendario{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: start;
    width: 42%;

        border: rgb(47, 0, 255) 0px solid;
}

.mes{
    font-size: 2.5vw;
    margin-top: 2%;
    margin-bottom: 2%;

        border: rgb(0, 255, 0) 0px solid;
}

.calendario_evento{
    font-size: 2vw;
    text-align: center;
    width: 90%;
    border: var(--colorI), 1px, solid;
}

.dias_evento{
    color:var(--colorA);
    background-color: var(--colorF);
}

.organizador{
    text-align: left;
    width: 90%;
    font-size: 3vw;

        border: rgb(0, 255, 0) 0px solid;
}

#actividades{
    display: none;
}







#contenido_2{
    grid-area:contenido_2;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;

        border: rgb(4, 0, 255) 0px solid;

        display: none;
}

#formulario_actividades{
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
    background-color: rgb(59, 241, 181); 
    width: 80%;
    margin: 2px;
}

.tabla_entidades{
    width: 80%;
}

input, textarea, select {
    width: 80%;
    padding: 10px;
    margin-bottom: 5px; 
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.imagen_entidad{
    max-width: 5vw;
}








#contenido_3{
    grid-area:contenido_3;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
        
        border: rgb(25, 0, 255) 0px solid;

        display: none;
}








/* Pie de página */
footer {
    grid-area:footer;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    background-color: var(--colorA);

        border: rgb(255, 0, 0) 0px solid;
}

#mensajes{
    border-radius: 15px;
    background-color: var(--colorB);
    width: 90%;
    margin: 3%;
    margin-top: 7%;
}

#mensajes p{
    margin: 2%;
}

#contacto{
    text-align: center;
    background-color: var(--colorC);
    color: var(--colorA);
    width: 100%;
}

/* ---------- Smartphone muy grandes ---------- */
@media (min-width: 500px) {

    #contenido_1{
        background-image: url('/imagenes/diseno/fondo_650x2200.jpg');
    }

    #eventos_titulo{
        font-size: 3vw;
    }

    .capsula{
        max-width: 645px;
    }

    .nombre{
        font-size: 2.5vw;
    }

    .organizador{
        font-size: 2vw;
    }
}

/* ----------- Tablets pequeñas en adelante --------- */
@media (min-width: 650px) {

    #contenido_1{
        background-image: url('/imagenes/diseno/fondo_850x2900.jpg');
    }

    #eventos_titulo{
        min-height: 6vh;
    }

    .nombre{
        font-size: 2vw;
    }

    .imagen_link{
        max-width: 4vw;
    }

    .mes{
        font-size: 2vw;
    }

    .organizador{
        font-size: 2vw;
    }
}

/* ----------- Escritorio mediano (max-width: 1000px) ------------------- */
@media (min-width: 850px) {
  
    #eventos_titulo{
        font-size: 25px;
    }

    .nombre{
        font-size: 18px;
    }

    .imagen_link{
        width: 40px;
    }

    .mes{
        font-size: 17px;
    }

    .organizador{
        font-size: 20px;
    }

    .calendario_evento{
        font-size: 14px;
    }

    .organizador{
        font-size: 14px;
    }
}


/* ----------- Escritorio grande ------------------- */
@media (min-width: 1000px) {
    
    /*
    #contenido_1{
    background: none;
    }
    */

    /*
    #contenido_1{
        background-image: url('/imagenes/diseno/fondo_1500x3000.jpg');
    }
    */

    /*
    #actividades{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: start;
    justify-content: start;
    width: 450px;

            border: rgb(0, 255, 0) 1px solid;
    }

    .link_entidad{
        text-decoration: none;
        color: var(--colorD);
        font-size: 14px;
    }
    */

}