/* Invitar con enlace: el apartado «Invita a tus amigos» de Ajustes
   (ui/js/ajustes-invitar.mjs) y «Te invita…» en la pantalla de crear cuenta
   (ui/js/entrar.mjs). Con los tokens de estilo.css. */

/* ---------------------------------------------------------------- Ajustes */

.inv-estado:empty { display: none; }
.inv-estado { margin-bottom: var(--esp-3); }
.inv-linea { align-items: center; flex-wrap: wrap; }
.inv-linea.apagada { opacity: 0.6; }
.inv-enlace { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--texto-2); }
.inv-botones { display: flex; gap: var(--esp-2); flex: none; }

.inv-cifra { font-size: var(--tam-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--texto); }

.inv-progreso { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-4); }
.inv-progreso[hidden], .inv-vitrina[hidden] { display: none; }
.inv-progreso-texto-caja { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--esp-1); }
.inv-progreso-texto { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-3); flex-wrap: wrap; }
.inv-progreso-nombre { font-weight: 500; color: var(--texto); }
.inv-progreso-cuenta { font-size: var(--tam-s); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.inv-progreso .insignia-progreso { margin-top: 0; }
.inv-progreso .insignia-progreso-pista { height: 8px; border-radius: 4px; }
.inv-progreso .aj-nota { margin: 0; }

.inv-vitrina { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-2); padding: var(--esp-4); }
.inv-insignia { display: flex; flex-direction: column; align-items: center; gap: var(--esp-1); text-align: center; min-width: 0; }
.inv-insignia .insignia-baldosa { margin-bottom: var(--esp-1); background: var(--elevada); }
.inv-insignia-nombre { max-width: 100%; font-size: var(--tam-s); font-weight: 500; line-height: 1.25; color: var(--texto-2); overflow-wrap: anywhere; }
.inv-insignia.ganada .inv-insignia-nombre { color: var(--texto); }
.inv-insignia-meta { font-size: var(--tam-xs); color: var(--texto-3); }

@media (max-width: 899px) {
  .inv-linea .inv-enlace { flex-basis: 100%; }
  .inv-botones { width: 100%; }
  .inv-botones .boton { flex: 1; }
}

/* ---------------------------------------------------------------- la puerta */

.puerta-invita { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-5); padding: var(--esp-3); border-radius: var(--radio-tarjeta); background: var(--elevada); }
.puerta-invita[hidden] { display: none; }
.puerta-invita:has(.puerta-error) { background: none; padding: 0; }
.avatar.puerta-invita-avatar { width: 48px; height: 48px; font-size: var(--tam-l); }
.puerta-invita-texto { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.puerta-invita-rotulo { font-size: var(--tam-xs); color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.06em; }
.puerta-invita-nombre { font-size: var(--tam-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--texto); }

/* ---------------------------------------------------------------- Administración */

.inv-gente { margin-top: var(--esp-3); }