/* A moldura permanente da aplicação — EF-07 §2.1, vestida pelo desenho
 * Figma 45:13 (dono, 20/08/2026).
 *
 * Sempre visível, em qualquer tela: a lateral escura com a navegação, a busca
 * global, o nome da organização, o menu da pessoa e — quando existir — a faixa
 * de aviso global. Nada mais é permanente. A lateral escura é paleta própria
 * desta moldura (tokens `--lateral-*`); as telas continuam no tema claro. */

.casca {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* A faixa global ocupa a largura inteira, acima de tudo. */
.casca__faixa-global {
  flex: none;
}

.casca__corpo {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

/* ---- Lateral ---- */

.lateral {
  position: relative;
  flex: none;
  width: var(--largura-lateral);
  background: var(--lateral-fundo);
  color: var(--lateral-texto);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4) var(--espaco-lateral);
  transition: width var(--transicao-painel);
}

/* A textura do desenho, por cima do fundo e por baixo de tudo. */
.lateral::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--lateral-textura);
  background-size: cover;
  background-position: center;
  opacity: var(--opacidade-lateral-textura);
  pointer-events: none;
}

.lateral > * {
  position: relative;
}

/* Recolhida: 64 px, só ícones, com rótulo ao pousar. Escolha da pessoa,
 * lembrada no navegador (EF-07 §2.1). */
.casca[data-lateral="recolhida"] .lateral {
  width: var(--largura-lateral-recolhida);
}

/* As duas listas abaixo foram REESCRITAS INTEIRAS em 21/08/2026, quando o
 * atalho de busca saiu da lateral. Tirar uma linha do meio de uma lista
 * separada por vírgula é como o CSS quebra em silêncio: sobra vírgula, o
 * navegador descarta a regra toda e nada acusa. */
.casca[data-lateral="recolhida"] .lateral__rotulo,
.casca[data-lateral="recolhida"] .lateral__grupo-titulo,
.casca[data-lateral="recolhida"] .pendencias,
.casca[data-lateral="recolhida"] .navegacao__selo,
.casca[data-lateral="recolhida"] .navegacao__contador,
.casca[data-lateral="recolhida"] .organizacao__nome {
  display: none;
}

.casca[data-lateral="recolhida"] .navegacao__item,
.casca[data-lateral="recolhida"] .organizacao {
  justify-content: center;
}

/* ---- Identidade da organização (EF-07 §2.2) ----
 * NOME EM TEXTO e a inicial dele num quadrado — nunca logotipo de conta.
 * O desenho traz um trocador com chevron; sem mecanismo de troca construído,
 * o bloco é estático. */
.organizacao {
  display: flex;
  align-items: center;
  gap: var(--espaco-lateral);
  padding: var(--espaco-lateral);
  background: var(--lateral-bloco);
  border-radius: var(--raio-lateral-bloco);
}

.organizacao__inicial {
  flex: none;
  width: var(--tamanho-inicial-org);
  height: var(--tamanho-inicial-org);
  display: grid;
  place-items: center;
  background: var(--lateral-item-ativo);
  color: var(--lateral-texto-ativo);
  font-size: var(--tamanho-lateral-item);
  font-weight: var(--peso-forte);
  border-radius: var(--raio);
}

.organizacao__nome {
  font-size: var(--tamanho-lateral-nome-org);
  font-weight: var(--peso-forte);
  color: var(--lateral-texto-ativo);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Ícones da lateral ----
 * Os SVGs do Figma 45:13, servidos por /imagens e usados como máscara: a forma
 * é a do arquivo (nunca redesenhada), a cor é a do texto do item — assim o
 * mesmo arquivo serve ao estado normal, ativo e apagado. */
.icone-lateral {
  flex: none;
  width: var(--tamanho-icone-lateral);
  height: var(--tamanho-icone-lateral);
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
}

.icone-lateral--trocador { -webkit-mask-image: url("/imagens/icone-lateral-trocador.svg"); mask-image: url("/imagens/icone-lateral-trocador.svg"); }
.icone-lateral--busca { -webkit-mask-image: url("/imagens/icone-lateral-busca.svg"); mask-image: url("/imagens/icone-lateral-busca.svg"); }
.icone-lateral--hoje { -webkit-mask-image: url("/imagens/icone-lateral-hoje.svg"); mask-image: url("/imagens/icone-lateral-hoje.svg"); }
.icone-lateral--painel { -webkit-mask-image: url("/imagens/icone-lateral-painel.svg"); mask-image: url("/imagens/icone-lateral-painel.svg"); }
.icone-lateral--aquisicao { -webkit-mask-image: url("/imagens/icone-lateral-aquisicao.svg"); mask-image: url("/imagens/icone-lateral-aquisicao.svg"); }
.icone-lateral--conversoes-enviadas { -webkit-mask-image: url("/imagens/icone-lateral-conversoes-enviadas.svg"); mask-image: url("/imagens/icone-lateral-conversoes-enviadas.svg"); }
.icone-lateral--importar { -webkit-mask-image: url("/imagens/icone-lateral-importar.svg"); mask-image: url("/imagens/icone-lateral-importar.svg"); }
.icone-lateral--duplicados { -webkit-mask-image: url("/imagens/icone-lateral-duplicados.svg"); mask-image: url("/imagens/icone-lateral-duplicados.svg"); }
.icone-lateral--funil { -webkit-mask-image: url("/imagens/icone-lateral-funil.svg"); mask-image: url("/imagens/icone-lateral-funil.svg"); }
.icone-lateral--leads { -webkit-mask-image: url("/imagens/icone-lateral-leads.svg"); mask-image: url("/imagens/icone-lateral-leads.svg"); }
.icone-lateral--contatos { -webkit-mask-image: url("/imagens/icone-lateral-contatos.svg"); mask-image: url("/imagens/icone-lateral-contatos.svg"); }
.icone-lateral--conversas { -webkit-mask-image: url("/imagens/icone-lateral-conversas.svg"); mask-image: url("/imagens/icone-lateral-conversas.svg"); }
.icone-lateral--tarefas { -webkit-mask-image: url("/imagens/icone-lateral-tarefas.svg"); mask-image: url("/imagens/icone-lateral-tarefas.svg"); }
.icone-lateral--atribuicao { -webkit-mask-image: url("/imagens/icone-lateral-atribuicao.svg"); mask-image: url("/imagens/icone-lateral-atribuicao.svg"); }
.icone-lateral--investimento { -webkit-mask-image: url("/imagens/icone-lateral-investimento.svg"); mask-image: url("/imagens/icone-lateral-investimento.svg"); }
/* Sem esta linha o item de Metas não fica invisível: ele vira um QUADRADO
   CHEIO. `.icone-lateral` pinta `background: currentColor` e conta com a
   máscara para recortar o desenho — sem `mask-image` não há recorte, e o fundo
   aparece inteiro. O caso "todo ícone declarado existe em /imagens" confere o
   ARQUIVO e nunca lê este arquivo de estilo, então regra faltando passa verde. */
.icone-lateral--metas { -webkit-mask-image: url("/imagens/icone-lateral-metas.svg"); mask-image: url("/imagens/icone-lateral-metas.svg"); }
.icone-lateral--automacoes { -webkit-mask-image: url("/imagens/icone-lateral-automacoes.svg"); mask-image: url("/imagens/icone-lateral-automacoes.svg"); }
.icone-lateral--saude-da-conta { -webkit-mask-image: url("/imagens/icone-lateral-saude-da-conta.svg"); mask-image: url("/imagens/icone-lateral-saude-da-conta.svg"); }
.icone-lateral--configuracao { -webkit-mask-image: url("/imagens/icone-lateral-configuracao.svg"); mask-image: url("/imagens/icone-lateral-configuracao.svg"); }
.icone-lateral--conexoes { -webkit-mask-image: url("/imagens/icone-lateral-conexoes.svg"); mask-image: url("/imagens/icone-lateral-conexoes.svg"); }
.icone-lateral--assinatura { -webkit-mask-image: url("/imagens/icone-lateral-assinatura.svg"); mask-image: url("/imagens/icone-lateral-assinatura.svg"); }
.icone-lateral--notificacoes { -webkit-mask-image: url("/imagens/icone-lateral-notificacoes.svg"); mask-image: url("/imagens/icone-lateral-notificacoes.svg"); }
.icone-lateral--ajuda { -webkit-mask-image: url("/imagens/icone-lateral-ajuda.svg"); mask-image: url("/imagens/icone-lateral-ajuda.svg"); }

/* ---- Itens de navegação ---- */

.navegacao {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}

.lateral__grupo-titulo {
  padding: var(--e-3) var(--espaco-lateral) var(--e-1);
  font-size: var(--tamanho-lateral-grupo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espacamento-lateral-grupo);
  text-transform: uppercase;
  color: var(--lateral-texto-fraco);
}

.navegacao__item {
  display: flex;
  align-items: center;
  gap: var(--espaco-lateral);
  padding: var(--espaco-lateral-item) var(--espaco-lateral);
  border-radius: var(--raio-lateral-item);
  color: var(--lateral-texto);
  font-size: var(--tamanho-lateral-item);
  text-decoration: none;
}

@media (pointer: coarse) {
  .navegacao__item {
    min-height: var(--altura-controle-toque);
  }
}

a.navegacao__item:hover {
  background: var(--lateral-bloco-suave);
  color: var(--lateral-texto-ativo);
}

.navegacao__item[aria-current="page"] {
  background: var(--lateral-item-ativo);
  color: var(--lateral-texto-ativo);
  font-weight: var(--peso-forte);
}

/* Apagado: área de fase futura, visível como mapa e nunca clicável (P-8
 * resolvida pelo desenho). O selo fica legível; ícone e rótulo se apagam. */
.navegacao__item--apagado .icone-lateral,
.navegacao__item--apagado .lateral__rotulo {
  opacity: var(--opacidade-lateral-apagado);
}

.navegacao__selo {
  margin-left: auto;
  padding: var(--espaco-selo-v) var(--espaco-selo-h);
  border-radius: var(--raio-lateral-bloco);
  background: var(--lateral-selo-fase);
  color: var(--lateral-texto-fraco);
  font-size: var(--tamanho-lateral-selo);
  font-weight: var(--peso-forte);
  white-space: nowrap;
}

.navegacao__selo--hoje {
  background: var(--lateral-realce);
  color: var(--lateral-texto-ativo);
}

.navegacao__contador {
  margin-left: auto;
  padding: var(--espaco-selo-v) var(--espaco-selo-h);
  border-radius: var(--raio-lateral-bloco);
  background: var(--lateral-realce);
  color: var(--lateral-texto-ativo);
  font-size: var(--tamanho-lateral-grupo);
  font-weight: var(--peso-forte);
}

/* Contador e selo juntos: só o primeiro empurra para a direita. */
.navegacao__contador + .navegacao__selo {
  margin-left: var(--e-1);
}

/* O texto de apoio da lateral escura (pendências) lê nos tons da moldura. */
.lateral .legenda,
.lateral .rotulo-caixa-alta {
  color: var(--lateral-texto-fraco);
}

/* Pendências do assistente inicial. Some inteira quando não há pendência —
 * nunca fica um bloco "0 pendências" (CA-T1-5). */
.pendencias {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--lateral-divisor);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

/* ---- Rodapé da lateral: divisor, notificações, ajuda e o recolher ----
 * A pessoa saiu daqui em 21/08/2026: ela mora no menu do topo (EF-07 §2.1). */

.lateral__rodape {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--lateral-divisor);
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

/* Quando as pendências existem, quem empurra para baixo são elas. */
.pendencias + .lateral__rodape {
  margin-top: 0;
}

.lateral__recolher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--altura-controle);
  border: 1px solid var(--lateral-divisor);
  border-radius: var(--raio-lateral-item);
  background: none;
  color: var(--lateral-texto-fraco);
  font: inherit;
  font-size: var(--tamanho-lateral-busca);
  cursor: pointer;
}

.lateral__recolher:hover {
  background: var(--lateral-bloco-suave);
  color: var(--lateral-texto);
}

/* ---- Painel principal ---- */

.principal {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topo {
  flex: none;
  height: var(--altura-topo);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: 0 var(--e-4);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

/* Busca do topo: 360 px de fundo raso, sem moldura (Figma 45:13). */
.topo__busca {
  flex: 0 1 var(--largura-busca-topo);
  min-width: 0;
}

.topo .busca {
  background: var(--cor-fundo-base);
  border: none;
  max-width: none;
  color: var(--cor-texto-fraco);
}

.topo .busca__campo {
  font-size: var(--tamanho-busca-topo);
}

.topo .busca__campo::placeholder {
  color: var(--cor-texto-fraco);
}

.topo__direita {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.topo__avatar {
  flex: none;
  width: var(--tamanho-avatar-topo);
  height: var(--tamanho-avatar-topo);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cor-acao-fraca);
  color: var(--cor-acao);
  font-size: var(--tamanho-busca-topo);
  font-weight: var(--peso-forte);
}

.cabecalho-de-tela {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  padding: var(--e-3) var(--e-4);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho-de-tela__titulo {
  flex: none;
}

.cabecalho-de-tela__filtros {
  flex: 1 1 auto;
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.cabecalho-de-tela__acao {
  flex: none;
  margin-left: auto;
}

.conteudo {
  flex: 1 1 auto;
  padding: var(--e-6) var(--e-4);
  min-width: 0;
}

/* Menu sobreposto abaixo de 1.024 px (EF-07 §2.1). */
.casca__abrir-lateral {
  display: none;
}

@media (max-width: 1023px) {
  .casca__abrir-lateral {
    display: inline-flex;
  }

  .lateral {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 3;
    box-shadow: var(--sombra-flutuante);
    transform: translateX(-100%);
    transition: transform var(--transicao-painel);
  }

  .casca[data-lateral-sobreposta="aberta"] .lateral {
    transform: translateX(0);
  }

  .casca[data-lateral-sobreposta="aberta"] .casca__cortina {
    position: fixed;
    inset: 0;
    z-index: 2;
    background: var(--cor-cortina);
    border: none;
  }

  .lateral__recolher {
    display: none;
  }
}

/* Formulário e assistente: 640 px centrados (EF-07 §1.4). */
.coluna-de-formulario {
  width: 100%;
  max-width: var(--largura-formulario);
  margin: 0 auto;
  padding: var(--e-8) var(--e-4);
}

/* Tela sem a moldura permanente (cadastro, confirmação): fundo da aplicação,
 * sem lateral. */
.pagina-publica {
  min-height: 100vh;
  background: var(--cor-fundo-base);
}