/* Estilos para el widget Custom Double Ticker - VERSIÓN AVANZADA */
.ticker-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  min-height: 20px; /* Evita colapso total */
}

.ticker-content {
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 0;
  will-change: transform, left;
  transition: none; /* Sin transiciones por defecto para el movimiento */
}

/* Elemento auxiliar para calcular la altura basado en el texto */
.ticker-height-helper {
  visibility: hidden;
  white-space: nowrap;
  display: inline-block;
  padding: 2px 0; /* Espacio para caracteres */
}

/* Animación fadeUp mejorada */
.ticker-container[data-animation="fadeup"] .ticker1-container {
  opacity: 0;
  animation: fadeUpAdvanced 0.5s ease-out forwards;
  animation-delay: 0.2s;
}

.ticker-container[data-animation="fadeup"] .ticker2-container {
  opacity: 0;
  animation: fadeUpAdvanced 0.5s ease-out forwards;
  animation-delay: 0.3s;
}

@keyframes fadeUpAdvanced {
  from {
    opacity: 0;
    transform: translateY(100%); /* Emerge desde abajo completamente */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Estados para interacción con scroll */
.ticker-container.scroll-active .ticker-content {
  transition: none; /* Sin transiciones durante el scroll activo */
}

.ticker-container.decelerating .ticker-content {
  transition: left 0.1s ease-out; /* Transición suave durante la desaceleración */
}

/* Optimizaciones de rendimiento */
.ticker-container.performance-mode .ticker-content {
  will-change: left; /* Solo left para mejor rendimiento */
}

/* Estilos específicos para el editor de Elementor */
.ticker-container.elementor-editor-mode {
  border: 1px dashed rgba(0, 123, 255, 0.3); /* Borde visual en el editor */
  background: rgba(0, 123, 255, 0.05); /* Fondo sutil en el editor */
}

.ticker-container.elementor-editor-mode::before {
  content: "Ticker Widget (Editor Mode)";
  position: absolute;
  top: -20px;
  left: 0;
  font-size: 10px;
  color: #007cba;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 10;
  pointer-events: none;
}

/* Asegurar herencia de tipografía */
.elementor-widget-lemon-ticker {
  font-family: inherit;
}

.elementor-widget-lemon-ticker .ticker-container,
.elementor-widget-lemon-ticker .ticker-content,
.elementor-widget-lemon-ticker .ticker-height-helper {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Estilos para debugging (solo en desarrollo) */
.ticker-container.debug-mode {
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.ticker-container.debug-mode .ticker-content {
  background: rgba(0, 255, 0, 0.1);
}

/* Responsive optimizations */
@media (max-width: 768px) {
  .ticker-container.mobile-optimized .ticker-content {
    will-change: left;
    transform: translateZ(0); /* Forzar aceleración de hardware */
  }

  /* En móviles, ocultar el indicador del editor para ahorrar espacio */
  .ticker-container.elementor-editor-mode::before {
    display: none;
  }
}

/* Mejoras para el editor */
.elementor-editor-active .ticker-container {
  min-height: 40px; /* Altura mínima mayor en el editor para mejor visibilidad */
}

/* Indicador visual cuando el scroll interaction está activo */
.ticker-container[data-scroll-interaction="true"].elementor-editor-mode {
  border-color: rgba(255, 193, 7, 0.5); /* Color amarillo para indicar interactividad */
}

.ticker-container[data-scroll-interaction="true"].elementor-editor-mode::after {
  content: "Scroll Interactive";
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 9px;
  color: #ffc107;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px 4px;
  border-radius: 2px;
  z-index: 10;
  pointer-events: none;
}