/**
 * css/forms.css
 * Formularios: etiquetas, campos de texto, contraseña, errores de validación
 * y rejillas de dos columnas.
 */

/* Etiquetas y campos de texto */
label {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  margin: 16px 0 6px;
}
.inp {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--card);
}
.inp:focus {
  border-color: var(--indigo2);
  outline: 0;
  box-shadow: 0 0 0 4px #3a379022;
}
/* Campo de contraseña con botón mostrar/ocultar */
.pw {
  position: relative;
}
.pw button {
  position: absolute;
  right: 8px;
  top: 7px;
  border: 0;
  background: 0;
  color: var(--mute);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
/* Rejilla de dos columnas para formularios */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
/* Mensaje de validación bajo un campo */
.err {
  color: var(--bad);
  font-size: 12.5px;
  margin-top: 4px;
}
.foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}