/* ============================================================
 * Índice de rolagem lateral — estrutura PADRÃO dos três sites.
 * Neste produto, as cores seguem a identidade da Certa Fiscal.
 *
 * --psi-header pode ser sobrescrita quando o cabeçalho for diferente.
 * ============================================================ */

.page-scroll-index {
  /* Identidade Certa Fiscal: terracota, papel quente e tinta marrom. */
  --psi-laranja: #d97757;
  --psi-laranja-borda: #9f4f38;
  --psi-ink: #2b2420;
  --psi-branco: #fff8f3;
  --psi-foco: #f1a487;
  --psi-fast: 150ms;
  --psi-ease: cubic-bezier(.16, 1, .3, 1);
  --psi-header: 4.75rem;
}

.page-scroll-index[hidden] { display: none !important; }

.page-scroll-index {
  position: fixed;
  z-index: 700;
  inset: calc(var(--psi-header) + .85rem) .25rem 1rem auto;
  width: 1rem;
  transition: width var(--psi-fast) var(--psi-ease);
}

.page-scroll-index:hover,
.page-scroll-index:focus-within { width: 1.2rem; }

.page-scroll-index__track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--psi-laranja-borda);
  border-radius: 999px;
  background: var(--psi-laranja);
  cursor: pointer;
  outline: none;
}

.page-scroll-index__track:focus-visible { outline: 3px solid var(--psi-foco); outline-offset: 3px; }

.page-scroll-index__thumb {
  position: absolute;
  z-index: 2;
  inset: 0 .2rem auto;
  min-height: 2.5rem;
  border-radius: 999px;
  background: var(--psi-ink);
  cursor: grab;
  touch-action: none;
}

.page-scroll-index__thumb:active,
html.page-scroll-index--dragging .page-scroll-index__thumb { cursor: grabbing; }

.page-scroll-index__marks { position: absolute; z-index: 3; inset: 0; pointer-events: none; }

.page-scroll-index__mark {
  position: absolute;
  right: 50%;
  width: 2rem;
  height: 2rem;
  border: 0;
  background: transparent;
  transform: translate(50%, -50%);
  pointer-events: auto;
  cursor: pointer;
}

.page-scroll-index__dot {
  position: absolute;
  inset: 50% auto auto 50%;
  width: .38rem;
  height: .38rem;
  border: 1px solid var(--psi-branco);
  border-radius: 50%;
  background: var(--psi-branco);
  transform: translate(-50%, -50%);
}

.page-scroll-index__mark.is-active .page-scroll-index__dot,
.page-scroll-index__mark:hover .page-scroll-index__dot,
.page-scroll-index__mark:focus-visible .page-scroll-index__dot {
  width: .7rem;
  height: .7rem;
  background: var(--psi-ink);
}

.page-scroll-index__label {
  position: absolute;
  inset: 50% calc(100% + .65rem) auto auto;
  width: max-content;
  max-width: min(18rem, calc(100vi - 4rem));
  padding: .45rem .65rem;
  background: var(--psi-ink);
  color: var(--psi-branco);
  font: 700 .68rem/1.3 var(--psi-fonte, ui-sans-serif, system-ui, sans-serif);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(.4rem, -50%);
  transition: opacity var(--psi-fast), transform var(--psi-fast), visibility var(--psi-fast);
}

.page-scroll-index__mark:hover .page-scroll-index__label,
.page-scroll-index__mark:focus-visible .page-scroll-index__label {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

/* A barra nativa some SÓ enquanto o índice está ativo (classe posta pelo JS
   quando a página é longa) — nunca fica página sem meio visível de rolar. */
@media (min-width: 68.01rem) and (pointer: fine) {
  html.has-page-scroll-index { scrollbar-width: none; }
  html.has-page-scroll-index::-webkit-scrollbar,
  html.has-page-scroll-index body::-webkit-scrollbar { width: 0; height: 0; }
}

@media (max-width: 68rem), (pointer: coarse) {
  .page-scroll-index { display: none !important; }
}

@media (min-width: 68.01rem) and (pointer: fine) {
  body.modo-edicao .page-scroll-index { bottom: 3.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-scroll-index,
  .page-scroll-index__label { transition: none; }
}