/* ════════════════════════════════════════════════════════════════════
   amigos.css — buscar personas y las solicitudes de amistad, en el lobby
   (Edgar 2026-10-08: «si yo busco el nombre de alguien ¿sí aparece? No.
   Hay que hacer que aparezcan, y la función de mandar solicitud, y
   también del lado del que la recibe, la notificación»)
   ────────────────────────────────────────────────────────────────────
   Va aparte de lobby.css para que el lobby y los amigos se puedan tocar
   a la vez sin pisarse. Usa la misma paleta del lobby (--lb-*, definida
   en lobby.css): un solo tema oscuro, a propósito. Las filas y los
   botones son los del cajón (.lb-amigo, .lb-amigo-btn): aquí solo lo que
   es nuevo.
   ════════════════════════════════════════════════════════════════════ */

/* ══ «Elige tu @», arriba del cajón (el formulario es elegir_arroba.css) ══ */
.lb-elegir { padding: 2px 14px 10px; }

/* ══ El buscador del cajón ══ */
.lb-busca { padding: 2px 14px 8px; }
.lb-busca-caja {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 8px 0 14px;
  border-radius: 14px; cursor: text;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--lb-borde);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.lb-busca-caja > i { font-size: 18px; color: var(--lb-mute); flex-shrink: 0; }
.lb-busca-caja:focus-within {
  background: rgba(255, 255, 255, .09); border-color: rgba(196, 166, 255, .6);
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .16);
}
.lb-busca-caja:focus-within > i { color: #C4B5FD; }
.lb-busca-in {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 700; color: #fff;
}
.lb-busca-in::placeholder { color: var(--lb-mute); font-weight: 600; }
.lb-busca-in::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* En .lb los :focus-visible llevan anillo; aquí el anillo es la caja. */
.lb .lb-busca-in:focus-visible { outline: none; }
.lb-busca-x {
  width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 19px; color: var(--lb-mute); background: none;
}
.lb-busca-x:hover { color: #fff; background: rgba(255, 255, 255, .08); }
/* «Buscar personas» del cajón vacío trae el foco aquí: la caja lo dice. */
.lb-busca-caja.is-llamada { animation: lb-busca-llama .9s cubic-bezier(0.22, 1, 0.36, 1) 1; }
@keyframes lb-busca-llama {
  0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, .55); }
  100% { box-shadow: 0 0 0 14px rgba(168, 85, 247, 0); }
}

/* Los resultados ocupan el sitio de la lista mientras buscas. */
.lb-busca-res { flex: 1; overflow: auto; padding: 4px 14px 24px; }
.lb-busca-res .lb-amigo { animation: lb-amigo-entra .4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.lb-busca-res .lb-amigo:nth-child(2) { animation-delay: .04s; }
.lb-busca-res .lb-amigo:nth-child(3) { animation-delay: .08s; }
.lb-busca-res .lb-amigo:nth-child(4) { animation-delay: .12s; }
.lb-busca-res .lb-amigo:nth-child(n+5) { animation-delay: .16s; }
@keyframes lb-amigo-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lb-busca-res.is-cargando .lb-amigo { opacity: .55; transition: opacity .2s ease; }
/* @arroba · ciudad en UN renglón: con el botón ancho («Solicitud
   enviada») partido en dos, la fila deja de escanearse. */
.lb-busca-res .lb-amigo-tx span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sin resultados: lo que pasó y qué hacer (buscar su @ o invitarlo). */
.lb-busca-nadie { margin: 18px 8px 0; font-size: 14px; line-height: 1.55; color: var(--lb-sub); }
.lb-busca-invita {
  margin: 14px 8px 0; padding: 14px; border-radius: 16px;
  background: rgba(139, 92, 246, .12); border: 1px dashed rgba(196, 166, 255, .35);
}
.lb-busca-invita b { display: block; font-size: 14px; font-weight: 900; color: #fff; }
.lb-busca-invita button {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 16px;
  border: 0; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 900;
  color: #fff; background: var(--lb-morado);
}
.lb-busca-invita button:hover { background: var(--lb-morado-2); }

/* El botón del cajón vacío ahora es un botón de verdad (antes era un enlace). */
button.lb-vacio-btn { border: 0; cursor: pointer; font-family: inherit; }
button.lb-vacio-btn:hover { background: var(--lb-morado-2); }

/* ══ Los cuatro estados del botón de una persona ══
   Agregar (morado, el de siempre) · Solicitud enviada (fantasma: ya no
   pide nada; un toque lo arma para cancelar) · Aceptar (verde, como
   «Unirme») · Amigos → Invitar (el de la party). */
.lb-amigo-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-family: inherit; white-space: nowrap; }
.lb-amigo-btn i { font-size: 15px; }
.lb-amigo-btn--si { color: #052E1F; background: var(--lb-verde); }
.lb-amigo-btn--si:hover { background: #6EE7B7; }
.lb-amigo-btn--enviada { color: var(--lb-sub); background: rgba(255, 255, 255, .07); }
.lb-amigo-btn--enviada:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.lb-amigo-btn--no { color: var(--lb-sub); background: rgba(255, 255, 255, .07); }
.lb-amigo-btn--no:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.lb-amigo-btn.is-armado { color: #FECACA; background: rgba(239, 68, 68, .22); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); }
.lb-amigo-btn:disabled { opacity: .6; }

/* ══ Las solicitudes, arriba del cajón ══
   Los dos botones bajan a su propio renglón, debajo del nombre: al lado
   no caben en 360 px sin partir el «quiere ser tu amigo» y cortar el
   nombre, que es justo lo que hay que leer. */
.lb-sol { flex-wrap: wrap; row-gap: 8px; }
.lb-sol .lb-amigo-tx span { color: #C4B5FD; }
.lb-sol-btns { display: flex; gap: 8px; width: 100%; padding-left: 56px; box-sizing: border-box; }
.lb-sol .lb-amigo-btn { flex: 1; justify-content: center; padding: 8px 12px; font-size: 13px; }
.lb-sol-mas { display: inline-block; margin: 4px 8px 6px; font-size: 13px; font-weight: 800; color: #C4B5FD; }
.lb-sol-mas:hover { color: #fff; text-decoration: underline; }

/* ══ El puntito del chip de Amigos: SOLICITUDES, aparte del verde de en
   línea. Rosa y arriba a la derecha, como un aviso: algo te espera. ══ */
.lb-solic-n {
  position: absolute; top: -6px; right: -6px; z-index: 1;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; box-sizing: border-box;
  display: inline-grid; place-items: center;
  font-size: 11px; font-weight: 900; line-height: 1; color: #fff;
  background: linear-gradient(180deg, #FB7185, #E11D48);
  box-shadow: 0 0 0 2px #120B22, 0 4px 12px rgba(225, 29, 72, .45);
  animation: lb-solic-pop .45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes lb-solic-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ══ El aviso de solicitud: el mismo que el de la party, con su marca ══ */
.lb-aviso--amigo { border-color: rgba(52, 211, 153, .45); box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(52, 211, 153, .22); }
.lb-aviso--ok { border-color: rgba(52, 211, 153, .6); }
.lb-aviso--ok .lb-aviso-tx::before { content: '✓'; margin-right: 6px; font-weight: 900; color: var(--lb-verde); }

/* ══ DÓNDE CAE EL AVISO (el de la party y el de amistad son el mismo) ══
   Centrado arriba choca con la racha, las monedas y Amigos en cuanto el
   escenario mide menos de ~1300 px, que es una laptop de 1366 o 1440:
   el aviso tapaba justo el chip de Amigos. Ahí se va arriba a la
   IZQUIERDA del escenario, que está libre, y se estrecha si hace falta
   (el texto baja a dos renglones antes que tapar algo). La entrada es la
   misma caída, sin el centrado. */
@media (min-width: 900px) and (max-width: 1599px) {
  .lb-aviso { left: 24px; transform: none; max-width: calc(100% - 430px); animation-name: lb-aviso-cae; }
}
@keyframes lb-aviso-cae { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
/* Con el cajón abierto, lo que dice el aviso ya está en el cajón
   (Te invitan, Solicitudes) y el aviso quedaría medio tapado por él. */
.lb:has(#lb-cajon:not([hidden])) .lb-aviso { display: none; }

/* ══ En línea, o Desconectado · hace 5 min (Edgar 2026-10-08: «en el panel
   de amigos, poder ver desconectado, en línea, así como están») ══
   Se actualiza con el cajón abierto; quien acaba de conectarse llega con
   un destello verde y su punto aparece de golpe. */
.lb-amigo-tx .lb-amigo-on { color: var(--lb-verde); font-weight: 800; }
.lb-amigo.is-llega { animation: lb-amigo-llega 1.6s cubic-bezier(0.22, 1, 0.36, 1) 1; }
.lb-amigo.is-llega .lb-carta-online { animation: lb-solic-pop .5s cubic-bezier(0.34, 1.56, 0.64, 1) .1s both; }
@keyframes lb-amigo-llega {
  0% { background: rgba(52, 211, 153, .24); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .55); }
  100% { background: transparent; box-shadow: inset 0 0 0 1px transparent; }
}

/* ══ El teléfono ══ */
@media (max-width: 899px) {
  .lb-busca { padding: 0 12px 8px; }
  .lb-busca-res { padding: 4px 12px 20px; }
  .lb-solic-n { top: -7px; right: -7px; }
  /* El aviso en el teléfono: quién y qué en el primer renglón, los dos
     botones juntos en el segundo (antes «Ahora no» bajaba solo). */
  .lb-aviso .lb-aviso-tx { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .lb-aviso .lb-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-busca-res .lb-amigo, .lb-solic-n, .lb-busca-caja.is-llamada { animation: none; opacity: 1; transform: none; }
  .lb-amigo.is-llega, .lb-amigo.is-llega .lb-carta-online { animation: none; }
  /* el animation-name de arriba le ganaría al «animation: none» de lobby.css */
  .lb-aviso { animation: none; }
  .lb-busca-caja, .lb-busca-res.is-cargando .lb-amigo { transition: none; }
}