/* Peças do redesign da Rede (plan/32): folha v2, carrossel, aviso com ação.
   Cor só por token semântico (web/app.css, quatro temas). */

/* ── folha v2 ─────────────────────────────────────────────────────────────── */
/* A alça vira alvo de verdade: o traço continua 40×5, a área de pegar cresce. */
.sv-alca { box-sizing: content-box; padding: 10px 24px; background-clip: content-box; cursor: grab; touch-action: none; }
.sv-folha { transition: transform .18s ease; }
.sv-folha[data-altura="alta"] { height: 85dvh; max-height: 85dvh; }
.sv-folha[data-altura="cheia"] { height: 100dvh; max-height: 100dvh; border-radius: 0; max-width: none; }

/* ── carrossel ────────────────────────────────────────────────────────────── */
.ui-car { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--superficie-2); }
.ui-car-trilho { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ui-car-trilho::-webkit-scrollbar { display: none; }
.ui-car-trilho:focus-visible { outline: 3px solid var(--acao); outline-offset: -3px; }
.ui-car-slide { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.ui-car-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ui-car-cont { position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 999px;
  background: var(--etiqueta-foto-fundo); color: var(--sobre-foto); font-size: 11px; font-weight: 600; }
.ui-car-pontos { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px;
  pointer-events: none; }
.ui-car-ponto { width: 6px; height: 6px; border-radius: 999px; background: var(--sobre-foto-apagado);
  transition: width .15s ease; }
.ui-car-ponto.on { width: 14px; background: var(--sobre-foto); }

/* ── aviso com ação ───────────────────────────────────────────────────────── */
.msg { display: flex; align-items: center; gap: var(--esp-3); }
.msg .ui-aviso-b { min-height: 44px; background: transparent; color: var(--acao-texto); padding: 0 var(--esp-2);
  font-weight: 700; }

/* ── galeria #/design (só admin) ─────────────────────────────────────────── */
.dz-tela { display: flex; flex-direction: column; gap: 28px; max-width: 1180px; margin: 0 auto; }
.dz-cab h2 { margin: 0; }
.dz-secao > h3 { margin: 0 0 10px; color: var(--texto); }
.dz-amostra { display: flex; flex-direction: column; gap: 12px; }
.dz-pecas { flex-direction: row; flex-wrap: wrap; align-items: center; }
@media (min-width: 1000px) {
  .dz-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-folha, .ui-car-ponto { transition: none; }
  .ui-car-trilho { scroll-behavior: auto; }
}