/*
  dev-tools-panel.css — painel de ferramentas do PROTÓTIPO, não faz parte da
  interface final. O mockup aprovado não tem seletor de tema nesta tela
  (revisão visual 2) — mantido aqui, isolado e identificado, só para testar
  os 4 temas durante o desenvolvimento. Deve migrar para
  "Configurações → Aparência" quando essa página existir.

  Revisão visual 3 (itens 10/11): Codex reportou que o painel, sempre aberto,
  cobria conteúdo real nas capturas de validação (rodapé da sidebar no
  desktop, cards de perfil no celular). Virou um botão pequeno recolhido por
  padrão — só expande com clique/toque — para não aparecer sobre a interface
  nas capturas tiradas sem interação.
*/
.dev-tools-panel {
  position: fixed;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.dev-tools-panel__toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #1c1c1c;
  color: #ffd166;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.dev-tools-panel__body {
  background: #1c1c1c;
  color: #f2f2f2;
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  max-width: calc(100vw - var(--space-7) - var(--space-3) * 2);
}

.dev-tools-panel__body[hidden] {
  display: none;
}

.dev-tools-panel__label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ffd166;
  white-space: nowrap;
}

.dev-tools-panel select {
  font-size: var(--font-size-xs);
  border-radius: 6px;
  border: 1px solid #4a4a4a;
  padding: 3px 6px;
  background: #2a2a2a;
  color: #f2f2f2;
}

@media (max-width: 640px) {
  .dev-tools-panel {
    left: var(--space-2);
    bottom: var(--space-2);
  }
}