/* =============================================================================
 * Botão de tema — quadrado com ícone
 * =============================================================================
 *
 * Substituiu o switch de pílula do Uiverse em 16/09/2026, a pedido do dono.
 *
 * O QUE O BOTÃO MOSTRA, E POR QUÊ
 *
 * O ícone é o DESTINO, não o estado atual: no tema escuro aparece um sol
 * ("clique para clarear"), no claro aparece uma lua. É a convenção que quase
 * todo mundo já viu (GitHub, documentação do Tailwind), e é a que o desenho
 * aprovado mostra — um sol sobre o fundo escuro.
 *
 * O estado ATUAL continua dito em palavras, não só em desenho: o `aria-label`
 * que o `pf_tema_switch()` emite diz as duas metades ("Tema escuro. Ativar o
 * tema claro."), e o `js/pf-theme-runtime.js` o reescreve a cada troca. Quem
 * usa leitor de tela nunca depende do ícone.
 *
 * O CONTRATO COM O JAVASCRIPT NÃO MUDOU
 *
 * O runtime (`js/pf-theme-runtime.js`) escuta `change` em `[data-pf-switch]`,
 * lê `checked` como CLARO e procura o ancestral `.toggle-switch` para escrever
 * o `title`. Por isso o elemento continua sendo um `<input type="checkbox">`
 * com as mesmas classes: trocar por um `<button>` obrigaria a mexer no runtime,
 * que é carregado por páginas com `<head>` próprio (comercial.php) e pelo
 * super-admin. Um botão bonito não vale um tema que para de trocar.
 *
 * O checkbox fica invisível e FOCÁVEL — não `display: none`, que o tiraria do
 * teclado inteiro. O foco aparece como anel na superfície do botão.
 *
 * A PALETA É PRÓPRIA, de novo de propósito. Este arquivo carrega sempre,
 * inclusive com a pele antiga (`?pele=antiga`), onde os tokens do design system
 * podem não existir. Um controle de tema sem estilo é pior que um controle feio.
 *
 * BUMPAR `PF_SWITCH_VER` em includes/theme.php A CADA EDIÇÃO DESTE ARQUIVO.
 * O .htaccess cacheia CSS por um ano; sem bump, a edição não chega em ninguém.
 * ========================================================================== */

.toggle-switch {
  --bt-lado:  40px;   /* o quadrado */
  --bt-raio:  11px;
  --bt-icone: 20px;

  /* Claro: traço escuro sobre superfície quase branca. */
  --bt-borda:  rgba(15, 23, 42, .14);
  --bt-fundo:  rgba(15, 23, 42, .03);
  --bt-traco:  #334155;
  --bt-hover:  rgba(15, 23, 42, .07);
  --bt-foco:   #2563eb;

  position: relative;
  width:  var(--bt-lado);
  height: var(--bt-lado);
  flex: none;                 /* dentro de um flex, não deixar espremer */
}

/* Escuro: traço claro sobre superfície quase preta. `html.dark` é a classe que
   o includes/theme.php escreve no primeiro byte — por isso não há piscada. */
html.dark .toggle-switch {
  --bt-borda: rgba(255, 255, 255, .16);
  --bt-fundo: rgba(255, 255, 255, .04);
  --bt-traco: #e2e8f0;
  --bt-hover: rgba(255, 255, 255, .10);
  --bt-foco:  #60a5fa;
}

/* Variante para barra estreita: a barra de ferramentas do comercial.php tem
   ~30px de altura útil, e a barra do painel divide espaço com o sino de 24px. */
.toggle-switch--compacto {
  --bt-lado:  34px;
  --bt-raio:  10px;
  --bt-icone: 17px;
}

.toggle-switch .switch-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  border: 1px solid var(--bt-borda);
  border-radius: var(--bt-raio);
  background-color: var(--bt-fundo);
  color: var(--bt-traco);
  transition: background-color .18s ease, border-color .18s ease;
}

.toggle-switch .switch-label:hover {
  background-color: var(--bt-hover);
}

.toggle-switch .switch-label:active {
  transform: translateY(1px);   /* desce 1px: a micro-interação do sistema */
}

/* Invisível, e ainda assim focável. Ver o cabeçalho. */
.toggle-switch .checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.toggle-switch .checkbox:focus-visible ~ .slider {
  outline: 2px solid var(--bt-foco);
  outline-offset: 3px;
  border-radius: var(--bt-raio);
}

/* A caixa dos dois ícones. Eles ficam empilhados no mesmo lugar e só um está
   visível — assim a troca não muda o tamanho do botão nem empurra o vizinho. */
.toggle-switch .slider {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.toggle-switch .ico {
  grid-area: 1 / 1;
  width:  var(--bt-icone);
  height: var(--bt-icone);
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity .18s ease, transform .18s ease;
}

/* `checked` = tema CLARO (contrato antigo, mantido). Claro mostra a lua, que é
   para onde o clique leva; escuro mostra o sol. */
.toggle-switch .ico-lua { opacity: 0; transform: rotate(-35deg) scale(.7); }
.toggle-switch .ico-sol { opacity: 1; transform: none; }

.toggle-switch .checkbox:checked ~ .slider .ico-sol { opacity: 0; transform: rotate(35deg) scale(.7); }
.toggle-switch .checkbox:checked ~ .slider .ico-lua { opacity: 1; transform: none; }

/* Quem prefere menos movimento não precisa da animação para entender o estado:
   a opacidade sozinha já diz qual ícone está valendo. */
@media (prefers-reduced-motion: reduce) {
  .toggle-switch .switch-label,
  .toggle-switch .ico { transition: none; }
  .toggle-switch .ico-lua,
  .toggle-switch .checkbox:checked ~ .slider .ico-sol { transform: none; }
  .toggle-switch .switch-label:active { transform: none; }
}

/* Contraste forçado (Windows): sem cor, o que resta é a forma. A borda tem de
   sobreviver, senão o botão some da tela. */
@media (forced-colors: active) {
  .toggle-switch .switch-label { border-color: ButtonBorder; background: ButtonFace; }
  .toggle-switch .ico { stroke: ButtonText; }
}