/* =====================================================================
   COMPONENTE · campo de formulario
   Qué hace:    etiqueta + caja de texto (o lista) + ayuda o error.
                En celular la letra nunca baja de 16 px, para que el
                teléfono no haga zoom al tocar el campo.
   Quién lo usa: cuestionario, panel, portal.
   Depende de:  tokens.css
   Requisitos:  R-GEN-07, R-GEN-13 · arquitectura.md §4.4 (borde de campo ≥ 3:1)
   Uso:
     <label class="campo">
       <span class="campo__etiqueta">Nombre</span>
       <input class="campo__entrada" type="text">
       <span class="campo__ayuda">Como aparecerá en la invitación</span>
     </label>
   ===================================================================== */

.campo {
  display: grid;
  align-content: start; /* en una fila de campos, cada uno arriba: la ayuda no estira la caja */
  gap: var(--espacio-1);
}

.campo__etiqueta {
  font-weight: 600;
  font-size: var(--tamano-suave);
}

.campo__entrada {
  width: 100%;
  min-width: 0;
  min-height: var(--alto-control);
  padding: var(--espacio-2) var(--espacio-3);
  border: 1px solid var(--color-borde-campo);
  border-radius: var(--radio-control);
  background: var(--color-superficie);
  color: var(--color-texto);
  font: inherit;
  font-size: max(var(--tamano-base), 16px);
}

.campo__entrada:focus-visible {
  border-color: var(--color-foco);
}

.campo__ayuda {
  color: var(--color-texto-suave);
  font-size: var(--tamano-chico);
}

.campo__error {
  color: var(--color-peligro);
  font-size: var(--tamano-chico);
  font-weight: 600;
}

.campo--con-error .campo__entrada {
  border-color: var(--color-peligro);
}

/* Campo con un botón adentro, a la derecha (por ejemplo el ojito de la contraseña) */
.campo__caja {
  position: relative;
  display: grid;
}

.campo__caja .campo__entrada {
  padding-right: calc(var(--alto-control) + var(--espacio-1));
}

.campo__boton {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alto-control);
  height: 100%;
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--color-texto-suave);
  cursor: pointer;
}

.campo__boton:hover {
  color: var(--color-texto);
}

/* Un campo escondido (por ejemplo "Escribe la ciudad" hasta elegir "Otra") */
.campo[hidden] {
  display: none;
}