/**
 * @file
 * Carrusel genérico de svf_theme — pista desplazable + flechas.
 *
 * Pieza compartida: no conoce ningún componente. Cada componente manda en su
 * propia rejilla (cuántas columnas y en qué media query pasa a una sola); aquí
 * solo viven el desplazamiento de la pista y el bloque de flechas.
 *
 * Marcado esperado:
 *   <div data-svf-carrusel>
 *     <div class="svf-carrusel__pista" data-svf-carrusel-pista> … cards … </div>
 *     <div class="svf-flechas">
 *       <button type="button" class="svf-flecha svf-flecha--prev" data-svf-carrusel-prev>…</button>
 *       <button type="button" class="svf-flecha svf-flecha--next" data-svf-carrusel-next>…</button>
 *     </div>
 *   </div>
 *
 * Las flechas están ocultas hasta que svf-carrusel.js confirma que la pista
 * realmente se desborda (clase .svf-carrusel--activo). Por eso no hay ningún
 * breakpoint quemado en este archivo.
 */

:root,
body {
  /* Color por portal con el patrón del tema: el respaldo es el valor de
     Medellín y la capa de Rionegro lo cambia redefiniendo --svf-acento. */
  --svf-flecha-bg: var(--svf-acento, #3d724d);
  --svf-flecha-fg: #ffffff;
  --svf-flecha-off-bg: #d6d6d6;
  --svf-flecha-off-fg: #ffffff;
  --svf-flecha-tam: 36px;
  --svf-flecha-radio: 8px;
  --svf-flecha-sep: 12px;
}

/* ---------------------------------------------------------------- Pista -- */

.svf-carrusel__pista {
  /* Sin desbordamiento (escritorio) estas reglas no hacen nada visible. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Barra de scroll fuera: el desplazamiento es con el dedo o con las flechas. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.svf-carrusel__pista::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.svf-carrusel__pista > * {
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .svf-carrusel__pista {
    scroll-behavior: auto;
  }
}

/* -------------------------------------------------------------- Flechas -- */

.svf-flechas {
  display: none;
  gap: var(--svf-flecha-sep);
  justify-content: flex-end;
  align-items: center;
  margin-top: 20px;
}

.svf-carrusel--activo .svf-flechas {
  display: flex;
}

.svf-flechas[hidden] {
  display: none;
}

.svf-flecha {
  /* !important donde _reboot.scss del tema base pisa button[type="button"]. */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--svf-flecha-tam);
  height: var(--svf-flecha-tam);
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--svf-flecha-radio) !important;
  background-color: var(--svf-flecha-bg) !important;
  color: var(--svf-flecha-fg) !important;
  cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* El tema agrega una flecha a todos los .form-submit / botones; aquí no. */
.svf-flecha::before,
.svf-flecha::after {
  content: none;
}

/* El ícono: una V dibujada con bordes y girada. */
.svf-flecha__icono {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: -2px;
}

.svf-flecha--prev .svf-flecha__icono {
  transform: rotate(135deg);
  margin-left: 0;
  margin-right: -2px;
}

/* Respaldo: si el botón no trae <span class="svf-flecha__icono">, se dibuja igual. */
.svf-flecha:not(:has(.svf-flecha__icono))::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-left: -2px;
}

.svf-flecha--prev:not(:has(.svf-flecha__icono))::after {
  transform: rotate(135deg);
  margin-left: 0;
  margin-right: -2px;
}

.svf-flecha:hover,
.svf-flecha:focus-visible {
  background-color: var(--svf-flecha-bg) !important;
  filter: brightness(.9);
}

.svf-flecha:focus-visible {
  outline: 2px solid var(--svf-flecha-bg);
  outline-offset: 2px;
}

/* Extremo alcanzado. El JS marca las tres a la vez. */
.svf-flecha:disabled,
.svf-flecha[aria-disabled="true"],
.svf-flecha.is-disabled {
  background-color: var(--svf-flecha-off-bg) !important;
  color: var(--svf-flecha-off-fg) !important;
  cursor: default;
  pointer-events: none;
  filter: none;
}

/* Texto solo para lectores de pantalla, por si la plantilla lo usa. */
.svf-flecha .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}