/* Modal + grid avatares (post registro) */
.avatar-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* menos columnas = más grandes */
  gap: 12px;
  margin: 14px 0 16px;
}

@media (max-width: 520px){
  .avatar-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.avatar-item{
  border: 1px solid rgba(148,163,184,0.35);
  background: rgba(15,23,42,0.7);
  border-radius: 16px;
  padding: 10px; /* más grande */
  cursor: pointer;
  transition: transform .10s ease, border-color .12s ease, filter .12s ease;
}

.avatar-item:hover{
  border-color: rgba(56,189,248,0.8);
  transform: translateY(-1px);
}

.avatar-item.selected{
  border-color: rgba(34,197,94,0.95);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.20);
}

.avatar-item img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}