/* 05-formularios.css
   FORMULARIOS. Tres cosas separan un formulario usable de uno frustrante:
   la etiqueta va VISIBLE (no solo placeholder), el error dice QUE corregir,
   y el foco se ve. El placeholder desaparece al escribir: nunca reemplaza
   a la etiqueta.

   NORMALIZADO: sin :root propio ni --campo-*. Lee los tokens del kit
   (--c-borde, --c-foco, --c-error, --c-superficie, --c-texto, --c-texto-suave,
   --radio-chico). El foco usa el color de FOCO del tema.
   ========================================================== */

/* MOBILE-FIRST: en el telefono una columna; a partir de 48rem, dos. Antes la base
   eran dos columnas y se bajaba a una con un max-width: al reves del sistema. */
.formulario {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hueco);
}

/* Un campo que ocupa toda la fila */
.campo { display: flex; flex-direction: column; gap: 7px; text-align: left; }
.campo--ancho { grid-column: 1 / -1; }

.campo label {
  font-size: var(--t-sm);
  font-weight: 600;
}

.campo input,
.campo select,
.campo textarea,
.campo__entrada {
  font: inherit;
  font-size: 0.95rem;
  padding: 11px 13px;
  border: 1px solid var(--c-borde-campo);
  border-radius: var(--radio-chico);
  background: var(--c-superficie);
  color: var(--c-texto);
  /* t1 */
  transition: border-color var(--t-rapido) var(--ease-salida),
              box-shadow var(--t-rapido) var(--ease-salida);
}

/* El foco se nota: borde + halo. Dos senales, no una. */
.campo input:focus,
.campo select:focus,
.campo textarea:focus,
.campo__entrada:focus {
  outline: none;
  border-color: var(--c-foco);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-foco) 22%, transparent);
}

.campo textarea { resize: vertical; min-height: 110px; font-family: inherit; }

/* Texto de ayuda bajo el campo */
.campo .ayuda { font-size: var(--t-xs); color: var(--c-texto-suave); }

/* Estado de error: borde rojo y el mensaje explica que hacer */
.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--c-error); }

.campo--error .ayuda { color: var(--c-error); }

/* Agrupaciones (radios, casillas) */
.grupo-opciones { display: flex; gap: 16px; flex-wrap: wrap; }
.opcion { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; cursor: pointer; }
/* El navegador dibuja el cuadro de una opcion a 13px. Con 20px se acerca al
   objetivo; el <label> entero es el area que recibe el toque. */
.opcion input { width: 20px; height: 20px; }

/* Nunca dejar el foco invisible */
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible { outline: none; }

@media (min-width: 48rem) {
  .formulario { grid-template-columns: 1fr 1fr; }
}