/*
 * comportamiento.css — SOLO comportamiento, cero diseno.
 *
 * Aqui no hay ni un color, ni un tamano, ni una separacion. Todo eso son
 * controles del panel de Elementor y el cliente tiene que poder cambiarlos.
 * Lo que hay aqui es lo que no se puede expresar como ajuste de widget:
 * ocultar las plantillas de clonado y hacer clicables los elementos.
 */

/* Las plantillas de punto existen para que el cliente las estilice en el
   editor; en el sitio publicado el JS las clona y no deben verse. */
.elementor-editor-active .carrusel-punto-plantilla { outline: 1px dashed currentColor; }
body:not(.elementor-editor-active) .carrusel-punto-plantilla { display: none !important; }

/* Si el JS no llego a montar (Swiper no aparecio), las plantillas se
   quedarian ocultas y la fila de puntos vacia. Mejor que se vean: un
   carrusel sin puntos es un fallo visible, no uno silencioso. */
body:not(.elementor-editor-active) .carrusel[data-carrusel-error] .carrusel-punto-plantilla { display: block !important; }

.carrusel-prev,
.carrusel-next,
.carrusel-punto { cursor: pointer; -webkit-user-select: none; user-select: none; }

.carrusel-prev:focus-visible,
.carrusel-next:focus-visible,
.carrusel-punto:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Extremos sin loop. La opacidad es lo minimo para que se note que no
   responde; si el diseno del React marca el estado de otra forma,
   maquetalo en Elementor y sobreescribe esto desde ahi. */
.carrusel-desactivada { opacity: .35; pointer-events: none; }

/* El relleno de la barra de progreso lo mueve el JS via style.width. */
.carrusel-progreso { overflow: hidden; }
.carrusel-progreso-relleno { transition: width .3s ease; }

/* ── Panel desplegable de WhatsApp (.kit-wa) ──────────────────
   Solo estados y transiciones. El aspecto (colores, radios, textos) es
   de los widgets y se edita en el panel de Elementor. */
.kit-wa { pointer-events: none; }
.kit-wa > * { pointer-events: auto; }
body:not(.elementor-editor-active) .kit-wa-panel {
  transform-origin: bottom right;
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.96);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.3,1), visibility .22s;
}
body:not(.elementor-editor-active) .kit-wa.is-open .kit-wa-panel,
body:not(.elementor-editor-active) .kit-wa:not(.es-tactil):hover .kit-wa-panel,
body:not(.elementor-editor-active) .kit-wa:focus-within .kit-wa-panel {
  opacity: 1; visibility: visible; transform: none;
}
.kit-wa-boton .elementor-button { transition: transform .18s cubic-bezier(.2,.8,.3,1), background .15s; }
.kit-wa-boton .elementor-button:hover { transform: translateY(-2px); }
.kit-wa-cerrar .elementor-button { opacity: .7; }
.kit-wa-cerrar .elementor-button:hover { opacity: 1; }
.kit-wa-chip .elementor-button { cursor: pointer; }
.kit-wa-form textarea { min-height: 62px; max-height: 140px; resize: vertical; }
@media (max-width: 480px) {
  .kit-wa-boton .elementor-button-text { display: none; }
  .kit-wa-panel { max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .kit-wa-panel, .kit-wa-boton .elementor-button { transition: none !important; }
}

/* ── Conteo en los filtros (.kit-filtro-conteo) ───────────────
   Solo colocación: el número va a la derecha del texto, más pequeño y a
   media opacidad (hereda el color del botón en cada estado). */
.kit-filtro-conteo .e-filter-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; }
.kit-filtro-conteo .kit-conteo { font-size: 11.5px; opacity: .7; }