/* =============================================================================
   PAINEL MACRO — SHELL DA APLICAÇÃO
   Sidebar, cabeçalho, paleta de comandos e os componentes de dados que só
   existem dentro do painel. Depende inteiramente dos tokens de ds.css.
   ============================================================================= */

/* ----------------------------------------------------------------- SHELL --- */
.app {
  display: grid;
  grid-template-columns: var(--lateral-largura) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}
.app[data-lateral="recolhida"] { grid-template-columns: var(--lateral-largura-min) minmax(0, 1fr); }

/* --------------------------------------------------------------- SIDEBAR --- */
.lateral {
  grid-column: 1;
  position: sticky; top: 0;
  height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--sup-0);
  border-right: 1px solid var(--bor-1);
  z-index: var(--z-lateral);
  transition: width var(--dur-2) var(--ease);
}

.lateral-topo {
  display: flex; align-items: center; gap: var(--e-2);
  height: var(--cabecalho-altura);
  padding: 0 var(--e-3);
  flex-shrink: 0;
}
.lateral-marca {
  display: flex; align-items: center; gap: var(--e-2);
  min-width: 0; text-decoration: none; color: var(--txt-1);
  border-radius: var(--r-sm); padding: var(--e-1); margin: calc(var(--e-1) * -1);
}
.lateral-marca img { width: 24px; height: 24px; flex-shrink: 0; }
.lateral-marca span {
  font-size: var(--t-sm); font-weight: var(--peso-forte);
  letter-spacing: -0.015em; white-space: nowrap;
}

.lateral-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--e-2) var(--e-2) var(--e-4); }
.lateral-grupo + .lateral-grupo { margin-top: var(--e-5); }
.lateral-grupo-titulo {
  display: block;
  padding: 0 var(--e-2) var(--e-2);
  font-size: var(--t-3xs); font-weight: var(--peso-medio); color: var(--txt-4);
  text-transform: uppercase; letter-spacing: 0.07em;
  white-space: nowrap;
}

/* Item de navegação. O ativo é marcado por preenchimento + barra à esquerda —
   cor de texto sozinha não sobrevive a um monitor mal calibrado nem a
   daltonismo, e o usuário precisa saber onde está sem procurar. */
.nav-item {
  position: relative;
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%;
  height: 32px; padding: 0 var(--e-2);
  border: 0; background: transparent;
  border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-xs); font-weight: var(--peso-medio);
  color: var(--txt-3);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-item .ico { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item-rotulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--sup-2); color: var(--txt-1); }
.nav-item[aria-current="page"], .nav-item.ativo {
  background: var(--sup-2); color: var(--txt-1);
}
.nav-item[aria-current="page"]::before, .nav-item.ativo::before {
  content: ""; position: absolute; left: calc(var(--e-2) * -1 + 2px); top: 7px; bottom: 7px;
  width: 2px; border-radius: var(--r-full); background: var(--ace);
}
.nav-item-sufixo { flex-shrink: 0; display: inline-flex; align-items: center; color: var(--txt-4); }
.nav-item-sufixo .ico { width: 13px; height: 13px; }

.lateral-rodape { flex-shrink: 0; padding: var(--e-3) var(--e-2); border-top: 1px solid var(--bor-1); }

/* Cartão de plano no rodapé da sidebar: contexto permanente sobre o que a
   pessoa tem, e o caminho de upgrade sem virar banner intrusivo. */
.cartao-plano {
  padding: var(--e-3);
  background: var(--sup-1); border: 1px solid var(--bor-1); border-radius: var(--r-md);
}
.cartao-plano-linha { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.cartao-plano-nome { font-size: var(--t-2xs); font-weight: var(--peso-forte); color: var(--txt-1); }
.cartao-plano-meta { font-size: var(--t-3xs); color: var(--txt-3); margin-top: 2px; }
.barra-uso { height: 3px; background: var(--sup-4); border-radius: var(--r-full); overflow: hidden; margin-top: var(--e-2); }
.barra-uso > i { display: block; height: 100%; background: var(--ace); border-radius: var(--r-full); transition: width var(--dur-3) var(--ease); }

/* Estado recolhido: só ícones, rótulos viram tooltip. */
.app[data-lateral="recolhida"] .lateral-marca span,
.app[data-lateral="recolhida"] .nav-item-rotulo,
.app[data-lateral="recolhida"] .nav-item-sufixo,
.app[data-lateral="recolhida"] .lateral-grupo-titulo,
.app[data-lateral="recolhida"] .cartao-plano { display: none; }
.app[data-lateral="recolhida"] .nav-item { justify-content: center; padding: 0; }
.app[data-lateral="recolhida"] .lateral-topo { justify-content: center; padding: 0; }

/* ------------------------------------------------------------- CABEÇALHO --- */
.conteudo { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }

.cabecalho {
  position: sticky; top: 0; z-index: var(--z-cabecalho);
  display: flex; align-items: center; gap: var(--e-3);
  height: var(--cabecalho-altura);
  padding: 0 var(--e-5);
  background: color-mix(in srgb, var(--sup-0) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bor-1);
}
.cabecalho-titulo { font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--txt-1); letter-spacing: -0.01em; }

/* Gatilho da busca global: parece um input, funciona como botão — o padrão do
   Linear. Mostra o atalho para ensinar sem precisar de onboarding. */
.gatilho-busca {
  display: flex; align-items: center; gap: var(--e-2);
  height: 30px; min-width: 200px; max-width: 320px; flex: 1;
  padding: 0 var(--e-2) 0 var(--e-3);
  background: var(--sup-1); border: 1px solid var(--bor-1); border-radius: var(--r-md);
  color: var(--txt-4); font-family: inherit; font-size: var(--t-2xs);
  cursor: pointer; text-align: left;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.gatilho-busca:hover { border-color: var(--bor-2); background: var(--sup-2); }
.gatilho-busca .ico { width: 14px; height: 14px; flex-shrink: 0; }
.gatilho-busca > span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tecla {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--sup-3); border: 1px solid var(--bor-1); border-radius: 4px;
  font-size: 10px; font-weight: var(--peso-medio); color: var(--txt-3);
  font-family: inherit;
}

.pagina { flex: 1; padding: var(--e-6) var(--e-5) var(--e-16); }
.pagina-larga { max-width: 1600px; width: 100%; margin: 0 auto; }

.pagina-cabecalho {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e-4); flex-wrap: wrap;
  margin-bottom: var(--e-5);
}
/* O bloco de texto cresce e quebra sozinho. Sem isto ele fica no tamanho do
   conteúdo e sobra uma terceira linha com uma palavra solta ("...de cada
   um."), que é o tipo de detalhe que faz a página parecer desalinhada. */
.pagina-cabecalho > :first-child { flex: 1 1 26rem; min-width: 0; }
.pagina-cabecalho > :last-child:not(:first-child) { flex: 0 0 auto; }
.pagina-cabecalho h1 { font-size: var(--t-lg); font-weight: var(--peso-forte); color: var(--txt-1); letter-spacing: -0.02em; }
.pagina-cabecalho p { font-size: var(--t-xs); color: var(--txt-3); margin-top: var(--e-1); max-width: 62ch; line-height: var(--entrelinha-solta); }

/* ------------------------------------------------------- PALETA DE COMANDOS --- */
.paleta-envolucro {
  position: fixed; inset: 0; z-index: var(--z-popover);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh var(--e-4) var(--e-4);
}
.paleta {
  width: 100%; max-width: 620px;
  background: var(--sup-1); border: 1px solid var(--bor-2); border-radius: var(--r-lg);
  box-shadow: var(--sombra-3);
  overflow: hidden;
  display: flex; flex-direction: column; max-height: 68vh;
  animation: ds-subir var(--dur-2) var(--ease) both;
}
.paleta-busca {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-4); border-bottom: 1px solid var(--bor-1); flex-shrink: 0;
}
.paleta-busca .ico { width: 17px; height: 17px; color: var(--txt-4); flex-shrink: 0; }
.paleta-busca input {
  flex: 1; background: none; border: 0; outline: none;
  color: var(--txt-1); font-family: inherit; font-size: var(--t-md); font-weight: var(--peso-normal);
}
.paleta-busca input::placeholder { color: var(--txt-4); }

.paleta-lista { overflow-y: auto; padding: var(--e-2); flex: 1; }
.paleta-grupo-titulo {
  padding: var(--e-2) var(--e-3) var(--e-1);
  font-size: var(--t-3xs); font-weight: var(--peso-medio); color: var(--txt-4);
  text-transform: uppercase; letter-spacing: 0.07em;
}
.paleta-item {
  display: flex; align-items: center; gap: var(--e-3);
  width: 100%; padding: var(--e-2) var(--e-3);
  border: 0; background: transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-xs); color: var(--txt-2);
  text-align: left; cursor: pointer;
}
.paleta-item .ico { width: 15px; height: 15px; color: var(--txt-4); flex-shrink: 0; }
.paleta-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-1); }
.paleta-item-meta { font-size: var(--t-3xs); color: var(--txt-4); flex-shrink: 0; }
.paleta-item[aria-selected="true"] { background: var(--sup-3); color: var(--txt-1); }
.paleta-item[aria-selected="true"] .ico { color: var(--ace); }
.paleta-rodape {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-2) var(--e-4); border-top: 1px solid var(--bor-1);
  font-size: var(--t-3xs); color: var(--txt-4); flex-shrink: 0;
}
.paleta-rodape span { display: inline-flex; align-items: center; gap: var(--e-1); }

/* ------------------------------------------------------------ KPI / CARDS --- */
/* Faixa de KPIs: densidade alta e leitura em varredura horizontal. Divisórias
   em vez de cartões separados — reduz ruído e alinha os números numa grade só. */
.faixa-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  background: var(--sup-1);
  border: 1px solid var(--bor-1);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kpi {
  position: relative;
  padding: var(--e-4);
  border-right: 1px solid var(--bor-1);
  border-bottom: 1px solid var(--bor-1);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
  min-width: 0;
}
.kpi:hover { background: var(--sup-2); }
.kpi-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.kpi-nome {
  font-size: var(--t-3xs); font-weight: var(--peso-medio); color: var(--txt-3);
  text-transform: uppercase; letter-spacing: 0.055em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-spark { width: 56px; height: 20px; flex-shrink: 0; opacity: 0.85; }
.kpi-corpo { margin-top: var(--e-3); min-width: 0; }
/* A unidade nunca quebra linha nem empurra o número: se não couber, ela some
   por reticências — o valor é que não pode ser cortado. */
.kpi-linha-valor { display: flex; align-items: baseline; gap: 0; min-width: 0; }
.kpi-linha-valor .kpi-unidade { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kpi-rodape {
  font-size: var(--t-3xs); color: var(--txt-4); margin-top: var(--e-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Cartão de indicador na grade. */
.cartao-indicador {
  display: flex; flex-direction: column;
  padding: var(--e-4);
  background: var(--sup-1); border: 1px solid var(--bor-1); border-radius: var(--r-lg);
  cursor: pointer; min-width: 0;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cartao-indicador:hover { background: var(--sup-2); border-color: var(--bor-2); }
.cartao-indicador-topo { display: flex; align-items: center; gap: var(--e-2); min-width: 0; }
.cartao-indicador-nome {
  flex: 1; min-width: 0;
  font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--txt-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartao-indicador-valor { display: flex; align-items: baseline; gap: var(--e-2); margin-top: var(--e-3); flex-wrap: wrap; }
.cartao-indicador-spark { height: 34px; margin-top: var(--e-3); }
.cartao-indicador-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-2);
  margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--bor-1);
  font-size: var(--t-3xs); color: var(--txt-4);
}
.cartao-indicador-rodape > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cartão bloqueado: mostra a forma do conteúdo sem entregar o dado. */
.cartao-bloqueado { position: relative; overflow: hidden; }
.cartao-bloqueado > .conteudo-borrado { filter: blur(4px); opacity: 0.4; pointer-events: none; user-select: none; }
.cartao-bloqueado > .cadeado {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  background: color-mix(in srgb, var(--sup-1) 55%, transparent);
}
.cartao-bloqueado .ico { width: 17px; height: 17px; color: var(--txt-3); }
.cartao-bloqueado .cadeado span { font-size: var(--t-3xs); font-weight: var(--peso-medio); color: var(--txt-2); }

/* ------------------------------------------------------------- BARRA FILTRO --- */
.barra-filtro {
  display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap;
  padding: var(--e-3);
  background: var(--sup-1); border: 1px solid var(--bor-1); border-radius: var(--r-lg);
}
.barra-filtro-busca { flex: 1; min-width: 180px; }
.filtros-ativos { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.filtro-pilula {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 24px; padding: 0 var(--e-1) 0 var(--e-2);
  background: var(--ace-fraco); border: 1px solid var(--ace-borda); border-radius: var(--r-sm);
  font-size: var(--t-3xs); font-weight: var(--peso-medio); color: var(--ace-txt);
}
.filtro-pilula button {
  display: grid; place-items: center;
  width: 15px; height: 15px; border: 0; background: none; border-radius: 3px;
  color: var(--ace-txt); cursor: pointer;
}
.filtro-pilula button:hover { background: var(--ace-borda); }
.filtro-pilula .ico { width: 11px; height: 11px; }

/* --------------------------------------------------------------- GRÁFICO --- */
.painel-grafico { position: relative; background: var(--sup-0); border: 1px solid var(--bor-1); border-radius: var(--r-md); padding: var(--e-3); }
.grafico-alto { height: 320px; }
.grafico-medio { height: 240px; }
.grafico-barra-ferramentas { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; margin-bottom: var(--e-3); }
.legenda-serie { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; }
.legenda-item { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-2xs); color: var(--txt-2); }
.legenda-marca { width: 9px; height: 2.5px; border-radius: var(--r-full); flex-shrink: 0; }

/* ------------------------------------------------------------------- IA --- */
/* min-height: 0 em TODA a cadeia até a área rolável — sem isso o layout quebra.
   Item de flex e de grid nasce com min-height:auto, que o impede de encolher
   abaixo do próprio conteúdo. Resultado: em vez de #ia-mensagens rolar, ele
   crescia até caber a conversa inteira (medido: 1333px dentro de um shell de
   542px) e empurrava o campo de digitar 800px para fora da tela — a pessoa
   lia a resposta e não tinha como fazer a próxima pergunta.
   `max()` no lugar de min-height + height: dá piso e teto numa propriedade só,
   sem as duas brigarem em janela baixa. */
.ia-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  /* Desconta TODO o chrome acima e abaixo: cabeçalho fixo (--cabecalho-altura)
     + respiro superior da página (--e-6) + respiro inferior (--e-16). Antes o
     cálculo esquecia os respiros e sobravam 40px de rolagem da página inteira
     por baixo de um painel que já tem rolagem própria — duas rolagens
     concorrentes na mesma tela. */
  height: max(22rem, calc(100vh - var(--cabecalho-altura) - var(--e-6) - var(--e-16)));
  /* dvh desconta a barra do navegador do celular, que aparece e some conforme
     a rolagem; a linha de vh acima fica de reserva para quem nao conhece a
     unidade. */
  height: max(22rem, calc(100dvh - var(--cabecalho-altura) - var(--e-6) - var(--e-16)));
  min-height: 0;
}
.ia-lateral { display: flex; flex-direction: column; border-right: 1px solid var(--bor-1); min-width: 0; min-height: 0; }
.ia-conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ia-mensagens { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--e-6) var(--e-5); min-height: 0; }

.ia-turno { max-width: 46rem; margin: 0 auto var(--e-6); }
.ia-pergunta {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--txt-1);
  line-height: var(--entrelinha-solta);
}
.ia-avatar {
  width: 24px; height: 24px; border-radius: var(--r-sm); flex-shrink: 0;
  display: grid; place-items: center;
  font-size: var(--t-3xs); font-weight: var(--peso-forte);
  background: var(--sup-3); color: var(--txt-2); border: 1px solid var(--bor-1);
}
.ia-avatar-bot { background: var(--ace-fraco); color: var(--ace-txt); border-color: var(--ace-borda); }
.ia-resposta { margin-top: var(--e-4); font-size: var(--t-sm); color: var(--txt-2); line-height: var(--entrelinha-solta); }
.ia-resposta p + p { margin-top: var(--e-3); }
.ia-resposta strong { color: var(--txt-1); font-weight: var(--peso-forte); }
.ia-resposta table { width: 100%; margin: var(--e-4) 0; font-size: var(--t-xs); }

.ia-fontes { margin-top: var(--e-4); padding-top: var(--e-3); border-top: 1px solid var(--bor-1); }
.ia-fonte-chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 24px; padding: 0 var(--e-2);
  background: var(--sup-2); border: 1px solid var(--bor-1); border-radius: var(--r-sm);
  font-size: var(--t-3xs); color: var(--txt-2);
}
.ia-acoes { display: flex; align-items: center; gap: var(--e-1); margin-top: var(--e-3); opacity: 0; transition: opacity var(--dur-1) var(--ease); }
.ia-turno:hover .ia-acoes, .ia-acoes:focus-within { opacity: 1; }

/* "Pensando": três pontos com defasagem. Comunica trabalho em curso sem
   spinner girando, que sugere travamento quando demora. */
@keyframes ds-pulsar { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } }
.ia-pensando { display: inline-flex; align-items: center; gap: 5px; }
.ia-pensando i { width: 5px; height: 5px; border-radius: var(--r-full); background: var(--ace); animation: ds-pulsar 1.3s ease-in-out infinite; }
.ia-pensando i:nth-child(2) { animation-delay: 0.16s; }
.ia-pensando i:nth-child(3) { animation-delay: 0.32s; }

.ia-composicao { border-top: 1px solid var(--bor-1); padding: var(--e-3) var(--e-5) var(--e-4); }
.ia-caixa {
  display: flex; align-items: flex-end; gap: var(--e-2);
  background: var(--sup-0); border: 1px solid var(--bor-1); border-radius: var(--r-md);
  padding: var(--e-2);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.ia-caixa:focus-within { border-color: var(--ace); box-shadow: var(--sombra-foco); }
.ia-caixa textarea {
  flex: 1; background: none; border: 0; outline: none; resize: none;
  color: var(--txt-1); font-family: inherit; font-size: var(--t-sm);
  line-height: var(--entrelinha-padrao); padding: var(--e-2); max-height: 160px;
}
.ia-caixa textarea::placeholder { color: var(--txt-4); }

.ia-item-conversa {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; padding: var(--e-2); border: 0; background: transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-2xs); color: var(--txt-3);
  text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ia-item-conversa .ico { width: 14px; height: 14px; color: var(--txt-4); }
.ia-item-conversa:hover { background: var(--sup-2); color: var(--txt-1); }
.ia-item-conversa:hover .ico { color: var(--txt-2); }
.ia-item-conversa.ativo { background: var(--sup-2); color: var(--txt-1); }
.ia-item-conversa > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------- PAYWALL --- */
.paywall {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: var(--e-3);
  padding: var(--e-16) var(--e-6);
  background: var(--sup-1); border: 1px solid var(--bor-1); border-radius: var(--r-lg);
}
.paywall-selo {
  display: inline-flex; align-items: center; gap: var(--e-2);
  height: 24px; padding: 0 var(--e-3);
  background: var(--ace-fraco); border: 1px solid var(--ace-borda); border-radius: var(--r-full);
  font-size: var(--t-3xs); font-weight: var(--peso-medio); color: var(--ace-txt);
}
.paywall h3 { font-size: var(--t-md); font-weight: var(--peso-forte); color: var(--txt-1); }
.paywall p { font-size: var(--t-xs); color: var(--txt-3); max-width: 34rem; line-height: var(--entrelinha-solta); }

/* --------------------------------------------------------- RESPONSIVIDADE --- */
/* Abaixo de 1024px a sidebar sai do fluxo e vira drawer — não encolhe. Uma
   sidebar espremida em 180px é pior que menu nenhum. */
@media (max-width: 1023px) {
  /* A sidebar fechada fica em translateX(-100%), fora da tela; quem impede a
     rolagem horizontal que isso geraria é o overflow-x:clip no html, definido
     uma vez em ds.css. */
  .app, .app[data-lateral="recolhida"] { grid-template-columns: minmax(0, 1fr); }
  .lateral {
    position: fixed; inset: 0 auto 0 0;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    transition: transform var(--dur-3) var(--ease);
    box-shadow: var(--sombra-3);
    background: var(--sup-1);
  }
  .app[data-drawer="aberto"] .lateral { transform: none; }
  .conteudo { grid-column: 1; }
  .drawer-fundo {
    position: fixed; inset: 0; z-index: calc(var(--z-lateral) - 1);
    background: rgba(4, 7, 14, 0.6); backdrop-filter: blur(2px);
    animation: ds-fade var(--dur-2) var(--ease) both;
  }
  .pagina { padding: var(--e-5) var(--e-4) var(--e-12); }
  .cabecalho { padding: 0 var(--e-4); }
  /* height:auto aqui reabria o mesmo bug do desktop: sem teto, a conversa
     crescia ate caber inteira (medido: 1686px numa tela de 720px) e levava o
     campo de digitar junto, mil pixels abaixo da dobra. So mudam os respiros,
     que no celular sao menores -- o teto continua existindo. */
  .ia-shell {
    grid-template-columns: minmax(0, 1fr);
    height: max(22rem, calc(100vh - var(--cabecalho-altura) - var(--e-5) - var(--e-12)));
    height: max(22rem, calc(100dvh - var(--cabecalho-altura) - var(--e-5) - var(--e-12)));
  }
  .ia-lateral {
    position: fixed; inset: 0 auto 0 0; z-index: var(--z-modal);
    width: min(84vw, 300px); background: var(--sup-1);
    transform: translateX(-100%); transition: transform var(--dur-3) var(--ease);
    box-shadow: var(--sombra-3);
  }
  .ia-shell[data-menu="aberto"] .ia-lateral { transform: none; }
  .ia-mensagens { padding: var(--e-4) var(--e-4); }
}

@media (max-width: 639px) {
  /* Em 375px o cabeçalho somava 3px a mais que a tela e a página inteira
     ganhava rolagem horizontal — o campo de busca tem min-width de 200px, que
     não cabe ao lado de três botões de 32px. No celular ele vira só o ícone:
     a busca continua a um toque de distância, sem custar largura. */
  .cabecalho { gap: var(--e-1); padding: 0 var(--e-3); }
  .gatilho-busca {
    flex: 0 0 32px; min-width: 0; width: 32px; padding: 0; justify-content: center;
  }
  .gatilho-busca > span, .gatilho-busca .tecla { display: none; }

  .faixa-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-cabecalho h1 { font-size: var(--t-md); }
  #ds-toasts { left: var(--e-3); right: var(--e-3); bottom: var(--e-3); }
  .toast { min-width: 0; max-width: none; }
}

/* =============================================================================
   PASSADA DE ARTE — PAINEL
   Regra que guia tudo abaixo: aqui não é a landing. Landing vende, painel é
   ferramenta de trabalho. Cada pixel gasto em decoração é pixel roubado de
   dado, e cada linha de chrome fixo é imposta ao usuário em TODA visita.
   O refinamento aqui é: mais densidade, menos ruído, hierarquia mais nítida.
   ============================================================================= */

/* ------------------------------------------------------------ MARCA --- */
/* O topo do sidebar é o momento de marca. Ganha um respiro próprio e um fio
   que o separa da navegação, em vez de flutuar solto acima da lista. */
.lateral-topo {
  border-bottom: 1px solid var(--bor-1);
  gap: var(--e-3);
}
.lateral-marca img {
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
}
.lateral-marca span { letter-spacing: -0.022em; }

/* ------------------------------------------------------- GRUPOS E ITENS --- */
/* Grupos com peso desigual: o primeiro cola no topo, os seguintes ganham ar.
   Uniformidade absoluta lê como lista; variação lê como agrupamento. */
.lateral-grupo + .lateral-grupo { margin-top: var(--e-6); }
.lateral-grupo-titulo { padding-bottom: var(--e-1); }

/* O item ativo ganha a barra E um leve peso tipográfico. Cor sozinha não
   sobrevive a monitor mal calibrado nem a daltonismo. */
.nav-item[aria-current="page"], .nav-item.ativo { font-weight: var(--peso-forte); }
.nav-item[aria-current="page"] .ico, .nav-item.ativo .ico { color: var(--ace); }

/* Contador ao lado do item (nº de indicadores, de alertas). Tabular para não
   dançar quando o número muda. */
.nav-badge {
  font-size: 10px; font-weight: var(--peso-medio);
  color: var(--txt-4); font-variant-numeric: tabular-nums;
  background: var(--sup-2); border: 1px solid var(--bor-1);
  border-radius: var(--r-sm); padding: 1px 5px; line-height: 1.4;
}
.nav-item[aria-current="page"] .nav-badge { color: var(--ace-txt); border-color: var(--ace-borda); background: var(--ace-fraco); }

/* ---------------------------------------------------------- FAVORITOS --- */
/* Lista curta de indicadores fixados. Numa ferramenta que a pessoa abre todo
   dia, o caminho para "os meus 5" não pode passar por busca. */
.fav-item {
  display: flex; align-items: center; gap: var(--e-2);
  width: 100%; height: 28px; padding: 0 var(--e-2);
  border: 0; background: transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-2xs); color: var(--txt-3);
  text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.fav-item:hover { background: var(--sup-2); color: var(--txt-1); }
.fav-item-nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* O valor fica à direita, tabular: a lista vira um mini-painel, não só atalhos. */
.fav-item-valor { font-size: var(--t-3xs); color: var(--txt-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fav-item:hover .fav-item-valor { color: var(--txt-2); }
.fav-vazio { font-size: var(--t-3xs); color: var(--txt-4); padding: var(--e-1) var(--e-2); line-height: 1.5; }

/* Estrela de favoritar — discreta até ser útil. */
.btn-favorito { color: var(--txt-4); }
.btn-favorito:hover { color: var(--aviso); }
.btn-favorito[aria-pressed="true"] { color: var(--aviso); }
.btn-favorito[aria-pressed="true"] .ico { fill: currentColor; }

/* Recolhido: favoritos e badges somem junto com os rótulos. */
.app[data-lateral="recolhida"] .lateral-favoritos,
.app[data-lateral="recolhida"] .nav-badge { display: none; }

/* ------------------------------------------------------------ DENSIDADE --- */
/* Cabeçalho de página compacto. O texto explicativo que existia aqui era lido
   uma vez e ocupava duas linhas para sempre — foi para o lugar certo (tooltip
   e estados vazios), e o espaço voltou para os dados. */
.pagina-cabecalho { margin-bottom: var(--e-4); align-items: baseline; }
.pagina-cabecalho h1 { font-size: var(--t-lg); letter-spacing: -0.025em; }

/* Barra de seção: título e meta na mesma linha, com um fio ligando os dois.
   Substitui o par título+parágrafo que empurrava o conteúdo para baixo. */
.barra-secao {
  display: flex; align-items: center; gap: var(--e-3);
  margin-bottom: var(--e-3);
}
.barra-secao h2 {
  font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--txt-1);
  letter-spacing: -0.01em; white-space: nowrap;
}
.barra-secao::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--bor-1), transparent);
}
.barra-secao > .meta { font-size: var(--t-3xs); color: var(--txt-4); white-space: nowrap; flex-shrink: 0; }

/* Filtros de categoria numa faixa só, rolável — duas fileiras quebradas
   deslocavam todo o conteúdo abaixo a cada mudança de largura. */
.faixa-chips {
  display: flex; gap: var(--e-2); overflow-x: auto;
  padding-bottom: var(--e-2); scrollbar-width: none;
  /* Esmaece na borda direita para sinalizar que há mais. */
  mask-image: linear-gradient(to right, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
}
.faixa-chips::-webkit-scrollbar { display: none; }
.faixa-chips > * { flex-shrink: 0; }

/* --------------------------------------------------------- KPI REFINADO --- */
/* O sparkline sai do canto e passa a ocupar a base da célula, encostado nas
   bordas: vira o "chão" do número em vez de um enfeite solto no topo. */
.faixa-kpi { position: relative; }
.kpi { padding-bottom: var(--e-6); overflow: hidden; }
.kpi-spark-base {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 30px; opacity: 0.5;
  transition: opacity var(--dur-2) var(--ease);
  pointer-events: none;
}
.kpi:hover .kpi-spark-base { opacity: 0.9; }
.kpi-rodape { position: relative; z-index: 1; }

/* Indicador de foco por teclado no KPI (é um role="button"). */
.kpi:focus-visible { outline: 2px solid var(--ace); outline-offset: -2px; border-radius: var(--r-sm); }

/* Em telas estreitas a unidade não cabe ao lado do número e virava "número…",
   que lê como texto quebrado. Ela desce para a linha de baixo: o número
   continua íntegro (é o dado) e a unidade fica legível por inteiro. */
@media (max-width: 639px) {
  .kpi-linha-valor { display: block; }
  .kpi-linha-valor .kpi-unidade {
    display: block; margin-left: 0; margin-top: 2px;
    width: 100%; white-space: normal;
  }
}

/* ------------------------------------------------ ESTADO INICIAL DA IA --- */
/* Composição editorial em vez de "ícone + pergunta genérica centralizada".
   Alinhado à esquerda: é uma ferramenta de trabalho, e texto centralizado em
   bloco longo é mais difícil de ler (o olho perde o início de cada linha). */
.ia-inicial {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vh, 3.5rem) 0;
}
.ia-inicial-titulo {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: var(--peso-max);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--txt-1);
  margin: var(--e-4) 0 var(--e-3);
}

/* Barra de contexto: declara o que o assistente enxerga. É a resposta visual
   para "ele vai inventar?" — e é o mesmo compromisso que a landing promete. */
.ia-contexto-barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2);
  margin-top: var(--e-5);
  padding: var(--e-3) var(--e-4);
  background: var(--sup-0);
  border: 1px solid var(--bor-1);
  border-radius: var(--r-md);
  font-size: var(--t-3xs); color: var(--txt-3);
}
.ia-contexto-barra:empty { display: none; }
.ia-contexto-dado { display: inline-flex; align-items: center; gap: var(--e-1); white-space: nowrap; }
.ia-contexto-dado strong {
  color: var(--txt-1); font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
}
.ia-contexto-sep { color: var(--txt-4); }

/* Sugestões: alvos com estado, não cartões decorativos. A seta aparece no
   hover — sinaliza "isto vai virar uma pergunta" sem poluir o repouso. */
.ia-sugestoes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e-2); margin-top: var(--e-5);
}
.btn-sugestao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  background: var(--sup-1); border: 1px solid var(--bor-1); border-radius: var(--r-md);
  font-family: inherit; font-size: var(--t-xs); color: var(--txt-2);
  text-align: left; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.btn-sugestao::after {
  content: "↵";
  color: var(--txt-4); font-size: var(--t-2xs);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn-sugestao:hover {
  background: var(--sup-2); border-color: var(--ace-borda); color: var(--txt-1);
}
.btn-sugestao:hover::after { opacity: 1; transform: none; }