/* ==============================================
 * Formularios — limpio y consistente con style.css
 * ============================================== */

/* Contenedor tipo tarjeta para secciones de formularios */
.form-card{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow-color);
  padding: 1rem 1.2rem 1.2rem;
}

/* Grilla de formulario (2 columnas en desktop, 1 en móvil) */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.25rem;
}
@media (max-width: 768px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* Fila única a ancho completo */
.form-row{ display: grid; gap: .5rem; }
.form-row--full{ grid-column: 1 / -1; }

/* Etiquetas */
label{
  display: inline-block;
  margin-bottom: .35rem;
  font-weight: 600;
  color: #0f172a;
}

/* Campos de texto — coherentes con style.css, un poco más altos */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea{
  width: 100%;
  background: #fff;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: .65rem .85rem;
  outline: none;
  transition: border .15s, box-shadow .15s, background .15s;
  font-size: 1rem;
}
textarea{ min-height: 120px; resize: vertical; }

input:focus,
select:focus,
textarea:focus{
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}

/* Texto auxiliar / ayudas bajo los campos */
.form-hint{
  color: var(--text-muted);
  font-size: .9rem;
}

/* Agrupador de acciones al final del formulario */
.form-actions{
  display: flex;
  gap: .6rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}

/* Botón ancho en móvil si hace falta */
@media (max-width:640px){
  .btn--block{ width: 100%; }
}

/* Campo de archivo: estilo suave y consistente */
.input-file{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: #fbfdff;
  border: 1px dashed #dbe4f0;
  border-radius: 12px;
  padding: .6rem .75rem;
}
.input-file input[type="file"]{
  all: unset;
  font-size: .95rem;
  color: var(--text-color);
  cursor: pointer;
}
.input-file .input-file__hint{
  color: var(--text-muted);
  font-size: .9rem;
}

/* Thumb/Avatar pequeño dentro de formularios (perfil) */
.form-thumb{
  width: 72px; height: 72px; border-radius: 50%;
  overflow: hidden; flex: 0 0 72px;
  box-shadow: 0 1px 4px rgba(16,24,40,.12);
}
.form-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Línea separadora sutil entre bloques de un mismo formulario */
.form-sep{
  height: 1px;
  background: #EFF3F7;
  margin: .75rem 0;
}

/* Estados de validación simples (opcionales) */
.is-invalid{
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,.12) !important;
}
.field-error{
  margin-top: .25rem;
  color: #b4232b;
  font-size: .9rem;
}