/* Estilos Base: Aseguran que la página ocupe toda la altura del viewport */
html,
body {
  height: 100%; /* Permite que el cuerpo ocupe toda la altura de la ventana */
  margin: 0;
  padding: 0;
  overflow: hidden; /* Oculta el scroll si el contenido se desborda ligeramente */
}

/* Estilos para el Carrusel General (Desktop First) */
#heroCarousel {
  position: relative;
  width: 100vw; /* Ocupa el 100% del ancho del viewport */
  height: 100vh; /* Ocupa el 100% de la altura del viewport (pantalla completa) */
  overflow: hidden; /* Asegura que las imágenes no desborden el contenedor */
}

#heroCarousel .carousel-inner {
  width: 100%;
  height: 100%; /* El contenedor interno del carrusel también ocupa toda la altura */
}

#heroCarousel .carousel-item {
  width: 100%;
  height: 100%; /* Cada slide individual ocupa el 100% del carrusel */
  position: relative; /* Necesario para posicionar elementos internos (como captions) */
  overflow: hidden;
  background-color: #000; /* Fondo negro por defecto para todos los slides */

  /* Centrado de la imagen dentro del slide (para desktop si la imagen no llena todo con 'contain') */
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
}

#heroCarousel .carousel-item img {
  /* Ajusta la imagen para que cubra todo el slide sin distorsionar en desktop.
       En móvil, 'object-fit' cambiará a 'contain' via media query. */
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-width: 100%; /* Asegura que la imagen no se desborde horizontalmente */
  max-height: 100%; /* Asegura que la imagen no se desborde verticalmente */
}

/* Estilos para el texto de la caption (texto sobre la imagen del carrusel) */
#heroCarousel .carousel-caption {
  position: absolute; /* Permite que la caption flote sobre la imagen */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Fondo semitransparente para el texto */
  display: flex; /* Para centrar el contenido del caption */
  flex-direction: column;
  justify-content: center; /* Centra verticalmente el contenido del caption */
  align-items: center; /* Centra horizontalmente el contenido del caption */
  text-align: center;
  color: white;
  padding: 20px;
  z-index: 1; /* Asegura que la caption esté encima de la imagen */
}

#heroCarousel .carousel-caption h1 {
  font-size: 4rem; /* Tamaño de fuente grande para el título */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor legibilidad */
}

#heroCarousel .carousel-caption p {
  font-size: 1.5rem; /* Tamaño de fuente para el párrafo */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Posicionamiento y estilos para el botón flotante de "Iniciar Sesión" (Desktop) */
.btn-login-float {
  position: fixed; /* Fijo en la pantalla, no se desplaza con el scroll */
  top: 20px; /* 20px desde la parte superior */
  right: 20px; /* 20px desde la derecha */
  z-index: 1050; /* Asegura que esté por encima del carrusel y el modal */
  padding: 10px 20px;
  border-radius: 5px; /* Botón redondeado */
  font-size: 1.1rem;
  transition: all 0.3s ease; /* Transición suave para hover */
}

.btn:hover {
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada en hover */
}

/* Estilos para el Modal de Inicio de Sesión */
#loginModal .modal-content {
  border-radius: 10px;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
}

#loginModal .modal-header {
  border-bottom: none; /* Eliminar la línea divisoria del header */
  padding-bottom: 0;
}

#loginModal .modal-body {
  padding-top: 0;
}

/* --- MEDIA QUERIES para la Responsividad (Mobile First - aplicando overrides) --- */

/* Ajustes para tablets y pantallas medianas (hasta 992px) */
@media (max-width: 992px) {
  #heroCarousel .carousel-caption h1 {
    font-size: 3rem;
  }
  #heroCarousel .carousel-caption p {
    font-size: 1.2rem;
  }
}

/* Ajustes para móviles y tablets pequeñas (hasta 768px) */
@media (max-width: 768px) {
  #heroCarousel .carousel-caption h1 {
    font-size: 2.5rem;
  }
  #heroCarousel .carousel-caption p {
    font-size: 1rem;
  }
  #heroCarousel .carousel-caption {
    padding: 10px; /* Reducir padding de la caption en móviles */
  }
  .carousel-indicators {
    display: none; /* Ocultar los indicadores del carrusel */
  }

  /* Centrar el botón de inicio de sesión en móviles */
  .btn-login-float {
    right: 2px;
    /*right: auto; */ /* Desactiva la alineación a la derecha */
    /* left: 50%;*/ /* Mueve el inicio al 50% */
    /*transform: translateX(-50%);*/ /* Centra el botón sobre su propio eje X */
    top: 1px; /* Mantenerlo en la parte superior */

    /* Ajustes de tamaño y padding para el botón en móvil */
    padding: 8px 15px;
    font-size: 1rem;
  }

  /* REGLAS CRÍTICAS PARA CENTRAR IMAGEN EN MÓVIL CON FONDO NEGRO */
  #heroCarousel .carousel-item {
    /* Ya tienen display: flex; justify-content: center; align-items: center; del estilo general,
           pero las repetimos con !important para forzar si hay conflictos de especificidad.
           Retira los !important una vez que funcione y hayas limpiado conflictos. */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: #000 !important; /* Asegura el fondo negro */
  }

  #heroCarousel .carousel-item img {
    object-fit: contain !important; /* La imagen se ajusta sin recortarse */
    max-width: 100% !important; /* Asegura que no se desborde horizontalmente */
    max-height: 100% !important; /* Asegura que no se desborde verticalmente */
  }
}

/* Ajustes específicos para móviles muy pequeños (hasta 576px) */
@media (max-width: 576px) {
  #heroCarousel .carousel-caption h1 {
    font-size: 2rem;
  }
  #heroCarousel .carousel-caption p {
    font-size: 0.9rem;
  }

  /* Ocultar los controles de navegación del carrusel en móviles */
  .carousel-control-prev,
  .carousel-control-next {
    display: none;
  }
}