/* /assets/css/newsletter-form.css · v2
 *
 * Estilos de los estados del formulario newsletter + lock del modal sticky.
 * Usa variables del Sistema Visual v2 ya cargadas en cada página.
 * Fallbacks razonables si algún token no existe.
 */

/* ─── Mensaje de error inline (validación y servidor) ───────────────── */
.nl-form__error {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-coral, #C8553D);
  background: rgba(200, 85, 61, 0.08);
  border-left: 3px solid var(--color-coral, #C8553D);
  border-radius: 4px;
}
.nl-form__error[hidden] { display: none; }
.nl-form__error:focus { outline: none; }

/* ─── Mensaje de éxito inline (sustituye el form) ───────────────────── */
.nl-form__success {
  margin: 0;
  padding: 1.25rem 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--color-text, #1A1A1A);
  background: var(--bg, #F8F8F7);
  border-left: 3px solid var(--color-accent, #2E6B5C);
  border-radius: 4px;
}
.nl-form__success:focus { outline: none; }

/* ─── Botón en estados submitting / disabled ─────────────────────────── */
button[type="submit"][aria-busy="true"] {
  cursor: progress;
  opacity: 0.7;
}
button[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

/* ─── Textarea insight (calculadora + newsletter) ───────────────────── */
/* El input email mantiene el estilo del Sistema Visual v2 que ya existe
   en cada página. La textarea es nueva, le damos un estilo coherente
   pero discreto. Marca "opcional" en el label se hace en el HTML. */
.nl-form__insight {
  display: block;
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--color-text, #1A1A1A);
  background: var(--bg, #F8F8F7);
  border: 1px solid var(--color-border, #D8D6D2);
  border-radius: 4px;
  resize: vertical;
  min-height: 4.5rem;
}
.nl-form__insight:focus {
  outline: 2px solid var(--color-accent, #2E6B5C);
  outline-offset: 1px;
}
.nl-form__insight-counter {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-text-soft, #6B6862);
  text-align: right;
}

/* ─── Modal sticky: lock 2.5s tras éxito ────────────────────────────── */
/* Si el sticky modal del blog tiene un botón de cierre con [data-modal-close]
   o equivalente, durante MODAL_LOCK_MS (2.5s) lo desactivamos visual y
   funcionalmente para que el usuario vea el mensaje de éxito antes de poder
   cerrar el modal. Esto resuelve la race condition del síntoma B viejo. */
[data-newsletter-modal].nl-modal--locked [data-modal-close],
[data-newsletter-modal].nl-modal--locked .modal-close,
[data-newsletter-modal].nl-modal--locked button[aria-label*="cerrar" i],
[data-newsletter-modal].nl-modal--locked button[aria-label*="close" i] {
  pointer-events: none;
  opacity: 0.3;
  cursor: default;
}

/* Si el modal usa click-en-backdrop para cerrarse y eso está implementado
   con un overlay [data-modal-backdrop], lo bloqueamos también: */
[data-newsletter-modal].nl-modal--locked [data-modal-backdrop] {
  pointer-events: none;
}

/* ─── sr-only · oculto visualmente pero accesible a lectores de pantalla ──── */
/* Necesario porque añadimos <label class="sr-only"> en los forms para WCAG.   */
/* Si la clase no existe en el CSS de la página, el label ocupa espacio en el  */
/* flex del form y descuadra el alineamiento.                                  */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}