/* tarjeta.css — la tarjeta de un perfil en la rejilla, y la etiqueta `.km`
   que lleva dentro. Es un <button>, no un <div>: se abre con Enter y la lee
   un lector de pantalla como lo que es. */

.tarjeta{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radio);
  padding:1.1rem; box-shadow:var(--sombra); display:flex; flex-direction:column; gap:.75rem;
  text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%;
}
.tarjeta:hover{border-color:var(--brand)}
.tarjeta .cabeza{display:flex; gap:.8rem; align-items:center}
/* sin esto, un nombre largo ensancha el flex y empuja los km fuera */
.tarjeta .cabeza > div{min-width:0}
.tarjeta .nombre{font-weight:650; font-size:1.05rem}
.tarjeta .donde{
  color:var(--muted); font-size:.87rem;
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
}
.tarjeta .bio{
  color:var(--muted); font-size:.92rem; margin:0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* La distancia. Sale en la tarjeta y en la ficha, por eso vive aquí y no en
   `vistas/descubrir.css`. */
.km{
  display:inline-block; background:var(--acento-suave); color:var(--acento);
  border-radius:999px; padding:.1rem .55rem; font-size:.78rem; font-weight:600;
  white-space:nowrap;
}

/* El pie de la tarjeta: el estado de la amistad y los intereses en común. Es
   una fila que se parte, porque «Solicitud enviada» y «3 en común contigo»
   juntos no caben en una tarjeta estrecha. */
.tarjeta .pie{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap}