/* ==========================================================================
   O ESCRITÓRIO POR CIMA — v131 (18/09/2026)

   Pedidos do dono do painel, nesta ordem:
   1. "A barra do menu na parte do escritório quero que esteja maior um pouco
      e branca; troca a logo por outra."
   2. "Coloque as informações (precisa de você) como notificações na tela do
      escritório." → dois botões com contador, cada um abrindo um popup.
   3. "Suba os cards do faturamento para cima."
   4. "Diminua o avatar dos bonecos e então aumente o tamanho do escritório."
      → ele escolheu: as CABECINHAS da faixa "A equipe da sua loja"; a sala
      cresce com o espaço que sobra.
   5. "A caixa de entrada: uma notificação que, quando aperta, abre em popup."
   E, decidido junto: a COLUNA DA ESQUERDA sai do Escritório — a sala passa a
   ocupar a largura inteira.

   ⚠️ Esta folha é a ÚLTIMA do escritorio.html de propósito: ela desfaz, com os
   MESMOS seletores, o bloco "o escritório é a tela escura" do v5-topo.css
   (linha ~422). Mesma especificidade + vindo depois = ganha. Se um dia a barra
   voltar a ficar escura, é porque alguém escreveu depois desta folha.
   ========================================================================== */

/* ------------------------------------------------- 1) A BARRA: MAIOR E BRANCA */
/* A barra é a CÁPSULA flutuante do v5-topo.css: `--barra-h` é a altura dela e
   `--barra` é o espaço que o conteúdo desce (folga + altura + folga). Mexer só
   numa desencontra as duas — por isso as duas sobem juntas: 54→64 e 72→84. */
body.v5-app-topo.v5-escritorio { --barra-h: 64px; --barra: 84px; --linha-topo: var(--ds-neutro-2); }

body.v5-escritorio :is(.app-page, .office-page) .sidebar {
  background: var(--ds-branco);
  border-color: var(--ds-neutro-2);
  box-shadow: 0 1px 2px rgba(var(--ds-atlantico-rgb),.06), 0 10px 26px -22px rgba(var(--ds-atlantico-rgb),.35);
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar .brand { color: var(--ink); }
body.v5-escritorio :is(.app-page, .office-page) .sidebar .brand:after { background: var(--ds-neutro-2); }
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .abre-grupo { color: var(--ds-tinta-2); }
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a:hover,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .abre-grupo:hover {
  background: var(--ds-neutro-1); color: var(--ink);
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.active,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .grupo.aqui .abre-grupo,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .grupo.aberto .abre-grupo,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.active,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.painel.active {
  background: var(--ds-menta-tenue); color: var(--ds-verde-fundo); border-color: transparent;
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.active svg,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.active svg,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.painel.active svg,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .grupo.aqui .abre-grupo svg { color: var(--ds-verde-fundo); }
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque,
body.v5-escritorio :is(.app-page, .office-page) .sidebar nav a.destaque.painel {
  background: none; border-color: transparent; color: var(--ds-tinta-2);
}
/* o crachá e o seletor de loja voltam a ser claros (a versão escura tem 4
   classes no v5-topo.css — por isso estes também precisam ter) */
body.v5-escritorio :is(.app-page, .office-page) .sidebar .conta-lado .perfil,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .loja-btn,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .loja-topo.so-uma {
  background: var(--ds-branco); border-color: var(--ds-neutro-3); color: var(--ds-tinta-2);
}
body.v5-escritorio :is(.app-page, .office-page) .sidebar .conta-lado .perfil:hover,
body.v5-escritorio :is(.app-page, .office-page) .sidebar .loja-btn:hover { background: var(--ds-neutro-1); }
body.v5-escritorio :is(.app-page, .office-page) .sidebar .conta-lado .ini {
  background: var(--ds-verde); color: var(--ds-branco);
}
body.v5-escritorio .sidebar .conta-lado .quem b,
body.v5-escritorio .sidebar .loja-btn b,
body.v5-escritorio .sidebar .loja-topo.so-uma b { color: var(--ink); }
body.v5-escritorio .sidebar .conta-lado .quem small { color: var(--muted); }
/* o v5-contraste.css pintou estes de claro para a barra escura */
body.v5-escritorio .sidebar .back-site,
body.v5-escritorio .sidebar nav .abre-grupo,
body.v5-escritorio .sidebar .grupo > button { color: var(--ds-tinta-2) !important; }

/* A LOGO NOVA.
   ⚠️ A marca da barra NÃO é uma <img> no HTML: ela é pintada como fundo do
   próprio <a class="brand"> (e o símbolo + a palavra que vêm dentro dele ficam
   com display:none). Quem fazia isso era o v5-vidro.css, com o WORDMARK
   BRANCO — feito para a barra escura, e que sumiria na barra branca. O
   comentário de lá diz exatamente isto: "se um dia a barra do Escritório
   voltar a ser clara, é ESTE bloco que tem de sair". É o que acontece aqui:
   entra o LOCKUP HORIZONTAL ATLÂNTICO (símbolo + palavra, 642x139 = 4,62:1),
   que é outra logo e é a versão desenhada para fundo claro. */
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: 157px !important; height: 34px !important;
  background-image: url("/site/lucrei-horizontal-atlantico.svg?v=131") !important;
}

/* ------------------------------------- 2) A COLUNA SAI, A SALA OCUPA TUDO */
body.v5-escritorio .office-panel { display: none !important; }
body.v5-escritorio .office-stage { margin-left: 0; width: calc(100% - 340px); }
@media (max-width: 1200px) {
  body.v5-escritorio .office-stage { margin-right: 0; width: 100%; }
}
/* a sala pode crescer: era 1080 de largura máxima */
body.v5-escritorio .office-live-shell { max-width: 1320px; margin-top: 18px; margin-bottom: 70px; }

/* ------------------------- 3) AS CABECINHAS MENORES (a faixa da equipe) */
body.v5-escritorio .esc-equipe { gap: 4px; margin-top: 9px; }
body.v5-escritorio .esc-cabeca { width: 28px; height: 28px; border-radius: 9px; }
body.v5-escritorio .esc-cabeca img { width: 22px; height: 22px; }
body.v5-escritorio .esc-cabeca-n { font-size: 8px; padding: 2px 4px; top: -4px; right: -4px; }

/* ------------------------------ 4) OS CARTÕES DE NÚMERO, AGORA NO TOPO */
body.v5-escritorio #num-fila { margin: 4px 0 16px; }

/* --------------------------------------- 5) OS DOIS BOTÕES DE NOTIFICAÇÃO */
body.v5-escritorio .esc-notif {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 999px; border: 1px solid var(--ds-atlantico-3);
  background: rgba(var(--ds-atlantico-rgb),.55); color: var(--ds-linha-2);
  font: 800 12.5px/1 Inter, sans-serif; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
body.v5-escritorio .esc-notif svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
body.v5-escritorio .esc-notif:hover { background: var(--ds-atlantico); border-color: var(--lime); color: var(--ds-branco); transform: translateY(-1px); }
body.v5-escritorio .esc-notif-n {
  min-width: 20px; padding: 3px 6px; border-radius: 999px; text-align: center;
  background: var(--orange); color: var(--ds-atlantico); font: 900 10.5px/1 Inter, sans-serif;
}
body.v5-escritorio .esc-notif-n.zero { background: var(--ds-atlantico-3); color: var(--ds-linha-2); }
/* com coisa esperando, o botão respira — é o aviso de que tem algo lá */
body.v5-escritorio .esc-notif.tem { border-color: var(--orange); }
body.v5-escritorio .esc-notif.tem .esc-notif-n { animation: esc-notif-pisca 2s ease-in-out infinite; }
@keyframes esc-notif-pisca { 0%, 100% { opacity: 1; } 55% { opacity: .55; } }
body.v5-escritorio .esc-vivo-topo { display: inline-flex; align-items: center; gap: 7px; margin-right: 2px; }

/* ------------------------------------------------------- 6) OS DOIS POPUPS */
body.v5-escritorio .esc-pop {
  width: min(560px, 94vw); max-height: 86vh; padding: 0; border: 0; border-radius: 22px;
  background: var(--ds-atlantico); color: var(--ds-branco);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.6);
  overflow: hidden;
}
body.v5-escritorio .esc-pop.larga { width: min(720px, 96vw); }
body.v5-escritorio .esc-pop::backdrop { background: rgba(var(--ds-atlantico-rgb),.62); backdrop-filter: blur(3px); }
body.v5-escritorio .esc-pop-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; border-bottom: 1px solid var(--ds-atlantico-2);
}
body.v5-escritorio .esc-pop-topo h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
body.v5-escritorio .esc-pop-x {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ds-atlantico-3);
  background: none; color: var(--ds-linha-2); font-size: 19px; line-height: 1; cursor: pointer;
}
body.v5-escritorio .esc-pop-x:hover { background: var(--ds-atlantico-2); color: var(--ds-branco); }
body.v5-escritorio .esc-pop-corpo { padding: 16px 18px 20px; overflow: auto; max-height: calc(86vh - 70px); }
/* dentro do popup os dois blocos perdem a moldura que tinham quando eram
   cartão de coluna/palco — o popup já é a moldura */
body.v5-escritorio .esc-pop .esc-bloco,
body.v5-escritorio .esc-pop .atd-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
body.v5-escritorio .esc-pop .esc-bloco-tit { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ds-tinta-4); }
body.v5-escritorio .esc-pop .atd-recolhe { display: none; }

/* A CAIXA DE ENTRADA é um cartão BRANCO por natureza (v5-atendimento.css, e é
   assim porque o dono do painel pediu em 17/09: "a caixa de entrada pode ser branca").
   Então o popup dela é CLARO — senão fica um cartão branco boiando dentro de
   uma caixa escura, com duas molduras e dois títulos iguais. */
body.v5-escritorio .esc-pop.larga { background: var(--ds-branco); color: var(--ink); }
body.v5-escritorio .esc-pop.larga .esc-pop-topo { border-bottom-color: var(--ds-neutro-2); }
body.v5-escritorio .esc-pop.larga .esc-pop-x { border-color: var(--ds-neutro-3); color: var(--muted); }
body.v5-escritorio .esc-pop.larga .esc-pop-x:hover { background: var(--ds-neutro-1); color: var(--ink); }
body.v5-escritorio .esc-pop .atd-card {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
/* o título do cartão repetiria o título do popup — mas o CONTADOR mora dentro
   dele, e é ele que o número do botão espelha. Some da tela, fica no DOM. */
body.v5-escritorio .esc-pop .atd-topo h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
body.v5-escritorio .esc-pop .atd-topo { padding-top: 0; justify-content: flex-end; }

/* ===========================================================================
   v132 (18/09/2026) — "ORGANIZE ESSA TELA"

   Só MOVER: nenhuma cor, nenhum componente, nenhum texto mudou. O que estava
   errado, medido no espelho da tela em 1903px (não no olho):

   1. A faixa da equipe recebia 316px e quebrava em DUAS linhas (6 cabeças em
      cima, "Reputação" e "Time" embaixo). As ações ficavam com 919px.
   2. As ações quebravam em duas fileiras tortas no meio da tela, misturando o
      que se CLICA (Precisa de você, Caixa de entrada, Resumo do dia,
      Programação, Biblioteca) com o que só se LÊ (AO VIVO, "11 trabalhando",
      "2 decisões para você").
   3. "A SUA LOJA AGORA" caía a 23px da segunda linha da faixa e parecia
      legenda do botão "Time".
   4. Os cartões tinham 960px de largura máxima e ficavam centralizados dentro
      de um palco de 1235px: sobravam 275px de vazio à direita, e eles não
      encostavam em nada (título à esquerda, "Reunir a equipe" embaixo com a
      largura inteira).

   Agora são QUATRO faixas, cada uma com a largura do palco:
      título            ·  estado (AO VIVO · trabalhando · decisões)
      faixa da equipe   ·  as 5 ações
      A SUA LOJA AGORA + os 4 cartões
      Reunir a equipe   →  a sala
   =========================================================================== */

/* -- 1. o cabeçalho em duas colunas que não se espremem ------------------- */
body.v5-escritorio .office-title{
  align-items: flex-start;
  gap: 14px 28px;
}
body.v5-escritorio .office-title-esq{
  flex: 1 1 auto;
  min-width: 0;            /* deixa a coluna encolher sem empurrar as ações */
}
body.v5-escritorio .office-title-actions{
  /* 1 1 auto e não 0 1 auto: quando as ações não cabem ao lado do título elas
     descem para uma faixa inteira e continuam encostadas na DIREITA. Com
     `0 1 auto` a faixa ficava do tamanho do conteúdo e o bloco flutuava no
     meio da tela em 1440px (medido). */
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
body.v5-escritorio .esc-linha-estado,
body.v5-escritorio .esc-linha-acoes{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
/* o AO VIVO vinha da coluna que saiu na v131 e trazia o espaço de lá */
body.v5-escritorio .esc-linha-estado .esc-vivo-topo{ margin: 0 4px 0 0; }

/* -- 2. a faixa da equipe é uma faixa inteira, embaixo das duas colunas ---
   Medido: dentro da coluna do título ela ficava com 316px (e 425px depois de
   soltar as ações), e quebrava em duas linhas. Com a largura do palco, os 6
   funcionários + o botão "Time" cabem numa linha só. */
body.v5-escritorio .office-title{ flex-wrap: wrap; }
body.v5-escritorio .office-title > .esc-equipe{
  flex: 1 1 100%;
  margin-top: 2px;
}

/* -- 3. os números param de flutuar: mesma largura do resto da tela ------- */
body.v5-escritorio .num-fila{
  max-width: none;
  margin: 30px 0 20px;     /* medido: com 22px o rótulo "A SUA LOJA AGORA"
                              ficava a 22px do nome "Time" e parecia legenda
                              do botão. Com 30px ele lê como título dos
                              cartões, que é o que é. */
}

/* -- 4. telas estreitas: as duas fileiras viram uma coluna só ------------- */
@media (max-width: 1080px){
  body.v5-escritorio .office-title{ flex-wrap: wrap; }
  body.v5-escritorio .office-title-actions{
    flex: 1 1 100%;
    align-items: flex-start;
  }
  body.v5-escritorio .esc-linha-estado,
  body.v5-escritorio .esc-linha-acoes{ justify-content: flex-start; }
  body.v5-escritorio .num-fila{ margin-top: 16px; }
}

/* ==========================================================================
   v134 (22/09/2026) — *"condense as informações até o card de reunir equipe;
   está muito grande"*.

   Só ALTURA: nenhuma cor, nenhum componente, nenhuma ordem, nenhum texto.
   O que encolhe, de cima para baixo — e o quanto, medido em 1900px:
     · o respiro entre o título e as duas fileiras de ação;
     · a margem do rótulo "A SUA LOJA AGORA" (a v132 tinha aberto 30px para
       ele parar de parecer legenda do botão "Time" — 22px já resolve, e foi
       conferido de novo aqui);
     · o cartão "Reunir a equipe", que era o mais alto da tela: 98px → 70px.
       Ele continua sendo a ÚNICA peça menta cheia — o "é aqui" da tela não
       muda, só para de ocupar um terço do palco.
   ========================================================================== */
body.v5-escritorio .office-title-actions{ gap: 8px; }
body.v5-escritorio .num-fila{ margin: 22px 0 14px; }

body.v5-escritorio .esc-reuniao-hero{
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  margin: 2px 0 12px;
  padding: 12px 16px;
  border-radius: 16px;
}
body.v5-escritorio .esc-reuniao-hero .erh-ico{ width: 44px; height: 44px; border-radius: 13px; }
body.v5-escritorio .esc-reuniao-hero .erh-ico svg{ width: 22px; height: 22px; }
body.v5-escritorio .esc-reuniao-hero .erh-txt b{ font-size: 17px; }
body.v5-escritorio .esc-reuniao-hero .erh-txt small{ margin-top: 2px; font-size: 12.5px; line-height: 1.35; }
body.v5-escritorio .esc-reuniao-hero .erh-cta{ padding: 9px 15px; font-size: 13px; }
@media (max-width: 760px){
  body.v5-escritorio .esc-reuniao-hero{ grid-template-columns: 40px minmax(0, 1fr); }
  body.v5-escritorio .esc-reuniao-hero .erh-ico{ width: 40px; height: 40px; }
}