/* app/public/css/invite.css — invitaciones y alta (SPEC B, F; Lote 1).
   Tarjeta «Invita a tus amigos» en Cuenta › Plan y uso ([data-acc-invite], 55-invite.js),
   y el hueco de Turnstile en Crear cuenta (10-auth.js). Prefijo propio .inv-*. */

/* ---- Tarjeta de invitaciones ---- */
[data-acc-invite] { margin-top: 32px; }
.inv { padding: 20px 24px; }
.inv .acc-h3 { margin-bottom: 8px; }
.inv .acc-text { max-width: 46em; }
.inv-launch { color: rgb(var(--c-text)); }

.inv-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.inv-url {
  flex: 1 1 20rem; min-width: 0; max-width: 34rem;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--fs-small);
  text-overflow: ellipsis;
}
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-actions .btn { display: inline-flex; align-items: center; gap: 6px; }

.inv-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px;
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
}
.inv-stat { min-width: 0; }
.inv-stat dt { color: rgb(var(--c-muted)); font-size: var(--fs-xs); line-height: 1.4; }
.inv-stat dd { margin: 4px 0 0; color: rgb(var(--c-text)); font: 600 1.5rem / 1.1 var(--font-serif); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .inv { padding: 16px; }
  .inv-url { flex-basis: 100%; max-width: none; }
  .inv-stats { grid-template-columns: 1fr; gap: 12px; }
  .inv-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .inv-stat dd { margin: 0; font-size: 1.25rem; }
}

/* ---- Alta: Turnstile (modo interaction-only: casi siempre sin nada visible) ---- */
.ent-turnstile:empty { display: none; }
.ent-turnstile iframe { max-width: 100%; }