/*YOLANDA MORENO BALTA*/

/*******************************************************************/
                        /* ESTILOS GENERALES */
/*******************************************************************/
/* Reset de márgenes y padding */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*******************************************************************/
                        /* ESTILO HEADER */
/*******************************************************************/

/* Definimos el tamaño de la fuente */
a {
    font-size: 1.25rem;
    font-weight: bold;
}

/**************************** ESTILO ENCABEZADO**************** */


/* Estilos para el encabezado */
header {
    width: 100%; /* Hace que el encabezado ocupe todo el ancho */
    height: auto; /* Ajusta el alto al contenido */
    padding: 10px 0; /* Un poco de espacio arriba y abajo */
    background-color: #f4f4f4; /* Fondo gris claro */
}

/* Estilos para la clase .encabezado */
.encabezado {
    display: flex; /* Utilizamos flexbox para organizar los elementos */
    justify-content: space-between; /* Coloca los elementos en las esquinas */
    align-items: center; /* Alinea verticalmente los elementos */
    max-width: 100%; /* Evita que se salgan del contenedor */
    padding: 0 20px; /* Espaciado horizontal */
    background-color: white;
    /* Color de fondo del encabezado */
    
    /* Color de texto */
    padding: 1rem;
    text-align: center;
    position: relative; /* Para poder colocar la imagen encima de todo */
}

/* Imagen de la marca de agua como fondo */
.marca-agua {
    position: absolute; /* Posicionamos la imagen sobre el encabezado */
    top: 0;
    left: 0;
    width: 100%; /* La imagen ocupa todo el ancho del encabezado */
    height: 100%; /* La imagen ocupa todo el alto del encabezado */
    object-fit: cover; /* Hace que la imagen cubra el área sin distorsionarse */
    opacity: 0.1; /* Baja la opacidad para hacerla un fondo sutil */
    pointer-events: none; /* Esto hace que la imagen no interfiera con los clics en otros elementos */
}

/* Estilos para el logotipo */
.logotipo img {
    max-width: 120px; /* Limita el tamaño del logo */
    height: auto; /* Mantiene la proporción */
}

/* Estilos para la clase .texto */
.texto {
    display: flex;
    flex-direction: column; /* Los elementos en esta sección estarán en columna */
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    text-align: center; /* Centra el texto */
}

/* Estilos para el h1 y el p dentro de .texto */
.texto h1 {
    margin: 0;
    font-size: 2.5rem; /* Tamaño de fuente relativo */
    font-weight: bold;
    color: #b94099;; /* Color oscuro para el encabezado */
}

.texto p {
    margin: 0;
    font-size: 1.5rem; /* Tamaño de fuente relativo */
    color: #666; /* Color gris para el subtítulo */
}

/* Estilos para el login */
.login img {
    max-width: 50px; /* Limita el tamaño del ícono de login */
    height: auto; /* Mantiene la proporción */
}

/* Estilo para la imagen de la marca de agua */

/* El menú hamburguesa incialmente está oculto */
.menu-hamburguesa {
    display: none;
}

/***************** Estilo para el menú de navegación **************/
nav {
    margin: 1rem;
    position: relative;
}

/* Usamos CSS Grid para el menú principal */
.menu_principal {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
    padding: 0;
}

/* Estilo para las opciones del primer nivel */
.menu_principal li {
    background-color:rgb(226, 190, 221);;
    padding: 0.5rem 1rem;
    margin: 0 1rem;
    border-radius: 5px;
    position: relative;
}

/* Estilo para los enlaces dentro de las opciones de menú */
.menu_principal li a {
    color: white;
    text-decoration: none;
    padding: 0.75rem 0.5rem;
    display: block;
    text-align: center;
}

/* Estilo para el submenú */
.menu_principal li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: rgb(226, 190, 221);
    padding: 0.5rem 1rem;
    border-radius: 5px;
    list-style: none;
}

/* Mostramos el submenú cuando el ratón está sobre el primer nivel */
.menu_principal li:hover>ul {
    display: block;
}

/* Estilo para los elementos del submenú */
.menu_principal li ul li {
    background-color: rgb(226, 190, 221);
    padding: 0.5rem 1rem;
}

/* Cambiamos el fondo cuando pasamos el ratón sobre un elemento del submenú */
.menu_principal li ul li:hover {
    background-color: rgb(187, 148, 191);
}

/*******************************************************************/
                        /* ESTILO MAIN */
/*******************************************************************/

/* Estilo para el contenido principal y la zona lateral utilizando Grid */
main {
    display: grid;
    /* Usamos grid para distribuir las zonas */
    grid-template-columns: 1fr 3fr;
    /* 1fr para la zona lateral y 3fr para el contenido */
    gap: 0.2rem;
    /* Espacio entre las dos zonas */
    padding: 1rem;
    /* Padding alrededor del contenido */
    grid-template-areas:
        "lateral contenido";
    /* Define las zonas, lateral y contenido */
    width: 100%;
}

/**********************Contenido****************************/

/* Estilo para la zona de contenido principal */
.contenido {
    background-color: #f4f4f4;
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    grid-area: contenido;
    display: grid;
    grid-template-columns: 1fr;
    /* una columna */
    grid-template-rows: auto;
    /* Las filas se ajustarán al contenido */
    gap: 0.5rem;
    /* Espaciado entre las subsecciones */
    grid-template-areas:
        "noticias"
        "secciones"
        "opiniones"
        "estadisticas"
        "formulario";
}

/*******Noticias*********/

.subzona.noticias {
    background-color: #f4f4f4; ;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    grid-area: noticias;
    margin-bottom: 1rem;
    gap: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "titulo titulo"
        "noticia1 noticia2";
    font-size: 1rem;
    line-height: 1.3;
    text-align: justify;
    margin-bottom: 1rem;
}

.subzona.noticias h2 {
    text-align: center;
    grid-area: titulo;
    /* Asignamos la posición en el grid para que esté en la parte superior */
    margin: 0;
    padding-bottom: 0.3rem;
    font-size: 1.5rem;
    color: #2f3cb5ee;
    font-weight: bold;

}


/* Títulos de las noticias */
.noticia1 h3,
.noticia2 h3 {
    font-size: 1.5rem;
    color: #2f3cb5ee;
    margin-bottom: 0.5rem;
}

/* Fecha y autor de la noticia */
.noticia1 .fecha,
.noticia2 .fecha {
    font-size: 1rem;
    color: #333;
    margin-bottom: 1rem;
}




/* Estilo para el contenedor de la imagen */
figure {
    margin: 0;
    /* Elimina márgenes por defecto alrededor de figure */
    padding: 0;
    /* Elimina el padding por defecto */
    text-align: center;
    /* Centra la imagen y la leyenda dentro del figure */
}

/* Estilo para las imágenes dentro de figure */
.imagen-noticia {
    width: 100%;
    /* Hace que la imagen ocupe el 100% del ancho disponible */
    max-width: 100%;
    /* Garantiza que la imagen no exceda el ancho de su contenedor */
    height: auto;
    /* Ajusta la altura de la imagen para mantener su proporción */
    object-fit: cover;
    /* Recorta la imagen para que llene el espacio sin distorsionarse */
}

/* Estilo para la leyenda dentro de figure */
figcaption {
    font-size: 0.875rem;
    /* Tamaño de fuente más pequeño */
    color: #666;
    /* Color gris para la leyenda */
    margin-top: 0.5rem;
    /* Espacio entre la imagen y la leyenda */
    text-align: center;
    /* Centra la leyenda */
}



/****************Secciones *******************/


/* Contenedor de las secciones (Flexbox para 3 columnas) */
.subzona.secciones {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* Distribuye las secciones equitativamente */
    padding: 0.5;
    margin-top: 0.5;
    background-color: #f4f4f4;
    gap: rem;
    /* Espacio entre las columnas */
    flex-wrap: wrap;
    /* Asegura que las secciones se ajusten en pantallas pequeñas */
}

/* Estilo para cada sección */
.seccion {
    width: 30%;
    /* Cada sección ocupa el 30% del ancho del contenedor */
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0.5rem;
    background-color: #f4f4f4;
    transition: transform 0.3s ease;
    /* Efecto suave al pasar el ratón */
}

/* Efecto de hover (cuando el usuario pasa el ratón sobre la sección) */
.seccion:hover {
    transform: translateY(-5px);
    /* Desplazamiento hacia arriba */
}

/* Estilo para las imágenes dentro de cada sección */
.seccion img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Títulos de cada sección (Voluntariado, Donaciones, Proyectos Sociales) */
.seccion h3 {
    font-size: 1.5rem;
    color: #3477e2;
    /* Color azul para los títulos */
}

/* Descripción de cada sección */
.seccion p {
    font-size: 1rem;
    color: #666;
}

/* Estilo para los enlaces dentro de las secciones */
.seccion a {
    text-decoration: none;
    color: #3477e2;
}

.seccion a:hover {
    text-decoration: underline;
}

/*********************opiniones***********************/

/* Contenedor de opiniones */
.opiniones-contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;


}

/* Opiniones individuales */
.opinion {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f4f4f4;
    padding: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    width: 30%;
    min-width: 250px;
}

.opiniones h2 {
    text-align: center;
    grid-area: titulo;
    /* Asignamos la posición en el grid para que esté en la parte superior */
    margin: 0.5;
    padding-bottom: 0.3rem;
    font-size: 1.5rem;
    color: #2f3cb5ee;
    font-weight: bold;

}

.avatar img {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}

/* Estilo del alias y comentario */
.alias {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.comentarios {
    margin-bottom: 1rem;
}

.comentario {
    margin-bottom: 1rem;
}

.texto {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.idioma {
    font-size: 0.9rem;
    color: #666;
}

/* Deporte resaltado */
.tipo_seccion {
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #0066cc;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin: 0.5rem 0;
    text-align: center;
}

/* Fecha */
.fecha {
    font-size: 0.8rem;
    color: #aaa;
    margin-top: 0.5rem;
}


/*******************Estadísticas*************************/

/* Subzona Estadísticas */
.subzona.estadisticas {
    background-color:#f4f4f4;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    grid-area: estadisticas;
}

.contenido h3 {
    color: #2f38b5ee;
    margin-bottom: 1rem;
}

/* Estilo para la tabla dentro de Estadísticas de Ventas */

.subzona.estadisticas h3 {
    text-align: center;
    grid-area: titulo;
    /* Asignamos la posición en el grid para que esté en la parte superior */
    margin: 0;
    padding-bottom: 0.3rem;
    font-size: 1.5rem;
    color: #2f3cb5ee;
    font-weight: bold;

}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

table th,
table td {
    padding: 0.75rem;
    border: 1px solid #ccc;
    text-align: left;
}

table th {
    background-color: #2f38b5ee;
    color: white;
}

table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}


/************** Estilo para el formulario******************/

/*ESTILO FORMULARIO*/
.subzona.formulario {
    grid-area: formulario;
    background-color: #c4bfc4;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

fieldset {
    border: 1px solid #ddd;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 0.5rem;
}

legend {
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0 1rem;
}

/* Estilo de las etiquetas */
label {
    display: block;
    margin-bottom: 0.75rem;
    /* Espaciado entre etiqueta y campo */
    font-weight: bold;
    font-size: 1rem;
    /* Fuente en tamaño relativo */
}

/* Estilo de los campos de entrada */
input,
textarea,
select {
    width: 100%;
    padding: 1rem;
    /* 1rem para relleno relativo */
    margin-bottom: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    /* Bordes redondeados pequeños */
    font-size: 1rem;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #0066cc;
    outline: none;
}

/* Mensajes de ayuda */
small {
    display: block;
    font-size: 0.875rem;
    /* Fuente ligeramente más pequeña */
    color: #777;
    margin-top: 0.5rem;
}

/* Estilo para los campos inválidos */
input:invalid,
textarea:invalid,
select:invalid {
    border-color: red;
}

input:valid,
textarea:valid,
select:valid {
    border-color: green;
}

/* Estilo para los botones */
.botones {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    /* Espaciado entre los botones */
}

button {
    background-color: #0066cc;
    color: white;
    padding: 1rem 2rem;
    /* Uso de rem para relleno */
    border: none;
    border-radius: 0.25rem;
    font-size: 1rem;
    cursor: pointer;
}

button:hover {
    background-color: #005bb5;
}

/* Estilo para el botón de reset */
button[type="reset"] {
    background-color: #f44336;
}

button[type="reset"]:hover {
    background-color: #e53935;
}

/* ESTILO PIE DE PÁGINA */
.pie {
    background-color: #2f38b5ee;
    /* Color de fondo del pie de página */
    color: white;
    /* Color de texto */
    padding: 1rem;
    text-align: center;
}

.pie p {
    margin: 0;
}

/***********************************************************/
                    /*ZONA LATERAL*/
/***********************************************************/
/*Estilo principal zona lateral*/

.lateral {
    background-color: #f4f4f4;
    /* Color de fondo */
    padding: 1.5rem;
    /* Padding interno */
    border-radius: 10px;
    /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
    grid-area: lateral;
    /* Asignamos esta zona al área 'lateral' */
}

/**********Bloque Navegación****************/

/* Bloque de navegación a secciones */
.navegacion h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: #2f3cb5ee;
}

.navegacion ul {
    list-style-type: none;
    padding: 0;
}

.navegacion li {
    margin-bottom: 1.5rem;
    text-align: center;
}

.navegacion a {
    text-decoration: none;
    color: #302929;
    font-size: 1.25rem;
    transition: background-color 0.3s, padding-left 0.3s;
}

.navegacion a:hover,
.navegacion a:focus {
    background-color: #2f3cb5ee;
    padding-left: 1rem;
    padding-right: 1rem;
    outline: none;
    color: white;
}


/******************Galería de imágenes*************/
.galeria {
    margin-top: 2rem;
}

.galeria h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: #2f3cb5ee;
}

.galeria .imagen {
    margin-bottom: 1rem;
    text-align: center;
}

.galeria img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.galeria figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #666;
}


/******************************************************/
/* Media query para dispositivos menores de 620px */
/******************************************************/
@media (max-width: 620px) {

    /******************** ESTILO HEADER ******************/
    /* Mostrar el menú hamburguesa en pantallas pequeñas */
    .hamburger {
        display: block;
    }

    /* El menú de navegación se oculta por defecto en dispositivos pequeños */
    nav {
        display: none;
        width: 100%;
    }

    /* Estilo del botón del menú hamburguesa */
    .icono-hamburguesa {
        display: grid;
        grid-template-rows: repeat(3, 0.25rem);
        /* Tres filas de 0.25rem de alto cada una */
        gap: 0.7rem;
        /* Espacio entre las barras */
        width: 4rem;
        /* Ancho relativo (por ejemplo, 2.2rem) */
        height: 4rem;
        /* Alto relativo (por ejemplo, 2.2rem) */
        cursor: pointer;
        margin: 2rem;
        /* Margen relativo */
    }

    /* Icono de hamburguesa (tres barras) */
    .icono-hamburguesa span {
        width: 100%;
        background-color: black;
        height: 100%;
        /* Las barras ocupan toda la altura de la fila */
    }

    /* Si el menú de hamburguesa está marcado, las barras se convierten en una X */
    .menu-hamburguesa:checked+label .simbolo_barra:nth-child(1) {
        background-color: red;
        transform: rotate(45deg) translate(3px, 3px);
    }

    .menu-hamburguesa:checked+label .simbolo_barra:nth-child(2) {
        opacity: 0;
        /* Se oculta la barra del medio */
    }

    .menu-hamburguesa:checked+label .simbolo_barra:nth-child(3) {
        background-color: red;
        transform: rotate(-45deg) translate(6px, -6px);
    }

    /* Cuando el input está marcado, el menú se muestra */
    .menu-hamburguesa:checked+label+nav {
        display: grid;
        grid-template-columns: 1fr;
        /* Para asegurarte de que los elementos del menú se ubiquen en una sola columna */
        width: 100%;
        /* Asegúrate de que el menú ocupe todo el ancho disponible */
        background-color: #f0f0f0;
        /* Puedes agregar un color de fondo si lo deseas */
        padding: 0;
        /* Ajusta el espaciado alrededor del menú */
    }

    /* Hacer que el menú sea vertical cuando se muestra */
    .menu_principal {
        display: block;
        width: 100%;
    }

    .menu_principal li {
        margin: 0;
        border-radius: 0;
        background-color: #f573d2;
    }

    /* Estilo para los submenús en dispositivos pequeños */
    .menu_principal li ul {
        position: relative;
        background-color: rgb(226, 190, 221);
        padding: 0.5rem 1rem;
        list-style: none;
        display: none;
        border-radius: 5px;
    }

    /* Mostrar submenú en dispositivos pequeños */
    .menu_principal li:hover>ul {
        display: block;
    }

    /**************ESTILO MAIN*************************/

    /* Ajustes para la sección de noticias */
    .subzona.noticias {
        padding: 1rem;
        /* Reducir el padding para pantallas pequeñas */
    }
    

    /* Ajustes para los párrafos */
    .noticia .texto-noticia {
        font-size: 1rem;
        line-height: 1.4;
        margin-bottom: 1rem;
    }

    /* Asegurar que las imágenes no se desborden en pantallas pequeñas */
    .noticia img {
        width: 100%;

    }

    .subzona.secciones {
        flex-direction: column;
        /* Cambia las columnas a filas en pantallas pequeñas */
        align-items: center;
        /* Centra las secciones */
    }

    .seccion {
        width: 80%;
        /* Aumenta el tamaño de las secciones en pantallas pequeñas */
        margin-bottom: 1rem;
        /* Espacio entre las secciones */
    }


   

    .opiniones-contenedor {
        flex-direction: column;
        align-items: center;
    }

    .opinion {
        width: 80%;
        margin-bottom: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .subzona.formulario {
        padding: 1rem;
        /* Menor relleno en pantallas pequeñas */
        max-width: 90%;
        /* 90% en pantallas pequeñas para más espacio */
    }

    
     /********************Zona lateral desaparece cuando la pantalla es pequeña**************/
     .lateral {
        display: none;


    }
}