/* ==========================================================================
   Lo que el formulario necesita y la maqueta del cliente no traía: mensajes
   de error, paneles de resultado, casilla de consentimiento.

   Los campos en sí —las líneas bajo cada input, los tamaños, los colores—
   siguen en los atributos style= de index.html, tal como venían. Aquí sólo
   está lo nuevo, y usa propiedades lógicas (inline-start, no left) para que
   el árabe se refleje solo.
   ========================================================================== */

/* La trampa para bots. No basta display:none en todos los casos: algunos
   rellenan igual, y lo que importa es que ningún humano la vea ni la alcance
   con el tabulador — de eso se encargan aquí el posicionamiento y, en el
   marcado, tabindex="-1" y aria-hidden. */
.tsw-botcheck {
  /* Igual que el enlace de salto: recortado y no desplazado, porque un
     desplazamiento lateral cambia de lado en árabe y se lleva el ancho del
     documento con él. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

/* iOS Safari HACE ZOOM al enfocar un campo con letra menor de 16px, y ya no
   lo deshace: el visitante se queda con la página ampliada y desplazada.
   Se sube sólo en pantallas estrechas, así que el escritorio queda exactamente
   como lo entregó el cliente.

   !important es necesario y no es pereza: los campos llevan su font-size en
   el atributo style=, que gana a cualquier regla de hoja. La alternativa era
   editar el marcado del cliente, y eso es justo lo que no se hace. */
@media (max-width: 600px) {
  #tsw-form input,
  #tsw-form select,
  #tsw-form textarea {
    font-size: 16px !important;
  }
}

/* ------------------------------------------------------------- mensajes */

.tsw-err {
  font-size: 12.5px;
  line-height: 1.5;
  color: #9a2f1c;
}
html[lang="zh"] .tsw-err,
html[lang="ar"] .tsw-err { font-size: 13px; line-height: 1.7; }

/* El campo con error se marca con el borde, no con color de texto: sobre
   fondo blanco un rojo suave en la línea se ve y no compite con lo escrito. */
#tsw-form [aria-invalid="true"] {
  border-bottom-color: #9a2f1c;
}

.tsw-alert {
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid #d9b8b0;
  background: #fbf2f0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #9a2f1c;
}

.tsw-ok {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid #b7cfc7;
  background: #f1f6f4;
}
.tsw-ok:focus { outline: 2px solid #1f5b4d; outline-offset: 2px; }

.tsw-error {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid #d9b8b0;
  background: #fbf2f0;
  color: #9a2f1c;
  line-height: 1.6;
}
.tsw-error a { color: #9a2f1c; text-decoration: underline; }

.tsw-noscript {
  margin: 26px 0 0;
  padding: 14px 16px;
  border: 1px solid #cfc9bb;
  background: #f7f5f1;
  font-size: 13.5px;
  line-height: 1.7;
  color: #4a463e;
}

/* -------------------------------------------------------- consentimiento

   Pedir datos sin decir para qué no es una opción, así que la casilla es
   obligatoria y el enlace al aviso va junto a ella y no en el pie. */

.tsw-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.65;
  color: #4a463e;
}
html[lang="zh"] .tsw-consent,
html[lang="ar"] .tsw-consent { font-size: 13.5px; line-height: 1.9; }

.tsw-consent input[type="checkbox"] {
  /* 18px y un margen arriba para que quede alineado con la primera línea del
     texto en los tres idiomas, que no tienen la misma altura de línea. */
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  flex: none;
  accent-color: #1f5b4d;
}
.tsw-consent a { text-decoration: underline; }
.tsw-consent .tsw-err { display: block; margin-top: 4px; }

/* ------------------------------------------------------------------ foco

   La maqueta del cliente pone outline:none en todos los campos. Eso deja a
   quien navega con el tabulador sin saber dónde está, así que se devuelve un
   indicador visible al enfocar — sin tocar el aspecto en reposo. */

#tsw-form input:focus-visible,
#tsw-form select:focus-visible,
#tsw-form textarea:focus-visible,
#tsw-form button:focus-visible {
  outline: 2px solid #1f5b4d;
  outline-offset: 3px;
}

#tsw-submit[disabled] { opacity: 0.6; cursor: progress; }