/* =============================================================================
   Conta Real
   =============================================================================

   A Conta Real é a última etapa da carreira, e a tela precisa dizer isso sem
   escrever "exclusivo" em lugar nenhum. O vocabulário é latão sobre azul-marinho
   escuro: o mesmo de diploma, de placa de titularidade, de cartão metálico.

   Tudo aqui vive sob .conta-real. Nada de token novo no :root global — o resto
   do sistema não deve nem saber que estas cores existem, e um --brass solto no
   :root viraria "a cor dourada do sistema" no primeiro componente que a pedisse
   emprestada.

   A PLACA é a exceção deliberada ao tema. Ela é um OBJETO, não uma superfície:
   fica escura no tema claro e no escuro, como um cartão de metal pousado sobre a
   mesa. Por isso tem jogo de tinta próprio (--cr-plate-*) e nada dentro dela
   consulta --foreground. O resto da tela obedece o tema normalmente, pelos
   tokens que o main.css já define.
   ========================================================================== */

.conta-real {
  --cr-brass: #C8A253;
  --cr-brass-hi: #E6CF9A;
  --cr-brass-dim: rgba(200, 162, 83, .28);
  --cr-brass-wash: rgba(200, 162, 83, .07);

  /* A placa: escura nos dois temas, de propósito. */
  --cr-plate-a: #04213C;
  --cr-plate-b: #070B11;
  --cr-plate-ink: #F4F6F9;
  --cr-plate-ink-2: #A9B6C7;
  --cr-plate-line: rgba(200, 162, 83, .22);

  --cr-shadow-lift: 0 1px 0 rgba(255, 255, 255, .05), 0 28px 60px -30px rgba(0, 0, 0, .95);
  --cr-radius: 12px;
}

/* ---------- Placa de titularidade ----------------------------------------- */

.cr-placa {
  position: relative;
  overflow: hidden;
  border-radius: var(--cr-radius);
  border: 1px solid var(--cr-plate-line);
  background: radial-gradient(120% 160% at 8% 0%, var(--cr-plate-a) 0%, var(--cr-plate-b) 62%, #05080C 100%);
  box-shadow: var(--cr-shadow-lift);
}

/* Guilhoché: as linhas finíssimas de um certificado. Gradiente repetido a 62deg
   — em 0 ou 90 viraria listra de fundo de dashboard, que é o oposto do efeito. A
   máscara faz a trama sumir para a esquerda, senão ela compete com o texto. */
.cr-placa::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(62deg, rgba(200, 162, 83, .055) 0 1px, transparent 1px 9px);
  -webkit-mask-image: radial-gradient(90% 120% at 88% 10%, #000 0%, transparent 72%);
          mask-image: radial-gradient(90% 120% at 88% 10%, #000 0%, transparent 72%);
}

.cr-placa__corpo {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 26px 30px;
}

.cr-placa__nome {
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 27px;
  line-height: 1.15;
  color: var(--cr-plate-ink);
  margin: 0;
}

/* A pílula de latão. É ela que carrega a palavra "Conta Real" — em caixa alta e
   com entreletra aberta, que é como se escreve num diploma. */
.cr-placa__tier {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cr-brass-hi);
  border: 1px solid var(--cr-plate-line);
  background: rgba(200, 162, 83, .08);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 9px;
}

.cr-placa__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 12px;
}

.cr-placa__campo {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cr-placa__campo .cr-rotulo {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: rgba(169, 182, 199, .72);
}

.cr-placa__campo b {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--cr-plate-ink-2);
}

.cr-placa__saldo {
  text-align: right;
  padding-left: 28px;
  border-left: 1px solid var(--cr-plate-line);
}

.cr-placa__saldo .cr-rotulo {
  font-size: 11.5px;
  color: rgba(169, 182, 199, .72);
}

.cr-placa__saldo strong {
  display: block;
  font-family: 'TT Fors Trial', sans-serif;
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  margin-top: 6px;
  color: var(--cr-plate-ink);
  /* Dígito de largura fixa: sem isso o valor "dança" na horizontal a cada
     atualização, e um número que dança não parece um número conferido. */
  font-variant-numeric: tabular-nums;
}

.cr-placa__saldo small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: rgba(169, 182, 199, .8);
}

/* ---------- O selo -------------------------------------------------------- */

/* Um marcador só, em três tamanhos. É o que faz a Conta Real virar categoria em
   vez de virar uma página bonita e solta: o mesmo desenho aparece na placa, no
   card da lista e na faixa. */
.cr-selo {
  flex: none;
  display: block;
}

/* ---------- Blocos da tela ------------------------------------------------ */

/* Estes seguem o tema: são superfície, não objeto. */
.cr-bloco {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--cr-radius);
  padding: 20px 22px;
}

/* Um único objeto elevado por tela. O fio de latão no topo é o que diz "é aqui".
   Se tudo tivesse fio, nada teria — por isso a classe é de uso contado. */
.cr-bloco_destaque {
  position: relative;
  background: linear-gradient(180deg, var(--cr-brass-wash) 0%, transparent 120px), var(--card);
  border-color: var(--cr-brass-dim);
  box-shadow: var(--cr-shadow-lift);
}

.cr-bloco_destaque::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--cr-brass) 0%, var(--cr-brass-dim) 78%, transparent 100%);
}

.cr-bloco__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.cr-bloco__titulo {
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 19px;
  line-height: 1.2;
  margin: 0;
}

.cr-bloco__sub {
  font-size: 12.5px;
  color: var(--muted-foreground);
  margin-top: 3px;
}

/* ---------- Números ------------------------------------------------------- */

.cr-numero {
  display: block;
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 24px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.cr-rotulo {
  display: block;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--muted-foreground);
}

/* Sinal do resultado. Verde e vermelho aqui são leitura de mercado, não estado
   de sistema — por isso não reaproveitam as cores de badge. */
.cr-pos { color: #0FA47F; }
.cr-neg { color: #E4572E; }

/* ---------- O card do grupo em Meus Planos -------------------------------- */

/* Versão reduzida da placa: mesma matéria, sem o guilhoché e sem a coluna de
   saldo. Precisa ser reconhecível ao lado da tabela comum sem roubar a tela. */
.cr-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border-radius: var(--cr-radius);
  border: 1px solid var(--cr-plate-line);
  background: radial-gradient(120% 180% at 6% 0%, var(--cr-plate-a) 0%, var(--cr-plate-b) 70%, #05080C 100%);
  box-shadow: var(--cr-shadow-lift);
}

.cr-card__identidade {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.cr-card__nome {
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 18px;
  line-height: 1.2;
  color: var(--cr-plate-ink);
  margin: 0;
}

.cr-card__meta {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: rgba(169, 182, 199, .8);
}

/* O botão dentro da placa não pode ser o botão claro do sistema: sobre fundo
   escuro ele vira um bloco branco que puxa toda a atenção do card. */
.cr-botao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--cr-brass-hi);
  border: 1px solid var(--cr-brass-dim);
  background: rgba(200, 162, 83, .10);
  transition: background-color .15s ease, border-color .15s ease;
}

.cr-botao:hover,
.cr-botao:focus {
  color: var(--cr-brass-hi);
  background: rgba(200, 162, 83, .18);
  border-color: var(--cr-brass);
}

/* ---------- Cabeçalho do grupo -------------------------------------------- */

.cr-grupo__titulo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}

.cr-grupo__contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  font-family: system-ui, sans-serif;
  color: var(--cr-brass);
  border: 1px solid var(--cr-brass-dim);
  background: var(--cr-brass-wash);
}

/* ---------- Telas estreitas ----------------------------------------------- */

@media (max-width: 900px) {
  .cr-placa__corpo {
    grid-template-columns: auto 1fr;
    gap: 18px;
    padding: 20px;
  }

  /* O saldo desce para baixo e perde o fio vertical, que sem a coluna ao lado
     ficaria pendurado no nada. */
  .cr-placa__saldo {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 0;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--cr-plate-line);
  }

  .cr-selo {
    width: 56px;
    height: 56px;
  }
}

/* =============================================================================
   Componentes da tela cheia
   =============================================================================

   Portados do protótipo. Três trocas em relação a ele: as superfícies internas
   (--surface-2/-3) viram tokens de tema do projeto, para o tema claro funcionar;
   a fonte mono do desenho ('IBM Plex Mono') vira a stack de sistema, porque o
   projeto não carrega webfont mono e um valor tabular já resolve o alinhamento;
   e os gráficos são CSS em vez de SVG desenhado por script.
   ========================================================================== */

.conta-real {
  --cr-pos: #0FA47F;
  --cr-neg: #E4572E;
  --cr-pos-wash: rgba(15, 164, 127, .14);
  --cr-neg-wash: rgba(228, 87, 46, .14);
  --cr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cr-r-sm: 8px;
}

.cr-mono {
  font-family: var(--cr-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Bandas ------------------------------------------------------- */

.cr-banda { display: grid; gap: 18px; margin-top: 18px; }
.cr-banda_2 { grid-template-columns: 1.15fr .85fr; }
.cr-banda_grafico { grid-template-columns: 1.35fr .65fr; }

/* ---------- Título de seção com fio -------------------------------------- */

.cr-secao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 34px 0 0;
}

.cr-secao h2 {
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 20px;
  margin: 0;
}

.cr-secao__fio { height: 1px; flex: 1; background: var(--border); }

/* ---------- Chips -------------------------------------------------------- */

/* Chip próprio e não o badge-estado do sistema: aqui o vocabulário é latão e
   mercado, e o badge do sistema fala de estado de plano. */
.cr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid;
}

.cr-chip__bolinha { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.cr-chip_fechado { color: var(--cr-pos); border-color: var(--cr-pos-wash); background: var(--cr-pos-wash); }
.cr-chip_curso   { color: var(--cr-brass); border-color: var(--cr-brass-dim); background: var(--cr-brass-wash); }
.cr-chip_pago    { color: var(--cr-pos); border-color: var(--cr-pos-wash); background: var(--cr-pos-wash); }
.cr-chip_neutro  { color: var(--muted-foreground); border-color: var(--border); background: transparent; }

/* ---------- Razão do fechamento ------------------------------------------ */

.cr-razao { border-top: 1px solid var(--border); margin-top: 2px; }

.cr-razao__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.cr-razao__rotulo { font-size: 13.5px; }
.cr-razao__nota { display: block; font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }

.cr-razao__valor {
  font-family: var(--cr-mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  white-space: nowrap;
}

.cr-razao__linha_total { border-bottom: 0; padding-top: 15px; }
.cr-razao__linha_total .cr-razao__rotulo { font-size: 14.5px; font-weight: 500; }

.cr-razao__linha_total .cr-razao__valor {
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 30px;
  color: var(--cr-pos);
  font-variant-numeric: tabular-nums;
}

.cr-valor_desc { color: var(--muted-foreground); }

/* ---------- Caixa da data de pagamento ----------------------------------- */

.cr-pagamento {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--cr-r-sm);
  background: var(--cr-brass-wash);
}

.cr-pagamento__data {
  font-family: var(--cr-mono);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

.cr-pagamento__texto { font-size: 12.5px; color: var(--muted-foreground); line-height: 1.35; margin: 0; }

/* ---------- A ação de saque ---------------------------------------------- */

/* Latão maciço, largura inteira: é a única ação da tela, e o operador não deve
   precisar procurar por ela. */
.cr-acao {
  appearance: none;
  cursor: pointer;
  display: block;
  text-align: center;
  text-decoration: none;
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--cr-brass);
  background: linear-gradient(180deg, var(--cr-brass) 0%, #A9863F 100%);
  color: #17130A;
  transition: filter .16s ease, transform .12s ease;
}

.cr-acao:hover { filter: brightness(1.07); color: #17130A; }
.cr-acao:active { transform: translateY(1px); }

/* ---------- Notas -------------------------------------------------------- */

.cr-nota-fim {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.55;
}

.cr-nota-fim b { font-weight: 500; }

.cr-aviso-mes {
  margin: 16px 0 0;
  font-size: 12.5px;
  color: var(--muted-foreground);
  line-height: 1.55;
  padding-left: 12px;
  border-left: 2px solid var(--cr-brass-dim);
}

.cr-aviso-mes b { font-weight: 500; }

/* ---------- Mês em curso ------------------------------------------------- */

.cr-mtd {
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 34px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.cr-trilho {
  height: 6px;
  border-radius: 99px;
  background: var(--border);
  overflow: hidden;
  margin-top: 8px;
}

.cr-trilho__barra { height: 100%; border-radius: 99px; background: var(--cr-brass); opacity: .85; }

.cr-pares { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }

.cr-par {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--cr-r-sm);
}

.cr-par__valor {
  font-family: var(--cr-mono);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  display: block;
}

/* ---------- Gráficos ----------------------------------------------------- */

/* Barras em CSS e não SVG desenhado por script: a altura vem calculada do
   servidor, então o gráfico existe no HTML e sobrevive a erro de console. */
.cr-barras {
  display: flex;
  align-items: stretch;
  gap: 10px;
  height: 190px;
  margin-top: 8px;
  padding-bottom: 22px;
  position: relative;
}

.cr-barra {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  position: relative;
}

/* Sem mês negativo, tudo cresce do chão. Com mês negativo, a linha do zero vai
   para o meio: metade para cima, metade para baixo. */
.cr-barra__metade {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.cr-barras_com-neg .cr-barra__metade { flex: 0 0 50%; }

.cr-barra__metade_baixo { justify-content: flex-start; flex: 0 0 50%; }

.cr-barra__valor {
  font-family: var(--cr-mono);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
}

.cr-barra__metade_baixo .cr-barra__valor { margin-bottom: 0; margin-top: 4px; }

.cr-barra__corpo {
  width: 100%;
  max-width: 46px;
  border-radius: 4px 4px 0 0;
  background: var(--cr-pos);
  min-height: 2px;
}

.cr-barra__metade_baixo .cr-barra__corpo { border-radius: 0 0 4px 4px; background: var(--cr-neg); }

/* A linha do zero: é ela que faz a posição da barra dizer o sinal. */
.cr-barras__zero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  height: 1px;
  background: var(--border);
}

.cr-barras_com-neg .cr-barras__zero { bottom: calc(50% + 11px); }

.cr-barra__rotulo {
  position: absolute;
  bottom: -22px;
  font-size: 11px;
  color: var(--muted-foreground);
}

.cr-legenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.cr-legenda__item { display: flex; align-items: center; gap: 6px; }
.cr-legenda__marca { width: 11px; height: 11px; border-radius: 3px; flex: none; }

/* ---------- Extrato ------------------------------------------------------ */

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

table.cr-extrato { width: 100%; border-collapse: collapse; min-width: 660px; }

table.cr-extrato th {
  text-align: right;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 500;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
}

table.cr-extrato th:first-child,
table.cr-extrato td:first-child { text-align: left; }

table.cr-extrato th:last-child,
table.cr-extrato td:last-child { text-align: right; }

table.cr-extrato td {
  text-align: right;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

table.cr-extrato tbody tr:last-child td { border-bottom: 0; }
table.cr-extrato td.cr-mes { font-weight: 500; font-size: 14px; }
table.cr-extrato td.cr-cifra { font-family: var(--cr-mono); font-variant-numeric: tabular-nums; }
table.cr-extrato td + td, table.cr-extrato th + th { padding-left: 18px; }

/* A linha do mês que tem dinheiro a receber. Uma só, e por isso o fio de latão
   na borda esquerda a acha de longe. */
table.cr-extrato tr.cr-destaque td { background: var(--cr-brass-wash); }
table.cr-extrato tr.cr-destaque td:first-child { box-shadow: inset 2px 0 0 var(--cr-brass); }

.cr-tag {
  display: inline-block;
  margin-left: 7px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  font-weight: 500;
}

.cr-total-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--cr-brass-dim);
}

.cr-total-linha strong {
  font-family: var(--cr-mono);
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  color: var(--cr-pos);
}

/* ---------- Telas estreitas ---------------------------------------------- */

/* O breakpoint do projeto é max-width: o bootstrap daqui é desktop-first. */
@media (max-width: 1199px) {
  .cr-banda_2, .cr-banda_grafico { grid-template-columns: 1fr; }
}

/* ---------- A faixa do Dashboard ----------------------------------------- */

/* Dinheiro fechado esperando o operador pedir. Mesma matéria da placa — escura
   nos dois temas, com o selo — porque é a mesma categoria vista de outra altura:
   o operador tem de reconhecer de relance que aquilo é da Conta Real.

   Não é a x-emphasis-bar do topo: aquela é #C55300 com ícone de alerta, a barra
   de "resolva esta pendência". Fechamento pronto é dinheiro a receber, e pintá-lo
   de laranja de pendência ensinaria a ignorar a barra que avisa de plataforma
   vencendo e documento faltando. */
.cr-faixa {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 16px 22px;
  margin-bottom: 16px;
  border-radius: var(--cr-radius);
  border: 1px solid var(--cr-plate-line);
  background: radial-gradient(120% 200% at 4% 0%, var(--cr-plate-a) 0%, var(--cr-plate-b) 72%, #05080C 100%);
  box-shadow: var(--cr-shadow-lift);
}

/* O fio de latão no topo, como no bloco de destaque da tela cheia: é o marcador
   de "é aqui que há dinheiro". */
.cr-faixa::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--cr-brass) 0%, var(--cr-brass-dim) 78%, transparent 100%);
}

/* Empurra o valor e a ação para a direita, e deixa o texto ocupar o meio. */
.cr-faixa__texto {
  flex: 1 1 240px;
  min-width: 0;
}

.cr-faixa__titulo {
  display: block;
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: var(--cr-plate-ink);
}

.cr-faixa__meta {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: rgba(169, 182, 199, .8);
}

.cr-faixa__valor {
  text-align: right;
  padding-left: 18px;
  border-left: 1px solid var(--cr-plate-line);
}

.cr-faixa__cifra {
  display: block;
  font-family: 'TT Fors Trial', sans-serif;
  font-size: 24px;
  line-height: 1.1;
  color: var(--cr-plate-ink);
  font-variant-numeric: tabular-nums;
}

.cr-faixa__quando {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(169, 182, 199, .8);
}

/* O botão da faixa não é de largura inteira como o da tela cheia: ali ele é a
   única ação da página, aqui divide espaço com o valor. */
.cr-acao_faixa {
  width: auto;
  margin-top: 0;
}

@media (max-width: 900px) {
  /* Sem a coluna ao lado, o fio vertical ficaria pendurado no nada. */
  .cr-faixa__valor {
    text-align: left;
    padding-left: 0;
    padding-top: 12px;
    border-left: 0;
    border-top: 1px solid var(--cr-plate-line);
    width: 100%;
  }

  .cr-acao_faixa { width: 100%; }
}

/* ---------- Bloco de gráfico: placa, não superfície ---------------------- */

/* Os blocos de gráfico saíram do tema e viraram placa, como a faixa e o card.
   O motivo é de leitura, não de gosto: no tema claro eles ficavam brancos ao lado
   de uma placa escura, e a tela se partia em duas metades que não pareciam da
   mesma categoria. Gráfico é onde o operador olha o resultado — se ele não
   pertence visualmente à Conta Real, nada pertence.

   Fica escuro nos dois temas, e por isso tem jogo de tinta próprio: nada dentro
   dele consulta --foreground nem --card. */
.cr-bloco_placa {
  position: relative;
  overflow: hidden;
  border-color: var(--cr-plate-line);
  background: radial-gradient(120% 180% at 4% 0%, var(--cr-plate-a) 0%, var(--cr-plate-b) 74%, #05080C 100%);
  box-shadow: var(--cr-shadow-lift);
  color: var(--cr-plate-ink);
}

/* O fio de latão no topo, o mesmo marcador da faixa e do bloco de destaque. */
.cr-bloco_placa::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--cr-brass) 0%, var(--cr-brass-dim) 78%, transparent 100%);
}

/* Dentro da placa a tinta é a dela: os tokens de tema deixariam texto escuro
   sobre fundo escuro no tema claro. */
.cr-bloco_placa .cr-bloco__titulo { color: var(--cr-plate-ink); }
.cr-bloco_placa .cr-bloco__sub,
.cr-bloco_placa .cr-legenda,
.cr-bloco_placa .cr-barra__rotulo { color: rgba(169, 182, 199, .8); }

/* A linha do zero e o fundo do trilho seguem a linha de latão da placa. */
.cr-bloco_placa .cr-barras__zero { background: var(--cr-plate-line); }

/* Barras em latão. O verde/vermelho continua marcando o SINAL — mês positivo e
   negativo precisam se distinguir de relance —, mas a barra positiva ganha o
   latão porque é a leitura dominante da tela: o mês que gerou repasse. */
.cr-bloco_placa .cr-barra__corpo {
  background: linear-gradient(180deg, var(--cr-brass-hi) 0%, var(--cr-brass) 60%, #8A6F35 100%);
}

.cr-bloco_placa .cr-barra__metade_baixo .cr-barra__corpo {
  background: linear-gradient(0deg, #8E3A1E 0%, var(--cr-neg) 100%);
}

.cr-bloco_placa .cr-barra__valor { color: var(--cr-brass-hi); }
.cr-bloco_placa .cr-barra__metade_baixo .cr-barra__valor { color: var(--cr-neg); }

/* A marca da legenda acompanha a barra que ela nomeia. */
.cr-bloco_placa .cr-legenda__marca_pos { background: var(--cr-brass); }
.cr-bloco_placa .cr-legenda__marca_neg { background: var(--cr-neg); }

/* ---------- O card de resultado no Dashboard ------------------------------ */

/* O card de "Meus Resultados" quando o plano selecionado é uma conta real.

   O gráfico já saía em latão pelo `card.conta_real`, mas a moldura continuava a do
   plano comum, e a peça se lia em duas metades: linha de uma tela, caixa de outra.
   Aqui o card inteiro vira PLACA — a mesma matéria do .cr-bloco_placa da tela cheia,
   pelo mesmo motivo que aquele blocos viraram.

   Só o card da conta real muda. Quem tem uma incubadora rodando em paralelo troca de
   plano no seletor e vê o card dela exatamente como antes: a diferença de matéria é o
   que responde "de qual conta é este número" antes de o operador ler o título. */
.resultado-card_real {
  position: relative;
  overflow: hidden;
  border-color: var(--cr-plate-line);
  background: radial-gradient(120% 180% at 4% 0%, var(--cr-plate-a) 0%, var(--cr-plate-b) 74%, #05080C 100%);
  box-shadow: var(--cr-shadow-lift);
  color: var(--cr-plate-ink);
}

/* O fio de latão no topo, o mesmo marcador da faixa, do bloco de destaque e da placa. */
.resultado-card_real::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--cr-brass) 0%, var(--cr-brass-dim) 78%, transparent 100%);
  z-index: 1;
}

/* O tom positivo do card acompanha a linha do gráfico. O NEGATIVO fica vermelho, pela
   mesma razão de lá: prejuízo é prejuízo em qualquer fase, e pintá-lo de latão apagaria
   o único sinal que o operador lê de relance. Daí o :not() — sem ele esta regra venceria
   o .resultado-card_negativo do main.css, que tem a mesma especificidade e carrega antes. */
.resultado-card_real:not(.resultado-card_negativo) {
  --tom: var(--cr-brass-hi);
}

/* Dentro da placa a tinta é a dela: os tokens de tema deixariam texto escuro sobre fundo
   escuro no tema claro. */
.resultado-card_real .resultado-card__titulo,
.resultado-card_real .resultado-campo__valor,
.resultado-card_real .resultado-numero,
.resultado-card_real .resultado-tile__valor,
.resultado-card_real .resultado-fechamento__linha,
.resultado-card_real .resultado-fechamento__linha b {
  color: var(--cr-plate-ink);
}

.resultado-card_real .resultado-campo__rotulo,
.resultado-card_real .resultado-tile__rotulo,
.resultado-card_real .resultado-nota,
.resultado-card_real .resultado-fechamento__desconto,
.resultado-card_real .resultado-fechamento__nota,
.resultado-card_real .text-muted-foreground {
  color: var(--cr-plate-ink-2);
}

/* As caixas internas continuam existindo como caixas — o que muda é o fio, que passa a
   ser o da placa. Com --border do tema elas sumiam no escuro. */
.resultado-card_real .resultado-caixa,
.resultado-card_real .resultado-tile,
.resultado-card_real .resultado-grafico,
.resultado-card_real .resultado-fechamento {
  border-color: var(--cr-plate-line);
}

.resultado-card_real .resultado-fechamento__linha {
  border-bottom-color: var(--cr-plate-line);
}

.resultado-card_real .resultado-fechamento__linha_total {
  border-top-color: var(--cr-plate-line);
}

/* "EM ANDAMENTO" fica no cinza neutro do sistema (113 113 122), que sobre a placa some.
   Vira a tinta secundária da própria placa: continua neutro — a situação do plano não é
   resultado e não deve ganhar latão —, só que legível. */
.resultado-card_real .badge-estado_neutro {
  --estado: 169 182 199;
}

/* ---------- Holofote que segue o ponteiro --------------------------------- */

/* Porte do componente React `spotlight-card` (GlowCard). Três camadas, como no
   original: uma mancha suave no fundo do card, um fio aceso na borda e um núcleo
   branco onde o ponteiro está mais perto. Quem escreve --cr-x/--cr-y é o
   conta-real.js, uma vez por frame, no <html>.

   O truque que faz tudo funcionar é `background-attachment: fixed`: com ele o
   gradiente passa a ser posicionado pela VIEWPORT, não pela caixa do elemento —
   por isso a mancha acompanha o cursor mesmo com o card rolando na página, e por
   isso a mesma coordenada serve para todos os cards de uma vez.

   DIFERENÇA DELIBERADA em relação ao original: lá o matiz gira com a posição
   horizontal do ponteiro (azul -> roxo -> verde). Aqui não gira. A Conta Real é
   latão, e um card que muda de cor conforme o mouse passeia desmancharia
   justamente a assinatura que o resto da tela constrói. O que se move é a LUZ;
   a cor fica. */

.cr-brilho {
  position: relative;
  isolation: isolate;
}

/* A luz vive num filho, e não no ::before do próprio card: a placa já gasta o
   ::before com o fio de latão do topo e o .cr-placa gasta o dele com o guilhoché.
   O original também aninha um elemento para o brilho externo. */
.cr-brilho__luz {
  --cr-luz: 300px;
  --cr-luz-borda: 1px;

  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .45s ease;
}

/* Só acende depois do primeiro movimento do ponteiro — ver conta-real.js. */
.cr-brilho-ativo .cr-brilho__luz {
  opacity: 1;
}

/* Camada 1: a mancha no fundo do card. Discreta de propósito; ela é o que dá a
   sensação de material iluminado, não um foco de palco. */
.cr-brilho__luz {
  background-image: radial-gradient(
    var(--cr-luz) var(--cr-luz) at var(--cr-x, -999px) var(--cr-y, -999px),
    rgba(200, 162, 83, .10),
    transparent 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Camadas 2 e 3: a borda acesa. A máscara é a mesma do original — pinta-se a
   caixa inteira e recorta-se só o anel da borda, intersectando um gradiente que
   cobre o border-box com outro que cobre o padding-box. */
.cr-brilho__luz::before,
.cr-brilho__luz::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--cr-luz-borda) solid transparent;
  border-radius: inherit;
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* O fio de latão aceso, no tamanho cheio do holofote. */
.cr-brilho__luz::before {
  background-image: radial-gradient(
    calc(var(--cr-luz) * .75) calc(var(--cr-luz) * .75) at var(--cr-x, -999px) var(--cr-y, -999px),
    var(--cr-brass),
    transparent 100%
  );
  filter: brightness(1.6);
}

/* O núcleo quase branco, menor e por cima: é ele que dá o ponto de contato entre
   o cursor e a borda. `--cr-brass-hi` no lugar do branco puro do original —
   branco sobre a placa lia como reflexo de vidro, e a placa é metal. */
.cr-brilho__luz::after {
  background-image: radial-gradient(
    calc(var(--cr-luz) * .4) calc(var(--cr-luz) * .4) at var(--cr-x, -999px) var(--cr-y, -999px),
    var(--cr-brass-hi),
    transparent 100%
  );
}

/* O conteúdo do card fica acima da luz. Sem isto a mancha cobriria o texto nos
   cards em que ela é mais forte. */
.cr-brilho > *:not(.cr-brilho__luz) {
  position: relative;
  z-index: 1;
}

/* Na faixa a luz é mais concentrada: ela é uma tira baixa e larga, e o holofote de
   300px do card se espalharia por ela inteira sem desenhar nada. */
.cr-faixa.cr-brilho .cr-brilho__luz {
  --cr-luz: 200px;
}

/* Toque, ponteiro grosso ou preferência por menos movimento: sem holofote. Além do
   efeito não ter onde morar sem cursor, `background-attachment: fixed` custa
   repaint em tela pequena. O JS nem chega a registrar o listener; isto aqui é a
   garantia do lado do CSS. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cr-brilho__luz {
    display: none;
  }
}