/* =============================================================================
   ft-form.css — FlexigoTech · motor de formularios 2026
   -----------------------------------------------------------------------------
   Hoja NUEVA. Se enlaza DESPUES de ft-2026.css. No toca styles.css ni blog.css.
   Todas las clases llevan prefijo  .ft-form-
   Se apoya en los tokens --ft-* de ft-2026.css, siempre con fallback, porque no
   todas las paginas cargan esa hoja.

   Indice
     00  Tokens propios
     01  Contenedor y retícula del formulario
     02  Etiqueta, control y pista
     03  Estado de error (nunca solo color: icono + texto)
     04  Casilla RGPD
     05  Honeypot (fuera de pantalla, NO display:none)
     06  Boton de envio y estado "enviando"
     07  Aviso de fallo + "enviar igualmente"
     08  Panel de gracias
     09  Accesibilidad, movimiento reducido e impresion
   ========================================================================== */


/* =============================================================================
   00 · TOKENS PROPIOS
   ========================================================================== */
:root {
  --ft-form-line:     var(--ft-line, #E6E9F0);
  --ft-form-line-str: var(--ft-line-strong, #CBD5E1);
  --ft-form-ink:      var(--ft-ink, #0C0D14);
  --ft-form-text:     var(--ft-text, #505768);
  --ft-form-muted:    var(--ft-muted, #79808F);
  --ft-form-accent:   var(--ft-accent, #714B67);
  --ft-form-bg:       var(--ft-bg, #FFFFFF);
  --ft-form-panel:    var(--ft-panel, #F7F8FA);
  --ft-form-danger:   #B4232A;
  --ft-form-danger-bg:#FCF3F3;
  --ft-form-ok:       #1E7A46;
  --ft-form-ok-bg:    #F1F8F3;
  --ft-form-radius:   6px;
  --ft-form-sans:     var(--ft-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --ft-form-mono:     var(--ft-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
}


/* [hidden] tiene que ganar a los display:grid/flex de esta hoja: la regla del
   navegador para [hidden] es de especificidad 0,1,0 y la perderia. El motor
   oculta el formulario con form.hidden = true al enviar. */
.ft-form[hidden],
.ft-form-row[hidden],
.ft-form-field[hidden],
.ft-form-check[hidden],
.ft-form-actions[hidden],
.ft-form-alert[hidden],
.ft-form-thanks[hidden],
.ft-form-msg[hidden] { display: none !important; }

/* =============================================================================
   01 · CONTENEDOR Y RETICULA
   Movil primero: una columna. A partir de 600px, las filas marcadas con
   .ft-form-row pasan a dos columnas.
   ========================================================================== */

/* Reseteo acotado al formulario: no todas las paginas del sitio traen un
   * { box-sizing: border-box } global, y sin el un control con width:100% mas
   su relleno se sale del contenedor y saca barra horizontal a 390px. */
.ft-form, .ft-form *, .ft-form *::before, .ft-form *::after,
.ft-form-thanks, .ft-form-thanks * { box-sizing: border-box; }

.ft-form {
  display: grid;
  gap: 18px;
  font-family: var(--ft-form-sans);
  max-width: 40rem;
}
.ft-form-row { display: grid; gap: 18px; }
@media (min-width: 600px) {
  .ft-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft-form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Titulillo opcional dentro del formulario */
.ft-form-legend {
  font-family: var(--ft-form-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ft-form-muted);
  padding: 0;
  border: 0;
}


/* =============================================================================
   02 · ETIQUETA, CONTROL Y PISTA
   ========================================================================== */

.ft-form-field { display: grid; gap: 6px; min-width: 0; }

.ft-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ft-form-ink);
  line-height: 1.35;
}
.ft-form-req {
  color: var(--ft-form-accent);
  font-weight: 700;
  margin-left: 2px;
}
.ft-form-opt {
  font-weight: 500;
  color: var(--ft-form-muted);
  margin-left: 6px;
}

.ft-form-control {
  font-family: inherit;
  font-size: 15px;              /* 15px+: iOS no hace zoom al enfocar */
  line-height: 1.45;
  color: var(--ft-form-ink);
  background: var(--ft-form-bg);
  border: 1px solid var(--ft-form-line-str);
  border-radius: var(--ft-form-radius);
  padding: 11px 13px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ft-form-control::placeholder { color: var(--ft-form-muted); opacity: 1; }
.ft-form-control:hover { border-color: var(--ft-form-muted); }
.ft-form-control:focus {
  outline: 2px solid var(--ft-form-accent);
  outline-offset: 1px;
  border-color: var(--ft-form-accent);
}
.ft-form-control:disabled { background: var(--ft-form-panel); color: var(--ft-form-muted); cursor: not-allowed; }

textarea.ft-form-control { resize: vertical; min-height: 130px; }

select.ft-form-control {
  cursor: pointer;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2379808F' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px;
}

/* Pista bajo el campo (no es un error) */
.ft-form-hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ft-form-muted);
}


/* =============================================================================
   03 · ESTADO DE ERROR
   Nunca solo color: cambia el borde, aparece un icono "!" y un texto.
   ========================================================================== */

.ft-form-msg {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--ft-form-danger);
}
.ft-form-msg[hidden] { display: none; }
.ft-form-msg::before {
  content: "!";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ft-form-danger);
  color: #fff;
  font-family: var(--ft-form-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.ft-form-control[aria-invalid="true"] {
  border-color: var(--ft-form-danger);
  background: var(--ft-form-danger-bg);
}
.ft-form-control[aria-invalid="true"]:focus {
  outline-color: var(--ft-form-danger);
  border-color: var(--ft-form-danger);
}
.ft-form-field--error > .ft-form-label { color: var(--ft-form-danger); }


/* =============================================================================
   04 · CASILLA RGPD
   ========================================================================== */

.ft-form-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.ft-form-check .ft-form-msg { grid-column: 1 / -1; }

.ft-form-check input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ft-form-accent);
  flex: 0 0 auto;
  cursor: pointer;
}
.ft-form-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ft-form-accent);
  outline-offset: 2px;
}
.ft-form-check-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ft-form-text);
  cursor: pointer;
}
.ft-form-check-label a {
  color: var(--ft-form-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ft-form-check-label a:hover { text-decoration-thickness: 2px; }
.ft-form-check input[aria-invalid="true"] { outline: 2px solid var(--ft-form-danger); outline-offset: 2px; }


/* =============================================================================
   05 · HONEYPOT
   Fuera de pantalla, NO display:none — un display:none delata la trampa a los
   robots que leen CSS y, sobre todo, algunos navegadores no envian el campo.
   ========================================================================== */

.ft-form-honey {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* =============================================================================
   06 · BOTON DE ENVIO
   ========================================================================== */

.ft-form-actions {
  display: grid;
  gap: 12px;
  align-items: center;
}
@media (min-width: 600px) {
  .ft-form-actions { grid-template-columns: auto minmax(0, 1fr); }
}

.ft-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--ft-form-radius);
  background: var(--ft-form-accent);
  color: #fff;
  cursor: pointer;
  width: 100%;
  transition: background .15s ease, opacity .15s ease;
}
@media (min-width: 600px) { .ft-form-submit { width: auto; } }
.ft-form-submit:hover { background: var(--ft-accent-ink, #5B3C53); color: #fff; }
.ft-form-submit:focus-visible { outline: 2px solid var(--ft-form-ink); outline-offset: 2px; }
.ft-form-submit[disabled], .ft-form-submit[aria-disabled="true"] { opacity: .6; cursor: progress; }

.ft-form-note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ft-form-muted);
}

/* Punto giratorio del estado "enviando" */
.ft-form-spin {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ft-form-spin 700ms linear infinite;
}
@keyframes ft-form-spin { to { transform: rotate(360deg); } }


/* =============================================================================
   07 · AVISO DE FALLO + "ENVIAR IGUALMENTE"
   ========================================================================== */

.ft-form-alert {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--ft-form-danger);
  border-left-width: 3px;
  border-radius: var(--ft-form-radius);
  background: var(--ft-form-danger-bg);
  color: var(--ft-form-danger);
  font-size: 13.5px;
  line-height: 1.55;
}
.ft-form-alert[hidden] { display: none; }
.ft-form-alert a { color: inherit; text-decoration: underline; font-weight: 700; }
.ft-form-alert-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.ft-form-retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  padding: 11px 18px;
  border: 1px solid currentColor;
  border-radius: var(--ft-form-radius);
  background: transparent;
  color: var(--ft-form-danger);
  cursor: pointer;
}
.ft-form-retry:hover { background: var(--ft-form-danger); color: #fff; }
.ft-form-retry:focus-visible { outline: 2px solid var(--ft-form-danger); outline-offset: 2px; }


/* =============================================================================
   08 · PANEL DE GRACIAS
   Sustituye al formulario en la misma pagina. Recibe el foco al aparecer.
   ========================================================================== */

.ft-form-thanks {
  display: grid;
  gap: 8px;
  max-width: 40rem;
  padding: 22px 24px;
  border: 1px solid var(--ft-form-ok);
  border-left-width: 3px;
  border-radius: var(--ft-form-radius);
  background: var(--ft-form-ok-bg);
}
.ft-form-thanks[hidden] { display: none; }
.ft-form-thanks:focus { outline: 2px solid var(--ft-form-ok); outline-offset: 3px; }
.ft-form-thanks-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ft-form-ok);
  margin: 0;
}
.ft-form-thanks-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ft-form-text);
  margin: 0;
  max-width: 58ch;
}


/* =============================================================================
   09 · ACCESIBILIDAD, MOVIMIENTO REDUCIDO E IMPRESION
   ========================================================================== */

.ft-form-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ft-form-control,
  .ft-form-submit,
  .ft-form-retry { transition: none !important; }
  .ft-form-spin { animation: none !important; border-top-color: rgba(255,255,255,.45); }
}

@media print {
  .ft-form-honey, .ft-form-alert, .ft-form-actions { display: none !important; }
  .ft-form-control { border-color: #999; }
}


/* =============================================================================
   10 · INFORMACION BASICA DE PROTECCION DE DATOS (art. 13 RGPD)
   -----------------------------------------------------------------------------
   Va debajo de la casilla de consentimiento, dentro del propio formulario.
   Es la "primera capa" del modelo por capas: responsable, finalidad, base
   juridica, destinatarios y derechos, mas el enlace a la politica completa.
   ========================================================================== */

.ft-form-rgpd {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--ft-form-line);
  border-radius: var(--ft-form-radius);
  background: var(--ft-form-panel);
}
.ft-form-rgpd-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ft-form-ink);
}
.ft-form-rgpd-list {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--ft-form-text);
}
.ft-form-rgpd-list li { margin: 0 0 4px; }
.ft-form-rgpd-list li:last-child { margin-bottom: 0; }
.ft-form-rgpd-list b { color: var(--ft-form-ink); font-weight: 600; }
.ft-form-rgpd-list a { color: var(--ft-form-accent); }
.ft-form-rgpd-list a:focus-visible { outline: 2px solid var(--ft-form-accent); outline-offset: 2px; }

@media print { .ft-form-rgpd { break-inside: avoid; } }