/* ============================================================
   FORMULÁRIOS — campo (label + input + hint/erro), caixa de erro
   e o campo de busca do DS.
   ============================================================ */

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-2);
}
.campo__label--grande {
  font-size: 14px;
  font-weight: 700;
}
.campo__obrigatorio {
  color: var(--perigo-texto);
}

.campo__input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--borda-input);
  border-radius: 4px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--texto);
  outline: none;
  background: var(--sup);
  font-family: inherit;
}
.campo__input:focus {
  border-color: var(--azul);
}
.campo__input--grande {
  height: 48px;
  padding: 0 14px;
}
.campo__input--area {
  height: auto;
  min-height: 120px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.6;
}

select.campo__input {
  cursor: pointer;
}

.campo__hint {
  font-size: 12px;
  color: var(--texto-suave);
  margin: 0;
}

/* Caixa de erro de formulário (credenciais inválidas, validações) */
.caixa-erro {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--vermelho-caixa);
  border: 1px solid var(--vermelho-borda);
  border-left: 4px solid var(--vermelho);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--vermelho);
}
.caixa-erro svg {
  flex-shrink: 0;
}

/* Checkbox/radio do DS */
.check {
  width: 16px;
  height: 16px;
  accent-color: var(--marca-texto);
  cursor: pointer;
}

/* Campo de busca padrão (DS): lupa à esquerda + estados
   (hover = borda mais escura, active/focus = borda navy). */
.campo-busca {
  height: 36px;
  border: 1px solid var(--linha-forte);
  border-radius: 8px;
  padding: 0 12px 0 34px;
  font-size: 13px;
  color: var(--txt-2);
  outline: none;
  box-sizing: border-box;
  background: var(--sup)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8b8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E")
    no-repeat 11px center;
  background-size: 16px;
  transition: border-color 0.15s;
  font-family: inherit;
}
.campo-busca:hover {
  border-color: var(--linha-hover);
}
.campo-busca:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 2px rgba(3, 56, 96, 0.08);
}

/* ── Hover de todo campo (vale para qualquer tela) ──
   Campo de texto/select: a borda escurece (sem brigar com o foco).
   Checkbox/radio: halo. Arquivo: botão "Escolher arquivo" do tema. */
:is(select, textarea, input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="submit"], [type="button"], [type="hidden"])):not(:disabled):not(:focus):hover {
  border-color: var(--linha-hover);
}
input:is([type="checkbox"], [type="radio"]):not(:disabled) {
  cursor: pointer;
  transition: box-shadow 0.12s;
}
input[type="radio"] { border-radius: 50%; }
input:is([type="checkbox"], [type="radio"]):not(:disabled):hover {
  box-shadow: 0 0 0 4px var(--marca-suave-forte);
}
input[type="file"] { cursor: pointer; }
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 6px;
  background: var(--sup);
  color: var(--txt-1);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
input[type="file"]:not(:disabled):hover::file-selector-button {
  background: var(--sup-hover);
  border-color: var(--linha-hover);
}