/* =============================================================================
Image Zoom JS v0.0.1 | MIT License | https://github.com/alecrios/image-zoom-js
============================================================================= */

[data-zoom-backdrop] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 900;
	background-color: rgba(255, 255, 255, 1);
	opacity: 0;
	transition: opacity 400ms ease;
	pointer-events: none;
}

[data-zoom-backdrop='active'] {
	opacity: 1;
	pointer-events: auto;
}

[data-zoom-image] {
	position: relative;
	z-index: 800;
	transform: none;
	transition: transform 400ms ease;
	cursor: zoom-in;
}

[data-zoom-image='active'] {
	z-index: 1000;
	cursor: zoom-out;
}

div[style*="width: 191.25px"] {
    width: 15rem !important;
}

.ui-datepicker-unselectable.ui-state-disabled {
    text-decoration: line-through;
    color: red !important;
}

/* Estilo del contenedor del Swiper */
.swiper-container {
    width: 100%;
    height: 100%; /* Ajustar la altura máxima del carrusel */
    transition: opacity 0.3s ease-in-out !important;
  
  }

  .swiper-slide {
    border-radius: 1rem !important; /* Ajusta el valor para redondear más o menos */
    overflow: hidden !important;  /* Asegúrate de que las esquinas no sobresalgan */
}

    
  .swiper-wrapper{
    position: relative;
    width: 100%;
    /*height: 90%;*/
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box;
  }


  .line-clamp-10 {
    display: -webkit-box;
    -webkit-line-clamp: 10; /* Número máximo de líneas visibles */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Añade "..." si el texto es más largo */
}

/*.hyphenated-text {
    hyphens: auto; 
    overflow-wrap: break-word; 
    word-wrap: break-word;
}*/
.hyphenated-text {
    word-wrap: break-word; /* Ajusta automáticamente las palabras largas */
    overflow-wrap: break-word; /* Compatibilidad adicional */
    word-break: break-word; /* Opcional: fuerza el ajuste de palabras */
    white-space: normal; /* Permite que el texto fluya a nuevas líneas */
    hyphens: auto; /* Divide palabras automáticamente con guiones */
}

  /* Estilo del contenedor del Swiper */
#carousel-container {
    position: relative;
    width: 100%;
    height: 100%; /* Ajustar la altura máxima del carrusel */
    overflow: hidden; /* Ocultar cualquier desbordamiento */
    }

    section {
         display: unset; 
         grid-template-columns: unset; 
         place-items: unset; 
         gap: unset; 
         min-height: unset; 
         padding: unset; 
    }

    /* Estilo base para los spans de "tiene-envio" */
    .tiene-envio {
        display: inline-block;        /* Asegura que actúen como bloques en línea */
        margin: 0.5rem 0;             /* Margen superior/inferior */
    }

    @media (max-width: 768px) {
        .swiper-button-prev-custom, .swiper-button-next-custom {
            width: 30px;
            height: 30px;
            z-index: 30;
        }
    }        

@media (max-width: 1024px) {
    #indicators-carousel {
        display: block; /* Asegura que el carrusel sea visible */
    }

    .lg\\:col-span-2 {
        width: 100%; /* Asegúrate de que ocupe el ancho completo */
        margin: 0; /* Elimina margen para pantallas pequeñas */
    }

    /* Opcional: ajustar la altura del carrusel en pantallas pequeñas */
    .relative.h-56 {
        height: auto; /* Asegura que el carrusel se ajuste a su contenido */
    }

    /*.rounded-lg {
        border-radius: 1rem !important; 
		overflow: hidden;
    }*/

    /* Ajustes adicionales para mejorar la visibilidad del carrusel */
    img {
        max-height: 24rem; /* Ajusta el tamaño máximo de las imágenes */
        object-fit: cover; /* Mantiene la proporción de la imagen */
    }
}


/* Ajustes para pantallas pequeñas y más grandes */
@media (max-width: 640px) {
    /* Contenedor para campos de fecha */
    .flex.items-center.grid {
        display: flex;
        justify-content: space-between; /* Espacio uniforme entre los campos */
        flex-wrap: nowrap; /* Mantiene los campos en una sola fila */
        gap: 1rem; /* Espacio entre los campos */
    }
	/*.start-time{
		width: 17.6rem;
	}

	.end-time{
		width: 17.7rem;
		margin-left: 10rem;
	}*/

}

@media (min-width: 768px) and (max-width: 1024px) {

    .object-contain-swiper {
        height: 30rem !important;
    }
    .px-32 {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .card .swiper-slide{
        width: 10rem !important;
      }
      
}


@media (min-width: 1025px) and (max-width: 1279px) {
    .swiper-slide.imagenes {
        min-width: 18rem !important;
    }
}

@media (max-width: 767px) {

    .object-contain-swiper {
        height: 25rem !important;
    }
    .px-32 {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 95%;
        display: flex;
        transition-property: transform;
        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
        box-sizing: content-box;
    }
    .swiper-pagination-main{
        text-align: center;
    }
    #carousel-container .relative {
        height: 20rem; /* Fijar la altura */
        overflow: hidden; /* Evitar desbordes */
        position: relative;
    }
    .stat-value{
        font-size: 14px;
    }
}


/*@media screen and (min-width:700px) and (max-width: 1024px) {


    .flex-1{
        padding-left: 6.2rem;
    }

}*/


.card {
    max-width: 100% !important;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}