/* Theo Systems · prévia da apresentação (modal no padrão .qc) */
.apv .apvbox { width: min(1120px, 100%); display: flex; flex-direction: column; gap: 12px; }
.apvstage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.apvmain { width: 100%; max-width: calc((100vh - 330px) * 16 / 9); min-width: 0; justify-self: center; }
.apvnav:disabled { opacity: .35; cursor: not-allowed; }
.apvcount { margin: 0; text-align: center; color: var(--muted); font-size: .86rem; font-variant-numeric: tabular-nums; }

/* o slide: 13,333 x 7,5 pol.; tudo dentro em % e cqw (1 pt = 100cqw / 960) */
.apv-slide {
  position: relative; width: 100%; aspect-ratio: 13.333 / 7.5; overflow: hidden;
  container-type: inline-size; background: #111; color: #111;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.apvmain .apv-slide { border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55), 0 0 0 1px var(--line); }
.apv-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.apv-tx { white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: none; font-kerning: normal; }

.apvthumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.apvthumb {
  position: relative; flex: 0 0 132px; padding: 0; border: 2px solid transparent; border-radius: 8px;
  background: none; cursor: pointer; scroll-snap-align: start; transition: border-color .15s ease, transform .15s ease;
}
.apvthumb-in { display: block; border-radius: 6px; overflow: hidden; pointer-events: none; }
.apvthumb-n {
  position: absolute; left: 4px; bottom: 4px; min-width: 18px; padding: 1px 5px; border-radius: 5px;
  background: rgba(17, 17, 17, .78); color: #fff; font: 600 .68rem/1.3 var(--body); text-align: center;
}
.apvthumb:hover { border-color: var(--line-strong); }
.apvthumb[aria-current="true"] { border-color: var(--accent); }
.apvthumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.apv .qcacts { margin-top: 0; }
.apv .qc-send .ico { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .apv { padding: 8px; }
  .apv .apvbox { padding: 14px 12px 12px; }
  .apvstage { grid-template-columns: 1fr 1fr; }
  .apvmain { grid-column: 1 / -1; grid-row: 1; max-width: none; }
  .apvnav { justify-self: center; }
  .apvthumb { flex-basis: 96px; }
  .apv .qcacts > .act { flex: 1 1 auto; }
}
/* movimento igual ao do PowerPoint: o slide esmaece (0,7 s) e os itens entram um a um,
   esmaecendo e subindo 3% da altura do slide (0,6 s, desacelerando). Só opacity + transform. */
@keyframes apvFade { from { opacity: 0; } }
@keyframes apvSobe { from { opacity: 0; transform: translateY(1.69cqw); } }
.apv-anim { animation: apvFade .7s ease-out both; }
.apv-anim .apv-a { animation: apvSobe .6s cubic-bezier(.22, .61, .36, 1) both; }
.apv .qcacts .apv-act .ico { width: 18px; height: 18px; }

/* "Apresentar aqui": tela cheia, fundo preto, slide 16:9 centralizado */
.apshow { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: #000; cursor: pointer; outline: none; }
.apshow-stage { position: relative; width: min(100vw, calc(100vh * 13.333 / 7.5)); aspect-ratio: 13.333 / 7.5; }
.apshow-stage .apv-slide { position: absolute; inset: 0; }
.apshow-hint {
  position: absolute; left: 50%; bottom: 18px; margin: 0; padding: 6px 12px; border-radius: 999px;
  transform: translateX(-50%); background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .78);
  font: 500 .8rem/1.3 var(--body, system-ui, sans-serif); pointer-events: none; transition: opacity .6s ease;
}
.apshow-hint.off { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .apvthumb { transition: none; }
  .apv-anim, .apv-anim .apv-a { animation: none; }
  .apshow-hint { transition: none; }
}