/*
  Estilo da UI do agente.

  ---------------------------------------------------------------------------
  AS REGRAS, E A ULTIMA NASCEU DE UM "MEIO MEDIOCRE"
  ---------------------------------------------------------------------------
  1. BLOQUEIO E AVISO NAO PODEM PARECER DECORACAO. A tela que mais importa deste
     sistema e' a que diz "este ciclo nao pode fechar, e por isto".

  2. TEXTO LONGO NAO E' INFORMACAO SE NINGUEM LE'. O numero que decide e o
     paragrafo que explica nao podem ter o mesmo peso.

  3. [01/09, manha] HIERARQUIA: escala tipografica de verdade, ritmo de espaco em
     multiplos de 4, e o NUMERO como ancora de cada tela.

  4. [01/09, noite] ⛔ HIERARQUIA SOZINHA NAO E' DESENHO.
     *"achei seu trabalho meio mediocre, nao deixou mais bonito nao e nem
     concertou isso do site ficar a esquerda da tela"*.

     As duas criticas estavam certas, e a segunda mais que a primeira:

     - **o conteudo grudava a' esquerda**. `main` tinha `max-width: 1240px` e
       NAO tinha `margin: 0 auto`. No monitor dele sobravam ~660px de vazio a'
       direita. Erro bobo, visivel na primeira olhada, e eu passei a manha
       inteira ajustando tipografia sem ver.

     - **e nao ficou mais bonito**, porque eu reorganizei o mesmo cinza. Tudo
       era um retangulo chapado do mesmo tom, sem sombra, sem profundidade, com
       a cor de destaque aparecendo so' em botao. Tela assim le'-se como console
       de depuracao, e nenhuma escala tipografica conserta isso.

     O que esta versao faz de diferente: **profundidade** (sombra e superficie
     que sobe), **acento com intencao** (a barra lateral do que importa, o estado
     ativo da aba), **fundo com temperatura** em vez de cinza puro, e os numeros
     como ladrilhos com presenca propria em vez de uma tira cinza.
*/

/* ===========================================================================
   AS FICHAS
   =========================================================================== */
:root {
  /* SUPERFICIE COM TEMPERATURA. Cinza puro (#151515) e' o que faz uma tela
     escura parecer morta - o olho le' como ausencia de cor, nao como escolha.
     Estes tons tem azul dentro, e sobem em degraus que se distinguem. */
  --fundo: #0b0e14;
  --superficie: #141922;
  --superficie-alta: #1b2230;
  --superficie-topo: #222b3b;

  --linha: #2a3444;
  --linha-suave: #1f2836;

  --texto: #eef2f8;
  --texto-medio: #aab8cc;
  --texto-fraco: #6d7c93;

  --acento: #4d9fff;
  --acento-forte: #7ab8ff;
  --acento-fundo: #10233c;

  --ruim: #ff7b72;
  --ruim-fundo: #2b1418;
  --ruim-linha: #58272c;
  --alerta: #e3b341;
  --alerta-fundo: #251d0c;
  --alerta-linha: #4e3c14;
  --bom: #56d364;
  --bom-fundo: #0f2419;
  --bom-linha: #204632;

  /* SOMBRA - o que faltava. Sem ela, oito paineis do mesmo tom sao oito
     retangulos; com ela, sao objetos sobre um fundo. */
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 12px rgba(0, 0, 0, .22);
  --sombra-alta: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 28px rgba(0, 0, 0, .3);

  --t-micro: 11px;
  --t-nota: 12.5px;
  --t-corpo: 14px;
  --t-titulo: 15px;
  --t-destaque: 20px;
  --t-heroi: 30px;

  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 24px; --e6: 32px; --e7: 48px;

  --raio: 14px;
  --raio-p: 9px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* A MEDIDA DA TELA, em UM lugar. Ela aparecia em `main` e em mais nada, e foi
     assim que a falta do `margin: 0 auto` passou despercebida. */
  --largura: 1440px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: var(--t-corpo)/1.6 "Inter", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* =============================================================== cabecalho */
header.topo {
  display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap;
  height: 62px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linha);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03), 0 4px 16px rgba(0, 0, 0, .3);
  position: relative; z-index: 3;
}
/* ------------------------------------------------------------------------
   O CONTEUDO DA BARRA ACOMPANHA O DA PAGINA
   ------------------------------------------------------------------------
   A barra vai de ponta a ponta (senao a tela fica com uma faixa flutuando),
   mas o que esta' DENTRO dela tem de comecar na mesma coluna que o conteudo.
   Sem isto o titulo cola na borda esquerda e as caixas ficam no meio - dois
   alinhamentos diferentes na mesma tela.

   ⚠️ NAO E' `justify-content: center`. Isso empurraria tudo para o meio e
   mataria o `margin-left: auto` do botao "sair", que e' o que o joga para a
   direita. O que se ajusta e' o PADDING: o minimo de sempre, ou a sobra ate' a
   coluna de conteudo - o que for maior.

   `max()` com `calc()` porque a sobra e' negativa em tela estreita, e padding
   negativo nao existe. */
header.topo, nav.abas {
  padding-left: max(var(--e6), calc((100vw - var(--largura)) / 2));
  padding-right: max(var(--e6), calc((100vw - var(--largura)) / 2));
}

header.topo .marca { display: flex; align-items: baseline; gap: var(--e3); }
header.topo h1 {
  font-size: var(--t-titulo); font-weight: 650; margin: 0; letter-spacing: -.2px;
}
header.topo .quem { color: var(--texto-fraco); font-size: var(--t-nota); }
header.topo form { display: flex; align-items: center; gap: var(--e2); }
header.topo .direita { margin-left: auto; }

header.topo input {
  width: 108px; text-align: center; font-family: var(--mono);
  font-size: var(--t-nota); letter-spacing: .5px;
}

nav.abas {
  display: flex; gap: var(--e1); flex-wrap: wrap;
  /* ⚠️ SO' O VERTICAL. O `padding` completo aqui sobrescreveria o
     `padding-left/right` calculado acima - ele vem antes na folha, e o atalho
     ganha do especifico quando a especificidade empata. Foi assim que a barra
     voltou a colar na borda depois de eu "consertar" o alinhamento. */
  padding-top: var(--e2); padding-bottom: var(--e2);
  background: var(--superficie); border-bottom: 1px solid var(--linha);
  position: relative; z-index: 2;
}
/* A ABA ATIVA E' UMA PASTILHA, e nao um sublinhado de 2px. Num menu de dez
   itens o sublinhado se perde; a pastilha diz onde voce esta' de longe. */
nav.abas button {
  background: none; border: 1px solid transparent; color: var(--texto-fraco);
  padding: 8px var(--e4); cursor: pointer; font: inherit;
  font-size: var(--t-nota); font-weight: 500; border-radius: 999px;
  transition: color .12s ease, background .12s ease;
}
nav.abas button:hover { color: var(--texto-medio); background: var(--superficie-alta); }
nav.abas button[aria-current="true"] {
  color: var(--texto); background: var(--superficie-topo);
  border-color: var(--linha); font-weight: 600;
}

/* ⛔ `margin: 0 auto` - a linha que faltava, e que ele viu na primeira olhada. */
main {
  padding: var(--e5) var(--e6) var(--e7);
  max-width: var(--largura); margin: 0 auto;
}

/* ===================================================================== caixas
   PROFUNDIDADE, e nao contorno. A borda de 1px em volta de tudo dava o ar de
   wireframe; a sombra faz a caixa existir como objeto. */
.caixa {
  background: var(--superficie);
  border: 1px solid var(--linha-suave);
  border-radius: var(--raio);
  padding: var(--e5);
  margin-bottom: var(--e4);
  box-shadow: var(--sombra);
}
.caixa > h2 {
  font-size: var(--t-titulo); color: var(--texto); font-weight: 650;
  margin: 0 0 var(--e4); letter-spacing: -.15px;
  display: flex; align-items: center; gap: var(--e2);
}
/* O TRACO DE ACENTO no titulo. E' pequeno e faz o bloco ter comeco - sem ele o
   h2 e' mais uma linha de texto entre outras. */
.caixa > h2::before {
  content: ""; width: 3px; height: 15px; border-radius: 2px;
  background: var(--acento); flex: none; opacity: .85;
}
.caixa > h2 + p, .caixa > p:first-of-type { margin-top: 0; }
.caixa p { color: var(--texto-medio); font-size: var(--t-corpo); }
.caixa p:last-child { margin-bottom: 0; }

/* O estado do ciclo e' uma FAIXA: ele responde a pergunta que a pessoa abriu a
   tela para fazer. Barra lateral grossa, e nao borda de 1px em volta. */
.faixa {
  display: flex; align-items: flex-start; gap: var(--e4);
  border-radius: var(--raio); padding: var(--e4) var(--e5);
  margin-bottom: var(--e4); border: 1px solid transparent;
  border-left-width: 4px; box-shadow: var(--sombra);
}
.faixa .pastilha {
  flex: 0 0 auto; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
  padding: var(--e1) 10px; border-radius: 999px; margin-top: 2px;
}
.faixa .diz { font-size: var(--t-corpo); color: var(--texto-medio); }
.faixa .diz strong { color: var(--texto); font-weight: 600; }

.faixa.ruim   { background: var(--ruim-fundo);   border-color: var(--ruim-linha);
                border-left-color: var(--ruim); }
.faixa.ruim .pastilha   { background: var(--ruim);   color: #2a0d0f; }
.faixa.boa    { background: var(--bom-fundo);    border-color: var(--bom-linha);
                border-left-color: var(--bom); }
.faixa.boa .pastilha    { background: var(--bom);    color: #05200f; }
.faixa.alerta { background: var(--alerta-fundo); border-color: var(--alerta-linha);
                border-left-color: var(--alerta); }
.faixa.alerta .pastilha { background: var(--alerta); color: #241d0e; }

.caixa.alerta {
  border-color: var(--alerta-linha); background: var(--alerta-fundo);
  border-left: 4px solid var(--alerta);
}
.caixa.alerta > h2 { color: var(--alerta); }
.caixa.alerta > h2::before { background: var(--alerta); }

/* ================================================================== numeros
   LADRILHOS, e nao uma tira. Cada numero e' um cartao com superficie propria e
   hover - assim o painel parece um painel, e nao uma linha de texto grande. */
.numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--e3);
}
.numero {
  background: linear-gradient(180deg, var(--superficie-alta), var(--superficie));
  border: 1px solid var(--linha-suave); border-radius: var(--raio-p);
  padding: var(--e4) var(--e5);
  transition: border-color .12s ease, transform .12s ease;
}
.numero:hover { border-color: var(--linha); transform: translateY(-1px); }
.numero .valor {
  font-size: var(--t-heroi); font-weight: 650; line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -1.2px;
}
.numero .valor.pequeno {
  font-size: var(--t-corpo); font-weight: 500; letter-spacing: 0;
  padding-top: 10px; line-height: 1.4; color: var(--texto-medio);
}
.numero .rotulo {
  font-size: var(--t-micro); color: var(--texto-fraco); margin-top: var(--e2);
  letter-spacing: .5px; text-transform: uppercase; font-weight: 600;
}
.numero.mau .valor { color: var(--ruim); }
.numero.bom .valor { color: var(--bom); }
/* A cor tambem no fundo, de leve - o numero ruim tem de saltar do painel. */
.numero.mau { background: linear-gradient(180deg, var(--ruim-fundo), var(--superficie));
              border-color: var(--ruim-linha); }
.numero.bom { background: linear-gradient(180deg, var(--bom-fundo), var(--superficie));
              border-color: var(--bom-linha); }

/* ================================================================== tabelas */
.rolagem {
  max-height: 62vh; overflow: auto;
  border: 1px solid var(--linha-suave); border-radius: var(--raio-p);
  background: var(--fundo);
}
table { border-collapse: collapse; width: 100%; font-size: var(--t-nota); }
th, td {
  text-align: left; padding: 10px var(--e4);
  border-bottom: 1px solid var(--linha-suave);
  vertical-align: top; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--superficie-alta); }
th {
  color: var(--texto-fraco); font-weight: 600; font-size: var(--t-micro);
  letter-spacing: .6px; text-transform: uppercase;
  position: sticky; top: 0; z-index: 1;
  background: var(--superficie-topo);
  border-bottom: 1px solid var(--linha);
  padding-top: var(--e3); padding-bottom: var(--e3);
}
td.num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--mono); font-size: var(--t-nota);
}
th.num { text-align: right; }
td.livre {
  white-space: normal; max-width: 480px; color: var(--texto-medio);
  line-height: 1.5;
}
tr.deficit td { background: var(--ruim-fundo); }
tr.deficit:hover td { background: #331a1d; }

/* =================================================================== botoes */
button.acao {
  background: var(--acento); color: #04101f; border: 1px solid transparent;
  border-radius: var(--raio-p); padding: 9px var(--e4); font: inherit;
  font-size: var(--t-nota); font-weight: 600; cursor: pointer;
  white-space: nowrap; box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: filter .12s ease, transform .1s ease;
}
button.acao:hover { filter: brightness(1.1); }
button.acao:active { transform: translateY(1px); }
button.acao:disabled {
  background: var(--superficie-alta); color: var(--texto-fraco);
  border-color: var(--linha); cursor: not-allowed; filter: none;
  box-shadow: none;
}

button {
  background: var(--superficie-alta); color: var(--texto-medio);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 9px var(--e4); font: inherit; font-size: var(--t-nota);
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
button:hover {
  color: var(--texto); border-color: #3d4b60; background: var(--superficie-topo);
}
button:disabled { color: var(--texto-fraco); cursor: not-allowed; }
/* ⛔ `fraca` ERA UMA REGRA VAZIA - corrigido em 02/09/2026.
   Ele olhou os tres botoes do topo e perguntou: *"botao de recarregar e
   reexecutar nao tem funcionalidades?"*. Tem, e sao acoes DIFERENTES -
   `recarregar` mostra a ultima execucao, `reexecutar` RELE O BANCO e leva ~13 s.

   Mas `.fraca` era `{ }` com um comentario dizendo "mantida: o app.js ainda a
   usa" - eu vi que estava em uso e nao a estilizei. Resultado: `acao fraca` e
   `acao` saiam PIXEL A PIXEL IGUAIS, e a tela oferecia tres botoes identicos
   para tres coisas diferentes. A unica pista era o `title`, que so' aparece no
   hover.

   Agora ela e' o secundario de verdade: contorno, sem preenchimento. A acao
   cara (`reexecutar`) fica sendo a unica cheia - o peso visual passa a dizer
   qual delas custa. */
button.acao.fraca {
  background: transparent; color: var(--acento);
  border: 1px solid var(--acento); box-shadow: none;
}
button.acao.fraca:hover { background: var(--acento-fundo); filter: none; }
button.acao.fraca:disabled {
  background: transparent; color: var(--texto-fraco);
  border-color: var(--linha);
}

button.link {
  background: none; border: none; color: var(--acento); cursor: pointer;
  font: inherit; font-size: var(--t-nota); padding: 0; text-decoration: none;
}
button.link:hover { color: var(--acento-forte); text-decoration: underline;
                    background: none; }

input, select, textarea {
  background: var(--fundo); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  padding: 9px var(--e3); font: inherit; font-size: var(--t-nota);
}
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-fundo);
}
label {
  display: block; font-size: var(--t-micro); color: var(--texto-fraco);
  margin-bottom: var(--e2); letter-spacing: .5px; text-transform: uppercase;
  font-weight: 600;
}
.campos { display: flex; gap: var(--e4); align-items: flex-end; flex-wrap: wrap; }
.campos > .cresce { flex: 1 1 260px; }
.campos > .cresce input { width: 100%; }
/* O textarea do ajuste ao agente - 02/09/2026. A regra acima so' alcancava
   `input` DENTRO de `.campos`; o textarea da aba Uplift nao esta' em `.campos` e
   nascia com a largura intrinseca (~20 colunas, com barra de rolagem) - ele viu
   na tela e pediu para simplificar o painel. Largura cheia para todo textarea. */
textarea { width: 100%; box-sizing: border-box; display: block; }

/* ==================================================================== texto */
.mono { font-family: var(--mono); font-size: var(--t-nota); }
.fraco { color: var(--texto-fraco); }

.nota {
  font-size: var(--t-nota); color: var(--texto-fraco);
  margin: var(--e4) 0 0; line-height: 1.55; max-width: 88ch;
}
.nota:last-child { margin-bottom: 0; }

.longo {
  font-size: var(--t-nota); line-height: 1.6; color: var(--texto-medio);
  white-space: pre-wrap; margin: 0;
}
.longo.recortado {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.abridor { margin-top: var(--e2); }

ul.avisos { list-style: none; margin: 0; padding: 0; }
ul.avisos > li { padding: var(--e3) 0; border-top: 1px solid var(--linha-suave); }
ul.avisos > li:first-child { border-top: none; padding-top: 0; }

.camada {
  display: inline-block; font-family: var(--mono); font-size: var(--t-micro);
  color: var(--texto-fraco); background: var(--superficie-topo);
  border: 1px solid var(--linha-suave);
  border-radius: 5px; padding: 2px var(--e2); margin-bottom: var(--e1);
}

.erro {
  border: 1px solid var(--ruim-linha); border-left: 4px solid var(--ruim);
  background: var(--ruim-fundo);
  border-radius: var(--raio); padding: var(--e4) var(--e5);
  margin-bottom: var(--e4); box-shadow: var(--sombra);
}
.erro .titulo {
  color: var(--ruim); font-weight: 650; font-size: var(--t-corpo);
  letter-spacing: -.1px;
}
.erro .corpo {
  margin-top: var(--e2); white-space: pre-wrap; font-size: var(--t-nota);
  line-height: 1.6; color: var(--texto-medio);
}

.selo {
  display: inline-block; font-size: var(--t-micro); padding: 3px var(--e2);
  border-radius: 5px; background: var(--superficie-topo);
  border: 1px solid var(--linha-suave);
  color: var(--texto-fraco); letter-spacing: .3px; white-space: nowrap;
  font-weight: 500;
}
.selo.decidido { background: var(--bom-fundo); color: var(--bom);
                 border-color: var(--bom-linha); }
.selo.bloqueia { background: var(--ruim-fundo); color: var(--ruim);
                 border-color: var(--ruim-linha); }
.selo.pendente { background: var(--alerta-fundo); color: var(--alerta);
                 border-color: var(--alerta-linha); }

/* ===================================================================== lote */
.lote { padding: 0; overflow: hidden; }
.lote > .cabeca {
  display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
  padding: var(--e4) var(--e5); background: var(--superficie-alta);
  border-bottom: 1px solid var(--linha-suave);
}
.lote > .cabeca .quantos { font-weight: 650; font-size: var(--t-titulo); }
.lote > .cabeca .id {
  font-family: var(--mono); font-size: var(--t-micro); color: var(--texto-fraco);
}
.lote > .cabeca .fim { margin-left: auto; display: flex; gap: var(--e2); }
.lote > .corpo { padding: var(--e5); }
.lote .decidir {
  margin-top: var(--e5); padding-top: var(--e5);
  border-top: 1px solid var(--linha-suave);
}

/* ==================================================================== login */
.entrada { max-width: 380px; margin: 14vh auto; padding: 0 var(--e5); }
.entrada h2 {
  font-size: var(--t-destaque); color: var(--texto); margin: 0 0 var(--e5);
  font-weight: 650; letter-spacing: -.3px;
}
.entrada .campo { margin-bottom: var(--e4); }
.entrada input { width: 100%; }
.entrada button.acao { width: 100%; padding: 11px; }

/* A OBSERVACAO - a frase em portugues, antes do motivo tecnico.
   Pedido dele em 24/08/2026: *"o que ajuda o usuario na ponta e' a obs clara"*. */
.observacao {
  margin: 0 0 var(--e3);
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--acento);
  background: rgba(77, 159, 255, .07);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  line-height: 1.6; font-size: var(--t-corpo); color: var(--texto-medio);
}
.observacao:last-child { margin-bottom: 0; }

.motivos { margin: var(--e3) 0 0; padding-left: 20px; line-height: 1.6; }
.motivos li { margin-bottom: var(--e2); }
.motivos li:last-child { margin-bottom: 0; }

/* ======================================================= os avisos do ciclo
   25/08/2026: *"ficou muito ruim de ver isso aqui, parece estar tudo junto"*. */
.aviso-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e3);
}
.aviso-grupos { display: flex; flex-direction: column; gap: var(--e2); }
.aviso-grupo {
  border: 1px solid var(--linha-suave); border-radius: var(--raio-p);
  background: var(--superficie-alta); overflow: hidden;
}
.aviso-grupo.aberto { border-color: var(--linha); }

.aviso-cabecalho {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  padding: 10px var(--e4); background: none; border: none; cursor: pointer;
  text-align: left; font: inherit; border-radius: 0;
}
.aviso-cabecalho:hover { background: var(--superficie-topo);
                         border-color: transparent; }
.aviso-cabecalho .camada { margin-bottom: 0; }

.aviso-seta {
  color: var(--texto-fraco); font-size: var(--t-micro); line-height: 1;
  transition: transform .12s ease; display: inline-block;
}
.aviso-seta.aberta { transform: rotate(90deg); }

.aviso-contagem {
  margin-left: auto; font-family: var(--mono); font-size: var(--t-micro);
  color: var(--texto-fraco); background: var(--superficie-topo);
  border: 1px solid var(--linha-suave);
  border-radius: 999px; padding: 2px var(--e2); min-width: 24px;
  text-align: center;
}

.aviso-corpo {
  padding: var(--e1) var(--e4) var(--e4);
  border-top: 1px solid var(--linha-suave); background: var(--superficie);
}
.aviso-item { padding: var(--e3) 0; border-bottom: 1px solid var(--linha-suave); }
.aviso-item:last-child { border-bottom: none; padding-bottom: 0; }
.aviso-item .longo { max-width: 92ch; }

/* ===========================================================================
   CARREGANDO - a tela preta de 13 segundos, 28/08/2026
   ===========================================================================
   *"quando eu logo fica a tela de ciclo preta ate carregar, demora, ta captando
   os dados? da pra deixar uma mensagem de carregando pf"*. */
.carregando {
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: var(--e5);
  display: flex; flex-direction: column; gap: var(--e3);
  box-shadow: var(--sombra);
}
.carregando .titulo {
  display: flex; align-items: center; gap: var(--e3);
  font-weight: 600; font-size: var(--t-titulo);
}
.carregando .passos {
  margin: 0; padding-left: 20px; color: var(--texto-fraco);
  font-size: var(--t-nota); display: flex; flex-direction: column; gap: var(--e1);
}
.carregando .nota { margin: 0; }

/* A BARRA E' INDETERMINADA de proposito: o servidor nao reporta progresso, e
   uma barra que fingisse porcentagem estaria inventando o numero. */
.barra-indeterminada {
  height: 3px; background: var(--superficie-alta); border-radius: 2px;
  overflow: hidden; position: relative;
}
.barra-indeterminada::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 38%;
  background: var(--acento); border-radius: 2px;
  animation: desliza 1.15s ease-in-out infinite;
}
@keyframes desliza {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(265%); }
}
@media (prefers-reduced-motion: reduce) {
  .barra-indeterminada::after { animation: none; width: 100%; opacity: .5; }
}

.pulso {
  width: 9px; height: 9px; border-radius: 50%; background: var(--acento);
  flex: none; animation: pulsa 1.1s ease-in-out infinite;
}
@keyframes pulsa {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .pulso { animation: none; } }

/* ===================================================================== tela
   estreita. A operacao roda em monitor, mas ele abre no telefone para conferir
   um numero - e a barra de dez abas era a primeira coisa a quebrar. */
@media (max-width: 760px) {
  header.topo, nav.abas { padding-left: var(--e4); padding-right: var(--e4); }
  main { padding: var(--e4) var(--e4) var(--e6); }
  .caixa { padding: var(--e4); }
  .numeros { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .numero { padding: var(--e3) var(--e4); }
  .numero .valor { font-size: var(--t-destaque); }
  nav.abas { overflow-x: auto; flex-wrap: nowrap; }
  nav.abas button { white-space: nowrap; }
}

/* ===========================================================================
   O PAINEL DO AGENTE - 02/09/2026
   ===========================================================================
   *"Caso nao fique legal o resultado quero mandar uma msg para o agente, seguir
    algumas ordens do que eu pedir pra ajustar, quero tambem que tenha o botao
    limpar, e ai volta ao inicio."*

   O painel virou uma conversa curta, entao ganhou cabecalho com acao a' direita
   e um fio de mensagens. Nada aqui e' generico: sao quatro classes usadas so'
   pela caixa do agente. */

/* Titulo a' esquerda, "limpar" a' direita, na mesma linha de base.
   `.caixa > h2` tem margem inferior propria - anulada aqui, porque quem espaca
   passa a ser o flex do cabecalho. */
.cabeca-da-caixa {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e3); margin-bottom: var(--e4);
}
.cabeca-da-caixa > h2 { margin-bottom: 0; }

/* O FIO DA CONVERSA. Barra lateral em vez de balao: o painel ja' e' uma caixa
   dentro de uma aba, e balao dentro de caixa dentro de aba vira ruido. */
.conversa {
  display: flex; flex-direction: column; gap: var(--e2);
  margin: var(--e4) 0; padding-left: var(--e3);
  border-left: 2px solid var(--linha-suave);
}
.conversa .volta {
  margin: 0; font-size: var(--t-corpo); color: var(--texto-medio);
}
/* A ORDEM DELE em destaque; a resposta do agente em tom normal. Quem le' esta'
   procurando o que PEDIU, nao o que o modelo respondeu - a resposta ele ja' viu
   quando ela chegou. */
.conversa .volta.minha { color: var(--texto); }
.conversa .volta .quem {
  display: block; font-size: var(--t-micro); letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-fraco); margin-bottom: 2px;
}

/* Linha de botoes. Existe para o "refazer com esse ajuste" nao colar no
   textarea acima dele. */
.acoes { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

/* A linha do MES ZERO na projecao de saldo - 02/09/2026.
   Ela e' o unico fato da tabela; as outras onze sao cenario. Sem a distincao, a
   leitura natural e' tratar as doze como medicao - e a mais importante delas
   (o salto de 44% para 76% no primeiro mes) passaria como se ja' tivesse
   acontecido. */
tbody tr.destaque {
  background: var(--acento-fundo);
}
tbody tr.destaque td { font-weight: 600; color: var(--texto); }