/* ============================================================================
   v5-vidro.css — GLASSMORPHISM DO ESCRITÓRIO  (17/09/2026)

   o dono do painel, olhando o Escritório no ar:
     · "quando aperto em resumo dá o aviso no canto direito, está difícil ver —
        faça um popup em glassmorphism na tela";
     · "e coloque glassmorphism nesse escritório todo. O design.";
     · "a logo quero que troque, não consigo ver nesse menu";
     · "quando passo o mouse em Ferramentas grátis fica branco";
     · "quero que o menu seja interativo de passar o mouse, e os cards também";
     · "a caixa de entrada pode ser branca".

   COMO ESTA FOLHA FUNCIONA — e por que ela é a última da página:
   ela NÃO redesenha componente nenhum. Só repinta SUPERFÍCIE: fundo, borda,
   desfoque, sombra e hover. Nenhuma regra aqui mexe em grade, tamanho de
   fonte, ordem ou conteúdo. Tirar o <link> do escritorio.html devolve a tela
   exatamente como estava antes.

   ⚠️ VIDRO PRECISA DE FUNDO. `backdrop-filter` desfoca o que está ATRÁS — num
   Atlântico chapado o efeito não aparece. Por isso o primeiro bloco pinta uma
   aurora suave no palco: são ela e a arte da sala que o vidro desfoca.

   ⚠️ CONTRASTE. Vidro escuro come texto. Toda superfície de vidro aqui usa
   tinta clara (--ds-branco / --ds-apoio-escuro), e a ÚNICA superfície clara é
   a Caixa de entrada — que por isso troca a tinta inteira para Atlântico.
   ========================================================================== */

/* -- 0. o pano de fundo que o vidro desfoca -------------------------------- */
body.v5-escritorio .office-page.active{
  position: relative;
  isolation: isolate;
}
body.v5-escritorio .office-page.active::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 520px at 12% 8%,  rgba(var(--ds-menta-rgb), .16), transparent 62%),
    radial-gradient(680px 520px at 88% 14%, rgba(var(--ds-azul-rgb, 62,111,232), .13), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(var(--ds-menta-2-rgb), .13), transparent 66%),
    var(--ds-atlantico);
  /* A AURORA MEXE (22/09/2026) — *"o background disso ele mexia, [por que]
     está estático?"*. Ela nunca animou: era gradiente parado. Agora deriva em
     26s. O `scale` de base NÃO é enfeite: sem ele o translate mostraria a
     borda do elemento e apareceria um canto sem cor. */
  transform: translate3d(0, 0, 0) scale(1.14);
  will-change: transform;
  animation: esc-aurora 26s ease-in-out infinite;
}
@keyframes esc-aurora{
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.14); }
  35%      { transform: translate3d(-2.2%, 1.6%, 0) scale(1.20); }
  70%      { transform: translate3d(1.8%, -1.2%, 0) scale(1.17); }
}

/* -- 0.b O PALCO FICA TRANSPARENTE — E ISSO APAGA A "BARRA VERDE" ---------
   ⚠️ MEDIDO em 22/09/2026, com amostra de pixel. O dono do painel: *"no
   escritório está com uma barra verde embaixo do menu"*.

   A CAUSA: o `.office-stage` carrega do v5.css um radial OPACO
   (`atlantico-2 → atlantico`). Ele cobria a aurora inteira, e o ÚNICO lugar
   onde ela escapava era a fresta de ~10px entre a barra branca e o topo do
   palco. Na tela isso vira uma faixa esverdeada com cara de barra.
   A prova: em x=400, a fresta media (18,59,66) contra (16,45,54) do Atlântico
   logo abaixo; desligando a aurora a fresta virava (15,43,53) — igual ao
   resto. Não era uma barra: era o vazamento dela.

   Com o palco transparente a aurora passa a valer na tela toda: a faixa some
   e o vidro finalmente tem o fundo que ele existe para desfocar. */
body.v5-escritorio .office-stage{ background: none; }

/* -- 1. a receita do vidro ------------------------------------------------- */
body.v5-escritorio .office-panel,
body.v5-escritorio .office-chat-panel,
body.v5-escritorio .atd-painel,
body.v5-escritorio .esc-setor,
body.v5-escritorio .esc-resumo-card,
body.v5-escritorio .esc-reuniao-hero,
body.v5-escritorio .esc-acao-barra,
body.v5-escritorio .status-pill,
body.v5-escritorio .office-chat-open,
body.v5-escritorio .chat-quick-actions button,
body.v5-escritorio .esc-modal-caixa,
body.v5-escritorio .office-controls,
body.v5-escritorio .esc-linha,
body.v5-escritorio .esc-tarefa{
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, .65),
              inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* a coluna e a conversa são paredes: um pouco mais densas, para o texto
   descolar da arte da sala que passa por trás */
body.v5-escritorio .office-panel,
body.v5-escritorio .office-chat-panel,
body.v5-escritorio .atd-painel{
  background: rgba(var(--ds-atlantico-2-rgb), .62);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}

/* -- 2. HOVER: o menu e os cards reagem ------------------------------------
   o dono do painel: "quero que o menu seja interativo de passar o mouse, e os cards
   também". Toda peça de vidro sobe 1px, clareia e ganha um fio de menta. */
body.v5-escritorio .esc-setor,
body.v5-escritorio .esc-resumo-card,
body.v5-escritorio .esc-acao-barra,
body.v5-escritorio .esc-reuniao-hero,
body.v5-escritorio .chat-quick-actions button,
body.v5-escritorio .esc-cabeca,
body.v5-escritorio .atd-item{
  transition: transform .16s ease, background .16s ease,
              border-color .16s ease, box-shadow .16s ease;
}
body.v5-escritorio .esc-setor:hover,
body.v5-escritorio .esc-resumo-card:hover,
body.v5-escritorio .esc-acao-barra:hover,
body.v5-escritorio .chat-quick-actions button:hover{
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .10);
  border-color: rgba(var(--ds-menta-rgb), .45);
  box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .7),
              0 0 0 1px rgba(var(--ds-menta-rgb), .14);
}
body.v5-escritorio .esc-cabeca:hover{ transform: translateY(-2px) scale(1.04); }
body.v5-escritorio .atd-item:hover{ transform: translateX(2px); }
/* quem clica com o teclado enxerga o mesmo foco */
body.v5-escritorio .esc-setor:focus-visible,
body.v5-escritorio .esc-acao-barra:focus-visible,
body.v5-escritorio .esc-reuniao-hero:focus-visible,
body.v5-escritorio .chat-quick-actions button:focus-visible{
  outline: 2px solid var(--ds-menta);
  outline-offset: 2px;
}

/* -- 3. REUNIR A EQUIPE: a ação do dia, sozinha e primeira -----------------
   o dono do painel: "não dá pra saber que tem que reunir a equipe. Coloque diferente
   Reunir a equipe e em primeiro". É a única peça MENTA CHEIA da tela — é o
   que diz "é aqui". */
body.v5-escritorio .esc-reuniao-hero{
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  width: 100%;
  margin: 4px 0 16px;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(112deg, var(--ds-menta) 0%, var(--ds-menta-hover) 55%, var(--ds-menta-2) 100%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 26px 60px -30px rgba(var(--ds-menta-rgb), .75);
  color: var(--ds-atlantico);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.v5-escritorio .esc-reuniao-hero:hover{
  transform: translateY(-2px);
  box-shadow: 0 32px 70px -28px rgba(var(--ds-menta-rgb), .85);
}
body.v5-escritorio .esc-reuniao-hero .erh-ico{
  width: 58px; height: 58px; border-radius: 17px;
  display: grid; place-items: center;
  background: rgba(var(--ds-atlantico-rgb), .16);
}
body.v5-escritorio .esc-reuniao-hero .erh-ico svg{
  width: 28px; height: 28px; color: var(--ds-atlantico);
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
body.v5-escritorio .esc-reuniao-hero .erh-txt b{
  display: block; font-size: 21px; font-weight: 850; letter-spacing: -.02em;
  color: var(--ds-atlantico);
}
body.v5-escritorio .esc-reuniao-hero .erh-txt small{
  display: block; margin-top: 4px; font-size: 13px; line-height: 1.45;
  color: rgba(var(--ds-atlantico-rgb), .82);
}
body.v5-escritorio .esc-reuniao-hero .erh-txt u{ text-decoration: none; font-weight: 800; }
body.v5-escritorio .esc-reuniao-hero .erh-cta{
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 11px 18px; border-radius: 999px;
  background: var(--ds-atlantico); color: var(--ds-menta);
  font-size: 13.5px; font-weight: 800;
}
body.v5-escritorio .esc-reuniao-hero .erh-cta svg{ width: 15px; height: 15px; }
@media (max-width: 760px){
  body.v5-escritorio .esc-reuniao-hero{ grid-template-columns: 46px minmax(0, 1fr); row-gap: 12px; }
  body.v5-escritorio .esc-reuniao-hero .erh-ico{ width: 46px; height: 46px; }
  body.v5-escritorio .esc-reuniao-hero .erh-cta{ grid-column: 1 / -1; justify-content: center; }
}

/* -- 4. os três atalhos na barra da tela ---------------------------------- */
body.v5-escritorio .esc-acao-barra{
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  color: var(--ds-linha-2); font-size: 12.5px; font-weight: 750; white-space: nowrap;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
body.v5-escritorio .esc-acao-barra:hover{ color: var(--ds-branco); }
body.v5-escritorio .esc-acao-barra svg{
  width: 16px; height: 16px; flex: none; color: var(--ds-menta);
  fill: none; stroke: currentColor; stroke-width: 1.7;
}

/* -- 5. A CAIXA DE ENTRADA, BRANCA ----------------------------------------
   o dono do painel: "a caixa de entrada pode ser branca". Branca no meio de uma tela
   escura só funciona se a TINTA inteira virar junto — senão sobra texto
   cinza-claro sobre branco (era 1,4:1). Aqui ela vira uma peça de papel. */
body.v5-escritorio .atd-card{
  background: rgba(255, 255, 255, .95) !important;
  border: 1px solid rgba(var(--ds-atlantico-rgb), .10) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .55);
  color: var(--ds-atlantico);
}
body.v5-escritorio .atd-card h3,
body.v5-escritorio .atd-card b,
body.v5-escritorio .atd-card .atd-item b{ color: var(--ds-atlantico) !important; }
body.v5-escritorio .atd-card small,
body.v5-escritorio .atd-card p,
body.v5-escritorio .atd-card .atd-fonte,
body.v5-escritorio .atd-card .atd-nota{ color: var(--ds-tinta-2) !important; }
body.v5-escritorio .atd-card .atd-item{
  background: var(--ds-nevoa) !important;
  border: 1px solid var(--ds-linha) !important;
  color: var(--ds-atlantico) !important;
}
body.v5-escritorio .atd-card .atd-item:hover,
body.v5-escritorio .atd-card .atd-item.aberta{
  background: var(--ds-branco) !important;
  border-color: var(--ds-linha-2) !important;
}
body.v5-escritorio .atd-card .atd-filtros button{
  background: var(--ds-neutro-1) !important; color: var(--ds-tinta-2) !important;
}
body.v5-escritorio .atd-card .atd-filtros button.ativo{
  background: var(--ds-verde) !important; color: var(--ds-branco) !important;
}
body.v5-escritorio .atd-card .atd-btn,
body.v5-escritorio .atd-card .atd-recolhe{
  background: var(--ds-branco) !important;
  border: 1px solid var(--ds-linha) !important;
  color: var(--ds-tinta-2) !important;
}
body.v5-escritorio .atd-card .atd-btn:hover,
body.v5-escritorio .atd-card .atd-recolhe:hover{
  border-color: var(--ds-verde) !important; color: var(--ds-verde-2) !important;
}
body.v5-escritorio .atd-card .atd-contador{
  background: var(--ds-atencao-2) !important; color: var(--ds-branco) !important;
}
body.v5-escritorio .atd-card .atd-contador.zero{
  background: var(--ds-neutro-2) !important; color: var(--ds-tinta-2) !important;
}
body.v5-escritorio .atd-card .atd-selo.pergunta{ background: var(--ds-azul-tenue, #E4ECFD) !important; color: var(--ds-azul-2, #2A50B8) !important; }
body.v5-escritorio .atd-card .atd-selo.mensagem{ background: var(--ds-menta-tenue) !important; color: var(--ds-verde-2) !important; }
body.v5-escritorio .atd-card .atd-selo.reclamacao{ background: var(--ds-atencao-tenue) !important; color: var(--ds-atencao-2) !important; }

/* -- 6. O AVISO EM POPUP DE VIDRO ----------------------------------------
   Era um toast de 13px no canto inferior direito, por cima da sala desenhada.
   Agora: fundo escurecido + cartão de vidro no centro. O motor está em
   v5-vivo.js (avisa / fechaAviso). */
.esc-aviso{
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: 24px;
  background: rgba(var(--ds-atlantico-rgb), .52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.esc-aviso.on{ opacity: 1; visibility: visible; }
.esc-aviso-caixa{
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px 14px;
  align-items: center;
  width: min(460px, 100%);
  padding: 22px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
  transform: translateY(10px) scale(.98);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.esc-aviso.on .esc-aviso-caixa{ transform: none; }
.esc-aviso-ico{
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--ds-menta); color: var(--ds-atlantico);
  font: 800 20px/1 Inter, sans-serif;
}
.esc-aviso.ruim .esc-aviso-ico{ background: var(--ds-atencao-claro, #F0AD4E); }
.esc-aviso-txt{
  margin: 0; font-size: 15px; line-height: 1.5; font-weight: 650;
  color: var(--ds-branco);
}
.esc-aviso-ok{
  grid-column: 2; justify-self: start;
  border: 0; border-radius: 999px; cursor: pointer;
  padding: 9px 18px;
  background: var(--ds-menta); color: var(--ds-atlantico);
  font-size: 13px; font-weight: 800;
}
.esc-aviso-ok:hover{ background: var(--ds-menta-hover); }
@media (prefers-reduced-motion: reduce){
  .esc-aviso, .esc-aviso-caixa{ transition: none; }
  /* quem pediu menos movimento fica com a aurora PARADA, não sem aurora */
  body.v5-escritorio .office-page.active::before{ animation: none; }
}

/* -- 7. A MARCA DA BARRA DE CIMA -----------------------------------------
   o dono do painel: "a logo quero que troque, não consigo ver nesse menu". Na barra
   horizontal ela aparecia como um símbolo pequeno, quase do tom do fundo.
   Agora é o wordmark branco+menta que ele mandou, com altura de verdade. */
/* MEDIDO EM 17/09/2026, e por isso o seletor e comprido: esta regra estava
   PERDENDO. O v5-contraste.css tem
     body.v5-app-topo.v5-escritorio :is(.app-page,.office-page) .sidebar .brand
   que e mais especifica (5 classes contra 3) e pinta o lockup ATLANTICO, com
   o argumento — correto na epoca — de que a barra de cima e branca. No
   Escritorio ela deixou de ser: esta folha pinta a barra de vidro escuro logo
   acima. Logo navy sobre barra escura e exatamente o "nao consigo ver a logo
   nesse menu" que o dono do painel reportou. A regra abaixo empata em especificidade e
   ganha por vir depois. Se um dia a barra do Escritorio voltar a ser clara,
   e ESTE bloco que tem de sair. */
body.v5-escritorio.v5-app-topo :is(.app-page, .office-page)
  :is(.sidebar, .barra, .barra-app) :is(.logo, .brand, .marca),
body.v5-escritorio :is(.barra, .barra-app, .sidebar) :is(.logo, .brand, .marca){
  width: 112px !important;
  height: 33px !important;      /* o wordmark e 583x172 — 3,39:1 */
  background-image: url("/site/lucrei-wordmark-branco.svg?v=3") !important;
  background-position: left center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
body.v5-escritorio :is(.barra, .barra-app, .sidebar)
  :is(.logo, .brand, .marca) > :is(img, svg, .brand-mark, .logo-mark){
  display: none !important;
}

/* -- 8. O HOVER QUE FICAVA BRANCO ----------------------------------------
   o dono do painel: "quando passo o mouse em Ferramentas grátis fica branco".
   A barra de cima do aplicativo é CLARA no resto do site, e o hover dela
   pinta fundo branco — no Escritório, que é escuro, isso vira um retângulo
   branco com texto branco dentro. Aqui o hover volta a ser da casa. */
body.v5-escritorio .barra nav a:hover,
body.v5-escritorio .barra nav a:focus-visible,
body.v5-escritorio .barra .abre-grupo:hover,
body.v5-escritorio .barra .grupo.aberto .abre-grupo,
body.v5-escritorio .barra .grupo.aqui .abre-grupo{
  background: rgba(var(--ds-menta-rgb), .14) !important;
  color: var(--ds-branco) !important;
}
body.v5-escritorio .barra nav a:hover svg,
body.v5-escritorio .barra .abre-grupo:hover svg{ color: var(--ds-menta) !important; }
/* o submenu de Ferramentas, quando flutua no Escritório, também é de vidro */
body.v5-escritorio ~ * .sub.menu-flutuante,
body.v5-escritorio .sub.menu-flutuante{
  background: rgba(var(--ds-atlantico-2-rgb), .88) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
body.v5-escritorio .sub.menu-flutuante a{ color: var(--ds-linha-2) !important; }
body.v5-escritorio .sub.menu-flutuante a:hover{
  background: rgba(var(--ds-menta-rgb), .14) !important; color: var(--ds-branco) !important;
}

/* -- 9. a sala e a conversa ganham moldura de vidro ----------------------- */
body.v5-escritorio .office-map{
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, .85);
}
body.v5-escritorio .agent-chat-form > div{
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.v5-escritorio .agent-chat-form input{ background: transparent; color: var(--ds-branco); }

/* -- 10. navegador sem backdrop-filter ------------------------------------
   Sem o desfoque, vidro vira um retângulo translúcido e o texto perde o
   fundo. Nesse caso as superfícies voltam a ser sólidas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.v5-escritorio .office-panel,
  body.v5-escritorio .office-chat-panel,
  body.v5-escritorio .atd-painel{ background: var(--ds-atlantico-2); }
  body.v5-escritorio .esc-setor,
  body.v5-escritorio .esc-resumo-card,
  body.v5-escritorio .esc-acao-barra,
  body.v5-escritorio .chat-quick-actions button,
  body.v5-escritorio .esc-modal-caixa,
  body.v5-escritorio .esc-linha,
  body.v5-escritorio .esc-tarefa{ background: var(--ds-atlantico-2); }
  .esc-aviso{ background: rgba(var(--ds-atlantico-rgb), .92); }
  .esc-aviso-caixa{ background: var(--ds-atlantico-2); }
}