/* AF — rolagem das abas com setas laterais — 13/08/2026
 *
 * As barras de abas (ficha do assistido, etc.) já rolavam na horizontal,
 * mas com a barra de rolagem escondida: quando a última aba ficava cortada
 * não havia nenhuma pista de que existia mais coisa ao lado.
 * Este arquivo desenha as setas e o esmaecimento das bordas; quem decide
 * quando cada seta aparece é o tabs-rolagem-20260813.js.
 */

.af-tabs-host {
  position: relative;
}

/* a rolagem suave é animada pelo script (o scroll-behavior nativo é
   inconsistente aqui e brigaria com a animação) */
.af-tabs-lista {
  scroll-behavior: auto;
  scroll-padding-left: 3.25rem;
  scroll-padding-right: 3.25rem;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* faixa que cobre exatamente a barra de abas; não intercepta cliques,
   só as setas dentro dela é que são clicáveis */
.af-tabs-nav {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* ---------- setas ---------- */
.af-tabs-seta {
  position: absolute;
  top: 0;
  bottom: 0;
  display: none;
  align-items: center;
  width: 3rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  color: hsl(var(--muted-foreground));
  background: none;
  -webkit-tap-highlight-color: transparent;
}

.af-tabs-nav.af-tem-esq > .af-tabs-seta-esq,
.af-tabs-nav.af-tem-dir > .af-tabs-seta-dir {
  display: flex;
}

.af-tabs-seta-esq {
  left: 0;
  justify-content: flex-start;
  background: linear-gradient(
    to right,
    var(--af-tabs-fundo, hsl(var(--background))) 0%,
    var(--af-tabs-fundo, hsl(var(--background))) 60%,
    transparent 100%
  );
}

.af-tabs-seta-dir {
  right: 0;
  justify-content: flex-end;
  background: linear-gradient(
    to left,
    var(--af-tabs-fundo, hsl(var(--background))) 0%,
    var(--af-tabs-fundo, hsl(var(--background))) 60%,
    transparent 100%
  );
}

/* o chevron fica numa pastilha discreta, para ler como botão */
.af-tabs-seta svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  padding: 0.25rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: var(--af-tabs-fundo, hsl(var(--background)));
  transition: color .12s, background-color .12s, border-color .12s, transform .12s;
}

.af-tabs-seta:hover svg {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
  border-color: hsl(var(--foreground) / .3);
}

.af-tabs-seta:active svg {
  transform: scale(.94);
}

.af-tabs-seta:focus-visible {
  outline: none;
}
.af-tabs-seta:focus-visible svg {
  color: hsl(var(--foreground));
  box-shadow: 0 0 0 2px hsl(var(--ring) / .45);
}

/* ---------- celular ---------- */
@media (max-width: 640px) {
  /* abas mais compactas: cabe mais coisa antes de precisar rolar */
  .af-tabs-lista {
    gap: 1.125rem !important;
    scroll-padding-left: 2.75rem;
    scroll-padding-right: 2.75rem;
  }
  .af-tabs-lista > button {
    font-size: .8125rem;
    white-space: nowrap;
  }
  .af-tabs-seta {
    width: 2.5rem;
  }
  .af-tabs-seta svg {
    width: 1.375rem;
    height: 1.375rem;
  }
}