/*
  Switch liga/desliga — PADRÃO ÚNICO da plataforma (marcação em components/switch.html,
  comportamento em /static/pb-switch.js). Carregado por components/theme.html.

  Desligado: trilho cinza, com cara de "apagado". Ligado: rosa da marca (#F0289B).
  A bolinha desliza e a cor transita em ~190 ms. Travado/desabilitado: mesmo visual,
  esmaecido e sem ponteiro.

  Duas formas, mesmo visual:
    <button class="pb-switch" role="switch" aria-checked="true|false">   ação imediata (salva sozinha)
    <input type="checkbox" class="pb-switch">                            campo de formulário (salva com o form)

  CSS próprio (não Tailwind): o Tailwind é pré-compilado e classe nova não existiria.
  O `html` na regra base ganha do preflight do Tailwind (carregado DEPOIS e com
  `[type='submit'] { background-color: transparent }` de mesma especificidade).
*/
html .pb-switch {
  --pb-switch-w: 40px;
  --pb-switch-h: 22px;
  --pb-switch-knob: 18px;
  position: relative;
  display: inline-block;
  flex: none;
  box-sizing: border-box;
  width: var(--pb-switch-w);
  height: var(--pb-switch-h);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #D9D1D7;
  box-shadow: inset 0 1px 2px rgba(30, 10, 25, .12);
  vertical-align: middle;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .19s ease, box-shadow .19s ease, opacity .19s ease;
}
/* Área de toque maior que o desenho (celular), sem mexer no layout. */
.pb-switch::before {
  content: "";
  position: absolute;
  inset: -10px -6px;
}
.pb-switch::after {
  content: "";
  position: absolute;
  top: calc((var(--pb-switch-h) - var(--pb-switch-knob)) / 2);
  left: calc((var(--pb-switch-h) - var(--pb-switch-knob)) / 2);
  width: var(--pb-switch-knob);
  height: var(--pb-switch-knob);
  border-radius: 999px;
  background: #FAF8F9;
  box-shadow: 0 1px 3px rgba(30, 10, 25, .28);
  transform: translateX(0);
  transition: transform .19s cubic-bezier(.3, .7, .4, 1), background-color .19s ease;
}
html .pb-switch[aria-checked="true"],
html input.pb-switch:checked {
  background: #F0289B;
  box-shadow: none;
}
.pb-switch[aria-checked="true"]::after,
input.pb-switch:checked::after {
  background: #FFFFFF;
  transform: translateX(calc(var(--pb-switch-w) - var(--pb-switch-h)));
}
.pb-switch:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(.97); }
.pb-switch:focus { outline: none; }
.pb-switch:focus-visible { outline: 2px solid #F0289B; outline-offset: 2px; }

/* Travado (último admin, a própria conta...) ou desabilitado: mesmo desenho, esmaecido. */
.pb-switch:disabled,
.pb-switch[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  filter: none;
}
/* Salvando em segundo plano. */
.pb-switch[aria-busy="true"] { cursor: progress; }

/* Texto opcional ao lado ("Habilitado"/"Desabilitado"), acompanha o estado. */
.pb-switch-form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pb-switch-texto { font-size: 12px; font-weight: 700; color: #A99FA7; transition: color .19s ease; }
.pb-switch[aria-checked="true"] ~ .pb-switch-texto,
input.pb-switch:checked ~ .pb-switch-texto { color: #137A45; }

@media (prefers-reduced-motion: reduce) {
  .pb-switch, .pb-switch::after, .pb-switch-texto { transition: none; }
}