/* =========================================================================
   Conecta Forms — estilos de estado
   Neutros a propósito: heredan tipografía y se adaptan con variables.
   Sobrescriba --cf-* en el sitio del cliente para ajustar la paleta.
   ========================================================================= */

:root {
  --cf-ok-bg:    #e7f6ec;
  --cf-ok-fg:    #14532d;
  --cf-ok-line:  #1f9d55;
  --cf-err-bg:   #fdeceb;
  --cf-err-fg:   #7a1c16;
  --cf-err-line: #b42318;
  --cf-wait-bg:  #f0f0ee;
  --cf-wait-fg:  #4a4a48;
  --cf-wait-line:#8c8c88;
  --cf-radius:   4px;
}

/* Honeypot: fuera de vista pero enfocable por bots, no por personas */
.cf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

/* Los estados usan doble clase a propósito: el CSS del sitio suele traer
   reglas como `.tarjeta p { color: … }` que ganarían en especificidad y
   dejarían el mensaje ilegible sobre su propio fondo. */
.cf-status {
  margin: 1rem 0 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--cf-wait-line);
  border-radius: 0 var(--cf-radius) var(--cf-radius) 0;
  font-size: .92rem;
  line-height: 1.5;
}
.cf-status[hidden] { display: none; }
.cf-status a { color: inherit; font-weight: 600; text-decoration: underline; }

.cf-status.cf-status--wait {
  background: var(--cf-wait-bg);
  color: var(--cf-wait-fg);
  border-left-color: var(--cf-wait-line);
}
.cf-status.cf-status--ok {
  background: var(--cf-ok-bg);
  color: var(--cf-ok-fg);
  border-left-color: var(--cf-ok-line);
}
.cf-status.cf-status--err {
  background: var(--cf-err-bg);
  color: var(--cf-err-fg);
  border-left-color: var(--cf-err-line);
}
.cf-status--wait::after {
  content: "";
  display: inline-block;
  width: .7em;
  height: .7em;
  margin-left: .5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cf-spin .7s linear infinite;
  vertical-align: -1px;
}

@keyframes cf-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cf-status--wait::after { animation: none; }
}

/* Botón deshabilitado mientras envía */
form[data-conecta-form] button[disabled] {
  opacity: .65;
  cursor: progress;
}