/**
 * Lo propio de /web/: el formulario del borrador.
 *
 * Reutiliza .pr-zona__campo de prospeccion.css —la etiqueta en versalitas y el
 * control sobre tinta— porque es el mismo control sobre el mismo fondo. Lo que
 * cambia es la FORMA del formulario: los otros dos tienen dos campos y caben en
 * una fila; éste tiene cuatro y en una fila saldrían cuatro columnas
 * estrujadas. Aquí va en rejilla de dos, que en móvil cae a una.
 *
 * Solo tokens --kairikos-*. Si falta un color o una medida, se añade al :root
 * del tema padre; aquí no se escribe ni un hex.
 */

.we-form {
  max-width: 46rem;
}

.we-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--kairikos-sp-4);
  text-align: left;
}

/* Los <input> de texto no existían en prospeccion.css —allí son dos <select>—
   así que se visten aquí, con los mismos valores para que se vean iguales al
   lado del desplegable de sector. */
.we-campos input {
  width: 100%;
  padding: var(--kairikos-sp-3) var(--kairikos-sp-4);
  font-family: var(--kairikos-font-sans);
  font-size: var(--kairikos-fs-md);
  color: var(--kairikos-hueso);
  background: var(--kairikos-velo-sobre-tinta);
  border: 1px solid var(--kairikos-border-sobre-tinta);
  border-radius: var(--kairikos-radius-lg);
}

.we-campos input::placeholder {
  color: rgba(250, 246, 238, .45);
}

.we-campos input:focus-visible {
  outline: 2px solid var(--kairikos-hueso);
  outline-offset: 2px;
}

.we-enviar {
  margin-top: var(--kairikos-sp-5);
}

.we-resultado {
  margin: var(--kairikos-sp-5) 0 0;
}

@media (max-width: 767px) {
  .we-campos {
    grid-template-columns: minmax(0, 1fr);
  }

  .we-enviar .btn {
    width: 100%;
    justify-content: center;
  }
}