/* ============================================================
   Campos de formulário do site público — sem framework
   ============================================================
   Mira o ELEMENTO, não a classe. O Django monta os widgets em Python e carimba
   neles `form-control`, `form-select` e `form-check-input`, que são nomes do
   Bootstrap; estilizar por esses nomes significaria redefinir vocabulário de um
   framework que estas telas não carregam mais, e deixaria de fora todo widget
   cuja classe alguém esquecesse de declarar.

   Mirando o elemento dentro do `main`, qualquer campo que o Django renderizar
   fica coerente sem exigir mudança em Python. Renomear as quinze declarações de
   classe nos forms é limpeza posterior, não pré-requisito.

   A folha só carrega nas telas já migradas, então nada disto alcança o painel
   admin nem o wizard do PMC, que continuam em Bootstrap.
   ============================================================ */

main :where(input[type='text'], input[type='email'], input[type='url'],
             input[type='tel'], input[type='password'], input[type='number'],
             input[type='date'], select, textarea) {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  border: var(--borda-controle);
  border-radius: var(--raio-sm);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transicao-curta), background var(--transicao-curta);
}

main :where(input, select, textarea)::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

main :where(input, select, textarea):focus-visible {
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
  outline: 3px solid rgba(255, 144, 0, 0.35);
  outline-offset: 2px;
}

main textarea {
  min-height: 7rem;
  resize: vertical;
}

/* O seletor do sistema operacional destoa do tema escuro; a seta vem desenhada
   aqui, como no resto do projeto. */
main select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary) 50%),
    linear-gradient(135deg, var(--primary) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 1.35rem, calc(100% - 1rem) 1.35rem;
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-repeat: no-repeat;
}

main label {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 700;
}

/* ── Caixa de seleção ──
   Mesmo desenho que o painel do gestor recebeu: controle do sistema operacional
   substituído por um que combina com o tema, com a marca vinda da borda no modo
   de alto contraste, onde cor de fundo declarada é ignorada. */

main :where(input[type='checkbox'], input[type='radio']):not(.switch input) {
  display: inline-grid;
  place-content: center;
  width: 1.25rem;
  min-height: 0;
  height: 1.25rem;
  padding: 0;
  appearance: none;
  /* 3:1 sobre o fundo, mínimo da WCAG 1.4.11 para delimitar controle. */
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

main input[type='radio']:not(.switch input) {
  border-radius: 50%;
}

/* O `:not(.switch input)` precisa estar AQUI também, e não é enfeite: sem ele
   esta regra fica em 0-1-1 enquanto a regra base, que ganhou o `:not()`, fica em
   0-1-2. A base vence o estado, e a caixa marcada fica idêntica à desmarcada.
   `:where()` não soma especificidade; `:not()` soma a do argumento mais
   específico, que aqui é `.switch input`.

   Medido em 21/08 na tela de cadastro: marcado e desmarcado devolviam a mesma
   borda e o mesmo fundo, e o gestor não tinha como saber se havia consentido. */
main :where(input[type='checkbox'], input[type='radio']):not(.switch input):checked {
  border-color: var(--primary);
  background: var(--primary);
}

main input[type='checkbox']:not(.switch input)::before {
  content: '';
  width: 0.72rem;
  height: 0.4rem;
  border-left: 2px solid #1a1a1e;
  border-bottom: 2px solid #1a1a1e;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--transicao-curta);
}

main input[type='checkbox']:not(.switch input):checked::before {
  transform: rotate(-45deg) scale(1);
}

@media (forced-colors: active) {
  main :where(input[type='checkbox'], input[type='radio']) {
    border-color: CanvasText;
  }
  main :where(input[type='checkbox'], input[type='radio']):checked {
    background: Highlight;
  }
  main input[type='checkbox']::before {
    border-left-color: HighlightText;
    border-bottom-color: HighlightText;
  }
}

/* Rótulo colado na caixa entra no alvo de toque junto com ela.
   O `.switch` fica de fora: ele TAMBÉM é um label que contém a caixa, e sem a
   exceção esta regra troca o `display` dele e achata a pílula do interruptor em
   uma bola. Medido na tela de cadastro. */
main label:not(.switch):has(> input[type='checkbox']),
main label:not(.switch):has(> input[type='radio']) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin: 0;
  color: var(--color-text);
  font-weight: 400;
  cursor: pointer;
}

/* ── Interruptor do diagnóstico ──
   Os marcos legais da tela de cadastro. A caixa real fica escondida e o
   interruptor é desenhado por cima, mas o controle continua sendo o `input`:
   teclado, foco e leitor de tela seguem falando com ele. */

main .switch {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 3.1rem;
  height: 1.75rem;
  margin: 0;
}

main .switch input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

main .switch .slider {
  position: absolute;
  inset: 0;
  border: var(--borda-controle);
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, 0.06);
  transition: background var(--transicao-curta), border-color var(--transicao-curta);
  pointer-events: none;
}

main .switch .slider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.22rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--color-text-muted);
  transform: translateY(-50%);
  transition: transform var(--transicao-curta), background var(--transicao-curta);
}

main .switch input:checked + .slider {
  border-color: var(--primary);
  background: rgba(255, 144, 0, 0.28);
}

main .switch input:checked + .slider::before {
  background: var(--primary);
  transform: translate(1.3rem, -50%);
}

main .switch input:focus-visible + .slider {
  outline: 3px solid rgba(255, 144, 0, 0.55);
  outline-offset: 2px;
}

main .toggle-list-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.35rem 0;
}

main .toggle-label {
  margin: 0;
  color: var(--color-text);
  font-weight: 400;
  cursor: pointer;
}

/* ── Mensagem de erro do formulário ── */

main .erro-campo {
  margin-top: 0.35rem;
  color: #ff8f8f;
  font-size: 0.9rem;
  font-weight: 600;
}