/**
 * view-toggle.css
 * ----------------------------------------------------------------------------
 * Estilos de los botones de cambio de vista (Grid / Lista).
 *
 * Requiere ÚNICAMENTE que cada botón tenga el atributo:
 *   - data-view-toggle="grid"  ó  data-view-toggle="list"
 *
 * No depende de ninguna clase CSS adicional (algunas versiones de
 * Elementor Pro v4 no exponen un campo simple de "Clases CSS" para
 * widgets SVG individuales, así que el selector base es el atributo).
 * Si en el futuro se agrega también la clase .view-toggle__btn, sigue
 * funcionando igual: ambos selectores conviven sin conflicto.
 *
 * Estados:
 *   - Inactivo: fondo gris claro, ícono rojo (como en la captura original).
 *   - Activo:   fondo rojo, ícono blanco (inversión de color pedida).
 * ----------------------------------------------------------------------------
 */

:root {
  --view-toggle-red: #ea2432;
  --view-toggle-bg-inactive: #d9d9d9;
  --view-toggle-fg-inactive: var(--view-toggle-red);
  --view-toggle-bg-active: var(--view-toggle-red);
  --view-toggle-fg-active: #ffffff;
  --view-toggle-radius: 10px;
  --view-toggle-size: 56px;
  --view-toggle-transition: 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.view-toggle__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Selector base: cualquier elemento con data-view-toggle="grid" o "list".
   Cubre tanto el caso de un <div data-view-toggle="grid"> contenedor como
   el widget SVG de Elementor con el atributo puesto directamente en él. */
[data-view-toggle="grid"],
[data-view-toggle="list"],
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--view-toggle-size);
  height: var(--view-toggle-size);
  padding: 12px;
  border: none;
  border-radius: var(--view-toggle-radius);
  background-color: var(--view-toggle-bg-inactive);
  color: var(--view-toggle-fg-inactive);
  cursor: pointer;
  transition:
    background-color var(--view-toggle-transition),
    color var(--view-toggle-transition),
    transform 120ms ease;
}

[data-view-toggle="grid"] svg,
[data-view-toggle="list"] svg,
.view-toggle__btn svg {
  width: 100%;
  height: 100%;
  /* El SVG debe pintar con currentColor para heredar el color del botón */
  fill: currentColor;
  transition: transform var(--view-toggle-transition);
}

/* Los SVG del widget "SVG" de Elementor Pro v4 se insertan INLINE en el
   DOM, pero cada uno trae su propio <style> interno con algo como
   .cls-2 { fill: #ea2432; } que pisa el currentColor del tag raíz. Como
   ese <style> vive dentro del propio <svg>, conviene apuntar directo a
   cualquier clase con prefijo "cls-" (técnica de selector de atributo),
   así sigue funcionando aunque Elementor regenere los nombres de clase
   en el futuro (ej. cls-2 -> cls-2-a1b2c3): */
[data-view-toggle="grid"] svg,
[data-view-toggle="grid"] svg path,
[data-view-toggle="grid"] svg [class*="cls-"],
[data-view-toggle="list"] svg,
[data-view-toggle="list"] svg path,
[data-view-toggle="list"] svg [class*="cls-"],
.view-toggle__btn svg,
.view-toggle__btn svg path,
.view-toggle__btn svg [class*="cls-"] {
  fill: currentColor !important;
}

[data-view-toggle="grid"]:hover,
[data-view-toggle="list"]:hover,
.view-toggle__btn:hover {
  transform: translateY(-1px);
}

[data-view-toggle="grid"]:active,
[data-view-toggle="list"]:active,
.view-toggle__btn:active {
  transform: translateY(0) scale(0.96);
}

[data-view-toggle="grid"]:focus-visible,
[data-view-toggle="list"]:focus-visible,
.view-toggle__btn:focus-visible {
  outline: 2px solid var(--view-toggle-red);
  outline-offset: 2px;
}

/* Estado activo: fondo rojo, ícono blanco (inversión pedida).
   El JS agrega la clase .is-view-active al elemento clickeado. */
[data-view-toggle].is-view-active,
.view-toggle__btn.is-view-active {
  background-color: var(--view-toggle-bg-active);
  color: var(--view-toggle-fg-active);
}

/* Pequeño "pulso" al activarse, para reforzar el feedback de cambio */
@keyframes view-toggle-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

[data-view-toggle].is-view-active svg,
.view-toggle__btn.is-view-active svg {
  animation: view-toggle-pulse 260ms ease;
}

@media (prefers-reduced-motion: reduce) {
  [data-view-toggle="grid"],
  [data-view-toggle="list"],
  [data-view-toggle="grid"] svg,
  [data-view-toggle="list"] svg,
  .view-toggle__btn,
  .view-toggle__btn svg {
    transition: none;
  }
  [data-view-toggle].is-view-active svg,
  .view-toggle__btn.is-view-active svg {
    animation: none;
  }
}

/* Transición suave del propio contenido al cambiar de vista */
.listing-grilla,
.listing-lista {
  transition: opacity 180ms ease;
}