.container {
			max-width: 950px !important;
		}
.img-full-width {
	max-width: 600px;
    width: 70%;
    height: auto;
	margin: 0; 
	padding: 0;
}
.btn-rounded {
	border-radius: 30px;
	gap: 10px;
	padding: 10px 20px;
	font-size: 16px;
}
body {
	min-height: 100vh; /* 100vh significa el 100% de la altura de la ventana */
	display: flex;
	flex-direction: column;
	background-color: #f2f3f8;
	/*background: linear-gradient(to bottom, #56a4bb, #6fb3d2);*/
}
main.container {
		background-color: #ffffff; /* Esto hace que el fondo del contenido sea blanco */
	}

main { /* O el contenedor principal de tu contenido */
	flex: 1; /* Esto permite que el contenido principal se expanda para llenar el espacio disponible */
}
	
/* Estilo para la línea divisoria (Versión corregida) */
.evento-divider{
  height: 3px;
  background: #000;
  margin: 40px auto;
  max-width: 800px;
}

@media (max-width: 767px) {
	/* Evitar que el icono de idiomas y usuario se colapsen en dispositivos pequeños */
		.navbar-nav {
			justify-content: flex-start; /* Los íconos se alinean a la izquierda */
		}
	}

.boton-evento {
    margin-top: 20px !important;
}

h2.fw-bold{
  margin-bottom: 18px; /* prueba 12–24px */
}



/* Espacio solo en los eventos que vienen después de una línea */
.evento-divider + .row.bg-white {
    padding-top: 20px;
}

/* Asegúrate de que los elementos de la barra de navegación no se muevan */


/* Elimina el espacio entre el header y el banner */
.container.p-0, .container-fluid.p-0 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Evita que la imagen guarde espacio debajo (el famoso gap de 4px) */
section.container.p-0 img {
    display: block;
    vertical-align: middle;
}


.navbar-nav {
	display: flex;
	flex-direction: row; /* Mantén los elementos alineados horizontalmente */
	align-items: center; /* Centra verticalmente los elementos */
	gap: 0px; /* Un pequeño espacio entre los íconos */
}
.navbar-nav .nav-item {
	display: flex;
	align-items: center; /* Centra los elementos verticalmente */
	margin-left: 0; /* Ajusta la separación entre los íconos */
}
.navbar {
    position: relative; /* Asegura que el menú se posicione relativo a la barra de navegación */
}

.navbar-nav .nav-item.dropdown {
    position: static; /* Evita que el li afecte el posicionamiento del menu */
}

.navbar-nav .nav-item.dropdown .dropdown-menu {
    position: absolute; /* Posicionamiento absoluto */
    top: 100%;       /* Coloca el menú debajo de la barra de navegación */
    left: auto;      /* Permite que se ajuste automáticamente */
    right: 0;        /* Alinea el menú a la derecha de la barra de navegación (o ajusta según necesites) */
    z-index: 1000;    /* Asegura que esté por encima de otros elementos */
    width: auto;
    /* Otras propiedades de estilo que ya tenías (border, shadow, etc.) */
}




/* Menú hamburguesa */
.navbar-toggler {
    border: none; /* Elimina el borde */
    outline: none; /* Elimina el contorno (opcional, pero recomendado) */
	margin-left: 0; /* Elimina el margen izquierdo */
    padding-left: 0; /* Elimina el padding izquierdo, si lo hubiera */
	position: relative; /* Añadimos posicionamiento relativo al botón */
}
.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none; /* Elimina el contorno */
    box-shadow: none; /* Elimina la sombra */
    border: none; /* Elimina el borde */
    background-color: transparent; /* Hace el fondo transparente */
}
/* Estilos generales del menú desplegable */
#navbarNav {
    background-color: #ffffff; /* Color de fondo blanco */
    border: 1px solid #ced4da; /* Borde gris claro */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Sombra suave */
    padding: 0.5rem; /* Espacio interno */
	width: auto; /* Ajusta el ancho al contenido */
    min-width: 200px; /* Ancho mínimo para evitar que sea demasiado estrecho (opcional) */
	max-width: 100%;   /* Utiliza el 100% del ancho disponible */
	position: absolute; /* Posicionamiento absoluto */
    top: 100%; /* Posiciona el menú debajo del botón */
    left: 0; /* Alinea el menú con el borde izquierdo del botón */
	z-index: 1000; /* Asegura que el menú se muestre encima de otros elementos */
}
#navbarNav ul.navbar-nav {
    flex-direction: column; /* Cambia la dirección de flex a columna */
    align-items: flex-start; /* Alinea los elementos a la izquierda */
}
/* Estilo de cada sección dentro del menú */
.menu-section {
    padding: 5px 0; /* Espaciado interno */
}
/* Línea divisoria entre secciones */
.menu-divider {
    border: none; /* Elimina el borde por defecto */
    height: 1px; /* Grosor de la línea */
    background-color: #7e7e7e; /* Color de la línea */
    margin: 5px 0; /* Espaciado */
}
/* Asegurar que cada enlace ocupe todo el ancho */
#navbarNav .nav-link {
    display: block;
    padding: 8px 10px;
    text-align: left;
    transition: background-color 0.3s ease, color 0.3s ease;
	width: 100%;          /* Hace que cada enlace ocupe todo el ancho disponible */
}

.dropdown-menu .dropdown-item:hover {
    background-color: #01405e !important; /* El nuevo azul oscuro */
    color: white !important;
}




/* Asegúrate de que el dropdown se mantenga en el flujo de la página y no afecte a los demás elementos */
.nav-item.dropdown {
	position: relative;
}



/* Asegúrate de que el icono y el texto del idioma se alineen correctamente */
#languageDropdown i {
	margin-right: 0px; /* Un pequeño margen entre el icono y el texto */
}
/* Color uniforme para los íconos en la barra de navegación */
#languageDropdown i, .navbar-nav .nav-item i {
    color: #ffffff !important; /* Ahora en blanco para destacar sobre el fondo #01405e */
}
/* Forzar el menú hamburguesa a blanco puro */
.navbar-toggler-icon {
    filter: brightness(0) invert(1) !important;
}
/* Estilo del dropdown */
#languageDropdown {
	padding: 0px 0px;
	border-radius: 10px;
	transition: background-color 0.3s ease;
}
.dropdown-menu {
	min-width: 40px; /* Ajusta el ancho */
	border-radius: 0px;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	padding: 5px 5px;
}
.dropdown-menu .dropdown-item {
	padding: 8px 18px;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Efecto hover para el menú hamburguesa: fondo azul nuevo y texto blanco */
#navbarNav .nav-link:hover {
    background-color: #01405e !important; /* El nuevo azul oscuro */
    color: white !important;
}

.label-warning {
	background-color: #fff;
}
.label-success {
	background-color: #5cb85c;
}
.label-info {
	background-color: #5bc0de;
	border-radius: 30px !important; /* !important asegura que este estilo tenga prioridad */
}
.label {
    display: inline;
	padding: .2em .6em .3em;
	font-size: 75%;
	font-weight: 600;
	line-height: 1;
	color: #000000;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 0em;
}

.video-container {
    width: 100%; /* Ocupa todo el ancho del contenedor padre */
    position: relative; /* Necesario para el posicionamiento absoluto del video */
    padding-top: 56.25%; /* Aspect ratio 16:9 (9 / 16 * 100) */
    overflow: hidden; /* Evita que el video se salga del contenedor */
}

.video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
}
.aviso-entradas {
    text-align: center; /* Centrar horizontalmente el texto */
    margin-bottom: 0px; /* Espacio debajo del aviso */
    margin-top: 18px;
	font-size: 1em; /* Ejemplo: tamaño de fuente 1.2 veces el tamaño base */
}
.aviso-entradas p {
    background-color: #cfdce2;
	max-width: 86%;
    margin: 0 auto; /* Aquí sí está bien porque centra el párrafo amarillo dentro de su contenedor */
    padding: 8px 15px; 
}
/* --- ADAPTACIÓN PARA MÓVILES (Pantallas pequeñas) --- */
@media (max-width: 768px) {
    .aviso-entradas p {
        max-width: 100%;       /* En el móvil, la caja amarilla ocupa todo el ancho */
    }
}
footer .text-muted {
  font-size: 15px; /* Tamaño de fuente en píxeles */
}

/* Cambiar el color de fondo de los botones con clase btn-primary */
.btn-primary {
    background-color: #01405e !important; 
    border-color: #01405e !important; 	
}
.btn-primary:hover {
    background-color: #001b2e !important; /* Tono más oscuro al pasar el ratón */
    border-color: #001b2e !important;
}


#logo_img {
    max-width: 240px;
}
/* Se a pantalla é máis pequena de 600px, reduce aínda máis o tamaño */
@media (max-width: 600px) {
    #logo_img {
        max-width: 170px;
    }
}


/* Para que el fondo del botón registrarse no cambie de color al pasar el ratón por encima de él */
a.dropdown-item[href*="rexistro.php"]:hover {
    background-color: transparent !important;
}



/* Banner: por defecto (móvil) se ve completo */
.banner-hero {
  background: white;
}

.banner-hero-img {
  width: 100%;
  height: auto;
  display: block;
}

/* En escritorio: recorte panorámico */
@media (min-width: 992px) {
  .banner-hero {
    height: 290px;        /* ajusta: 280-420px según te guste */
    overflow: hidden;     /* recorta lo que sobra */
  }

  .banner-hero-img {
    height: 100%;
    width: 100%;
    object-fit: cover;    /* mantiene proporción sin deformar */
    object-position: center; /* qué parte se ve (puedes cambiarlo) */
  }
}


/* Espaciado del contenedor principal de eventos */
.contenedor-eventos {
    padding-bottom: 30px; 
    padding-top: 15px; /* Espacio reducido para móvil */
}

/* En pantallas medianas y grandes (escritorio) aumentamos el espacio */
@media (min-width: 768px) {
    .contenedor-eventos {
        padding-bottom: 40px;
        padding-top: 40px; /* Espacio amplio original para escritorio */
    }
}

/* --- Botón específico para Lista de Agarda --- */
.btn-agarda {
    background-color: #ffffff !important;
    border-color: #000000 !important;
    color: #000000 !important;
	border-style: solid !important; /* Aseguramos que se pinte el borde */
    border-width: 1px !important;
}
.btn-agarda:hover {
    background-color: #000000 !important; 
    border-color: #000000 !important;
    color: #ffffff !important;
}