/* ============================================================
   Melhor Passagem · Agency OS — White-label (Fase 9, frontend)
   ------------------------------------------------------------
   Estilo do seletor de cor (swatches) e do botão de acesso no
   rodapé. Só CSS sob .ds-theme; o ds-whitelabel.js cria os
   elementos (gated em ds-theme). Reversível.
   ============================================================ */

/* botão "Cor do tema" no rodapé da sidebar */
.ds-theme .ds-cor-btn {
  margin-top: var(--ds-esp-6); display: inline-flex; align-items: center; gap: var(--ds-esp-6);
  background: var(--ds-branco); border: 1px solid var(--ds-n-300); border-radius: var(--ds-esp-8);
  color: var(--ds-texto-sec); font-family: var(--ds-fonte); font-size: 12px; font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); padding: var(--ds-esp-6) var(--ds-esp-10); cursor: pointer;
}
.ds-theme .ds-cor-btn:hover { background: var(--ds-n-50); color: var(--ds-brand-700); }
.ds-theme aside.ds-shell.ds-colapsada .ds-cor-btn span { display: none; }
.ds-theme aside.ds-shell.ds-colapsada .ds-cor-btn { justify-content: center; padding: var(--ds-esp-6); }

/* swatches de cor */
.ds-swatch {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--ds-raio-pill); cursor: pointer;
  background: var(--sw); border: 2px solid var(--ds-branco);
  box-shadow: 0 0 0 1px var(--ds-n-200); transition: transform .12s ease;
}
.ds-swatch:hover { transform: scale(1.08); }
.ds-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sw); border-color: var(--ds-branco); }
.ds-swatch:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ds-swatch { transition: none; } }