/* Botão de tema claro/escuro do molde (par do tema.js; cópia igual em cada site: edite aqui e copie).
   Sem JS o botão fica escondido (hidden): o tema segue o sistema só pelo CSS. Cores pelas variáveis
   --tema-* do site, com currentColor de reserva. A lua aparece no escuro e o sol no claro. */
.tema-botao{display:inline-grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border-radius:999px;cursor:pointer;
  color:var(--tema-cor,currentColor);background:var(--tema-fundo,transparent);border:1px solid var(--tema-borda,currentColor);
  transition:background-color .2s,border-color .2s,transform .2s}
.tema-botao[hidden]{display:none}
.tema-botao:hover{border-color:var(--tema-foco,currentColor)}
.tema-botao:active{transform:scale(.94)}
.tema-botao:focus-visible{outline:3px solid var(--tema-foco,currentColor);outline-offset:2px}
.tema-botao svg{width:18px;height:18px;display:block}
.tema-botao .tema-sol{display:none}
.tema-botao[aria-pressed="false"] .tema-sol{display:block}
.tema-botao[aria-pressed="false"] .tema-lua{display:none}
@media (prefers-reduced-motion:no-preference){.tema-botao svg{transition:transform .4s cubic-bezier(.16,1,.3,1)}.tema-botao:hover svg{transform:rotate(-20deg)}}