/* Estilos base para el header */
.header-container {
    width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: white;  /* color trasera header */
	padding: 0px;
	color: white;
	text-align: center;
	position: relative;
	min-height: 150px; /* Altura mínima para asegurar espacio */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Para distribuir los elementos verticalmente */
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.header-fondo {
    width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 0px 0;  /* espacio superior-inferior y izq-derecho */
	position: relative;
	min-height: 200px; /* Altura mínima para asegurar espacio */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Para distribuir los elementos verticalmente */
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Capa de superposición para mejorar legibilidad del texto */
.header-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   
    z-index: 0;
}

.header-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Importante para que los ítems flex puedan ocupar espacio vertical */
    justify-content: flex-start; /* <-- ESTO ES CLAVE: Cambiado de space-between */
    padding: 0px 0px;
    box-sizing: border-box;
}

/* Botones d emodalidades del footer */
/* Contenedor para centrar los botones */
.modalidades-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que los botones pasen a la siguiente línea */
    gap: 10px; /* Espacio entre los botones */
    margin-bottom: 20px; /* Margen inferior para separarlo del grid principal */
}


/* Logo de la federación */
.federacion-logo {
    margin: auto;
    max-width: 100%; /* Tamaño del logo */
    height: auto;
    display: block; /* Para centrar con margin: auto */
}
.federacion-logo img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* Menú Header-top */
.main-nav-header-top ul {
    list-style: none;
    padding: 0 2px;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que los ítems se ajusten en pantallas pequeñas */
}
.main-nav-header-top ul li {
    position: relative;
    margin: 0;
}
.main-nav-header-top ul li a {
    display: block;
    padding: 10px 15px;
/*	background-color: #363b40; */
/*    color: white; */
    text-decoration: none;
    font-weight: bold;
	font-size:12px;
    transition: background-color 0.3s ease;
	border-right: 1px solid #D3D3D3;
    border-radius: 0px;
}
.main-nav-header-top ul li a:hover {
    background-color: #5d6369;
}

/* Desplegables (submenús Header-top) */
.main-nav-header-top ul li ul {
    display: none;
    position: absolute;
    background-color: #555; /* Puedes cambiar este color si quieres que el fondo del submenú sea diferente */
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0;
    top: 100%;
    margin-top: 0px; /* <-- Añade esta línea para subirlo 1px y pegarlo visualmente */
    border-radius: 0; /* <-- Cambia a 0, ya que los botones principales no tienen bordes redondeados */
    padding: 0px 0;
}
.main-nav-header-top ul li:hover > ul {
    display: flex; /* Mostrar al pasar el ratón */
}
.main-nav-header-top ul li ul li {
    margin: 0;
    width: 100%; /* Asegura que cada sub-item ocupe todo el ancho del desplegable */
    text-align: left;
}
.main-nav-header-top ul li ul li a {
    padding: 10px 20px;
    font-weight: normal;
    font-size: 12px;
}
.main-nav-header-top .dropdown-arrow {
    margin-left: 5px;
    font-size: 0.8em;
}

/* Menú Header-bottom */
.main-nav-header-bottom {
    /* Aquí es donde se establece la posición y el z-index */
    position: relative;
    z-index: 10;
}
.main-nav-header-bottom ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap; /* Para que los ítems se ajusten en pantallas pequeñas */
}
.main-nav-header-bottom ul li {
    position: relative;
    margin: 0;
}
.main-nav-header-bottom ul li a {
    display: block;
    padding: 10px 15px;
/*	background-color: #00A0DE;  /* color de fondo de los botones */
/*  color: white;  /* color de letra de los botones */
    text-decoration: none;
    font-weight: bold;
	font-size:12px;
    transition: background-color 0.3s ease;
	border-right: 1px solid #D3D3D3;
    border-radius: 0px;
}
.main-nav-header-bottom ul li a:hover {
    background-color: #5d6369; 
}

/* Desplegables (submenús Header-top) */
.main-nav-header-bottom ul li ul {
    display: none;
    position: absolute;
    background-color: #555; /* Puedes cambiar este color si quieres que el fondo del submenú sea diferente */
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0;
    top: 100%;
    margin-top: 0px; /* <-- Añade esta línea para subirlo o bajar y pegarlo visualmente */
    border-radius: 0; /* <-- Cambia a 0, ya que los botones principales no tienen bordes redondeados */
    padding: 0px 0;
}
.main-nav-header-bottom ul li:hover > ul {
    display: flex; /* Mostrar al pasar el ratón */
}
.main-nav-header-bottom ul li ul li {
    margin: 0;
    width: 100%; /* Asegura que cada sub-item ocupe todo el ancho del desplegable */
    text-align: left;
}
.main-nav-header-bottom ul li ul li a {
    padding: 10px 20px;
    font-weight: normal;
    font-size: 12px;
	transition: color 0.3s ease; /* Transición suave para el cambio de color */
}
.main-nav-header-bottom .dropdown-arrow {
    margin-left: 5px;
    font-size: 0.8em;
}


.clubs-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Oculta el scrollbar nativo */
    background-color: white; /* O el color que desees para el fondo del carrusel */
    padding: 10px 0; /* Espacio para las flechas */
}

.clubs-buttons-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* Eliminamos padding-left y padding-right si los había para el overflow */
    margin: 0; /* Aseguramos que no haya margen */
    background-color: white; /* Fondo semitransparente oscuro */

    /* Propiedades para el desplazamiento horizontal y la marquesina */
    overflow-x: hidden; /* Escondemos el scrollbar nativo */
    white-space: nowrap; /* Asegura que los items estén en una sola línea */
    -webkit-overflow-scrolling: touch; /* Mejora la fluidez del desplazamiento en iOS */
}


.club-button {
    display: flex;
	flex-direction: column;
    align-items: center; /* Centra verticalmente el contenido (imagen/texto) */
    justify-content: center; /* Centra horizontalmente el contenido */
    padding: 0px 20px; /* Incrementamos el padding para dar espacio a los logos al agrandarse */
    text-decoration: none;
    color: white; /* Color del texto del botón */
    font-weight: bold;
    font-size: 16px; /* Tamaño de letra para los botones de modalidad */
    background-color: white;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Evita que los botones se encojan en pantallas pequeñas */
    white-space: nowrap; /* Evita que el texto o la imagen se rompan en varias líneas */

	position: relative; /* CAMBIO IMPORTANTE: Asegura que el z-index funcione correctamente en relación con otros hermanos. */
    z-index: 1; /* Valor base. Se aumentará en el hover. */
    /* REMOVER: position: relative !important; z-index: 2; - Si existía y causaba conflicto. */
}

.club-button img {
    max-height: 30px; /* Altura máxima de la imagen dentro del botón */
    width: auto;
    display: block; /* Asegura que la imagen se muestre correctamente */
	transition: transform 0.3s ease;
	transform: scale(1);
}

.club-button:hover {
/* background-color: rgba(0, 0, 0, 0.2); /* Se oscurece más al pasar el ratón */
    z-index: 10; /* CAMBIO IMPORTANTE: Aumenta el z-index en hover para que se superponga */
}

.club-button:hover img {
    transform: scale(1.3); /* Escala la imagen al 130% de su tamaño original */
    /* Puedes ajustar el valor (ej. 1.1 para 10% más grande, 1.3 para 30% más grande) */
}

.footer-container {
    width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: white;  /* color trasera header */
	padding: 0px;
	color: white;
	text-align: center;
	position: relative;
	min-height: 150px; /* Altura mínima para asegurar espacio */
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* Para distribuir los elementos verticalmente */
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* PIE DE PAGINA DEL INDEX */
/* Nuevo contenedor para las 4 columnas */
.footer-grid {
    display: grid;
    /* Define 4 columnas de igual ancho y un espacio entre ellas */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left; /* Alinea el texto a la izquierda en las columnas */
}

/* Estilos para cada columna */
.footer-column {
    display: flex;
    flex-direction: column;
    color: #fff;
}

.footer-column h3 {
    font-size: 18px;
    color: #f1f1f1;
    margin-bottom: 15px;
    border-bottom: 2px solid #555;
    padding-bottom: 5px;
}

.footer-column a,
.footer-column p {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.footer-column a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Estilos específicos para la sección de redes sociales */
.social-links a {
    display: flex;
    align-items: center;
    gap: 8px;
}
.social-links a img {
    height: 16px; /* Icono de Twitter, por ejemplo */
}

/* Estilos para el formulario de newsletter */
.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.newsletter-form input[type="email"] {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #555;
    color: #fff;
}
.newsletter-form input[type="email"]::placeholder {
    color: #aaa;
}
.newsletter-form button {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #00A0DE;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.newsletter-form button:hover {
    background-color: #008cc9;
}

/* Media Queries para diseño responsive en dispositivos pequeños */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* Una sola columna en móviles */
        text-align: center;
    }
    .footer-column h3 {
        text-align: center;
    }
    .social-links a {
        justify-content: center;
    }
	
	.junta-directiva-container {
        margin: 10px;
        padding: 15px;
    }
    .miembros-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }	
}
/* PATROCINADORES */
.patrocinadores-buttons-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 0px; /* Espacio vertical para la botonera */
    margin-top: 5px; /* Espacio para separar la botonera del logo */
    margin-bottom: 0px; /* Espacio para separar la botonera del menú inferior */
   /* flex-wrap: wrap; /* Permite que los botones se ajusten en varias líneas en pantallas pequeñas */
	background-color: white; /* Fondo semitransparente oscuro */
	
	/* AÑADE ESTAS PROPIEDADES PARA EL DESPLAZAMIENTO HORIZONTAL */
    overflow-x: auto; /* Permite el desplazamiento horizontal si el contenido desborda */
    -webkit-overflow-scrolling: touch; /* Mejora la fluidez del desplazamiento en iOS */
}

.pie_de_pagina{
	 font-size: 16px; /* Tamaño de letra para los botones de modalidad */
	 color: #003575; /* Color del texto del botón */
	 margin-bottom: 5px;
}
.patrocinador-button {
    display: flex;
	flex-direction: column;
    align-items: center; /* Centra verticalmente el contenido (imagen/texto) */
    justify-content: center; /* Centra horizontalmente el contenido */
    padding: 0px 20px;
    text-decoration: none;
    color: white; /* Color del texto del botón */
    font-weight: bold;
    font-size: 16px; /* Tamaño de letra para los botones de modalidad */
    background-color: white;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Evita que los botones se encojan en pantallas pequeñas */
    white-space: nowrap; /* Evita que el texto o la imagen se rompan en varias líneas */

	position: relative; /* CAMBIO IMPORTANTE: Asegura que el z-index funcione correctamente en relación con otros hermanos. */
    z-index: 1; /* Valor base. Se aumentará en el hover. */
    
}


.patrocinador-button img {
    max-height: 80px; /* Altura máxima de la imagen dentro del botón */
    width: auto;
    display: block; /* Asegura que la imagen se muestre correctamente */
	transition: transform 0.3s ease;
	transform: scale(1);
}

.patrocinador-button:hover {
/* background-color: rgba(0, 0, 0, 0.2); /* Se oscurece más al pasar el ratón */
    z-index: 10; /* CAMBIO IMPORTANTE: Aumenta el z-index en hover para que se superponga */
}

.patrocinador-button:hover img {
    transform: scale(1.1); /* Escala la imagen al 130% de su tamaño original */
    /* Puedes ajustar el valor (ej. 1.1 para 10% más grande, 1.3 para 30% más grande) */
}

/* NUEVO: Contenedor para los botones de modalidad */
.modality-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0px; /* Espacio vertical para la botonera */
    gap: 15px; /* Asegura que no haya espacio entre los botones más allá del borde */
    margin-top: 5px; /* Espacio para separar la botonera del logo */
    margin-bottom: 0px; /* Espacio para separar la botonera del menú inferior */
    flex-wrap: wrap; /* Permite que los botones se ajusten en varias líneas en pantallas pequeñas */
	background-color:#003575;  /* Color de fondo del menu modalidades */
}

/* NUEVO: Estilos para cada botón de modalidad */

	.modality-button {
    display: flex;
	flex-direction: column; /* <-- CAMBIO CLAVE: Los elementos se apilan verticalmente */
    align-items: center; /* Centra verticalmente el contenido (imagen/texto) */
    justify-content: center; /* Centra horizontalmente el contenido */
    padding: 0px 0px;  
    text-decoration: none;
    color: white; /* Color del texto del botón */
    font-weight: bold;
    font-size: 16px; /* Tamaño de letra para los botones de modalidad */
    background-color: rgba(0, 0, 0, 0.3); /* Fondo semitransparente oscuro */
    border-right: 1px solid rgba(255, 255, 255, 0.4); /* Línea divisoria vertical fina */
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* Evita que los botones se encojan en pantallas pequeñas */
    white-space: nowrap; /* Evita que el texto o la imagen se rompan en varias líneas */
	
	position: relative !important; /* Asegura que z-index funcione */
    z-index: 2;     /* Asegura que esté en la capa más alta */
}

.modality-button:last-child {
    border-right: none; /* Elimina la línea divisoria del último botón */
}

.modality-button img {
    max-height: 50px; /* Altura máxima de la imagen dentro del botón */
    width: auto;
    display: block; /* Asegura que la imagen se muestre correctamente */
}

/* NUEVO: Bordes superiores de colores diferentes para cada botón */
.modality-button.border-color-1 { border-top: 3px solid #FF5733; /* Naranja vibrante */ }
.modality-button.border-color-2 { border-top: 3px solid #33FF57; /* Verde lima */ }
.modality-button.border-color-3 { border-top: 3px solid #3357FF; /* Azul brillante */ }
.modality-button.border-color-4 { border-top: 3px solid #FF33F5; /* Rosa/Magenta */ }
.modality-button.border-color-5 { border-top: 3px solid #371D61; /* Azul oscuro */ }
.modality-button.border-color-6 { border-top: 3px solid #636365; /* blanco sucio */ }

/* NUEVO: Bordes superiores de colores diferentes para cada botón */
.modality-button.fondo-color-1 { background-color: #FF5733; /* Naranja vibrante */ }
.modality-button.fondo-color-2 { background-color: #33FF57; /* Verde lima */ }
.modality-button.fondo-color-3 { background-color: #3357FF; /* Azul brillante */ }
.modality-button.fondo-color-4 { background-color: #FF33F5; /* Rosa/Magenta */ }
.modality-button.fondo-color-5 { background-color: #371D61; /* Azul oscuro */ }
.modality-button.fondo-color-6 { background-color: #636365; /* blanco sucio */ }

/* Efecto hover para los botones de modalidad */
.modality-button:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Se oscurece más al pasar el ratón */
}

/* Selector de idioma */
.language-selector {
    position: absolute;
    bottom: 5px;
    right: 15px;  /*para que aparezca a la derecha */
    z-index: 99; /* Sobre la capa oscura */
}
.language-selector select {
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
    cursor: pointer;
    font-size: 0.9em;
}
/* Estilos específicos para Header Top y Header Bottom */
.header-top-nav {
    order: 1; /* Arriba */
    margin-bottom: 0px; /* Margen inferior del menu superior */
	position: relative; /* <- AÑADE ESTA LÍNEA */
/*	background-color:#363b40;  /* color de fondo de menu superior */
}
.header-bottom-nav {
    order: 3; /* Abajo */
    margin-top: 0px; /* Asegúrate de que este margen sea 0 */
    /* Si después de esto necesitas un pequeño espacio del borde inferior del header,
       puedes añadir padding-bottom al .header-content o al .header-container. */
}
.header-logo-section {
	order: 2; /* En el medio */
    flex-grow: 1; /* <-- ESTO ES CLAVE: Hace que esta sección ocupe todo el espacio sobrante */
    display: flex; /* Para centrar el logo dentro de su espacio crecido */
    justify-content: center;
    align-items: center;
}

/* Estilos para el contenido principal de index.php */
body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa; color: #333; }
.main-content-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}
.news-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}
.news-item:hover {
    transform: translateY(-5px);
}
.news-item h3 {
    margin: 0;
    padding: 15px;
    font-size: 1.2em;
    color: #0056b3;
}
.news-item p {
    padding: 0 15px 15px;
    font-size: 0.9em;
    color: #666;
}
.news-item .news-date {
    font-size: 0.8em;
    color: #999;
    padding: 0 15px 10px;
    text-align: right;
}
.news-item a {
    text-decoration: none;
    color: inherit;
    display: block; /* Hace que todo el item sea clickeable */
}
.news-item a:hover h3 {
    text-decoration: underline;
}

footer {
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    background-color: #343a40;
    color: white;
    border-top: 1px solid #e7e7e7;
}

/* Contenedor principal de la marquesina con flechas */
.patrocinadores-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden; /* Oculta el scrollbar nativo */
    background-color: white;
    padding: 10px 0; /* Espacio para las flechas */
}

/* Ajustes para el contenedor de los botones de patrocinadores dentro de la marquesina */
.patrocinadores-buttons-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* Eliminamos padding-left y padding-right si los había para el overflow */
    margin: 0; /* Aseguramos que no haya margen */
    background-color: white; /* Fondo semitransparente oscuro */

    /* Propiedades para el desplazamiento horizontal y la marquesina */
    overflow-x: hidden; /* Escondemos el scrollbar nativo */
    white-space: nowrap; /* Asegura que los items estén en una sola línea */
    -webkit-overflow-scrolling: touch; /* Mejora la fluidez del desplazamiento en iOS */
}

/* Flechas de navegación */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    opacity: 0.8;
    transition: opacity 0.3s ease, background-color 0.3s ease;
}

.carousel-arrow:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.7);
}

.carousel-arrow.left {
    left: 0;
    border-radius: 0 5px 5px 0;
}

.carousel-arrow.right {
    right: 0;
    border-radius: 5px 0 0 5px;
}

/* --- Estilos para la página de Noticias (noticias.php) --- */

.news-page-container {
    display: flex;
    gap: 30px; /* Espacio entre el filtro y la lista de noticias */
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.news-filters {
    flex: 0 0 250px; /* Ancho fijo para la barra lateral de filtros */
    padding: 20px;
    border-right: 1px solid #eee;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.news-filters h2 {
    font-size: 1.8em;
    color: #333;
    margin-top: 0;
    margin-bottom: 25px;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 10px;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #555;
}

.news-filters select,
.news-filters input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
    box-sizing: border-box; /* Asegura que padding no aumente el ancho */
    -webkit-appearance: none; /* Elimina estilos por defecto en Chrome/Safari */
    -moz-appearance: none;    /* Elimina estilos por defecto en Firefox */
    appearance: none;         /* Elimina estilos por defecto */
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2C197.8c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L146.2%2C68.4L16.4%2C197.8c-3.2%2C3.2-8.3%2C3.2-11.6%2C0c-3.2-3.2-3.2-8.3%2C0-11.6l135.9-135.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0L287%2C186.2C290.2%2C189.5%2C290.2%2C194.6%2C287%2C197.8z%22%2F%3E%3C%2Fsvg%3E'); /* Flecha personalizada */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.news-filters input[type="text"]:focus,
.news-filters select:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.news-filters .search-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    width: 100%;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

.news-filters .search-button:hover {
    background-color: #0056b3;
}

.news-list-section {
    flex-grow: 1; /* Ocupa el espacio restante */
}

.news-item-full {
    display: flex;
    align-items: center; /* Alinea los elementos al principio verticalmente */
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #fefefe;
}

.news-item-full:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.news-image-container {
    flex: 0 0 300px; /* Ancho fijo para la imagen */
    height: 200px; /* Altura fija para la imagen */
    overflow: hidden;
    border-right: 1px solid #e0e0e0;
}

.news-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Recorta la imagen para cubrir el contenedor */
    display: block;
}

.news-content-right {
    flex-grow: 1;
    padding: 20px 25px;
	text-align:justify;
}

.news-content-right h3 {
    font-size: 1.8em;
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.2;
}

.news-content-right h4 {
    font-size: 1.2em;
    color: #666;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: normal;
}

.news-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
}

.news-excerpt {
    font-size: 1em;
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px;
}


/* Mensajes de error o info */
.error-message, .alert.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
}

/* Estilos junta_directiva */
.junta-directiva-container {
    padding: 20px;
    max-width: 960px;
    margin: 20px auto;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.junta-directiva-container h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

.junta-directiva-container p {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.miembros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    justify-content: center;
}

.miembro-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s ease-in-out;
}

.miembro-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.miembro-card h3 {
    color: #0056b3; /* Un color de acento */
    margin-top: 0;
    margin-bottom: 10px;
}

.miembro-card .cargo {
    font-style: italic;
    color: #555;
    margin-bottom: 5px;
}

.miembro-card .email {
    color: #777;
    font-size: 0.9em;
}

.miembro-card .email a {
    color: #007bff;
    text-decoration: none;
}

.miembro-card .email a:hover {
    text-decoration: underline;
}

/* --- Estilos para la página de Noticias (noticias.php) --- */

/* Existing news-page-container styles */
.news-page-container {
    display: flex; /* Keep flex for the news items themselves */
    flex-direction: column; /* Changed to column to stack news items */
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* NEW: Styles for the top filter bar */
.news-filters-top {
    display: flex;
    justify-content: center; /* Center the filter items */
    align-items: center;
    gap: 20px; /* Space between filter groups */
    padding: 15px 20px;
    background-color: #f2f2f2; /* Light background for the filter bar */
    border-bottom: 1px solid #e0e0e0;
    margin: 20px auto 0 auto; /* Margin to separate from header, 0 at bottom as news-page-container has top margin */
    max-width: 1200px; /* Match max-width of news-page-container */
    border-radius: 8px 8px 0 0; /* Rounded top corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.news-filters-top form {
    display: flex;
    flex-wrap: wrap; /* Allow form elements to wrap */
    gap: 20px; /* Space between form elements */
    align-items: center;
    width: 100%; /* Ensure the form takes full width to manage its own flex items */
    justify-content: center; /* Center the items within the form */
}

.filter-group-top {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between label and input/select */
}

.filter-group-top label {
    font-weight: bold;
    color: #333;
    white-space: nowrap; /* Prevent labels from wrapping */
}

.news-filters-top select,
.news-filters-top input[type="text"] {
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.95em;
    min-width: 150px; /* Give select elements a minimum width */
}

.filter-group-top.search-group input[type="text"] {
    min-width: 200px; /* Slightly wider for search input */
}

.news-filters-top .apply-filters-button-top {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Prevent button text from wrapping */
}

.news-filters-top .apply-filters-button-top:hover {
    background-color: #0056b3;
}

/* Remove or adjust existing news-filters styles if they conflict */
/* The original .news-filters will no longer be used */
.news-filters {
    display: none; /* Hide the old sidebar filters */
}


/* Existing news-list-section styles - remains largely the same */
.news-list-section {
    flex-grow: 1; /* Ocupa el espacio restante */
}

.news-item-full {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background-color: #fefefe;
}

.news-item-full:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.news-image-container {
    flex: 0 0 300px;
    height: 200px;
    overflow: hidden;
    border-right: 1px solid #e0e0e0;
}

.news-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.news-content-right {
    flex-grow: 1;
    padding: 20px 25px;
    text-align:justify;
}

.news-content-right h3 {
    font-size: 1.8em;
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.2;
}

.news-content-right h4 {
    font-size: 1.2em;
    color: #666;
    margin-top: 0;
    margin-bottom: 15px;
    font-weight: normal;
}

.news-meta {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 15px;
}

.news-excerpt {
    font-size: 1em;
    line-height: 1.6;
    color: #444;
    margin-bottom: 20px;
}

/* Mensajes de error o info */
.error-message, .alert.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
}

/* Estilos para el contenedor del menú del footer */
.footer-nav-container {
    padding: 20px;
    background-color: #343a40; /* Color de fondo del contenedor, no de los ítems */
    text-align: center;
}

/* Estilos para la lista de menú */
.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Para que los elementos se muestren en línea */
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px; /* Espacio entre los elementos */
}

/* Estilos para cada elemento del menú (el <li>) */
.footer-menu-list .footer-menu-item-styled {
    background-color: #ff8c00; /* Fondo naranja */
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

/* Estilos para el enlace dentro del elemento del menú (el <a>) */
.footer-menu-list .footer-menu-item-styled a {
    color: #ffffff; /* Color de texto blanco */
    text-decoration: none;
    font-weight: bold;
}

/* Estilo para el hover */
.footer-menu-list .footer-menu-item-styled:hover {
    background-color: #cc7000; /* Un tono más oscuro al pasar el ratón */
}

/* Estilos junta_directiva */


/* Responsive adjustments */
@media (max-width: 992px) {
    /* news-filters-top adjustments for smaller screens */
    .news-filters-top form {
        flex-direction: column; /* Stack filter groups vertically */
        align-items: stretch; /* Stretch items to fill width */
    }

    .filter-group-top {
        flex-direction: column; /* Stack label and input/select */
        align-items: flex-start; /* Align labels to the left */
        width: 100%;
    }

    .news-filters-top select,
    .news-filters-top input[type="text"] {
        width: 100%; /* Make inputs/selects full width */
        min-width: unset; /* Remove min-width restriction */
    }

    .news-filters-top .apply-filters-button-top {
        width: 100%; /* Make button full width */
    }

    /* Existing news-page-container and news-item-full adjustments */
    .news-page-container {
        flex-direction: column;
        margin: 20px;
        padding: 15px;
    }

    .news-image-container {
        flex: auto;
        width: 100%;
        height: 250px;
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .news-content-right {
        padding: 15px;
        width: 100%;
        text-align: center;
    }

    .news-content-right h3,
    .news-content-right h4,
    .news-meta,
    .news-excerpt {
        text-align: center;
    }
    
}

@media (max-width: 576px) {
    .news-filters-top {
        padding: 10px;
        gap: 10px;
    }

    .news-filters-top select,
    .news-filters-top input[type="text"],
    .news-filters-top .apply-filters-button-top {
        padding: 8px;
        font-size: 0.9em;
    }

    .news-page-container {
        margin: 10px;
        padding: 10px;
    }

    .news-image-container {
        height: 180px;
    }

    .news-content-right h3 {
        font-size: 1.5em;
    }

    .news-content-right h4 {
        font-size: 1em;
    }
}


/* Responsive adjustments */
@media (max-width: 992px) {
    .news-page-container {
        flex-direction: column;
        margin: 20px;
        padding: 15px;
    }

    .news-filters {
        flex: auto; /* Ocupa todo el ancho disponible */
        border-right: none;
        border-bottom: 1px solid #eee;
        margin-bottom: 30px;
    }

    .news-item-full {
        flex-direction: column;
        align-items: center;
    }

    .news-image-container {
        flex: auto;
        width: 100%;
        height: 250px; /* Ajusta la altura para pantallas más pequeñas */
        border-right: none;
        border-bottom: 1px solid #e0e0e0;
    }

    .news-content-right {
        padding: 15px;
        width: 100%;
        text-align: center; /* Centra el texto en móviles */
    }
    
    .news-content-right h3,
    .news-content-right h4,
    .news-meta,
    .news-excerpt {
        text-align: center; /* Asegura que todo el texto esté centrado */
    }

    
	
	
}

@media (max-width: 576px) {
    .news-page-container {
        margin: 10px;
        padding: 10px;
    }

    .news-filters h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    .news-filters select,
    .news-filters input[type="text"],
    .news-filters .search-button {
        padding: 8px;
        font-size: 0.9em;
    }

    .news-image-container {
        height: 180px; /* Más pequeño para móviles muy estrechos */
    }

    .news-content-right h3 {
        font-size: 1.5em;
    }

    .news-content-right h4 {
        font-size: 1em;
    }
}

/* Estilos generales para el contenedor de la página de álbumes */
.albums-page-container {
    padding: 20px;
    max-width: 1200px; /* Ancho máximo del contenedor */
    margin: 0 auto; /* Centrar el contenedor */
}

/* Estilos para el contenedor del grid de álbumes */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Columnas responsivas */
    gap: 25px; /* Espacio entre las tarjetas */
    padding: 20px 0;
}

/* Estilos para cada tarjeta de álbum */
.album-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease-in-out;
}

.album-card:hover {
    transform: translateY(-5px); /* Efecto al pasar el ratón */
}

.album-card-header {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid #0056b3;
}

.album-card-header h3 {
    margin: 0;
    font-size: 1.3em;
}

.album-card-body {
    padding: 15px;
    flex-grow: 1; /* Permite que el cuerpo ocupe el espacio restante */
}

.album-card-body p {
    margin-bottom: 8px;
    font-size: 0.95em;
    color: #333;
    line-height: 1.4;
}

.album-card-body p strong {
    color: #007bff; /* Color para los títulos de la información */
}

.album-card-footer {
    padding: 15px;
    text-align: center;
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
}

.view-album-button {
    display: inline-block;
/*  background-color: #28a745; */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
	margin-right: 10px; /* Espacio entre botones */
}

.view-album-button:hover {
    background-color: #218838;
}

.read-more-button,
.download-pdf-button {
    display: inline-block;
    background-color: #28a745; 
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
    margin-right: 10px; /* Espacio entre botones */
}


.read-more-button:hover {
    background-color: #218838;
}

.download-pdf-button:hover {
    background-color: #218838;
}

/* Estilos para el filtro superior */
.albums-filters-top {
    display: flex;
    justify-content: center; /* Alinea el formulario a la derecha */
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 8px;
    gap: 15px; /* Espacio entre los elementos del filtro */
    align-items: center;
}

.albums-filters-top form {
    display: flex;
    gap: 15px;
    align-items: center;
}

.albums-filters-top label {
    font-weight: bold;
    color: #555;
}

.albums-filters-top select,
.albums-filters-top .apply-filters-button-top {
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1em;
}

.albums-filters-top .apply-filters-button-top {
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s;
}

.albums-filters-top .apply-filters-button-top:hover {
    background-color: #0056b3;
}

/* Mensajes de error o no encontrado */
.error-message,
.albums-page-container > p {
    text-align: center;
    padding: 20px;
    background-color: #ffe0e0;
    border: 1px solid #f00;
    color: #f00;
    border-radius: 5px;
    margin-top: 20px;
}

/* Estilos para el contenedor de la página de ver álbum */
.album-details-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.album-title {
    color: #333;
    font-size: 2em;
    text-align: center;
    margin-bottom: 10px;
}

.album-meta {
    text-align: center;
    color: #666;
    font-size: 0.9em;
    margin-bottom: 20px;
}

.album-meta span {
    margin: 0 10px;
    font-weight: bold;
}

/* Estilos para el contenedor de la cuadrícula de fotos */
.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
    padding: 10px 0;
}

/* Estilos para cada elemento de foto en la cuadrícula */
.photo-item {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.photo-item:hover {
    transform: scale(1.02);
}

.photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

.photo-description {
    background-color: #f0f0f0;
    padding: 10px;
    text-align: center;
    font-size: 0.8em;
    color: #555;
    border-top: 1px solid #eee;
}

/* Estilos para el Modal  al abrir una foto*/
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Mantiene la posición fija en la pantalla */
    z-index: 1000; /* Alto z-index para que esté por encima de todo */
    padding-top: 60px; /* Un poco de espacio desde la parte superior */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita el scroll si la imagen es muy grande */
    background-color: rgb(0,0,0); /* Color de fondo */
    background-color: rgba(0,0,0,0.9); /* Negro con opacidad */
}

/* Contenido del Modal (la imagen) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
    animation-name: zoom;
    animation-duration: 0.6s;
}

/* Leyenda del Modal */
#modal-caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 800px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
}

/* Botón de cerrar */
.modal-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Animación de acercamiento */
@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* Media Queries para pantallas más pequeñas */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

/* Estilos para pagina documentos.php */
/* Estilos generales para la sección de documentos */
.page-title-section {
    padding: 20px;
    background-color: #f4f4f4;
    text-align: center;
    border-bottom: 2px solid #ddd;
}

.page-title-section h1 {
    margin: 0;
    color: #333;
    font-size: 2.5em;
}

/* Estilos para el contenedor de filtros */
.filters-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filters-container label {
    font-weight: bold;
    color: #555;
}

.filters-container select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
}

/* Estilos para la lista de documentos */
.documents-list-container {
    display: grid;
    gap: 20px;
    padding: 20px;
}

.document-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-left: 5px solid #007bff; /* Borde de color para destacar */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
	text-align:center;
}

.document-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.document-item h3.document-title {
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.5em;
}

.document-item p.document-description {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.document-item .document-meta {
    font-size: 0.9em;
    color: #888;
    margin-top: auto; /* Empuja el meta al final */
    margin-bottom: 10px;
}

.document-download-link {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
}

.document-download-link:hover {
    background-color: #0056b3;
}

/* Responsive design para la lista de documentos */
@media (min-width: 768px) {
    .documents-list-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .documents-list-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Hamburger Menu */
.hamburger-menu {
    display: none; /* Se mantiene oculto por defecto */
    position: absolute;
    top: 10px; /* Mantenemos el margen superior */
    right: 1%; /* 👈 PASO 1: Mueve el inicio del elemento al centro del contenedor */
    /*transform: translateX(-50%); /* 👈 PASO 2: Desplaza el elemento a la izquierda la mitad de su propio ancho */
    z-index: 1050;
    cursor: pointer;
    padding: 10px;
   /* background-color: rgba(255, 255, 255, 0.7); */
    border-radius: 5px;
    border: none;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
 /* Centrado vertical y horizontal perfecto */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    /* Estilos de la barra central */
    width: 100%;
    height: 3px;
    background-color: #333; /* O el color que prefieras */
    transition: transform 0.3s ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;

    /* Posición relativa a la barra central */
    position: absolute;
    left: 0;

    /* Estilos de las barras superior e inferior */
    width: 100%;
    height: 100%; /* Hereda el grosor de .hamburger-inner */
    background-color: inherit; /* Hereda el color de .hamburger-inner */
}

.hamburger-inner {
    top: 50%;
    /*transform: translateY(-50%); */
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;
}

.hamburger-inner::before {
    top: -10px;
}

.hamburger-inner::after {
    bottom: -10px;
}

/* Mobile Nav */
.mobile-nav {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: auto;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
    z-index: 99;
    padding-top: 60px;
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mobile-nav ul li {
    width: 100%;
    text-align: center;
}

.mobile-nav ul li a {
    display: block;
    padding: 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

.mobile-nav.is-active {
    display: block;
}

/* Media Queries para diseño responsive en dispositivos pequeños */
@media (max-width: 768px) {	
	.main-nav-header-top {
        display: none;
    }

    .hamburger-menu {
        display: block;
    }
}

.temporada-separator-heading {
    /* Asegura que el separador ocupe todo el ancho */
    grid-column: 1 / -1; 
    width: 100%;
    margin: 5px 0 5px 0; /* Espaciado */
    padding: 5px;
    background-color: #f0f0f0; /* Color de fondo suave */
    border-bottom: 2px solid #ccc; /* Línea de separación */
    text-align: center;
}