/* =========================================================================
   Instituto Culinario Danieli — Formularios
   Hoja compartida por todos los formularios del sitio (admisiones, curso,
   empresas y contacto). Antes estos estilos estaban duplicados en
   admisiones.css y cursos.css; aquí viven una sola vez.

   Marcado: includes/form-lead.php · Comportamiento: js/lead.js
   ========================================================================= */

.form-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.f-campo { display: flex; flex-direction: column; gap: 7px; }
.f-campo label { font-size: 12.5px; letter-spacing: .01em; color: var(--nav); }
.f-campo label span[aria-hidden] { color: #a4562f; }
.f-opc { color: var(--soft); }

.f-campo input,
.f-campo textarea,
.f-campo select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  appearance: none;
}
.f-campo textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.f-campo input:hover, .f-campo textarea:hover, .f-campo select:hover { border-color: #c6ced4; }
.f-campo input:focus-visible,
.f-campo textarea:focus-visible,
.f-campo select:focus-visible {
  outline: 0;
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}
.f-campo input[aria-invalid="true"],
.f-campo textarea[aria-invalid="true"],
.f-campo select[aria-invalid="true"] { border-color: #a4562f; }

.f-select { position: relative; display: block; }
.f-select svg {
  position: absolute; right: 14px; top: 50%;
  width: 17px; height: 17px;
  margin-top: -8px;
  stroke-width: 1.8;
  color: var(--nav);
  pointer-events: none;
}
.f-error { display: block; font-size: 12px; color: #a4562f; }

/* Bloque condicional (p. ej. datos de empresa en el formulario de contacto) */
.f-condicional { display: contents; }
.f-condicional[hidden] { display: none; }

/* Trampa antispam: invisible y fuera del orden de tabulación.
   El input se dimensiona explícitamente para que no desborde el contenedor
   de 1px (overflow:hidden recorta el pintado, pero no la caja). */
.f-trampa {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
  border: 0;
}
.f-trampa input,
.f-trampa label {
  width: 1px; height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: 1px;
}

/* Aviso de privacidad */
.f-aviso { margin-top: 22px; }
.f-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.f-check input { width: 19px; height: 19px; margin-top: 1px; accent-color: var(--navy); cursor: pointer; }
.f-check span { font-size: 13px; line-height: 1.55; color: var(--text); }
.f-check a { text-decoration: underline; text-underline-offset: 3px; }
.f-check input[aria-invalid="true"] { outline: 2px solid #a4562f; outline-offset: 2px; }
.f-pendiente { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; color: var(--soft); }

/* Envío y estados del botón */
.f-envio { margin-top: 26px; }
.f-envio .btn { width: 100%; }
.f-envio .btn[disabled] { opacity: .6; cursor: progress; }
.f-envio .btn[disabled] .arr { opacity: .5; }

/* Estados del formulario: pendiente de conexión, éxito y error.
   Nunca se muestra "éxito" si el envío no se realizó. */
.f-estado {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 2px solid var(--navy);
  background: #fff;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}
.f-estado[hidden] { display: none; }
.f-estado strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--serif);
  font-variation-settings: "opsz" 12;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.f-estado.is-pendiente { border-left-color: #b8863b; background: #fbf6ee; color: #6a5734; }
.f-estado.is-pendiente strong { color: #8a6a28; }
.f-estado.is-exito { border-left-color: #4e7a52; background: #f2f7f2; color: #3c5740; }
.f-estado.is-exito strong { color: #3f6b45; }
.f-estado.is-error { border-left-color: #a4562f; background: #fbf3f0; color: #7a4527; }
.f-estado.is-error strong { color: #94502b; }

@media (min-width: 600px) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-ancho { grid-column: 1 / -1; }
  .f-envio .btn { width: auto; min-width: 230px; }
}

@media (min-width: 960px) {
  .form-grid { gap: calc(var(--u) * 20); }
}

@media (prefers-reduced-motion: reduce) {
  .f-campo input, .f-campo textarea, .f-campo select { transition: none; }
}