/* ============================================================
   TWS Scroller — carrusel horizontal de recomendados
   Sustituye a tws-carousel. No requiere directiva de AngularJS.

   La barra de scroll se oculta SOLO si el script ha arrancado
   (clase .tws-has-nav). Si el JS falla, la barra sigue ahí y el
   carrusel se puede mover igualmente.

   Tarjetas visibles: --tws-visible
   Para cambiarlo en un bloque suelto:
     <div class="tws-scroller" style="--tws-visible:5">
   ============================================================ */

.tws-scroller {
  position: relative;
  --tws-gap: 16px;
  --tws-visible: 4;
}

/* --- Pista scrollable --------------------------------------- */
.tws-scroller__track {
  display: flex;
  align-items: stretch;
  gap: var(--tws-gap);

  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* inercia en iOS antiguo */
  overscroll-behavior-x: contain; /* evita el "atrás" del navegador */

  /* SIN scroll-behavior: smooth. Con snap obligatorio, el navegador
     puede anular el desplazamiento por programación y las flechas
     dejan de mover nada. La animación la hace el script a mano. */

  /* aire para sombras y anillo de foco */
  padding: 4px 2px 6px;
  margin: -4px -2px 0;

  /* barra visible por defecto: es el plan B si no hay JS */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.28) transparent;
}

.tws-scroller__track::-webkit-scrollbar {
  height: 8px;
}
.tws-scroller__track::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}
.tws-scroller__track::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 4px;
}
.tws-scroller__track::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.45);
}

/* Con flechas ya no hace falta la barra */
.tws-scroller.tws-has-nav .tws-scroller__track {
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
.tws-scroller.tws-has-nav .tws-scroller__track::-webkit-scrollbar {
  display: none;
}

/* --- Tarjetas ----------------------------------------------- */
.tws-scroller__item {
  flex: 0 0
    calc(
      (100% - (var(--tws-visible) - 1) * var(--tws-gap)) / var(--tws-visible)
    );
  min-width: 0; /* impide que el contenido ensanche la tarjeta */
  scroll-snap-align: start;
  display: flex;

  /* Clave: encierra el z-index de .hover-link en su propia burbuja,
     si no el enlace de la tarjeta se traga el click de las flechas.
     Los flex items respetan z-index aunque sean position:static, así
     que no hace falta tocar position y descolocar .tag ni .hover-link. */
  z-index: 0;
}

.tws-scroller__item > article {
  width: 100%;
  margin: 0;
  float: none; /* neutraliza el CSS antiguo del carrusel */
}

/* --- Puntos de ruptura (alineados con Angular Material) ------ */
@media (max-width: 1279px) {
  .tws-scroller {
    --tws-visible: 3;
  }
}
@media (max-width: 959px) {
  .tws-scroller {
    --tws-visible: 2;
  }
}

/* 1,15 tarjetas: se asoma la siguiente y se entiende que hay más,
   sin necesidad de indicadores ni de barra */
@media (max-width: 599px) {
  .tws-scroller {
    --tws-visible: 1.15;
    --tws-gap: 12px;
  }
}

/* --- Estados del scroll ------------------------------------- */
/* El snap pelea tanto con el arrastre como con la animación de las
   flechas: se desactiva mientras duran y se reactiva al terminar,
   que es cuando encaja la tarjeta más cercana. */
.tws-scroller__track.is-dragging,
.tws-scroller__track.is-animating {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.tws-scroller__track.is-dragging {
  user-select: none;
}

/* El cursor del enlace que cubre la tarjeta gana por especificidad */
.tws-scroller__track.is-dragging,
.tws-scroller__track.is-dragging * {
  cursor: grabbing !important;
}

.tws-scroller__track img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* --- Flechas ------------------------------------------------ */
.tws-scroller__nav {
  position: absolute;
  top: 90px; /* AJUSTAR al centro de tu .img-boxed */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #333;
  z-index: 3;
  transition: background-color 0.18s ease;
}

/* Por dentro del borde: con valores negativos, el overflow:hidden
   de md-tabs-content-wrapper las recortaría */
.tws-scroller__nav--prev {
  left: 6px;
}
.tws-scroller__nav--next {
  right: 6px;
}

.tws-scroller__nav:hover {
  background: #f6f9fb;
}
.tws-scroller__nav:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.tws-scroller__nav svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* Sin ocultado automático en los extremos: esa lógica dependía de
   medir la pista en el momento justo y se quedaba mal calculada.
   Ahora las flechas están siempre y en los extremos no hacen nada. */

/* Táctil: ni flechas ni barra, el gesto basta.
   Depende del puntero, NO del ancho: un portátil con la ventana
   estrecha sigue necesitando las flechas. */
@media (hover: none) and (pointer: coarse) {
  .tws-scroller__nav {
    display: none;
  }
  .tws-scroller__track {
    scrollbar-width: none;
    padding-bottom: 0;
  }
  .tws-scroller__track::-webkit-scrollbar {
    display: none;
  }
}