/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   POSIÇÃO E RESULTADO (assets/js/telas/posicao.js).

   Só o que as peças do painel ainda não tinham: a barra de filtros com cinco campos e sete
   atalhos, a faixa de cinco cartões, a linha filha recuada no nível Detalhado, o valor "em
   preparação" e a conta do dinheiro vivo. Cor, fonte e fio vêm dos tokens (tokens.css), então os
   dois temas funcionam sem uma regra de tema aqui. Nenhuma animação nova: a única coisa que se
   mexe nesta tela é o que o kit já mexe (a aba que desliza e o número que rola), e os dois já
   respeitam "reduzir movimento".

   Tudo pendurado em `.pr-tela`, para nada daqui vazar para outra tela.
   ============================================================ */

/* ---------- filtros ---------- */
/* "Números de: ..." (r27): de qual empresa, ou de quais, são os números da tela. Desde 28/09/2026 leva junto os botões
   que abrem a escolha no alto ("Trocar empresa", "Trocar centro"): a empresa e o centro não se repetem aqui dentro. */
.pr-tela .pr-de-quem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 15px;
  color: var(--foreground);
}
.pr-tela .pr-de-quem > p {
  margin: 0;
  min-width: 0;
}
/* "Trocar empresa" e "Trocar centro" numa fila só deles: a regra da fileira (scripts/medir-layout-comum.mjs) reprova
   botões que se partem em duas linhas no celular, e a frase dividindo a fila com eles partia (390 px, 28/09/2026) */
.pr-tela .pr-trocar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pr-tela .pr-atualizado {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.pr-tela .pr-atualizado > svg {
  flex: none;
  width: 14px;
  height: 14px;
}
.pr-tela .pr-campos {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
  min-width: 0;
}
.pr-tela .pr-campo {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
/* o seletor de empresa nasce do tamanho do maior nome (um <select> cresce até caber a maior
   opção): preso na largura da barra, ele encolhe e trunca por dentro em vez de passar a borda */
.pr-tela .pr-campo > .seletor {
  min-width: 0;
  max-width: 100%;
}
/* `.av-periodo` é a marca que o portão de documentação reconhece como "a tela desenha o próprio
   seletor de período" (ver o comentário em posicao.js). A regra global dela, em avarias.css, é
   da faixa escura de Avarias: moldura verde, texto branco, sem o ícone do calendário. Aqui dentro
   ela volta a ser só um agrupamento, e os campos voltam a ser os `.campo` do painel. */
.pr-tela .pr-campo.av-periodo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.pr-tela .av-periodo input.campo {
  padding: 0 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  color: var(--foreground);
  color-scheme: inherit;
  font-family: inherit;
  font-size: 14px;
}
.pr-tela .av-periodo input.campo:focus-visible {
  outline: none;
  border-color: var(--ring);
  border-radius: var(--radius);
  /* o anel cheio da 017 (vitrine.css, secao 10): o de 30% de transparencia media 1,57:1 nos campos de data de Posicao e
     Centros (caminhada de Tab, 06/10/2026), e o minimo e 3:1 */
  box-shadow: 0 0 0 2px var(--ring);
}
.pr-tela .av-periodo input.campo::-webkit-calendar-picker-indicator {
  display: revert;
}
.pr-tela .pr-campo.av-periodo label {
  display: grid;
  gap: 4px;
}
/* NO CELULAR AS DUAS DATAS DIVIDEM A LINHA (r38, 27/09/2026): a 360 elas quebravam uma embaixo da outra,
   cada uma com o tamanho do proprio campo e um buraco do lado (fileira quebrada, MEDIDO na Posicao e
   resultado e em Centros de resultado). Os mesmos dois campos, na mesma ordem: so dividem a largura. */
@media (max-width: 639.98px) {
  /* e cada filtro da barra ocupa a linha inteira, na mesma ordem: com a largura de cada um, eles caiam
     em 5 linhas desiguais (1 + 1 + 1 + 2 + 1), MEDIDO a 390, 375 e 360 (r38) */
  .pr-tela .pr-campos > * {
    flex-basis: 100%;
  }
  .pr-tela .pr-campo.av-periodo {
    flex-wrap: nowrap;
    width: 100%;
  }
  .pr-tela .pr-campo.av-periodo label {
    flex: 1 1 0;
    min-width: 0;
  }
  .pr-tela .av-periodo input.campo {
    width: 100%;
    min-width: 0;
  }
}
.pr-tela .pr-campo-chave {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--foreground);
  cursor: pointer;
}
.pr-tela .pr-chave {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.pr-tela .pr-atalhos .btn {
  flex: none;
}

/* ---------- faixa de cartões ----------
   Cinco cartões não cabem no grid de 12 sem sobrar buraco (5 x 2 = 10, ou 3 + 2 com um vão
   cinza no fim). Então a faixa é uma grade própria de cinco colunas, com o mesmo fio de 1px da
   `.grade`, e no espaço estreito cai para duas e depois uma; o último cartão, quando sobra
   sozinho numa fileira de duas, ocupa a fileira inteira.
   DESDE A R26 cada pessoa escolhe os cartões (posicao.js, "Escolher cartões"): a fileira tem tantas colunas
   quantos cartões sobraram (`--pr-cartoes`, posto pela tela), para três cartões não deixarem dois vãos
   cinza no fim; sem cartão nenhum, a tela nem desenha a fileira. */
.pr-tela .pr-faixa {
  display: grid;
  grid-template-columns: repeat(var(--pr-cartoes, 5), minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
}
.pr-tela .pr-faixa > * {
  background: var(--card);
  min-width: 0;
}
@container conteudo (max-width: 979.98px) {
  .pr-tela .pr-faixa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pr-tela .pr-faixa > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@container conteudo (max-width: 599.98px) {
  .pr-tela .pr-faixa {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- valor que ainda não existe ----------
   Itálico e apagado: lê-se como recado, nunca como número. */
.pr-tela .pr-sem-valor {
  color: var(--muted-foreground);
  font-family: var(--fonte);
  font-style: italic;
  font-weight: 400;
  white-space: nowrap;
}
/* O CARTÃO SEM NÚMERO TEM A ALTURA DO CARTÃO COM NÚMERO (r24): a linha do recado ocupa a mesma altura
   da linha do número (`var(--kpi-valor-tamanho)`, que desde a r81 é `min(28px, 11.5cqi)`, com entrelinha 1,15,
   a regra do `.indicador-valor .numero` em componentes.css), e o recado não quebra; a letra encolhe com o cartão, como o número. Sem isso,
   o cartão crescia quando o valor chegava, e a fileira inteira pulava. */
.pr-tela .pr-indicador-vazio .indicador-valor .numero {
  display: flex;
  align-items: center;
  height: calc(var(--kpi-valor-tamanho) * 1.15);
  font-size: min(16px, 8.6cqi);
  font-weight: 500;
  font-style: italic;
  white-space: nowrap;
  color: var(--muted-foreground);
}
.pr-tela .pr-indicador-vazio .pr-aguardando {
  font-weight: inherit;
}

/* ---------- aguardando o Sankhya (tarefa r24, 25/09/2026) ----------
   "Aguardando Sankhya" leva um anel pequeno com um arco que gira DEVAGAR (1,8 s por volta, em
   velocidade constante, sem pulo), na cor apagada do texto: o trilho quase some e o arco é da cor do
   recado. Uma animação só (`girar`, componentes.css, a mesma do botão ocupado), sem relógio de
   JavaScript; o atraso negativo que a tela põe em cada sinal deixa todos na mesma volta.
   PARADO em dois casos: com "reduzir movimento" ligado no aparelho (fica o anel com o arco, quieto) e
   com a aba do navegador escondida (`data-aba-oculta`, posto pela tela). E NUNCA gira em "Sankhya não
   respondeu": ali não vem nada, e o sinal mentiria. */
/* o sinal fica NA LINHA do texto, como uma letra (e não numa caixa flexível): assim ele não levanta a
   linha, e a célula esperando tem a altura da célula com número (medido: a caixa flexível subia 2,6 px) */
.pr-tela .pr-sinal {
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform-origin: 50% 50%;
  animation: girar 1.8s linear infinite;
}
.pr-tela .pr-sinal-trilho {
  stroke-opacity: 0.22;
}
.pr-tela .pr-sinal-arco {
  stroke-opacity: 0.85;
}
:root[data-aba-oculta] .pr-tela .pr-sinal {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .pr-tela .pr-sinal {
    animation: none;
  }
}
/* O LUGAR GUARDADO (r24): nada muda de tamanho quando o número chega. Medido nesta tela em 25/09/2026:
   o recado com o sinal ocupa 150 px numa célula de 14 px, e um valor de milhões uns 110 a 130 px.
   Sem guardar o lugar, a coluna encolhia na chegada do número e a tabela inteira andava para o lado.
     - célula de valor das tabelas que esperam: uma linha invisível, de altura zero, com a largura do
       recado (é o `::after`, fora do texto da página e do leitor de tela); na tabela virada em fichas
       (celular) a célula não é coluna, e a reserva sai;
     - coluna "Situação" das conferências e pílula da variação dos cartões: uma cópia invisível
       (`.pr-reserva`) empilhada no mesmo lugar da de verdade (`.pr-pilha`); a da variação tem o
       tamanho da mais longa que o painel escreve, e quebra em duas linhas onde ela quebraria. */
.pr-tela .pr-com-espera .tabela:not(.em-fichas) td.num::after {
  content: "Aguardando Sankhya";
  display: block;
  height: 0;
  padding-left: 1.35em;
  overflow: hidden;
  visibility: hidden;
  font-family: var(--fonte);
  font-style: italic;
  font-weight: 400;
}
/* na ficha do celular a célula de valor alinha pelo meio, e não pela linha de base: o recado (letra
   do painel) e o número (letra de número) têm linhas de base diferentes, e alinhados pela base a
   ficha crescia meio pixel por linha quando o número chegava (medido: 232 -> 230 px a 390 px) */
.pr-tela .pr-com-espera .tabela.em-fichas td.num {
  align-items: center;
}
.pr-tela .pr-pilha {
  display: inline-grid;
}
.pr-tela .pr-pilha > * {
  grid-area: 1 / 1;
  justify-self: start;
}
.pr-tela .pr-reserva {
  visibility: hidden;
}
.pr-tela .pr-sinal-lugar {
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
}
.pr-tela .pr-cartao .indicador-valor {
  flex-direction: column;
  align-items: flex-start;
}
/* "Sankhya não respondeu": parado, na cor de alerta, para não se confundir com "não informado" */
.pr-tela .pr-sem-resposta {
  color: var(--alerta);
}
/* "Tentar de novo": a área de toque cresce sem mudar a altura da linha (o cartão recusado tem a
   altura do cartão com número), 24 px no mouse e 44 px no toque */
.pr-tela .pr-tentar {
  padding-block: 4px;
  margin-block: -4px;
}
@media (pointer: coarse) {
  .pr-tela .pr-tentar {
    padding-block: 12px;
    margin-block: -12px;
  }
}

/* ---------- abas ---------- */
.pr-tela .pr-abas .cartao-cab {
  flex-wrap: wrap;
  row-gap: 8px;
  padding-block: 8px;
  border-bottom: 0;
  min-width: 0;
}
/* a fileira de abas encolhe (e rola de lado, como sempre) antes de empurrar o botão para a linha de baixo */
.pr-tela .pr-abas .cartao-cab > .abas {
  flex: 0 1 auto;
  min-width: 0;
}
/* "Escolher cartões" (r26): discreto, na ponta direita do alto das abas, só na aba que tem cartões. `.btn`
   é `inline-flex` e ganharia do `hidden` do navegador: por isso a regra do escondido é explícita. */
.pr-tela .pr-escolher {
  margin-left: auto;
  flex: none;
  box-shadow: none;
  color: var(--muted-foreground);
}
.pr-tela .pr-escolher[hidden] {
  display: none;
}
@media (pointer: coarse) {
  .pr-tela .pr-escolher {
    min-height: 44px;
  }
}
/* A contagem da aba Conferências é quantas coisas precisam ser investigadas: vermelho, como
   pede a especificação. Nas outras telas a contagem é neutra, por isso a regra é só daqui. */
.pr-tela .pr-abas #aba-conferencias .contagem {
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--perigo);
  color: var(--primary-foreground);
  font-family: var(--fonte);
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------- a mesma grade de números em todas as tabelas da aba (tarefa r26) ----------
   Pedido do Enéas em 25/09/2026: "seria bom que todas as quatro colunas de tudo que estiver na mesma
   página fiquem alinhadas uma sobre a outra". Até aqui cada tabela media as próprias colunas pelo texto
   de dentro, e "Saldo no início" caía em cinco lugares diferentes na mesma aba (medido a 1440 px: de
   479 a 655 px, 176 px de uma tabela para a outra; scripts/testar-tela-posicao.mjs, "colunas-alinhadas").
   AGORA A LARGURA NÃO DEPENDE DO QUE ESTÁ ESCRITO: `table-layout: fixed`, e toda coluna de número de
   toda tabela `.pr-grade` (posicao.js, `naGrade`) tem a mesma largura; a primeira coluna, o nome, fica
   com o resto. Como as tabelas da aba têm a mesma largura (cada uma ocupa a faixa inteira), as colunas
   caem no mesmo x, da primeira tabela à última, e não mudam de lugar quando o número chega.
   A LARGURA DA COLUNA é o maior texto que uma célula de número escreve, medido em 25/09/2026 a 14 px:
   "Aguardando Sankhya" com o sinal, 155,4 px ("Sankhya não respondeu" 154,4; "(123.456.789,00)" em
   negrito 134,9), mais 16 px de cada lado e uns 4 px de folga: 192 px. Um número de bilhão ainda cabe.
   O título da coluna quebra a linha ("Aumentou (nova dívida)") em vez de empurrar a coluna.
   ONDE A GRADE NÃO CABE (1024 px para baixo, no computador), a tabela não espreme o nome: guarda 150 px
   para ele e rola de lado dentro do quadro, como já rolava antes, e as tabelas da aba rolam juntas
   (posicao.js, `rolarJuntas`). Com 150 px, a 1024 px cabem o nome e três colunas inteiras (726 px de
   quadro), e a tabela de três colunas (Fluxo de caixa) não rola.
   A ficha do celular (`.em-fichas`) não entra aqui: ela continua exatamente como era. */
.pr-tela .pr-grade .tabela:not(.em-fichas) {
  table-layout: fixed;
  min-width: calc(150px + var(--pr-numeros, 4) * 192px);
}
.pr-tela .pr-grade .tabela:not(.em-fichas) th.num {
  width: 192px;
  white-space: normal;
  text-wrap: balance;
  line-height: 1.25;
}

/* ---------- quadros ----------
   A tabela do kit conta "1-7 de 7" no pé. Num quadro fixo de balanço isso é ruído: o quadro
   inteiro está sempre à vista (uma página só). */
.pr-tela .pr-quadro .paginacao {
  display: none;
}
.pr-tela .pr-nome {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.pr-tela .pr-nivel-2 {
  padding-left: 20px;
}
.pr-tela .pr-nivel-3 {
  padding-left: 40px;
}
.pr-tela .pr-nivel-2,
.pr-tela .pr-nivel-3 {
  color: var(--muted-foreground);
}
/* o aviso de uma linha, debaixo do nome (r29): letra menor e apagada, para ser lido por quem olha a linha
   sem competir com o número; o teto de largura impede a frase de alargar a coluna do nome no computador */
.pr-tela .pr-nota-linha {
  display: block;
  max-width: 52ch;
  margin-top: 2px;
  /* 13 px: texto corrido no computador (regua da Apple); era 12,5 (r38) */
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--muted-foreground);
  white-space: normal;
}
/* A linha de total e a de título de grupo são reconhecidas pela célula de nome; `:has` evita
   ter de escrever classe na <tr>, que é do kit. */
.pr-tela .tabela tr:has(.pr-linha-total) td {
  border-top: 1px solid var(--foreground);
}
.pr-tela .tabela tr:has(.pr-linha-grupo) td {
  background: var(--muted);
}
.pr-tela .pr-link {
  /* 28 px de alvo no mouse (era a altura da letra, 20 px): o "Tentar de novo" de cada parte que o Sankhya
     recusou e o link do detalhe (r38, regra de alvo) */
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.pr-tela .pr-link:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.pr-tela .pr-diferenca {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pr-tela .pr-diferenca > svg {
  width: 14px;
  height: 14px;
}

/* ---------- aviso em faixa ----------
   `.aviso-dados` (telas.css) já traz fundo, fio e ícone; aqui só se tira a margem de baixo, que
   dentro da grade de fio viraria um vão sem fio. */
.pr-tela > .aviso-dados {
  margin-bottom: 0;
}
.pr-tela > .aviso-dados p {
  margin: 0;
}
.pr-tela > .aviso-dados p + p {
  margin-top: 4px;
}
.pr-tela > .aviso-dados .btn {
  flex: none;
}
.pr-tela .pr-virada {
  background: var(--info-fundo, var(--muted));
}
.pr-tela .pr-virada > svg {
  color: var(--info, var(--muted-foreground));
}

/* ---------- controle do dinheiro vivo ---------- */
.pr-tela .pr-conta {
  display: grid;
  margin: 0;
}
.pr-tela .pr-conta-linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.pr-tela .pr-conta-linha:last-child {
  border-bottom: 0;
}
.pr-tela .pr-conta-linha dt {
  min-width: 0;
}
.pr-tela .pr-conta-linha dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.pr-tela .pr-conta-forte dt {
  font-weight: 600;
}

/* ---------- detalhe ---------- */
.pr-tela .pr-detalhe-topo {
  display: grid;
  gap: 4px;
  padding: 16px;
}
.pr-tela .pr-detalhe-topo > .btn {
  justify-self: start;
}
.pr-tela .pr-detalhe-titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}
.pr-tela .pr-detalhe-topo .apoio {
  margin: 0;
}
.pr-tela .pr-mostrar .barra-periodo-opcoes {
  align-items: center;
}

/* O rodapé "De onde vêm estes números": a lista das partes do Sankhya com a hora da leitura. */
.pr-tela .pr-de-onde-corpo {
  padding: 12px 16px 16px;
}
.pr-tela .pr-de-onde-corpo ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}
.pr-tela .pr-de-onde-corpo p {
  margin: 8px 0 0;
}

/* ---------- a variação do cartão cabe no cartão ----------
   Com número de verdade, "+ R$ 1.605.362,22 desde 01/09/2026" passa da largura do cartão em 1440 px e
   o selo cortava o fim da frase (medido em 24/09/2026 por scripts/ver-painel-real.mjs, "CORTADO NA
   HORIZONTAL"). Aqui o selo pode quebrar a linha, e a altura acompanha: nenhum número some. */
.pr-tela .indicador .selo.pilula {
  height: auto;
  min-height: 22px;
  white-space: normal;
  line-height: 1.35;
  padding-block: 2px;
  max-width: 100%;
}

/* ---------- a janela "Escolher cartões" (r26) ----------
   A janela mora no fim da página (`<dialog>` do kit, assets/erp/ui.js), fora de `.pr-tela`: as regras dela
   penduram na classe própria `.pr-escolha`, que só esta tela usa, para nada vazar. Uma linha por cartão: a
   caixa de marcar com o nome (a linha inteira responde ao clique) e as duas setas. O alvo de 44 px dos botões
   no dedo já vem da regra geral de `.btn` (componentes.css); a linha do nome tem os 44 px dela aqui. */
.pr-escolha .apoio {
  margin: 0 0 12px;
}
.pr-escolha-lista {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.pr-escolha-lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 4px 8px 4px 12px;
}
.pr-escolha-lista li + li {
  border-top: 1px solid var(--border);
}
.pr-escolha-lista label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  cursor: pointer;
}
.pr-escolha-lista input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.pr-escolha-setas {
  display: flex;
  flex: none;
  gap: 4px;
}
/* no dedo, a seta tem 44 px de LARGURA também: a regra geral dá 44 a `.btn.icone`, e o `.pequeno` do kit a
   devolvia para 32 (medido pelo crítico da r26 a 390 px: 32x44) */
@media (pointer: coarse) {
  .pr-escolha-setas .btn.icone {
    width: 44px;
  }
}
.pr-escolha-recado {
  min-height: 20px;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted-foreground);
}
.pr-escolha-recado.ruim {
  color: var(--perigo);
}
.pr-escolha-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
}
.pr-escolha-fim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

/* ---------- O CENTRO DE RESULTADO (tarefa r40) ----------
   A frase que diz o que fica de fora com um centro escolhido, logo abaixo do "Números de:". O centro se escolhe no alto
   (28/09/2026). */
.pr-tela .pr-centro-nota {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 13px;
}

/* ---------- A ÁREA "CENTROS DE RESULTADO" (tarefa r40, assets/js/telas/centros.js) ---------- */
.centros-tela .centros-empresa .cartao-cab {
  display: grid;
  gap: 2px;
  padding: 16px 20px 0;
}
.centros-tela .centros-empresa .cartao-cab h2 {
  margin: 0;
  font-size: 17px;
}
.centros-tela .centros-somas {
  display: grid;
  gap: 6px;
  padding: 0 20px 16px;
  font-size: 14px;
}
.centros-tela .centros-somas p {
  margin: 0;
}
.centros-tela .centros-escolhido {
  color: var(--primary);
  font-weight: 600;
}
.centros-tela .centros-aviso {
  margin: 0;
  font-size: 14px;
}