/**
 * Properties Carousel Component - Shared Styles
 * 
 * Componente reutilizable de carousel de propiedades con estilos encapsulados.
 * Usa un contenedor con scope (.properties-carousel-container) para evitar
 * conflictos con otros estilos globales.
 * 
 * Uso:
 *   <div id="carousel-container"></div>
 *   
 *   const carousel = new PropertiesCarouselComponent(app);
 *   await carousel.init();
 *   await carousel.render('#carousel-container');
 * 
 * El componente inyecta automáticamente el contenedor con scope.
 * 
 * Páginas que lo usan:
 * - index.html (propiedades destacadas)
 * - oportunidades.html (oportunidades de arrendamiento)
 * 
 * @version 1.0.0
 * @date 2026-02-04
 */

/* ============================================
   CONTENEDOR CON SCOPE
   ============================================
   Todos los estilos están bajo este namespace para
   evitar conflictos con CSS global
*/

.properties-carousel-container {
  /* El contenedor en sí no necesita estilos especiales */
  /* Solo actúa como namespace para encapsulación */
}

/* ============================================
   SYNCFUSION CAROUSEL OVERRIDES
   ============================================
   Configuración del carousel de Syncfusion con
   partial visible (3 items: 1 completo + 2 parciales)
*/

/* Navegación - Botones */
.properties-carousel-container .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
.properties-carousel-container .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon {
  color: #d7282f !important;
  font-size: 25px !important;
  margin: 0px !important;
}

/* FIX: Estilos sin scope para que Syncfusion pueda renderizar los íconos */
.e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
.e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon {
  color: #d7282f !important;
  font-size: 25px !important;
  margin: 0px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* FALLBACK ADICIONAL - Forzar visibilidad de íconos */
.e-btn-icon {
  color: #d7282f !important;
  font-size: 25px !important;
  margin: 0px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* FALLBACK - Íconos sin scope para compatibilidad con Syncfusion */
.e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
.e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon {
  color: #d7282f !important;
  font-size: 25px !important;
  margin: 0px !important;
}

.properties-carousel-container .e-carousel .e-carousel-navigators {
  top: 0px !important;
  padding: 0px 20px !important;
}

/* Botones de navegación - Estilos personalizados */
.properties-carousel-container .e-previous > button {
  background-color: #d7282f !important;
  height: 50px !important;
  width: 50px !important;
  margin-top: 100px; /* Posicionamiento vertical */
  border-radius: 50% !important;
  overflow: visible !important; /* ← FIX: Permitir que las flechas sean visibles */
  line-height: 50px !important; /* ← FIX: Centrar contenido verticalmente */
  text-align: center !important;
  padding: 0 !important;
}

.properties-carousel-container .e-previous > button span {
  color: #fff !important;
  font-size: 24px !important;
  line-height: inherit !important;
}

.properties-carousel-container .e-previous > button:hover {
  transform: scale(1.1);
}

.properties-carousel-container .e-next > button {
  background-color: #d7282f !important;
  height: 50px !important;
  width: 50px !important;
  margin-top: 100px; /* Posicionamiento vertical */
  border-radius: 50% !important;
  overflow: visible !important; /* ← FIX: Permitir que las flechas sean visibles */
  line-height: 50px !important; /* ← FIX: Centrar contenido verticalmente */
  text-align: center !important;
  padding: 0 !important;
}

.properties-carousel-container .e-next > button span {
  color: #fff !important;
  font-size: 24px !important;
  line-height: inherit !important;
}

.properties-carousel-container .e-next > button:hover {
  transform: scale(1.1);
}

/* FIX: Estilos sin scope para asegurar renderización de botones */
/* Mayor especificidad para ganar sobre Syncfusion */
.e-carousel .e-carousel-navigators .e-previous > button {
  background-color: #d7282f !important;
  height: 50px !important;
  width: 50px !important;
  margin-top: 100px !important;
  border-radius: 50% !important;
  position: relative !important;
  z-index: 100 !important; /* Asegurar que esté encima de los slides */
  overflow: visible !important; /* ← FIX: Permitir que el contenido sea visible */
  line-height: 50px !important; /* ← FIX: Centrar contenido verticalmente */
  text-align: center !important;
  padding: 0 !important;
}

.e-carousel .e-carousel-navigators .e-previous > button span {
  color: #fff !important;
  font-size: 25px !important;
  line-height: inherit !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* FALLBACK: Crear flecha izquierda con CSS si el ícono no aparece */
.e-carousel .e-carousel-navigators .e-previous > button::before {
  content: "‹" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  z-index: 10 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.e-carousel .e-carousel-navigators .e-next > button {
  background-color: #d7282f !important;
  height: 50px !important;
  width: 50px !important;
  margin-top: 100px !important;
  border-radius: 50% !important;
  position: relative !important;
  z-index: 100 !important; /* Asegurar que esté encima de los slides */
  overflow: visible !important; /* ← FIX: Permitir que el contenido sea visible */
  line-height: 50px !important; /* ← FIX: Centrar contenido verticalmente */
  text-align: center !important;
  padding: 0 !important;
}

.e-carousel .e-carousel-navigators .e-next > button span {
  color: #fff !important;
  font-size: 25px !important;
  line-height: inherit !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* FALLBACK: Crear flecha derecha con CSS si el ícono no aparece */
.e-carousel .e-carousel-navigators .e-next > button::before {
  content: "›" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: #fff !important;
  font-size: 24px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  z-index: 10 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* FALLBACK - Botones sin scope para compatibilidad con Syncfusion */
/* Mayor especificidad para ganar sobre Syncfusion */
.e-carousel .e-carousel-navigators .e-previous > button {
  background-color: #d7282f !important;
  height: 50px !important;
  width: 50px !important;
  margin-top: 100px !important;
  z-index: 100 !important; /* Asegurar que esté encima de los slides */
  overflow: visible !important; /* Permitir que el contenido sea visible */
}

.e-carousel .e-carousel-navigators .e-previous > button span {
  color: #fff !important;
  position: relative !important;
  padding-top: 0px !important;
  top: -10px !important;
  z-index: 101 !important; /* Encima del botón */
  display: inline-block !important; /* Asegurar que se muestre */
  opacity: 1 !important; /* Asegurar que sea visible */
  font-size: 25px !important; /* Asegurar tamaño */
  visibility: visible !important; /* Forzar visibilidad */
}

.e-carousel .e-carousel-navigators .e-previous > button:hover {
  transform: scale(1.1) !important;
}

.e-carousel .e-carousel-navigators .e-next > button {
  background-color: #d7282f !important;
  height: 50px !important;
  width: 50px !important;
  margin-top: 100px !important;
  z-index: 100 !important; /* Asegurar que esté encima de los slides */
  overflow: visible !important; /* Permitir que el contenido sea visible */
}

.e-carousel .e-carousel-navigators .e-next > button span {
  color: #fff !important;
  position: relative !important;
  padding-top: 0px !important;
  top: -10px !important;
  z-index: 101 !important; /* Encima del botón */
  display: inline-block !important; /* Asegurar que se muestre */
  opacity: 1 !important; /* Asegurar que sea visible */
  font-size: 25px !important; /* Asegurar tamaño */
  visibility: visible !important; /* Forzar visibilidad */
}

.e-carousel .e-carousel-navigators .e-next > button:hover {
  transform: scale(1.1) !important;
}

/* Indicadores */
.properties-carousel-container .e-carousel .e-carousel-indicators.e-default .e-indicator-bar.e-active .e-indicator div {
  background-color: #d7282f !important;
  color: #0096A9 !important;
  border: none !important;
}

/* Partial Visible - Configuración base (Desktop > 2000px) */
.properties-carousel-container .e-carousel.e-partial .e-carousel-slide-container {
  padding: 0 25% !important;
}

/* Responsive - Partial Visible Breakpoints */
@media(max-width: 2000px) {
  .properties-carousel-container .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 21% !important;
  }
}

@media(max-width: 1700px) {
  .properties-carousel-container .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 17% !important;
  }
}

@media(max-width: 1500px) {
  .properties-carousel-container .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 10% !important;
  }
}

@media(max-width: 1300px) {
  .properties-carousel-container .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 9% !important;
  }
}

@media(max-width: 1200px) {
  /* En mobile, desactivar partial visible */
  .properties-carousel-container .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 0%;
  }
  
  /* Ocultar navegadores en mobile */
  .properties-carousel-container .e-carousel-navigators {
    display: none !important;
  }
  
  /* Posicionamiento alternativo de navegadores (si no se ocultan) */
  .properties-carousel-container .e-previous {
    position: relative;
  }
  
  .properties-carousel-container .e-previous > button {
    position: absolute;
  }
  
  .properties-carousel-container .e-next > button {
    margin-top: 200px;
  }
  
  /* Control container height */
  .properties-carousel-container .control-container {
    height: 400px;
  }
  
  /* Carousel section positioning */
  .properties-carousel-container .oportunidades__carousel {
    margin-top: -50px;
    position: relative;
    z-index: -1;
  }
  
  /* All properties link spacing */
  .properties-carousel-container .main__all-properties {
    margin-top: 40px;
  }
}

/* ============================================
   SAFARI-SPECIFIC FIXES
   ============================================
   Ajustes específicos para Safari para mejorar
   el renderizado y la calidad visual
*/

@supports (-webkit-appearance: none) {
  /* Navegadores - Safari fix */
  .properties-carousel-container .e-carousel-navigators {
    top: 0px !important;
    padding: 0px 20px !important;
    -webkit-transform: translateZ(0); /* Para evitar problemas de renderizado */
  }

  .properties-carousel-container .e-carousel .e-carousel-navigators .e-next .e-btn-icon,
  .properties-carousel-container .e-carousel .e-carousel-navigators .e-previous .e-btn-icon {
    color: #d7282f;
    font-size: 25px;
    margin: 0px;
    -webkit-font-smoothing: antialiased; /* Mejora la calidad del texto en Safari */
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================
   Mejoras de rendimiento para animaciones
*/

.properties-carousel-container .e-carousel {
  will-change: transform, opacity;
}


/* ============================================
   ESTRUCTURA DEL CAROUSEL
   ============================================
   Estilos de los items del carousel
*/

.properties-carousel-container .oportunidades__carousel__div {
  width: 950px;
  height: 450px;
  margin: 60px auto;
  cursor: pointer;
}

.properties-carousel-container .oportunidades__carousel__item {
  background-size: cover;
  background-position-y: center;
  background-position-x: center;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
}

.properties-carousel-container .oportunidades__carousel__item__text {
  cursor: context-menu;
}

/* ============================================
   TÍTULO Y METADATA
   ============================================
*/

.properties-carousel-container .oportunidades__carousel__item__text__title {
  height: 70px;
  width: 950px;
  background-color: #9cdbd9;
  justify-content: space-between;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item--title {
  padding: 0px 20px;
  height: 40px;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item--desc {
  padding: 0px 20px;
  height: 30px;
  background-color: #727272dd;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  padding: 0px 15px;
  justify-content: space-between;
  position: relative;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item span {
  color: #545454;
  font-family: Fjalla One;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 19%;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item .title {
  width: 30%;
  justify-content: start;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item .comercializacion {
  width: 32%;
  text-transform: lowercase;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item p {
  color: #FFF;
  font-family: Barlow Condensed;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 1px;
  position: absolute;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item .contact {
  left: 295px;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item .date {
  left: 612px;
}

.properties-carousel-container .oportunidades__carousel__item__text__title__item .area {
  left: 800px;
}

/* ============================================
   DESCRIPCIÓN Y TENANTS
   ============================================
*/

.properties-carousel-container .oportunidades__carousel__item__text__desc {
  height: 140px;
  width: 950px;
  background-color: #FFF;
  display: flex;
  padding: 15px;
}

.properties-carousel-container .oportunidades__carousel__item__text__desc__item {
  width: 50%;
  display: flex;
  justify-content: end;
}

.properties-carousel-container .oportunidades__carousel__item__text__desc__item p {
  color: #454545;
  text-align: justify;
  font-family: 'Barlow Condensed';
  text-rendering: optimizeLegibility;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 1px;
}

.properties-carousel-container .oportunidades__carousel__item__text__desc__item div {
  width: 80px;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-y: center;
  margin-left: 20px;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================
*/

@media (max-width: 480px) {
  .properties-carousel-container .e-carousel-slide-container {
    padding: 10px 0px !important;
  }

  .properties-carousel-container .e-indicator-bars {
    margin-top: 10px !important;
  }

  .properties-carousel-container .e-carousel-navigators {
    display: none !important;
  }
}

@media (max-width: 1200px) {
  .properties-carousel-container .oportunidades__carousel__div {
    min-width: 350px;
    width: 70%;
    height: 280px;
    margin: 100px auto;
    cursor: pointer;
  }

  .properties-carousel-container .e-carousel .e-carousel-items {
    height: 400px;
  }

  .properties-carousel-container .oportunidades__carousel__item__text__title {
    width: 100% !important;
  }

  .properties-carousel-container .oportunidades__carousel__item__text__desc {
    width: 100% !important;
  }
}

/* ============================================
   FORZAR VISIBILIDAD DE ÍCONOS - ÚLTIMO RECURSO
   ============================================ */

/* Asegurar que los íconos de FontAwesome/Syncfusion se muestren */
.e-carousel .e-carousel-navigators button .e-btn-icon {
  color: #d7282f !important;
  font-size: 25px !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
}

.e-carousel .e-btn-icon::before {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #d7282f !important;
  font-size: 25px !important;
}

/* ============================================
   PARTIAL VISIBLE - SIN SCOPE (FALLBACK)
   ============================================
   Estilos sin scope para compatibilidad cuando
   el HTML no tiene .properties-carousel-container.
   
   Estos estilos aseguran que el carousel muestre
   3 elementos (1 completo + 2 parciales) en desktop
   independientemente del contenedor.
   
   IMPORTANTE: Estos estilos se aplican a TODAS
   las páginas que usen el carousel component.
   
   @date 2026-02-07
   @reason Fix para restaurar funcionalidad de 3 elementos
           después de reorganizar orden de carga CSS
*/

.e-carousel.e-partial .e-carousel-slide-container {
  padding: 0 25% !important;
}

@media(max-width: 2000px) {
  .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 21% !important;
  }
}

@media(max-width: 1700px) {
  .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 17% !important;
  }
}

@media(max-width: 1500px) {
  .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 10% !important;
  }
}

@media(max-width: 1300px) {
  .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 9% !important;
  }
}

@media(max-width: 1200px) {
  /* En mobile, desactivar partial visible */
  .e-carousel.e-partial .e-carousel-slide-container {
    padding: 0 0% !important;
  }
}