/* ========================================================= GABA3 — ESTILOS GLOBALES Y PANTALLA PRINCIPAL Usado por index.html y como base compartida. No contiene estilos específicos de sala.html. ========================================================= */ /* Ícones morphicons compartilhados entre todas as salas (frontend/roomIcons.js). Tamanho base discreto; cada tela pode sobrescrever conforme o botão. */ [data-morph-icone]{ display:inline-grid; place-items:center; line-height:1; } [data-morph-icone] svg{ width:18px; height:18px; pointer-events:none; } /* ========================================================= GABA3 — PORTADA PRINCIPAL Código limpio para index.html ========================================================= */ :root{ --morado:#0878e8; --morado-oscuro:#0454ac; --rosa:#ff8a19; --azul:#1587ff; --fondo:#000000; --panel:#000000; --panel-claro:#000000; --texto:hsl(206, 21%, 85%); --texto-suave:hwb(134 49% 45%); --borde:#ffffff1c; --sombra:0 18px 48px #00000055; --radio:22px; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } /* Regra global e definitiva: NUNCA mostrar as setinhas nativas de rolagem do navegador, em nenhum canto da plataforma, de nenhuma cor — exigência repetida várias vezes pelo dono (fica feio e os clientes reclamam). A rolagem sempre acontece pela roda do mouse, toque ou arrasto, nunca clicando numa seta. Como está em estilo.css (carregado por toda página do site), vale pra qualquer elemento com scroll, em qualquer sala ou tela. Achamos vários painéis (ex.: "Minhas salas") que tinham overflow:auto sem NENHUM estilo de scrollbar — aí o navegador mostra a barra nativa cheia (com seta) em vez da fina/colorida usada no resto da plataforma. Em vez de caçar um por um, isso vira o padrão de TODO elemento com scroll — quem já tem seu próprio estilo mais específico continua valendo, isso aqui é só o "fallback" universal. */ *{ scrollbar-width:thin; scrollbar-color:rgba(85,201,0,.4) transparent; } *::-webkit-scrollbar{ width:6px; height:6px; } *::-webkit-scrollbar-track{ background:transparent; } *::-webkit-scrollbar-thumb{ background:rgba(85,201,0,.4); border-radius:6px; } *::-webkit-scrollbar-button{display:none!important;width:0!important;height:0!important} body{ min-height:100vh; margin:0; overflow-x:hidden; color:var(--texto); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; background: linear-gradient(rgba(20,10,4,.22), rgba(20,10,4,.22)), url("assets/brand/fondo-madera-gaba3.png?v=real1"); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; } /* Portada principal (index.html, sem classe própria): rolagem só pela roda do mouse/toque, sem NENHUMA barra de rolagem visível (nem fina, nem colorida) — pedido explícito do dono pra essa tela. Quem controla a barra da janela é o , não o — precisa dos dois. */ html:has(> body:not([class])){ scrollbar-width:none; } html:has(> body:not([class]))::-webkit-scrollbar{display:none} body:not([class]){ scrollbar-width:none; } body:not([class])::-webkit-scrollbar{display:none} #inicio, body.auth-page{ position:relative; z-index:0; background: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,.10)), url("assets/brand/fondo-piedra-gaba3.png?v=1"); background-size:1100px auto; background-position:top center; background-repeat:repeat; } body.auth-page{ height:100dvh; overflow:hidden!important; background-attachment:fixed; padding-top:12px!important; padding-bottom:12px!important; } body.auth-page .auth-logo{ margin-bottom:8px!important; } body.auth-page .auth-card{ max-height:none!important; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(210,160,90,.45) transparent; } body.auth-page .auth-card::-webkit-scrollbar{ width:6px; } body.auth-page .auth-card::-webkit-scrollbar-button{ display:none; height:0; width:0; } body.auth-page .auth-card::-webkit-scrollbar-track{ background:transparent; } body.auth-page .auth-card::-webkit-scrollbar-thumb{ background:rgba(210,160,90,.45); border-radius:6px; } body.auth-page .auth-card::-webkit-scrollbar-thumb:hover{ background:rgba(210,160,90,.65); } body::before{ content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:rgba(0,0,0,.18); } button, input, select, textarea{ font:inherit; } button{ color:inherit; } button, a, select{ -webkit-tap-highlight-color:transparent; } a{ color:inherit; text-decoration:none; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ========================================================= CABECERA ========================================================= */ .barra-superior{ position:sticky; z-index:120; top:0; min-height:92px; display:grid; grid-template-columns:minmax(230px,320px) minmax(320px,760px) minmax(300px,1fr); align-items:center; gap:28px; padding:14px 42px; box-shadow:0 12px 32px #00000044; } /* Sem tablita — logo e nome soltos direto sobre a pedra do cabeçalho. */ .marca{ position:relative; display:flex; align-items:center; gap:12px; width:max-content; font-weight:950; padding:14px 22px; } .marca-icono{ width:69px; height:46px; display:block; object-fit:contain; background:transparent; border:none; box-shadow:none; } .marca-letras{ display:flex; gap:1px; font-size:46px; line-height:1; letter-spacing:-2px; } .marca-letras i{ font-style:normal; } .marca-letras i:nth-child(1),.marca-letras i:nth-child(2),.marca-letras i:nth-child(3),.marca-letras i:nth-child(4),.marca-letras i:nth-child(5),.marca-letras i:nth-child(6){color:#fff} .busqueda-interna{ position:relative; width:100%; } .lienzo-busca-cabecera{display:none} .buscador-principal{ height:54px; display:flex; align-items:center; gap:12px; padding:0 10px 0 17px; border:1px solid hsl(0, 0%, 0%); border-radius:17px; background:lab(0% 0 0); box-shadow:inset 0 1px 0 hsla(0, 0%, 0%, 0.031); } .icono-busqueda{ flex:none; color:#72baff; font-size:26px; line-height:1; } .buscador-principal input{ min-width:0; width:100%; color:#fff; font-weight:700; border:0; outline:0; background:transparent; } .buscador-principal input::placeholder{ color:hsl(200, 43%, 99%); opacity:1; } .buscador-principal kbd{ flex:none; padding:8px 13px; color:hsl(0, 0%, 100%); font-family:inherit; font-size:10px; border:1px solid hsla(0, 0%, 0%, 0.044); border-radius:10px; background:hsl(0, 0%, 0%); } .resultados-busqueda{ position:absolute; z-index:70; top:62px; left:0; right:0; max-height:380px; overflow:auto; border:1px solid var(--borde); border-radius:16px; background:#171827f5; box-shadow:var(--sombra); } .cuenta-usuario{ justify-self:end; display:flex; align-items:center; gap:12px; } .selector-idioma select{ min-height:44px; padding:0 14px; color:#fff; border:1px solid #ffffff1d; border-radius:13px; outline:0; background:#171827; cursor:pointer; } .boton-notificaciones, .perfil-miniatura{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid #ffffff17; border-radius:50%; background:#171827; cursor:pointer; } .header-criar-conta-link{ flex:none; display:grid; place-items:center; height:44px; padding:0 14px; border:1px solid var(--gaba3-verde-brillante,#63bd44); border-radius:999px; background:transparent; color:var(--gaba3-verde-brillante,#63bd44); font-size:13px; font-weight:800; text-decoration:none; white-space:nowrap; } .header-criar-conta-link:hover{background:rgba(85,201,0,.12)} .header-criar-conta-link[hidden]{display:none!important} @media(max-width:390px){ .header-criar-conta-link{height:36px;padding:0 10px;font-size:11px} } .boton-notificaciones{color:#fff} .boton-notificaciones svg{width:20px;height:20px} .icono-buzon{color:#fff!important;display:grid;place-items:center} .icono-buzon svg{width:19px;height:19px} .datos-plan{ display:flex; flex-direction:column; text-align:right; } .datos-plan small{ color:#a4a1b2; font-size:9px; } .datos-plan strong{ color:#fff; font-size:13px; } .perfil-miniatura{ color:#fff; font-size:12px; font-weight:900; background:linear-gradient(135deg,#f2994a,#c65d89); box-shadow:0 0 0 3px #ffffff14; } .pagina-sala .perfil-miniatura.is-profile-ball{ color:#fff; background:linear-gradient(160deg,#244018,#132410); border:2px solid #6dff4a; box-shadow:0 0 0 3px rgba(85,201,0,.28), 0 8px 18px #0007; overflow:hidden; } .pagina-sala .perfil-miniatura.is-profile-ball img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; } /* ---- Wrapper compartido para todos los iconos del encabezado ---- */ .icono-header-wrapper{ position:relative; flex:none; } /* ---- Dropdown base: mismo estilo madera para campana, sobre y perfil ---- */ .icono-header-dropdown{ position:absolute; top:calc(100% + 10px); right:0; z-index:300; min-width:260px; max-width:340px; padding:8px; border:1px solid rgba(0,0,0,.55); border-top-color:rgba(0,0,0,.70); border-radius:16px; background: linear-gradient(180deg,rgba(245,195,120,.07) 0%,rgba(100,55,15,.06) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/cover no-repeat; box-shadow: 0 16px 48px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07); display:grid; gap:3px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .icono-header-dropdown[hidden]{ display:none; } /* Texto vacío */ .idd-vacio{ padding:16px 14px; color:rgba(200,175,140,.55); font-size:13px; text-align:center; } /* Ítem de notificación / mensaje */ .idd-item{ display:grid; gap:2px; width:100%; padding:10px 14px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(0,0,0,.20); color:rgba(240,215,175,.90); font:inherit; font-size:13px; text-align:left; cursor:pointer; transition:background .15s ease; } .idd-item:hover{ background:rgba(0,0,0,.38); border-color:rgba(46,204,85,.20); } .idd-item-sala{ color:rgba(100,220,120,.88); font-size:12px; font-weight:700; } .idd-item-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .idd-item-meta{ color:rgba(200,175,140,.50); font-size:11px; } /* ---- Wrapper y dropdown del perfil ---- */ .perfil-menu-wrapper{ position:relative; flex:none; } /* Só a bolita de perfil do cabeçalho principal (não a da sala): um respiro a mais entre ela e o envelope de mensagens, que fica colado demais com o gap padrão de .cuenta-usuario. */ #header-perfil-slot{ margin-left:10px; } .perfil-dropdown{ position:absolute; top:calc(100% + 10px); right:0; z-index:300; min-width:210px; padding:8px; border:1px solid rgba(0,0,0,.55); border-radius:16px; background: linear-gradient(180deg,rgba(245,195,120,.07) 0%,rgba(100,55,15,.06) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/cover no-repeat; box-shadow: 0 16px 48px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07); display:grid; gap:3px; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } .perfil-dropdown[hidden]{ display:none; } .perfil-dropdown-usuario{ padding:10px 14px 8px; border-bottom:1px solid rgba(255,255,255,.10); margin-bottom:4px; } .perfil-dropdown-nombre{ display:block; color:rgba(240,215,170,.85); font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .perfil-dropdown button{ display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px; border:0; border-radius:10px; background:transparent; color:rgba(240,215,170,.88); font-size:13.5px; font-weight:600; font-family:inherit; text-align:left; cursor:pointer; transition:background .15s ease,color .15s ease; } .perfil-dropdown button.perfil-dd-criar-sala{ background:rgba(85,201,0,.14); border:1px solid rgba(85,201,0,.35); color:#7af040; font-weight:700; } .perfil-dropdown button.perfil-dd-criar-sala:hover{ background:rgba(85,201,0,.24); color:#b8ff80; } .perfil-dropdown button:hover{ background:rgba(0,0,0,.35); color:rgba(255,235,200,1); } .perfil-dropdown .opcion-peligro{ color:rgba(255,100,80,.82); } .perfil-dropdown .opcion-peligro:hover{ background:rgba(200,30,20,.22); color:rgba(255,130,110,1); } .perfil-separador{ border:0; border-top:1px solid rgba(255,255,255,.09); margin:4px 6px; } /* Contador de notificaciones en campana */ .boton-notificaciones{ position:relative; } .contador-notificaciones{ position:absolute; top:-6px; right:-6px; min-width:17px; height:17px; display:grid; place-items:center; border:2px solid #08110b; border-radius:99px; background:#ef3f5b; color:#fff; font-size:9px; font-weight:900; line-height:1; padding:0 3px; pointer-events:none; } .contador-notificaciones[hidden]{ display:none!important; } /* Envolvente del buzón: quita la heredada y centra el ✉ */ .buzon-participacion.boton-buzon{ grid-template-rows:1fr; place-items:center; } /* ========================================================= ESTRUCTURA GENERAL ========================================================= */ .estructura{ display:block; position:relative; } /* ========================================================= GABA3 — Barra de acessos rápidos (DIREITA, sempre visível) Web/Tablet. Oculta no celular (acessos no menu ☰). ========================================================= */ .gaba3-rail{ display:none; } @media (min-width:821px){ body:not(.pagina-sala):not(.shorts-page){ --gaba3-rail-w: 72px; } body:not(.pagina-sala):not(.shorts-page) .gaba3-rail{ display:flex; position:fixed; z-index:40; top:var(--gaba3-header-h,92px); bottom:0; right:0; left:auto; flex-direction:column; align-items:center; justify-content:center; gap:8px; width:var(--gaba3-rail-w); padding:12px 6px; margin:0; border-left:1px solid rgba(255,255,255,.10); border-radius:0; background:none; box-shadow:none; pointer-events:auto; } body:not(.pagina-sala):not(.shorts-page) .gaba3-rail::before{ content:none; } /* O carril tem sua própria faixa reservada full-height (top:0 até bottom:0) — nunca sobrepõe o conteúdo, mesmo rolando a página. Por isso o `main` reserva a largura inteira dela (largura + respiro), o tempo todo, e nada de margin negativo pra deixar cards passarem por baixo dela como antes. */ body:not(.pagina-sala):not(.shorts-page) main{ padding-right:calc(var(--gaba3-rail-w) + 18px); } } @media (min-width:821px) and (max-width:1180px){ body:not(.pagina-sala):not(.shorts-page){ --gaba3-rail-w: 64px; } body:not(.pagina-sala):not(.shorts-page) .gaba3-rail{ gap:6px; padding:12px 4px; } body:not(.pagina-sala):not(.shorts-page) .gaba3-rail-ico{ width:26px; height:26px; } body:not(.pagina-sala):not(.shorts-page) .gaba3-rail-ico svg{ width:21px; height:21px; } body:not(.pagina-sala):not(.shorts-page) .gaba3-rail-txt{ font-size:8px; max-width:56px; } } .gaba3-rail-item{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:4px; width:100%; padding:3px 2px; border:0; background:transparent; color:rgba(135,220,85,.82); text-decoration:none; font:inherit; cursor:pointer; transition:color .18s ease, transform .18s ease; } .gaba3-rail-item:hover, .gaba3-rail-item:focus-visible{ color:#9ef060; outline:none; transform:translateY(-1px); } .gaba3-rail-item[aria-current="page"], .gaba3-rail-item.activo{ color:var(--gaba3-verde-brillante,#70df13); } .gaba3-rail-ico{ display:grid; place-items:center; width:32px; height:32px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.42)); } .gaba3-rail-ico svg{ width:26px; height:26px; pointer-events:none; } .gaba3-rail-item:hover .gaba3-rail-ico{ filter:drop-shadow(0 3px 6px rgba(0,0,0,.48)) brightness(1.05); } .gaba3-rail-txt{ max-width:66px; font-size:9.5px; font-weight:500; letter-spacing:.015em; line-height:1.15; text-align:center; white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color:#fff; opacity:1; } /* Acessos rápidos no menu ☰ — legado; o menu completo já inclui os 4 itens */ .mli-rail-rapido{ display:contents; } .alternar-minhas-salas{position:fixed;z-index:55;left:0;top:142px;width:38px;height:48px;display:grid;place-items:center;padding:0;border:1px solid #55c90055;border-left:0;border-radius:0 13px 13px 0;background:#07130ad9;color:var(--gaba3-verde,#55c900);font-weight:900;cursor:pointer;box-shadow:0 8px 22px #0005}.alternar-minhas-salas span:first-child{font-size:26px;line-height:1}.estrutura.minhas-salas-abertas{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;padding-left:18px}.estrutura.minhas-salas-abertas .alternar-minhas-salas{position:sticky;grid-column:1;grid-row:1;align-self:start;justify-self:end;top:142px;left:auto;border:1px solid #55c90055;border-radius:13px;padding:8px}.painel-minhas-salas{display:none}.estrutura.minhas-salas-abertas .painel-minhas-salas{display:block;grid-column:1;grid-row:1;align-self:start;position:sticky;top:142px;max-height:calc(100vh - 160px);overflow:auto;padding:14px;border:1px solid #55c90036;border-radius:18px;background:#08110beF;box-shadow:0 16px 36px #0005}.estrutura.minhas-salas-abertas main{grid-column:2;min-width:0;margin:0;padding-left:0}.painel-minhas-salas header{display:flex;justify-content:space-between;align-items:start;padding-bottom:12px;border-bottom:1px solid #ffffff10}.painel-minhas-salas small{color:var(--gaba3-verde,#55c900);font-weight:900;letter-spacing:.08em}.painel-minhas-salas h2{margin:3px 0 0;font-size:18px;color:var(--gaba3-verde,#55c900)}.painel-minhas-salas header button{border:0;background:transparent;color:#cce8d0;font-size:26px;cursor:pointer}.minhas-salas-grupo{border-bottom:1px solid #ffffff0c}.minhas-salas-grupo>button{width:100%;display:flex;justify-content:space-between;gap:8px;padding:12px 0;border:0;background:transparent;color:#fff;text-align:left;font-weight:800;cursor:pointer}.minhas-salas-grupo>button small{padding:2px 7px;border-radius:99px;background:#173321;color:#baffca}.minhas-salas-lista{display:grid;gap:7px;padding:0 0 12px}.minha-sala{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;width:100%;padding:8px;border:1px solid #ffffff12;border-radius:10px;background:#0b1710;color:#eaf5ec;text-align:left;cursor:pointer}.minha-sala img,.minha-sala .miniatura-sala{width:32px;height:32px;border-radius:8px;object-fit:cover;background:#1b4026;display:grid;place-items:center}.minha-sala b,.minha-sala small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minha-sala small{color:#aac4af;font-size:10px}.minha-sala em{color:var(--gaba3-verde,#55c900);font-size:10px;font-style:normal}.minhas-salas-vazia{padding:0 0 12px;color:#90a994;font-size:12px} main{ width:100%; max-width:2600px; margin:0 auto; padding:0 28px 70px; } /* ========================================================= CATEGORÍAS ========================================================= */ .categorias-contenedor{ position:sticky; z-index:110; top:92px; margin:0 -28px; padding:10px 28px 4px; box-shadow:0 10px 18px #00000024; will-change:transform; } .categorias-salas{ display:flex; align-items:center; gap:10px; width:100%; overflow-x:auto; overflow-y:hidden; padding:0; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; } .categorias-salas::-webkit-scrollbar{ display:none; } .categoria-sala{ flex:0 0 auto; min-height:45px; padding:0 20px; /* Texto cálido sobre madera oscura */ color:#f0e4d0; font-size:14px; font-weight:750; white-space:nowrap; /* Borde sutil de madera */ border:1px solid rgba(115,72,22,.38); border-radius:13px; /* Madera oscura real: la imagen lleva toda la veta. El degradado aporta solo una profundidad mínima de barniz. */ background: linear-gradient(180deg, rgba(255,210,140,.05) 0%, rgba(0,0,0,.07) 100%), url("assets/brand/fondo-madera-oscura-gaba3.png?v=real1") center/190px auto; cursor:pointer; transition: background .25s ease, border-color .25s ease, color .25s ease; } .categoria-sala:hover{ /* Madera clara barnizada — el tono cálido es casi imperceptible, la veta de la imagen es la protagonista */ border-color:rgba(190,140,60,.65); background: linear-gradient(180deg, rgba(255,238,195,.13) 0%, rgba(240,215,162,.08) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/190px auto; color:#2a1506; } .categoria-sala.activa{ color:#fff; border-color:#1b8cff; background:linear-gradient(135deg,#168eff,#075ecb); } .flecha-categorias{ position:absolute; z-index:5; top:50%; width:43px; height:43px; display:grid; place-items:center; color:#fff; font-size:29px; line-height:1; border:1px solid #ffffff28; border-radius:50%; background:#15172cf2; box-shadow:0 8px 20px #0008; transform:translateY(-47%); cursor:pointer; } .flecha-categorias[hidden]{ display:none; } .flecha-izquierda{ left:48px; } .flecha-derecha{ right:48px; } .flecha-izquierda::after, .flecha-derecha::before{ content:""; position:absolute; z-index:-1; top:-9px; bottom:-9px; width:68px; pointer-events:none; } .flecha-izquierda::after{ left:-13px; background:linear-gradient(90deg,#10152b 45%,transparent); } .flecha-derecha::before{ right:-13px; background:linear-gradient(270deg,#122344 45%,transparent); } /* ========================================================= ACESSOS RÁPIDOS DA PLATAFORMA (grade de tipos de sala) ========================================================= */ .accesos-plataforma{ display:flex; align-items:stretch; gap:10px; width:100%; overflow-x:auto; overflow-y:hidden; padding:2px 0 4px; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; } .accesos-plataforma::-webkit-scrollbar{ display:none; } .acceso-plataforma{ position:relative; flex:1 1 0; min-width:92px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:0; padding:12px 8px; text-align:center; text-decoration:none; color:#f0e4d0; border:1px solid rgba(255,255,255,.10); border-radius:16px; background:rgba(0,0,0,.10); cursor:pointer; transition:background .25s ease,border-color .25s ease,transform .15s ease; } .acceso-plataforma:hover, .acceso-plataforma:focus-visible{ border-color:rgba(190,140,60,.65); transform:translateY(-2px); background: linear-gradient(180deg, rgba(255,238,195,.13) 0%, rgba(240,215,162,.08) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/190px auto; } .acceso-plataforma-icono{ position:relative; display:grid; place-items:center; width:44px; height:44px; margin-top:-2px; border-radius:14px; color:#fff; line-height:1; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 4px 10px rgba(0,0,0,.35); transition:transform .2s ease; /* Bug real relatado pelo dono: rolando a página com o mouse em cima de um ícone (aciona :hover, que já usa transform:scale), a franja fica "presa" numa pintura incompleta — só metade do círculo aparece, mesmo depois de soltar o hover. É um problema conhecido do navegador ao animar transform dentro de um ancestral position:sticky sem já ter uma camada própria de composição pronta. will-change força essa camada a existir ANTES da animação começar, em vez de criá-la no meio do gesto de rolar — corrige o rasgo sem mudar nada visualmente. */ will-change:transform; } .acceso-plataforma-icono svg{ width:22px; height:22px; overflow:visible; } /* Luz tipo LED no lado direito de cada ícone (pedido do dono, 2026-09-15, corrigido: ele nunca quis uma lua — quis o MESMO efeito de luz/painel LED que a barra horizontal já tinha embaixo do ícone, só que iluminando o lado direito). Mesma receita exata de antes (gradiente que funde nas pontas + box-shadow de brilho difuso), girada 90° pra virar uma tira vertical de luz colada no lado direito do ícone. */ .acceso-plataforma-icono::after{ content:""; position:absolute; top:8%; bottom:8%; right:-6px; width:3px; border-radius:2px; background:linear-gradient(180deg,transparent,#55c900,transparent); box-shadow:0 0 7px 2px rgba(85,201,0,.7); } .acceso-plataforma:hover .acceso-plataforma-icono, .acceso-plataforma:focus-visible .acceso-plataforma-icono{ transform:scale(1.08); } .acceso-plataforma-icono--privado{background:linear-gradient(135deg,#3ad81e,#1f8f10)} .acceso-plataforma-icono--profesionales{background:linear-gradient(135deg,#3aa0ff,#0b5fc9)} .acceso-plataforma-icono--comercio{background:linear-gradient(135deg,#ffa53a,#c96a0c)} .acceso-plataforma-icono--juegos{background:linear-gradient(135deg,#b25bf0,#7420b8)} .acceso-plataforma-icono--creadores{background:linear-gradient(135deg,#ff5d8f,#c81f4f)} .acceso-plataforma-icono--talleres-ia{background:linear-gradient(135deg,#3ad4d0,#0f8f8c)} .acceso-plataforma-icono--transporte{background:linear-gradient(135deg,#ffe14d,#d9a300)} .acceso-plataforma-icono--v-cortos{background:linear-gradient(135deg,#ff4d4d,#c81414)} .acceso-plataforma-texto{ display:flex; flex-direction:column; gap:0; width:100%; margin-top:-8px; } .acceso-plataforma-texto small{ transform:translateY(-4px); } .acceso-plataforma-texto b{ font-size:12px; font-weight:700; color:#ffffff; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:.01em; } .acceso-plataforma-texto small{ font-size:10px; font-weight:500; color:#ffffff!important; line-height:1.1; } @media (max-width:820px){ /* Carrossel horizontal real: os acessos NUNCA encolhem para caber todos na tela (isso é o que cortava os nomes em "Priva...", "Profi..."). Cada cartão mantém largura fixa e legível; o resto se descobre deslizando. Mas a barra de rolagem fica escondida de propósito (scrollbar-width: none) e não havia nenhuma outra pista visual — o dono via o 3º ícone cortado bem na borda e achava que estava quebrado, não que dava pra arrastar. Correção real: desvanece a borda direita (sinal universal de "tem mais, deslize") e nunca para bem no meio de um ícone. */ .accesos-plataforma{ scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent 100%); } .acceso-plataforma{ flex:0 0 auto; width:92px; min-width:92px; padding:9px 5px; border-radius:13px; gap:4px; scroll-snap-align:start; /* Pedido do dono 2026-09-13: sem a caixa (fundo escuro + borda) por trás de cada ícone no celular — só o círculo colorido do ícone e o nome, limpos, direto sobre o fundo da página. */ background:transparent; border:0; } /* A regra de :hover/:focus-visible (acima, linha ~938) põe uma imagem de madeira real (fondo-madera-gaba3.png) atrás do ícone — no celular isso aparece ao tocar (focus-visible por toque), exatamente a "caixa com fundo madeira" que o o dono via. Sem madeira nenhuma aqui, só o laranja sutil de destaque. */ .acceso-plataforma:hover, .acceso-plataforma:focus-visible{ border-color:transparent; background:transparent; } .acceso-plataforma-icono{ width:36px; height:36px; border-radius:11px; } .acceso-plataforma-icono svg{ width:18px; height:18px; } .acceso-plataforma-texto b{ font-size:10px; white-space:normal; line-height:1.1; overflow:visible; text-overflow:clip; overflow-wrap:normal; word-break:keep-all; hyphens:none; } .acceso-plataforma-texto small{ display:none; } } /* ========================================================= PORTADA DESTACADA ========================================================= */ .portada-principal{ display:grid; grid-template-columns:minmax(0,2.15fr) minmax(300px,1fr); gap:24px; margin:4px 0 30px; align-items:stretch; } .sala-destacada, .crear-sala-lateral{ min-height:370px; border:1px solid #ffffff0f; border-radius:var(--radio); box-shadow:var(--sombra); } .sala-destacada{ position:relative; overflow:hidden; isolation:isolate; background: linear-gradient(90deg,rgba(9,10,19,.85) 0%,rgba(9,10,19,.7) 52%,rgba(9,10,19,.45) 100%), linear-gradient(0deg,rgba(9,10,19,.72) 0%,transparent 55%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/cover no-repeat; } .sala-destacada::after{ content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,transparent 45%,#090a13ba); } .destacada-contenido{ position:absolute; z-index:2; left:42px; bottom:39px; width:min(660px,72%); } .etiqueta-destacada{ display:inline-flex; align-items:center; min-height:38px; padding:0 16px; color:#fff; font-size:12px; font-weight:900; border-radius:999px; background:var(--rosa); box-shadow:0 8px 18px #ff3f7440; } .destacada-contenido h1{ margin:19px 0 12px; max-width:760px; color:#fff; font-size:clamp(34px,3.1vw,54px); line-height:1.04; letter-spacing:-2px; text-shadow:0 4px 18px #000; } .destacada-contenido p{ max-width:700px; margin:0; color:#eceaf3; font-size:16px; line-height:1.65; text-shadow:0 2px 9px #000; } .boton-ver-sala{ min-height:54px; margin-top:24px; padding:0 28px; color:#161625; font-weight:850; border:0; border-radius:999px; background:#fff; box-shadow:0 10px 24px #0004; cursor:pointer; transition:transform .18s ease; } .boton-ver-sala:hover{ transform:translateY(-2px); } .crear-sala-lateral{ display:flex; flex-direction:column; justify-content:space-between; padding:38px; background: radial-gradient(circle at 100% 0,#1587ff2d,transparent 38%), linear-gradient(145deg,#0b1725,#101d31); } .saludo{ margin:0 0 24px; color:var(--azul); font-size:12px; font-weight:950; letter-spacing:1.4px; } .crear-sala-lateral h2{ margin:0; max-width:460px; color:#fff; font-size:clamp(30px,2.6vw,45px); line-height:1.12; letter-spacing:-1.5px; } .crear-sala-lateral p:not(.saludo){ margin:28px 0 0; color:#c8d3e0; font-size:16px; line-height:1.65; } /* Reservado para patrocínio autorizado no futuro. Fica oculto até existir uma campanha aprovada e nunca ocupa o espaço do texto ou da ação principal. */ .espaco-patrocinio[hidden]{display:none} .espaco-patrocinio:not([hidden]){margin-top:14px;padding:9px 11px;border:1px solid #55c90040;border-radius:10px;color:#d8eadb;background:#071109;font-size:12px} .boton-principal{ min-height:52px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:0 22px; color:#fff; font-size:13px; font-weight:850; border:0; border-radius:14px; background:linear-gradient(135deg,#168eff,#075ecb); box-shadow:0 10px 24px #0878e843; cursor:pointer; transition:transform .18s ease,filter .18s ease; } .boton-principal:hover{ transform:translateY(-2px); filter:brightness(1.06); } .boton-principal span{ font-size:20px; } /* Llamadas a la acción de creación: azul visible sobre la tarjeta naranja. */ #abrir-creador, #guardar-sala{ color:#fff; background:linear-gradient(135deg,#168eff,#075ecb); box-shadow:0 10px 24px #249cff42; } #abrir-creador:hover, #guardar-sala:hover{filter:brightness(1.1)} /* ========================================================= SECCIONES Y TARJETAS ========================================================= */ .seccion{ margin-top:16px; } .portada-principal + .seccion{ margin-top:0; } .seccion-cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; padding-left:10px; border-left:4px solid var(--acento-secao,var(--gaba3-verde,#55c900)); border-radius:2px; } /* Acento de cor por categoria — mesma cor do ícone dela lá em cima na franja (Comércio laranja, Jogos roxo, Criadores rosa...). Só uma barrinha ao lado do título, sem tingir o texto (mantém contraste/hierarquia como já era) — serve pra saber em que seção você está descendo a página sem precisar ler o título toda vez. */ #comercio-vivo .seccion-cabecera, #comercio-destacado .seccion-cabecera{--acento-secao:#ffa53a} #profissionais-vivo .seccion-cabecera, #profissionais-destacado .seccion-cabecera{--acento-secao:#3aa0ff} #jogos-vivo .seccion-cabecera, #jogos-destacado .seccion-cabecera{--acento-secao:#b25bf0} #criadores-vivo .seccion-cabecera, #criadores-destacado .seccion-cabecera{--acento-secao:#ff5d8f} #shorts-gaba3 .seccion-cabecera{--acento-secao:#ff8a3a} #salas-privadas .seccion-cabecera{--acento-secao:#3ad81e} .seccion-cabecera > div{ display:flex; align-items:center; gap:10px; } .seccion-cabecera h2{ margin:0; font-size:21px; font-weight:900; letter-spacing:-.01em; } /* Títulos de navegación de la portada: verde GABA3, sin teñir el contenido de las tarjetas para preservar la jerarquía y el contraste. */ .seccion-cabecera h2{ color:var(--gaba3-verde, #55c900); } /* "Ver todos" tem que ler como ação secundária, não como título — por isso fica menor/mais discreto agora que o h2 ficou maior (hierarquia clara entre "isto é a seção" e "isto é um atalho"). */ .seccion-cabecera a{ color:#8ad4ff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; opacity:.8; } .gaba3-ver-todas-link{ border:0; background:transparent; padding:0; cursor:pointer; color:#8ad4ff; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; opacity:.8; font-family:inherit; } .gaba3-ver-todas-link:hover{ opacity:1; } .en-vivo-punto{ width:9px; height:9px; border-radius:50%; background:#ef3f5b; box-shadow:0 0 0 4px #ffe6ea; } .rejilla-salas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .sala-card{ position:relative; overflow:hidden; color:#fff; border:1px solid var(--borde); border-radius:18px; background:#17182a; box-shadow:0 8px 25px #0003; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .sala-card:hover{ transform:translateY(-3px); border-color:#2fcf6870; box-shadow:0 16px 38px #0005; } .sala-imagen{ position:relative; height:235px; display:grid; place-items:center; overflow:hidden; } /* Apresentação real do dono (vídeo/imagem) — cobre o gradiente/emoji genérico quando existe, pedido do dono 2026-09-10. */ .sala-imagen-real{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; } .sala-imagen::before{ content:""; position:absolute; width:210px; height:210px; left:-50px; top:-80px; border-radius:50%; background:#ffffff20; } .imagen-cafe{background:linear-gradient(135deg,#3b2015,#c57d3a)} .imagen-estudio{background:linear-gradient(135deg,#194b72,#5ba7d4)} .imagen-fiesta{background:linear-gradient(135deg,#702a70,#e77982)} .escena-emoji, .gaba3-destaque-hero-emoji, .etiqueta-vivo, .vistas, .gaba3-destaque-hero-vistas{ display:none!important; } .escena-emoji{ z-index:1; font-size:72px; filter:drop-shadow(0 12px 15px #0003); } .sala-card-denunciar{ position:absolute; top:8px; right:8px; z-index:2; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; background:#00000055; color:#fff; font-size:13px; line-height:1; cursor:pointer; opacity:0; transition:opacity .15s ease,background .15s ease; } .sala-card:hover .sala-card-denunciar,.sala-card:focus-within .sala-card-denunciar{opacity:1} .sala-card-denunciar:hover{background:#000000a0} @media(max-width:850px){.sala-card-denunciar{opacity:1;background:#00000066}} .etiqueta-vivo, .vistas{ position:absolute; z-index:2; top:12px; padding:6px 9px; color:#fff; font-size:9px; font-weight:900; border-radius:7px; background:#ed3f59; } .etiqueta-vivo{left:12px} .vistas{right:12px;background:#14101e8c} /* Regra do dono (2026-09-15): a mídia sempre ocupa 100% da caixa — nunca um pedaço sólido embaixo. Nome/local saem do fluxo normal (nunca mais somam altura ao cartão, que passa a valer só o tamanho de .sala-imagen) e flutuam por cima dela, com um véu de gradiente. Corrigido no mesmo dia: sem bolita/avatar nenhuma — só letras pequenas, alinhadas embaixo à esquerda ("Roberto Lima Eletricista, Manaus." e nada mais). */ .sala-contenido{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:34px 15px 13px; background:linear-gradient(180deg,rgba(17,18,26,0) 0%,rgba(15,16,23,.6) 45%,rgba(11,12,18,.94) 100%); } .sala-contenido h3{ margin:0 0 3px; font-size:12.5px; text-shadow:0 1px 6px rgba(0,0,0,.65); } .sala-contenido p{ margin:0; color:#e2dfe8; font-size:10px; text-shadow:0 1px 6px rgba(0,0,0,.65); } .estado-publico, .estado-restringido{ color:#58d394; font-size:9px; font-weight:800; } .estado-restringido{ color:#a98aff; } /* ========================================================= SECTORES ========================================================= */ .rejilla-sectores{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .sector-con-imagen{ position:relative; min-height:170px; display:flex; align-items:flex-end; justify-content:space-between; overflow:hidden; padding:17px; color:#fff; text-align:left; border:1px solid #ffffff24; border-radius:17px; background-position:center; background-size:cover; isolation:isolate; cursor:pointer; } .sector-con-imagen::before{ content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(transparent 20%,#090a16ee); } .sector-comercio{ background-image:url("assets/sectors/comercio.png"),linear-gradient(135deg,#62321d,#d58a43); } .sector-educacion{ background-image:url("assets/sectors/educacion.png"),linear-gradient(135deg,#153f64,#4b8bc4); } .sector-celebracion{ background-image:url("assets/sectors/celebracion.png"),linear-gradient(135deg,#6a235e,#ce6385); } .sector-comunidad{ background-image:url("assets/sectors/comunidad.png"),linear-gradient(135deg,#174c3b,#59a170); } .sector-con-imagen div{ display:flex; flex-direction:column; gap:4px; } .sector-con-imagen b{ font-size:17px; text-shadow:0 2px 10px #000; } .sector-con-imagen small{ color:#e3e1ea; font-size:10px; } .sector-con-imagen i{ font-size:26px; font-style:normal; } /* ========================================================= MODAL ========================================================= */ dialog{ width:min(92vw,560px); padding:0; color:#fff; border:0; border-radius:22px; background:#151628; box-shadow:0 30px 90px #0009; } dialog::backdrop{ background:#090712b8; backdrop-filter:blur(5px); } .modal-sala{ position:relative; display:flex; flex-direction:column; gap:16px; padding:30px; } .cerrar-modal{ position:absolute; right:18px; top:15px; color:#aaa8ba; font-size:28px; border:0; background:transparent; cursor:pointer; } .modal-icono{ width:46px; height:46px; display:grid; place-items:center; color:#fff; border-radius:15px; background:linear-gradient(135deg,#249cff,#0965bb); } .modal-sala h2{ margin:-10px 0; font-size:26px; } .modal-sala > p:not(.saludo){ margin:0; color:#aaa8ba; font-size:13px; } .campo-privacidade-toggle{ display:flex; gap:10px; } .privacidade-opcao{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; height:52px; border-radius:12px; border:1px solid #ffffff1f; background:#202136; color:#c9c8d6; font-size:14px; font-weight:800; cursor:pointer; transition:background .15s,border-color .15s,color .15s; } .privacidade-opcao[aria-pressed="true"]{ border-color:#55c900; background:rgba(85,201,0,.18); color:#c8f090; } .campo-tipo-sala-icones{ display:flex; flex-direction:column; gap:10px; } .campo-tipo-sala-icones[hidden]{ display:none; } .campo-tipo-titulo{ margin:0; font-size:12px; font-weight:750; color:#e9e9f2; } .tipo-sala-grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:10px; } .tipo-sala-opcao{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 4px; border:1px solid transparent; border-radius:14px; background:transparent; color:#c9c8d6; cursor:pointer; transition:background .15s,border-color .15s; } .tipo-sala-opcao:hover, .tipo-sala-opcao:focus-visible{ background:#ffffff0d; } .tipo-sala-opcao[aria-pressed="true"]{ border-color:#55c900; background:rgba(85,201,0,.14); } .tipo-sala-opcao .acceso-plataforma-icono{ width:46px; height:46px; display:grid; place-items:center; border-radius:14px; color:#fff; } .tipo-sala-opcao span:last-child{ font-size:11.5px; font-weight:750; text-align:center; } .tipo-sala-opcao[hidden]{ display:none; } .tipo-sala-trocar[hidden]{display:none!important} .tipo-sala-trocar{ align-self:flex-start; display:flex; align-items:center; gap:6px; padding:8px 14px; border:1px solid #ffffff2a; border-radius:10px; background:#ffffff0d; color:#8fd6ff; font-size:12.5px; font-weight:700; cursor:pointer; transition:background .15s; } .tipo-sala-trocar:hover, .tipo-sala-trocar:focus-visible{ background:#ffffff1a; } .ayuda-tipo-sala{ display:block; margin-top:8px; color:#9a8060; font-size:.78rem; line-height:1.4; } .privada-selo-fechado{ display:inline-flex; align-items:center; min-height:36px; padding:0 12px; border-radius:9px; border:1px solid rgba(85,201,0,.35); background:rgba(20,50,10,.55); color:#c8f090; font-size:11px; font-weight:800; letter-spacing:.02em; } .modal-sala label{ display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:750; } .modal-sala label[hidden]{ display:none; } .modal-sala input, .modal-sala select, .modal-sala textarea{ width:100%; padding:0 13px; color:#fff; border:1px solid #ffffff1f; border-radius:11px; outline:0; background:#202136; } .modal-sala input, .modal-sala select{ height:46px; } .modal-sala textarea{ min-height:100px; padding-top:12px; resize:vertical; } /* Opção: sala temporária — duração só aparece se marcada */ .modal-sala label.sala-temporal-opcao{ flex-direction:row; align-items:center; gap:10px; font-size:13px; font-weight:650; color:#d7e4d2; cursor:pointer; user-select:none; } .modal-sala label.sala-temporal-opcao span{ min-width:0; flex:1; } .modal-sala label.sala-temporal-opcao input[type="checkbox"]{ width:18px; height:18px; min-width:18px; margin:0; accent-color:#55c900; cursor:pointer; } .modal-sala #bloco-sala-temporaria[hidden]{ display:none !important; } .modal-sala .aviso-sala-temporaria{ display:grid; gap:12px; margin:4px 0 8px; padding:14px 14px 16px; border-radius:14px; border:1px solid rgba(200,140,40,.45); background:linear-gradient(160deg, rgba(80,40,8,.55), rgba(30,16,6,.72)); box-shadow:inset 0 1px 0 rgba(255,220,140,.08); } .modal-sala .aviso-sala-temporaria-titulo{ margin:0; font-size:14px; font-weight:800; letter-spacing:.02em; color:#f0c56a; } .modal-sala .aviso-sala-temporaria-texto{ margin:0; font-size:13px; line-height:1.45; color:#e8d5b0; } .modal-sala .sala-temporal-confirmar{ flex-direction:row !important; align-items:flex-start; gap:10px; font-size:13px; font-weight:650; color:#f2e6c8; cursor:pointer; user-select:none; } .modal-sala .sala-temporal-confirmar input[type="checkbox"]{ width:18px; height:18px; min-width:18px; margin:2px 0 0; accent-color:#e0a020; cursor:pointer; } .modal-sala .sala-temporal-confirmar span{ line-height:1.4; } /* Seletor de capa: só o clip — sem “Escolher arquivo” nativo */ .campo-portada-clip{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; } .campo-portada-clip[hidden]{ display:none; } .campo-portada-titulo{ flex:1 1 100%; font-size:12px; font-weight:700; color:#c8d7c4; } .campo-portada-titulo em{ font-style:normal; font-weight:500; color:#8a9a86; } .btn-clip-portada{ position:relative; display:inline-grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid rgba(85,201,0,.4); border-radius:14px; background:linear-gradient(160deg,rgba(85,201,0,.14),rgba(85,201,0,.05)); color:#b8e89a; cursor:pointer; transition:background .2s,border-color .2s,color .2s,transform .15s; } .btn-clip-portada:hover{ background:linear-gradient(160deg,rgba(85,201,0,.22),rgba(85,201,0,.1)); border-color:rgba(85,201,0,.65); color:#d8f5c8; transform:translateY(-1px); } .btn-clip-portada:active{transform:translateY(0)} .btn-clip-svg{display:block} .btn-clip-check{ position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:#55c900; color:#041006; font-size:10px; font-weight:800; line-height:16px; text-align:center; } .btn-clip-portada.tem-arquivo{ border-color:rgba(85,201,0,.75); background:linear-gradient(160deg,rgba(85,201,0,.28),rgba(85,201,0,.12)); color:#9af860; } .btn-clip-portada.tem-arquivo .btn-clip-check{display:grid;place-items:center} .portada-sala-nome{ max-width:min(220px,55vw); font-size:11px; color:#8a9a86; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .modal-sala input:focus, .modal-sala select:focus, .modal-sala textarea:focus{ border-color:#249cff; box-shadow:0 0 0 3px #249cff25; } .modal-acciones{ display:flex; justify-content:flex-end; gap:10px; margin-top:5px; } .boton-secundario{ min-height:46px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; color:#fff; border:1px solid #249cff70; border-radius:12px; background:#10233a; cursor:pointer; } .menu-movil{ display:none; } /* ========================================================= ADAPTACIÓN ========================================================= */ @media (max-width:1180px){ .barra-superior{ grid-template-columns:auto minmax(280px,1fr) auto; padding-inline:24px; } .datos-plan{ display:none; } main{ padding-inline:28px; } .categorias-contenedor{ margin-inline:-28px; padding-inline:28px; } .flecha-izquierda{left:28px} .flecha-derecha{right:28px} .portada-principal{ grid-template-columns:minmax(0,1.75fr) minmax(280px,.85fr); } .destacada-contenido{ width:78%; } .rejilla-sectores{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:820px){ body{ padding-bottom:72px; } .barra-superior{ min-height:72px; grid-template-columns:1fr auto; gap:14px; padding:10px 16px; background: linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.28)), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/cover no-repeat; } .marca-icono{ width:65px; height:43px; font-size:22px; } .marca-letras{ font-size:29px; letter-spacing:-2px; } .busqueda-interna{ grid-column:1 / -1; grid-row:2; } .cuenta-usuario{ grid-column:2; grid-row:1; } .selector-idioma, .datos-plan{ display:none; } main{ padding:0 16px 40px; } .categorias-contenedor{ top:126px; margin:0 -16px; padding:10px 16px 5px; } .flecha-categorias{ display:none !important; } .categorias-salas{ touch-action:pan-x; } .categoria-sala{ min-height:40px; padding:0 16px; font-size:13px; } .portada-principal{ grid-template-columns:1fr; gap:14px; margin-top:3px; } .sala-destacada{ min-height:420px; } .crear-sala-lateral{ min-height:280px; } .destacada-contenido{ left:25px; right:25px; bottom:27px; width:auto; } .destacada-contenido h1{ font-size:37px; } .rejilla-salas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .sala-imagen{ height:180px; } .menu-movil{ position:fixed; z-index:60; left:0; right:0; bottom:0; height:65px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; padding:0 7px; border-top:1px solid var(--borde); background:#0c0e1af5; } .menu-movil a{ display:flex; flex-direction:column; align-items:center; gap:3px; color:#8d8b9f; font-size:8px; font-weight:700; text-decoration:none; -webkit-tap-highlight-color:transparent; } .menu-movil a span{ font-size:20px; line-height:1; display:grid; place-items:center; } .menu-movil a span svg{ width:20px; height:20px; } .menu-movil a.activo span svg{color:var(--gaba3-verde-brillante,#63bd44)} .menu-movil a.activo{ color:#75ffac; } /* Curtos — volantín oficial GABA3 (apenas menu móvel) */ .menu-movil .menu-movil-volantin{ display:block; width:22px; height:22px; object-fit:contain; object-position:center; flex-shrink:0; opacity:.58; filter:brightness(.92) saturate(.9); transition:opacity .2s ease, filter .2s ease; pointer-events:none; } .menu-movil a.menu-movil-curtos.activo .menu-movil-volantin, .menu-movil a.menu-movil-curtos[aria-current="page"] .menu-movil-volantin{ opacity:1; filter:brightness(1.08) saturate(1.15) drop-shadow(0 0 5px rgba(85,201,0,.55)); } .menu-movil a.menu-movil-curtos.activo, .menu-movil a.menu-movil-curtos[aria-current="page"]{ color:#55c52a; } .menu-movil button{ justify-self:center; width:48px; height:48px; display:grid; place-items:center; margin-top:-24px; color:#fff; font-size:28px; border:4px solid #0d0f1d; border-radius:17px; background:linear-gradient(135deg,#249cff,#0878d3); box-shadow:0 8px 20px #18d96059; } } @media (max-width:560px){ .alternar-minhas-salas{top:auto;bottom:78px;font-size:0;padding:11px}.alternar-minhas-salas span:first-child{font-size:25px}.estrutura.minhas-salas-abertas{display:block;padding:0}.estrutura.minhas-salas-abertas .alternar-minhas-salas{position:fixed;left:auto;right:12px;top:auto;bottom:78px;z-index:71}.estrutura.minhas-salas-abertas .painel-minhas-salas{position:fixed;z-index:70;left:10px;right:10px;top:82px;bottom:77px;max-height:none;border-radius:18px;overflow:auto}.estrutura.minhas-salas-abertas main{padding-left:16px} .boton-notificaciones{ display:none; } .sala-destacada{ min-height:390px; } .destacada-contenido h1{ font-size:31px; } .destacada-contenido p{ font-size:14px; } .crear-sala-lateral{ padding:27px; } .crear-sala-lateral h2{ font-size:31px; } /* Dos tarjetas se muestran en vertical; la siguiente pareja queda al alcance de un deslizamiento horizontal, nunca una tarjeta aislada. */ .rejilla-salas{ grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,auto)); grid-auto-flow:column; grid-auto-columns:100%; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:inline mandatory; padding-bottom:4px; } .rejilla-salas .sala-card{scroll-snap-align:start} .rejilla-sectores{grid-template-columns:1fr;} .sala-imagen{ height:215px; } .seccion-cabecera a{ display:none; } .modal-sala{ padding:25px 20px; } .modal-acciones{ flex-direction:column-reverse; } .modal-acciones button{ width:100%; } } /* ========================================================= GABA3 — ESTILOS EXCLUSIVOS DE sala.html Todos los selectores están limitados a .pagina-sala. ========================================================= */ /* ========================================================= GABA3 — SALA EN VIVO Estilos añadidos para sala_corregida.html Todos los selectores principales están limitados a body.pagina-sala para no alterar la portada index.html. ========================================================= */ body.pagina-sala{ --sala-fondo:#080a16; --sala-panel:#111527; --sala-panel-2:#171c31; --sala-panel-3:#202640; --sala-borde:#ffffff18; --sala-borde-fuerte:#3ef38155; --sala-texto:#f7f6ff; --sala-suave:#a9acc1; --sala-morado:#0878e8; --sala-morado-claro:#78beff; --sala-azul:#249cff; --sala-verde:#36f47f; --sala-rojo:#ff7a1a; --sala-radio:20px; min-height:100vh; margin:0; padding:0; color:var(--sala-texto); background: radial-gradient(circle at 10% 5%,rgba(37,54,142,.25),transparent 27%), radial-gradient(circle at 94% 7%,rgba(8,120,232,.15),transparent 30%), radial-gradient(circle at 45% 95%,rgba(23,61,117,.2),transparent 40%), linear-gradient(145deg,rgba(7,9,20,.28),rgba(13,16,32,.28) 48%,rgba(8,10,22,.28)), url("assets/brand/fondo-madera-gaba3.png?v=real1"); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; } /* Sem faixa de câmera/imagem sob o palco — controles ficam no chat */ .privada-painel-convite-fora .inv-panel-banner{ margin:0 12px 8px;padding:8px 10px;border-radius:10px; background:rgba(24,144,255,.12);border:1px solid rgba(24,144,255,.28); color:#cfe6ff;font-size:11px;line-height:1.35; } /* Convite Fora só na barra azul do composer — nunca no topo */ /* Figurinhas — estilo da sala privada */ .pagina-sala .privada-figurinhas-hint{ margin:0; color:#9a8060; font-size:11px; line-height:1.35; } .pagina-sala .privada-figurinhas-minhas{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; } .pagina-sala .privada-figurinhas-minhas[hidden]{display:none!important} .pagina-sala .privada-figurinhas-empty{ grid-column:1/-1;margin:0;color:#9a8060;font-size:12px;line-height:1.4; } .pagina-sala .privada-fig-mine{ display:grid;gap:4px;justify-items:center;padding:6px 4px; border:1px solid rgba(85,201,0,.22);border-radius:12px; background:rgba(255,255,255,.03);cursor:pointer;color:#dfffb0;font-size:10px; } .pagina-sala .privada-fig-mine img{ width:56px;height:56px;object-fit:cover;border-radius:50%; border:2px solid rgba(85,201,0,.45); } .pagina-sala .privada-fig-criar-title{ margin:0;color:#8fff67;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; } .pagina-sala .privada-fig-upload.gaba3-file-btn{ margin:0; } .pagina-sala .privada-fig-upload{ cursor:pointer; } .pagina-sala .privada-figurinha-preview{ display:grid;justify-items:center;gap:6px;padding:10px; border-radius:14px;background:rgba(0,0,0,.28); } .pagina-sala .privada-figurinha-preview[hidden]{display:none!important} .pagina-sala .privada-figurinha-preview img{ width:96px;height:96px;object-fit:cover;border-radius:50%; border:3px solid #55c900;box-shadow:0 8px 20px rgba(0,0,0,.35); } .pagina-sala .privada-figurinha-preview small{color:#9a8060;font-size:10px} .pagina-sala .privada-fig-ou{margin:0;color:#7a9068;font-size:11px;text-align:center} .pagina-sala .privada-fig-criar-acoes{display:grid;grid-template-columns:1fr 1.2fr;gap:8px} .pagina-sala .privada-fig-criar-acoes .invd-secondary{ min-height:38px;border:1px solid rgba(85,201,0,.35);border-radius:10px; background:transparent;color:#dfffb0;font-weight:700;cursor:pointer; } .pagina-sala .privada-figurinha-status{margin:0;min-height:14px;color:#9ef080;font-size:11px} .pagina-sala .privada-figurinha-status.is-error{color:#ff9a9a} .pagina-sala .msg-figurinha .gaba3-fig-chat-wrap{margin:4px 0} /* Convite visual: no chat só nome/avatar — sem texto da carta */ .pagina-sala .msg-convite-visual p, .pagina-sala .msg-convite-visual .gaba3-fig-chat-wrap{ display:none!important; } .pagina-sala .msg-convite-visual{ opacity:.92; } .pagina-sala .msg-convite-visual > div{ display:flex;align-items:center;gap:8px;flex-wrap:wrap; } .pagina-sala .msg-convite-visual small{ margin-left:auto;opacity:.75; } /* ══ Agente de convites visuais (InvitationDesignAgent) ══ */ .privada-painel-convite-visual{ z-index:120; max-height:min(78dvh,640px); overflow:auto; } .invd-panel{display:grid;gap:10px;padding:4px 2px 8px;color:#e8d5b0} .invd-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .invd-head small{display:block;color:#8fff67;font-size:10px;font-weight:800;letter-spacing:.08em} .invd-head strong{display:block;margin-top:2px;font-size:15px;color:#fff} .invd-close{width:30px;height:30px;border:0;border-radius:8px;background:transparent;color:#cfe4ca;font-size:20px;cursor:pointer} .invd-help{margin:0;color:#9a8060;font-size:12px;line-height:1.4} .invd-field{display:grid;gap:5px;font-size:11px;color:#b8a080} .invd-field input,.invd-field select,.invd-field textarea{ width:100%;min-height:38px;padding:8px 10px;border:1px solid rgba(85,201,0,.22); border-radius:10px;background:rgba(255,255,255,.04);color:#e8d5b0;box-sizing:border-box;font:inherit; } .invd-field input[type=file], .gaba3-file-btn input[type=file]{ position:absolute!important;width:1px!important;height:1px!important; padding:0!important;margin:-1px!important;overflow:hidden!important; clip:rect(0,0,0,0)!important;border:0!important;opacity:0!important; pointer-events:none!important; } .invd-field-label{display:block;margin-bottom:2px} .gaba3-file-btn{ display:flex;align-items:center;gap:12px;width:100%;min-height:56px; padding:10px 14px;border:1px solid rgba(85,201,0,.38);border-radius:14px; background:linear-gradient(160deg,rgba(30,52,22,.95),rgba(12,20,12,.96)); color:inherit;font:inherit;text-align:left;cursor:pointer;box-sizing:border-box; color:#e8ffe0;cursor:pointer;box-sizing:border-box;text-align:left; transition:border-color .18s,background .18s,transform .12s; } .gaba3-file-btn:hover,.gaba3-file-btn:focus-within{ border-color:rgba(140,255,90,.65); background:linear-gradient(160deg,rgba(40,70,28,.98),rgba(16,28,14,.98)); } .gaba3-file-btn.has-file{ border-color:rgba(85,201,0,.7); background:linear-gradient(160deg,rgba(36,70,24,.98),rgba(14,28,12,.98)); } .gaba3-file-btn-ico{ flex:none;display:grid;place-items:center;width:42px;height:42px; border-radius:12px;background:rgba(85,201,0,.14);color:#b8ff8a; } .gaba3-file-btn-text{display:grid;gap:2px;min-width:0} .gaba3-file-btn-text strong{ font-size:14px;font-weight:800;color:#fff;line-height:1.2; } .gaba3-file-btn-text small{ font-size:11px;color:#9ab89a;line-height:1.25; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .invd-field textarea{min-height:64px;resize:vertical} .invd-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .invd-primary{ min-height:40px;border:0;border-radius:11px; background:linear-gradient(135deg,#3a8800,#55c900);color:#fff;font-weight:800;cursor:pointer; } .invd-secondary{ min-height:40px;border:1px solid rgba(255,193,87,.45);border-radius:11px; background:rgba(40,28,10,.85);color:#ffd98a;font-weight:800;cursor:pointer;font-size:12px; } .invd-preview{ padding:10px;border:1px solid rgba(85,201,0,.2);border-radius:14px;background:rgba(0,0,0,.28); max-height:260px;overflow:auto; } .invd-preview[hidden],.invd-actions[hidden],.invd-preview-block[hidden]{display:none!important} .invd-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px} .invd-actions button{ min-height:40px;border:1px solid rgba(85,201,0,.28);border-radius:10px; background:rgba(20,40,14,.9);color:#dfffb0;font-size:12px;font-weight:700;cursor:pointer; } .invd-actions #invd-tela{ background:linear-gradient(135deg,#7a1f4a,#ff6b9d 55%,#ffd166); border-color:transparent;color:#1a0a10;font-weight:900; } .invd-actions #invd-chat{ background:linear-gradient(135deg,#2a6a00,#55c900); border-color:transparent;color:#061000;font-weight:900; } .invd-actions #invd-ocultar{opacity:.9} .invd-feedback{ margin:4px 0 0;padding:10px 12px;border-radius:12px; border:1px solid rgba(85,201,0,.4);background:rgba(20,48,14,.95); color:#e8ffe0;font-size:12px;font-weight:700;line-height:1.35; } .invd-feedback[hidden]{display:none!important} .gaba3-file-btn.is-pulse{ animation:invdFotoPulse .55s ease 0s 3; border-color:#8fff67!important; } @keyframes invdFotoPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.02);box-shadow:0 0 0 3px rgba(85,201,0,.35)} } .invd-status{margin:0;min-height:16px;color:#9ef080;font-size:11px} .invd-suggest-block{display:grid;gap:8px;padding:10px;border-radius:14px;border:1px solid rgba(255,120,140,.28);background:rgba(28,10,16,.45)} .invd-suggest-head{ display:flex;align-items:center;justify-content:space-between;gap:8px; color:#ffc2cc;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase; } .invd-suggest-refresh{ min-height:32px;padding:0 12px;border:1px solid rgba(85,201,0,.3);border-radius:8px; background:rgba(20,40,14,.85);color:#dfffb0;font-size:11px;font-weight:700;cursor:pointer; } .invd-suggest-list{ display:block!important; /* block+margin: confiável no WebView Android (gap às vezes falha) */ max-height:min(46vh,360px);overflow-x:hidden;overflow-y:auto; -webkit-overflow-scrolling:touch;padding:4px 2px 8px;width:100%;box-sizing:border-box; } .invd-suggest-list.invd-suggest-picks{max-height:min(52vh,440px)} .invd-chip{ display:flex!important;flex-direction:row!important;align-items:flex-start!important; width:100%!important;max-width:100%!important; margin:0 0 12px 0!important; /* separação real entre frases — não usar só gap */ padding:14px 12px!important;border-radius:14px;border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.42);color:#f3e6d0;font-size:14px;line-height:1.45;cursor:pointer; box-sizing:border-box!important;white-space:normal!important; position:relative!important;float:none!important;clear:both!important; height:auto!important;min-height:56px!important;max-height:none!important; transform:none!important;inset:auto!important;left:auto!important;top:auto!important; z-index:auto!important;overflow:visible!important; } .invd-suggest-list .invd-chip:last-child{margin-bottom:4px!important} .invd-chip-num{ display:flex!important;align-items:center;justify-content:center; width:30px;height:30px;min-width:30px;margin:0 12px 0 0!important;border-radius:50%;flex:none; background:rgba(255,120,140,.22);border:1px solid rgba(255,160,180,.5);color:#ffd0d8; font-size:12px;font-weight:900;line-height:1; } .invd-chip-text{ display:block!important;flex:1 1 auto!important;min-width:0; white-space:normal!important;overflow-wrap:anywhere;word-break:break-word; font-weight:650;line-height:1.45!important;margin:0!important; } .invd-chip:hover,.invd-chip.is-active{ border-color:rgba(255,140,160,.65);background:rgba(70,20,35,.55);color:#fff6f7; } .invd-chip.is-active .invd-chip-num{ background:#ff6b8a;border-color:#ff6b8a;color:#1a0508; } .invd-chip em{font-style:normal;color:#8fff67;font-weight:800} .invd-chip-custom{border-color:rgba(255,193,87,.35)} .invd-suggest-love{gap:9px} .invd-suggest-love .invd-chip{border-color:rgba(255,120,140,.28)} .invd-lemma-actions{display:flex;flex-wrap:wrap;gap:6px} .invd-custom-lemmas{ display:grid;gap:8px;padding:8px;border-radius:12px; border:1px solid rgba(255,193,87,.25);background:rgba(0,0,0,.22);max-height:180px;overflow:auto; } .invd-custom-lemmas[hidden]{display:none!important} .invd-lemma-list-head{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#ffd98a} .invd-lemma-empty{margin:0;color:#9a8060;font-size:11px;line-height:1.35} .invd-lemma-item{display:grid;gap:6px;padding:8px;border-radius:10px;background:rgba(255,255,255,.04)} .invd-lemma-item p{margin:0;color:#e8d5b0;font-size:11px;line-height:1.35} .invd-lemma-item-actions{display:flex;flex-wrap:wrap;gap:5px} .invd-lemma-item-actions button{ min-height:28px;padding:0 8px;border-radius:7px;border:1px solid rgba(85,201,0,.28); background:rgba(20,40,14,.85);color:#dfffb0;font-size:10px;font-weight:700;cursor:pointer; } .invd-event-fields[hidden],#invd-para-wrap[hidden],#invd-foto-wrap[hidden], #invd-genero-wrap[hidden],#invd-formato-wrap[hidden],#invd-modelo-wrap[hidden], #invd-room-people[hidden]{display:none!important} .invd-room-people{display:grid;gap:8px;padding:10px;border-radius:12px;border:1px solid rgba(85,201,0,.22);background:rgba(0,0,0,.22)} .invd-room-people-head{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#8fff67} .invd-room-people-empty{margin:0;color:#9a8060;font-size:11px;line-height:1.35} .invd-room-people-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:10px 8px; justify-items:center; align-items:start; } .invd-room-ball{ display:flex;flex-direction:column;align-items:center;gap:5px;width:72px;max-width:100%;padding:0;border:0; background:transparent;color:#e8d5b0;font-size:10px;font-weight:700;cursor:grab; -webkit-user-select:none;user-select:none;touch-action:none; } .invd-room-ball:active{cursor:grabbing} .invd-room-ball.is-active .invd-room-ball-av, .invd-room-ball.is-dragging .invd-room-ball-av{ box-shadow:0 0 0 3px #55c900,0 8px 18px rgba(0,0,0,.45); transform:scale(1.06); } .invd-room-ball-av{ width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:none; background:#1a2230 center/cover no-repeat;font-size:16px;font-weight:900;color:#fff; border:2px solid rgba(255,255,255,.35); box-shadow:0 6px 16px rgba(0,0,0,.4); transition:transform .15s, box-shadow .15s; } .invd-room-ball.has-face .invd-room-ball-av{border-color:#8fff67aa} .invd-room-ball-name{ max-width:72px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:#d8c4a0; } .invd-drag-ghost{ position:fixed;z-index:99999;width:56px;height:56px;pointer-events:none; filter:drop-shadow(0 10px 18px rgba(0,0,0,.55)); } .invd-drag-ghost-av{ display:grid;place-items:center;width:56px;height:56px;border-radius:50%; background:#1a2230 center/cover no-repeat;border:3px solid #8fff67;color:#fff;font-weight:900; } .invd-preview-block{ display:grid;gap:8px;padding:10px;border-radius:14px; border:1px solid rgba(85,201,0,.35);background:rgba(8,20,8,.55); } .invd-preview-block[hidden]{display:none!important} .invd-preview-head{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8fff67} .invd-preview-hint{margin:0;color:#9a8060;font-size:11px;line-height:1.35} .invd-preview-block .invd-preview{ max-height:min(70vh,640px);overflow:auto;padding:10px;border:0;background:transparent; } /* A prévia continua rolável por mouse e toque, mas sem a barra branca e as setas nativas. Elas pareciam um controle visual extra dentro da sala. */ .invd-preview, .invd-preview-block .invd-preview{ scrollbar-width:none; -ms-overflow-style:none; } .invd-preview::-webkit-scrollbar, .invd-preview-block .invd-preview::-webkit-scrollbar{ width:0; height:0; display:none; } /* O painel lateral também pode ter conteúdo longo. Mantemos sua rolagem, porém removemos as setas/barras do navegador que poluíam a lateral. */ .privada-painel-convites, .invd-suggest-list{ scrollbar-width:none; -ms-overflow-style:none; } .privada-painel-convites::-webkit-scrollbar, .invd-suggest-list::-webkit-scrollbar{ width:0; height:0; display:none; } .invd-preview-block .gaba3-invite-card{ width:min(100%,480px);transform-origin:top center; } .invd-tech,.invd-tech[hidden],.invd-panel .invd-tech{display:none!important} .invd-step[hidden]{display:none!important} .invd-back-catalog{ justify-self:start;min-height:32px;padding:0 10px;margin-bottom:4px;border:1px solid rgba(255,255,255,.16); border-radius:8px;background:rgba(0,0,0,.25);color:#dfffb0;font-size:11px;font-weight:700;cursor:pointer; } .invd-catalog{display:grid;gap:14px;max-height:min(62vh,520px);overflow:auto;padding-right:2px} .invd-catalog-group{display:grid;gap:7px} .invd-catalog-group-title{ margin:0;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8fff67; } .invd-catalog-list{display:grid;gap:6px} .invd-catalog-item{ display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px; border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.32); color:#e8d5b0;cursor:pointer; } .invd-catalog-item:hover,.invd-catalog-item:focus-visible{ border-color:rgba(85,201,0,.5);background:rgba(40,70,20,.4);color:#fff;outline:none; } .invd-catalog-emoji{font-size:1.35rem;line-height:1;flex:none;width:1.6em;text-align:center} .invd-catalog-text{display:grid;gap:2px;min-width:0} .invd-catalog-text strong{font-size:13px;font-weight:800} .invd-catalog-text small{font-size:11px;color:#9a8060;line-height:1.3} .invd-families{display:flex;flex-wrap:wrap;gap:6px} .invd-family-chip{ min-height:28px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.28);color:#d8c4a0;font-size:10px;font-weight:800;cursor:pointer; } .invd-family-chip.is-active,.invd-family-chip:hover{ border-color:rgba(85,201,0,.45);background:rgba(40,70,20,.45);color:#fff; } .invd-chip-quick{border-color:rgba(255,193,87,.35)} .invd-chip-quick em{color:#ffd98a} .invd-chat-rapido{margin-top:4px} .invd-chat-rapido[hidden]{display:none!important} /* Convite na tela principal da sala — acima do vídeo/thumbs */ .pantalla-directo, .pantalla-videollamada{ position:relative; } .gaba3-invite-stage-host{ position:absolute;inset:0;z-index:40!important;display:grid;place-items:center; padding:16px;background:rgba(4,8,4,.82);backdrop-filter:blur(4px); overflow-x:hidden;overflow-y:auto;visibility:visible;opacity:1; pointer-events:auto; } .gaba3-invite-stage-host.has-persistent-invitation{ /* O cartão continua no palco até que uma nova imagem, vídeo ou homenagem o substitua. As faixas suaves dão movimento sem esconder a mensagem principal. */ isolation:isolate; /* O conteúdo enviado é a única superfície visual do palco. Nenhuma névoa, faixa translúcida ou gradiente externo pode dividi-lo. */ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .gaba3-invite-stage-host.has-persistent-invitation::before, .gaba3-invite-stage-host.has-persistent-invitation::after{ content:none!important; display:none!important; } .gaba3-invite-stage-host.has-persistent-invitation .gaba3-celebration-slide{position:relative;z-index:1} /* Homenagem enviada pelo coração: ela é o conteúdo principal do palco. Preenche toda a área disponível para que a mensagem seja lida por todos, sem virar um cartão pequeno no centro. */ .gaba3-invite-stage-host.has-persistent-invitation{ display:block!important; padding:0;overflow:hidden; } .gaba3-invite-stage-host.has-persistent-invitation .gaba3-celebration-slide{ position:absolute!important;inset:0!important; width:100%!important;max-width:none!important; min-height:0!important;height:100%!important; display:block!important;place-items:stretch; } .gaba3-invite-stage-host.has-persistent-invitation .gaba3-invite-card{ width:100%!important;max-width:none!important; min-height:100%!important;height:100%!important;max-height:none!important; margin:0;border-radius:0;box-sizing:border-box; overflow-x:hidden;overflow-y:auto; display:grid;align-content:center;justify-items:center; /* A homenagem ocupa o palco inteiro. O rodapé anterior reservava até 110px vazios e deixava uma faixa escura abaixo da mensagem. */ padding:clamp(20px,4vh,46px) clamp(22px,7vw,88px) clamp(22px,4vh,46px); } @keyframes gaba3StageStreamers{from{background-position:0 -140px}to{background-position:0 540px}} .gaba3-invite-stage-host[hidden]{display:none!important} .gaba3-invite-stage-host .gaba3-celebration-slide{ width:100%;max-width:min(96%,560px);display:grid;justify-items:center; opacity:1;transform:none;visibility:visible; transition:opacity .45s ease, transform .55s cubic-bezier(.2,.85,.2,1); } .gaba3-invite-stage-host .gaba3-celebration-slide.is-in{opacity:1;transform:none;visibility:visible} .gaba3-invite-stage-host .gaba3-stage-arrival-courier{ position:absolute;left:50%;top:50%;z-index:8;display:grid;place-items:center; width:34px;height:34px;margin:-17px;color:var(--invite-accent,#a8ff4d); font-size:28px;line-height:1;text-shadow:0 0 12px currentColor,0 0 28px rgba(255,255,255,.5); pointer-events:none;will-change:transform,opacity; } .gaba3-invite-stage-host .gaba3-invite-card{ opacity:1!important;visibility:visible!important; width:min(100%,560px);max-height:min(88vh,720px);overflow:auto; } /* A leitura continua disponível por roda do mouse e gesto táctil, mas a barra nativa vertical não faz parte da apresentação da sala. */ .gaba3-invite-stage-host, .gaba3-invite-stage-host .gaba3-invite-card, .gaba3-celebration-stage{ scrollbar-width:none; -ms-overflow-style:none; } /* A animação Lottie ocupa o primeiro momento; em seguida o cartão fica centralizado, íntegro e legível durante o tempo de leitura. */ .gaba3-celebration-stage.is-showing-message{ min-height:0; padding-bottom:12px; } .gaba3-invite-stage-host::-webkit-scrollbar, .gaba3-invite-stage-host .gaba3-invite-card::-webkit-scrollbar, .gaba3-celebration-stage::-webkit-scrollbar{ width:0; height:0; display:none; } .gaba3-invite-card{ position:relative;width:min(100%,520px);overflow:hidden; padding:var(--invd-pad,28px 22px 20px);border-radius:var(--invd-radius,22px); border:1px solid color-mix(in srgb, var(--invite-accent,#55c900) 55%, #fff 10%); box-shadow:0 22px 48px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset; color:#f7f1e6;text-align:center; animation:gaba3InviteIn .55s cubic-bezier(.2,.8,.2,1) both; } /* A fotografia/paisagem é a protagonista; estes véus apenas mantêm a leitura das letras grandes sobre qualquer cena. */ .gaba3-invite-card.invd-photo-scene .gaba3-invite-sky{opacity:.045} .gaba3-invite-card.invd-photo-scene .gaba3-invite-glow{ background:linear-gradient(180deg,transparent 28%,rgba(0,0,0,.02) 64%,rgba(0,0,0,.10)); } /* A paisagem da homenagem é limpa: sem película horizontal, névoa ou vinheta que faça parecer que há duas telas sobrepostas. A legibilidade vem apenas da sombra das letras, nunca de um filtro sobre a fotografia. */ .gaba3-invite-card.invd-photo-scene .gaba3-invite-sky, .gaba3-invite-card.invd-photo-scene .gaba3-invite-glow{ display:none!important; } /* Dez acabamentos reaproveitados pelas 100 apresentações locais. Cada sentimento tem dez opções: cenário + luz + entrada distintos, sem criar cem arquivos pesados no APK. */ .gaba3-invite-pessoal.invd-presentation-01{box-shadow:0 26px 66px rgba(0,0,0,.58),0 0 42px color-mix(in srgb,var(--invite-accent) 28%,transparent)} .gaba3-invite-pessoal.invd-presentation-02{border-width:2px;box-shadow:0 0 0 7px rgba(255,255,255,.08) inset,0 28px 62px rgba(0,0,0,.58)} .gaba3-invite-pessoal.invd-presentation-03{border-radius:38px 10px 38px 10px} .gaba3-invite-pessoal.invd-presentation-04{border-radius:10px 38px 10px 38px} .gaba3-invite-pessoal.invd-presentation-05{box-shadow:0 0 0 2px color-mix(in srgb,var(--invite-accent) 65%,#fff 12%) inset,0 30px 66px rgba(0,0,0,.62)} .gaba3-invite-pessoal.invd-presentation-06{border-style:dashed;border-width:2px} .gaba3-invite-pessoal.invd-presentation-07{outline:1px solid rgba(255,255,255,.32);outline-offset:-11px} .gaba3-invite-pessoal.invd-presentation-08{box-shadow:inset 0 0 80px rgba(0,0,0,.28),0 30px 66px rgba(0,0,0,.62)} .gaba3-invite-pessoal.invd-presentation-09{border-color:rgba(255,255,255,.58);box-shadow:0 0 0 1px rgba(0,0,0,.55) inset,0 30px 66px rgba(0,0,0,.62)} .gaba3-invite-pessoal.invd-presentation-10{border-radius:30px;box-shadow:0 0 0 10px rgba(255,255,255,.05) inset,0 30px 66px rgba(0,0,0,.62)} .gaba3-invite-card.invd-lay-dashed{border-style:dashed;border-width:2px} .gaba3-invite-card.invd-lay-frame{box-shadow:0 0 0 10px #f4efe6,0 22px 48px rgba(0,0,0,.45)} .gaba3-invite-card.invd-lay-glass{backdrop-filter:blur(8px);border-color:rgba(255,255,255,.28)} .gaba3-invite-card.invd-lay-stamp{outline:2px dashed rgba(255,255,255,.25);outline-offset:-8px} .gaba3-invite-card.invd-lay-tall{min-height:420px} .gaba3-invite-card.invd-lay-flyer{ min-height:440px;width:min(100%,320px); box-shadow:0 28px 56px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.08) inset; } .gaba3-invite-card.invd-lay-postcard{ width:min(100%,380px);aspect-ratio:4/3;display:grid;align-content:center; box-shadow:0 18px 40px rgba(0,0,0,.48),8px 8px 0 rgba(255,255,255,.12); } .gaba3-invite-card.invd-lay-ribbon::before{ content:"";position:absolute;left:50%;top:-6px;width:54%;height:18px; transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--invite-accent,#ff6b9d),transparent); border-radius:0 0 10px 10px;opacity:.85;z-index:3; } .gaba3-invite-card.invd-lay-diamond{ clip-path:polygon(8% 0,92% 0,100% 12%,100% 88%,92% 100%,8% 100%,0 88%,0 12%); } .gaba3-invite-card.invd-lay-magazine{ text-align:left;border-left:6px solid var(--invite-accent,#55c900); } .gaba3-invite-card.invd-lay-magazine .gaba3-invite-title{font-size:clamp(22px,5vw,34px);letter-spacing:-.02em} .gaba3-invite-card.invd-fmt-panfleto .gaba3-invite-cta{letter-spacing:.12em;text-transform:uppercase;font-size:11px} .gaba3-lib-pop-in{animation:gaba3LibPop .75s cubic-bezier(.2,.85,.2,1) both} @keyframes gaba3LibPop{ 0%{opacity:0;transform:translateY(40px) scale(.78)} 60%{opacity:1;transform:translateY(-6px) scale(1.06)} 100%{opacity:1;transform:none} } /* Duas classes de tamanho: · gaba3-figurinha-stage → grande (palco / ecrã principal) · gaba3-figurinha-chat → pequena (mensagem do chat) */ .gaba3-figurinha-stage, .gaba3-figurinha-chat{ position:relative;display:grid;place-items:center;margin:0; border-radius:50%; background:var(--fig-bg,radial-gradient(circle at 50% 40%,#ff8fab66,transparent 70%)); } .gaba3-figurinha-stage{ width:min(86vw,340px);min-height:min(70vw,340px); padding:28px 20px 22px; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)); } .gaba3-figurinha-chat{ width:72px;min-height:72px;padding:8px 6px 10px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); } .gaba3-fig-aura{ position:absolute;inset:-8%;border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--fig-ring,#ff6b9d) 35%,transparent),transparent 68%); animation:figAura 2.4s ease-in-out infinite; } .gaba3-figurinha-chat .gaba3-fig-aura{inset:-4%} .gaba3-fig-ring{ position:absolute;inset:6%;border-radius:50%; border:3px solid color-mix(in srgb,var(--fig-ring,#ff6b9d) 70%,#fff 10%); box-shadow:0 0 24px color-mix(in srgb,var(--fig-ring,#ff6b9d) 45%,transparent); } .gaba3-figurinha-chat .gaba3-fig-ring{inset:4%;border-width:2px;box-shadow:none} .gaba3-fig-face{ position:relative;z-index:2;font-size:clamp(92px,28vw,148px);line-height:1; filter:drop-shadow(0 8px 16px rgba(0,0,0,.35)); } .gaba3-figurinha-chat .gaba3-fig-face{font-size:34px;filter:none} .gaba3-fig-photo{ position:relative;z-index:2;object-fit:cover;border-radius:50%; border:3px solid color-mix(in srgb,var(--fig-ring,#55c900) 80%,#fff 10%); box-shadow:0 8px 18px rgba(0,0,0,.4); background:#111; } .gaba3-figurinha-stage .gaba3-fig-photo{ width:clamp(140px,38vw,220px);height:clamp(140px,38vw,220px); } .gaba3-figurinha-chat .gaba3-fig-photo{ width:48px;height:48px;border-width:2px;box-shadow:0 2px 8px rgba(0,0,0,.3); } .gaba3-fig-caption{ position:relative;z-index:2;margin:10px 0 0;max-width:90%; padding:8px 14px;border-radius:999px; background:rgba(0,0,0,.45);color:#fff;font-size:15px;font-weight:700;text-align:center; } .gaba3-figurinha-chat .gaba3-fig-caption{ margin:4px 0 0;padding:2px 7px;font-size:9px;max-width:68px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .gaba3-fig-brand{ position:relative;z-index:2;margin-top:8px;color:rgba(255,255,255,.72);font-size:10px;letter-spacing:.08em; } .gaba3-fig-ornaments{position:absolute;inset:0;z-index:1;pointer-events:none} .gaba3-figurinha-chat .gaba3-fig-ornaments{display:none} .gaba3-fig-orn{ position:absolute;font-size:clamp(22px,5vw,32px); animation:figOrn 2.8s ease-in-out infinite; animation-delay:calc(var(--i,0) * .35s); } .gaba3-fig-orn:nth-child(1){left:8%;top:18%} .gaba3-fig-orn:nth-child(2){right:10%;top:22%} .gaba3-fig-orn:nth-child(3){left:46%;bottom:10%} .gaba3-figurinha-stage.fig-bounce .gaba3-fig-face, .gaba3-figurinha-stage.fig-bounce .gaba3-fig-photo{animation:figBounce 1.1s ease-in-out infinite} .gaba3-figurinha-stage.fig-spin-soft .gaba3-fig-face, .gaba3-figurinha-stage.fig-spin-soft .gaba3-fig-photo{animation:figSpinSoft 3.2s ease-in-out infinite} .gaba3-figurinha-stage.fig-wiggle .gaba3-fig-face, .gaba3-figurinha-stage.fig-wiggle .gaba3-fig-photo{animation:figWiggle .7s ease-in-out infinite} .gaba3-figurinha-stage.fig-pulse .gaba3-fig-face, .gaba3-figurinha-stage.fig-pulse .gaba3-fig-photo{animation:figPulse 1.2s ease-in-out infinite} .gaba3-figurinha-stage.fig-float .gaba3-fig-face, .gaba3-figurinha-stage.fig-float .gaba3-fig-photo{animation:figFloat 2.2s ease-in-out infinite} .gaba3-figurinha-stage.fig-pop-heart .gaba3-fig-face, .gaba3-figurinha-stage.fig-pop-heart .gaba3-fig-photo{animation:figPopHeart 1.4s ease-in-out infinite} .gaba3-figurinha-chat.fig-bounce .gaba3-fig-photo, .gaba3-figurinha-chat.fig-bounce .gaba3-fig-face{animation:figBounce 1.2s ease-in-out infinite} .gaba3-figurinha-chat.fig-pulse .gaba3-fig-photo, .gaba3-figurinha-chat.fig-pulse .gaba3-fig-face{animation:figPulse 1.3s ease-in-out infinite} @keyframes figAura{0%,100%{transform:scale(.96);opacity:.75}50%{transform:scale(1.06);opacity:1}} @keyframes figOrn{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.12)}} @keyframes figBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px)}70%{transform:translateY(4px)}} @keyframes figSpinSoft{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}} @keyframes figWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}} @keyframes figPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}} @keyframes figFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes figPopHeart{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}55%{transform:scale(.94)}} .gaba3-invite-stage-host .gaba3-figurinha-stage, .gaba3-celebration-stage .gaba3-figurinha-stage{ width:min(88vw,380px);min-height:min(72vw,380px); } @media (prefers-reduced-motion:reduce){ .gaba3-figurinha-stage .gaba3-fig-face, .gaba3-figurinha-stage .gaba3-fig-photo, .gaba3-figurinha-stage .gaba3-fig-aura, .gaba3-figurinha-stage .gaba3-fig-orn, .gaba3-figurinha-chat .gaba3-fig-face, .gaba3-figurinha-chat .gaba3-fig-photo{animation:none!important} } .gaba3-invite-sky{position:absolute;inset:0;pointer-events:none;opacity:.35; background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.2),transparent 40%), radial-gradient(circle at 80% 90%,var(--invite-accent),transparent 45%)} .gaba3-invite-body{position:relative;z-index:2} .gaba3-invite-ribbon{ position:absolute;top:14px;left:-28px;z-index:3;width:110px;padding:5px 0; background:linear-gradient(90deg, var(--invite-accent,#55c900), color-mix(in srgb, var(--invite-accent,#55c900) 70%, #fff)); color:#111;font-size:9px;font-weight:900;letter-spacing:.08em;text-transform:uppercase; transform:rotate(-38deg);box-shadow:0 4px 10px rgba(0,0,0,.35);pointer-events:none; } .gaba3-invite-ribbon{display:none!important} .gaba3-invite-ribbon::after{content:none} .gaba3-invite-model,.gaba3-invite-foot,.gaba3-invite-cta{display:none!important} /* Na tela da sala: sem instruções de arrastar — só a mensagem */ #gaba3-invite-stage-host .gaba3-invite-drop-hint, .gaba3-celebration-root .gaba3-invite-drop-hint{display:none!important} .gaba3-invite-glow{ position:absolute;inset:0 auto auto 0;width:100%;height:55%;z-index:0; background:radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--invite-accent,#55c900) 40%, transparent), transparent 70%); animation:gaba3InvitePulse 2.8s ease-in-out infinite;pointer-events:none; } .gaba3-invite-sparkles{position:absolute;inset:0;z-index:1;pointer-events:none} .gaba3-invite-sparkles i{ position:absolute;width:6px;height:6px;border-radius:50%; background:var(--invite-accent,#55c900);opacity:0; animation:gaba3InviteSpark 2.4s ease-in-out infinite; } .gaba3-invite-sparkles i:nth-child(1){left:12%;top:18%;animation-delay:.1s} .gaba3-invite-sparkles i:nth-child(2){right:14%;top:22%;animation-delay:.5s} .gaba3-invite-sparkles i:nth-child(3){left:20%;bottom:22%;animation-delay:.9s} .gaba3-invite-sparkles i:nth-child(4){right:18%;bottom:18%;animation-delay:1.3s} .gaba3-invite-sparkles i:nth-child(5){left:48%;top:12%;width:4px;height:4px;animation-delay:1.7s} .gaba3-invite-sparkles i:nth-child(6){right:42%;bottom:12%;width:5px;height:5px;animation-delay:2.1s} .gaba3-invite-top{position:relative;z-index:1} .gaba3-invite-emoji{ display:inline-grid;place-items:center;width:58px;height:58px;margin:0 auto 6px; border-radius:18px;background:rgba(255,255,255,.12);font-size:30px; box-shadow:0 0 24px color-mix(in srgb, var(--invite-accent,#55c900) 35%, transparent); animation:gaba3InviteBob 2.2s ease-in-out infinite; } .gaba3-invite-top small{ display:block;color:color-mix(in srgb, var(--invite-accent,#55c900) 85%, #fff); font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; } .gaba3-invite-model{ display:block;margin-top:4px;font-style:normal;font-size:10px;color:rgba(255,255,255,.72);font-weight:600; } .gaba3-invite-title{ position:relative;z-index:1;margin:10px 0 6px;font-size:clamp(1.35rem,4.2vw,1.7rem);line-height:1.15;color:#fff; text-shadow:0 2px 18px color-mix(in srgb, var(--invite-accent,#55c900) 40%, transparent); } .gaba3-invite-host{position:relative;z-index:1;margin:0 0 8px;color:#f0e2c8;font-size:.95rem} .gaba3-invite-msg{position:relative;z-index:1;margin:0 0 12px;color:#f2e8d4;font-size:.88rem;line-height:1.45;font-style:italic; text-shadow:0 1px 8px rgba(0,0,0,.35)} /* Modo Parabéns / elogio — letras GRANDES e em movimento + foto */ .gaba3-invite-card.gaba3-invite-mode-parabens{ width:min(100%,560px);min-height:min(78vh,640px);padding:32px 22px 24px; } .gaba3-invite-card.gaba3-invite-mode-parabens .gaba3-invite-title, .gaba3-invite-card.gaba3-invite-mode-parabens .gaba3-invite-bigline{ font-size:clamp(2rem,6.5vw,2.85rem);line-height:1.08;font-weight:900;letter-spacing:.01em; margin:8px 0 10px;color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.25),0 8px 28px color-mix(in srgb, var(--invite-accent,#ff3d8a) 55%, transparent); } .gaba3-invite-card.gaba3-invite-mode-parabens .gaba3-invite-name-big{ margin:4px 0 12px;font-size:clamp(1.7rem,5.5vw,2.4rem);font-weight:900;color:#ffe56a; } .gaba3-invite-card.gaba3-invite-mode-parabens .gaba3-invite-msg-loud{ font-size:clamp(1.1rem,3.2vw,1.35rem);font-style:normal;font-weight:700;line-height:1.4; color:#fff;opacity:.96; } /* Cartão pessoal: só foto + nome + letras — sem bolo/modelo/carnaval */ .gaba3-invite-card.gaba3-invite-pessoal{ border:1px solid color-mix(in srgb, var(--invite-accent,#3dc4ff) 55%, transparent); box-shadow:0 22px 50px rgba(0,0,0,.5), inset 0 0 60px color-mix(in srgb, var(--invite-accent,#3dc4ff) 18%, transparent); } .gaba3-invite-card.gaba3-invite-pessoal .gaba3-invite-person-name{ margin:2px 0 6px;color:var(--invite-name,#ffe24a);font-size:clamp(1.7rem,6.5vw,2.35rem);font-weight:900; text-shadow:0 2px 0 rgba(0,0,0,.28),0 8px 24px rgba(0,0,0,.4); } .gaba3-invite-card.gaba3-invite-pessoal .gaba3-invite-bigline, .gaba3-invite-card.gaba3-invite-pessoal .gaba3-invite-msg-loud{ /* As letras ficam nítidas sem cobrir o cenário com uma névoa escura. */ text-shadow:0 2px 2px rgba(0,0,0,.82),0 0 12px rgba(0,0,0,.68),0 7px 24px rgba(0,0,0,.46); } .gaba3-invite-card.gaba3-invite-pessoal .gaba3-invite-person-name .invd-letter{color:inherit} /* Celular: cartão ocupa a tela inteira; o próximo substitui este */ @media (max-width:720px){ .gaba3-invite-stage-host{ inset:0;padding:0;align-content:stretch;place-items:stretch; background:#050a08;backdrop-filter:none; overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y; } .gaba3-invite-stage-host .gaba3-celebration-slide{ max-width:none;width:100%;height:100%;min-height:100%; place-items:stretch;margin:0; } .gaba3-invite-stage-host .gaba3-invite-card, .gaba3-invite-card, .gaba3-invite-card.gaba3-invite-mode-parabens, .gaba3-invite-card.gaba3-invite-pessoal{ width:100%!important;max-width:none!important; min-height:100%!important;max-height:none!important; height:100%;border-radius:0;margin:0; padding:max(16px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom)); box-sizing:border-box;overflow:auto; } .gaba3-celebration-root, .gaba3-celebration-root .gaba3-celebration-stage{ width:100vw!important;max-width:none!important; min-height:100dvh;max-height:100dvh;padding:0; } .gaba3-celebration-root .gaba3-invite-card{ width:100%!important;min-height:100dvh;border-radius:0; } .invd-preview-block .invd-preview{max-height:min(75vh,680px)} .invd-preview-block .gaba3-invite-card{width:100%;max-width:none} } .gaba3-invite-card.gaba3-invite-gender-male .gaba3-invite-title-color .invd-letter:nth-child(odd){color:var(--invite-letter-a,#5fd0ff)} .gaba3-invite-card.gaba3-invite-gender-male .gaba3-invite-title-color .invd-letter:nth-child(even){color:var(--invite-letter-b,#ffe24a)} .gaba3-invite-card.gaba3-invite-gender-female .gaba3-invite-title-color .invd-letter:nth-child(odd){color:var(--invite-letter-a,#ff7ab8)} .gaba3-invite-card.gaba3-invite-gender-female .gaba3-invite-title-color .invd-letter:nth-child(even){color:var(--invite-letter-b,#fff06a)} .gaba3-invite-card.gaba3-invite-gender-neutral .gaba3-invite-title-color .invd-letter:nth-child(odd){color:var(--invite-letter-a,#d080ff)} .gaba3-invite-card.gaba3-invite-gender-neutral .gaba3-invite-title-color .invd-letter:nth-child(even){color:var(--invite-letter-b,#40e0ff)} .gaba3-invite-photo-wrap{ position:relative;z-index:2;width:clamp(110px,32vw,168px);height:clamp(110px,32vw,168px); margin:4px auto 12px;border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb, var(--invite-accent,#ff3d8a) 80%, #fff), 0 14px 32px rgba(0,0,0,.45); animation:invdPhotoBob 2.4s ease-in-out infinite; overflow:hidden;background:#111; } .gaba3-invite-photo-drop{ display:grid;place-items:center; outline:2px dashed transparent;outline-offset:4px;transition:outline-color .15s, box-shadow .15s, transform .15s; } .gaba3-invite-photo-drop.needs-face{ outline:2px dashed color-mix(in srgb, var(--invite-accent,#55c900) 70%, #fff); outline-offset:3px; } .gaba3-invite-photo-drop.is-drop-hover{ outline-color:color-mix(in srgb, var(--invite-accent,#55c900) 90%, #fff); box-shadow:0 0 0 6px color-mix(in srgb, var(--invite-accent,#55c900) 55%, #fff), 0 16px 36px rgba(0,0,0,.5); transform:scale(1.06); } .gaba3-invite-drop-hint{ position:absolute;left:50%;bottom:10px;transform:translateX(-50%); margin:0;padding:2px 8px;border-radius:999px;font-style:normal;font-size:10px;font-weight:800; letter-spacing:.02em;white-space:nowrap;color:#102010;background:rgba(255,255,255,.88); pointer-events:none; } .gaba3-invite-photo-wrap{position:relative} .gaba3-invite-photo{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .gaba3-invite-photo-fallback, .gaba3-invite-photo-initials{ display:grid;place-items:center;width:100%;height:100%; background:radial-gradient(circle at 35% 30%,#fff6,#0000 55%), linear-gradient(145deg,var(--invite-accent,#ff3d8a),#ff8a20 55%,#ffe020); font-size:clamp(2.2rem,10vw,3.4rem);font-weight:900;color:#fff; text-shadow:0 4px 14px rgba(0,0,0,.35);letter-spacing:.04em; } .gaba3-invite-photo-fallback span{ font-size:clamp(2.2rem,10vw,3.4rem);font-weight:900;color:#fff; text-shadow:0 4px 14px rgba(0,0,0,.35);letter-spacing:.04em; } .gaba3-invite-gender-male .gaba3-invite-photo-initials{ background:radial-gradient(circle at 35% 30%,#fff5,#0000 55%), linear-gradient(145deg,#0a4a7a,#1280c8 50%,#ffe24a); } .gaba3-invite-gender-female .gaba3-invite-photo-initials{ background:radial-gradient(circle at 35% 30%,#fff6,#0000 55%), linear-gradient(145deg,#c02070,#ff5aa8 50%,#fff06a); } .invd-letter{ display:inline-block;transform-origin:center bottom; animation:invdLetterPop .85s cubic-bezier(.2,.9,.3,1) both, invdLetterDance 2.2s ease-in-out infinite; animation-delay:calc(var(--i,0) * .045s), calc(.85s + var(--i,0) * .045s); } .invd-letter.invd-space{width:.35em;animation:none} .invd-reveal-row{ display:block;opacity:0;transform:translate3d(0,18px,0) scale(.96); animation:invdRevealRow .58s cubic-bezier(.16,.84,.2,1) both; animation-delay:calc(.20s + var(--row,0) * .42s); } .invd-reveal-row .invd-letter{ animation-delay:calc(.18s + var(--row,0) * .42s + var(--i,0) * .032s),calc(1.05s + var(--row,0) * .42s + var(--i,0) * .032s); } .invd-reveal-row.invd-reveal-message{margin-top:.18em} @keyframes invdRevealRow{ 0%{opacity:0;transform:translate3d(0,24px,0) scale(.95);filter:blur(4px)} 72%{opacity:1;transform:translate3d(0,-3px,0) scale(1.012);filter:blur(0)} 100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)} } /* Cada homenagem chega por uma rota diferente. Nome e título podem ter uma entrada expressiva; as linhas pequenas permanecem calmas para leitura. */ .gaba3-invite-pessoal .invd-reveal-name, .gaba3-invite-pessoal .invd-reveal-title{will-change:transform,opacity} .gaba3-invite-pessoal.invd-arrival-left .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-left .invd-reveal-title, .gaba3-invite-pessoal.invd-arrival-comet-left .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-comet-left .invd-reveal-title{animation-name:invdRevealFromLeft} .gaba3-invite-pessoal.invd-arrival-right .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-right .invd-reveal-title, .gaba3-invite-pessoal.invd-arrival-comet-right .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-comet-right .invd-reveal-title{animation-name:invdRevealFromRight} .gaba3-invite-pessoal.invd-arrival-top .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-top .invd-reveal-title, .gaba3-invite-pessoal.invd-arrival-kite-top .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-kite-top .invd-reveal-title{animation-name:invdRevealFromTop} .gaba3-invite-pessoal.invd-arrival-bottom .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-bottom .invd-reveal-title{animation-name:invdRevealFromBottom} .gaba3-invite-pessoal.invd-arrival-ripple .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-ripple .invd-reveal-title{animation-name:invdRevealRipple} .gaba3-invite-pessoal.invd-arrival-bloom .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-bloom .invd-reveal-title{animation-name:invdRevealBloom} .gaba3-invite-pessoal.invd-arrival-horizon .invd-reveal-name, .gaba3-invite-pessoal.invd-arrival-horizon .invd-reveal-title{animation-name:invdRevealHorizon} .gaba3-invite-pessoal .invd-reveal-message{ animation-name:invdRevealCalm!important; animation-duration:.48s!important; filter:none!important; } .gaba3-invite-pessoal .invd-reveal-message .invd-letter{ animation:invdLetterSoft .38s ease-out both!important; animation-delay:calc(.28s + var(--row,0) * .30s + var(--i,0) * .018s)!important; } @keyframes invdRevealFromLeft{0%{opacity:0;transform:translate3d(-15vw,0,0) rotate(-2deg) scale(.96)}72%{opacity:1;transform:translate3d(5px,0,0) rotate(.4deg) scale(1.01)}100%{opacity:1;transform:none}} @keyframes invdRevealFromRight{0%{opacity:0;transform:translate3d(15vw,0,0) rotate(2deg) scale(.96)}72%{opacity:1;transform:translate3d(-5px,0,0) rotate(-.4deg) scale(1.01)}100%{opacity:1;transform:none}} @keyframes invdRevealFromTop{0%{opacity:0;transform:translate3d(0,-13vh,0) scale(.94)}72%{opacity:1;transform:translate3d(0,4px,0) scale(1.015)}100%{opacity:1;transform:none}} @keyframes invdRevealFromBottom{0%{opacity:0;transform:translate3d(0,13vh,0) scale(.94)}72%{opacity:1;transform:translate3d(0,-4px,0) scale(1.015)}100%{opacity:1;transform:none}} @keyframes invdRevealRipple{0%{opacity:0;transform:scale(.62);letter-spacing:.16em}75%{opacity:1;transform:scale(1.025);letter-spacing:.015em}100%{opacity:1;transform:none}} @keyframes invdRevealBloom{0%{opacity:0;transform:scale(.72) rotate(-3deg)}72%{opacity:1;transform:scale(1.035) rotate(.5deg)}100%{opacity:1;transform:none}} @keyframes invdRevealHorizon{0%{opacity:0;transform:translate3d(0,7vh,0) scaleX(.78)}75%{opacity:1;transform:translate3d(0,-2px,0) scaleX(1.015)}100%{opacity:1;transform:none}} @keyframes invdRevealCalm{0%{opacity:0;transform:translate3d(0,7px,0)}100%{opacity:1;transform:none}} @keyframes invdLetterSoft{0%{opacity:0;transform:translate3d(0,3px,0)}100%{opacity:1;transform:none}} @keyframes invdLetterPop{ 0%{opacity:0;transform:translateY(28px) scale(.55) rotate(-8deg)} 70%{opacity:1;transform:translateY(-4px) scale(1.08) rotate(2deg)} 100%{opacity:1;transform:none} } @keyframes invdLetterDance{ 0%,100%{transform:translateY(0) rotate(0deg)} 40%{transform:translateY(-6px) rotate(-3deg)} 70%{transform:translateY(2px) rotate(3deg)} } @keyframes invdPhotoBob{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-8px) scale(1.03)} } .invd-foto-opcional{ display:inline-flex;align-items:center;gap:6px;margin-top:8px; font-size:11px;color:#9ab89a;cursor:pointer;text-decoration:underline; text-underline-offset:2px; } .invd-foto-opcional:hover{color:#c8efb0} .invd-foto-preview{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:#d8eadb} .invd-foto-preview img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #55c90088;box-shadow:0 4px 12px #0006} .invd-foto-preview[hidden]{display:none!important} .invd-room-people.is-pulse{ animation:invdFotoPulse .55s ease 0s 3; border-color:rgba(143,255,103,.7)!important; } @media (prefers-reduced-motion:reduce){ .invd-letter,.gaba3-invite-photo-wrap{animation:none!important} } .gaba3-invite-meta{ position:relative;z-index:1;list-style:none;margin:0;padding:12px;border-radius:14px; background:rgba(0,0,0,.38);text-align:left;display:grid;gap:7px; border:1px solid rgba(255,255,255,.08); } .gaba3-invite-meta li{display:grid;gap:1px} .gaba3-invite-meta span{color:rgba(255,230,200,.65);font-size:10px;letter-spacing:.06em;text-transform:uppercase} .gaba3-invite-meta strong{color:#fff;font-size:13px;font-weight:700} .gaba3-invite-foot{ position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between; margin-top:12px;gap:8px; } .gaba3-invite-cta{ display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px; background:color-mix(in srgb, var(--invite-accent,#55c900) 40%, transparent); border:1px solid color-mix(in srgb, var(--invite-accent,#55c900) 65%, transparent); color:#fff;font-size:11px;font-weight:800; } .gaba3-invite-foot small{color:rgba(255,240,220,.55);font-size:10px;letter-spacing:.14em} .gaba3-invite-image-slide{margin:0;width:min(100%,380px);text-align:center} .gaba3-invite-image-slide img{ display:block;width:100%;max-height:min(52vh,420px);object-fit:contain; border-radius:18px;border:1px solid rgba(255,255,255,.18); box-shadow:0 20px 50px rgba(0,0,0,.45);background:rgba(0,0,0,.25); } .gaba3-invite-image-slide figcaption{margin-top:10px;color:#f4ebda;font-size:13px;font-weight:700} /* Props animados do agente criativo */ .invd-prop{position:absolute;pointer-events:none;z-index:1} .invd-prop-cake{left:50%;top:8px;transform:translateX(-50%);z-index:2} .invd-cake{position:relative;width:72px;height:78px;animation:invdCakeDance 1.8s ease-in-out infinite} .invd-cake-base,.invd-cake-mid,.invd-cake-top{ position:absolute;left:50%;transform:translateX(-50%);border-radius:8px; box-shadow:0 2px 0 rgba(0,0,0,.15) inset; } .invd-cake-base{bottom:0;width:68px;height:22px;background:linear-gradient(180deg,#f4b4c8,#e8789a)} .invd-cake-mid{bottom:18px;width:54px;height:20px;background:linear-gradient(180deg,#fff1c9,#f0c860)} .invd-cake-top{bottom:34px;width:40px;height:16px;background:linear-gradient(180deg,#c9f0ff,#7ec8ff)} .invd-cake-candle{position:absolute;left:50%;bottom:48px;width:4px;height:14px;margin-left:-2px;background:#ffe8a0;border-radius:2px} .invd-cake-flame{ position:absolute;left:50%;bottom:60px;width:10px;height:14px;margin-left:-5px;border-radius:50% 50% 40% 40%; background:radial-gradient(circle at 50% 70%,#fff,#ffd166 40%,#ff6b00 80%); animation:invdFlame 0.45s ease-in-out infinite alternate; } .invd-prop-faces{inset:0} .invd-face{ position:absolute;left:var(--x);top:var(--y);font-size:22px; animation:invdFaceFloat 2.6s ease-in-out var(--d,0s) infinite; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); } .invd-prop-mini-balloons{inset:0 0 auto;height:40%} .invd-prop-mini-balloons i{ position:absolute;bottom:0;left:var(--x);width:16px;height:20px;border-radius:50%; background:var(--c);animation:invdMiniBalloon 3.5s ease-in-out infinite; } .invd-prop-mini-balloons i:nth-child(2){animation-delay:.4s} .invd-prop-mini-balloons i:nth-child(3){animation-delay:.8s} .invd-prop-mini-balloons i:nth-child(4){animation-delay:1.2s} .invd-prop-confetti{inset:0;overflow:hidden} .invd-prop-confetti i{ position:absolute;top:-10%;width:5px;height:12px;border-radius:2px; background:var(--invite-accent);animation:invdConfetti 2.8s linear infinite; } .invd-prop-confetti i:nth-child(1){left:8%;animation-delay:0s;background:#ff6b9d} .invd-prop-confetti i:nth-child(2){left:22%;animation-delay:.3s;background:#ffd166} .invd-prop-confetti i:nth-child(3){left:38%;animation-delay:.6s;background:#7ec8ff} .invd-prop-confetti i:nth-child(4){left:52%;animation-delay:.15s;background:#8fff67} .invd-prop-confetti i:nth-child(5){left:66%;animation-delay:.9s;background:#c9a0ff} .invd-prop-confetti i:nth-child(6){left:78%;animation-delay:.45s;background:#fff} .invd-prop-confetti i:nth-child(7){left:88%;animation-delay:1.1s;background:#ff8fab} .invd-prop-confetti i:nth-child(8){left:45%;animation-delay:1.4s;background:#55c900} .invd-prop-stars{inset:0} .invd-prop-stars i{ position:absolute;width:3px;height:3px;border-radius:50%;background:#fff; animation:invdTwinkle 1.8s ease-in-out infinite; } .invd-prop-stars i:nth-child(1){left:10%;top:12%}.invd-prop-stars i:nth-child(2){left:30%;top:8%;animation-delay:.3s} .invd-prop-stars i:nth-child(3){left:55%;top:16%;animation-delay:.6s}.invd-prop-stars i:nth-child(4){left:75%;top:10%;animation-delay:.9s} .invd-prop-stars i:nth-child(5){left:18%;top:28%;animation-delay:.2s}.invd-prop-stars i:nth-child(6){left:62%;top:30%;animation-delay:.5s} .invd-prop-stars i:nth-child(7){left:85%;top:24%;animation-delay:.8s}.invd-prop-stars i:nth-child(8){left:42%;top:6%;animation-delay:1.1s} .invd-prop-moon{top:12px;right:16px;width:36px;height:36px;border-radius:50%; background:radial-gradient(circle at 35% 35%,#fff8e0,#f0d5a8 60%,#c9a060); box-shadow:0 0 24px rgba(255,230,160,.5);animation:invdMoon 6s ease-in-out infinite} .invd-prop-flowers{inset:auto 0 8px;display:flex;justify-content:space-around;font-size:18px} .invd-prop-flowers span{animation:invdBob 2s ease-in-out infinite} .invd-prop-flowers span:nth-child(2){animation-delay:.3s}.invd-prop-flowers span:nth-child(3){animation-delay:.6s} .invd-prop-butterflies{inset:0} .invd-prop-butterflies span{position:absolute;font-size:20px;animation:invdButterfly 5s linear infinite} .invd-prop-butterflies span:first-child{left:10%;top:30%}.invd-prop-butterflies span:last-child{right:12%;top:45%;animation-delay:1.5s;animation-direction:reverse} .invd-prop-waves{left:0;right:0;bottom:0;height:48px;overflow:hidden} .invd-prop-waves span{ position:absolute;left:-20%;right:-20%;height:48px;border-radius:40%; background:rgba(255,255,255,.12);animation:invdWave 3.5s ease-in-out infinite; } .invd-prop-waves span:nth-child(2){animation-delay:1s;opacity:.7}.invd-prop-waves span:nth-child(3){animation-delay:2s;opacity:.45} .invd-prop-neon-bars{inset:0} .invd-prop-neon-bars i{position:absolute;height:2px;left:10%;right:10%;background:var(--invite-accent); box-shadow:0 0 12px var(--invite-accent);animation:invdNeonPulse 1.6s ease-in-out infinite} .invd-prop-neon-bars i:nth-child(1){top:18%}.invd-prop-neon-bars i:nth-child(2){top:50%;animation-delay:.4s;opacity:.7} .invd-prop-neon-bars i:nth-child(3){bottom:22%;animation-delay:.8s} .invd-prop-crown{top:6px;left:50%;transform:translateX(-50%);font-size:36px;animation:invdCrown 2.4s ease-in-out infinite;z-index:2} .invd-prop-sparkle-burst{inset:0} .invd-prop-sparkle-burst i{position:absolute;width:8px;height:8px;background:#fff;border-radius:50%; animation:invdSparkBurst 2s ease-out infinite} .invd-prop-sparkle-burst i:nth-child(1){left:50%;top:20%}.invd-prop-sparkle-burst i:nth-child(2){left:30%;top:35%;animation-delay:.2s} .invd-prop-sparkle-burst i:nth-child(3){left:70%;top:35%;animation-delay:.4s} .invd-prop-sparkle-burst i:nth-child(4){left:40%;top:55%;animation-delay:.6s} .invd-prop-sparkle-burst i:nth-child(5){left:60%;top:55%;animation-delay:.8s} .invd-prop-baby{top:10px;left:50%;transform:translateX(-50%);display:flex;gap:8px;font-size:28px;z-index:2} .invd-baby-bounce{animation:invdBob 1.4s ease-in-out infinite} .invd-rattle{animation:invdRattle 1.2s ease-in-out infinite} .invd-prop-clouds{inset:0 0 auto;height:30%} .invd-prop-clouds span{position:absolute;top:10px;width:48px;height:18px;border-radius:20px;background:rgba(255,255,255,.35); animation:invdCloud 8s linear infinite} .invd-prop-clouds span:nth-child(1){left:-20%}.invd-prop-clouds span:nth-child(2){left:-40%;top:28px;width:36px;animation-duration:11s} .invd-prop-clouds span:nth-child(3){left:-10%;top:18px;width:28px;animation-duration:9s;animation-delay:2s} .invd-prop-palm{inset:auto 0 0;display:flex;justify-content:space-between;padding:0 8px;font-size:32px} .invd-prop-palm span{animation:invdPalm 3s ease-in-out infinite;transform-origin:bottom center} .invd-prop-palm span:last-child{animation-delay:.5s} .invd-prop-diploma{top:8px;left:50%;transform:translateX(-50%);display:flex;gap:10px;font-size:30px;z-index:2} .invd-cap{animation:invdCapToss 2.2s ease-in-out infinite} .invd-scroll{animation:invdBob 2s ease-in-out infinite .3s} .invd-prop-shop{top:10px;left:50%;transform:translateX(-50%);z-index:2} .invd-shop{width:70px;height:54px;background:linear-gradient(180deg,#8a5a30,#5a3818);border-radius:6px 6px 2px 2px; position:relative;box-shadow:0 4px 12px rgba(0,0,0,.35)} .invd-shop-sign{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:#55c900;color:#fff; font-size:8px;font-weight:900;padding:2px 6px;border-radius:4px;animation:invdNeonPulse 1.5s ease-in-out infinite} .invd-shop-door{position:absolute;bottom:0;left:50%;width:22px;height:28px;margin-left:-11px;background:#2a1810; border-radius:3px 3px 0 0;transform-origin:left center;animation:invdDoor 3s ease-in-out infinite} .invd-prop-sun{top:8px;right:14px} .invd-sun-core{display:block;width:40px;height:40px;border-radius:50%; background:radial-gradient(circle at 40% 40%,#fff,#ffd166 45%,#ff8a3a); box-shadow:0 0 30px rgba(255,200,80,.7);animation:invdSunSpin 12s linear infinite} .invd-prop-hearts{inset:0} .invd-prop-hearts span{position:absolute;font-size:18px;animation:invdHeartRise 3.5s ease-in infinite} .invd-prop-hearts span:nth-child(1){left:12%;bottom:5%}.invd-prop-hearts span:nth-child(2){left:35%;bottom:0;animation-delay:.7s} .invd-prop-hearts span:nth-child(3){left:58%;bottom:8%;animation-delay:1.4s} .invd-prop-hearts span:nth-child(4){left:78%;bottom:2%;animation-delay:2.1s} .invd-prop-leaves{inset:0} .invd-prop-leaves span{position:absolute;font-size:20px;animation:invdLeaf 4.5s linear infinite} .invd-prop-leaves span:nth-child(1){left:15%;top:-5%}.invd-prop-leaves span:nth-child(2){left:50%;top:-5%;animation-delay:1.2s} .invd-prop-leaves span:nth-child(3){left:80%;top:-5%;animation-delay:2.4s} .invd-prop-birds{top:16%;left:0;right:0} .invd-prop-birds span{position:absolute;font-size:16px;animation:invdBird 7s linear infinite} .invd-prop-birds span:first-child{top:0}.invd-prop-birds span:last-child{top:18px;animation-delay:2s;animation-duration:9s} @keyframes gaba3InviteIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}} @keyframes gaba3InvitePulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.05)}} @keyframes gaba3InviteBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes gaba3InviteSpark{0%,100%{opacity:0;transform:scale(.4)}40%,60%{opacity:.9;transform:scale(1)}} @keyframes invdCakeDance{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}} @keyframes invdFlame{from{transform:scale(.85) translateY(0);opacity:.9}to{transform:scale(1.1) translateY(-2px);opacity:1}} @keyframes invdFaceFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.08)}} @keyframes invdMiniBalloon{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} @keyframes invdConfetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(110%) rotate(220deg);opacity:.3}} @keyframes invdTwinkle{0%,100%{opacity:.2;transform:scale(.6)}50%{opacity:1;transform:scale(1.4)}} @keyframes invdMoon{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}} @keyframes invdBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} @keyframes invdButterfly{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(40px,-20px) rotate(12deg)}100%{transform:translate(80px,10px) rotate(-8deg)}} @keyframes invdWave{0%,100%{transform:translateX(0) translateY(8px)}50%{transform:translateX(12px) translateY(0)}} @keyframes invdNeonPulse{0%,100%{opacity:.45}50%{opacity:1}} @keyframes invdCrown{0%,100%{transform:translateX(-50%) translateY(0) rotate(-4deg)}50%{transform:translateX(-50%) translateY(-6px) rotate(4deg)}} @keyframes invdSparkBurst{0%{transform:scale(.2);opacity:0}40%{opacity:1}100%{transform:scale(1.8);opacity:0}} @keyframes invdRattle{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}} @keyframes invdCloud{0%{transform:translateX(0)}100%{transform:translateX(140%)}} @keyframes invdPalm{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg)}} @keyframes invdCapToss{0%,100%{transform:translateY(0) rotate(-8deg)}40%{transform:translateY(-16px) rotate(12deg)}70%{transform:translateY(-4px) rotate(-4deg)}} @keyframes invdDoor{0%,40%{transform:perspective(80px) rotateY(0)}55%,85%{transform:perspective(80px) rotateY(-48deg)}100%{transform:perspective(80px) rotateY(0)}} @keyframes invdSunSpin{to{transform:rotate(360deg)}} @keyframes invdHeartRise{0%{transform:translateY(0) scale(.8);opacity:0}20%{opacity:1}100%{transform:translateY(-120px) scale(1.2);opacity:0}} @keyframes invdLeaf{0%{transform:translate(0,-10px) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(30px,140px) rotate(160deg);opacity:0}} @keyframes invdBird{0%{left:-15%;transform:translateY(0)}50%{transform:translateY(-12px)}100%{left:110%;transform:translateY(4px)}} @keyframes invdVeilOpen{from{transform:scaleX(1);opacity:.85}to{transform:scaleX(.15);opacity:.35}} @keyframes invdElegantIn{ 0%{opacity:0;transform:translateY(18px) scale(.94);filter:blur(4px)} 60%{opacity:1;filter:blur(0)} 100%{opacity:1;transform:none;filter:none} } @keyframes invdShimmerSweep{ 0%{transform:translateX(-120%) skewX(-12deg);opacity:0} 30%{opacity:.55} 100%{transform:translateX(220%) skewX(-12deg);opacity:0} } /* Motion skill — entrada atraente + ambientação elegante (sem carinhas caóticas) */ .gaba3-invite-scene.invd-motion-ceremony, .gaba3-invite-scene.invd-motion-celebration, .gaba3-invite-scene.invd-motion-tender, .gaba3-invite-scene.invd-motion-commerce, .gaba3-invite-scene.invd-motion-memorial{ animation:invdElegantIn .85s cubic-bezier(.22,.9,.3,1) both; } .gaba3-invite-scene.invd-motion-memorial{ animation-duration:1.1s; filter:saturate(.85); } .gaba3-invite-scene.invd-motion-memorial::after{display:none} .gaba3-invite-scene.invd-motion-ceremony .gaba3-invite-body, .gaba3-invite-scene.invd-motion-luxury .gaba3-invite-body{ animation:invdElegantIn 1s .12s cubic-bezier(.22,.9,.3,1) both; } .gaba3-invite-scene.invd-motion-ceremony::after, .gaba3-invite-scene.invd-motion-luxury::after{ content:""; position:absolute;inset:0;pointer-events:none;z-index:3; background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%); animation:invdShimmerSweep 2.8s 0.4s ease-in-out 2; } .gaba3-invite-scene.invd-motion-tender .invd-prop-hearts span{ animation-duration:5.5s;animation-timing-function:ease-in-out; } .gaba3-invite-scene.invd-motion-ceremony .invd-cake, .gaba3-invite-scene.invd-motion-tender .invd-cake{ animation:invdCakeDance 3.2s ease-in-out 2; } .gaba3-invite-scene.invd-motion-celebration .invd-cake{ animation:invdCakeDance 2.2s ease-in-out infinite; } .invd-prop-veil{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden} .invd-veil-left,.invd-veil-right{ position:absolute;top:0;bottom:0;width:46%; background:linear-gradient(90deg,rgba(255,245,220,.35),rgba(255,245,220,.05)); animation:invdVeilOpen 1.6s .2s ease forwards; } .invd-veil-left{left:0;transform-origin:left center} .invd-veil-right{right:0;transform-origin:right center;background:linear-gradient(270deg,rgba(255,245,220,.35),rgba(255,245,220,.05))} .semi-btn-convite{ min-height:40px;padding:0 12px;border:1px solid rgba(140,255,90,.35);border-radius:12px; background:rgba(12,24,12,.9);color:#e8ffe0;font-size:12px;font-weight:800;cursor:pointer; } .semi-btn-convite:hover,.semi-btn-convite.activo{border-color:#55c900;background:rgba(85,201,0,.18)} @media (prefers-reduced-motion:reduce){ .gaba3-invite-scene,.gaba3-invite-scene *{animation-duration:.01ms!important;animation-iteration-count:1!important} } /* Festa em tela cheia — canvas-confetti + balões + serpentinas */ .gaba3-celebration-root{ position:fixed;inset:0;z-index:260;display:grid;place-items:center; pointer-events:none; background: radial-gradient(ellipse at 50% 20%, rgba(255,107,157,.22), transparent 45%), radial-gradient(ellipse at 20% 80%, rgba(85,201,0,.14), transparent 40%), rgba(6,8,10,.78); backdrop-filter:blur(3px); } .gaba3-celebration-root[hidden]{display:none!important} .gaba3-celebration-canvas{ position:absolute;inset:0;width:100%;height:100%;pointer-events:none; } .gaba3-celebration-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none} .gaba3-celebration-root:not(.is-intense) .gaba3-celebration-fx{display:none} .gaba3-balloons,.gaba3-streamers{position:absolute;inset:0} .gaba3-balloon{ position:absolute;bottom:-18%;left:var(--b-left,50%); width:28px;height:36px;border-radius:50% 50% 50% 50% / 55% 55% 45% 45%; background:radial-gradient(circle at 35% 30%,#fff8, transparent 40%), var(--b-color,#ff6b9d); box-shadow:inset -4px -6px 10px rgba(0,0,0,.18); animation:gaba3BalloonFloat var(--b-dur,8s) ease-in var(--b-delay,0s) infinite; } .gaba3-balloon::after{ content:"";position:absolute;left:50%;bottom:-14px;width:1px;height:16px; background:rgba(255,255,255,.35);transform:translateX(-50%); } .gaba3-streamer{ position:absolute;top:-12%;left:var(--s-left,0); width:6px;height:42px;border-radius:3px; background:linear-gradient(180deg, var(--s-color,#ff6b9d), transparent); transform:rotate(var(--s-rot,-20deg)); animation:gaba3StreamerFall 3.6s linear var(--s-delay,0s) infinite; opacity:.9; } .gaba3-celebration-stage{ position:relative;z-index:2;width:min(96vw,560px); display:grid;gap:14px;justify-items:center; pointer-events:auto;max-height:88vh;overflow:auto;padding:12px 0 56px; } .gaba3-celebration-stage.is-showing-lottie{ width:min(92vw,680px); min-height:min(76vh,680px); max-height:none; padding:0; overflow:hidden; place-items:center; } .gaba3-lottie-invitation-intro{ width:min(84vw,600px);aspect-ratio:1;display:grid;place-items:center; pointer-events:none;filter:drop-shadow(0 22px 34px rgba(0,0,0,.44)); animation:gaba3LottieArrival 1.15s cubic-bezier(.16,.84,.2,1) both; } .gaba3-lottie-invitation-intro.tone-agradecimento{animation-name:gaba3LottieFromLeft;filter:drop-shadow(0 22px 34px rgba(255,186,67,.38))} .gaba3-lottie-invitation-intro.tone-elogio{animation-name:gaba3LottieFromRight;filter:drop-shadow(0 22px 34px rgba(255,111,184,.40))} .gaba3-lottie-invitation-intro.tone-dedicacao{animation-name:gaba3LottieFromTop;filter:drop-shadow(0 22px 34px rgba(65,216,255,.40))} .gaba3-lottie-invitation-intro.tone-carinho{animation-name:gaba3LottieFromBottom;filter:drop-shadow(0 22px 34px rgba(255,125,188,.42))} .gaba3-lottie-invitation-intro.tone-bencao{animation-name:gaba3LottieFromTop;filter:drop-shadow(0 22px 34px rgba(195,255,115,.40))} .gaba3-lottie-invitation-intro.tone-parabens{animation-name:gaba3LottieFromRight;filter:drop-shadow(0 22px 34px rgba(255,210,80,.42))} .gaba3-lottie-invitation-intro.tone-animo{animation-name:gaba3LottieFromLeft;filter:drop-shadow(0 22px 34px rgba(255,201,77,.40))} .gaba3-lottie-invitation-intro.arrival-left{animation-name:gaba3LottieFromLeft} .gaba3-lottie-invitation-intro.arrival-right{animation-name:gaba3LottieFromRight} .gaba3-lottie-invitation-intro.arrival-top,.gaba3-lottie-invitation-intro.arrival-kite-top{animation-name:gaba3LottieFromTop} .gaba3-lottie-invitation-intro.arrival-bottom{animation-name:gaba3LottieFromBottom} .gaba3-lottie-invitation-intro.arrival-comet-left{animation-name:gaba3LottieCometLeft} .gaba3-lottie-invitation-intro.arrival-comet-right{animation-name:gaba3LottieCometRight} .gaba3-lottie-invitation-intro.arrival-ripple{animation-name:gaba3LottieRipple} .gaba3-lottie-invitation-intro.arrival-bloom{animation-name:gaba3LottieBloom} .gaba3-lottie-invitation-intro.arrival-horizon{animation-name:gaba3LottieHorizon} .gaba3-lottie-invitation-intro svg{width:100%!important;height:100%!important} /* Modelo "fuegos artificiales": sem ícone, só um clarão pulsando no centro enquanto os estouros de confete (JS) explodem por cima. */ .gaba3-fireworks-intro{ width:min(70vw,420px);aspect-ratio:1;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(255,214,120,.55),rgba(255,107,157,.28) 45%,transparent 72%); animation:gaba3FireworksPulse .9s cubic-bezier(.2,.85,.2,1) both; } @keyframes gaba3FireworksPulse{ 0%{opacity:0;transform:scale(.15)} 35%{opacity:1;transform:scale(1.15)} 70%{opacity:.7;transform:scale(.92)} 100%{opacity:0;transform:scale(1.35)} } /* Modelo "sobre que se abre": a aba levanta em 3D revelando o cartão. */ .gaba3-envelope-intro{ width:min(62vw,320px);aspect-ratio:1.5;position:relative;pointer-events:none; perspective:900px;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4)); animation:gaba3EnvelopeSettle .5s ease both; } .gaba3-envelope-body{ position:absolute;inset:0;border-radius:10px; background:linear-gradient(155deg,#fff7e8,#ffe2b8); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); } .gaba3-envelope-flap{ position:absolute;left:0;right:0;top:0;height:56%; background:linear-gradient(155deg,#ffe9c6,#ffcf8f); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top center; animation:gaba3EnvelopeOpen 1s cubic-bezier(.3,.85,.25,1) .12s both; } .gaba3-envelope-seal{ position:absolute;left:50%;top:38%;width:15%;aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 35% 30%,#ff8fab,#e0537f); transform:translate(-50%,-50%);box-shadow:0 4px 10px rgba(224,83,127,.5); animation:gaba3EnvelopeSealPop .4s ease .9s both; } @keyframes gaba3EnvelopeSettle{0%{opacity:0;transform:scale(.7) translateY(24px)}100%{opacity:1;transform:none}} @keyframes gaba3EnvelopeOpen{0%{transform:rotateX(0)}100%{transform:rotateX(-165deg)}} @keyframes gaba3EnvelopeSealPop{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.3)}} /* Modelo "cortina": dois painéis se abrem revelando o palco. */ .gaba3-curtain-intro{position:absolute;inset:0;pointer-events:none;z-index:2;display:flex} .gaba3-curtain-panel{ flex:1;background:linear-gradient(180deg,#7a1530,#4a0d1e 60%,#2c0812); box-shadow:inset -14px 0 26px rgba(0,0,0,.35); } .gaba3-curtain-panel.left{animation:gaba3CurtainLeft .85s cubic-bezier(.62,0,.34,1) .1s both} .gaba3-curtain-panel.right{animation:gaba3CurtainRight .85s cubic-bezier(.62,0,.34,1) .1s both;box-shadow:inset 14px 0 26px rgba(0,0,0,.35)} @keyframes gaba3CurtainLeft{0%{transform:translateX(0)}100%{transform:translateX(-102%)}} @keyframes gaba3CurtainRight{0%{transform:translateX(0)}100%{transform:translateX(102%)}} .gaba3-celebration-stage.is-showing-message .gaba3-celebration-slide{ animation:gaba3InviteMessageReveal .82s cubic-bezier(.16,.84,.2,1) both; } @keyframes gaba3InviteMessageReveal{ 0%{opacity:0;transform:translateY(34px) scale(.955);filter:blur(8px)} 68%{opacity:1;transform:translateY(-5px) scale(1.01);filter:blur(0)} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)} } @keyframes gaba3LottieArrival{ 0%{opacity:0;transform:translate3d(-7vw,5vh,0) scale(.78)} 62%{opacity:1;transform:translate3d(1vw,-1vh,0) scale(1.03)} 100%{opacity:1;transform:translate3d(0,0,0) scale(1)} } @keyframes gaba3LottieFromLeft{0%{opacity:0;transform:translate3d(-24vw,6vh,0) rotate(-9deg) scale(.68)}65%{opacity:1;transform:translate3d(1vw,-1vh,0) rotate(2deg) scale(1.04)}100%{opacity:1;transform:none}} @keyframes gaba3LottieFromRight{0%{opacity:0;transform:translate3d(24vw,-5vh,0) rotate(9deg) scale(.68)}65%{opacity:1;transform:translate3d(-1vw,1vh,0) rotate(-2deg) scale(1.04)}100%{opacity:1;transform:none}} @keyframes gaba3LottieFromTop{0%{opacity:0;transform:translate3d(0,-27vh,0) scale(.66)}65%{opacity:1;transform:translate3d(0,1vh,0) scale(1.05)}100%{opacity:1;transform:none}} @keyframes gaba3LottieFromBottom{0%{opacity:0;transform:translate3d(0,27vh,0) scale(.66)}65%{opacity:1;transform:translate3d(0,-1vh,0) scale(1.05)}100%{opacity:1;transform:none}} @keyframes gaba3LottieCometLeft{0%{opacity:0;transform:translate3d(-30vw,-24vh,0) rotate(-24deg) scale(.45)}68%{opacity:1;transform:translate3d(1vw,1vh,0) rotate(4deg) scale(1.08)}100%{opacity:1;transform:none}} @keyframes gaba3LottieCometRight{0%{opacity:0;transform:translate3d(30vw,-24vh,0) rotate(24deg) scale(.45)}68%{opacity:1;transform:translate3d(-1vw,1vh,0) rotate(-4deg) scale(1.08)}100%{opacity:1;transform:none}} @keyframes gaba3LottieRipple{0%{opacity:0;transform:scale(.2);filter:blur(8px)}68%{opacity:1;transform:scale(1.1);filter:blur(0)}100%{opacity:1;transform:scale(1)}} @keyframes gaba3LottieBloom{0%{opacity:0;transform:scale(.32) rotate(-18deg)}65%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{opacity:1;transform:none}} @keyframes gaba3LottieHorizon{0%{opacity:0;transform:translate3d(0,28vh,0) scale(.62)}66%{opacity:1;transform:translate3d(0,-1vh,0) scale(1.06)}100%{opacity:1;transform:none}} .gaba3-celebration-slide{ width:100%;display:grid;justify-items:center; opacity:0;transform:translateY(48px) scale(.94); transition:opacity .45s ease, transform .55s cubic-bezier(.2,.85,.2,1); } .gaba3-celebration-slide.is-in{opacity:1;transform:none} /* O JavaScript limpa o cartão anterior antes de adicionar o próximo. Não usar :last-child: a barra "Ver completo" é criada depois do cartão e faria o cartão atual desaparecer. */ .gaba3-celebration-slide{display:grid!important} body.gaba3-celebration-on{overflow:hidden} .gaba3-celebration-root.is-fading{opacity:0;transition:opacity .25s ease} @keyframes gaba3BalloonFloat{ 0%{transform:translate3d(0,0,0) rotate(-4deg);opacity:0} 8%{opacity:1} 100%{transform:translate3d(12px,-120vh,0) rotate(8deg);opacity:.85} } @keyframes gaba3StreamerFall{ 0%{transform:translate3d(0,-10%,0) rotate(var(--s-rot,-20deg));opacity:0} 10%{opacity:1} 100%{transform:translate3d(18px,110vh,0) rotate(calc(var(--s-rot,-20deg) + 40deg));opacity:.75} } .pagina-sala .privada-aplicacion{display:block;max-width:1160px;margin:0 auto;padding:34px 28px} .pagina-sala .semi-escenario{min-height:530px;overflow:hidden;border:1px solid #69d3ff42;background:#17243a} .pagina-sala .semi-video-principal{position:absolute;inset:0;background:#15233b}.pagina-sala .semi-video-principal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 64%,#0608148a)}.pagina-sala .semi-video-principal img{width:100%;height:100%;object-fit:cover;object-position:center} .pagina-sala .semi-miniaturas-camara{position:absolute;right:16px;bottom:16px;display:flex;gap:8px}.pagina-sala .semi-miniaturas-camara figure{width:92px;height:68px;margin:0;overflow:hidden;border:2px solid #ffffffb8;border-radius:11px;background:#11172a;box-shadow:0 8px 22px #0008}.pagina-sala .semi-miniaturas-camara img{width:100%;height:100%;object-fit:cover} .pagina-sala .semi-barra-acciones{display:flex;align-items:center;justify-content:space-between;min-height:58px;margin-top:12px;padding:7px 8px 7px 14px;border:1px solid #ffffff16;border-radius:14px;background:#11172ae8}.pagina-sala .semi-musica{display:flex;align-items:center;gap:8px;color:#9faabd;font-size:11px}.pagina-sala .semi-musica>span:first-child{display:grid;width:26px;height:26px;place-items:center;border-radius:8px;background:#252d4a;color:#89d7ff;font-size:14px}.pagina-sala .semi-acciones{display:flex;gap:7px;align-items:center} .pagina-sala .semi-me-gusta,.pagina-sala .semi-pedir-invitacion{min-height:36px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:850}.pagina-sala .semi-me-gusta{min-width:58px;padding:0 9px;border:1px solid #6fcfff45;background:#172c46;color:#edf8ff}.pagina-sala .semi-me-gusta:hover,.pagina-sala .semi-me-gusta.activo{background:#27618b;border-color:#80dcff}.pagina-sala .semi-me-gusta b{margin-left:4px;color:#91e2ff}.pagina-sala .semi-pedir-invitacion{padding:0 13px;border:1px solid #168eff;background:#0878e8;color:#fff}.pagina-sala .semi-pedir-invitacion:hover{background:#075ecb}.pagina-sala .semi-estado-minimo{min-height:16px;margin:8px 2px 0;color:#93a0b8;font-size:11px} @media (max-width:620px){.pagina-sala .privada-aplicacion{padding:18px 14px}.pagina-sala .semi-escenario{min-height:360px}.pagina-sala .semi-miniaturas-camara{right:10px;bottom:10px}.pagina-sala .semi-miniaturas-camara figure{width:70px;height:52px}.pagina-sala .semi-barra-acciones{padding-left:9px}.pagina-sala .semi-musica span:last-child{display:none}} /* ═══════════════════════════════════════════════════════════════ THUMBNAILS EN L-INVERTIDA — Sala privada Director de Cámaras: miniaturas SOBRE la pantalla principal. Distribución (no tapa al hablante): ┌─────────────────────┬────┐ │ │ T5 │ ← columna vertical (derecha) │ PANTALLA GRANDE │ T4 │ │ │ T3 │ ├──────────┬────┬─────┼────┤ │ T2 │ T1 │ │ │ ← fila horizontal (abajo) └──────────┴────┴─────┴────┘ ═══════════════════════════════════════════════════════════════ */ .director-main-stage{ position:absolute; inset:0; z-index:1; background:#070b12; overflow:hidden; } /* Cortes profissionais — CameraDirector + cameraTakeSkill */ .pantalla-directo.director-take-speaker .director-main-stage video, .pantalla-videollamada.director-take-speaker .director-main-stage video{ animation:directorSpeakerSettle .45s cubic-bezier(.2,.85,.2,1) both; } .pantalla-directo.director-take-cut .director-main-stage, .pantalla-videollamada.director-take-cut .director-main-stage{ animation:directorTakeCut .32s ease both; } @keyframes directorSpeakerSettle{ from{transform:scale(1.035);filter:brightness(.9)} to{transform:none;filter:none} } @keyframes directorTakeCut{ 0%{opacity:.7} 100%{opacity:1} } .director-main-stage video, .director-main-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .35s ease; } .director-main-stage video.is-hidden, .director-main-stage img.is-hidden{ opacity:0; pointer-events:none; } /* Pantalla principal siempre limpia: sin etiquetas ni marcas */ .director-main-stage .director-main-label, #director-main-label{ display:none!important; } /* Prévia segura de vídeo recebido de outra app. O vídeo externo não é copiado nem enviado sem confirmação: o toque abre a origem oficial. */ .director-main-stage .gaba3-external-preview{ position:absolute; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:24px; background:radial-gradient(circle at 50% 40%,rgba(89,216,30,.18),transparent 54%),#070b12; } .gaba3-external-preview-open{display:flex;align-items:center;justify-content:center;gap:14px;color:#fff;text-decoration:none} .gaba3-external-preview-mark{ display:grid; place-items:center; width:64px; height:64px; border:1px solid rgba(151,255,98,.72); border-radius:50%; color:#9cff60; font-size:26px; box-shadow:0 0 30px rgba(91,224,20,.2); } .gaba3-external-preview-copy{display:grid;gap:5px;max-width:min(72%,420px)} .gaba3-external-preview-copy strong{font-size:clamp(18px,2.1vw,28px)} .gaba3-external-preview-copy small{color:#c9d7c5;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .director-main-stage .gaba3-external-preview:hover{background:radial-gradient(circle at 50% 40%,rgba(89,216,30,.28),transparent 58%),#070b12} .gaba3-external-preview-share{border:1px solid rgba(151,255,98,.62);border-radius:999px;background:#65dc1d;color:#07100a;padding:10px 18px;font:700 14px inherit;cursor:pointer} .gaba3-external-preview-share:hover{background:#9aff59} /* L nace EN la línea de terminación de la pantalla (bottom + right = 0, sin hueco) */ .thumbnails-overlay[hidden]{display:none!important} /* Columna derecha: encima de la fila, mismo borde derecho, sube */ /* Fila abajo: horizontal, pegada a la línea inferior exacta */ /* Esquina inferior-derecha: pieza completa, sin hueco ni corte */ .thumbnail-participante video, .thumbnail-participante img, .thumbnail-participante canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; margin:0; border:0; border-radius:0; } .thumbnail-participante figcaption{ position:absolute; bottom:0; left:0; right:0; z-index:1; margin:0; padding:2px 5px 3px; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff; font-size:9px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; pointer-events:none; } .thumbnail-host-badge{ display:inline-block; margin-right:3px; font-size:8px; color:#8fff67; text-transform:uppercase; letter-spacing:.05em; } .thumbnail-participante.thumbnail-speaking{ box-shadow:inset 0 0 0 2px rgba(46,211,106,.9); animation:thumb-speaking-pulse 1.4s ease-in-out infinite; } @keyframes thumb-speaking-pulse{ 0%,100%{ box-shadow:inset 0 0 0 2px rgba(46,211,106,.55); } 50% { box-shadow:inset 0 0 0 2px rgba(46,211,106,.95); } } .thumbnail-participante.thumbnail-active{ box-shadow:inset 0 0 0 2px rgba(85,201,0,.95); } /* Sin marcas en la pantalla principal */ .pantalla-videollamada.director-activo::after{display:none!important} .pantalla-videollamada .mensaje-en-pantalla, .pantalla-videollamada .panfleto-invitacion-vivo, .pantalla-videollamada .capa-reacciones{ display:none!important; } /* ── Responsive thumbnails ── */ @media(max-width:640px){ .thumbnail-participante figcaption{ font-size:8px; padding:2px 4px 2px; } .thumbnail-host-badge{display:none} } /* Botón cámara en la barra de acciones */ .semi-btn-camara{ min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.18); border-radius:10px;background:#1a2235;color:#e8eef8;font-size:12px; font-weight:800;cursor:pointer; } .semi-btn-camara.activo{ border-color:rgba(85,201,0,.55);background:rgba(85,201,0,.14);color:#c8f5a8; } .semi-btn-imagem{ display:inline-flex;align-items:center;justify-content:center; min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.18); border-radius:10px;background:#1a2235;color:#e8eef8;font-size:12px; font-weight:800;cursor:pointer; } .semi-btn-imagem[hidden]{display:none!important} /* Escenario: base para stage + L de miniaturas */ .pagina-sala .semi-escenario, .pagina-sala .pantalla-videollamada{ position:relative; overflow:hidden; min-height:clamp(320px,56dvh,620px); background:#070b12; } /* Paleta final: azul para acciones, verde para estados y naranja para promociones. */ .pagina-sala .pestana-taller.activa{background:#0878e8!important;border-color:#4ca8ff!important;color:#fff!important} .categoria-sala.activa{background:linear-gradient(135deg,#168eff,#075ecb)!important;border-color:#4ca8ff!important;color:#fff!important} .boton-ver-sala, .pagina-sala .boton-suscripcion, .pagina-sala .semi-pedir-invitacion{background:linear-gradient(135deg,#168eff,#075ecb)!important;border-color:#5ab0ff!important;color:#fff!important;box-shadow:0 8px 21px #0878e840} .pagina-sala .boton-invitar{border-color:#168eff!important;background:#0f2740!important;color:#b9deff!important} .pagina-sala .semi-me-gusta,.pagina-sala .semi-me-gusta.activo{border-color:#258fe852!important;background:#10253d!important;color:#e8f5ff!important}.pagina-sala .semi-me-gusta b{color:#8dcbff!important} /* Identidad sobria: palabra GABA3 blanca e icono azul, sin lila ni morado. */ .marca-letras i{color:#fff!important}.marca-icono{background:transparent!important;box-shadow:none!important} /* Componentes heredados: conservan su composición, pero se integran a la misma paleta azul para impedir que aparezcan acentos violetas. */ .pagina-sala .panfleto-morado{background:radial-gradient(circle at 20% 5%,#ffffff20,transparent 26%),radial-gradient(circle at 90% 90%,#46c3ff35,transparent 25%),linear-gradient(150deg,#071a32,#0878e8 55%,#1d6f9c)} body.pagina-sala::before{ opacity:.23; } body.pagina-sala button, body.pagina-sala summary{ -webkit-tap-highlight-color:transparent; } body.pagina-sala button:focus-visible, body.pagina-sala input:focus-visible, body.pagina-sala textarea:focus-visible, body.pagina-sala select:focus-visible, body.pagina-sala summary:focus-visible{ outline:3px solid #8c72ff70; outline-offset:2px; } /* ========================================================= CABECERA DE LA SALA ========================================================= */ .pagina-sala .cabecera-sala{ position:sticky; z-index:100; top:0; min-height:82px; display:grid; /* título | online (bolitas+número) | perfil — com ar entre blocos */ grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:18px; padding:12px 28px; border-bottom:1px solid rgba(255,255,255,.08); background: linear-gradient(180deg,rgba(8,10,22,.6),rgba(8,10,22,.75)), url("assets/brand/fondo-madera-oscura-gaba3.png?v=real1") center/cover no-repeat; box-shadow:0 12px 34px #00000040; backdrop-filter:blur(18px); } .pagina-sala .cabecera-sala .marca{ gap:9px; } .pagina-sala .cabecera-sala .marca-icono{ width:68px; height:45px; font-size:22px; border-radius:0; } .pagina-sala .cabecera-sala .marca-letras{ font-size:29px; letter-spacing:-2px; } .pagina-sala .identidad-sala{ min-width:0; display:flex; align-items:center; gap:13px; } .pagina-sala .avatar-sala{ flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:900; box-shadow:0 0 0 3px #ffffff12; } .pagina-sala .identidad-sala-texto{ min-width:0; } .pagina-sala .titulo-en-vivo{ display:flex; align-items:center; gap:10px; min-width:0; } .pagina-sala .titulo-en-vivo h1{ max-width:580px; margin:0; overflow:hidden; color:#fff; font-size:17px; line-height:1.25; white-space:nowrap; text-overflow:ellipsis; } .pagina-sala .identidad-sala-texto p{ margin:4px 0 0; overflow:hidden; color:var(--sala-suave); font-size:11px; white-space:nowrap; text-overflow:ellipsis; } /* Online: cluster (bolitas + número) · perfil à direita */ .pagina-sala .identidad-sala{grid-column:1;grid-row:1;min-width:0;} .pagina-sala .sala-online-cluster{ grid-column:2; grid-row:1; display:flex; align-items:center; gap:12px; justify-self:end; min-width:0; } .pagina-sala .sala-online-bar{ min-width:0; width:max-content; max-width:min(48vw, 360px); } .pagina-sala .sala-online-bar[hidden]{display:none!important;} .pagina-sala .sala-online-count{ position:static; z-index:3; pointer-events:none; } .pagina-sala .sala-online-count[hidden]{display:none!important;} .pagina-sala .acciones-cabecera-sala{ grid-column:3; grid-row:1; display:flex; align-items:center; gap:14px; justify-self:end; margin-left:18px; } .pagina-sala .perfil-miniatura.is-profile-ball{ margin-left:8px; } /* Duas bolitas empilhadas no centro do cabeçalho: total do grupo (frente) e quem está online agora (atrás, com sombra), ~35% sobrepostas. */ .pagina-sala .sala-member-badges{ position:relative; display:flex; align-items:center; height:40px; padding:0 14px 0 0; border:0; background:transparent; cursor:pointer; pointer-events:auto; } .pagina-sala .sala-member-badge{ display:grid; place-items:center; width:40px; height:40px; min-width:40px; border-radius:50%; font-size:13px; font-weight:950; letter-spacing:-.03em; line-height:1; box-sizing:border-box; } .pagina-sala .sala-member-badge--online{ position:relative; z-index:1; border:2px solid #55c90088; background:linear-gradient(160deg,#1a2e14f2,#0d160cf0); color:#d8ff9a; box-shadow:0 0 0 3px #55c90022, 0 8px 22px #0008; } .pagina-sala .sala-member-badge--total{ position:relative; z-index:0; margin-left:-14px; border:2px solid rgba(255,255,255,.35); background:linear-gradient(160deg,#22324a,#141d2c); color:#dce8ff; box-shadow:0 6px 16px #0009; } .pagina-sala .sala-online-lista{ display:flex; flex-wrap:wrap; /* Esquerda→direita: a 2ª linha começa alinhada com a 1ª (não fica torta à direita) */ justify-content:flex-start; align-content:flex-start; align-items:center; gap:6px; /* máx. 10 por linha × 2 linhas — só ocupa o espaço das bolitas reais */ width:max-content; max-width:calc((28px * 10) + (6px * 9)); max-height:calc((28px * 2) + 6px); overflow:hidden; } .pagina-sala .sala-online-chip{ position:relative; display:grid; place-items:center; width:28px; height:28px; margin:0; padding:0; border:2px solid rgba(255,255,255,.35); border-radius:50%; background:#243044; color:#fff; font-size:9px; font-weight:900; letter-spacing:-.02em; line-height:1; overflow:hidden; cursor:grab; flex:0 0 28px; touch-action:none; box-sizing:border-box; } .pagina-sala .sala-online-chip:active{cursor:grabbing} .pagina-sala .sala-online-chip.is-round .sala-online-av{ width:100%;height:100%;border-radius:50%; background-color:#2a3a52;background-position:center;background-size:cover;background-repeat:no-repeat; } .pagina-sala .sala-online-chip.is-round{ border-radius:50%; } /* Bolitas online neutras — só o perfil (direita) destaca com outra cor */ .pagina-sala .sala-online-chip.is-self, .pagina-sala .sala-online-chip.is-host, .pagina-sala .sala-online-chip.is-host.is-self{ border-color:rgba(255,255,255,.32); box-shadow:none; } .pagina-sala .sala-online-chip.is-cam, .pagina-sala .sala-online-chip.is-live{ border-color:#55c900aa; box-shadow:0 0 0 2px rgba(85,201,0,.25); } .pagina-sala .sala-online-chip.is-cam::after, .pagina-sala .sala-online-chip.is-live::after{ content:""; position:absolute; right:0; bottom:0; width:7px; height:7px; border-radius:50%; background:#55c900; box-shadow:0 0 0 1px #0a1018; } .pagina-sala .sala-online-av{ display:grid; place-items:center; width:100%; height:100%; font-style:normal; font-weight:900; font-size:10px; color:#fff; text-shadow:0 1px 2px #000a; } .pagina-sala .insignia-vivo{ flex:none; padding:5px 8px; color:#fff; font-size:8px; font-weight:900; letter-spacing:.5px; border-radius:7px; background:#ef425e; box-shadow:0 6px 15px #ef425e38; } .pagina-sala .resumen-sala{ display:flex; align-items:center; gap:6px; } .pagina-sala .resumen-sala > div{ min-width:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:7px 10px; border:1px solid #ffffff10; border-radius:12px; background:#15192ba8; } .pagina-sala .resumen-sala strong{ color:#fff; font-size:14px; } .pagina-sala .resumen-sala span{ margin-top:1px; color:var(--sala-suave); font-size:8px; font-weight:700; } .pagina-sala .acciones-cabecera-sala{ display:flex; align-items:center; justify-content:flex-end; gap:9px; } .pagina-sala .boton-suscripcion, .pagina-sala .boton-invitar{ min-height:42px; padding:0 16px; border-radius:12px; white-space:nowrap; } .pagina-sala .boton-invitar{ color:#fff; font-size:12px; font-weight:850; border:1px solid #9a80ff58; background:#282044; cursor:pointer; transition:transform .18s ease,background .18s ease; } .pagina-sala .boton-invitar:hover{ transform:translateY(-1px); background:#37295f; } .pagina-sala .boton-paleta{ width:42px; height:42px; display:grid; place-items:center; color:#fff; border:1px solid var(--sala-borde); border-radius:50%; background:#171b2e; cursor:pointer; } .pagina-sala .apariencia-cuenta{ position:relative; } .pagina-sala .paleta-flotante{ position:absolute; z-index:130; top:52px; right:0; width:min(390px,90vw); padding:18px; border:1px solid var(--sala-borde); border-radius:18px; background:#13172af7; box-shadow:0 28px 80px #000b; backdrop-filter:blur(18px); } .pagina-sala .paleta-flotante > header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:15px; } .pagina-sala .paleta-flotante > header div{ display:flex; flex-direction:column; gap:3px; } .pagina-sala .paleta-flotante > header small{ color:var(--sala-azul); font-size:8px; font-weight:900; letter-spacing:1px; } .pagina-sala .paleta-flotante > header strong{ font-size:16px; } .pagina-sala .paleta-flotante > header button{ color:#c7c8d5; font-size:24px; border:0; background:transparent; cursor:pointer; } .pagina-sala .temas-flotantes{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; } .pagina-sala .tema-boton{ min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 4px; color:#dfe0e9; font-size:8px; font-weight:750; border:1px solid #ffffff12; border-radius:11px; background:#1b2036; cursor:pointer; } .pagina-sala .tema-boton.activo{ border-color:#9d83ff; box-shadow:0 0 0 2px #7b5be62b; } .pagina-sala .tema-boton i{ width:30px; height:30px; display:block; border-radius:50%; } .pagina-sala .muestra-universo{background:linear-gradient(135deg,#15164a,#8b4ddb)} .pagina-sala .muestra-jardin{background:linear-gradient(135deg,#16492e,#73bf68)} .pagina-sala .muestra-oceano{background:linear-gradient(135deg,#0d3c71,#4cc7e8)} .pagina-sala .muestra-calido{background:linear-gradient(135deg,#733820,#f3a45f)} .pagina-sala .muestra-claro{background:linear-gradient(135deg,#f4f5f8,#aebbd2)} .pagina-sala .color-libre{ display:flex; align-items:center; gap:10px; margin-top:13px; padding:11px; border:1px solid #ffffff12; border-radius:12px; background:#1a1e31; } .pagina-sala .color-libre input{ width:38px; height:38px; padding:2px; border:0; border-radius:9px; background:transparent; } .pagina-sala .color-libre span{ display:flex; flex-direction:column; gap:2px; } .pagina-sala .color-libre b{ font-size:11px; } .pagina-sala .color-libre small{ color:var(--sala-suave); font-size:9px; } /* ========================================================= PANEL DE INVITACIONES ========================================================= */ .pagina-sala .panel-invitar{ position:fixed; z-index:120; top:89px; right:28px; width:min(480px,calc(100vw - 32px)); display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:14px; border:1px solid var(--sala-borde); border-radius:16px; background:#13172af7; box-shadow:0 22px 60px #0009; backdrop-filter:blur(18px); } .pagina-sala .panel-invitar[hidden]{ display:none; } .pagina-sala .panel-invitar > span{ width:100%; margin-bottom:3px; color:#fff; font-size:11px; font-weight:850; } .pagina-sala .panel-invitar button{ min-height:39px; display:flex; align-items:center; gap:7px; padding:0 12px; color:#e9e8f2; font-size:10px; font-weight:800; border:1px solid #ffffff15; border-radius:10px; background:#20253a; cursor:pointer; } /* ========================================================= ESTRUCTURA PRINCIPAL ========================================================= */ .pagina-sala .sala-aplicacion{ width:100%; max-width:1920px; display:grid; grid-template-columns:minmax(0,1fr) 370px; align-items:start; gap:18px; margin:0 auto; padding:18px 22px 50px; } .pagina-sala .zona-principal-sala{ min-width:0; display:flex; flex-direction:column; gap:16px; } .pagina-sala .panel-derecho-sala{ position:sticky; top:100px; min-width:0; display:flex; flex-direction:column; gap:12px; max-height:calc(100vh - 118px); overflow:auto; padding-right:3px; scrollbar-width:thin; scrollbar-color:#4d4f68 transparent; } /* ========================================================= ESCENARIO PRINCIPAL ========================================================= */ .pagina-sala .escenario-sala{ position:relative; min-width:0; } .pagina-sala .pantalla-videollamada{ position:relative; min-height:clamp(490px,58vw,760px); overflow:hidden; border:1px solid #ffffff17; border-radius:24px; background: radial-gradient(circle at 50% 0,#2a345b 0,transparent 38%), linear-gradient(145deg,#13172a,#090b15 70%); box-shadow:0 22px 65px #0000006b; } .pagina-sala .pantalla-videollamada:fullscreen{ width:100vw; height:100vh; border:0; border-radius:0; } .pagina-sala .video-local{ position:absolute; z-index:3; inset:0; width:100%; height:100%; object-fit:cover; background:#05060c; } .pagina-sala .rejilla-participantes{ position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,2.2fr) minmax(190px,.8fr); grid-template-rows:repeat(5,minmax(0,1fr)); gap:8px; padding:10px; } .pagina-sala .participante-video{ position:relative; min-width:0; min-height:0; overflow:hidden; border:1px solid #ffffff10; border-radius:15px; background:#1a1e31; } .pagina-sala .participante-video:first-child{ grid-column:1; grid-row:1 / 6; border-color:#9b80ff88; box-shadow: inset 0 0 0 2px #2ed36a55, 0 0 32px #644be12d; } .pagina-sala .participante-video:not(:first-child){ grid-column:2; } .pagina-sala .participante-video:nth-child(2){grid-row:1} .pagina-sala .participante-video:nth-child(3){grid-row:2} .pagina-sala .participante-video:nth-child(4){grid-row:3} .pagina-sala .participante-video:nth-child(5){grid-row:4} .pagina-sala .participante-video:nth-child(6){grid-row:5} .pagina-sala .participante-fondo{ position:absolute; inset:0; display:grid; place-items:center; isolation:isolate; } .pagina-sala .participante-fondo::before, .pagina-sala .participante-fondo::after{ content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(2px); } .pagina-sala .participante-fondo::before{ width:55%; aspect-ratio:1; top:-22%; right:-14%; background:#ffffff18; } .pagina-sala .participante-fondo::after{ width:40%; aspect-ratio:1; left:-12%; bottom:-19%; background:#00000020; } .pagina-sala .participante-fondo-1{background:linear-gradient(145deg,#2d3158,#7352bd)} .pagina-sala .participante-fondo-2{background:linear-gradient(145deg,#234f69,#4aa4ba)} .pagina-sala .participante-fondo-3{background:linear-gradient(145deg,#5d3f28,#bf7a3f)} .pagina-sala .participante-fondo-4{background:linear-gradient(145deg,#673650,#c86583)} .pagina-sala .participante-fondo-5{background:linear-gradient(145deg,#314f34,#68aa61)} .pagina-sala .participante-fondo-6{background:linear-gradient(145deg,#424067,#8581d4)} .pagina-sala .participante-iniciales{ color:#fff; font-size:clamp(38px,6vw,88px); font-weight:950; letter-spacing:-3px; text-shadow:0 8px 28px #0005; } .pagina-sala .participante-video:not(:first-child) .participante-iniciales{ font-size:clamp(20px,2.2vw,34px); letter-spacing:-1px; } .pagina-sala .participante-video footer{ position:absolute; z-index:2; left:0; right:0; bottom:0; display:flex; align-items:center; gap:6px; min-height:37px; padding:0 11px; background:linear-gradient(transparent,#05060dd9); } .pagina-sala .participante-video footer strong{ min-width:0; overflow:hidden; font-size:10px; white-space:nowrap; text-overflow:ellipsis; } .pagina-sala .estado-online{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--sala-verde); box-shadow:0 0 0 3px #49d89420; } .pagina-sala .estado-audio{ margin-left:auto; font-size:10px; } .pagina-sala .boton-pantalla-completa{ position:absolute; z-index:8; top:18px; right:18px; width:42px; height:42px; display:grid; place-items:center; color:#fff; font-size:19px; border:1px solid #ffffff28; border-radius:12px; background:#080a16ad; box-shadow:0 8px 20px #0005; backdrop-filter:blur(10px); cursor:pointer; transition:transform .18s ease,background .18s ease; } .pagina-sala .boton-pantalla-completa:hover{ transform:scale(1.04); background:#1d2239d9; } .pagina-sala .mensaje-en-pantalla{ position:absolute; z-index:10; left:50%; bottom:85px; width:min(620px,80%); display:flex; align-items:flex-start; gap:13px; padding:18px 20px; color:#fff; border:1px solid #ffffff28; border-radius:18px; background:#101329de; box-shadow:0 18px 40px #0007; transform:translateX(-50%); backdrop-filter:blur(18px); } .pagina-sala .mensaje-en-pantalla[hidden]{ display:none; } .pagina-sala .mensaje-en-pantalla span{ color:#c1adff; font-size:24px; } .pagina-sala .mensaje-en-pantalla p{ margin:0; line-height:1.55; } .pagina-sala .panfleto-invitacion-vivo{ position:absolute; z-index:11; top:50%; left:50%; width:min(460px,78%); display:grid; gap:8px; padding:30px; overflow:hidden; color:#fff; text-align:center; border:1px solid #ffffff66; border-radius:22px; background:linear-gradient(135deg,#ff7a1a,#24b66b 58%,#249cff); box-shadow:0 28px 80px #000b; transform:translate(-50%,-50%); animation:entrarPanfleto .5s cubic-bezier(.2,.8,.2,1); } .pagina-sala .panfleto-invitacion-vivo[hidden]{ display:none; } .pagina-sala .panfleto-invitacion-vivo[data-plantilla="familia"]{ background:linear-gradient(135deg,#ec8b45,#a64f76,#5c3a80); } .pagina-sala .panfleto-invitacion-vivo[data-plantilla="aniversario"]{ background:linear-gradient(135deg,#9d244a,#e5779b,#5d285f); } .pagina-sala .panfleto-invitacion-vivo[data-plantilla="navidad"]{ background:linear-gradient(135deg,#0c6b55,#b81f3a,#e6b84c); } .pagina-sala .panfleto-invitacion-vivo[data-plantilla="amigos"]{ background:linear-gradient(135deg,#249cff,#16c65b,#ff7a1a); } .pagina-sala .panfleto-invitacion-vivo[data-plantilla="estudiantes"]{ background:linear-gradient(135deg,#1f6582,#249cff,#16c65b); } .pagina-sala .panfleto-invitacion-vivo small{ position:relative; font-size:9px; font-weight:900; letter-spacing:1.3px; } .pagina-sala .panfleto-invitacion-vivo h3{ position:relative; margin:0; font-size:clamp(25px,4vw,40px); line-height:1; } .pagina-sala .panfleto-invitacion-vivo p,.pagina-sala .panfleto-invitacion-vivo time{ position:relative; margin:0; font-size:12px; } .pagina-sala .lluvia-invitacion{ position:absolute; inset:10px 0 auto; display:flex; justify-content:space-around; opacity:.85; font-size:21px; animation:caerSerpentinas 2.5s linear infinite; } @keyframes entrarPanfleto{ from{ opacity:0; transform:translate(-50%,-44%) scale(.78) rotate(-3deg); } to{ opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); } } @keyframes caerSerpentinas{ from{ transform:translateY(-14px) rotate(0); } to{ transform:translateY(115px) rotate(24deg); } } .pagina-sala .capa-reacciones{ position:absolute; z-index:9; inset:0; overflow:hidden; pointer-events:none; } /* ========================================================= MINIATURAS DE PARTICIPANTES ========================================================= */ .pagina-sala .participantes-en-vivo{ margin-top:10px; padding:11px 13px 12px; border:1px solid #ffffff10; border-radius:16px; background:#111526c7; } .pagina-sala .participantes-en-vivo-cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; } .pagina-sala .participantes-en-vivo-cabecera strong{ font-size:11px; } .pagina-sala .participantes-en-vivo-cabecera span{ color:var(--sala-verde); font-size:9px; font-weight:850; } .pagina-sala .miniaturas-participantes{ display:flex; gap:9px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; } .pagina-sala .miniaturas-participantes::-webkit-scrollbar{ display:none; } .pagina-sala .miniatura-participante{ flex:0 0 68px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:5px; color:#cfceda; border:1px solid transparent; border-radius:12px; background:transparent; cursor:pointer; } .pagina-sala .miniatura-participante.activa{ color:#fff; border-color:#28c96555; background:#25213a; } .pagina-sala .miniatura-avatar{ width:47px; height:47px; display:grid; place-items:center; color:#fff; font-size:10px; font-weight:900; border-radius:13px; background:#2a2d43; } .pagina-sala .miniatura-1{background:linear-gradient(135deg,#7454bd,#302d58)} .pagina-sala .miniatura-2{background:linear-gradient(135deg,#4ea7b8,#264e68)} .pagina-sala .miniatura-3{background:linear-gradient(135deg,#c07a40,#5e4029)} .pagina-sala .miniatura-4{background:linear-gradient(135deg,#ca6584,#65344e)} .pagina-sala .miniatura-5{background:linear-gradient(135deg,#6ead67,#304d33)} .pagina-sala .miniatura-6{background:linear-gradient(135deg,#8582d6,#444269)} .pagina-sala .miniatura-participante b{ max-width:60px; overflow:hidden; font-size:8px; white-space:nowrap; text-overflow:ellipsis; } .pagina-sala .estado-dispositivos{ display:block; margin-top:7px; color:#85889d; font-size:8px; text-align:right; } /* ========================================================= ACORDEONES GENERALES ========================================================= */ .pagina-sala details{ overflow:hidden; } .pagina-sala summary{ list-style:none; cursor:pointer; } .pagina-sala summary::-webkit-details-marker{ display:none; } .pagina-sala .barra-acordeon, .pagina-sala .panel-lateral-acordeon{ border:1px solid var(--sala-borde); border-radius:18px; background:#111526de; box-shadow:0 10px 30px #0003; } .pagina-sala .informacion-sala-compacta > summary, .pagina-sala .taller-principal-cabecera, .pagina-sala .panel-lateral-acordeon > summary{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .pagina-sala .informacion-sala-compacta > summary{ min-height:64px; padding:0 18px; } .pagina-sala .informacion-sala-compacta > summary > div{ display:flex; flex-direction:column; gap:3px; } .pagina-sala .informacion-sala-compacta > summary strong{ font-size:12px; } .pagina-sala .informacion-sala-compacta > summary span{ color:var(--sala-suave); font-size:9px; } .pagina-sala summary > i{ color:#a9a6bb; font-size:18px; font-style:normal; transition:transform .2s ease; } .pagina-sala details[open] > summary > i{ transform:rotate(180deg); } .pagina-sala .contenido-descripcion{ padding:0 18px 17px; border-top:1px solid #ffffff0d; } .pagina-sala .contenido-descripcion p{ margin:14px 0 8px; color:#d0d0dc; font-size:11px; line-height:1.6; } .pagina-sala .contenido-descripcion span{ color:#8f92a5; font-size:9px; } /* ========================================================= TALLER ========================================================= */ .pagina-sala .taller-principal-cabecera{ min-height:62px; padding:0 18px; } .pagina-sala .taller-principal-cabecera > div{ display:flex; align-items:center; gap:12px; } .pagina-sala .agente-destello{ flex:none; width:42px; height:42px; display:grid; place-items:center; color:#fff; font-size:17px; font-weight:950; border-radius:13px 13px 13px 5px; background:linear-gradient(145deg,#ff5ca8,#754cff 55%,#27c2ff); box-shadow:0 10px 24px #18d96045; } .pagina-sala .agente-destello.pequeño{ width:34px; height:34px; font-size:14px; border-radius:11px 11px 11px 4px; } .pagina-sala .taller-principal-cabecera h2{ margin:0; font-size:16px; } .pagina-sala .flecha-plegar-sala{ color:#d6d0ed; font-size:18px; font-style:normal; transition:transform .2s ease; } .pagina-sala .taller-principal:not([open]) .flecha-plegar-sala{ transform:rotate(-90deg); } .pagina-sala .contenido-taller-principal{ border-top:1px solid #ffffff0d; } .pagina-sala .pestanas-taller{ display:grid; grid-template-columns:repeat(7,minmax(95px,1fr)); gap:7px; overflow-x:auto; padding:12px; border-bottom:1px solid #ffffff0d; scrollbar-width:none; } .pagina-sala .pestanas-taller::-webkit-scrollbar{ display:none; } .pagina-sala .pestana-taller{ min-height:55px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#aeb0c1; font-size:9px; font-weight:800; border:1px solid transparent; border-radius:12px; background:#181d30; cursor:pointer; transition:transform .18s ease,background .18s ease,border-color .18s ease; } .pagina-sala .pestana-taller:hover{ transform:translateY(-1px); color:#fff; background:#222840; } .pagina-sala .pestana-taller.activa{ color:#fff; border-color:#2ecf6a55; background:linear-gradient(145deg,#352a5b,#24203d); box-shadow:inset 0 0 0 1px #ffffff08; } .pagina-sala .pestana-taller span{ font-size:17px; } .pagina-sala .panel-taller{ padding:18px; } .pagina-sala .panel-taller[hidden]{ display:none; } .pagina-sala .estudio-invita{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:18px; } .pagina-sala .hablar-invita, .pagina-sala .vista-invitacion{ min-width:0; padding:17px; border:1px solid #ffffff10; border-radius:16px; background:#171b2e; } .pagina-sala .mensaje-agente{ display:flex; align-items:flex-start; gap:11px; margin-bottom:16px; } .pagina-sala .mensaje-agente p{ margin:0; color:#c7c8d5; font-size:11px; line-height:1.55; } .pagina-sala .mensaje-agente b{ color:#fff; } .pagina-sala .etiqueta-canal{ margin:15px 0 8px; color:#e2e1eb; font-size:10px; font-weight:850; } .pagina-sala .ocasiones-invita, .pagina-sala .canales-publicacion, .pagina-sala .acciones-palabras, .pagina-sala .acciones-pedido, .pagina-sala .acciones-invitacion{ display:flex; flex-wrap:wrap; gap:8px; } .pagina-sala .ocasiones-invita button, .pagina-sala .canales-publicacion button, .pagina-sala .acciones-palabras button, .pagina-sala .acciones-pedido > button:not(.boton-principal), .pagina-sala .boton-seguir{ min-height:40px; padding:0 12px; color:#d7d6e2; font-size:9px; font-weight:800; border:1px solid #ffffff14; border-radius:10px; background:#22273b; cursor:pointer; } .pagina-sala .ocasiones-invita button.activo, .pagina-sala .canales-publicacion button.activo{ color:#fff; border-color:#2fcf6b70; background:#352a5c; } .pagina-sala .pedido-invita{ display:flex; flex-direction:column; gap:7px; margin-top:14px; color:#fff; font-size:10px; font-weight:800; } .pagina-sala .pedido-invita textarea, .pagina-sala .subir-archivo textarea, .pagina-sala .form-producto textarea{ width:100%; min-height:115px; padding:12px 13px; color:#fff; line-height:1.55; border:1px solid #ffffff19; border-radius:12px; outline:0; background:#101426; resize:vertical; } .pagina-sala .acciones-pedido{ justify-content:flex-end; margin-top:10px; } .pagina-sala .frase{ margin-top:15px; padding:14px; border:1px solid #3ad87535; border-radius:13px; background:#27203f; } .pagina-sala .frase > span{ color:#bdaaff; font-size:8px; font-weight:950; letter-spacing:1px; } .pagina-sala .frase p{ margin:8px 0 0; color:#f1eff8; font-size:11px; line-height:1.65; } .pagina-sala .acciones-palabras{ margin-top:9px; } .pagina-sala .nota-agente{ margin:10px 0 0; color:#85889b; font-size:8px; } .pagina-sala .vista-cabecera{ display:flex; justify-content:space-between; align-items:center; margin-bottom:11px; } .pagina-sala .vista-cabecera span{ color:#8f92a5; font-size:8px; font-weight:900; letter-spacing:.8px; } .pagina-sala .vista-cabecera b{ color:#62d79c; font-size:9px; } .pagina-sala .panfleto{ min-height:410px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; color:#fff; text-align:center; border-radius:18px; box-shadow:0 20px 45px #0005; } .pagina-sala .panfleto-morado{ background: radial-gradient(circle at 20% 5%,#ffffff20,transparent 26%), radial-gradient(circle at 90% 90%,#46c3ff35,transparent 25%), linear-gradient(150deg,#321c65,#743cbe 55%,#1d6f9c); } .pagina-sala .panfleto-marca{ align-self:flex-start; color:#fff; font-size:12px; font-weight:950; letter-spacing:2px; } .pagina-sala .panfleto-icono{ margin:22px 0 9px; font-size:55px; } .pagina-sala .panfleto small{ padding:5px 9px; color:#fff; font-size:7px; font-weight:950; border-radius:999px; background:#ff4e6d; } .pagina-sala .panfleto h3{ margin:13px 0 9px; font-size:28px; line-height:1.05; letter-spacing:-1px; } .pagina-sala .panfleto p{ margin:0; color:#f1ecfa; font-size:10px; line-height:1.55; } .pagina-sala .panfleto-entrada{ margin-top:19px; padding:10px 14px; color:#261a42; font-size:9px; font-weight:950; border-radius:999px; background:#fff; } .pagina-sala .panfleto i{ margin-top:12px; color:#e8dffa; font-size:8px; font-style:normal; } .pagina-sala .acciones-invitacion{ justify-content:space-between; margin-top:12px; } /* ========================================================= FORMULARIOS Y PANELES DEL TALLER ========================================================= */ .pagina-sala .panel-taller-cabecera{ display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:15px; } .pagina-sala .panel-taller-cabecera > div{ display:flex; align-items:center; gap:11px; } .pagina-sala .panel-taller-cabecera > div > span{ width:40px; height:40px; display:grid; place-items:center; font-size:18px; border-radius:12px; background:#29243e; } .pagina-sala .panel-taller-cabecera h3{ margin:0; font-size:15px; } .pagina-sala .panel-taller-cabecera p{ margin:4px 0 0; color:var(--sala-suave); font-size:9px; } .pagina-sala .subir-archivo, .pagina-sala .form-producto{ display:grid; gap:10px; padding:15px; border:1px solid #ffffff10; border-radius:15px; background:#171b2e; } .pagina-sala .subir-archivo label{ display:flex; flex-direction:column; gap:8px; color:#fff; font-size:10px; font-weight:800; } .pagina-sala .subir-archivo input, .pagina-sala .subir-archivo select, .pagina-sala .form-producto input, .pagina-sala .form-producto select, .pagina-sala .crear-album input, .pagina-sala .herramientas-informe select{ width:100%; min-height:44px; padding:0 12px; color:#fff; border:1px solid #ffffff18; border-radius:11px; outline:0; background:#101426; } .pagina-sala .form-producto{ grid-template-columns:2fr 1fr .8fr 1fr; } .pagina-sala .form-producto #producto-variantes, .pagina-sala .form-producto #producto-enlace, .pagina-sala .form-producto #producto-descripcion, .pagina-sala .form-producto button{ grid-column:span 2; } .pagina-sala .galeria-sala, .pagina-sala .catalogo-sala, .pagina-sala #lista-publicaciones{ min-height:120px; display:grid; place-items:center; margin-top:12px; padding:15px; color:#878a9d; border:1px dashed #ffffff1b; border-radius:14px; background:#0e1120; } .pagina-sala .publicaciones-sala{ margin-top:14px; padding:16px; border:1px solid var(--sala-borde); border-radius:16px; background:var(--sala-panel); } .pagina-sala .form-publicacion{ display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:12px; } .pagina-sala .form-publicacion input, .pagina-sala .form-publicacion textarea, .pagina-sala .form-publicacion label{ box-sizing:border-box; width:100%; color:#fff; font:inherit; } .pagina-sala .form-publicacion input, .pagina-sala .form-publicacion textarea{ padding:10px 12px; border:1px solid #ffffff18; border-radius:10px; outline:0; background:#101426; } .pagina-sala .form-publicacion textarea, .pagina-sala .form-publicacion label{grid-column:1/-1} .pagina-sala .form-publicacion textarea{min-height:82px;resize:vertical} .pagina-sala .form-publicacion label{font-size:11px;color:var(--sala-suave)} .pagina-sala .form-publicacion label input{margin-top:5px} .pagina-sala .form-publicacion button{grid-column:2;min-height:40px} .pagina-sala #lista-publicaciones{place-items:stretch;gap:12px;color:var(--sala-texto)} .pagina-sala .publicacion-sala{padding:12px;border:1px solid #ffffff14;border-radius:12px;background:#11182a} .pagina-sala .publicacion-sala header,.pagina-sala .acciones-publicacion{display:flex;align-items:center;gap:8px;justify-content:space-between} .pagina-sala .publicacion-sala header small{color:var(--sala-suave);font-size:10px} .pagina-sala .publicacion-sala p{white-space:pre-wrap;line-height:1.5} .pagina-sala .acciones-publicacion{justify-content:flex-start;flex-wrap:wrap} .pagina-sala .acciones-publicacion button,.pagina-sala .comentarios-publicacion button{border:1px solid #249cff52;border-radius:8px;background:#10243b;color:#d9efff;cursor:pointer;padding:6px 9px} .pagina-sala .comentarios-publicacion{display:grid;gap:7px;margin-top:10px} .pagina-sala .comentarios-publicacion p{margin:0;padding:8px;border-radius:8px;background:#0c1220} .pagina-sala .comentarios-publicacion form{display:flex;gap:7px}.pagina-sala .comentarios-publicacion input{min-width:0;flex:1;padding:8px;border:1px solid #ffffff18;border-radius:8px;background:#0c1220;color:#fff} @media(max-width:620px){.pagina-sala .form-publicacion{grid-template-columns:1fr}.pagina-sala .form-publicacion button{grid-column:1}.pagina-sala .comentarios-publicacion form{flex-direction:column}} .pagina-sala .crear-album{ display:flex; gap:9px; margin-top:12px; } .pagina-sala .crear-album input{ flex:1; } .pagina-sala .ayuda-album{ margin:11px 0 0; color:var(--sala-suave); font-size:10px; line-height:1.5; } .pagina-sala .albumes-sala{ display:grid; gap:10px; margin-top:12px; } .pagina-sala .albumes-sala > small{ display:block; padding:28px 15px; color:#878a9d; text-align:center; border:1px dashed #ffffff1b; border-radius:14px; background:#0e1120; } .pagina-sala .album-item{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:14px; border:1px solid #ffffff12; border-radius:14px; background:#171b2e; } .pagina-sala .album-item > span{ display:grid; gap:4px; } .pagina-sala .album-item b{ color:#fff; font-size:12px; } .pagina-sala .album-item small{ color:var(--sala-suave); font-size:9px; } .pagina-sala .album-recuerdos{ grid-column:1 / -1; display:grid; gap:7px; } .pagina-sala .album-recuerdo{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px; background:#101426; } .pagina-sala .album-recuerdo a{ color:#d9d0ff; font-size:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pagina-sala .album-recuerdo .boton-secundario{ min-height:32px; padding:0 10px; font-size:9px; } .pagina-sala .herramientas-informe{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; } .pagina-sala .herramientas-informe label{ display:flex; align-items:center; gap:8px; color:#cccbd7; font-size:9px; } .pagina-sala .tarjetas-recuerdos{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } .pagina-sala .tarjeta-recuerdo{ display:flex; align-items:center; gap:12px; min-height:100px; padding:16px; border:1px solid #ffffff10; border-radius:15px; background:#171b2e; } .pagina-sala .tarjeta-recuerdo > span{ font-size:30px; } .pagina-sala .tarjeta-recuerdo div{ display:flex; flex-direction:column; gap:4px; } .pagina-sala .tarjeta-recuerdo strong{ font-size:12px; } .pagina-sala .tarjeta-recuerdo small{ color:var(--sala-suave); font-size:8px; } .pagina-sala .archivos-sala-vacios{ min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#85889b; border:1px dashed #ffffff1c; border-radius:15px; background:#101322; } .pagina-sala .archivos-sala-vacios span{ font-size:38px; } .pagina-sala .archivos-sala-vacios p{ margin:0; font-size:10px; } .pagina-sala .reacciones-especiales{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; } .pagina-sala .reacciones-especiales button{ min-height:105px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#dddce7; font-size:9px; font-weight:850; border:1px solid #ffffff12; border-radius:14px; background:#181c2f; cursor:pointer; transition:transform .18s ease,background .18s ease; } .pagina-sala .reacciones-especiales button:hover{ transform:translateY(-2px); color:#fff; background:#252a43; } .pagina-sala .reacciones-especiales button span{ font-size:30px; } .pagina-sala .personaje-familiar{ display:flex; align-items:center; gap:10px; margin-top:14px; padding:13px; border:1px solid #876bff38; border-radius:14px; background:linear-gradient(110deg,#211b36,#172036); } .pagina-sala .personaje-familiar > div{ flex:1; display:grid; gap:4px; } .pagina-sala .personaje-familiar strong{ color:#fff; font-size:11px; } .pagina-sala .personaje-familiar small{ color:var(--sala-suave); font-size:9px; } .pagina-sala .editor-personaje{ width:min(420px,calc(100vw - 30px)); padding:0; color:#fff; border:1px solid #ffffff1e; border-radius:18px; background:#171b2e; box-shadow:0 24px 70px #000b; } .pagina-sala .editor-personaje::backdrop{ background:#050611aa; } .pagina-sala .editor-personaje form{ position:relative; display:grid; gap:14px; padding:22px; } .pagina-sala .editor-personaje h3,.pagina-sala .editor-personaje p{ margin:0; } .pagina-sala .editor-personaje p{ color:var(--sala-suave); font-size:10px; line-height:1.5; } .pagina-sala .editor-personaje label{ display:grid; gap:7px; color:#fff; font-size:10px; font-weight:800; } .pagina-sala .editor-personaje input{ min-height:42px; padding:0 12px; color:#fff; border:1px solid #ffffff1e; border-radius:10px; background:#101426; } .pagina-sala .cerrar-editor-personaje{ position:absolute; top:10px; right:12px; color:#fff; font-size:23px; border:0; background:transparent; cursor:pointer; } .pagina-sala .opciones-personaje{ display:grid; grid-template-columns:repeat(6,1fr); gap:8px; } .pagina-sala .opciones-personaje button{ min-height:48px; font-size:25px; border:1px solid #ffffff18; border-radius:11px; background:#101426; cursor:pointer; } .pagina-sala .opciones-personaje button.activo{ border-color:#a887ff; background:#382b5f; transform:translateY(-2px); } /* ========================================================= PANEL DERECHO ========================================================= */ .pagina-sala .panel-lateral-acordeon{ flex:none; } .pagina-sala .panel-lateral-acordeon > summary{ min-height:66px; padding:0 14px; } .pagina-sala .panel-lateral-acordeon > summary > div{ display:flex; align-items:center; gap:10px; } .pagina-sala .panel-lateral-acordeon > summary > div > div{ display:flex; flex-direction:column; gap:3px; } .pagina-sala .panel-lateral-acordeon > summary strong{ font-size:11px; } .pagina-sala .panel-lateral-acordeon > summary small{ color:var(--sala-suave); font-size:8px; } .pagina-sala .icono-panel{ width:35px; height:35px; display:grid; place-items:center; border-radius:11px; background:#252a40; } .pagina-sala .chat-punto{ width:10px; height:10px; border-radius:50%; background:var(--sala-verde); box-shadow:0 0 0 4px #49d8941c; } .pagina-sala .contenido-miembros, .pagina-sala .contenido-configuracion{ padding:12px 14px 14px; border-top:1px solid #ffffff0d; } .pagina-sala .miembros-avatares{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; } .pagina-sala .miembro-avatar{ position:relative; aspect-ratio:1; display:grid; place-items:center; color:#fff; font-size:9px; font-weight:900; border:1px solid #ffffff12; border-radius:50%; background:linear-gradient(145deg,#4d4f6f,#262a44); cursor:pointer; } .pagina-sala .miembro-avatar:nth-child(2n){background:linear-gradient(145deg,#4c8195,#273e58)} .pagina-sala .miembro-avatar:nth-child(3n){background:linear-gradient(145deg,#9a5f72,#4d2d48)} .pagina-sala .miembro-avatar:nth-child(4n){background:linear-gradient(145deg,#668e5d,#304b35)} .pagina-sala .miembro-avatar.conectado::after{ content:""; position:absolute; right:1px; bottom:1px; width:8px; height:8px; border:2px solid #111526; border-radius:50%; background:var(--sala-verde); } .pagina-sala .miembro-mas{ color:#c9c2e7; background:#29243e !important; } .pagina-sala .contenido-chat{ border-top:1px solid #ffffff0d; } .pagina-sala .lista-mensajes{ max-height:390px; overflow-y:auto; padding:10px 12px; scrollbar-width:thin; scrollbar-color:#494d65 transparent; } .pagina-sala .lista-mensajes article{ display:grid; grid-template-columns:34px 1fr; gap:9px; padding:9px 5px; } .pagina-sala .avatar-chat{ width:34px; height:34px; display:grid; place-items:center; color:#fff; font-size:8px; font-weight:900; border-radius:50%; } .pagina-sala .color-1{background:#935e85} .pagina-sala .color-2{background:#4b82a8} .pagina-sala .color-3{background:#9a6c3e} .pagina-sala .color-4{background:#5e9169} .pagina-sala .color-5{background:#746db0} .pagina-sala .lista-mensajes article > div{ min-width:0; } .pagina-sala .lista-mensajes b{ display:flex; align-items:center; gap:5px; color:#fff; font-size:9px; } .pagina-sala .lista-mensajes b i{ padding:3px 5px; color:#d9ceff; font-size:6px; font-style:normal; border-radius:5px; background:#433467; } .pagina-sala .lista-mensajes p{ margin:4px 0; color:#c7c8d4; font-size:9px; line-height:1.45; } .pagina-sala .lista-mensajes small{ color:#777a8d; font-size:7px; } .pagina-sala .mensaje-anfitrion{ border-radius:11px; background:#29223d; } .pagina-sala .pie-chat{ padding:12px; border-top:1px solid #ffffff0d; background:#0f1323; } .pagina-sala .herramientas-chat{ display:flex; align-items:center; gap:6px; margin-bottom:9px; } .pagina-sala .herramientas-chat button, .pagina-sala .reacciones-rapidas button{ width:34px; height:34px; display:grid; place-items:center; color:#d8d7e2; font-size:14px; border:1px solid #ffffff12; border-radius:10px; background:#1c2135; cursor:pointer; } .pagina-sala .herramientas-chat button:hover, .pagina-sala .reacciones-rapidas button:hover{ color:#fff; background:#2b3049; } .pagina-sala .form-chat{ display:grid; grid-template-columns:1fr 42px; gap:7px; } .pagina-sala .form-chat input{ min-width:0; height:42px; padding:0 12px; color:#fff; border:1px solid #ffffff17; border-radius:11px; outline:0; background:#191e31; } .pagina-sala .form-chat button{ min-width:0; min-height:42px; padding:0; } .pagina-sala .reacciones-rapidas{ display:flex; gap:6px; margin-top:8px; } .pagina-sala .acciones-salida{ display:flex; justify-content:flex-end; margin-top:11px; } .pagina-sala .boton-salir-en-vivo{ min-height:39px; padding:0 14px; color:#fff; font-size:9px; font-weight:900; border:1px solid #ff65765a; border-radius:10px; background:#4c1f2a; cursor:pointer; } .pagina-sala .aviso-acceso{ display:flex; align-items:center; justify-content:center; gap:5px; margin:10px 0 0; color:#777a8d; font-size:7px; } .pagina-sala .contenido-configuracion{ display:grid; gap:7px; } .pagina-sala .contenido-configuracion button{ min-height:40px; padding:0 11px; color:#d2d1dc; text-align:left; font-size:9px; border:1px solid #ffffff10; border-radius:10px; background:#191e31; cursor:pointer; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1450px){ .pagina-sala .cabecera-sala{ grid-template-columns:minmax(0,1fr) auto auto auto; } .pagina-sala .resumen-sala{ display:none; } .pagina-sala .sala-aplicacion{ grid-template-columns:minmax(0,1fr) 340px; } } @media (max-width:1120px){ .pagina-sala .cabecera-sala{ gap:14px; padding-inline:18px; } .pagina-sala .cabecera-sala .marca-letras{ display:none; } .pagina-sala .sala-aplicacion{ grid-template-columns:1fr; padding-inline:16px; } .pagina-sala .panel-derecho-sala{ position:static; max-height:none; display:grid; grid-template-columns:1fr 1.35fr; overflow:visible; padding:0; } .pagina-sala .configuracion-sala{ grid-column:1 / -1; } .pagina-sala .estudio-invita{ grid-template-columns:1fr; } .pagina-sala .vista-invitacion{ display:grid; grid-template-columns:minmax(260px,.8fr) 1fr; gap:15px; } .pagina-sala .vista-cabecera, .pagina-sala .acciones-invitacion{ grid-column:1 / -1; } .pagina-sala .panfleto{ min-height:360px; } } @media (max-width:820px){ body.pagina-sala{ padding-bottom:0; } .pagina-sala .cabecera-sala{ position:relative; min-height:auto; grid-template-columns:auto 1fr auto; padding:10px 12px; } .pagina-sala .identidad-sala .avatar-sala{ display:none; } .pagina-sala .titulo-en-vivo h1{ font-size:13px; } .pagina-sala .identidad-sala-texto p{ font-size:8px; } .pagina-sala .boton-suscripcion, .pagina-sala .boton-paleta{ display:none; } .pagina-sala .boton-invitar{ min-height:38px; padding:0 11px; font-size:10px; } .pagina-sala .perfil-miniatura{ width:38px; height:38px; } .pagina-sala .sala-aplicacion{ padding:10px 10px 35px; } .pagina-sala .pantalla-videollamada{ min-height:500px; border-radius:17px; } .pagina-sala .rejilla-participantes{ grid-template-columns:1fr 112px; gap:5px; padding:6px; } .pagina-sala .participante-video{ border-radius:10px; } .pagina-sala .participante-video footer{ min-height:29px; padding-inline:7px; } .pagina-sala .participante-video footer strong{ font-size:8px; } .pagina-sala .boton-pantalla-completa{ top:11px; right:11px; width:37px; height:37px; } .pagina-sala .pestanas-taller{ grid-template-columns:repeat(7,100px); } .pagina-sala .panel-taller{ padding:12px; } .pagina-sala .panel-derecho-sala{ grid-template-columns:1fr; } .pagina-sala .configuracion-sala{ grid-column:auto; } .pagina-sala .form-producto{ grid-template-columns:1fr 1fr; } .pagina-sala .form-producto > *{ grid-column:auto !important; } .pagina-sala .tarjetas-recuerdos, .pagina-sala .reacciones-especiales{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pagina-sala .vista-invitacion{ display:block; } .pagina-sala .vista-cabecera, .pagina-sala .acciones-invitacion{ margin-top:10px; } } @media (max-width:560px){ .pagina-sala .cabecera-sala{ grid-template-columns:auto minmax(0,1fr) auto; gap:8px; } .pagina-sala .sala-online-bar{ max-width:min(48vw, 240px); } .pagina-sala .sala-online-lista{ max-height:calc(24px * 2 + 4px); gap:4px; } .pagina-sala .sala-online-chip{ width:24px; height:24px; font-size:8px; } .pagina-sala .sala-online-av{font-size:8px;} .pagina-sala .sala-member-badge{ min-width:36px; width:36px; height:36px; font-size:11px; } .pagina-sala .cabecera-sala .marca-icono{ width:57px; height:38px; font-size:18px; } .pagina-sala .identidad-sala-texto p{ display:none; } .pagina-sala .insignia-vivo{ display:none; } .pagina-sala .acciones-cabecera-sala{ gap:5px; } .pagina-sala .perfil-miniatura{ display:none; } .pagina-sala .panel-invitar{ top:68px; right:10px; } .pagina-sala .pantalla-videollamada{ min-height:440px; } .pagina-sala .rejilla-participantes{ grid-template-columns:1fr 92px; } .pagina-sala .participante-video:not(:first-child) .participante-iniciales{ font-size:17px; } .pagina-sala .participante-video footer{ min-height:25px; } .pagina-sala .estado-audio{ display:none; } .pagina-sala .participantes-en-vivo{ padding-inline:9px; } .pagina-sala .miniatura-participante{ flex-basis:60px; } .pagina-sala .miniatura-avatar{ width:42px; height:42px; } .pagina-sala .taller-principal-cabecera{ min-height:68px; padding-inline:13px; } .pagina-sala .agente-destello{ width:37px; height:37px; } .pagina-sala .taller-principal-cabecera h2{ font-size:15px; } .pagina-sala .estudio-invita{ gap:12px; } .pagina-sala .hablar-invita, .pagina-sala .vista-invitacion{ padding:12px; } .pagina-sala .panfleto{ min-height:345px; padding:19px; } .pagina-sala .panfleto h3{ font-size:24px; } .pagina-sala .crear-album, .pagina-sala .herramientas-informe, .pagina-sala .panel-taller-cabecera{ align-items:stretch; flex-direction:column; } .pagina-sala .tarjetas-recuerdos, .pagina-sala .reacciones-especiales{ grid-template-columns:1fr 1fr; } .pagina-sala .miembros-avatares{ grid-template-columns:repeat(6,minmax(0,1fr)); } } /* ========================================================= AJUSTES DE SALA — VERSIÓN COMPACTA ========================================================= */ .pagina-sala .pantalla-videollamada{ min-height:0; height:clamp(430px,46vw,610px); } .pagina-sala .rejilla-participantes{ grid-template-columns:minmax(0,1fr) 165px; grid-template-rows:repeat(5,minmax(0,1fr)); gap:6px; padding:8px; } .pagina-sala .participante-video[hidden]{ display:none !important; } .pagina-sala .participante-video:first-child{ grid-column:1 / -1; grid-row:1 / -1; } .pagina-sala .rejilla-participantes:has(.participante-video:not(:first-child):not([hidden])) .participante-video:first-child{ grid-column:1; } .pagina-sala .participante-video:not(:first-child){ max-height:96px; } .pagina-sala .participante-video:not(:first-child) .participante-iniciales{ font-size:24px; } .pagina-sala .participantes-en-vivo{ display:none !important; } /* Miniaturas reales: se llenan solo con flujos de cámara/WebRTC activos. */ .pagina-sala .franjas-en-vivo{ position:absolute; z-index:7; inset:0; pointer-events:none; } .pagina-sala .franjas-en-vivo[hidden]{display:none} .pagina-sala .miniaturas-lateral, .pagina-sala .miniaturas-inferior{ position:absolute; display:flex; gap:7px; pointer-events:auto; scrollbar-width:thin; scrollbar-color:#2dca6866 transparent; } .pagina-sala .miniaturas-lateral{ top:62px; right:9px; bottom:82px; width:86px; flex-direction:column; align-items:center; overflow-y:auto; overflow-x:hidden; } .pagina-sala .miniaturas-inferior{ right:106px; bottom:9px; left:9px; align-items:center; overflow-x:auto; overflow-y:hidden; } .pagina-sala .miniatura-video{ position:relative; width:78px; height:58px; flex:0 0 auto; overflow:hidden; padding:0; color:#fff; border:1px solid #ffffff35; border-radius:10px; background:#161a2c; box-shadow:0 7px 16px #0006; cursor:pointer; } .pagina-sala .miniatura-video.activa{ border:2px solid var(--sala-verde); box-shadow:0 0 0 2px #49d89436,0 7px 16px #0006; } .pagina-sala .miniatura-video video{ width:100%; height:100%; display:block; object-fit:cover; background:#0a0c16; } .pagina-sala .muestra-tamano-video{ position:absolute; z-index:3; top:auto; right:16px; bottom:18px; margin:0; pointer-events:none; } .pagina-sala .muestra-tamano-video img{ width:100%; height:100%; display:block; object-fit:cover; } .pagina-sala .muestra-tamano-video figcaption{ position:absolute; right:3px; bottom:3px; left:3px; display:flex; align-items:flex-end; justify-content:space-between; gap:2px; color:#fff; font-size:7px; font-style:normal; font-weight:900; line-height:1.1; text-shadow:0 1px 3px #000; } .pagina-sala .muestra-tamano-video figcaption em{ padding:2px 3px; color:#e9e2ff; font-size:6px; font-style:normal; border-radius:3px; background:#21183ccc; } .pagina-sala .muestra-presencia-familiar{ position:absolute; z-index:2; inset:0; pointer-events:none; } .pagina-sala .muestra-hablante{ position:absolute; inset:0; margin:0; overflow:hidden; background:#0b0d18; } .pagina-sala .muestra-hablante img{ width:100%; height:100%; display:block; object-fit:cover; } .pagina-sala .muestra-hablante footer{ position:absolute; right:0; bottom:0; left:0; display:flex; align-items:center; gap:7px; padding:18px 16px 12px; color:#fff; font-size:11px; background:linear-gradient(transparent,#05060de0); } .pagina-sala .indicador-hablando{ width:9px; height:9px; border-radius:50%; background:#55e59a; box-shadow:0 0 0 4px #55e59a33,0 0 13px #55e59a; animation:pulsoHablando 1.15s ease-in-out infinite; } .pagina-sala .miembros-conectados-muestra{ position:absolute; z-index:3; top:14px; right:12px; display:grid; justify-items:center; gap:7px; } .pagina-sala .miembros-conectados-muestra span{ width:38px; height:38px; display:grid; place-items:center; color:#fff; font-size:9px; font-weight:900; border:2px solid #55e59a; border-radius:50%; background:linear-gradient(145deg,#544f7e,#2f3152); box-shadow:0 0 0 3px #55e59a21; } .pagina-sala .miembros-conectados-muestra small{ color:#cbf8de; font-size:8px; font-weight:800; text-align:center; } @keyframes pulsoHablando{ 50%{ transform:scale(.7); opacity:.65; } } .pagina-sala .miniatura-video span{ position:absolute; right:4px; bottom:3px; left:4px; overflow:hidden; font-size:8px; font-weight:800; white-space:nowrap; text-align:left; text-overflow:ellipsis; text-shadow:0 1px 3px #000; } .pagina-sala .editor-invitacion{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(250px,.8fr); gap:16px; } .pagina-sala .editor-invitacion-campos{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .pagina-sala .editor-invitacion-campos label{ display:grid; gap:6px; color:#d8d6e4; font-size:9px; font-weight:800; } .pagina-sala .editor-invitacion-campos .campo-completo{grid-column:1 / -1} .pagina-sala .editor-invitacion-campos input:not([type="checkbox"]), .pagina-sala .editor-invitacion-campos select, .pagina-sala .editor-invitacion-campos textarea{ width:100%; min-height:40px; padding:9px 11px; color:#fff; border:1px solid #ffffff18; border-radius:10px; outline:0; background:#101426; } .pagina-sala .editor-invitacion-campos textarea{min-height:76px;resize:vertical} .pagina-sala .editor-invitacion-campos input[type="color"]{padding:4px} .pagina-sala .editor-invitacion-campos .opcion-invitacion{display:flex;align-items:center;gap:7px;min-height:40px} .pagina-sala .modelos-invitacion{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:15px; } .pagina-sala .modelos-invitacion button{ display:grid; gap:4px; min-height:100px; padding:12px; color:#e8e4f8; text-align:left; border:1px solid #ffffff16; border-radius:13px; background:#171b2e; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; } .pagina-sala .modelos-invitacion button:hover,.pagina-sala .modelos-invitacion button.activo{ transform:translateY(-2px); border-color:#a889ff88; background:#2a2346; } .pagina-sala .modelos-invitacion span{ font-size:24px; } .pagina-sala .modelos-invitacion b{ color:#fff; font-size:10px; } .pagina-sala .modelos-invitacion small{ color:var(--sala-suave); font-size:8px; } .pagina-sala .vista-previa-invitacion{ min-height:295px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; padding:24px; color:#fff; border:1px solid #ffffff25; border-radius:16px; background:linear-gradient(145deg,#249cff,#0e3158); box-shadow:inset 0 1px #ffffff22; } .pagina-sala .vista-previa-invitacion[data-plantilla="elegante"]{background:linear-gradient(145deg,#17131f,#705237)} .pagina-sala .vista-previa-invitacion[data-plantilla="creativa"]{background:linear-gradient(145deg,#ff7a1a,#249cff)} .pagina-sala .vista-previa-invitacion small{font-size:8px;font-weight:900;letter-spacing:1px} .pagina-sala .vista-previa-invitacion h4{margin:0;font-size:26px;line-height:1.05} .pagina-sala .vista-previa-invitacion p{margin:0;font-size:11px;line-height:1.5} .pagina-sala .vista-previa-invitacion time,.pagina-sala .vista-previa-invitacion > span,.pagina-sala .vista-previa-invitacion em{font-size:9px;font-style:normal;font-weight:800} .pagina-sala .codigo-qr-invitacion{width:42px;height:42px;display:grid;place-items:center;color:#1b1724;font-size:9px;font-weight:950;border-radius:5px;background:repeating-linear-gradient(45deg,#fff 0 3px,#1c1727 3px 6px)} .pagina-sala .acciones-editor-invitacion{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px} .pagina-sala .acciones-editor-invitacion button{min-height:39px;padding:0 13px;font-size:10px} .pagina-sala .estado-editor-invitacion{min-height:16px;margin:9px 0 0;color:var(--sala-verde);font-size:9px} @media (max-width:820px){ .pagina-sala .miniaturas-lateral{width:68px} .pagina-sala .miniaturas-inferior{right:84px} .pagina-sala .miniatura-video{width:62px;height:48px} .pagina-sala .editor-invitacion{grid-template-columns:1fr} } @media (max-width:560px){ .pagina-sala .miniaturas-lateral{display:none} .pagina-sala .miniaturas-inferior{right:8px;bottom:8px;left:8px} .pagina-sala .miniatura-video{width:66px;height:48px} .pagina-sala .muestra-tamano-video{display:block;right:10px;bottom:12px} .pagina-sala .muestra-hablante{inset:0} .pagina-sala .miembros-conectados-muestra{display:none} .pagina-sala .editor-invitacion-campos{grid-template-columns:1fr} .pagina-sala .editor-invitacion-campos .campo-completo{grid-column:auto} .pagina-sala .modelos-invitacion{grid-template-columns:repeat(2,minmax(0,1fr))} } .pagina-sala .informacion-sala-compacta{ display:none !important; } .pagina-sala .boton-pantalla-completa{ width:36px; height:36px; top:12px; right:12px; font-size:16px; } .pagina-sala .resumen-lateral-sala{ padding:15px; border:1px solid var(--sala-borde); border-radius:18px; background:#111526de; box-shadow:0 10px 30px #0003; } .pagina-sala .resumen-lateral-identidad{ display:flex; align-items:flex-start; gap:11px; } .pagina-sala .resumen-lateral-icono{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:12px; background:#29243e; font-size:20px; } .pagina-sala .resumen-lateral-identidad div{ min-width:0; } .pagina-sala .resumen-lateral-identidad small{ display:block; color:var(--sala-azul); font-size:7px; font-weight:900; letter-spacing:.9px; } .pagina-sala .resumen-lateral-identidad strong{ display:block; margin-top:4px; overflow:hidden; color:#fff; font-size:12px; white-space:nowrap; text-overflow:ellipsis; } .pagina-sala .resumen-lateral-identidad p{ margin:4px 0 0; color:var(--sala-suave); font-size:8px; } .pagina-sala .resumen-lateral-dados{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .pagina-sala .resumen-lateral-dados span{ padding:6px 8px; color:#aeb0c1; font-size:7px; border:1px solid #ffffff10; border-radius:8px; background:#181d30; } .pagina-sala .resumen-lateral-dados b{ color:#fff; } @media (max-width:820px){ .pagina-sala .pantalla-videollamada{ height:430px; min-height:0; } .pagina-sala .rejilla-participantes{ grid-template-columns:minmax(0,1fr) 100px; } .pagina-sala .participante-video:not(:first-child){ max-height:78px; } } @media (max-width:560px){ .pagina-sala .pantalla-videollamada{ height:380px; } .pagina-sala .rejilla-participantes{ grid-template-columns:minmax(0,1fr) 82px; } .pagina-sala .participante-video:not(:first-child){ max-height:65px; } } /* ========================================================= MODAL DE CUENTA Y REGISTRO (PREMIUM) ========================================================= */ .panel-cuenta-modal { width: min(94vw, 500px); padding: 0; border: 0; border-radius: 24px; color: var(--texto); background: #111429; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6); overflow: hidden; } .modal-cuenta-form { position: relative; padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; } .cerrar-modal-cuenta { position: absolute; right: 20px; top: 18px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--texto-suave); font-size: 24px; font-weight: 300; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.05); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .cerrar-modal-cuenta:hover { color: #fff; background: rgba(255, 255, 255, 0.15); } /* Vista No Logeado */ .login-cabecera { text-align: center; margin-bottom: 8px; } .login-cabecera h2 { font-size: 24px; margin: 0 0 6px 0; font-weight: 800; background: linear-gradient(135deg, #fff 40%, #b8b6c8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .login-cabecera p { font-size: 13px; color: var(--texto-suave); margin: 0; line-height: 1.4; } /* Botón Google Premium */ .boton-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 48px; color: #171827; font-size: 14px; font-weight: 700; border: 0; border-radius: 14px; background: #ffffff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .boton-google:hover { background: #f3f3f6; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .boton-google:active { transform: translateY(0); } .boton-google.cargando { opacity: 0.7; pointer-events: none; } /* Separador O */ .separador-o { display: flex; align-items: center; text-align: center; color: rgba(255, 255, 255, 0.25); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 5px 0; } .separador-o::before, .separador-o::after { content: ""; flex: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .separador-o span { padding: 0 10px; } /* Control de Pestañas */ .tabs-control { display: flex; background: rgba(255, 255, 255, 0.04); padding: 4px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); } .tab-boton { flex: 1; height: 38px; font-size: 13px; font-weight: 700; color: var(--texto-suave); border: 0; border-radius: 9px; background: transparent; cursor: pointer; transition: all 0.2s ease; } .tab-boton.activo { color: #fff; background: rgba(255, 255, 255, 0.08); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); } /* Formulario */ .formulario-perfil { display: flex; flex-direction: column; gap: 14px; } .formulario-perfil label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.5px; } .formulario-perfil input { height: 46px; padding: 0 14px; color: #fff; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.03); outline: 0; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .formulario-perfil input:focus { border-color: #20d866; box-shadow: 0 0 0 3px rgba(108, 60, 233, 0.2); } .boton-enlace { align-self: center; font-size: 12px; color: var(--texto-suave); border: 0; background: transparent; cursor: pointer; text-decoration: underline; transition: color 0.2s ease; margin-top: 4px; } .boton-enlace:hover { color: #fff; } /* Vista Logeado */ .perfil-cabecera { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .perfil-avatar { width: 64px; height: 64px; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #fff; border-radius: 18px; background: linear-gradient(135deg, #20d866, #249cff); box-shadow: 0 8px 20px rgba(108, 60, 233, 0.3); } .perfil-info h2 { font-size: 19px; font-weight: 800; margin: 0 0 4px 0; } .perfil-info p { font-size: 13px; color: var(--texto-suave); margin: 0 0 8px 0; } .etiqueta-verificado { display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 700; color: #49d894; border-radius: 6px; background: rgba(73, 216, 148, 0.12); } .seccion-ajustes, .seccion-planes { padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .seccion-ajustes h3, .seccion-planes h3 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-suave); margin: 12px 0 14px 0; } /* Planes de suscripción */ .planes-cuenta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; } .plan-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 12px 14px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.02); cursor: pointer; text-align: left; transition: all 0.2s ease; } .plan-card:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); } .plan-card.activo { border-color: #20d866; background: rgba(108, 60, 233, 0.06); box-shadow: 0 4px 16px rgba(108, 60, 233, 0.15); } .plan-badge { position: absolute; top: -8px; left: 8px; font-size: 8px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: #24253a; color: var(--texto-suave); border: 1px solid rgba(255, 255, 255, 0.15); } .plan-badge.recomendado { background: #20d866; color: #fff; border-color: #20d866; } .plan-card b { font-size: 13px; font-weight: 800; color: #fff; margin-top: 4px; } .plan-card strong { font-size: 11px; color: var(--texto-suave); margin: 4px 0 6px 0; } .plan-card.activo strong { color: #fff; } .plan-card small { font-size: 9px; line-height: 1.3; color: var(--texto-suave); } .plan-actual { margin: 8px 0 0; font-size: 12px; color: var(--texto-suave); text-align: center; } .plan-actual b { color: #fff; } .acciones-perfil-pie { display: flex; justify-content: flex-end; } .boton-cerrar-sesion { border-color: rgba(234, 67, 53, 0.3); background: rgba(234, 67, 53, 0.05); color: #ff5252; } .boton-cerrar-sesion:hover { background: rgba(234, 67, 53, 0.15); color: #ff5252; } /* ========================================================= REACCIONES EN VIVO EN PANTALLA ========================================================= */ .capa-reacciones { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 10; } .emoji-flotante { position: absolute; bottom: -60px; pointer-events: none; user-select: none; z-index: 100; will-change: transform, opacity; animation: flotarYVacilar 3s ease-in-out forwards; } @keyframes flotarYVacilar { 0% { transform: translateY(0) translateX(0) scale(0.6) rotate(0deg); opacity: 0; } 10% { opacity: 1; transform: translateY(-80px) translateX(calc(var(--sway-width) * 0.2)) scale(1.3) rotate(15deg); } 50% { transform: translateY(-300px) translateX(var(--sway-width)) scale(1) rotate(-15deg); opacity: 0.8; } 100% { transform: translateY(-650px) translateX(calc(var(--sway-width) * 0.5)) scale(0.8) rotate(30deg); opacity: 0; } } /* ========================================================= IDENTIDAD GABA3 — AZUL Y PIPA El azul es el único acento principal de la plataforma. La marca no depende de una imagen: la cabeza de pipa conserva la "I" centrada en portada, sala privada y pública. ========================================================= */ :root{ --morado:#0878e8; --morado-oscuro:#0454ac; --azul:#0878e8; --sala-morado:#0878e8; --sala-morado-claro:#78beff; --sala-azul:#249cff; } .marca-icono, .pagina-sala .cabecera-sala .marca-icono{ position:relative; display:block; border-radius:0!important; clip-path:none!important; background:transparent!important; box-shadow:none!important; } .marca-icono{ font-weight:950; } /* Sustituye los acentos violetas heredados sin afectar colores de fotos, avatares o estados de alerta. */ .pagina-sala .boton-invitar, .pagina-sala .boton-invitar:hover, .pagina-sala .tema-boton.activo, .plan-card.activo, .plan-card:hover, .boton-principal, .boton-ver-sala, .categoria-sala.activa{ border-color:#249cff!important; color:#fff!important; background:linear-gradient(135deg,#168eff,#075ecb)!important; box-shadow:0 9px 22px rgba(8,120,232,.28)!important; } .pagina-sala .tema-boton.activo{ box-shadow:0 0 0 2px rgba(36,156,255,.25)!important; } .pagina-sala .panfleto-morado{ background:radial-gradient(circle at 20% 5%,#ffffff20,transparent 26%),radial-gradient(circle at 90% 90%,#46c3ff35,transparent 25%),linear-gradient(150deg,#071a32,#0878e8 55%,#1d6f9c)!important; } /* Sala Pública de Jogos: composición propia, sin bloques de comercio. */ .estadisticas-comerciales{margin:12px 0;padding:12px;border:1px solid #1d4262;border-radius:12px;background:#0b1725;color:#eef7ff}.estadisticas-comerciales summary{display:flex;justify-content:space-between;cursor:pointer}.metricas-publicas{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.metricas-publicas span,.metricas-publicas b{background:#10273c;padding:7px 9px;border-radius:7px}.metricas-publicas button{margin-left:auto;background:#0878e8;color:#fff;border:0;border-radius:7px;padding:8px 11px} /* Sala gaming: jogo em primeiro plano; interação recolhível em telas pequenas. */ @keyframes gamingBubble{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* Sala de Jogos: em celular a partida é prioritária; GABA3 fica numa bolha social discreta. Em desktop o grid existente mantém jogo grande + chat direito. */ #gaming-mobile-focus{display:none} @media (max-width:850px){ /* A navegação global pertence às demais salas; durante um jogo ela cobre a bolha e os controles reais do título aberto pelo jogador. */ /* El contenido del escenario se conserva también en horizontal: si aún no hay captura de juego configurada, nunca mostramos una pantalla negra. */ } /* Acceso seguro: nunca se muestran datos demostrativos de una sala privada cuando no existe una sala validada en la URL. */ .sala-acesso-seguro { width: min(640px, calc(100% - 32px)); margin: 72px auto; padding: 44px 32px; text-align: center; border: 1px solid rgba(34, 142, 255, .32); border-radius: 24px; background: linear-gradient(145deg, #0b1727, #07101b); box-shadow: 0 20px 70px rgba(0, 0, 0, .35); } .sala-acesso-seguro > span { display: block; font-size: 36px; margin-bottom: 14px; } .sala-acesso-seguro h1 { margin: 0; color: #fff; } .sala-acesso-seguro p { margin: 14px auto 26px; color: #b9c8dc; max-width: 440px; } .sala-acesso-seguro .boton-principal { display: inline-flex; text-decoration: none; justify-content: center; } .sala-sem-contexto .cabecera-sala .resumen-sala, .sala-sem-contexto .cabecera-sala .acciones-cabecera-sala, .sala-sem-contexto #panel-compartir{display:none!important} /* ========================================================= IDENTIDAD VISUAL OFICIAL — VERDE GABA3 Este bloque solo redefine color, contraste y microinteracciones. Mantiene intactas la grilla, medidas y comportamiento de cada pantalla. ========================================================= */ :root{ --gaba3-verde:#55c900; --gaba3-verde-brillante:#70df13; --gaba3-verde-profundo:#318400; --gaba3-verde-suave:#55c90026; --morado:var(--gaba3-verde); --morado-oscuro:var(--gaba3-verde-profundo); --azul:var(--gaba3-verde); --sala-morado:var(--gaba3-verde); --sala-morado-claro:#a7f06d; --sala-azul:var(--gaba3-verde); --sala-verde:var(--gaba3-verde-brillante); } body{ background: linear-gradient(rgba(20,10,4,.1),rgba(20,10,4,.1)), url("assets/brand/fondo-madera-gaba3.png?v=real1"); background-size:cover; background-position:center; background-repeat:no-repeat; } body::before{background-image:radial-gradient(circle,#ffffff 0 1px,transparent 1.5px),radial-gradient(circle,rgba(112,223,19,.28) 0 1px,transparent 1.5px)} .marca-icono, .pagina-sala .cabecera-sala .marca-icono{ background:transparent!important; box-shadow:none!important; } .marca-letras i, .marca-letras i:nth-child(1),.marca-letras i:nth-child(2),.marca-letras i:nth-child(3),.marca-letras i:nth-child(4),.marca-letras i:nth-child(5),.marca-letras i:nth-child(6){color:var(--gaba3-verde)!important} /* Logotipo oficial GABA3: recurso único, sin gradientes ni letra heredada. */ img.marca-icono, .pagina-sala .cabecera-sala img.marca-icono{display:block;width:108px;height:72px;object-fit:contain;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important;clip-path:none!important} .marca:has(img.marca-icono){gap:5px;align-items:center} @media(max-width:700px){img.marca-icono,.pagina-sala .cabecera-sala img.marca-icono{width:63px;height:42px}.marca:has(img.marca-icono){gap:4px}} /* Cabeceras independientes por formato. La versión móvil respeta notch y barra de estado; la tableta conserva controles cómodos sin heredar el alto desktop. */ @media(max-width:820px){ .barra-superior{min-height:0;padding-top:calc(9px + env(safe-area-inset-top,0px));padding-bottom:9px} .cuenta-usuario{gap:7px}.avatar-perfil,.boton-notificaciones,.boton-mensajes{width:38px!important;height:38px!important}.perfil-usuario{gap:6px}.nombre-usuario,.datos-plan{display:none} .categorias-contenedor{top:calc(126px + env(safe-area-inset-top,0px))} } @media(min-width:821px) and (max-width:1180px){.barra-superior{padding-inline:22px}.marca-palabra{font-size:32px}.barra-superior .marca-icono{width:62px;height:62px}.busqueda-interna{margin-left:10px}} @media(max-width:560px){ .barra-superior{grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-inline:12px} .marca-palabra{font-size:21px;letter-spacing:-1.2px} .busqueda-interna{margin-top:0}.buscador-principal{min-height:42px}.boton-notificaciones,.boton-mensajes{width:34px!important;height:34px!important}.avatar-perfil{width:36px!important;height:36px!important} .categorias-contenedor{top:calc(117px + env(safe-area-inset-top,0px))} #crear-movil{width:44px;height:44px;font-size:24px;margin-top:-20px} } /* Nueva cabecera: búsqueda como icono y creación como cinta visible. */ .barra-superior{grid-template-columns:auto 42px minmax(360px,1fr) auto}.boton-lupa-header{width:38px;height:38px;border:0;background:transparent;color:var(--gaba3-verde);font-size:28px;cursor:pointer}.cinta-crear-header{min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 10px 7px 18px;border:1px solid #55c90046;border-radius:14px;background:linear-gradient(100deg,#0b1b0b,#112512);box-shadow:inset 0 1px #ffffff08}.cinta-crear-header div{display:grid;gap:2px}.cinta-crear-header small{color:#83ef61;font-size:10px;font-weight:900;letter-spacing:.08em}.cinta-crear-header b{font-size:15px;color:#fff}.cinta-crear-header .boton-principal{min-height:40px;padding:0 15px;white-space:nowrap}.portada-principal{grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr)}.sala-destacada-secundaria{background:linear-gradient(90deg,#090a13e8 0%,#090a1380 75%),url("assets/sectors/celebracion.png") center/cover no-repeat,#16331a}.sala-destacada-secundaria .destacada-contenido{left:28px;bottom:28px;width:78%}.sala-destacada-secundaria .destacada-contenido h1{font-size:clamp(28px,2.4vw,40px);letter-spacing:-1.2px}.sala-destacada-secundaria .destacada-contenido p{font-size:14px;line-height:1.45}.sala-destacada-secundaria .boton-ver-sala{min-height:44px;margin-top:16px;padding:0 20px} @media(max-width:820px){.barra-superior{grid-template-columns:auto 34px minmax(0,1fr) auto}.cinta-crear-header b{font-size:13px}.cinta-crear-header{padding-left:12px;gap:8px}.cinta-crear-header .boton-principal{min-height:36px;padding:0 10px;font-size:11px}.portada-principal{grid-template-columns:1fr}.sala-destacada-secundaria{min-height:280px}} @media(max-width:560px){.barra-superior{grid-template-columns:auto 30px minmax(0,1fr) auto}.boton-lupa-header{width:28px;height:32px;font-size:23px}.cinta-crear-header{min-height:42px;padding:4px 7px;border-radius:10px}.cinta-crear-header small{font-size:8px}.cinta-crear-header b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cinta-crear-header .boton-principal{min-height:31px;padding:0 7px;font-size:9px}.sala-destacada-secundaria{min-height:245px}.sala-destacada-secundaria .destacada-contenido{left:18px;bottom:18px}.sala-destacada-secundaria .destacada-contenido h1{font-size:25px}} /* Dos bandejas independientes: blanco para participación y verde para salas propias. */ .boton-buzon{position:relative;width:52px;height:38px;display:grid;place-items:center;border-radius:10px;font-size:22px;line-height:1;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.boton-buzon:hover{transform:translateY(-1px)}.buzon-participacion{border:1px solid #ffffffa8;background:#f6faf6;color:#152419;box-shadow:0 5px 13px #0004}.buzon-propias{border:1px solid #92ff75;background:#1d9a24;color:#fff;box-shadow:0 5px 14px #55c9004d}.contador-buzon{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;place-items:center;border:2px solid #08110b;border-radius:99px;background:#ef3f5b;color:#fff;font-size:9px;font-weight:900}.buzon-dialog{width:min(420px,calc(100vw - 28px));padding:0;border:1px solid #55c90055;border-radius:18px;background:#09120bf8;color:#fff;box-shadow:0 24px 60px #000a}.buzon-dialog::backdrop{background:#0009}.buzon-dialog header{display:flex;justify-content:space-between;padding:18px;border-bottom:1px solid #ffffff15}.buzon-dialog h2{margin:4px 0 0;font-size:19px}.buzon-dialog header small{color:#9eff74;font-weight:900}.buzon-dialog header button{border:0;background:transparent;color:#fff;font-size:28px}.buzon-lista{display:grid;gap:8px;padding:12px}.buzon-lista button{display:grid;gap:4px;padding:12px;border:1px solid #ffffff14;border-radius:11px;background:#102015;color:#fff;text-align:left}.buzon-lista span,.buzon-lista small{color:#bdd0bf;font-size:12px}.buzon-lista small{color:#84b98a}@media(max-width:560px){.boton-buzon{width:40px;height:33px;font-size:18px}.cuenta-usuario{gap:5px}} /* Salas personales dentro del perfil: no existe flecha lateral independiente. */ #alternar-minhas-salas{display:none!important}.painel-minhas-salas{z-index:90!important;display:none;position:fixed!important;right:18px!important;left:auto!important;top:92px!important;width:min(360px,calc(100vw - 28px));max-height:min(70vh,620px)!important;overflow:auto!important;padding:14px!important;border:1px solid #55c90045!important;border-radius:16px!important;background:#08110bf8!important;box-shadow:0 18px 44px #0009!important;scrollbar-width:thin!important;scrollbar-color:rgba(85,201,0,.4) transparent!important}.painel-minhas-salas::-webkit-scrollbar{width:6px!important}.painel-minhas-salas::-webkit-scrollbar-track{background:transparent!important}.painel-minhas-salas::-webkit-scrollbar-thumb{background:rgba(85,201,0,.4)!important;border-radius:6px!important}.painel-minhas-salas.perfil-salas-abierto{display:block!important}.painel-minhas-salas h2{font-size:17px}.minhas-salas-grupo>button{padding:10px 0}.minhas-salas-lista{padding-bottom:8px}@media(max-width:560px){.painel-minhas-salas{top:calc(62px + env(safe-area-inset-top,0px))!important;right:10px!important;width:calc(100vw - 20px);max-height:calc(100vh - 150px)!important}} /* Meus círculos: carrossel horizontal (dedo no celular, setas no web) */ .minhas-salas-carousel-wrap{display:grid;gap:10px;min-width:0} .minhas-salas-filtros-row,.minhas-salas-circulos-row{min-width:0} .minhas-salas-circulos-label{margin:2px 2px 0;color:#9bcaa2;font-size:11px;font-weight:700;letter-spacing:.04em} .minhas-salas-carousel{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:4px;min-width:0} .minhas-salas-car-btn{width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid #55c90044;border-radius:50%;background:#102015;color:#9eff74;font-size:18px;line-height:1;cursor:pointer} .minhas-salas-car-btn:hover,.minhas-salas-car-btn:focus-visible{outline:none;border-color:#7aff50aa;background:#16331c} .minhas-salas-carousel-track{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x;padding:4px 2px 8px} .minhas-salas-carousel-track::-webkit-scrollbar{display:none} .minhas-salas-chip{flex:0 0 auto;scroll-snap-align:start;min-height:34px;padding:0 12px;border:1px solid #ffffff22;border-radius:999px;background:#0f1c13;color:#d7ecd4;font:600 12px/1 inherit;cursor:pointer;white-space:nowrap} .minhas-salas-chip.is-active,.minhas-salas-chip:hover{border-color:#7aff50aa;background:#1a3a20;color:#b9ff9e} .minha-sala-card{flex:0 0 auto;scroll-snap-align:start;width:min(168px,72vw);display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px;padding:10px;border:1px solid #ffffff18;border-radius:12px;background:#0d1a11;color:#fff;text-align:left;cursor:pointer} .minha-sala-card:hover,.minha-sala-card:focus-visible{outline:none;border-color:#7aff50aa;background:#153319} .minha-sala-card .miniatura-sala{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#1c4422;font-size:18px} .minha-sala-card-text{min-width:0;display:grid;gap:2px} .minha-sala-card-text b,.minha-sala-card-text small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .minha-sala-card-text b{font-size:13px} .minha-sala-card-text small{color:#9bcaa2;font-size:11px} .minhas-salas-vazia{margin:6px 2px;color:#a6b8a4;font-size:13px;line-height:1.4} .minhas-salas-vazia-inline{flex:0 0 auto;margin:8px 4px;white-space:normal} .minhas-salas-tip{margin-top:10px;font-size:11px;opacity:.85} .minhas-salas-grupo--circulos>button{display:none} .acao-criar-sala-repetida{display:none!important} .minha-sala-card-text b{font-size:13px;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .idd-seccion{margin:8px 10px 4px;color:#9eff74;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .minhas-salas-carousel-track{display:flex;gap:10px;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;touch-action:pan-x pan-y} .minhas-salas-carousel-track::-webkit-scrollbar{display:none} .minhas-salas-carousel .minha-sala-card{flex:0 0 100%;width:100%;min-height:112px;grid-template-columns:48px minmax(0,1fr);gap:11px;padding:14px;box-sizing:border-box;border-radius:14px;scroll-snap-align:start} .minhas-salas-carousel .minha-sala-card .miniatura-sala{width:48px;height:48px;border-radius:12px;font-size:25px} .minhas-salas-carousel .minha-sala-card-text b{font-size:16px;line-height:1.3} @media(max-width:820px){ .minhas-salas-car-btn{display:none} .minhas-salas-carousel{grid-template-columns:minmax(0,1fr)} } @media(hover:hover) and (pointer:fine){ .minhas-salas-car-btn{display:grid} .minhas-salas-carousel{grid-template-columns:28px minmax(0,1fr) 28px} } /* O perfil reúne salas y ajustes personales, sin convertir el menú global en configuración de cuenta. */ .perfil-miniatura{overflow:hidden}.perfil-miniatura img{width:100%;height:100%;display:block;object-fit:cover}.perfil-avatar{overflow:hidden}.perfil-avatar img{width:100%;height:100%;display:block;object-fit:cover}.painel-minhas-salas>header{position:sticky;top:-14px;z-index:2;margin:-14px -14px 8px;padding:14px;background:#08110bf8;border-bottom:1px solid #ffffff12}.painel-minhas-salas>header button{width:30px;height:30px;display:grid;place-items:center;border:1px solid #ffffff25;border-radius:50%;background:#132017;color:#fff;font-size:20px}.minhas-salas-grupo>button{display:grid;grid-template-columns:minmax(0,1fr) auto 22px;align-items:center;gap:7px;width:100%;border:0;background:transparent;color:#fff;text-align:left;font:inherit;cursor:pointer}.minhas-salas-grupo>button i{font-size:17px;font-style:normal;line-height:1;transition:transform .2s ease}.minhas-salas-grupo>button[aria-expanded="true"] i{transform:rotate(180deg)}.configuracoes-perfil{margin-top:8px;padding-top:14px;border-top:1px solid #ffffff16}.configuracoes-perfil h3{margin:0 0 8px;color:#8fff67;font-size:10px;letter-spacing:.11em}.configuracoes-perfil>button{width:100%;min-height:45px;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:8px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:#fff;text-align:left;font:inherit;cursor:pointer;transition:background .2s ease,color .2s ease}.configuracoes-perfil>button:hover,.configuracoes-perfil>button:focus-visible{outline:none;background:#46c92422;color:#b9ff9e}.configuracoes-perfil>button span{color:#7aff50;font-size:18px;text-align:center}.configuracoes-perfil>button small{color:#a6b8a4;font-size:11px}.configuracoes-perfil>button b{color:#90a990;font-size:20px;font-weight:400}.configuracoes-perfil .acao-sair{margin-top:5px;color:#ffb6b6}.configuracoes-perfil .acao-sair span{color:#ff7878}.configuracoes-perfil .acao-excluir-conta{margin-top:10px;padding-top:14px;border-top:1px solid #ffffff16;color:#ff8a8a;font-weight:700}.configuracoes-perfil .acao-excluir-conta span{color:#ff5c5c} /* Pedido do dono 2026-09-13: Termos, Privacidade, Ajuda e Reportar saem da portada e ficam guardados aqui, num grupo próprio com cadeado — mesmo visual dos outros botões de Configurações (o seletor >button vira >button,>a pra cobrir esses 4, que são links reais). */ .configuracoes-perfil>a{width:100%;min-height:45px;display:grid;grid-template-columns:25px minmax(0,1fr) auto;align-items:center;gap:8px;padding:0 8px;border:0;border-radius:10px;background:transparent;color:#fff;text-align:left;font:inherit;text-decoration:none;cursor:pointer;transition:background .2s ease,color .2s ease} .configuracoes-perfil>a:hover,.configuracoes-perfil>a:focus-visible{outline:none;background:#46c92422;color:#b9ff9e} .configuracoes-perfil>a span{color:#7aff50;font-size:18px;text-align:center} .configuracoes-perfil>a b{color:#90a990;font-size:20px;font-weight:400} .gaba3-config-candado{margin-top:10px;padding-top:14px;border-top:1px solid #ffffff16} /* Encabezado móvil: dos líneas reales. Nunca se comprimen marca, sobres, perfil y la cinta de creación dentro del mismo espacio. */ .marca-busqueda{display:flex;align-items:center;gap:10px;min-width:0;position:relative}.barra-superior{grid-template-columns:auto minmax(360px,1fr) auto}.boton-lupa-header{flex:none}@media(max-width:820px){.barra-superior{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:8px 12px}.marca-busqueda{grid-column:1;grid-row:1}.cuenta-usuario{grid-column:2;grid-row:1}.busqueda-interna{grid-column:1 / -1;grid-row:2;min-width:0}.categorias-contenedor{top:calc(132px + env(safe-area-inset-top,0px))}} @media(max-width:560px){.barra-superior{padding:calc(8px + env(safe-area-inset-top,0px)) 12px 9px}.marca-busqueda{gap:5px}.barra-superior .marca-icono{width:39px;height:39px}.marca-palabra{font-size:22px}.boton-lupa-header{width:28px;height:32px;font-size:22px}.boton-notificaciones{display:none}.cuenta-usuario{gap:4px}.cinta-crear-header{min-height:45px;padding:5px 9px;gap:8px}.cinta-crear-header b{font-size:11px}.cinta-crear-header .boton-principal{min-height:32px;padding:0 9px;font-size:10px}.categorias-contenedor{top:calc(125px + env(safe-area-inset-top,0px))}} @media(max-width:390px){.marca-palabra{font-size:19px}.barra-superior .marca-icono{width:35px;height:35px}.boton-buzon{width:36px;height:32px;font-size:16px}.perfil-miniatura{width:33px;height:33px}.cinta-crear-header b{font-size:10px}} /* Ajuste preciso desde la referencia móvil: controles reconocibles sin competir con el mensaje principal, y contenido siempre encima del menú. */ .boton-lupa-header{width:42px;height:42px;font-size:32px;line-height:1}.cinta-crear-header .boton-principal{min-width:126px;padding-inline:12px}.boton-buzon{width:46px;height:39px;grid-template-rows:20px 10px;gap:0;padding:2px 0 1px;border-radius:9px}.boton-buzon .icono-buzon{font-size:19px;line-height:1}.boton-buzon small{font-size:8px;font-weight:900;line-height:1}.contador-buzon{top:-6px;right:-6px;display:grid}.categorias-salas{scroll-snap-type:x proximity;scroll-padding-inline:16px;padding-right:48px}.categoria-sala{scroll-snap-align:start}.categorias-contenedor{overflow:hidden}@media(max-width:820px){body{padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))}main{padding-bottom:calc(116px + env(safe-area-inset-bottom,0px))}.menu-movil{height:calc(62px + env(safe-area-inset-bottom,0px));padding:0 8px env(safe-area-inset-bottom,0);grid-template-columns:repeat(5,1fr)}.sala-destacada{min-height:355px}.destacada-contenido{bottom:22px}.destacada-contenido h1{font-size:30px}.destacada-contenido p{font-size:13px;line-height:1.4}.sala-destacada-secundaria{min-height:270px}.sala-destacada-secundaria .destacada-contenido h1{font-size:27px}.cinta-crear-header .boton-principal{min-width:112px;padding-inline:10px}.boton-lupa-header{width:36px;height:38px;font-size:29px}.boton-buzon{width:39px;height:35px}.boton-buzon .icono-buzon{font-size:17px}.boton-buzon small{font-size:7px}} @media(max-width:560px){.cinta-crear-header{gap:10px}.cinta-crear-header>div{min-width:0;flex:1}.cinta-crear-header b{font-size:12px;white-space:normal;line-height:1.12}.cinta-crear-header .boton-principal{flex:0 0 108px;min-width:108px;min-height:35px;padding:0 7px;font-size:10px}.portada-principal{gap:12px;margin-bottom:16px}.sala-destacada{min-height:335px}.sala-destacada-secundaria{min-height:260px}.destacada-contenido h1{font-size:28px}.etiqueta-destacada{font-size:10px}.categorias-salas{gap:9px;padding-right:52px}.categoria-sala{min-height:42px;padding-inline:17px}.menu-movil button{width:42px;height:42px;margin-top:-17px;font-size:24px}} @media(max-width:390px){.cinta-crear-header .boton-principal{flex-basis:96px;min-width:96px;font-size:9px}.boton-lupa-header{width:31px;font-size:26px}.boton-buzon{width:35px;height:33px}.cuenta-usuario{gap:3px}.destacada-contenido h1{font-size:26px}} /* .busqueda-rapida-dialog — eliminado, reemplazado por buscador inline */ /* Barra central: búsqueda dentro de la misma franja y creación a la derecha. */ .cinta-crear-header{min-width:0} .cinta-crear-header .boton-lupa-header{display:flex;align-items:center;gap:11px;flex:1;min-width:0;width:auto;height:42px;padding:0 10px;border:0;background:transparent;color:#7bf048;text-align:left;cursor:pointer} .cinta-crear-header .boton-lupa-header>span{font-size:31px;line-height:1} .cinta-crear-header .boton-lupa-header b{overflow:hidden;color:#c7d8c5;font-size:14px;font-weight:700;text-overflow:ellipsis;white-space:nowrap} .cinta-crear-header .boton-lupa-header:hover b,.cinta-crear-header .boton-lupa-header:focus-visible b{color:#fff} .cinta-crear-header .boton-lupa-header:focus-visible{outline:2px solid #73eb50;outline-offset:-2px;border-radius:10px} .cinta-crear-header .boton-principal[hidden]{display:none} img.marca-icono{width:114px;height:76px} @media(max-width:700px){img.marca-icono{width:68px;height:45px}.cinta-crear-header .boton-lupa-header{height:36px;padding-inline:7px;gap:7px}.cinta-crear-header .boton-lupa-header>span{font-size:27px}.cinta-crear-header .boton-lupa-header b{font-size:12px}} /* Em celular, a faixa de categorias encosta no cabeçalho: uma única unidade visual. */ @media(max-width:820px){.barra-superior{row-gap:0;padding-bottom:0}.categorias-contenedor{top:calc(116px + env(safe-area-inset-top,0px));padding-top:5px}} @media(max-width:560px){.categorias-contenedor{top:calc(101px + env(safe-area-inset-top,0px));padding-top:4px}} /* O vídeo permanece limpo: dados e ações ficam sempre fora da área visual. */ .shorts-feed{max-width:1180px}.short-item{min-height:calc(100vh - 68px);display:grid;grid-template-columns:minmax(220px,290px) minmax(320px,520px) 94px;align-items:center;justify-content:center;gap:26px;padding:24px;background:transparent}.shorts-video{width:100%;height:min(78vh,760px);border:1px solid #ffffff18;border-radius:18px;background-position:center;background-size:cover;box-shadow:0 20px 48px #0009}.shorts-info{display:grid;gap:11px;padding:18px;border:1px solid #ffffff12;border-radius:16px;background:#0b1211;color:#fff}.shorts-info h1{margin:5px 0 0;font-size:26px;line-height:1.12}.shorts-info p{margin:0;color:#dbe8d8;line-height:1.5}.shorts-acoes{position:static;display:grid;gap:15px;align-self:center}.acao-video{min-width:72px}.shorts-gradiente,.shorts-conteudo{display:none}@media(max-width:720px){.shorts-feed{max-width:none;height:calc(100vh - 60px)}.short-item{min-height:calc(100vh - 60px);grid-template-columns:minmax(0,1fr) 66px;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:10px 10px 14px;align-items:stretch}.shorts-video{grid-column:1;grid-row:1;width:100%;height:100%;min-height:0;border-radius:13px}.shorts-acoes{grid-column:2;grid-row:1;align-self:end;gap:12px;padding-bottom:12px}.acao-video{min-width:54px}.acao-video>span,.acao-video>img{width:42px;height:42px}.shorts-info{grid-column:1/-1;grid-row:2;gap:7px;padding:11px 13px;border-radius:12px}.shorts-info h1{font-size:19px}.shorts-info p{font-size:12px}.shorts-autor{gap:7px}.shorts-avatar{width:34px;height:34px}.shorts-audio{font-size:10px}.seguir-autor{margin-left:auto}.shorts-header{min-height:60px}.shorts-header .marca-icono{width:39px;height:39px}} /* Vídeos curtos: experiência própria de GABA3, focada no criador e nas ações. */ .shorts-page{background:#050a10;color:#fff}.shorts-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;min-height:68px;padding:8px max(18px,calc((100vw - 1120px)/2));border-bottom:1px solid #ffffff12;background:#050a10f2;backdrop-filter:blur(14px)}.shorts-header .marca-icono{width:48px;height:48px}.shorts-header>b{font-size:18px}.shorts-voltar{margin-left:auto;color:#aaf58d;text-decoration:none;font-size:13px;font-weight:800}.shorts-feed{height:calc(100vh - 68px);max-width:780px;margin:auto;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth}.short-item{position:relative;isolation:isolate;box-sizing:border-box;min-height:100%;display:flex;align-items:flex-end;padding:32px 112px 32px 30px;overflow:hidden;background-position:center;background-size:cover;scroll-snap-align:start}.shorts-gradiente{position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#050a10f4 3%,#050a1040 63%,#050a100d)}.shorts-conteudo{display:grid;gap:9px;max-width:500px}.shorts-conteudo h1{margin:4px 0 0;font-size:clamp(23px,4vw,33px)}.shorts-conteudo>p{margin:0;color:#eef5eb;line-height:1.5}.shorts-autor{display:flex;align-items:center;gap:9px}.shorts-autor>div{display:grid;gap:2px}.shorts-autor b{font-size:14px}.shorts-autor small,.shorts-audio{color:#d1e0ce;font-size:12px}.shorts-avatar{display:grid;width:40px;height:40px;place-items:center;border:2px solid #a8ff8d;border-radius:50%;background:#6b3b24;color:#fff;font-size:11px;font-weight:950}.shorts-avatar.azul{background:#17699d}.shorts-avatar.rosa{background:#b24c75}.seguir-autor{margin-left:4px;padding:7px 11px;border:1px solid #7ae352;border-radius:999px;background:#102813;color:#dffff5;font-weight:850;cursor:pointer}.seguir-autor.seguindo{border-color:#ffffff45;background:#ffffff15;color:#fff}.shorts-audio{padding-top:2px}.shorts-acoes{position:absolute;right:23px;bottom:26px;display:grid;gap:15px}.acao-video{display:grid;justify-items:center;gap:5px;min-width:62px;border:0;background:transparent;color:#fff;cursor:pointer}.acao-video>span,.acao-video>img{display:grid;width:48px;height:48px;place-items:center;border:1px solid #ffffff26;border-radius:50%;background:#101820df;font-size:27px}.acao-video>img{box-sizing:border-box;padding:8px;object-fit:contain}.acao-video b{font-size:11px;white-space:nowrap}.acao-video.ativo>span,.acao-video.ativo>img{border-color:#86f466;background:#1e6d16;box-shadow:0 0 18px #63df4966}.comentarios-curtos{width:min(480px,calc(100vw - 24px));padding:0;border:1px solid #70d95688;border-radius:17px;background:#08110bf8;color:#fff;box-shadow:0 24px 70px #000b}.comentarios-curtos::backdrop{background:#000a}.comentarios-curtos form{display:grid;gap:13px;padding:17px}.comentarios-curtos header{display:flex;justify-content:space-between;align-items:start}.comentarios-curtos header small{color:#8df66b;font-size:10px;font-weight:900}.comentarios-curtos h2{margin:4px 0 0}.comentarios-curtos header button{border:0;background:transparent;color:#fff;font-size:26px}.lista-comentarios{display:grid;gap:8px;max-height:250px;overflow:auto}.lista-comentarios p{margin:0;padding:10px;border-radius:10px;background:#112013}.lista-comentarios b{display:block;margin-bottom:3px;color:#b7ff9e}.comentarios-curtos label{display:grid;gap:6px;color:#c6dbc4;font-size:12px}.comentarios-curtos input{min-height:42px;padding:0 10px;border:1px solid #ffffff22;border-radius:9px;background:#0d1a0e;color:#fff}.enviar-comentario{min-height:40px;border:0;border-radius:9px;background:#58cf0f;color:#071105;font-weight:900}@media(max-width:600px){.shorts-header{min-height:60px;padding:6px 12px}.shorts-header .marca-icono{width:39px;height:39px}.shorts-header>b{font-size:15px}.shorts-voltar{font-size:11px}.shorts-feed{height:calc(100vh - 60px)}.short-item{min-height:100%;padding:24px 82px 94px 20px}.shorts-conteudo h1{font-size:25px}.shorts-acoes{right:12px;bottom:92px;gap:13px}.acao-video>span,.acao-video>img{width:43px;height:43px;font-size:24px}.acao-video b{font-size:10px}.shorts-autor{align-items:center}.seguir-autor{padding:6px 9px}} /* La plataforma desaparece de la escena interna: la identidad pertenece al propietario. GABA3 sólo conserva controles personales no intrusivos. */ .pagina-sala .cabecera-sala .marca{display:none!important}.marca-propietario-publica{display:flex;align-items:center;gap:11px;min-width:0}.marca-negocio{width:44px;height:44px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:var(--cor-proprietario,#55c900);background-position:center;background-size:cover;color:#061006;font-size:13px;font-weight:950}.marca-negocio.com-imagem{color:transparent}.marca-propietario-publica div{min-width:0}.marca-propietario-publica small{display:block;color:var(--cor-proprietario,#8fff67);font-size:9px;font-weight:900;letter-spacing:.1em}.marca-propietario-publica h1{margin:3px 0 0;overflow:hidden;color:#fff;font-size:18px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:650px){.marca-negocio{width:38px;height:38px;border-radius:10px}.marca-propietario-publica h1{font-size:15px}} /* ── Bloque de identidad del negocio en cabecera ── */ /* ── Badge de ubicación — siempre visible, no ocultable ── */ /* Feed de portada: sin filas reservadas ni huecos; cada sección es un carrusel táctil. */ /* Catálogo visual: imagen primero; la única información inmediata es el precio/oferta, integrado en la propia tarjeta. */ .imagem-catalogo-produto,.imagem-oferta-produto,.imagem-produto-principal{width:100%;height:100%;display:block;object-fit:cover}.imagem-catalogo-produto{position:absolute;inset:0}.imagem-catalogo-produto.sem-imagem,.imagem-oferta-produto.sem-imagem,.imagem-produto-principal.sem-imagem{background:linear-gradient(135deg,#2e6531,#102013)}.oferta-cartao strong{position:absolute;right:6px;bottom:6px;padding:5px 7px;border-radius:7px;background:#07120be8;color:#c9ffb7;font-size:10px;font-weight:950;box-shadow:0 3px 10px #0008} .oferta-cartao strong::before{content:"OFERTA · ";font-size:8px;color:#fff} .produto-escolhido{position:relative;grid-template-columns:1fr!important;min-height:300px!important;padding:0!important;overflow:hidden;background:#102013!important}.produto-escolhido .produto-imagem-escolhida{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;background:#1b3720}.produto-escolhido>div{display:none}.produto-escolhido>strong{position:absolute;right:14px;bottom:14px;z-index:2;padding:9px 12px;border-radius:9px;background:#07120bec;color:#c9ffb7;font-size:16px}.produto-escolhido>strong::before{content:"OFERTA · ";font-size:9px;color:#fff}.oferta-cartao{position:relative;display:block;min-height:125px;overflow:hidden;padding:0;border-radius:10px;background:#1c3620}.oferta-cartao .imagem-oferta-produto{position:absolute;inset:0}.oferta-cartao strong{z-index:1}@media(max-width:760px){.produto-escolhido{min-height:235px!important}.oferta-cartao{min-height:105px}.oferta-cartao strong{font-size:9px} } .form-novo-produto{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(130px,1fr) 110px auto;gap:8px;align-items:end;width:100%;margin-top:10px;padding-top:12px;border-top:1px solid #ffffff18}.form-novo-produto label{display:grid;gap:5px;color:#b5d2b7;font-size:10px;font-weight:800}.form-novo-produto input{min-height:37px;box-sizing:border-box;padding:0 9px;border:1px solid #ffffff1e;border-radius:8px;background:#0c1710;color:#fff}.form-novo-produto input[type="file"]{padding:7px;font-size:10px}.form-novo-produto button{min-height:37px;white-space:nowrap}@media(max-width:650px){.form-novo-produto{grid-template-columns:1fr}.form-novo-produto button{width:100%}} /* Feed de portada: sin filas reservadas ni huecos; cada sección es un carrusel táctil. */ .portada-principal{margin-bottom:18px}.seccion{margin-top:24px}.seccion-cabecera{margin-bottom:10px}.rejilla-salas{align-items:stretch}.rejilla-salas .sala-card{min-width:0}.rejilla-shorts .sala-imagen{height:180px} @media (max-width:1100px){.rejilla-salas{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;grid-template-columns:none;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;touch-action:pan-x pan-y;padding:1px 2px 7px}.rejilla-salas::-webkit-scrollbar{display:none}.rejilla-salas .sala-card{flex:0 0 calc(50% - 8px);scroll-snap-align:start}.seccion{margin-top:22px}} @media (max-width:700px){.portada-principal{gap:12px;margin:2px 0 16px}.sala-destacada{min-height:360px}.crear-sala-lateral{min-height:auto;padding:22px}.destacada-contenido{left:20px;right:20px;bottom:22px}.destacada-contenido h1{font-size:29px}.destacada-contenido p{font-size:14px;line-height:1.45}.seccion{margin-top:18px}.seccion-cabecera h2{font-size:18px}.rejilla-salas{margin-inline:-2px}.rejilla-salas .sala-card{flex-basis:calc(100% - 30px)}.sala-imagen{height:190px}.rejilla-sectores{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;scrollbar-width:none}.rejilla-sectores .sector-con-imagen{flex:0 0 calc(86% - 8px);scroll-snap-align:start;min-height:130px}} /* Portada personal: los datos aparecen únicamente después de autenticar una sesión. */ .sala-destacada-principal{grid-column:1;grid-row:1} .cartao-minhas-salas,.sala-destacada-secundaria{grid-column:2;grid-row:1} .cartao-minhas-salas{display:grid;align-content:start;gap:14px;min-height:0!important;padding:22px;background:linear-gradient(145deg,#0d2511,#07110a);border:1px solid #63d93d55;box-shadow:0 18px 44px #0007} .cartao-minhas-salas[hidden],.sala-destacada-secundaria[hidden]{display:none!important} .minhas-salas-portada-cabecera{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #ffffff17} .minhas-salas-portada-cabecera span{color:#9eff74;font-size:12px;font-weight:900;letter-spacing:.1em} .minhas-salas-portada-cabecera button{border:0;background:transparent;color:#e9ffe4;font:700 12px/1 inherit;cursor:pointer}.minhas-salas-portada-cabecera button:hover,.minhas-salas-portada-cabecera button:focus-visible{color:#83ef61;outline:none} .lista-minhas-salas-portada{display:grid;gap:9px} .minha-sala-portada{display:grid;grid-template-columns:44px minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;padding:8px;border:1px solid #ffffff17;border-radius:12px;background:#08130ae8;color:#fff;text-align:left;cursor:pointer;transition:border-color .22s ease,background .22s ease,transform .22s ease}.minha-sala-portada:hover,.minha-sala-portada:focus-visible{outline:none;border-color:#7aff50aa;background:#153319;transform:translateY(-1px)} .minha-sala-portada-miniatura{width:44px;height:44px;display:grid;place-items:center;overflow:hidden;border-radius:10px;background:#1c4422;color:#b9ff9e;font-size:21px}.minha-sala-portada-miniatura img{width:100%;height:100%;object-fit:cover}.minha-sala-portada b,.minha-sala-portada small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.minha-sala-portada b{font-size:14px}.minha-sala-portada small{margin-top:3px;color:#b5cfb1;font-size:11px}.minha-sala-portada i{color:#99ff70;font-size:24px;font-style:normal}.minhas-salas-portada-vazia{margin:6px 0;color:#c3d6bf;font-size:14px;line-height:1.45} @media(max-width:820px){.sala-destacada-principal{grid-column:1;grid-row:auto;order:1}.cartao-minhas-salas{grid-column:1;grid-row:auto;order:0;min-height:0!important}.sala-destacada-secundaria{grid-column:1;grid-row:auto;order:2}.cartao-minhas-salas .lista-minhas-salas-portada{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.cartao-minhas-salas{gap:10px;padding:16px;border-radius:17px}.minhas-salas-portada-cabecera{padding-bottom:9px}.cartao-minhas-salas .lista-minhas-salas-portada{grid-template-columns:1fr;gap:7px}.minha-sala-portada{grid-template-columns:38px minmax(0,1fr) 14px;padding:7px}.minha-sala-portada-miniatura{width:38px;height:38px;font-size:18px}.minha-sala-portada b{font-size:13px}.minhas-salas-portada-vazia{font-size:13px}} .shorts-page{background:#050a10;color:#fff}.shorts-header{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:14px;padding:10px 18px;background:#050a10eF}.shorts-feed{height:calc(100vh - 78px);max-width:660px;margin:auto;overflow-y:auto;scroll-snap-type:y mandatory}.short-item{min-height:100%;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;box-sizing:border-box;background-size:cover;position:relative;isolation:isolate}.short-item:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#050a10ee,transparent 70%)}.short-item h1{margin:10px 0 4px}.short-item p{margin:0;color:#d9e6d5}.short-item span{font-weight:800;color:#aaff70}.short-item nav{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.short-item button{border:1px solid #ffffff42;border-radius:999px;background:#07120bd9;color:#fff;padding:9px 12px}.short-item button.ativo{background:#55c900;color:#061408} .buscador-principal{border-color:#55c90045;background:#101711e8} .buscador-principal:focus-within{border-color:var(--gaba3-verde);box-shadow:0 0 0 3px #55c90024,inset 0 1px 0 #ffffff08} .icono-busqueda{color:var(--gaba3-verde)} .buscador-principal button,.buscador-principal .boton-buscar{background:linear-gradient(135deg,var(--gaba3-verde-brillante),var(--gaba3-verde));color:#061408;border-color:transparent} .buscador-principal kbd{border:0;background:linear-gradient(135deg,var(--gaba3-verde-brillante),var(--gaba3-verde));color:#061408;box-shadow:0 6px 14px rgba(85,201,0,.18)} .boton-principal, .boton-ver-sala, .categoria-sala.activa, .plan-card.activo, .plan-card:hover, .pagina-sala .boton-invitar, .pagina-sala .tema-boton.activo, .semi-pedir-invitacion, .metricas-publicas button{ border-color:transparent!important; color:#061408!important; background:linear-gradient(135deg,var(--gaba3-verde-brillante),var(--gaba3-verde))!important; box-shadow:0 9px 22px rgba(85,201,0,.22)!important; transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,background .22s ease; } .boton-principal:hover, .boton-ver-sala:hover, .categoria-sala.activa:hover, .plan-card.activo:hover, .pagina-sala .boton-invitar:hover, .semi-pedir-invitacion:hover, .metricas-publicas button:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 28px rgba(85,201,0,.32)!important} .boton-principal:focus-visible,.boton-ver-sala:focus-visible,.buscador-principal:focus-within,button:focus-visible,a:focus-visible{outline:2px solid var(--gaba3-verde-brillante);outline-offset:3px} .categoria-sala:not(.activa),.menu-categorias button:not(.activa),.pestanas-taller button:not(.activa),.tema-boton:not(.activo),.boton-secundario{transition:background .25s ease,border-color .25s ease,color .25s ease} .categoria-sala:not(.activa):hover,.menu-categorias button:not(.activa):hover,.pestanas-taller button:not(.activa):hover,.tema-boton:not(.activo):hover,.boton-secundario:hover{border-color:#55c90070;color:#d9ffc1;background:#55c90016} /* ── Hover específico de categorías: madera clara con veta real ── */ .categoria-sala:not(.activa):hover{ background: linear-gradient(180deg, rgba(255,238,195,.13) 0%, rgba(240,215,162,.08) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/190px auto !important; border-color:rgba(190,140,60,.65) !important; color:#2a1506 !important; } /* Inicio — correção final de densidade, carrosséis e área segura. Estas regras ficam no fim para prevalecer sobre os ajustes responsivos legados, sem mudar a estrutura HTML existente. */ .barra-superior{ min-height:70px; gap:18px; padding-block:7px; } .cinta-crear-header{min-height:44px} .cinta-crear-header .boton-principal{min-height:38px;min-width:116px} .boton-lupa-header{width:38px;height:38px;font-size:28px} .cuenta-usuario{gap:14px} .boton-buzon{flex:none} .categorias-contenedor{ top:70px; padding-top:6px; padding-bottom:5px; } .categorias-salas{gap:10px;scroll-snap-type:x mandatory;scroll-padding-inline:12px} .categoria-sala{scroll-snap-align:start;max-width:none} .portada-principal{margin-top:4px;margin-bottom:12px} .seccion{margin-top:12px} .seccion-cabecera{margin-bottom:6px} .rejilla-salas{scroll-padding-inline:12px} .menu-movil button{box-shadow:0 5px 14px rgba(85,201,0,.20)!important} @media (max-width:820px){ body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))} main{padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))} .barra-superior{ min-height:0; grid-template-rows:44px 43px; gap:0 10px; padding:calc(5px + env(safe-area-inset-top,0px)) 12px 4px; } .marca-busqueda{align-self:center} img.marca-icono{width:58px;height:39px;clip-path:none!important} .cuenta-usuario{gap:7px} .boton-buzon{width:37px;height:33px} .boton-buzon .icono-buzon{font-size:16px} .boton-buzon small{font-size:7px} .perfil-miniatura{width:36px;height:36px} .cinta-crear-header{min-height:40px;border-radius:13px} .cinta-crear-header .boton-lupa-header{height:38px;padding-inline:8px;gap:7px} .cinta-crear-header .boton-lupa-header>span{font-size:26px} .cinta-crear-header .boton-lupa-header b{font-size:13px} .cinta-crear-header .boton-principal{min-width:102px;min-height:34px;padding-inline:8px;font-size:10px} .categorias-contenedor{ top:calc(96px + env(safe-area-inset-top,0px)); margin-inline:-16px; padding:4px 16px 5px; } .categorias-salas{gap:8px;padding-right:20vw} .categoria-sala{min-height:39px;padding-inline:15px;font-size:13px} .portada-principal{gap:10px;margin:3px 0 12px} .sala-destacada{min-height:310px} .sala-destacada-secundaria{min-height:245px} .destacada-contenido{bottom:19px} .destacada-contenido h1{font-size:27px} .destacada-contenido p{font-size:13px} .seccion{margin-top:16px} .menu-movil{height:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0)} .menu-movil button{width:39px;height:39px;margin-top:-13px;border-width:2px;border-radius:13px;font-size:23px;box-shadow:0 4px 12px rgba(85,201,0,.18)!important} .menu-movil .menu-movil-volantin{width:20px;height:20px} } @media (max-width:700px){ .rejilla-salas{ gap:12px; margin-inline:0; padding:1px 5.5vw 8px; scroll-padding-inline:5.5vw; } .rejilla-salas .sala-card{flex:0 0 calc(89vw - 22px);scroll-snap-align:center} .sala-imagen{height:178px} .sala-contenido{min-height:112px} } /* ── Feed home: ordem vertical; cartões iguais; carrossel por seção no móvel ── */ .lobby-box-link{ border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:0; } .lobby-box-link:hover, .lobby-box-link:focus-visible{ color:#9eff74; outline:none; } #salas-destacadas .portada-principal{margin-bottom:12px} .painel-criar-sala-rapido{ display:grid; gap:6px; padding:12px 14px 4px; } .painel-criar-sala-rapido .boton-principal{ width:100%; min-height:44px; } .painel-criar-sala-rapido small{ color:#9ab89a; font-size:11px; line-height:1.35; } /* Cartões da home: mesma altura */ .rejilla-salas .sala-card{ display:flex; flex-direction:column; height:100%; min-height:290px; box-sizing:border-box; } .rejilla-salas .sala-imagen{ flex:none; height:178px; } .rejilla-salas .sala-contenido{ flex:1 1 auto; min-height:112px; display:flex; align-items:flex-start; } @media (max-width:820px){ #salas-destacadas .portada-principal{ display:grid!important; grid-template-columns:1fr!important; gap:12px; } #salas-destacadas .sala-destacada, #salas-destacadas .sala-destacada-secundaria{ min-height:280px!important; } .sala-destacada, .sala-destacada-secundaria{ min-height:280px!important; } } /* Portada móvil: todas las tarjetas de salas usan el mismo tamaño visual. Las tarjetas de "Explore por categorias" quedan deliberadamente más compactas porque representan categorías, no salas. */ @media (max-width:820px){ body:not(.pagina-sala) .portada-principal .sala-destacada, body:not(.pagina-sala) .rejilla-salas .sala-card{ min-height:290px!important; height:290px; box-sizing:border-box; } } /* Portada móvil: las salas se leen como una lista vertical limpia. Nunca se asoma el inicio de otra tarjeta a los lados, porque parece un corte o un desborde. "Explorar por categorías" conserva su propio carrusel compacto. */ @media (max-width:700px){ body:not(.pagina-sala) .rejilla-salas:not(.rejilla-sectores){ display:grid!important; grid-template-columns:minmax(0,1fr)!important; grid-auto-flow:row!important; gap:12px!important; width:100%!important; margin:0!important; padding:0!important; overflow:visible!important; } body:not(.pagina-sala) .rejilla-salas:not(.rejilla-sectores) .sala-card{ width:100%!important; min-width:0!important; height:290px!important; min-height:290px!important; flex:none!important; scroll-snap-align:none!important; } body:not(.pagina-sala) .portada-principal{ overflow:hidden!important; } } @media (max-width:390px){ .barra-superior{grid-template-rows:41px 41px;padding-inline:9px} img.marca-icono{width:52px;height:35px;clip-path:none!important} .cuenta-usuario{gap:4px} .boton-buzon{width:34px;height:31px} .perfil-miniatura{width:33px;height:33px} .cinta-crear-header .boton-principal{min-width:94px;font-size:9px} .cinta-crear-header .boton-lupa-header b{font-size:12px} .categorias-contenedor{top:calc(88px + env(safe-area-inset-top,0px));padding-inline:9px} .categoria-sala{padding-inline:14px} .sala-destacada{min-height:290px} .destacada-contenido h1{font-size:25px} } .estado-activo,.indicador-activo,.en-vivo,.insignia-vivo,.badge-destacado{background-color:var(--gaba3-verde)!important;color:#061408!important;border-color:transparent!important} .texto-verde, .metricas-publicas b, .sala-acesso-seguro > span{color:var(--gaba3-verde-brillante)!important} .panel-destacado,.crear-sala-panel,.tarjeta-crear-sala{background:linear-gradient(145deg,#0c1a0c,#07120a)!important;border-color:#55c90038!important} .panel-destacado h1,.crear-sala-panel h1,.tarjeta-crear-sala h1{color:#fff} .ver-todas,.enlace-ver-todas{color:var(--gaba3-verde-brillante)!important} .pagina-sala{background-color:#050a10} .pagina-sala .semi-me-gusta{border-color:#55c9004d;background:#102313;color:#eaffdc} .pagina-sala .semi-me-gusta:hover,.pagina-sala .semi-me-gusta.activo{background:#1f5421;border-color:var(--gaba3-verde)} .pagina-sala .semi-me-gusta b{color:#a7f06d} .sala-acesso-seguro{border-color:#55c90052;background:linear-gradient(145deg,#0b1b0c,#07100a)} button:disabled,.boton-principal:disabled{color:#8c938c!important;background:#303631!important;border-color:#454b45!important;box-shadow:none!important;cursor:not-allowed;transform:none!important;filter:none!important} /* Pedido do dono: nada de madeira no cabeçalho nem na franja de categorias (nem nos botões de categoria) — só pedra, igual ao resto da página. A única madeira que sobra é o buscador (clara), de propósito. A pedra vive SÓ no body, uma vez só, fixa na tela. O cabeçalho e a franja de categorias ficam com background:none — são só "vidro" na frente, deixando a mesma pedra do body aparecer por trás. Tentativas anteriores (cada faixa com sua própria imagem, mesmo sincronizadas) sempre podiam mostrar um recorte levemente diferente uma da outra dependendo da altura de cada faixa — com uma imagem só, por trás de tudo, não tem como sobrar costura nem mancha diferente em lugar nenhum. Vale pra web e mobile igual, por isso sem media query. */ body:not(.pagina-sala){ background:url("assets/brand/fondo-piedra-gaba3.png?v=1") top center/cover no-repeat fixed!important; } /* #inicio tinha seu próprio recorte da pedra (mosaico repetido) — some pra deixar só a pedra única do body aparecer, sem costura nenhuma no encontro com o cabeçalho/categorias logo acima dele. */ body:not(.pagina-sala) #inicio{ background:none!important; } /* Cabeçalho e franja de categorias usam a MESMA pedra do body (idêntica imagem/posição/tamanho) em vez de background:none, pra ficarem opacas de verdade — o conteúdo que sobe ao rolar a página (destaque, cards) desaparece atrás delas em vez de "vazar" por cima do cabeçalho. Bug real encontrado no celular (relatado pelo dono, "um buraco" aparecendo entre o cabeçalho e a franja de categorias ao rolar): as duas usavam attachment:fixed igual ao body, pra o recorte bater pixel a pixel — mas background-attachment:fixed em elementos position:sticky (não o body) é conhecido por falhar/piscar no Safari iOS e em vários Chrome Android, deixando a camada transparente durante o scroll. Trocado pra attachment padrão (scroll, relativo à própria caixa) — sempre pinta de verdade em qualquer navegador; a costura entre as duas franjas fica imperceptível porque é a mesma pedra, mesmo recorte "top center", só que fatiada por elemento em vez de por uma janela fixa única. */ body:not(.pagina-sala) .barra-superior{ background:url("assets/brand/fondo-piedra-gaba3.png?v=1") top center/cover no-repeat!important; border-bottom:0!important; box-shadow:0 8px 18px rgba(0,0,0,.28); } body:not(.pagina-sala) .categorias-contenedor{ background:url("assets/brand/fondo-piedra-gaba3.png?v=1") top center/cover no-repeat!important; border-top:1px solid rgba(255,255,255,.08)!important; /* A linha escura embaixo (relatada pelo dono: "uma pequena linha" onde os cartões passam por baixo ao rolar) foi tirada — a sombra já dá a mesma sensação de profundidade sem deixar um traço reto e duro. */ border-bottom:0!important; box-shadow:0 6px 13px rgba(0,0,0,.20); } /* ========================================================= GABA3 — Versão escura da portada (alternativa opcional à pedra, ligada pelo botão "Aparência" no perfil). Só troca a base fotográfica (pedra) por um fundo sólido escuro — os cartões, painéis e textos já são escuros/claros o bastante por conta própria e não precisam de ajuste. ========================================================= */ body.gaba3-modo-escuro:not(.pagina-sala){ background:#000000!important; } body.gaba3-modo-escuro:not(.pagina-sala) .barra-superior{ background:#000000!important; border-bottom:0!important; } body.gaba3-modo-escuro:not(.pagina-sala) .categorias-contenedor{ background:#000000!important; border-top:1px solid rgba(255,255,255,.06)!important; border-bottom:1px solid rgba(255,255,255,.06)!important; } body.gaba3-modo-escuro:not(.pagina-sala) .gaba3-rail{ border-left-color:rgba(255,255,255,.08); } body.gaba3-modo-escuro:not(.pagina-sala) .gaba3-destaque-hero-fundo{ filter:saturate(.9) brightness(.92); } body.gaba3-modo-escuro:not(.pagina-sala) .gaba3-painel, body.gaba3-modo-escuro:not(.pagina-sala) .gaba3-rodape-docs-placa, body.gaba3-modo-escuro:not(.pagina-sala) .gaba3-rodape-frase-placa, body.gaba3-modo-escuro:not(.pagina-sala) .placa-tornillo-caixa{ border-color:rgba(255,255,255,.08); } /* Eliminar marco interno (::before) que generaba doble línea */ body:not(.pagina-sala) .barra-superior .marca::before, body:not(.pagina-sala) .barra-superior .marca::after{ content:none!important; display:none!important; border:0!important; box-shadow:none!important; } body:not(.pagina-sala) .barra-superior .marca .brand-content{ position:relative; z-index:2; display:flex; align-items:center; gap:0; min-width:0; padding:2px clamp(8px, 1vw, 14px); box-sizing:border-box; } /* Vídeos curtos — composición final limpia: video sin textos ni botones encima. */ .shorts-page .shorts-feed{height:calc(100vh - 68px)!important;max-width:1180px!important;margin:auto!important;overflow-y:auto!important;scroll-snap-type:y mandatory!important} .shorts-page .short-item{position:relative!important;display:grid!important;grid-template-columns:minmax(220px,290px) minmax(320px,520px) 94px!important;align-items:center!important;justify-content:center!important;gap:26px!important;min-height:calc(100vh - 68px)!important;padding:24px!important;box-sizing:border-box!important;overflow:visible!important;background:transparent!important;scroll-snap-align:start!important} .shorts-page .short-item::before{content:none!important}.shorts-page .shorts-video{grid-column:2!important;display:block!important;width:100%!important;height:min(78vh,760px)!important;border:1px solid #ffffff18!important;border-radius:18px!important;background-position:center!important;background-size:cover!important;box-shadow:0 20px 48px #0009!important} .shorts-page .shorts-info{grid-column:1!important;display:grid!important;gap:11px!important;padding:18px!important;border:1px solid #ffffff12!important;border-radius:16px!important;background:#0b1211!important;color:#fff!important}.shorts-page .shorts-info h1{margin:5px 0 0!important;font-size:26px!important;line-height:1.12!important}.shorts-page .shorts-info p{margin:0!important;color:#dbe8d8!important;line-height:1.5!important} .shorts-page .shorts-acoes{position:static!important;grid-column:3!important;display:grid!important;gap:15px!important;align-self:center!important;margin:0!important;padding:0!important}.shorts-page .acao-video{display:grid!important;justify-items:center!important;gap:5px!important;min-width:72px!important;border:0!important;background:transparent!important;color:#fff!important;cursor:pointer!important}.shorts-page .acao-video>span,.shorts-page .acao-video>img{display:grid!important;width:48px!important;height:48px!important;place-items:center!important;border:1px solid #ffffff26!important;border-radius:50%!important;background:#101820df!important;font-size:27px!important}.shorts-page .acao-video>img{box-sizing:border-box!important;padding:8px!important;object-fit:contain!important}.shorts-page .acao-video b{font-size:11px!important;white-space:nowrap!important}.shorts-page .shorts-conteudo,.shorts-page .shorts-gradiente{display:none!important} .shorts-page .acao-video small{color:#c8d7c6;font-size:9px;font-weight:800;white-space:nowrap} @media(max-width:720px){.shorts-page .shorts-feed{height:calc(100vh - 60px)!important;max-width:none!important}.shorts-page .short-item{grid-template-columns:minmax(0,1fr) 66px!important;grid-template-rows:minmax(0,1fr) auto!important;gap:10px!important;min-height:calc(100vh - 60px)!important;padding:10px 10px 14px!important;align-items:stretch!important}.shorts-page .shorts-video{grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;min-height:0!important;border-radius:13px!important}.shorts-page .shorts-acoes{grid-column:2!important;grid-row:1!important;align-self:end!important;gap:12px!important;padding-bottom:12px!important}.shorts-page .acao-video{min-width:54px!important}.shorts-page .acao-video>span,.shorts-page .acao-video>img{width:42px!important;height:42px!important}.shorts-page .shorts-info{grid-column:1 / -1!important;grid-row:2!important;gap:7px!important;padding:11px 13px!important;border-radius:12px!important}.shorts-page .shorts-info h1{font-size:19px!important}.shorts-page .shorts-info p{font-size:12px!important}.shorts-page .shorts-avatar{width:34px!important;height:34px!important}.shorts-page .seguir-autor{margin-left:auto!important}} /* Vídeos curtos: sem cabeçalho e sem ações duplicadas. */ .shorts-page .shorts-header{display:none!important}.shorts-page .shorts-feed{height:100dvh!important;padding:0!important}.shorts-page .short-item{min-height:100dvh!important}.shorts-page .compartilhar-video>b,.shorts-page .salvar-video>b{display:none!important}.shorts-page .compartilhar-video small,.shorts-page .salvar-video small{font-size:11px!important;color:#fff!important}.shorts-page .shorts-video{background-color:#101820!important} @media(max-width:720px){.shorts-page .shorts-feed{height:100dvh!important;padding-bottom:env(safe-area-inset-bottom,0)!important}.shorts-page .short-item{min-height:100dvh!important;padding-top:calc(8px + env(safe-area-inset-top,0))!important;padding-bottom:calc(14px + env(safe-area-inset-bottom,0))!important}.shorts-page .shorts-acoes{padding-bottom:10px!important}.shorts-page .acao-video b{font-size:10px!important}.shorts-page .acao-video small{font-size:9px!important}} /* Agenda privada de la sala: panel compacto, sin alterar la cuadrícula. */ .agenda-sala{margin-top:16px;padding:18px;border:1px solid #55c90035;border-radius:18px;background:#0a140d}.agenda-sala header small{color:var(--gaba3-verde-brillante);font-weight:850;letter-spacing:.08em}.agenda-sala h3{margin:4px 0 12px}.agenda-lista{display:grid;gap:9px;color:#b8c7ba}.agenda-evento{padding:12px;border:1px solid #ffffff12;border-radius:12px;background:#0d1b11}.agenda-evento strong,.agenda-evento time{display:block}.agenda-evento time{margin-top:4px;color:#a7f06d;font-size:12px}.agenda-evento p{margin:7px 0;color:#c5d1c7;font-size:13px}.agenda-acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.agenda-acoes button,.agenda-form button{border:0;border-radius:9px;padding:8px 11px;background:var(--gaba3-verde);color:#061408;font-weight:800;cursor:pointer}.agenda-acoes .agenda-cancelar{background:#3a2727;color:#ffd2d2}.agenda-lembranca{background:#153a23!important;color:#d9ffe5!important}.agenda-celebracao{padding:6px 9px;border:1px solid #5fcf7352;border-radius:999px;color:#b6ffc5;font-size:12px;font-weight:750}.agenda-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(150px,1fr) minmax(160px,1fr) auto;gap:8px;margin-top:14px}.agenda-form input,.agenda-form select{min-width:0;padding:9px 10px;border:1px solid #55c9003c;border-radius:9px;background:#071009;color:#fff}.agenda-form label{display:flex;align-items:center;gap:6px;color:#b8c7ba;font-size:12px}@media(max-width:720px){.agenda-form{grid-template-columns:1fr}.agenda-form button{width:100%}} /* O chat recebe mais presença; as vitrines seguem lado a lado. */ @keyframes titulo-vitrine-brilho{50%{color:#d9ffca;text-shadow:0 0 14px #55c9009c}}@keyframes titulo-vitrine-deslizar{50%{transform:translateX(9px);color:#d9ffca;text-shadow:0 0 12px #55c90072}} /* Perfil do proprietário: painel leve, preso ao lado direito, sem modal. */ @keyframes painel-perfil-entra{from{opacity:0;transform:translateY(-9px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} /* O título é do dono: pode ser colocado em qualquer canto da própria tela. */ /* A sala comercial começa e termina nas três áreas: catálogo, ofertas e chat. */ /* Letrero de cada vitrina: amplio y legible incluso con títulos largos. */ /* Los controles personales nunca cambian de lado cuando la marca está vacía. */ /* Centro de configuração: uma categoria por vez, sem formulário enorme. */ /* Gestão separada: cada imagem pertence a uma única tela e pode ser removida pela sua numeração, sem alterar a outra vitrine. */ /* A Tela 2 é sempre um único carrossel horizontal: entra pela direita e avança para a esquerda; as ofertas nunca quebram para uma segunda linha. */ /* Sala privada: uma única tela principal e um chat independente. No telefone, a tela vem antes do chat. */ .pagina-sala .privada-aplicacion.layout-una-pantalla{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,330px);align-items:stretch;gap:16px;max-width:1480px;padding:18px 22px 42px}.pagina-sala .privada-aplicacion .zona-principal-sala{gap:12px}.pagina-sala .semi-chat-sala{display:grid;grid-template-rows:auto minmax(190px,1fr) auto;min-height:0;overflow:hidden;border:1px solid #69d3ff42;border-radius:15px;background:linear-gradient(145deg,#101b2d,#08101c);box-shadow:0 14px 30px #0005}.pagina-sala .semi-chat-sala>header{display:flex;align-items:center;min-height:48px;padding:0 14px;border-bottom:1px solid #ffffff12}.pagina-sala .semi-chat-sala>header>div{display:flex;align-items:center;gap:8px}.pagina-sala .semi-chat-sala .chat-punto{width:9px;height:9px;border-radius:50%;background:#55c900;box-shadow:0 0 0 4px #55c90020}.pagina-sala .semi-chat-sala header strong,.pagina-sala .semi-chat-sala header small{display:block}.pagina-sala .semi-chat-sala header strong{color:#eaffdf;font-size:13px}.pagina-sala .semi-chat-sala header small{margin-top:2px;color:#9eb89a;font-size:10px}.pagina-sala .semi-lista-mensagens{display:grid;align-content:end;gap:10px;min-height:0;padding:12px;overflow:auto}.pagina-sala .semi-lista-mensagens article{display:grid;grid-template-columns:29px minmax(0,1fr);gap:8px}.pagina-sala .semi-lista-mensagens .avatar-chat{width:29px;height:29px;font-size:9px}.pagina-sala .semi-lista-mensagens b{font-size:11px;color:#fff}.pagina-sala .semi-lista-mensagens p{margin:2px 0;color:#dbe7d7;font-size:11px;line-height:1.35}.pagina-sala .semi-lista-mensagens small{color:#8fa88c;font-size:9px}.pagina-sala .semi-chat-sala>footer{padding:10px;border-top:1px solid #ffffff12}.pagina-sala .semi-chat-sala>footer p{margin:0 0 8px;color:#a5b7a2;font-size:10px}.pagina-sala .semi-chat-sala>footer .semi-pedir-invitacion{width:100%} /* Painel do Agente de Convites */ .privada-painel-convites[hidden]{display:none!important} .privada-painel-convites{ position:fixed;top:70px;right:14px;z-index:80;width:min(380px,calc(100vw - 20px)); max-height:min(78vh,640px);overflow:auto;padding:14px 14px 18px; border:1px solid rgba(85,201,0,.45);border-radius:16px; background:linear-gradient(160deg,#0d1710f7,#08100af5);color:#eaffe9; box-shadow:0 22px 60px #000b;backdrop-filter:blur(14px); } .privada-painel-convites>header{ display:flex;align-items:flex-start;justify-content:space-between;gap:10px; padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #ffffff18; } .privada-painel-convites>header small{display:block;color:#8fff67;font-size:10px;font-weight:900;letter-spacing:.08em} .privada-painel-convites>header strong{display:block;margin-top:3px;font-size:16px} .privada-painel-convites>header button{ width:32px;height:32px;border:1px solid #ffffff25;border-radius:50%; background:#152017;color:#fff;font-size:20px;cursor:pointer;line-height:1; } .inv-panel-host{display:grid;gap:12px} .inv-panel-header{display:flex;align-items:baseline;justify-content:space-between;gap:8px} .inv-panel-header strong{font-size:14px} .inv-panel-header small{color:#9eb89a;font-size:11px} .inv-help{margin:0 0 8px;color:#b7cbb4;font-size:11px;line-height:1.4} .inv-panel-section{display:grid;gap:8px} .inv-create-row{display:grid;gap:8px} .inv-create-row input,.inv-create-row select,.inv-create-row textarea{ width:100%;min-height:40px;box-sizing:border-box;padding:8px 10px; border:1px solid #ffffff24;border-radius:9px;background:#111b13;color:#fff;font-size:13px;font:inherit; } .inv-create-row textarea{min-height:72px;resize:vertical} .inv-field-label{display:grid;gap:5px;font-size:11px;color:#9eb89a;font-weight:700} .inv-voice-box{display:grid;gap:6px;padding:8px;border:1px solid rgba(85,201,0,.2);border-radius:10px;background:rgba(0,0,0,.2)} .inv-voice-row{display:flex;flex-wrap:wrap;gap:6px} .inv-btn-voice{ min-height:34px;padding:0 12px;border:1px solid rgba(85,201,0,.35);border-radius:8px; background:rgba(20,40,14,.9);color:#dfffb0;font-size:12px;font-weight:800;cursor:pointer; } .inv-voice-status{color:#9eb89a;font-size:11px} .inv-voice-share{display:grid;gap:8px;padding:8px;border-radius:10px;background:rgba(85,201,0,.08)} .inv-voice-share p{margin:0;color:#cfe4ca;font-size:12px;line-height:1.35} .inv-voice-share button{ min-height:36px;border:0;border-radius:8px;background:#55c900;color:#061000;font-weight:800;cursor:pointer; } .inv-card-msg{margin:0;color:#d8e8d4;font-size:11px;line-height:1.35;font-style:italic} .inv-btn-primary{ min-height:40px;border:0;border-radius:9px;background:#55c900;color:#061000; font-weight:900;cursor:pointer; } .privada-guest-banner{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px; margin:0 12px 8px;padding:10px 12px;border-radius:12px; border:1px solid rgba(85,201,0,.35);background:rgba(20,40,14,.92);color:#e8f5e0; } .privada-guest-banner[hidden]{display:none!important} .privada-guest-banner strong{display:block;font-size:13px} .privada-guest-banner p{margin:4px 0 6px;font-size:12px;line-height:1.35;color:#cfe4ca} .privada-guest-banner audio{width:min(100%,280px);margin-top:4px} .inv-empty{margin:0;color:#9eb89a;font-size:12px} .inv-card{ display:grid;gap:8px;padding:10px;border:1px solid #ffffff18;border-radius:12px;background:#101a12; } .inv-card--inactive{opacity:.55} .inv-card-top{display:flex;justify-content:space-between;gap:8px;align-items:center} .inv-code{font-weight:800;letter-spacing:.02em;color:#dfffb0} .inv-card-meta{display:flex;gap:10px;color:#9eb89a;font-size:11px} .inv-share-quick,.inv-card-actions{display:grid;gap:8px} .inv-share-code{display:flex;align-items:center;justify-content:space-between;gap:8px} .inv-share-code small{color:#9eb89a;font-size:10px;font-weight:800} .inv-share-code code{color:#9af860;font-weight:800} .inv-social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .inv-social-grid button{ min-height:36px;border:1px solid rgba(85,201,0,.28);border-radius:9px; background:rgba(85,201,0,.08);color:#d8f5c8;font-size:11px;font-weight:800;cursor:pointer; } .inv-social-grid button:hover{background:rgba(85,201,0,.18);border-color:rgba(85,201,0,.5)} .inv-social-grid .inv-btn-revoke{border-color:#894b4b;background:#301818;color:#ffdede} .inv-toast{ position:sticky;bottom:0;margin-top:8px;padding:8px 10px;border-radius:8px; background:#55c900;color:#061000;font-size:12px;font-weight:800;text-align:center; } @media(max-width:1120px){.pagina-sala .privada-aplicacion.layout-una-pantalla{grid-template-columns:1fr;padding:14px 16px 28px}.pagina-sala .privada-aplicacion .semi-chat-sala{min-height:265px}} @media(max-width:620px){ .pagina-sala .privada-aplicacion.layout-una-pantalla{padding:12px 10px 24px;gap:11px} .pagina-sala .privada-aplicacion .semi-chat-sala{min-height:240px} .pagina-sala .privada-aplicacion .semi-escenario{min-height:340px} .privada-painel-convites{top:58px;right:8px;width:calc(100vw - 16px)} } /* Retry de conexão — mensagem simples para o usuário */ .gaba3-conn-retry{display:grid;gap:10px;padding:12px;text-align:center} .gaba3-conn-retry p{margin:0;color:#cfe4ca;font-size:13px} .gaba3-conn-retry button{justify-self:center;min-width:160px;min-height:40px} /* Chat privada — ferramentas (emoji / voz / imagem) + composer */ .pagina-sala .semi-chat-sala>footer.semi-chat-footer-convidado{ display:grid;gap:8px;padding:10px;padding-bottom:calc(10px + var(--semi-keyboard-inset,0px)); border-top:1px solid #ffffff12;box-sizing:border-box; } .pagina-sala .chat-composer-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .pagina-sala .chat-composer-tools[hidden]{display:none!important} .pagina-sala .chat-tool-btn{ display:inline-grid;place-items:center;min-width:36px;min-height:36px;padding:0 8px; border:1px solid #ffffff22;border-radius:10px;background:#152033;color:#eaffdf; font-size:16px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none; } .pagina-sala .chat-tool-btn:hover,.pagina-sala .chat-tool-btn:focus-visible{border-color:#69d3ff88;background:#1c2c48;outline:none} .pagina-sala .chat-tool-btn.gravando, .pagina-sala .privada-icon-btn.gravando{ border-color:#ff6b6b!important;background:#3a1818!important;color:#ffdede!important; box-shadow:0 0 0 2px rgba(255,107,107,.35); animation:chatVozPulse 1s ease infinite; } @keyframes chatVozPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} } .pagina-sala .chat-tool-imagem{cursor:pointer} .pagina-sala .chat-tool-imagem[hidden]{display:none!important} .pagina-sala .chat-emoji-panel{ display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px; padding:6px;border:1px solid #ffffff14;border-radius:10px;background:#0c1422; } .pagina-sala .chat-emoji-panel[hidden]{display:none!important} .pagina-sala .chat-emoji-panel button{ min-height:34px;border:0;border-radius:8px;background:transparent;font-size:18px;cursor:pointer; } .pagina-sala .chat-emoji-panel button:hover{background:#ffffff12} .pagina-sala .chat-voz-status{ margin:0;padding:8px 10px;border-radius:10px; background:rgba(20,48,14,.95);border:1px solid rgba(85,201,0,.4); color:#e8ffe0;font-size:12px;font-weight:800;line-height:1.3; } .pagina-sala .chat-voz-status[hidden]{display:none!important} .pagina-sala .privada-digitando-status{ margin:0;padding:2px 10px;color:rgba(210,185,150,.85); font-size:12px;font-style:italic;line-height:1.3; } .pagina-sala .privada-digitando-status[hidden]{display:none!important} /* Composer WhatsApp: 1 slot — microfone OU enviar */ .pagina-sala .form-chat-privada, .pagina-sala .form-chat-semi.form-chat-wa{ display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px;align-items:center; } .pagina-sala .boton-voz-msg{ width:48px;min-width:48px;height:46px;border-radius:50%;border:0; background:linear-gradient(145deg,#55c900,#2f8a00); color:#061000;display:grid;place-items:center;padding:0;cursor:pointer; font:inherit;line-height:1;box-sizing:border-box; box-shadow:0 4px 14px rgba(85,201,0,.35); } .pagina-sala .boton-voz-msg svg{display:block} .pagina-sala .boton-voz-msg .privada-voz-tag{display:none} .pagina-sala .form-chat-privada .boton-enviar-chat, .pagina-sala .form-chat-semi.form-chat-wa .boton-enviar-chat{ width:48px;min-width:48px;height:46px;border-radius:50%; } .pagina-sala .form-chat-privada.has-text .boton-voz-msg, .pagina-sala .form-chat-semi.form-chat-wa.has-text .boton-voz-msg{display:none!important} .pagina-sala .form-chat-privada:not(.has-text) .boton-enviar-chat, .pagina-sala .form-chat-semi.form-chat-wa:not(.has-text) .boton-enviar-chat{display:none!important} .pagina-sala .form-chat-privada.is-recording .boton-voz-msg, .pagina-sala .form-chat-semi.form-chat-wa.is-recording .boton-voz-msg{display:grid!important} .pagina-sala .form-chat-privada.is-recording .boton-enviar-chat, .pagina-sala .form-chat-semi.form-chat-wa.is-recording .boton-enviar-chat{display:none!important} .pagina-sala .form-chat-privada.is-recording, .pagina-sala .form-chat-semi.form-chat-wa.is-recording{grid-template-columns:minmax(0,1fr) 48px} /* Controles ao vivo: câmera fica no composer (junto dos convites). Mic do palco removido. */ .pagina-sala .sala-live-controls, .pagina-sala #btn-ativar-microfone{display:none!important} .pagina-sala .privada-cam-btn, .pagina-sala #btn-ativar-camara.privada-icon-btn{ border-color:rgba(255,255,255,.18); background:rgba(10,16,12,.8); color:#9aab90; } .pagina-sala .privada-cam-btn.activo, .pagina-sala .privada-cam-btn[aria-pressed="true"], .pagina-sala #btn-ativar-camara.activo, .pagina-sala #btn-ativar-camara[aria-pressed="true"], .pagina-sala .semi-btn-camara.activo, .pagina-sala .semi-btn-camara[aria-pressed="true"]{ border-color:#55c900!important; background:linear-gradient(160deg,#2f7a12,#1a4a0c)!important; color:#e8ffb0!important; box-shadow:0 0 0 2px rgba(85,201,0,.35)!important; } .pagina-sala .boton-voz-msg.gravando{ border:0;background:linear-gradient(145deg,#ff5a5a,#c0392b);color:#fff; animation:chatVozPulse 1s ease infinite; box-shadow:0 4px 16px rgba(255,90,90,.4); } .pagina-sala .chat-voz-player{display:block;width:100%;max-width:220px;height:32px;margin-top:4px} /* Bolha de voz estilo WhatsApp */ .pagina-sala .chat-voz-bubble{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px 10px; align-items:center; width:min(100%,260px); margin-top:4px; padding:8px 10px; border-radius:16px 16px 16px 6px; background:linear-gradient(160deg,rgba(28,56,24,.96),rgba(12,22,12,.98)); border:1px solid rgba(85,201,0,.35); box-sizing:border-box; } .pagina-sala article.msg-voz.is-self .chat-voz-bubble{ border-radius:16px 16px 6px 16px; background:linear-gradient(160deg,rgba(36,72,22,.98),rgba(16,36,14,.98)); border-color:rgba(140,255,90,.42); } .pagina-sala .chat-voz-play{ width:40px;height:40px;border-radius:50%;border:0;cursor:pointer; display:grid;place-items:center; background:linear-gradient(145deg,#55c900,#2f8a00); color:#061000;font-size:14px;font-weight:900;line-height:1; } .pagina-sala .chat-voz-play:disabled{opacity:.55;cursor:default} .pagina-sala .chat-voz-bubble.is-playing .chat-voz-play{background:linear-gradient(145deg,#ff7a59,#c0392b);color:#fff} .pagina-sala .chat-voz-meta{display:grid;gap:4px;min-width:0} .pagina-sala .chat-voz-wave{ display:flex;align-items:flex-end;gap:2px;height:18px; } .pagina-sala .chat-voz-wave i{ display:block;width:3px;border-radius:2px;background:#8fff67;opacity:.75; height:35%; } .pagina-sala .chat-voz-wave i:nth-child(2){height:60%} .pagina-sala .chat-voz-wave i:nth-child(3){height:90%} .pagina-sala .chat-voz-wave i:nth-child(4){height:50%} .pagina-sala .chat-voz-wave i:nth-child(5){height:75%} .pagina-sala .chat-voz-wave i:nth-child(6){height:40%} .pagina-sala .chat-voz-wave i:nth-child(7){height:85%} .pagina-sala .chat-voz-wave i:nth-child(8){height:55%} .pagina-sala .chat-voz-bubble.is-playing .chat-voz-wave i{ animation:chatVozBar .8s ease-in-out infinite alternate; } .pagina-sala .chat-voz-bubble.is-playing .chat-voz-wave i:nth-child(odd){animation-delay:.1s} .pagina-sala .chat-voz-bubble.is-playing .chat-voz-wave i:nth-child(even){animation-delay:.25s} @keyframes chatVozBar{ from{transform:scaleY(.55)} to{transform:scaleY(1)} } .pagina-sala .chat-voz-dur{font-size:11px;font-weight:800;color:#c8efb0} .pagina-sala .chat-voz-transcript{ grid-column:1 / -1;margin:2px 0 0;padding-top:6px; border-top:1px solid rgba(85,201,0,.18); color:#e8ffe0;font-size:12px;line-height:1.35;font-weight:600; } .pagina-sala .chat-voz-bubble audio{display:none} /* Letras do áudio na tela principal (por cima de tudo no palco) */ .gaba3-voice-caption{ position:fixed;z-index:10050; padding:14px 16px;border-radius:16px; background:linear-gradient(160deg,rgba(4,12,6,.94),rgba(8,22,10,.9)); border:1.5px solid rgba(140,255,90,.55); box-shadow:0 16px 40px #000c, inset 0 1px 0 rgba(255,255,255,.08); color:#fff;pointer-events:none; transform:translateY(10px);opacity:0;transition:opacity .22s ease, transform .22s ease; box-sizing:border-box;max-width:calc(100vw - 20px); } .gaba3-voice-caption.is-on{opacity:1;transform:none} .gaba3-voice-caption[hidden]{display:none!important} .gaba3-voice-caption strong{ display:block;margin:0 0 6px;font-size:11px;letter-spacing:.06em; text-transform:uppercase;color:#8fff67;font-weight:900; } .gaba3-voice-caption p{ margin:0;font-size:clamp(18px,4.6vw,28px);font-weight:900;line-height:1.22; text-shadow:0 2px 12px #000a;word-break:break-word; } .pagina-sala .form-chat-semi{grid-template-columns:minmax(0,1fr) auto} .pagina-sala .form-chat-semi .boton-principal{ min-width:72px;padding:0 12px;border:0;border-radius:11px;background:#55c900;color:#061000; font-size:12px;font-weight:900;cursor:pointer; } @media(max-width:620px){ /* evita zoom iOS */ } /* Configuração essencial da sala privada: o proprietário só escolhe a identificação do grupo e sua imagem, sem transformar a sala em comércio. */ .pagina-sala .painel-configuracao-privada[hidden]{display:none!important}.pagina-sala .painel-configuracao-privada{position:fixed;top:76px;right:16px;z-index:70;width:min(360px,calc(100vw - 28px));padding:16px;border:1px solid #55c90070;border-radius:15px;background:#0b130df7;color:#efffe9;box-shadow:0 24px 70px #000b;backdrop-filter:blur(15px)}.pagina-sala .painel-configuracao-privada>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid #ffffff18}.pagina-sala .painel-configuracao-privada header div{display:grid;gap:3px}.pagina-sala .painel-configuracao-privada header span{color:#8fff67;font-size:10px;font-weight:900;letter-spacing:.08em}.pagina-sala .painel-configuracao-privada header strong{font-size:17px}.pagina-sala .painel-configuracao-privada header button{width:31px;height:31px;border:1px solid #ffffff25;border-radius:50%;background:#152017;color:#fff;font-size:20px;cursor:pointer}.pagina-sala .painel-configuracao-privada form{display:grid;gap:10px;margin-top:13px}.pagina-sala .painel-configuracao-privada label{display:grid;gap:5px;color:#cfe4ca;font-size:11px;font-weight:800}.pagina-sala .painel-configuracao-privada input{width:100%;min-height:39px;box-sizing:border-box;padding:0 10px;border:1px solid #ffffff24;border-radius:8px;background:#111b13;color:#fff}.pagina-sala .painel-configuracao-privada .campo-imagem-privada{grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;min-height:54px;padding:8px;border:1px dashed #55c90070;border-radius:10px;background:#112014;cursor:pointer}.pagina-sala .painel-configuracao-privada .campo-imagem-privada input{position:absolute;width:1px;height:1px;opacity:0}.pagina-sala .painel-configuracao-privada .campo-imagem-privada span{display:grid;width:40px;height:40px;place-items:center;border-radius:8px;background:#55c900;color:#071000;font-size:22px}.pagina-sala .painel-configuracao-privada .campo-imagem-privada b{font-size:11px}.pagina-sala .painel-configuracao-privada .campo-imagem-privada small{grid-column:2;color:#9eb89a;font-size:9px}.pagina-sala .painel-configuracao-privada .botao-remover-imagem{min-height:35px;border:1px solid #894b4b;border-radius:8px;background:#301818;color:#ffdede;font-weight:800;cursor:pointer}.pagina-sala .painel-configuracao-privada .boton-principal{min-height:39px;border:0;border-radius:8px;background:#55c900;color:#061000;font-weight:900;cursor:pointer}.pagina-sala .painel-configuracao-privada form>small{min-height:14px;color:#9ef080;font-size:10px;font-weight:750}.pagina-sala #privada-logo{background-repeat:no-repeat;background-size:cover;background-position:center;overflow:hidden} @media(max-width:620px){.pagina-sala .painel-configuracao-privada{top:62px;right:8px;width:calc(100vw - 16px)}} /* Navegação persistente em todas as salas: volta, início e perfil. */ .navegacao-global-sala{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;gap:6px;padding:6px;border:1px solid #ffffff1c;border-radius:14px;background:#08100be8;box-shadow:0 10px 28px #0008;backdrop-filter:blur(12px)}.navegacao-global-sala button{display:grid;width:38px;height:38px;place-items:center;border:1px solid #ffffff18;border-radius:10px;background:#142017;color:#efffe9;font-size:20px;font-weight:850;cursor:pointer;transition:background .2s ease,transform .2s ease}.navegacao-global-sala button:hover,.navegacao-global-sala button:focus-visible{background:#55c900;color:#061000;outline:none;transform:translateY(-1px)}.navegacao-global-sala button[data-room-nav="profile"]{color:#baff9e}@media(max-width:620px){.navegacao-global-sala{right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:5px}.navegacao-global-sala button{width:36px;height:36px;font-size:18px}} /* Em salas a bolha flutuante some — não tapa o botão de enviar */ .pagina-sala .navegacao-global-sala{display:none!important} .gaba3-header-back{ flex:none; display:grid; place-items:center; width:34px; height:34px; margin:0 4px 0 0; padding:0; border:1px solid rgba(255,255,255,.14); border-radius:10px; background:rgba(0,0,0,.22); color:#e8f5e0; cursor:pointer; } .gaba3-header-back:hover, .gaba3-header-back:focus-visible{ border-color:rgba(85,201,0,.45); color:#baff9e; outline:none; } .pagina-sala .cabecera-sala:has(.gaba3-header-back){ display:flex; align-items:center; gap:10px; } /* A seta de voltar troca a cabeceira de grid pra flex (regra acima) — sem nenhum "justify", os 3 blocos (identidade, bolitas online, ícones) só se empacotavam à esquerda, sobrando um vão vazio enorme até a borda direita (relatado pelo dono, sala privada em escritório). margin-left:auto no cluster empurra ele + os ícones de ação juntos pra encostar na borda direita, sem separar um do outro. */ .pagina-sala .cabecera-sala:has(.gaba3-header-back) .sala-online-cluster{ margin-left:auto; } /* Vídeos curtos — a madeira clara fica presente ao redor do vídeo, enquanto o conteúdo publicado permanece inteiramente limpo e as ações ficam fora. */ .shorts-page{ background-color:#1b1007!important; background-image:linear-gradient(rgba(15,8,3,.30),rgba(6,10,8,.42)),url("assets/brand/fondo-madera-gaba3.png?v=real1")!important; background-attachment:fixed!important; background-position:center!important; background-size:cover!important; } .shorts-page .shorts-header{background:linear-gradient(180deg,rgba(11,7,3,.96),rgba(20,11,4,.90))!important;border-bottom-color:rgba(229,173,86,.30)!important} .shorts-page .shorts-info{align-self:end!important;margin-bottom:max(7vh,52px)!important;border-color:rgba(243,194,105,.23)!important;background:linear-gradient(145deg,rgba(9,18,13,.96),rgba(8,13,10,.92))!important;box-shadow:0 14px 28px rgba(0,0,0,.34)} .shorts-page .shorts-acoes{gap:11px!important} .shorts-page .acao-video>span{font-family:"Segoe UI Emoji","Apple Color Emoji",sans-serif!important;font-size:23px!important} .shorts-page .acao-video.nao-curtir-video.ativo>span{border-color:#ffb15a!important;background:#6b3614!important;box-shadow:0 0 18px rgba(255,154,67,.42)!important} .shorts-page .acao-video.nao-curtir-video.ativo b,.shorts-page .acao-video.nao-curtir-video.ativo small{color:#ffd1a2!important} .shorts-page .acao-video small{font-size:10px!important;color:#e2ecdf!important} @media(max-width:720px){ .shorts-page .shorts-info{align-self:start!important;margin:0!important} .shorts-page .shorts-acoes{gap:7px!important;padding-bottom:4px!important} .shorts-page .acao-video{gap:2px!important;min-width:57px!important} .shorts-page .acao-video>span{width:39px!important;height:39px!important;font-size:19px!important} .shorts-page .acao-video b{font-size:9px!important;white-space:normal!important;line-height:1.05!important} .shorts-page .acao-video small{font-size:8px!important;line-height:1.05!important} } /* Estúdio do comércio — abas reais e legíveis. A regra [hidden] precisa ter prioridade sobre os formulários em grade, evitando que todas as áreas sejam exibidas ao mesmo tempo. */ /* Base móvil compacta: unifica las pantallas sin modificar rutas ni lógica. */ :root{--gaba3-font:Inter,Roboto,"SF Pro Display","SF Pro Text",system-ui,sans-serif;--gaba3-space:12px;--gaba3-radius:12px;--gaba3-shadow:0 8px 22px rgba(0,0,0,.20);--gaba3-bottom-safe:calc(64px + env(safe-area-inset-bottom,0px))} body,button,input,textarea,select{font-family:var(--gaba3-font)} @media(max-width:720px){ body{max-width:100%;overflow-x:hidden;overflow-y:visible;font-size:16px;padding-bottom:var(--gaba3-bottom-safe)} button,input,select,textarea{font-weight:500!important} .boton-principal{min-height:42px!important;border-radius:var(--gaba3-radius)!important;padding:9px 14px!important;box-shadow:0 5px 14px rgba(78,201,24,.18)!important} /* Vídeos cortos: contenido vertical de borde a borde, sin tarjeta externa. */ .shorts-page{padding:0!important;background:#050a10!important}.shorts-page .shorts-header{display:none!important} .shorts-page .shorts-feed{height:100dvh!important;max-width:none!important;overflow-y:auto!important;overflow-x:hidden!important;scroll-snap-type:y mandatory!important;scrollbar-width:none!important;padding:0!important} .shorts-page .short-item{display:block!important;min-height:100dvh!important;height:100dvh!important;padding:0!important;overflow:hidden!important;scroll-snap-align:start!important;background:#080d0b!important;isolation:isolate!important} .shorts-page .shorts-video{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;object-fit:cover!important;background:#111!important} .shorts-page .short-item::after{content:"";position:absolute;inset:35% 0 0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.22) 25%,rgba(0,0,0,.86) 100%)} .shorts-page .shorts-info{position:absolute!important;z-index:2!important;left:16px!important;right:76px!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;display:grid!important;gap:6px!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#fff!important} .shorts-page .shorts-autor{gap:8px!important}.shorts-page .shorts-avatar{width:34px!important;height:34px!important;font-size:10px!important;border-width:1px!important}.shorts-page .shorts-autor b{font-size:14px!important;font-weight:600!important}.shorts-page .shorts-autor small{max-width:150px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:12px!important} .shorts-page .seguir-autor{margin-left:auto!important;min-height:34px!important;padding:6px 10px!important;border-radius:10px!important;font-size:12px!important;font-weight:600!important} .shorts-page .shorts-info h1{display:-webkit-box!important;overflow:hidden!important;margin:5px 0 0!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;font-size:22px!important;line-height:1.12!important;font-weight:600!important}.shorts-page .shorts-info p{display:-webkit-box!important;overflow:hidden!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important;font-size:14px!important;line-height:1.35!important}.shorts-page .shorts-audio{display:none!important} .shorts-page .shorts-acoes{position:absolute!important;z-index:3!important;right:9px!important;bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;display:grid!important;gap:11px!important;padding:0!important}.shorts-page .acao-video{min-width:55px!important;gap:3px!important}.shorts-page .acao-video>span,.shorts-page .acao-video>img{width:42px!important;height:42px!important;border:1px solid rgba(255,255,255,.28)!important;background:rgba(8,16,12,.60)!important;backdrop-filter:blur(7px)!important;font-size:18px!important}.shorts-page .acao-video b{font-size:10px!important;font-weight:600!important}.shorts-page .acao-video small{font-size:9px!important;font-weight:500!important}.shorts-play-feedback{position:absolute;z-index:4;top:45%;left:50%;display:grid;width:54px;height:54px;place-items:center;border-radius:50%;background:rgba(0,0,0,.58);color:#fff;font-size:26px;opacity:0;transform:translate(-50%,-50%) scale(.8);transition:.18s ease;pointer-events:none}.shorts-play-feedback.visivel{opacity:1;transform:translate(-50%,-50%) scale(1)} /* Cabeçalhos, salas e comércio: área segura e controles que não cobrem conteúdo. */ .pagina-sala .cabecera-sala{min-height:52px!important;padding-top:calc(7px + env(safe-area-inset-top,0px))!important;padding-right:12px!important;padding-bottom:7px!important;padding-left:12px!important;gap:9px!important} .pagina-sala .cabecera-sala .marca-icono{width:51px!important;height:34px!important;clip-path:none!important}.pagina-sala .cabecera-sala .marca-letras{font-size:18px!important}.pagina-sala .titulo-en-vivo h1{font-size:16px!important;line-height:1.15!important}.pagina-sala .identidad-sala-texto p{font-size:11px!important}.pagina-sala .sala-aplicacion,.pagina-sala .privada-aplicacion{padding:10px!important;padding-bottom:var(--gaba3-bottom-safe)!important}.pagina-sala .zona-principal-sala{min-width:0!important}.pagina-sala .escenario-sala,.pagina-sala .pantalla-videollamada{min-height:clamp(300px,58dvh,560px)!important;border-radius:14px!important}.pagina-sala .rejilla-participantes{min-height:0!important}.pagina-sala .participante-video:not(:first-child){min-height:66px!important}.pagina-sala .participante-video footer{padding:5px!important}.pagina-sala .panel-derecho-sala{display:grid!important;min-width:0!important}.pagina-sala .contenido-chat{min-height:260px!important}.pagina-sala .form-chat{padding-bottom:0!important} .pagina-sala .sala-publica-layout{padding:9px!important;padding-bottom:0!important;grid-template-columns:1fr!important}.pagina-sala .marca-propietario-publica h1{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.pagina-sala .marca-propietario-publica small{font-size:10px!important} .navegacao-inferior,.barra-inferior,.menu-flutuante{height:auto!important;min-height:56px!important;bottom:0!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;background:rgba(5,11,9,.90)!important;backdrop-filter:blur(14px)!important;box-shadow:0 -4px 14px rgba(0,0,0,.16)!important}.navegacao-inferior button,.barra-inferior button,.menu-flutuante button{min-height:40px!important} } /* ========================================================= GABA3 — PLACA DO LOGO + NOME (LED SEQUENCIAL + PARAFUSOS) Uma tabela · um bordo · quatro parafusos discretos ========================================================= */ /* Tornillos: metal envejecido al ras de la madera (embutidos, sin flotar) */ body:not(.pagina-sala) .barra-superior .placa-tornillo, .placa-tornillo{ position:absolute; width:var(--screw-size, 11px); height:var(--screw-size, 11px); border-radius:50%; border:0; background: radial-gradient(circle at 50% 50%, #7a5632 0%, #5c3c20 42%, #3a2412 78%, #2a180c 100%); /* Solo relieve interno: cabeza embutida al nivel de la tabla */ box-shadow: inset 0 0 0 1px rgba(0,0,0,.38), inset 0 1.5px 2px rgba(0,0,0,.55), inset 0 -1px 1px rgba(160,120,70,.12); z-index:3; pointer-events:none; opacity:.9; } .placa-tornillo::before, .placa-tornillo::after{ content:""; position:absolute; background:rgba(22,12,6,.5); border-radius:0.5px; } .placa-tornillo::before{ top:50%;left:26%;right:26%; height:1px; transform:translateY(-50%); } .placa-tornillo::after{ left:50%;top:26%;bottom:26%; width:1px; transform:translateX(-50%); } body:not(.pagina-sala) .barra-superior .placa-tornillo--tl, .placa-tornillo--tl{top:var(--screw-edge, 4px);left:var(--screw-edge, 4px);right:auto;bottom:auto} body:not(.pagina-sala) .barra-superior .placa-tornillo--tr, .placa-tornillo--tr{top:var(--screw-edge, 4px);right:var(--screw-edge, 4px);left:auto;bottom:auto} body:not(.pagina-sala) .barra-superior .placa-tornillo--bl, .placa-tornillo--bl{bottom:var(--screw-edge, 4px);left:var(--screw-edge, 4px);top:auto;right:auto} body:not(.pagina-sala) .barra-superior .placa-tornillo--br, .placa-tornillo--br{bottom:var(--screw-edge, 4px);right:var(--screw-edge, 4px);top:auto;left:auto} /* Logo GABA3 en la placa — proporción estable, más grande e com mais profundidade (pedido do dono: "não tem altura", "sem vida"). */ body:not(.pagina-sala) .barra-superior .marca .marca-icono{ width:118px!important; height:78px!important; filter:drop-shadow(0 5px 10px rgba(0,0,0,.55))!important; } /* Legenda pequena abaixo do nome GABA3 (pedido do dono, 2026-09-15) — escondida em telas estreitas pra manter a cabeceira fina de sempre. Fica FORA de .brand-content (que só empilha ícone+nome lado a lado) pra começar exatamente no início do ÍCONE, não do nome — correção de O dono: a legenda começava alinhada com a letra "G", não com o logo. */ .marca-columna{ display:flex; flex-direction:column; gap:1px; min-width:0; } .marca-tagline{ font-size:11.5px; font-weight:600; letter-spacing:.02em; color:#fff; white-space:nowrap; } @media(max-width:700px){.marca-tagline{display:none}} /* Contenedor del nombre — sin fondo, sin caja, directo sobre la madera */ .marca-nombre-led{ display:flex; align-items:center; gap:4px; background:none; user-select:none; } /* ── Wordmark GABA3: letra com relevo 3D (várias camadas de sombra bem próximas, cor verde escurecendo aos poucos + sombra de contato no fim) — pedido do dono: letra "simples" demais, sem impacto. Uma leitura só, sempre igual, sem animação. ── */ .marca-nombre-led i{ font-style:normal; display:inline-block; font-size:clamp(34px,3.4vw,44px); font-weight:900; font-family:'Inter',"Helvetica Neue",Arial,sans-serif; line-height:1; letter-spacing:-0.02em; color:#4dec7a; text-shadow: 0 1px 0 #2ea917, 0 2px 0 #268b13, 0 3px 0 #1e6d0f, 0 4px 0 #16500b, 0 6px 10px rgba(0,0,0,.6); transition:none; } /* O "3" de GABA3 em branco, destacado do resto em verde — relevo próprio (tons de cinza) pra continuar parecendo "esculpido", não achatado. */ .marca-nombre-led i:nth-child(5){ color:#ffffff; text-shadow: 0 1px 0 #d4d4d4, 0 2px 0 #b0b0b0, 0 3px 0 #8c8c8c, 0 4px 0 #686868, 0 6px 10px rgba(0,0,0,.6); } .marca-nombre-led i::before, .marca-nombre-led i::after{ display:none; } @media(max-width:820px){ .marca-nombre-led{gap:0} .marca-nombre-led i{font-size:22px} .barra-superior .marca .marca-icono{width:96px;height:64px} } @media(max-width:560px){ .marca-nombre-led{gap:0} .marca-nombre-led i{font-size:20px} .barra-superior .marca .marca-icono{width:52px;height:35px} body:not(.pagina-sala) .barra-superior .marca{ --screw-size: 8px; --screw-inset: 8px; --screw-edge: 3px; } body:not(.pagina-sala) .barra-superior .marca .brand-content{ padding:1px 7px; gap:6px; } } @media(max-width:390px){ .marca-nombre-led i{font-size:19px} .barra-superior .marca .marca-icono{width:46px;height:31px} body:not(.pagina-sala) .barra-superior .marca{ --screw-size: 7px; --screw-inset: 8px; --screw-edge: 2px; } } /* ========================================================= GABA3 — BUSCADOR TALLADO EN MADERA Aplica EXCLUSIVAMENTE al buscador del header. No modifica ningún otro componente. ========================================================= */ /* Lupa: ícone de linha simples, estilo YouTube (não mais o desenho ornamentado esculpido em madeira — ficava grande e amador). */ .buscador-inline-lupa svg{ display:block; width:18px; height:18px; color:#fff; } /* Cavidad tallada: el contenedor del buscador incrustado en la madera — overlay más oscuro (pedido del dueño: quedaba "muy clara", desentonaba del resto del cabecero). */ .barra-superior .cinta-crear-header{ background: linear-gradient(180deg, rgba(20,12,4,.32) 0%, rgba(10,6,2,.42) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center 38% / cover no-repeat !important; border:1px solid rgba(0,0,0,.38) !important; border-top-color:rgba(0,0,0,.5) !important; border-bottom-color:rgba(255,255,255,.05) !important; box-shadow: inset 0 2px 7px rgba(0,0,0,.34), inset 0 1px 3px rgba(0,0,0,.22) !important; } /* Buscador inline: lupa decorativa + input de texto */ .barra-superior .cinta-crear-header{ display:flex !important; align-items:center !important; gap:10px !important; padding:0 14px !important; cursor:text; } .buscador-inline-lupa{ flex:none; display:flex; align-items:center; pointer-events:none; } .buscador-inline-input{ flex:1; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:rgba(240,215,175,.95); font:inherit; font-size:15px; font-weight:500; caret-color:rgba(46,204,85,.85); appearance:none; -webkit-appearance:none; } .buscador-inline-input::placeholder{ color:transparent; } .buscador-inline-input::-webkit-search-cancel-button, .buscador-inline-input::-webkit-search-decoration{ display:none; } /* Busca por voz — pedido do dono, 2026-09-16. Mesmo ícone/estilo já usado no microfone do catálogo de comércio. */ .buscador-inline-mic{ flex:none; display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:0; border-radius:50%; background:transparent; color:rgba(240,215,175,.85); cursor:pointer; transition:color .2s ease, background .2s ease; } .buscador-inline-mic:hover{ color:#fff; background:rgba(255,255,255,.08); } .buscador-inline-mic.ouvindo{ color:#0a1406; background:var(--gaba3-verde,#55c900); animation:gaba3-mic-pulso 1s ease-in-out infinite; } @keyframes gaba3-mic-pulso{ 0%,100%{box-shadow:0 0 0 0 rgba(85,201,0,.55)} 50%{box-shadow:0 0 0 6px rgba(85,201,0,0)} } /* ---- Dropdown de resultados inline ---- */ .buscador-inline-resultados{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:200; max-height:min(60vh,420px); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px; border:1px solid rgba(0,0,0,.50); border-top-color:rgba(0,0,0,.70); border-radius:14px; background: linear-gradient(180deg, rgba(230,180,110,.07) 0%, rgba(100,55,15,.05) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center 38% / cover no-repeat; box-shadow: 0 18px 48px rgba(0,0,0,.68), inset 0 1px 0 rgba(255,255,255,.06); display:grid; gap:3px; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .buscador-inline-resultados[hidden]{ display:none; } .buscador-inline-resultados button{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:10px 14px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(0,0,0,.20); color:rgba(240,215,175,.92); font:inherit; font-size:14px; font-weight:600; text-align:left; cursor:pointer; transition:background .15s ease, border-color .15s ease; } .buscador-inline-resultados button:hover{ background:rgba(0,0,0,.40); border-color:rgba(46,204,85,.22); color:rgba(255,235,200,1); } /* Alcance da busca (cidade/nacional) — pedido do dono, 2026-09-16: a busca por voz entende frase natural e escolhe cidade por padrão; este botão deixa claro qual alcance está ativo e troca pro outro num toque. */ .buscador-inline-escopo{ font-size:11.5px!important; font-weight:500!important; padding:7px 12px!important; background:rgba(0,0,0,.12)!important; color:rgba(200,180,150,.85)!important; } .buscador-inline-escopo b{color:#83ef61;font-weight:800} /* Sugestões ao vivo (salas + pessoas) — frontend/searchSuggestions.js */ .buscador-inline-grupo{display:grid;gap:3px} .buscador-inline-grupo + .buscador-inline-grupo{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.08)} .buscador-inline-grupo > small{padding:2px 6px;color:rgba(210,185,150,.75);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .buscador-inline-item{ display:flex; flex-direction:column; gap:1px; width:100%; min-width:0; box-sizing:border-box; padding:9px 14px; border:1px solid rgba(255,255,255,.07); border-radius:10px; background:rgba(0,0,0,.20); color:rgba(240,215,175,.92); text-decoration:none; cursor:pointer; transition:background .15s ease, border-color .15s ease; } a.buscador-inline-item:hover,a.buscador-inline-item:focus-visible{ background:rgba(0,0,0,.40); border-color:rgba(46,204,85,.22); outline:none; } .buscador-inline-item-pessoa{cursor:default} /* Nome/título nunca estoura a caixa: corta com "..." em vez de vazar pra fora, mesmo se for uma palavra só sem espaço (ex.: um @usuario comprido). */ .buscador-inline-item-titulo, .buscador-inline-item-sub{ display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .buscador-inline-item-titulo{font-size:14px;font-weight:700;color:rgba(255,235,200,1)} .buscador-inline-item-sub{font-size:11.5px;color:rgba(210,185,150,.75)} .buscador-inline-vazio{margin:6px;color:rgba(210,185,150,.75);font-size:13px;text-align:center} .bi-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bi-tipo{ flex:none; padding:2px 8px; border-radius:20px; background:rgba(46,204,85,.12); color:rgba(100,220,120,.85); font-size:11px; font-weight:700; letter-spacing:.04em; } .buscador-sin-resultados{ padding:12px 6px; color:rgba(200,180,145,.55); font-size:13px; text-align:center; } /* Destello momentáneo de sala encontrada */ @keyframes salaResaltada{ 0% { outline-color:rgba(46,204,85,.70); box-shadow:0 0 0 4px rgba(46,204,85,.28); } 80% { outline-color:rgba(46,204,85,.30); box-shadow:0 0 0 8px rgba(46,204,85,.08); } 100%{ outline-color:transparent; box-shadow:none; } } .sala-resaltada{ outline:3px solid rgba(46,204,85,.70); border-radius:12px; animation:salaResaltada 1.8s ease forwards; } /* Buscador expandido que app.js puede mostrar: misma cavidad tallada */ .busqueda-interna .buscador-principal{ background: linear-gradient(180deg, rgba(230,180,110,.06) 0%, rgba(140,90,40,.03) 100%), url("assets/brand/fondo-madera-gaba3.png?v=real1") center 38% / cover no-repeat !important; border:1px solid rgba(0,0,0,.45) !important; border-top-color:rgba(0,0,0,.65) !important; border-bottom-color:rgba(255,255,255,.05) !important; box-shadow: inset 0 4px 14px rgba(0,0,0,.52), inset 0 1px 5px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.04) !important; } /* Texto que el usuario escribe: color cálido sobre la madera */ .busqueda-interna .buscador-principal input{ color:rgba(240,215,175,.92) !important; font-weight:600 !important; } /* Sin placeholder visible */ .busqueda-interna .buscador-principal input::placeholder{ color:transparent !important; } /* Responsive: lupa más pequeña en móvil */ @media(max-width:700px){ .lupa-madera{width:26px;height:26px} .barra-superior .cinta-crear-header .boton-lupa-header{padding:0 10px !important;gap:8px !important} } @media(max-width:560px){ .lupa-madera{width:22px;height:22px} } /* ========================================================= GABA3 — DIÁLOGO DEL BUSCADOR (reemplazado por buscador inline) Estas reglas ya no se aplican; se conservan como referencia. ========================================================= */ /* ========================================================= GABA3 — PANEL DE CUENTA: cajón lateral (sin bloquear pantalla) ========================================================= */ /* Cuando se abre como drawer (dialog.show() sin backdrop) */ #panel-cuenta.panel-como-drawer{ position:fixed !important; inset:0 0 0 auto !important; width:min(440px,100vw) !important; height:100dvh !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; border-left:1px solid rgba(255,255,255,.08) !important; border-radius:20px 0 0 20px !important; overflow-y:auto !important; overscroll-behavior:contain !important; box-shadow:-10px 0 48px rgba(0,0,0,.55) !important; z-index:500 !important; background:#111429 !important; /* Sin backdrop: dialog.show() no crea ninguno */ } /* No backdrop al usar show() — la regla es redundante pero aclara la intención */ #panel-cuenta.panel-como-drawer::backdrop{ background:transparent !important; display:none !important; } /* ========================================================= GABA3 — BOTÓN HAMBURGUESA + MENÚ LATERAL DERECHO ========================================================= */ /* Botón ☰ en el encabezado */ .boton-hamburguesa{ flex:none; width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:rgba(0,0,0,.18); color:rgba(240,215,170,.88); font-size:20px; line-height:1; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; } .boton-hamburguesa:hover{ background:rgba(0,0,0,.34); border-color:rgba(255,255,255,.26); color:rgba(255,235,200,1); } .boton-hamburguesa[aria-expanded="true"]{ background:rgba(46,204,85,.15); border-color:rgba(46,204,85,.35); color:rgba(100,220,120,.95); } /* ========================================================= Menu vertical completo — SEMPRE à DIREITA (abre com ☰) Web/Tablet: rail rápida + este painel. Celular: só este painel (sem rail fixa). ========================================================= */ .menu-lateral{ position:fixed; top:0; right:0; left:auto; width:min(280px, 86vw); height:100dvh; z-index:700; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; background: linear-gradient(160deg,rgba(48,27,11,.94),rgba(23,12,5,.97) 52%,rgba(9,6,3,.99)), url("assets/brand/fondo-madera-gaba3.png?v=real1") center/cover no-repeat; background-blend-mode:multiply; backdrop-filter:blur(12px) saturate(1.12); -webkit-backdrop-filter:blur(12px) saturate(1.12); border-left:1px solid rgba(211,166,90,.46); border-right:0; border-radius:16px 0 0 16px; box-shadow: -16px 0 48px rgba(0,0,0,.52), inset 1px 0 0 rgba(246,205,134,.13); transform:translateX(105%); opacity:.96; transition: transform .34s cubic-bezier(.22,.68,.28,1), opacity .28s ease; will-change:transform; font-family:inherit; visibility:hidden; pointer-events:none; } .menu-lateral::before{ content:""; position:absolute; inset:0; background: linear-gradient(90deg,rgba(10,6,3,.12),rgba(118,70,29,.18),rgba(6,4,2,.28)), repeating-linear-gradient(172deg,transparent 0 27px,rgba(246,191,104,.045) 28px 30px); opacity:.88; border-radius:inherit; pointer-events:none; z-index:0; } .menu-lateral > *{ position:relative; z-index:1; } .menu-lateral.menu-lateral-abierto{ transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto; } .menu-lateral-header{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 14px; border-bottom:1px solid rgba(219,174,94,.25); position:sticky; top:0; z-index:2; background:linear-gradient(90deg,rgba(30,16,6,.88),rgba(11,7,3,.75)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .menu-lateral-titulo{ color:rgba(122,230,110,.92); font-size:13px; font-weight:650; letter-spacing:.14em; } .menu-lateral-titulo i{ font-style:normal; } /* O "3" de GABA3 em branco, igual ao cabeçalho principal. */ .menu-lateral-titulo i:nth-child(5){ color:#fff; } .menu-lateral-cerrar{ width:28px; height:28px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.10); border-radius:50%; background:rgba(0,0,0,.22); color:rgba(230,210,180,.72); font-size:16px; font-weight:400; line-height:1; cursor:pointer; transition:background .15s ease, color .15s ease; } .menu-lateral-cerrar:hover{ background:rgba(0,0,0,.42); color:rgba(255,240,210,.95); } .menu-lateral-cerrar [data-morph-icone]{ width:16px; height:16px; display:grid; place-items:center; } .menu-lateral-cerrar svg, .mli-icono svg{ width:100%; height:100%; display:block; } .menu-lateral-nav{ display:flex; flex-direction:column; gap:4px; padding:14px 12px 22px; flex:1; } .menu-lateral-item{ display:flex; align-items:center; gap:14px; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:11px; background:transparent; color:rgba(245,228,201,.92); font:inherit; font-size:12.5px; font-weight:560; text-shadow:0 1px 1px rgba(0,0,0,.34); letter-spacing:.015em; line-height:1.25; text-align:left; text-decoration:none; cursor:pointer; transition:background .16s ease, color .16s ease, transform .16s ease; } .menu-lateral-item:hover, .menu-lateral-item:focus-visible{ background:linear-gradient(90deg,rgba(190,129,50,.23),rgba(190,129,50,.08)); color:rgba(255,240,214,1); outline:none; } .menu-lateral-item.activo{ background:linear-gradient(90deg,rgba(85,201,0,.17),rgba(85,201,0,.05)); color:rgba(150,235,120,.95); } .mli-icono{ flex:none; width:22px; height:22px; display:grid; place-items:center; color:rgba(239,204,142,.94); } .mli-icono-madera img{ width:26px; height:26px; object-fit:contain; display:block; border-radius:5px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); pointer-events:none; user-select:none; } .menu-lateral-item:hover .mli-icono, .menu-lateral-item:focus-visible .mli-icono, .menu-lateral-item.activo .mli-icono{ color:inherit; } .menu-lateral-item:hover .mli-icono-madera img{ filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)) brightness(1.05); } .mli-svg{ width:20px; height:20px; display:block; } .mli-texto{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; } .mli-flecha{ flex:none; color:rgba(200,175,140,.42); font-size:14px; font-weight:400; font-style:normal; transition:transform .2s ease; } .menu-lateral-acordeon[aria-expanded="true"] .mli-flecha{ transform:rotate(90deg); } /* Sección acordeón */ .menu-lateral-seccion{ display:flex; flex-direction:column; } /* Sub-ítems (salas) */ .mls-contenido{ display:flex; flex-direction:column; gap:2px; padding:2px 0 4px 10px; } .mls-contenido[hidden]{ display:none; } .mls-item{ display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:0; border-radius:8px; background:transparent; color:rgba(215,190,150,.78); font:inherit; font-size:12px; font-weight:500; text-align:left; cursor:pointer; transition:background .14s ease; } .mls-item:hover{ background:rgba(0,0,0,.28); color:rgba(240,215,175,1); } .mls-icono-sala{ flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:8px; background:rgba(46,204,85,.12); color:rgba(100,220,120,.85); font-size:11px; font-weight:900; } .mls-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mls-cargando, .mls-vacio{ padding:10px 14px; color:rgba(200,175,140,.42); font-size:12px; text-align:center; } /* Separador */ .menu-lateral-separador{ border:0; border-top:1px solid rgba(182,132,52,.16); margin:10px 8px; } /* ── Mis salas: secciones creadas / participadas ── */ .mls-seccion{ display:flex; flex-direction:column; gap:2px; margin-bottom:6px; } .mls-seccion-titulo{ margin:8px 0 4px; padding:0 4px; font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:rgba(240,220,180,.55); border-bottom:1px solid rgba(255,255,255,.07); padding-bottom:4px; } /* Badge de tiempo restante en salas temporales */ .mls-expira{ display:inline-block; margin-left:6px; font-size:10px; font-weight:600; color:rgba(255,230,130,.80); vertical-align:middle; } .mls-expira-vencida{ color:rgba(255,110,100,.85); } /* Aviso para visitantes no registrados */ .mls-aviso-invitado{ margin:10px 0 6px; display:flex; flex-direction:column; gap:6px; } .mls-aviso-texto{ margin:0 0 4px; padding:9px 11px; border-radius:9px; background:rgba(0,0,0,.26); border:1px solid rgba(255,255,255,.07); color:rgba(230,212,186,.78); font-size:11.5px; font-weight:400; line-height:1.45; } .menu-lateral-item.mli-btn-primario{ background:linear-gradient(135deg,var(--gaba3-verde-brillante,#7cec00),var(--gaba3-verde,#55c900)) !important; color:#061408 !important; border-color:transparent !important; font-weight:600; font-size:12.5px; justify-content:flex-start; min-height:44px; } .menu-lateral-item.mli-btn-primario:hover{ filter:brightness(1.06); } .menu-lateral-item.mli-btn-primario .mli-icono{ color:#061408; } .menu-lateral-item.mli-btn-primario .mli-icono-madera img{ filter:drop-shadow(0 1px 2px rgba(0,0,0,.25)); } .menu-lateral-item.mli-btn-secundario{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.14) !important; color:rgba(240,228,210,.9) !important; justify-content:flex-start; font-weight:500; min-height:44px; } .menu-lateral-item.mli-btn-secundario:hover{ background:rgba(255,255,255,.11) !important; border-color:rgba(255,255,255,.24) !important; } .menu-lateral-item.mli-btn-peligro{ color:rgba(255,150,130,.9) !important; font-weight:500; } .menu-lateral-item.mli-btn-peligro:hover{ background:rgba(255,60,60,.10) !important; color:#ff8878 !important; } /* Título "GABA3" + contagem real da comunidade, bem juntos — pedido do dono, 2026-09-16: "no lugar onde diz GABA3", nunca uma faixa separada embaixo. */ .menu-lateral-titulo-bloco{ display:flex; flex-direction:column; gap:2px; } .menu-lateral-comunidade{ margin:0; color:rgba(230,240,225,.92); } .menu-lateral-comunidade b{ display:inline; font-size:10.5px; font-weight:800; color:#83ef61; } .menu-lateral-comunidade small{ display:inline; margin-left:4px; font-size:10px; font-weight:500; color:rgba(200,215,195,.6); } .menu-lateral-pie{ padding:10px 14px 14px; border-top:1px solid rgba(182,132,52,.10); text-align:center; color:rgba(200,168,105,.26); font-size:10px; font-weight:400; letter-spacing:.05em; line-height:1.6; user-select:none; } @media(max-width:400px){ .menu-lateral{ width:min(248px, 92vw); border-radius:12px 0 0 12px; } } /* ========================================================= GABA3 — ACABADOS FINALES DEL ENCABEZADO ========================================================= */ /* ---- Tabla principal: una sola pieza de madera (sin doble marco) ---- */ body:not(.pagina-sala) .barra-superior .marca{ border:1px solid rgba(120,78,36,.28) !important; border-top-color:rgba(120,78,36,.28) !important; border-right-color:rgba(120,78,36,.28) !important; border-bottom-color:rgba(120,78,36,.28) !important; border-left-color:rgba(120,78,36,.28) !important; outline:none !important; box-shadow: 0 3px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,236,190,.06) !important; } /* ---- Sobre de mensajes: igual que la campana (círculo limpio) ---- */ .cuenta-usuario .buzon-participacion.boton-buzon{ width:44px !important; height:44px !important; border-radius:50% !important; border:1px solid rgba(255,255,255,.17) !important; background:#171827 !important; box-shadow:none !important; color:rgba(240,215,170,.90) !important; font-size:22px !important; padding:0 !important; place-items:center !important; } .cuenta-usuario .buzon-participacion.boton-buzon:hover{ background:rgba(40,44,80,.75) !important; border-color:rgba(255,255,255,.28) !important; } /* ---- Zona de foto de perfil en el dropdown ---- */ .perfil-dd-foto-zona{ display:flex; align-items:center; gap:12px; padding:10px 14px 12px; border-bottom:1px solid rgba(255,255,255,.09); margin-bottom:4px; } .perfil-dd-foto-label{ position:relative; flex:none; cursor:pointer; } .perfil-dd-avatar{ width:52px; height:52px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:linear-gradient(135deg,#f2994a,#c65d89); border:2px solid rgba(255,255,255,.18); box-shadow:0 2px 8px rgba(0,0,0,.45); transition:filter .18s ease; } .perfil-dd-foto-label:hover .perfil-dd-avatar{ filter:brightness(.72); } .perfil-dd-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .perfil-dd-iniciales{ color:#fff; font-size:16px; font-weight:900; } /* Icono de cámara superpuesto */ .perfil-dd-camara{ position:absolute; inset:0; display:grid; place-items:center; font-size:20px; opacity:0; transition:opacity .18s ease; pointer-events:none; } .perfil-dd-foto-label:hover .perfil-dd-camara{ opacity:1; } /* Info de nombre y botón quitar */ .perfil-dd-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; } .perfil-dd-quitar{ align-self:flex-start; padding:3px 9px; border:1px solid rgba(255,100,80,.40); border-radius:20px; background:rgba(200,30,20,.14); color:rgba(255,120,100,.82); font:inherit; font-size:11px; font-weight:700; cursor:pointer; transition:background .15s ease; } .perfil-dd-quitar:hover{ background:rgba(200,30,20,.28); color:rgba(255,140,120,1); } /* ========================================================= GABA3 — SALA PÚBLICA: PANEL DE CONFIGURACIÓN (ACORDEÓN) Toda la config va dentro del panel lateral. Ningún elemento flotante sobre la sala. ========================================================= */ /* ── Aviso banner en cabecera (display only) ── */ /* (estilos pc-* eliminados — la configuración vive en el panel lateral) */ .pc-logo-zona--DISABLED{ display:flex; flex-direction:column; align-items:center; gap:4px; flex:none; } .pc-logo-clip{ position:relative; display:inline-flex; cursor:default; } .pc-clip-hint{ position:absolute; bottom:-4px; right:-4px; font-size:14px; background:rgba(10,8,4,.82); border-radius:50%; width:20px; height:20px; display:grid; place-items:center; opacity:0; transition:opacity .18s ease; pointer-events:none; } .pc-logo-ayuda{ position:absolute; top:calc(100% + 6px); left:50%; transform:translateX(-50%); width:120px; text-align:center; font-size:9px; color:rgba(240,220,180,.50); white-space:nowrap; pointer-events:none; opacity:0; transition:opacity .18s ease; } /* En modo config: mostrar hint del clip */ [data-negocio-config="true"] .pc-logo-clip{ cursor:pointer; } [data-negocio-config="true"] .pc-clip-hint, [data-negocio-config="true"] .pc-logo-ayuda{ opacity:1; } .pc-ubicacion{ font-size:10px; font-weight:700; letter-spacing:.04em; color:rgba(200,175,120,.70); text-align:center; cursor:default; margin:0; white-space:nowrap; } [data-negocio-config="true"] .pc-ubicacion{ cursor:pointer; color:rgba(200,175,120,.95); text-decoration:underline dotted rgba(200,175,120,.50); } /* ── Zona textos (nombre + frase) ── */ .pc-identidad{ flex:1; min-width:0; } .pc-textos{ display:flex; flex-direction:column; gap:2px; min-width:0; } /* ── Campos editables inline ── */ .pc-campo{ margin:0; outline:none; border-radius:6px; transition:background .18s ease, box-shadow .18s ease, outline .18s ease; cursor:default; white-space:pre-wrap; word-break:break-word; } /* Placeholder vía CSS */ .pc-campo[data-vacio="true"]::before{ content:attr(data-placeholder); color:rgba(200,185,155,.35); pointer-events:none; font-style:italic; font-weight:400; } /* Estado de edición activo */ .pc-campo[contenteditable="true"]{ cursor:text; background:rgba(255,220,150,.06); box-shadow:0 0 0 2px rgba(200,155,60,.45); outline:none; padding:2px 6px; } /* En modo config: resaltar todos los campos */ [data-negocio-config="true"] .pc-campo{ cursor:pointer; outline:1px dashed rgba(200,155,60,.30); outline-offset:3px; } [data-negocio-config="true"] .pc-campo:hover{ background:rgba(255,220,150,.05); outline-color:rgba(200,155,60,.60); } .pc-frase{ font-size:13px; font-weight:500; color:rgba(230,210,170,.75); } /* ── Botón "Configurar mi negocio" ── */ .pc-btn-config{ display:flex; align-items:center; gap:5px; padding:7px 12px; border:1px solid rgba(182,132,52,.45); border-radius:10px; background:rgba(12,8,3,.55); color:rgba(220,190,130,.90); font-size:12px; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; } .pc-btn-config:hover, .pc-btn-config[aria-pressed="true"]{ background:rgba(182,132,52,.22); border-color:rgba(210,165,75,.70); color:rgba(255,230,170,1); } /* ── Fila 2: aviso importante ── */ .pc-aviso-zona{ display:flex; align-items:center; gap:8px; padding:7px 18px; min-height:36px; background:rgba(10,7,2,.55); border-top:1px solid rgba(182,132,52,.15); transition:opacity .25s ease, max-height .25s ease; overflow:hidden; } .pc-aviso-zona.pc-aviso-oculta{ opacity:0; max-height:0; padding:0 18px; border-top-color:transparent; pointer-events:none; } .pc-aviso-icono{ font-size:14px; flex:none; opacity:.70; } .pc-aviso-txt{ flex:1; font-size:13px; font-weight:500; color:rgba(255,235,170,.85); } .pc-aviso-toggle{ flex:none; padding:3px 9px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:rgba(255,255,255,.06); color:rgba(220,200,160,.80); font-size:11px; cursor:pointer; } .pc-aviso-toggle:hover{ background:rgba(255,255,255,.12); } /* ── Paleta flotante ── */ .pc-paleta{ position:fixed; z-index:900; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px; border:1px solid rgba(182,132,52,.40); border-radius:14px; background:rgba(14,9,3,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 8px 32px rgba(0,0,0,.60); } /* Swatches de color */ .pc-paleta-colores{ display:flex; align-items:center; gap:6px; } .pc-color{ width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.18); cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; flex:none; } .pc-color:hover{ transform:scale(1.20); } .pc-color-activo{ box-shadow:0 0 0 3px rgba(255,220,120,.80); transform:scale(1.15); } .pc-color-custom-label{ position:relative; cursor:pointer; } .pc-color-custom-label input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; } .pc-color-rainbow{ font-size:18px; line-height:1; border:none; background:none; width:auto; height:auto; border-radius:0; } /* Controles de tamaño */ .pc-paleta-size{ display:flex; align-items:baseline; gap:4px; border-left:1px solid rgba(255,255,255,.10); padding-left:8px; } .pc-size{ padding:2px 7px; border:1px solid rgba(255,255,255,.15); border-radius:6px; background:transparent; color:rgba(230,210,170,.80); cursor:pointer; transition:background .12s ease; } .pc-size-activo, .pc-size:hover{ background:rgba(182,132,52,.30); border-color:rgba(210,165,75,.60); color:rgba(255,230,170,1); } /* Controles de alineación */ .pc-paleta-align{ display:flex; gap:3px; border-left:1px solid rgba(255,255,255,.10); padding-left:8px; } .pc-align{ width:28px; height:28px; border:1px solid rgba(255,255,255,.15); border-radius:6px; background:transparent; color:rgba(230,210,170,.80); cursor:pointer; font-size:13px; transition:background .12s ease; } .pc-align-activo, .pc-align:hover{ background:rgba(182,132,52,.30); border-color:rgba(210,165,75,.60); color:rgba(255,230,170,1); } /* Input de ubicación */ .pc-paleta-ubicacion input{ padding:5px 10px; border:1px solid rgba(182,132,52,.40); border-radius:8px; background:rgba(255,220,150,.06); color:rgba(240,220,170,.95); font-size:13px; outline:none; min-width:220px; } .pc-paleta-ubicacion input:focus{ border-color:rgba(210,165,75,.70); box-shadow:0 0 0 2px rgba(200,155,60,.25); } /* ── Barra de acciones (modo configuración) ── */ .pc-barra-edicion{ position:sticky; top:0; z-index:800; display:flex; align-items:center; gap:10px; padding:8px 18px; background:rgba(10,7,2,.90); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid rgba(182,132,52,.30); box-shadow:0 4px 16px rgba(0,0,0,.40); } .pc-barra-texto{ flex:1; font-size:12px; color:rgba(200,175,120,.80); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .pc-btn-guardar{ padding:7px 18px; font-size:12px; white-space:nowrap; } .pc-btn-cancelar{ padding:6px 12px; border:1px solid rgba(255,255,255,.16); border-radius:9px; background:transparent; color:rgba(200,180,150,.70); font-size:12px; cursor:pointer; white-space:nowrap; } .pc-btn-cancelar:hover{ background:rgba(255,255,255,.06); color:rgba(220,200,170,.90); } /* ── Toast de confirmación ── */ .pc-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:1000; padding:10px 22px; border-radius:12px; background:rgba(46,204,85,.90); color:#051506; font-size:13px; font-weight:700; box-shadow:0 6px 24px rgba(0,0,0,.40); animation:pc-toast-in .25s ease; } @keyframes pc-toast-in{ from{ opacity:0; transform:translateX(-50%) translateY(10px); } to { opacity:1; transform:translateX(-50%) translateY(0); } } /* ── Responsive legacy stub ── */ @media(max-width:640px){ .conf-panel{ width:92vw; } } /* ========================================================= GABA3 — PANEL DE CONFIGURACIÓN (ACORDEÓN) Abierto desde ☰ junto al perfil. Scroll interno. Sin controles sobre la sala. ========================================================= */ /* ── Panel lateral ────────────────────────────────────── */ /* [hidden] es gestionado por publicRoomLayout.js. Usamos pointer-events + transform para la animación. */ .conf-panel{ position:fixed; top:0; right:0; bottom:0; width:340px; max-width:95vw; z-index:1200; display:flex !important; /* override hidden's display:none */ flex-direction:column; background:rgba(13,8,3,.88); backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25); border-left:1px solid rgba(182,132,52,.30); box-shadow:-6px 0 40px rgba(0,0,0,.55), -1px 0 0 rgba(182,132,52,.08); transform:translateX(105%); pointer-events:none; visibility:hidden; transition:transform .32s cubic-bezier(.22,.87,.32,1), visibility .32s step-end; overflow:hidden; } .conf-panel::before{ content:""; position:absolute; inset:0; background:url("assets/brand/fondo-madera-gaba3.png?v=real1") center/180px auto; opacity:.07; pointer-events:none; z-index:0; } .conf-panel > *{ position:relative; z-index:1; } .conf-panel-abierto{ transform:translateX(0); pointer-events:auto; visibility:visible; transition:transform .32s cubic-bezier(.22,.87,.32,1), visibility 0s; } /* Conteúdo do perfil scrollável (agentes + config) */ /* Catálogo: flechas ▲ ▼ para navegar todos os produtos */ /* Ofertas: logo estático + carrossel automático (até 3 grandes) */ /* Letras de preço — faixa amarela estilo supermercado (embaixo da oferta) */ /* Visibilidade do produto — endireita / enquadra (catálogo esq. + ofertas centro) */ /* Perfil miniatura sempre clicável quando visível */ /* Dono: ☰ das telas abre a configuração daquela secção */ /* ── Cabecera del panel ── */ .conf-panel-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:rgba(10,6,2,.60); border-bottom:1px solid rgba(182,132,52,.20); flex:none; } .conf-panel-tag{ display:block; font-size:9px; letter-spacing:.12em; color:rgba(182,132,52,.70); text-transform:uppercase; margin-bottom:2px; } .conf-panel-titulo{ font-size:14px; font-weight:700; color:rgba(240,220,180,.92); } .fechar-configuracao-publica{ background:none; border:none; color:rgba(200,170,110,.70); font-size:22px; line-height:1; cursor:pointer; padding:4px 6px; border-radius:6px; transition:color .18s, background .18s; } .fechar-configuracao-publica:hover{ color:rgba(240,210,130,1); background:rgba(182,132,52,.15); } /* ── Área de scroll ── */ .conf-acordeon{ flex:1; overflow-y:auto; overflow-x:hidden; padding:8px 0 16px; scrollbar-width:thin; scrollbar-color:rgba(182,132,52,.30) transparent; } .conf-acordeon::-webkit-scrollbar{ width:4px; } .conf-acordeon::-webkit-scrollbar-thumb{ background:rgba(182,132,52,.30); border-radius:4px; } /* ── Sección acordeón ── */ .conf-seccion{ border-bottom:1px solid rgba(182,132,52,.12); } .conf-seccion-titulo{ width:100%; background:none; border:none; display:flex; align-items:center; justify-content:space-between; padding:13px 18px; color:rgba(230,200,140,.90); font-size:13px; font-weight:600; cursor:pointer; text-align:left; transition:background .18s, color .18s; gap:8px; } .conf-seccion-titulo:hover{ background:rgba(182,132,52,.10); color:rgba(240,220,170,1); } .conf-seccion-titulo[aria-expanded="true"]{ background:rgba(182,132,52,.10); color:#2ecc55; } .conf-flecha{ font-size:18px; font-weight:300; transition:transform .22s ease; flex:none; } .conf-seccion-titulo[aria-expanded="true"] .conf-flecha{ transform:rotate(90deg); } /* ── Contenido del acordeón ── */ .conf-seccion-contenido{ padding:12px 18px 18px; display:flex; flex-direction:column; gap:10px; } /* ── Campos del formulario ── */ .conf-label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:rgba(200,170,110,.80); font-weight:500; } .conf-label input, .conf-label textarea, .conf-label select{ background:rgba(10,6,2,.60); border:1px solid rgba(182,132,52,.25); border-radius:7px; color:rgba(240,220,180,.95); font-size:13px; padding:7px 10px; outline:none; transition:border-color .18s, box-shadow .18s; font-family:inherit; } .conf-label input:focus, .conf-label textarea:focus{ border-color:rgba(182,132,52,.55); box-shadow:0 0 0 3px rgba(182,132,52,.10); } .conf-label textarea{ resize:vertical; min-height:60px; } .conf-seccion-subtitulo{ font-size:11px; color:rgba(182,132,52,.75); font-weight:600; margin:4px 0 0; text-transform:uppercase; letter-spacing:.06em; } /* ── Switch ── */ .conf-switch{ display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(220,195,145,.85); cursor:pointer; user-select:none; } .conf-switch input[type=checkbox]{ accent-color:#2ecc55; width:16px; height:16px; cursor:pointer; } /* ── Filas de campos ── */ .conf-fila-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .conf-fila-3{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:8px; } /* ── Logo ── */ .conf-logo-zona{ display:flex; align-items:center; gap:10px; } .conf-logo-label{ cursor:pointer; flex:none; } .conf-logo-preview{ width:72px; height:72px; border-radius:10px; border:2px dashed rgba(182,132,52,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:rgba(10,6,2,.50); background-size:cover; background-position:center; transition:border-color .18s, background-color .18s; overflow:hidden; } .conf-logo-preview:hover{ border-color:rgba(182,132,52,.70); background-color:rgba(30,18,6,.70); } .conf-logo-has-img .conf-logo-clip, .conf-logo-has-img .conf-logo-hint{ opacity:0; } .conf-logo-clip{ font-size:22px; line-height:1; } .conf-logo-hint{ font-size:9px; color:rgba(200,170,110,.60); text-align:center; line-height:1.2; padding:0 4px; } .conf-btn-secundario{ background:none; border:1px solid rgba(200,80,80,.35); color:rgba(200,120,120,.80); font-size:11px; padding:5px 8px; border-radius:6px; cursor:pointer; transition:all .18s; white-space:nowrap; } .conf-btn-secundario:hover{ background:rgba(200,80,80,.12); color:rgba(220,140,140,1); } .conf-horario-semana{display:flex;flex-direction:column;gap:6px;margin-bottom:8px} .conf-horario-linha{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px} .conf-horario-dia{flex:0 0 32px;font-weight:700;color:var(--suave,#9a8a6a)} .conf-horario-linha input[type="time"]{width:auto;min-width:0;flex:1 1 90px;margin-bottom:0;padding:6px 8px} .conf-horario-fechado{margin-left:auto;flex:0 0 auto} /* ── Mini-preview ── */ .conf-mini-preview{ display:flex; align-items:center; gap:10px; background:rgba(20,12,4,.55); border:1px solid rgba(182,132,52,.18); border-radius:9px; padding:10px 12px; margin-top:4px; } .conf-prev-logo{ width:40px; height:40px; border-radius:6px; background:rgba(30,18,6,.70) center/cover no-repeat; flex:none; border:1px solid rgba(182,132,52,.20); display:flex; align-items:center; justify-content:center; font-size:18px; color:rgba(182,132,52,.40); } .conf-prev-logo.com-imagem{ border-color:rgba(182,132,52,.35); } .conf-mini-preview b{ display:block; font-size:13px; color:rgba(240,220,180,.90); } .conf-prev-ubicacion{ display:block; font-size:10px; color:rgba(182,132,52,.70); margin-top:1px; } /* ── Fieldset ── */ .conf-fieldset{ border:1px solid rgba(182,132,52,.18); border-radius:9px; padding:12px; display:flex; flex-direction:column; gap:8px; } .conf-fieldset legend{ font-size:11px; color:rgba(182,132,52,.75); font-weight:600; padding:0 6px; letter-spacing:.05em; text-transform:uppercase; } /* ── Imagen selector ── */ .conf-img-selector{ display:flex; align-items:center; gap:8px; } .conf-btn-img{ background:rgba(10,6,2,.60); border:1px solid rgba(182,132,52,.25); border-radius:7px; color:rgba(200,170,110,.80); font-size:12px; padding:7px 10px; cursor:pointer; transition:all .18s; } .conf-btn-img:hover{ border-color:rgba(182,132,52,.55); color:rgba(240,220,180,1); } /* ── Galeria de fotos extras do produto ── */ .conf-galeria-lista{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0; } .conf-galeria-lista:empty{ margin:0; } .conf-galeria-item{ position:relative; width:52px; height:52px; border-radius:6px; overflow:hidden; border:1px solid rgba(182,132,52,.25); flex:none; } .conf-galeria-item img{ width:100%; height:100%; object-fit:cover; display:block; } .conf-galeria-item-rem{ position:absolute; top:1px; right:1px; width:16px; height:16px; border-radius:50%; background:rgba(10,6,2,.80); border:1px solid rgba(200,80,80,.55); color:rgba(220,140,140,.95); font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .conf-galeria-item-rem:hover{ background:rgba(200,80,80,.35); } /* ── Variantes do produto (tamanho/cor) — chips removíveis ── */ .conf-variantes-lista{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0; } .conf-variantes-lista:empty{ margin:0; } .conf-variante-chip{ display:inline-flex; align-items:center; gap:5px; background:rgba(10,6,2,.60); border:1px solid rgba(182,132,52,.30); border-radius:999px; padding:4px 6px 4px 10px; font-size:11px; color:rgba(220,195,150,.92); } .conf-variante-chip-rem{ width:15px; height:15px; border-radius:50%; background:rgba(200,80,80,.18); border:1px solid rgba(200,80,80,.5); color:rgba(220,140,140,.95); font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; } .conf-variante-chip-rem:hover{ background:rgba(200,80,80,.35); } .conf-img-thumb{ width:52px; height:52px; border-radius:7px; object-fit:cover; border:1px solid rgba(182,132,52,.25); } /* ── Lista de productos / ítems ── */ .conf-lista-items{ display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(182,132,52,.20) transparent; } .conf-lista-vacia{ font-size:11px; color:rgba(182,132,52,.50); text-align:center; padding:8px 0; } .conf-prod-item{ display:flex; align-items:center; gap:8px; background:rgba(10,6,2,.45); border:1px solid rgba(182,132,52,.12); border-radius:8px; padding:7px 10px; } .conf-prod-thumb{ width:38px; height:38px; border-radius:6px; object-fit:cover; flex:none; } .conf-prod-thumb-ico{ width:38px; height:38px; border-radius:6px; background:rgba(30,18,6,.55); display:grid; place-items:center; font-size:18px; color:rgba(182,132,52,.40); flex:none; } .conf-prod-info{ flex:1; min-width:0; } .conf-prod-info b{ display:block; font-size:12px; color:rgba(230,200,140,.90); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .conf-prod-info small{ font-size:11px; color:#2ecc55; } /* ── Ofertas ── */ .conf-oferta-card{ background:rgba(10,6,2,.55); border:1px solid rgba(182,132,52,.18); border-radius:9px; padding:10px 12px; display:flex; flex-direction:column; gap:4px; } .conf-oferta-card:first-child{ border-color:rgba(46,204,85,.25); } .conf-oferta-card-header{ display:flex; justify-content:space-between; align-items:center; font-size:11px; color:rgba(182,132,52,.70); font-weight:600; letter-spacing:.05em; text-transform:uppercase; } .conf-oferta-thumb{ width:100%; max-height:80px; object-fit:cover; border-radius:6px; margin:4px 0; } .conf-precio-actual{ font-size:16px; font-weight:800; color:#2ecc55; } .conf-precio-ant{ font-size:11px; color:rgba(200,170,110,.55); text-decoration:line-through; } .conf-ubicacion-aviso{ font-size:11px; color:rgba(182,132,52,.80); background:rgba(182,132,52,.07); border:1px solid rgba(182,132,52,.18); border-radius:5px; padding:5px 9px; margin:4px 0 2px; line-height:1.4; } .conf-ayuda{ font-size:11px; color:rgba(182,132,52,.60); line-height:1.45; margin:0; } /* ── Botones acción ── */ .conf-btn-primario{ background:linear-gradient(135deg,#2aab44,#1d7d30); border:none; border-radius:8px; color:#efffec; font-size:13px; font-weight:700; padding:9px 14px; cursor:pointer; transition:filter .18s, transform .12s; text-align:center; } .conf-btn-primario:hover{ filter:brightness(1.12); } .conf-btn-primario:active{ transform:scale(.97); } .conf-btn-del{ background:none; border:none; color:rgba(200,100,100,.65); font-size:14px; cursor:pointer; padding:2px 5px; transition:color .18s; border-radius:4px; } .conf-btn-del:hover{ color:rgba(220,120,120,1); background:rgba(200,80,80,.10); } .conf-btn-editar{ background:none; border:none; color:rgba(85,201,0,.75); font-size:14px; cursor:pointer; padding:2px 5px; transition:color .18s; border-radius:4px; } .conf-btn-editar:hover{ color:rgba(85,201,0,1); background:rgba(85,201,0,.10); } .conf-form-acoes{ display:flex; gap:8px; align-items:center; } .conf-form-acoes .conf-btn-primario{ flex:1; } .conf-btn-cancelar-edicao{ flex:none; background:none; border:1px solid rgba(182,132,52,.30); border-radius:8px; color:rgba(220,190,140,.85); font-size:12px; font-weight:700; padding:9px 12px; cursor:pointer; } .conf-btn-cancelar-edicao:hover{ background:rgba(182,132,52,.10); } /* ── Pedidos reais (painel do dono) ── */ .conf-pedidos-contador{ display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px; border-radius:99px; background:#e5484d; color:#fff; font-size:10px; font-weight:800; vertical-align:middle; } .conf-lista-pedidos{ display:flex; flex-direction:column; gap:8px; max-height:360px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(182,132,52,.20) transparent; } .conf-pedido-item{ background:rgba(10,6,2,.5); border:1px solid rgba(182,132,52,.18); border-radius:9px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; } .conf-pedido-item[data-status="REQUESTED"]{ border-color:rgba(46,204,85,.4); } .conf-pedido-item[data-status="DECLINED"], .conf-pedido-item[data-status="CANCELLED"]{ opacity:.6; } .conf-pedido-cabecalho{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .conf-pedido-cabecalho b{ font-size:13px; color:rgba(230,200,140,.92); } .conf-pedido-selo{ flex:none; font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:3px 8px; border-radius:99px; background:rgba(182,132,52,.15); color:rgba(230,200,140,.85); } .conf-pedido-produto{ margin:0; font-size:12.5px; color:#e8f5e0; } .conf-pedido-nota{ margin:0; font-size:11.5px; font-style:italic; color:rgba(200,170,110,.75); } .conf-pedido-data{ font-size:10.5px; color:rgba(182,132,52,.55); } .conf-pedido-acoes{ display:flex; gap:6px; margin-top:5px; } .conf-btn-pedido, .conf-btn-pedido-negativo{ flex:1; padding:7px 8px; border-radius:7px; font-size:11.5px; font-weight:700; cursor:pointer; border:1px solid transparent; } .conf-btn-pedido{ background:linear-gradient(135deg,#2aab44,#1d7d30); color:#efffec; } .conf-btn-pedido:hover{ filter:brightness(1.12); } .conf-btn-pedido-negativo{ background:rgba(200,80,80,.12); border-color:rgba(200,80,80,.35); color:rgba(255,190,190,.9); } .conf-btn-pedido-negativo:hover{ background:rgba(200,80,80,.22); } .conf-btn-pedido:disabled, .conf-btn-pedido-negativo:disabled{ opacity:.5; cursor:default; } .conf-btn-pedido-denunciar{ flex:0 0 auto; padding:0 6px; border:0; background:transparent; font-size:13px; cursor:pointer; opacity:.6; } .conf-btn-pedido-denunciar:hover{ opacity:1; } /* ── Footer del panel ── */ .conf-panel-footer{ flex:none; display:flex; flex-direction:column; gap:8px; padding:14px 18px; border-top:1px solid rgba(182,132,52,.18); background:rgba(10,6,2,.58); } .conf-btn-guardar{ width:100%; } .conf-btn-descartar{ width:100%; background:none; border:1px solid rgba(182,132,52,.25); color:rgba(200,170,110,.75); font-size:13px; padding:7px 14px; border-radius:8px; cursor:pointer; transition:all .18s; } .conf-btn-descartar:hover{ background:rgba(182,132,52,.10); border-color:rgba(182,132,52,.45); color:rgba(220,195,145,1); } .conf-version{ text-align:center; font-size:10px; color:rgba(182,132,52,.35); margin-top:2px; } /* ── Toast ── */ .conf-toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:9999; padding:9px 20px; border-radius:20px; background:rgba(46,204,85,.92); color:#051506; font-size:13px; font-weight:700; box-shadow:0 6px 24px rgba(0,0,0,.38); animation:conf-toast-in .22s ease; pointer-events:none; } @keyframes conf-toast-in{ from{ opacity:0; transform:translateX(-50%) translateY(8px); } to { opacity:1; transform:translateX(-50%) translateY(0); } } /* ── Responsive ── */ @media(max-width:640px){ .conf-panel{ width:100vw; } .conf-fila-3{ grid-template-columns:1fr 1fr; } .conf-fila-2{ grid-template-columns:1fr 1fr; } } /* ════════════════════════════════════════════════════════════════ PANEL AGENTES DO NEGÓCIO — Sala Pública (limpo, profissional) ════════════════════════════════════════════════════════════════ */ #agents-panel-container, .conf-agents-nota{ color:#b7c4b4; } .conf-agents-nota{ font-size:11px; line-height:1.5; margin:12px 0 0; color:#8fa08c; } /* Colaboradores virtuais — topo do perfil do dono */ /* Composer do chat público — ícones limpos (estilo privada) */ .agents-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:4px 0 12px; margin-bottom:12px; border-bottom:1px solid rgba(85,201,0,.18); } .agents-header-text{ min-width:0; display:grid; gap:3px; } .agents-header strong{ font-size:14px; color:#e7ffe0; letter-spacing:.01em; font-weight:850; } .agents-header small{ display:block; font-size:11px; line-height:1.4; color:#8fa08c; } .agents-header-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex:none; } .agents-owner-presence{ width:100%; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; font-size:11px; color:#bcd0b9; } .agents-owner-presence label{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } .agents-owner-presence select{ min-height:30px; padding:0 8px; border:1px solid rgba(85,201,0,.28); border-radius:7px; background:#0b160d; color:#eaffd8; font:inherit; } .agents-auto-attention input{ accent-color:#55c900; } .agents-plan-badge, .agents-count-badge{ font-size:10px; font-weight:800; padding:3px 8px; border-radius:7px; letter-spacing:.04em; } .agents-plan-premium{ background:rgba(85,201,0,.16); border:1px solid rgba(85,201,0,.4); color:#b8f070; } .agents-plan-basic{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); color:#9aa89a; } .agents-count-badge{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:#c5d6c2; } .agents-upgrade-notice{ font-size:12px; color:#b7c4b4; margin:0 0 12px; line-height:1.5; padding:9px 11px; background:rgba(85,201,0,.06); border:1px solid rgba(85,201,0,.18); border-radius:10px; } .agents-empty{ font-size:13px; color:#8fa08c; text-align:center; padding:20px 0; } .agents-list{ display:grid; gap:8px; } .agent-card{ position:relative; background:rgba(8,16,10,.72); border:1px solid rgba(85,201,0,.14); border-radius:12px; padding:12px 12px 10px; transition:border-color .18s ease, background .18s ease; } .agent-card--active{ background:rgba(12,24,14,.88); border-color:rgba(85,201,0,.42); } .agent-card--locked{ opacity:.55; } .agent-card-top{ display:flex; align-items:flex-start; gap:11px; } .agent-icon{ flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(85,201,0,.22); background:rgba(85,201,0,.08); color:#9fe05a; } .agent-icon svg{ width:20px; height:20px; display:block; } .agent-card--active .agent-icon{ border-color:rgba(85,201,0,.5); background:rgba(85,201,0,.14); color:#c8ff8a; } .agent-info{ flex:1; min-width:0; } .agent-name{ display:block; font-size:13px; color:#eaffd8; font-weight:800; margin-bottom:3px; } .agent-desc{ font-size:11px; color:#8fa08c; margin:0; line-height:1.4; } .agent-controls{ flex:none; } .agent-toggle{ display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:0 10px; border-radius:8px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:#9aa89a; font-size:10px; font-weight:850; letter-spacing:.04em; cursor:pointer; transition:border-color .18s ease, background .18s ease, color .18s ease; } .agent-toggle i{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55; } .agent-toggle:hover{ border-color:rgba(85,201,0,.45); color:#d7ffb0; } .agent-toggle--on{ background:rgba(85,201,0,.14); border-color:rgba(85,201,0,.48); color:#b8f070; } .agent-toggle--on i{ opacity:1; background:#55c900; } .agent-lock-badge{ font-size:10px; color:#8fa08c; padding:4px 8px; border:1px solid rgba(255,255,255,.12); border-radius:8px; white-space:nowrap; } .agent-card-status{ display:flex; align-items:center; gap:7px; margin-top:9px; font-size:10.5px; color:#7f917c; } .agent-status-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; } .agent-status-dot--active { background:#55c900; } .agent-status-dot--inactive{ background:#3a4a3a; } .agent-status-dot--error { background:#ef5350; } .agent-status-dot--loading { background:#c4a35a; animation:agent-dot-pulse 1s infinite; } .agent-last-action{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .agent-proposals-btn{ background:rgba(85,201,0,.1); color:#c8f090; border:1px solid rgba(85,201,0,.28); border-radius:8px; font-size:10px; font-weight:750; padding:3px 8px; cursor:pointer; white-space:nowrap; } .agent-proposals-btn:hover{ background:rgba(85,201,0,.18); } .agent-card-skills{ margin-top:9px; display:flex; flex-wrap:wrap; gap:5px; } .agent-skill-tag{ font-size:10px; font-weight:650; background:rgba(255,255,255,.03); color:#b7cfc0; border:1px solid rgba(255,255,255,.08); border-radius:6px; padding:2px 7px; font-family:inherit; } .agent-phase-tag{ position:absolute; top:10px; right:12px; font-size:9px; color:#6f806c; letter-spacing:.04em; display:none; } .agent-proposals-popup{ background:rgba(7,14,9,.96); border:1px solid rgba(85,201,0,.28); border-radius:12px; padding:12px 14px; margin-top:8px; } .agent-proposals-popup header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .agent-proposals-popup header strong{ font-size:12px; color:#d8ffb0; } .agent-popup-close{ background:none; border:none; color:#8fa08c; font-size:18px; cursor:pointer; line-height:1; padding:0 3px; } .agent-popup-close:hover{ color:#d8ffb0; } .agent-proposals-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; } .agent-proposal-item{ background:rgba(255,255,255,.03); border:1px solid rgba(85,201,0,.14); border-radius:9px; padding:8px 10px; display:flex; justify-content:space-between; align-items:center; gap:8px; } .proposal-preview{ font-size:11px; color:#c5d6c2; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .proposal-actions{ display:flex; gap:5px; flex-shrink:0; } .proposal-btn-approve, .proposal-btn-reject{ font-size:10.5px; font-weight:750; padding:4px 10px; border-radius:8px; cursor:pointer; border:1px solid transparent; } .proposal-btn-approve{ background:rgba(85,201,0,.16); color:#c8f090; border-color:rgba(85,201,0,.4); } .proposal-btn-reject{ background:rgba(239,83,80,.1); color:#ffc1c1; border-color:rgba(239,83,80,.3); } .gaba3-price-now{ color:#d8ffb0; font-weight:800; margin-right:6px; } .gaba3-price-was{ color:#7f917c; text-decoration:line-through; margin-right:6px; font-size:.92em; } .gaba3-price-off{ display:inline-block; padding:1px 6px; border-radius:6px; background:rgba(85,201,0,.16); color:#b8f070; font-size:10px; font-weight:850; } .gaba3-offer-card{ min-width:160px; padding:10px 12px; border:1px solid rgba(85,201,0,.22); border-radius:10px; background:rgba(8,16,10,.85); color:#e7ffe0; } .gaba3-offer-card.is-main{ border-color:rgba(85,201,0,.5); } .gaba3-offer-title{ display:block; font-size:12px; margin-bottom:4px; } .gaba3-offer-body{ margin:0 0 6px; font-size:11px; color:#9bb29a; line-height:1.35; } .gaba3-offer-cta{ font-size:10px; font-weight:800; color:#b8f070; letter-spacing:.04em; text-transform:uppercase; } .mensaje-agente{ margin:8px 0; padding:8px 10px; border-radius:10px; border:1px solid rgba(85,201,0,.22); background:rgba(85,201,0,.08); color:#e7ffe0; } .mensaje-agente strong{ display:block; font-size:11px; color:#b8f070; margin-bottom:3px; } .mensaje-agente p{ margin:0; font-size:12px; line-height:1.4; } .mensaje-agente small{ display:block; margin-top:4px; color:#8fa08c; font-size:10px; } @keyframes agent-dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } } @media(max-width:480px){ .agent-card-top{ gap:8px; } .agent-icon{ width:32px; height:32px; } .agent-icon svg{ width:18px; height:18px; } .agents-header{ flex-direction:column; align-items:stretch; } .agents-header-meta{ flex-direction:row; justify-content:flex-start; } } /* ════════════════════════════════════════════════════════════════ VÍDEOS CURTOS — Layout redesenhado (classes .sv-*) Mobile-first · pt-BR · Vídeo como protagonista ════════════════════════════════════════════════════════════════ */ /* ── Reset da página — elimina textura de madeira em telas de vídeo ── */ .shorts-page{ margin:0!important; padding:0!important; /* Sobrepõe o background-image de madeira da regra legada (.shorts-page linha 5307) */ background-color:#060b08!important; background-image:none!important; background-attachment:initial!important; overflow:hidden!important; height:100dvh!important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important; -webkit-font-smoothing:antialiased!important; } /* ── Cabeçalho (oculto no celular) ── */ .sv-header{ position:fixed; top:0;left:0;right:0; z-index:20; display:none; align-items:center; gap:14px; padding:0 20px; height:58px; background:rgba(6,10,8,.96); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.07); } .sv-logo-img{ width:36px;height:36px; border-radius:50%; object-fit:contain; } .sv-heading{ font-size:15px; font-weight:400; color:#d8e8d4; letter-spacing:.15px; } .sv-back-link{ margin-left:auto; font-size:12px; font-weight:500; color:#7adf40; text-decoration:none; white-space:nowrap; } .sv-back-link:hover{ color:#9af860; } /* ── Feed: scroll-snap full-screen ── */ .sv-feed{ position:fixed!important; inset:0!important; overflow-y:scroll!important; overflow-x:hidden!important; scroll-snap-type:y mandatory!important; scrollbar-width:none!important; -ms-overflow-style:none!important; } .sv-feed::-webkit-scrollbar{ display:none; } /* ── Item (cada vídeo ocupa 100dvh) ── */ .sv-item{ position:relative!important; width:100%!important; height:100dvh!important; scroll-snap-align:start!important; overflow:hidden!important; background:#080c0a!important; } /* ── Aviso honesto: sem nenhum vídeo real publicado ainda ── */ .sv-empty-state[hidden]{ display:none!important; } .sv-empty-state{ position:relative!important; width:100%!important; height:100dvh!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:0 32px!important; background:#080c0a!important; box-sizing:border-box!important; } .sv-empty-state p{ margin:0!important; color:#c9d4cc!important; font-size:15px!important; line-height:1.5!important; text-align:center!important; max-width:320px!important; } /* ── Mídia (vídeo ou imagem cobre tudo) ── */ .sv-media{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; display:block!important; background:var(--sv-bg,#111)!important; } .sv-placeholder{ background:var(--sv-bg,linear-gradient(170deg,#080e0a,#0f2015))!important; } /* ── Gradiente de legibilidade ── */ .sv-gradient{ position:absolute!important; inset:0!important; z-index:1!important; pointer-events:none!important; background:linear-gradient( to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.18) 48%, transparent 100% )!important; } /* ── Meta (criador + título) — canto inferior esquerdo ── */ .sv-meta{ position:absolute!important; z-index:3!important; left:14px!important; right:74px!important; bottom:calc(20px + env(safe-area-inset-bottom,0px))!important; display:grid!important; gap:9px!important; } /* ── Linha do criador ── */ .sv-creator{ display:flex!important; align-items:center!important; gap:8px!important; flex-wrap:nowrap!important; } .sv-avatar{ width:34px!important;height:34px!important; border-radius:50%!important; border:1.5px solid rgba(255,255,255,.72)!important; background:#1a3a22!important; color:#e0f0d8!important; font-size:11px!important; font-weight:500!important; display:grid!important; place-items:center!important; flex-shrink:0!important; overflow:hidden!important; } .sv-avatar-blue{ background:#182244!important; } .sv-avatar-rose{ background:#38102a!important; } .sv-creator-name{ font-size:14px!important; font-weight:500!important; color:#fff!important; letter-spacing:.05px!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; max-width:130px!important; } .sv-follow-btn{ margin-left:4px!important; padding:5px 13px!important; border-radius:20px!important; border:1.5px solid rgba(255,255,255,.78)!important; background:transparent!important; color:#fff!important; font-size:12px!important; font-weight:500!important; cursor:pointer!important; white-space:nowrap!important; transition:background .18s,border-color .18s,color .18s!important; flex-shrink:0!important; } .sv-follow-btn.sv-following{ background:rgba(85,201,0,.18)!important; border-color:#55c900!important; color:#7adf40!important; } .sv-followers-btn{ cursor:default!important; } /* ── Título (máx 2 linhas) ── */ .sv-title{ font-size:15px!important; font-weight:400!important; line-height:1.35!important; color:#fff!important; margin:0!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; text-shadow:0 1px 4px rgba(0,0,0,.6)!important; } /* ── Links de destino da sala (via shortsFeed) ── */ .sv-room-links{ display:flex!important; flex-wrap:wrap!important; gap:5px!important; margin-top:3px!important; } .sv-room-links a{ font-size:11px!important; font-weight:500!important; color:#9af860!important; background:rgba(0,0,0,.45)!important; backdrop-filter:blur(6px)!important; padding:5px 10px!important; border-radius:8px!important; text-decoration:none!important; border:1px solid rgba(85,201,0,.28)!important; white-space:nowrap!important; } .sv-description{margin:.4rem 0 0;color:#e7efe5;font-size:.88rem;line-height:1.35;max-width:34rem} .sv-comments-empty{padding:1.25rem .2rem;color:#a8b6a5;text-align:center} .sv-toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10020;background:#102217;color:#f3fff1;border:1px solid #4b7d49;border-radius:999px;padding:.65rem 1rem;font-size:.85rem;box-shadow:0 8px 24px #0008} .sv-pub-field textarea{min-height:74px;resize:vertical} /* ── Botões de ação (coluna direita) ── */ .sv-actions{ position:absolute!important; z-index:3!important; right:8px!important; bottom:calc(18px + env(safe-area-inset-bottom,0px))!important; display:flex!important; flex-direction:column!important; align-items:center!important; gap:14px!important; } .sv-action-btn{ display:flex!important; flex-direction:column!important; align-items:center!important; gap:4px!important; background:none!important; border:none!important; color:#fff!important; cursor:pointer!important; padding:0!important; min-width:50px!important; -webkit-tap-highlight-color:transparent!important; } .sv-action-icon{ display:grid!important; place-items:center!important; width:46px!important; height:46px!important; border-radius:50%!important; border:1px solid rgba(255,255,255,.22)!important; background:rgba(0,0,0,.42)!important; backdrop-filter:blur(8px)!important; color:#fff!important; transition:background .16s,border-color .16s,transform .1s!important; } .sv-action-icon svg{ width:22px!important; height:22px!important; pointer-events:none!important; } /* Curtir/Salvar preenchem o ícone quando ativos — mesma linguagem visual de "curtido" que apps de vídeo já usam. */ .sv-action-btn.sv-active .sv-action-icon svg path, .sv-save-btn.sv-active .sv-action-icon svg path{ fill:currentColor!important; } .sv-action-btn:active .sv-action-icon{ transform:scale(.88)!important; } .sv-action-btn.sv-active .sv-action-icon{ background:rgba(85,201,0,.24)!important; border-color:rgba(85,201,0,.6)!important; box-shadow:0 0 12px rgba(85,201,0,.3)!important; } .sv-save-btn.sv-active .sv-action-icon{ background:rgba(255,193,7,.18)!important; border-color:rgba(255,193,7,.5)!important; } .sv-share-btn.sv-active .sv-action-icon{ background:rgba(85,201,0,.18)!important; border-color:rgba(85,201,0,.45)!important; } .sv-action-count{ font-size:11px!important; font-weight:400!important; color:#dae8d4!important; line-height:1!important; letter-spacing:.1px!important; } /* ── Indicador de play/pause ── */ .sv-play-indicator{ position:absolute!important; z-index:4!important; top:50%!important;left:50%!important; width:58px!important;height:58px!important; border-radius:50%!important; background:rgba(0,0,0,.52)!important; color:#fff!important; font-size:26px!important; display:grid!important; place-items:center!important; transform:translate(-50%,-50%) scale(.7)!important; opacity:0!important; pointer-events:none!important; transition:opacity .14s,transform .14s!important; } .sv-play-indicator.sv-show{ opacity:1!important; transform:translate(-50%,-50%) scale(1)!important; } /* ══ FAB — Publicar vídeo ═════════════════════════════════════ */ .sv-fab{ position:fixed!important; z-index:10!important; right:max(16px,env(safe-area-inset-right,16px))!important; top:calc(16px + env(safe-area-inset-top,0px))!important; width:54px!important;height:54px!important; border-radius:50%!important; border:none!important; background:linear-gradient(135deg,#3ab500,#55c900)!important; color:#051406!important; cursor:pointer!important; display:grid!important; place-items:center!important; box-shadow:0 4px 22px rgba(85,201,0,.45)!important; transition:transform .15s,box-shadow .15s!important; -webkit-tap-highlight-color:transparent!important; } .sv-fab:hover,.sv-fab:focus-visible{ transform:scale(1.08)!important; box-shadow:0 6px 30px rgba(85,201,0,.6)!important; } .sv-fab:active{ transform:scale(.93)!important; } /* ══ Tela de publicação ══════════════════════════════════════ */ .sv-publish{ position:fixed!important; inset:0!important; z-index:50!important; background:#07100a!important; display:flex!important; flex-direction:column!important; transform:translateY(100%)!important; transition:transform .3s cubic-bezier(.4,0,.2,1)!important; overflow-y:auto!important; } .sv-publish--open{ transform:translateY(0)!important; } [hidden].sv-publish{ display:none!important; } .sv-pub-hdr{ display:flex!important; align-items:center!important; justify-content:space-between!important; padding:12px 16px!important; border-bottom:1px solid rgba(255,255,255,.09)!important; font-size:16px!important; font-weight:400!important; color:#d8e8d4!important; gap:8px!important; flex-shrink:0!important; } .sv-pub-back{ display:grid!important; place-items:center!important; width:36px!important;height:36px!important; border:none!important;background:none!important; color:#7adf40!important; cursor:pointer!important; border-radius:50%!important; padding:0!important; flex-shrink:0!important; } .sv-pub-back:hover{ background:rgba(85,201,0,.1)!important; } .sv-pub-body{ display:flex!important; flex-direction:column!important; gap:20px!important; padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))!important; flex:1!important; } .sv-pub-preview{ width:100%!important; max-height:36vh!important; max-width:190px!important; border-radius:12px!important; background:#0a130b!important; object-fit:contain!important; aspect-ratio:9/16!important; display:block!important; margin:0 auto!important; } .sv-pub-fields{ display:grid!important; gap:14px!important; } .sv-pub-field{ display:grid!important; gap:6px!important; font-size:12.5px!important; font-weight:400!important; color:#8ab088!important; } .sv-pub-field em{ font-style:normal!important; font-size:11px!important; color:#5a6a58!important; } .sv-pub-field input, .sv-pub-field select{ padding:11px 14px!important; border-radius:10px!important; border:1px solid rgba(255,255,255,.1)!important; background:rgba(255,255,255,.05)!important; color:#d8e8d4!important; font-size:14px!important; font-weight:300!important; outline:none!important; transition:border-color .18s!important; width:100%!important; box-sizing:border-box!important; } .sv-pub-field input:focus, .sv-pub-field select:focus{ border-color:rgba(85,201,0,.55)!important; } .sv-pub-field input.sv-field-error{ border-color:rgba(229,57,53,.6)!important; } .sv-pub-field select option{ background:#0e1a10; } .sv-pub-submit{ padding:14px!important; border-radius:12px!important; border:none!important; background:linear-gradient(135deg,#3ab500,#55c900)!important; color:#051406!important; font-size:15px!important; font-weight:600!important; cursor:pointer!important; transition:filter .15s!important; margin-top:4px!important; } .sv-pub-submit:hover{ filter:brightness(1.08)!important; } .sv-pub-submit:disabled{ opacity:.6!important;cursor:not-allowed!important; } /* ══ Gaveta de comentários ═══════════════════════════════════ */ .sv-comments-bg{ position:fixed!important; inset:0!important; z-index:40!important; background:rgba(0,0,0,.48)!important; } [hidden].sv-comments-bg{ display:none!important; } .sv-comments{ position:fixed!important; z-index:45!important; left:0!important;right:0!important;bottom:0!important; height:min(62dvh,520px)!important; background:#0d150f!important; border-radius:16px 16px 0 0!important; display:flex!important; flex-direction:column!important; transform:translateY(100%)!important; transition:transform .28s cubic-bezier(.4,0,.2,1)!important; } .sv-comments--open{ transform:translateY(0)!important; } [hidden].sv-comments{ display:none!important; } .sv-comments-handle{ width:36px!important;height:4px!important; border-radius:2px!important; background:rgba(255,255,255,.18)!important; margin:10px auto 0!important; flex-shrink:0!important; } .sv-comments-hdr{ display:flex!important; align-items:center!important; justify-content:space-between!important; padding:10px 16px 8px!important; border-bottom:1px solid rgba(255,255,255,.07)!important; font-size:13px!important; font-weight:500!important; color:#c8dcc4!important; flex-shrink:0!important; } .sv-comments-x{ background:none!important;border:none!important; color:#7a8a78!important; font-size:18px!important;cursor:pointer!important; line-height:1!important;padding:2px 5px!important; } .sv-comments-x:hover{ color:#c8dcc4!important; } .sv-comments-list{ flex:1!important; overflow-y:auto!important; padding:10px 14px!important; display:grid!important; gap:12px!important; align-content:start!important; } .sv-cmt{ display:flex!important; gap:9px!important; align-items:flex-start!important; } .sv-cmt-av{ width:30px!important;height:30px!important; border-radius:50%!important; background:#1a3a22!important; color:#9adf60!important; font-size:10px!important;font-weight:600!important; display:grid!important;place-items:center!important; flex-shrink:0!important; } .sv-cmt b{ font-size:12.5px;font-weight:500;color:#c8dcc4;display:block; } .sv-cmt-del{ margin-left:auto!important; flex-shrink:0!important; border:0!important; background:transparent!important; color:#8a9a86!important; font-size:13px!important; padding:4px!important; cursor:pointer!important; line-height:1!important; } .sv-cmt-del:hover{ color:#ff8a6a!important; } .sv-cmt-report{ margin-left:auto!important; flex-shrink:0!important; border:0!important; background:transparent!important; color:#8a9a86!important; font-size:12px!important; padding:4px!important; cursor:pointer!important; line-height:1!important; opacity:.7; } .sv-cmt-report:hover{ opacity:1; } .sv-cmt p{ font-size:13px;font-weight:300;color:#8a9a88;margin:2px 0 0;line-height:1.4; } .sv-comments-bar{ display:flex!important; gap:8px!important; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))!important; border-top:1px solid rgba(255,255,255,.07)!important; flex-shrink:0!important; } .sv-cmt-input{ flex:1!important; padding:10px 14px!important; border-radius:24px!important; border:1px solid rgba(255,255,255,.1)!important; background:rgba(255,255,255,.05)!important; color:#d8e8d4!important; font-size:13px!important;font-weight:300!important; outline:none!important; } .sv-cmt-input:focus{ border-color:rgba(85,201,0,.4)!important; } .sv-cmt-send{ width:38px!important;height:38px!important; border-radius:50%!important;border:none!important; background:#55c900!important;color:#051406!important; font-size:15px!important;cursor:pointer!important; display:grid!important;place-items:center!important; flex-shrink:0!important; transition:filter .15s!important; } .sv-cmt-send:hover{ filter:brightness(1.1)!important; } /* ══ Dialog: vídeo > 2 minutos ═══════════════════════════════ */ .sv-dur-dialog{ border:1px solid rgba(255,255,255,.1)!important; border-radius:16px!important; background:#0d170f!important; color:#c8dcc4!important; padding:24px 22px!important; max-width:min(340px,92vw)!important; text-align:center!important; box-shadow:0 20px 60px rgba(0,0,0,.7)!important; } .sv-dur-dialog::backdrop{ background:rgba(0,0,0,.68); } .sv-dur-dialog strong{ font-size:16px;font-weight:500;color:#e8f0e4; } .sv-dur-sub{ font-size:13px;font-weight:300; color:#8a9a88;line-height:1.55; margin:10px 0 20px; } .sv-dur-btns{ display:grid;gap:10px; } .sv-dur-yes{ padding:13px!important; border-radius:10px!important;border:none!important; background:linear-gradient(135deg,#3ab500,#55c900)!important; color:#051406!important; font-size:14px!important;font-weight:500!important; cursor:pointer!important; transition:filter .15s!important; } .sv-dur-yes:hover{ filter:brightness(1.08)!important; } .sv-dur-no{ padding:11px!important; border-radius:10px!important; border:1px solid rgba(255,255,255,.13)!important; background:transparent!important; color:#8a9a88!important; font-size:13px!important;font-weight:400!important; cursor:pointer!important; } .sv-dur-no:hover{ color:#c8dcc4!important; } /* ══ Tela larga: centralizar feed em coluna de 420px ════════ */ @media(min-width:640px){ .sv-header{ display:flex!important; } .sv-feed{ top:58px!important; left:50%!important; right:auto!important; width:min(420px,100vw)!important; transform:translateX(-50%)!important; height:calc(100dvh - 58px)!important; } .sv-item{ height:calc(100dvh - 58px)!important; } .sv-fab{ /* Posicionar relativo ao feed centralizado */ right:calc(50% - 210px + 16px)!important; } .sv-pub-body{ flex-direction:row!important; align-items:flex-start!important; max-width:600px!important; margin:0 auto!important; } .sv-pub-preview{ max-width:200px!important; flex-shrink:0!important; max-height:45vh!important; } .sv-comments{ max-width:460px!important; left:50%!important;right:auto!important; transform:translateX(-50%) translateY(100%)!important; border-radius:16px!important; } .sv-comments--open{ transform:translateX(-50%) translateY(0)!important; } } /* ══ Segurança Android: sem overflow, sem texto cortado ════ */ .sv-feed,.sv-item{ overflow-x:hidden!important; } .sv-creator-name{ max-width:min(130px,35vw)!important; } .sv-title{ word-break:break-word!important; } /* ════════════════════════════════════════════════════════════════ VÍDEOS CURTOS — Layout desktop (substitui coluna estreita) 3 colunas: info | vídeo | controles ════════════════════════════════════════════════════════════════ */ @media(min-width:640px){ /* Feed: largura total da janela, sem coluna estreita */ .sv-feed{ top:58px!important; left:0!important; right:0!important; width:100vw!important; transform:none!important; height:calc(100dvh - 58px)!important; } /* Item: flex linha, elementos lado a lado */ .sv-item{ height:calc(100dvh - 58px)!important; display:flex!important; flex-direction:row!important; align-items:stretch!important; justify-content:center!important; gap:max(24px,2.5vw)!important; padding:0 max(20px,4vw)!important; background:#060b08!important; overflow:hidden!important; } /* Mídia: posição normal no fluxo flex, aspecto 9:16 */ .sv-media{ position:static!important; flex-shrink:0!important; order:2!important; width:auto!important; height:min(86vh,900px)!important; aspect-ratio:9/16!important; max-width:min(520px,36vw)!important; object-fit:cover!important; border-radius:18px!important; box-shadow:0 24px 64px rgba(0,0,0,.65)!important; align-self:center!important; } /* Gradiente: desnecessário — info está fora do vídeo */ .sv-gradient{ display:none!important; } /* Indicador de play: centralizado no viewport (sobre o vídeo) */ .sv-play-indicator{ position:fixed!important; top:50%!important; left:50%!important; transform:translate(-50%,-50%) scale(.7)!important; z-index:99!important; } .sv-play-indicator.sv-show{ transform:translate(-50%,-50%) scale(1)!important; } /* Meta (info do criador): coluna esquerda, alinha ao rodapé */ .sv-meta{ position:static!important; inset:auto!important; order:1!important; flex-shrink:0!important; width:clamp(180px,20vw,260px)!important; display:flex!important; flex-direction:column!important; justify-content:flex-end!important; padding-bottom:max(5vh,36px)!important; gap:10px!important; align-self:stretch!important; } /* Criador: empilhado verticalmente no desktop */ .sv-creator{ flex-direction:column!important; align-items:flex-start!important; gap:10px!important; } .sv-avatar{ width:40px!important;height:40px!important; font-size:13px!important; } .sv-creator-name{ font-size:clamp(14px,1.1vw,16px)!important; font-weight:500!important; max-width:100%!important; white-space:normal!important; } .sv-follow-btn{ margin-left:0!important; align-self:flex-start!important; } .sv-title{ font-size:clamp(14px,1.15vw,18px)!important; font-weight:400!important; color:#e8f4e4!important; text-shadow:none!important; -webkit-line-clamp:2!important; } .sv-room-links{ display:flex!important; } /* Controles: coluna direita, verticais centralizados */ .sv-actions{ position:static!important; inset:auto!important; order:3!important; flex-shrink:0!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; align-self:center!important; gap:20px!important; } .sv-action-btn{ min-width:56px!important; } .sv-action-icon{ width:52px!important;height:52px!important; font-size:22px!important; background:rgba(255,255,255,.08)!important; border:1px solid rgba(255,255,255,.14)!important; backdrop-filter:none!important; } .sv-action-icon:hover{ background:rgba(255,255,255,.15)!important; } .sv-action-count{ font-size:clamp(10px,.9vw,12px)!important; color:#c8d8c4!important; } /* FAB: canto superior direito fixo (não sobrepõe título/ações embaixo) */ .sv-fab{ right:max(24px,2vw)!important; top:max(20px,2vh)!important; } /* Gaveta de comentários: centralizada */ .sv-comments{ max-width:480px!important; left:50%!important;right:auto!important; transform:translateX(-50%) translateY(100%)!important; border-radius:16px 16px 0 0!important; } .sv-comments--open{ transform:translateX(-50%) translateY(0)!important; } } /* ── Desktop: correções adicionais ────────────────────────────── Garantir que o layout flex não seja cortado pelo overflow:hidden e que o texto não fique com max-width de celular no desktop. ────────────────────────────────────────────────────────────── */ @media(min-width:640px){ /* Não cortar o layout flex */ .sv-item{ overflow:visible!important; } /* Nome do criador: texto em duas linhas se necessário */ .sv-creator-name{ white-space:normal!important; max-width:100%!important; overflow:visible!important; text-overflow:unset!important; } /* Remover max-width restritivo do celular */ .sv-creator-name{ max-width:220px!important; } } /* ════════════════════════════════════════════════════════════════════ VÍDEOS CURTOS — DESKTOP EXCLUSIVO (.sv-dsk-*) Layout completamente separado do mobile. Ativo apenas em >= 640 px. Mobile usa .sv-feed (unchanged). ════════════════════════════════════════════════════════════════════ */ /* ── Por padrão ocultar estrutura desktop (mobile-first) ── */ .sv-dsk-bar, .sv-dsk-layout { display: none !important; } /* ════════════════════════════════════════════════════════════════════ DESKTOP: >= 640 px - Restaurar fundo de madeira no body - Ocultar sv-feed (mobile) - Mostrar sv-dsk-bar e sv-dsk-layout ════════════════════════════════════════════════════════════════════ */ @media (min-width: 640px) { /* ── Página: fundo de madeira GABA3 ─────────────────────── */ .shorts-page { background-color: #1a1005 !important; background-image: linear-gradient(180deg, rgba(18,10,3,.80) 0%, rgba(12,7,2,.72) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E") !important; overflow: auto !important; height: auto !important; min-height: 100dvh !important; --sv-header-h: 62px; } /* ── Ocultar feed mobile no desktop ─────────────────────── */ .sv-feed { display: none !important; } /* ── Mostrar header e layout desktop ─────────────────────── */ .sv-dsk-bar { display: flex !important; } .sv-dsk-layout { display: flex !important; } /* ══════════════════════════════════════════════════════════ HEADER DESKTOP — sv-dsk-bar Barra superior de madeira com logo, busca e ícones ══════════════════════════════════════════════════════════ */ .sv-dsk-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--sv-header-h, 62px); align-items: center; gap: 16px; padding: 0 20px; background: linear-gradient(180deg, rgba(20,12,4,.4) 0%, rgba(6,4,2,.65) 100%), url("/assets/brand/fondo-madera-gaba3.png") center/cover no-repeat; border-bottom: 1px solid #7A4E27; box-shadow: 0 2px 18px rgba(0,0,0,.45); } /* Logo / Marca */ .sv-dsk-marca { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .sv-dsk-logo-link { position: relative; display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 5px 12px 5px 8px; } .sv-dsk-logo-img { width: 32px; height: 32px; object-fit: cover; border-radius: 50%; border: 1px solid rgba(255,255,255,.15); } .sv-dsk-logo-nome { font-size: 1.1rem; font-weight: 800; letter-spacing: .15em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .sv-dsk-secao-label { font-size: .8rem; font-weight: 600; color: #fff; opacity: .85; letter-spacing: .08em; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.25); } /* Buscador */ .sv-dsk-busca { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.35); transition: border-color .2s, box-shadow .2s; } .sv-dsk-busca:focus-within { border-color: #55c900; background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px rgba(85,201,0,.2); } .sv-dsk-busca-lupa { flex-shrink: 0; color: #fff; transition: color .2s; } .sv-dsk-busca:focus-within .sv-dsk-busca-lupa { color: #55c900; } .sv-dsk-busca-input { flex: 1; background: none; border: none; outline: none; color: #e8d5b0; font-size: .9rem; caret-color: #55c900; } .sv-dsk-busca-input::placeholder { color: #6a5535; } /* Ícones direita */ .sv-dsk-icons { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; } .sv-dsk-criar-sala { padding: 7px 14px; border-radius: 10px; border: 1px solid rgba(85,201,0,.35); background: rgba(85,201,0,.1); color: #7af040; font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .2s; } .sv-dsk-criar-sala:hover { background: rgba(85,201,0,.18); } .sv-dsk-icon-btn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,.05); cursor: pointer; color: #b8a070; transition: background .2s, color .2s; } .sv-dsk-icon-btn:hover { background: rgba(255,255,255,.11); color: #e8d5b0; } .sv-dsk-icon-emoji { display: grid; place-items: center; } .sv-dsk-icon-emoji svg { width: 20px; height: 20px; } .sv-dsk-icon-svg { display: block; } .sv-dsk-badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #c0392b; color: #fff; font-size: .6rem; font-weight: 700; display: grid; place-items: center; } .sv-dsk-perfil-btn { background: rgba(85,201,0,.08); } .sv-dsk-perfil-btn:hover { background: rgba(85,201,0,.16); } .sv-dsk-avatar-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(85,201,0,.15); border: 1.5px solid rgba(85,201,0,.3); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #55c900; overflow: hidden; } .sv-dsk-hamburger { width: 38px; height: 38px; border-radius: 10px; border: none; background: rgba(255,255,255,.05); color: #b8a070; font-size: 1.1rem; cursor: pointer; transition: background .2s; } .sv-dsk-hamburger:hover { background: rgba(255,255,255,.1); } /* ══════════════════════════════════════════════════════════ LAYOUT DESKTOP — sv-dsk-layout Flex row: sidebar | center | actions ══════════════════════════════════════════════════════════ */ .sv-dsk-layout { margin-top: var(--sv-header-h, 62px); height: calc(100dvh - var(--sv-header-h, 62px)); width: 100%; align-items: stretch; overflow: hidden; } /* ── Menu compacto à DIREITA ───────────────────────────── */ .sv-dsk-sidebar { width: 200px; flex-shrink: 0; display: flex; flex-direction: column; padding: 16px 0; border-left: 1px solid rgba(180,120,50,.15); border-right: 0; background: rgba(10,6,2,.45); overflow-y: auto; scrollbar-width: none; order: 3; } .sv-dsk-center { order: 1; } .sv-dsk-actions-col { order: 2; } .sv-dsk-sidebar::-webkit-scrollbar { display: none; } .sv-dsk-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; } .sv-dsk-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; text-decoration: none; font-size: .78rem; font-weight: 500; letter-spacing: .01em; color: #8a7050; transition: background .2s, color .2s; white-space: nowrap; } .sv-dsk-nav-item:hover { background: rgba(255,255,255,.06); color: #c8a870; } .sv-dsk-nav-item--ativo { background: rgba(85,201,0,.1); color: #7af040; font-weight: 500; } .sv-dsk-nav-item--ativo:hover { background: rgba(85,201,0,.15); } .sv-dsk-nav-icon { flex-shrink: 0; width: 18px; height: 18px; display: grid; place-items: center; color: inherit; } .sv-dsk-nav-icon svg { display: block; } .sv-dsk-nav-hr { border: none; border-top: 1px solid rgba(180,120,50,.15); margin: 8px 0; } /* ── Coluna central: setas + player ──────────────────── */ .sv-dsk-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 24px; position: relative; overflow: hidden; } /* Setas de navegação */ .sv-dsk-arrow { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: 20px; border: 1px solid rgba(180,120,50,.22); background: rgba(255,255,255,.05); color: #b8a070; font-size: .82rem; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; } .sv-dsk-arrow:hover:not(:disabled) { background: rgba(180,120,50,.12); color: #e8d5b0; border-color: rgba(180,120,50,.4); } .sv-dsk-arrow:disabled { opacity: .28; cursor: default; } /* Player: container do vídeo */ .sv-dsk-player { position: relative; flex-shrink: 0; } /* Slot de mídia */ .sv-dsk-media-slot { width: min(38vw, 480px); aspect-ratio: 9 / 16; max-height: min(76vh, 820px); border-radius: 18px; overflow: hidden; background: #080c0a; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); cursor: pointer; } .sv-dsk-video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 18px; } .sv-dsk-ph { width: 100%; height: 100%; background: #080c0a; border-radius: 18px; } .sv-dsk-placeholder-vazio { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3rem; color: rgba(255,255,255,.18); } /* Indicador play/pause sobre o vídeo */ .sv-dsk-play-indicator { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.6); width: 60px; height: 60px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 1.5rem; display: grid; place-items: center; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; z-index: 5; } .sv-dsk-pi-show { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } /* Info do criador: overlaid bottom-left do vídeo */ .sv-dsk-creator-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 16px 14px; background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, transparent 100%); border-radius: 0 0 18px 18px; pointer-events: none; } .sv-dsk-creator-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; pointer-events: auto; } .sv-dsk-creator-av { width: 34px; height: 34px; border-radius: 50%; background: rgba(85,201,0,.2); border: 1.5px solid rgba(85,201,0,.35); display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #7af040; flex-shrink: 0; } .sv-dsk-av-blue { background: rgba(60,120,220,.22); border-color: rgba(100,160,255,.35); color: #80b8ff; } .sv-dsk-av-rose { background: rgba(220,60,100,.2); border-color: rgba(255,120,150,.3); color: #ff9ab8; } .sv-dsk-creator-nome { font-size: .875rem; font-weight: 500; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .sv-dsk-seguir-btn { padding: 4px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #fff; font-size: .78rem; font-weight: 500; cursor: pointer; transition: background .2s; white-space: nowrap; pointer-events: auto; } .sv-dsk-seguir-btn:hover { background: rgba(255,255,255,.22); } .sv-dsk-seguindo { background: rgba(85,201,0,.22) !important; border-color: rgba(85,201,0,.5) !important; color: #a8f060 !important; } .sv-dsk-titulo { margin: 0; font-size: .875rem; font-weight: 400; color: rgba(255,255,255,.88); text-shadow: 0 1px 4px rgba(0,0,0,.6); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; pointer-events: auto; } /* Contador */ .sv-dsk-counter { font-size: .72rem; color: #6a5535; letter-spacing: .06em; } /* ── Coluna direita: botões de ação ──────────────────── */ .sv-dsk-actions-col[hidden] { display: none !important; } .sv-dsk-actions-col { width: 80px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px 8px; } .sv-dsk-act-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; padding: 4px; } .sv-dsk-act-icon { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); transition: background .2s, border-color .2s, transform .1s; } .sv-dsk-act-icon svg{ width: 23px; height: 23px; pointer-events: none; } .sv-dsk-act-btn:hover .sv-dsk-act-icon { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); } .sv-dsk-act-btn:active .sv-dsk-act-icon { transform: scale(.9); } .sv-dsk-act-btn.sv-active .sv-dsk-act-icon { background: rgba(85,201,0,.18); border-color: rgba(85,201,0,.5); } .sv-dsk-act-btn.sv-active .sv-dsk-act-icon svg path{ fill: currentColor; } .sv-dsk-act-count { font-size: .7rem; font-weight: 400; color: #9a8060; white-space: nowrap; } /* FAB no desktop: canto inferior direito — sem "top:auto" aqui, o "top" da regra base (com "!important" + altura fixa) continuava ganhando e o botão nunca saía debaixo da cabeçalho fixa. */ .sv-fab { right: 24px !important; bottom: 28px !important; top: auto !important; } /* Gaveta de comentários: centralizada */ .sv-comments { max-width: 460px !important; left: 50% !important; right: auto !important; transform: translateX(-50%) translateY(100%) !important; border-radius: 16px 16px 0 0 !important; } .sv-comments--open { transform: translateX(-50%) translateY(0) !important; } } /* ── Ajuste para telas muito largas: limitar sidebar ──── */ @media (min-width: 1280px) { .sv-dsk-sidebar { width: 240px; } .sv-dsk-media-slot { width: min(32vw, 520px); } } /* ════════════════════════════════════════════════════════════════════ CORREÇÕES MÓVEIS — salas + vídeos curtos (sem redesenho) Corrige: franjas laterais, overflow, largura incompleta, safe-area Breakpoints alvo: 360×800 · 390×844 · 412×915 ════════════════════════════════════════════════════════════════════ */ /* ── Shorts: seta interna de voltar (apenas celular) ── */ .sv-back-interno{ display:none; position:fixed; z-index:60; top:calc(10px + env(safe-area-inset-top,0px)); left:calc(10px + env(safe-area-inset-left,0px)); width:40px;height:40px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:28px; font-weight:300; line-height:1; cursor:pointer; backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; } .sv-back-interno:active{ transform:scale(.94); } .pagina-sala .semi-nao-curtir{ min-height:36px;min-width:44px;padding:0 10px; border:1px solid #ffffff28;border-radius:9px; background:#172c46;color:#edf8ff;cursor:pointer;font-size:14px; } .pagina-sala .semi-nao-curtir.activo, .pagina-sala .semi-nao-curtir[aria-pressed="true"]{ border-color:#ff9a5a;background:#5a2a14;color:#ffd2b0; } @media (max-width:720px){ /* ════════ VÍDEOS CURTOS ════════ */ .shorts-page{ margin:0!important;padding:0!important; width:100%!important;max-width:100%!important; height:100dvh!important; overflow:hidden!important; background:#060b08!important; background-image:none!important; box-sizing:border-box!important; } .shorts-page *{ box-sizing:border-box; } .sv-dsk-bar,.sv-dsk-layout,.sv-header{ display:none!important; } .sv-feed{ display:block!important; position:fixed!important; inset:0!important; width:100%!important;max-width:none!important; height:100dvh!important; margin:0!important;padding:0!important; overflow-x:hidden!important; overflow-y:scroll!important; scroll-snap-type:y mandatory!important; -webkit-overflow-scrolling:touch!important; } .sv-item{ width:100%!important;max-width:none!important; height:100dvh!important;min-height:100dvh!important; margin:0!important;padding:0!important; border:0!important;border-radius:0!important; box-shadow:none!important; overflow:hidden!important; scroll-snap-align:start!important; background:#000!important; } .sv-media,.sv-placeholder{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important; max-width:none!important; object-fit:cover!important; border:0!important;border-radius:0!important; } .sv-room-links{ display:none!important; } .sv-meta{ left:12px!important; right:72px!important; bottom:calc(16px + env(safe-area-inset-bottom,0px))!important; padding-left:env(safe-area-inset-left,0px)!important; } .sv-actions{ right:max(6px,env(safe-area-inset-right,6px))!important; bottom:calc(76px + env(safe-area-inset-bottom,0px))!important; gap:12px!important; } .sv-action-icon{ width:50px!important;height:50px!important; } .sv-action-icon svg{ width:24px!important;height:24px!important; } .sv-creator-name{ font-size:clamp(14px,3.8vw,16px)!important; font-weight:500!important; max-width:min(140px,38vw)!important; } .sv-title{ font-size:clamp(15px,4vw,17px)!important; font-weight:400!important; -webkit-line-clamp:2!important; } .sv-action-count,.sv-follow-btn{ font-size:clamp(11px,3vw,13px)!important; font-weight:500!important; } /* FAB flutuante: removido do celular — a mesma ação de publicar já vive como ícone próprio (sv-upload-btn) na coluna de ações, junto com curtir/comentar/compartilhar/salvar. */ .sv-fab{ display:none!important; } .sv-back-interno{ display:grid!important; } /* ════════ SALAS — largura total, sem franjas ════════ */ .pagina-sala, .pagina-sala body{ max-width:100%!important; overflow-x:hidden!important; } .pagina-sala .sala-aplicacion, .pagina-sala .privada-aplicacion, .pagina-sala .privada-aplicacion.layout-una-pantalla{ width:100%!important; max-width:none!important; margin:0!important; padding:8px!important; padding-bottom:0!important; box-sizing:border-box!important; gap:8px!important; } /* Privada/semi: sem nav inferior — não reservar 56px mortos */ .pagina-sala .cabecera-sala{ width:100%!important; max-width:none!important; box-sizing:border-box!important; padding-left:max(10px,env(safe-area-inset-left,10px))!important; padding-right:max(10px,env(safe-area-inset-right,10px))!important; padding-top:calc(6px + env(safe-area-inset-top,0px))!important; } /* Vídeo principal — ocupa largura útil */ .pagina-sala .escenario-sala, .pagina-sala .pantalla-videollamada, .pagina-sala .semi-escenario{ width:100%!important; max-width:none!important; min-height:clamp(280px,52dvh,520px)!important; border-radius:12px!important; margin:0!important; box-sizing:border-box!important; overflow:hidden!important; } /* Borde inferior/derecho recto: línea donde nacen las miniaturas */ .pagina-sala .director-main-stage, .pagina-sala .director-main-stage img, .pagina-sala .director-main-stage video{ width:100%!important;height:100%!important; object-fit:cover!important; } /* Miniaturas L: enteras, en la línea, sin recorte */ .pagina-sala .thumbnails-overlay{ inset:0!important; overflow:visible!important; } .pagina-sala .thumbs-fila-abajo{ left:0!important;right:0!important;bottom:0!important; height:var(--thumb-h,51px)!important;padding:0!important;gap:0!important; overflow:visible!important; } .pagina-sala .thumbs-columna-derecha{ right:0!important; bottom:var(--thumb-h,51px)!important; top:auto!important; width:var(--thumb-w,68px)!important; max-height:calc(100% - var(--thumb-h,51px))!important; padding:0!important;gap:0!important; overflow:visible!important; } .pagina-sala .thumbnail-participante{ box-sizing:border-box!important; width:var(--thumb-w,68px)!important; height:var(--thumb-h,51px)!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; } .pagina-sala .thumbnail-participante video, .pagina-sala .thumbnail-participante img, .pagina-sala .thumbnail-participante canvas{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; object-fit:cover!important; } /* Chat / painéis — largura total */ .pagina-sala .panel-derecho-sala, .pagina-sala .chat-sala, .pagina-sala .semi-chat-sala{ width:100%!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; } .pagina-sala .form-chat{ padding-bottom:0!important; box-sizing:border-box!important; } .pagina-sala .pie-chat{ padding-bottom:max(6px, var(--gaba3-nav-inset-bottom, env(safe-area-inset-bottom, 0px)))!important; box-sizing:border-box!important; } .pagina-sala .herramientas-chat, .pagina-sala .acciones-salida{ flex-wrap:wrap!important; gap:6px!important; } /* Navegação interna acima da barra Android */ .navegacao-global-sala{ right:max(8px,env(safe-area-inset-right,8px))!important; bottom:calc(10px + env(safe-area-inset-bottom,0px))!important; left:auto!important; } /* ════════ PÚBLICA — coluna única largura total ════════ */ /* Corrige regra legada que escondia o catálogo ≤650px */ } /* Desktop: esconder seta interna dos shorts */ @media (min-width:721px){ .sv-back-interno{ display:none!important; } } /* Evitar padding inferior global no body das páginas de vídeo/sala (causa franja) */ @media (max-width:720px){ body.shorts-page{ padding-bottom:0!important; } body.pagina-sala{ padding-bottom:0!important; } } /* ════════════════════════════════════════════════════════════════════ APK / celular — anti-desborde, caixas alinhadas, painel e composer ════════════════════════════════════════════════════════════════════ */ /* Só o body corta o overflow-x — deixar html E body como scroll container ao mesmo tempo quebra o position:sticky do cabeçalho e das categorias (o navegador não sabe qual dos dois é a "âncora" do sticky). */ body{ max-width:100%; overflow-x:hidden; overflow-y:visible; } .gaba3-continue-banner{ position:fixed; z-index:1400; left:10px; right:10px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid rgba(85,201,0,.35); border-radius:14px; background:rgba(8,16,10,.94); color:#eaffd8; box-shadow:0 12px 36px #000a; backdrop-filter:blur(12px); } .gaba3-continue-copy{min-width:0;flex:1} .gaba3-continue-copy strong{display:block;font-size:13px} .gaba3-continue-copy small{display:block;margin-top:2px;color:#9bb896;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gaba3-continue-actions{display:flex;flex:none;align-items:center;gap:6px} .gaba3-continue-actions button{ min-height:34px;padding:0 10px; border:1px solid rgba(85,201,0,.4);border-radius:9px; background:rgba(85,201,0,.16);color:#dfffbc; font-size:11px;font-weight:800;cursor:pointer; } .gaba3-continue-dismiss{min-width:34px!important;padding:0!important;font-size:18px!important;background:#152017!important;border-color:#ffffff22!important} @media (max-width:720px){ *{ -webkit-tap-highlight-color:transparent; } img, video, canvas, svg{ max-width:100%; } /* Painel config: tela cheia ordenada */ .conf-panel{ width:100vw!important; max-width:100vw!important; top:0!important; right:0!important; bottom:0!important; left:0!important; border-left:0!important; border-radius:0!important; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain; box-sizing:border-box!important; } .conf-panel-header{ position:sticky; top:0; z-index:3; padding:12px 14px!important; background:rgba(10,14,10,.96); box-sizing:border-box; } .conf-panel-titulo{ font-size:16px!important; line-height:1.25!important; } /* Caixas catálogo / ofertas / chat alinhadas */ /* Composer: botões tocáveis e sem desborde */ /* Cabeçalho sem cortar nome / controles */ /* Modal criar sala no celular — o