/* =========================================================
   Componente: Formulários
   ========================================================= */
.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--cinza-700);
  margin-bottom: 5px;
}

.campo label .obrigatorio { color: var(--vermelho); margin-left: 2px; }

.entrada,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="time"], input[type="tel"],
input[type="month"],
select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borda-input);
  border-radius: var(--raio-md);
  background: var(--fundo-input);
  color: var(--texto);
  font-size: .875rem;
  transition: border-color var(--transicao), box-shadow var(--transicao);
  outline: none;
  appearance: none;
}

.entrada:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--borda-foco);
  box-shadow: 0 0 0 3px rgba(232,164,200,.18);
}

/* ── Inputs de data e hora ────────────────────────────── */
input[type="date"],
input[type="time"],
input[type="month"] {
  color-scheme: light;          /* garante picker claro mesmo no OS escuro */
  cursor: pointer;
  padding-right: 10px;
}

/* Ícone nativo do calendário / relógio — estiliza para a cor da marca */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  opacity: .45;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px;
  transition: opacity .2s;
  /* tinge o ícone para o rosa da marca */
  filter: invert(60%) sepia(30%) saturate(600%) hue-rotate(290deg) brightness(90%);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator {
  opacity: 1;
}
input[type="date"]:focus::-webkit-calendar-picker-indicator,
input[type="time"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

textarea { resize: vertical; min-height: 90px; }

.entrada::placeholder,
input::placeholder { color: var(--cinza-400); }

/* Grupo com ícone */
.campo-icone { position: relative; }
.campo-icone .icone-entrada {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--cinza-400);
  font-size: .85rem;
  pointer-events: none;
}
.campo-icone input { padding-left: 32px; }

/* Ver senha */
.botao-olho {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--cinza-400); cursor: pointer;
}
.botao-olho:hover { color: var(--cinza-600); }

/* Feedback */
.campo-erro   { font-size: .75rem; color: var(--vermelho); margin-top: 4px; }
.campo-dica   { font-size: .75rem; color: var(--texto-suave); margin-top: 4px; }
.entrada-erro { border-color: var(--vermelho) !important; }

/* Linha de 2 colunas */
.linha-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Cartão de formulário */
.cartao-form {
  background: var(--fundo-cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  padding: 24px;
}
.cartao-form-titulo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--borda);
}

/* Wrapper máximo de largura para formulários */
.form-container    { max-width: 640px; }
.form-container-md { max-width: 720px; }

/* Grade 2 colunas para formulários (campos individuais) */
.form-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.campo-cheio { grid-column: 1 / -1; }

/* Ações do formulário — botões de cancelar/salvar */
.form-acoes {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  justify-content: flex-end;
}

@media (max-width: 500px) {
  .form-grade { grid-template-columns: 1fr; }
  .campo-cheio { grid-column: 1; }
  .form-acoes { flex-direction: column-reverse; }
  .form-acoes .btn { width: 100%; justify-content: center; }
}