/* amistad.css — la etiqueta de estado y la fila de botones.

   Vive en `componentes/` y no en una vista porque la usan tres: la tarjeta de
   Descubrir, la ficha y la vista de Solicitudes. Es el mismo motivo por el que
   `.km` está en `tarjeta.css` y no en `descubrir.css`. */

.amistad{
  display:inline-block; border-radius:999px; padding:.1rem .55rem;
  font-size:.78rem; font-weight:600; white-space:nowrap;
}
/* Tres colores para tres cosas distintas, y la diferencia importa de un
   vistazo: ya podéis hablar / estás esperando / te toca a ti responder. */
.amistad.si    {background:var(--brand-suave); color:var(--brand)}
.amistad.espera{background:var(--acento-suave); color:var(--acento)}
.amistad.pide  {background:var(--brand); color:var(--brand-ink)}

.amistad-acciones{display:flex; flex-direction:column; gap:.5rem; margin:.4rem 0 0}
.amistad-acciones .fila{display:flex; gap:.5rem; flex-wrap:wrap}
.amistad-acciones p{margin:0}