/*
 * Desplegable Horizontal WEBTOPUS v2
 * Diseñado para el Acordeón anidado de Elementor: .e-n-accordion
 * Clase a añadir en Elementor > Avanzado > Clases CSS: webtopus-horizontal
 */

.webtopus-horizontal.e-n-accordion,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion,
.webtopus-horizontal .e-n-accordion {
  --wtdh-primary: currentColor;
  --wtdh-primary-contrast: inherit;
  --wtdh-bg: transparent;
  --wtdh-muted: #e9eef5;
  --wtdh-text: inherit;
  --wtdh-radius: 14px;
  --wtdh-gap: 0px;
  --wtdh-panel-padding: clamp(6px, 1vw, 12px);
  display: grid !important;
  grid-template-columns: repeat(var(--wtdh-items, 4), minmax(120px, 1fr));
  gap: var(--wtdh-gap) !important;
  width: 100%;
  counter-reset: wtdh-step;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item {
  display: contents !important;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
  counter-increment: wtdh-step;
  grid-row: 1;
  position: relative;
  min-height: 58px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 22px !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.06);
  cursor: pointer;
  overflow: visible;
  z-index: 2;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item:first-child > .e-n-accordion-item-title,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:first-child > .e-n-accordion-item-title,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:first-child > .e-n-accordion-item-title {
  border-radius: var(--wtdh-radius) 0 0 var(--wtdh-radius) !important;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item:last-child > .e-n-accordion-item-title,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:last-child > .e-n-accordion-item-title,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:last-child > .e-n-accordion-item-title {
  border-radius: 0 var(--wtdh-radius) var(--wtdh-radius) 0 !important;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before {
  content: counter(wtdh-step);
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d9e4f2;
  color: #497095;
  background: #fff;
  font-weight: 700;
  line-height: 1;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title,
.webtopus-horizontal.e-n-accordion > .e-n-accordion-item.elementor-active > .e-n-accordion-item-title,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item.elementor-active > .e-n-accordion-item-title,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item.elementor-active > .e-n-accordion-item-title {
  font-weight: 700;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title::before,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title::before,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title::before,
.webtopus-horizontal.e-n-accordion > .e-n-accordion-item.elementor-active > .e-n-accordion-item-title::before,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item.elementor-active > .e-n-accordion-item-title::before,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item.elementor-active > .e-n-accordion-item-title::before {
  border-color: rgba(255,255,255,.9);
  background: transparent;
  color: #fff;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item:not(:last-child) > .e-n-accordion-item-title::after,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:not(:last-child) > .e-n-accordion-item-title::after,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:not(:last-child) > .e-n-accordion-item-title::after {
  content: "";
  position: absolute;
  top: 0;
  right: -24px;
  width: 48px;
  height: 100%;
  background: inherit;
  clip-path: polygon(0 0, 50% 50%, 0 100%, 100% 100%, 50% 50%, 100% 0);
  z-index: 3;
  pointer-events: none;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .e-con,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-con,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-con,
.webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .elementor-element,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .elementor-element,
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .elementor-element {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 0 !important;
  background: var(--wtdh-bg);
  border-radius: var(--wtdh-radius);
  padding: var(--wtdh-panel-padding) !important;
  box-shadow: none;
  width: 100%;
  min-width: 0;
}

.webtopus-horizontal .e-n-accordion-item:not([open]) > .e-con,
.webtopus-horizontal .e-n-accordion-item:not([open]) > .elementor-element {
  display: none !important;
}

/* Editor: deja visibles las zonas internas cuando Elementor está editando */
.elementor-editor-active .webtopus-horizontal .e-n-accordion-item > .e-con,
.elementor-editor-active .webtopus-horizontal .e-n-accordion-item > .elementor-element {
  min-height: 80px;
}

@media (max-width: 767px) {
  .webtopus-horizontal.e-n-accordion,
  .elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion,
  .webtopus-horizontal .e-n-accordion {
    grid-template-columns: repeat(var(--wtdh-items, 4), minmax(68px, 1fr));
  }

  .webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title,
  .elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title,
  .webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title {
    min-height: 56px;
    padding: 8px 6px !important;
    flex-direction: column;
    gap: 4px;
    font-size: 12px !important;
    line-height: 1.15;
    text-align: center;
  }

  .webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before,
  .elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before,
  .webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title::before {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .webtopus-horizontal.e-n-accordion > .e-n-accordion-item:not(:last-child) > .e-n-accordion-item-title::after,
  .elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:not(:last-child) > .e-n-accordion-item-title::after,
  .webtopus-horizontal .e-n-accordion > .e-n-accordion-item:not(:last-child) > .e-n-accordion-item-title::after {
    right: -14px;
    width: 28px;
  }

  .webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .e-con,
  .elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-con,
  .webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .e-con,
  .webtopus-horizontal.e-n-accordion > .e-n-accordion-item > .elementor-element,
  .elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .elementor-element,
  .webtopus-horizontal .e-n-accordion > .e-n-accordion-item > .elementor-element {
    margin-top: 12px;
    padding: 28px 18px !important;
  }
}

/* WEBTOPUS fix: panel siempre a ancho completo */
.webtopus-horizontal.e-n-accordion,
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion,
.webtopus-horizontal .e-n-accordion {
  position: relative !important;
  padding-bottom: var(--wtdh-dynamic-panel-height, 0px) !important;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item > :not(.e-n-accordion-item-title),
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > :not(.e-n-accordion-item-title),
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > :not(.e-n-accordion-item-title),
.webtopus-horizontal.e-n-accordion > .e-n-accordion-item > [role="region"],
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > [role="region"],
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item > [role="region"] {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  inline-size: 100% !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* En algunos navegadores/versions de Elementor, display:contents en <details> no hace que el panel sea grid-item.
   Por eso el panel abierto se coloca absoluto respecto al acordeón y se reserva altura con JS. */
.webtopus-horizontal.e-n-accordion > .e-n-accordion-item[open] > :not(.e-n-accordion-item-title),
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item[open] > :not(.e-n-accordion-item-title),
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item[open] > :not(.e-n-accordion-item-title),
.webtopus-horizontal.e-n-accordion > .e-n-accordion-item.elementor-active > :not(.e-n-accordion-item-title),
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item.elementor-active > :not(.e-n-accordion-item-title),
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item.elementor-active > :not(.e-n-accordion-item-title) {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--wtdh-panel-top, 76px) !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
  z-index: 1;
}

.webtopus-horizontal.e-n-accordion > .e-n-accordion-item:not([open]) > :not(.e-n-accordion-item-title),
.elementor-widget-n-accordion.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:not([open]) > :not(.e-n-accordion-item-title),
.webtopus-horizontal .e-n-accordion > .e-n-accordion-item:not([open]) > :not(.e-n-accordion-item-title) {
  display: none !important;
}