/*
 * SELETOR DE TEMA (theme-switch)
 * Controle segmentado com 3 opções (Sistema/Claro/Escuro) dentro do menu de
 * perfil. A opção ativa é marcada via .is-active pelo theme_controller.
 */

.theme-switch {
  padding: var(--space-2) var(--space-3);
}

.theme-switch__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

/* Trilho segmentado: três botões coesos, fundo recuado. */
.theme-switch__options {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  max-width: 22rem;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-md);
}

.theme-switch__option {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--space-2);
  border: none;
  border-radius: var(--radius-sm);
  background-color: transparent;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-switch__option:hover {
  color: var(--color-text);
}

/* Opção ativa: superfície elevada + texto pleno. */
.theme-switch__option.is-active {
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* O seletor de tema é representado por ícones em toda a interface
   (perfil, aba Aparência). O texto fica como rótulo acessível (aria-label). */
.theme-switch__icon {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.theme-switch__text {
  display: none;
}