/* =========================================================
   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%);
    /* Contraste AA (auditoria UX-07): o cinza-esverdeado antigo dava 1,24:1 sobre a madeira clara. */
    --texto-suave:#ece4d6;
    --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.webp?v=real1");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}
/* Portada principal (index.html, <body> 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 <html>, não o <body> — 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.webp?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;
}

.busqueda-interna{
    position:relative;
    width:100%;
}

.lienzo-busca-cabecera{display:none}

.cuenta-usuario{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:12px;
}

.boton-notificaciones,
.perfil-miniatura{
    flex:none;
    width:44px;
    height:44px;
    padding:0;
    display:grid;
    place-items:center;
    /* Achado real 2026-09-22 (o dono flagrou "desborde" na borda): um
       `border` normal entra na conta do box-sizing:border-box e come
       espaço da própria caixa — a foto (width/height:100% do conteúdo)
       nunca chegava a ocupar o círculo INTEIRO. Também precisa zerar o
       border NATIVO que o navegador põe sozinho em `<button>` (2px
       outset preto) — sem isso ele reaparece assim que se tira o border
       próprio, comendo espaço de novo do mesmo jeito. */
    border:0;
    outline:1px solid #ffffff17;
    border-radius:50%;
    background:#171827;
    cursor:pointer;
}
/* Pedido do dono 2026-09-22: a bolita com FOTO não pode ter nenhum anel
   de outra cor ao redor — só a imagem, ponto. .boton-notificaciones (sem
   foto, só ícone) mantém o anel sutil de cima; .perfil-miniatura zera. */
.perfil-miniatura{outline:0}

.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}

.perfil-miniatura{
    color:#fff;
    font-size:12px;
    font-weight:900;
    background:linear-gradient(135deg,#f2994a,#c65d89);
    /* Pedido do dono 2026-09-22: zero anel de outra cor ao redor da foto
       — nem outline, nem box-shadow em anel. Só a imagem, recortada em
       círculo. O gradiente de fundo só aparece nas iniciais (sem foto). */
    overflow:hidden;
}
/* Achado real 2026-09-21: só a versão dentro de sala (.pagina-sala) tinha
   regra pra imagem preencher o círculo — a da portada nunca teve, a foto
   aparecia "quadradinha" (tamanho natural, sem recorte). */
.perfil-miniatura img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}
/* Achado real 2026-09-28 (captura do dono, celular): dentro do grid da
   bolita o height:100% não resolve — uma foto VERTICAL ficava 36x48, e o
   border-radius:50% virava um óvalo mais alto que o círculo, deixando o
   gradiente das iniciais aparecer em meia-lua no topo. A foto agora é
   presa ao círculo inteiro (inset:0), em qualquer proporção e em
   qualquer sala; com foto, o fundo some para nenhuma cor vazar na borda. */
.perfil-miniatura:has(> img){
    position:relative;
    background:transparent;
}
.perfil-miniatura > img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    max-width:none;
    object-fit:cover;
    border-radius:50%;
}
.pagina-sala .perfil-miniatura.is-profile-ball{
    color:#fff;
    background:linear-gradient(160deg,#244018,#132410);
    /* Pedido do dono 2026-09-22: nenhum anel de outra cor ao redor da
       foto — nem outline, nem box-shadow em anel. Só a imagem. */
    outline:0;
    box-shadow:none;
    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;
    /* Véu escuro sobre a madeira para o texto do menu ler bem (antes 2,39:1, agora ~7,8:1). */
    background:
        linear-gradient(180deg,rgba(20,10,4,.55) 0%,rgba(20,10,4,.62) 100%),
        url("assets/brand/fondo-madera-gaba3.webp?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 */

/* Ítem de notificación / mensaje */

/* ---- 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;
}

/* 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 <small> heredada y centra el ✉ */
.buzon-participacion.boton-buzon{
    grid-template-rows:1fr;
    place-items:center;
}

/* =========================================================
   ESTRUCTURA GENERAL
========================================================= */

.estructura{
    display:block;
    position:relative;
}

/* O carril de acessos rápidos da direita (Principal, Minhas salas, Inscrições,
   V Curtos) saiu em 2026-10-08: tudo isso mora no menu ☰ (Início, Minhas salas,
   Salas que sigo, Explorar › V Curtos). */

.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}

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;
}

/* =========================================================
   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.webp?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--creadores{background:linear-gradient(135deg,#ff5d8f,#c81f4f)}
.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.webp) 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
========================================================= */

.saludo{
    margin:0 0 24px;
    color:var(--azul);
    font-size:12px;
    font-weight:950;
    letter-spacing:1.4px;
}

/* 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. */

.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,#0b6fd6,#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,#0b6fd6,#075ecb);
    box-shadow:0 10px 24px #249cff42;
}

#abrir-creador:hover,
#guardar-sala:hover{filter:brightness(1.1)}

/* =========================================================
   SECCIONES Y TARJETAS
========================================================= */

.seccion{
    margin-top:16px;
}

.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, 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}
#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;
}

.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)}
.vistas,
.gaba3-destaque-hero-vistas{
    display:none!important;
}

.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}}
.vistas{
    position:absolute;
    z-index:2;
    top:12px;
    padding:6px 9px;
    color:#fff;
    font-size:9px;
    font-weight:900;
    border-radius:7px;
    background:#ed3f59;
}
.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);
}

/* =========================================================
   SECTORES
========================================================= */

/* =========================================================
   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;
}

/* Criar sala em passos (2026-10-08): 1 tipo · 2 detalhes · 3 capa e confirmar.
   Passo 1: três escolhas grandes, uma por linha, com ícone de linha e uma frase curta. */
.criar-tipos{display:grid;gap:10px}
.privacidade-opcao{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    min-height:72px;
    padding:12px 14px;
    border-radius:14px;
    border:1px solid #ffffff1f;
    background:#202136;
    color:#c9c8d6;
    text-align:left;
    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;
}
.criar-tipo-texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.criar-tipo-texto b{font-size:16px;font-weight:800;color:inherit}
.criar-tipo-texto small{font-size:12.5px;font-weight:500;line-height:1.35;color:#d9c9ac}
.criar-passo{display:flex;flex-direction:column;gap:12px}
.criar-passo[hidden]{display:none}
.criar-subtitulo{margin-top:6px}
.criar-nota{font-weight:500;opacity:.8}
.criar-erro{margin:0;color:#ffb4a8;font-size:12.5px;font-weight:700;line-height:1.35}
.criar-erro[hidden]{display:none}
.criar-resumo{margin:0;padding:10px 12px;border:1px solid rgba(199,165,90,.35);border-radius:10px;background:rgba(24,12,5,.6);color:#f4ead8;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.criar-resumo:empty{display:none}
/* Nome final da sala no passo 3 (o automático ou o escrito); nome comprido quebra, nunca vaza. */
.criar-resumo-nome{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;color:#d9c9ac;font-size:13px;font-weight:600;min-width:0}
.criar-resumo-nome b{color:#f4ead8;font-size:15px;font-weight:800;overflow-wrap:anywhere;min-width:0}
.criar-resumo-nome[hidden]{display:none}
#minimo-campo-nome em{font-style:normal;font-weight:500;opacity:.8}
#minimo-campo-nome[hidden]{display:none}
.evento-aviso-borrado{padding:10px 12px;border:1px solid #ffb34d55;border-radius:10px;background:#ffb34d14;color:#ffe3b8!important}
/* Ícones de linha no lugar dos emojis (criação de sala e mural): soltos, sem caixa, só sombra.
   A cor vem do botão (currentColor), então acompanha o estado ativo/inativo. */
.privacidade-opcao [data-morph-icone]{flex:none}
.privacidade-opcao [data-morph-icone] svg{width:26px;height:26px}
.evento-tipo-emoji{display:grid;place-items:center;filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.evento-tipo-emoji [data-morph-icone] svg{width:28px;height:28px}
.evento-aviso-borrado{display:flex;align-items:flex-start;gap:8px}
.evento-aviso-borrado [data-morph-icone]{flex:none;margin-top:1px}
.boton-principal>[data-morph-icone]{flex:none}
.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 */

/* 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:#f4ead8;
    border:1px solid rgba(199,165,90,.45);
    border-radius:12px;
    /* Madeira real (antes azul-marinho #10233a): mesma ficha das categorias. */
    background:
        linear-gradient(180deg,rgba(255,210,140,.05) 0%,rgba(0,0,0,.14) 100%),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/190px auto;
    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;
    }

    main{
        padding-inline:28px;
    }

    .categorias-contenedor{
        margin-inline:-28px;
        padding-inline:28px;
    }
}

@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.webp?v=real1") center/cover no-repeat;
    }

    .marca-icono{
        width:65px;
        height:43px;
        font-size:22px;
    }

    .busqueda-interna{
        grid-column:1 / -1;
        grid-row:2;
    }

    .cuenta-usuario{
        grid-column:2;
        grid-row:1;
    }

    main{
        padding:0 16px 40px;
    }

    .categorias-contenedor{
        top:126px;
        margin:0 -16px;
        padding:10px 16px 5px;
    }

    .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[aria-current] span svg{color:var(--gaba3-verde-brillante,#63bd44)}

    .menu-movil a[aria-current]{
        color:#75ffac;
    }
}

@media (max-width:560px){
    .boton-notificaciones{
        display:none;
    }

    /* Dos tarjetas se muestran en vertical; la siguiente pareja queda al
       alcance de un deslizamiento horizontal, nunca una tarjeta aislada. */

    .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.webp?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 */
/* 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;
}
/* Aviso da apresentação no chat: uma linha dourada; tocada, mostra de novo na tela. */
.pagina-sala .msg-convite-visual .privada-msg-apresentacao{
    display:block;max-width:100%;margin:2px 0;padding:6px 10px;
    border:1px solid #c9a24a88;border-radius:0;background:rgba(20,10,3,.55);
    color:#f1d99a;font:700 13px/1.35 inherit;text-align:left;cursor:pointer;
    overflow-wrap:anywhere;
}

/* ══ 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,#48a300,#55c900);color:#1a0f05;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}
#invd-nome.invd-falta{border-color:#ff8a7a!important;box-shadow:0 0 0 3px #ff8a7a55}
#invd-nome.invd-falta::placeholder{color:#ffb4a8;opacity:1}
.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{line-height:1;flex:none;width:1.6em;display:grid;place-items:center;color:#f1d99a}
.invd-catalog-emoji svg{width:24px;height:24px;display:block}
.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);
}
.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}

/* 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-word{display:inline-block;white-space:nowrap}
.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:#1a0f05;
    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))}
@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-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}}

/* ═══════════════════════════════════════════════════════════════
   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 */
/* 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-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 */

/* ── Responsive thumbnails ── */
@media(max-width:640px){
    
    .thumbnail-participante figcaption{
        font-size:8px;
        padding:2px 4px 2px;
    }
}

/* Botón cámara en la barra de acciones */

/* 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. */

/* Identidad sobria: palabra GABA3 blanca e icono azul, sin lila ni morado. */.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. */

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.webp?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 .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 .acciones-cabecera-sala{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
}

/* =========================================================
   PANEL DE INVITACIONES
========================================================= */

/* =========================================================
   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;
}

/* =========================================================
   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;
}

@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); } }

/* =========================================================
   MINIATURAS DE PARTICIPANTES
========================================================= */

/* =========================================================
   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 summary > i{
    color:#a9a6bb;
    font-size:18px;
    font-style:normal;
    transition:transform .2s ease;
}

.pagina-sala details[open] > summary > i{
    transform:rotate(180deg);
}

/* =========================================================
   TALLER
========================================================= */

.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 .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 .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 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 i{
    margin-top:12px;
    color:#e8dffa;
    font-size:8px;
    font-style:normal;
}

/* =========================================================
   FORMULARIOS Y PANELES DEL TALLER
========================================================= */

/* =========================================================
   PANEL DERECHO
========================================================= */

.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-3{background:#9a6c3e}

.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 .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;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1450px){
    .pagina-sala .cabecera-sala{
        grid-template-columns:minmax(0,1fr) auto auto auto;
    }

    .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 .sala-aplicacion{
        grid-template-columns:1fr;
        padding-inline:16px;
    }

    .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 .perfil-miniatura{
        width:38px;
        height:38px;
    }

    .pagina-sala .sala-aplicacion{
        padding:10px 10px 35px;
    }

    .pagina-sala .pantalla-videollamada{
        min-height:500px;
        border-radius:17px;
    }
}

@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 .acciones-cabecera-sala{
        gap:5px;
    }

    .pagina-sala .perfil-miniatura{
        display:none;
    }

    .pagina-sala .pantalla-videollamada{
        min-height:440px;
    }

    .pagina-sala .panfleto{
        min-height:345px;
        padding:19px;
    }

    .pagina-sala .panfleto h3{
        font-size:24px;
    }
}

/* =========================================================
   AJUSTES DE SALA — VERSIÓN COMPACTA
========================================================= */

.pagina-sala .pantalla-videollamada{
    min-height:0;
    height:clamp(430px,46vw,610px);
}

/* Miniaturas reales: se llenan solo con flujos de cámara/WebRTC activos. */

@keyframes pulsoHablando{ 50%{ transform:scale(.7); opacity:.65; } }

@media (max-width:820px){
    .pagina-sala .pantalla-videollamada{
        height:430px;
        min-height:0;
    }
}

@media (max-width:560px){
    .pagina-sala .pantalla-videollamada{
        height:380px;
    }
}

/* =========================================================
   MODAL DE CUENTA Y REGISTRO (PREMIUM)
   ========================================================= */

/* Vista No Logeado */

/* Botón Google Premium */

/* Separador O */

/* Control de Pestañas */

/* Formulario */

/* Vista Logeado */

/* Planes de suscripción */

/* =========================================================
   REACCIONES EN VIVO EN PANTALLA
   ========================================================= */

@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. */
.plan-card.activo,
.plan-card:hover,
.boton-principal{
    border-color:#249cff!important;
    color:#fff!important;
    background:linear-gradient(135deg,#0b6fd6,#075ecb)!important;
    box-shadow:0 9px 22px rgba(8,120,232,.28)!important;
}


/* 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; }

/* =========================================================
   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{
    /* Véu escuro de .4 sobre a madeira (antes .1): texto branco passa de 2,98:1 para 6,4:1 até no
       veio mais claro, e a madeira continua aparecendo (auditoria UX-07). */
    background:
        linear-gradient(rgba(20,10,4,.4),rgba(20,10,4,.4)),
        url("assets/brand/fondo-madera-gaba3.webp?v=real1");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.marca-icono,
.pagina-sala .cabecera-sala .marca-icono{
    background:transparent!important;
    box-shadow:none!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}.boton-notificaciones{width:38px!important;height:38px!important}
  .categorias-contenedor{top:calc(126px + env(safe-area-inset-top,0px))}
}

@media(min-width:821px) and (max-width:1180px){.barra-superior{padding-inline:22px}.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}
  .busqueda-interna{margin-top:0}.boton-notificaciones{width:34px!important;height:34px!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}.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}
@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}}

@media(max-width:560px){.barra-superior{grid-template-columns:auto 30px minmax(0,1fr) auto}.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}}

/* 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}.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}@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:#08110bff!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}@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) */
.acao-criar-sala-repetida{display:none!important}

/* 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}.painel-minhas-salas>header{position:sticky;top:-14px;z-index:2;margin:-14px -14px 8px;padding:14px;background:#08110bff;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}.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}
/* 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}
/* 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}@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}.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){.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ú. */.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-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)}.cinta-crear-header .boton-principal{min-width:112px;padding-inline:10px}.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}}

@media(max-width:390px){.cinta-crear-header .boton-principal{flex-basis:96px;min-width:96px;font-size:9px}.boton-buzon{width:35px;height:33px}.cuenta-usuario{gap:3px}}

/* .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-principal[hidden]{display:none}
img.marca-icono{width:114px;height:76px}
@media(max-width:700px){img.marca-icono{width:68px;height:45px}}

/* 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. */.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}@media(max-width:720px){.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}}

/* Vídeos curtos: experiência própria de GABA3, focada no criador e nas ações. */
.shorts-page{background:#050a10;color:#fff}.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}@media(max-width:600px){.short-item{min-height:100%;padding:24px 82px 94px 20px}}

/* 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. */.seccion{margin-top:24px}.seccion-cabecera{margin-bottom:10px}
@media (max-width:1100px){.seccion{margin-top:22px}}

@media (max-width:700px){.seccion{margin-top:18px}.seccion-cabecera h2{font-size:18px}.sala-imagen{height:190px}}

/* Portada personal: los datos aparecen únicamente después de autenticar una sesión. */

.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}

.boton-principal,
.plan-card.activo,
.plan-card:hover{
    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,
.plan-card.activo:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 12px 28px rgba(85,201,0,.32)!important}

.boton-principal:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--gaba3-verde-brillante);outline-offset:3px}.boton-secundario{transition:background .25s ease,border-color .25s ease,color .25s ease}.boton-secundario:hover{border-color:#55c90070;color:#d9ffc1;background:#55c90016}
/* ── Hover específico de categorías: madera clara con veta real ── */

/* 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}
.cuenta-usuario{gap:14px}
.boton-buzon{flex:none}
.categorias-contenedor{
    top:70px;
    padding-top:6px;
    padding-bottom:5px;
}
.seccion{margin-top:12px}
.seccion-cabecera{margin-bottom:6px}

@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-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;
    }
    .seccion{margin-top:16px}
    .menu-movil{height:calc(58px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0)}
}

@media (max-width:700px){
    .sala-imagen{height:178px}
    /* Sem altura mínima (2026-10-14): o cartão só leva nome e cidade, e os 112 px
       deixavam uma faixa escura vazia debaixo do texto. Os setores de cima e de
       baixo da tela inteira continuam alinhados porque todos têm o mesmo conteúdo. */
    /* Nome do canal/criador: o carrossel no celular vai de borda a borda, o texto não. */
    .gaba3-criador-info{padding-inline:12px!important}
}

/* ── Feed home: ordem vertical; cartões iguais; carrossel por seção no móvel ── */
.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 */

/* 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. */

/* 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: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}
    .categorias-contenedor{top:calc(88px + env(safe-area-inset-top,0px));padding-inline:9px}
}
.sala-acesso-seguro > span{color:var(--gaba3-verde-brillante)!important}

.pagina-sala{background-color:#050a10}

.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.webp?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.webp?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.webp?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-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{
    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 .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}
@media(max-width:720px){.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}}

/* Vídeos curtos: sem cabeçalho e sem ações duplicadas. */.shorts-page .short-item{min-height:100dvh!important}.shorts-page .shorts-video{background-color:#101820!important}
@media(max-width:720px){.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}}

/* Agenda privada de la sala: panel compacto, sin alterar la cuadrícula. */

/* 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 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}

/* 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}
@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 .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-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{
    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 .form-chat-privada .boton-enviar-chat{
    width:48px;min-width:48px;height:46px;border-radius:50%;
}
.pagina-sala .form-chat-privada.has-text .boton-voz-msg{display:none!important}
.pagina-sala .form-chat-privada:not(.has-text) .boton-enviar-chat{display:none!important}
.pagina-sala .form-chat-privada.is-recording .boton-voz-msg{display:grid!important}
.pagina-sala .form-chat-privada.is-recording .boton-enviar-chat{display:none!important}
.pagina-sala .form-chat-privada.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"]{
    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);
}

/* 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;
}
@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 .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}
@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;padding:0;border:0;border-radius:0;background:none;color:#efffe9;cursor:pointer;transition:color .2s ease,transform .2s ease}.navegacao-global-sala button:hover,.navegacao-global-sala button:focus-visible{color:#8fff67;outline:none;transform:translateY(-1px)}.navegacao-global-sala button:focus-visible{outline:2px solid #8fff67;outline-offset:2px}.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;
}
/* Toque de 44 px sem mudar o desenho (2026-10-11): a área invisível cresce 5 px de cada lado. */
.gaba3-header-back{position:relative}
.gaba3-header-back::before{content:"";position:absolute;inset:-5px}
.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.webp?v=real1")!important;
    background-attachment:fixed!important;
    background-position:center!important;
    background-size:cover!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 .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-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 .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 .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}
}

/* =========================================================
   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,.52) 0%, rgba(10,6,2,.6) 100%),
        url("assets/brand/fondo-madera-gaba3.webp?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.webp?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}

/* 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; }
}

/* Buscador expandido que app.js puede mostrar: misma cavidad tallada */

/* Texto que el usuario escribe: color cálido sobre la madera */

/* Sin placeholder visible */

/* Responsive: lupa más pequeña en móvil */

/* =========================================================
   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) */

/* No backdrop al usar show() — la regla es redundante pero aclara la intención */

/* =========================================================
   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.webp?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);
}
.menu-lateral-item:hover .mli-icono,
.menu-lateral-item:focus-visible .mli-icono,
.menu-lateral-item.activo .mli-icono{
    color:inherit;
}

/* Sección acordeón */

/* Sub-ítems (salas) */

/* Separador */
.menu-lateral-separador{
    border:0;
    border-top:1px solid rgba(182,132,52,.16);
    margin:10px 8px;
}

/* ── Mis salas: secciones creadas / participadas ── */
/* Badge de tiempo restante en salas temporales */

/* Aviso para visitantes no registrados */

.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 ---- */
/* Icono de cámara superpuesto */
/* Info de nombre y botón quitar */

/* =========================================================
   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) */
/* En modo config: mostrar hint del clip */

/* ── Zona textos (nombre + frase) ── */

/* ── Campos editables inline ── */
/* Placeholder vía CSS */
/* Estado de edición activo */
/* En modo config: resaltar todos los campos */

/* ── Botón "Configurar mi negocio" ── */

/* ── Fila 2: aviso importante ── */

/* ── Paleta flotante ── */

/* Swatches de color */

/* Controles de tamaño */

/* Controles de alineación */

/* Input de ubicación */

/* ── Barra de acciones (modo configuración) ── */

/* ── Toast de confirmación ── */

/* ── 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.webp?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;
}

.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;
}

/* 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-count-badge{
    font-size:10px;
    font-weight:800;
    padding:3px 8px;
    border-radius:7px;
    letter-spacing:.04em;
}
.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--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--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-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-heading{
    font-size:15px;
    font-weight:400;
    color:#d8e8d4;
    letter-spacing:.15px;
}

/* ── 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;
}

/* ── Banca do mercado (2026-10-14): vídeo de loja/profissional leva à sala ── */
.sv-negocio{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    min-width:0;
}
.sv-negocio[hidden]{ display:none; }
.sv-negocio .sv-visitar{
    display:inline-flex;
    align-items:center;
    gap:3px;
    height:26px;
    padding:0 8px 0 11px;
    border:0;
    border-radius:6px;
    background:#2f9e44;
    color:#fff;
    font:inherit;
    font-size:12px;
    font-weight:600;
    letter-spacing:.1px;
    white-space:nowrap;
    cursor:pointer;
    pointer-events:auto;
}
.sv-negocio .sv-visitar svg{ width:14px; height:14px; flex-shrink:0; }
/* Área de toque de 44 px para o polegar, sem aumentar o botão que se vê. */
.sv-negocio .sv-visitar{ position:relative; }
.sv-negocio .sv-visitar::after{ content:""; position:absolute; inset:-9px -6px; }
.sv-negocio .sv-visitar:active{ background:#24803a; }
.sv-negocio .sv-cidade{
    display:inline-flex;
    align-items:center;
    gap:4px;
    min-width:0;
    color:rgba(255,255,255,.82);
    font-size:12px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.sv-negocio .sv-cidade[hidden]{ display:none; }
.sv-negocio .sv-cidade svg{ flex-shrink:0; }

/* ── 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-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-room-hint{
    font-size:11px!important;
    color:#ffb347!important;
    line-height:1.4!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:var(--sv-arrasto-trans,transform .28s cubic-bezier(.4,0,.2,1))!important;
}
/* --sv-arrasto: o dedo puxando a gaveta para baixo (shortsFeed.js), como no Instagram. */
.sv-comments--open{ transform:translateY(var(--sv-arrasto,0px))!important; }
.sv-comments-handle,.sv-comments-hdr{ touch-action:none; }
[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-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;
    }

    /* 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.webp") 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: #c9b48f; } /* AA: antes 2,37:1 sobre a madeira escura */

    /* Í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-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;
    }

    /* ══════════════════════════════════════════════════════════
       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:44px;height:44px;
    place-items:center;
    padding:0;
    border:0;
    background:none;
    color:#fff;
    line-height:1;
    cursor:pointer;
    /* Seta solta, sem bola: a sombra garante leitura em cima do vídeo. */
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.8));
    -webkit-tap-highlight-color:transparent;
}
.sv-back-interno svg{ width:28px; height:28px; }
.sv-back-interno:active{ transform:scale(.94); }

@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{ 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-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 .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;
    }

    /* 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}
/* A faixa preserva o rascunho, mas não pode sobrepor o painel da conta.
   A classe vem do controlador central em index.html; ao fechar o painel a
   regra deixa de combinar e a faixa volta sem recriar nenhum dado local. */
body.gaba3-painel-conta-aberto .gaba3-continue-banner{display:none!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 <dialog> nunca carrega a classe
       "modal-sala" (só o form/div de dentro carrega), então "dialog.modal-sala"
       nunca combinava com nada: o formulário ficava mais largo que o próprio
       <dialog> que o contém, cortando o texto da última opção. */
    #form-creador-sala,
    dialog:has(.modal-sala),
    .modal-sala{
        width:min(100vw - 16px, 480px)!important;
        max-width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 24px)!important;
        box-sizing:border-box!important;
        overflow:auto!important;
    }
    /* Criar sala em passos: só o <dialog> rola (o form não), para o rodapé ficar grudado embaixo
       e sem 1-2px de rolagem lateral por causa da borda do diálogo. */
    #creador-sala{overflow-x:hidden!important;overflow-y:auto!important}
    #creador-sala #form-creador-sala{width:100%!important;max-width:100%!important;max-height:none!important;overflow:visible!important}
    #form-creador-sala input:not([type="checkbox"]):not([type="radio"]),
    #form-creador-sala select,
    #form-creador-sala textarea{
        width:100%!important;
        max-width:100%!important;
        box-sizing:border-box!important;
    }

    .gaba3-continue-banner{
        flex-wrap:wrap;
        left:8px; right:8px;
    }
}

/* =========================================================
   GABA3 — PAINEL PRINCIPAL (carrosséis, atividade, sidebar)
   Usado apenas por index.html.
========================================================= */

.gaba3-layout{
    display:flex;
    flex-direction:column;
    gap:14px;
}
.gaba3-layout[hidden],
#explorar[hidden]{display:none!important}

/* Título visível reusado em qualquer seção da portada que precise de um
   nome próprio (Destaque, Salas privadas...) — pedido do dono, 2026-09-15. */
.gaba3-secao-titulo{
    margin:18px 0 8px;
    font-size:15px;
    font-weight:800;
    letter-spacing:.02em;
    color:#e8f5e0;
}
.gaba3-secao-titulo[hidden]{display:none!important}
/* No celular a coluna já separa as fileiras (gap de 18 px): os 18 px do título
   somavam uma faixa de pedra vazia entre o cartão de cima e o título (2026-10-14). */
@media (max-width:820px){.gaba3-layout-main .gaba3-secao-titulo{margin-top:2px}}

.gaba3-destaque-superior{
    display:grid;
    grid-template-columns:minmax(0, 7fr) minmax(260px, 3fr);
    gap:20px;
    align-items:stretch;
    margin:18px 0 12px;
}
/* Achado real 2026-09-15: quando #gaba3-destaque-hero está [hidden] (sem
   nenhuma sala pra destacar ainda), o grid removia ele do fluxo e a coluna
   lateral (clima/boas-vindas) caía sozinha na PRIMEIRA célula — a de 70%,
   larga demais e no lugar errado — em vez de ocupar a linha inteira. */
.gaba3-destaque-superior:has(#gaba3-destaque-hero[hidden]) .gaba3-destaque-lateral{
    grid-column:1 / -1;
}

/* Só desktop: no celular as duas caixas empilham (1 coluna), cada uma
   com sua própria altura — sem isto, a especificidade de 2 classes aqui
   ganhava da regra mobile de .gaba3-destaque-hero (1 classe) e a caixa
   de destaque nunca encolhia como a coluna lateral. */
@media(min-width:821px){
    .gaba3-destaque-superior .gaba3-destaque-hero,
    .gaba3-destaque-superior .gaba3-destaque-lateral{
        margin:0;
        height:100%;
        min-height:320px;
    }
}

/* Ícones do topo alinhados com a letra "GABA" (esquerda) e o sino de
   notificações (direita) — pedido exato do dono, 2026-09-15. As duas
   variáveis são medidas de verdade em JS (index.html, perto do
   --gaba3-header-h) porque dependem do conteúdo real da cabeceira. */
@media(min-width:821px){
    #explorar.categorias-contenedor{
        position:absolute !important;
        left:var(--gaba3-explorar-left, 22px) !important;
        right:var(--gaba3-explorar-right, 22px) !important;
        grid-column:auto !important;
        width:auto !important;
    }
}

/* Coluna lateral (clima real da cidade + boas-vindas) — mesmo lugar de
   30% de sempre, ao lado do destaque, cada caixa com metade da altura
   (tamanho grande de sempre). */
.gaba3-destaque-lateral{
    display:flex;
    flex-direction:column;
    gap:12px;
    position:relative;
}
.gaba3-destaque-lateral>*{flex:1 1 0;min-height:0}

/* Publicidade — caixa própria e INDEPENDENTE, só no desktop (pedido
   explícito do dono, 2026-09-15: "cada caja es independiente... si hago
   la caja más grande, es esa caja"). Fica ancorada logo abaixo da
   coluna lateral, quadrada (largura = altura, os mesmos 30% de largura
   do destaque), via position:absolute — isso é o que garante que ela
   NUNCA empurra pra baixo o que vem depois (salas públicas): não
   participa do fluxo normal do documento, cresce sozinha, sem afetar a
   altura de mais nada. No celular a coluna lateral já empilha em 1 só
   (ver @media max-width:820px logo abaixo) — lá a publicidade continua
   no fluxo normal, no tamanho real dela (150px de altura). */
@media(min-width:821px){
    .gaba3-destaque-lateral>.gaba3-ad-slot-abaixo{
        position:absolute;
        left:0;
        top:calc(100% + 12px);
        width:100%;
        aspect-ratio:1 / 1;
        height:auto;
        max-width:none;
    }
    /* Visitante sem cidade não tem clima: a publicidade sobe para o lugar dele em vez
       de deixar um buraco de 387×320 ao lado do destaque (2026-10-14). */
    .gaba3-destaque-lateral:has(>.gaba3-clima-card[hidden])>.gaba3-ad-slot-abaixo{
        position:relative;
        top:auto;
        aspect-ratio:auto;
        height:100%;
        margin:0;
    }
    /* Sem clima e sem publicidade a coluna fica vazia: o destaque ocupa a largura toda. */
    .gaba3-destaque-superior:has(.gaba3-clima-card[hidden]):has(.gaba3-ad-slot-abaixo[hidden]){grid-template-columns:minmax(0,1fr)!important}
    .gaba3-destaque-superior:has(.gaba3-clima-card[hidden]):has(.gaba3-ad-slot-abaixo[hidden])>.gaba3-destaque-lateral{display:none}
}

/* Tarjeta do clima: céu vivo em frontend/clima/ceuVivo.css (só a borda fica aqui). */
.gaba3-clima-card{
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    overflow:hidden;
}

@media(max-width:820px){
    /* Empilhadas (1 coluna) no celular, sem altura definida pelo
       container — "flex:1 1 0" (pensado pra dividir uma altura fixa do
       desktop) espremia os dois cartões um em cima do outro. Cada um
       agora tem só o tamanho do próprio conteúdo. */
    .gaba3-destaque-lateral>*{flex:none}
}

/* Publicidade local — dentro da coluna lateral direita, embaixo do
   clima/boas-vindas, no tamanho real dela (pedido do dono, 2026-09-15,
   corrigido: antes ficava numa faixa própria abaixo do destaque inteiro,
   à esquerda). */
.gaba3-ad-slot-abaixo{
    height:170px;
}
@media(max-width:820px){
    .gaba3-ad-slot-abaixo{height:150px}
}

.gaba3-layout-main{
    display:flex;
    flex-direction:column;
    gap:0;
    min-width:0;
}

/* Sobrescreve os vários breakpoints legados de .seccion/.seccion-cabecera
   (24px/22px/18px em faixas antigas) para manter as fileiras de carrossel
   sempre próximas, com as caixas grandes preenchendo o espaço em vez de
   sobrar madeira vazia entre elas. O espaçamento vem SÓ do margin-top
   (sem gap do flex somado por cima, senão dobra a separação). */
.gaba3-layout-main .seccion{
    margin-top:6px!important;
}

.gaba3-layout-main .seccion-cabecera{
    margin-bottom:4px!important;
}

.gaba3-aside{
    display:none;
}

.gaba3-solo-desktop{
    display:none;
}

/* --- Carrosséis (En vivo / Destacadas / Vídeos curtos) --- */

.gaba3-carrossel-caixa{
    position:relative;
}

.gaba3-carrossel{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 6px;
}

.gaba3-carrossel::-webkit-scrollbar{
    display:none;
}

.gaba3-carrossel .sala-card{
    flex:0 0 auto;
    width:250px;
    scroll-snap-align:start;
}

/* Regra fixa do desktop: exatamente TRÊS tarjetas completas por fileira nos
   carrosséis de setor (em vivo / destacados) — nunca só duas com espaço vazio. */
.gaba3-carrossel .sala-card:not(.gaba3-curto-card):not(.gaba3-privada-card){
    width:auto;
    flex:0 0 calc((100% - 20px)/3);
}

.gaba3-carrossel .sala-imagen{
    height:230px;
}

.gaba3-carrossel .sala-contenido{
    padding:18px;
}

.gaba3-carrossel .sala-contenido h3{
    font-size:16px;
}

.gaba3-carrossel .sala-contenido p{
    font-size:12.5px;
}

/* Vídeos curtos: continuam como um carrossel horizontal — o feed geral
   da portada fica vertical, mas cada linha (incluindo VCurtos) pode
   deslizar para os lados. */
#shorts-gaba3 .gaba3-carrossel{
    display:flex;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:2px 2px 6px;
}

#shorts-gaba3 .gaba3-carrossel .sala-card,
#shorts-gaba3 .gaba3-carrossel .gaba3-curto-card{
    width:auto!important;
    flex:0 0 auto!important;
    max-width:none!important;
}

#shorts-gaba3 .gaba3-carrossel .gaba3-curto-card .sala-imagen{
    height:220px;
}

/* A imagem deve dominar o cartão: vinheta mais forte, emoji maior,
   degradê no rodapé para o texto nunca competir com um bloco de cor plano. */
.gaba3-carrossel .sala-imagen::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.16), transparent 55%),
        linear-gradient(180deg, transparent 45%, rgba(0,0,0,.38) 100%),
        radial-gradient(140% 140% at 50% 50%, transparent 55%, rgba(0,0,0,.32) 100%);
    pointer-events:none;
}

.gaba3-carrossel-flecha{
    position:absolute;
    z-index:5;
    top:38%;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:22px;
    line-height:1;
    border:1px solid #ffffff28;
    border-radius:50%;
    background:#15172cf2;
    box-shadow:0 8px 20px #0008;
    transform:translateY(-50%);
    cursor:pointer;
}

.gaba3-carrossel-flecha[hidden]{
    display:none;
}

.gaba3-carrossel-flecha--izq{left:-8px}
.gaba3-carrossel-flecha--der{right:-8px}

/* --- Botão "seguir sala" (★) nos cartões públicos --- */
.gaba3-seguir-botao{
    position:absolute;
    z-index:3;
    right:10px;
    bottom:10px;
    width:30px;
    height:30px;
    display:grid;
    place-items:center;
    padding:0;
    /* Ícone solto, sem bolinha atrás (regra da plataforma): só a sombra para ler sobre a foto. */
    border:0;
    border-radius:0;
    background:transparent;
    color:#fff;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.85));
    transition:color .2s ease,transform .15s ease;
}
.gaba3-seguir-botao:hover{
    transform:scale(1.08);
}
.gaba3-seguir-botao.ativo{
    color:#ffd23f;
}

.gaba3-dots{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-top:10px;
}

.gaba3-dots span{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#ffffff30;
    transition:background .2s ease,width .2s ease;
    cursor:pointer;
}

.gaba3-dots span.activo{
    background:var(--gaba3-verde,#55c900);
    width:16px;
    border-radius:4px;
}

@media (max-width:820px){
    .gaba3-destaque-superior{
        grid-template-columns:1fr;
        gap:12px;
        margin:12px 0 8px;
    }

    /* Empilhadas no celular, as duas caixas precisam do MESMO tamanho
       (pedido do dono, 2026-09-15) — nunca a de publicidade menor/maior
       que a de destaque só porque o conteúdo dela é diferente. A mídia
       já ocupa 100% da caixa por padrão (ver .gaba3-ad-media acima), só
       falta garantir a altura igual à do destaque. */
    .gaba3-destaque-superior .gaba3-ad-slot{
        height:230px;
        min-height:230px;
    }

    /* Regra fixa do celular: exatamente DUAS tarjetas completas visíveis por
       vez em cada carrossel; o resto se descobre deslizando com o dedo.
       !important necessário: a regra desktop de 3 colunas mais acima
       (.gaba3-carrossel .sala-card:not(...):not(...)) tem mais classes no
       seletor e por isso vence por especificidade mesmo dentro deste
       breakpoint — sem !important ela ignora esta media query. */
    .gaba3-carrossel .sala-card{
        flex:0 0 calc(50% - 5px)!important;
        width:auto!important;
        max-width:none!important;
    }
    .gaba3-carrossel-flecha{display:none!important}

    /* Cartões baixos e proporcionados — sem caixa vertical vazia */
    .gaba3-carrossel .sala-imagen{height:118px!important}

    .gaba3-carrossel .sala-contenido{
        padding:10px!important;
    }

    /* Título: no máximo 2 linhas, nunca palavra sozinha empilhada */
    .gaba3-carrossel .sala-contenido h3{
        font-size:12.5px!important;
        line-height:1.28!important;
        margin:0 0 3px!important;
        display:-webkit-box!important;
        -webkit-line-clamp:2!important;
        -webkit-box-orient:vertical!important;
        overflow:hidden!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }
    .gaba3-carrossel .sala-contenido p{
        font-size:10px!important;
        margin:0!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    /* EN VIVO / espectadores: cantos opostos, nunca sobrepostos */
    .gaba3-carrossel .vistas{
        top:8px!important;
        padding:4px 6px!important;
        font-size:8px!important;
        border-radius:6px!important;
        max-width:calc(50% - 14px)!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
        white-space:nowrap!important;
    }
    .gaba3-carrossel .vistas{right:8px!important}

    /* Título da seção ("Comércios em vivo agora" etc.) proporcional ao celular */
    .gaba3-layout-main .seccion-cabecera h2{
        font-size:14.5px!important;
    }
    .gaba3-layout-main .seccion-cabecera a{
        font-size:11px!important;
    }
}

/* --- Destaque principal: a sala em vivo com mais audiência agora, bem
   grande, logo abaixo da franja de categorias — pro primeiro olhar da
   portada ter um "momento forte" em vez de cair direto numa grade de
   cartões. Reaproveita as mesmas classes de fundo (imagen-fiesta etc.),
   só que em tamanho de banner. --- */
.gaba3-destaque-hero{
    position:relative;
    height:320px;
    margin:18px 0 26px;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 14px 34px #0006;
}
.gaba3-destaque-hero-fundo{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.gaba3-destaque-hero-scrim{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#0a0a12 0%,#0a0a12cc 32%,#0a0a1266 55%,transparent 78%);
}
.gaba3-destaque-hero-conteudo{
    position:relative;
    z-index:1;
    height:100%;
    max-width:560px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    padding:0 22px 0 32px;
}
.gaba3-destaque-hero-eyebrow{
    align-self:flex-start;
    padding:5px 12px;
    border-radius:999px;
    background:linear-gradient(135deg,#ff7a3d,#e73c5e);
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.02em;
}
.gaba3-destaque-hero-titulo{
    margin:0;
    color:#fff;
    font-size:clamp(24px,3vw,38px);
    font-weight:900;
    line-height:1.12;
    text-shadow:0 2px 10px #0007;
}
.gaba3-destaque-hero-subtitulo{
    margin:0;
    color:#dfe3ec;
    font-size:15px;
    font-weight:600;
}
.gaba3-destaque-hero-meta{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:4px;
}
.gaba3-destaque-hero-vivo{
    padding:5px 10px;
    border-radius:6px;
    background:#e5384f;
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
}
.gaba3-destaque-hero-vistas{
    color:#f0f0f5;
    font-size:13px;
    font-weight:700;
}
@media(max-width:820px){
    .gaba3-destaque-hero{height:230px;margin:12px 0 18px;border-radius:14px}
    .gaba3-destaque-hero-conteudo{padding:0 16px 0 18px;gap:7px}
    .gaba3-destaque-hero-titulo{font-size:clamp(19px,5vw,26px)}
    .gaba3-destaque-hero-subtitulo{font-size:12.5px}
}

/* --- Vídeos curtos: miniatura com play + duração + curtidas --- */

/* Regra fixa do desktop: exatamente CINCO tarjetas completas por fileira,
   nunca uma quinta pela metade. Precisa do seletor composto
   ".gaba3-carrossel .gaba3-curto-card" (2 classes) pra vencer por
   especificidade a regra genérica ".gaba3-carrossel .sala-card{width:250px}"
   (mesma "armadilha" já documentada nos botões da sala de criadores —
   um seletor de 1 classe só nunca vence um de 2, seja qual for a ordem). */
.gaba3-carrossel .gaba3-curto-card{
    position:relative;
    flex:0 0 calc((100% - 40px)/5);
    width:auto;
    border-color:rgba(255,124,165,.45);
    background:linear-gradient(180deg,rgba(255,124,165,.10),rgba(17,19,27,.96));
    box-shadow:0 10px 28px rgba(255,99,140,.10);
}

.gaba3-curto-card::before{
    content:"VCurtos";
    position:absolute;
    z-index:3;
    top:10px;
    left:10px;
    padding:4px 8px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:999px;
    background:rgba(19,18,26,.72);
    color:#ffd8e6;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Precisa de `aspect-ratio` aqui — desde que o título/curtidas virou véu
   por cima do vídeo (fora do fluxo normal, ver .gaba3-curto-info acima),
   o cartão perdeu o conteúdo real que antes dava largura a ele (o texto
   em fluxo). Sem isto, `width:auto` (usado por este cartão) encolhe pra
   0/quase-0. */
.gaba3-curto-card .sala-imagen{
    height:210px;
    aspect-ratio:9/16;
}

.gaba3-curto-duracao{
    position:absolute;
    z-index:2;
    right:10px;
    top:10px;
    padding:2px 7px;
    color:#fff;
    font-size:10.5px;
    font-weight:800;
    border-radius:6px;
    background:#000000a8;
}

.gaba3-curto-play{
    position:absolute;
    z-index:2;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:16px;
    border:2px solid #ffffffe0;
    border-radius:50%;
    background:rgba(255,96,133,.72);
    box-shadow:0 8px 22px rgba(255,96,133,.32);
}

/* Regra do dono (2026-09-15): o vídeo/miniatura ocupa 100% do cartão —
   o texto flutua por cima dele, com um véu de gradiente, nunca um
   pedaço sólido embaixo. `position:absolute` tira este bloco do fluxo
   normal, então ele deixa de somar altura ao cartão (a altura final
   passa a ser só a de `.sala-imagen`, que já cobre o cartão inteiro). */
.gaba3-curto-info{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
    padding:28px 12px 10px;
    background:linear-gradient(180deg,rgba(18,17,26,0) 0%,rgba(15,14,22,.6) 45%,rgba(11,10,17,.94) 100%);
}

.gaba3-curto-info h3{
    margin:0 0 3px;
    font-size:12.5px;
    line-height:1.3;
    color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,.6);
}

.gaba3-curto-info small{
    display:block;
    margin-bottom:6px;
    color:#e5d6e0;
    font-size:10px;
    text-shadow:0 1px 6px rgba(0,0,0,.6);
}

.gaba3-curto-likes{
    display:flex;
    align-items:center;
    gap:4px;
    color:#ff9dbe;
    font-size:11px;
    font-weight:700;
    text-shadow:0 1px 6px rgba(0,0,0,.6);
}

/* Mídia real (vídeo/imagem do próprio dono) precisa preencher a caixa
   inteira — sem isto, um <video> sem tamanho fica pequeno e solto no
   centro do gradiente de fundo (`.sala-imagen{display:grid;place-items:
   center}` centra pelo tamanho intrínseco dele, nunca preenche). */
.gaba3-curto-card .sala-imagen video,
.gaba3-curto-card .sala-imagen img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

@media (max-width:820px){
    .gaba3-curto-card .sala-imagen{height:210px}
}

/* ==========================================================================
   GABA3 — BLOQUE VISUAL 2: SHORTS + SALAS Y ACTIVIDAD EN VIVO
   ========================================================================== */

/* --- 1. SHORTS (VÍDEOS CURTOS) MICROINTERACTIONS --- */
.gaba3-curto-card {
    transition: transform .32s cubic-bezier(.2,.8,.2,1), box-shadow .32s cubic-bezier(.2,.8,.2,1), border-color .32s ease;
    will-change: transform, box-shadow;
}

@media (hover: hover) and (pointer: fine) {
    .gaba3-curto-card:hover {
        transform: translateY(-2.5px);
        border-color: rgba(255, 96, 133, 0.45);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 96, 133, 0.18);
    }
    .gaba3-curto-card .sala-imagen video,
    .gaba3-curto-card .sala-imagen img {
        transition: transform .42s cubic-bezier(.2,.8,.2,1);
    }
    .gaba3-curto-card:hover .sala-imagen video,
    .gaba3-curto-card:hover .sala-imagen img {
        transform: scale(1.028);
    }
    .gaba3-curto-play {
        transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, background .28s ease, border-color .28s ease;
    }
    .gaba3-curto-card:hover .gaba3-curto-play {
        transform: scale(1.10);
        background: rgba(255, 96, 133, 0.85);
        border-color: #ffffff;
        box-shadow: 0 0 0 5px rgba(255, 96, 133, 0.28), 0 8px 24px rgba(255, 96, 133, 0.45);
    }
    .gaba3-curto-card .gaba3-curto-play:hover {
        transform: scale(1.16);
        box-shadow: 0 0 0 8px rgba(255, 96, 133, 0.36), 0 10px 28px rgba(255, 96, 133, 0.55);
    }
}

@media (hover: none) or (pointer: coarse) {
    .gaba3-curto-card:active {
        transform: scale(0.975);
        transition: transform .12s ease;
    }
}

.gaba3-curto-likes {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform .2s ease, color .2s ease, text-shadow .2s ease;
}
.gaba3-curto-likes:hover {
    color: #ffb5ce;
}
.gaba3-curto-likes.liked {
    color: #ff4d80;
    text-shadow: 0 0 10px rgba(255, 77, 128, 0.5);
}
.gaba3-curto-likes.gaba3-heart-pop {
    animation: gaba3HeartPop .42s cubic-bezier(.175,.885,.32,1.275);
}
@keyframes gaba3HeartPop {
    0% { transform: scale(1); }
    35% { transform: scale(1.36); }
    65% { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* --- 2. SALAS CARDS DEPTH & MICROINTERACTIONS --- */
.gaba3-carrossel .sala-card:not(.gaba3-curto-card):not(.gaba3-privada-card) {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1), border-color .28s ease;
    will-change: transform, box-shadow;
}

@media (hover: hover) and (pointer: fine) {
    .gaba3-carrossel .sala-card:not(.gaba3-curto-card):not(.gaba3-privada-card):hover {
        transform: translateY(-2.5px);
        border-color: rgba(85, 201, 0, 0.45);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(85, 201, 0, 0.15);
    }
    .gaba3-carrossel .sala-card .sala-imagen-real {
        transition: transform .45s cubic-bezier(.2,.8,.2,1);
    }
    .gaba3-carrossel .sala-card:hover .sala-imagen-real {
        transform: scale(1.02);
    }
}

@media (hover: none) or (pointer: coarse) {
    .gaba3-carrossel .sala-card:not(.gaba3-curto-card):not(.gaba3-privada-card):active {
        transform: scale(0.985);
        transition: transform .12s ease;
    }
}

/* --- 3. INDICADOR AO VIVO (RADAR PULSE DISCRETO) --- */
.gaba3-aovivo-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3.5px 8.5px !important;
    border-radius: 6px !important;
    background: rgba(14, 15, 22, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #fff !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) !important;
    pointer-events: none !important;
}
.gaba3-aovivo-ponto {
    position: relative !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #ef4444 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
.gaba3-aovivo-ponto::after {
    content: "" !important;
    position: absolute !important;
    inset: -3px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(239, 68, 68, 0.75) !important;
    animation: gaba3RadarPulse 2.4s cubic-bezier(.215,.61,.355,1) infinite !important;
    pointer-events: none !important;
}
@keyframes gaba3RadarPulse {
    0% { transform: scale(0.5); opacity: .95; }
    50% { transform: scale(1.5); opacity: .4; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* Comércio/profissional não transmitem: "Aberto agora" / "Atendendo
   agora" em verde, "Fechado" / "Fora do horário" em cinza, sem pulso. */
.gaba3-aovivo-badge.gaba3-estado-aberto,
.gaba3-aovivo-badge.gaba3-estado-atendendo {
    border-color: rgba(85, 201, 0, .55) !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    font-size: 10.5px !important;
}
.gaba3-estado-aberto .gaba3-aovivo-ponto,
.gaba3-estado-atendendo .gaba3-aovivo-ponto { background: #55c900 !important; }
.gaba3-estado-aberto .gaba3-aovivo-ponto::after,
.gaba3-estado-atendendo .gaba3-aovivo-ponto::after { border-color: rgba(85, 201, 0, .7) !important; }
.gaba3-aovivo-badge.gaba3-estado-fechado,
.gaba3-aovivo-badge.gaba3-estado-fora {
    border-color: rgba(255, 255, 255, .22) !important;
    color: rgba(255, 255, 255, .78) !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    font-size: 10.5px !important;
}

/* --- 4. SEGUIR / ESTRELLA (MICRO-CELEBRACIÓN DISCRETA) --- */
.gaba3-seguir-botao.gaba3-estrela-pop {
    animation: gaba3EstrelaCelebrar .44s cubic-bezier(.175,.885,.32,1.275) forwards;
}
@keyframes gaba3EstrelaCelebrar {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); }
    40% { transform: scale(1.4); box-shadow: 0 0 16px rgba(255, 210, 63, .8), 0 0 0 4px rgba(255, 210, 63, .3); }
    75% { transform: scale(0.94); box-shadow: 0 0 8px rgba(255, 210, 63, .4); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 63, 0); }
}

/* --- 5. ACCESIBILIDAD (PREFERS-REDUCED-MOTION) --- */
@media (prefers-reduced-motion: reduce) {
    .gaba3-curto-card,
    .gaba3-curto-card:hover,
    .gaba3-curto-card .sala-imagen video,
    .gaba3-curto-card .sala-imagen img,
    .gaba3-curto-play,
    .gaba3-curto-card:hover .gaba3-curto-play,
    .gaba3-curto-card:active,
    .gaba3-curto-likes,
    .gaba3-carrossel .sala-card:not(.gaba3-curto-card):not(.gaba3-privada-card),
    .gaba3-carrossel .sala-card:not(.gaba3-curto-card):not(.gaba3-privada-card):hover,
    .gaba3-carrossel .sala-card:not(.gaba3-curto-card):not(.gaba3-privada-card):active,
    .gaba3-seguir-botao,
    .gaba3-seguir-botao:hover {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .gaba3-aovivo-ponto::after {
        animation: none !important;
        opacity: .4 !important;
        transform: scale(1.2) !important;
    }
    .gaba3-curto-likes.gaba3-heart-pop,
    .gaba3-seguir-botao.gaba3-estrela-pop {
        animation: none !important;
    }
}

/* --- Salas privadas: cartão simples, sem status público (nunca "em vivo",
   "online/offline" ou espectadores — só capa + nome). --- */

/* Regra fixa do desktop: exatamente QUATRO tarjetas completas por fileira,
   nunca uma quinta pela metade. Precisa do seletor composto
   ".gaba3-carrossel .gaba3-privada-card" (2 classes) pra vencer por
   especificidade a regra genérica ".gaba3-carrossel .sala-card{flex:0 0
   auto;width:250px}" — mesma armadilha de sempre: 1 classe só nunca vence
   2, então o "250px fixo" ganhava e o número de tarjetas por fileira virava
   sorte da largura da tela, em vez de sempre 4. */
#salas-privadas{
    margin-top:18px;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
}

.gaba3-carrossel .gaba3-privada-card{
    flex:0 0 calc((100% - 30px)/4);
    width:auto;
    text-decoration:none;
    color:inherit;
    border-color:rgba(255,175,108,.32);
    background:linear-gradient(180deg,#1a1a24,#121321);
}

.gaba3-privada-card .sala-imagen{
    height:230px;
}
/* Com a portada da sala (ou a foto da outra pessoa na conversa a dois): enche o cartão inteiro. */
.gaba3-privada-card .sala-imagen.gaba3-privada-com-capa{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}

/* Regra do dono (2026-09-15): a capa ocupa 100% do cartão — o nome
   flutua por cima dela, nunca um pedaço sólido embaixo. */
.gaba3-privada-nome{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    padding:26px 12px 10px;
    font-size:12.5px;
    font-weight:600;
    color:#f0e4d0;
    text-shadow:0 1px 6px rgba(0,0,0,.65);
    background:linear-gradient(180deg,rgba(17,18,26,0) 0%,rgba(15,16,23,.6) 45%,rgba(11,12,18,.94) 100%);
}

@media (max-width:820px){
    /* Mesma regra das DUAS tarjetas por fileira — !important pelo mesmo
       motivo de especificidade explicado acima nos carrosséis de setor. */
    .gaba3-privada-card{
        flex:0 0 calc(50% - 5px)!important;
        width:auto!important;
    }
    .gaba3-privada-nome{
        padding:22px 10px 8px!important;
        font-size:11.5px!important;
    }
}

/* --- Atividade recente --- */

.gaba3-atividade{
    display:flex;
    flex-direction:column;
}

.gaba3-atividade-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 2px;
    border-bottom:1px solid #ffffff0f;
}

.gaba3-atividade-item:last-child{
    border-bottom:0;
}

.gaba3-atividade-avatar{
    width:42px;
    height:42px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:800;
    font-size:13px;
    border-radius:50%;
}

.gaba3-atividade-texto{
    flex:1;
    min-width:0;
}

.gaba3-atividade-texto p{
    margin:0;
    font-size:13px;
    color:#f0eef8;
}

.gaba3-atividade-texto p b{
    font-weight:700;
}

.gaba3-atividade-texto small{
    display:block;
    margin-top:3px;
    color:#9c98ab;
    font-size:11px;
}

.gaba3-atividade-thumb{
    position:relative;
    width:54px;
    height:42px;
    flex:0 0 auto;
    overflow:hidden;
    border-radius:9px;
}

.gaba3-atividade-thumb i{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:13px;
    font-style:normal;
    background:#00000030;
}

/* --- Painéis da barra lateral (desktop): Minhas salas / Ajuda rápida --- */

/* Borda esquerda mais grossa e colorida em todo painel da coluna direita —
   mesmo "fio visual" que já usamos nos títulos de seção (fix anterior).
   Como os painéis mudam de assunto conforme desce (Minhas salas → Mural de
   empregos → Corações solidários...), essa faixa repetida em todos cria uma
   linha de continuidade — sem ela cada painel parecia um cartão solto,
   sem nenhuma ligação com o de cima/baixo. */
.gaba3-painel{
    padding:16px;
    border:1px solid rgba(115,72,22,.38);
    border-left:4px solid var(--gaba3-verde,#55c900);
    border-radius:16px;
    background:
        linear-gradient(180deg, rgba(255,210,140,.05) 0%, rgba(0,0,0,.14) 100%),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/260px auto;
    box-shadow:0 8px 25px #0004;
}

.gaba3-painel-cabecera{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}

.gaba3-painel-cabecera h3{
    margin:0;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--gaba3-verde,#55c900);
}

.gaba3-painel-cabecera a{
    color:var(--gaba3-verde,#55c900);
    font-size:11.5px;
    font-weight:700;
    text-decoration:none;
}

.gaba3-mini-sala{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 0;
    border-bottom:1px solid rgba(115,72,22,.3);
    text-decoration:none;
    color:inherit;
    cursor:pointer;
}

.gaba3-mini-sala:last-of-type{
    border-bottom:0;
}

.gaba3-mini-sala-avatar{
    width:38px;
    height:38px;
    flex:0 0 auto;
    display:grid;
    place-items:center;
    color:#fff;
    font-weight:800;
    font-size:12px;
    border-radius:12px;
}

.gaba3-mini-sala b{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--gaba3-verde,#55c900);
}

.gaba3-mini-sala small{
    display:flex;
    align-items:center;
    gap:5px;
    margin-top:2px;
    color:#c8b89a;
    font-size:11px;
}

.gaba3-mini-sala small::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gaba3-verde,#55c900);
}

.gaba3-painel .boton-principal{
    width:100%;
    margin-top:8px;
}

.gaba3-ajuda-texto{
    margin:0 0 12px;
    color:#d9c9ac;
    font-size:12.5px;
    line-height:1.5;
}

/* Toda a coluna direita (Atividade recente, Quem mais participa, Pessoas com
   talento, Mural de Empregos, Preciso de um serviço, Corações Solidários,
   Vídeos em alta, Novas salas da semana, Salas mais populares, Perto de você):
   sem madeira, letras/avatares maiores e mais brancos, botão pequeno e
   alinhado à esquerda. Só título, lista e botão — sem parágrafo explicativo. */
.gaba3-painel{
    background:none;
    border-color:rgba(255,255,255,.10);
}
.gaba3-painel .gaba3-painel-cabecera h3{
    font-size:11px;
}
.gaba3-painel .gaba3-mini-sala-avatar,
.gaba3-painel .gaba3-atividade-avatar{
    width:48px;
    height:48px;
    font-size:15px;
}
.gaba3-painel .gaba3-mini-sala-avatar{
    border-radius:14px;
}
.gaba3-painel .gaba3-atividade-thumb{
    width:64px;
    height:48px;
}
.gaba3-painel .gaba3-mini-sala b{
    font-size:15.5px;
    color:var(--gaba3-verde,#55c900);
}
.gaba3-painel .gaba3-atividade-texto p{
    font-size:15.5px;
    color:#f7ecd8;
}
.gaba3-painel .gaba3-mini-sala small,
.gaba3-painel .gaba3-atividade-texto small{
    font-size:12px;
}
.gaba3-painel .boton-principal{
    width:auto!important;
    min-height:38px!important;
    padding:0 16px!important;
    margin-top:10px!important;
    font-size:12px!important;
    background:rgba(85,201,0,.14)!important;
    border:1px solid rgba(85,201,0,.55)!important;
    color:#9ef080!important;
    box-shadow:none!important;
}
.gaba3-painel .boton-principal:hover{
    background:rgba(85,201,0,.24)!important;
}

.gaba3-painel-solidario{border-color:rgba(199,90,90,.45)}
.gaba3-painel-solidario .gaba3-painel-cabecera h3{color:#f2d6d6}
.gaba3-painel-mural{border-color:rgba(85,201,0,.35)}
.gaba3-painel-servicos{border-color:rgba(76,153,222,.5)}
.gaba3-painel-servicos .gaba3-painel-cabecera h3{color:#c9e8ff}
.gaba3-painel-servicos .gaba3-mural-expira{background:rgba(76,153,222,.14);color:#b8ddff}
.gaba3-mural-vazio{padding:10px 0 4px;line-height:1.45}
.gaba3-servico-item{align-items:flex-start}
.gaba3-servico-item .gaba3-ver-curriculo{border-color:rgba(76,153,222,.65);color:#b8ddff}
.gaba3-servico-item .gaba3-ver-curriculo:hover{background:rgba(76,153,222,.16)}
.gaba3-servico-contato{display:block!important;width:100%;box-sizing:border-box;margin-top:8px;text-align:center;text-decoration:none}
.gaba3-mural-expira{margin:8px 0 2px;padding:5px 10px;border-radius:8px;background:rgba(85,201,0,.12);color:#a7f06d;font-size:11px;font-weight:700;text-align:center}
.gaba3-mural-item{flex-wrap:wrap;gap:6px 10px}
.gaba3-ver-curriculo{margin-left:auto;padding:6px 12px;border:1px solid rgba(85,201,0,.5);border-radius:999px;background:transparent;color:#a7f06d;font-size:11px;font-weight:700;cursor:pointer}
.gaba3-ver-curriculo:hover{background:rgba(85,201,0,.15)}
#mural-curriculo-conteudo .gaba3-mini-sala{padding:10px 0}
.gaba3-curriculo-resumo{margin:12px 0;padding:14px 16px;border-left:3px solid #55c900;border-radius:0 8px 8px 0;background:rgba(85,201,0,.08);color:#f0e4d0;font-size:14.5px;font-style:italic;line-height:1.5}
.gaba3-curriculo-divisor{margin:16px 0;border:0;border-top:1px solid rgba(115,72,22,.4)}
.gaba3-curriculo-cabecalho{padding:4px 0 12px;border-bottom:2px solid rgba(85,201,0,.45)}
.gaba3-curriculo-cabecalho h2{margin:4px 0;font-size:28px;line-height:1.08}
.gaba3-curriculo-alvo{margin:0 0 8px;color:#a7f06d;font-weight:800;font-size:16px}
.gaba3-curriculo-secao{margin:16px 0}
.gaba3-curriculo-secao h3{margin:0 0 6px;color:#dfffc4;font-size:14px}
.gaba3-curriculo-secao p{margin:0;color:#f6f0e8;line-height:1.5}
@media print{
    body *{visibility:hidden}
    #mural-curriculo-conteudo, #mural-curriculo-conteudo *{visibility:visible}
    #mural-curriculo-conteudo{position:absolute;top:0;left:0;width:100%;background:#fff!important;color:#000!important}
    #mural-curriculo-conteudo .cerrar-modal, #mural-curriculo-conteudo #mural-imprimir, #mural-curriculo-conteudo .gaba3-no-print{display:none!important}
    #mural-curriculo-conteudo *{color:#000!important}
    #mural-curriculo-conteudo .gaba3-curriculo-alvo{font-weight:700!important}
}

/* Pedido do dono 2026-09-13: Mural de Empregos e Preciso de um serviço
   viram duas caixas visuais (como no lugar que sobrou ao mudar os links
   legais/suporte pras Configurações), não mais linhas de texto perdidas
   na lista. */
/* Simplificação da portada (2026-10-08): caixas compactas, só ícone de linha +
   nome (sem subtítulo e sem título "Mais na plataforma" por cima), ~84px de altura. */
.gaba3-duas-caixas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.gaba3-caixa-grande{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;min-height:84px;padding:12px 12px;border:1px solid rgba(115,72,22,.38);border-radius:14px;background:linear-gradient(180deg,rgba(255,210,140,.05) 0%,rgba(0,0,0,.14) 100%);color:#fff;text-align:left;text-decoration:none;cursor:pointer;box-sizing:border-box}
.gaba3-caixa-grande .gaba3-caixa-icone{width:24px;height:24px;color:#55c900}
.gaba3-caixa-grande .gaba3-caixa-icone svg{width:100%;height:100%}
.gaba3-caixa-grande b{font-size:14.5px;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.gaba3-ajuda-nota{
    display:block;
    margin-top:8px;
    color:#c8b89a;
    text-align:center;
}

.gaba3-ajuda-nota[hidden]{display:none!important}

/* --- Rodapé: tábua de madeira escura integrada ao GABA3 --- */

.gaba3-rodape{
    margin-top:20px;
    padding-top:8px;
}

/* Rodapé sem madeira nem parafusos — pedra à mostra, igual ao resto da
   página, só com bordas finas separando os blocos. */
.gaba3-rodape .placa-tornillo{
    display:none;
}
.gaba3-rodape-placa{
    position:relative;
    padding:26px 30px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:none;
    box-shadow:none;
}

.gaba3-confianca{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.gaba3-confianca-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
}

.gaba3-confianca-item .icone{
    flex:none;
    display:grid;
    place-items:center;
    width:52px;
    height:52px;
    font-size:24px;
    border-radius:50%;
    background:linear-gradient(135deg,#c9942f,#7a5115);
    box-shadow:inset 0 0 0 1px rgba(255,220,160,.35),0 4px 10px #0005;
}

.gaba3-confianca-item b{
    display:block;
    margin-bottom:4px;
    font-size:14px;
    color:var(--gaba3-verde,#55c900);
}

.gaba3-confianca-item small{
    color:#d9c9ac;
    font-size:12px;
    line-height:1.4;
}

/* Painel escuro que encerra os 4 documentos oficiais — mesma tábua com
   parafusos do painel de confiança acima, para que se leia como UM bloco. */
.gaba3-rodape-docs-placa{
    position:relative;
    margin-top:18px;
    padding:24px 30px 28px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:none;
    box-shadow:none;
}

.gaba3-rodape-docs-titulo{
    margin:0 0 18px;
    color:var(--gaba3-verde,#55c900);
    font-size:13px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-align:center;
}

.gaba3-rodape-docs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:22px;
}

.gaba3-rodape-docs a{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:10px;
    border-radius:12px;
    color:inherit;
    text-decoration:none;
    transition:background .18s ease;
}

.gaba3-rodape-docs a:hover{
    background:rgba(255,210,140,.06);
}

.gaba3-rodape-docs a .icone{
    flex:none;
    font-size:20px;
    filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
}

.gaba3-rodape-docs a b{
    display:block;
    margin-bottom:3px;
    font-size:13px;
    color:var(--gaba3-verde,#55c900);
}

.gaba3-rodape-docs a:hover b{
    color:var(--gaba3-verde,#55c900);
}

.gaba3-rodape-docs a small{
    color:#b7a888;
    font-size:11px;
    line-height:1.4;
}

/* Faixa de destaque para a frase de fechamento — acento verde da marca,
   sutil, em vez da madeira clara/laranja de antes. */
.gaba3-rodape-frase-placa{
    margin-top:18px;
    padding:20px 24px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:none;
    box-shadow:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.gaba3-rodape-frase-placa img{
    width:22px;
    height:22px;
    flex:none;
}

.gaba3-confianca-frase{
    margin:0;
    color:#fff;
    font-weight:700;
    font-size:16px;
    line-height:1.5;
    text-align:center;
    text-shadow:none;
}

.gaba3-rodape-baixo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #ffffff0f;
    color:#9c98ab;
    font-size:11.5px;
}

.gaba3-rodape-compartilhar{
    display:flex;
    gap:10px;
}

.gaba3-rodape-compartilhar button{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    border:1px solid rgba(120,78,36,.25);
    background:#f7f2e8;
    box-shadow:0 3px 8px #0004;
    cursor:pointer;
    transition:background .18s ease,transform .15s ease,box-shadow .18s ease;
}

.gaba3-rodape-compartilhar button:hover{
    background:#fffdf7;
    transform:translateY(-2px);
    box-shadow:0 5px 12px #0006;
}

@media (max-width:820px){
    .gaba3-rodape-placa{padding:20px 18px}
    .gaba3-confianca{grid-template-columns:1fr; gap:18px}
    .gaba3-rodape-docs-placa{padding:18px 16px 22px}
    .gaba3-rodape-docs{grid-template-columns:repeat(2,1fr); gap:18px}
    .gaba3-rodape-frase-placa{padding:16px 18px}
    .gaba3-confianca-frase{font-size:14px}
    .gaba3-rodape-baixo{flex-direction:column; text-align:center}
}

/* --- Layout de duas colunas a partir de telas grandes --- */

@media (min-width:1024px){
    .gaba3-layout{
        flex-direction:row;
        align-items:flex-start;
    }
    .gaba3-layout-main{
        flex:2;
    }
    .gaba3-aside{
        display:flex;
        flex-direction:column;
        gap:14px;
        flex:1;
        max-width:340px;
        position:sticky;
        top:calc(var(--gaba3-header-h,92px) + 14px);
        align-self:flex-start;
        max-height:calc(100vh - var(--gaba3-header-h,92px) - 28px);
        overflow-y:auto;
        scrollbar-width:thin;
        /* Desce o suficiente pra nunca ficar embaixo da publicidade local
           flutuante do Destaque (medido de verdade em JS, index.html,
           porque o tamanho quadrado da publicidade muda com a largura da
           tela) — pedido do dono, 2026-09-15: só esta coluna desce, a
           coluna principal ao lado fica exatamente onde já estava. */
        margin-top:var(--gaba3-aside-push,0px);
    }
    .gaba3-solo-movil{
        display:none;
    }
    .gaba3-solo-desktop{
        display:block;
    }
}

/* Minhas salas (lista real, vinda do servidor) dentro do painel de perfil.
   Título à esquerda, ícones com contadores reais à direita — sem deixar
   metade da linha vazia. */
.gaba3-minhas-salas-estado{margin:6px 2px;color:#a6b8a4;font-size:13px;line-height:1.4}
.gaba3-minha-sala-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 2px;border-bottom:1px solid #ffffff12;text-decoration:none;color:#fff}
.gaba3-minha-sala-item:last-child{border-bottom:0}
.gaba3-minha-sala-info{flex:1;min-width:0;display:grid;gap:2px}
.gaba3-minha-sala-avatar{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#24452a center/cover no-repeat;color:#dfffd0;font:800 15px/1 inherit;border:2px solid #7aff5055;overflow:hidden}
.gaba3-minha-sala-titulo{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gaba3-minha-sala-subtitulo{font-size:11px;color:#9bcaa2}
.gaba3-minha-sala-stats{flex:none;display:flex;align-items:center;gap:12px}
.gaba3-stat{display:flex;align-items:center;gap:4px;color:#9bcaa2}
.gaba3-stat-icone{color:#7aff50}
.gaba3-stat-icone svg{width:15px;height:15px}
.gaba3-stat-numero{font-size:12px;font-weight:700}

/* "Apagar uma sala" (dentro de Configurações): escolher a sala antes da senha. */
.gaba3-apagar-sala-lista{display:grid;gap:6px;max-height:min(50vh,320px);overflow:auto;margin-bottom:14px}
.gaba3-apagar-sala-item{display:grid;gap:2px;width:100%;padding:11px;border:1px solid #ffffff18;border-radius:10px;background:#0a140d;color:#fff;text-align:left;cursor:pointer;font:inherit}
.gaba3-apagar-sala-item:hover,.gaba3-apagar-sala-item:focus-visible{outline:none;border-color:#e56b6b66;background:#e56b6b18}
.gaba3-apagar-sala-item b{font-size:14px}
.gaba3-apagar-sala-item small{color:#9bcaa2;font-size:11px}

/* Confirmação de senha antes de excluir uma sala em definitivo. */
.gaba3-confirmar-exclusao{position:fixed;inset:0;z-index:10060;display:flex;align-items:center;justify-content:center;padding:20px;background:#000000a6}
.gaba3-confirmar-exclusao-caixa{width:min(340px,100%);padding:20px;border:1px solid #55c90045;border-radius:16px;background:#0e1a12;color:#fff;box-shadow:0 18px 44px #0009}
.gaba3-confirmar-exclusao-caixa h3{margin:0 0 8px;font-size:16px}
.gaba3-confirmar-exclusao-caixa p{margin:0 0 14px;color:#a9c4ac;font-size:13px;line-height:1.4}
.gaba3-confirmar-exclusao-caixa input{width:100%;margin-bottom:10px;padding:11px;border:1px solid #ffffff22;border-radius:9px;background:#0a140d;color:#fff;font:inherit}
.gaba3-confirmar-exclusao-caixa input:focus-visible{outline:none;border-color:#7aff50aa}
.gaba3-confirmar-exclusao-erro{margin:0 0 10px;color:#ff8080;font-size:12px}
.gaba3-confirmar-exclusao-acoes{display:flex;gap:8px}
.gaba3-confirmar-exclusao-acoes button{flex:1;min-height:42px;border:0;border-radius:9px;font:600 13px/1 inherit;cursor:pointer}
.gaba3-confirmar-exclusao-acoes [data-cancelar]{background:#1c2c1f;color:#fff}
.gaba3-confirmar-exclusao-acoes [data-confirmar]{background:#e56b6b;color:#fff}
.gaba3-confirmar-exclusao-acoes button:disabled{opacity:.6;cursor:default}
/* Cabeçalho do painel da conta (pedido do dono 2026-09-28): foto da
   pessoa + UM título só. A foto amplia ao toque (.gaba3-visor-foto). */
.gaba3-painel-conta-identidade{display:flex;align-items:center;gap:10px;min-width:0}
.gaba3-painel-conta-identidade h2{margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Chat PÚBLICO de Comércio e Profissionais (passo 2): selo fixo e aviso junto da caixa de escrever. */
.chat-publico-aviso{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 6px;padding:7px 10px;border-radius:10px;background:#2b1e10;border:1px solid rgba(232,168,64,.45);color:#f0d8a8;font-size:.74rem;line-height:1.35;position:relative;z-index:1}
.chat-publico-aviso b{color:#f0c070}
.chat-publico-aviso p{margin:0;flex:1 1 180px;min-width:0}
.chat-publico-aviso .chat-publico-privado{flex:none;padding:5px 10px;border-radius:8px;border:1px solid #7fc548;background:rgba(85,201,0,.14);color:#c9f2a5;font:inherit;font-weight:800;cursor:pointer}
.chat-publico-aviso .chat-publico-privado[hidden]{display:none}
/* Comércio no celular com o chat fechado: a faixa tem 64px só para a caixa de escrever (o texto
   dela já diz "Mensagem pública"). O aviso completo aparece quando o chat abre. */
@media (max-width:850px){.pagina-publica .publica-chat-panel:not(.publica-chat-expandido) .chat-publico-aviso{display:none}}
.minimo-contatos{margin-top:12px}
.minimo-contatos[hidden]{display:none}
.minimo-contatos-topo{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-size:.85rem;color:#c8b89a}
.minimo-contatos-topo b{color:#7fc548;font-size:.8rem}
.minimo-contatos-lista{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:220px;overflow-y:auto}
/* `.modal-sala label` empilha em coluna; aqui cada contato é uma linha. */
#creador-sala .minimo-contatos-lista label{flex-direction:row;font-weight:400;font-size:inherit}
.minimo-contatos-lista label{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid rgba(180,120,50,.25);border-radius:10px;background:rgba(0,0,0,.2);cursor:pointer;min-width:0}
.minimo-contatos-lista label:has(input:checked){border-color:#7fc548;background:rgba(85,201,0,.1)}
.minimo-contatos-lista input{flex:none;width:18px;height:18px;accent-color:#55c900}
.minimo-contatos-lista img,.minimo-contatos-lista .inicial{flex:none;width:32px;height:32px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:#2a1d10;color:#e8d5b0;font-weight:800}
.minimo-contatos-lista .nome{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.minimo-contatos-lista .nome b{font-size:.9rem;color:#e8d5b0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minimo-contatos-lista .nome small{font-size:.75rem;color:#a8906a}
.minimo-contatos-vazio{margin:4px 0 0;font-size:.8rem;color:#a8906a}
/* Busca pelo @usuário dentro de "Com quem é a sala?" (2026-10-15): contato ou não; quem não é
   contato recebe convite e só entra ao aceitar. Linha fina, cabe em 360px. */
.minimo-busca{display:flex;gap:6px;margin:0 0 6px;min-width:0}
#creador-sala .minimo-busca input{flex:1 1 auto;min-width:0;height:40px;padding:0 10px;font-size:.92rem}
#creador-sala .minimo-busca button{flex:none;height:40px;padding:0 12px;border-radius:10px;font-weight:800;white-space:nowrap}
.minimo-busca-aviso{margin:0 0 6px;font-size:.8rem;line-height:1.35;color:#d9c7a3;overflow-wrap:anywhere}
.minimo-busca-aviso[hidden],.minimo-busca-resultado[hidden],.minimo-contatos-dica[hidden]{display:none}
.minimo-busca-aviso--erro{color:#ffb4a8;font-weight:700}
.minimo-busca-aviso--ok{color:#b8ec8c}
.minimo-busca-resultado{margin-bottom:8px;max-height:none}
.minimo-busca-pessoa{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid #7fc548;border-radius:10px;background:rgba(85,201,0,.08);min-width:0}
.minimo-busca-pessoa .nome{flex:1 1 auto}
#creador-sala .minimo-busca-convidar{flex:none;width:auto;min-height:38px;padding:6px 10px;border-radius:10px;font-size:.8rem;font-weight:800;line-height:1.15;white-space:normal;max-width:46%}
.minimo-busca-convidar:disabled{opacity:.7;cursor:default}
.minimo-recebe-convite{flex:none;margin-left:auto;padding:2px 7px;border-radius:999px;border:1px solid rgba(240,196,106,.55);color:#f0c46a;font-size:.7rem;font-style:normal;font-weight:800;white-space:nowrap}
.minimo-contatos-dica{margin:6px 0 0;font-size:.8rem;font-weight:700;color:#f0c46a}
.gaba3-painel-conta-nomes{display:flex;flex-direction:column;gap:2px;min-width:0}
.gaba3-painel-conta-arroba{display:flex;align-items:center;gap:4px;min-width:0}
.gaba3-painel-conta-arroba[hidden]{display:none}
.gaba3-painel-conta-arroba span{font-size:.86rem;font-weight:700;color:#7fc548;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}
/* `.painel-minhas-salas > header button` dá caixa aos botões do cabeçalho; aqui são ícones soltos. */
.painel-minhas-salas > header .gaba3-painel-conta-arroba button{display:grid;place-items:center;width:30px;height:30px;min-width:0;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#c8b89a;cursor:pointer}
.painel-minhas-salas > header .gaba3-painel-conta-arroba button:hover,.painel-minhas-salas > header .gaba3-painel-conta-arroba button:focus-visible{color:#7fc548;background:none}
.painel-minhas-salas>header .gaba3-painel-conta-foto{position:relative;flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#f2994a,#c65d89);color:#fff;font:900 13px/1 inherit;overflow:hidden;cursor:zoom-in}
.painel-minhas-salas>header .gaba3-painel-conta-foto[hidden]{display:none}
/* A regra geral `header button{display:grid}` ganhava do atributo hidden:
   a seta ‹ (voltar) aparecia na raiz do painel, onde não há pra onde voltar. */
.painel-minhas-salas>header button[hidden]{display:none}
.painel-minhas-salas>header .gaba3-painel-conta-foto:has(> img){background:transparent}
.gaba3-painel-conta-foto>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.gaba3-painel-conta-foto:focus-visible{outline:2px solid #8fff67;outline-offset:2px}
.gaba3-visor-foto{position:fixed;inset:0;z-index:10080;display:flex;align-items:center;justify-content:center;padding:24px;background:#000000e6;cursor:zoom-out;animation:gaba3-visor-entrar .18s ease-out}
.gaba3-visor-foto img{max-width:min(92vw,560px);max-height:80vh;border-radius:18px;object-fit:contain;box-shadow:0 20px 60px #000;cursor:default}
.gaba3-visor-foto-fechar{position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;width:44px;height:44px;padding:10px;border:0;background:transparent;color:#fff;cursor:pointer;filter:drop-shadow(0 2px 6px #000)}
.gaba3-visor-foto-fechar span,.gaba3-visor-foto-fechar svg{display:block;width:100%;height:100%}
@keyframes gaba3-visor-entrar{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.gaba3-visor-foto{animation:none}}
/* Verificação de identidade (pedido do dono 2026-09-28): dois passos com
   ícone solto + palavra concreta, sem texto técnico nem campo de arquivo
   nativo. Ícones sem bolita de fundo, só drop-shadow. */
.gaba3-verif h3{display:flex;align-items:center;gap:8px}
.gaba3-verif-titulo-icone{display:inline-flex;width:18px;height:18px;color:#8fff67}
.gaba3-verif-titulo-icone svg,.gaba3-verif-icone svg,.gaba3-verif-ok svg,.gaba3-verif-botoes svg,.gaba3-verif .gaba3-confirmar-exclusao-acoes svg{width:100%;height:100%;display:block}
.gaba3-verif-status{margin:0 0 12px!important;font-size:12.5px!important;font-weight:700;color:#8fff67!important}
.gaba3-verif-status[data-status="rechazado"],.gaba3-verif-status[data-status="duplicado_bloqueado"]{color:#ff9a9a!important}
.gaba3-verif-status[data-status="pending"]{color:#ffd76a!important}
.gaba3-verif-passos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.gaba3-verif-passo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:132px;padding:12px 8px;border:1.5px dashed #55c90066;border-radius:14px;background:#0a140d;color:#fff;font:inherit;text-align:center;cursor:pointer;overflow:hidden}
.gaba3-verif-passo:focus-visible{outline:2px solid #8fff67;outline-offset:2px}
.gaba3-verif-passo.is-pronto{border-style:solid;border-color:#55c900}
.gaba3-verif-icone{display:block;width:38px;height:38px;margin-bottom:4px;color:#8fff67;filter:drop-shadow(0 2px 4px #000c)}
.gaba3-verif-icone[hidden],.gaba3-verif-ok[hidden],.gaba3-verif-camera[hidden]{display:none}
.gaba3-verif-passo b{position:relative;z-index:1;font-size:14px}
.gaba3-verif-passo small{position:relative;z-index:1;color:#a9c4ac;font-size:11.5px}
.gaba3-verif-miniatura{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.gaba3-verif-passo.is-pronto b,.gaba3-verif-passo.is-pronto small{text-shadow:0 1px 4px #000}
.gaba3-verif-ok{position:absolute;top:8px;right:8px;z-index:1;width:22px;height:22px;color:#8fff67;filter:drop-shadow(0 1px 3px #000)}
.gaba3-verif-camera{margin-bottom:12px;padding:10px;border:1px solid #ffffff1a;border-radius:12px;background:#08110b}
.gaba3-verif-camera video{width:100%;max-height:240px;border-radius:9px;object-fit:cover;transform:scaleX(-1)}
.gaba3-verif-aviso{margin:4px 0 8px!important;color:#ffd76a!important;font-size:12.5px!important;text-align:center}
.gaba3-verif-botoes{display:flex;justify-content:center;gap:10px;margin-top:8px}
/* Documento declarado na verificação (só contas criadas antes do cadastro com documento) */
.gaba3-verif-documento{display:grid;gap:8px;margin-bottom:12px;padding:12px;border:1px dashed rgba(180,120,50,.35);border-radius:12px;background:rgba(0,0,0,.22)}
.gaba3-verif-documento[hidden]{display:none}
.gaba3-verif-lgpd{margin:0 0 12px;font-size:.76rem;line-height:1.4;color:#c8b89a}
.gaba3-verif-lgpd a{color:#7fc548}
.gaba3-verif-documento-texto{margin:0;font-size:.78rem;line-height:1.4;color:#c8b89a}
.gaba3-verif-documento select,.gaba3-verif-documento input{width:100%;min-height:42px;padding:0 12px;border-radius:10px;border:1px solid rgba(180,120,50,.3);background:rgba(255,255,255,.05);color:#e8d5b0;font:inherit;box-sizing:border-box}
.gaba3-verif-documento select option{background:#2a1d10;color:#e8d5b0}
.gaba3-verif-botoes>button,.gaba3-verif-botoes>label{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;border:0;border-radius:10px;background:#1c2c1f;color:#fff;font:600 13px/1 inherit;cursor:pointer}
.gaba3-verif-botoes>button[hidden],.gaba3-verif-botoes>label[hidden]{display:none}
.gaba3-verif-botoes span{display:inline-flex;width:20px;height:20px;color:#8fff67}
.gaba3-verif .gaba3-confirmar-exclusao-acoes [data-confirmar]{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#46b91f}
.gaba3-verif .gaba3-confirmar-exclusao-acoes [data-confirmar] [data-morph-icone]{display:inline-flex;width:17px;height:17px}

/* Aviso curto ao fundo da tela (foto/dados/senha atualizados). */
.gaba3-perfil-notice{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10070;max-width:calc(100vw - 32px);padding:11px 14px;border-radius:12px;color:#fff;background:#102316;border:1px solid #63bd44;box-shadow:0 10px 30px #0006;font-weight:700}
.gaba3-perfil-notice--erro{border-color:#e56b6b}

/* Dropdown real de notificações (sino do cabeçalho). */
.gaba3-notificacao-item{padding:10px 14px;border-bottom:1px solid #ffffff12;font-size:13px;color:#d7ecd4}
.gaba3-notificacao-item:last-child{border-bottom:0}
.gaba3-notificacao-item--nova{color:#fff;font-weight:700;background:#1a3a2044}

/* Cabeçalho — busca na mesma linha da marca e dos ícones (fica por último de
   propósito: os blocos acima ainda jogam a busca pra uma segunda linha no
   celular, e isso precisa ceder). No celular a busca fica compacta, centrada
   entre a marca e o sino/carta/perfil — libera a segunda linha que a busca
   ocupava, pronta pra outro conteúdo (ex.: publicidade) no futuro. Na web a
   busca fica maior, porque tem espaço de sobra. */
body:not(.pagina-sala) .barra-superior{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    z-index:120!important;
    grid-template-columns:auto minmax(220px,480px) auto!important;
    grid-template-rows:auto!important;
    align-items:center!important;
    padding-top:8px!important;
    padding-bottom:8px!important;
}
body:not(.pagina-sala) main{
    padding-top:118px!important;
}
body:not(.pagina-sala) .marca-busqueda{grid-column:1!important;grid-row:1!important}
body:not(.pagina-sala) .busqueda-interna{grid-column:2!important;grid-row:1!important;min-width:0!important;margin:0!important;align-self:start!important;margin-top:-4px!important}
body:not(.pagina-sala) .cuenta-usuario{grid-column:3!important;grid-row:1!important}
body:not(.pagina-sala) .barra-superior .cinta-crear-header{min-height:52px!important}
body:not(.pagina-sala) .buscador-inline-lupa svg{width:22px!important;height:22px!important}
body:not(.pagina-sala) .buscador-inline-input{font-size:16px!important}

@media(max-width:820px){
    body:not(.pagina-sala) .barra-superior{
        grid-template-columns:auto minmax(0,1fr) auto!important;
        grid-template-rows:auto!important;
        column-gap:8px!important;
        row-gap:0!important;
        padding-top:6px!important;
        padding-bottom:6px!important;
    }
    body:not(.pagina-sala) .marca-busqueda{grid-column:1!important;grid-row:1!important}
    body:not(.pagina-sala) .busqueda-interna{grid-column:2!important;grid-row:1!important;min-width:0!important;align-self:start!important;margin-top:-2px!important}
    body:not(.pagina-sala) .cuenta-usuario{grid-column:3!important;grid-row:1!important}
    /* Cabeçalho volta a ter uma linha só — a faixa de categorias sobe. */
    body:not(.pagina-sala) .categorias-contenedor{position:sticky!important;top:calc(74px + env(safe-area-inset-top,0px))!important;grid-column:1 / -1!important;width:auto!important}
    /* O `main{padding-top:118px}` (regra de cima, pensada pro cabeçalho
       largo de desktop) nunca foi ajustado pro celular — aqui o cabeçalho
       fica mais baixo (6px de padding) mas a faixa de ícones tem sua
       própria altura embaixo dele, terminando real a ~168px do topo.
       Sem este ajuste, o topo do cartão de destaque ficava geometricamente
       por baixo da faixa de ícones (~38-50px de sobreposição real, mesmo
       sem dar pra ver visualmente) — pedido do dono 2026-09-13, verificado
       com medição real, não só a olho. */
    /* o dono identificou a causa raiz: os ícones vivem numa segunda linha do
       grid do cabeçalho (`.categorias-contenedor`), com padding próprio
       generoso — isso faz essa "franja" ficar bem mais alta do que o
       conteúdo visível dela precisa, sobrando espaço reservado mesmo com
       `main` ajustado. Aperta o padding pra a franja ficar do tamanho real
       do conteúdo — ver o ajuste real em frontend/gaba3-mobile-refine.css
       (min-height do .acceso-plataforma, essa é a regra que realmente
       manda no celular, mais específica e carregada depois desta). */
    /* Usa a MESMA variável --gaba3-header-h que frontend/gaba3-mobile-
       refine.css já usa pra posicionar a faixa de categorias (medida de
       verdade via ResizeObserver, index.html) — nunca mais um número
       chutado que desalinha assim que a altura real do cabeçalho muda. */
    body:not(.pagina-sala) main{padding-top:var(--gaba3-header-h, 150px)!important}
    body:not(.pagina-sala) .barra-superior .cinta-crear-header{min-height:38px!important;padding:0 10px!important;gap:7px!important;border-radius:11px!important}
    body:not(.pagina-sala) .buscador-inline-lupa svg{width:16px!important;height:16px!important}
    body:not(.pagina-sala) .buscador-inline-input{font-size:13px!important}
}

@media(max-width:420px){
    body:not(.pagina-sala) .barra-superior{column-gap:6px!important}
    body:not(.pagina-sala) .barra-superior .cinta-crear-header{padding:0 8px!important;gap:5px!important}
    body:not(.pagina-sala) .buscador-inline-input{font-size:12px!important;text-overflow:ellipsis!important}
    /* Nome "GABA3" em texto ocupava demasiado espaço nas telas mais
       estreitas, deixando o campo de busca com largura real de menos de
       35px (texto do placeholder cortado em "Busc"). O ícone sozinho já
       identifica a marca aqui; o nome completo continua no rodapé e em
       telas maiores. */
    body:not(.pagina-sala) .barra-superior .marca-nombre-led{display:none!important}
}

/* Selo "sala verificada" da GABA3 — mesmo círculo em comércio, profissional
   e criadores (canto superior direito da cabeceira). Regra única
   aqui porque as 3 salas já carregam este arquivo — antes estava
   duplicada em cada CSS de sala. */
.gaba3-selo-canto{position:absolute;top:6px;right:8px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#1c3a22,#07120a 75%);border:2px solid #55c900;box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 0 3px rgba(85,201,0,.15);display:flex;align-items:center;justify-content:center;z-index:35;pointer-events:none}

.gaba3-selo-canto[hidden]{display:none}
.gaba3-selo-img{width:26px;height:26px;border-radius:6px;display:block}

/* Bloco de publicidade real (GABA ADS) — reusado em Portada e nas salas
   elegíveis (Profissional, Criadores, Comércio). O rótulo
   "Publicidade" é obrigatório e sempre visível: transparência de que é
   conteúdo pago, nunca confundido com conteúdo real da sala. */
.gaba3-ad-slot{position:relative;margin:12px 0;border-radius:14px;overflow:hidden;background:#0e140f;border:1px solid rgba(255,255,255,.08)}
.gaba3-ad-slot[hidden]{display:none!important}
/* Regra do dono (2026-09-15): a mídia sempre ocupa 100% da caixa, nunca
   um pedaço sólido/preto embaixo — o texto flutua por cima dela, com um
   véu de gradiente pra continuar legível. Mesmo padrão já usado no card
   de destaque da portada (fundo + véu + conteúdo). */
.gaba3-ad-link{position:relative;display:block;width:100%;height:100%;text-decoration:none;color:inherit}
.gaba3-ad-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.gaba3-ad-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,10,6,0) 38%,rgba(8,10,6,.62) 70%,rgba(6,8,4,.94) 100%)}
.gaba3-ad-badge-row{position:absolute;top:10px;left:10px;z-index:2}
.gaba3-ad-badge{display:inline-block;padding:2px 9px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.16);color:#cfe8b8;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.gaba3-ad-body{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 14px 14px}
.gaba3-ad-logo{width:32px;height:32px;border-radius:9px;object-fit:cover;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.gaba3-ad-headline{margin:0;font-weight:800;font-size:14px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.gaba3-ad-texto{margin:0;font-size:12px;color:#e4ede0;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.gaba3-ad-cta{margin-top:2px;padding:6px 13px;border-radius:9px;background:#55c900;color:#0a1406;font-weight:800;font-size:12px}


/* Blocos fixos 70/30 (publicidade real ou, sem anúncio disponível, salas
   recém-criadas reais) espalhados a cada 3 salas dentro de cada fileira
   de categoria — pedido do dono, 2026-09-16. Nunca deslizam junto com o
   carrossel: cada fileira vira uma pilha vertical de "segmentos"
   (pequeno trecho deslizável de até 3 salas + este bloco fixo + o
   próximo trecho...), mesmo espírito visual do destaque 70/30 do topo. */
.gaba3-secao-segmentos{
    display:flex;
    flex-direction:column;
    gap:10px;
}
/* Confirmado pelo dono, 2026-09-16: as duas caixas são lado a lado
   (horizontal, mesmo espírito do destaque 70/30 do topo) — o "pra baixo"
   é onde a FILEIRA desse bloco aparece (a cada 3 cartões, descendo a
   página), não a orientação das caixas em si. */
.gaba3-anuncio-fixo{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(120px,3fr);
    gap:10px;
}
.gaba3-anuncio-grande,
.gaba3-anuncio-pequena{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    border:1px solid var(--borde);
    background:#17182a;
    min-height:0;
}
.gaba3-anuncio-grande{height:200px}
.gaba3-anuncio-pequena{height:200px}
.gaba3-anuncio-grande .sala-card,
.gaba3-anuncio-pequena .sala-card{
    position:absolute;
    inset:0;
    border:0;
    border-radius:0;
}
.gaba3-anuncio-grande .sala-imagen,
.gaba3-anuncio-pequena .sala-imagen{height:100%}
/* Achado real: com só uma das duas caixas tendo conteúdo real, a outra
   ficava vazia mas visível — a que sobrou passa a ocupar a largura
   inteira em vez de deixar um retângulo escuro do lado. */
.gaba3-anuncio-fixo:has(.gaba3-anuncio-pequena[hidden]) .gaba3-anuncio-grande{grid-column:1/-1}
.gaba3-anuncio-fixo:has(.gaba3-anuncio-grande[hidden]) .gaba3-anuncio-pequena{grid-column:1/-1}
@media(max-width:850px){
    .gaba3-anuncio-fixo{grid-template-columns:minmax(0,7fr) minmax(88px,3fr);gap:7px}
    .gaba3-anuncio-grande{height:150px}
    .gaba3-anuncio-pequena{height:150px}
    .gaba3-ad-headline{font-size:12px!important}
    .gaba3-ad-texto{font-size:10px!important}
    .gaba3-ad-cta{font-size:10px!important;padding:4px 9px!important}
}

/* Selo real (nunca inventado) numa tarjeta a cada grupo de 3 — pedido do
   dono, 2026-09-16: "variedade... pra chamar a atenção". "Novo" quando a
   sala foi criada há pouco tempo de verdade; "Em alta" quando tem mais
   engajamento real que as outras do mesmo grupo — nunca as duas ao mesmo
   tempo, nunca sem critério real por trás. */
.sala-card-selo{
    position:absolute;
    top:8px;
    left:8px;
    z-index:2;
    padding:3px 10px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.02em;
    color:#0a1406;
    box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.sala-card-selo--novo{background:linear-gradient(100deg,#7cf25a,#3fae2c)}
.sala-card-selo--alta{background:linear-gradient(100deg,#ffb84b,#ff7a1a)}

/* 3 acentos fixos revezando nos blocos 70/30 — nunca cor de verdade
   aleatória, só uma rotação prolija (verde/azul/laranja) pra dar
   variedade sem virar bagunça visual. */
.gaba3-anuncio-fixo--1 .gaba3-anuncio-grande,
.gaba3-anuncio-fixo--1 .gaba3-anuncio-pequena{border-color:rgba(85,201,0,.45)}
.gaba3-anuncio-fixo--2 .gaba3-anuncio-grande,
.gaba3-anuncio-fixo--2 .gaba3-anuncio-pequena{border-color:rgba(78,168,255,.45)}
.gaba3-anuncio-fixo--3 .gaba3-anuncio-grande,
.gaba3-anuncio-fixo--3 .gaba3-anuncio-pequena{border-color:rgba(255,153,64,.45)}

/* =========================================================
   PAINEL LATERAL DA CONTA — BASE ÚNICA DE NAVEGAÇÃO
   ---------------------------------------------------------
   Esta camada fica no fim do arquivo de propósito: substitui as regras
   antigas, espalhadas e com !important, sem mudar nenhum botão nem o
   JavaScript dos módulos de conta. O painel nunca deve competir com a
   barra inferior móvel ou produzir rolagem horizontal.
========================================================= */
.painel-minhas-salas{
    --painel-conta-fundo:#1a0e06;
    --painel-conta-superficie:rgba(35,20,9,.82);
    --painel-conta-borda:rgba(202,159,85,.48);
    --painel-conta-texto:#fff5dc;
    --painel-conta-suave:#e2cfa9;
    --painel-conta-destaque:#9cf07e;
    --painel-conta-hover:rgba(104,213,77,.14);
    position:fixed!important;
    z-index:130!important;
    top:calc(var(--gaba3-header-h, 92px) + 10px)!important;
    right:18px!important;
    left:auto!important;
    box-sizing:border-box;
    display:none;
    width:min(380px,calc(100vw - 36px));
    max-height:calc(100dvh - var(--gaba3-header-h, 92px) - 28px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    padding:14px!important;
    border:1px solid var(--painel-conta-borda)!important;
    border-radius:18px!important;
    background:
        linear-gradient(135deg,rgba(10,5,2,.72),rgba(37,19,6,.72)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/260px auto!important;
    color:var(--painel-conta-texto)!important;
    box-shadow:0 20px 56px rgba(0,0,0,.48)!important;
    isolation:isolate;
}
.painel-minhas-salas.perfil-salas-abierto{display:block!important}
.painel-minhas-salas *,
.painel-minhas-salas *::before,
.painel-minhas-salas *::after{box-sizing:border-box;min-width:0}
.painel-minhas-salas>header{
    top:-14px;
    margin:-14px -14px 10px;
    padding:14px;
    background:rgba(18,9,4,.82)!important;
    border-bottom-color:rgba(255,255,255,.12)!important;
}
.painel-minhas-salas>header small,
.painel-minhas-salas>header h2,
.configuracoes-perfil h3{color:var(--painel-conta-destaque)!important}
.painel-minhas-salas>header button{
    flex:0 0 36px;
    width:36px;
    height:36px;
    color:var(--painel-conta-texto)!important;
    background:var(--painel-conta-superficie)!important;
}
.configuracoes-perfil>button,
.configuracoes-perfil>a{
    width:100%;
    display:grid;
    grid-template-columns:25px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:48px;
    padding:6px 10px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--painel-conta-texto)!important;
    text-align:left;
    font:inherit;
    cursor:pointer;
}
.configuracoes-perfil>button small{color:var(--painel-conta-suave)!important}
.configuracoes-perfil>button b,
.configuracoes-perfil>a b{color:var(--painel-conta-suave)!important}
.configuracoes-perfil>button:hover,
.configuracoes-perfil>button:focus-visible,
.configuracoes-perfil>a:hover,
.configuracoes-perfil>a:focus-visible,
.painel-minhas-salas>header button:hover,
.painel-minhas-salas>header button:focus-visible{
    outline:2px solid var(--painel-conta-destaque);
    outline-offset:2px;
    background:var(--painel-conta-hover)!important;
    color:var(--painel-conta-texto)!important;
}
.painel-minhas-salas .boton-principal{
    min-height:46px;
    width:100%;
    justify-content:center;
}
.painel-minhas-salas .gaba3-minhas-salas-estado{color:var(--painel-conta-suave)!important}

/* Router interno do painel: a raiz e uma única vista de cada vez. Os
   controles continuam usando os mesmos IDs/data-attributes dos módulos. */
.gaba3-painel-conta-acoes-cabecalho{display:flex;align-items:center;gap:8px}
.gaba3-painel-conta-raiz{display:grid;gap:8px}
/* `hidden` é a fonte de verdade do router. Estas regras vencem os
   `display:grid` da raiz/botões e impedem qualquer vista administrativa
   ou seção inativa de vazar para a tela. */
.gaba3-painel-conta-raiz[hidden],
.gaba3-painel-conta-raiz>button[hidden],
.gaba3-painel-conta-vista[hidden]{display:none!important}
.gaba3-painel-conta-raiz>button{
    width:100%;
    display:grid;
    grid-template-columns:25px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    min-height:62px;
    padding:10px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:rgba(30,15,6,.82);
    color:var(--painel-conta-texto);
    text-align:left;
    font:inherit;
    cursor:pointer;
}
.gaba3-painel-conta-raiz>button span:nth-child(2){display:grid;gap:3px}
.gaba3-painel-conta-raiz>button small{color:var(--painel-conta-suave)}
.gaba3-painel-conta-raiz>button>b:last-child{color:var(--painel-conta-suave);font-size:22px}
.gaba3-painel-conta-raiz>button:hover,
.gaba3-painel-conta-raiz>button:focus-visible{
    outline:2px solid var(--painel-conta-destaque);
    outline-offset:2px;
    background:var(--painel-conta-hover);
}
.gaba3-painel-conta-vista{min-width:0}
.gaba3-painel-conta-vista--informativa{
    padding:12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;
    background:var(--painel-conta-superficie);
}
.gaba3-painel-conta-vista--informativa p{margin:0;color:var(--painel-conta-suave);line-height:1.5}

/* Os formulários de configurações já existentes também permanecem sobre a
   madeira original; não é uma nova textura nem muda seu JavaScript. */
.gaba3-confirmar-exclusao-caixa{
    background:
        linear-gradient(135deg,rgba(13,7,3,.82),rgba(40,21,7,.80)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/260px auto!important;
    border-color:rgba(202,159,85,.48)!important;
}

/* O tema escuro reduz o brilho sem trocar texto por cinza ilegível. */
body.gaba3-modo-escuro:not(.pagina-sala) .painel-minhas-salas{
    --painel-conta-fundo:#100804;
    --painel-conta-superficie:rgba(22,11,4,.88);
    --painel-conta-borda:rgba(177,141,78,.42);
    --painel-conta-texto:#fff7e2;
    --painel-conta-suave:#d8c49d;
    --painel-conta-destaque:#a7f58a;
    --painel-conta-hover:rgba(130,238,100,.16);
}

/* A barra inferior é fixa: o painel termina antes dela, inclusive em iPhone. */
@media(max-width:820px){
    .painel-minhas-salas{
        top:calc(var(--gaba3-header-h, 125px) + 8px)!important;
        right:8px!important;
        left:8px!important;
        width:auto;
        max-height:calc(100dvh - var(--gaba3-header-h, 125px) - 86px - env(safe-area-inset-bottom, 0px))!important;
        padding:12px!important;
        border-radius:16px!important;
    }
    .painel-minhas-salas>header{
        top:-12px;
        margin:-12px -12px 10px;
        padding:12px;
    }
    .configuracoes-perfil>button,
    .configuracoes-perfil>a,
    .gaba3-cfg-linha{min-height:50px}
    .gaba3-painel-conta-raiz>button{min-height:58px}
}

@media(max-width:360px){
    .painel-minhas-salas{right:6px!important;left:6px!important;padding:10px!important}
    .painel-minhas-salas>header{top:-10px;margin:-10px -10px 8px;padding:10px}
    .configuracoes-perfil>button,
    .configuracoes-perfil>a{grid-template-columns:22px minmax(0,1fr) 18px;gap:6px;padding-inline:7px;font-size:13px}
    .configuracoes-perfil>button span,
    .configuracoes-perfil>a span{font-size:16px}
}

/* =========================================================
   GABA3 — BLOQUE VISUAL 1: PROFUNDIDAD, LUZ AMBIENTAL Y HERO
   ========================================================= */

/* 1. Profundidad ambiental ultra-sutil en cabecera / fondo superior */
@keyframes gaba3-profundidade-ambiente {
    0%, 100% {
        opacity: 0.30;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.50;
        transform: translateY(3px) scale(1.03);
    }
}
body:not(.pagina-sala) .barra-superior::after {
    content: "";
    position: absolute;
    inset: 0;
    bottom: -46px;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse 75% 65% at 50% 0%, rgba(77,236,122,0.06), transparent 75%);
    animation: gaba3-profundidade-ambiente 22s ease-in-out infinite;
}
@media (max-width: 820px) {
    body:not(.pagina-sala) .barra-superior::after {
        opacity: 0.20;
        bottom: -22px;
    }
}

/* 2. Buscador de Madera: Cavidad profunda y brillo esmeralda suave al foco */
.barra-superior .cinta-crear-header {
    transition: border-color .28s ease, box-shadow .28s ease, background .28s ease !important;
}
.barra-superior .cinta-crear-header:hover {
    border-color: rgba(85,201,0,.28) !important;
    box-shadow:
        inset 0 2px 8px rgba(0,0,0,.45),
        inset 0 1px 3px rgba(0,0,0,.30),
        0 0 12px rgba(85,201,0,0.08) !important;
}
.barra-superior .cinta-crear-header:focus-within {
    border-color: rgba(85,201,0,.52) !important;
    box-shadow:
        inset 0 3px 10px rgba(0,0,0,.58),
        inset 0 1px 4px rgba(0,0,0,.38),
        0 0 16px rgba(85,201,0,0.18),
        0 1px 0 rgba(255,255,255,0.06) !important;
    background:
        linear-gradient(180deg, rgba(16,10,3,.42) 0%, rgba(8,5,2,.55) 100%),
        url("assets/brand/fondo-madera-gaba3.webp?v=real1") center 38% / cover no-repeat !important;
}
.barra-superior .cinta-crear-header:focus-within .buscador-inline-lupa svg {
    color: #55cf45 !important;
    filter: drop-shadow(0 0 6px rgba(85,201,0,0.45));
    transition: color .24s ease, filter .24s ease;
}

/* Accesibilidad: Respeta prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    body:not(.pagina-sala) .barra-superior::after,
    body:not(.pagina-sala) .barra-superior .marca-nombre-led i {
        animation: none !important;
    }
}

/* ==========================================================================
   GABA3 — BLOQUE VISUAL 3: BARRA LATERAL + SKELETONS + SALAS PRIVADAS + COMUNIDAD
   ========================================================================== */

/* --- 1. BARRA LATERAL (INFORMACIÓN TRANQUILA) --- */
.gaba3-painel {
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.26s ease,
                box-shadow 0.26s ease;
    will-change: transform, box-shadow;
}

@media (hover: hover) and (pointer: fine) {
    .gaba3-painel:hover {
        transform: translateY(-1.5px);
        border-color: rgba(255, 255, 255, 0.18);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
    }

    .gaba3-mini-sala {
        border-radius: 8px;
        transition: background 0.18s ease, transform 0.18s ease;
        padding: 8px 6px;
        margin: 0 -6px;
    }
    .gaba3-mini-sala:hover {
        background: rgba(255, 255, 255, 0.04);
        transform: translateX(2px);
    }

    .gaba3-atividade-item {
        border-radius: 8px;
        transition: background 0.18s ease, transform 0.18s ease;
        padding: 9px 6px;
        margin: 0 -6px;
    }
    .gaba3-atividade-item:hover {
        background: rgba(255, 255, 255, 0.04);
        transform: translateX(2px);
    }
}

/* --- 2. SKELETON DE CARGA CON SHIMMER SUAVE --- */
.gaba3-skeleton-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 6px 0;
    pointer-events: none;
    user-select: none;
}
.gaba3-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gaba3-skeleton-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.gaba3-skeleton-thumb {
    width: 54px;
    height: 42px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
.gaba3-skeleton-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.gaba3-skeleton-line {
    height: 11px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
}
.gaba3-skeleton-title {
    width: 70%;
}
.gaba3-skeleton-sub {
    width: 45%;
    height: 9px;
}

/* Shimmer suave (ciclo de 2.6s, highlight translúcido muy calmado) */
.gaba3-skeleton-avatar::after,
.gaba3-skeleton-thumb::after,
.gaba3-skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    animation: gaba3SkeletonShimmer 2.6s infinite ease-in-out;
}
@keyframes gaba3SkeletonShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Transición skeleton -> fade corto -> contenido real */
.gaba3-fade-item {
    animation: gaba3FadeContent 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes gaba3FadeContent {
    0% {
        opacity: 0;
        transform: translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 3. SALAS PRIVADAS (SEGURIDAD Y PRIVACIDAD) --- */
.gaba3-privada-card {
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.28s ease !important;
}

.gaba3-privada-lock {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(14, 15, 22, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 195, 110, 0.28);
    color: #ffd180;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    pointer-events: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.gaba3-lock-svg {
    width: 14px;
    height: 14px;
}
.gaba3-privada-lock::after {
    content: "";
    position: absolute;
    inset: -50%;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 230, 185, 0.42) 50%, transparent 65%);
    transform: translateX(-130%);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .gaba3-privada-card:hover {
        transform: translateY(-2px) !important;
        border-color: rgba(255, 195, 110, 0.38) !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 195, 110, 0.15) !important;
    }
    .gaba3-privada-card:hover .gaba3-privada-lock {
        border-color: rgba(255, 195, 110, 0.6);
        box-shadow: 0 0 10px rgba(255, 195, 110, 0.25);
    }
    .gaba3-privada-card:hover .gaba3-privada-lock::after {
        animation: gaba3LockGleam 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) 1 forwards;
    }
}
@keyframes gaba3LockGleam {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(130%); }
}

@media (hover: none) or (pointer: coarse) {
    .gaba3-privada-card:active {
        transform: scale(0.985);
        transition: transform 0.12s ease;
    }
}

/* --- 4. ÁREA COMUNITARIA / MURALES / SERVICIOS / SOLIDARIDAD --- */
.gaba3-painel-mural:hover {
    border-left-color: #72df1f;
}
.gaba3-painel-servicos:hover {
    border-left-color: #6bb6ff;
}
.gaba3-painel-solidario:hover {
    border-left-color: #ff8585;
}

.gaba3-mural-item {
    border-radius: 8px;
    padding: 8px 6px;
    margin: 0 -6px;
    transition: background 0.18s ease, transform 0.18s ease;
}
@media (hover: hover) and (pointer: fine) {
    .gaba3-mural-item:hover {
        background: rgba(85, 201, 0, 0.05);
        transform: translateX(2px);
    }
}

/* Tag urgente condicional para servicios */
.gaba3-tag-urgente {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 160, 40, 0.18);
    border: 1px solid rgba(255, 160, 40, 0.45);
    color: #ffbe6b;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* Indicador de expiración diario respetuoso */
.gaba3-mural-expira {
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Equivalente móvil: Mais na plataforma */
.gaba3-caixa-grande {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .gaba3-caixa-grande:hover {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.22);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    }
}
@media (hover: none) or (pointer: coarse) {
    .gaba3-caixa-grande:active {
        transform: scale(0.975);
        transition: transform 0.08s ease;
    }
}

/* --- 5. ACCESIBILIDAD PREFERS-REDUCED-MOTION --- */
@media (prefers-reduced-motion: reduce) {
    .gaba3-painel,
    .gaba3-painel:hover,
    .gaba3-mini-sala,
    .gaba3-mini-sala:hover,
    .gaba3-atividade-item,
    .gaba3-atividade-item:hover,
    .gaba3-privada-card,
    .gaba3-privada-card:hover,
    .gaba3-mural-item,
    .gaba3-mural-item:hover,
    .gaba3-caixa-grande,
    .gaba3-caixa-grande:hover {
        transform: none !important;
        transition: none !important;
    }

    .gaba3-skeleton-avatar::after,
    .gaba3-skeleton-thumb::after,
    .gaba3-skeleton-line::after,
    .gaba3-privada-lock::after {
        animation: none !important;
    }

    .gaba3-fade-item {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   GABA3 — BLOQUE VISUAL 4: FOOTER Y ARMONIZACIÓN FINAL
   ========================================================= */

/* Remate superior sutil y espaciado armónico */
.gaba3-rodape {
    position: relative;
    margin-top: 36px;
    padding-top: 24px;
}

.gaba3-rodape::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 88%);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 30%, rgba(85, 201, 0, 0.35) 50%, rgba(255, 255, 255, 0.12) 70%, transparent 100%);
    pointer-events: none;
}

/* Placa con la frase final de GABA3: fondo ahumado y entrada sutil */
.gaba3-rodape-frase-placa {
    background: rgba(14, 16, 24, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.gaba3-rodape-frase-placa.gaba3-frase-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
    .gaba3-rodape-frase-placa:hover {
        border-color: rgba(255, 255, 255, 0.16) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
    }
}

.gaba3-confianca-frase {
    color: #e5e4eb;
    letter-spacing: -0.01em;
}

/* Microinteracciones de botones sociales: elevación + iluminación de marca */
.gaba3-rodape-compartilhar button {
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.2s ease,
                background 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .gaba3-rodape-compartilhar button:hover {
        transform: translateY(-2.5px);
        background: #ffffff !important;
    }

    .gaba3-rodape-compartilhar button[data-compartilhar="facebook"]:hover {
        border-color: rgba(24, 119, 242, 0.5) !important;
        box-shadow: 0 6px 18px rgba(24, 119, 242, 0.32), 0 0 0 1px rgba(24, 119, 242, 0.2) !important;
    }

    .gaba3-rodape-compartilhar button[data-compartilhar="instagram"]:hover {
        border-color: rgba(225, 48, 108, 0.5) !important;
        box-shadow: 0 6px 18px rgba(225, 48, 108, 0.32), 0 0 0 1px rgba(225, 48, 108, 0.2) !important;
    }

    .gaba3-rodape-compartilhar button[data-compartilhar="youtube"]:hover {
        border-color: rgba(255, 0, 0, 0.5) !important;
        box-shadow: 0 6px 18px rgba(255, 0, 0, 0.32), 0 0 0 1px rgba(255, 0, 0, 0.2) !important;
    }

    .gaba3-rodape-compartilhar button[data-compartilhar="whatsapp"]:hover {
        border-color: rgba(37, 211, 102, 0.5) !important;
        box-shadow: 0 6px 18px rgba(37, 211, 102, 0.32), 0 0 0 1px rgba(37, 211, 102, 0.2) !important;
    }

    .gaba3-rodape-compartilhar button[data-compartilhar="tiktok"]:hover {
        border-color: rgba(37, 244, 238, 0.5) !important;
        box-shadow: 0 6px 18px rgba(37, 244, 238, 0.28), 0 0 0 1px rgba(254, 44, 85, 0.25) !important;
    }
}

/* Móvil: microcompresión táctil al pulsar */
@media (hover: none) or (pointer: coarse) {
    .gaba3-rodape-compartilhar button:active {
        transform: scale(0.92);
        transition: transform 0.08s ease;
    }
}

/* Soporte prefers-reduced-motion para footer */
@media (prefers-reduced-motion: reduce) {
    .gaba3-rodape-frase-placa {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .gaba3-rodape-compartilhar button,
    .gaba3-rodape-compartilhar button:hover,
    .gaba3-rodape-compartilhar button:active {
        transform: none !important;
        box-shadow: none !important;
        transition: none !important;
    }
}

/* Sino, envelope ou estrelinha abertos: a cabeceira sobe acima da cinta de cotações
   (que mora fora dela, z 121). Achado real 2026-09-28; 2026-10-07: no computador a regra
   `body:not(.pagina-sala):not(.shorts-page) .barra-superior{z-index:120!important}` ganhava
   desta e a lista saía por baixo da cinta — agora com `html body` ela ganha nas duas telas. */
html body .barra-superior:has(.icono-header-dropdown:not([hidden])){z-index:130!important}
/* Celular: a lista ocupa a largura da tela com margem (antes a do sino saía pela esquerda). */
@media (max-width:600px){
    .cuenta-usuario .icono-header-dropdown{position:fixed;top:56px;left:8px;right:8px;width:auto;min-width:0;max-width:none}
}

/* Painel de criar sala: madeira GABA3 (antes azul-marinho) e só a marca "GABA3" no topo, sem ícone genérico. */
#creador-sala{
    background:#1a0f08 url("assets/brand/fondo-madera-oscura-gaba3.webp") center/cover;
    border:1px solid rgba(199,165,90,.55);
    box-shadow:0 30px 90px rgba(0,0,0,.6),inset 0 1px rgba(255,235,181,.08);
}
#creador-sala::backdrop{background:rgba(10,6,3,.74);backdrop-filter:blur(4px)}
#creador-sala .modal-marca{margin:0;padding-right:36px;color:#f7ecd8;font-size:30px;font-weight:900;letter-spacing:1px;line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.6)}
#creador-sala .modal-marca b{color:#55c900;font-weight:900}
#creador-sala .cerrar-modal{display:grid;place-items:center;width:44px;height:44px;top:10px;right:10px;padding:0;color:#e6d3b0}
#creador-sala .privacidade-opcao,
#creador-sala .modal-sala input,
#creador-sala .modal-sala select,
#creador-sala .modal-sala textarea{background:rgba(24,12,5,.78);border-color:rgba(199,165,90,.32);color:#f4ead8}
#creador-sala .privacidade-opcao[aria-pressed="true"]{background:rgba(85,201,0,.2);border-color:#55c900;color:#d6f7a8}#creador-sala .modal-sala label{color:#eadcc2}
#creador-sala #cancelar-creador-sala{background:rgba(24,12,5,.78);border:1px solid rgba(199,165,90,.45);color:#f1e6d3}
#creador-sala .evento-tipo-card:not(.activo){background:rgba(24,12,5,.7);border-color:rgba(199,165,90,.3);color:#f1e6d3}
#creador-sala select,#creador-sala select option{background-color:rgb(28,15,7)!important;color:#f4ead8!important;border-color:rgba(199,165,90,.35)!important}#creador-sala label[for^="minimo-"]{margin-top:6px}
/* Criar sala em passos: o diálogo rola por dentro e o rodapé (Voltar / Continuar / Criar sala)
   fica grudado embaixo, acima da barra de gestos do celular. Alvos de toque de 44px ou mais. */
#creador-sala{max-height:min(calc(100dvh - 24px),760px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
#creador-sala .modal-criar-passos{box-sizing:border-box;width:100%}
#creador-sala .modal-criar-passos{--criar-borda:30px;gap:14px;padding-bottom:0}
#creador-sala .criar-passo-indicador{margin:-4px 0 0;color:#d9c9ac;font-size:12px;font-weight:800;letter-spacing:.06em}
#creador-sala .evento-aviso-borrado[hidden]{display:none}
#creador-sala .evento-aviso-borrado{align-items:center;padding:8px 12px;font-size:12.5px}
#creador-sala .evento-tipo-card{min-height:44px}
#creador-sala #minimo-eventos{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#creador-sala #minimo-eventos .evento-tipo-card{min-height:62px;padding:8px 2px;gap:4px}
#creador-sala #minimo-eventos .evento-tipo-emoji [data-morph-icone] svg{width:22px;height:22px}
#creador-sala #minimo-eventos .evento-tipo-nombre{font-size:10.5px;line-height:1.15;overflow-wrap:anywhere}
#creador-sala #minimo-categoria-publica{grid-template-columns:repeat(3,minmax(0,1fr))}
#creador-sala .evento-duracion-quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
#creador-sala .duracion-pill{min-height:44px;padding:0 2px;white-space:nowrap}
#creador-sala .btn-clip-portada{width:48px;height:48px}
#creador-sala .criar-rodape{
    position:sticky;
    bottom:0;
    z-index:2;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    margin:4px calc(-1 * var(--criar-borda)) 0;
    padding:12px var(--criar-borda) calc(14px + env(safe-area-inset-bottom,0px));
    border-top:1px solid rgba(199,165,90,.3);
    background:linear-gradient(180deg,rgba(30,17,8,.94),rgba(16,9,4,.98));
}
#creador-sala .criar-rodape [hidden]{display:none!important}
#creador-sala .criar-rodape .criar-erro{flex:1 1 100%}
#creador-sala .criar-rodape button{width:auto;min-height:46px!important}
#creador-sala .criar-rodape .boton-principal{flex:1 1 auto;max-width:260px;justify-content:center}
#creador-sala .criar-rodape .boton-principal:disabled{opacity:.5;cursor:not-allowed}
#creador-sala #voltar-creador-sala{gap:4px;padding:0 14px}
#creador-sala #voltar-creador-sala [data-morph-icone] svg{width:18px;height:18px}
@media (max-width:560px){
    #creador-sala .modal-criar-passos{--criar-borda:20px;padding-top:22px}
    #creador-sala .criar-rodape .boton-principal{max-width:none}
}

/* =========================================================
   MADEIRA REAL NOS PAINÉIS PEQUENOS (pedido do dono, 2026-09-30)
   Antes: fundo liso escuro/azul ou madeira coberta por uma capa quase opaca = aspecto "esfumaçado".
   Agora a veta aparece: textura de madeira escura com só um véu leve de verniz.
========================================================= */
/* Diálogos em geral (antes azul-marinho #151628). */
dialog{
    background:
        linear-gradient(160deg,rgba(40,20,8,.34),rgba(14,7,3,.44)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/cover;
    border:1px solid rgba(199,165,90,.45);
}
dialog::backdrop{background:rgba(10,6,3,.72);backdrop-filter:blur(4px)}

/* Menu lateral e painel "Minhas salas": a madeira aparece (capa 0.97/0.72 → leve). */
#menu-lateral,
.menu-lateral{
    background:
        linear-gradient(160deg,rgba(44,23,9,.40),rgba(18,9,4,.50) 55%,rgba(9,5,2,.58)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/cover!important;
}
.painel-minhas-salas{
    background:
        linear-gradient(135deg,rgba(18,9,4,.30),rgba(37,19,6,.34)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/cover!important;
}
body.gaba3-modo-escuro:not(.pagina-sala) .painel-minhas-salas{
    background:
        linear-gradient(135deg,rgba(12,6,2,.38),rgba(26,13,4,.42)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/cover!important;
}

/* Cuadritos: fichas de madeira (mesma receita das categorias). */
.gaba3-painel-conta-raiz>button,
.gaba3-painel-conta-vista--informativa,
.gaba3-continue-banner,
#creador-sala .privacidade-opcao,
#creador-sala .evento-tipo-card:not(.activo){
    background:
        linear-gradient(180deg,rgba(255,210,140,.05) 0%,rgba(0,0,0,.14) 100%),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/190px auto!important;
    border-color:rgba(199,165,90,.38)!important;
}
#creador-sala .privacidade-opcao[aria-pressed="true"]{
    background:
        linear-gradient(180deg,rgba(85,201,0,.30),rgba(40,110,0,.30)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/190px auto!important;
    border-color:#55c900!important;
}
#creador-sala .evento-tipo-card.activo{
    background:
        linear-gradient(180deg,rgba(85,201,0,.26),rgba(40,110,0,.26)),
        url("assets/brand/fondo-madera-oscura-gaba3.webp?v=real1") center/190px auto!important;
    border-color:#55c900!important;
}

/* Conversas individuais com clientes (comércio e profissional, 2026-10-02):
   fileira do dono/funcionário com um botão por cliente. Sem setas nativas. */
.gaba3-conversas-clientes{display:flex;align-items:center;flex:none;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.08)}
.gaba3-conversas-clientes::-webkit-scrollbar{display:none}
.gaba3-conversas-clientes[hidden]{display:none}
.gaba3-conversa-cliente{flex:none;height:auto;min-height:0;line-height:1.2;display:inline-flex;align-items:center;gap:6px;max-width:180px;padding:5px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#e8efe4;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
.gaba3-conversa-cliente span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gaba3-conversa-cliente[aria-selected="true"]{border-color:#7fc548;background:rgba(85,201,0,.18);color:#d7f7bd}
.gaba3-conversa-cliente b{flex:none;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#e8a840;color:#1b1206;font-size:10px;line-height:17px;text-align:center}
.gaba3-conversas-vazio{margin:0;padding:2px 4px;color:#a9b8a3;font-size:11.5px}

/* Fileira "perto de você" sem salas na cidade: fica só como âncora de rolagem
   (altura zero), sem título solto nem aviso falso. */
.seccion.gaba3-secao-vazia{margin:0!important;padding:0!important;min-height:0!important;border:0!important}
.seccion.gaba3-secao-vazia>*{display:none!important}
/* A coluna do celular separa as fileiras com `gap`: a âncora vazia devolve esse espaço
   para não somar faixas de pedra entre duas fileiras com salas (2026-10-14). */
.gaba3-layout-main>.seccion.gaba3-secao-vazia{margin-top:calc(-1 * var(--gaba3-fila-gap, 0px))!important}
@media (max-width:820px){.gaba3-layout-main{--gaba3-fila-gap:18px}}
/* "está escrevendo…" / "está gravando áudio…" — comércio e profissional (chatActivity.js) */
.chat-atividade-status{margin:0;padding:2px 10px;color:rgba(210,185,150,.9);font-size:12px;font-style:italic;line-height:1.3;overflow-wrap:anywhere}
.chat-atividade-status[hidden]{display:none!important}
/* Minhas salas: sala com mensagens não lidas (quantas, de quem e o quê) */
.gaba3-minha-sala-item--nova .gaba3-minha-sala-subtitulo{color:#8fff67;font-weight:700;overflow-wrap:anywhere}
.gaba3-minha-sala-item--nova .gaba3-minha-sala-titulo{color:#fff}
/* Barra de gravação de áudio estilo WhatsApp (voiceChat.js): descartar · tempo · pausar · enviar */
.gaba3-voz-barra{position:absolute;inset:0;z-index:6;display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:999px;background:linear-gradient(180deg,#2c1b0f,#1b1009);border:1px solid rgba(232,168,64,.45);box-sizing:border-box}
.gaba3-voz-barra button{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;color:#f3ead8;background:transparent}
.gaba3-voz-barra .gaba3-voz-descartar{color:#ff9f8f}
.gaba3-voz-barra .gaba3-voz-pausar{background:rgba(243,234,216,.1)}
.gaba3-voz-barra .gaba3-voz-enviar{background:#4caf1a;color:#0b1a05}
.gaba3-voz-tempo{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:#f3ead8;font:700 15px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.gaba3-voz-tempo i{width:10px;height:10px;border-radius:50%;background:#ff3b30;animation:gaba3-voz-pulso 1s ease-in-out infinite}
.gaba3-voz-barra.pausado .gaba3-voz-tempo i{animation:none;background:#c8b89a}
@keyframes gaba3-voz-pulso{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.gaba3-voz-tempo i{animation:none}}
/* Mensagem de voz: barra completa (onda ao vivo, parar e ouvir antes de enviar) */
.gaba3-voz-barra .gaba3-voz-parar{background:rgba(243,234,216,.1)}
.gaba3-voz-barra button:disabled{opacity:.4;cursor:default}
.gaba3-voz-onda{flex:1;min-width:0;height:22px;display:flex;align-items:center;gap:2px;overflow:hidden}
.gaba3-voz-onda s{flex:1;max-width:4px;height:100%;border-radius:2px;background:#8fff67;transform:scaleY(.15);transform-origin:center;transition:transform .1s linear;text-decoration:none}
.gaba3-voz-barra.fase-pausado .gaba3-voz-onda s{background:#c8b89a}
.gaba3-voz-barra.fase-abrindo .gaba3-voz-tempo b{opacity:.5}
/* Segurando o microfone (gesto do WhatsApp): a barra deixa o botão à vista,
   o botão cresce, e o cadeado acima mostra para onde deslizar para travar. */
.gaba3-voz-barra.fase-segurando{right:62px;padding-left:12px}
.gaba3-voz-dica{flex:none;color:#d8c7a6;font:600 13px/1 system-ui,sans-serif;white-space:nowrap;transition:transform .05s linear}
.gaba3-voz-trava{position:absolute;right:-50px;bottom:calc(100% + 10px);display:flex;flex-direction:column;align-items:center;gap:2px;width:38px;padding:8px 0;border-radius:20px;background:#1b1009;border:1px solid rgba(232,168,64,.45);color:#f3ead8;font-size:14px;line-height:1;animation:gaba3-voz-sobe 1.2s ease-in-out infinite}
@keyframes gaba3-voz-sobe{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.boton-voz-msg{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.boton-voz-msg.segurando{transform:scale(1.35);background:#e53935!important;color:#fff!important;box-shadow:0 0 0 8px rgba(229,57,53,.18);transition:transform .12s ease;position:relative;z-index:7}
@media (prefers-reduced-motion:reduce){.gaba3-voz-trava{animation:none}}
.gaba3-voz-progresso{flex:1;min-width:0;display:flex;align-items:center;gap:8px;color:#f3ead8;font:700 14px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.gaba3-voz-trilho{flex:1;min-width:0;height:4px;border-radius:2px;background:rgba(243,234,216,.22);overflow:hidden}
.gaba3-voz-trilho i{display:block;width:0;height:100%;background:#8fff67;transition:width .2s linear}
.gaba3-voz-barra .gaba3-voz-ouvir{background:rgba(243,234,216,.1)}
.gaba3-voz-barra.fase-enviando .gaba3-voz-progresso b{color:#8fff67}
@media (max-width:380px){.gaba3-voz-barra{gap:4px;padding:3px 4px}.gaba3-voz-barra button{width:36px;height:36px}}
/* Burbuja do chat: as barrinhas acendem conforme o áudio toca */
.pagina-sala .chat-voz-wave i{transition:background-color .15s,opacity .15s}
.pagina-sala .chat-voz-wave i.tocado{background:#8fff67;opacity:1}
.pagina-sala .chat-voz-bubble.is-playing .chat-voz-wave i:not(.tocado),.pagina-sala .chat-voz-bubble .chat-voz-wave:has(i.tocado) i:not(.tocado){opacity:.35}
/* Painel "Minhas salas" por contexto: privadas · comércio · profissional · outras · que sigo */
.gaba3-painel-contextos{display:grid;gap:10px;min-width:0}
.gaba3-painel-secao{min-width:0;border:1px solid rgba(232,168,64,.28);border-radius:14px;background:rgba(24,14,7,.6);overflow:hidden}
.gaba3-painel-secao-cabeca{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 12px;border:0;background:none;color:#f3ead8;text-align:left;cursor:pointer;font:inherit;box-sizing:border-box}
.gaba3-painel-secao-cabeca:focus-visible{outline:2px solid #8fff67;outline-offset:-2px}
.gaba3-painel-secao-textos{flex:1;min-width:0;display:grid;gap:2px}
.gaba3-painel-secao-textos b{font-size:15px;font-weight:800;color:#fff;overflow-wrap:anywhere}
.gaba3-painel-secao-textos small{font-size:11.5px;color:#c8b89a;overflow-wrap:anywhere}
.gaba3-painel-contador{flex:none;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#e5342a;color:#fff;font:800 12px/22px system-ui,sans-serif;text-align:center;box-sizing:border-box}
.gaba3-painel-secao-seta{flex:none;width:18px;color:#c8b89a;font-size:22px;line-height:1;text-align:center;transition:transform .2s ease}
.gaba3-painel-secao-cabeca[aria-expanded="true"] .gaba3-painel-secao-seta{transform:rotate(90deg)}
.gaba3-painel-secao-corpo{padding:0 12px 6px;border-top:1px solid rgba(255,255,255,.07)}
.gaba3-painel-secao-corpo .gaba3-minha-sala-item{gap:10px}
.gaba3-painel-secao-corpo .gaba3-minha-sala-subtitulo{overflow-wrap:anywhere}
.gaba3-painel-secao-corpo .gaba3-minhas-salas-estado{margin:10px 0;font-size:12.5px}
@media (max-width:640px){
  .gaba3-painel-secao-cabeca{min-height:66px;padding:12px 14px}
  .gaba3-painel-secao-textos b{font-size:16px}
  .gaba3-painel-secao-corpo .gaba3-minha-sala-item{min-height:52px}
}
@media (prefers-reduced-motion:reduce){.gaba3-painel-secao-seta{transition:none}}
/* "Salas" da barra de baixo (2026-10-08): só as privadas, já abertas; convite de entrar
   para visitante; "Todas as minhas salas" discreto no fim. Madeira escura do painel. */
[data-salas-so-conta][hidden]{display:none!important}
.gaba3-lista-privadas{display:grid;min-width:0;padding:4px 14px 0}
/* Lista de conversas (etapa 1, 2026-10-13): nome + hora, última mensagem, ícones da minha lista, ⋮, filtros e arquivadas. */
.gaba3-conversa{position:relative}
.gaba3-conversa-topo{display:flex;align-items:center;gap:8px;min-width:0}
.gaba3-conversa-topo .gaba3-minha-sala-titulo{flex:1 1 auto;min-width:0}
.gaba3-conversa-meta{flex:none;display:inline-flex;align-items:center;gap:6px;color:#9bcaa2}
.gaba3-conversa-hora{font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.gaba3-conversa-icone{display:inline-grid;place-items:center;color:#c8b89a}
.gaba3-conversa--silenciada .gaba3-painel-contador{background:#5c6b64}
.gaba3-conversa-mais{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:-6px -8px -6px 0;padding:0;border:0;border-radius:0;background:transparent;color:#c8b89a;cursor:pointer}
.gaba3-conversa-mais:focus-visible{outline:2px solid #7aff50aa;outline-offset:-4px}
.gaba3-lista-topo{display:grid;gap:6px;padding-top:6px}
.gaba3-lista-busca{width:100%;min-height:42px;padding:0 14px;border:1px solid #ffffff22;border-radius:999px;background:#00000040;color:#fff;font:14px/1 inherit;box-sizing:border-box}
.gaba3-lista-busca:focus-visible{outline:2px solid #7aff50aa;outline-offset:1px}
.gaba3-lista-resultados[hidden]{display:none}
.gaba3-lista-resultados-titulo{margin:10px 0 4px;font-size:12px;font-weight:700;color:#9bcaa2;text-transform:uppercase;letter-spacing:.04em}
.gaba3-lista-filtros{display:flex;gap:8px;padding:6px 0 8px;overflow-x:auto;scrollbar-width:none}
.gaba3-lista-filtro{flex:none;min-height:36px;padding:0 14px;border:1px solid #ffffff22;border-radius:999px;background:transparent;color:#d7ead9;font:600 13px/1 inherit;cursor:pointer}
.gaba3-lista-filtro[aria-selected="true"]{background:#55c90022;border-color:#7aff5088;color:#dfffd0}
.gaba3-lista-arquivadas{margin-top:8px;border-top:1px solid #ffffff12}
.gaba3-lista-arquivadas summary{min-height:44px;display:flex;align-items:center;color:#c8b89a;font:600 13px/1 inherit;cursor:pointer;list-style:none}
.gaba3-lista-arquivadas summary::before{content:"›";display:inline-block;width:16px;transition:transform .15s}
.gaba3-lista-arquivadas[open] summary::before{transform:rotate(90deg)}
/* SP-150/SP-151 (etapa 1, 2026-10-13): privacidade nas conversas. */
.gaba3-priv-corpo{padding:8px 16px 16px;max-height:calc(80dvh - 64px);overflow-y:auto}
.gaba3-priv-grupo{margin:0 0 14px;padding:0;border:0}
.gaba3-priv-grupo legend{padding:0;font-weight:700;font-size:14px}
.gaba3-priv-ajuda{margin:2px 0 8px;font-size:12px;opacity:.75}
.gaba3-priv-opcoes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.gaba3-priv-opcao{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 8px;border:1px solid #ffffff22;border-radius:10px;font-size:13px;cursor:pointer;text-align:center}
.gaba3-priv-opcao:has(input:checked){border-color:#7aff5088;background:#55c90022}
.gaba3-priv-opcao input{accent-color:#55c900;margin:0}
.gaba3-priv-chave{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:10px;border:1px solid #ffffff1a;border-radius:10px;cursor:pointer}
.gaba3-priv-chave input{accent-color:#55c900;width:20px;height:20px;margin:2px 0 0;flex:none}
.gaba3-priv-chave span{display:grid;gap:2px}
.gaba3-priv-chave small{font-size:12px;opacity:.75}
.gaba3-priv-estado{min-height:18px;margin:0;font-size:12px;color:#9bcaa2}
/* SP-239 (etapa 1, 2026-10-13): pessoas bloqueadas. */
.gaba3-bloqueados{width:min(440px,94vw);max-height:80dvh;padding:0;border:1px solid #55c90045;border-radius:16px;background:#0e1a12;color:#fff;box-shadow:0 18px 44px #0009}
.gaba3-bloqueados::backdrop{background:#000000a6}
.gaba3-bloqueados-topo{display:flex;align-items:center;gap:8px;padding:10px 8px 6px 16px;border-bottom:1px solid #ffffff12}
.gaba3-bloqueados-topo h2{flex:1;margin:0;font-size:16px}
.gaba3-bloqueados-fechar{width:44px;height:44px;border:0;background:transparent;color:inherit;font-size:24px;cursor:pointer}
.gaba3-bloqueados-nota{margin:8px 16px;font-size:12px;opacity:.8}
.gaba3-bloqueados-lista{margin:0;padding:4px 8px 12px;list-style:none;max-height:calc(80dvh - 120px);overflow-y:auto}
.gaba3-bloqueados-estado{padding:12px 8px;opacity:.8;font-size:14px}
.gaba3-bloqueado{display:flex;align-items:center;gap:10px;min-height:56px;padding:4px 8px}
.gaba3-bloqueado-foto{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#1f3326;font-weight:700}
.gaba3-bloqueado-foto img{width:100%;height:100%;object-fit:cover}
.gaba3-bloqueado-texto{flex:1;min-width:0;display:grid}
.gaba3-bloqueado-texto b,.gaba3-bloqueado-texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gaba3-bloqueado-texto small{opacity:.7}
.gaba3-bloqueado-desbloquear{flex:none;min-height:40px;padding:0 14px;border:1px solid #7aff5066;border-radius:999px;background:transparent;color:#dfffd0;font:600 13px/1 inherit;cursor:pointer}
.gaba3-lista-menu{width:min(360px,92vw);padding:0;border:1px solid #55c90045;border-radius:16px;background:#0e1a12;color:#fff;box-shadow:0 18px 44px #0009}
.gaba3-lista-menu::backdrop{background:#000000a6}
.gaba3-lista-menu-titulo{margin:0;padding:14px 16px 8px;font-size:14px;font-weight:700;border-bottom:1px solid #ffffff12}
.gaba3-lista-menu-acao,.gaba3-lista-menu-fechar{display:block;width:100%;min-height:46px;padding:0 16px;border:0;background:transparent;color:#fff;font:500 14px/1.2 inherit;text-align:left;cursor:pointer}
.gaba3-lista-menu-acao:hover,.gaba3-lista-menu-acao:focus-visible{background:#55c90018;outline:none}
.gaba3-lista-menu-fechar{color:#c8b89a;border-top:1px solid #ffffff12;text-align:center}
.privada-silenciar-opcoes{display:flex;gap:8px;padding:0 0 8px}
.privada-silenciar-opcoes[hidden]{display:none}
.privada-silenciar-opcoes .boton-secundario{flex:1 1 0;min-height:40px;margin:0}
#privada-silenciar[data-silenciada="1"]{opacity:.85}
.gaba3-lista-privadas .gaba3-minha-sala-item{min-height:60px;gap:12px}
.gaba3-lista-privadas .gaba3-minha-sala-subtitulo{overflow-wrap:anywhere}
.gaba3-privadas-vazio,.gaba3-salas-entrar{display:grid;gap:12px;justify-items:center;padding:18px 4px;text-align:center}
.gaba3-privadas-vazio .boton-principal{min-height:44px!important;padding:0 20px}
.gaba3-salas-entrar-acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.gaba3-salas-entrar-acoes a{display:inline-flex;align-items:center;justify-content:center;min-width:128px;min-height:44px!important;padding:0 20px;font-size:14px;text-decoration:none;box-sizing:border-box}
.gaba3-privadas-todas{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin:6px 0 12px;border:0;background:none;color:#c8b89a;font:600 13px/1.2 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gaba3-privadas-todas[hidden]{display:none}
/* Convites no alto da lista de conversas (2026-10-15): pedidos para conversar e convites de grupo,
   com Aceitar e Recusar num toque (como no WhatsApp; aceitar abre a conversa). */
.gaba3-convites{display:grid;gap:0;margin:6px 0 4px;padding:6px 10px 2px;border:1px solid #7aff5055;border-radius:14px;background:#55c90014}
.gaba3-convites-titulo{margin:0 0 2px;font-size:12px;font-weight:800;color:#b8ec8c;text-transform:uppercase;letter-spacing:.04em}
.gaba3-convite{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 0;border-top:1px solid #ffffff12;min-width:0}
.gaba3-convites-titulo + .gaba3-convite{border-top:0}
.gaba3-convite .gaba3-minha-sala-avatar{width:40px;height:40px}
.gaba3-convite-texto{flex:1 1 auto;min-width:0;margin:0;font-size:13.5px;line-height:1.3;color:#f1f7ee;overflow-wrap:anywhere}
.gaba3-convite-texto small{display:block;margin-top:2px;font-size:12px;color:#c8b89a}
.gaba3-convite-acoes{flex:none;display:flex;flex-direction:column;gap:6px}
.gaba3-convite-acoes button{min-height:36px;min-width:84px;padding:0 12px;border-radius:999px;font:700 13px/1 inherit;cursor:pointer}
.gaba3-convite-aceitar{border:1px solid #55c900;background:#55c900;color:#0b1a07}
.gaba3-convite-recusar{border:1px solid #ffffff33;background:transparent;color:#e7d8c0}
.gaba3-convite-acoes button:disabled{opacity:.6;cursor:default}
.gaba3-convite--enviado .gaba3-convite-texto{color:#c8b89a}
.gaba3-convite-erro{margin:0 0 6px;font-size:12px;font-weight:700;color:#ffb4a8}

/* Criadores na portada, estilo YouTube: vídeo 16:9 limpo, alto-falante solto
   (sem bola), linha fina de progresso e, embaixo, inicial + título + quem/onde. */
.gaba3-carrossel .sala-card.gaba3-criador-card{background:none;border:0;box-shadow:none;overflow:visible}
.gaba3-criador-tela{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0b0f0b;display:grid;place-items:center}
.gaba3-criador-tela video,.gaba3-criador-tela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gaba3-criador-tela--vazia{font-size:56px;background:linear-gradient(160deg,#c22a6d,#3a0a24)}
.gaba3-criador-progresso{position:absolute;left:0;bottom:0;height:3px;width:0;background:#55c900;z-index:2;transition:width .25s linear}
.gaba3-criador-som{position:absolute;right:6px;bottom:8px;z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:#fff;cursor:pointer;filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 6px rgba(0,0,0,.6))}
.gaba3-criador-som svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gaba3-criador-som svg path:first-child{fill:currentColor}
.gaba3-criador-info{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:10px;padding:2px 2px 4px;background:none!important}
.gaba3-criador-inicial{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#55c900;color:#071008;font:800 15px/1 system-ui,sans-serif}
.gaba3-criador-textos{min-width:0}
.gaba3-criador-textos h3{margin:0;color:#fff;font-size:15.5px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.55);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.gaba3-criador-textos p{margin:3px 0 0;color:#e6dfcf;text-shadow:0 1px 3px rgba(0,0,0,.9);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Caixas fixas 70/30 (altura fixa): vídeo limpo em cima e, FORA dele, a faixa do criador
   embaixo (como no YouTube) — nunca texto escrito sobre o vídeo (pedido do dono). */
.gaba3-anuncio-grande .gaba3-criador-card,.gaba3-anuncio-pequena .gaba3-criador-card{display:flex;flex-direction:column;width:100%;height:100%;background:#0b0f0b}
.gaba3-anuncio-grande .gaba3-criador-tela,.gaba3-anuncio-pequena .gaba3-criador-tela{flex:1 1 auto;min-height:0;aspect-ratio:auto;border-radius:14px 14px 0 0}
.gaba3-anuncio-grande .gaba3-criador-info,.gaba3-anuncio-pequena .gaba3-criador-info{grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center;padding:6px 8px}
.gaba3-anuncio-grande .gaba3-criador-inicial,.gaba3-anuncio-pequena .gaba3-criador-inicial{width:24px;height:24px;font-size:12px}
.gaba3-anuncio-grande .gaba3-criador-textos h3,.gaba3-anuncio-pequena .gaba3-criador-textos h3{font-size:12.5px;-webkit-line-clamp:1}
.gaba3-anuncio-grande .gaba3-criador-textos p{font-size:11px}
.gaba3-anuncio-pequena .gaba3-criador-textos p{display:none}
.gaba3-anuncio-pequena .gaba3-criador-info{grid-template-columns:minmax(0,1fr)}
.gaba3-anuncio-pequena .gaba3-criador-inicial{display:none}

/* Vídeos Curtos no computador (pedido do dono, 2026-10-04): os botões (👍, comentários…)
   colados ao vídeo, como no YouTube Shorts — antes ficavam a ~160px, do outro lado
   da coluna central. Vídeo + botões ficam juntos no meio; o menu continua à direita. */
@media (min-width: 640px) {
    .sv-dsk-layout .sv-dsk-center { flex: 0 1 auto; margin-left: auto; padding-right: 6px; }
    .sv-dsk-layout .sv-dsk-actions-col { margin-right: auto; width: 72px; padding-left: 0; padding-right: 0; }
}

/* Vídeos Curtos no celular com os comentários abertos (como no Instagram): o vídeo
   sobe e fica no espaço acima da gaveta, inteiro (contain), sem a sombra por cima. */
@media (max-width: 639px) {
    body.sv-comentando .sv-comments-bg { background: transparent !important; }
    .sv-item--comentando video.sv-media {
        position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
        width: 100% !important; height: calc(100dvh - min(62dvh, 520px)) !important;
        object-fit: contain !important; background: #000 !important; z-index: 42 !important;
    }
    .sv-item--comentando :is(.sv-actions, .sv-meta, .sv-gradient) { visibility: hidden !important; }
}

/* Criadores na portada — mais perto do YouTube (pedido do dono com a imagem de exemplo):
   alto-falante em cima à direita, duração embaixo à direita, "AO VIVO" vermelho,
   foto do canal no círculo e ⋮ ao lado do título (no lugar da 🚩). */
.gaba3-criador-tela .gaba3-criador-som{top:6px;bottom:auto}
.gaba3-criador-duracao{position:absolute;right:8px;bottom:8px;z-index:3;padding:2px 6px;border-radius:5px;background:rgba(0,0,0,.8);color:#fff;font:600 12px/1.3 system-ui,sans-serif;pointer-events:none}
.gaba3-criador-duracao[hidden]{display:none}
.gaba3-criador-aovivo{position:absolute;right:8px;bottom:8px;z-index:3;display:inline-flex;align-items:center;gap:5px;padding:2px 7px;border-radius:5px;background:#e00000;color:#fff;font:800 12px/1.3 system-ui,sans-serif;pointer-events:none}
.gaba3-criador-aovivo::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.gaba3-criador-inicial.com-foto{background:#222 center/cover no-repeat}
.gaba3-criador-info{position:relative}
.gaba3-criador-mais{min-width:32px;min-height:36px;padding:0;border:0;background:none;color:#e9e3d6;font:700 20px/1 system-ui,sans-serif;cursor:pointer}
.gaba3-criador-menu{position:absolute;right:4px;bottom:calc(100% - 4px);z-index:20;min-width:150px;padding:6px;border-radius:12px;background:#1e231e;box-shadow:0 10px 28px rgba(0,0,0,.55)}
.gaba3-criador-menu button{display:block;width:100%;min-height:42px;padding:8px 12px;border:0;border-radius:8px;background:none;color:#f3ead8;font:600 14px/1.2 system-ui,sans-serif;text-align:left;cursor:pointer}
.gaba3-criador-menu button:hover{background:#2c332c}
.gaba3-anuncio-grande .gaba3-criador-mais,.gaba3-anuncio-pequena .gaba3-criador-mais{display:none}

/* "Seguindo" no cabeçalho: ícone de linha + número ao lado (sem bola nem caixa). */
.header-seguindo{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 6px;border:0;background:none;color:#f3ead8;font:inherit;font-weight:800;font-size:14px;cursor:pointer;flex:0 0 auto}
.header-seguindo[hidden],
.icono-header-wrapper:has(> .header-seguindo[hidden]){display:none!important}
.header-seguindo-icono{display:inline-grid;place-items:center;width:22px;height:22px;color:#8fff4a}
.header-seguindo-icono svg{width:100%;height:100%}
.header-seguindo:hover .header-seguindo-icono,.header-seguindo:focus-visible .header-seguindo-icono{transform:scale(1.1)}
.header-seguindo:focus-visible{outline:2px solid #8fff4a;outline-offset:2px;border-radius:8px}
@media(max-width:420px){.header-seguindo{padding:0 2px;gap:3px;font-size:12.5px}.header-seguindo-icono{width:19px;height:19px}}
/* Celular muito estreito: o contador "Seguindo" sai do cabeçalho (continua em Mais › Salas que sigo)
   para não apertar a lupa, o sino e o envelope. */
@media(max-width:350px){.header-seguindo{display:none!important}}

/* Cartão de criador (2026-10-05): o texto fica FORA do vídeo, solto sobre o fundo da página
   (nada de caixa preta atrás); o vídeo é um bloco próprio, com sombra, inteiro e centrado. */
.sala-card.gaba3-criador-card{background:none!important;border:0!important;box-shadow:none!important}
.gaba3-criador-card .gaba3-criador-tela{border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.55)}
.gaba3-anuncio-grande .gaba3-criador-card,.gaba3-anuncio-pequena .gaba3-criador-card{background:none!important}
.gaba3-anuncio-grande .gaba3-criador-tela,.gaba3-anuncio-pequena .gaba3-criador-tela{border-radius:14px}
.gaba3-anuncio-grande .gaba3-criador-info,.gaba3-anuncio-pequena .gaba3-criador-info{margin-top:6px}
/* No espaço destacado de cima também: sem caixa escura atrás do canal — o vídeo é um bloco
   próprio e o nome fica solto embaixo, sobre a pedra da página. */
.gaba3-anuncio-grande:has(.gaba3-criador-card),.gaba3-anuncio-pequena:has(.gaba3-criador-card){background:none;border:0;border-radius:0;overflow:visible}
.gaba3-anuncio-grande .gaba3-criador-card,.gaba3-anuncio-pequena .gaba3-criador-card{border-radius:0}
/* Criador: só o nome do canal embaixo do vídeo (sem bolinha nem cidade) + o ⋮. */
.gaba3-criador-info{grid-template-columns:minmax(0,1fr) auto!important}
.gaba3-anuncio-grande .gaba3-criador-info,.gaba3-anuncio-pequena .gaba3-criador-info{grid-template-columns:minmax(0,1fr)!important}

/* ===== Vídeo limpo (pedido do dono, 2026-10-05): nenhuma letra em cima de vídeo nenhum =====
   O vídeo fica sozinho; nome, cidade, selos e botões vão embaixo, soltos. */
/* Loja/profissional com vídeo */
.sala-card.sala-card--video{background:none!important;border:0!important;box-shadow:none!important;overflow:visible}
.sala-card--video .sala-imagen{border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.sala-card--video .sala-imagen::before,.sala-card--video .sala-imagen::after{display:none!important}
.sala-card--video .sala-contenido{position:relative!important;inset:auto!important;top:auto!important;bottom:auto!important;background:none!important;padding:8px 76px 2px 2px!important}
.sala-card--video .sala-contenido h3,.sala-card--video .sala-contenido p{text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 10px rgba(0,0,0,.6)}
.sala-card--video .sala-contenido .sala-card-denunciar,.sala-card--video .sala-contenido .gaba3-seguir-botao{position:absolute!important;top:6px!important;bottom:auto!important;left:auto!important}
.sala-card--video .sala-contenido .gaba3-seguir-botao{right:0!important}
.sala-card--video .sala-contenido .sala-card-denunciar{right:38px!important}
.sala-card-selos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sala-card-selos > *{position:static!important;transform:none!important}
/* Vídeos curtos: sem o selo "VCurtos" e sem o ▶ em cima; título e curtidas embaixo do vídeo */
.gaba3-curto-card::before{content:none!important;display:none!important}
.gaba3-carrossel .gaba3-curto-card{background:none!important;border:0!important;box-shadow:none!important}
.gaba3-curto-card .sala-imagen{border-radius:12px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.gaba3-curto-card .sala-imagen::before,.gaba3-curto-card .sala-imagen::after{display:none!important}
.gaba3-curto-card .gaba3-curto-info{position:static!important;background:none!important;padding:8px 2px 2px!important}
.gaba3-curto-card .gaba3-curto-info h3,.gaba3-curto-card .gaba3-curto-info small,.gaba3-curto-card .gaba3-curto-likes{text-shadow:0 1px 3px rgba(0,0,0,.95)}
/* Criador ao vivo: o selo fica ao lado do nome, fora do vídeo */
.gaba3-criador-aovivo--fora{position:static!important;display:inline-flex;vertical-align:middle;margin-left:4px;font-size:10.5px}
/* Anúncio com vídeo: o vídeo em cima, limpo; "Publicidade", título e botão numa linha embaixo */
.gaba3-ad-link--video{display:flex!important;flex-direction:column}
.gaba3-ad-link--video > video.gaba3-ad-media{position:relative!important;inset:auto!important;flex:1 1 auto;min-height:0;height:auto!important;border-radius:12px;background:#000}
.gaba3-ad-link--video > .gaba3-ad-scrim,.gaba3-ad-link--video > .gaba3-ad-legenda{display:none!important}
.gaba3-ad-link--video > .gaba3-ad-badge-row{position:static!important;order:2;margin:6px 0 0}
.gaba3-ad-link--video > .gaba3-ad-body{position:static!important;order:3;flex-direction:row!important;align-items:center!important;gap:8px!important;padding:2px 0 0!important;background:none!important}
.gaba3-ad-link--video .gaba3-ad-texto{display:none!important}
.gaba3-ad-link--video .gaba3-ad-headline{margin:0;font-size:13px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.95)}
.gaba3-ad-link--video .gaba3-ad-body > div{flex:1 1 auto;min-width:0}
.gaba3-ad-link--video .gaba3-ad-logo{display:none}

/* Configurações do painel da conta (passo 2 da simplificação, 2026-10-08): linhas de 48px
   sobre a madeira escura, ícone de linha sem fundo, no máximo uma linha curta de ajuda. */
.gaba3-cfg{display:grid;gap:4px}
.gaba3-cfg h3{margin:12px 4px 4px;color:var(--painel-conta-destaque)!important;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.gaba3-cfg h3:first-child{margin-top:2px}
.gaba3-cfg-linha{
    width:100%;
    display:grid;
    grid-template-columns:25px minmax(0,1fr) auto auto;
    align-items:center;
    gap:10px;
    min-height:48px;
    padding:6px 10px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--painel-conta-texto)!important;
    text-align:left;
    font:inherit;
    text-decoration:none;
    cursor:pointer;
}
.gaba3-cfg-linha[hidden],.gaba3-cfg [hidden]{display:none!important}
.gaba3-cfg-linha>[data-morph-icone]{width:22px;height:22px;color:var(--painel-conta-destaque)}
.gaba3-cfg-linha>[data-morph-icone] svg{width:100%;height:100%;display:block}
.gaba3-cfg-texto{display:grid;gap:2px;min-width:0}
.gaba3-cfg-texto b{font-weight:650;overflow-wrap:anywhere}
.gaba3-cfg-texto small,.gaba3-cfg-estado{color:var(--painel-conta-suave)!important;font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.gaba3-cfg-seta{color:var(--painel-conta-suave);font-size:20px;font-weight:400;grid-column:-2}
.gaba3-cfg-linha:hover,.gaba3-cfg-linha:focus-visible{outline:2px solid var(--painel-conta-destaque);outline-offset:2px;background:var(--painel-conta-hover)!important}
div.gaba3-cfg-linha{cursor:default}
div.gaba3-cfg-linha:hover{outline:0;background:transparent!important}
.gaba3-cfg-linha:disabled{opacity:.55;cursor:default}
.gaba3-cfg-linha.acao-sair,.gaba3-cfg-linha.acao-excluir-conta{color:#ffb6b6!important}
.gaba3-cfg-linha.acao-sair>[data-morph-icone],.gaba3-cfg-linha.acao-excluir-conta>[data-morph-icone]{color:#ff8a7a}
/* Interruptor: trilho + bolinha, sem ícone dentro. */
.gaba3-cfg-chave{position:relative;width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);transition:background .18s ease;grid-column:-2}
.gaba3-cfg-chave::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#f3ead8;transition:transform .18s ease}
[aria-checked="true"]>.gaba3-cfg-chave{background:#4caf1a;border-color:#4caf1a}
[aria-checked="true"]>.gaba3-cfg-chave::after{transform:translateX(18px)}
.gaba3-cfg-marca{width:18px;height:18px;border-radius:50%;border:2px solid var(--painel-conta-suave);grid-column:-2}
[aria-checked="true"]>.gaba3-cfg-marca{border-color:#7aff50;box-shadow:inset 0 0 0 4px rgba(18,9,4,.9);background:#7aff50}
.gaba3-cfg-rotulo{margin:6px 10px 0;color:var(--painel-conta-suave);font-size:12px}
.gaba3-cfg-tons{display:flex;flex-wrap:wrap;gap:6px;padding:4px 10px 8px}
.gaba3-cfg-tom{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(232,190,120,.38);background:rgba(18,9,4,.55);color:var(--painel-conta-texto);font:inherit;font-size:13px;cursor:pointer}
.gaba3-cfg-tom[aria-checked="true"]{border-color:#7aff50;color:#b9ff9e;background:rgba(76,175,26,.18)}
.gaba3-cfg-tom:disabled{opacity:.5;cursor:default}
.gaba3-cfg-grupo{display:grid;gap:4px}
.gaba3-cfg-fixo{cursor:default}
.gaba3-cfg-horario{grid-template-columns:25px minmax(0,1fr);row-gap:8px}
.gaba3-cfg-horas{grid-column:2;display:flex;flex-wrap:wrap;gap:8px}
.gaba3-cfg-horas input{min-height:44px;min-width:0;flex:1 1 110px;padding:0 10px;border-radius:10px;border:1px solid rgba(232,190,120,.38);background:rgba(18,9,4,.6);color:var(--painel-conta-texto);font:inherit;color-scheme:dark}
.gaba3-cfg-status{margin:2px 10px;color:#ffb6b6;font-size:12px}
.gaba3-cfg-status:empty{display:none}
.gaba3-cfg-arroba-acoes{display:flex;gap:4px;grid-column:3 / -1}
.gaba3-cfg-arroba-acoes button{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--painel-conta-destaque);cursor:pointer}
.gaba3-cfg-arroba-acoes button:hover,.gaba3-cfg-arroba-acoes button:focus-visible{outline:2px solid var(--painel-conta-destaque);background:var(--painel-conta-hover)}
.gaba3-cfg-visitante{margin:10px 4px 0;color:var(--painel-conta-suave);font-size:13px}
.gaba3-cfg-visitante a{color:var(--painel-conta-destaque);font-weight:700}

/* Menu ☰: grupos que vieram do carril da direita (2026-10-07). */
.menu-lateral-item .mli-seta{margin-left:auto;font-size:18px;line-height:1;color:rgba(239,204,142,.8);transition:transform .18s ease}
.menu-lateral-item[aria-expanded="true"] .mli-seta{transform:rotate(90deg)}
.menu-lateral-sub{display:flex;flex-direction:column;gap:2px;padding:2px 0 6px 48px}
.menu-lateral-sub[hidden]{display:none}
.menu-lateral-subitem{display:block;padding:8px 10px;border-radius:9px;color:rgba(245,228,201,.85);font-size:12.5px;text-decoration:none;text-shadow:0 1px 1px rgba(0,0,0,.34)}
.menu-lateral-subitem:hover,.menu-lateral-subitem:focus-visible{background:rgba(190,129,50,.18);color:#fff0d6;outline:none}
/* Painel da bolita: só o nome de cada opção, sem o textinho embaixo. */
#painel-conta-raiz button>span>b{display:block}


/* ===== Portada sem emoji (pedido do dono, 2026-10-08) =====
   Ícones de linha (frontend/roomIcons.js) no mesmo creme dourado do menu ☰,
   sempre soltos (nunca dentro de bola/caixa com fundo), só com sombra. */
.gaba3-ico-linha{display:inline-flex;flex:none;width:1.15em;height:1.15em;vertical-align:-.2em;color:rgba(239,204,142,.94);filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.gaba3-ico-linha svg{width:100%;height:100%;display:block}
.gaba3-secao-titulo .gaba3-ico-linha,.gaba3-painel-cabecera h3 .gaba3-ico-linha,.gaba3-mural-expira .gaba3-ico-linha{margin-right:7px}
.gaba3-mural-expira .gaba3-ico-linha{color:inherit;filter:none}
/* Selos Novo / Em alta: ícone + texto, e a fila de selos nunca chega até a bandeirinha. */
.sala-card-topo{position:absolute;top:8px;left:8px;right:44px;z-index:3;display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;pointer-events:none}
.sala-card-topo>*{position:static!important;inset:auto!important;transform:none!important;margin:0!important;max-width:100%}
.sala-card-selo{display:inline-flex;align-items:center;gap:4px}
.sala-card-selo .gaba3-ico-linha{color:currentColor;filter:none;width:12px;height:12px}
/* Denunciar: bandeirinha de linha, sem bola vermelha atrás, no canto direito. */
.sala-card-denunciar,.sala-card-denunciar:hover,.sala-card-denunciar:focus-visible{width:32px;height:32px;padding:5px;border-radius:0;background:none!important;box-shadow:none}
.sala-card-denunciar .gaba3-ico-linha{width:20px;height:20px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(0,0,0,.6))}
.sala-card-denunciar:hover .gaba3-ico-linha,.sala-card-denunciar:focus-visible .gaba3-ico-linha{color:#ffb4a8}
@media(max-width:850px){.sala-card-denunciar{background:none!important}}
.sala-card--video .sala-contenido .sala-card-denunciar .gaba3-ico-linha{width:18px;height:18px}
/* Menu ⋮ do criador: "Denunciar" com a bandeirinha de linha. */
.gaba3-criador-menu .gaba3-ico-linha{margin-right:6px}
/* Polegar dos vídeos curtos: ícone de linha + número. */
.gaba3-curto-likes .gaba3-ico-linha{width:15px;height:15px;color:#f1d99a}
.gaba3-curto-likes.liked .gaba3-ico-linha{color:#c6ff6b}
/* Criador sem capa: a claquete de linha no lugar do emoji grande. */
.gaba3-criador-tela--vazia .gaba3-ico-linha{width:64px;height:64px;color:#f1d99a;opacity:.85}
.gaba3-destaque-hero-vistas .gaba3-ico-linha{margin-right:4px}

/* Carregando a portada (2026-10-08): no computador o destaque guarda o lugar 70/30 de
   sempre e a publicidade quadrada só aparece com o resto pronto — antes a coluna da
   direita ocupava a largura toda e o anúncio virava um quadrado gigante por cima. */
@media(min-width:821px){
    .gaba3-destaque-superior.gaba3-destaque-carregando .gaba3-destaque-lateral{grid-column:2!important}
    .gaba3-destaque-superior.gaba3-destaque-carregando .gaba3-ad-slot-abaixo{display:none!important}
}

/* Menu ☰: itens só para quem tem conta / só para visitante, e sub-itens de Explorar com ícone. */
.menu-lateral-item[hidden],.menu-lateral-subitem[hidden]{display:none!important}
.menu-lateral-subitem{display:flex;align-items:center;gap:10px}
.menu-lateral-subitem .mli-icono{width:18px;height:18px}
/* "Falar com o suporte" no ☰ é botão (abre o chat do suporte), com a mesma cara dos links. */
button.menu-lateral-subitem{width:100%;border:0;background:none;font:inherit;font-size:12.5px;text-align:left;cursor:pointer}
/* Painéis da barra lateral (Atividade recente / Vídeos em alta): ícone de linha na miniatura. */
.gaba3-atividade-thumb i.gaba3-ico-linha{width:100%;height:100%;padding:11px;box-sizing:border-box;vertical-align:0}

/* Área de toque de pelo menos 44 × 44 px (auditoria UX-07) sem aumentar o ícone que aparece:
   um ::after invisível, centrado no botão, recebe o toque. Os botões abaixo não usam ::after
   para outra coisa. (.perfil-miniatura fica de fora: tem overflow:hidden, que cortaria a área.) */
.boton-buzon,
.boton-notificaciones,
.boton-busca-movel,
#abrir-menu-lateral,
.menu-lateral-cerrar,
.gaba3-continue-actions button,
.gaba3-voz-barra button,
.navegacao-global-sala button,
.professional-header #professional-owner-toggle{position:relative}
.boton-buzon::after,
.boton-notificaciones::after,
.boton-busca-movel::after,
#abrir-menu-lateral::after,
.menu-lateral-cerrar::after,
.gaba3-continue-actions button::after,
.gaba3-voz-barra button::after,
.navegacao-global-sala button::after,
.professional-header #professional-owner-toggle::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:max(100%,44px);
    height:max(100%,44px);
    transform:translate(-50%,-50%);
    background:transparent;
}

/* "Salas que sigo" (☰): estrela cheia ao lado de cada sala para deixar de seguir.
   Ícone solto, sem bola nem caixa; área de toque de 44px. */
.gaba3-sigo-linha { display: flex; align-items: center; gap: 6px; }
.gaba3-sigo-deixar {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; color: #f5c542; cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.gaba3-sigo-deixar:disabled { opacity: .5; cursor: progress; }
.gaba3-sigo-deixar:focus-visible { outline: 2px solid #f5c542; outline-offset: 2px; border-radius: 6px; }

/* Homenagem na hora (2026-10-11): o cartão aparece logo e a entrada (pipa, fogos, envelope)
   passa POR CIMA dele, na mesma célula do palco, e some sozinha — antes o cartão só entrava
   depois da entrada terminar e a tela parecia travada. A cortina já ficava por cima. */
.gaba3-celebration-stage > .gaba3-celebration-slide,
.gaba3-celebration-stage > .gaba3-lottie-invitation-intro,
.gaba3-celebration-stage > .gaba3-fireworks-intro,
.gaba3-celebration-stage > .gaba3-envelope-intro{grid-area:1/1}
.gaba3-celebration-stage > .gaba3-lottie-invitation-intro,
.gaba3-celebration-stage > .gaba3-fireworks-intro,
.gaba3-celebration-stage > .gaba3-envelope-intro{position:relative;z-index:2;align-self:center;justify-self:center;pointer-events:none}
.gaba3-celebration-stage.is-showing-message > .gaba3-lottie-invitation-intro,
.gaba3-celebration-stage.is-showing-message > .gaba3-fireworks-intro,
.gaba3-celebration-stage.is-showing-message > .gaba3-envelope-intro{animation:gaba3EntradaSaiDeCima .7s ease .45s forwards}
@keyframes gaba3EntradaSaiDeCima{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){
    .gaba3-celebration-stage > .gaba3-lottie-invitation-intro,
    .gaba3-celebration-stage > .gaba3-fireworks-intro,
    .gaba3-celebration-stage > .gaba3-envelope-intro{display:none}
}

/* Lista de abertura (UX-05, 2026-10-14): botões pequenos ganham área de toque de ~44 px para o
   polegar, sem mudar o tamanho que se vê. :where() não ganha de nenhuma regra existente (quem já é
   absolute/fixed continua assim). */
:where(.gaba3-historia-like, .privada-visto-marca, .chat-voz-play, .chat-voz-vel, .professional-ver-todos,
       #professional-emoji-toggle, .ytg-botao, .sv-follow-btn) { position: relative; }
:where(.gaba3-historia-like, .privada-visto-marca, .chat-voz-play, .chat-voz-vel, .professional-ver-todos,
       #professional-emoji-toggle, .ytg-botao, .sv-follow-btn)::after { content: ""; position: absolute; inset: -8px -4px; }
/* Moeda junto do preço no formulário da loja (SHOP-01, 2026-10-14). */
.conf-preco-moeda{display:flex;gap:6px;align-items:stretch}
.conf-preco-moeda select{flex:0 0 auto;max-width:42%;min-width:0}
.conf-preco-moeda input{flex:1 1 auto;min-width:0}
/* GO-03 (2026-10-14): recursos ao vivo escondidos até o servidor confirmar que estão ligados. */
body:not(.gaba3-ao-vivo) :is(#btn-ativar-camara,#btn-ligar-voz,#ativar-camera-comercio,#professional-live-toggle,#creator-live-toggle,.camera-ao-vivo-btn,[data-ao-vivo]){display:none!important}
/* Aviso de identidade ao criar loja/sala profissional (2026-10-15). */
.minimo-aviso-identidade{margin:10px 0 4px;padding:10px 12px;border-radius:10px;border:1px solid rgba(85,201,0,.35);background:rgba(85,201,0,.08);font-size:13px;line-height:1.45}
.minimo-aviso-identidade p{margin:0 0 6px}
.minimo-aviso-identidade .boton-secundario{margin-top:2px}