/* Eikove.App - Comunidad: feed, perfiles y comunidad.
Usa las variables de shared/base.css y shared/tema-oscuro.css: no define colores fijos
para que la vista nocturna funcione sin duplicar reglas. */
:root {
--social-radio: 18px;
--social-radio-sm: 12px;
--social-sombra: 0 1px 2px rgba(239, 120, 120, .05), 0 12px 32px rgba(239, 120, 120, .07);
}
html[data-tema="oscuro"] {
--social-sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .28);
}
body {
min-height: 100vh;
background: var(--fondo);
background:
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--azul-3) 9%, transparent), transparent 34rem),
radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--oro) 8%, transparent), transparent 30rem),
var(--fondo);
}
/* ---------- Estructura ---------- */
.social-layout {
width: min(1760px, 100%);
margin: 0 auto;
padding: 22px clamp(12px, 3vw, 28px) 48px;
display: grid;
grid-template-columns: clamp(260px, 17vw, 360px) minmax(0, 1fr) clamp(280px, 18vw, 400px);
align-items: start;
gap: clamp(16px, 1.5vw, 28px);
}
.social-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.social-izq, .social-der { position: sticky; top: 78px; }
.social-der { gap: 14px; }
/* ---------- Perfil ---------- */
.perfil-card { overflow: hidden; position: relative; container-type: inline-size; }
/* Tarjeta angosta (columna lateral en pantallas medianas): avatar y nombre en la misma fila, alineados al centro */
@container (max-width: 270px) {
.perfil-card .perfil-cab { flex-direction: row; align-items: center; gap: 10px; }
.perfil-card .perfil-cab .avatar { --tam: 52px; }
.perfil-card .perfil-lateral-nombre { -webkit-line-clamp: 3; line-clamp: 3; font-size: 13.5px; overflow-wrap: break-word; }
.perfil-card .perfil-acciones-laterales { grid-template-columns: 1fr; }
}
.perfil-card::before { content: none; }
/* Franja de color detrás de la cabecera: crece con el nombre y siempre cubre hasta la etiqueta */
.perfil-card .perfil-cab { isolation: isolate; margin-bottom: 22px; }
.perfil-card .perfil-cab::before {
content: "";
position: absolute;
z-index: -1;
inset: -19px -19px -12px;
background: linear-gradient(135deg, var(--azul), var(--azul-3) 55%, var(--oro));
opacity: .14;
pointer-events: none;
}
.perfil-invitado-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 18px;
background: var(--azul-claro);
color: var(--azul);
font-size: 30px;
font-weight: 900;
margin-bottom: 12px;
}
.perfil-card h2 { margin-bottom: 6px; font-size: 1.15rem; }
.perfil-card p { margin: 0 0 14px; }
#perfilInvitado .btn-fila .btn { flex: 1 1 0; min-width: 0; }
.perfil-cab { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.perfil-quien { display: flex; flex-direction: column; min-width: 0; }
.perfil-quien b { font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-handle-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.handle { color: var(--suave); font-weight: 600; font-size: 13px; }
/* Tarjeta lateral: identidad limpia y verificación junto al nombre */
.perfil-lateral-avatar-wrap { flex: none; }
.perfil-lateral-titulos { min-width: 0; }
.perfil-lateral-nombre-fila {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
}
.perfil-lateral-nombre {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14.5px;
font-weight: 700;
line-height: 1.25;
color: var(--texto);
}
/* En la tarjeta angosta del feed el nombre puede ocupar dos líneas antes de recortarse */
.perfil-card .perfil-lateral-nombre {
white-space: normal;
text-overflow: clip;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow-wrap: anywhere;
}
.perfil-card .perfil-lateral-handle { margin-top: 3px; }
.perfil-card .perfil-lateral-tags { margin-top: 6px; }
.perfil-lateral-handle {
display: block;
margin-top: 1px;
}
.badge-verificado-acento {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}
.badge-verificado-acento .icono-verificado-svg { display: block; }
#perfilNombreBadge:empty { display: none; }
.perfil-lateral-tags {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.badge-rol-chip {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
padding: 2px 8px;
border-radius: 9999px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1.2;
white-space: nowrap;
}
.badge-rol-chip.rol-organizador {
background: rgba(37, 99, 235, 0.25);
border: 1px solid rgba(59, 130, 246, 0.5);
color: #93C5FD;
}
.badge-rol-chip.rol-jugador {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #E2E8F0;
}
.badge-rol-chip.rol-marca {
background: linear-gradient(135deg, #f49797, #dd973a);
border: 1px solid rgba(239, 120, 120, .55);
color: #2a1a05;
font-weight: 800;
}
/* ---------- Insignias de rol ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 800;
line-height: 1.35;
white-space: nowrap;
vertical-align: middle;
}
.badge-jugador { background: var(--azul-claro); color: var(--suave); font-weight: 700; }
.badge-org { background: linear-gradient(135deg, var(--azul), var(--azul-3)); color: #fff; box-shadow: 0 2px 8px rgba(239, 120, 120, .18); }
.badge-marca { background: linear-gradient(135deg, #f8d38a, #e2a343); color: #2a1a05; border: 1px solid rgba(239, 120, 120, .55); }
.badge-org .verif {
display: inline-flex;
align-items: center;
justify-content: center;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--oro);
color: var(--azul);
font-size: 9px;
font-weight: 900;
}
.perfil-bio { color: var(--suave); font-size: 14px; line-height: 1.45; margin: 0 0 14px !important; overflow-wrap: anywhere; }
.perfil-contadores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.perfil-contadores > div { background: var(--azul-claro); border-radius: 12px; padding: 9px 10px; min-width: 0; }
.perfil-contadores b { display: block; color: var(--azul); font-size: 1.08rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.perfil-contadores span { display: block; color: var(--suave); font-size: 11.5px; margin-top: 2px; }
/* Bio de la tarjeta lateral: 4 líneas con puntos suspensivos (la completa está en el perfil) */
.perfil-card .perfil-bio {
font-size: 13px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Acciones del perfil en el feed: dos en fila y el cierre de sesión a lo ancho */
.perfil-acciones-laterales { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.perfil-acciones-laterales .btn { min-width: 0; padding: 6px 8px; }
.perfil-acciones-laterales .btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.perfil-acciones-laterales .perfil-salir { grid-column: 1 / -1; }
#perfilDatos > .gemas-chip { margin: 0 0 12px; }
.handle { color: var(--suave); font-weight: 600; font-size: 13px; }
.social-mini h3, .buscador h3, .social-tips h3 { font-size: 1rem; margin-bottom: 8px; }
.mini-pasos {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
color: var(--suave); font-size: 12px; margin-top: 12px;
}
.mini-pasos span {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: var(--azul); color: #fff; font-weight: 800; font-size: 11px;
}
/* ---------- Avatares ---------- */
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--tam, 44px);
height: var(--tam, 44px);
border-radius: 50%;
flex: 0 0 auto;
overflow: hidden;
background: linear-gradient(135deg, var(--azul), var(--azul-3));
color: #fff;
font-weight: 800;
font-size: calc(var(--tam, 44px) * .32);
letter-spacing: -.02em;
border: 2px solid var(--borde);
border-color: color-mix(in srgb, var(--tarjeta) 86%, transparent);
box-shadow: 0 2px 10px rgba(239, 120, 120, .16);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.grande { --tam: 64px; }
.avatar.chico { --tam: 34px; }
.perfil-cab .avatar { --tam: 64px; }
/* ---------- Composer ---------- */
.composer { padding: 16px; }
.composer-cab { display: flex; align-items: flex-start; gap: 10px; }
.composer-avatar .avatar { --tam: 44px; }
.composer textarea {
flex: 1;
width: auto;
min-width: 0;
min-height: 86px;
resize: vertical;
border: 0;
background: transparent;
padding: 8px 4px;
font-size: 1.02rem;
line-height: 1.5;
}
.composer textarea:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--azul-3) 35%, transparent); border-radius: 12px; }
.composer-fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.composer-fila .evento-input { flex: 1 1 150px; width: auto; min-width: 120px; max-width: 220px; min-height: 34px; padding: 6px 10px; font-size: 12.5px; }
.contador {
display: inline-block;
min-width: 0;
padding: 0;
border-radius: 0;
background: transparent;
color: var(--suave);
font-size: 12px;
line-height: 1.4;
font-weight: 600;
margin-left: auto;
font-variant-numeric: tabular-nums;
}
.composer-preview { position: relative; margin: 10px 0 0 54px; border-radius: var(--social-radio-sm); overflow: hidden; border: 1px solid var(--borde); background: var(--azul-claro); }
.composer-preview img { display: block; width: 100%; max-height: 330px; object-fit: cover; }
.quitar-img {
position: absolute; top: 8px; right: 8px;
width: 32px; height: 32px; border-radius: 50%;
border: 0; background: rgba(239, 120, 120, .72); color: #fff;
font-size: 22px; line-height: 1; cursor: pointer;
}
.quitar-img:hover { background: rgba(239, 120, 120, .9); }
.composer-ayuda { margin: 8px 0 0; font-size: 11.5px; }
/* ---------- Pestañas ---------- */
.feed-tabs {
display: flex;
gap: 6px;
padding: 6px;
background: var(--tarjeta);
border: 1px solid var(--borde);
border-radius: 999px;
box-shadow: var(--sombra);
position: sticky;
top: 72px;
z-index: 20;
align-self: flex-start;
}
.feed-tab {
border: 0;
background: transparent;
color: var(--suave);
font: inherit;
font-weight: 700;
font-size: 13.5px;
padding: 9px 16px;
border-radius: 999px;
cursor: pointer;
}
.feed-tab:hover { background: var(--azul-claro); color: var(--azul); }
.feed-tab.activo { background: var(--azul); color: #fff; }
html[data-tema="oscuro"] .feed-tab.activo { background: var(--marca); }
/* ---------- Feed y posteos ---------- */
.feed { display: flex; flex-direction: column; gap: 18px; }
.post {
background: var(--tarjeta);
border: 1px solid var(--borde);
border-radius: var(--social-radio);
padding: 16px;
box-shadow: var(--social-sombra);
transition: border-color .18s, transform .18s;
}
.post:hover { border-color: color-mix(in srgb, var(--azul-3) 45%, var(--borde)); }
.post-cab { display: flex; align-items: flex-start; gap: 10px; }
.post-avatar-wrapper { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.post-avatar-wrapper .post-autor-avatar { width: 100%; height: 100%; }
.post-autor-avatar { border: 0; background: transparent; padding: 0; border-radius: 50%; cursor: pointer; display: inline-flex; flex: 0 0 auto; }
.post-autor-avatar:focus-visible { outline: 2px solid var(--azul-3); outline-offset: 2px; }
.post-quien { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.35; }
.post-autor-linea { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.post-autor-linea > button { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; text-align: left; cursor: pointer; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; }
.post-autor-nombre { color: var(--texto); font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.post-autor-handle { color: var(--suave); font-size: 13px; font-weight: 600; }
.post-autor-linea .badge-verificado-oficial { margin-left: 0; }
.post-fecha-tiempo { display: block; margin-top: 1px; color: var(--suave); font-size: 11.5px; line-height: 1.35; font-variant-numeric: tabular-nums; }
.btn-seguir-mini {
border: 1px solid var(--borde);
background: var(--tarjeta);
color: var(--azul);
font: inherit;
font-size: 11px;
font-weight: 800;
line-height: 1.2;
padding: 3px 9px;
min-height: 24px;
border-radius: 999px;
cursor: pointer;
}
.btn-seguir-mini:hover { background: var(--azul-claro); }
.btn-seguir-mini.siguiendo { background: transparent; color: var(--suave); border-color: transparent; }
.btn-seguir-mini.siguiendo:hover { background: var(--azul-claro); color: var(--azul); }
.btn-seguir-mini:disabled { opacity: .55; cursor: wait; }
.post-quien b { color: var(--texto); font-size: 14.5px; }
.post-quien small { color: var(--suave); font-size: 12px; margin-top: 1px; }
.post-borrar {
margin-left: auto;
border: 0; background: transparent; color: var(--suave);
font-size: 15px; cursor: pointer; padding: 5px 7px; border-radius: 8px;
}
.post-borrar:hover { background: var(--mal-claro); color: var(--mal); }
.post-repost-label {
display: inline-flex; align-items: center; gap: 6px;
margin: 10px 0 0 54px;
color: var(--suave); font-size: 12.5px; font-weight: 600;
}
.post-texto { margin: 12px 0 0; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.post-cuerpo { display: contents; }
/* Reproductores embebidos de YouTube, TikTok, Instagram y Facebook */
.media-embed-contenedor {
position: relative;
width: 100%;
margin-top: 10px;
box-sizing: border-box;
border-radius: 12px;
overflow: hidden;
background: rgba(0, 0, 0, .4);
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, .08));
}
.media-embed-facade {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
padding: 0;
border: 0;
border-radius: 0;
background-color: rgba(0, 0, 0, .4);
background-size: cover;
background-position: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: #fff;
font: inherit;
transition: box-shadow .2s ease;
-webkit-tap-highlight-color: transparent;
}
.media-embed-facade:hover,
.media-embed-facade:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px var(--perfil-accent, #38BDF8);
}
.media-embed-facade.facade-youtube { background-color: #020617; }
.media-embed-facade.facade-tiktok {
background-image: radial-gradient(circle at 70% 18%, rgba(148, 163, 184, .18), transparent 55%), linear-gradient(135deg, #1f2937, #020617);
}
.media-embed-facade.facade-instagram {
background-image: radial-gradient(circle at 30% 20%, rgba(148, 163, 184, .16), transparent 55%), linear-gradient(135deg, #111827, #020617);
}
.media-embed-facade.facade-facebook {
background-image: radial-gradient(circle at 70% 20%, rgba(148, 163, 184, .15), transparent 55%), linear-gradient(135deg, #1e293b, #020617);
}
.media-embed-marca {
position: absolute;
top: 10px;
left: 12px;
z-index: 1;
padding: 3px 8px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 999px;
background: rgba(2, 6, 23, .62);
color: rgba(255, 255, 255, .86);
font-size: 10px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.media-embed-etiqueta {
position: absolute;
left: 12px;
right: 12px;
bottom: 10px;
z-index: 1;
color: rgba(255, 255, 255, .88);
font-size: 11.5px;
font-weight: 700;
text-align: left;
text-shadow: 0 1px 8px #000;
}
.btn-play-facade {
position: relative;
z-index: 1;
width: 54px;
height: 54px;
border-radius: 50%;
background: rgba(15, 23, 42, .85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, .2);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: transform .2s ease, background .2s ease;
}
.btn-play-facade .icono-svg {
width: 24px;
height: 24px;
fill: currentColor;
stroke: currentColor;
}
.media-embed-facade:hover .btn-play-facade {
transform: scale(1.1);
background: var(--perfil-accent, #38BDF8);
}
.media-embed-facade.facade-vertical {
max-width: none;
aspect-ratio: auto;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
.media-embed-facade,
.btn-play-facade { transition: none; }
}
.media-embed-contenedor.embed-youtube {
aspect-ratio: 16 / 9;
max-width: 100%;
}
.media-embed-contenedor.embed-youtube iframe {
display: block;
width: 100%;
height: 100%;
border: none;
}
.media-embed-contenedor.embed-tiktok {
max-width: 340px;
min-height: 580px;
aspect-ratio: 9 / 16;
margin-left: auto;
margin-right: auto;
}
.media-embed-contenedor.embed-tiktok iframe {
display: block;
width: 100%;
height: 100%;
min-height: 580px;
border: none;
}
.media-embed-contenedor.embed-instagram {
max-width: 480px;
min-height: 540px;
margin: 12px auto;
background: rgba(0, 0, 0, .2);
border-radius: 12px;
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, .08));
overflow: hidden;
}
.media-embed-contenedor.embed-instagram iframe {
width: 100%;
min-height: 540px;
border: none;
display: block;
}
.media-embed-contenedor.embed-facebook {
max-width: 500px;
min-height: 380px;
margin: 12px auto;
background: rgba(0, 0, 0, .2);
border-radius: 12px;
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, .08));
overflow: hidden;
}
.media-embed-contenedor.embed-facebook iframe {
width: 100%;
min-height: 380px;
border: none;
display: block;
}
.comentario-cuerpo { margin-top: 6px; }
.comentario-cuerpo .media-embed-contenedor { margin-top: 0; }
.comentario-cuerpo .media-embed-contenedor.embed-youtube,
.mensaje-burbuja .media-embed-contenedor.embed-youtube,
.catalogo-comentario .media-embed-contenedor.embed-youtube {
max-width: 380px;
border-radius: 8px;
}
.comentario-cuerpo .media-embed-contenedor.embed-tiktok,
.mensaje-burbuja .media-embed-contenedor.embed-tiktok,
.catalogo-comentario .media-embed-contenedor.embed-tiktok {
max-width: 260px;
min-height: 440px;
}
.comentario-cuerpo .media-embed-contenedor.embed-tiktok iframe,
.mensaje-burbuja .media-embed-contenedor.embed-tiktok iframe,
.catalogo-comentario .media-embed-contenedor.embed-tiktok iframe {
min-height: 440px;
}
.comentario-cuerpo .media-embed-contenedor.embed-instagram,
.mensaje-burbuja .media-embed-contenedor.embed-instagram,
.catalogo-comentario .media-embed-contenedor.embed-instagram {
max-width: 320px;
min-height: 420px;
}
.comentario-cuerpo .media-embed-contenedor.embed-instagram iframe,
.mensaje-burbuja .media-embed-contenedor.embed-instagram iframe,
.catalogo-comentario .media-embed-contenedor.embed-instagram iframe {
min-height: 420px;
}
.comentario-cuerpo .media-embed-contenedor.embed-facebook,
.mensaje-burbuja .media-embed-contenedor.embed-facebook,
.catalogo-comentario .media-embed-contenedor.embed-facebook {
max-width: 320px;
min-height: 280px;
}
.comentario-cuerpo .media-embed-contenedor.embed-facebook iframe,
.mensaje-burbuja .media-embed-contenedor.embed-facebook iframe,
.catalogo-comentario .media-embed-contenedor.embed-facebook iframe {
min-height: 280px;
}
.media-embed-fallback {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 6px;
color: rgba(241, 245, 249, .68);
font-size: 11.5px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 2px;
}
.media-embed-fallback:hover { color: #fff; }
.chat-burbuja.mia .media-embed-fallback { color: inherit; opacity: .85; }
.mensaje-burbuja .media-embed-contenedor { margin-top: 7px; }
.perfil-video-presentacion .media-embed-contenedor { margin-top: 0; }
.perfil-video-presentacion .media-embed-contenedor.embed-tiktok {
max-width: 300px;
min-height: 480px;
}
.perfil-video-presentacion .media-embed-contenedor.embed-tiktok iframe { min-height: 480px; }
.perfil-video-presentacion .media-embed-contenedor.embed-instagram {
max-width: 320px;
min-height: 420px;
}
.perfil-video-presentacion .media-embed-contenedor.embed-instagram iframe { min-height: 420px; }
.perfil-video-presentacion .media-embed-contenedor.embed-facebook {
max-width: 320px;
min-height: 300px;
}
.perfil-video-presentacion .media-embed-contenedor.embed-facebook iframe { min-height: 300px; }
@media (max-width: 560px) {
.media-embed-contenedor.embed-tiktok,
.media-embed-contenedor.embed-instagram,
.media-embed-contenedor.embed-facebook { max-width: 100%; }
.comentario-cuerpo .media-embed-contenedor.embed-tiktok,
.mensaje-burbuja .media-embed-contenedor.embed-tiktok,
.comentario-cuerpo .media-embed-contenedor.embed-instagram,
.mensaje-burbuja .media-embed-contenedor.embed-instagram,
.comentario-cuerpo .media-embed-contenedor.embed-facebook,
.mensaje-burbuja .media-embed-contenedor.embed-facebook {
max-width: 100%;
}
}
.post-tiempo-texto {
font-size: 11.5px;
color: var(--perfil-suave, var(--suave, #5b6b82));
display: inline-flex;
align-items: center;
gap: 4px;
font-variant-numeric: tabular-nums;
}
.post-edicion-caja {
margin: 10px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.post-edicion-textarea {
width: 100%;
min-height: 80px;
padding: 10px 12px;
background: rgba(0, 0, 0, .25);
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, .12));
border-radius: 8px;
color: var(--feed-texto, #F1F5F9);
font-family: inherit;
font-size: 14px;
line-height: 1.45;
resize: vertical;
box-sizing: border-box;
}
.post-edicion-textarea:focus {
outline: none;
border-color: var(--perfil-accent, #38BDF8);
box-shadow: 0 0 0 1px var(--perfil-accent, #38BDF8);
}
.post-edicion-barra {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.post-edicion-contador {
font-size: 11px;
color: rgba(241, 245, 249, .5);
font-variant-numeric: tabular-nums;
}
.post-edicion-botones {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.btn-cancelar-edicion {
background: transparent;
border: 1px solid rgba(255, 255, 255, .15);
color: rgba(241, 245, 249, .75);
padding: 5px 12px;
border-radius: 6px;
font: inherit;
font-size: 12px;
cursor: pointer;
transition: all .2s ease;
}
.btn-cancelar-edicion:hover {
background: rgba(255, 255, 255, .08);
color: #fff;
}
.btn-guardar-edicion {
background: var(--perfil-accent, #38BDF8);
border: none;
color: #fff;
padding: 5px 14px;
border-radius: 6px;
font: inherit;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: opacity .2s ease;
}
.btn-guardar-edicion:hover { opacity: .9; }
.btn-cancelar-edicion:focus-visible,
.btn-guardar-edicion:focus-visible {
outline: 2px solid var(--perfil-accent, #38BDF8);
outline-offset: 2px;
}
.post-edicion-textarea:disabled,
.btn-cancelar-edicion:disabled,
.btn-guardar-edicion:disabled {
opacity: .55;
cursor: wait;
}
@media (max-width: 560px) {
.post-edicion-barra { align-items: flex-start; }
.post-edicion-botones { width: 100%; justify-content: flex-end; }
}
.post-img {
display: block;
width: 100%;
max-height: 560px;
object-fit: cover;
border-radius: var(--social-radio-sm);
border: 1px solid var(--borde);
margin-top: 12px;
background: var(--azul-claro);
}
/* ---------- Post con imagen en celular: foto protagonista + riel ---------- */
.post-rail, .post-media-pie { display: none; }
@media (max-width: 768px) {
.post.post-con-media { padding: 0; overflow: hidden; }
.post.post-con-media > *:not(.post-media) { padding-left: 14px; padding-right: 14px; }
.post.post-con-media > .post-cab { padding-top: 14px; padding-bottom: 6px; }
.post.post-con-media > .post-acciones:not(.post-acciones-desktop) { display: none; }
.post.post-con-media > .post-comentarios { padding-bottom: 14px; }
.post.post-con-media .post-media { position: relative; margin: 8px 0 0; background: #08111f; }
.post.post-con-media .post-img {
margin: 0; border: 0; border-radius: 0; max-height: 70dvh; min-height: 180px;
}
.post.post-con-media .post-media::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
background: linear-gradient(transparent, rgba(2, 8, 18, .58)); pointer-events: none; z-index: 1;
}
.post.post-con-media .post-texto { margin-top: 10px; }
.post-rail {
position: absolute; right: 8px; bottom: 12px; z-index: 3;
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.post-rail [data-reacciones] { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.post-rail .reaccion {
width: 42px; height: 42px; padding: 0; border-radius: 50%;
background: rgba(8, 17, 31, .55); border: 1px solid rgba(255, 255, 255, .22);
color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.post-rail .reaccion:nth-child(n+3) { display: none; }
.post-rail-btn {
display: grid; place-items: center; width: 42px; min-height: 46px; padding: 4px 0;
border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px;
background: rgba(8, 17, 31, .55); color: #fff; font: inherit; cursor: pointer;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.post-rail-btn .ico { font-size: 19px; line-height: 1; }
.post-rail-btn .ico .icono-svg { width: 20px; height: 20px; }
.post-rail-btn b { font-size: 10px; font-weight: 800; line-height: 1; }
.post-rail-btn.activo { color: #5ee08f; }
.post-media-pie {
position: absolute; left: 12px; right: 64px; bottom: 11px; z-index: 2;
display: flex; align-items: baseline; gap: 6px; pointer-events: none;
color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .65);
}
.post-media-pie b { font-size: 12.5px; font-weight: 800; }
.post-media-pie .post-tiempo-texto { color: rgba(255, 255, 255, .85); font-size: 11px; }
}
/* Pestaña En Vivo */
.vivo-tab-cab {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 2px 2px 0;
}
.vivo-tab-cab b { display: block; font-size: 15px; }
.vivo-tab-cab small { display: block; margin-top: 1px; color: var(--suave); font-size: 11.5px; }
@media (max-width: 420px) {
.vivo-tab-cab { align-items: flex-start; }
.vivo-tab-cab .btn { flex: none; }
}
.post-chip {
display: inline-flex; align-items: center; gap: 4px;
margin-top: 8px; padding: 3px 9px; border-radius: 999px;
background: var(--azul-claro); color: var(--azul-2);
font-size: 11.5px; font-weight: 700;
}
.post-original {
margin-top: 12px;
padding: 12px;
border: 1px solid var(--borde);
border-left: 3px solid var(--azul-3);
border-radius: var(--social-radio-sm);
background: var(--azul-claro);
}
.post-original .post-texto { margin-top: 8px; font-size: 14px; }
.post-original .post-img { max-height: 360px; margin-top: 8px; }
.post-original-cab { display: flex; align-items: center; gap: 8px; min-width: 0; }
.post-original-cab .avatar { --tam: 30px; }
.post-original-cab div { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; min-width: 0; }
.post-original-cab b { font-size: 13px; }
.post-original-cab .handle, .post-original-cab small { font-size: 11.5px; }
.post-acciones { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde); }
.post-accion {
display: inline-flex; align-items: center; gap: 6px;
border: 0; background: transparent; color: var(--suave);
font: inherit; font-size: 14px; font-weight: 700;
padding: 8px 11px; border-radius: 999px; cursor: pointer; min-height: 44px;
}
.post-accion:hover { background: var(--azul-claro); color: var(--azul); }
.post-accion .ico { font-size: 19px; line-height: 1; display: inline-flex; align-items: center; }
.post-accion .ico .icono-svg { width: 19px; height: 19px; }
.post-accion.like.activo { color: #e0245e; }
.post-accion.repost.activo { color: var(--ok); }
.post-accion:disabled { opacity: .55; cursor: not-allowed; }
.post-comentarios { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.post-comentarios-lista { display: grid; gap: 6px; }
.post-comentarios-lista:empty { display: none; }
.post-comentario { padding: 7px 10px; border-radius: 10px; background: var(--azul-claro); font-size: 13px; overflow-wrap: anywhere; }
.post-comentario b { color: var(--azul); margin-right: 5px; }
.post-comentario small { display: block; margin-top: 2px; color: var(--suave); font-size: 11px; }
.post-comentario-form { display: flex; gap: 6px; align-items: center; }
.post-comentario-form input { flex: 1; min-width: 0; min-height: 36px; padding: 7px 10px; }
.post-comentario-form .btn { flex: none; }
/* Hashtags y ubicación en posteos */
.post-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.post-tag { border: 1px solid var(--borde); background: var(--azul-claro); color: var(--azul); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.post-tag:hover { border-color: var(--azul-3); }
.post-mapa { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 7px 12px; border-radius: 999px; background: var(--ok-claro); color: var(--ok); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.post-mapa:hover { filter: brightness(.96); }
.tag-filtro { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 12px; background: var(--tarjeta); }
.tag-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--azul-claro); color: var(--azul); font-size: 13px; font-weight: 800; }
.tag-tendencias-movil { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 4px; }
.tag-tendencias-movil::-webkit-scrollbar { display: none; }
.tag-tendencias-movil .tag-tendencia { flex: none; }
.tendencias-lista { display: grid; gap: 6px; }
.tag-tendencia { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); color: var(--texto); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.tag-tendencia:hover { background: var(--azul-claro); }
.tag-tendencia b { font-weight: 800; }
.tag-tendencia small { color: var(--suave); font-size: 11px; font-weight: 700; }
.tag-tendencia.compacto { border-radius: 999px; padding: 5px 10px; background: var(--azul-claro); color: var(--azul); }
@media (max-width: 1080px) {
.tendencias { display: none; }
.tag-tendencias-movil { display: flex; }
}
.post-accion.perfil { margin-left: auto; }
.feed-estado { color: var(--suave); text-align: center; font-size: 13.5px; padding: 10px 0; }
.cargar-mas { align-self: center; min-width: 180px; }
.feed-vacio { text-align: center; padding: 34px 18px; color: var(--suave); }
.feed-vacio b { display: block; color: var(--azul); font-size: 1.05rem; margin-bottom: 4px; }
.esqueleto {
border-radius: var(--social-radio);
min-height: 150px;
border: 1px solid var(--borde);
background: linear-gradient(100deg, var(--tarjeta) 20%, var(--azul-claro) 40%, var(--tarjeta) 60%);
background-size: 220% 100%;
animation: brillo 1.3s linear infinite;
}
@keyframes brillo { to { background-position: -220% 0; } }
/* ---------- Buscador ---------- */
.buscador-fila { display: flex; gap: 8px; }
.buscador-fila input { flex: 1; min-width: 0; }
.resultados { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.resultado {
display: flex; align-items: center; gap: 9px;
padding: 8px; border-radius: var(--social-radio-sm);
border: 1px solid transparent; background: var(--azul-claro);
min-width: 0;
}
.resultado:hover { border-color: var(--borde); }
.resultado .avatar { --tam: 36px; }
.resultado-datos { min-width: 0; flex: 1; }
.resultado-datos b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado-datos span { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--suave); font-size: 11.5px; }
.resultado .btn { min-height: 30px; padding: 4px 9px; font-size: 11.5px; }
.buscador-vacio { color: var(--suave); font-size: 12.5px; margin-top: 10px; }
.buscador-seccion {
margin: 12px 0 2px; font-size: 10.5px; font-weight: 800;
letter-spacing: .07em; text-transform: uppercase; color: var(--suave);
}
.resultado { align-items: flex-start; flex-wrap: wrap; }
.resultado-datos { min-width: 120px; }
.resultado-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.resultado-etiqueta {
border: 1px solid var(--borde); background: transparent; color: var(--suave);
border-radius: 9999px; padding: 2px 7px; font: inherit; font-size: 10px;
line-height: 1.4; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.resultado-etiqueta:hover { border-color: var(--perfil-accent, #38BDF8); color: var(--perfil-accent, #38BDF8); }
.resultado-etiqueta.coincide {
color: var(--texto); border-color: color-mix(in srgb, var(--perfil-accent, #38BDF8) 55%, transparent);
background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 14%, transparent);
}
.resultado-acciones {
display: flex; align-items: center; justify-content: flex-end;
flex-wrap: wrap; gap: 5px; margin-left: auto; flex: 1 1 100%;
}
.resultado-acciones .btn { white-space: nowrap; }
.resultado-producto { align-items: flex-start; }
.resultado-miniatura {
width: 46px; height: 46px; flex: 0 0 46px; border-radius: 10px; overflow: hidden;
display: grid; place-items: center; background: var(--azul-claro); color: var(--suave);
}
.resultado-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.resultado-miniatura svg { width: 22px; height: 22px; }
.resultado-descripcion {
margin: 4px 0 0; color: var(--suave); font-size: 11.5px; line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.resultado-precio { display: block; margin-top: 4px; font-size: 12px; color: var(--texto); }
.resultado-precio-fila { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; }
.resultado-precio-antes { color: var(--suave); font-size: 10.5px; text-decoration: line-through; }
.resultado-precio-final { margin-top: 0; color: var(--perfil-accent, #38BDF8); }
.resultado-descuento-badge {
display: inline-flex; width: fit-content; margin-top: 5px; padding: 2px 7px;
border-radius: 999px; background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--perfil-accent, #38BDF8) 35%, transparent);
color: var(--texto); font-size: 9.5px; font-weight: 800;
}
.perfil-etiquetas-contenedor { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.perfil-etiqueta-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; font: inherit; font-size: 11px; font-weight: 500;
color: var(--feed-texto, #F1F5F9);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.1));
border-radius: 9999px; cursor: pointer; transition: all 0.2s ease;
}
.perfil-etiqueta-chip:hover {
background: var(--perfil-accent, #38BDF8); color: #FFFFFF;
border-color: var(--perfil-accent, #38BDF8); transform: translateY(-1px);
}
.perfil-etiquetas-editor { display: grid; gap: 6px; }
.perfil-etiquetas-caja {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
min-height: 42px; padding: 6px 8px; border-radius: 10px;
border: 1px solid var(--borde); background: var(--azul-claro);
}
.perfil-etiquetas-caja:focus-within { border-color: var(--perfil-accent, #38BDF8); }
.perfil-etiquetas-caja .perfil-etiqueta-chip { cursor: default; }
.perfil-etiquetas-caja .perfil-etiqueta-chip:hover { transform: none; }
.perfil-etiqueta-chip [data-quitar-etiqueta] {
border: 0; background: transparent; color: inherit; cursor: pointer;
font: inherit; font-size: 13px; line-height: 1; padding: 0 0 0 1px; opacity: .7;
}
.perfil-etiqueta-chip [data-quitar-etiqueta]:hover { opacity: 1; }
.perfil-etiquetas-chips { display: contents; }
.perfil-etiquetas-caja > input {
flex: 1 1 150px; min-width: 120px; border: 0; background: transparent;
color: var(--texto); font: inherit; font-size: 13px; outline: 0; padding: 4px 2px;
}
/* Juegos favoritos del perfil (editor y ficha pública) */
.juegos-fav-editor { display: grid; gap: 8px; }
.juegos-fav-selector {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 9px;
}
.juego-fav-opcion {
display: flex; align-items: center; gap: 9px; text-align: left;
padding: 10px 12px; border-radius: 12px; cursor: pointer;
border: 1px solid var(--borde); background: var(--azul-claro); color: var(--texto);
font: inherit; font-size: 12px; line-height: 1.3;
transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.juego-fav-opcion:hover { border-color: var(--perfil-accent, #38BDF8); }
.juego-fav-opcion:focus-visible { outline: 2px solid var(--perfil-accent, #38BDF8); outline-offset: 2px; }
.juego-fav-opcion.sel {
border-color: var(--perfil-accent, #38BDF8);
background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 16%, transparent);
box-shadow: 0 0 0 1px var(--perfil-accent, #38BDF8) inset;
}
.juego-fav-opcion.sel::after { content: "✓"; margin-left: auto; font-weight: 900; color: var(--perfil-accent, #38BDF8); }
.juego-fav-icono { font-size: 17px; line-height: 1; }
.juego-fav-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-juegos-fav-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.perfil-juego-fav {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 9999px; font-size: 11.5px; font-weight: 500;
color: var(--feed-texto, #F1F5F9);
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.1));
}
.perfil-juego-fav-icono { font-size: 14px; line-height: 1; }
.perfil-laboral-ayuda { display: block; margin-top: -2px; }
.perfil-laboral-fila {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--feed-texto, #F1F5F9);
margin-top: 12px;
}
.perfil-laboral-fila .icono-svg {
width: 15px;
height: 15px;
stroke: currentColor;
opacity: 0.75;
flex-shrink: 0;
}
.perfil-laboral-fila .link-mencion {
color: var(--perfil-accent, #38BDF8);
text-decoration: none;
font-weight: 600;
}
.perfil-laboral-fila .link-mencion:hover { text-decoration: underline; }
.perfil-laboral-fila .link-mencion:focus-visible {
outline: 2px solid var(--perfil-accent, #38BDF8);
outline-offset: 2px;
border-radius: 3px;
}
.catalogo-comercial.catalogo-foco, .perfil-org-vitrina.catalogo-foco { animation: catalogoFoco 1.2s ease 2; border-radius: 16px; }
/* ---------- Modales ---------- */
.social-modal { width: min(580px, 100%); }
.social-modal .modal-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; }
.social-modal .modal-cab h2 { margin: 0; font-size: 1.2rem; }
.modal-x {
border: 0; background: transparent; color: var(--suave);
font-size: 26px; line-height: 1; cursor: pointer;
width: 34px; height: 34px; border-radius: 50%;
}
.modal-x:hover { background: var(--azul-claro); color: var(--azul); }
/* ---------- Lightbox de foto de perfil ---------- */
.perfil-foto-trigger {
cursor: pointer;
transition: transform .2s ease, box-shadow .2s ease;
}
.perfil-full-avatar.perfil-foto-trigger {
border: 0;
display: grid;
place-items: center;
appearance: none;
font: inherit;
color: inherit;
}
.perfil-foto-trigger:hover {
transform: scale(1.03);
box-shadow: 0 0 0 3px var(--perfil-accent, #38BDF8), 0 16px 34px rgba(0, 0, 0, .36);
}
.perfil-foto-trigger:focus-visible {
outline: 3px solid var(--perfil-accent, #38BDF8);
outline-offset: 4px;
}
.social-modal.modal-foto-perfil {
width: min(92vw, 520px);
max-width: min(92vw, 520px);
background: transparent;
box-shadow: none;
border-radius: 20px;
overflow: visible;
}
.modal-foto-perfil-overlay {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
animation: fadeInModal .2s ease-out;
}
.modal-foto-perfil-img {
display: block;
width: 100%;
max-width: min(85vw, 420px);
max-height: min(85vh, 420px);
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, .15);
box-shadow: 0 20px 40px rgba(0, 0, 0, .6);
background: rgba(255, 255, 255, .06);
}
.modal-foto-perfil-monograma {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--perfil-accent, #38BDF8), #ef7878);
color: #fff;
font-size: clamp(4rem, 13vw, 7rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.06em;
text-transform: uppercase;
}
.modal-foto-perfil-pie {
margin-top: 14px;
text-align: center;
color: var(--feed-texto, #F1F5F9);
line-height: 1.4;
}
.modal-foto-perfil-pie .nombre {
font-size: 16px;
font-weight: 600;
}
.modal-foto-perfil-pie .handle {
font-size: 13px;
opacity: .7;
}
.modal-foto-perfil-cerrar {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
display: grid;
place-items: center;
background: rgba(2, 6, 23, .55);
color: #F1F5F9;
border: 1px solid rgba(255, 255, 255, .18);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.modal-foto-perfil-cerrar:hover {
background: rgba(2, 6, 23, .80);
color: #fff;
}
@keyframes fadeInModal {
from { opacity: 0; transform: scale(.96); }
to { opacity: 1; transform: scale(1); }
}
@media (max-width: 640px) {
.modal-foto-perfil-img {
max-width: 80vw;
max-height: 70vh;
}
.modal-foto-perfil-pie .nombre { font-size: 15px; }
.modal-foto-perfil-pie .handle { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.modal-foto-perfil-overlay { animation: none; }
.perfil-foto-trigger { transition: none; }
}
.auth-form, .form-perfil, .form-repost { display: grid; gap: 12px; }
.form-repost { margin-top: 14px; }
.auth-form .campo span, .form-perfil .campo span { font-size: 12.5px; }
.ayuda.ok { color: var(--ok); }
.ayuda.mal { color: var(--mal); }
.auth-form .btn-fila, .form-perfil .btn-fila, .form-repost .btn-fila { justify-content: flex-end; }
.auth-cambio { color: var(--suave); font-size: 12.5px; margin: 2px 0 0; }
.lista-beneficios { margin: 10px 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; }
.avisos-lista { display: grid; gap: 8px; }
.aviso-item { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); }
.aviso-item.nuevo { border-color: var(--oro); background: color-mix(in srgb, var(--oro) 10%, var(--tarjeta)); }
.aviso-item b { font-size: 12.5px; color: var(--azul); }
.aviso-item p { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.aviso-item small { color: var(--suave); font-size: 11px; }
.auth-cambio button { border: 0; background: transparent; color: var(--azul-3); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.aviso.mini { padding: 7px 10px; font-size: 12.5px; }
.perfil-edit-avatar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perfil-edit-avatar .avatar { --tam: 76px; }
.perfil-edit-avatar .btn { min-height: 34px; }
.form-perfil textarea { min-height: 78px; resize: vertical; }
.perfil-publico-cab { display: flex; align-items: center; gap: 14px; }
.perfil-publico-cab .avatar { --tam: 76px; }
.perfil-publico-cab h2 { margin: 0; }
.perfil-publico-bio { color: var(--suave); margin: 14px 0; line-height: 1.5; overflow-wrap: anywhere; }
.perfil-publico-contadores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 16px; }
.perfil-publico-contadores > div { background: var(--azul-claro); border-radius: 12px; padding: 10px 12px; }
.perfil-publico-contadores b { display: block; color: var(--azul); font-size: 1.1rem; }
.perfil-publico-contadores span { color: var(--suave); font-size: 12px; }
/* Perfil con tema, avatar protagónico y bloques sociales */
.perfil-portada { padding: 16px 20px 18px; margin-bottom: 14px; }
.perfil-portada .perfil-banner { margin: -16px -20px 12px; }
.perfil-portada .perfil-publico-cab { position: relative; z-index: 1; }
.perfil-portada .perfil-publico-cab h2,
.perfil-portada .handle,
.perfil-portada .perfil-publico-nombre { color: #fff; }
.perfil-portada .chip { background: rgba(255, 255, 255, .2); color: #fff; }
.perfil-avatar-rol { position: relative; flex: none; border-radius: 50%; padding: 4px; background: linear-gradient(135deg, #60a5fa, #c94a4a); }
.perfil-avatar-rol.org { background: linear-gradient(135deg, #fde68a, #f59e0b); }
.perfil-portada .perfil-avatar-rol .avatar { --tam: 96px; border: 3px solid rgba(255, 255, 255, .8); }
.perfil-cumple { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 999px; background: #fdf2f8; color: #9d174d; font-size: 10.5px; font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.perfil-social-grid { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px; margin-top: 16px; }
.perfil-social-grid.sin-main { grid-template-columns: 1fr; }
.perfil-social-grid.sin-main .perfil-social-lado { max-width: 420px; }
.perfil-social-main { min-width: 0; }
.perfil-social-lado { align-self: start; padding: 12px; border-radius: 12px; background: var(--azul-claro); }
.perfil-social-lado h3 { margin: 0 0 8px; font-size: 13px; }
.perfil-bloque { margin-top: 16px; }
.perfil-bloque:first-child { margin-top: 0; }
.perfil-bloque h3 { font-size: .95rem; margin: 0 0 8px; }
.seguidores-mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.seguidor-mini { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; border: 0; background: transparent; color: var(--suave); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.seguidor-mini .avatar { --tam: 48px; }
.seguidor-mini span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-eventos-mini { display: grid; gap: 8px; }
.perfil-evento-mini { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); }
.perfil-evento-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.perfil-evento-datos small { color: var(--suave); font-size: 11.5px; }
.perfil-evento-datos .chip { align-self: flex-start; }
.perfil-vitrina-ganados { padding: 12px; border: 1px solid var(--oro); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--oro) 14%, var(--tarjeta)), var(--tarjeta)); }
.perfil-premios-ganados { display: grid; gap: 8px; }
.perfil-premio-ganado { display: flex; gap: 10px; padding: 10px; border: 1px solid color-mix(in srgb, var(--oro) 65%, var(--borde)); border-radius: 10px; background: var(--tarjeta); }
.ppg-trofeo { font-size: 28px; line-height: 1; flex: none; }
.ppg-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ppg-datos .chip { align-self: flex-start; }
.ppg-datos small { color: var(--suave); font-size: 11.5px; }
.ppg-org { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; font-size: 11.5px; }
.ppg-org .avatar { --tam: 26px; }
.temas-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.tema-opcion { height: 62px; border: 2px solid transparent; border-radius: 10px; padding: 6px; display: flex; align-items: flex-end; color: #fff; font: inherit; font-size: 10.5px; font-weight: 900; text-shadow: 0 1px 4px #000; cursor: pointer; }
.tema-opcion span { position: relative; z-index: 1; }
.tema-opcion.sel { border-color: var(--oro); box-shadow: 0 0 0 2px var(--oro); }
@media (min-width: 720px) { .perfil-portada .perfil-avatar-rol .avatar { --tam: 120px; } }
@media (max-width: 760px) {
.perfil-social-grid { grid-template-columns: 1fr; }
.perfil-social-lado { order: 2; }
.perfil-portada .perfil-avatar-rol .avatar { --tam: 96px; }
}
/* ---------- Paletas de perfil y selector libre ---------- */
.paletas-selector {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
gap: 8px;
max-height: 300px;
overflow: auto;
padding: 2px;
}
.paleta-opcion {
position: relative;
height: 52px;
border: 2px solid transparent;
border-radius: 10px;
padding: 6px;
display: flex;
align-items: flex-end;
color: #fff;
font: inherit;
font-size: 10.5px;
font-weight: 900;
text-align: left;
text-shadow: 0 1px 4px #000;
cursor: pointer;
background: linear-gradient(135deg, var(--pb) 0 55%, var(--pa) 55% 100%);
}
.paleta-opcion span { position: relative; z-index: 1; }
.paleta-opcion::after,
.tema-opcion::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .58));
pointer-events: none;
}
.paleta-opcion span,
.tema-opcion span { z-index: 1; }
.paleta-opcion.sel { border-color: var(--oro); box-shadow: 0 0 0 2px var(--oro); }
.colores-custom { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.color-campo { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--texto); }
.color-campo input[type="color"] {
width: 48px;
height: 36px;
padding: 1px;
border: 1px solid var(--borde);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.color-campo input[type="color"].mal { outline: 2px solid var(--mal); outline-offset: 2px; }
.contraste-info { min-height: 18px; margin-top: 6px; font-size: 12px; line-height: 1.35; }
.contraste-info.ok { color: var(--ok); }
.contraste-info.mal { color: var(--mal); background: var(--mal-claro); border-radius: 8px; padding: 6px 8px; }
.temas-patrones { margin-top: 4px; }
.temas-patrones summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--azul); }
.temas-patrones .temas-selector { margin-top: 8px; }
/* Aplicación de la paleta en el perfil consultado */
.perfil-portada.perfil-paleta { background: var(--perfil-bg, #0b0f19); }
.perfil-modal-cuerpo.perfil-colores { background: var(--perfil-bg); color: var(--perfil-texto, #f8fafc); }
.perfil-colores .perfil-portada {
background: linear-gradient(135deg, var(--perfil-bg) 0%, color-mix(in srgb, var(--perfil-bg) 78%, var(--perfil-accent) 22%) 100%);
}
.perfil-colores .perfil-portada::before { display: none; }
.perfil-colores .perfil-portada::after { background: linear-gradient(180deg, transparent 35%, color-mix(in srgb, var(--perfil-bg) 58%, transparent) 100%); }
.perfil-colores .perfil-portada .perfil-publico-cab h2,
.perfil-colores .perfil-bloque h3,
.perfil-colores .perfil-social-lado h3,
.perfil-colores .perfil-subtitulo,
.perfil-colores .perfil-publico-contadores b,
.perfil-colores .post-mini b { color: var(--perfil-accent); }
.perfil-colores .perfil-portada .perfil-publico-cab .handle,
.perfil-colores .perfil-publico-bio,
.perfil-colores .perfil-publico-contadores span,
.perfil-colores .perfil-publico-cab .chip,
.perfil-colores .post-mini,
.perfil-colores .evento-card,
.perfil-colores .historial-card,
.perfil-colores .perfil-social-lado { color: var(--perfil-texto, #f8fafc); }
.perfil-colores .perfil-portada .perfil-publico-cab .chip:not(.mal) {
background: color-mix(in srgb, var(--perfil-accent) 22%, transparent);
border: 1px solid color-mix(in srgb, var(--perfil-accent) 45%, transparent);
color: var(--perfil-texto, #f8fafc);
}
.perfil-colores .perfil-avatar-rol,
.perfil-colores .perfil-avatar-rol.org {
background: linear-gradient(135deg, var(--perfil-accent), color-mix(in srgb, var(--perfil-accent) 55%, var(--perfil-bg)));
}
.perfil-colores .perfil-avatar-rol .avatar { border-color: color-mix(in srgb, var(--perfil-texto) 75%, transparent); }
.perfil-colores .perfil-publico-contadores > div,
.perfil-colores .perfil-social-lado,
.perfil-colores .perfil-bloque,
.perfil-colores .evento-card,
.perfil-colores .historial-card,
.perfil-colores .post-mini,
.perfil-colores .perfil-premio-ganado {
background: color-mix(in srgb, var(--perfil-bg) 82%, var(--perfil-texto) 8%);
border-color: color-mix(in srgb, var(--perfil-accent) 32%, transparent);
}
.perfil-colores .btn:not(.sec):not(.peligro) {
background: var(--perfil-accent);
border-color: var(--perfil-accent);
color: var(--perfil-acento-texto, #111827);
}
.perfil-colores .perfil-tab.activo {
color: var(--perfil-accent-texto, var(--perfil-accent));
box-shadow: inset 0 -2px 0 var(--perfil-accent);
}
.perfil-colores .chip:not(.mal):not(.aviso) {
background: var(--perfil-superficie-2, rgba(2, 6, 23, .5));
border-color: var(--perfil-acento-borde, color-mix(in srgb, var(--perfil-accent) 36%, transparent));
color: var(--perfil-texto, #f8fafc);
}
.perfil-colores .suave { color: var(--perfil-suave, #cbd5e1); }
.perfil-colores small,
.perfil-colores .post-mini-pie,
.perfil-colores .evento-card small,
.perfil-colores .historial-card small {
color: var(--perfil-suave, #cbd5e1);
}
@media (max-width: 640px) {
.colores-custom { grid-template-columns: 1fr; }
}
/* ---------- Chat efÃÂmero ---------- */
.chat-no-leidos {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: var(--mal);
color: #fff;
font-size: 10px;
font-weight: 800;
line-height: 1;
}
.chat-fondo {
position: fixed;
inset: 0;
z-index: calc(var(--z-cajon, 400) - 5);
background: rgba(239, 120, 120, .34);
backdrop-filter: blur(2px);
}
.chat-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: var(--z-cajon, 400);
width: min(430px, 100vw);
display: flex;
flex-direction: column;
background: var(--tarjeta);
border-left: 1px solid var(--borde);
box-shadow: -18px 0 50px rgba(239, 120, 120, .2);
}
.chat-panel-cab {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
border-bottom: 1px solid var(--borde);
background: var(--tarjeta);
}
.chat-panel-titulo { flex: 1; min-width: 0; }
.chat-panel-titulo h2 { margin: 0; font-size: 1.05rem; }
.chat-panel-titulo small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-lista { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.chat-fila-item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px;
border: 1px solid transparent;
border-radius: 12px;
cursor: pointer;
background: transparent;
color: inherit;
text-align: left;
font: inherit;
width: 100%;
}
.chat-fila-item:hover { background: var(--azul-claro); }
.chat-fila-item .avatar { --tam: 44px; }
.chat-fila-datos { flex: 1; min-width: 0; }
.chat-fila-datos b { display: flex; align-items: center; gap: 5px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fila-datos small { display: block; color: var(--suave); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.chat-fila-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.chat-fila-hora { color: var(--suave); font-size: 10.5px; }
.chat-fila-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--mal); color: #fff; font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.chat-conversacion { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.chat-mensajes { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--fondo); }
.chat-burbuja {
align-self: flex-start;
max-width: 86%;
padding: 8px 10px;
border: 1px solid var(--borde);
border-radius: 15px 15px 15px 5px;
background: var(--tarjeta);
overflow-wrap: anywhere;
}
.chat-burbuja.mia {
align-self: flex-end;
border-radius: 15px 15px 5px 15px;
background: var(--azul);
border-color: var(--azul);
/* El acento puede ser claro (lavanda, oro, etc.): el token garantiza 4.5:1. */
color: var(--perfil-acento-texto, #0b1220);
}
.chat-burbuja-cab { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; color: var(--suave); font-size: 10.5px; }
.chat-burbuja.mia .chat-burbuja-cab { color: inherit; opacity: .82; }
.chat-burbuja .badge { transform: scale(.9); transform-origin: left center; }
.chat-burbuja.mia .badge-jugador { background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.chat-texto { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.45; }
.chat-hora { display: block; margin-top: 4px; text-align: right; color: var(--suave); font-size: 10px; font-variant-numeric: tabular-nums; }
.chat-burbuja.mia .chat-hora { color: inherit; opacity: .85; }
.chat-media-img { display: block; max-width: 100%; max-height: 270px; border-radius: 10px; margin-top: 4px; cursor: zoom-in; background: var(--azul-claro); }
.chat-media-audio { display: block; width: min(260px, 100%); margin-top: 4px; }
.chat-descarga { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 11px; font-weight: 800; color: var(--azul-3); text-decoration: none; }
.chat-burbuja.mia .chat-descarga { color: inherit; }
.chat-borrar { border: 0; background: transparent; color: var(--suave); font-size: 11px; cursor: pointer; padding: 0; margin-left: 6px; }
.chat-burbuja.mia .chat-borrar { color: inherit; opacity: .72; }
.chat-form { border-top: 1px solid var(--borde); padding: 8px 10px 10px; background: var(--tarjeta); }
.chat-fila { display: flex; align-items: flex-end; gap: 6px; }
.chat-fila textarea { flex: 1; min-width: 0; min-height: 38px; max-height: 110px; resize: none; border-radius: 20px; padding: 9px 12px; font-size: 14px; line-height: 1.35; }
.chat-icono, .chat-enviar {
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 50%;
font-size: 17px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.chat-icono { border: 1px solid var(--borde); background: var(--tarjeta); }
.chat-icono:hover { background: var(--azul-claro); }
.chat-enviar { border: 0; background: var(--azul); color: #fff; }
.chat-enviar:hover { background: var(--azul-2); }
.chat-grabadora {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 8px;
padding: 8px 10px;
border: 1px solid var(--mal);
border-radius: 12px;
background: var(--mal-claro);
}
.chat-grab-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--mal); animation: latidoChat 1s infinite; }
@keyframes latidoChat { 50% { opacity: .25; } }
.chat-grabadora b { color: var(--mal); font-variant-numeric: tabular-nums; }
.chat-adjunto {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 7px;
padding: 6px;
border: 1px solid var(--borde);
border-radius: 10px;
background: var(--azul-claro);
}
.chat-adjunto img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }
.chat-adjunto span { flex: 1; min-width: 0; font-size: 12px; color: var(--suave); }
.chat-ayuda { color: var(--suave); font-size: 10.5px; margin-top: 6px; line-height: 1.35; }
.chat-vacio { color: var(--suave); text-align: center; padding: 30px 14px; font-size: 13px; }
.chat-vacio b { display: block; color: var(--azul); font-size: 1rem; margin-bottom: 4px; }
.visor-imagen { display: block; width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; background: var(--azul-claro); }
.visor-acciones { margin-top: 12px; }
.post-accion.mensaje { color: var(--azul-2); }
/* ---------- Carrusel en vivo / empresas ---------- */
#salas { scroll-margin-top: 82px; }
.vivo-carrusel { padding: 14px; overflow: hidden; }
.vivo-carrusel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.vivo-carrusel-cab h2 { margin: 0; font-size: 1rem; }
.vivo-carrusel-pista { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: thin; }
.vivo-card {
flex: 0 0 300px;
scroll-snap-align: start;
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: 10px;
padding: 12px;
border: 1px solid var(--borde);
border-radius: 16px;
background: var(--tarjeta);
position: relative;
overflow: hidden;
}
.vivo-card.en-vivo { border-color: var(--oro); box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 45%, transparent), var(--social-sombra); }
.vivo-card-avatar { align-self: start; position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.vivo-card-avatar.con-aro::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--oro), #ff4d4d, var(--oro), #ffe082, var(--oro));
animation: aroVivo 2.8s linear infinite;
}
.vivo-card-avatar .avatar { --tam: 56px; position: relative; z-index: 1; border: 2px solid var(--tarjeta); }
@keyframes aroVivo { to { transform: rotate(360deg); } }
.vivo-card-datos { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vivo-card-titulo { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; }
.vivo-card-titulo b { font-size: 13.5px; line-height: 1.25; }
.vivo-card-datos small { color: var(--suave); font-size: 11.5px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vivo-card-datos p { margin: 2px 0 0; color: var(--oro-osc); font-size: 12px; font-weight: 800; }
.vivo-card-meta { color: var(--suave); font-size: 10.5px; }
.vivo-card-btn { grid-column: 1 / -1; justify-self: start; min-height: 32px; padding: 5px 10px; font-size: 12px; }
.vivo-carrusel-vacio { color: var(--suave); font-size: 13px; padding: 18px 8px; }
.vivo-empresa-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--borde); border-radius: 14px; background: var(--tarjeta); }
.vivo-empresa-card + .vivo-empresa-card { margin-top: 10px; }
.vivo-empresa-card .avatar { --tam: 64px; }
.vivo-empresa-datos { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vivo-empresa-datos small { color: var(--suave); font-size: 12px; }
.vivo-empresa-datos p { margin: 2px 0 4px; font-size: 12px; }
/* ---------- Reacciones (chip + burbuja para elegir) ---------- */
/* La fila muestra solo las reacciones que se usaron, de la más elegida a la menos.
--crece lo fija social.js: sube 1 % por cada 10 reacciones del posteo (tope x1.5). */
.post-reacciones { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.icono-reaccion {
display: inline-block;
font-size: 15px;
line-height: 1;
font-style: normal;
vertical-align: -2px;
}
.reaccion {
--crece: 1;
position: relative;
border: 1px solid transparent;
background: transparent;
border-radius: 999px;
padding: calc(5px * var(--crece)) calc(8px * var(--crece));
font-size: calc(21px * var(--crece));
line-height: 1;
min-height: calc(45px * var(--crece));
cursor: pointer;
display: inline-flex;
align-items: center;
gap: calc(4px * var(--crece));
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-user-select: none;
user-select: none;
transition: background-color .18s ease, border-color .18s ease, box-shadow .22s ease, transform .16s ease, font-size .35s ease, min-height .35s ease, padding .35s ease;
}
/* El emoji va aparte del número (antes la regla del contador lo encogía a 10.5 px).
base.css fija .icono-reaccion en 16x16 px (caja de ícono SVG): el emoji grande se
desbordaba y se montaba sobre el número, así que acá se libera la caja. */
.reaccion .icono-reaccion,
.reacciones-burbuja .icono-reaccion {
font-size: calc(22.5px * var(--crece, 1));
color: inherit;
font-weight: 400;
width: auto;
height: auto;
flex: none;
stroke: none;
fill: none;
opacity: 1;
line-height: 1;
overflow: visible;
}
.reaccion span:not(.icono-reaccion) {
color: var(--suave);
font-size: calc(14px * var(--crece));
font-weight: 800;
font-variant-numeric: tabular-nums;
transition: color .18s ease;
}
.reaccion:hover { background: var(--azul-claro); }
.reaccion:active { transform: scale(.94); }
.reaccion:focus-visible { outline: 2px solid var(--azul-3); outline-offset: 2px; }
.reaccion.activa { background: var(--azul-claro); border-color: var(--azul-3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-3) 20%, transparent); }
.reaccion.activa span:not(.icono-reaccion) { color: var(--azul-3); }
/* Sin reacciones todavía: el corazón se ve apagado y es el botón que abre la burbuja. */
.reaccion.vacia { opacity: .55; filter: grayscale(.55); }
.reaccion.vacia:hover { opacity: 1; filter: none; }
/* Toque: resorte del botón + emoji que salta y gira + onda que se expande. */
.reaccion.pop, .reaccion-opcion.pop { animation: reaccionPop .52s cubic-bezier(.2, .85, .3, 1.15); }
@keyframes reaccionPop {
0% { transform: scale(1); }
22% { transform: scale(.87); }
52% { transform: scale(1.16); }
74% { transform: scale(.97); }
100% { transform: scale(1); }
}
.reaccion.pop .icono-reaccion, .reaccion-opcion.pop .icono-reaccion { animation: reaccionEmoji .52s cubic-bezier(.2, .85, .3, 1.2); }
@keyframes reaccionEmoji {
0% { transform: scale(1) rotate(0deg); }
28% { transform: scale(1.42) rotate(-14deg); }
56% { transform: scale(.92) rotate(10deg); }
78% { transform: scale(1.12) rotate(-5deg); }
100% { transform: scale(1) rotate(0deg); }
}
.reaccion::after {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
border: 2px solid var(--azul-3);
opacity: 0;
pointer-events: none;
}
.reaccion.pop::after { animation: reaccionOnda .55s ease-out; }
@keyframes reaccionOnda {
0% { opacity: .85; transform: scale(.55); }
70% { opacity: .25; }
100% { opacity: 0; transform: scale(1.5); }
}
/* ---------- Burbuja de las 5 reacciones (flota sobre el muro) ---------- */
.reacciones-burbuja {
position: fixed;
z-index: calc(var(--z-dock, 450) + 1);
display: flex;
flex-direction: column;
gap: 6px;
padding: 9px 11px;
border-radius: 999px;
/* Base opaca (según el tema) + el color de tarjeta del posteo encima: no se transparenta el texto. */
background-color: var(--rb-fondo, #101a2b);
background-image: linear-gradient(var(--tarjeta, transparent), var(--tarjeta, transparent));
border: 1px solid var(--borde, rgba(0, 0, 0, .12));
box-shadow: 0 16px 40px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .18);
transform-origin: bottom center;
animation: burbujaSale .18s cubic-bezier(.2, .9, .3, 1.2);
}
.reacciones-burbuja.oculto { display: none; }
@keyframes burbujaSale {
from { opacity: 0; transform: translateY(8px) scale(.78); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.reacciones-burbuja-fila { display: flex; align-items: center; gap: 2px; }
.reaccion-opcion {
--crece: 1;
position: relative;
border: 0;
background: transparent;
border-radius: 999px;
padding: 5px 6px;
font-size: 26px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
transform-origin: center bottom;
transition: transform .16s cubic-bezier(.2, .9, .3, 1.4), background-color .16s ease;
}
.reaccion-opcion .icono-reaccion { font-size: 26px; }
.reaccion-opcion:hover,
.reaccion-opcion:focus-visible { transform: scale(1.34) translateY(-3px); background: var(--azul-claro); outline: none; }
.reaccion-opcion.activa { background: var(--azul-claro); box-shadow: inset 0 0 0 2px var(--azul-3); }
.reaccion-mas {
width: 30px;
height: 30px;
margin-left: 2px;
border: 1px dashed var(--borde, rgba(0, 0, 0, .25));
border-radius: 50%;
background: transparent;
color: var(--suave, #64748b);
font: inherit;
font-size: 18px;
font-weight: 800;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.reaccion-mas:hover, .reaccion-mas:focus-visible { transform: scale(1.12); background: var(--azul-claro); color: var(--azul-3); outline: none; }
.reacciones-burbuja.con-extra { border-radius: 20px; }
.reacciones-extra {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 2px 4px;
padding-top: 4px;
margin-top: 2px;
border-top: 1px solid var(--borde, rgba(0, 0, 0, .12));
animation: extrasSale .16s ease-out;
}
.reacciones-extra[hidden] { display: none; }
@keyframes extrasSale {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.reaccion-opcion.extra { padding: 4px; }
.reaccion-opcion.extra .icono-reaccion { font-size: 21px; }
@media (prefers-reduced-motion: reduce) {
.reaccion.pop, .reaccion.pop .icono-reaccion, .reaccion.pop::after,
.reaccion-opcion.pop, .reaccion-opcion.pop .icono-reaccion,
.reacciones-burbuja { animation-duration: .01ms; }
}
/* ---------- Tarjeta de juego en el posteo ---------- */
.post-evento {
margin-top: 12px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--oro) 45%, var(--borde));
border-radius: 14px;
background: var(--tarjeta);
background: linear-gradient(135deg, color-mix(in srgb, var(--oro) 10%, var(--tarjeta)), var(--tarjeta));
position: relative;
overflow: hidden;
}
.post-evento.en-vivo { border-color: var(--oro); box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 30%, transparent); }
.post-evento-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.post-evento-tipo { color: var(--suave); font-size: 11px; font-weight: 700; }
.post-evento h3 { margin: 8px 0 0; font-size: 1.02rem; }
.post-evento-premio { margin: 4px 0 0; color: var(--oro-osc); font-size: 13px; font-weight: 800; }
.post-evento-motivo { margin: 4px 0 0; color: var(--oro-osc); font-size: 13.5px; font-weight: 900; }
.post-evento-frase { margin: 4px 0 0; color: var(--suave); font-size: 12.5px; font-style: italic; }
.post-evento-menu { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.post-evento-menu li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--texto); }
.post-evento-menu li b { font-weight: 700; }
.post-evento-menu li span { color: var(--oro-osc); font-weight: 800; white-space: nowrap; }
.post-evento-delivery { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ok-claro); color: var(--ok); font-size: 12px; font-weight: 800; text-decoration: none; }
.post-evento-delivery:hover { filter: brightness(.96); }
.post-evento-meta { margin-top: 3px; color: var(--suave); font-size: 11.5px; }
.post-evento-btn {
margin-top: 10px;
width: 100%;
background: linear-gradient(135deg, #ffd27a, var(--oro));
border-color: var(--oro-osc);
color: #2a2210;
font-weight: 800;
}
.post-evento-btn:hover { background: linear-gradient(135deg, #ffe3a3, #ef7878); }
/* ---------- Auto-posteo dorado de ganadores ---------- */
.post-dorado { border-color: var(--oro); background: var(--tarjeta); background: linear-gradient(135deg, color-mix(in srgb, var(--oro) 12%, var(--tarjeta)), var(--tarjeta)); }
.post-ganador {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
padding: 12px;
border: 1px solid var(--oro);
border-radius: 14px;
background: linear-gradient(135deg, #2b2410, #5c4718);
color: #fff;
}
.post-ganador-trofeo { font-size: 32px; line-height: 1; flex: 0 0 auto; }
.post-ganador-datos { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.post-ganador-datos b { color: #ffe3a3; font-size: 14px; }
.post-ganador-datos small { color: #f3dfb3; font-size: 12px; overflow-wrap: anywhere; }
/* ---------- Perfil de organizador / empresa ---------- */
.social-modal.ancho { width: min(880px, 100%); }
.perfil-modal-cuerpo { padding-top: 10px; }
.perfil-banner {
height: 150px;
margin: -14px -20px 0;
overflow: hidden;
background: linear-gradient(135deg, var(--azul), var(--azul-3) 55%, var(--oro));
}
.perfil-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.perfil-banner.vacio { opacity: .55; }
.perfil-publico-cab.org { align-items: flex-end; margin-top: -44px; position: relative; }
.perfil-publico-cab.org .avatar { --tam: 92px; border-width: 4px; }
.perfil-publico-quien { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.perfil-publico-nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.perfil-publico-nombre h2 { margin: 0; }
.perfil-datos-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.dato-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border-radius: 999px;
background: var(--azul-claro);
color: var(--azul-2);
font-size: 11.5px;
font-weight: 700;
text-decoration: none;
}
a.dato-chip:hover { background: var(--borde); }
a.dato-chip.mapa { background: var(--ok-claro); color: var(--ok); }
.vitrina-bloque { margin: 18px 0; }
.vitrina-bloque h3 { font-size: 1rem; margin: 0 0 8px; }
.productos-grid, .premios-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.producto-card, .premio-card {
border: 1px solid var(--borde);
border-radius: 12px;
overflow: hidden;
background: var(--tarjeta);
display: flex;
flex-direction: column;
min-width: 0;
}
.producto-card img { display: block; width: 100%; height: 120px; object-fit: cover; background: var(--azul-claro); }
.premio-card img { display: block; width: 100%; height: 100px; object-fit: cover; background: var(--azul-claro); }
.producto-sin-foto {
height: 78px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
background: var(--azul-claro);
}
.producto-card b { margin: 9px 10px 0; font-size: 13.5px; overflow-wrap: anywhere; }
.producto-card p { margin: 3px 10px 0; color: var(--suave); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.producto-card .btn { margin: 9px 10px 10px; align-self: flex-start; min-height: 30px; padding: 4px 9px; font-size: 11.5px; }
.premio-card-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 0; flex-wrap: wrap; }
.premio-card-cab b { font-size: 13px; overflow-wrap: anywhere; }
.premio-card p { margin: 4px 10px 10px; color: var(--suave); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.perfil-tabs {
display: flex;
gap: 4px;
overflow-x: auto;
border-bottom: 1px solid var(--borde);
margin: 18px 0 12px;
padding-bottom: 2px;
}
.perfil-tab {
border: 0;
background: transparent;
color: var(--suave);
font: inherit;
font-size: 12.5px;
font-weight: 800;
padding: 9px 12px;
border-radius: 9px 9px 0 0;
cursor: pointer;
white-space: nowrap;
}
.perfil-tab:hover { background: var(--azul-claro); }
.perfil-tab.activo { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul-3); }
.perfil-tab-contenido { min-height: 80px; }
.perfil-subtitulo { font-size: 1rem; margin: 18px 0 10px; }
.perfil-posts { display: flex; flex-direction: column; gap: 10px; }
.eventos-lista, .historial-lista { display: flex; flex-direction: column; gap: 10px; }
.evento-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px;
border: 1px solid var(--borde);
border-radius: 12px;
background: var(--tarjeta);
flex-wrap: wrap;
}
.evento-card-datos { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.evento-card-datos small { color: var(--suave); font-size: 12px; }
.chips-fila { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 3px; }
.evento-card .btn { min-height: 32px; padding: 5px 10px; font-size: 12px; }
.historial-card { padding: 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--tarjeta); }
.historial-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.historial-cab small { color: var(--suave); font-size: 12px; }
.ganadores-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ganadores-lista li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; padding: 7px 0; border-top: 1px dashed var(--borde); }
.ganadores-lista li:first-child { border-top: 0; }
.ganadores-lista b { color: var(--texto); }
.ganador-num { color: var(--azul); font-weight: 800; }
.ganador-carton { color: var(--suave); font-family: var(--mono); font-size: 11.5px; }
.post-mini { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; padding: 12px; }
.post-mini-cab { display: flex; align-items: flex-start; gap: 8px; }
.post-mini-cab > div { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; }
.post-mini-cab small { color: var(--suave); font-size: 11.5px; }
.post-mini .post-texto { font-size: 14px; }
.post-mini .post-img { max-height: 300px; }
.post-mini-pie { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--borde); color: var(--suave); font-size: 12px; font-weight: 700; }
.post-mini-pie .btn { margin-left: 6px; }
/* ---------- Editor de perfil de empresa ---------- */
.org-box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding: 12px;
border: 1px solid var(--borde);
border-radius: 12px;
background: var(--azul-claro);
}
.org-box p { margin: 4px 0 0; }
/* ---------- Ajustes de vista nocturna ---------- */
html[data-tema="oscuro"] .avatar { background: linear-gradient(135deg, var(--marca), var(--marca-2)); }
html[data-tema="oscuro"] .badge-org { background: linear-gradient(135deg, var(--marca), var(--marca-2)); }
html[data-tema="oscuro"] .badge-org .verif { color: var(--marca); }
html[data-tema="oscuro"] .perfil-banner { background: linear-gradient(135deg, var(--marca), var(--marca-2) 55%, var(--oro-osc)); }
html[data-tema="oscuro"] .perfil-invitado-icon { background: var(--tarjeta-2); color: var(--azul); }
html[data-tema="oscuro"] .perfil-contadores > div,
html[data-tema="oscuro"] .resultado,
html[data-tema="oscuro"] .post-original,
html[data-tema="oscuro"] .post-chip,
html[data-tema="oscuro"] .perfil-publico-contadores > div { background: var(--tarjeta-2); }
html[data-tema="oscuro"] .composer-preview { background: var(--tarjeta-2); }
html[data-tema="oscuro"] .quitar-img { background: rgba(0, 0, 0, .7); }
html[data-tema="oscuro"] .feed-tab.activo { color: #fff; }
html[data-tema="oscuro"] .chat-fondo { background: rgba(0, 0, 0, .55); }
html[data-tema="oscuro"] .chat-burbuja { background: var(--tarjeta-2); }
html[data-tema="oscuro"] .chat-burbuja.mia { background: var(--marca); border-color: var(--marca); }
html[data-tema="oscuro"] .chat-icono { background: var(--tarjeta-2); }
html[data-tema="oscuro"] .chat-adjunto { background: var(--tarjeta-2); }
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
.social-layout { grid-template-columns: 235px minmax(0, 1fr); }
.social-der { display: flex; grid-column: 1 / -1; position: static; flex-direction: row; }
.social-der .tarjeta { flex: 1; }
}
/* Tablet: las tarjetas de la columna derecha pasan a varias filas en vez de apretarse en una sola */
@media (min-width: 781px) and (max-width: 1080px) {
.social-der { flex-wrap: wrap; }
.social-der .tarjeta { flex: 1 1 280px; min-width: 0; }
}
@media (max-width: 780px) {
.social-layout { grid-template-columns: 1fr; padding: 14px 10px 48px; gap: 14px; }
.social-izq, .social-der { position: static; }
.social-centro { order: 1; }
.social-izq { order: 2; }
.social-der { display: flex; order: 3; flex-direction: column; }
.feed-tabs { top: 62px; align-self: stretch; justify-content: center; }
.feed-tab { flex: 1; }
.perfil-card { padding: 14px; }
.perfil-cab { margin-top: 0; }
.composer { padding: 12px; }
.composer-preview { margin-left: 0; }
.post { padding: 13px; border-radius: 14px; }
.post.post-con-estado { padding-top: 34px; }
.post-repost-label { margin-left: 0; }
.post-accion.perfil { margin-left: 0; }
.vivo-card { flex-basis: 275px; }
.vivo-empresa-card { flex-direction: column; }
.chat-panel { width: 100vw; border-left: 0; }
.chat-burbuja { max-width: 90%; }
.productos-grid, .premios-grid { grid-template-columns: 1fr; }
.perfil-banner { height: 118px; margin: -14px -20px 0; }
.perfil-publico-cab.org { margin-top: -34px; }
.perfil-publico-cab.org .avatar { --tam: 76px; }
.perfil-publico-nombre h2 { font-size: 1.1rem; }
.evento-card { align-items: flex-start; }
.evento-card .btn { width: 100%; }
}
@media (max-width: 420px) {
.composer-fila .evento-input { flex-basis: 100%; order: 4; max-width: none; }
.contador { order: 3; }
.perfil-contadores { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.esqueleto { animation: none; }
.post { transition: none; }
}
/* ---------- Super-feed de la portada (/) ---------- */
.muro-burbujas { padding: 12px 14px; }
.muro-burbujas-pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; scrollbar-width: none; }
.muro-burbujas-pista::-webkit-scrollbar { display: none; }
.muro-burbuja { flex: 0 0 88px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; text-decoration: none; color: var(--texto); scroll-snap-align: start; }
.muro-burbuja-aro { position: relative; width: 72px; height: 72px; border-radius: 50%; padding: 3px; display: grid; place-items: center; background: linear-gradient(135deg, var(--azul-3), var(--azul)); }
.muro-burbuja-aro::before { content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: 0; }
.muro-burbuja.en-vivo .muro-burbuja-aro { background: transparent; }
.muro-burbuja.en-vivo .muro-burbuja-aro::before { background: conic-gradient(from 0deg, var(--mal), var(--oro), var(--mal)); animation: muro-giro 3s linear infinite; }
.muro-burbuja-aro .avatar { position: relative; z-index: 1; --tam: 64px; border: 3px solid var(--tarjeta); }
.muro-burbuja b { font-size: 11.5px; font-weight: 700; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.muro-burbuja small { font-size: 10px; font-weight: 900; letter-spacing: .3px; color: var(--suave); }
.muro-burbuja.en-vivo small { color: var(--mal); }
@keyframes muro-giro { to { transform: rotate(1turn); } }
.muro-bloque { display: grid; gap: 10px; }
.muro-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.muro-cab h3 { margin: 0; font-size: 1rem; }
/* Cabeceras de sección con badge de conteo integrado */
.seccion-cabecera-fila {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
padding: 0 4px;
}
.seccion-titulo-grupo {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.seccion-titulo {
margin: 0;
font-size: 1rem;
line-height: 1.2;
color: var(--texto, #f1f5f9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.seccion-conteo-badge {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
min-width: 20px;
height: 20px;
padding: 0 7px;
font-size: 11px;
font-weight: 600;
line-height: 1;
color: rgba(241, 245, 249, .75);
background: rgba(255, 255, 255, .07);
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, .1));
border-radius: 9999px;
letter-spacing: .3px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.seccion-icono {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 16px;
height: 16px;
color: rgba(241, 245, 249, .75);
}
.seccion-icono .icono-svg { width: 16px; height: 16px; }
.icono-en-vivo-pulso {
flex: none;
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
color: rgba(241, 245, 249, .78);
box-shadow: 0 0 0 0 rgba(241, 245, 249, .35);
animation: seccion-en-vivo-pulso 1.8s ease-out infinite;
}
@keyframes seccion-en-vivo-pulso {
0% { box-shadow: 0 0 0 0 rgba(241, 245, 249, .35); }
70% { box-shadow: 0 0 0 6px rgba(241, 245, 249, 0); }
100% { box-shadow: 0 0 0 0 rgba(241, 245, 249, 0); }
}
@media (prefers-reduced-motion: reduce) {
.icono-en-vivo-pulso { animation: none; }
}
.muro-salas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.muro-sala { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: 16px; background: var(--tarjeta); box-shadow: var(--social-sombra); }
.muro-sala.en-vivo { border-left-color: var(--mal); }
.muro-sala-banner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; margin: -14px -14px 2px; padding: 0 12px; border-radius: 12px 12px 0 0; background: linear-gradient(120deg, var(--azul), var(--azul-3) 65%, var(--oro)); overflow: hidden; }
.muro-sala-banner .avatar { --tam: 46px; border: 2px solid var(--tarjeta); }
.muro-sala-emoji { font-size: 26px; opacity: .9; }
.muro-sala-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.muro-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 900; letter-spacing: .4px; }
.muro-badge.vivo { background: var(--mal); color: #fff; animation: muro-pulso 1.6s ease-in-out infinite; }
.muro-badge.venta { background: var(--ok-claro); color: var(--ok); }
@keyframes muro-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.muro-sala-org { color: var(--suave); font-size: 11.5px; font-weight: 600; }
.muro-sala h4 { margin: 0; font-size: 1.02rem; color: var(--texto); line-height: 1.25; }
.muro-sala-premio { margin: 0; font-size: 13px; font-weight: 800; color: var(--oro-osc); overflow-wrap: anywhere; }
.muro-sala-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--suave); }
.muro-sala-btn { margin-top: auto; align-self: flex-start; min-height: 34px; padding: 6px 12px; font-size: 12.5px; }
.muro-sala-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.muro-sala-acciones .muro-sala-btn { margin-top: 0; }
.muro-sala-mapa { font-size: 12px; font-weight: 800; color: var(--azul-3); text-decoration: none; }
.muro-sala-mapa:hover { text-decoration: underline; }
.post-evento-mapa { display: inline-flex; margin-top: 8px; padding: 5px 10px; border-radius: 999px; background: var(--ok-claro); color: var(--ok); font-size: 12px; font-weight: 800; text-decoration: none; }
.post-evento-mapa:hover { filter: brightness(.96); }
.muro-ad { position: relative; display: grid; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; box-shadow: var(--social-sombra); }
.muro-ganadores { display: grid; gap: 10px; }
.muro-ad-rotulo { padding: 6px 12px 5px; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--suave); }
.muro-ad a { display: block; }
.muro-ad img { display: block; width: 100%; height: auto; }
.muro-fila { padding: 14px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta); box-shadow: var(--social-sombra); }
.muro-fila-pista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; scrollbar-width: none; }
.muro-fila-pista::-webkit-scrollbar { display: none; }
.muro-sug { flex: 0 0 158px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 9px 11px; border: 1px solid var(--borde); border-radius: 14px; background: var(--tarjeta); text-align: center; scroll-snap-align: start; }
.muro-sug-avatar { border: 0; background: none; padding: 0; cursor: pointer; }
.muro-sug .avatar { --tam: 58px; }
.muro-sug b { font-size: 13px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muro-sug .handle { display: block; max-width: 100%; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muro-sug small { font-size: 11px; line-height: 1.25; color: var(--suave); }
.muro-sug-zona { font-size: 10.5px; font-weight: 800; color: var(--oro-osc); background: var(--aviso-claro); border-radius: 999px; padding: 2px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muro-sug .btn { width: 100%; margin-top: 2px; min-height: 32px; padding: 4px 6px; font-size: 11.5px; }
.muro-sug.siguiendo .btn { color: var(--ok); border-color: var(--ok); }
html[data-tema="oscuro"] .muro-sug.siguiendo .btn { color: var(--ok); }
/* Modal de acceso del muro */
.acc-modal form { display: grid; gap: 10px; }
.acc-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 10px; background: var(--azul-claro); }
.acc-tabs button { border: 0; background: transparent; border-radius: 8px; padding: 8px 6px; font: inherit; font-weight: 700; font-size: 13px; color: var(--azul); cursor: pointer; }
.acc-tabs button.activa { background: var(--tarjeta); color: var(--texto); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
.acc-lista { display: grid; gap: 8px; }
.acc-evento { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; }
.acc-evento-datos { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.acc-evento-datos b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-evento-datos small { color: var(--suave); font-size: 11.5px; }
.acc-evento .btn { flex: none; }
.acc-info { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--azul-claro); }
.acc-info small { color: var(--suave); }
.acc-ok h3 { margin: 8px 0; }
@media (max-width: 640px) {
.muro-burbujas { padding: 10px; }
.muro-salas { grid-template-columns: 1fr; }
.muro-sala-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.muro-burbuja.en-vivo .muro-burbuja-aro::before,
.muro-badge.vivo { animation: none !important; }
}
/* Menú de opciones del posteo */
.post-menu { position: relative; margin-left: auto; flex: none; }
.post-menu summary { list-style: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--suave); font-size: 20px; font-weight: 900; user-select: none; }
.post-menu summary::-webkit-details-marker { display: none; }
.post-menu summary:hover, .post-menu[open] summary { background: var(--azul-claro); color: var(--azul); }
.post-menu-lista { position: absolute; right: 0; top: 36px; z-index: 20; min-width: 220px; display: grid; padding: 5px; border: 1px solid var(--borde); border-radius: 12px; background: var(--tarjeta); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.post-menu:not([open]) .post-menu-lista { display: none; }
.post-menu-lista button { border: 0; background: transparent; color: var(--texto); font: inherit; font-size: 13px; text-align: left; padding: 9px 10px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.post-menu-lista button:hover { background: var(--azul-claro); }
.post-menu-lista [data-accion="borrar"] { color: var(--mal); }
.post-menu-lista [data-accion="reportar-post"] { color: var(--aviso); }
.reporte-form { display: grid; gap: 10px; }
.reporte-opcion {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 10px 12px;
border: 1px solid var(--borde);
border-radius: 10px;
background: var(--azul-claro);
cursor: pointer;
font-size: 13px;
}
.reporte-opcion:hover { border-color: var(--perfil-accent, #38BDF8); }
.reporte-opcion input { margin-top: 2px; accent-color: var(--perfil-accent, #38BDF8); }
.reporte-opcion span { min-width: 0; }
.reporte-opcion b { display: block; font-size: 13px; }
.reporte-opcion small { display: block; margin-top: 2px; color: var(--suave); font-size: 11.5px; line-height: 1.35; }
/* Tarjeta patrocinada dentro del feed */
.post-patrocinado { border-color: color-mix(in srgb, var(--oro) 55%, var(--borde)); background: linear-gradient(180deg, color-mix(in srgb, var(--oro) 7%, var(--tarjeta)), var(--tarjeta) 110px); }
.post-patrocinado-rotulo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--oro-osc); }
.post-patrocinado-rotulo small { color: var(--suave); font-weight: 700; letter-spacing: 0; text-transform: none; }
.post-patrocinado-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--borde); }
.post-patrocinado-pie small { color: var(--suave); font-size: 11.5px; }
/* Modal de publicidad */
.pub-form { display: grid; gap: 14px; }
.pub-bloque { display: grid; gap: 8px; }
.pub-bloque > b { font-size: 13px; color: var(--azul); }
.pub-post-preview { border: 1px solid var(--borde); border-radius: 12px; padding: 10px; background: var(--fondo); }
.pub-post-preview-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pub-post-preview-cab b { display: block; font-size: 12.5px; }
.pub-post-preview-cab .handle { display: block; font-size: 11px; color: var(--suave); }
.pub-post-preview p { margin: 4px 0 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.pub-post-preview img { display: block; max-height: 220px; max-width: 100%; border-radius: 10px; object-fit: cover; }
.pub-destinos { max-height: 290px; overflow-y: auto; display: grid; gap: 8px; padding: 8px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); }
.pub-depto { padding: 8px; border: 1px solid var(--borde); border-radius: 10px; background: var(--tarjeta); }
.pub-depto-cab { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px; }
.pub-depto-cab small { color: var(--oro-osc); font-weight: 800; }
.pub-ciudades { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 4px 8px; margin-top: 7px; padding-left: 4px; }
.pub-ciudades label { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto); cursor: pointer; }
.pub-ciudades input:disabled + span { opacity: .45; }
.pub-demanda { font-size: 9.5px; font-weight: 900; color: var(--oro-osc); background: var(--aviso-claro); border-radius: 999px; padding: 2px 5px; white-space: nowrap; }
.pub-calc { padding: 12px; border-radius: 12px; background: var(--aviso-claro); color: var(--texto); font-size: 14px; }
.pub-calc b { color: var(--oro-osc); }
.pub-calc small { display: block; margin-top: 5px; color: var(--suave); font-size: 11.5px; }
.pub-transfer { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--azul-claro); font-size: 13px; }
.pub-transfer > b { color: var(--azul); margin-bottom: 3px; }
.pub-transfer-fila { display: flex; justify-content: space-between; gap: 10px; }
.pub-transfer-fila span { color: var(--suave); }
.pub-transfer-fila b { user-select: all; }
@media (max-width: 640px) {
.pub-ciudades { grid-template-columns: 1fr 1fr; }
.pub-transfer-fila { align-items: flex-start; flex-direction: column; gap: 1px; }
}
/* ============================================================
PERFIL FULL-VIEW: fondo temático total, glassmorphism y 2 columnas
============================================================ */
body.perfil-full {
padding-top: 56px !important;
background: #070d1a;
overflow-x: hidden;
}
body.perfil-full .social-layout { display: none !important; }
.vista-perfil-full {
--texto: var(--perfil-texto, #f8fafc);
min-height: calc(100vh - 60px);
min-height: calc(100dvh - 60px);
--suave: var(--perfil-suave, #cbd5e1);
--azul: var(--perfil-accent, #f49797);
--azul-2: var(--perfil-accent, #f49797);
--azul-3: var(--perfil-accent, #f49797);
--azul-claro: var(--perfil-acento-tenue, rgba(255, 255, 255, .08));
--marca: var(--perfil-accent, #1f4f8f);
--marca-2: var(--perfil-acento-borde, #2a62ad);
--oro: var(--perfil-accent, #f49797);
--oro-osc: var(--perfil-accent, #f49797);
--btn-bg: var(--perfil-accent, #1f4f8f);
--btn-bg-hover: var(--perfil-acento-borde, #2a62ad);
--btn-texto: var(--perfil-acento-texto, #111827);
--tarjeta: var(--perfil-superficie, rgba(15, 23, 42, .76));
--borde: var(--perfil-borde, rgba(255, 255, 255, .12));
--fondo: var(--perfil-superficie-2, rgba(2, 6, 23, .48));
--ok-claro: rgba(34, 197, 94, .16);
--ok: color-mix(in srgb, #1b9a5a 38%, var(--perfil-texto, #fff));
--aviso-claro: rgba(245, 158, 11, .16);
--aviso: color-mix(in srgb, #b45309 38%, var(--perfil-texto, #fff));
--perfil-accent: #f49797;
--perfil-acento-texto: #0b1220;
position: relative;
isolation: isolate;
color: var(--texto);
background: var(--feed-fondo, var(--tp-bg, linear-gradient(145deg, #071426, #ef7878 55%, #111c33)));
background-attachment: fixed;
overflow-x: hidden;
}
.vista-perfil-full.perfil-cargando { background: #070d1a; }
.vista-perfil-full.perfil-cargando::before { display: none; }
.vista-perfil-full.perfil-paleta { background: var(--feed-fondo, var(--perfil-bg, #0f172a)); }
.vista-perfil-full.perfil-paleta .perfil-full-portada {
background: linear-gradient(135deg, var(--perfil-bg, #0f172a) 0%, color-mix(in srgb, var(--perfil-bg, #0f172a) 72%, var(--perfil-accent, #f49797) 28%) 100%);
}
.vista-perfil-full.perfil-paleta .perfil-full-portada::before {
background-image: radial-gradient(circle at 22% 18%, color-mix(in srgb, var(--perfil-accent, #f49797) 32%, transparent), transparent 30rem);
background-size: auto;
background-repeat: no-repeat;
opacity: .9;
animation: none;
}
.vista-perfil-full::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
background-image: var(--tp-patron, none);
background-size: var(--tp-size, 220px);
background-repeat: repeat;
opacity: var(--tp-op, .24);
animation: var(--tp-anim, none);
pointer-events: none;
will-change: transform, opacity;
}
.vista-perfil-full.perfil-paleta::before {
background-image:
radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--perfil-accent, #f49797) 24%, transparent), transparent 32rem),
radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--perfil-accent, #f49797) 14%, transparent), transparent 30rem);
background-size: auto;
opacity: .8;
animation: none;
}
.vista-perfil-full::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(2, 6, 23, .10), rgba(2, 6, 23, .38) 52%, rgba(2, 6, 23, .30));
pointer-events: none;
}
.vista-perfil-full > * { position: relative; z-index: 1; }
.perfil-full-contenido { position: relative; z-index: 1; }
.perfil-full-inner {
width: min(1760px, 100%);
margin: 0 auto;
/* La barra global fija mide 56px y el body reserva 60px. Estos 16px
dejan el hero a 20px de la navbar, sin una segunda franja. */
padding: 16px clamp(12px, 3vw, 28px) 48px;
}
.perfil-full-hero {
position: relative;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--perfil-texto, #fff) 12%, transparent);
border-radius: 26px;
background: color-mix(in srgb, var(--perfil-superficie, #0f172a) 36%, transparent);
box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}
.perfil-full-portada {
position: relative;
min-height: 224px;
overflow: hidden;
background: var(--feed-fondo, var(--tp-bg, var(--perfil-bg, linear-gradient(135deg, #ef7878, #c94a4a))));
}
.perfil-full-portada::before {
content: "";
position: absolute;
inset: -20%;
background-image: var(--tp-patron, none);
background-size: var(--tp-size, 220px);
opacity: var(--tp-op, .45);
animation: var(--tp-anim, none);
pointer-events: none;
}
.perfil-full-portada::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(2, 6, 23, .06) 20%, rgba(15, 23, 42, .72) 100%);
pointer-events: none;
}
.perfil-full-portada img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: 224px;
object-fit: cover;
}
.perfil-full-portada img + * { position: relative; z-index: 2; }
.perfil-full-cab {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
gap: 18px;
flex-wrap: wrap;
margin-top: -64px;
padding: 0 26px 24px;
background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--perfil-superficie, #0f172a) 76%, transparent) 42%, color-mix(in srgb, var(--perfil-superficie, #0f172a) 94%, transparent) 100%);
}
.perfil-full-avatar {
position: relative;
flex: none;
width: 140px;
height: 140px;
padding: 5px;
border-radius: 50%;
background: conic-gradient(from 210deg, var(--perfil-accent), #ffffff 28%, var(--perfil-accent) 55%, #93c5fd 82%, var(--perfil-accent));
box-shadow: 0 0 0 4px var(--perfil-borde, color-mix(in srgb, var(--perfil-superficie, #0f172a) 72%, transparent)), 0 16px 34px rgba(0, 0, 0, .22);
}
.perfil-full-avatar.org {
background: conic-gradient(from 210deg, #fde68a, #f59e0b 28%, #fef3c7 55%, #d97706 82%, #fde68a);
}
.perfil-full-avatar .avatar {
--tam: 120px;
width: 120px;
height: 120px;
border: 4px solid var(--perfil-superficie, #0f172a);
box-shadow: none;
}
.perfil-full-avatar .perfil-cumple { bottom: -6px; }
.perfil-full-identidad { min-width: 0; flex: 1 1 300px; padding-bottom: 3px; }
.perfil-full-nombre { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.perfil-full-nombre h1 {
margin: 0;
color: var(--perfil-texto, #fff);
font-size: clamp(1.55rem, 3.2vw, 2.35rem);
line-height: 1.08;
letter-spacing: -.02em;
text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.perfil-full-handle {
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
margin-top: 4px;
color: var(--perfil-suave, #cbd5e1);
font-size: 13px;
}
.perfil-full-handle > span { color: var(--perfil-accent); font-weight: 800; }
.perfil-full-handle b { color: var(--perfil-texto, #f8fafc); font-size: 14px; font-variant-numeric: tabular-nums; }
.perfil-full-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.perfil-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 9px;
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 999px;
background: rgba(255, 255, 255, .10);
color: #e2e8f0;
font-size: 11.5px;
font-weight: 700;
}
.perfil-chip.dorado { border-color: color-mix(in srgb, var(--perfil-accent) 65%, transparent); color: #fff7df; background: color-mix(in srgb, var(--perfil-accent) 22%, transparent); }
.perfil-full-acciones { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-bottom: 3px; }
.perfil-accion { flex: 0 1 auto; }
.perfil-btn-acento {
background: var(--perfil-accent) !important;
border-color: var(--perfil-accent) !important;
color: var(--perfil-acento-texto, #111827) !important;
font-weight: 900;
}
.perfil-btn-acento:hover { filter: brightness(1.06); }
.vista-perfil-full .btn.sec { background: color-mix(in srgb, var(--perfil-superficie, #0f172a) 62%, transparent); color: var(--perfil-texto, #f8fafc); border-color: color-mix(in srgb, var(--perfil-texto, #fff) 20%, transparent); }
.vista-perfil-full .btn.sec:hover { background: color-mix(in srgb, var(--perfil-texto, #fff) 12%, transparent); }
.perfil-full-grid {
display: grid;
grid-template-columns: clamp(280px, 19vw, 400px) minmax(0, 1fr) clamp(280px, 18vw, 400px);
align-items: start;
gap: clamp(14px, 1.4vw, 26px);
margin-top: 18px;
}
.perfil-col-izq,
.perfil-col-der { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.perfil-full-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.perfil-full-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.perfil-glass {
min-width: 0;
padding: 18px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 18px;
background: rgba(15, 23, 42, .78);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
color: var(--texto);
}
.perfil-glass h2,
.perfil-glass h3,
.perfil-glass h4 { color: #fff; }
.perfil-glass p { color: #e2e8f0; }
.perfil-glass-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.perfil-glass-cab h2 { margin: 0; font-size: 1rem; }
.perfil-glass-cab > span:not(.perfil-glass-linea) { color: #cbd5e1; font-size: 12px; font-weight: 800; }
.perfil-glass-linea { height: 1px; flex: 1; background: linear-gradient(90deg, var(--perfil-accent), transparent); }
.perfil-acerca > p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.65; overflow-wrap: anywhere; }
.perfil-datos-publicos { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.perfil-dato { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; font-size: 12px; }
.perfil-acerca .perfil-datos-fila { margin-top: 11px; }
.vista-perfil-full .dato-chip,
.vista-perfil-full .chip {
background: color-mix(in srgb, var(--perfil-texto, #fff) 9%, transparent);
border: 1px solid color-mix(in srgb, var(--perfil-texto, #fff) 10%, transparent);
color: var(--perfil-texto, #e2e8f0);
}
.vista-perfil-full .dato-chip.mapa { background: rgba(34, 197, 94, .15); color: var(--perfil-accent-texto, #bbf7d0); }
.perfil-comunidad-fold { border: 0; }
.perfil-comunidad-fold > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 14px;
background: rgba(15, 23, 42, .72);
color: #f8fafc;
font-size: 12.5px;
font-weight: 800;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.perfil-comunidad-fold > summary::-webkit-details-marker { display: none; }
.perfil-comunidad-fold > summary::after { content: "⌄"; margin-left: auto; color: var(--perfil-accent-texto, var(--perfil-accent)); font-size: 16px; transition: transform .2s ease; }
.perfil-comunidad-fold[open] > summary::after { transform: rotate(180deg); }
.perfil-comunidad-fold-cuerpo { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; animation: perfilFold .22s ease-out; }
@keyframes perfilFold { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.vista-perfil-full .seguidores-mosaico-3x3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vista-perfil-full .seguidor-mini {
padding: 5px 3px;
border: 1px solid transparent;
border-radius: 12px;
color: var(--perfil-texto, #e2e8f0);
}
.vista-perfil-full .seguidor-mini:hover { border-color: color-mix(in srgb, var(--perfil-accent) 55%, transparent); background: color-mix(in srgb, var(--perfil-texto, #fff) 6%, transparent); }
.vista-perfil-full .seguidor-mini span { color: var(--perfil-suave, #cbd5e1); }
.vista-perfil-full .perfil-bloque { margin-top: 0; }
.vista-perfil-full .perfil-bloque h3 { color: var(--perfil-texto, #fff); }
.vista-perfil-full .perfil-evento-mini,
.vista-perfil-full .evento-card,
.vista-perfil-full .historial-card {
border-color: color-mix(in srgb, var(--perfil-texto, #fff) 11%, transparent);
background: rgba(2, 6, 23, .35);
color: var(--perfil-texto, #e2e8f0);
}
.vista-perfil-full .perfil-evento-datos small,
.vista-perfil-full .evento-card-datos small,
.vista-perfil-full .historial-card small { color: var(--perfil-suave, #cbd5e1); }
.vista-perfil-full .perfil-vitrina-ganados {
padding: 12px;
border: 1px solid color-mix(in srgb, var(--perfil-accent) 55%, transparent);
border-radius: 16px;
background: linear-gradient(145deg, rgba(120, 83, 20, .34), color-mix(in srgb, var(--perfil-superficie, #0f172a) 82%, transparent));
}
.vista-perfil-full .perfil-premio-ganado {
border-color: color-mix(in srgb, var(--perfil-accent) 42%, transparent);
background: color-mix(in srgb, var(--perfil-superficie, #0f172a) 72%, transparent);
}
.vista-perfil-full .ppg-datos b { color: var(--perfil-texto, #fff7df); }
.vista-perfil-full .ppg-datos small { color: var(--perfil-suave, #d6c9a6); }
.vista-perfil-full .ppg-org { color: var(--perfil-texto, #e2e8f0); }
.vista-perfil-full .producto-card,
.vista-perfil-full .premio-card { border-color: color-mix(in srgb, var(--perfil-texto, #fff) 12%, transparent); background: rgba(2, 6, 23, .38); color: var(--perfil-texto, #e2e8f0); }
.vista-perfil-full .producto-card p,
.vista-perfil-full .premio-card p { color: var(--perfil-suave, #cbd5e1); }
.vista-perfil-full .vitrina-bloque h3 { color: var(--perfil-texto, #fff); }
.vista-perfil-full .perfil-org-eventos .feed-vacio { padding: 18px 6px; }
.vista-perfil-full .feed-vacio { color: var(--perfil-suave, #cbd5e1); }
.vista-perfil-full .feed-vacio b { color: var(--perfil-texto, #f8fafc); }
.vista-perfil-full .perfil-vacio { margin: 4px 0 0; color: var(--perfil-suave, #aebdd2); font-size: 12.5px; line-height: 1.45; }
.perfil-feed-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 4px 0; }
.perfil-feed-cab h2 { margin: 2px 0 0; color: #fff; font-size: 1.22rem; }
.perfil-feed-cab > b { display: inline-flex; min-width: 34px; height: 28px; align-items: center; justify-content: center; border: 1px solid var(--perfil-borde, rgba(255,255,255,.15)); border-radius: 999px; background: var(--perfil-superficie-2, rgba(15,23,42,.55)); color: var(--perfil-texto, #fff); font-size: 12px; }
.perfil-feed-eyebrow { color: var(--perfil-accent-texto, var(--perfil-accent)); font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.perfil-posts-full { display: flex; flex-direction: column; gap: 18px; }
.perfil-cargar-mas { align-self: center; min-width: 220px; }
.perfil-full-cargando { min-height: 220px; display: flex; flex-direction: column; gap: 14px; }
.perfil-skeleton { display: block; height: 22px; border-radius: 10px; background: linear-gradient(100deg, rgba(255,255,255,.06) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.06) 70%); background-size: 300% 100%; animation: perfilBrillo 1.3s ease-in-out infinite; }
@keyframes perfilBrillo { to { background-position: 0 0; } }
.perfil-full-error b { display: block; color: var(--perfil-texto, #fff); font-size: 1.05rem; }
.perfil-full-error p { margin: 6px 0 14px; color: var(--perfil-suave, #cbd5e1); }
/* Composer dentro del perfil */
.perfil-composer { padding: 15px; }
.perfil-composer-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.perfil-composer-cab .avatar { --tam: 38px; }
.perfil-composer-cab b { display: block; color: #fff; font-size: 13.5px; }
.perfil-composer-cab small { display: block; color: #cbd5e1; font-size: 11.5px; }
.perfil-composer textarea {
min-height: 82px;
border-color: rgba(255, 255, 255, .15);
background: rgba(2, 6, 23, .42);
color: #f8fafc;
}
.perfil-composer textarea::placeholder { color: var(--perfil-suave, var(--suave, #94a3b8)); }
.perfil-composer-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.perfil-composer-contador { margin-left: auto; color: var(--perfil-suave, var(--suave, #94a3b8)); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.perfil-composer-preview { position: relative; margin-top: 8px; }
.perfil-composer-preview img { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 11px; }
.perfil-composer-preview button { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(2, 6, 23, .78); color: #fff; cursor: pointer; font-size: 20px; line-height: 1; }
/* Posts heredan el tema oscuro del perfil sin perder sus componentes */
.vista-perfil-full .post,
.vista-perfil-full .post-mini {
border-color: color-mix(in srgb, var(--perfil-texto, #fff) 11%, transparent);
background: color-mix(in srgb, var(--perfil-superficie, #0f172a) 78%, transparent);
color: var(--perfil-texto, #e2e8f0);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.vista-perfil-full .post-quien b,
.vista-perfil-full .post-mini-cab b,
.vista-perfil-full .post-comentario b,
.vista-perfil-full .post-original-cab b { color: var(--perfil-texto, #f8fafc); }
.vista-perfil-full .post-quien small,
.vista-perfil-full .post-mini-cab small,
.vista-perfil-full .post-comentario small,
.vista-perfil-full .post-original-cab small { color: var(--perfil-suave, #aebdd2); }
.vista-perfil-full .post-texto { color: var(--perfil-texto, #e2e8f0); }
.vista-perfil-full .post-comentario { background: color-mix(in srgb, var(--perfil-texto, #fff) 7%, transparent); color: var(--perfil-texto, #e2e8f0); }
.vista-perfil-full .post-comentario-form input { background: rgba(2, 6, 23, .44); color: var(--perfil-texto, #f8fafc); border-color: color-mix(in srgb, var(--perfil-texto, #fff) 15%, transparent); }
.vista-perfil-full .post-tag { border-color: color-mix(in srgb, var(--perfil-texto, #fff) 14%, transparent); background: color-mix(in srgb, var(--perfil-texto, #fff) 8%, transparent); color: var(--perfil-texto, #e2e8f0); }
.vista-perfil-full .btn-seguir-mini { border-color: color-mix(in srgb, var(--perfil-texto, #fff) 14%, transparent); background: color-mix(in srgb, var(--perfil-texto, #fff) 8%, transparent); color: var(--perfil-texto, #f8fafc); }
.vista-perfil-full .btn-seguir-mini:hover { background: color-mix(in srgb, var(--perfil-texto, #fff) 14%, transparent); }
.vista-perfil-full .post-accion,
.vista-perfil-full .post-mini-pie { color: var(--perfil-suave, #b9c7da); }
.vista-perfil-full .post-accion:hover { background: color-mix(in srgb, var(--perfil-texto, #fff) 8%, transparent); color: var(--perfil-texto, #fff); }
.vista-perfil-full .post-acciones { border-top-color: color-mix(in srgb, var(--perfil-texto, #fff) 10%, transparent); }
.vista-perfil-full .post-original { background: rgba(2, 6, 23, .28); border-color: color-mix(in srgb, var(--perfil-texto, #fff) 10%, transparent); }
.vista-perfil-full .post-mapa,
.vista-perfil-full .post-evento-mapa { background: rgba(34, 197, 94, .16); color: var(--perfil-accent-texto, #bbf7d0); }
.vista-perfil-full .post-evento { border-color: rgba(239, 120, 120, .38); background: rgba(2, 6, 23, .36); }
.vista-perfil-full .post-evento-premio { color: var(--perfil-accent-texto, #fde68a); }
.vista-perfil-full .post-evento-meta { color: var(--perfil-suave, #b9c7da); }
.vista-perfil-full .post-ganador { border-color: rgba(239, 120, 120, .5); background: linear-gradient(135deg, rgba(60,43,10,.8), color-mix(in srgb, var(--perfil-superficie, #0f172a) 90%, transparent)); }
.vista-perfil-full .post-dorado { border-color: rgba(239, 120, 120, .55); background: linear-gradient(135deg, rgba(60,43,10,.6), color-mix(in srgb, var(--perfil-superficie, #0f172a) 85%, transparent)); }
.vista-perfil-full input,
.vista-perfil-full textarea,
.vista-perfil-full select { background: rgba(2, 6, 23, .44); color: var(--perfil-texto, #f8fafc); border-color: color-mix(in srgb, var(--perfil-texto, #fff) 15%, transparent); }
.vista-perfil-full input::placeholder,
.vista-perfil-full textarea::placeholder { color: var(--perfil-suave, var(--suave, #94a3b8)); }
.vista-perfil-full .reaccion { color: var(--perfil-texto, #e2e8f0); }
.vista-perfil-full .reaccion:hover { background: color-mix(in srgb, var(--perfil-texto, #fff) 8%, transparent); }
/* El tema solo aporta realces; el contenido siempre conserva contraste */
.vista-perfil-full .perfil-glass { border-color: color-mix(in srgb, var(--perfil-accent) 18%, color-mix(in srgb, var(--perfil-texto, #fff) 10%, transparent)); }
.vista-perfil-full .perfil-full-hero { border-color: color-mix(in srgb, var(--perfil-accent) 26%, color-mix(in srgb, var(--perfil-texto, #fff) 12%, transparent)); }
.vista-perfil-full .perfil-full-handle > span,
.vista-perfil-full .perfil-full-handle > span:first-child {
color: var(--perfil-accent-texto, var(--perfil-accent));
font-weight: 800;
}
.vista-perfil-full .perfil-full-avatar .avatar { border-color: #0f172a; }
@media (max-width: 960px) {
.perfil-full-grid { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 14px; }
.perfil-full-acciones { margin-left: 0; justify-content: flex-start; }
}
@media (max-width: 768px) {
.perfil-full-inner { padding: 16px 10px 48px; }
.perfil-full-hero { border-radius: 20px; }
.perfil-full-portada,
.perfil-full-portada img { min-height: 150px; height: 150px; }
.perfil-full-cab { gap: 11px; margin-top: -48px; padding: 0 14px 16px; }
.perfil-full-avatar { width: 108px; height: 108px; padding: 4px; }
.perfil-full-avatar .avatar { --tam: 96px; width: 96px; height: 96px; }
.perfil-full-identidad { flex: 1 1 190px; }
.perfil-full-nombre h1 { font-size: clamp(1.35rem, 7vw, 1.8rem); }
.perfil-full-acciones { width: 100%; margin-left: 0; padding-top: 4px; justify-content: flex-start; }
.perfil-full-acciones .btn { flex: 1 1 140px; }
.perfil-full-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.perfil-full-side { gap: 10px; }
.perfil-full-main { gap: 11px; }
.perfil-glass { padding: 14px; border-radius: 16px; }
.perfil-feed-cab { padding: 2px 2px 0; }
.perfil-feed-cab h2 { font-size: 1.08rem; }
.perfil-composer textarea { min-height: 74px; }
.perfil-composer-pie .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
.perfil-full-acciones .btn { flex-basis: 100%; }
.perfil-comunidad-fold > summary { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.vista-perfil-full::before,
.perfil-full-portada::before,
.perfil-skeleton { animation: none !important; }
}
/* ============================================================
APODO, ESTADO EFÃÂMERO Y MENCIONES
============================================================ */
.perfil-apodo {
display: block;
margin: 1px 0 2px;
color: var(--azul-3, #ef7878);
font-size: 13px;
font-weight: 600;
font-style: italic;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.perfil-apodo.oculto { display: none !important; }
.perfil-full-apodo {
margin-top: 2px;
color: var(--perfil-accent-texto, #fde68a);
font-size: clamp(.9rem, 1.8vw, 1.08rem);
font-weight: 650;
font-style: italic;
line-height: 1.2;
text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.vista-perfil-full .perfil-full-apodo { color: var(--perfil-accent-texto, var(--perfil-accent, #fde68a)); }
/* Globo de estado de 24 h anclado al avatar */
.post { position: relative; }
.avatar-estado-globo {
position: absolute;
bottom: calc(100% + 5px);
left: 0;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 4px;
max-width: min(260px, calc(100vw - 96px));
box-sizing: border-box;
padding: 3px 9px;
border: 1px solid var(--perfil-accent, #38BDF8);
border-radius: 9999px;
background: var(--perfil-card-bg, #0F172A);
box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
color: var(--perfil-texto, #FFFFFF);
font-size: 11px;
line-height: 1.35;
white-space: nowrap;
pointer-events: none;
animation: avatarEstadoEntra .22s ease-out;
}
/* El globo de estado sobresale por encima del avatar: se reserva aire para que no lo tape el posteo anterior. */
.post.post-con-estado { padding-top: 38px; }
.post-sublinea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.post-sublinea .post-fecha-tiempo { margin-top: 0; }
.post-sublinea .btn-seguir-mini { flex: none; }
.avatar-estado-globo::after {
content: "";
position: absolute;
top: 100%;
left: 22px;
transform: translateX(-50%);
border-width: 4px;
border-style: solid;
border-color: var(--perfil-accent, #38BDF8) transparent transparent transparent;
}
.globo-emoji-icono { flex: 0 0 auto; line-height: 1; }
.globo-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@keyframes avatarEstadoEntra { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.estado-tag {
display: inline;
border: 0;
background: transparent;
color: #fde68a;
font: inherit;
font-weight: 800;
padding: 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.estado-tag:hover { color: #fff; }
/* Menciones @usuario en posteos, comentarios y avisos */
.mencion {
color: #93c5fd;
font-weight: 800;
text-decoration: none;
overflow-wrap: anywhere;
}
.mencion:hover { color: #dbeafe; text-decoration: underline; }
.mencion-global {
color: #fde68a;
font-weight: 800;
text-decoration: none;
}
.vista-perfil-full .mencion { color: var(--perfil-accent-texto, #bfdbfe); }
.vista-perfil-full .mencion:hover { color: var(--perfil-texto, #eff6ff); }
/* Aviso clicable: mención / @seguidores */
.aviso-item.aviso-click {
cursor: pointer;
transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.aviso-item.aviso-click:hover,
.aviso-item.aviso-click:focus-visible {
border-color: var(--azul-3);
background: color-mix(in srgb, var(--azul-3) 10%, var(--tarjeta));
outline: none;
transform: translateY(-1px);
}
.aviso-item.aviso-click .mencion { pointer-events: auto; }
/* Resaltado temporal al abrir una notificación */
.post.post-foco {
box-shadow: 0 0 0 2px var(--azul-3, #ef7878), 0 14px 32px rgba(0, 0, 0, .2);
animation: postFoco 2.4s ease-out;
}
@keyframes postFoco {
0%, 35% { box-shadow: 0 0 0 2px var(--azul-3, #ef7878), 0 14px 32px rgba(0, 0, 0, .2); }
100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}
@media (max-width: 560px) {
.avatar-estado-globo {
max-width: 100px;
padding: 2px 7px;
font-size: 10.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.avatar-estado-globo { animation: none; }
.post.post-foco { animation: none; }
}
.apodo-post {
color: #b45309;
font-size: 11px;
font-style: italic;
font-weight: 700;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
html[data-tema="oscuro"] .apodo-post,
.vista-perfil-full .apodo-post { color: #fde68a; }
/* ============================================================
INTERACCIÓN DE PERFIL: timbre / pedido de evento
============================================================ */
.perfil-accion { position: relative; }
.perfil-accion-completada:disabled {
opacity: 1;
cursor: default;
color: #d1fae5;
border-color: rgba(134, 239, 172, .35);
background: rgba(22, 101, 52, .34);
}
html[data-tema="claro"] .perfil-accion-completada:disabled { color: #166534; background: #dcfce7; }
.perfil-pulso-timbre { animation: perfilTimbre .55s steps(20) 1; }
.perfil-pulso-pedido { animation: perfilPedido .9s steps(20) 1; }
.perfil-pulso-timbre::after,
.perfil-pulso-pedido::before,
.perfil-pulso-pedido::after {
position: absolute;
right: -7px;
top: -15px;
pointer-events: none;
font-size: 16px;
line-height: 1;
opacity: 0;
}
.perfil-pulso-timbre::after { content: "♪"; color: #fde68a; animation: perfilNota .9s ease-out 1; }
.perfil-pulso-pedido::before,
.perfil-pulso-pedido::after {
content: "✦";
color: #fde68a;
animation: perfilConfeti .9s ease-out 1;
}
.perfil-pulso-pedido::before { left: -8px; right: auto; top: -10px; color: #f9a8d4; animation-delay: .08s; }
@keyframes perfilTimbre {
0%, 100% { transform: rotate(0deg); }
18% { transform: rotate(-8deg) scale(1.03); }
36% { transform: rotate(8deg) scale(1.05); }
54% { transform: rotate(-5deg) scale(1.03); }
72% { transform: rotate(4deg); }
}
@keyframes perfilPedido {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 120, 120, .45); }
35% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(239, 120, 120, .08); }
65% { transform: scale(1.02); box-shadow: 0 0 0 14px rgba(239, 120, 120, 0); }
}
@keyframes perfilNota { 0% { opacity: 0; transform: translate3d(0, 4px, 0) scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate3d(7px, -18px, 0) scale(1.2) rotate(12deg); } }
@keyframes perfilConfeti { 0% { opacity: 0; transform: translate3d(0, 5px, 0) scale(.6) rotate(0deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate3d(-10px, -20px, 0) scale(1.25) rotate(55deg); } }
@media (prefers-reduced-motion: reduce) {
.perfil-pulso-timbre,
.perfil-pulso-pedido,
.perfil-pulso-timbre::after,
.perfil-pulso-pedido::before,
.perfil-pulso-pedido::after { animation: none !important; }
}
/* ============================================================
MODAL COMERCIAL · POSTULACIÓN A ORGANIZADOR
============================================================ */
.social-modal.ancho .org-modal-cab {
position: sticky;
top: 0;
z-index: 5;
padding: 22px 24px 20px;
border-radius: 12px 12px 0 0;
background: var(--tarjeta);
color: var(--azul);
align-items: flex-start;
border-bottom: 1px solid var(--borde);
}
.social-modal.ancho .org-modal-cab h2 {
max-width: 720px;
margin: 2px 0 0;
color: var(--azul);
font-size: clamp(1.15rem, 2.4vw, 1.55rem);
line-height: 1.2;
letter-spacing: -.015em;
}
.social-modal.ancho .org-modal-cab .modal-x { flex: 0 0 auto; }
.org-solicitud { padding: 18px 24px 24px; }
.org-lead { margin: 0 0 16px; color: var(--suave); font-size: 15.5px; line-height: 1.5; }
.org-eyebrow { display: block; color: var(--oro-osc); font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.org-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.org-cap { min-width: 0; padding: 14px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta); }
.org-cap-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--azul-claro); font-size: 20px; margin-bottom: 8px; }
.org-cap h3 { margin: 0; color: var(--texto); font-size: 14px; line-height: 1.25; }
.org-cap p { margin: 3px 0 0; color: var(--suave); font-size: 12.5px; line-height: 1.4; }
.org-plan { margin: 14px 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--oro) 50%, var(--borde)); border-radius: 16px; background: color-mix(in srgb, var(--oro) 9%, var(--tarjeta)); }
.org-precios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.org-precios > div { padding: 8px 4px; border-radius: 12px; background: var(--tarjeta); border: 1px solid var(--borde); }
.org-precios b { display: block; color: var(--azul); font-size: 1.3rem; line-height: 1.1; }
.org-precios span { display: block; margin-top: 2px; color: var(--texto); font-size: 11.5px; font-weight: 700; }
.org-comision b { color: var(--oro-osc); }
.org-plan-nota { margin: 10px 0 0; color: var(--texto); font-size: 12.5px; text-align: center; }
.org-legal { margin: 0; color: var(--suave); font-size: 12.5px; line-height: 1.45; }
.org-legal b { color: var(--texto); }
.org-form { display: grid; gap: 10px; margin-top: 16px; }
.org-acepta {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 12px;
border: 1px solid var(--borde);
border-radius: 12px;
color: var(--texto);
background: var(--fondo);
font-size: 12.5px;
line-height: 1.45;
cursor: pointer;
}
.org-acepta input { width: 20px; height: 20px; min-height: 0; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--oro-osc); }
.org-acepta b { color: var(--texto); }
.org-acciones { display: flex; align-items: stretch; justify-content: flex-end; gap: 9px; flex-wrap: wrap; margin-top: 2px; }
.org-acciones .btn { min-height: 44px; }
.org-cta {
flex: 1 1 250px;
min-height: 50px !important;
border-radius: 10px;
background: linear-gradient(180deg, #ffd166, #fb8500);
border-color: #e97800;
color: #2a1600;
font-weight: 900;
box-shadow: 0 5px 0 #b85c00, 0 8px 20px rgba(251, 133, 0, .22);
}
.org-cta:hover { filter: brightness(1.05); }
.org-cta:disabled { box-shadow: none; opacity: .55; }
.org-pie { margin: 12px 0 0; color: var(--suave); font-size: 11.5px; line-height: 1.5; text-align: center; }
.org-pie b { color: var(--texto); }
@media (max-width: 760px) {
.social-modal.ancho .org-modal-cab { padding: 15px 16px 13px; border-radius: 20px 20px 0 0; }
.org-solicitud { padding: 14px 15px 20px; }
.org-lead { font-size: 14px; margin-bottom: 12px; }
.org-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.org-cap { padding: 11px; }
.org-cap p { font-size: 12px; }
.org-acciones { flex-direction: column; }
.org-acciones .btn { width: 100%; }
.org-cta { flex-basis: auto; }
}
/* Enlace directo del organizador a su panel administrativo */
.perfil-panel-admin {
text-decoration: none;
border-width: 2px !important;
box-shadow: 0 6px 18px rgba(2, 6, 23, .22);
}
.perfil-panel-admin:hover {
transform: translateY(-1px);
filter: brightness(1.07);
}
@media (max-width: 640px) {
.perfil-full-acciones .perfil-panel-admin {
flex: 1 1 100%;
justify-content: center;
}
}
/* ============================================================
PERFIL FULL-VIEW · HERO COMPACTO, ESTADO RÃÂPIDO Y EDITOR 3 TABS
============================================================ */
.vista-perfil-full .perfil-full-hero.hero-compacto {
background: var(--perfil-superficie, color-mix(in srgb, var(--perfil-superficie, #0f172a) 78%, transparent));
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid var(--perfil-borde, color-mix(in srgb, var(--perfil-texto, #fff) 8%, transparent));
border-radius: 24px;
box-shadow: 0 20px 54px rgba(0, 0, 0, .18);
overflow: hidden;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-cab {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin: 0;
padding: 22px 24px;
background: none;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-avatar {
width: 104px;
height: 104px;
padding: 4px;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-avatar .avatar {
--tam: 96px;
width: 96px;
height: 96px;
border-width: 3px;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-identidad {
flex: 1 1 300px;
padding: 0;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-nombre h1 {
font-size: clamp(1.45rem, 2.8vw, 2.1rem);
text-shadow: none;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-apodo {
margin-top: 2px;
color: var(--perfil-accent-texto, var(--perfil-accent, #fde68a));
font-style: italic;
font-weight: 700;
font-size: 13px;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-handle {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 7px;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-handle > span:first-child {
color: var(--perfil-accent-texto, var(--perfil-accent));
font-size: 14px;
font-weight: 800;
}
.perfil-rol-chip { font-size: 10.5px !important; padding: 3px 8px !important; font-weight: 900 !important; }
.perfil-rol-chip.org { color: #fde68a !important; border-color: rgba(239, 120, 120, .4) !important; background: rgba(239, 120, 120, .14) !important; }
.perfil-rol-chip.jugador { color: #bfdbfe !important; border-color: rgba(147, 197, 253, .32) !important; background: rgba(147, 197, 253, .12) !important; }
.perfil-rol-chip.marca { color: #fde68a !important; border-color: rgba(239, 120, 120, .55) !important; background: rgba(239, 120, 120, .18) !important; }
.perfil-full-meta {
display: flex;
align-items: center;
gap: 7px 12px;
flex-wrap: wrap;
margin-top: 8px;
color: var(--perfil-suave, #cbd5e1);
font-size: 12px;
}
.perfil-full-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.perfil-full-meta b { color: var(--perfil-texto, #f8fafc); font-variant-numeric: tabular-nums; }
.perfil-full-meta .perfil-chip { margin: 0; }
.perfil-hero-derecha {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 9px;
flex: 0 1 330px;
min-width: 230px;
}
.perfil-reacciones-resumen {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
justify-content: flex-end;
min-height: 26px;
}
.perfil-reaccion-chip {
display: inline-flex;
align-items: center;
gap: 3px;
min-height: 25px;
padding: 3px 8px;
border: 1px solid color-mix(in srgb, var(--perfil-texto, #fff) 12%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--perfil-texto, #fff) 7%, transparent);
color: var(--perfil-texto, #f8fafc);
font-size: 11px;
}
.perfil-reaccion-chip b { font-size: 11px; font-variant-numeric: tabular-nums; }
.perfil-reacciones-vacio { color: var(--perfil-suave, var(--suave, #94a3b8)); font-size: 11.5px; }
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones {
margin: 0;
padding: 0;
justify-content: flex-end;
width: 100%;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones .btn {
min-height: 36px;
font-size: 12px;
}
@media (min-width: 769px) {
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 8px;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones > .btn,
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones > a.btn {
width: 100%;
min-height: 38px;
padding-left: 10px;
padding-right: 10px;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones > [data-marca-perfil],
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones > #btnSerOrganizador,
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones > #btnQuitarFestivo {
grid-column: 1 / -1;
}
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones > .chip {
grid-column: 1 / -1;
justify-self: start;
align-self: center;
}
}
.estado-pildora-wrap { width: 100%; padding: 2px 0; }
.estado-pildora {
display: inline-flex;
align-items: center;
gap: 7px;
max-width: 100%;
min-height: 34px;
padding: 6px 10px;
border: 1px solid var(--perfil-acento-borde, color-mix(in srgb, var(--perfil-accent, #f49797) 35%, rgba(255,255,255,.12)));
border-radius: 999px;
background: var(--perfil-superficie-2, rgba(2, 6, 23, .5));
color: var(--perfil-texto, #f8fafc);
font: inherit;
font-size: 12px;
font-weight: 800;
cursor: pointer;
text-align: left;
transition: transform .14s ease, filter .14s ease, background .14s ease;
}
.estado-pildora:hover { filter: brightness(1.1); transform: translateY(-1px); }
.estado-pildora:focus-visible { outline: 2px solid var(--perfil-accent, #f49797); outline-offset: 2px; }
.estado-pildora-vacia { align-self: flex-start; }
.estado-pildora-texto {
min-width: 0;
max-width: 460px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.estado-pildora-editar { flex: none; color: var(--perfil-accent, #f49797); font-size: 11px; }
.estado-pildora-icono { flex: none; }
.estado-quick-modal { max-width: 480px !important; border-radius: 20px !important; }
.estado-quick-form { display: grid; gap: 10px; }
.estado-quick-form textarea { min-height: 78px; resize: vertical; }
.estado-quick-contador { text-align: right; font-variant-numeric: tabular-nums; }
.estado-quick-vence { margin: 0; font-size: 12px; line-height: 1.45; color: var(--suave); }
.estado-quick-vence.vencido { color: var(--aviso); }
.estado-pildora-vencida { border-style: dashed; border-color: rgba(239, 120, 120, .55); background: rgba(239, 120, 120, .10); }
.estado-pildora-vencida .estado-pildora-editar { color: #fde68a; }
.estado-quick-emojis { display: flex; gap: 6px; flex-wrap: wrap; }
.estado-quick-emoji {
width: 38px;
height: 38px;
border: 1px solid var(--borde);
border-radius: 12px;
background: var(--tarjeta);
font-size: 19px;
cursor: pointer;
}
.estado-quick-emoji:hover { background: var(--azul-claro); transform: translateY(-1px); }
.estado-quick-acciones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 3px; }
.estado-quick-acciones .btn { min-height: 38px; }
/* Editor de perfil en tres pestañas */
.perfil-edit-tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
padding: 5px;
margin: 0 0 14px;
border: 1px solid var(--borde);
border-radius: 13px;
background: var(--fondo);
}
.perfil-edit-tab {
flex: 1 1 auto;
min-height: 36px;
padding: 6px 10px;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--suave);
font: inherit;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.perfil-edit-tab.activa { background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra); }
.perfil-edit-tab:focus-visible { outline: 2px solid var(--azul-3); outline-offset: 1px; }
.perfil-edit-panel { display: grid; gap: 12px; }
.perfil-edit-panel.oculto { display: none !important; }
.perfil-edit-panel .campo { margin: 0; }
.perfil-tema-default {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 11px 12px;
border: 1px solid color-mix(in srgb, var(--oro) 40%, var(--borde));
border-radius: 12px;
background: color-mix(in srgb, var(--oro) 10%, var(--tarjeta));
}
.perfil-tema-default b { display: block; color: var(--texto); font-size: 13px; }
.perfil-tema-default small { display: block; color: var(--texto); font-size: 11.5px; margin-top: 2px; }
.perfil-tema-default .btn { flex: none; }
#btnTemaDefault.sel { background: var(--oro); border-color: var(--oro); color: var(--perfil-acento-texto, #111827); font-weight: 900; }
.form-perfil .paletas-selector { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.form-perfil .paleta-opcion { min-height: 42px; }
.form-perfil .temas-selector { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.form-perfil .tema-opcion { min-height: 48px; }
.form-perfil .colores-custom { gap: 10px; }
.form-perfil .color-campo { min-width: 0; }
.form-perfil .org-box { display: none !important; }
.form-perfil #errorPerfil { grid-column: 1 / -1; }
.perfil-empresa-editor {
display: grid;
gap: 10px;
padding: 14px;
border: 1px solid var(--borde);
border-radius: 12px;
background: var(--fondo);
}
.perfil-empresa-cab b { display: block; color: var(--texto); font-size: 13px; }
.perfil-empresa-cab small { display: block; margin-top: 2px; color: var(--suave); font-size: 11.5px; }
.perfil-empresa-editor .campo { margin: 0; }
@media (max-width: 768px) {
.vista-perfil-full .perfil-full-hero.hero-compacto { border-radius: 19px; }
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-cab { align-items: flex-start; padding: 16px 14px; gap: 12px; }
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-avatar { width: 88px; height: 88px; }
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-avatar .avatar { --tam: 80px; width: 80px; height: 80px; }
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-identidad { flex-basis: calc(100% - 100px); }
.perfil-hero-derecha { flex: 1 1 100%; min-width: 0; align-items: stretch; }
.perfil-reacciones-resumen { justify-content: flex-start; }
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-acciones { justify-content: stretch; }
.perfil-full-acciones .perfil-accion { flex: 1 1 140px; }
.estado-pildora { width: 100%; justify-content: center; text-align: center; }
.estado-pildora-texto { max-width: calc(100% - 66px); }
.perfil-edit-tab { flex: 0 0 auto; }
.perfil-tema-default { align-items: flex-start; flex-direction: column; }
.estado-quick-acciones .btn { flex: 1 1 auto; }
}
@media (max-width: 420px) {
.vista-perfil-full .perfil-full-hero.hero-compacto .perfil-full-identidad { flex-basis: calc(100% - 94px); }
.perfil-full-acciones .perfil-accion { flex-basis: 100%; }
}
/* Preferencia de tema personal en el muro y control de la pestaña Apariencia */
.control-check-tema-feed {
display: flex;
align-items: flex-start;
gap: 9px;
padding: 11px 12px;
border: 1px solid color-mix(in srgb, var(--perfil-accent, #f49797) 30%, var(--borde));
border-radius: 11px;
background: color-mix(in srgb, var(--perfil-accent, #f49797) 7%, var(--fondo));
cursor: pointer;
}
.control-check-tema-feed input { margin-top: 2px; accent-color: var(--perfil-accent, #f49797); flex: none; }
.control-check-tema-feed .check-texto { display: grid; gap: 3px; }
.control-check-tema-feed strong { font-size: 12.5px; color: var(--texto); }
.control-check-tema-feed small { font-size: 11px; line-height: 1.4; color: var(--suave); }
/* ============================================================
CONTRATO DE TEMA/PALETA
El tema (o la paleta) define --perfil-bg y --perfil-accent. De ahàsalen
--perfil-superficie, --perfil-texto, --perfil-suave, --perfil-borde y
--perfil-acento-texto (calculados en social.js). Aquàse mapean a las
variables históricas para que TODOS los componentes sigan el tema.
============================================================ */
.social-body[data-tema-activo] {
--texto: var(--perfil-texto, #f8fafc);
--suave: var(--perfil-suave, #aebdd2);
--tarjeta: var(--perfil-superficie, rgba(15, 23, 42, .78));
--borde: var(--perfil-borde, rgba(255, 255, 255, .12));
--fondo: var(--perfil-bg, #0f172a);
--azul: var(--perfil-accent, #38bdf8);
--azul-2: var(--perfil-accent, #38bdf8);
--azul-3: var(--perfil-accent, #38bdf8);
--azul-claro: var(--perfil-acento-tenue, rgba(56, 189, 248, .16));
--marca: var(--perfil-accent, #1f4f8f);
--marca-2: var(--perfil-acento-borde, #2a62ad);
--oro: var(--perfil-accent, #f49797);
--oro-osc: var(--perfil-accent, #f49797);
--btn-bg: var(--perfil-accent, #1f4f8f);
--btn-bg-hover: var(--perfil-acento-borde, #2a62ad);
--btn-texto: var(--perfil-acento-texto, #fff);
background: var(--feed-fondo, var(--perfil-bg, var(--fondo)));
background-attachment: fixed;
}
.social-body[data-tema-activo] .btn { color: var(--perfil-acento-texto, #fff); }
.social-body[data-tema-activo] .btn.oro,
.social-body[data-tema-activo] .chip.oro { color: var(--perfil-acento-texto, #111827); }
.social-body[data-tema-activo] .btn.sec {
background: var(--perfil-superficie-2, rgba(255, 255, 255, .08));
color: var(--perfil-texto, #f8fafc);
border-color: var(--perfil-borde, rgba(255, 255, 255, .16));
}
.social-body[data-tema-activo] .badge-rol-chip {
background: var(--perfil-superficie-2, rgba(255,255,255,.08));
border-color: var(--perfil-borde, rgba(255,255,255,.15));
color: var(--perfil-texto, #E2E8F0);
}
.social-body[data-tema-activo] .btn.sec:hover { background: var(--perfil-acento-tenue, rgba(255, 255, 255, .12)); }
.social-body[data-tema-activo] .toast {
background: var(--perfil-accent, var(--azul));
color: var(--perfil-acento-texto, #fff);
}
.social-body[data-tema-activo] .toast.ok { background: var(--ok); color: #fff; }
.social-body[data-tema-activo] .toast.mal { background: var(--mal); color: #fff; }
.social-body[data-tema-activo] .superapp-header {
border-bottom-color: color-mix(in srgb, var(--perfil-accent, #38bdf8) 42%, transparent);
}
.social-body[data-tema-activo]::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
background-image: var(--tp-patron, none);
background-size: var(--tp-size, 220px);
background-repeat: repeat;
opacity: var(--tp-op, .24);
animation: var(--tp-anim, none);
pointer-events: none;
will-change: transform, opacity;
}
.social-body[data-tema-activo="custom"]::before {
background-image:
radial-gradient(circle at 16% 12%, color-mix(in srgb, var(--feed-accent, #38BDF8) 24%, transparent), transparent 32rem),
radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--feed-accent, #38BDF8) 14%, transparent), transparent 30rem);
background-size: auto;
opacity: .8;
animation: none;
}
.social-body[data-tema-activo]::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
background: linear-gradient(180deg, rgba(2, 6, 23, .03), rgba(2, 6, 23, .16) 55%, rgba(2, 6, 23, .12));
pointer-events: none;
}
.social-body[data-tema-activo] .social-layout,
.social-body[data-tema-activo] > .vista-perfil-full {
position: relative;
z-index: 1;
}
.social-body[data-tema-activo] .social-centro .composer,
.social-body[data-tema-activo] .social-centro .post {
background: var(--perfil-superficie, rgba(15, 23, 42, .78));
border-color: var(--perfil-borde, rgba(255, 255, 255, .10));
color: var(--perfil-texto, #e2e8f0);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.social-body[data-tema-activo] .social-centro .post-quien b,
.social-body[data-tema-activo] .social-centro .post-texto,
.social-body[data-tema-activo] .social-centro .composer textarea {
color: var(--perfil-texto, #f8fafc);
}
.social-body[data-tema-activo] .social-centro .post-quien small,
.social-body[data-tema-activo] .social-centro .post-mini-pie,
.social-body[data-tema-activo] .social-centro .composer-ayuda {
color: var(--perfil-suave, #aebdd2);
}
.social-body[data-tema-activo] .social-centro .post-acciones {
border-top-color: var(--perfil-borde, rgba(255, 255, 255, .10));
}
.social-body[data-tema-activo] input,
.social-body[data-tema-activo] textarea,
.social-body[data-tema-activo] select {
background: var(--perfil-superficie-2, rgba(255, 255, 255, .08));
color: var(--perfil-texto, #f8fafc);
border-color: var(--perfil-borde, rgba(255, 255, 255, .16));
}
@media (prefers-reduced-motion: reduce) {
.social-body[data-tema-activo]::before,
.vista-perfil-full::before,
.perfil-full-portada::before { animation: none !important; }
}
/* Chat SOS dentro del muro social */
.sos-chat-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 9px; border-bottom: 1px solid var(--borde); margin-bottom: 10px; }
.sos-chat-identidad { display: flex; align-items: center; gap: 9px; }
.sos-chat-icono { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--azul-claro); font-size: 20px; }
.sos-chat-identidad b { display: block; font-size: 13.5px; }
.sos-chat-identidad small { display: block; color: var(--suave); font-size: 11.5px; margin-top: 2px; }
.sos-chat-form { display: flex; align-items: flex-end; gap: 8px; border-top: 1px solid var(--borde); padding-top: 9px; }
.sos-chat-form .campo { flex: 1; margin: 0; }
.sos-chat-form textarea { min-height: 58px; resize: vertical; }
@media (max-width: 560px) {
.sos-chat-form { align-items: stretch; flex-direction: column; }
.sos-chat-form .btn { min-height: 38px; }
}
/* Catálogo comercial del perfil */
.catalogo-comercial { margin-top: 12px; padding: 16px; }
.catalogo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.catalogo-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(15,23,42,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #e2e8f0; }
.catalogo-card > img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.catalogo-sin-foto { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: 44px; background: rgba(255,255,255,.06); }
.catalogo-codigo { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 999px; background: rgba(2,6,23,.76); color: #fde68a; font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.catalogo-datos { display: grid; gap: 5px; padding: 11px 12px 5px; }
.catalogo-datos > b { font-size: 14px; color: #fff; }
.catalogo-datos p { margin: 0; color: #cbd5e1; font-size: 12px; line-height: 1.45; }
.catalogo-precios { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 3px; }
.precio-tachado { color: #94a3b8; font-size: 11px; text-decoration: line-through; }
.precio-oferta { color: #fde68a; font-weight: 900; font-size: 15px; }
.catalogo-acciones { display: flex; gap: 5px; flex-wrap: wrap; padding: 9px 12px 12px; margin-top: auto; }
.catalogo-acciones .btn { min-height: 32px; font-size: 11px; }
.catalogo-descuento-badge {
position: absolute; top: 8px; left: 8px; z-index: 2;
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 9px; border-radius: 999px;
color: #04121f; font-size: 10.5px; font-weight: 900; letter-spacing: .01em;
background: linear-gradient(135deg, var(--perfil-accent, #38BDF8), color-mix(in srgb, var(--perfil-accent, #38BDF8) 65%, #fff));
box-shadow: 0 8px 20px color-mix(in srgb, var(--perfil-accent, #38BDF8) 28%, transparent);
}
.catalogo-precios-descuento { align-items: baseline; }
.precio-descuento { color: var(--perfil-accent, #38BDF8); font-weight: 900; font-size: 16px; }
.precio-descuento-nota { color: #94a3b8; font-size: 10px; }
.catalogo-descuento {
display: grid; gap: 8px; margin: 4px 12px 10px; padding: 10px;
border: 1px solid color-mix(in srgb, var(--perfil-accent, #38BDF8) 22%, rgba(255,255,255,.12));
border-radius: 13px;
background: linear-gradient(145deg, color-mix(in srgb, var(--perfil-accent, #38BDF8) 8%, var(--perfil-card-bg, rgba(15,23,42,.72))), var(--perfil-card-bg, rgba(15,23,42,.52)));
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.catalogo-descuento.desbloqueado {
border-color: color-mix(in srgb, var(--perfil-accent, #38BDF8) 65%, transparent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--perfil-accent, #38BDF8) 18%, transparent), 0 10px 28px color-mix(in srgb, var(--perfil-accent, #38BDF8) 12%, transparent);
}
.catalogo-desc-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.catalogo-desc-cab b { color: var(--feed-texto, #f8fafc); font-size: 12px; }
.catalogo-desc-estado { color: #94a3b8; font-size: 10.5px; }
.catalogo-desc-lista { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.catalogo-desc-item {
display: grid; grid-template-columns: 18px minmax(0, 1fr) auto;
align-items: center; gap: 7px; min-width: 0;
font-size: 11.5px; color: #cbd5e1;
}
.catalogo-desc-check {
display: grid; place-items: center; width: 17px; height: 17px;
border: 1px solid rgba(148,163,184,.45); border-radius: 50%;
color: #04121f; background: transparent; transition: all .2s ease;
}
.catalogo-desc-check .icono-svg { width: 11px; height: 11px; opacity: 0; transition: opacity .2s ease; }
.catalogo-desc-item.cumplido .catalogo-desc-check {
border-color: var(--perfil-accent, #38BDF8);
background: var(--perfil-accent, #38BDF8);
}
.catalogo-desc-item.cumplido .catalogo-desc-check .icono-svg { opacity: 1; }
.catalogo-desc-item.cumplido .catalogo-desc-texto { color: #e2e8f0; }
.catalogo-desc-item.cumplido .catalogo-desc-accion { display: none; }
.catalogo-desc-texto { min-width: 0; line-height: 1.35; }
.catalogo-desc-texto strong { color: #f8fafc; }
.catalogo-desc-progreso { color: var(--perfil-accent, #38BDF8); font-size: 10.5px; }
.catalogo-desc-accion.btn { min-height: 25px; padding: 2px 8px; font-size: 10.5px; white-space: nowrap; }
.catalogo-desc-exito {
padding: 7px 9px; border-radius: 9px;
background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--perfil-accent, #38BDF8) 30%, transparent);
color: var(--feed-texto, #f8fafc); font-size: 11.5px; font-weight: 700;
}
.catalogo-comprar.descuento-activo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--perfil-accent, #38BDF8) 26%, transparent); }
.catalogo-desc-config {
display: grid; gap: 9px; padding: 12px; border-radius: 13px;
border: 1px solid color-mix(in srgb, var(--perfil-accent, #38BDF8) 24%, var(--borde, rgba(255,255,255,.12)));
background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 5%, var(--perfil-card-bg, var(--azul-claro, rgba(255,255,255,.04))));
transition: opacity .2s ease;
}
.catalogo-desc-config.desc-inactivo .catalogo-desc-condiciones { opacity: .58; }
.catalogo-desc-config-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.catalogo-desc-config-cab h3 { margin: 2px 0 0; font-size: 14px; }
.catalogo-desc-eyebrow { color: var(--perfil-accent, #38BDF8); font-size: 9.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.catalogo-desc-ayuda { margin: 0; color: var(--suave); font-size: 11.5px; line-height: 1.45; }
.catalogo-switch { display: inline-flex; align-items: center; gap: 7px; color: var(--texto); font-size: 12px; font-weight: 700; cursor: pointer; }
.catalogo-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.catalogo-switch-ui {
position: relative; width: 36px; height: 21px; border-radius: 999px;
background: rgba(148,163,184,.35); border: 1px solid rgba(148,163,184,.3);
transition: background .2s ease, border-color .2s ease;
}
.catalogo-switch-ui::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
border-radius: 50%; background: #fff; transition: transform .2s ease;
}
.catalogo-switch input:checked + .catalogo-switch-ui { background: var(--perfil-accent, #38BDF8); border-color: var(--perfil-accent, #38BDF8); }
.catalogo-switch input:checked + .catalogo-switch-ui::after { transform: translateX(15px); }
.catalogo-switch input:focus-visible + .catalogo-switch-ui { outline: 2px solid var(--perfil-accent, #38BDF8); outline-offset: 2px; }
.catalogo-desc-condiciones { display: grid; gap: 6px; transition: opacity .2s ease; }
.catalogo-desc-condicion { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--texto, #cbd5e1); font-size: 11.5px; }
.catalogo-desc-condicion input[type="checkbox"] { accent-color: var(--perfil-accent, #38BDF8); }
.catalogo-desc-condicion input[type="number"] {
width: 62px; min-height: 28px; padding: 3px 6px; border: 1px solid var(--borde);
border-radius: 7px; background: var(--fondo); color: var(--texto); font: inherit;
}
.catalogo-desc-condicion label { cursor: pointer; }
.catalogo-foto-editor { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.catalogo-foto-editor #catFotoPreview { display: grid; place-items: center; width: 86px; height: 86px; overflow: hidden; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); font-size: 28px; }
.catalogo-foto-editor #catFotoPreview img { width: 100%; height: 100%; object-fit: cover; }
.form-catalogo { display: grid; gap: 11px; }
.catalogo-form-esencial { display: grid; gap: 11px; }
.catalogo-avanzado-toggle {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 12px; border: 1px dashed var(--borde); border-radius: 10px;
background: color-mix(in srgb, var(--azul-claro) 70%, transparent);
color: var(--suave); font: inherit; font-size: 12px; font-weight: 700;
text-align: left; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.catalogo-avanzado-toggle:hover { color: var(--texto); border-color: color-mix(in srgb, var(--perfil-accent, #38BDF8) 45%, var(--borde)); }
.catalogo-avanzado-toggle:focus-visible { outline: 2px solid var(--perfil-accent, #38BDF8); outline-offset: 2px; }
.catalogo-avanzado-toggle[aria-expanded="true"] { color: var(--texto); border-style: solid; border-color: color-mix(in srgb, var(--perfil-accent, #38BDF8) 40%, var(--borde)); }
.catalogo-avanzado-flecha { font-size: 14px; line-height: 1; transition: transform .22s ease; }
.catalogo-avanzado-toggle[aria-expanded="true"] .catalogo-avanzado-flecha { transform: rotate(180deg); }
.catalogo-avanzado {
display: grid; gap: 11px; max-height: 0; opacity: 0; visibility: hidden;
overflow: hidden; overflow-anchor: none;
transition: max-height .32s ease, opacity .2s ease, visibility .32s ease;
}
.catalogo-avanzado.abierto { max-height: 3200px; opacity: 1; visibility: visible; }
.catalogo-ajustes-ayuda { display: block; margin-top: -4px; }
.catalogo-jugador-cta {
display: grid; gap: 10px; padding: 13px; margin-top: 12px;
border: 1px dashed var(--perfil-acento-borde, color-mix(in srgb, var(--perfil-accent, #38BDF8) 35%, var(--perfil-card-border, rgba(255,255,255,.12))));
border-radius: 13px;
background: var(--perfil-superficie, color-mix(in srgb, var(--perfil-accent, #38BDF8) 6%, var(--perfil-card-bg, rgba(15,23,42,.42))));
}
.catalogo-jugador-cta p { margin: 0; color: var(--perfil-texto, #cbd5e1); font-size: 12.5px; line-height: 1.55; }
.catalogo-jugador-cta .btn { justify-self: start; }
.catalogo-solicitud-verificacion {
display: grid; justify-items: center; gap: 14px;
padding: 8px 4px 12px; text-align: center;
}
.catalogo-solicitud-icono { font-size: 38px; line-height: 1; }
.catalogo-solicitud-verificacion p { margin: 0; max-width: 520px; color: var(--texto); font-size: 13.5px; line-height: 1.65; }
.catalogo-solicitud-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
@media (prefers-reduced-motion: reduce) {
.catalogo-avanzado, .catalogo-avanzado-flecha, .catalogo-avanzado-toggle { transition: none !important; }
}
.post-producto-embebido .catalogo-card { margin-top: 8px; }
.post-producto-embebido .catalogo-acciones { padding-bottom: 5px; }
.post-producto-patrocinado { padding: 0; overflow: hidden; }
.post-producto-patrocinado .post-patrocinado-rotulo { padding: 9px 12px 0; }
.post-producto-patrocinado .catalogo-card { margin: 8px; border: 0; background: transparent; }
@media (max-width: 560px) {
.catalogo-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
.catalogo-datos { padding: 8px; }
.catalogo-datos > b { font-size: 12.5px; }
.catalogo-acciones { padding: 7px 8px 9px; }
.catalogo-acciones .btn { width: 100%; }
.catalogo-descuento { margin: 4px 8px 8px; padding: 8px; }
.catalogo-desc-item { grid-template-columns: 17px minmax(0, 1fr); }
.catalogo-desc-accion { grid-column: 2; justify-self: start; }
.catalogo-descuento-badge { font-size: 9.5px; padding: 3px 7px; }
}
/* ---------- Grupos privados de chat ---------- */
.grupos-perfil { margin-top: 14px; }
.grupos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 10px;
}
.grupo-card {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
grid-template-rows: auto auto auto;
align-items: center;
gap: 2px 10px;
padding: 10px;
text-align: left;
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: rgba(255,255,255,.055);
color: #e2e8f0;
cursor: pointer;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.grupo-card:hover { transform: translateY(-2px); border-color: rgba(245,181,49,.55); background: rgba(255,255,255,.09); }
.grupo-card img, .grupo-icono {
width: 52px; height: 52px; border-radius: 15px; object-fit: cover;
grid-row: 1 / span 3;
}
.grupo-icono { display: grid; place-items: center; background: rgba(245,181,49,.16); font-size: 25px; }
.grupo-card b { font-size: 13.5px; overflow-wrap: anywhere; }
.grupo-card small { color: #cbd5e1; font-size: 11.5px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.grupo-card .chip { justify-self: start; font-size: 10.5px; padding: 2px 7px; }
.grupo-privado { text-align: center; padding: 18px 8px 8px; }
.grupo-privado-icono {
width: 68px; height: 68px; margin: 0 auto 10px; display: grid; place-items: center;
border-radius: 50%; background: rgba(245,181,49,.15); font-size: 32px;
}
.grupo-privado h3 { margin: 0 0 8px; color: #fff; }
.grupo-privado p { margin: 0 auto 16px; max-width: 420px; color: #cbd5e1; line-height: 1.5; }
.grupo-chat-modal { display: flex; flex-direction: column; gap: 10px; max-height: min(76vh, 720px); }
.grupo-chat-cab {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px; border-radius: 14px; background: rgba(255,255,255,.055);
}
.grupo-chat-avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(245,181,49,.16); font-size: 22px; }
.grupo-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.grupo-chat-cab > div:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.grupo-chat-cab > div:nth-child(2) b { color: #fff; }
.grupo-chat-cab > div:nth-child(2) small { color: #cbd5e1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo-hilo {
flex: 1; min-height: 230px; max-height: 46vh; overflow-y: auto; padding: 10px;
border-radius: 14px; background: rgba(2,6,23,.35); border: 1px solid rgba(255,255,255,.07);
display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain;
}
.grupo-vacio { margin: auto; color: #94a3b8; text-align: center; }
.grupo-msj {
max-width: min(80%, 430px); padding: 8px 10px; border-radius: 14px 14px 14px 5px;
background: rgba(255,255,255,.09); color: #e2e8f0; border: 1px solid rgba(255,255,255,.07);
align-self: flex-start; overflow-wrap: anywhere;
}
.grupo-msj.mio { align-self: flex-end; border-radius: 14px 14px 5px 14px; background: rgba(245,181,49,.18); border-color: rgba(245,181,49,.25); }
.grupo-msj-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.grupo-msj-cab b { font-size: 11.5px; color: #f8d477; }
.grupo-msj-cab small { font-size: 9.5px; color: #94a3b8; }
.grupo-msj p { margin: 0; font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; }
.grupo-msj-img { display: block; width: min(100%, 300px); max-height: 300px; object-fit: contain; border-radius: 10px; margin-top: 4px; background: #020617; }
.grupo-msj-audio { width: min(100%, 280px); height: 34px; margin-top: 4px; }
.grupo-vencido { color: var(--perfil-suave, #cbd5e1); font-style: italic; }
.grupo-form { display: flex; flex-direction: column; gap: 7px; }
.grupo-form-fila { display: flex; align-items: center; gap: 6px; }
.grupo-form-fila input:not([type=file]) {
flex: 1; min-width: 0; height: 38px; border-radius: 999px; padding: 0 13px;
border: 1px solid rgba(255,255,255,.14); background: rgba(2,6,23,.3); color: #fff;
}
.grupo-form-fila input:not([type=file])::placeholder { color: #94a3b8; }
.grupo-grabando {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 10px; border-radius: 12px; background: rgba(220,38,38,.15); color: #fecaca; font-size: 12px;
}
.grupo-grabando b { color: #fff; font-variant-numeric: tabular-nums; }
.grupo-solicitudes { display: flex; flex-direction: column; gap: 8px; }
.grupo-solicitud {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px; border-radius: 12px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.07);
}
.grupo-solicitud b { color: #fff; }
.grupo-solicitud small { color: #cbd5e1; }
.grupo-solicitud .btn-fila { margin-left: auto; }
.gw-paso { font-size: 11.5px; color: #f8d477; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.form-grupo .campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.form-grupo .campo > span { font-size: 12px; font-weight: 800; color: #cbd5e1; }
.form-grupo .campo input, .form-grupo .campo textarea {
width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.14);
border-radius: 11px; background: rgba(2,6,23,.3); color: #fff; padding: 9px 11px; font: inherit;
}
.form-grupo .campo textarea { resize: vertical; }
.grupo-foto-wizard { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.gw-foto {
width: 68px; height: 68px; flex: 0 0 auto; border-radius: 18px; overflow: hidden;
display: grid; place-items: center; background: rgba(245,181,49,.16); font-size: 30px;
}
.gw-foto img { width: 100%; height: 100%; object-fit: cover; }
.grupo-foto-wizard > div:last-child { display: flex; flex-direction: column; gap: 5px; }
.form-grupo .check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #cbd5e1; margin: 4px 0 8px; }
.gw-filtros { margin-bottom: 8px; }
.gw-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 4px; margin-bottom: 8px; }
.gw-chips > span {
display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px 3px 9px;
border-radius: 999px; background: rgba(245,181,49,.16); color: #f8d477; font-size: 11.5px; font-weight: 700;
}
.gw-chips button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.gw-resultados { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow-y: auto; }
.gw-resultado {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
padding: 7px; border-radius: 11px; border: 1px solid rgba(255,255,255,.09);
background: rgba(255,255,255,.045); color: #e2e8f0; cursor: pointer;
}
.gw-resultado:hover, .gw-resultado.sel { border-color: rgba(245,181,49,.55); background: rgba(245,181,49,.10); }
.gw-resultado > span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.gw-resultado b { font-size: 12px; }
.gw-resultado small { color: #cbd5e1; font-size: 11px; }
.gw-resultado > b:last-child { color: #f8d477; font-size: 11px; white-space: nowrap; }
@media (max-width: 640px) {
.grupo-chat-cab .btn-fila { width: 100%; }
.grupo-hilo { max-height: 42vh; }
.grupo-form-fila { flex-wrap: wrap; }
.grupo-form-fila input:not([type=file]) { order: -1; flex-basis: 100%; }
.gw-resultados { max-height: 200px; }
}
.grupo-emoji-panel {
display: flex; flex-wrap: wrap; gap: 3px; padding: 6px; border-radius: 12px;
background: rgba(2,6,23,.25); border: 1px solid rgba(255,255,255,.08);
}
.grupo-emoji-panel button {
border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer;
padding: 3px; border-radius: 7px;
}
.grupo-emoji-panel button:hover { background: rgba(255,255,255,.12); }
.grupo-privado > .grupo-chat-avatar { margin: 0 auto 10px; }
/* La ventana de chat usa una superficie oscura propia; el resto de modales conserva el tema. */
.social-modal.grupo-chat-modal-fondo { background: #0f172a; color: #e2e8f0; }
.social-modal.grupo-chat-modal-fondo .modal-cab h2 { color: #fff; }
.social-modal.grupo-chat-modal-fondo .modal-x { color: #cbd5e1; }
.social-modal.grupo-chat-modal-fondo .modal-x:hover { background: rgba(255,255,255,.12); color: #fff; }
.social-modal.grupo-chat-modal-fondo .grupo-chat-modal { background: #0f172a; color: #e2e8f0; }
.grupo-privado h3, .grupo-privado b { color: var(--texto); }
.grupo-privado p, .grupo-privado small { color: var(--suave); }
.grupo-solicitud { background: var(--azul-claro); border-color: var(--borde); color: var(--texto); }
.grupo-solicitud b { color: var(--texto); }
.grupo-solicitud small { color: var(--suave); }
.form-grupo .campo > span { color: var(--suave); }
.form-grupo .campo input, .form-grupo .campo textarea { background: var(--tarjeta); color: var(--texto); border-color: var(--borde); }
.form-grupo .check { color: var(--suave); }
.gw-paso { color: var(--aviso); }
.gw-foto { background: var(--aviso-claro); }
.gw-chips > span { background: var(--aviso-claro); color: var(--aviso); }
.gw-resultado { background: var(--tarjeta); border-color: var(--borde); color: var(--texto); }
.gw-resultado:hover, .gw-resultado.sel { background: var(--azul-claro); border-color: var(--oro); }
.gw-resultado small { color: var(--suave); }
.gw-resultado > b:last-child { color: var(--aviso); }
/* ---------- Perfil Full-View: tres columnas equilibradas ---------- */
.perfil-col-card {
display: flex;
flex-direction: column;
min-height: 96px;
overflow: hidden;
}
.perfil-col-card .perfil-glass-cab { flex: none; }
.perfil-col-card .perfil-card-scroll {
min-height: 0;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--perfil-accent) 55%, transparent) transparent;
}
.perfil-col-card .perfil-card-scroll::-webkit-scrollbar { width: 7px; }
.perfil-col-card .perfil-card-scroll::-webkit-scrollbar-track { background: transparent; }
.perfil-col-card .perfil-card-scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--perfil-accent) 42%, color-mix(in srgb, var(--perfil-texto, #fff) 12%, transparent));
}
.perfil-premios-card { max-height: 420px; }
.perfil-premios-card .perfil-card-scroll { flex: 1 1 auto; }
.perfil-premios-card .perfil-vitrina-ganados {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
}
.perfil-eventos-card .perfil-card-scroll,
.perfil-org-eventos .perfil-card-scroll { max-height: 360px; }
.perfil-seguidores-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 10px;
}
.perfil-seguidores-stats > span {
display: flex;
flex-direction: column;
gap: 1px;
padding: 7px 9px;
border: 1px solid var(--perfil-borde, rgba(255,255,255,.09));
border-radius: 11px;
background: var(--perfil-superficie-2, rgba(2,6,23,.28));
color: var(--perfil-suave, #aebdd2);
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .04em;
}
.perfil-seguidores-stats b { color: var(--perfil-texto, #fff); font-size: 16px; line-height: 1.1; letter-spacing: 0; }
.perfil-seguidores-card .seguidores-mosaico { margin-top: 2px; }
.perfil-col-izq .grupos-perfil,
.perfil-col-der .perfil-org-eventos { margin-top: 0; }
.perfil-org-vitrina { margin-top: 18px; }
.perfil-col-der .perfil-vacio { margin-top: 0; }
.perfil-col-der .perfil-bloque { margin-top: 0; }
.perfil-col-der .perfil-evento-mini,
.perfil-col-der .evento-card { margin-top: 0; }
@media (max-width: 1023px) {
.perfil-full-grid { grid-template-columns: 1fr; gap: 14px; }
.perfil-col-izq { order: 2; }
.perfil-full-main { order: 1; }
.perfil-col-der { order: 3; }
.perfil-premios-card { max-height: 420px; }
.perfil-org-vitrina { margin-top: 14px; }
}
/* ---------- Navbar persistente con glassmorphism ---------- */
.social-body > .superapp-header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
height: var(--altura-header);
min-height: var(--altura-header);
max-height: var(--altura-header);
padding: 0 20px;
background: var(--perfil-card-bg, rgba(255, 255, 255, 0.98)) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--perfil-card-border, #e4e2e1) !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
z-index: 1000;
box-shadow: 0 2px 12px rgba(26, 26, 26, .06);
transition: background .25s ease, border-color .25s ease, color .2s ease;
}
/* La barra también sigue el tema: texto, cápsulas e iconos salen de los tokens. */
.social-body[data-tema-activo] .superapp-header .superapp-marca,
.social-body[data-tema-activo] .superapp-header .marca-texto,
.social-body[data-tema-activo] .superapp-header .brand-text,
.social-body[data-tema-activo] .superapp-header .icono-logo-svg { color: var(--perfil-texto, #F1F5F9); }
.social-body[data-tema-activo] .superapp-header .brand-icon { background: var(--perfil-acento, #E25C50); color: #ffffff; }
.social-body[data-tema-activo] .superapp-header .navbar-seccion-centro .nav-link-btn { color: var(--perfil-suave, rgba(241,245,249,.65)); }
.social-body[data-tema-activo] .superapp-header .navbar-seccion-centro .nav-link-btn.activo,
.social-body[data-tema-activo] .superapp-header .navbar-seccion-centro .nav-link-btn:hover:not(.activo) {
background: var(--perfil-superficie-2, rgba(255,255,255,.08));
border-color: var(--perfil-acento-borde, rgba(255,255,255,.05));
color: var(--perfil-texto, #fff);
}
.social-body[data-tema-activo] .superapp-header .superapp-icono {
color: var(--perfil-texto, #F1F5F9);
border-color: var(--perfil-borde, rgba(255,255,255,.14));
background: var(--perfil-superficie-2, rgba(255,255,255,.04));
}
.social-body[data-tema-activo] .superapp-header .superapp-icono:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.10)); }
.social-body[data-tema-activo] .superapp-header .superapp-perfil,
.social-body[data-tema-activo] .superapp-header .superapp-perfil-flecha { color: var(--perfil-texto, #F1F5F9); }
.social-body[data-tema-activo] .superapp-header .superapp-perfil {
border-color: var(--perfil-borde, rgba(255,255,255,.12));
background: var(--perfil-superficie-2, rgba(255,255,255,.06));
}
.social-body[data-tema-activo] .superapp-header .superapp-perfil > b { color: var(--perfil-texto, #F1F5F9); }
.social-body[data-tema-activo] .superapp-header .superapp-menu {
background: var(--perfil-superficie, #141e2e);
border-color: var(--perfil-borde, rgba(255,255,255,.12));
color: var(--perfil-texto, #F1F5F9);
}
.social-body[data-tema-activo] .superapp-header .superapp-menu button { color: var(--perfil-texto, #F1F5F9); }
.social-body[data-tema-activo] .superapp-header .superapp-menu button:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.08)); }
.superapp-perfil-wrap { display: inline-flex; align-items: center; gap: 0; }
.superapp-perfil-flecha {
width: 28px;
height: 34px;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 999px;
background: transparent;
color: #CBD5E1;
font: inherit;
font-size: 12px;
line-height: 1;
cursor: pointer;
}
.superapp-perfil-flecha:hover { background: rgba(255,255,255,.10); color: #fff; }
.superapp-perfil-flecha:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 1px; }
.superapp-perfil:hover { background: rgba(255,255,255,.10); }
/* ---------- Footer institucional fijo, simétrico en 3 columnas ---------- */
.footer-institucional {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
height: 34px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 0;
padding: 0 24px;
margin: 0;
border-radius: 0;
border-top: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.08));
background: var(--perfil-card-bg, rgba(15, 23, 42, 0.92)) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
box-sizing: border-box;
overflow: hidden;
font-size: 11.5px;
color: var(--perfil-suave, rgba(241, 245, 249, 0.65));
z-index: var(--z-cab, 90);
}
.footer-col-izq {
display: flex;
align-items: center;
justify-self: start;
min-width: 0;
opacity: .5;
font-size: 11px;
}
.footer-col-centro {
display: flex;
align-items: center;
justify-content: center;
justify-self: center;
gap: 8px;
min-width: 0;
white-space: nowrap;
text-align: center;
}
.footer-col-der {
display: flex;
align-items: center;
justify-content: flex-end;
justify-self: end;
gap: 14px;
min-width: 0;
}
.footer-col-der a,
.footer-col-der span {
color: var(--perfil-suave, rgba(241, 245, 249, 0.7));
text-decoration: none;
transition: color .2s ease;
cursor: pointer;
}
.footer-col-der a:hover {
color: var(--perfil-accent, #38BDF8);
}
.footer-separador {
opacity: .3;
user-select: none;
}
.footer-link {
border: 0;
padding: 2px 0;
background: transparent;
font: inherit;
font-size: 11.5px;
line-height: 1;
cursor: pointer;
}
.footer-link:focus-visible {
color: var(--perfil-accent, #38BDF8);
outline: none;
}
#modalSocial { z-index: var(--z-hoja, 500); }
@media (max-width: 640px) {
.footer-institucional {
display: flex;
flex-direction: column;
justify-content: center;
height: auto;
min-height: 34px;
padding: 8px 12px;
gap: 4px;
font-size: 10.5px;
text-align: center;
}
.footer-col-izq {
justify-self: auto;
opacity: .45;
font-size: 10px;
}
.footer-col-centro {
justify-self: auto;
white-space: normal;
line-height: 1.35;
}
.footer-col-der {
justify-self: auto;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
.footer-link { font-size: 10.5px; }
}
/* ---------- Muro general: tarjetas y superficies coordinadas con el tema ---------- */
.social-layout .tarjeta,
.social-layout .post,
.social-layout .feed-tabs,
.social-layout .muro-sala,
.social-layout .evento-card {
background: var(--perfil-superficie, rgba(15, 23, 42, 0.78)) !important;
border: 1px solid var(--perfil-borde, rgba(255, 255, 255, 0.08)) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
color: var(--perfil-texto, #F1F5F9) !important;
}
.social-layout .tarjeta h2,
.social-layout .tarjeta h3,
.social-layout .post h2,
.social-layout .post h3,
.social-layout .post b { color: var(--perfil-texto, #F1F5F9); }
.social-layout .suave,
.social-layout .feed-estado,
.social-layout .feed-vacio,
.social-layout .composer-ayuda,
.social-layout .post-texto { color: var(--perfil-suave, #cbd5e1); }
.social-layout .feed-vacio b { color: var(--perfil-texto, #F1F5F9); }
.social-layout .post-original,
.social-layout .post-comentario,
.social-layout .resultado,
.social-layout .composer-preview,
.social-layout .perfil-contadores > div,
.social-layout .perfil-publico-contadores > div {
background: var(--perfil-superficie-2, rgba(2, 6, 23, .30)) !important;
border-color: var(--perfil-borde, rgba(255,255,255,.10)) !important;
color: var(--perfil-texto, #e2e8f0) !important;
}
.social-layout input,
.social-layout textarea,
.social-layout select {
background: var(--perfil-superficie-2, rgba(2, 6, 23, .36)) !important;
border-color: var(--perfil-borde, rgba(255,255,255,.14)) !important;
color: var(--perfil-texto, #F1F5F9) !important;
}
.social-layout input::placeholder,
.social-layout textarea::placeholder { color: var(--perfil-suave, #94a3b8) !important; }
.social-layout .composer textarea {
background: transparent !important;
border: 0 !important;
color: var(--perfil-texto, #F1F5F9) !important;
}
.social-layout .btn.sec {
background: var(--perfil-superficie-2, rgba(255,255,255,.08)) !important;
border-color: var(--perfil-borde, rgba(255,255,255,.16)) !important;
color: var(--perfil-texto, #F1F5F9) !important;
}
.social-layout .btn.sec:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.15)) !important; }
.social-layout .feed-tab { color: var(--perfil-suave, #cbd5e1); }
.social-layout .feed-tab.activo { background: var(--perfil-accent, var(--oro)) !important; color: var(--perfil-acento-texto, #1a1a1a) !important; }
.social-layout .chip {
background: var(--perfil-superficie-2, rgba(255,255,255,.09)) !important;
border-color: var(--perfil-borde, rgba(255,255,255,.10)) !important;
color: var(--perfil-texto, #e2e8f0) !important;
}
.social-layout .muro-burbuja { color: var(--perfil-texto, #e2e8f0); }
.social-layout .muro-burbuja small { color: var(--perfil-suave, var(--suave)); }
.social-layout .muro-sala .muro-sala-banner { border-radius: 12px 12px 0 0; }
.social-layout .muro-ad {
background: var(--perfil-superficie, rgba(15, 23, 42, 0.78)) !important;
border: 1px solid var(--perfil-borde, rgba(255, 255, 255, 0.08)) !important;
color: var(--perfil-texto, #F1F5F9) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.social-layout .muro-sala h4 { color: var(--perfil-texto, #F1F5F9) !important; }
.social-layout .muro-sala-org,
.social-layout .muro-sala-meta { color: var(--perfil-suave, #cbd5e1) !important; }
.social-layout .muro-sala-banner .avatar,
.social-layout .muro-burbuja-aro .avatar { border-color: var(--perfil-superficie, rgba(15, 23, 42, .88)) !important; }
.social-layout .post-evento {
background: linear-gradient(135deg, var(--perfil-acento-tenue, rgba(120, 83, 20, .34)), var(--perfil-superficie, rgba(15, 23, 42, .78))) !important;
border-color: var(--perfil-acento-borde, rgba(239, 120, 120, .38)) !important;
color: var(--perfil-texto, #e2e8f0) !important;
}
.social-layout .post-evento h3 { color: var(--perfil-texto, #F1F5F9); }
.social-layout .post-evento-tipo,
.social-layout .post-evento-meta { color: var(--perfil-suave, #b9c7da) !important; }
.social-layout .post-evento-premio { color: var(--perfil-accent-texto, var(--perfil-accent, #fde68a)) !important; }
.social-layout .post-evento-motivo { color: var(--perfil-accent-texto, var(--perfil-accent, #fde68a)) !important; }
.social-layout .post-evento-frase { color: var(--perfil-suave, #b9c7da) !important; }
.social-layout .post-evento-menu li { color: var(--perfil-texto, #e2e8f0); }
.social-layout .post-evento-menu li span { color: var(--perfil-accent-texto, var(--perfil-accent, #fde68a)); }
.social-layout .post-evento-delivery { background: rgba(34, 197, 94, .16); color: #bbf7d0; }
.social-layout .post-evento-btn {
background: var(--perfil-superficie-2, rgba(255, 255, 255, .10)) !important;
border: 1px solid var(--perfil-borde, rgba(255, 255, 255, .16));
color: var(--perfil-texto, #F1F5F9) !important;
}
.social-layout .post-comentario b,
.social-layout .post-original-cab b { color: var(--perfil-texto, #F1F5F9) !important; }
.social-layout .post-comentario small,
.social-layout .post-original-cab small,
.social-layout .post-quien small,
.social-layout .post-accion { color: var(--perfil-suave, #b9c7da) !important; }
.social-layout .post-acciones { border-top-color: var(--perfil-borde, rgba(255,255,255,.10)) !important; }
.social-layout .post-accion:hover { background: var(--perfil-superficie-2, rgba(255,255,255,.08)) !important; color: var(--perfil-texto, #fff) !important; }
.social-layout .post-tag { background: var(--perfil-superficie-2, rgba(255,255,255,.09)) !important; border-color: var(--perfil-borde, rgba(255,255,255,.12)) !important; color: var(--perfil-texto, #e2e8f0) !important; }
.social-layout .evento-card b,
.social-layout .evento-card h3,
.social-layout .evento-card h4 { color: var(--perfil-texto, #F1F5F9) !important; }
.social-layout .evento-card small,
.social-layout .evento-card-datos small,
.social-layout .historial-card small { color: var(--perfil-suave, #cbd5e1) !important; }
.social-layout .vivo-carrusel-vacio { color: var(--perfil-suave, #cbd5e1) !important; }
.social-layout .perfil-bio { color: var(--perfil-suave, #cbd5e1) !important; }
.social-layout .handle { color: var(--perfil-suave, var(--suave)) !important; }
.social-layout .perfil-contadores span { color: var(--perfil-suave, #cbd5e1) !important; }
.social-layout .perfil-contadores b { color: var(--perfil-texto, #F1F5F9) !important; }
.social-layout .perfil-quien b,
.social-layout .perfil-card b { color: var(--perfil-texto, #F1F5F9) !important; }
.social-layout .perfil-apodo { color: var(--perfil-accent-texto, var(--perfil-accent, #fde68a)) !important; }
.social-layout .contador,
.social-layout .buscador-vacio,
.social-layout .mini-pasos { color: var(--perfil-suave, #cbd5e1) !important; }
.social-layout .badge-jugador { background: var(--perfil-superficie-2, rgba(255,255,255,.10)) !important; color: var(--perfil-suave, #cbd5e1) !important; }
.social-layout .btn-seguir-mini {
background: var(--perfil-superficie-2, rgba(255,255,255,.08)) !important;
border-color: var(--perfil-borde, rgba(255,255,255,.14)) !important;
color: var(--perfil-texto, #F1F5F9) !important;
}
.social-layout .btn-seguir-mini:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.15)) !important; }
.social-layout .tag-filtro {
background: var(--perfil-superficie, rgba(15, 23, 42, 0.78)) !important;
border-color: var(--perfil-borde, rgba(255,255,255,.08)) !important;
color: var(--perfil-texto, #F1F5F9) !important;
}
.social-layout .perfil-invitado-icon {
background: var(--perfil-acento-tenue, rgba(255,255,255,.09)) !important;
color: var(--perfil-accent, #F1F5F9) !important;
}
/* Catalogo comercial como columna vertical del perfil */
.perfil-col-der .catalogo-comercial {
margin-top: 0;
padding: 14px;
max-height: 620px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.catalogo-cab { align-items: flex-start; margin-bottom: 8px; }
.catalogo-cab-titulo {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-width: 0;
}
.catalogo-cab-titulo h2 { white-space: nowrap; }
.catalogo-plan {
padding: 2px 7px;
font-size: 10px;
cursor: pointer;
border: 1px solid rgba(239, 120, 120, .35);
background: rgba(239, 120, 120, .14);
color: #fde68a;
}
.catalogo-cab > .btn { min-height: 30px; padding: 4px 9px; font-size: 11px; }
.catalogo-scroll {
min-height: 0;
flex: 1 1 auto;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--perfil-accent, #ef7878) 52%, transparent) transparent;
}
.catalogo-scroll::-webkit-scrollbar { width: 7px; }
.catalogo-scroll::-webkit-scrollbar-track { background: transparent; }
.catalogo-scroll::-webkit-scrollbar-thumb {
border-radius: 999px;
background: color-mix(in srgb, var(--perfil-accent, #ef7878) 40%, rgba(255,255,255,.12));
}
.perfil-col-der .catalogo-grid {
display: grid;
grid-template-columns: 1fr;
align-items: stretch;
gap: 10px;
margin-top: 4px;
}
.perfil-col-der .catalogo-grid > .catalogo-card { min-width: 0; }
.perfil-col-der .catalogo-card > img,
.perfil-col-der .catalogo-sin-foto {
aspect-ratio: 16 / 9;
border-radius: 12px 12px 0 0;
}
.perfil-col-der .catalogo-sin-foto { font-size: 36px; }
.perfil-col-der .catalogo-datos > b,
.perfil-col-der .catalogo-datos p { overflow-wrap: anywhere; }
.catalogo-datos p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.catalogo-acciones .btn { flex: 0 1 auto; }
.perfil-col-der .catalogo-acciones .btn[aria-label] {
flex: 0 0 34px;
width: 34px;
min-width: 34px;
padding: 0;
}
.catalogo-foto-acciones { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.catalogo-foto-acciones small { flex-basis: 100%; font-size: 10.5px; }
@media (max-width: 1023px) {
/* Al ocupar el ancho completo del perfil no hace falta scroll interno:
se muestran todas las filas y la página sigue su scroll natural. */
.perfil-col-der .catalogo-comercial { max-height: none; }
.perfil-col-der .catalogo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.perfil-col-der .catalogo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.perfil-col-der .catalogo-acciones .btn { flex: 1 1 auto; }
}
@media (max-width: 560px) {
/* En tarjetas angostas la acción principal ocupa su fila y los botones
secundarios se reparten; los de icono (editar/eliminar) no se estiran. */
.perfil-col-der .catalogo-acciones .btn { width: auto; flex: 1 1 auto; }
.perfil-col-der .catalogo-acciones .catalogo-comprar,
.perfil-col-der .catalogo-acciones .perfil-btn-acento { flex: 1 0 100%; }
}
@media (max-width: 480px) {
.perfil-col-der .catalogo-grid { grid-template-columns: 1fr; }
}
/* Estado de 24 h integrado en la identidad del hero */
.perfil-full-identidad .estado-pildora-wrap {
width: 100%;
margin-top: 9px;
}
.perfil-full-identidad .estado-pildora {
max-width: min(100%, 420px);
min-height: 30px;
padding: 5px 10px;
font-size: 11.5px;
}
.perfil-full-identidad .estado-pildora-texto { max-width: min(360px, calc(100% - 66px)); }
@media (max-width: 768px) {
.perfil-full-identidad .estado-pildora { width: 100%; justify-content: center; }
.perfil-full-identidad .estado-pildora-texto { max-width: calc(100% - 66px); }
}
.catalogo-cab { flex-wrap: wrap; }
.catalogo-cab > .btn { margin-left: auto; }
.grupo-solicitudes-btn b {
display: inline-flex;
min-width: 18px;
height: 18px;
align-items: center;
justify-content: center;
padding: 0 5px;
border-radius: 999px;
background: var(--oro, #ef7878);
color: #1a1a1a;
font-size: 10px;
line-height: 1;
}
/* Glassmorphism de la seccian de grupos en el perfil */
.perfil-col-izq .grupos-perfil {
background: var(--perfil-card-bg, color-mix(in srgb, var(--perfil-superficie, #0f172a) 78%, transparent));
border-color: var(--perfil-card-border, color-mix(in srgb, var(--perfil-texto, #fff) 8%, transparent));
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.grupo-card {
background: var(--perfil-card-bg, rgba(15, 23, 42, 0.78));
border-color: var(--perfil-card-border, rgba(255, 255, 255, 0.10));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.grupo-card .chip { white-space: normal; line-height: 1.25; }
/* ---------- Badges de no leados estilo WhatsApp ---------- */
.badge-no-leidos {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
font-size: 11px;
font-weight: 700;
color: #FFFFFF;
background-color: var(--badge-bg, #22C55E);
border-radius: 9999px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
line-height: 1;
animation: bounce-badge 0.25s ease-out;
}
@keyframes bounce-badge {
0% { transform: scale(0.6); }
70% { transform: scale(1.18); }
100% { transform: scale(1); }
}
.nav-badge { margin-left: 3px; vertical-align: middle; flex: none; }
.grupo-card { position: relative; }
.grupo-card > .badge-no-leidos {
position: absolute;
top: 7px;
right: 7px;
z-index: 2;
pointer-events: none;
}
.grupo-card:hover { border-color: var(--perfil-accent, var(--oro)) !important; }
/* Lista de grupos del modal global */
.grupos-modal-lista { display: flex; flex-direction: column; gap: 8px; }
.grupo-modal-item {
position: relative;
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 10px;
border: 1px solid rgba(255,255,255,.10);
border-radius: 13px;
background: rgba(255,255,255,.055);
color: #F1F5F9;
text-align: left;
cursor: pointer;
}
.grupo-modal-item:hover { border-color: var(--perfil-accent, var(--oro)); background: rgba(255,255,255,.09); }
.grupo-modal-item img, .grupo-modal-icono {
width: 44px; height: 44px; flex: none; border-radius: 13px; object-fit: cover;
display: grid; place-items: center; background: rgba(239, 120, 120, .15); font-size: 20px;
}
.grupo-modal-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.grupo-modal-datos b { color: #fff; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grupo-modal-datos small { color: #cbd5e1; font-size: 11px; }
.grupo-modal-item .badge-no-leidos { margin-left: auto; }
/* Ventana de chat grupal con variables del tema activo */
.social-modal.chat-grupo-ventana {
background: var(--perfil-card-bg, rgba(15, 23, 42, 0.82)) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.08));
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
color: var(--feed-texto, #F1F5F9);
}
.chat-grupo-header {
background: rgba(2, 6, 23, 0.45) !important;
border-bottom: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.08));
}
.chat-grupo-footer {
background: rgba(2, 6, 23, 0.55);
border-top: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.08));
padding-top: 8px;
}
.grupo-hilo.chat-grupo-mensajes { background: var(--perfil-superficie-2, rgba(2, 6, 23, .35)); }
.grupo-msj {
background: var(--perfil-superficie, rgba(255, 255, 255, 0.07));
border: 1px solid var(--perfil-borde, rgba(255, 255, 255, 0.08));
color: var(--perfil-texto, #F1F5F9);
border-radius: 16px 16px 16px 4px;
}
.grupo-msj.mio {
background: var(--perfil-accent, #3B82F6);
border-color: color-mix(in srgb, var(--perfil-accent, #3B82F6) 70%, white 30%);
/* El acento puede ser claro: el token elige tinta oscura o blanca con 4.5:1. */
color: var(--perfil-acento-texto, #0b1220);
border-radius: 16px 16px 4px 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.grupo-msj-cab b { color: var(--perfil-accent-texto, var(--perfil-accent, #3B82F6)); }
.grupo-msj-cab small { color: var(--perfil-suave, #94a3b8); }
.grupo-msj.mio .grupo-msj-cab b { color: inherit; }
.grupo-msj.mio .grupo-msj-cab small { color: inherit; opacity: .78; }
.grupo-msj-audio { accent-color: var(--perfil-accent, #3B82F6); }
.grupo-expira {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border: 1px solid var(--perfil-borde, rgba(255,255,255,.18));
border-radius: 999px;
background: var(--perfil-acento-tenue, rgba(2,6,23,.28));
color: var(--perfil-texto, #e2e8f0);
font-size: 9px;
line-height: 1.5;
}
.grupo-msj.mio .grupo-expira {
background: color-mix(in srgb, currentColor 14%, transparent);
border-color: color-mix(in srgb, currentColor 30%, transparent);
color: inherit;
}
.grupo-grabando b { animation: pulso-grabacion 1s ease-in-out infinite; }
@keyframes pulso-grabacion { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.grupos-modal-lista {
background: var(--perfil-card-bg, rgba(15, 23, 42, 0.82));
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.08));
border-radius: 16px;
padding: 10px;
color: #F1F5F9;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.badge-no-leidos { transition: opacity .18s ease, transform .18s ease; }
.badge-no-leidos.badge-saliendo { animation: none; opacity: 0; transform: scale(.7); }
.social-modal.chat-grupo-ventana .grupo-chat-modal { background: transparent !important; }
/* ---------- Dock de conversaciones flotantes (Messenger) ---------- */
#chat-dock-container {
position: fixed;
bottom: 32px;
right: 20px;
max-width: calc(100vw - 40px);
display: flex;
flex-direction: row-reverse;
gap: 12px;
z-index: var(--z-dock, 450);
pointer-events: none;
}
.chat-dock-box {
width: 360px;
height: 552px;
max-height: calc(100dvh - 64px);
flex: 0 0 auto;
display: flex;
flex-direction: column;
overflow: hidden;
pointer-events: auto;
background: var(--perfil-card-bg, rgba(15, 23, 42, 0.88));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.12));
border-bottom: none;
border-radius: 14px 14px 0 0;
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.35);
color: var(--feed-texto, #F1F5F9);
transition: height 0.25s ease, transform 0.2s ease;
}
.chat-dock-privado { width: 320px; }
.chat-dock-box.minimizado { height: 42px; }
.chat-dock-header {
height: 58px;
flex: 0 0 58px;
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
cursor: pointer;
background: var(--perfil-superficie-2, rgba(2, 6, 23, 0.50));
border-bottom: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.08));
}
.chat-dock-box.minimizado .chat-dock-header { height: 42px; flex-basis: 42px; border-bottom: 0; }
.chat-dock-identidad { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.chat-dock-identidad .avatar { --tam: 34px; flex: none; border-color: var(--perfil-borde, rgba(255,255,255,.28)); }
.chat-dock-identidad > div {
display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
min-width: 0; flex: 1; overflow: hidden;
}
.chat-dock-nombre-linea { display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.chat-dock-identidad b {
color: var(--perfil-texto, #fff); font-size: 13px; min-width: 0; flex: 0 1 auto;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-dock-identidad small {
color: var(--perfil-suave, #cbd5e1); font-size: 10.5px; min-width: 0; max-width: 100%;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-dock-identidad [data-dock-verif] { flex: none; display: inline-flex; align-items: center; }
.chat-dock-identidad [data-dock-verif]:empty { display: none; }
.chat-dock-badge { flex: none; }
.chat-dock-acciones { display: flex; align-items: center; gap: 2px; flex: none; }
.chat-dock-btn {
width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
border: 0; border-radius: 50%; background: transparent; color: var(--perfil-suave, #cbd5e1); font: inherit;
font-size: 13px; font-weight: 800; cursor: pointer;
}
.chat-dock-btn:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.14)); color: var(--perfil-texto, #fff); }
.chat-dock-cuerpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-dock-box.minimizado .chat-dock-cuerpo { display: none; }
.chat-dock-toolbar {
display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
padding: 6px 8px; border-bottom: 1px solid var(--perfil-borde, rgba(255,255,255,.07));
}
.chat-dock-toolbar .btn { min-height: 28px; padding: 3px 7px; font-size: 10.5px; }
.chat-dock-mensajes {
flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
gap: 7px; padding: 10px; background: var(--perfil-superficie-2, rgba(2, 6, 23, .35));
scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
}
.chat-dock-mensajes::-webkit-scrollbar { width: 7px; }
.chat-dock-mensajes::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 999px; }
.chat-dock-box .chat-burbuja {
max-width: 86%;
background: var(--perfil-superficie, rgba(255, 255, 255, 0.08)) !important;
border: 1px solid var(--perfil-borde, rgba(255, 255, 255, 0.08)) !important;
color: var(--perfil-texto, #F1F5F9) !important;
border-radius: 14px 14px 14px 4px;
}
.chat-dock-box .chat-burbuja.mia {
background: var(--perfil-accent, #3B82F6) !important;
border-color: color-mix(in srgb, var(--perfil-accent, #3B82F6) 70%, white 30%) !important;
color: var(--perfil-acento-texto, #0b1220) !important;
border-radius: 14px 14px 4px 14px;
}
.chat-dock-box .chat-burbuja-cab { color: var(--perfil-suave, #cbd5e1); }
.chat-dock-box .chat-burbuja.mia .chat-burbuja-cab { color: inherit; opacity: .82; }
.chat-dock-box .chat-burbuja-cab .badge-jugador,
.chat-dock-box .chat-burbuja-cab .badge-org { display: none; }
.chat-dock-box .chat-texto { font-size: 13px; line-height: 1.4; }
.chat-dock-box .chat-hora { color: var(--perfil-suave, #94a3b8); }
.chat-dock-box .chat-burbuja.mia .chat-hora { color: inherit; opacity: .85; }
.chat-dock-box .chat-media-img { max-height: 220px; border-radius: 9px; background: rgba(2,6,23,.4); }
.chat-dock-box .chat-media-audio { width: min(240px, 100%); accent-color: var(--perfil-accent, #3B82F6); }
.chat-dock-box .chat-burbuja.mia .chat-descarga { color: inherit; }
.chat-dock-box .chat-vacio { margin: auto; padding: 16px 10px; text-align: center; color: var(--perfil-suave, #94a3b8); font-size: 12px; }
.chat-dock-box .chat-vacio b { display: block; color: var(--perfil-texto, #F1F5F9); margin-bottom: 3px; }
.chat-dock-form {
flex: none; padding: 7px 8px 8px;
background: var(--perfil-superficie-2, rgba(2, 6, 23, 0.55));
border-top: 1px solid var(--perfil-card-border, rgba(255,255,255,.08));
}
.chat-dock-form-fila { display: flex; align-items: center; gap: 5px; }
.chat-dock-form-fila input:not([type=file]) {
flex: 1; min-width: 0; height: 35px; min-height: 35px; padding: 0 11px;
border-radius: 999px; border: 1px solid var(--perfil-borde, rgba(255,255,255,.14));
background: var(--perfil-superficie, rgba(2,6,23,.35)); color: var(--perfil-texto, #F1F5F9); font-size: 13px;
}
.chat-dock-form-fila input:not([type=file])::placeholder { color: var(--perfil-suave, #94a3b8); }
.chat-dock-icono {
width: 31px; height: 31px; flex: none; border: 0; border-radius: 50%;
background: transparent; color: var(--perfil-texto, #e2e8f0); font-size: 17px; line-height: 1; cursor: pointer;
}
.chat-dock-icono:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.12)); }
.chat-dock-emojis { display: flex; flex-wrap: wrap; gap: 2px; padding-top: 6px; }
.chat-dock-emojis button { border: 0; background: transparent; font-size: 19px; cursor: pointer; padding: 2px; border-radius: 6px; }
.chat-dock-emojis button:hover { background: var(--perfil-acento-tenue, rgba(255,255,255,.12)); }
.chat-dock-grabando {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 7px;
color: #fecaca; font-size: 11px;
}
.chat-dock-grabando b { color: var(--perfil-texto, #fff); font-variant-numeric: tabular-nums; }
.chat-dock-grab-punto {
width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
box-shadow: 0 0 0 4px rgba(239,68,68,.14); animation: pulso-grabacion 1s ease-in-out infinite;
}
.chat-dock-box .grupo-solicitudes-btn b {
min-width: 17px; height: 17px; background: var(--oro); color: #1a1a1a;
}
@media (max-width: 767px) {
#chat-dock-container {
right: 0; left: 0; max-width: none; gap: 6px; padding: 0 6px;
overflow-x: auto; scrollbar-width: none;
}
#chat-dock-container::-webkit-scrollbar { display: none; }
.chat-dock-box, .chat-dock-privado { width: calc(100vw - 12px); height: min(552px, calc(100dvh - 64px)); }
.chat-dock-box.minimizado { height: 42px; }
.chat-dock-header { height: 56px; flex-basis: 56px; }
.chat-dock-box.minimizado .chat-dock-header { height: 42px; flex-basis: 42px; }
.chat-dock-form-fila input:not([type=file]) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
.chat-dock-box, .badge-no-leidos { transition: none !important; animation: none !important; }
}
.chat-dock-box .chat-burbuja.mia .grupo-expira {
background: color-mix(in srgb, currentColor 14%, transparent);
border-color: color-mix(in srgb, currentColor 30%, transparent);
color: inherit;
}
.chat-dock-box .chat-burbuja:not(.mia) .chat-burbuja-cab > span:not(.grupo-expira) {
color: var(--perfil-accent-texto, var(--perfil-accent, #3B82F6));
font-weight: 700;
}
.chat-dock-box .chat-burbuja.mia .chat-burbuja-cab > span:not(.grupo-expira) { color: inherit; opacity: .82; }
/* ---------- Reacciones, comentarios y tarjetas compartidas ---------- */
.catalogo-social {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 9px;
border-top: 1px solid var(--borde, rgba(255,255,255,.10));
}
.catalogo-reacciones, .catalogo-social-acciones { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.catalogo-reaccion, .catalogo-social-btn {
display: inline-flex; align-items: center; gap: 4px;
min-height: 30px; padding: 4px 8px; border: 1px solid var(--borde, rgba(255,255,255,.12));
border-radius: 999px; background: var(--azul-claro, rgba(255,255,255,.08));
color: var(--texto, #e2e8f0); font: inherit; font-size: 11.5px; cursor: pointer;
}
.catalogo-reaccion b { font-variant-numeric: tabular-nums; }
.catalogo-reaccion:hover, .catalogo-social-btn:hover { background: color-mix(in srgb, var(--perfil-accent, #3B82F6) 16%, transparent); border-color: color-mix(in srgb, var(--perfil-accent, #3B82F6) 45%, transparent); }
.catalogo-reaccion.activa { background: color-mix(in srgb, var(--perfil-accent, #3B82F6) 24%, transparent); border-color: var(--perfil-accent, #3B82F6); color: #fff; }
.catalogo-card.catalogo-foco { animation: catalogoFoco 1.2s ease 2; border-color: var(--perfil-accent, #3B82F6); }
@keyframes catalogoFoco { 0%,100% { box-shadow: 0 0 0 0 transparent; } 45% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--perfil-accent, #3B82F6) 35%, transparent); } }
.catalogo-comentarios { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde, rgba(255,255,255,.12)); display: grid; gap: 7px; }
.catalogo-comentarios-lista { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; }
.catalogo-comentario { display: flex; align-items: flex-start; gap: 7px; padding: 6px 7px; border-radius: 10px; background: var(--azul-claro, rgba(255,255,255,.07)); }
.catalogo-comentario .avatar { --tam: 28px; flex: none; }
.catalogo-comentario-datos { min-width: 0; flex: 1; }
.catalogo-comentario-datos b { display: block; color: var(--texto, #f8fafc); font-size: 11.5px; }
.catalogo-comentario-datos p { margin: 2px 0; color: var(--texto, #e2e8f0); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.catalogo-comentario-datos small { color: var(--suave, #94a3b8); font-size: 10px; }
.catalogo-comentarios-vacio { padding: 5px 2px; font-size: 12px; }
.catalogo-comentario-form { display: flex; gap: 5px; align-items: center; }
.catalogo-comentario-form input { flex: 1; min-width: 0; min-height: 32px; padding: 5px 8px; font-size: 12px; }
.catalogo-comentario-form .btn { flex: none; min-height: 32px; }
/* Tarjeta compartida dentro de burbujas de chat/grupo */
.chat-compartido {
display: grid; gap: 4px; min-width: min(220px, 78vw);
margin-top: 5px; padding: 7px; border: 1px solid var(--perfil-borde, rgba(255,255,255,.14));
border-radius: 11px; background: var(--perfil-superficie-2, rgba(2,6,23,.28)); color: var(--perfil-texto, #f1f5f9);
}
.chat-compartido.mio { background: var(--perfil-superficie-2, rgba(2,6,23,.20)); border-color: var(--perfil-borde, rgba(255,255,255,.22)); }
.chat-compartido img { width: 100%; max-height: 145px; object-fit: cover; border-radius: 8px; background: var(--perfil-superficie, rgba(255,255,255,.08)); }
.chat-compartido-sin-foto { display: grid; place-items: center; min-height: 70px; border-radius: 8px; background: var(--perfil-superficie, rgba(255,255,255,.08)); font-size: 24px; }
.chat-compartido-badge { justify-self: start; padding: 2px 6px; border-radius: 999px; background: var(--perfil-acento-tenue, rgba(255,255,255,.12)); color: var(--perfil-texto, #dbeafe); font-size: 9.5px; font-weight: 800; }
.chat-compartido b { font-size: 12.5px; line-height: 1.25; color: var(--perfil-texto, #fff); }
.chat-compartido small { color: var(--perfil-suave, #cbd5e1); font-size: 10.5px; line-height: 1.3; }
.chat-compartido strong { color: var(--perfil-accent-texto, var(--perfil-accent, #fde68a)); font-size: 11.5px; }
.chat-compartido-btn { justify-self: start; margin-top: 2px; color: var(--perfil-accent-texto, #93c5fd); font-size: 11px; font-weight: 800; text-decoration: none; }
.chat-compartido-btn:hover { text-decoration: underline; }
.grupo-msj .chat-compartido { margin-top: 3px; max-width: 300px; }
/* Modal Compartir */
.compartir-modal { display: grid; gap: 13px; }
.compartir-preview { display: flex; gap: 10px; align-items: flex-start; padding: 9px; border: 1px solid var(--borde); border-radius: 12px; background: var(--azul-claro); }
.compartir-preview > img, .compartir-sin-foto { width: 76px; height: 76px; flex: none; border-radius: 9px; object-fit: cover; background: var(--tarjeta); }
.compartir-sin-foto { display: grid; place-items: center; font-size: 25px; }
.compartir-preview > div { min-width: 0; display: grid; gap: 3px; }
.compartir-preview b { color: var(--texto); font-size: 14px; overflow-wrap: anywhere; }
.compartir-preview p { margin: 0; color: var(--suave); font-size: 12px; line-height: 1.35; }
.compartir-preview strong { color: var(--oro-osc, #a16207); font-size: 12px; }
.compartir-preview small { color: var(--suave); font-size: 10px; overflow-wrap: anywhere; }
.compartir-badge { justify-self: start; padding: 2px 6px; border-radius: 999px; background: var(--tarjeta); color: var(--texto); font-size: 9.5px; font-weight: 800; }
.compartir-externo { display: flex; gap: 7px; flex-wrap: wrap; }
.compartir-externo .btn { flex: 1 1 170px; }
.compartir-interno { display: grid; gap: 8px; border-top: 1px solid var(--borde); padding-top: 10px; }
.compartir-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.compartir-cab h3 { margin: 0; font-size: 14px; color: var(--texto); }
.compartir-cab input { min-width: 170px; flex: 1 1 180px; min-height: 33px; font-size: 12px; }
.compartir-tabs { display: flex; gap: 4px; overflow-x: auto; }
.compartir-tabs button { flex: none; padding: 6px 9px; border: 1px solid var(--borde); border-radius: 999px; background: transparent; color: var(--suave); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.compartir-tabs button.activa { background: var(--azul-claro); color: var(--texto); border-color: var(--azul-3); }
.compartir-lista { display: grid; gap: 5px; max-height: 280px; overflow-y: auto; }
.compartir-fila { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid transparent; border-radius: 9px; }
.compartir-fila:hover { background: var(--azul-claro); border-color: var(--borde); }
.compartir-fila .avatar { --tam: 34px; flex: none; }
.compartir-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; object-fit: cover; }
.compartir-avatar-icon { display: grid; place-items: center; background: var(--azul-claro); font-size: 18px; }
.compartir-datos { flex: 1; min-width: 0; display: grid; gap: 1px; }
.compartir-datos b { color: var(--texto); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compartir-datos small { color: var(--suave); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compartir-fila .btn { flex: none; min-height: 30px; padding: 3px 9px; font-size: 11px; }
.compartir-vacio, .compartir-cargando { padding: 10px; font-size: 12px; }
html[data-tema="oscuro"] .compartir-preview, html[data-tema="oscuro"] .catalogo-comentario { background: rgba(255,255,255,.07); }
/* Iconografaa plana heredando color de texto */
.superapp-centro a { gap: 6px; }
.superapp-centro a > span { line-height: 1; }
.superapp-menu button { gap: 9px; }
.superapp-menu .icono-menu-svg { color: currentColor; }
.chat-dock-icono .icono-svg,
.chat-dock-btn .icono-svg { stroke: currentColor; }
.chat-dock-btn .icono-svg { width: 15px; height: 15px; }
.btn .icono-svg,
.btn .icono-nav-svg { flex: none; }
.compartir-badge,
.chat-compartido-badge {
display: inline-flex;
align-items: center;
gap: 4px;
}
.compartir-badge .icono-svg,
.chat-compartido-badge .icono-svg {
width: 13px;
height: 13px;
opacity: .9;
}
.modal-cab h2 { display: inline-flex; align-items: center; gap: 7px; }
.modal-cab h2 .icono-svg { width: 19px; height: 19px; }
.catalogo-reaccion .icono-reaccion { stroke: currentColor; }
.catalogo-social-btn .icono-svg { pointer-events: none; }
.catalogo-social-btn { gap: 5px; }
.catalogo-social-btn > span { line-height: 1; }
.accionesPerfil .icono-svg { stroke: currentColor; }
.icono-nav-svg {
width: 17px;
height: 17px;
stroke: currentColor;
stroke-width: 1.85;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
vertical-align: middle;
opacity: .8;
transition: stroke .2s ease, opacity .2s ease;
}
.superapp-centro a:hover .icono-nav-svg,
.superapp-centro a.activo .icono-nav-svg,
.nav-link:hover .icono-nav-svg,
.nav-link.activo .icono-nav-svg {
opacity: 1;
stroke: var(--perfil-accent, #38BDF8);
}
/* La barra institucional queda debajo de modales y del dock. */
body.social-body .modal-fondo { z-index: var(--z-hoja, 500); }
body.social-body .footer-institucional { z-index: var(--z-cab, 90); }
body.social-body #chat-dock-container { z-index: var(--z-dock, 450); }
/* Navbar global monocromática: anula el acento dorado/celeste dentro de la barra. */
html[data-tema="oscuro"] .superapp-acciones .btn,
html[data-tema="oscuro"] .superapp-acciones .btn.oro {
background: rgba(255, 255, 255, .06);
border-color: rgba(255, 255, 255, .14);
color: #F1F5F9;
}
html[data-tema="oscuro"] .superapp-acciones .btn:hover,
html[data-tema="oscuro"] .superapp-acciones .btn.oro:hover {
background: rgba(255, 255, 255, .11);
color: #FFFFFF;
}
.social-body .superapp-centro a:hover .icono-nav-svg,
.social-body .superapp-centro a.activo .icono-nav-svg {
stroke: currentColor;
}
/* ============================================================
M�sica de ambiente del perfil del organizador
============================================================ */
#musica-ambiente-player {
position: absolute;
left: -9999px;
top: 0;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.musica-ambiente-chip {
position: fixed;
bottom: calc(var(--alto-shell, 62px) + 14px);
right: 20px;
z-index: var(--z-barra, 100);
display: flex;
align-items: center;
gap: 10px;
max-width: calc(100vw - 40px);
padding: 6px 14px;
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, .12));
border-radius: 9999px;
background: var(--perfil-card-bg, rgba(15, 23, 42, .9));
box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.musica-texto {
overflow: hidden;
color: rgba(241, 245, 249, .8);
font-size: 11.5px;
font-weight: 500;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-toggle-musica {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 24px;
height: 24px;
padding: 2px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--perfil-accent, #38BDF8);
cursor: pointer;
}
.btn-toggle-musica:hover { background: rgba(255, 255, 255, .08); }
.btn-toggle-musica:focus-visible { outline: 2px solid var(--perfil-accent, #38BDF8); outline-offset: 2px; }
.btn-toggle-musica .icono-svg-musica { width: 15px; height: 15px; }
.musica-ondas-animacion {
display: flex;
align-items: flex-end;
gap: 2px;
height: 12px;
}
.musica-ondas-animacion span {
width: 2.5px;
height: 100%;
border-radius: 2px;
background: var(--perfil-accent, #38BDF8);
animation: pulsoOnda 1s ease-in-out infinite alternate;
}
.musica-ondas-animacion span:nth-child(2) { animation-delay: .2s; }
.musica-ondas-animacion span:nth-child(3) { animation-delay: .4s; }
.musica-ondas-pausadas span {
height: 3px !important;
opacity: .5;
animation: none !important;
}
@keyframes pulsoOnda {
from { height: 3px; }
to { height: 12px; }
}
.perfil-musica-editor {
display: grid;
gap: 10px;
margin: 16px 0 4px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, .1);
border-radius: 14px;
background: rgba(255, 255, 255, .035);
}
.perfil-musica-cab b {
display: block;
color: var(--texto);
font-size: 13px;
line-height: 1.3;
}
.perfil-musica-cab small,
.perfil-musica-switch small {
display: block;
margin-top: 2px;
color: var(--suave);
font-size: 11.5px;
line-height: 1.35;
}
.perfil-musica-switch {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
}
.perfil-musica-switch input {
flex: 0 0 auto;
margin-top: 2px;
accent-color: var(--perfil-accent, #38BDF8);
}
.perfil-musica-switch b {
display: block;
color: var(--texto);
font-size: 12.5px;
}
.perfil-musica-editor .campo { margin: 0; }
@media (prefers-reduced-motion: reduce) {
.musica-ondas-animacion span { height: 6px; animation: none; }
}
@media (max-width: 640px) {
.musica-ambiente-chip {
right: 12px;
bottom: 76px;
padding: 5px 12px;
}
.musica-texto { font-size: 10.5px; }
}
/* ============================================================
Cat�logo comercial con muestra multimedia de YouTube
============================================================ */
.catalogo-media-box {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 8px;
overflow: hidden;
background: #000;
cursor: pointer;
isolation: isolate;
}
.catalogo-producto-card > .catalogo-media-box {
border-radius: 14px 14px 0 0;
}
.catalogo-media-box iframe {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border: none;
display: block;
}
.catalogo-img-portada {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.catalogo-media-host {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.btn-play-catalogo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.85);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
z-index: 3;
}
.btn-play-catalogo:hover {
transform: translate(-50%, -50%) scale(1.1);
background: var(--perfil-accent, #38BDF8);
}
.btn-play-catalogo:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
}
.catalogo-media-box:hover .btn-play-catalogo {
transform: translate(-50%, -50%) scale(1.1);
background: var(--perfil-accent, #38BDF8);
}
.icono-play-svg {
display: block;
width: 20px;
height: 20px;
}
.catalogo-badge-media {
position: absolute;
bottom: 8px;
left: 8px;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
padding: 2px 7px;
font-size: 10.5px;
color: #FFFFFF;
border-radius: 4px;
font-weight: 500;
letter-spacing: 0.3px;
z-index: 2;
pointer-events: none;
}
.catalogo-media-box.reproduciendo { cursor: default; }
.catalogo-video-ayuda {
display: block;
margin: -2px 0 2px;
color: var(--suave, #94a3b8);
font-size: 11.5px;
line-height: 1.4;
}
.catalogo-media-box.reproduciendo .catalogo-badge-media { display: none; }
/* ============================================================
Barra de navegaci�n global: simetr�a y ritmo de c�psulas
============================================================ */
body.social-body .navbar-global {
display: grid;
grid-template-columns: 240px minmax(0, 1fr) 240px;
align-items: center;
height: 54px;
padding: 0 16px;
column-gap: 12px;
box-sizing: border-box;
}
.navbar-seccion-centro {
display: flex;
align-items: center;
justify-content: center;
justify-content: safe center;
justify-self: center;
gap: 8px;
min-width: 0;
max-width: 100%;
margin: 0 auto;
flex-wrap: nowrap;
}
.navbar-seccion-centro .nav-link-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 8px;
height: 36px;
min-height: 36px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: 9999px;
background: transparent;
color: rgba(241, 245, 249, 0.65);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
transform: scale(1);
transform-origin: center;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
will-change: transform;
}
.navbar-seccion-centro .nav-link-btn.activo {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.05);
color: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.navbar-seccion-centro .nav-link-btn:hover:not(.activo) {
background: rgba(255, 255, 255, 0.04);
color: rgba(241, 245, 249, 0.95);
transform: scale(1.03);
}
.navbar-seccion-centro .nav-link-btn.activo:hover {
transform: scale(1.02);
}
.navbar-seccion-centro .nav-link-btn:active {
transform: scale(0.98);
}
.navbar-seccion-centro .nav-link-btn:focus-visible {
outline: 2px solid var(--perfil-accent, #38BDF8);
outline-offset: 2px;
}
.navbar-seccion-centro .nav-link-btn .icono-nav {
width: 18px;
height: 18px;
flex: 0 0 18px;
pointer-events: none;
}
.navbar-seccion-centro .nav-label {
display: inline-block;
line-height: 1;
white-space: nowrap;
}
.navbar-seccion-centro .chat-no-leidos,
.navbar-seccion-centro .nav-badge {
margin-left: 0;
}
@media (max-width: 1199px) {
body.social-body .navbar-global {
grid-template-columns: auto minmax(0, 1fr) auto;
}
}
@media (max-width: 900px) {
.navbar-seccion-centro { gap: 4px; }
.navbar-seccion-centro .nav-link-btn {
padding: 0 10px;
font-size: 12.5px;
}
}
@media (max-width: 768px) {
body.social-body .navbar-global {
grid-template-columns: auto minmax(0, 1fr) auto;
column-gap: 8px;
}
.navbar-seccion-centro .nav-label { display: none; }
.navbar-seccion-centro .nav-link-btn {
width: 36px;
padding: 0;
gap: 0;
}
.navbar-seccion-centro .chat-no-leidos,
.navbar-seccion-centro .nav-badge {
position: absolute;
top: 1px;
right: 1px;
z-index: 2;
margin: 0;
transform: scale(0.82);
transform-origin: top right;
pointer-events: none;
}
}
@media (max-width: 640px) {
body.social-body .navbar-global {
padding: 0 12px;
column-gap: 6px;
}
.navbar-seccion-centro { gap: 3px; }
}
@media (max-width: 480px) {
body.social-body .navbar-global { padding: 0 10px; }
}
/* ============================================================
Selector de emojis para los compositores del feed y del perfil
============================================================ */
.composer-fila,
.perfil-composer-pie {
position: relative;
}
.emoji-picker-wrap {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.btn-compositor-herramienta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 34px;
padding: 0 12px;
border-radius: 8px;
background: var(--perfil-superficie-2, rgba(255, 255, 255, 0.05));
border: 1px solid var(--perfil-borde, rgba(255, 255, 255, 0.1));
color: var(--perfil-texto, var(--feed-texto, #F1F5F9));
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-compositor-herramienta:hover {
background: var(--perfil-acento-tenue, rgba(255, 255, 255, 0.1));
border-color: var(--perfil-accent, #38BDF8);
}
.btn-compositor-herramienta:focus-visible {
outline: 2px solid var(--perfil-accent, #38BDF8);
outline-offset: 2px;
}
.btn-compositor-herramienta .icono-svg-herramienta {
display: block;
width: 18px;
height: 18px;
flex: 0 0 18px;
pointer-events: none;
}
.picker-emojis-flotante {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: 290px;
max-width: calc(100vw - 32px);
box-sizing: border-box;
background: var(--perfil-card-bg, rgba(15, 23, 42, 0.95));
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.14));
border-radius: 12px;
padding: 10px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
z-index: var(--z-cajon, 400);
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
max-height: 190px;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.picker-emojis-categoria {
grid-column: 1 / -1;
padding: 5px 2px 1px;
color: var(--perfil-suave, rgba(241, 245, 249, 0.55));
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.picker-emojis-categoria:first-child {
padding-top: 1px;
}
.item-emoji-btn {
background: transparent;
border: none;
font-size: 20px;
line-height: 1;
padding: 6px 0;
border-radius: 6px;
cursor: pointer;
transition: background .15s ease, transform .15s ease;
display: flex;
align-items: center;
justify-content: center;
}
.item-emoji-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.15);
}
.item-emoji-btn:focus-visible {
outline: 2px solid var(--perfil-accent, #38BDF8);
outline-offset: -2px;
}
@media (max-width: 480px) {
.picker-emojis-flotante {
width: min(290px, calc(100vw - 24px));
max-width: calc(100vw - 24px);
padding: 8px;
gap: 4px;
}
.item-emoji-btn { font-size: 19px; }
}
/* ============================================================
Filtro activo de hashtags del feed
============================================================ */
.feed-filtro-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
margin-bottom: 14px;
background: rgba(56, 189, 248, 0.08);
border: 1px solid var(--perfil-accent, #38BDF8);
border-radius: 10px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: fadeInFiltro 0.2s ease-out;
}
.feed-filtro-info {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
font-size: 13px;
color: var(--feed-texto, #F1F5F9);
}
.feed-filtro-info .filtro-tag-nombre {
color: var(--perfil-accent, #38BDF8);
}
.icono-filtro-svg,
.icono-cerrar-svg {
width: 15px;
height: 15px;
flex-shrink: 0;
}
.btn-quitar-filtro {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
flex: 0 0 auto;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #FFFFFF;
padding: 5px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 11.5px;
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-quitar-filtro:hover {
background: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.4);
color: #FCA5A5;
}
.btn-quitar-filtro:focus-visible {
outline: 2px solid var(--perfil-accent, #38BDF8);
outline-offset: 2px;
}
/* Destacado en la tarjeta de tendencias */
.tendencia-item.tendencia-item-activo {
background: rgba(56, 189, 248, 0.12) !important;
border: 1px solid var(--perfil-accent, #38BDF8) !important;
}
.tendencia-item.tendencia-item-activo .tendencia-tag {
color: #FFFFFF;
font-weight: 700;
}
.tendencia-quitar {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 2px;
color: var(--perfil-accent, #38BDF8);
font-size: 12px;
font-weight: 900;
line-height: 1;
}
.tendencia-item.tendencia-item-activo .tendencia-quitar {
color: #FFFFFF;
}
/* Destacado dentro de los posts */
.hashtag-link.hashtag-activo {
background: rgba(56, 189, 248, 0.2);
border-radius: 4px;
padding: 1px 4px;
text-decoration: underline;
}
.post-tag.hashtag-link.hashtag-activo {
padding: 4px 10px;
border-radius: 999px;
border-color: var(--perfil-accent, #38BDF8);
}
@keyframes fadeInFiltro {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
.feed-filtro-banner {
align-items: stretch;
flex-direction: column;
}
.btn-quitar-filtro { width: 100%; }
}
/* ============================================================
Sistema unificado de notificaciones popup
============================================================ */
#contenedor-notificaciones-popups {
position: fixed;
top: 64px;
right: 20px;
display: flex;
flex-direction: column;
gap: 10px;
z-index: var(--z-aviso, 1000);
pointer-events: none;
max-width: 380px;
width: calc(100% - 40px);
}
.popup-notificacion-toast {
pointer-events: auto;
position: relative;
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--perfil-card-bg, rgba(15, 23, 42, 0.95));
border: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.12));
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 12px;
padding: 12px 14px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
cursor: pointer;
overflow: hidden;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
animation: slideInPopup 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.popup-notificacion-toast:hover {
transform: translateY(-2px);
border-color: var(--perfil-accent, #38BDF8);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.popup-notificacion-toast:focus-visible {
outline: 2px solid var(--perfil-accent, #38BDF8);
outline-offset: 2px;
}
/* Tipos tem�ticos sutiles */
.popup-notificacion-toast.tipo-victoria {
border-color: rgba(251, 191, 36, 0.4);
}
.popup-notificacion-toast.tipo-cumpleanos,
.popup-notificacion-toast.tipo-aniversario {
border-color: rgba(236, 72, 153, 0.35);
}
.popup-notificacion-toast.tipo-participacion {
border-color: rgba(34, 197, 94, 0.38);
}
.popup-notificacion-toast.tipo-mensaje {
border-color: rgba(56, 189, 248, 0.38);
}
.popup-notificacion-toast.tipo-sistema {
border-color: rgba(148, 163, 184, 0.28);
}
.popup-notificacion-toast.tono-error {
border-color: rgba(239, 68, 68, 0.55);
}
.popup-notificacion-toast.tono-exito {
border-color: rgba(34, 197, 94, 0.55);
}
.popup-toast-icono-caja {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--perfil-superficie-2, rgba(255, 255, 255, 0.05));
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
}
.popup-toast-icono-caja img {
width: 100%;
height: 100%;
object-fit: cover;
}
.popup-toast-icono-caja svg {
width: 20px;
height: 20px;
color: var(--perfil-accent, #38BDF8);
}
.popup-notificacion-toast.tipo-victoria .popup-toast-icono-caja svg { color: #FBBF24; }
.popup-notificacion-toast.tipo-cumpleanos .popup-toast-icono-caja svg,
.popup-notificacion-toast.tipo-aniversario .popup-toast-icono-caja svg { color: #F472B6; }
.popup-notificacion-toast.tipo-participacion .popup-toast-icono-caja svg { color: #4ADE80; }
.popup-notificacion-toast.tono-error .popup-toast-icono-caja svg { color: #F87171; }
.popup-notificacion-toast.tono-exito .popup-toast-icono-caja svg { color: #4ADE80; }
.popup-toast-contenido {
flex: 1;
min-width: 0;
}
.popup-toast-cabecera {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 2px;
}
.popup-toast-titulo {
font-size: 13px;
font-weight: 600;
color: var(--perfil-texto, #FFFFFF);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popup-toast-tiempo {
font-size: 11px;
color: var(--perfil-suave, rgba(241, 245, 249, 0.45));
flex: 0 0 auto;
}
.popup-toast-mensaje {
font-size: 12px;
color: var(--perfil-suave, rgba(241, 245, 249, 0.75));
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.popup-toast-acciones {
margin-top: 8px;
display: flex;
}
.btn-popup-accion {
background: var(--perfil-accent, #38BDF8);
color: var(--perfil-acento-texto, #FFFFFF);
border: none;
border-radius: 6px;
padding: 4px 10px;
font-family: inherit;
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s ease;
}
.btn-popup-accion:hover {
opacity: 0.9;
}
.btn-cerrar-popup {
background: transparent;
border: none;
color: var(--perfil-suave, rgba(241, 245, 249, 0.4));
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
transition: color 0.15s ease;
}
.btn-cerrar-popup:hover {
color: var(--perfil-texto, #FFFFFF);
}
/* Barra de progreso inferior */
.popup-toast-progreso {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
background: var(--perfil-accent, #38BDF8);
width: 100%;
pointer-events: none;
animation: barraProgreso 6.5s linear forwards;
}
.popup-notificacion-toast.tipo-victoria .popup-toast-progreso { background: #FBBF24; }
.popup-notificacion-toast.tipo-cumpleanos .popup-toast-progreso,
.popup-notificacion-toast.tipo-aniversario .popup-toast-progreso { background: #F472B6; }
.popup-notificacion-toast.tipo-participacion .popup-toast-progreso { background: #4ADE80; }
.popup-notificacion-toast.tono-error .popup-toast-progreso { background: #F87171; }
.popup-notificacion-toast.tono-exito .popup-toast-progreso { background: #4ADE80; }
.popup-notificacion-toast.pausado .popup-toast-progreso {
animation-play-state: paused;
}
.popup-notificacion-toast.sin-progreso .popup-toast-progreso {
display: none;
}
.popup-notificacion-toast.popup-saliendo {
animation: slideOutPopup 0.24s ease-in forwards;
pointer-events: none;
}
@keyframes slideInPopup {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutPopup {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(30px); }
}
@keyframes barraProgreso {
from { width: 100%; }
to { width: 0%; }
}
/* Modal ligero de dedicatoria abierto desde un popup */
.dedicatoria-popup textarea {
width: 100%;
min-height: 104px;
background: rgba(0, 0, 0, 0.22);
border: 1px solid var(--borde, rgba(255, 255, 255, 0.14));
border-radius: 9px;
padding: 11px 12px;
color: var(--feed-texto, #F1F5F9);
font-family: inherit;
font-size: 13.5px;
line-height: 1.5;
resize: vertical;
box-sizing: border-box;
}
.dedicatoria-popup textarea:focus {
outline: none;
border-color: var(--perfil-accent, #38BDF8);
box-shadow: 0 0 0 1px var(--perfil-accent, #38BDF8);
}
.dedicatoria-popup-contador {
text-align: right;
font-size: 11px;
color: var(--suave, #94A3B8);
margin: 4px 0 10px;
}
@media (max-width: 600px) {
#contenedor-notificaciones-popups {
top: 12px;
right: 10px;
left: 10px;
width: auto;
max-width: none;
}
}
@media (prefers-reduced-motion: reduce) {
.popup-notificacion-toast,
.popup-toast-progreso {
animation: none !important;
}
}
/* El contenedor hist�rico de toasts queda desactivado en el muro: todo pasa por #contenedor-notificaciones-popups. */
#toasts { display: none !important; }
/* ============================================================
Insignia oficial de perfil verificado
============================================================ */
.badge-verificado-oficial {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-left: 4px;
cursor: help;
flex-shrink: 0;
transition: transform 0.2s ease, filter 0.2s ease;
}
.badge-verificado-oficial:hover {
transform: scale(1.15);
filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.6));
}
.icono-verificado-svg {
display: block;
}
/* Sello de verificado: círculo con el color de acento legible sobre la superficie del tema y check del color de esa superficie */
.badge-verificado-acento, .badge-verificado-oficial {
--vf-fondo: var(--perfil-accent-texto, var(--perfil-accent, #1D6FD8));
--vf-check: var(--perfil-superficie, #fff);
color: var(--vf-fondo);
}
.vf-circulo { fill: var(--vf-fondo, #1D6FD8); }
.vf-check { stroke: var(--vf-check, #fff); }
.cabecera-perfil .badge-verificado-oficial,
.perfil-full-nombre .badge-verificado-oficial {
margin-left: 6px;
}
.comentario-autor .badge-verificado-oficial,
.chat-usuario-nombre .badge-verificado-oficial,
.chat-dock-identidad [data-dock-verif] .badge-verificado-oficial {
transform: scale(0.9);
margin-left: 0;
}
.popup-toast-titulo .badge-verificado-oficial,
.aviso-item b .badge-verificado-oficial {
margin-left: 4px;
--vf-fondo: #38BDF8;
--vf-check: #0B1220;
}
.popup-toast-titulo {
display: inline-flex;
align-items: center;
min-width: 0;
}
/* ============================================================
Favoritos del perfil
============================================================ */
.perfil-seccion-favoritos {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--perfil-card-border, rgba(255, 255, 255, 0.08));
}
.favoritos-titulo-cabecera {
display: flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 700;
color: var(--perfil-texto, var(--feed-texto, #F1F5F9));
margin-bottom: 10px;
letter-spacing: 0.3px;
}
.favoritos-icono-svg {
width: 15px;
height: 15px;
color: #FBBF24;
flex-shrink: 0;
}
.favoritos-contador {
margin-left: auto;
color: var(--suave, #94A3B8);
font-size: 10.5px;
font-weight: 600;
}
.favoritos-grid-lista {
display: flex;
flex-direction: column;
gap: 8px;
}
.favorito-item-card {
position: relative;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
background: color-mix(in srgb, var(--perfil-texto, #fff) 3%, transparent);
border: 1px solid color-mix(in srgb, var(--perfil-texto, #fff) 6%, transparent);
border-radius: 10px;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.favorito-item-card:hover {
background: color-mix(in srgb, var(--perfil-texto, #fff) 6%, transparent);
border-color: color-mix(in srgb, var(--perfil-texto, #fff) 12%, transparent);
transform: translateX(2px);
}
.favorito-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
object-fit: cover;
border: 1px solid color-mix(in srgb, var(--perfil-texto, #fff) 10%, transparent);
flex-shrink: 0;
}
.favorito-avatar-inicial {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(56, 189, 248, 0.08));
color: var(--perfil-texto, #E0F2FE);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.4px;
}
.favorito-info {
display: flex;
flex-direction: column;
min-width: 0;
padding-right: 20px;
}
.favorito-linea-nombre {
display: flex;
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
.favorito-nombre {
font-size: 12.5px;
font-weight: 600;
color: var(--perfil-texto, #ffffff);
line-height: 1.2;
}
.favorito-apodo {
font-size: 11.5px;
color: rgba(241, 245, 249, 0.7);
font-style: italic;
}
.favorito-handle {
font-size: 11px;
color: var(--perfil-accent, #38BDF8);
text-decoration: none;
width: fit-content;
}
.favorito-handle:hover {
text-decoration: underline;
}
.favorito-quitar {
position: absolute;
top: 7px;
right: 7px;
border: 0;
background: transparent;
color: var(--suave, #94A3B8);
font-size: 13px;
line-height: 1;
padding: 2px 4px;
cursor: pointer;
border-radius: 5px;
}
.favorito-quitar:hover {
color: #FCA5A5;
background: rgba(239, 68, 68, 0.12);
}
.favoritos-editor {
display: flex;
flex-direction: column;
gap: 5px;
margin-bottom: 10px;
}
.favoritos-buscador {
position: relative;
}
#favBuscar {
width: 100%;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 8px 10px;
color: var(--feed-texto, #F1F5F9);
font: inherit;
font-size: 12px;
outline: none;
}
#favBuscar:focus {
border-color: var(--perfil-accent, #38BDF8);
box-shadow: 0 0 0 1px var(--perfil-accent, #38BDF8);
}
#favBuscar::placeholder {
color: var(--suave, #94A3B8);
}
.favoritos-resultados {
margin-top: 5px;
max-height: 220px;
overflow-y: auto;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 9px;
background: var(--perfil-card-bg, #0F172A);
padding: 4px;
}
.favorito-resultado {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--feed-texto, #F1F5F9);
padding: 6px 7px;
text-align: left;
cursor: pointer;
}
.favorito-resultado:hover {
background: rgba(56, 189, 248, 0.1);
}
.favorito-resultado-avatar {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
font-size: 10px;
}
.favorito-resultado-datos {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.favorito-resultado-datos b {
font-size: 11.5px;
color: var(--perfil-texto, #ffffff);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.favorito-resultado-datos small {
font-size: 10.5px;
color: var(--perfil-accent, #38BDF8);
}
.favorito-resultado-mas {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(56, 189, 248, 0.18);
color: var(--perfil-accent, #38BDF8);
font-weight: 900;
flex-shrink: 0;
}
.favoritos-resultado-vacio,
.favoritos-vacio {
margin: 0;
padding: 6px 4px;
font-size: 11px;
color: var(--suave, #94A3B8);
}
.favoritos-ayuda {
font-size: 10.5px;
color: var(--suave, #94A3B8);
line-height: 1.35;
}
/* ============================================================
COHERENCIA DEL PERFIL CON EL TEMA/PALETA
Las tarjetas, textos e inputs del perfil consumen los mismos tokens que
el feed. El hero conserva su velo oscuro y su texto blanco para que
cualquier fondo (claro u oscuro) siga siendo legible.
============================================================ */
.vista-perfil-full .perfil-glass,
.vista-perfil-full .post,
.vista-perfil-full .post-mini,
.vista-perfil-full .perfil-comunidad-fold > summary,
.vista-perfil-full .perfil-evento-mini,
.vista-perfil-full .evento-card,
.vista-perfil-full .historial-card,
.vista-perfil-full .producto-card,
.vista-perfil-full .premio-card,
.vista-perfil-full .perfil-premio-ganado,
.vista-perfil-full .post-original {
background: var(--tarjeta);
color: var(--texto);
border-color: var(--borde);
}
.vista-perfil-full .perfil-full-hero {
background: color-mix(in srgb, var(--perfil-superficie) 55%, transparent);
border-color: var(--borde);
}
.vista-perfil-full .perfil-glass :is(h1, h2, h3, h4, b, strong),
.vista-perfil-full .post :is(h1, h2, h3, h4, b, strong),
.vista-perfil-full .post-mini :is(b, strong),
.vista-perfil-full .perfil-feed-cab h2,
.vista-perfil-full .perfil-bloque h3,
.vista-perfil-full .vitrina-bloque h3,
.vista-perfil-full .perfil-composer-cab b,
.vista-perfil-full .perfil-full-error b {
color: var(--texto);
}
.vista-perfil-full .perfil-glass p,
.vista-perfil-full .post-texto,
.vista-perfil-full .post-quien small,
.vista-perfil-full .post-accion,
.vista-perfil-full .post-mini-pie,
.vista-perfil-full .perfil-composer-cab small,
.vista-perfil-full .perfil-vacio,
.vista-perfil-full .feed-vacio,
.vista-perfil-full .perfil-dato,
.vista-perfil-full .perfil-glass-cab > span:not(.perfil-glass-linea),
.vista-perfil-full .seguidor-mini span,
.vista-perfil-full .perfil-evento-datos small {
color: var(--perfil-suave);
}
.vista-perfil-full .post-comentario,
.vista-perfil-full .post-original,
.vista-perfil-full .perfil-comunidad-fold > summary,
.vista-perfil-full .seguidor-mini:hover {
background: var(--perfil-superficie-2);
}
.vista-perfil-full .perfil-evento-mini,
.vista-perfil-full .evento-card,
.vista-perfil-full .historial-card,
.vista-perfil-full .producto-card,
.vista-perfil-full .premio-card {
background: var(--perfil-superficie);
}
.social-body .vista-perfil-full .btn.sec {
background: var(--perfil-superficie-2);
color: var(--perfil-texto);
border-color: var(--perfil-borde);
}
.social-body .vista-perfil-full .btn.sec:hover { background: var(--perfil-acento-tenue); }
.social-body .vista-perfil-full .chip,
.social-body .vista-perfil-full .dato-chip {
background: var(--perfil-superficie-2);
border-color: var(--perfil-borde);
color: var(--perfil-texto);
}
.social-body .vista-perfil-full .post-tag {
background: var(--perfil-superficie-2);
border-color: var(--perfil-borde);
color: var(--perfil-texto);
}
.social-body .vista-perfil-full .perfil-rol-chip {
background: var(--perfil-superficie-2) !important;
border-color: var(--perfil-borde) !important;
color: var(--perfil-texto) !important;
}
.social-body .vista-perfil-full .badge-rol-chip {
background: var(--perfil-superficie-2);
border-color: var(--perfil-borde);
color: var(--perfil-texto);
}
.social-body .vista-perfil-full .chip.oro,
.social-body .vista-perfil-full .btn.oro {
background: var(--perfil-accent);
border-color: var(--perfil-accent);
color: var(--perfil-acento-texto) !important;
}
.social-body .vista-perfil-full input,
.social-body .vista-perfil-full textarea,
.social-body .vista-perfil-full select {
background: var(--perfil-superficie-2);
color: var(--perfil-texto);
border-color: var(--perfil-borde);
}
.social-body .vista-perfil-full input::placeholder,
.social-body .vista-perfil-full textarea::placeholder { color: var(--perfil-suave); }
.social-body[data-tema-activo] .btn.peligro { color: var(--mal, #b91c1c); }
/* ============================================================
PLAYLIST DE VIDEOS (solo audio) · tarjetas, botón y reproductor
============================================================ */
.playlist-card { display: grid; gap: 10px; }
.playlist-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.playlist-titulo { display: flex; align-items: center; gap: 9px; min-width: 0; }
.playlist-icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--azul-claro); color: var(--azul); flex: none; }
.playlist-titulo b { display: block; font-size: 14px; color: var(--texto); line-height: 1.2; }
.playlist-titulo small { display: block; margin-top: 2px; color: var(--suave); font-size: 11.5px; }
.playlist-cab .btn { flex: none; min-height: 30px; padding: 4px 10px; font-size: 11.5px; }
/* Botón Reproducir: ocupa todo el ancho de la tarjeta, con aire antes de la lista */
.social-playlist .playlist-cab { margin-bottom: 10px; row-gap: 10px; }
.social-playlist .playlist-cab > .btn[data-playlist-play-all] { flex: 1 1 100%; justify-content: center; min-height: 34px; margin: 0; }
.playlist-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; max-height: 330px; overflow: auto; }
.playlist-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 7px 8px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); min-width: 0; }
.playlist-item.activo { border-color: color-mix(in srgb, var(--perfil-accent, #38BDF8) 60%, var(--borde)); background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 10%, var(--fondo)); }
.playlist-item-play { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); cursor: pointer; }
.playlist-item-play:hover { border-color: var(--azul); color: var(--azul); }
.playlist-item-play .icono-svg { width: 14px; height: 14px; }
.playlist-item-info { min-width: 0; flex: 1 1 84px; display: grid; gap: 1px; }
.playlist-item-info b { font-size: 12px; line-height: 1.25; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-item-info small { font-size: 10.5px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playlist-item-acciones { display: flex; gap: 6px; flex: none; margin-left: auto; }
.playlist-item-acciones button { width: 24px; height: 24px; padding: 0; border: 1px solid var(--borde); border-radius: 7px; background: var(--tarjeta); color: var(--suave); font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.playlist-item-acciones button:hover { color: var(--texto); border-color: var(--azul); }
.playlist-item-acciones button[data-playlist-quitar]:hover { color: var(--mal); border-color: var(--mal); }
.playlist-vacio { margin: 2px 0 0; padding: 12px; border: 1px dashed var(--borde); border-radius: 10px; color: var(--suave); font-size: 12px; line-height: 1.5; text-align: center; }
.playlist-bloqueo { margin: 2px 0 0; padding: 12px; border: 1px dashed var(--borde); border-radius: 10px; color: var(--suave); font-size: 12px; line-height: 1.5; text-align: center; }
.playlist-bloqueo b { color: var(--texto); }
/* Botón debajo de cada video embebido */
.media-playlist-accion { display: flex; justify-content: flex-end; margin-top: 7px; }
.media-playlist-add { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 10px; font-size: 11.5px; }
.media-playlist-add .icono-svg { width: 14px; height: 14px; }
.media-playlist-add.guardado { color: var(--ok); border-color: var(--ok); }
.comentario-cuerpo .media-playlist-accion,
.mensaje-burbuja .media-playlist-accion { margin-top: 4px; }
/* Reproductor fijo */
.playlist-media { position: fixed; left: -4px; bottom: -4px; width: 1px; height: 1px; overflow: hidden; opacity: .01; pointer-events: none; z-index: -1; }
/* Video de la playlist siempre visible (YouTube exige un reproductor visible de al menos 200×200 px) */
.playlist-media.en-tarjeta, .playlist-media.flotante { opacity: 1; pointer-events: auto; z-index: 35; background: #000; border-radius: 12px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
.playlist-media.flotante { left: auto; right: 12px; bottom: calc(var(--tb-player-h, 64px) + var(--tb-footer-h, 34px) + 12px); width: min(356px, calc(100vw - 24px)); height: 200px; }
.playlist-video { display: none; }
.social-playlist .playlist-video { display: grid; }
.playlist-video { flex: 1 1 100%; width: 100%; box-sizing: border-box; aspect-ratio: 16 / 9; min-height: 200px; place-items: center; border-radius: 12px; background: #0b0f17; color: rgba(255, 255, 255, .35); }
.playlist-video .icono-svg { width: 28px; height: 28px; }
.playlist-player {
position: fixed; left: 0; right: 0; bottom: var(--tb-footer-h, 34px); z-index: var(--z-barra, 100);
display: grid; grid-template-columns: minmax(0, 1.25fr) auto; align-items: center;
gap: 8px 18px; padding: 13px clamp(12px, 3vw, 26px) 11px;
background: color-mix(in srgb, var(--tarjeta) 94%, transparent);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-top: 1px solid var(--borde);
box-shadow: 0 -12px 34px rgba(0, 0, 0, .20);
}
.playlist-player.oculto { display: none !important; }
.pp-progreso {
position: absolute; left: 0; right: 0; top: 0; height: 12px;
background: transparent; cursor: pointer; touch-action: none; overflow: visible;
}
.pp-progreso::before {
content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px;
transform: translateY(-50%); background: rgba(128, 128, 128, .22);
}
.pp-progreso span {
position: absolute; left: 0; top: 50%; height: 3px; width: 0;
transform: translateY(-50%); background: var(--perfil-accent, #38BDF8);
transition: width .25s linear;
}
.pp-progreso span::after {
content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px;
border-radius: 50%; background: var(--perfil-accent, #38BDF8);
transform: translateY(-50%); box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
opacity: 0; transition: opacity .15s ease;
}
.pp-progreso.arrastrando span { transition: none; }
.pp-progreso.arrastrando span::after { opacity: 1; }
.pp-progreso:hover span::after,
.pp-progreso:focus-visible span::after { opacity: 1; }
.pp-progreso:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 3px; }
.pp-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-tipo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--azul-claro); color: var(--azul); flex: none; }
.pp-tipo .icono-svg { width: 18px; height: 18px; }
.pp-datos { min-width: 0; display: grid; gap: 1px; }
.pp-datos b { font-size: 12.5px; line-height: 1.25; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-datos small { font-size: 11px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-controles { display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; }
.pp-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--borde); border-radius: 9px; background: var(--tarjeta); color: var(--texto); cursor: pointer; }
.pp-btn:hover { border-color: var(--azul); color: var(--azul); }
.pp-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.pp-btn .icono-svg { width: 16px; height: 16px; }
.pp-btn.activo { background: var(--azul); border-color: var(--azul); color: #fff; }
.pp-btn.pp-play { width: 38px; height: 38px; background: var(--perfil-accent, var(--oro)); border-color: var(--perfil-accent, var(--oro)); color: var(--perfil-acento-texto, #111827); }
.pp-btn.pp-play .icono-svg { width: 17px; height: 17px; }
.pp-vol { display: flex; align-items: center; gap: 3px; padding: 0 2px; }
.pp-vol input { width: 84px; accent-color: var(--perfil-accent, #38BDF8); cursor: pointer; }
.pp-cerrar { color: var(--suave); }
.playlist-panel {
position: fixed; right: 16px; bottom: calc(var(--tb-footer-h, 34px) + var(--tb-player-h, 64px) + 12px); z-index: var(--z-cab, 90);
width: min(370px, calc(100vw - 28px)); max-height: min(62vh, 540px); overflow: auto;
padding: 12px; border: 1px solid var(--borde); border-radius: 16px;
background: var(--tarjeta); box-shadow: 0 18px 50px rgba(0, 0, 0, .30);
}
.playlist-panel.oculto { display: none !important; }
@media (max-width: 768px) {
.playlist-player { bottom: calc(var(--tb-footer-h, 0px) + var(--alto-shell, 62px)); }
.playlist-panel { bottom: calc(var(--tb-footer-h, 0px) + var(--alto-shell, 62px) + var(--tb-player-h, 64px) + 12px); }
body.playlist-activa { padding-bottom: calc(var(--tb-footer-h, 0px) + var(--alto-shell, 62px) + var(--tb-player-h, 64px) + 12px) !important; }
}
body.playlist-activa { padding-bottom: calc(var(--tb-footer-h, 34px) + var(--tb-player-h, 64px) + 12px); }
body.playlist-activa .sos-flotante { bottom: calc(var(--tb-footer-h, 34px) + var(--tb-player-h, 64px) + 10px) !important; }
body.playlist-activa .musica-ambiente-chip { bottom: calc(var(--tb-footer-h, 34px) + var(--tb-player-h, 64px) + 10px); }
@media (max-width: 720px) {
.playlist-player { grid-template-columns: 1fr; gap: 7px; padding: 11px 12px 9px; }
/* Controles en una sola fila: sin barra de volumen (queda el botón de silencio) */
.pp-controles { justify-content: space-between; flex-wrap: nowrap; gap: 3px; width: 100%; }
.pp-vol input { display: none; }
.pp-btn { width: 32px; height: 32px; flex: 0 1 auto; }
.pp-btn.pp-play { width: 38px; height: 38px; }
.playlist-panel { right: 8px; left: 8px; width: auto; }
.playlist-item-info b { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
.pp-progreso span { transition: none; }
}
/* ---------- DesafÃos 1v1 en el chat ---------- */
.chat-desafio {
display: flex; flex-direction: column; gap: 5px;
border: 1px solid var(--oro); border-radius: 14px; padding: 10px 12px;
background: linear-gradient(135deg, rgba(239, 120, 120, .18), rgba(239, 120, 120, .05));
}
.chat-desafio.mio { background: linear-gradient(135deg, rgba(239, 120, 120, .10), rgba(239, 120, 120, .03)); }
.chat-desafio-badge { font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--oro-osc); }
.chat-desafio b { font-size: 15px; }
.chat-desafio small { color: var(--suave); }
.chat-desafio-acciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chat-desafio-acciones .chat-compartido-btn { border: 1px solid var(--oro); cursor: pointer; font: inherit; }
.chat-desafio-tiempo { font-size: 11px; color: var(--suave); font-variant-numeric: tabular-nums; }
.juegos-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.juego-opcion {
position: relative; display: flex; flex-direction: column; gap: 2px;
border: 1px solid var(--borde); border-radius: 12px; padding: 10px;
cursor: pointer; background: var(--tarjeta);
}
.juego-opcion:has(input:checked) { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro) inset; }
.juego-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.juego-opcion span { font-weight: 700; }
.juego-opcion small { color: var(--suave); }
.gemas-paquete.activa { border-color: var(--oro); box-shadow: 0 0 0 1px var(--oro) inset; }
@media (max-width: 560px) { .juegos-opciones { grid-template-columns: 1fr; } }
.pp-btn { position: relative; }
.pp-btn.loop-uno::after {
content: "1"; position: absolute; top: -3px; right: -3px;
min-width: 12px; height: 12px; padding: 0 2px; border-radius: 999px;
background: var(--perfil-accent, #38BDF8); color: #111827;
font-size: 8px; font-weight: 900; line-height: 12px; text-align: center;
}
/* Las ventanas de chat suben por encima del reproductor */
body.playlist-activa #chat-dock-container {
bottom: calc(var(--tb-footer-h, 34px) + var(--tb-player-h, 64px));
}
body.playlist-activa .chat-dock-box {
max-height: calc(100dvh - var(--tb-footer-h, 34px) - var(--tb-player-h, 64px) - 52px);
}
body.playlist-activa .chat-panel {
bottom: calc(var(--tb-footer-h, 34px) + var(--tb-player-h, 64px));
}
/* ---------- Posteo destacado: anuncio de evento nuevo ---------- */
.post.post-destacado {
position: relative;
border-color: color-mix(in srgb, var(--oro) 62%, var(--borde));
background:
linear-gradient(90deg, #ffe0a0, var(--oro) 45%, #c9861f) left top / 5px 100% no-repeat,
linear-gradient(150deg, color-mix(in srgb, var(--oro) 15%, var(--tarjeta)) 0%, var(--tarjeta) 58%);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 24%, transparent),
0 16px 36px color-mix(in srgb, var(--oro) 12%, transparent);
}
.post-destacado-tira {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 12px;
padding: 4px 12px;
border: 1px solid color-mix(in srgb, var(--oro) 60%, transparent);
border-radius: 999px;
background: linear-gradient(135deg, #ffe6ae, var(--oro) 70%, #eaa63f);
color: #2a2210;
font-size: 10.5px;
font-weight: 900;
letter-spacing: .07em;
text-transform: uppercase;
box-shadow: 0 4px 12px color-mix(in srgb, var(--oro) 28%, transparent);
}
.post.post-destacado .post-evento {
border-color: var(--oro);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 30%, transparent);
}
.post.post-destacado .post-evento-btn {
background: linear-gradient(135deg, #ffe0a0, var(--oro) 60%, #eaa63f);
border-color: var(--oro-osc);
box-shadow: 0 8px 20px color-mix(in srgb, var(--oro) 35%, transparent);
}
/* Estructura: en pantalla angosta va en columna; con espacio, la tarjeta del evento pasa al costado. */
.feed { container-type: inline-size; container-name: feed; }
.post-destacado-cuerpo { display: flex; flex-direction: column; }
.post-destacado-main { min-width: 0; display: flex; flex-direction: column; }
.post-acciones-desktop { display: none; }
@container feed (min-width: 620px) {
.post-destacado-cuerpo {
flex-direction: row;
align-items: stretch;
gap: 20px;
}
.post-destacado-main {
flex: 1 1 auto;
/* El bloque de texto se corre un poco hacia el centro del post. */
padding-inline: 14px 8px;
}
.post-destacado-cuerpo > .post-evento {
flex: 0 0 clamp(272px, 37%, 350px);
margin-top: 0;
display: flex;
flex-direction: column;
}
.post-destacado-cuerpo > .post-evento .post-evento-btn { margin-top: auto; }
/* Las reacciones cierran la columna del texto; la tarjeta ocupa la derecha. */
.post-acciones-desktop { display: flex; margin-top: auto; }
.post-acciones-movil { display: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
.post.post-destacado { animation: brilloDestacado 4.5s ease-in-out infinite; }
@keyframes brilloDestacado {
0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 24%, transparent), 0 16px 36px color-mix(in srgb, var(--oro) 12%, transparent); }
50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--oro) 40%, transparent), 0 20px 44px color-mix(in srgb, var(--oro) 22%, transparent); }
}
}
/* En las portadas con tema, el muro fuerza su propia superficie: el marco dorado se repite acá. */
.social-layout .post.post-destacado {
border-color: var(--perfil-acento-borde, rgba(239, 120, 120, .6)) !important;
background:
linear-gradient(90deg, #ffe0a0, var(--oro) 45%, #c9861f) left top / 5px 100% no-repeat,
linear-gradient(150deg, var(--perfil-acento-tenue, rgba(120, 83, 20, .34)) 0%, var(--perfil-superficie, rgba(15, 23, 42, .78)) 62%) !important;
box-shadow: 0 0 0 1px var(--perfil-acento-borde, rgba(239, 120, 120, .35)),
0 16px 36px rgba(0, 0, 0, .4) !important;
}
.social-layout .post.post-destacado .post-evento-btn {
background: linear-gradient(135deg, #ffe0a0, var(--oro) 60%, #eaa63f) !important;
border-color: var(--oro-osc) !important;
color: #2a2210 !important;
}
/* ---------- Top 100 populares (columna derecha) ---------- */
.populares-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.popular-fila { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: transparent; border: 0; padding: 5px 4px; border-radius: 8px; cursor: pointer; color: inherit; font: inherit; }
.popular-fila:hover, .popular-fila:focus-visible { background: rgba(0, 0, 0, .05); }
.popular-puesto { width: 20px; flex: none; text-align: right; font-weight: 700; font-size: 12.5px; color: var(--suave); }
.popular-datos { min-width: 0; display: flex; flex-direction: column; }
.popular-datos b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popular-datos small { font-size: 11px; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.popular-verif { color: #1b7f4b; font-weight: 800; }
/* ---------- Cuenta oficial (Eikove.App) ---------- */
.rol-oficial { background: #e8f0fb; color: #1a1a1a; border: 1px solid #bfd3ee; }
.post-oficial { box-shadow: inset 3px 0 0 #ef7878; }
.post-oficial .handle { color: #1a1a1a; font-weight: 600; }
.badge-oficial { background: #e8f0fb; color: #1a1a1a; border: 1px solid #bfd3ee; }
.perfil-chip.perfil-rol-chip.oficial { background: rgba(239, 120, 120, .10); color: #1a1a1a; border-color: rgba(239, 120, 120, .25); }
.rol-empresa { background: #e7f4f4; color: #0f4c4c; border: 1px solid #b9dede; }
.badge-empresa { background: #e7f4f4; color: #0f4c4c; border: 1px solid #b9dede; }
.perfil-chip.perfil-rol-chip.empresa { background: rgba(15, 76, 76, .10); color: #0f4c4c; border-color: rgba(15, 76, 76, .25); }
/* ---------- Tribuna: juegos en vivo e invitaciones abiertas ----------
El feed recibe `juegosEnVivo` con la primera página; no hay posteos reales ni escrituras
en disco. La tarjeta de invitación se intercala como una publicación más y desaparece
cuando la mesa se llena, arranca o el anfitrión cierra la invitación. */
.juegos-vivo-lista { display: flex; flex-direction: column; gap: 8px; }
.juego-vivo-fila {
display: flex; align-items: center; gap: 10px; padding: 10px 12px;
border: 1px solid var(--borde, rgba(255, 255, 255, .12)); border-radius: 14px;
background: var(--tarjeta, rgba(15, 23, 42, .6)); color: inherit; text-decoration: none;
transition: border-color .15s ease, transform .15s ease;
}
.juego-vivo-fila:hover, .juego-vivo-fila:focus-visible {
border-color: var(--oro, #f49797); transform: translateY(-1px);
}
.juego-vivo-icono { font-size: 22px; line-height: 1; }
.juego-vivo-datos { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.juego-vivo-datos b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juego-vivo-datos small { font-size: 11.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juego-vivo-ver {
font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px;
border: 1px solid var(--borde, rgba(255, 255, 255, .18)); white-space: nowrap;
}
.juego-vivo-fila:hover .juego-vivo-ver { border-color: var(--oro, #f49797); color: var(--oro, #f49797); }
.juegos-vivo-bloque .muro-cab { align-items: baseline; }
.juegos-vivo-bloque .juegos-vivo-lista { padding: 0 2px; }
.post-invitacion-juego { border: 1px solid rgba(239, 120, 120, .38); }
.post-invitacion-juego::before {
content: 'INVITACIÓN ABIERTA'; display: inline-block; margin-bottom: 8px;
font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
color: var(--oro, #f49797); opacity: .9;
}
.inv-juego-cab { display: flex; align-items: center; gap: 12px; }
.inv-juego-icono { font-size: 30px; line-height: 1; }
.inv-juego-cab b { display: block; font-size: 14.5px; line-height: 1.35; }
.inv-juego-cab small { display: block; margin-top: 2px; }
.inv-juego-jugadores { margin: 10px 0 0; font-size: 13px; opacity: .9; }
.inv-juego-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.inv-juego-acciones .btn { min-height: 40px; }
.post-invitacion-juego .ayuda { margin: 8px 0 0; }
.juegos-vivo-movil {
display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px;
padding: 10px; border: 1px solid var(--borde, rgba(255, 255, 255, .12));
border-radius: 14px; background: var(--tarjeta, rgba(15, 23, 42, .6));
}
.juegos-vivo-movil .juegos-vivo-cab { font-size: 13px; font-weight: 800; }
@media (max-width: 860px) {
.inv-juego-acciones .btn { flex: 1 1 100%; }
.juego-vivo-fila { padding: 10px; }
}
@media (min-width: 861px) { .juegos-vivo-movil { display: none !important; } }
/* ---------- Fase 4: invitación gamer y post de victoria ---------- */
/* La invitación deja de ser una nota: es una tarjeta de mesa con asientos, pozo y cuenta atrás. */
.post-invitacion-juego {
border: 1px solid rgba(255, 209, 102, .45) !important;
background:
radial-gradient(120% 120% at 12% 0%, rgba(255, 209, 102, .16), transparent 55%),
radial-gradient(120% 120% at 90% 100%, rgba(34, 211, 238, .12), transparent 60%),
var(--tarjeta, rgba(15, 23, 42, .72));
box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .03);
overflow: hidden;
}
.post-invitacion-juego::before { content: none !important; }
.inv-juego-marco { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.inv-juego-brillo {
position: absolute; inset: -40% -10% auto; height: 120px;
background: radial-gradient(closest-side, rgba(255, 209, 102, .35), transparent 70%);
pointer-events: none; filter: blur(6px);
}
.inv-juego-cab { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; position: relative; }
.inv-juego-icono {
font-size: 34px; line-height: 1; width: 54px; height: 54px;
display: grid; place-items: center; border-radius: 16px;
background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 209, 102, .35);
box-shadow: 0 0 18px rgba(255, 209, 102, .18);
}
.inv-juego-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inv-juego-ribbon {
font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
color: #ffd166;
}
.inv-juego-titulo b { font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-juego-titulo small { font-size: 12px; }
.inv-juego-pozo {
font-weight: 800; font-size: 14px; color: #ffd166; white-space: nowrap;
background: rgba(255, 209, 102, .12); border: 1px solid rgba(255, 209, 102, .35);
padding: 4px 10px; border-radius: 999px;
}
.inv-juego-asientos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inv-asiento {
width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
font-size: 14px; font-weight: 800; border: 1px dashed rgba(255, 255, 255, .28);
color: rgba(255, 255, 255, .55);
}
.inv-asiento.ocupado {
border: 1px solid rgba(255, 209, 102, .55); color: #fff;
background: linear-gradient(160deg, rgba(255, 209, 102, .28), rgba(34, 211, 238, .18));
box-shadow: inset 0 0 10px rgba(255, 255, 255, .08);
}
.inv-juego-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; opacity: .92; }
.inv-juego-cierra { color: #ffd166; }
.inv-juego-acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-juego-acciones .btn { min-height: 42px; }
.inv-juego-nota { margin: 0; font-size: 11.5px; opacity: .7; }
@media (max-width: 860px) {
.inv-juego-cab { grid-template-columns: auto 1fr; }
.inv-juego-pozo { grid-column: 1 / -1; justify-self: start; }
.inv-juego-acciones .btn { flex: 1 1 100%; }
}
/* Acentos por familia de juego (sólo color, el arte es el icono). */
.post-invitacion-juego[data-motor="uno"] .inv-juego-icono { border-color: rgba(239, 68, 68, .6); box-shadow: 0 0 18px rgba(239, 68, 68, .25); }
.post-invitacion-juego[data-motor="ludo"] .inv-juego-icono { border-color: rgba(96, 165, 250, .6); box-shadow: 0 0 18px rgba(96, 165, 250, .25); }
.post-invitacion-juego[data-motor="kart"] .inv-juego-icono { border-color: rgba(251, 146, 60, .65); box-shadow: 0 0 18px rgba(251, 146, 60, .28); }
.post-invitacion-juego[data-motor="ahorcado"] .inv-juego-icono { border-color: rgba(167, 139, 250, .6); box-shadow: 0 0 18px rgba(167, 139, 250, .25); }
.post-invitacion-juego[data-motor="pingpong"] .inv-juego-icono { border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 18px rgba(34, 211, 238, .28); }
/* Post de victoria: tarjeta dorada con el resultado sellado por el servidor. */
.post-juego { border-left: 3px solid #ffd166 !important; }
.post-juego-card {
margin: 6px 0 2px; border-radius: 14px; padding: 10px 12px;
border: 1px solid rgba(255, 209, 102, .4);
background:
radial-gradient(120% 140% at 0% 0%, rgba(255, 209, 102, .18), transparent 60%),
rgba(15, 23, 42, .55);
}
.post-juego-top { display: flex; align-items: center; gap: 10px; }
.post-juego-icono {
width: 44px; height: 44px; display: grid; place-items: center; font-size: 26px;
border-radius: 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 209, 102, .4);
}
.post-juego-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.post-juego-datos small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #ffd166; font-weight: 800; }
.post-juego-datos b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-juego-pozo { font-weight: 900; color: #ffd166; font-size: 15px; white-space: nowrap; }
.post-juego-linea { margin: 8px 0 0; font-size: 13.5px; }
.post-juego-fecha { opacity: .65; font-size: 11.5px; }
/* Aviso de victoria dentro de la sala. */
.victoria-sala {
display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
margin: 0 0 8px; padding: 10px 12px; border-radius: 12px;
border: 1px solid rgba(255, 209, 102, .45);
background: linear-gradient(120deg, rgba(255, 209, 102, .16), rgba(15, 23, 42, .5));
}
.victoria-cab { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 180px; }
.victoria-cab b { font-size: 14px; }
.victoria-cab .suave { font-size: 12px; }
.victoria-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.victoria-check { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; }
.victoria-preview {
display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px;
border: 1px dashed rgba(255, 209, 102, .4); border-radius: 10px; font-size: 12.5px;
}
.victoria-preview-icono { font-size: 24px; }
.victoria-preview div { display: flex; flex-direction: column; }
.victoria-preview small { opacity: .8; }
@media (max-width: 640px) {
.victoria-acciones { width: 100%; }
.victoria-acciones .btn, .victoria-acciones a { flex: 1 1 100%; text-align: center; }
}
/* ---------- Top Jugadores (Fase 4) ---------- */
.social-top-jugadores .top-jugadores-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.top-jugador {
display: flex; align-items: center; gap: 8px; padding: 6px 8px;
border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px;
background: rgba(255, 255, 255, .03);
}
.top-jugador:first-child { border-color: rgba(255, 209, 102, .45); background: linear-gradient(120deg, rgba(255, 209, 102, .12), rgba(255, 255, 255, .02)); }
.top-puesto { width: 26px; text-align: center; font-weight: 900; font-size: 15px; color: rgba(255, 255, 255, .6); flex: 0 0 auto; }
.top-puesto.medalla { font-size: 20px; }
.top-avatar {
width: 40px; height: 40px; border-radius: 50%; overflow: hidden; padding: 0;
border: 1px solid rgba(255, 255, 255, .18); background: transparent; cursor: pointer; flex: 0 0 auto;
}
.top-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.top-datos { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.top-nombre {
border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: inherit;
display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; min-width: 0;
}
.top-nombre b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.top-nombre small { font-size: 11.5px; opacity: .7; }
.top-verificado { color: #38bdf8; font-size: 11px; }
.top-victorias { font-size: 11.5px; color: #ffd166; font-weight: 700; }
.top-yo { font-size: 10.5px; }
.top-siguiendo { font-size: 11.5px; opacity: .7; white-space: nowrap; }
.top-seguir { min-height: 34px; padding: 4px 10px; white-space: nowrap; }
.top-jugador-vacio { font-size: 12.5px; line-height: 1.4; }
@media (max-width: 860px) {
.social-top-jugadores .top-jugadores-lista { gap: 4px; }
}
/* Top Jugadores: ajustes de ancho para que no se corte la victoria */
.top-jugador { gap: 6px; padding: 6px; }
.top-avatar { width: 36px; height: 36px; }
.top-victorias { white-space: nowrap; }
.top-nombre { flex-wrap: nowrap; }
.top-nombre b { font-size: 13px; }
.top-nombre small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-seguir { padding: 4px 8px; min-height: 32px; font-size: 12px; }
/* Top Jugadores: dos líneas compactas (nombre / handle + victorias) */
.top-datos { gap: 1px; }
.top-meta { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.top-meta small { opacity: .72; }
.top-victorias { font-size: 11.5px; }
.top-nombre { display: block; min-width: 0; }
.top-nombre b { font-size: 13.5px; }
/* Top Jugadores: acción en la primera línea y datos en la segunda */
.top-fila1 { display: flex; align-items: center; gap: 6px; justify-content: space-between; min-width: 0; }
.top-fila1 .top-nombre { min-width: 0; flex: 1; overflow: hidden; }
.top-fila1 .top-nombre b { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.top-seguir { flex: 0 0 auto; }
/* Atajos del panel Explorar (Descubrir y Tienda) */
.atajos-explorar { display: flex; flex-wrap: wrap; gap: 8px; }
.atajos-explorar .btn { flex: 1 1 auto; }
/* Los docks de mensajes no tapan la barra inferior. */
@media (max-width: 768px) {
#chat-dock-container { bottom: calc(32px + var(--alto-shell, 62px)); }
}
/* ---------- Canje con Gemas en el ABM de catálogo ---------- */
.catalogo-canje { margin-top: 12px; padding: 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--azul-claro); display: grid; gap: 10px; }
.catalogo-canje-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.catalogo-canje-cab h3 { margin: 0; font-size: 15px; }
.catalogo-puntos { display: grid; gap: 8px; }
.catalogo-puntos-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 800; }
.catalogo-punto-fila { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 6px; align-items: center; }
.catalogo-punto-fila input { min-height: 38px; padding: 6px 9px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 12.5px; background: var(--tarjeta); color: var(--texto); min-width: 0; }
@media (max-width: 640px) {
.catalogo-punto-fila { grid-template-columns: 1fr 1fr; }
.catalogo-punto-fila [data-p="horario"] { grid-column: 1 / -1; }
.catalogo-punto-fila .btn { grid-column: 1 / -1; justify-self: start; }
}
/* =====================================================================
PULIDO MOVIL — PASO 3
Tabs limpias, riel de historias compacto, compositor en hoja y
cabecera minimalista. Capa final: gana sobre las reglas del tema.
===================================================================== */
.social-layout .feed-tabs {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 22px;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
align-self: stretch;
}
.social-layout .feed-tab {
position: relative;
flex: 0 0 auto;
border: 0;
background: transparent !important;
color: #8E8E93 !important;
font: inherit;
font-size: 14px;
font-weight: 500;
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 12px 0 11px;
border-radius: 0;
cursor: pointer;
}
.social-layout .feed-tab:hover { background: transparent !important; color: #A0AEC0 !important; }
.social-layout .feed-tab.activo {
background: transparent !important;
color: var(--texto, #fff) !important;
font-weight: 800;
}
.social-layout .feed-tab.activo::after {
content: '';
position: absolute;
left: 50%;
bottom: 2px;
width: 22px;
height: 2px;
border-radius: 2px;
background: currentColor;
transform: translateX(-50%);
}
.feed-tab .punto-vivo {
display: inline-block;
width: 6px;
height: 6px;
margin-right: 6px;
border-radius: 50%;
background: #e53935;
vertical-align: middle;
}
/* Riel de historias */
.muro-burbujas-rail { padding: 0; margin: -2px 0 0; }
.muro-burbujas-rail[hidden] { display: none !important; }
.muro-burbujas-rail .muro-burbujas-pista {
display: flex;
gap: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
padding: 0 2px 4px;
scrollbar-width: none;
}
.muro-burbujas-rail .muro-burbujas-pista::-webkit-scrollbar { display: none; }
.muro-burbujas-rail .muro-burbuja { flex: 0 0 70px; gap: 3px; }
.muro-burbujas-rail .muro-burbuja-aro { width: 58px; height: 58px; padding: 2px; }
.muro-burbujas-rail .muro-burbuja-aro .avatar { --tam: 50px; border-width: 2px; }
.muro-burbujas-rail .muro-burbuja b {
display: block;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10.5px;
line-height: 1.2;
}
.muro-burbujas-rail .muro-burbuja small { font-size: 9px; letter-spacing: .04em; }
/* Cápsula del compositor */
.composer-capsula {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 40px;
min-height: 40px;
padding: 0 14px 0 6px;
border: 1px solid var(--borde);
border-radius: 999px;
background: var(--tarjeta);
box-shadow: var(--sombra);
color: #8E8E93;
font: inherit;
font-size: 13.5px;
text-align: left;
cursor: pointer;
}
.composer-capsula:hover { border-color: color-mix(in srgb, var(--azul-3) 40%, var(--borde)); }
.composer-capsula:focus-visible { outline: 2px solid var(--azul-3); outline-offset: 2px; }
.composer-capsula-avatar {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: none;
overflow: hidden;
border-radius: 50%;
background: var(--azul-claro);
}
.composer-capsula-avatar .avatar { --tam: 30px; }
.composer-capsula-texto {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #8E8E93;
}
.composer-host { display: none !important; }
/* Hoja del compositor */
.composer-velo {
position: fixed;
inset: 0;
z-index: calc(var(--z-hoja, 500) - 1);
background: rgba(2, 8, 18, .55);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.composer-hoja {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-hoja, 500);
max-height: 92dvh;
overflow-y: auto;
padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
border-radius: 20px 20px 0 0;
background: var(--tarjeta);
box-shadow: 0 -20px 50px rgba(0, 0, 0, .35);
animation: composer-sube .22s ease-out;
}
.composer-hoja[hidden] { display: none !important; }
.composer-hoja-cab {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 2px 0 10px;
background: var(--tarjeta);
}
.composer-hoja-cab h2 { margin: 0; font-size: 17px; }
.composer-hoja-x {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--texto);
font: inherit;
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.composer-hoja .composer { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.composer-hoja .composer-cab { gap: 12px; }
.composer-hoja .composer-avatar .avatar { --tam: 38px; }
.composer-hoja .composer textarea { min-height: 130px; font-size: 16px; }
.composer-hoja .composer-preview { margin-left: 0; }
.composer-hoja .composer-fila { gap: 8px; padding-top: 10px; border-top: 1px solid var(--borde); }
.composer-hoja .estado-pildora { min-height: 40px; background: transparent; border-style: dashed; font-weight: 600; }
.composer-hoja .estado-pildora:focus-visible { outline-offset: 1px; }
.composer-hoja .composer-fila #contador { margin-left: auto; }
.composer-hoja .composer-fila #btnPublicar { flex: 0 0 auto; min-width: 104px; }
/* Opciones avanzadas */
.composer-avanzado-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 10px 0 0;
padding: 6px 0;
border: 0;
background: none;
color: var(--suave);
font: inherit;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
}
.composer-avanzado-toggle .chev { font-size: 11px; opacity: .8; }
.composer-avanzado {
display: grid;
gap: 8px;
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid var(--borde);
}
.composer-avanzado .evento-input { width: 100%; max-width: none; }
.composer-avanzado .composer-ayuda { margin: 0; }
.composer-avanzado .btn { justify-self: start; }
body.compositor-abierto { overflow: hidden; }
@keyframes composer-sube {
from { transform: translateY(28px); opacity: .35; }
to { transform: none; opacity: 1; }
}
@media (min-width: 769px) {
.composer-hoja {
left: 0;
right: 0;
width: min(560px, 92vw);
margin: 0 auto;
bottom: 24px;
border-radius: 20px;
max-height: 86dvh;
}
}
@media (prefers-reduced-motion: reduce) {
.composer-hoja { animation: none; }
}
/* Cabecera minimalista en móvil */
@media (max-width: 768px) {
body.social-body .superapp-acciones > [data-tema-boton],
body.social-body .superapp-acciones > #btnAvisos,
body.social-body .superapp-acciones > #sosCab,
body.social-body .superapp-acciones > .gemas-chip { display: none !important; }
body.social-body .superapp-centro [data-nav="grupos"] { display: none; }
body.social-body .superapp-centro { justify-content: center; }
body.social-body .superapp-acciones { gap: 6px; }
body.social-body .superapp-perfil b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
body.social-body #perfilCabHandle { display: none; }
body.social-body .feed-tabs { gap: 18px; }
body.social-body .feed-tab { font-size: 13.5px; }
body.social-body .composer-capsula { height: 40px; }
}
/* =====================================================================
PULIDO MOVIL — PASO 3.1
Riel de sugerencias tipo historias (compacto) y detalles tactiles.
===================================================================== */
.composer-capsula-avatar:empty::after {
content: '';
width: 16px;
height: 16px;
background: currentColor;
opacity: .55;
-webkit-mask: no-repeat center/16px 16px url("data:image/svg+xml;utf8,");
mask: no-repeat center/16px 16px url("data:image/svg+xml;utf8,");
}
/* ============================================================
FICHA DE PERFIL — acabado app (hero, métricas y pestañas)
Todo el bloque vive dentro de `.perfil-tk` (la ficha), así que
no toca otras vistas del muro. Móvil primero; en escritorio se
conserva la rejilla de tres columnas de siempre.
Tokens: la ficha ya fuerza texto claro sobre fondo oscuro, por
eso los rellenos usan blanco translúcido y `--perfil-accent`.
============================================================ */
.perfil-tk { --tk-linea: rgba(255, 255, 255, .10); --tk-tenue: rgba(226, 236, 252, .58); }
/* ---------- Cabecera ---------- */
.perfil-tk-hero {
position: relative;
isolation: isolate;
overflow: hidden;
display: grid;
gap: 11px;
padding: 13px 13px 12px;
border: 1px solid var(--tk-linea);
border-radius: 22px;
background:
radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--perfil-accent, #f49797) 18%, transparent), transparent 62%),
linear-gradient(160deg, rgba(26, 40, 66, .95) 0%, rgba(9, 15, 28, .96) 100%);
box-shadow: 0 18px 44px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.perfil-tk-hero > * { position: relative; z-index: 1; }
/* Con `display: contents` en móvil los botones de acciones no son hijos directos: sin esto quedan bajo el velo de la portada. */
.perfil-tk-hero .perfil-tk-acciones > * { position: relative; z-index: 1; }
.perfil-tk-portada {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .30;
pointer-events: none;
}
.perfil-tk-hero.con-portada::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(160deg, rgba(9, 15, 28, .62) 0%, rgba(9, 15, 28, .90) 78%);
pointer-events: none;
}
.perfil-tk-top { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.perfil-tk-datos { flex: 1 1 auto; min-width: 0; }
.perfil-tk-nombre { display: flex; align-items: center; gap: 6px; min-width: 0; }
.perfil-tk-nombre h1 {
margin: 0;
font-size: 19px;
font-weight: 900;
line-height: 1.2;
letter-spacing: -.015em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.perfil-tk-nombre > svg,
.perfil-tk-nombre > span > svg { width: 17px; height: 17px; flex: 0 0 auto; }
.perfil-tk-handle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.perfil-tk-alias {
font-size: 12.5px;
font-weight: 700;
color: rgba(226, 236, 252, .62);
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.perfil-tk-apodo { margin-top: 5px; font-size: 12.5px; font-style: italic; color: rgba(226, 236, 252, .74); }
.perfil-tk-bio {
margin: 7px 0 0;
font-size: 12.5px;
line-height: 1.42;
color: rgba(226, 236, 252, .86);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.perfil-tk-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
margin-top: 7px;
font-size: 11.5px;
color: var(--tk-tenue);
}
.perfil-tk-meta b { color: #eef4ff; font-weight: 800; font-variant-numeric: tabular-nums; }
.perfil-tk-meta .perfil-cumple {
position: static;
transform: none;
padding: 2px 7px;
font-size: 10px;
}
/* Avatar con anillo, a la derecha (como en las apps sociales) */
.perfil-tk-lado {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.perfil-tk-avatar {
position: relative;
display: grid;
place-items: center;
width: 84px;
height: 84px;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.perfil-tk-anillo {
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 200deg, #f49797, #ff7a59 30%, #7c5cff 62%, #35d0ba 82%, #f49797);
opacity: .95;
}
.perfil-tk-avatar .avatar {
--tam: 76px;
position: relative;
width: 76px;
height: 76px;
border: 3px solid #0c1524;
box-shadow: none;
}
.perfil-tk-avatar.jugador .perfil-tk-anillo {
background: conic-gradient(from 200deg, #93c5fd, #5b8def 40%, #a78bfa 72%, #93c5fd);
opacity: .75;
}
.perfil-tk-gear {
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border-radius: 50%;
border: 1px solid var(--tk-linea);
background: rgba(255, 255, 255, .07);
color: rgba(238, 244, 255, .86);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.perfil-tk-gear svg { width: 16px; height: 16px; }
/* ---------- Métricas ---------- */
.perfil-tk-metricas {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: 2px;
padding: 8px 0 2px;
border-top: 1px solid rgba(255, 255, 255, .08);
}
.perfil-tk-met {
display: grid;
gap: 1px;
justify-items: center;
min-width: 0;
padding: 2px 0;
border: 0;
border-radius: 12px;
background: none;
color: inherit;
font: inherit;
text-align: center;
}
button.perfil-tk-met { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.perfil-tk-met:hover { background: rgba(255, 255, 255, .06); }
.perfil-tk-met b {
font-size: 16px;
font-weight: 900;
line-height: 1.15;
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.perfil-tk-met > span:last-child {
font-size: 10px;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
color: var(--tk-tenue);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.perfil-tk-met > svg { width: 15px; height: 15px; color: #f8c37a; margin-bottom: -1px; }
.perfil-tk-met.gemas b { color: #f8c37a; }
/* El rótulo es siempre el último span (en gemas el primero envuelve icono + número). */
.perfil-tk-met-num {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
min-width: 0;
max-width: 100%;
}
.perfil-tk-met-num svg { width: 13px; height: 13px; color: #f8c37a; opacity: .85; flex: 0 0 auto; }
/* Aviso de perfil público (visitante sin sesión): una línea, borde de 1px y CTA discreta. */
.perfil-tk-publico {
display: flex;
align-items: center;
gap: 8px;
margin: 10px 0 0;
padding: 9px 12px;
border: 1px solid var(--tk-linea);
border-radius: 14px;
background: rgba(255, 255, 255, .03);
color: var(--tk-tenue);
font-size: 11.5px;
line-height: 1.35;
}
.perfil-tk-publico span { flex: 1 1 auto; min-width: 0; }
.perfil-tk-publico b { color: #eef4ff; font-weight: 800; }
.perfil-tk-publico a {
flex: 0 0 auto;
padding: 6px 11px;
border-radius: 999px;
border: 1px solid rgba(248, 195, 122, .42);
color: #f8c37a;
font-size: 11px;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
}
/* ---------- Victorias 1v1 (sólo lectura, desde los posteos de juego) ---------- */
.perfil-tk-victorias { margin: 12px 0 2px; }
.perfil-tk-victorias > header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 7px; }
.perfil-tk-victorias > header b { font-size: 12.5px; letter-spacing: .02em; }
.perfil-tk-victorias > header span { font-size: 11px; color: var(--tk-tenue); font-variant-numeric: tabular-nums; }
.perfil-tk-victorias-fila {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.perfil-tk-victorias-fila::-webkit-scrollbar { display: none; }
.perfil-tk-victoria {
flex: 0 0 auto;
display: grid;
gap: 2px;
width: 134px;
padding: 9px 10px;
border: 1px solid var(--tk-linea);
border-radius: 14px;
background: rgba(255, 255, 255, .03);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
scroll-snap-align: start;
-webkit-tap-highlight-color: transparent;
}
.perfil-tk-victoria:active { background: rgba(255, 255, 255, .07); }
.perfil-tk-victoria-ico { font-size: 15px; line-height: 1; }
.perfil-tk-victoria-juego { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-tk-victoria-pozo { font-size: 12px; font-weight: 900; color: #f8c37a; font-variant-numeric: tabular-nums; }
.perfil-tk-victoria small { font-size: 10px; color: var(--tk-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ---------- Reacciones y acciones ---------- */
.perfil-tk-reacciones { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.perfil-tk-acciones { display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; }
.perfil-tk-acciones .btn {
min-height: 38px;
border-radius: 999px;
font-size: 12.5px;
padding: 7px 14px;
}
.perfil-tk-acciones .perfil-tk-primario { order: 1; flex: 1 1 100%; font-weight: 900; }
.perfil-tk-acciones .perfil-tk-sec { order: 2; flex: 0 1 auto; }
.perfil-tk-acciones .btn svg { width: 15px; height: 15px; }
.perfil-tk-acciones .chip { align-self: center; }
/* El disparador del cajón de secciones deja de flotar sobre el contenido:
pasa a ser un chip más de la fila de acciones (sólo en pantalla angosta,
que es donde existe el cajón). */
@media (max-width: 900px) {
.perfil-tk-acciones .perfil-secciones-btn.en-fila {
display: inline-flex;
position: static;
z-index: auto;
order: 3;
align-items: center;
gap: 6px;
min-height: 38px;
padding: 7px 14px;
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 999px;
background: rgba(255, 255, 255, .08);
box-shadow: none;
color: #eef4ff;
font-size: 12.5px;
font-weight: 800;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.perfil-tk-acciones .perfil-secciones-btn.en-fila span { font-size: 14px; }
}
/* ---------- Pestañas con cápsula deslizante ---------- */
.perfil-tk-tabs {
position: relative;
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
margin: 11px 0 8px;
padding: 3px;
border: 1px solid var(--tk-linea);
border-radius: 14px;
background: rgba(255, 255, 255, .055);
overflow: hidden;
}
.perfil-tk-capsula {
position: absolute;
top: 3px;
left: 3px;
width: calc((100% - 6px) / var(--n, 2));
height: calc(100% - 6px);
border-radius: 11px;
background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .10));
box-shadow: 0 2px 10px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
transform: translateX(calc(var(--i, 0) * 100%));
transition: transform .26s cubic-bezier(.32, .9, .28, 1);
pointer-events: none;
}
.perfil-tk-tab {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
min-width: 0;
min-height: 36px;
padding: 0 4px;
border: 0;
border-radius: 11px;
background: transparent;
color: rgba(226, 236, 252, .62);
font: inherit;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.perfil-tk-tab.activa { color: #fff; }
.perfil-tk-tab.destacada { color: #fde68a; }
.perfil-tk-punto {
width: 6px;
height: 6px;
flex: 0 0 auto;
border-radius: 50%;
background: var(--perfil-accent, #f49797);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--perfil-accent, #f49797) 26%, transparent);
}
.perfil-tk-panel { display: block; }
/* ---------- Mosaico de fotos (sólo móvil) ---------- */
.perfil-tk-mosaico {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3px;
margin: 0 0 10px;
}
.perfil-tk-mini {
position: relative;
display: block;
aspect-ratio: 1 / 1;
padding: 0;
border: 0;
border-radius: 4px;
overflow: hidden;
background: rgba(255, 255, 255, .06);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.perfil-tk-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-tk-mini::after {
content: "";
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
border-radius: inherit;
}
/* ---------- Paneles: boletas, canjes y catálogo ---------- */
.perfil-tk-vacio {
display: grid;
gap: 6px;
justify-items: center;
padding: 22px 16px;
border: 1px dashed rgba(255, 255, 255, .14);
border-radius: 16px;
background: rgba(255, 255, 255, .03);
text-align: center;
}
.perfil-tk-vacio b { font-size: 13.5px; }
.perfil-tk-vacio p { margin: 0; max-width: 34ch; font-size: 12px; line-height: 1.45; color: var(--tk-tenue); }
.perfil-tk-cta { margin-top: 4px; border-radius: 999px; min-height: 38px; font-size: 12.5px; }
.perfil-tk-acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.perfil-tk-resumen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.perfil-tk-resumen > div {
display: grid;
gap: 2px;
padding: 10px 12px;
border: 1px solid var(--tk-linea);
border-radius: 14px;
background: rgba(255, 255, 255, .05);
}
.perfil-tk-resumen b { font-size: 19px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.perfil-tk-resumen span {
font-size: 10px;
font-weight: 800;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--tk-tenue);
}
.perfil-tk-boletas-evento {
padding: 11px 12px;
border: 1px solid var(--tk-linea);
border-radius: 15px;
background: rgba(255, 255, 255, .045);
}
.perfil-tk-boletas-evento + .perfil-tk-boletas-evento { margin-top: 8px; }
.perfil-tk-boletas-evento header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 8px;
}
.perfil-tk-boletas-evento header > div { display: grid; min-width: 0; }
.perfil-tk-boletas-evento b {
font-size: 13px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.perfil-tk-boletas-evento small { font-size: 11px; color: var(--tk-tenue); }
.perfil-tk-boletas-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-tk-boleta {
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
padding: 5px 9px;
border: 1px solid rgba(255, 255, 255, .12);
border-radius: 999px;
background: rgba(255, 255, 255, .06);
font-family: var(--mono);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .02em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.perfil-tk-boleta i {
font-style: normal;
font-family: var(--fuente);
font-size: 9.5px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
color: #fbbf24;
}
.perfil-tk-billetera {
display: grid;
gap: 3px;
margin-bottom: 10px;
padding: 14px 15px;
border: 1px solid rgba(255, 255, 255, .09);
border-radius: 18px;
background:
radial-gradient(120% 150% at 100% 0%, rgba(239, 120, 120, .20), transparent 58%),
radial-gradient(90% 120% at 0% 100%, rgba(239, 120, 120, .55), transparent 60%),
linear-gradient(158deg, #17243c 0%, #0b1424 100%);
box-shadow: 0 14px 30px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .06);
color: #eef4ff;
}
.perfil-tk-billetera > span {
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(226, 236, 252, .6);
}
.perfil-tk-billetera > b { font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.perfil-tk-billetera > small { font-size: 11.5px; color: rgba(226, 236, 252, .58); }
.perfil-tk-canjes { display: grid; gap: 8px; }
.perfil-tk-canje {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--tk-linea);
border-radius: 14px;
background: rgba(255, 255, 255, .045);
}
.perfil-tk-canje > div { display: grid; min-width: 0; }
.perfil-tk-canje b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-tk-canje small { font-size: 11px; color: var(--tk-tenue); }
.perfil-tk-canje > span { font-size: 11.5px; font-weight: 800; color: #f8c37a; white-space: nowrap; }
/* ---------- Ajustes del perfil (modal) ---------- */
.perfil-ajustes { display: grid; gap: 8px; }
.perfil-ajuste {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
min-height: 56px;
padding: 10px 12px;
border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--texto) 4%, transparent);
color: var(--texto);
font: inherit;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.perfil-ajuste:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.perfil-ajuste-ico {
display: grid;
place-items: center;
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 10px;
background: color-mix(in srgb, var(--texto) 8%, transparent);
}
.perfil-ajuste-ico svg { width: 17px; height: 17px; }
.perfil-ajuste-txt { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.perfil-ajuste-txt b { font-size: 13.5px; }
.perfil-ajuste-txt small { font-size: 11.5px; line-height: 1.35; color: var(--suave); }
.perfil-ajuste > svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--suave); transform: rotate(-90deg); }
.perfil-ajuste.peligro .perfil-ajuste-txt b { color: var(--mal); }
.perfil-ajustes-nota { display: flex; gap: 7px; margin: 12px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--suave); }
.perfil-ajustes-nota svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 1px; }
/* ---------- Pantalla angosta ---------- */
@media (max-width: 860px) {
.perfil-tk { padding: 8px 8px calc(26px + var(--alto-shell, 0px)); }
.perfil-tk-hero { border-radius: 18px; }
.perfil-tk-lado { gap: 6px; }
.perfil-tk-avatar { width: 78px; height: 78px; }
.perfil-tk-avatar .avatar { --tam: 70px; width: 70px; height: 70px; }
.perfil-tk-tabs { position: sticky; top: 56px; z-index: var(--z-sticky, 20); backdrop-filter: blur(10px); }
}
@media (max-width: 380px) {
.perfil-tk-nombre h1 { font-size: 17.5px; }
.perfil-tk-avatar { width: 72px; height: 72px; }
.perfil-tk-avatar .avatar { --tam: 64px; width: 64px; height: 64px; }
.perfil-tk-met b { font-size: 15px; }
.perfil-tk-met > span:last-child { font-size: 9.5px; }
.perfil-tk-tab { font-size: 11.5px; }
}
/* ---------- Escritorio: la ficha vuelve a su rejilla ---------- */
@media (min-width: 861px) {
.perfil-tk-mosaico { display: none; }
.perfil-tk-hero { max-width: 920px; margin: 0 auto; }
.perfil-tk-tabs { max-width: 920px; margin: 14px auto 4px; }
/* En escritorio la fila de métricas no se estira a todo el ancho: columnas cortas y alineadas
a la izquierda, como el resto de la cabecera. */
.perfil-tk-metricas {
grid-template-columns: repeat(4, minmax(0, 96px));
justify-content: start;
column-gap: 18px;
}
.perfil-tk-acciones .perfil-tk-primario { flex: 0 0 auto; min-width: 168px; }
.perfil-tk-acciones .btn { min-height: 40px; font-size: 13px; }
}
/* =====================================================================
PULIDO VISUAL — ritmo vertical, alineaciones y desbordes
Capa final: solo ajusta espaciado y alineación, no cambia colores de tema.
===================================================================== */
/* Ritmo vertical: el gap de la columna ya separa las tarjetas; la regla global
`.tarjeta + .tarjeta` sumaba otros 16 px (30–32 px entre tarjetas, desparejo). */
.social-col > .tarjeta + .tarjeta { margin-top: 0; }
.social-izq, .social-centro, .social-der { gap: 16px; }
/* Biografías: respetan los saltos de línea que escribió la persona (el servidor los conserva
con bioLimpia(); antes los borraba y quedaba «…Productor MusicalSiempre aprendiendo»). */
.perfil-bio, .perfil-publico-bio, .perfil-tk-bio { white-space: pre-line; }
/* «Comunidad»: pasos en lista alineada (círculo | texto) en vez de una fila que se
parte dejando «Publicá» huérfano. Los nodos de texto sueltos son celdas anónimas de la grilla. */
.social-mini .mini-pasos {
display: grid; grid-template-columns: 22px minmax(0, 1fr);
column-gap: 10px; row-gap: 8px; align-items: center;
margin-top: 14px; line-height: 1.3;
}
.social-mini .mini-pasos span { flex: none; }
/* Top 100 / Top Jugadores: nada se sale de la tarjeta (los datos largos se cortan con «…»). */
.populares-lista { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.populares-lista > li { min-width: 0; }
.popular-fila { min-width: 0; overflow: hidden; padding: 6px 8px; margin-inline: -8px; width: calc(100% + 16px); }
.popular-datos { flex: 1 1 auto; gap: 1px; }
.popular-puesto { width: 18px; font-variant-numeric: tabular-nums; }
.social-top-jugadores .top-jugadores-lista > li, .top-jugador { min-width: 0; }
/* Pestañas del muro (escritorio): al hacer scroll quedan pegadas bajo la cabecera (clase .pegado,
que pone social.js) sobre una banda translúcida con desenfoque; antes eran transparentes y el
contenido se veía por debajo. En reposo conservan su aspecto limpio de siempre. */
@media (min-width: 901px) {
.social-layout .feed-tabs {
top: 54px;
margin-top: -8px;
padding: 8px 4px 0 !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transition: background-color .2s ease, border-color .2s ease;
}
.social-layout .feed-tabs.pegado {
background: rgba(243, 245, 249, .88) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
border-bottom: 1px solid rgba(15, 23, 42, .1) !important;
}
html[data-tema="oscuro"] .social-layout .feed-tabs.pegado {
background: rgba(9, 14, 27, .84) !important;
border-bottom-color: rgba(255, 255, 255, .08) !important;
}
}
/* Tipografía y respiro parejos entre tarjetas (textos vacíos y descripciones a un mismo tamaño). */
.social-mini > p.suave,
.social-populares .populares-lista > li.suave,
.social-juegos-vivo .juegos-vivo-lista > .suave,
.social-juegos-vivo .juegos-vivo-lista > p,
.social-playlist .playlist-vacio,
.tendencias .tendencias-lista > .suave { font-size: 13px; line-height: 1.5; }
.popular-datos small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
/* Pasos de «Comunidad»: número legible sobre el círculo en modo oscuro. */
html[data-tema="oscuro"] .social-mini .mini-pasos span { color: #0b1220; }
/* Filas del muro (Jugadores populares, etc.): mismo padding que las demás tarjetas y
separación entre el título y el carrusel (solo escritorio; el móvil conserva su riel limpio). */
@media (min-width: 769px) {
.muro-fila { padding: 18px 18px 16px; }
.muro-fila > .muro-cab { margin-bottom: 12px; }
.muro-fila-pista { padding: 2px 2px 8px; }
}
/* =====================================================================
PULIDO VISUAL — PERFIL (escritorio)
La cabecera nació para móvil (letra de 12 px, 920 px de ancho centrado) y en escritorio
quedaba chica y desalineada con las tres columnas de abajo. Ahora ocupa el mismo ancho que
la rejilla, con la foto a la izquierda, la identidad al lado y las métricas en una banda.
===================================================================== */
@media (min-width: 861px) {
.perfil-tk-hero {
max-width: none; margin: 0;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 24px; row-gap: 16px;
padding: 22px 28px 20px;
border-radius: 22px;
}
.perfil-tk-top { grid-column: 1 / -1; grid-row: 1; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 32px; padding-right: 48px; }
.perfil-tk-datos { flex: 0 1 780px; }
.perfil-tk-lado { gap: 0; }
.perfil-tk-avatar { width: 176px; height: 176px; }
.perfil-tk-avatar .avatar { --tam: 164px; width: 164px; height: 164px; border-width: 5px; font-size: 56px; }
.perfil-tk-avatar { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .38)); }
.perfil-tk-gear { position: absolute; top: 0; right: 0; width: 38px; height: 38px; }
.perfil-tk-gear svg { width: 18px; height: 18px; }
.perfil-tk-nombre { gap: 8px; }
.perfil-tk-nombre h1 { font-size: 28px; letter-spacing: -.02em; }
.perfil-tk-handle { margin-top: 4px; gap: 8px; }
.perfil-tk-alias { font-size: 14.5px; }
.perfil-tk-apodo { font-size: 14px; margin-top: 6px; }
.perfil-tk-bio { margin-top: 10px; font-size: 14.5px; line-height: 1.5; max-width: 68ch; -webkit-line-clamp: 4; white-space: pre-line; }
.perfil-tk-meta { margin-top: 10px; font-size: 13px; gap: 4px 16px; }
/* Métricas: banda de cuatro celdas iguales con divisores finos. */
.perfil-tk-metricas {
grid-column: 1 / -1; grid-row: 2;
grid-template-columns: repeat(4, minmax(0, 1fr));
justify-content: stretch; column-gap: 0;
padding: 12px 0;
border-top: 1px solid var(--tk-linea);
border-bottom: 1px solid var(--tk-linea);
}
.perfil-tk-met { padding: 2px 12px; gap: 3px; border-radius: 10px; }
.perfil-tk-met + .perfil-tk-met { border-left: 1px solid var(--tk-linea); border-radius: 0 10px 10px 0; }
.perfil-tk-met b { font-size: 22px; letter-spacing: -.01em; }
.perfil-tk-met > span:last-child { font-size: 11px; letter-spacing: .06em; }
.perfil-tk-met-num svg { width: 16px; height: 16px; }
/* Reacciones abajo a la derecha de la identidad; acciones y estado en una misma fila. */
.perfil-tk-reacciones { grid-column: 1 / -1; grid-row: 1; justify-self: end; align-self: end; padding-right: 0; }
.perfil-tk-acciones { grid-column: 1; grid-row: 3; align-items: center; gap: 10px; }
.perfil-tk-hero > .estado-pildora-wrap { grid-column: 2; grid-row: 3; align-self: center; justify-self: end; width: auto; padding: 0; }
.perfil-tk-acciones .btn { min-height: 40px; padding-inline: 18px; font-size: 13.5px; }
/* Pestañas: control segmentado a la medida del contenido, alineado a la izquierda de la rejilla. */
.perfil-tk-tabs { max-width: 460px; margin: 14px 0 2px; }
.perfil-tk-tab { min-height: 40px; font-size: 13px; }
/* «Acerca de» no repite la biografía que ya está en la cabecera. */
.perfil-tk:has(.perfil-tk-bio) .perfil-acerca > p:first-of-type { display: none; }
}
/* Perfil — tarjetas laterales: cabecera del catálogo en una sola línea y textos de ayuda alineados. */
.catalogo-cab-titulo { width: 100%; flex-wrap: wrap; gap: 6px 8px; }
.catalogo-cab-titulo h2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.catalogo-cab-titulo h2 svg { width: 17px; height: 17px; flex: none; }
.catalogo-cab-titulo .chip { margin-left: auto; flex: none; padding: 2px 8px; font-size: 11px; white-space: nowrap; }
.favoritos-ayuda, .favoritos-vacio { font-size: 11.5px; line-height: 1.45; padding: 0; margin: 0; }
.favoritos-vacio { margin-top: 8px; }
/* Bajo cada video: el enlace «Ver video en…» a la izquierda y «Guardar en Playlist» a la derecha,
en una sola fila (antes ocupaban dos filas y dejaban un hueco). */
.media-embed-pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.media-embed-pie .media-embed-fallback { margin: 0; }
.media-embed-pie .media-playlist-accion { margin: 0 0 0 auto; }
.perfil-glass-cab h2 { display: flex; align-items: center; gap: 8px; }
.perfil-glass-cab h2 > svg { width: 17px; height: 17px; flex: none; }
@media (min-width: 861px) and (max-width: 1240px) {
.perfil-tk-hero > .estado-pildora-wrap { grid-column: 1 / -1; grid-row: 4; justify-self: start; }
}
/* ==========================================================================
PERFIL EN CELULAR — DIVULGACIÓN PROGRESIVA (Progressive Disclosure)
Lo esencial a la vista; bio completa, acciones extra, compositor y tarjetas
laterales se abren a pedido. Escritorio no cambia: los elementos auxiliares
(Más, Ver más) sólo existen visibles dentro de este media query.
========================================================================== */
.perfil-tk-mas-btn, .perfil-tk-bio-mas { display: none; }
@media (max-width: 860px) {
/* Cabecera más baja */
.perfil-tk-hero { padding-bottom: 12px; }
.perfil-tk-avatar { width: 66px; height: 66px; }
.perfil-tk-avatar .avatar { --tam: 60px; width: 60px; height: 60px; font-size: 22px; border-width: 3px; }
.perfil-tk-bio.recortada {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.perfil-tk-bio-mas {
display: inline-block; margin: 2px 0 0; padding: 4px 0; background: none; border: 0;
color: var(--acento, #f5b942); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
/* Una sola fila de acciones: principal + Secciones + Más */
.perfil-tk-acciones { gap: 6px; }
.perfil-tk-acciones .perfil-tk-primario { order: 1; flex: 1 1 0; min-width: 0; }
.perfil-tk-acciones .perfil-secciones-btn.en-fila { order: 2; flex: 0 0 auto; padding: 7px 12px; }
.perfil-tk-acciones .perfil-tk-mas-btn {
display: inline-flex; order: 3; flex: 0 0 auto; align-items: center; gap: 5px; min-height: 38px; padding: 7px 12px;
border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .08);
color: inherit; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.perfil-tk-acciones .perfil-tk-mas-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .16); }
.perfil-tk-acciones .perfil-tk-sec { order: 4; flex: 1 1 calc(50% - 3px); justify-content: center; }
.perfil-tk-acciones:not(.abierto) .perfil-tk-sec,
.perfil-tk-acciones:not(.abierto) .chip { display: none !important; }
/* Compositor: barra compacta, se despliega al tocar */
.perfil-composer:not(.abierta) #perfilComposer { display: none; }
.perfil-composer .perfil-composer-cab { cursor: pointer; margin-bottom: 0; align-items: center; }
.perfil-composer:not(.abierta) .perfil-composer-cab small { display: none; }
.perfil-composer .perfil-composer-cab::after {
content: "›"; margin-left: auto; font-size: 22px; line-height: 1; transform: rotate(90deg); transition: transform .2s; opacity: .7;
}
.perfil-composer.abierta .perfil-composer-cab::after { transform: rotate(-90deg); }
.perfil-composer:not(.abierta) { padding-top: 10px; padding-bottom: 10px; }
.perfil-composer.abierta .perfil-composer-cab { margin-bottom: 10px; }
/* Tarjetas laterales como acordeón */
.acordeon-mov:not(.abierta) > :not(:first-child) { display: none !important; }
.acordeon-mov > .acordeon-cab { cursor: pointer; margin-bottom: 0; align-items: center; }
.acordeon-mov.abierta > .acordeon-cab { margin-bottom: 12px; }
.acordeon-mov > .acordeon-cab::after {
content: "›"; flex: 0 0 auto; margin-left: 8px; font-size: 22px; line-height: 1; transform: rotate(90deg); transition: transform .2s; opacity: .7;
}
.acordeon-mov.abierta > .acordeon-cab::after { transform: rotate(-90deg); }
.acordeon-mov:not(.abierta) { padding-top: 12px; padding-bottom: 12px; min-height: 0 !important; height: auto; }
.acordeon-mov > .acordeon-cab { flex-wrap: nowrap !important; min-width: 0; }
.acordeon-mov > .acordeon-cab > :first-child { min-width: 0; }
.perfil-feed-eyebrow { display: none; }
}
/* Divulgación progresiva: formulario de producto (esencial arriba, el resto en ) */
.form-catalogo .rejilla.una-col { grid-template-columns: 1fr; }
.form-catalogo .tb-avanzado { margin: 2px 0; }
/* Detalles técnicos de una publicación (menú ···) */
.detalles-post { margin: 0 0 14px; display: grid; gap: 8px; }
.detalles-post .detalle-fila { display: grid; grid-template-columns: 96px 1fr; gap: 8px; font-size: 13px; }
.detalles-post dt { color: var(--suave); font-weight: 700; }
.detalles-post dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* ==========================================================================
PERFIL (escritorio) — VERSIÓN LIVIANA Y COMPACTA
Foto de 112 px, métricas en una cuadrícula 2×2 a la derecha (ya no una banda de ancho completo),
acciones y estado en una sola fila. La cabecera pasa de ~365 px a ~210 px de alto.
========================================================================== */
@media (min-width: 861px) {
.perfil-tk-hero {
grid-template-columns: minmax(0, 1fr) minmax(252px, 340px);
column-gap: 28px; row-gap: 12px;
padding: 18px 24px 16px; border-radius: 18px;
}
.perfil-tk-top { grid-column: 1; grid-row: 1; gap: 20px; padding-right: 0; align-items: flex-start; }
.perfil-tk-datos { flex: 1 1 auto; min-width: 0; }
.perfil-tk-avatar { width: 112px; height: 112px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .3)); }
.perfil-tk-avatar .avatar { --tam: 104px; width: 104px; height: 104px; border-width: 3px; font-size: 38px; }
.perfil-tk-gear { top: 14px; right: 16px; width: 32px; height: 32px; }
.perfil-tk-gear svg { width: 16px; height: 16px; }
.perfil-tk-nombre h1 { font-size: 22px; }
.perfil-tk-handle { margin-top: 2px; }
.perfil-tk-alias { font-size: 13px; }
.perfil-tk-apodo { font-size: 13px; margin-top: 4px; }
.perfil-tk-bio { margin-top: 6px; font-size: 13.5px; line-height: 1.45; -webkit-line-clamp: 3; }
.perfil-tk-meta { margin-top: 6px; font-size: 12px; gap: 2px 14px; }
.perfil-tk-metricas {
grid-column: 2; grid-row: 1; align-self: end; justify-self: end;
grid-auto-flow: row; grid-template-columns: repeat(2, minmax(108px, 1fr));
justify-content: stretch; column-gap: 6px; row-gap: 6px; width: 252px;
padding: 0; border: 0;
}
.perfil-tk-met, .perfil-tk-met + .perfil-tk-met {
padding: 7px 10px; gap: 1px; border: 1px solid var(--tk-linea); border-radius: 12px;
background: rgba(255, 255, 255, .035);
}
.perfil-tk-met b { font-size: 18px; }
.perfil-tk-met > span:last-child { font-size: 9.5px; letter-spacing: .07em; }
.perfil-tk-met-num svg { width: 14px; height: 14px; }
/* Reacciones en la columna de métricas (no sobre el nombre, que puede ser largo). */
.perfil-tk-reacciones { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; justify-content: flex-end; max-width: 252px; margin-top: 44px; }
.perfil-tk-acciones { grid-column: 1; grid-row: 2; gap: 8px; }
.perfil-tk-hero > .estado-pildora-wrap { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; min-width: 0; max-width: 100%; }
.perfil-tk-hero > .estado-pildora-wrap .estado-pildora { max-width: 100%; min-width: 0; }
.perfil-tk-acciones .btn { min-height: 34px; padding-inline: 14px; font-size: 12.5px; }
.perfil-tk-acciones .btn svg { width: 14px; height: 14px; }
.perfil-tk-tabs { max-width: 400px; margin: 10px 0 0; }
.perfil-tk-tab { min-height: 34px; font-size: 12.5px; }
/* Composer y tarjetas, menos pesados */
.perfil-composer textarea { min-height: 56px; }
.perfil-composer { padding-block: 12px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
.perfil-tk-metricas { width: 210px; grid-template-columns: repeat(2, minmax(90px, 1fr)); }
}
/* Oficios/servicios: en escritorio viven en la cabecera (aprovecha el hueco) y no se repiten en «Acerca de»;
en celular quedan sólo dentro de «Acerca de» (divulgación progresiva). */
.perfil-tk-tags { display: none; }
@media (min-width: 861px) {
.perfil-tk-tags { display: block; }
.perfil-tk-tags:empty { display: none; }
.perfil-tk-tags .perfil-etiquetas-contenedor { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.perfil-tk-tags .perfil-etiqueta-chip { font-size: 11.5px; padding: 3px 10px; }
.perfil-tk:has(.perfil-tk-tags .perfil-etiquetas-contenedor) .perfil-acerca > .perfil-etiquetas-contenedor { display: none; }
}
/* Perfil en celular: aún más liviano (menos alto de botones, métricas y estado) */
@media (max-width: 860px) {
.perfil-tk-hero { padding: 14px 14px 12px; }
.perfil-tk-nombre h1 { font-size: 19px; }
.perfil-tk-met b { font-size: 16px; }
.perfil-tk-met > span:last-child { font-size: 9.5px; }
.perfil-tk-metricas { padding-top: 6px; }
.perfil-tk-acciones .btn, .perfil-tk-acciones .perfil-tk-mas-btn { min-height: 36px; padding-block: 5px; font-size: 12.5px; }
.perfil-tk-hero > .estado-pildora-wrap .btn, .perfil-tk-hero > .estado-pildora-wrap button { min-height: 32px; padding-block: 4px; font-size: 12px; }
.perfil-tk-tabs { margin: 8px 0 6px; }
.perfil-tk-tab { min-height: 34px; }
}
/* Perfil en celular — «Más» comparte fila con el estado; Editar perfil y Secciones viven dentro de «Más».
(En perfiles ajenos el botón principal —Seguir— queda a la vista, en lugar del estado.) */
@media (max-width: 860px) {
.perfil-tk-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 8px; }
.perfil-tk-hero > * { grid-column: 1 / -1; }
.perfil-tk-acciones { display: contents; }
.perfil-tk-hero > .estado-pildora-wrap { grid-column: 1; order: 10; min-width: 0; width: auto; padding: 0; }
.perfil-tk-hero > .estado-pildora-wrap > * { width: 100%; }
.perfil-tk-acciones .perfil-tk-mas-btn { grid-column: 2; order: 11; min-height: 32px; padding: 4px 14px; justify-self: end; align-self: center; }
.perfil-tk-acciones .perfil-tk-primario:not(#btnEditarDesdePerfil) { grid-column: 1; order: 10; min-height: 36px; }
/* Contenido de «Más»: filas a todo el ancho, debajo */
.perfil-tk-acciones #btnEditarDesdePerfil,
.perfil-tk-acciones .perfil-secciones-btn.en-fila,
.perfil-tk-acciones .perfil-tk-sec { grid-column: 1 / -1; order: 12; justify-content: center; }
.perfil-tk-acciones:not(.abierto) #btnEditarDesdePerfil,
.perfil-tk-acciones:not(.abierto) .perfil-secciones-btn.en-fila { display: none !important; }
}
/* Iniciales del avatar centradas en ambos ejes. La caja de línea incluye hueco para descendentes y,
según la tipografía (Segoe UI, SF, Roboto…), desplazaba las mayúsculas unos píxeles. `text-box`
recorta la caja a la altura de las mayúsculas y `align-content` la centra dentro del círculo
(Chrome 133+, Safari 18.2+, Firefox reciente). En navegadores viejos se conserva el centrado flex. */
@supports (text-box: trim-both cap alphabetic) and (align-content: center) {
.avatar:not(:has(img)) {
display: inline-block;
vertical-align: middle;
align-content: center;
text-align: center;
text-box: trim-both cap alphabetic;
line-height: 1;
letter-spacing: 0;
padding: 0;
}
}
/* Perfil ajeno (sin gemas): tres métricas en una sola fila, no 2 + 1 */
@media (min-width: 861px) {
.perfil-tk-metricas:not(:has([data-gemas-chip])) { grid-template-columns: repeat(3, minmax(88px, 1fr)); width: 330px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
.perfil-tk-metricas:not(:has([data-gemas-chip])) { width: 270px; grid-template-columns: repeat(3, minmax(72px, 1fr)); }
}
/* Vitrina del organizador en celular: productos y premios en carrusel horizontal (con 4 + 6 tarjetas apiladas
la ficha medía más de 2.600 px). Cada tarjeta se ajusta al deslizar. */
@media (max-width: 860px) {
.perfil-org-vitrina .productos-grid,
.perfil-org-vitrina .premios-grid {
display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scrollbar-width: none;
margin-inline: -4px; padding: 2px 4px 6px;
}
.perfil-org-vitrina .productos-grid::-webkit-scrollbar,
.perfil-org-vitrina .premios-grid::-webkit-scrollbar { display: none; }
.perfil-org-vitrina .producto-card,
.perfil-org-vitrina .premio-card { flex: 0 0 min(72%, 260px); scroll-snap-align: start; }
.perfil-org-vitrina .producto-card img { height: 104px; }
.perfil-org-vitrina .premio-card img { height: 92px; }
}
/* ==========================================================================
Estados completos + columna lateral del perfil (escritorio)
========================================================================== */
/* El estado nunca se recorta con «…»: el texto baja a otra línea. */
.estado-pildora { align-items: flex-start; border-radius: 16px; text-align: left; }
.estado-pildora-texto { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.estado-pildora-icono, .estado-pildora-editar { margin-top: 1px; }
.avatar-estado-globo {
white-space: normal; align-items: flex-start; border-radius: 14px;
width: max-content; max-width: min(320px, calc(100vw - 72px)); line-height: 1.3;
}
.globo-texto { overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.post.post-con-estado { padding-top: 54px; }
@media (max-width: 560px) {
.avatar-estado-globo { width: max-content; max-width: calc(100vw - 72px); padding: 3px 9px; font-size: 10.5px; }
}
/* Contenedor lateral: en celular es transparente (la rejilla existente sigue igual). */
.perfil-tk-der { display: contents; }
@media (min-width: 861px) {
.perfil-tk-der {
display: flex; flex-direction: column; gap: 10px;
grid-column: 2; grid-row: 1; align-self: stretch; justify-content: space-between; min-width: 0;
}
.perfil-tk-der > .perfil-tk-reacciones { order: 1; margin: 0; align-self: flex-end; justify-content: flex-end; max-width: 100%; }
.perfil-tk-der > .perfil-tk-tags { order: 2; margin: 0; }
.perfil-tk-der > .perfil-tk-tags .perfil-etiquetas-contenedor { margin: 0; justify-content: flex-end; }
.perfil-tk-der > .perfil-tk-metricas { order: 3; align-self: flex-end; }
.perfil-tk-hero > .estado-pildora-wrap { align-self: start; }
}
/* Pantallas anchas: columna lateral más ancha y las cuatro métricas en una fila. */
@media (min-width: 1180px) {
.perfil-tk-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
.perfil-tk-der > .perfil-tk-metricas,
.perfil-tk-der > .perfil-tk-metricas:not(:has([data-gemas-chip])) {
width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.perfil-tk-der > .perfil-tk-metricas:not(:has([data-gemas-chip])) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Celular: el contenedor lateral es transparente; sus hijos se colocan en la rejilla de la ficha.
Las reacciones comparten fila con «Más» y el estado ocupa todo el ancho (se lee completo). */
@media (max-width: 860px) {
.perfil-tk-der > * { grid-column: 1 / -1; position: relative; z-index: 1; }
.perfil-tk-hero:has(.estado-pildora-wrap) .perfil-tk-der > .perfil-tk-reacciones { grid-column: 1; order: 9; align-self: center; }
.perfil-tk-hero:has(.estado-pildora-wrap) .perfil-tk-acciones .perfil-tk-mas-btn { order: 9; grid-column: 2; }
.perfil-tk-hero > .estado-pildora-wrap { grid-column: 1 / -1; order: 10; }
}
/* Nombre largo: hasta dos líneas (antes se cortaba con «…»). */
.perfil-tk-nombre { align-items: flex-start; }
.perfil-tk-nombre h1 {
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
white-space: normal; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2;
}
@media (max-width: 460px) { .perfil-tk-nombre h1 { font-size: 17px; } }
/* Sello de cuenta verificada sobre el borde superior de la foto de perfil. */
.perfil-tk-sello {
position: absolute; top: 14.6%; right: 14.6%; transform: translate(50%, -50%); z-index: 3;
display: grid; place-items: center; line-height: 0; pointer-events: none;
}
.perfil-tk-sello .badge-verificado-acento { filter: drop-shadow(0 0 0 2px #0b1220) drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.perfil-tk-sello .icono-verificado-svg { width: 28px; height: 28px; }
@media (max-width: 860px) { .perfil-tk-sello .icono-verificado-svg { width: 24px; height: 24px; } }
@media (min-width: 861px) { .perfil-tk-sello .icono-verificado-svg { width: 25px; height: 25px; } }
/* ==========================================================================
PERFIL ESTILO X — portada arriba, foto superpuesta, acciones a la derecha de la foto,
contadores en una línea de texto y pestañas subrayadas. Conserva marca y temas propios.
Capa final: usa !important sólo para ganarle a las reglas de colocación anteriores.
========================================================================== */
.perfil-tk-hero.perfil-x {
--x-av: 88px; --x-banner: 112px; --x-pad: 16px;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: auto auto auto auto auto auto;
column-gap: 0 !important; row-gap: 0 !important;
max-width: none !important; margin: 0 !important; padding: 0 !important;
border-radius: 18px !important; overflow: hidden;
}
.perfil-x.con-portada::after { display: none !important; }
.perfil-x > .perfil-tk-portada {
position: static !important; grid-column: 1 / -1 !important; grid-row: 1 !important;
width: 100%; height: var(--x-banner); object-fit: cover; opacity: 1 !important; z-index: 0 !important;
display: block;
}
.perfil-x > .perfil-tk-portada.vacia {
background:
radial-gradient(90% 140% at 85% 0%, color-mix(in srgb, var(--perfil-accent, #f49797) 55%, transparent), transparent 70%),
linear-gradient(135deg, color-mix(in srgb, var(--perfil-accent, #f49797) 28%, #0b1220), #0b1220 80%);
}
/* El contenedor de identidad y el de columna lateral se vuelven transparentes para la rejilla. */
.perfil-x > .perfil-tk-top, .perfil-x .perfil-tk-lado, .perfil-x > .perfil-tk-der { display: contents !important; }
.perfil-x .perfil-tk-avatar {
grid-column: 1 !important; grid-row: 2 !important; align-self: start; justify-self: start;
width: var(--x-av) !important; height: var(--x-av) !important;
margin: calc(var(--x-av) / -2) 0 0 var(--x-pad); z-index: 3 !important; position: relative;
filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
}
.perfil-x .perfil-tk-avatar .avatar { --tam: calc(var(--x-av) - 8px) !important; width: calc(var(--x-av) - 8px) !important; height: calc(var(--x-av) - 8px) !important; border-width: 3px; font-size: calc(var(--x-av) * .36); }
.perfil-x .perfil-tk-gear {
position: absolute !important; top: 10px !important; right: 12px !important; left: auto !important; z-index: 6;
width: 34px !important; height: 34px !important; border-radius: 50%;
background: rgba(0, 0, 0, .5) !important; border: 0 !important; color: #fff; backdrop-filter: blur(6px);
}
/* Acciones: a la derecha de la foto, en la franja bajo la portada. */
.perfil-x > .perfil-tk-acciones {
grid-column: 1 / -1 !important; grid-row: 2 !important; z-index: 2;
display: flex !important; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px;
padding: 10px var(--x-pad) 6px calc(var(--x-av) + var(--x-pad) + 10px); min-height: calc(var(--x-av) / 2 + 10px);
min-width: 0;
}
.perfil-x .perfil-tk-acciones .btn { min-height: 34px; padding: 6px 16px; font-size: 13px; width: auto; flex: 0 0 auto; }
.perfil-x .perfil-tk-acciones .perfil-tk-primario { order: 1 !important; flex: 0 0 auto !important; min-width: 0 !important; grid-column: auto !important; }
.perfil-x .perfil-tk-acciones .perfil-tk-mas-btn { order: 2 !important; grid-column: auto !important; width: 34px; height: 34px; min-height: 34px !important; padding: 0 !important; justify-content: center; font-size: 0; gap: 0; border-radius: 50%; }
.perfil-x .perfil-tk-acciones .perfil-tk-mas-btn span { font-size: 18px; line-height: 1; }
.perfil-x .perfil-tk-acciones .perfil-tk-sec, .perfil-x .perfil-tk-acciones #btnEditarDesdePerfil, .perfil-x .perfil-tk-acciones .perfil-secciones-btn.en-fila { grid-column: auto !important; order: 3 !important; }
/* Identidad */
.perfil-x > .perfil-tk-top .perfil-tk-datos, .perfil-x .perfil-tk-datos {
grid-column: 1 / -1; grid-row: 3; padding: 2px var(--x-pad) 4px; min-width: 0;
}
.perfil-x .perfil-tk-nombre h1 { font-size: 20px; }
/* Contadores en línea */
.perfil-x .perfil-tk-der > .perfil-tk-metricas, .perfil-x .perfil-tk-metricas {
grid-column: 1 / -1 !important; grid-row: 4 !important; width: auto !important; max-width: none;
display: flex !important; flex-wrap: wrap; justify-content: flex-start !important; align-self: auto !important; justify-self: start !important;
gap: 2px 16px !important; margin: 0; padding: 4px var(--x-pad) 8px !important; border: 0 !important; background: none !important;
}
.perfil-x .perfil-tk-met, .perfil-x .perfil-tk-met + .perfil-tk-met {
display: inline-flex !important; flex-direction: row !important; align-items: baseline !important; gap: 4px !important;
padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; min-width: 0;
}
.perfil-x .perfil-tk-met b { font-size: 15px !important; font-weight: 800; letter-spacing: 0; }
.perfil-x .perfil-tk-met > span:last-child { font-size: 13.5px !important; font-weight: 500; letter-spacing: 0 !important; text-transform: none !important; color: rgba(226, 236, 252, .62); }
.perfil-x .perfil-tk-met.gemas { align-items: center !important; cursor: pointer; }
.perfil-x .perfil-tk-met.gemas .perfil-tk-met-num { display: inline-flex; align-items: center; gap: 3px; }
.perfil-x .perfil-tk-met[data-metrica="seguidos"] { order: 1; }
.perfil-x .perfil-tk-met[data-metrica="seguidores"] { order: 2; }
.perfil-x .perfil-tk-met[data-metrica="victorias"] { order: 3; }
.perfil-x .perfil-tk-met[data-metrica="boletas"] { order: 4; }
.perfil-x .perfil-tk-met.gemas { order: 5; }
.perfil-x .perfil-tk-meta #perfilFullSeguidos { }
.perfil-x .perfil-tk-meta > span:has(#perfilFullSeguidos) { display: none; }
/* Reacciones y estado */
.perfil-x .perfil-tk-der > .perfil-tk-reacciones, .perfil-x .perfil-tk-reacciones {
grid-column: 1 / -1 !important; grid-row: 5 !important; justify-self: start !important; align-self: auto !important;
max-width: none !important; margin: 0 !important; padding: 0 var(--x-pad) 10px; justify-content: flex-start !important; order: 0 !important;
}
.perfil-x > .estado-pildora-wrap {
grid-column: 1 / -1 !important; grid-row: 6 !important; justify-self: start !important; align-self: auto !important;
width: auto !important; max-width: 100% !important; padding: 0 var(--x-pad) 14px !important; order: 0 !important;
}
.perfil-x .perfil-tk-der > .perfil-tk-tags { display: none; }
.perfil-x .perfil-tk-acciones .perfil-tk-mas-btn[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
@media (min-width: 861px) {
.perfil-tk-hero.perfil-x { --x-av: 132px; --x-banner: 188px; --x-pad: 24px; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px) !important; border-radius: 20px !important; }
.perfil-x > .perfil-tk-portada { grid-column: 1 / -1 !important; }
.perfil-x .perfil-tk-gear { top: 14px !important; right: 16px !important; }
.perfil-x .perfil-tk-datos { grid-column: 1 !important; grid-row: 3; }
.perfil-x .perfil-tk-nombre h1 { font-size: 26px; }
.perfil-x .perfil-tk-met b { font-size: 16px !important; }
.perfil-x .perfil-tk-met > span:last-child { font-size: 14px !important; }
.perfil-x .perfil-tk-der > .perfil-tk-tags { display: block; grid-column: 2; grid-row: 3 / span 2; align-self: start; padding: 4px var(--x-pad) 0 0; }
.perfil-x .perfil-tk-der > .perfil-tk-tags .perfil-etiquetas-contenedor { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.perfil-x .perfil-tk-metricas { grid-column: 1 !important; }
.perfil-x .perfil-tk-reacciones { grid-column: 1 / -1 !important; }
.perfil-x > .perfil-tk-acciones { padding-left: calc(var(--x-av) + var(--x-pad) + 16px); min-height: calc(var(--x-av) / 2 + 12px); }
.perfil-x .perfil-tk-acciones .btn { min-height: 38px; padding-inline: 18px; font-size: 13.5px; }
.perfil-x .perfil-tk-acciones .perfil-tk-mas-btn { display: none !important; }
}
/* Pestañas subrayadas (como X): texto, sin cápsula, barra de acento bajo la activa. */
.perfil-tk-tabs { padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--tk-linea) !important; border-radius: 0 !important; background: none !important; max-width: none !important; overflow: visible !important; margin: 0 0 6px !important; }
.perfil-tk-capsula {
top: auto !important; bottom: -1px; left: 0 !important; height: 3px !important; width: calc(100% / var(--n, 2)) !important;
border-radius: 3px !important; background: none !important; box-shadow: none !important;
}
.perfil-tk-capsula::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; border-radius: 3px; background: var(--perfil-accent, #f49797); }
.perfil-tk-tab { border-radius: 0 !important; min-height: 46px !important; font-size: 14px !important; font-weight: 700; }
.perfil-tk-tab.activa { color: #fff !important; font-weight: 800; }
@media (max-width: 460px) {
.perfil-x .perfil-tk-metricas { gap: 2px 12px !important; }
.perfil-x .perfil-tk-met b { font-size: 14.5px !important; }
.perfil-x .perfil-tk-met > span:last-child { font-size: 13px !important; }
}
@media (min-width: 861px) { .perfil-tk-tabs { max-width: 560px !important; } }
/* «Más» abierto (celular): las acciones extra ocupan todo el ancho, de a dos por fila. */
@media (max-width: 860px) {
.perfil-x > .perfil-tk-acciones.abierto { padding-left: var(--x-pad); }
.perfil-x .perfil-tk-acciones.abierto .perfil-tk-sec,
.perfil-x .perfil-tk-acciones.abierto .perfil-secciones-btn.en-fila { flex: 1 1 calc(50% - 8px) !important; justify-content: center; }
}
/* ==========================================================================
Menú lateral de la cuenta (celular) y avatar a la izquierda de la cabecera
========================================================================== */
@media (max-width: 768px) {
body.social-body .superapp-header:has(> .superapp-perfil-wrap:not(.oculto)) { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 8px; }
body.social-body .superapp-header > .superapp-perfil-wrap { grid-column: auto; margin: 0; }
body.social-body .superapp-header > .superapp-perfil-wrap .superapp-perfil-flecha,
body.social-body .superapp-header > .superapp-perfil-wrap .superapp-menu { display: none !important; }
body.social-body .superapp-header > .superapp-perfil-wrap .superapp-perfil { width: 36px; height: 36px; min-height: 36px; }
body.social-body .superapp-header > .superapp-perfil-wrap .superapp-perfil .avatar { --tam: 32px; }
}
.velo-cuenta { position: fixed; inset: 0; z-index: 1190; background: rgba(0, 0, 0, .58); backdrop-filter: blur(2px); }
.velo-cuenta.oculto { display: none; }
.cajon-cuenta {
position: fixed; top: 0; bottom: 0; left: 0; z-index: 1200;
width: min(72vw, 252px); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
padding: calc(env(safe-area-inset-top) + 18px) 0 calc(env(safe-area-inset-bottom) + 18px);
background: #0d1522; color: #f1f5f9; border-right: 1px solid rgba(255, 255, 255, .1);
box-shadow: 18px 0 44px rgba(0, 0, 0, .5);
transform: translateX(-104%); visibility: hidden; transition: transform .24s cubic-bezier(.3, .9, .3, 1), visibility 0s .24s;
}
body.cajon-cuenta-abierto .cajon-cuenta { transform: none; visibility: visible; transition: transform .24s cubic-bezier(.3, .9, .3, 1); }
@media (min-width: 769px) { .cajon-cuenta, .velo-cuenta { display: none !important; } }
.cc-cab { padding: 0 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.cc-avatar { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.cc-avatar .avatar { --tam: 52px; }
.cc-nombre { margin-top: 12px; font-size: 19px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.cc-handle { margin-top: 2px; font-size: 14px; color: rgba(226, 236, 252, .6); overflow-wrap: anywhere; }
.cc-cuentas { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: 14px; color: rgba(226, 236, 252, .6); }
.cc-cuentas b { color: #fff; font-size: 14.5px; }
.cc-lista { display: flex; flex-direction: column; padding: 8px 0; }
.cc-lista hr { width: calc(100% - 40px); margin: 8px 20px; border: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.cc-item {
display: flex; align-items: center; gap: 16px; width: 100%; min-height: 52px; padding: 8px 20px;
border: 0; background: none; color: inherit; font: inherit; font-size: 18px; font-weight: 700; text-align: left; cursor: pointer;
}
.cc-item svg { width: 24px; height: 24px; flex: none; }
.cc-item:active, .cc-item:hover { background: rgba(255, 255, 255, .07); }
.cc-item.oculto { display: none; }
.cc-lista hr ~ .cc-item { font-size: 15px; font-weight: 600; min-height: 46px; color: rgba(226, 236, 252, .82); }
.cc-lista hr ~ .cc-item svg { width: 21px; height: 21px; }
body.cajon-cuenta-abierto { overflow: hidden; }
.cc-item { min-height: 46px; font-size: 17px; }
.cc-lista hr ~ .cc-item { min-height: 42px; }
.cc-cab { padding-bottom: 12px; }
/* ==========================================================================
Bandeja de mensajes estilo X: buscador, filas limpias con nombre · @usuario · hora,
punto de acento para no leídos y botón flotante de mensaje nuevo.
========================================================================== */
.chat-panel { position: fixed; }
.chat-panel-cab { padding: 14px 16px; border-bottom: 0; }
.chat-panel-titulo h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; }
.chat-buscar {
display: flex; align-items: center; gap: 10px; margin: 2px 16px 8px; padding: 0 16px; height: 42px;
border-radius: 999px; background: color-mix(in srgb, currentColor 9%, transparent); color: var(--suave);
}
.chat-buscar svg { width: 18px; height: 18px; flex: none; }
.chat-buscar input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--texto, inherit); font: inherit; font-size: 15px; padding: 0 !important; outline: 0; }
.chat-panel:has(#chatLista.oculto) .chat-buscar, .chat-panel:has(#chatLista.oculto) .chat-nuevo, .chat-panel:has(#chatLista.oculto) .chat-filtros { display: none; }
.chat-lista { padding: 0 0 90px; gap: 0; }
.chat-fila-item { gap: 12px; padding: 12px 16px; border: 0; border-radius: 0; align-items: center; }
.chat-fila-item .avatar { --tam: 48px; flex: none; }
.chat-fila-datos { display: flex; flex-direction: column; gap: 2px; }
.chat-fila-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.chat-fila-l1 .chat-usuario-nombre { flex: 0 1 auto; min-width: 0; font-size: 15px; font-weight: 800; }
.chat-fila-handle, .chat-fila-hora { color: var(--suave); font-size: 14px; white-space: nowrap; }
.chat-fila-handle { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chat-fila-hora { flex: none; font-size: 13.5px; }
.chat-fila-datos small { font-size: 14.5px; margin: 0; }
.chat-fila-item.no-leido .chat-fila-datos small { color: var(--texto, inherit); font-weight: 600; }
.chat-fila-punto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--perfil-accent, #f49797); box-shadow: 0 0 0 3px color-mix(in srgb, var(--perfil-accent, #f49797) 25%, transparent); }
.chat-nuevo {
position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 20px); z-index: 4;
width: 56px; height: 56px; border: 0; border-radius: 50%; cursor: pointer;
display: grid; place-items: center; color: #fff;
background: linear-gradient(145deg, var(--oro, #ef7878) 0%, #ff8a3d 55%, #e0642b 100%);
box-shadow: 0 8px 22px rgba(0, 0, 0, .38);
}
.chat-nuevo svg { width: 26px; height: 26px; }
.chat-nuevo:active { transform: scale(.94); }
.chat-vacio { padding: 48px 28px; text-align: center; }
.chat-vacio b { display: block; margin-bottom: 6px; font-size: 1.15rem; }
/* Cabecera del celular: avatar · logo centrado · buscar. Sin el ícono de mensajes (ahora vive en la barra inferior). */
@media (max-width: 768px) {
body.social-body .superapp-header:has(> .superapp-perfil-wrap:not(.oculto)) { grid-template-columns: auto minmax(0, 1fr) auto; }
body.social-body .superapp-header > .superapp-centro { display: none; }
body.social-body .superapp-header > .superapp-marca { justify-self: center; }
/* Isotipo técnico: bloque de acento con {🤍} monoespaciado. */
body.social-body .superapp-marca .brand-icon { background: var(--perfil-acento, #E25C50); color: #ffffff; }
body.social-body .superapp-marca .icono-logo-svg { width: 26px; height: 26px; }
body.social-body .superapp-marca .icono-logo-svg rect { fill: var(--perfil-acento, #E25C50); stroke: none; opacity: 1; }
body.social-body .superapp-marca .icono-logo-svg text { fill: #ffffff; }
}
.chat-fila-l1 .badge, .chat-fila-l1 .perfil-chip, .chat-fila-l1 .verif { display: none !important; }
.chat-fila-l1 .badge-verificado-oficial, .chat-fila-l1 .badge-verificado-acento { display: inline-flex !important; }
.chat-fila-hora { margin-left: auto; }
.chat-fila-l1 .chat-usuario-nombre { flex: 0 1 auto; }
.chat-fila-handle { flex: 1 1 0; }
/* Bandeja: filtros Todo / Directos / Grupos y avatar de grupo */
.chat-filtros { display: flex; gap: 8px; margin: 0 16px 6px; overflow-x: auto; scrollbar-width: none; }
.chat-filtros::-webkit-scrollbar { display: none; }
.chat-filtros button {
flex: none; height: 34px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
border: 1px solid color-mix(in srgb, currentColor 22%, transparent); background: transparent; color: var(--suave);
}
.chat-filtros button.activo { background: var(--texto, #fff); color: var(--fondo, #111); border-color: transparent; }
.chat-grupo-av {
flex: none; width: 48px; height: 48px; border-radius: 16px; overflow: hidden; display: grid; place-items: center;
font-weight: 800; font-size: 20px; color: #fff;
background: linear-gradient(145deg, var(--perfil-accent, #f49797), color-mix(in srgb, var(--perfil-accent, #f49797) 45%, #000));
}
.chat-grupo-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Encuadre de foto (perfil y portada) */
.enc-velo { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); }
.enc-caja { width: min(100%, 540px); max-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--panel, #12203a); color: var(--texto, #fff); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.enc-caja h3 { margin: 0; font-size: 1.1rem; }
.enc-marco { position: relative; width: 100%; max-width: 100%; overflow: hidden; border-radius: 12px; background: #000; touch-action: none; cursor: grab; user-select: none; }
.enc-marco:active { cursor: grabbing; }
.enc-marco.circular { width: min(100%, 300px); align-self: center; border-radius: 50%; }
.enc-marco img { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; transform-origin: 0 0; }
.enc-zoom { display: flex; align-items: center; gap: 10px; }
.enc-zoom input { flex: 1; accent-color: var(--perfil-accent, #f49797); }
.enc-pie { display: flex; gap: 10px; justify-content: flex-end; }
.perfil-edit-portada { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.perfil-edit-portada-t { font-weight: 700; font-size: .9rem; }
.perfil-edit-portada-vista { aspect-ratio: 3 / 1; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--perfil-accent, #f49797) 40%, #0b1220), #0b1220); color: var(--suave); font-size: .85rem; }
.perfil-edit-portada-vista img { width: 100%; height: 100%; object-fit: cover; display: block; }
.enc-caja { background: #12203a !important; color: #f3f6fb !important; }
.enc-caja h3 { color: #f3f6fb !important; }
.enc-caja .suave { color: #aab6cc !important; }
.enc-caja .btn:not(.sec) { background: var(--perfil-accent, #f49797) !important; color: #1a1205 !important; border: 0; }
/* Botón de perfil del header (móvil): el avatar queda centrado dentro del aro. */
@media (max-width: 768px) {
body.social-body .superapp-perfil-wrap .superapp-perfil { display: inline-grid; place-items: center; padding: 0; }
body.social-body .superapp-perfil > span { display: grid; place-items: center; line-height: 0; width: auto; height: auto; }
body.social-body .superapp-perfil .avatar { margin: 0; }
}
/* Fichas de organizadores: ancho fijo (el nombre largo se corta) y botón legible en tema claro. */
.muro-sug { min-width: 0; }
.muro-sug { width: 158px; max-width: 158px; }
#feed .muro-sug .btn.sec { color: #142033 !important; background: rgba(20, 32, 51, .06) !important; border-color: rgba(20, 32, 51, .24) !important; }
html[data-tema="oscuro"] #feed .muro-sug .btn.sec { color: #f1f5f9 !important; background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .2) !important; }
#feed .muro-sug.siguiendo .btn.sec { color: var(--ok) !important; border-color: var(--ok) !important; }
/* Cabecera de escritorio: el @usuario se recorta para que el centro no pise las acciones. */
@media (min-width: 861px) {
body.social-body .superapp-perfil b { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 861px) and (max-width: 1360px) { body.social-body .superapp-perfil b { display: none; } }
/* Cabecera de escritorio: solo lo esencial (Tema y Ayuda viven en el menú de la cuenta). */
@media (min-width: 769px) {
body.social-body .superapp-acciones > [data-tema-boton],
body.social-body .superapp-acciones > #sosCab { display: none !important; }
body.social-body .superapp-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
body.social-body .superapp-acciones > * { margin: 0; flex: 0 0 auto; }
body.social-body .superapp-acciones .superapp-icono {
width: 38px; height: 38px; padding: 0;
display: inline-grid; place-items: center; line-height: 0;
}
body.social-body .superapp-acciones .superapp-icono .icono-nav-svg { display: block; width: 18px; height: 18px; }
body.social-body .superapp-acciones .gemas-chip { height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; line-height: 1; }
body.social-body .superapp-perfil-wrap { display: inline-flex; align-items: center; gap: 4px; }
body.social-body .superapp-perfil-wrap .superapp-perfil {
box-sizing: border-box; width: 42px; height: 42px; min-height: 42px; max-width: none;
padding: 0; gap: 0; display: inline-grid; place-items: center; border-radius: 50%;
}
body.social-body .superapp-perfil > span { display: grid; place-items: center; line-height: 0; width: auto; height: auto; }
body.social-body .superapp-perfil .avatar { margin: 0; --tam: 34px; }
body.social-body .superapp-perfil b { display: none; }
body.social-body .superapp-perfil-flecha { width: 26px; height: 26px; padding: 0; display: inline-grid; place-items: center; }
}
/* ==========================================================================
PERFIL — portada siempre 3:1, ficha que sigue el tema y columnas laterales
========================================================================== */
/* Portada: la proporción de lo que se sube (3:1) se conserva en cualquier pantalla. */
.perfil-x > .perfil-tk-portada { height: auto !important; aspect-ratio: 3 / 1; }
/* La ficha toma sus colores del tema (o del tema por defecto): texto, apagado y líneas legibles. */
.perfil-tk {
--tk-linea: color-mix(in srgb, var(--perfil-texto, #f8fafc) 16%, transparent);
--tk-tenue: color-mix(in srgb, var(--perfil-texto, #f8fafc) 64%, transparent);
--tk-oro: #f8c37a;
}
.vista-perfil-full[data-tono="claro"] .perfil-tk { --tk-oro: #8a5a00; }
.perfil-tk-hero {
color: var(--perfil-texto, #f8fafc);
background:
radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--perfil-accent, #f49797) 14%, transparent), transparent 62%),
linear-gradient(160deg, var(--perfil-superficie, #1a2842), var(--perfil-superficie-2, #0f172a));
box-shadow: 0 10px 30px rgba(239, 120, 120, .14), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.perfil-tk-hero .perfil-tk-nombre h1 { color: var(--perfil-texto, #f8fafc); }
.perfil-tk-hero .perfil-tk-alias,
.perfil-tk-hero .perfil-tk-apodo,
.perfil-tk-hero .perfil-tk-bio,
.perfil-tk-hero .perfil-tk-ubic,
.perfil-tk-hero .perfil-tk-meta,
.perfil-x .perfil-tk-met > span:last-child { color: var(--perfil-suave, rgba(226, 236, 252, .7)) !important; }
.perfil-tk-hero .perfil-tk-met b { color: var(--perfil-texto, #f8fafc); }
.perfil-tk-hero .perfil-tk-met.gemas b,
.perfil-tk-met > svg, .perfil-tk-met-num svg, .perfil-tk-canje > span, .perfil-tk-victoria-pozo { color: var(--tk-oro); }
.perfil-tk-tab { color: var(--perfil-suave, rgba(226, 236, 252, .62)); }
.perfil-tk-tab.activa { color: var(--perfil-texto, #fff) !important; }
.perfil-tk-billetera > small { color: var(--perfil-suave, rgba(226, 236, 252, .58)); }
.vista-perfil-full[data-tono="claro"] .perfil-tk-hero .btn.sec,
.vista-perfil-full[data-tono="claro"] .perfil-tk-hero .perfil-tk-mas-btn {
background: #fff; color: var(--perfil-accent, #1a1a1a); border-color: color-mix(in srgb, var(--perfil-accent, #ef7878) 30%, transparent);
}
.vista-perfil-full[data-tono="claro"] .perfil-tk-hero .btn.sec:hover { background: color-mix(in srgb, var(--perfil-accent, #ef7878) 8%, #fff); }
.vista-perfil-full[data-tono="claro"] .perfil-tk-hero .btn:not(.sec) { color: var(--perfil-acento-texto, #fff); }
.vista-perfil-full[data-tono="claro"] .perfil-tk-hero .chip { color: var(--perfil-texto); }
/* Desde 861 px la ficha usa el mismo formato compacto que el celular (Más, bio recortada, sin etiquetas). */
@media (min-width: 861px) {
.perfil-tk-hero.perfil-x {
--x-av: 104px; --x-pad: 20px;
grid-template-columns: minmax(0, 1fr) !important;
max-width: 700px; margin: 0 auto !important;
}
.perfil-x .perfil-tk-datos, .perfil-x .perfil-tk-metricas { grid-column: 1 / -1 !important; }
.perfil-x .perfil-tk-der > .perfil-tk-tags { display: none !important; }
.perfil-x .perfil-tk-nombre h1 { font-size: 22px; }
.perfil-x .perfil-tk-gear { top: 10px !important; right: 12px !important; }
.perfil-x > .perfil-tk-acciones { padding-left: calc(var(--x-av) + var(--x-pad) + 10px); min-height: calc(var(--x-av) / 2 + 10px); }
.perfil-x .perfil-tk-acciones .perfil-tk-mas-btn { display: inline-flex !important; }
.perfil-x .perfil-tk-acciones:not(.abierto) .perfil-tk-sec,
.perfil-x .perfil-tk-acciones:not(.abierto) .perfil-secciones-btn.en-fila,
.perfil-x .perfil-tk-acciones:not(.abierto) .chip { display: none !important; }
.perfil-x > .perfil-tk-acciones.abierto { padding-left: var(--x-pad); }
.perfil-x .perfil-tk-acciones.abierto .perfil-tk-sec { flex: 1 1 calc(50% - 8px) !important; justify-content: center; }
.perfil-x .perfil-tk-bio.recortada { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.perfil-x .perfil-tk-bio-mas { display: inline-block; margin: 2px 0 0; padding: 4px 0; background: none; border: 0; color: var(--perfil-accent-texto, var(--perfil-accent)); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.perfil-tk-tabs { max-width: 700px !important; margin-left: auto !important; margin-right: auto !important; }
}
/* Desde 1100 px: la ficha ocupa la columna central y «Acerca de» y el resto de apartados
suben a sus costados, a la altura de la portada. */
@media (min-width: 1100px) {
.perfil-tk {
display: grid; align-items: start; justify-content: center;
grid-template-columns: clamp(280px, 19vw, 400px) minmax(0, 700px) clamp(280px, 18vw, 400px);
grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto;
column-gap: clamp(14px, 1.4vw, 26px);
}
.perfil-tk > .perfil-tk-publico { grid-column: 1 / -1; grid-row: 1; }
.perfil-tk > .perfil-tk-hero.perfil-x { grid-column: 2; grid-row: 2; max-width: none; width: 100%; margin: 0 !important; }
.perfil-tk > .perfil-tk-tabs { grid-column: 2; grid-row: 3; max-width: none !important; width: 100%; margin: 14px 0 4px !important; }
.perfil-tk > .perfil-tk-panel[data-perfil-panel="publicaciones"] { display: contents; }
.perfil-tk-panel[data-perfil-panel="publicaciones"] > .perfil-tk-victorias { grid-column: 2; grid-row: 4; }
.perfil-tk-panel[data-perfil-panel="publicaciones"] > .perfil-full-grid { display: contents; }
.perfil-tk-panel[data-perfil-panel="publicaciones"] .perfil-col-izq { grid-column: 1; grid-row: 2 / 7; align-self: start; }
.perfil-tk-panel[data-perfil-panel="publicaciones"] .perfil-full-main { grid-column: 2; grid-row: 5; min-width: 0; }
.perfil-tk-panel[data-perfil-panel="publicaciones"] .perfil-col-der { grid-column: 3; grid-row: 2 / 7; align-self: start; }
.perfil-tk-panel[data-perfil-panel="publicaciones"] > .perfil-org-vitrina { grid-column: 1 / -1; grid-row: 7; margin-top: 18px; }
.perfil-tk > .perfil-tk-panel:not([data-perfil-panel="publicaciones"]) { grid-column: 2; grid-row: 8; }
}
/* Isotipo del encabezado: siempre legible sobre la barra. */
body.social-body .superapp-marca .brand-icon { background: var(--perfil-acento, #E25C50); color: #ffffff; }
body.social-body .superapp-marca .icono-logo-svg rect { fill: var(--perfil-acento, #E25C50); }
body.social-body .superapp-marca .icono-logo-svg text { fill: #ffffff; }
/* PERFIL en tono claro: fondo liso de marca, sin velo oscuro; portada vacía con degradado de marca */
.vista-perfil-full[data-tono="claro"] { background: var(--perfil-bg, #F3F5F9); }
.vista-perfil-full[data-tono="claro"]::before,
.vista-perfil-full[data-tono="claro"]::after { background: none; }
.vista-perfil-full[data-tono="claro"] .perfil-tk-hero .perfil-tk-portada.vacia {
background: linear-gradient(135deg, var(--perfil-accent, #ef7878), color-mix(in srgb, var(--perfil-accent, #ef7878) 55%, #fff));
}
.vista-perfil-full .feed-vacio { color: var(--perfil-suave, #475569); }
.vista-perfil-full .feed-vacio b { color: var(--perfil-texto, #0B1220); display: block; }
/* Populares: la fila nunca se desborda en columnas angostas */
.popular-fila > * { min-width: 0; }
.popular-fila .popular-datos { flex: 1 1 0; overflow: hidden; }
/* ===== Editar perfil: rediseño (pestañas, tarjetas, pie fijo) ===== */
.perfil-edit-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex-wrap: nowrap; }
.perfil-edit-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px; font-size: 12px; flex: none; white-space: nowrap; }
.perfil-edit-tab svg { width: 18px; height: 18px; }
.perfil-edit-tab.activa { box-shadow: var(--sombra), 0 0 0 2px var(--perfil-accent, var(--azul-3)) inset; }
@media (max-width: 768px) { .perfil-edit-tab { flex: none; } }
@media (max-width: 340px) { .perfil-edit-tab { font-size: 11px; } }
.perfil-edit-panel { gap: 14px; }
.pe-tarjeta { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--borde); border-radius: 14px; background: var(--tarjeta); min-width: 0; }
.pe-titulo { margin: 0; font-size: 13.5px; font-weight: 800; color: var(--texto); }
.pe-tarjeta .campo { margin: 0; }
.pe-tarjeta .campo em { font-style: normal; font-weight: 400; color: var(--suave); }
.pe-contador { justify-self: end; color: var(--suave); font-size: 11px; }
.pe-hero { padding: 0 0 12px; overflow: hidden; gap: 0; }
.pe-hero-portada { position: relative; }
.pe-hero .perfil-edit-portada-vista { border-radius: 0; aspect-ratio: 3 / 1; }
.pe-hero-acciones { position: absolute; right: 8px; top: 8px; display: flex; gap: 6px; }
.pe-hero-acciones .btn { min-height: 32px; background: rgba(15,23,42,.72); color: #fff; border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(4px); }
.pe-hero-avatar { display: flex; align-items: flex-end; gap: 12px; margin: -34px 14px 8px; position: relative; flex-wrap: wrap; }
.pe-hero-avatar .avatar { --tam: 76px; border: 3px solid var(--tarjeta); }
.pe-hero-avatar-btns { display: flex; gap: 6px; padding-bottom: 4px; }
.pe-hero-avatar-btns .btn { min-height: 32px; }
.pe-hero > small { margin: 0 14px; }
.juegos-fav-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.juego-fav-nombre { white-space: normal; overflow: visible; text-overflow: clip; }
.juego-fav-opcion { padding: 9px 10px; }
.perfil-edit-pie { position: sticky; bottom: -14px; z-index: 5; margin: 6px -20px -14px; padding: 12px 20px; background: var(--tarjeta); border-top: 1px solid var(--borde); align-items: center; }
.pe-sucio { margin-right: auto; font-size: 11.5px; font-weight: 700; color: var(--oro, #b7791f); }
.pe-sucio.oculto { display: none; }
.cuenta-peligro > summary { cursor: pointer; list-style: none; color: var(--texto); }
.cuenta-peligro[open] > summary { margin-bottom: 6px; }
@media (max-width: 400px) { .juegos-fav-selector { grid-template-columns: 1fr; } }
.perfil-edit-pie { flex-wrap: nowrap; gap: 8px; }
.perfil-edit-pie .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.pe-sucio { white-space: nowrap; }
.perfil-edit-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.perfil-edit-tab { min-width: 0; padding-left: 2px; padding-right: 2px; }
.perfil-edit-tab span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Acciones del cuadro de perfil: 2 columnas también en móvil, para ahorrar alto */
.perfil-card .perfil-acciones-laterales { grid-template-columns: 1fr 1fr; gap: 6px; }
.perfil-card .perfil-acciones-laterales .perfil-salir { grid-column: auto; }
.perfil-card .perfil-acciones-laterales .btn { gap: 5px; padding: 6px 4px; font-size: 12px; white-space: nowrap; justify-content: center; }
.perfil-card .perfil-acciones-laterales .btn svg { width: 15px; height: 15px; flex: none; }
/* En celular el cuadro de perfil (con sesión iniciada) no se muestra dentro de "Para ti" */
@media (max-width: 768px) { .perfil-card:has(#perfilDatos:not(.oculto)) { display: none; } }
/* Sello de verificado junto al nombre y apellido */
.perfil-tk-nombre { align-items: center; }
.perfil-tk-sello-nombre { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.perfil-tk-sello-nombre .badge-verificado-acento { margin: 0; }
.perfil-tk-sello-nombre .icono-verificado-svg { width: 22px; height: 22px; }
@media (max-width: 860px) { .perfil-tk-sello-nombre .icono-verificado-svg { width: 18px; height: 18px; } }
.perfil-tk-nombre h1 .perfil-tk-sello-nombre { display: inline-block; vertical-align: -0.12em; margin-left: 4px; white-space: nowrap; }
.perfil-tk-sello-nombre .icono-verificado-svg { width: 20px; height: 20px; }
@media (max-width: 860px) { .perfil-tk-sello-nombre .icono-verificado-svg { width: 16px; height: 16px; } }
/* ===== Perfil: grupo Editar/Temas y menú «⋯» desplegable ===== */
.perfil-tk-grupo-edit { display: flex; flex-direction: column; gap: 6px; order: 1; flex: 0 0 auto; }
.perfil-x .perfil-tk-acciones .perfil-tk-grupo-edit .btn { width: 100%; justify-content: center; order: 0 !important; }
.perfil-x > .perfil-tk-acciones { align-items: flex-start; }
.perfil-tk-mas-wrap { position: relative; order: 2; flex: 0 0 auto; }
.perfil-x .perfil-tk-acciones .perfil-tk-mas-wrap .perfil-tk-mas-btn { display: inline-flex !important; order: 0 !important; }
.perfil-tk-menu {
display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
min-width: 210px; max-width: min(300px, 86vw); flex-direction: column; gap: 2px; padding: 6px;
background: var(--perfil-superficie, #e05c5c); color: var(--perfil-texto, #fff);
border: 1px solid var(--perfil-borde, rgba(255,255,255,.18)); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.perfil-tk-mas-wrap.abierto .perfil-tk-menu { display: flex; }
.perfil-x .perfil-tk-acciones .perfil-tk-mas-wrap .perfil-tk-menu .perfil-tk-sec,
.perfil-x .perfil-tk-acciones .perfil-tk-mas-wrap .perfil-tk-menu .perfil-secciones-btn.en-fila {
display: flex !important; flex: 0 0 auto !important; width: 100% !important; order: 0 !important; justify-content: flex-start !important;
min-height: 40px; padding: 8px 12px !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
background: transparent !important; color: inherit !important; font-size: 13.5px; text-align: left; position: static !important; text-decoration: none;
}
.perfil-x .perfil-tk-acciones .perfil-tk-mas-wrap .perfil-tk-menu .perfil-tk-sec:hover,
.perfil-x .perfil-tk-acciones .perfil-tk-mas-wrap .perfil-tk-menu .perfil-secciones-btn.en-fila:hover { background: color-mix(in srgb, currentColor 12%, transparent) !important; }
.perfil-tk-menu .btn svg { flex: none; }
.perfil-x > .perfil-tk-acciones.abierto { padding-left: calc(var(--x-av) + var(--x-pad) + 10px); }
.modo-temas .perfil-edit-tabs, .modo-temas .pe-paletas, .modo-temas .pe-colores { display: none !important; }
.perfil-x .perfil-tk-acciones .perfil-tk-grupo-edit #btnEditarDesdePerfil { order: 0 !important; }
.perfil-x .perfil-tk-acciones .perfil-tk-grupo-edit #btnTemasPerfil { order: 1 !important; }
.perfil-x .perfil-tk-acciones .perfil-tk-grupo-edit #btnEditarDesdePerfil,
.perfil-x .perfil-tk-acciones:not(.abierto) .perfil-tk-grupo-edit #btnEditarDesdePerfil { display: inline-flex !important; grid-column: auto !important; }
/* ===== Menú del engranaje del perfil ===== */
.perfil-tk-gear-menu {
display: none; position: fixed; z-index: 2000; width: min(260px, calc(100vw - 16px)); overflow: auto;
flex-direction: column; gap: 2px; padding: 6px;
background: var(--perfil-superficie, #e05c5c); color: var(--perfil-texto, #fff);
border: 1px solid var(--perfil-borde, rgba(255,255,255,.18)); border-radius: 14px; box-shadow: 0 14px 34px rgba(0,0,0,.4);
}
.perfil-tk-gear-menu.abierto { display: flex; }
.pgm-t { padding: 8px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.pgm-acc { display: flex; flex-direction: column; gap: 2px; }
.pgm-it, body .perfil-tk-gear-menu .pgm-acc > * {
display: flex !important; align-items: center; gap: 10px; width: 100% !important; flex: 0 0 auto !important; order: 0 !important; justify-content: flex-start !important;
min-height: 38px; padding: 8px 10px !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important;
background: transparent !important; color: inherit !important; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; position: static !important;
}
.pgm-it:hover, body .perfil-tk-gear-menu .pgm-acc > *:hover { background: color-mix(in srgb, currentColor 12%, transparent) !important; }
.pgm-it svg, .pgm-acc svg { width: 17px; height: 17px; flex: none; }
.pgm-it.peligro { color: #f87171; }
body .perfil-tk-gear-menu .pgm-acc > * { margin: 0 !important; inset: auto !important; transform: none !important; height: auto !important; width: 100% !important; }
/* Tabs del muro pegadas bajo un tema/paleta: el fondo sale del propio tema (antes quedaba una franja gris clara con texto claro). */
body[data-tema-activo] .social-layout .feed-tabs.pegado,
html[data-tema="oscuro"] body[data-tema-activo] .social-layout .feed-tabs.pegado {
background: color-mix(in srgb, var(--perfil-bg, #0f172a) 88%, transparent) !important;
border-bottom-color: var(--perfil-borde, rgba(255, 255, 255, .12)) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
}
body[data-tema-activo] .social-layout .feed-tabs.pegado .feed-tab { color: var(--perfil-suave, rgba(255,255,255,.75)); }
body[data-tema-activo] .social-layout .feed-tabs.pegado .feed-tab.activa { color: var(--perfil-texto, #fff); }
/* Estado corto (una sola línea): el globo no necesita tanto aire sobre el avatar. */
.post.post-con-estado.post-estado-corto { padding-top: 34px; }
/* Tabs del muro al desplazar: cápsula redondeada de vidrio (estilo iOS) que deja ver el contenido borroso por debajo. */
.social-layout .feed-tabs.pegado {
width: fit-content; max-width: 100%; align-self: flex-start;
padding: 4px 16px 4px !important; /* mismo alto total que en reposo y sin tocar top/margin: así no cambia la medida que activa .pegado */
border-radius: 18px !important;
background: rgba(243, 245, 249, .55) !important;
border: 1px solid rgba(255, 255, 255, .55) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
box-shadow: 0 8px 28px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}
html[data-tema="oscuro"] .social-layout .feed-tabs.pegado {
background: rgba(20, 28, 48, .5) !important; border: 1px solid rgba(255, 255, 255, .14) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
body[data-tema-activo] .social-layout .feed-tabs.pegado,
html[data-tema="oscuro"] body[data-tema-activo] .social-layout .feed-tabs.pegado {
background: color-mix(in srgb, var(--perfil-bg, #0f172a) 55%, transparent) !important;
border: 1px solid color-mix(in srgb, var(--perfil-texto, #fff) 22%, transparent) !important;
box-shadow: 0 8px 28px rgba(0, 0, 0, .35), inset 0 1px 0 color-mix(in srgb, var(--perfil-texto, #fff) 20%, transparent) !important;
-webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
}
.social-layout .feed-tabs.pegado { z-index: 60 !important; }
/* Scroll contenido: lo que se desplaza por dentro no arrastra la página de atrás al llegar a su fin. */
.catalogo-comentarios-lista,
.catalogo-scroll,
.chat-dock-mensajes,
.chat-lista,
.chat-mensajes,
.compartir-lista,
.composer-hoja,
.enc-caja,
.favoritos-resultados,
.gw-resultados,
.modal,
.notifs,
.perfil-col-card .perfil-card-scroll,
.playlist-lista,
.playlist-panel,
.pub-destinos,
.sop-hilo,
.sugerencias { overscroll-behavior-y: contain; }
.modal-fondo, .modal, .social-modal, .modal-cuerpo { overscroll-behavior: contain; }
/* Columnas laterales del muro (escritorio): se desplazan por su cuenta sin esperar a que termine el muro central. */
@media (min-width: 1081px) {
.social-izq, .social-der {
max-height: calc(100vh - 92px); max-height: calc(100dvh - 92px);
overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
scrollbar-width: thin; scrollbar-color: color-mix(in srgb, currentColor 30%, transparent) transparent;
padding-right: 2px;
}
}
/* Columnas laterales: se siguen desplazando, pero sin barra visible. */
.social-izq, .social-der { scrollbar-width: none; -ms-overflow-style: none; padding-right: 0; }
.social-izq::-webkit-scrollbar, .social-der::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Perfil completo (escritorio): cada columna lateral se desplaza por su cuenta, sin barra visible. */
@media (min-width: 1024px) {
.perfil-col-izq, .perfil-col-der {
position: sticky; top: 70px; align-self: start;
max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px);
overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
scrollbar-width: none; -ms-overflow-style: none;
}
.perfil-col-izq::-webkit-scrollbar, .perfil-col-der::-webkit-scrollbar { display: none; width: 0; height: 0; }
}
/* Playlist propia: sin botones; clic derecho (menú) y arrastre para reubicar. */
.playlist-item.editable { cursor: grab; }
.playlist-item.editable:active { cursor: grabbing; }
.playlist-item.arrastrando { opacity: .4; }
.playlist-item.drop-antes { box-shadow: 0 -3px 0 0 var(--perfil-accent, #38BDF8); }
.playlist-item.drop-despues { box-shadow: 0 3px 0 0 var(--perfil-accent, #38BDF8); }
.pl-menu { position: fixed; z-index: 2147483000; min-width: 170px; display: flex; flex-direction: column; gap: 2px; padding: 5px;
background: var(--perfil-superficie, var(--tarjeta, #fff)); color: var(--perfil-texto, var(--texto, #0f172a));
border: 1px solid var(--perfil-borde, var(--borde, #d6dce6)); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.pl-menu button { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pl-menu button:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.pl-menu button.peligro { color: #ef4444; }
/* Slider de volumen de la playlist: pista con relleno, perilla redonda y zona de toque amplia. */
.pp-vol input[type=range] {
-webkit-appearance: none; appearance: none; width: 104px; height: 24px; margin: 0; padding: 0;
background: transparent; cursor: pointer; outline: none; --v: 70%;
}
.pp-vol input[type=range]::-webkit-slider-runnable-track {
height: 6px; border-radius: 999px;
background: linear-gradient(to right, var(--perfil-accent, #38BDF8) var(--v), color-mix(in srgb, var(--texto, #fff) 22%, transparent) var(--v));
}
.pp-vol input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--texto, #fff) 22%, transparent); }
.pp-vol input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--perfil-accent, #38BDF8); }
.pp-vol input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
background: #fff; border: 3px solid var(--perfil-accent, #38BDF8); box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: transform .12s ease;
}
.pp-vol input[type=range]::-moz-range-thumb {
width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 3px solid var(--perfil-accent, #38BDF8); box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.pp-vol input[type=range]:hover::-webkit-slider-thumb, .pp-vol input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); }
.pp-vol input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px color-mix(in srgb, var(--perfil-accent, #38BDF8) 40%, transparent); }
.pp-vol input[type=range]:focus-visible { outline: none; }
/* Cola de reproducción: panel opaco con vidrio (antes se transparentaba y dejaba ver las tarjetas de atrás). */
.playlist-panel {
background: color-mix(in srgb, var(--perfil-superficie, var(--tarjeta, #fff)) 96%, #000) !important;
-webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
color: var(--perfil-texto, var(--texto, #0f172a));
border: 1px solid var(--perfil-borde, var(--borde, rgba(255,255,255,.14))) !important;
border-radius: 18px; padding: 14px; z-index: 120; scrollbar-width: none;
box-shadow: 0 22px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.playlist-panel::-webkit-scrollbar { display: none; }
.playlist-panel .playlist-cab { margin-bottom: 10px; align-items: center; }
.playlist-panel .playlist-lista { gap: 6px; }
.playlist-panel .playlist-item { background: color-mix(in srgb, var(--perfil-texto, #fff) 6%, transparent); border-color: color-mix(in srgb, var(--perfil-texto, #fff) 14%, transparent); }
.playlist-panel .playlist-item.activo { background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 16%, transparent); border-color: color-mix(in srgb, var(--perfil-accent, #38BDF8) 60%, transparent); }
.playlist-panel .playlist-item-info b { color: var(--perfil-texto, var(--texto)); }
.playlist-panel .playlist-item-info small { color: var(--perfil-suave, var(--suave)); }
/* ===== Playlists guardadas de otros (♥) ===== */
.pl-corazon { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 3px 8px; border: 1px solid var(--borde); border-radius: 999px; background: transparent; color: var(--suave); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: color .15s, border-color .15s, background .15s, transform .15s; }
.pl-corazon .icono-svg { width: 14px; height: 14px; }
.pl-corazon span:empty { display: none; }
.pl-corazon:hover { color: #e11d48; border-color: #e11d48; }
.pl-corazon.activo { color: #e11d48; border-color: color-mix(in srgb, #e11d48 55%, var(--borde)); background: color-mix(in srgb, #e11d48 10%, transparent); }
.pl-corazon.activo .icono-svg { fill: currentColor; }
.pl-corazon:active { transform: scale(.92); }
.pl-corazon.fijo { cursor: default; }
.pl-corazon.fijo:hover { color: var(--suave); border-color: var(--borde); }
.pl-guardadas { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde); }
.pl-guardadas h4 { margin: 0 0 2px; font-size: 12px; color: var(--suave); font-weight: 700; letter-spacing: .02em; }
.pl-guardadas h4 small { margin-left: 4px; font-weight: 600; opacity: .8; }
.pl-guardada { display: flex; align-items: center; gap: 6px; }
.pl-guardada-abrir { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.pl-guardada-abrir:hover { border-color: var(--azul, var(--perfil-accent)); background: color-mix(in srgb, var(--perfil-accent, #38BDF8) 8%, var(--fondo)); }
.pl-guardada-abrir .avatar { flex: none; width: 30px; height: 30px; font-size: 11px; }
.pl-guardada-abrir span:not(.avatar) { min-width: 0; display: grid; gap: 1px; }
.pl-guardada-abrir b { font-size: 12.5px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-guardada-abrir small { font-size: 11px; color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-guardada-quitar { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #e11d48; cursor: pointer; }
.pl-guardada-quitar .icono-svg { width: 15px; height: 15px; fill: currentColor; }
.pl-guardada-quitar:hover { background: color-mix(in srgb, #e11d48 12%, transparent); }
.social-body[data-tema-activo] .pl-guardada-abrir { background: var(--perfil-superficie); border-color: var(--perfil-borde); color: var(--perfil-texto); }
.social-body[data-tema-activo] .pl-guardadas { border-top-color: var(--perfil-borde); }
.social-body[data-tema-activo] .pl-guardadas h4, .social-body[data-tema-activo] .pl-guardada-abrir small { color: var(--perfil-suave); }
.pl-guardadas { margin-top: 2px; padding-top: 0; padding-bottom: 10px; border-top: 0; border-bottom: 1px solid var(--borde); }
.social-body[data-tema-activo] .pl-guardadas { border-bottom-color: var(--perfil-borde); border-top-color: transparent; }
/* Columnas laterales: las listas internas no atrapan la rueda; al llegar a su fin siguen con la columna
(la columna sí la retiene, así nunca arrastra la página ni a las otras columnas). */
@media (min-width: 1024px) {
.social-izq .playlist-lista, .social-der .playlist-lista,
.perfil-col-izq .playlist-lista, .perfil-col-der .playlist-lista,
.social-izq .sugerencias, .social-der .sugerencias,
.perfil-col-izq .perfil-card-scroll, .perfil-col-der .perfil-card-scroll,
.perfil-col-izq .sugerencias, .perfil-col-der .sugerencias { overscroll-behavior-y: auto; }
}
/* Celular: nombre, @usuario y sello en la misma línea; el rol debajo del nombre. */
@media (max-width: 700px) {
.post-autor-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; }
.post-autor-linea > button { display: contents; }
.post-autor-linea .post-autor-nombre { order: 0; flex: 0 1 auto; min-width: 0; }
.post-autor-linea .post-autor-handle { order: 1; flex: 0 0 auto; }
.post-autor-linea > .badge-verificado, .post-autor-linea > .badge-verificado-oficial, .post-autor-linea > [class*="verificado"] { order: 2; flex: none; }
.post-autor-linea > .rol-chip, .post-autor-linea > [class*="rol-"] { order: 3; flex: 0 0 100%; width: fit-content; }
.post-autor-linea .apodo-post { order: 4; flex: 0 0 100%; }
}
@media (max-width: 700px) {
.post-autor-linea::after { content: ""; order: 3; flex: 0 0 100%; height: 0; }
.post-autor-linea > .badge-rol-chip { order: 4; flex: 0 0 auto; width: auto; }
.post-autor-linea .apodo-post { order: 5; }
}
/* Celular: «Crear Grupo» y «Reproducir» del perfil, mismo ancho y alineados al borde derecho. */
@media (max-width: 700px) {
.perfil-glass [data-grupo-crear],
.perfil-glass .playlist-cab [data-playlist-play-all] {
width: 136px; min-width: 136px; max-width: 136px; margin-left: auto; margin-right: 0;
justify-content: center; box-sizing: border-box;
}
}
/* Premios / Eventos: icono al inicio y cifra alineada en columna (antes de la flecha). */
.perfil-premios-card .perfil-glass-cab > h2,
.perfil-eventos-card .perfil-glass-cab > h2,
.perfil-org-eventos .perfil-glass-cab > h2 { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.perfil-premios-card .perfil-glass-cab > h2 .icono-svg,
.perfil-eventos-card .perfil-glass-cab > h2 .icono-svg,
.perfil-org-eventos .perfil-glass-cab > h2 .icono-svg { width: 18px; height: 18px; flex: none; }
.perfil-premios-card .perfil-glass-cab > span:not(.perfil-glass-linea),
.perfil-eventos-card .perfil-glass-cab > span:not(.perfil-glass-linea),
.perfil-org-eventos .perfil-glass-cab > span:not(.perfil-glass-linea) { flex: 0 0 28px; min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
/* ===== Botón «Nuevo chat» (rediseño) ===== */
.chat-nuevo {
right: 16px; bottom: calc(env(safe-area-inset-bottom) + 18px);
width: auto; height: 50px; padding: 0 20px 0 16px; gap: 9px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 999px; font: inherit; font-weight: 700; font-size: 15px; letter-spacing: .01em;
color: var(--perfil-texto, #f8fafc);
background: color-mix(in srgb, var(--perfil-superficie, #ef7878) 92%, #000);
border: 1px solid color-mix(in srgb, var(--perfil-accent, #f49797) 55%, transparent);
box-shadow: 0 10px 26px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .08);
backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.chat-nuevo svg { width: 20px; height: 20px; color: var(--perfil-accent, #f49797); flex: none; }
.chat-nuevo:hover { border-color: var(--perfil-accent, #f49797); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.chat-nuevo:active { transform: scale(.96); }
.chat-nuevo:focus-visible { outline: 2px solid var(--perfil-accent, #f49797); outline-offset: 3px; }
/* ===== Hoja «Nuevo mensaje» ===== */
.chat-selector { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.chat-selector.abierta { pointer-events: auto; }
.chat-selector-fondo { position: absolute; inset: 0; background: rgba(5, 10, 20, .55); opacity: 0; transition: opacity .18s; backdrop-filter: blur(3px); }
.chat-selector.abierta .chat-selector-fondo { opacity: 1; }
.chat-selector-hoja {
position: relative; width: min(560px, 100%); max-height: min(86dvh, 720px); height: min(86dvh, 720px);
display: flex; flex-direction: column; overflow: hidden;
background: var(--perfil-superficie, #fff); color: var(--perfil-texto, #1a1a1a);
border: 1px solid var(--perfil-borde, rgba(0, 0, 0, .1)); border-bottom: 0;
border-radius: 22px 22px 0 0; box-shadow: 0 -14px 44px rgba(0, 0, 0, .4);
transform: translateY(100%); transition: transform .2s ease-out;
}
.chat-selector.abierta .chat-selector-hoja { transform: none; }
@media (min-width: 700px) { .chat-selector { align-items: center; } .chat-selector-hoja { border-radius: 20px; border-bottom: 1px solid var(--perfil-borde, rgba(0,0,0,.1)); height: min(78dvh, 640px); } }
.chat-selector-asa { width: 42px; height: 4px; border-radius: 4px; background: color-mix(in srgb, currentColor 25%, transparent); margin: 8px auto 0; flex: none; }
.chat-selector-cab { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 6px 18px; flex: none; }
.chat-selector-cab h2 { margin: 0; font-size: 19px; }
.chat-selector-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 8%, transparent); color: inherit; display: grid; place-items: center; cursor: pointer; }
.chat-selector-x .icono-svg { width: 18px; height: 18px; }
.chat-selector-buscar { display: flex; align-items: center; gap: 10px; margin: 4px 16px 10px; padding: 0 14px; height: 46px; flex: none; border-radius: 14px; background: color-mix(in srgb, currentColor 7%, transparent); border: 1px solid var(--perfil-borde, transparent); }
.chat-selector-buscar:focus-within { border-color: var(--perfil-accent, #38bdf8); }
.chat-selector-buscar svg { width: 18px; height: 18px; flex: none; opacity: .65; }
.chat-selector-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.chat-selector-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px calc(env(safe-area-inset-bottom) + 14px); display: flex; flex-direction: column; }
.chat-selector-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 14px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.chat-selector-fila:hover, .chat-selector-fila:focus-visible { background: color-mix(in srgb, var(--perfil-accent, #38bdf8) 12%, transparent); outline: 0; }
.chat-selector-fila .avatar { width: 46px; height: 46px; flex: none; }
.chat-selector-datos { min-width: 0; display: grid; gap: 1px; }
.chat-selector-datos b { font-size: 15px; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-selector-datos small { font-size: 13px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-selector-estado { margin: 28px 20px; text-align: center; opacity: .7; font-size: 14px; line-height: 1.5; }
.chat-selector-buscar input[type="search"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; height: auto !important; border-radius: 0 !important; -webkit-appearance: none; appearance: none; }
.chat-nuevo { background: var(--perfil-superficie, #ef7878); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Celular: sin pie institucional (queda la barra inferior). */
@media (max-width: 700px) {
body.social-body .footer-institucional { display: none !important; }
}
/* ===== Conversación a pantalla completa en celular (estilo app de mensajería) ===== */
.chat-dock-atras { display: none; }
@media (max-width: 767px) {
#chat-dock-container:has(.chat-dock-box:not(.minimizado)) { z-index: 480; }
.chat-dock-box:not(.minimizado) {
position: fixed; inset: 0; width: 100vw; height: 100dvh; max-height: none;
border: 0; border-radius: 0; box-shadow: none; z-index: 1;
background: var(--perfil-superficie, #fff); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.chat-dock-box:not(.minimizado) .chat-dock-header {
height: calc(58px + env(safe-area-inset-top)); flex-basis: calc(58px + env(safe-area-inset-top));
padding: env(safe-area-inset-top) 6px 0 2px; gap: 2px; cursor: default;
background: var(--perfil-superficie-2, var(--perfil-superficie, #ef7878));
box-shadow: 0 1px 0 var(--perfil-borde, rgba(255,255,255,.08));
}
.chat-dock-box:not(.minimizado) .chat-dock-atras {
display: grid; place-items: center; flex: none; width: 40px; height: 44px; border: 0; background: transparent;
color: var(--perfil-texto, inherit); border-radius: 50%; cursor: pointer;
}
.chat-dock-atras .icono-svg { width: 26px; height: 26px; }
.chat-dock-atras:active { background: color-mix(in srgb, currentColor 14%, transparent); }
.chat-dock-box:not(.minimizado) .chat-dock-identidad .avatar { --tam: 40px; width: 40px; height: 40px; }
.chat-dock-box:not(.minimizado) .chat-dock-identidad { gap: 10px; }
.chat-dock-box:not(.minimizado) .chat-dock-nombre-linea b { font-size: 16.5px; line-height: 1.2; }
.chat-dock-box:not(.minimizado) .chat-dock-datos small { font-size: 12.5px; opacity: .75; }
.chat-dock-box:not(.minimizado) [data-dock-min],
.chat-dock-box:not(.minimizado) [data-dock-close] { display: none; }
.chat-dock-box:not(.minimizado) .chat-dock-btn { width: 40px; height: 40px; font-size: 20px; }
.chat-dock-box:not(.minimizado) .chat-dock-mensajes {
padding: 12px 10px 10px; gap: 4px;
background:
radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--perfil-accent, #38bdf8) 7%, transparent), transparent 55%),
color-mix(in srgb, var(--perfil-superficie-2, var(--perfil-superficie, #eef2f7)) 92%, var(--perfil-accent, #38bdf8) 8%);
}
.chat-dock-box:not(.minimizado) .chat-burbuja {
max-width: 82%; padding: 7px 10px 5px; border-radius: 12px 12px 12px 3px; box-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.chat-dock-box:not(.minimizado) .chat-burbuja.mia { border-radius: 12px 12px 3px 12px; align-self: flex-end; }
.chat-dock-box:not(.minimizado) .chat-burbuja:not(.mia) { align-self: flex-start; }
.chat-dock-box:not(.minimizado) .chat-texto { font-size: 15.5px; line-height: 1.38; margin: 0; }
.chat-dock-box:not(.minimizado) .chat-burbuja-cab { display: none; }
.chat-dock-box.chat-dock-grupo:not(.minimizado) .chat-burbuja:not(.mia) .chat-burbuja-cab { display: flex; font-weight: 700; }
.chat-dock-box:not(.minimizado) .chat-hora { display: block; text-align: right; font-size: 10.5px; margin-top: 1px; }
.chat-dock-box:not(.minimizado) .chat-dock-form {
padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--perfil-superficie-2, var(--perfil-superficie, #eef2f7)) 92%, var(--perfil-accent, #38bdf8) 8%);
border-top: 0;
}
.chat-dock-box:not(.minimizado) .chat-dock-form-fila { gap: 6px; align-items: flex-end; }
.chat-dock-box:not(.minimizado) .chat-dock-form-fila input:not([type=file]) {
height: 44px; min-height: 44px; padding: 0 16px; border-radius: 22px; font-size: 16px;
background: var(--perfil-superficie, #fff); border: 1px solid var(--perfil-borde, rgba(0,0,0,.1));
}
.chat-dock-box:not(.minimizado) .chat-dock-icono { width: 38px; height: 44px; }
.chat-dock-box:not(.minimizado) .chat-dock-form-fila [type=submit] {
flex: none; width: 46px; height: 46px; min-height: 46px; padding: 0; border-radius: 50%; justify-content: center;
background: var(--perfil-accent, #ef7878); color: var(--perfil-acento-texto, #fff); border: 0; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.chat-dock-box:not(.minimizado) .chat-dock-form-fila [type=submit] span { display: none; }
.chat-dock-box:not(.minimizado) .chat-dock-form-fila [type=submit] .icono-svg { width: 22px; height: 22px; margin: 0; }
}
@media (max-width: 767px) { .chat-dock-privado:not(.minimizado) .chat-dock-identidad { cursor: pointer; } }
/* ===== Modo gestión de la cuenta oficial (técnico) ===== */
.barra-gestion {
position: fixed; top: 0; left: 0; right: 0; height: 32px; z-index: 9000;
display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 10px;
background: #b45309; color: #fff; font-size: 12.5px; font-weight: 600;
}
.barra-gestion b { font-weight: 800; }
.barra-gestion button { border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; cursor: pointer; }
.barra-gestion button:hover { background: rgba(255,255,255,.18); }
body.modo-gestion { padding-top: 32px; }
body.modo-gestion .superapp-header { top: 32px; }
body.modo-gestion #btnCerrarSesion,
body.modo-gestion .perfil-tk-gear-menu [data-gm="clave"],
body.modo-gestion .perfil-tk-gear-menu [data-gm="eliminar"] { display: none !important; }
/* ---------- Muro (móvil): mismas fichas que en escritorio, en tamaño compacto ---------- */
@media (max-width: 768px) {
#feed .muro-fila-pista { gap: 9px; }
#feed .muro-sug { flex: 0 0 118px; width: 118px; max-width: 118px; padding: 9px 7px 8px; gap: 2px; border-radius: 14px; }
#feed .muro-sug .avatar { --tam: 46px; }
#feed .muro-sug b { font-size: 12px; margin-top: 2px; }
#feed .muro-sug .handle, #feed .muro-sug small { font-size: 10px; line-height: 1.2; }
#feed .muro-sug .muro-sug-zona { font-size: 9.5px; padding: 1px 6px; }
#feed .muro-fila-pista { align-items: stretch; }
#feed .muro-sug .btn, #feed .muro-sug .btn.sec { min-height: 30px; height: 30px; margin-top: auto; flex: 0 0 auto; padding: 3px 6px; font-size: 11px; border-radius: 10px; }
}
/* Botón Seguir: siempre al pie de la ficha, a la misma altura en todas (con o sin zona/etiqueta). */
.muro-fila-pista { align-items: stretch; }
.muro-sug > .btn, .muro-sug > .btn.sec { margin-top: auto; flex: 0 0 auto; }
.muro-sug > small { margin-bottom: 4px; }
/* Descubrir en la fila de pestañas del muro (es un enlace, no un filtro) */
a.feed-tab { text-decoration: none; }
/* Puntito de novedades en las pestañas del muro */
.feed-tab { position: relative; }
.feed-tab.con-novedad::before {
content: ""; position: absolute; top: 6px; right: -7px; width: 8px; height: 8px; border-radius: 50%;
background: #ef4444; box-shadow: 0 0 0 2px var(--fondo, #fff);
}
/* Etiquetas de ranking (Top 10 jugadores / Top 100 populares) en perfil y publicaciones */
.badge-rol-chip.rol-top, .perfil-rol-chip.top { background: #fff1c2; color: #6b4a00; border: 1px solid #f0c24a; font-weight: 800; }
.badge-rol-chip.rol-top.top-populares, .perfil-rol-chip.top.top-populares { background: #e8ecff; color: #26306b; border-color: #aab4f0; }
.badge-rol-chip.rol-top.top-jugadores, .perfil-rol-chip.top.top-jugadores { background: #fff1c2 !important; color: #6b4a00 !important; border: 1px solid #f0c24a !important; }
.badge-rol-chip.rol-top.top-populares, .perfil-rol-chip.top.top-populares { background: #e8ecff !important; color: #26306b !important; border: 1px solid #aab4f0 !important; }
/* Celular: el rol (Jugador / Organizador…) va en la misma fila que el nombre; solo baja si no entra. */
@media (max-width: 700px) {
.post-autor-linea::after { content: none; display: none; }
.post-autor-linea .post-autor-nombre { order: 0; }
.post-autor-linea > .badge-verificado, .post-autor-linea > .badge-verificado-oficial, .post-autor-linea > [class*="verificado"] { order: 1; }
.post-autor-linea > .badge-rol-chip { order: 2; flex: 0 0 auto; width: auto; }
.post-autor-linea .post-autor-handle { order: 3; }
.post-autor-linea .apodo-post { order: 4; flex: 0 0 100%; }
}
/* Etiquetas de Top: debajo del nombre, las dos juntas en una misma fila */
.post-autor-linea > .top-fila { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 860px) {
.post-autor-linea > .top-fila { order: 4; flex: 0 0 100%; }
}
@media (max-width: 700px) {
.post-autor-linea > .top-fila { order: 3; flex: 0 0 100%; }
.post-autor-linea .post-autor-handle { order: 4; }
.post-autor-linea .apodo-post { order: 5; }
}
/* Celulares angostos: las dos etiquetas Top caben juntas en una sola fila */
@media (max-width: 430px) {
.post-autor-linea > .top-fila { flex-wrap: nowrap; gap: 4px; }
.post-autor-linea > .top-fila .badge-rol-chip { font-size: 9.5px !important; padding: 2px 6px !important; white-space: nowrap; letter-spacing: 0; }
}
/* Aro del avatar para Top 10 (dorado) y Top 100 (violeta), con brillo */
@keyframes topBrillo { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.avatar.top-oro { border: 3px solid #ffd54a !important; box-shadow: 0 0 0 2px rgba(255, 193, 7, .55), 0 0 14px 3px rgba(255, 193, 7, .75) !important; animation: topBrillo 2.4s ease-in-out infinite; }
.avatar.top-violeta { border: 3px solid #b57cff !important; box-shadow: 0 0 0 2px rgba(147, 88, 255, .55), 0 0 14px 3px rgba(147, 88, 255, .75) !important; animation: topBrillo 2.4s ease-in-out infinite; }
.perfil-tk-avatar.top-oro .perfil-tk-anillo { background: conic-gradient(from 200deg, #fff3b0, #ffc107 30%, #ff9800 55%, #ffe082 80%, #fff3b0) !important; opacity: 1 !important; box-shadow: 0 0 22px 5px rgba(255, 193, 7, .7); }
.perfil-tk-avatar.top-violeta .perfil-tk-anillo { background: conic-gradient(from 200deg, #e0c8ff, #9b5cff 30%, #6d28d9 55%, #c4a0ff 80%, #e0c8ff) !important; opacity: 1 !important; box-shadow: 0 0 22px 5px rgba(147, 88, 255, .7); }
.perfil-tk-avatar.top-oro .avatar, .perfil-tk-avatar.top-violeta .avatar { animation: none; box-shadow: none !important; border-color: #0c1524 !important; }
@media (prefers-reduced-motion: reduce) { .avatar.top-oro, .avatar.top-violeta { animation: none; } }
/* «Descubrir» como pestaña dentro del muro (celular) */
#panelDescubrir { display: none; width: 100%; height: 70vh; border: 0; background: transparent; color-scheme: normal; }
.social-centro.modo-descubrir > #panelDescubrir { display: block; }
.social-centro.modo-descubrir > :not(.feed-tabs):not(#panelDescubrir) { display: none !important; }
/* Mi Tienda (cuentas Comerciales): precio en gemas y etiqueta de servicio */
.precio-gemas { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px; background: rgba(56, 189, 248, .16); color: #7dd3fc; font-weight: 800; font-size: 13px; }
.catalogo-clase { display: inline-flex; padding: 2px 9px; border-radius: 99px; background: rgba(167, 139, 250, .18); color: #c4b5fd; font-weight: 700; font-size: 12px; }
.catalogo-precios { flex-wrap: wrap; align-items: center; }
/* Abrir Mi Tienda */
.tienda-info h3{margin:14px 0 4px;font-size:1.05em}
.tienda-info ul{margin:0;padding-left:20px}
.tienda-info li,.tienda-info p{margin:4px 0;line-height:1.45}
@media (max-width:720px){.tienda-info{font-size:16px}.perfil-abrir-tienda{min-height:48px;font-size:16px}}
.perfil-opiniones{padding:12px 14px;border-top:1px solid color-mix(in srgb,currentColor 12%,transparent)}
.perfil-op-tit{margin:0 0 8px;font-size:15px}
.perfil-op{padding:8px 10px;border-radius:10px;background:color-mix(in srgb,currentColor 6%,transparent);margin-bottom:6px}
.perfil-op p{margin:4px 0 0;overflow-wrap:anywhere}
.perfil-op-est{color:#e6a100;letter-spacing:1px}
/* Con un formulario abierto, el desenfoque de las tarjetas de atrás se apaga: en celulares hacía lenta cada letra que se escribía. */
body.modal-social-abierto * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.modal-social-abierto .social-modal input, body.modal-social-abierto .social-modal textarea, body.modal-social-abierto .social-modal select { transition: none !important; }
.aviso-item.aviso-destacado{position:relative;border:2px solid #ef7878;background:linear-gradient(135deg,rgba(239, 120, 120, .22),rgba(239, 120, 120, .06));box-shadow:0 0 0 3px rgba(239, 120, 120, .18),0 6px 18px rgba(239, 120, 120, .25);padding-top:16px}
.aviso-item.aviso-destacado b{font-size:14.5px;color:inherit}
.aviso-chapa{position:absolute;top:-9px;left:12px;background:#ef7878;color:#1a1a1a;font-size:10.5px;font-weight:900;letter-spacing:.04em;padding:2px 9px;border-radius:999px}
/* Panel «Comunidad» para organizadores y comerciantes */
.cn-panel{display:grid;gap:14px;margin-top:4px}
.cn-seccion h4{margin:0 0 8px;font-size:.95rem}
.cn-evento{border:1px solid var(--borde,rgba(128,128,128,.3));border-radius:12px;padding:9px 10px;margin-bottom:8px;display:grid;gap:5px}
.cn-ev-cab{display:flex;justify-content:space-between;gap:8px;align-items:center}
.cn-ev-cab b{font-size:.9rem;overflow-wrap:anywhere}
.cn-ev-num{display:flex;gap:14px;font-size:.82rem}
.cn-ev-num b{font-size:1.05rem}
.cn-chip{font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:999px;background:rgba(128,128,128,.2);white-space:nowrap}
.cn-chip.ok{background:#1f9d55;color:#fff}.cn-chip.vivo{background:#e0245e;color:#fff}
.cn-vacio{margin:0;font-size:.85rem;opacity:.75}
.cn-tabs{display:flex;gap:4px;margin-bottom:8px}
.cn-tabs button{flex:1;padding:7px 4px;border-radius:9px;border:1px solid var(--borde,rgba(128,128,128,.3));background:transparent;color:inherit;font:inherit;font-size:.74rem;font-weight:700;cursor:pointer}
.cn-tabs button.act{background:#ef7878;color:#1a1a1a;border-color:#ef7878}
.cn-orden,.cn-abrir{width:100%;padding:7px;border-radius:9px;border:1px solid var(--borde,rgba(128,128,128,.3));background:transparent;color:inherit;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;margin-bottom:6px}
.cn-abrir{margin:10px 0 0;background:rgba(239, 120, 120, .18)}
.cn-lista{display:grid;gap:7px}.cn-scroll{max-height:260px;overflow:auto}
.cn-fila{display:flex;gap:8px;align-items:center}
.cn-n{width:22px;height:22px;border-radius:50%;background:#ef7878;color:#1a1a1a;font-weight:800;font-size:.72rem;display:grid;place-items:center;flex:none}
.cn-c{flex:1;min-width:0}.cn-t{display:flex;justify-content:space-between;gap:6px;font-size:.82rem}
.cn-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cn-t span{white-space:nowrap;opacity:.8}
.cn-c small,.cn-resena small{opacity:.7;font-size:.74rem}
.cn-barra{height:5px;border-radius:3px;background:rgba(128,128,128,.2);margin-top:3px}.cn-barra i{display:block;height:100%;border-radius:3px;background:#ef7878}
.cn-prom{margin:0 0 6px;font-size:.85rem}.cn-est{color:#ef7878;letter-spacing:1px}
.cn-resena{font-size:.82rem;border-bottom:1px dashed rgba(128,128,128,.3);padding-bottom:6px}.cn-resena p{margin:3px 0 0}
.cn-panel[hidden]{display:none}
.cn-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}.cn-cab h4{margin:0}
.cn-nuevo{flex:none;padding:6px 10px;border-radius:9px;border:0;background:#ef7878;color:#1a1a1a;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer;white-space:nowrap}
.cn-panel{min-width:0;overflow:hidden}.cn-seccion{min-width:0}
.cn-tabs button{min-width:0;padding:7px 2px;font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-lista:not(.cn-scroll){max-height:300px;overflow-y:auto;padding-right:4px}
.cn-evento{min-width:0}
.cn-cab h4{white-space:nowrap;font-size:.88rem}.cn-nuevo{padding:5px 8px;font-size:.7rem}
.cn-titulo{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:800;cursor:pointer;text-align:left}.cn-titulo:hover{text-decoration:underline}
/* Menú vertical móvil más angosto y compacto */
.cajon-cuenta .cc-cab { padding: 0 16px 10px; }
.cajon-cuenta .cc-avatar .avatar { --tam: 44px; }
.cajon-cuenta .cc-nombre { font-size: 16px; margin-top: 8px; }
.cajon-cuenta .cc-handle, .cajon-cuenta .cc-cuentas { font-size: 13px; }
.cajon-cuenta .cc-item { gap: 12px; padding: 6px 16px; min-height: 42px; font-size: 15.5px; }
.cajon-cuenta .cc-item svg { width: 21px; height: 21px; }
.cajon-cuenta .cc-lista hr { width: calc(100% - 32px); margin: 6px 16px; }
.cajon-cuenta .cc-lista hr ~ .cc-item { min-height: 38px; font-size: 14px; }
.cajon-cuenta .cc-lista hr ~ .cc-item svg { width: 19px; height: 19px; }