/* ---------------------------------------------------------------------------- a moldura */

.aplicacao { display: flex; min-height: 100vh; }

/* O MENU NAO ROLA COM A PAGINA. Ele viu num print: descendo a tela, o menu subia junto e
 * deixava um vao escuro embaixo dele -- porque ele so tinha a altura do proprio conteudo.
 *
 * `sticky` e nao `fixed`: `fixed` o tiraria do fluxo e o conteudo passaria por baixo, obrigando
 * a compensar a largura a mao em todo lugar. Com `sticky` ele continua ocupando o lugar dele.
 * `align-self: flex-start` e o que permite a altura de 100vh -- sem isso o `stretch` do flex
 * manda, o menu fica do tamanho da PAGINA, e o `sticky` nao tem para onde grudar. */
.menu {
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; max-height: 100vh;
}

/* ============================================================== O MENU, no visual Golden Gate
 *
 * AS MEDIDAS VIERAM DA V1, medidas no DOM dela em 17/08 — ele disse que aquela lateral era
 * bem mais bonita, e estava certo. O que ela tinha e faltava aqui:
 *
 *   248px de largura (contra 214)   ·   item de 46px (contra 36)
 *   CHIP atras do icone, 30px       ·   barra roxa de 3px no ativo, com sombra
 *   marca com bloco de 42px         ·   sombra da barra sobre o conteudo
 *
 * O QUE MUDEI EM CIMA DELA, para ficar Apple:
 *   - a selecao e' uma CAPSULA que flutua dentro do menu, com folga dos dois lados. Na V1 ela
 *     ia de ponta a ponta, e faixa colada na borda e' cara de menu de sistema antigo;
 *   - peso 500 no item, e nao 600: a V1 fica pesada de ler em bloco;
 *   - o chanfro em cada chip e na capsula -- a linha de luz do Golden Gate;
 *   - o rodape virou uma capsula de perfil, e nao tres botoes empilhados.
 */
.menu {
  width: 248px;
  flex: none;
  color: var(--no-menu);
  padding: var(--f4) 10px var(--f3);
  display: flex;
  flex-direction: column;
  /* O FUNDO E' O DA V3, copiado do `.app-sidebar` dela — e nao chapado.
   *
   * Sao tres camadas: um brilho roxo no alto a esquerda, um verde-agua fraco embaixo a direita,
   * e um degrade vertical que escurece nas duas pontas. E' isso que faz a barra parecer ter
   * profundidade em vez de ser um retangulo pintado, e foi a primeira coisa que ele apontou
   * comparando as duas telas. */
  background:
    radial-gradient(circle at 8% 3%, rgba(112, 88, 232, .26), transparent 25%),
    radial-gradient(circle at 90% 98%, rgba(77, 215, 190, .07), transparent 24%),
    linear-gradient(180deg, #191b31 0%, var(--menu) 52%, #101221 100%);
  /* A BARRA PROJETA SOMBRA SOBRE O CONTEUDO, e e' isso que a poe NA FRENTE em vez de colada. */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06), 16px 0 52px rgba(21, 23, 43, .14);
  z-index: 2;
  /* O MENU NAO ROLA INTEIRO. Sem isto, o rodape descia junto com a lista e o perfil sumia
   * abaixo da dobra — que foi exatamente o que ele viu. Agora quem rola e' a NAVEGACAO, e o
   * rodape fica preso embaixo. */
  height: 100vh;
  overflow: hidden;
}
#menu-itens { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.menu .marca {
  display: flex; align-items: center; gap: 11px; color: #fff;
  padding: 4px 4px var(--f4); margin-bottom: var(--f2); flex: none;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
/* A MARCA E' O SVG DA V3, e nao a letra L. Ele tem degrade, brilho e a trajetoria ascendente —
 * um desenho, e nao uma inicial dentro de um quadrado. */
/* 48px, e nao os 42 da V3: ele pediu "so aumentar o tamanhinho do logo". E o unico numero
 * do menu que sai de propósito do que a V3 usava. */
/* A MARCA COM MOLDURA, como na V3. Ela tem 48px contra os 42 de la e mesmo assim lia MENOR --
 * porque la o simbolo tem fundo e sombra, e aqui ficava solto no escuro. Peca com moldura
 * parece maior que peca sem, no mesmo tamanho. */
.menu .marca .selo {
  width: 48px; height: 48px; flex: none; display: block;
  border-radius: 14px; box-shadow: 0 10px 28px rgba(6, 8, 18, .34);
}
.menu .marca > span { min-width: 0; }
/* 17px e o tamanho da V3, e ele nao esta na escala de propósito: e a MARCA, e marca nao e
 * texto de interface. Aparece uma vez por tela, no alto, e e a primeira coisa que se le. */
.menu .marca b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.2px; }
/* DUAS LINHAS, e sem cortar: "Lançamentos Sem Sofrimento" e' a promessa da casa, e cortá-la
 * com reticencias seria pior do que nao mostrar. */
.menu .marca small {
  /* ASSINATURA DE MARCA, e nao frase. Maiuscula pequena com espacamento entre letras: as duas
     linhas passam a parecer escolha, e nao texto que nao coube. */
  display: block; font-size: var(--texto-assinatura); color: var(--no-menu-fraco); line-height: 1.45;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  margin-top: var(--f1); white-space: normal;
}

/* O ROTULO DE SECAO — "Áreas da Launivo" e "Conta e acesso".
 * O respiro de cima caiu de 12 para 6px em 21/08: com o pe da sidebar o menu passou a ter
 * nove linhas, e cada pixel vertical decide se a lista cabe no notebook dele. */
.menu .titulo-do-menu {
  margin: 6px 9px var(--f2); color: #8f97af; font-size: var(--texto-pp);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
}

/* O ROTULO DE GRUPO SAIU: o menu lista areas, e area nao precisa de titulo em cima dizendo
 * que ela e' uma area. A regra fica para quem tiver marcacao antiga em cache. */
.menu .grupo { display: none; }

/* O CONTADOR da area. Ele responde "quanto tem aqui dentro" antes do clique -- e e' o que
 * transforma cinco linhas num indice, em vez de cinco portas fechadas. */
.menu a .conta {
  margin-left: auto; font-size: var(--texto-pp); font-weight: 500; color: var(--no-menu-fraco);
  background: rgba(255, 255, 255, .09); border-radius: 999px; padding: 0 var(--f2);
  height: 24px; min-width: 24px; display: inline-flex; align-items: center;
  justify-content: center;
}
.menu a.aqui .conta { background: rgba(255, 255, 255, .16); color: #fff; }
/* `font-size` AQUI E OBRIGATORIO, e nao redundante. Existe um `.rotulo` generico no arquivo, de
 * outra tela, com 11,5px -- e regra direta sobre o elemento vence valor herdado do `.menu a`.
 * Sem esta linha, o item do menu le 11,5px por mais que o `<a>` diga 14. */
.menu a .rotulo {
  font-size: var(--texto-menu); color: inherit;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* O BOTAO DE RECOLHER, na marca. */
.menu .marca .recolher {
  margin-left: auto; width: var(--alto-mini); height: var(--alto-mini); flex: none; padding: 0;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: 8px;
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}
.menu .marca .recolher:hover { background: rgba(255, 255, 255, .16); }

/* ---------------------------------------------------------------- O MENU RECOLHIDO
 *
 * So os chips ficam. O texto some com `display:none`, e nao com largura zero: largura zero
 * continua sendo lida por leitor de tela, e a pessoa ouviria itens que nao ve. */
html[data-menu="recolhido"] .menu { width: 72px; padding-left: 8px; padding-right: 8px; }
html[data-menu="recolhido"] .menu .marca { justify-content: center; padding: 6px 0 var(--f4); }
html[data-menu="recolhido"] .menu .titulo-do-menu,
html[data-menu="recolhido"] .menu .perfil .seta,
html[data-menu="recolhido"] .menu .marca > span,
html[data-menu="recolhido"] .menu a .rotulo,
html[data-menu="recolhido"] .menu a .conta,
html[data-menu="recolhido"] .menu .perfil span,
html[data-menu="recolhido"] .menu .rodape .btn { display: none; }
html[data-menu="recolhido"] .menu .marca .recolher { margin-left: 0; }
html[data-menu="recolhido"] .menu a { justify-content: center; padding: 5px; }
html[data-menu="recolhido"] .menu .perfil { justify-content: center; padding: 6px; }

/* ---------------------------------------------------------------- AS ABAS DA AREA
 *
 * Elas ficam no topo do conteudo, e nao no menu: o menu diz ONDE voce esta, e a aba diz o QUE
 * voce olha dentro dali. Misturar os dois foi o que deixou o menu antigo com dezessete linhas. */
/* A BARRA DE ABAS EM AZUL, pedido dele em 18/08 olhando a tela.
 *
 * O azul e o MESMO do menu lateral (`--menu`), e nao um azul novo: a barra fica encostada nele
 * e dois azuis diferentes lado a lado leem como erro de tinta. Com o degrade a peca ganha
 * profundidade em vez de virar um retangulo chapado. */
/* A BARRA FICA FIXA NO TOPO ao rolar, pedido dele em 18/08: "a ideia e que a barra azul em
 * cima esteja sempre fixa". Com tabela longa, quem rola perde de vista em que aba esta e onde
 * fica o botao da tela -- e volta ao topo so para conferir.
 *
 * `z-index: 5` fica ABAIXO da gaveta e do dialogo, que abrem por cima de tudo, e acima da
 * tabela, que e o unico que passa por baixo dela.
 *
 * `flex-wrap` SAIU: com quebra de linha os botoes desciam para uma segunda fileira e a barra
 * dobrava de altura -- numa peca fixa no topo, isso come a tela. */
.gg-abas {
  /* `top` COM FOLGA, e nao zero: a barra tem cantos redondos e sombra, e colada na borda
     da janela ela parece cortada. Doze pixels e o degrau `--f3` do catalogo. */
  position: sticky; top: var(--f3); z-index: 5;
  /* `flex-wrap` VOLTOU, e a razao mudou. Ele tinha saido para a barra nao dobrar de altura --
     mas depois que titulo, frase e estado entraram nela, a tela de Contatos passou a ter titulo
     + 4 abas + 6 botoes + estado, e a barra CORTAVA o que nao cabia. Entre uma barra de duas
     linhas e uma barra que esconde botao, a de duas linhas e menos pior: ela mostra tudo.

     ISTO E UM REMENDO, e esta escrito como tal: o certo e agrupar os seis botoes de Contatos --
     mesclar, novo campo, salvar segmento, importar, exportar e novo contato nao tem o mesmo
     peso, e cinco cabem atras de um "Mais". Fica para quando ele revisar a area de Operacao. */
  /* 12px abaixo da barra, e nao 16: a barra ja tem sombra propria, que separa sozinha. Os
     quatro pixels sao o que faltava para o perfil caber no notebook dele com zoom. */
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: var(--f3);
  padding: 8px 10px; border-radius: var(--gg-raio-controle, 14px);
  background: linear-gradient(180deg, #1c1f38 0%, var(--menu) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 22px rgba(21, 23, 43, .16);
}
/* TEXTO CLARO SOBRE O AZUL. As cores de aba eram calibradas para fundo branco -- `--muted` sobre
 * navy some, e foi por isso que a paleta clara do menu (`--no-menu`) entrou aqui tambem. */
.gg-abas a {
  flex: none;
  height: var(--alto-aba); display: inline-flex; align-items: center; padding: 0 11px;
  border-radius: var(--gg-raio-item, 12px); border: 1px solid transparent;
  font-size: 13px; color: var(--no-menu-fraco); text-decoration: none;
}
/* `:not([aria-current="true"])` PARA DESEMPATAR: sem isso o hover tem a mesma especificidade da
 * regra da aba ativa e, por vir depois, apagava o destaque dela ao passar o mouse. */
.gg-abas a:hover:not([aria-current="true"]) {
  background: rgba(255, 255, 255, .06); color: #fff;
}
/* O TITULO E A FRASE, na esquerda da barra. `margin-right: auto` empurra tudo que vier depois
 * para a direita -- e e' isso que separa "o que e esta tela" de "o que da para fazer nela". */
/* O TITULO CEDE ESPACO ANTES DE TODO O RESTO. `flex: 0 1 auto` com `max-width` faz a frase
 * encolher e cortar quando a barra aperta -- e e' ela que deve ceder: aba e botao perdidos sao
 * caminho que some, e a frase e' explicacao. Sem o teto, a Equipe quebrava em DUAS LINHAS com um
 * botao so, porque a frase dela tem 46 caracteres. */
/* TITULO E FRASE NA MESMA LINHA, pedido dele em 18/08: "podia estar numa linha so, numa letra
 * um pouquinho maior, pra ser tipo um subtitulo". Em duas linhas a barra ficava com um bloco de
 * texto denso na ponta esquerda; em uma, ela le como uma frase so. */
.gg-abas-titulo {
  display: flex; flex-direction: row; align-items: baseline; gap: var(--f2); min-width: 0;
  /* 170px, e o numero saiu de conta e nao de gosto: na Equipe as pecas somavam 1010,8px num
     espaco de 933 -- faltavam 77,8. Sessenta vieram daqui e trinta do recheio das abas. */
  /* 330px numa linha so, contra 170 quando eram duas empilhadas: o texto agora corre para o
     lado, e o teto anterior cortaria a frase em toda tela. O numero saiu de medir a maior das
     dezenove frases mais o maior dos titulos. */
  flex: 0 1 auto; max-width: 330px;
  /* A MARGEM SAIU e virou recheio a direita: com ela, a Chaves de IA passava do limite por
     3,6px -- as pecas somavam 1192,6 num espaco de 1189 -- e a barra quebrava em duas linhas
     por causa de tres pixels e meio. O `gap` da barra ja separa. */
  padding: 0 var(--f3);
}
/* SEM ABAS, o titulo pode ocupar o que quiser: nao ha o que ele empurre. */
.gg-abas:not(:has(a)) .gg-abas-titulo { max-width: none; }
.gg-abas-titulo b {
  font-size: var(--texto-m); font-weight: 600; color: #fff; letter-spacing: -.2px; flex: none;
}
/* A FRASE DO PRODUTO, quando a barra deixa de nomear a tela. Sem o ponto separador, porque nao
 * ha segunda parte -- e um pouco mais clara que o titulo, porque nao esta anunciando onde voce
 * esta: esta lembrando o que isto e. */
.gg-abas-titulo b.marca-frase {
  font-weight: 500; color: var(--no-menu-fraco); letter-spacing: 0;
}
.gg-abas-titulo b.marca-frase::after { content: none; }

/* O PONTO SEPARA os dois sem pesar. Virgula pediria concordancia com o que vem depois, e trace
 * longo num espaco apertado parece hifen de palavra cortada. */
.gg-abas-titulo b::after { content: " ·"; color: var(--no-menu-fraco); font-weight: 400; }
/* A FRASE CORTA COM RETICENCIAS. Ela e explicacao, e explicacao que empurra a barra para duas
 * linhas custa mais do que ela entrega -- ainda mais numa peca fixa no topo. */
.gg-abas-titulo small {
  font-size: var(--texto-p); color: var(--no-menu-fraco);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* O ESTADO VIRA BOTAO quando ha coisa nao salva -- ideia dele em 18/08. A MESMA PECA muda de
 * papel, e nao duas pecas trocando de lugar: o olho ja sabe onde ela fica.
 *
 * `cursor` e o realce so aparecem no estado de botao. Aviso com cara de botao ensina a clicar em
 * algo que nao faz nada, e isso custa mais confianca do que um clique perdido. */
.gg-abas .barra-de-estado.e-botao {
  cursor: pointer; font-weight: 600;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(112, 88, 232, .45);
}
.gg-abas .barra-de-estado.e-botao:hover { background: var(--roxo-hover) !important; }
.gg-abas .barra-de-estado.e-botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* O PONTO SOME quando e botao: ali ele nao e sinal de estado, e sim sujeira ao lado do rotulo. */
.gg-abas .barra-de-estado.e-botao .ponto { display: none; }

/* O ESTADO, dentro da barra. Empurra tudo o que vem antes para a esquerda. */
.gg-abas .barra-de-estado {
  margin-left: auto; margin-top: 0; position: static; flex: none;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--gg-raio-item);
  padding: 0 var(--f3); height: var(--alto-aba);
  display: flex; align-items: center; gap: var(--f2); font-size: 12px;
}

/* OS BOTOES DA TELA, na ponta direita da barra. */
.gg-abas-acoes { display: flex; gap: var(--f2); flex: none; }
.gg-abas-acoes:empty { display: none; }
/* BOTAO CLARO SOBRE O AZUL. O `.btn` normal e branco com borda cinza -- sobre navy ele vira uma
 * mancha. Aqui fica translucido, e o primario continua roxo cheio. */
.gg-abas-acoes .btn {
  height: var(--alto-aba);
  background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .18); color: #fff;
}
.gg-abas-acoes .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.gg-abas-acoes .btn.principal {
  background: var(--roxo); border-color: var(--roxo);
  box-shadow: 0 2px 10px rgba(112, 88, 232, .45);
}
.gg-abas-acoes .btn.principal:hover:not(:disabled) { background: var(--roxo-hover); }

.gg-abas a[aria-current="true"] {
  /* TRANSLUCIDA, e nao branca. Dentro da barra tudo e' translucido -- o estado, os botoes, o
     hover -- e branco solido sobre navy grita mais alto que tudo em volta. O destaque vem do
     contorno e do peso, que e' o mesmo recurso do "Tudo salvo". */
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .26);
  color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

.menu a {
  display: flex; align-items: center; gap: 12px;
  /* 46px de altura e recheio 8x10 sao os numeros da V3, medidos no CSS dela. O item mais
     alto e o que da ao menu o ar de folga que ele elogiou. */
  min-height: 46px; padding: var(--f2) 10px; border-radius: var(--gg-raio-item, 12px);
  font-size: var(--texto-menu); font-weight: 500; color: var(--no-menu); text-decoration: none;
}
/* A ESPECIFICIDADE AQUI E DE PROPOSITO. `.menu a:hover` empata com a regra generica de link
 * e perde para quem vier depois no arquivo — o item ficaria claro sobre o navy e ilegivel. */
.menu a:hover:not(.aqui) { background: rgba(255, 255, 255, .05); color: #fff; }
.menu a.aqui {
  background: var(--menu-hover); color: #fff;
  box-shadow: inset 3px 0 0 var(--roxo), inset 0 1px 0 rgba(255, 255, 255, .08),
              0 6px 18px rgba(7, 8, 17, .28);
}

/* O ICONE SEM CAIXA — o jeito do Sherlock, pedido dele em 18/08 depois de comparar as duas.
 *
 * Eu tinha posto um chip de 30px atras de cada icone, copiado da V3. Ele olhou o Sherlock e
 * preferiu o contrario: nada atras, e o desenho maior. E faz sentido — com CINCO linhas o chip
 * era relevo que ninguem pedia; ele servia para dar ordem a dezessete.
 *
 * As medidas sao as de la: 22px e traco 1.7. */
.menu a i {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center; font-style: normal;
  color: var(--no-menu-fraco);
}
/* TAMANHO NO ATRIBUTO E NO CSS, cinto e suspensorio: `<svg>` sem largura e' desenhado em
 * 300x150 pelo navegador, e no Sherlock isso deformou um botao inteiro. */
.menu a i svg { width: 22px; height: 22px; display: block; stroke-width: 1.7; }
.menu a:hover:not(.aqui) i { color: #fff; }
/* O ICONE ACENDE NA COR DO ACENTO quando o item esta aberto — e' o que o Sherlock faz, e
 * substitui o chip preenchido que existia aqui. */
.menu a.aqui i { color: #a394ff; }

/* ------------------------------------------------ O PE DA SIDEBAR (item 177, 21/08)
 *
 * O risquinho CURTO separa o trabalho do dia (em cima) de conta e acesso (embaixo):
 * Ajuda · Administracao · Meu perfil · Plataforma. O pe e' COMPACTO — 36px contra os 46
 * das areas de trabalho — porque pe e' acesso, nao o trabalho do dia, e os 40px poupados
 * sao o que deixa o menu caber inteiro sem rolar. */
.menu .pe-da-sidebar {
  border-top: 1px solid rgba(255, 255, 255, .16);
  width: 56px; margin: var(--f2) 10px;
}
/* 34px com recheio proprio: o min-height sozinho perdia para o padding herdado (8px em
 * cima e embaixo) e a linha saia com 38 — medido no navegador, nao imaginado. */
.menu a.no-pe { min-height: 34px; padding-top: 3px; padding-bottom: 3px; }
.menu a.no-pe i svg { width: 19px; height: 19px; }

/* O SELINHO "so operador" da Plataforma — etiqueta, nao porta trancada (quem nao opera nem
 * ve a linha). Vira pilula para nao espremer o rotulo: a primeira prova cortou "Plataforma"
 * em "Plataf…" quando o texto corria solto. */
/* O SELO `.so-quem` SAIU em 23/08 — corte dele, olhando a tela: a linha da Plataforma
 * so' aparece para quem opera, entao o selo dizia a quem ja sabia uma coisa que ja era
 * verdade. E ele espremia o rotulo, cortando o nome da area para 'Plataf...'. */
html[data-menu="recolhido"] .menu .pe-da-sidebar { margin: var(--f3) auto; }

.menu .rodape {
  flex: none; padding-top: var(--f2); display: grid; gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.menu .rodape .titulo-do-menu { margin-top: var(--f2); }
/* A ADMINISTRACAO NO RODAPE ganha subtitulo, como na V3: o nome sozinho nao diz o que ha
 * dentro, e "conta, equipe e plano" evita a visita para descobrir. */
.menu a.com-subtitulo { min-height: 48px; }
.menu a.com-subtitulo .rotulo strong { display: block; font-size: 13px; font-weight: 500; }
.menu a.com-subtitulo .rotulo small {
  display: block; font-size: 10.5px; color: var(--no-menu-fraco); margin-top: 1px;
}
/* A CAPSULA DE PERFIL. Diz quem esta dentro e com que papel — a V1 tinha, e faz falta numa
 * plataforma onde a mesma pessoa entra em contas diferentes. */
.menu .perfil {
  display: flex; align-items: center; gap: 9px; padding: 7px; margin: 2px 0;
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04); color: var(--no-menu);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.menu .perfil:hover { background: rgba(255, 255, 255, .09); }
.menu .perfil[aria-expanded="true"] { background: rgba(255, 255, 255, .12); }

/* O MENU DO PERFIL sobe, e nao desce: ele mora no PE da barra, e um menu que descesse sairia
 * pela borda de baixo da janela. */
/* A CAIXA VIROU UMA LINHA DE DOIS — 23/08. A capsula e' o LINK do perfil (ela ocupa o
 * espaco todo), e a setinha ao lado abre o Sair. Antes a capsula inteira abria o menuzinho,
 * e ele cortou: "nao tem necessidade de aparecer o ImpactaVida so com o item sair". */
.caixa-do-perfil { position: relative; display: flex; align-items: center; gap: var(--f1); }
.caixa-do-perfil .perfil { text-decoration: none; }

.menu .seta-do-perfil {
  flex: none;
  width: var(--alto-p);
  height: var(--alto-p);
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: var(--no-menu-fraco);
  font-size: var(--texto-g);
  line-height: 1;
  cursor: pointer;
}
.menu .seta-do-perfil:hover:not(:disabled) {
  background: rgba(255, 255, 255, .10); color: #fff;
}
.menu .seta-do-perfil[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }

/* RECOLHIDO, so' a capsula fica: a setinha nao cabe ao lado numa barra de 72px, e o Sair
 * continua alcancavel abrindo o menu. */
html[data-menu="recolhido"] .menu .seta-do-perfil { display: none; }
.menu-do-perfil {
  position: absolute; bottom: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  padding: 6px; border-radius: 14px;
  background: var(--menu-hover); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 14px 34px rgba(7, 8, 17, .5);
}
.menu-do-perfil button {
  display: block; width: 100%; text-align: left; height: var(--alto-aba); padding: 0 10px;
  border: 0; background: none; color: var(--no-menu); font: inherit; font-size: 13px;
  border-radius: 10px; cursor: pointer;
}
.menu-do-perfil button:hover:not(:disabled) { background: rgba(255, 255, 255, .10); color: #fff; }
.menu-do-perfil button.sair { color: #ff9b93; }
.menu-do-perfil button.sair:hover:not(:disabled) { background: rgba(180, 71, 82, .28); color: #fff; }
.menu-do-perfil hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .12); margin: 5px 6px; }

/* COM O MENU RECOLHIDO ele nao pode ter a largura da barra de 72px, senao o texto nao cabe. */
html[data-menu="recolhido"] .menu-do-perfil { right: auto; width: 190px; }
.menu .perfil .seta { margin-left: auto; color: var(--no-menu-fraco); font-style: normal; }
/* A EMPRESA EM QUE SE ESTA, acima da capsula do perfil. Mesma anatomia da capsula -- marca,
 * nome e um verso -- porque sao vizinhas e duas anatomias diferentes lado a lado brigam. */
.empresa-atual {
  display: flex; align-items: center; gap: var(--f3);
  padding: var(--f2) 10px; margin-bottom: var(--f2); border-radius: var(--gg-raio-item, 12px);
  min-width: 0;
}
.empresa-atual .marca-da-conta {
  width: 32px; height: 32px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, .10); color: #fff; font-size: var(--texto-p); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.empresa-atual > span:last-child { min-width: 0; display: block; }
.empresa-atual b {
  display: block; font-size: var(--texto-p); color: #fff; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.empresa-atual small { display: block; font-size: var(--texto-pp); color: var(--no-menu-fraco); }
html[data-menu="recolhido"] .empresa-atual { justify-content: center; padding: var(--f2) 0; }
html[data-menu="recolhido"] .empresa-atual > span:last-child { display: none; }

/* A FOTO. `object-fit: cover` porque foto de gente quase nunca e' quadrada, e esticar deforma
 * o rosto -- cortar as bordas e' o mal menor, e e' o que todo mundo faz. */
.menu .perfil .rosto {
  width: 32px; height: 32px; border-radius: 11px; flex: none; object-fit: cover;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30);
}
.menu .perfil .iniciais {
  width: 32px; height: 32px; border-radius: 11px; background: var(--roxo); color: #fff;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 500; flex: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30);
}
.menu .perfil b { display: block; font-size: var(--texto-p); color: #fff; font-weight: 600; }
.menu .perfil small { display: block; font-size: var(--texto-pp); color: var(--no-menu-fraco); }
/* A regra `.menu .rodape .btn { height: 34px }` FOI REMOVIDA em 18/08/2026.
 * Ela existia para marcacao antiga guardada em cache -- e o `index.html` deixou de
 * ser guardado no mesmo dia (`no-store`). Sem cache de HTML, nao ha marcacao antiga. */
.menu .rodape .btn:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: #fff; }

/* A FOLHA: 24px em cima e embaixo, 32px nos lados. Uma folga so, para todas as telas. */
/* 18px em cima e embaixo, e nao 24: a barra do topo ja tem sombra propria e nao precisa de
   tanto ar acima dela. Os 12px que sobram sao o que faz o perfil caber na janela dele. */
/* O padding de cima e o --f6: o banner que abria a folha morreu em 21/08 (pedido dele —
 * o nome da tela saia duas vezes a 60px), e o respiro passou a ser da propria folha. */
.folha { flex: 1; padding: var(--f6) var(--f6) 18px; display: flex; flex-direction: column; gap: var(--f4); }

/* O SIMBOLO DA TELA na barra — o redondo que desceu do banner. 34px, e nao os 54 de la:
 * dentro de uma barra de controle ele e' assinatura, nao cartaz. */
.gg-abas .redondo-da-tela {
  width: 34px; height: 34px; border-radius: 50%; background: var(--roxo);
  display: grid; place-items: center; font-size: 15px; flex: none; color: #fff;
}
.chip { background: rgba(255,255,255,.12); border-radius: 20px; padding: 4px 11px; font-size: 11.5px; }

.bloco {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--raio);
  padding: 18px 22px;
}
/* MARGEM ZERO DENTRO DE COLUNA COM `gap`: a margem SOMA ao gap e dobra o vao. */
.colunas { display: flex; gap: var(--f4); align-items: stretch; }
.colunas > .bloco { flex: 1; margin: 0; }
/* NO CELULAR AS DUAS COLUNAS EMPILHAM: lado a lado em 390 px, "Quem transfere para quem"
   virava uma palavra por linha e cortava (Acerto do mês, revisão de 21/10/2026). */
@media (max-width: 650px) {
  .colunas { flex-direction: column; }
}

.bloco h2 { margin: 0 0 var(--f3); font-size: 13px; display: flex; align-items: center; gap: var(--f2); }
.bloco h2::before { content: ''; width: 3px; height: 14px; background: var(--roxo); border-radius: 2px; }