/* /plataforma/css/theme-switch.css
   Componente compartilhado do toggle de tema (claro/escuro/sistema) — usado em
   login.php, recuperar.php, redefinir.php, home.php e perfil.php. Ver js/theme.js
   pro comportamento. Paleta pensada pro fundo escuro (#0a1420/#101f30) que essas
   páginas já usam; funciona igual sobre o card claro quando data-theme="light".
*/
.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
html[data-theme="light"] .theme-switch {
  background: rgba(10, 20, 32, 0.05);
  border-color: rgba(10, 20, 32, 0.12);
}
.theme-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #93a9c2;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.theme-switch button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-switch button:hover {
  color: #cfe0f0;
}
.theme-switch button.is-active {
  background: #4a90d9;
  color: #08131f;
}
.theme-switch button:focus-visible {
  outline: 2px solid #6fa8e6;
  outline-offset: 2px;
}
html[data-theme="light"] .theme-switch button {
  color: #5c6b7a;
}
html[data-theme="light"] .theme-switch button:hover {
  color: #1a3a5c;
}
html[data-theme="light"] .theme-switch button.is-active {
  background: #1a3a5c;
  color: #f2f5fb;
}