/*
  ============================================================
  forms.css — RECONSTRUIDO MANUALMENTE
  ============================================================
  Escribi este archivo completo. Solo se carga en 6 paginas
  (las que tienen <form>). Decidi separarlo por peso:
  index.html sin forms.css pesa ~800 lineas de CSS en vez
  de ~1000. En conexiones lentas (3G en Zamora, que las hay),
  200 lineas menos se notan.

  Contenedor con 3 variantes de ancho:
  - .contenedor-formulario: 500px por defecto
  - .contenedor-formulario-lg: 700px (publicar-vacante,
    registro-empresas, editar-perfil — tienen muchos campos)
  - .contenedor-formulario-sm: 450px (recuperar-contrasena
    tiene solo 1 campo, 500px se veia desproporcionado)
  Probe con un unico tamanio (500px) y el formulario de
  publicar-vacante se veia apretado con tantos campos.

  .fila-formulario con grid 2 columnas para nombre/apellido
  y otros pares. En movil colapsa a 1 (responsive.css).
  Probe con flex-wrap pero el gap se comportaba raro
  cuando un campo era mas largo que el otro.

  FIXME: .error-formulario usa selector ~ que asume que
  el div de error va DESPUES del input. Si alguien
  reordena el HTML, el mensaje de error no aparece.
  Solucion ideal: JS que busque el .error-formulario
  mas cercano, pero validaciones.js ya hace eso.
  ============================================================ */

/*
  Contenedor principal del formulario.
  Variantes de ancho:
  - .contenedor-formulario (por defecto): max-width 500px
  - .contenedor-formulario-lg: 700px (para publicar-vacante,
    registro-empresas, editar-perfil que tienen muchos campos)
  - .contenedor-formulario-sm: 450px (para recuperar-contrasena
    que solo tiene 1 campo)

  Los 32px de padding se reducen a 18px en movil.
  El box-shadow lo separa visualmente del fondo gris.
*/
.contenedor-formulario {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.contenedor-formulario-sm {
  max-width: 450px;
}

.contenedor-formulario-lg {
  max-width: 700px;
}

.titulo-formulario {
  font-size: 22px;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.subtitulo-formulario {
  color: #666;
  font-size: 14px;
  margin-bottom: 24px;
}

/* Grupo de formulario (label + input + error) */
.grupo-formulario {
  margin-bottom: 18px;
}

.grupo-formulario label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}

.grupo-formulario label .requerido {
  color: #ea4335;
}

/* Inputs, selects y textareas */
.control-formulario {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #dadce0;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: 0.3s;
}

.control-formulario:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

.control-formulario.error {
  border-color: #ea4335;
}

.control-formulario.exito {
  border-color: #34a853;
}

textarea.control-formulario {
  resize: vertical;
  min-height: 80px;
}

/* Mensaje de error en formularios */
.error-formulario {
  font-size: 12px;
  color: #ea4335;
  margin-top: 4px;
  min-height: 16px;
}

/* Cuando el input tiene error, mostrar el mensaje */
.control-formulario.error ~ .error-formulario {
  content: attr(data-error);
}

/* Filas de formulario (columnas lado a lado) */
.fila-formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Checkbox personalizado */
.checkbox-formulario {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.checkbox-formulario input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #1a73e8;
}

.checkbox-formulario label {
  font-size: 14px;
  color: #555;
  margin-bottom: 0;
}

/* Boton submit de ancho completo */
.btn-submit {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  margin-top: 4px;
}

/* Footer del formulario (enlaces debajo del boton) */
.pie-formulario {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

.pie-formulario a {
  color: #1a73e8;
  font-weight: 500;
}