/* Sacado de templates/includes/live_presence.html el 14/08/2026: estaba DENTRO del HTML, o sea que el
navegador se lo volvia a bajar en cada cambio de pantalla. Mismas
reglas, mismo sitio en el orden de las hojas. */
/* Bolita del menú: el número de gente hablando ahora, encima del enlace y arriba
a la derecha. Es la MISMA bolita del chat de comunidad (.cmty-nav-badge), en
verde en vez de rojo, porque aquí no avisa de algo pendiente sino de que hay
gente con quien hablar. Nunca se ve con cero gente. */
.live-nav-link { position: relative; }
.live-pill { min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px;
background: #00A86B; color: #fff; font-size: .68rem; font-weight: 700; line-height: 1;
text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 0 rgba(0,201,127,.55); animation: livePulse 2s infinite; }
.live-nav-link .live-pill { position: absolute; top: -2px; inset-inline-end: -10px; }
/* En el menú MÓVIL el enlace ocupa todo el ancho y la bolita absoluta se saldría
por el lado: ahí va pegada al texto, como hace el chat de comunidad. */
.v2-mobile-link.live-nav-link .live-pill { position: static; margin-inline-start: .4rem;
vertical-align: middle; }
.live-pill[hidden] { display: none; }
/* Quien pide menos animación en su móvil/ordenador, no la tiene. */
@media (prefers-reduced-motion: reduce) { .live-pill { animation: none; } }
@keyframes livePulse {
70% { box-shadow: 0 0 0 .32rem rgba(0,201,127,0); }
100% { box-shadow: 0 0 0 0 rgba(0,201,127,0); }
}
/* Chapa "únete para hablar ahora mismo" en los grupos del chat (Guille
07/08/2026). Parpadea porque es una oportunidad que dura segundos, no un
dato: si no llama la atención, no sirve de nada. Verde como todo lo de Live.
Nace escondida y solo la enciende el sondeo. */
.live-join { display: none; text-decoration: none;
animation: liveJoinBlink 1.4s ease-in-out infinite; }
.live-join.on { display: block; }
.live-join[hidden] { display: none; }
/* En la LISTA de chats el aviso ocupa el sitio del último mensaje, como el
"escribiendo…" de WhatsApp (Guille 07/08/2026): ahí no cabe una frase larga
al lado del nombre, y en cambio esa línea la mira todo el mundo. */
.live-join .live-join-txt { display: block; color: #00A86B; font-weight: 700;
font-size: .8rem; line-height: 1.35; white-space: nowrap; overflow: hidden;
text-overflow: ellipsis; }
/* En el DIRECTORIO ("Encuentra tu chat") el aviso va dentro de una tarjeta
pequeña, así que la frase se aprieta a una línea y no empuja nada. Es el
mismo verde parpadeante: si hay un Live en esa sala se ve aunque no estés
dentro (Guille 08/08/2026). */
.live-join-mini .live-join-txt { font-size: .72rem; }
.cwa-disc-card.live-on, .cmty-card.live-on { border-color: #00A86B; }
/* Con el aviso encendido, el último mensaje se calla: dos líneas peleando por
el mismo sitio se leen peor que una. */
.live-on .cwa-snip, .live-on .cwa-when { display: none !important; }
@keyframes liveJoinBlink {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
/* Quien pide menos animación no tiene parpadeo, pero SÍ ve el aviso. */
@media (prefers-reduced-motion: reduce) { .live-join { animation: none; } }
/* Dentro de la SALA es una banda entera debajo de la cabecera, con la frase
grande y la línea pequeña debajo. */
/* Redondeada y separada de los bordes (Guille 08/08/2026: "una tira verde en
la parte superior redonda"): así se lee como un aviso que se puede tocar y
no como parte de la cabecera. */
/* Fina (Guille 08/08/2026: "ahora es muy mazacote"): la tira avisa, no manda
en la pantalla. Menos alto, letra más pequeña y la línea de abajo casi un
susurro; sigue siendo la misma tira verde redondeada de antes. */
.live-join-bar { background: #00A86B; padding: .3rem .8rem; text-align: center;
border-radius: 999px; margin: .3rem .6rem; cursor: pointer; }
.live-join-bar.on { display: block; }
.live-join-bar .live-join-txt { color: #fff; font-size: .8rem; font-weight: 600;
white-space: normal; line-height: 1.3; }
.live-join-bar .live-join-sub { display: block; color: #d6f3e5; font-size: .66rem;
margin-top: .05rem; }
/* La sala del chat va DENTRO de la portada de escritorio (iframe), o sea dos
documentos de PBC a la vez. La píldora de la cola y la tarjeta del timbre
están pegadas a la ventana, así que salían DOS, una encima de otra. Dentro
de un iframe no se pintan: manda la de la ventana de arriba. */
.pbc-embedded .live-bar, .pbc-embedded .live-match { display: none !important; }
/* Tarjeta del timbre: abajo a la izquierda, para NO tapar la burbuja del chat
(que vive abajo a la derecha) ni el botón de aportes. */
.live-match { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 9500;
display: flex; align-items: center; gap: .6rem; max-width: min(22rem, calc(100vw - 2.2rem));
padding: .7rem .8rem; border-radius: 14px; background: #12232E; color: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.live-match[hidden] { display: none; }
.live-match .txt { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.25; }
.live-match .go { background: #00C97F; color: #06251a; border-radius: 10px; padding: .45rem .7rem;
font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap; }
.live-match .no { background: none; border: 0; color: #9fb3c8; font-size: 1.1rem; line-height: 1;
cursor: pointer; padding: .2rem .3rem; }
/* Barra de la cola: mismo rincón que la tarjeta y por encima de ella (las dos
nunca se ven a la vez, pero si la tarjeta quedara abierta la barra manda). */
/* Verde de Live (Guille 08/08/2026): la barra es Live fuera de Live, así que
lleva su color y no el azul oscuro genérico de antes. */
/* Discreta (Guille 08/08/2026): la cola se mira de reojo mientras haces otra
cosa, así que píldora baja, letra pequeña y sombra suave. */
.live-bar { position: fixed; left: 1.1rem; bottom: 1.1rem; z-index: 9600;
display: flex; align-items: center; gap: .45rem; max-width: min(24rem, calc(100vw - 2.2rem));
padding: .35rem .6rem; border-radius: 999px; background: #00A86B; color: #fff;
box-shadow: 0 4px 14px rgba(0,0,0,.22); font-size: .78rem; line-height: 1.25; }
.live-bar[hidden] { display: none; }
/* Más oscuro cuando hay alguien esperándote: el color es el aviso. */
.live-bar.ring { background: #054A33; }
.live-bar .dot { width: .45rem; height: .45rem; border-radius: 999px; background: #00C97F;
flex: none; box-shadow: 0 0 0 0 rgba(0,201,127,.55); animation: livePulse 2s infinite; }
@media (prefers-reduced-motion: reduce) { .live-bar .dot { animation: none; } }
.live-bar .txt { flex: 1; min-width: 0; }
/* Qué idioma hablo y cuál busco, SIEMPRE a la vista mientras espero (Guille
08/08/2026). Va debajo de la frase, en pequeño: no es una noticia, es el
dato que hace que el emparejamiento se entienda. */
.live-bar .langs { display: block; color: #7BE8C0; font-size: .68rem;
margin-top: .05rem; white-space: normal; }
.live-bar .langs[hidden] { display: none; }
/* Los números no bailan de ancho mientras corre el reloj. */
.live-bar .time { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.live-bar .time[hidden], .live-bar .ok[hidden], .live-bar .no[hidden],
.live-bar .x[hidden] { display: none; }
/* La X: mientras esperas es la salida (cancela la búsqueda), y por eso tiene
que verse blanca y grande, no gris de adorno. */
.live-bar .x { background: none; border: 0; color: #C6F7E4; font-size: 1.05rem;
line-height: 1; cursor: pointer; padding: .15rem .3rem; }
.live-bar .x:hover { color: #fff; }
/* En el móvil la barra ocupa casi todo el ancho y se comería la burbuja del chat
de comunidad (abajo a la derecha): las dos suben para no pisarse. */
@media (max-width: 640px) {
.live-bar, .live-match { bottom: 5.4rem; }
}
.live-bar .ok { background: #00C97F; color: #06251a; border: 0; border-radius: 999px;
padding: .3rem .6rem; font-weight: 700; font-size: .78rem; text-decoration: none;
white-space: nowrap; cursor: pointer; }
.live-bar .ok:disabled { opacity: .6; cursor: default; }
.live-bar .no { background: none; border: 0; color: #9fb3c8; font-size: .8rem;
cursor: pointer; text-decoration: underline; white-space: nowrap; padding: .2rem .1rem; }