/* ============================================================
   Comissionamento Consultorias -- casca da aplicacao.

   Reproduz a plataforma AAWZ (portal.aawz.com.br > Comissoes >
   Fechamentos) na versao dos prints em "Modelo Plataforma":
   titulo com subtitulo, abas sublinhadas, barra lateral escura
   estreita e acao primaria em caqui.

   Os tokens vem de tokens.css (design/tokens.css do projeto). Os
   poucos valores proprios da plataforma que faltavam lá estao
   declarados aqui em :root, com nome -- nao espalhados no arquivo.
   ============================================================ */

:root {
  /* ============================================================
     MEDIDOS DA PLATAFORMA, NAO ESTIMADOS

     Estes valores saem de amostragem de pixel em
     "Modelo Plataforma/Screenshot_1.png" -- PNG, sem perda. A
     versao anterior deles foi lida a olho dos mesmos prints, e
     errava por pouco em quase tudo e por muito em tres: o cinza
     da pagina, o divisor de linha e o "Em aberto".

     O video nao serve para isso: e JPEG, e o branco do painel
     chega a ler #F1F3F3 nele. Medir cor sempre no PNG.
     ============================================================ */
  --plat-lateral:      #2E3C2F;  /* barra lateral, verde muito escuro       */
  --plat-pagina:       #FAFAFA;  /* fundo da pagina                         */
  --plat-caqui:        #908963;  /* acao primaria da pagina                 */
  --plat-caqui-fundo:  #7A7454;  /* hover do caqui                          */
  --plat-preto:        #111111;  /* acao primaria dentro das abas           */
  --plat-numero:       #5E6367;  /* numero em tabela                        */
  --plat-grade:        #8A6A3A;  /* valor nas grades de Regras e Impostos   */
  --plat-aberto:       #DAAF09;  /* status "Em aberto"                      */
  --plat-aviso:        #D9AA05;  /* triangulo de atencao                    */
  --plat-ok:           #6FCF97;  /* circulo de concluido                    */
  --plat-erro:         #D64545;
  --plat-linha:        #C1C1C1;  /* divisor entre linhas da tabela          */
  --plat-linha-fundo:  #F4F4F4;  /* fundo da LINHA -- ver nota abaixo       */
  --plat-borda:        #ECECEF;  /* borda de card e de grade                */
  --plat-borda-campo:  #C2C2C2;  /* borda de input em repouso               */
  --plat-campo:        #F0F0F0;  /* fundo do campo de busca                 */

  /* Medidas, tambem do print:
       altura da linha da tabela ...... 67px
       raio do botao .................. 5px
       raio do campo .................. 8px
       titulo da pagina ............... 24px
       cabecalho de coluna ............ 12px
       valor em dinheiro .............. 14px                        */
  --plat-altura-linha: 67px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--plat-pagina);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

/* ============ ESTRUTURA ============ */

.app {
  /* Sem barra lateral: a replica cobre so o modulo de comissionamento, e a
     navegacao do produto inteiro nao faz parte do escopo. */
  min-height: 100vh;
}

/* --- barra do topo --- */
.topo {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  padding: 0 var(--space-7);
  background: var(--surface-canvas);
}

.topo__buscar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--plat-campo);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-aux);
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.topo__atalho {
  font-size: 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  background: var(--surface-canvas);
}

.topo__data { font-size: var(--fs-aux); font-weight: var(--fw-medium); }

.topo__sino { position: relative; display: inline-flex; color: var(--text-secondary); }
.topo__conta {
  position: absolute;
  top: -5px; right: -7px;
  background: var(--color-error);
  color: var(--text-inverse);
  font-size: 9px;
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  padding: 0 3px;
  line-height: 1.5;
}

.topo__perfil { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-aux); }
.avatar {
  width: 26px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: var(--fw-bold);
}

/* --- cabecalho da pagina: titulo, subtitulo, abas sublinhadas --- */
.cabecalho { padding: var(--space-6) var(--space-7) 0; background: var(--surface-canvas); }

.cabecalho__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-page);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
}
.cabecalho__sub { font-size: var(--fs-aux); color: var(--text-muted); margin-top: 2px; }

.cabecalho__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }

.abas {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-5);
  border-bottom: 1px solid var(--plat-linha);
}

.aba {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-muted);
  padding: 0 0 var(--space-3);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.aba:hover:not(:disabled) { color: var(--text-secondary); }
.aba[aria-selected="true"] {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  border-bottom-color: var(--text-primary);
}
.aba:disabled { color: var(--neutral-400); cursor: default; }

/* --- card de conteudo --- */
.painel {
  margin: var(--space-6) var(--space-7) var(--space-7);
  padding: var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--plat-borda);
  border-radius: var(--radius-sm);
}
.painel--limpo { padding: 0; border: 0; background: transparent; }

/* A VISÃO GERAL MISTURA PAINÉIS COM CONTAINERS SOLTOS.
   O `.painel` traz a própria margem; os soltos -- avisos, indicadores,
   reconciliação, as duas colunas -- nasciam colados na borda esquerda
   enquanto o resto da tela respeitava o recuo. A tela ficava torta de um lado
   só, que é o tipo de coisa que se vê e não se sabe nomear.

   A REGRA É POR EXCLUSÃO, e não uma lista de ids: o container que alguém
   acrescentar amanhã já nasce alinhado, sem depender de ninguém lembrar de
   vir aqui. O `.cabecalho` fica de fora porque o recuo dele é `padding` --
   ele precisa do fundo indo até a borda. */
#tela-geral > *:not(.painel):not(.cabecalho) {
  margin-left: var(--space-7);
  margin-right: var(--space-7);
}

/* Os avisos também precisam do respiro vertical -- mas só quando existem: com
   a margem sempre ligada, um container vazio abriria um vão sem nada dentro. */
#conferencia-avisos:not(:empty) { margin-top: var(--space-6); }

/* ============ BOTOES ============ */

.botao {
  font: inherit;
  font-size: var(--fs-aux);
  font-weight: var(--fw-semibold);
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-xs);
  cursor: pointer;
  /* Um `<a class="botao">` chega sublinhado do navegador, e sai parecendo link
     dentro de botao -- foi o que aconteceu com o "Entrar com Google". A classe
     diz "isto e um botao", e o sublinhado desdiz. */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
  transition: background var(--dur-hover) var(--ease-out);
}

/* Acao primaria da pagina: caqui, como "Iniciar Novo Fechamento". */
.botao--caqui {
  background: var(--plat-caqui);
  color: var(--text-inverse);
  border: 1px solid var(--plat-caqui);
}
.botao--caqui:hover { background: var(--plat-caqui-fundo); }

/* Acao primaria dentro de uma aba: preta, como "+ Adicionar Regra". */
.botao--preto {
  background: var(--plat-preto);
  color: var(--text-inverse);
  border: 1px solid var(--plat-preto);
}
.botao--preto:hover { background: var(--aawz-ink); }

.botao--contorno {
  background: var(--surface-canvas);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  font-weight: var(--fw-regular);
}
.botao--contorno:hover { border-color: var(--border-strong); }

.botao:disabled { opacity: .5; cursor: default; }

.atalho {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-aux);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.atalho svg { color: var(--aawz-green); flex: none; }
.atalho:hover { color: var(--aawz-green-dark); }

.icone-lixo { color: var(--plat-erro); }
.botao-icone {
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); padding: var(--space-1);
  border-radius: var(--radius-xs); display: inline-flex;
}
.botao-icone:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* ============ FILTROS ============ */

.filtros { display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-6); }
.filtros__direita { margin-left: auto; display: flex; align-items: flex-end; gap: var(--space-3); }

.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo > label { font-size: var(--fs-aux); color: var(--text-secondary); }

.campo select, .campo input {
  font: inherit;
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-3);
  min-width: 180px;
  height: 34px;
}
.campo select:focus, .campo input:focus {
  border-color: var(--border-strong);
  outline: none;
  box-shadow: var(--shadow-focus);
}
.campo--busca input { background: var(--plat-campo); border-color: transparent; min-width: 210px; }

.marcador { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-aux); color: var(--text-secondary); padding-bottom: var(--space-2); }

.opcoes { display: flex; gap: var(--space-6); font-size: var(--fs-body); }
.opcoes label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }

/* ============ TABELA DE LISTAGEM ============ */

.tabela-rolagem { overflow-x: auto; }

table.tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }

table.tabela th {
  text-align: left;
  /* 12px medidos no print. O --fs-label (11px) deixava o cabecalho
     visivelmente menor que o da plataforma. */
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  /* O cabecalho fica sobre o branco do painel, sem divisor: quem separa
     ele do corpo e o proprio fundo cinza das linhas. */
  background: var(--surface-canvas);
  white-space: nowrap;
}

/* A LINHA TEM FUNDO, E O DIVISOR E UM VAO
 *
 * E o contrario do que estava aqui, e do que a maioria das tabelas faz:
 * em vez de linha branca com borda cinza embaixo, a plataforma usa linha
 * CINZA (#F4F4F4) separada por um fio de 1px. Medido varrendo uma coluna
 * vazia do print: sete faixas de 67px de #F4F4F4, cada uma separada por
 * um pixel de #C1C1C1.
 *
 * A diferenca nao e sutil no olho: com fundo, a linha vira um bloco que a
 * vista acompanha ate o fim; com borda, ela e um vao entre dois fios. */
table.tabela tbody tr { background: var(--plat-linha-fundo); }
table.tabela tbody tr + tr { box-shadow: 0 -1px 0 var(--plat-linha); }

table.tabela td {
  /* 67px medidos na plataforma. Como ALTURA e nao como padding: a linha da
     consultoria tem um contador embaixo do status, e com padding fixo ela
     ficaria mais alta que as outras. Altura em <td> vale como minimo, entao
     a linha de duas linhas de texto cresce, e as demais ficam nos 67. */
  height: var(--plat-altura-linha);
  padding: var(--space-3) var(--space-4);
  color: var(--text-secondary);
  vertical-align: middle;
}

/* O numero em ardosia, como na plataforma.
 *
 * Precisa do `table.tabela` na frente: sem ele a regra e 0-1-1 e perde para
 * o `table.tabela td` acima, que e 0-1-2 -- a MESMA colisao que mantinha o
 * cabecalho numerico alinhado a esquerda. Quando um estilo "nao pega" aqui,
 * o primeiro lugar para olhar e a especificidade, nao o valor. */
table.tabela td.num { color: var(--plat-numero); }

table.tabela tbody tr:hover { background: var(--surface-sunken); }

/* Numero em ardosia, tabular, como na plataforma. */
td.num, th.num { font-variant-numeric: tabular-nums; }
td.num { color: var(--plat-numero); white-space: nowrap; }

/* O cabecalho de coluna numerica alinha COM o numero.
 *
 * `tokens.css` ja manda `th.num { text-align: right }`, mas o
 * `table.tabela th { text-align: left }` acima e mais especifico (0-1-2
 * contra 0-1-1) e vencia -- o cabecalho ia para a esquerda e o valor para a
 * direita, cada um numa ponta da coluna. Repetir a regra com a mesma
 * especificidade e o que resolve; nao ha valor novo aqui, so precedencia. */
table.tabela th.num { text-align: right; }

td.destaque, .celula-mes { color: var(--text-primary); font-weight: var(--fw-semibold); }
.celula-mes { display: flex; align-items: center; gap: var(--space-2); }

.estado { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.estado--aberto { color: var(--plat-aberto); }
.estado--disponibilizado { color: var(--text-primary); }

.selo-ok { color: var(--plat-ok); display: inline-flex; }
.selo-aviso { color: var(--plat-aviso); display: inline-flex; }

.vazio { text-align: center; color: var(--text-muted); padding: var(--space-9) var(--space-4); font-size: var(--fs-aux); }

/* ============ MENSAGENS ============ */

.aviso {
  font-size: var(--fs-aux);
  border-radius: var(--radius-xs);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}
.aviso--erro { background: var(--color-error-soft); color: var(--color-error-text); }
.aviso--ok { background: var(--color-success-soft); color: var(--color-success-text); }

/* Faixa de atencao com triangulo, como na aba Regras. */
.faixa-atencao {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--surface-sunken);
  border-left: 3px solid var(--plat-aviso);
  border-radius: var(--radius-xs);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--fs-aux);
  color: var(--text-secondary);
  line-height: var(--lh-body);
}
.faixa-atencao strong { color: var(--text-primary); }
.faixa-atencao__icone {
  width: 28px; height: 28px; flex: none;
  border-radius: var(--radius-xs);
  background: var(--color-warning-soft);
  color: var(--plat-aviso);
  display: grid; place-items: center;
}

/* ============ LOGIN ============ */

.entrada { min-height: 100vh; display: grid; place-items: center; padding: var(--space-7); background: var(--plat-pagina); }

.entrada__cartao {
  width: 100%;
  max-width: 370px;
  padding: var(--space-8);
  background: var(--surface-raised);
  border: 1px solid var(--plat-borda);
  border-radius: var(--radius-sm);
}
.entrada__cartao h1 { font-size: var(--fs-page); font-weight: var(--fw-bold); margin-bottom: 2px; }
.entrada__cartao p { color: var(--text-muted); font-size: var(--fs-aux); margin: 0 0 var(--space-6); }
.entrada__cartao .campo { margin-bottom: var(--space-4); }
.entrada__cartao .campo input { width: 100%; min-width: 0; }
.entrada__cartao .botao { width: 100%; justify-content: center; height: 38px; }

/* Cada caminho de entrada -- Google, senha -- e um bloco. Aparecem conforme o
   servidor diz em `/api/sessao`, e o espaco entre eles vem do `gap`, e nao de
   margem por elemento: com dois blocos que somem e voltam, margem colapsa e
   dobra. */
.entrada__caminho {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* "ou" com um fio de cada lado. So aparece quando OS DOIS caminhos estao de
   pe -- sozinho, seria um "ou" sem alternativa. */
.entrada__ou {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  font-size: var(--fs-aux);
  color: var(--text-muted);
}
.entrada__ou::before,
.entrada__ou::after {
  content: "";
  flex: 1;
  height: 1px;
  /* `--plat-borda` e nao `--plat-linha`: a segunda e o divisor ENTRE LINHAS
     de tabela (#C1C1C1), escura demais para um fio de separacao aqui. */
  background: var(--plat-borda);
}

.entrada__nota {
  font-size: var(--fs-aux);
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}
.entrada__nota strong { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* ============ DIVERSOS ============ */

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

@media (max-width: 900px) {
  .cabecalho { padding: var(--space-4) var(--space-4) 0; }
  .painel { margin: var(--space-4); padding: var(--space-4); }
  .topo { padding: 0 var(--space-4); }
  .filtros__direita { margin-left: 0; width: 100%; }
}

/* Mes ainda sem fechamento: linha apagada, sem valores, com "Iniciar".
   E como a plataforma apresenta o mes que ainda nao foi aberto. */
tr.linha--nao-iniciada { background: var(--surface-sunken); }
tr.linha--nao-iniciada td { color: var(--text-muted); border-bottom: 1px dashed var(--plat-borda); }
tr.linha--nao-iniciada:hover { background: var(--surface-sunken); }


/* Par de pilulas, como o alternador Clientes/Profissionais da aba Referencias. */
.pilulas {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-sunken);
  border-radius: var(--radius-xs);
  padding: 2px;
}
.pilula {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--fs-aux);
  color: var(--text-secondary);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.pilula[aria-pressed="true"] {
  background: var(--plat-caqui);
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
}

/* ============ LISTA AGRUPADA POR MÊS ============ */
/* O mês é o cabeçalho; as consultorias ficam dentro dele, colapsáveis.
   A faixa inteira é o alvo do clique -- não só o chevron. */

tr.faixa-mes { background: var(--surface-sunken); cursor: pointer; }
tr.faixa-mes:hover { background: var(--neutral-200); }
tr.faixa-mes td {
  border-bottom: 1px solid var(--plat-borda);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}
tr.faixa-mes td.num { color: var(--text-primary); }
tr.faixa-mes .girar { color: var(--text-secondary); }
tr.faixa-mes[aria-expanded="true"] .girar { transform: rotate(180deg); }
.faixa-mes__ano { color: var(--text-muted); font-weight: var(--fw-regular); }
.faixa-mes__conta {
  margin-left: var(--space-4);
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
}

/* A linha da consultoria: recuada, e a linha inteira entra no fechamento. */
tr.linha--consultoria { cursor: pointer; }
tr.linha--consultoria:hover { background: var(--plat-pagina); }
tr.linha--consultoria td.recuo { width: 46px; padding-left: var(--space-6); }
tr.linha--consultoria:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: -2px;
}
tr.linha--consultoria.linha--nao-iniciada { cursor: default; }

/* ============ O SELO DA ENGRENAGEM ============
   Ao lado do nome da consultoria, como a plataforma poe ao lado do nome do
   mes: diz num relance se o numero da linha esta em dia. */
.celula-consultoria { display: inline-flex; align-items: center; gap: var(--space-2); }

.selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  flex: none;
}
.selo:hover { background: var(--surface-sunken); }
.selo:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 1px; }
.selo--ok    { color: var(--plat-ok); }
.selo--aviso { color: var(--plat-aviso); }
.selo--erro  { color: var(--plat-erro); }
.selo--calculando { color: var(--plat-aviso); animation: pulsar 1.4s ease-in-out infinite; }
@keyframes pulsar { 50% { opacity: .35; } }

.pilula-recalcular {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-3);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: 0;
}

/* ============ MODAL "ATUALIZAR FECHAMENTO" ============ */
.cortina {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: start center;
  padding: var(--space-9) var(--space-5);
  overflow-y: auto;
  background: rgba(23, 26, 24, .45);
}
.cortina[hidden] { display: none; }

.modal {
  position: relative;
  width: min(880px, 100%);
  padding: var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--surface-canvas);
  box-shadow: 0 18px 50px rgba(23, 26, 24, .22);
}
.modal__fechar {
  position: absolute;
  top: var(--space-5); right: var(--space-5);
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: none; border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: pointer;
}
.modal__fechar:hover { color: var(--text-primary); }

.modal__titulo {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--fs-page);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.modal__chip { font-size: var(--fs-aux); font-weight: var(--fw-regular); color: var(--text-muted); }

.modal__corpo {
  display: grid;
  grid-template-columns: 1fr minmax(0, 320px);
  gap: var(--space-7);
  align-items: start;
}
.modal__esquerda { min-width: 0; }
.modal__direita:empty { display: none; }

.modal__estado {
  display: flex; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.modal__estado--ok    { color: var(--plat-ok); }
.modal__estado--aviso { color: var(--color-warning-text); }
.modal__estado--erro  { color: var(--plat-erro); }
.modal__texto { color: var(--text-secondary); font-size: var(--fs-aux); }

/* A previa: os numeros que a pessoa precisa ver ANTES de decidir recalcular. */
.resumo-previa { margin-top: var(--space-6); display: grid; gap: var(--space-2); }
.resumo-previa div { display: flex; align-items: baseline; gap: var(--space-3); }
.resumo-previa dt { color: var(--text-secondary); font-size: var(--fs-aux); }
.resumo-previa dd {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.modal__erros-titulo {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--plat-erro);
  color: var(--plat-erro);
  font-size: var(--fs-aux);
  font-weight: var(--fw-semibold);
}
.cartao-erro {
  display: flex; gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--color-error-soft);
  font-size: var(--fs-aux);
  color: var(--text-secondary);
}
.cartao-erro strong { display: block; color: var(--text-primary); margin-bottom: var(--space-1); }
.cartao-erro__marca { color: var(--plat-erro); flex: none; }

.modal__pergunta {
  margin: var(--space-7) 0 var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--plat-linha);
  color: var(--text-primary);
}
.modal__acoes { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-5); }

@media (max-width: 720px) {
  .modal__corpo { grid-template-columns: 1fr; }
}

/* ============ AVISO PASSAGEIRO ============ */
.faixa-aviso {
  position: fixed;
  right: var(--space-6); bottom: var(--space-6);
  z-index: 60;
  display: flex; align-items: center; gap: var(--space-5);
  max-width: min(520px, calc(100vw - var(--space-9)));
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xs);
  background: var(--plat-grade, #2C312D);
  color: #fff;
  font-size: var(--fs-aux);
  box-shadow: 0 10px 30px rgba(23, 26, 24, .28);
}
.faixa-aviso[hidden] { display: none; }
.faixa-aviso .atalho { color: #fff; text-decoration: underline; }

/* O consultor virou coluna propria. Fica em cinza para o nome do cliente
   continuar sendo o que salta na linha. */
td.consultor { color: var(--text-secondary); }

/* ============ REFERÊNCIAS ============
   Para onde foi cada parte do que o mês gerou. As quatro somam a comissão
   gerada -- por isso ficam lado a lado: é o rateio inteiro num relance, e dá
   para conferir a soma sem trocar o filtro quatro vezes. */
.referencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.referencias:empty { display: none; }

.ref {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--plat-borda);
  border-radius: var(--radius-xs);
  background: var(--surface-canvas);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-pop) var(--ease-out);
}
.ref:hover { border-color: var(--border-strong); }
.ref--ativa {
  border-color: var(--aawz-green-dark, var(--border-strong));
  background: var(--surface-sunken);
}
.ref__rotulo {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ref__valor {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ref--ativa .ref__valor { color: var(--aawz-green-dark, var(--text-primary)); }
.ref__nota { font-size: var(--fs-label); color: var(--text-muted); }

/* O percentual ao lado do valor: qualifica o número sem competir com ele. */
.fatia {
  font-size: var(--fs-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* ============ OS TRÊS GRUPOS DA LISTA ============
   O filete vertical separa mais que qualquer cor de fundo, e não briga com o
   cinza das linhas. O rótulo do grupo é pequeno: ele orienta, não compete com
   o nome da coluna. */
tr.grupos th {
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 0;
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  /* Centralizado: o título nomeia o BLOCO, e alinhado à esquerda ele parecia
     pertencer só à primeira coluna dele. */
  text-align: center;
  white-space: nowrap;
}
.grupo--gerado      { color: var(--text-muted); }
.grupo--consultoria { color: var(--plat-caqui); }
.grupo--aawz        { color: var(--plat-numero); }

table.tabela th.inicio-grupo,
table.tabela td.inicio-grupo { border-left: 1px solid var(--plat-linha); }
tr.grupos th.grupo { border-left: 1px solid var(--plat-linha); }

/* A coluna que a consultoria confere primeiro. */
table.tabela td.num.destaque { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* O % clicável: parece o texto ao lado, e o sublinhado pontilhado diz que há
   mais atrás dele. Negrito no hover, como na plataforma. */
/* O % TEM DE PARECER UM CONTROLE.
   A primeira versão era 11px cinza com sublinhado pontilhado MAIS CLARO que o
   próprio texto: colado no valor, lia-se como sufixo do número, e quem procurou
   o clique não achou. Agora é uma pastilha com borda e o ⊕ que a plataforma usa
   para "tem detalhe atrás disto" -- pequena, mas inconfundivelmente clicável. */
.fatia--botao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 1px var(--space-2) 1px 5px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font: inherit;
  font-size: var(--fs-label);
  line-height: 1.4;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.fatia--botao::before {
  content: "⊕";
  font-size: 10px;
  line-height: 1;
  color: var(--plat-caqui);
}
.fatia--botao:hover,
.fatia--botao:focus-visible {
  border-color: var(--plat-caqui);
  background: var(--surface-canvas);
  color: var(--text-primary);
}

/* ============================================================
   ACESSOS

   Botão de linha e o estado de quem foi desligado. A linha
   continua legível de propósito: acesso desligado não some da
   lista -- some da lista é o que faz alguém recriar por engano.
   ============================================================ */
.botao--pequeno {
  height: 26px;
  padding: 0 var(--space-3);
  font-size: var(--fs-aux);
}
tr.linha--desligada td { color: var(--text-secondary); }
tr.linha--desligada td.destaque { font-weight: var(--fw-regular); }
.acesso__desligado { color: var(--text-muted); }

/* ============================================================
   TARJA DA VISÃO PERSONIFICADA

   Âmbar e presa no topo, empurrando a página para baixo em vez
   de flutuar por cima: uma tarja que cobre conteúdo faz a
   pessoa fechá-la, e fechar é justamente o que ela não pode
   permitir. É o mesmo âmbar de "documento possui avisos" --
   não é erro, é um estado que precisa acabar.
   ============================================================ */
.tarja-visao {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--color-warning-soft);
  border-bottom: 1px solid var(--plat-aviso);
  color: var(--text-primary);
  font-size: var(--fs-aux);
}
.tarja-visao strong { font-weight: var(--fw-semibold); }

/* A pagina de recusa da entrada pelo portal (`backend/rotas_portal.py`): uma
   frase so, dentro do iframe da plataforma. */
.portal-recusa {
  max-width: 32rem;
  margin: var(--space-7) auto;
  padding: 0 var(--space-4);
}