/*
  Estilos compartidos por todos los componentes de la libreria.
  Se cargan dentro del Shadow DOM, asi que NO heredan las clases del sitio.
  Solo heredan propiedades marcadas como `inherit` y las variables del sitio.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

:host {
  display: block;
  /* Hereda la tipografia del contenedor de Webflow donde se coloque */
  font-family: inherit;
  color: inherit;
}

/* ------------------------------------------------------------------
   TabsCarrusel
   CSS plano (no CSS Modules: los named exports rompen el bundler).
   Todo lo tematizable pasa por variables para que el sitio mande.
   ------------------------------------------------------------------ */

.tc {
  --tc-gap: 24px;

  --tc-tab-bg: #eef1f5;
  --tc-tab-color: #1b1b1b;
  --tc-tab-bg-active: #0f55a7;
  --tc-tab-color-active: #ffffff;
  --tc-tab-radius: 8px;

  --tc-accent: #0069b4;
  --tc-dot: #c9d4e2;
  --tc-arrow-border: #d5dde7;
  --tc-arrow-color: #0f55a7;

  --tc-card-col: 5fr;
  --tc-carousel-col: 7fr;

  display: block;
}

/* ------------------------------ Tabs ----------------------------- */

.tc__tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.tc__tabs::-webkit-scrollbar {
  display: none;
}

.tc__tab {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  padding: 12px 20px;
  font: inherit;
  line-height: 1.2;
  color: var(--tc-tab-color);
  background: var(--tc-tab-bg);
  border-radius: var(--tc-tab-radius);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.tc__tab.is-active {
  background: var(--tc-tab-bg-active);
  color: var(--tc-tab-color-active);
}

.tc__tab:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

/* ----------------------------- Panel ----------------------------- */

.tc__panel {
  display: grid;
  gap: var(--tc-gap);
  margin-top: var(--tc-gap);
}

/* En mobile el carrusel va arriba y la tarjeta debajo. */
.tc__carousel {
  order: 1;
  min-width: 0;
}

.tc__card {
  order: 2;
  min-width: 0;
}

@media (min-width: 992px) {
  .tc__panel {
    grid-template-columns:
      minmax(0, var(--tc-card-col))
      minmax(0, var(--tc-carousel-col));
    align-items: stretch;
  }

  .tc__card {
    order: 1;
  }

  .tc__carousel {
    order: 2;
  }

  .tc[data-card="derecha"] .tc__panel {
    grid-template-columns:
      minmax(0, var(--tc-carousel-col))
      minmax(0, var(--tc-card-col));
  }

  .tc[data-card="derecha"] .tc__card {
    order: 2;
  }

  .tc[data-card="derecha"] .tc__carousel {
    order: 1;
  }
}

/* ----------------------------- Track ----------------------------- */

.tc__track {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.tc__track::-webkit-scrollbar {
  display: none;
}

.tc__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* --------------------------- Controles --------------------------- */

.tc__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.tc__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tc__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--tc-dot);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}

.tc__dot.is-active {
  width: 24px;
  background: var(--tc-accent);
}

.tc__dot:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 3px;
}

.tc__arrows {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.tc__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  /* box-shadow en vez de border: los resets globales del sitio suelen pisar
     'border' en <button> y entran al Shadow DOM por applyTagSelectors,
     pero casi nunca tocan box-shadow. */
  box-shadow: inset 0 0 0 1px var(--tc-arrow-border);
  background: transparent;
  color: var(--tc-arrow-color);
  cursor: pointer;
  transition: opacity 0.18s ease, box-shadow 0.18s ease;
}

.tc__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.tc__arrow:focus-visible {
  outline: 2px solid var(--tc-accent);
  outline-offset: 2px;
}

/* En mobile el swipe basta: flechas y puntos se ocultan.
   Para ocultarlos tambien en tablet, cambia 767px por 991px. */
@media (max-width: 767px) {
  .tc__controls {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tc__tab,
  .tc__dot,
  .tc__arrow {
    transition: none;
  }

  .tc__track {
    scroll-behavior: auto;
  }
}