/* Estilos del carrusel de promociones (ver public/js/promos.js).
   Va en un archivo propio porque lo necesitan tanto el template como la pantalla
   de login, y login.html no carga styles.css. */

/* ---------- Recuadro de la imagen ----------
   En desktop las piezas son banners apaisados y todas del mismo alto, así que
   se usa un alto fijo: cualquier imagen de otra proporción queda contenida
   (object-fit: contain) sin cambiar el alto del carrusel ni empujar lo de abajo. */
.promo-carousel-caja {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
}

.promo-carousel-caja img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: .5rem;
}

/* En celular las piezas son verticales o cuadradas y de proporciones variadas:
   con alto fijo quedaban bandas vacías enormes arriba y abajo. Acá manda la
   imagen y solo se le pone un techo para que una muy alta no tape todo. */
@media only screen and (max-width: 767px) {
  .promo-carousel-caja {
    height: auto;
  }

  .promo-carousel-caja img {
    position: static;
    display: block;
    margin: 0 auto;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 70vh;
  }
}

/* ---------- Indicadores (pelotitas) ----------
   Van debajo de la imagen y en el rojo de marca del sitio. */
.promo-carousel .carousel-indicators {
  position: relative;
  margin: .6rem 0 0 0;
  left: 0;
  right: 0;
}

.promo-carousel .carousel-indicators li {
  background-color: rgba(249, 28, 20, .35); /* #f91c14, rojo de marca */
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin: 0 4px;
}

.promo-carousel .carousel-indicators li.active {
  background-color: #f91c14;
}

/* ---------- Ancho acotado ----------
   Solo donde se pide (/promociones). La home va a lo ancho del contenedor. */
.promo-carousel-angosto {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Popup de ofertas del login ----------
   SweetAlert trae bastante padding propio; en el celular se lo achicamos para
   que la imagen aproveche el ancho de la pantalla. */
.promo-popup .swal2-html-container {
  margin: 0;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  .promo-popup {
    padding: .75rem !important;
  }

  .promo-popup .swal2-title {
    padding: 0 0 .5rem 0;
    font-size: 1.4rem;
  }

  /* Dentro del popup el techo es más bajo: hay que dejar lugar al título,
     al botón de OK y al padding del propio SweetAlert. */
  .promo-popup .promo-carousel-caja img {
    max-height: 62vh;
  }
}