/**
 * DBF Elementor - Widget Contador
 * Estilos exclusivos para el componente Counter
 * Clase: dbf-elementor-counter-*
 */

:root {
  --dbf-counter-primary: #F45A57;
  --dbf-counter-secondary: #a8b2c7;
  --dbf-counter-line: #575e67;
  --dbf-counter-bg: transparent;
  --dbf-counter-gap: 48px;
  --dbf-counter-card-gap: 32px;
  --dbf-counter-radius: 16px;
  --dbf-counter-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --dbf-counter-secondary: #a8b2c7;
    --dbf-counter-line: #5d6672;
    --dbf-counter-bg: transparent;
  }
}

/* Contenedor principal */
.dbf-elementor-counter {
  width: 100%;
  position: relative;
}

/* Grid layout - tarjetas verticales sin bordes */
.dbf-elementor-counter-grid {
  display: flex;
  flex-direction: column;
  gap: var(--dbf-counter-gap);
  max-width: 100%;
}

@media (min-width: 768px) {
  .dbf-elementor-counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--dbf-counter-card-gap);
  }
}

/* Item del contador - Tarjeta sin bordes */
.dbf-elementor-counter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding: 24px 16px;
  background: var(--dbf-counter-bg);
  border-radius: var(--dbf-counter-radius);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* Efecto sutil al hover - solo espaciado, sin borde */
.dbf-elementor-counter-item:hover {
  background: rgba(244, 90, 87, 0.02);
}

@media (prefers-color-scheme: dark) {
  .dbf-elementor-counter-item:hover {
    background: rgba(244, 90, 87, 0.04);
  }
}

/* Valor del contador - Número grande y prominente */
.dbf-elementor-counter-item .dbf-counter-value {
  font-weight: 800;
  font-size: clamp(32px, 7vw, 64px);
  line-height: 1.1;
  color: var(--dbf-counter-primary);
  margin: 0;
  padding: 0;
  display: block;
  word-break: break-word;
  transition: color 0.3s ease;
}

.dbf-elementor-counter-item:hover .dbf-counter-value {
  color: #F45A57;
}

/* Etiqueta del contador */
.dbf-elementor-counter-item .dbf-counter-label {
  margin-top: 12px;
  font-size: clamp(12px, 2.5vw, 15px);
  color: var(--dbf-counter-secondary);
  font-weight: 500;
  line-height: 1.4;
  display: block;
  transition: color 0.3s ease;
}

.dbf-elementor-counter-item:hover .dbf-counter-label {
  color: var(--dbf-counter-secondary);
}

/* Línea inferior - Estilo stat_line */
.dbf-elementor-counter-item .dbf-counter-line {
  margin: 16px auto 0;
  width: 100%;
  max-width: 140px;
  height: 4px;
  background: var(--dbf-counter-line);
  border-radius: 999px;
  opacity: 0.7;
  transition: opacity 0.3s ease, width 0.3s ease;
  display: block;
}

.dbf-elementor-counter-item:hover .dbf-counter-line {
  opacity: 1;
}

/* Estilos por variante */
.dbf-elementor-counter.style-stat_line .dbf-elementor-counter-item {
  /* Configuración por defecto ya aplicada */
}

/* Animaciones hover - Levantar */
.dbf-elementor-counter.hover-lift .dbf-elementor-counter-item:hover {
  transform: translateY(-8px);
}

@media (prefers-color-scheme: dark) {
  .dbf-elementor-counter.hover-lift .dbf-elementor-counter-item:hover {
    transform: translateY(-8px);
  }
}

/* Animaciones hover - Pulso */
@keyframes dbf-counter-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

.dbf-elementor-counter.hover-pulse .dbf-elementor-counter-item:hover {
  animation: dbf-counter-pulse 0.6s ease-in-out;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
  .dbf-elementor-counter-grid {
    gap: 24px;
  }

  .dbf-elementor-counter-item {
    padding: 20px 12px;
  }

  .dbf-elementor-counter-item .dbf-counter-value {
    font-size: clamp(28px, 6vw, 48px);
  }

  .dbf-elementor-counter-item .dbf-counter-label {
    font-size: clamp(12px, 2.5vw, 14px);
  }

  .dbf-elementor-counter-item .dbf-counter-line {
    max-width: 100px;
  }
}

/* Responsive - Mobile */
@media (max-width: 480px) {
  .dbf-elementor-counter-grid {
    gap: 20px;
  }

  .dbf-elementor-counter-item {
    padding: 16px 8px;
  }

  .dbf-elementor-counter-item .dbf-counter-value {
    font-size: clamp(24px, 6vw, 40px);
  }

  .dbf-elementor-counter-item .dbf-counter-label {
    margin-top: 8px;
    font-size: clamp(11px, 2.2vw, 12px);
  }

  .dbf-elementor-counter-item .dbf-counter-line {
    margin-top: 12px;
    max-width: 80px;
  }
}

/* Accesibilidad - Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .dbf-elementor-counter-item,
  .dbf-elementor-counter-item .dbf-counter-value,
  .dbf-elementor-counter-item .dbf-counter-label,
  .dbf-elementor-counter-item .dbf-counter-line {
    transition: none !important;
    animation: none !important;
  }

  .dbf-elementor-counter-item:hover {
    transform: none !important;
  }
}

/* Dark mode ajustes */
@media (prefers-color-scheme: dark) {
  .dbf-elementor-counter-item {
    background: var(--dbf-counter-bg);
  }

  .dbf-elementor-counter-item:hover {
    background: rgba(244, 90, 87, 0.04);
  }

  .dbf-elementor-counter-item .dbf-counter-value {
    color: #F45A57;
  }

  .dbf-elementor-counter-item .dbf-counter-label {
    color: var(--dbf-counter-secondary);
  }

  .dbf-elementor-counter-item .dbf-counter-line {
    background: var(--dbf-counter-line);
  }
}

/* Estado deshabilitado */
.dbf-elementor-counter.disabled,
.dbf-elementor-counter-item.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.dbf-elementor-counter-item.disabled:hover {
  transform: none;
  background: var(--dbf-counter-bg);
}