/* Estilo general */
.fondo_slider {
  font-family: Arial, sans-serif; /* Define la fuente del texto */
  margin: 0; /* Elimina el margen predeterminado del navegador */
  padding: 0; /* Elimina el padding predeterminado del navegador */
  display: flex; /* Usa un diseño flexbox para centrar el contenido */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  min-height: 100vh; /* Asegura que el cuerpo ocupe al menos el alto de la ventana */
  background-color: #f3f3f3; /* Color de fondo gris claro */
}

.container {
  width: 100%; /* Ocupa el 90% del ancho disponible */
  max-width: 800px; /* Ancho máximo de 800px */
  background:  rgba(255, 255, 255, 0); /* Fondo blanco */
  border-radius: 8px; /* Esquinas redondeadas */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  overflow: hidden; /* Oculta contenido que excede el contenedor */
}

/* Pestañas */
.mistabs {
  display: flex; /* Distribuye las pestañas en un solo contenedor horizontal */
  background: #6D001A; /* Fondo rojo oscuro */
  list-style: none; /* Elimina los marcadores de lista predeterminados */
  margin: 0; /* Elimina márgenes */
  padding: 0; /* Elimina padding */
  border-radius: 8px; /* Esquinas redondeadas */
  overflow-x: auto; /* Permite desplazamiento horizontal si es necesario */
  justify-content: space-between; /* Distribuye las pestañas uniformemente */
  text-align: center; /* Centra el texto de cada pestaña */
}

/* Marcar la pestaña seleccionada */
.mitab.active {
  border-radius: 8px; /* Esquinas redondeadas */
  background-color: #FFb81C; /* Fondo amarillo para la pestaña activa */
  color: #6D001A; /* Texto rojo oscuro para la pestaña activa */
}

.mitab {
  flex-grow: 1; /* Hace que las pestañas crezcan proporcionalmente */
  padding: 10px; /* Espaciado interno */
  cursor: pointer; /* Cambia el cursor al pasar por encima */
  color: white; /* Texto blanco */
  font-weight: bold; /* Texto en negrita */
  text-align: center; /* Centra el texto */
  white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

.mitab::before {
  content: ""; /* Inicialmente no contiene texto */
}

/* Mostrar nombres completos en pantallas grandes */
@media (min-width: 615px) {
  .mitab {
    font-size: 16px; /* Tamaño de fuente más grande */
  }
  .mistabs .mitab[data-day="lunes"]:before { content: "Lunes"; }
  .mistabs .mitab[data-day="martes"]:before { content: "Martes"; }
  .mistabs .mitab[data-day="miercoles"]:before { content: "Miércoles"; }
  .mistabs .mitab[data-day="jueves"]:before { content: "Jueves"; }
  .mistabs .mitab[data-day="viernes"]:before { content: "Viernes"; }
  .mistabs .mitab[data-day="sabado"]:before { content: "Sábado"; }
  .mistabs .mitab[data-day="domingo"]:before { content: "Domingo"; }
}

/* Mostrar iniciales en pantallas pequeñas */
@media (max-width: 614px) {
  .mitab {
    font-size: 12px; /* Tamaño de fuente más pequeño */
  }
  .mistabs .mitab[data-day="lunes"]:before { content: "L"; }
  .mistabs .mitab[data-day="martes"]:before { content: "M"; }
  .mistabs .mitab[data-day="miercoles"]:before { content: "M"; }
  .mistabs .mitab[data-day="jueves"]:before { content: "J"; }
  .mistabs .mitab[data-day="viernes"]:before { content: "V"; }
  .mistabs .mitab[data-day="sabado"]:before { content: "S"; }
  .mistabs .mitab[data-day="domingo"]:before { content: "D"; }

  .slider {
    height: 250px; /* Reducir la altura del slider */
  }

  .slide img {
    object-fit: cover; /* Ajusta las imágenes para llenar sin distorsión */
  }
}

/* Contenedor del slider */
.sliders {
  position: relative; /* Posiciona los botones de navegación dentro del contenedor */
  overflow: hidden; /* Oculta las partes de los sliders fuera del contenedor */
  height: 343px; /* Altura fija del slider */
}

/* Slider */
.slider {
  display: flex; /* Coloca las diapositivas una al lado de la otra */
  transition: transform 1s ease; /* Animación para mover los sliders */
  width: 100%; /* Asegura que ocupe el ancho completo del contenedor */
}

.hidden {
  display: none; /* Oculta el slider no activo */
} 

/* Cada diapositiva */
.slide {
  flex: 0 0 100%; /* Cada diapositiva ocupa el 100% del ancho del slider */
}

.slide img {
  width: 100%; /* Imagen ocupa todo el ancho */
  height: auto; /* Mantiene la proporción original */
  display: block; /* Evita espacios no deseados en imágenes inline */
  border-radius: 8px; /* Bordes redondeados */
}

/* Botones de navegación */
.nav-btn {
  position: absolute; /* Posiciona los botones sobre el slider */
  top: 40%; /* Centra verticalmente */
  transform: translateY(-50%); /* Ajusta la posición vertical */
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente negro */
  color: white; /* Color del ícono o texto */
  border: none; /* Sin borde */
  border-radius: 50%; /* Forma circular */
  width: 40px; /* Ancho fijo */
  height: 40px; /* Altura fija */
  cursor: pointer; /* Cambia el cursor a una mano */
  z-index: 10; /* Asegura que los botones estén por encima del slider */
}

.nav-btn.prev {
  left: 10px; /* Botón izquierdo */
}

.nav-btn.next {
  right: 10px; /* Botón derecho */
}

.image-container {
  position: relative;
  width: 100%;
  height: auto;
}

.image-container img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px; /* Mantiene el diseño coherente con las imágenes */
}
.prog-description {
  position: absolute; /* Posiciona el texto dentro del contenedor */
  top: 70%; /* Centra verticalmente */
  left: 20%; /* Centra horizontalmente */
  transform: translate(-50%, -50%); /* Ajusta para centrar con precisión */
  background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente negro */
  color: white; /* Texto blanco */
  font-size: 1.2em; /* Tamaño del texto */
  font-weight: bold; /* Negrita para resaltar */
  padding: 10px; /* Espaciado interno para mayor legibilidad */
  text-align: left; /* Centra el texto */
  border-radius: 8px; /* Bordes redondeados */
  pointer-events: none; /* Evita que el texto interfiera con el clic del enlace */
}
.desktop-image {
  display: block; /* Muestra la imagen de escritorio por defecto */
}

.mobile-image {
  display: none; /* Oculta la imagen móvil por defecto */
}

@media (max-width: 600px) {
  .desktop-image {
    display: none; /* Oculta la imagen de escritorio en pantallas pequeñas */
  }

  .mobile-image {
    display: block; /* Muestra la imagen móvil en pantallas pequeñas */
  }
  .prog-description {
    position: absolute; /* Posiciona el texto dentro del contenedor */
    top: 60%; /* Centra verticalmente */
    left: 50%; /* Centra horizontalmente */
    transform: translate(-50%, -50%); /* Ajusta para centrar con precisión */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente negro */
    color: white; /* Texto blanco */
    font-size: 1em; /* Tamaño del texto */
    font-weight: bold; /* Negrita para resaltar */
    padding: 10px; /* Espaciado interno para mayor legibilidad */
    text-align: center; /* Centra el texto */
    border-radius: 8px; /* Bordes redondeados */
    pointer-events: none; /* Evita que el texto interfiera con el clic del enlace */
    max-width: 100%;
  }
}