/* ==========================================================================
   Simule Já — folha de estilo única, compartilhada pelo simulador
   (index.html) e pelas configurações (configuracoes.html).

   COMO MEXER NO VISUAL: quase tudo se resolve nos tokens do :root abaixo.
   Trocar a cor da marca, deixar a tela mais compacta ou aumentar todos os
   textos são mudanças de uma ou duas linhas lá em cima — não saia caçando
   valor solto no meio das regras, porque é assim que a tela fica desalinhada.
   ========================================================================== */

:root {
  /* --- Marca — Simule Já --------------------------------------------------
     Grafite/preto com dourado. O grafite carrega o peso (botões, títulos,
     textos de destaque) e o dourado entra como brilho (foco, item ativo,
     logo, selo de melhor condição) — dourado como cor de texto sobre branco
     não tem contraste suficiente pra ser legível.

     Estas cores são do PRODUTO, e são iguais em toda loja. O que muda de uma
     revenda para outra é só o nome e a logo, configurados na tela de
     Configurações e guardados fora do código (ver marca.ts). */
  --brand-900: #141414;
  --brand-700: #262626;
  --brand-600: #333333;
  --brand-500: #f4be41;  /* dourado da logo: foco, bordas em destaque */
  --brand-100: #fdf1d5;  /* dourado bem claro: fundos de destaque */
  --accent: #45c554;     /* verde de apoio do site */

  --ouro: #f4be41;
  --ouro-escuro: #d79f20;
  --logo-fundo: linear-gradient(135deg, var(--ouro), var(--ouro-escuro));
  --logo-texto: #1f1f1f;

  /* --- Texto e superfícies ---------------------------------------------- */
  --ink: #1f1f1f;        /* texto principal */
  --ink-soft: #5a5a5a;   /* texto secundário, rótulos */
  --ink-faint: #9a9a9a;  /* dicas, cabeçalho de tabela */
  --line: #e3e3e3;       /* bordas e divisórias */
  --line-forte: #c4c4c4; /* divisórias de tabela — precisam guiar o olho */
  --bg: #141414;         /* fundo da página: preto da marca */
  --surface: #ffffff;    /* fundo dos cards — onde se lê e se digita */
  --superficie-suave: #f6f6f6; /* hover de botões claros, campo desabilitado */
  /* Texto que fica direto sobre o fundo preto (título, subtítulo, status).
     Dentro dos cards o texto continua escuro, porque lá o fundo é branco. */
  /* Mais claros desde 13/10/2026: o dono achou o texto sobre o preto apagado. */
  --ink-sobre-preto: #f7f7f7;
  --ink-sobre-preto-suave: #d0d0d0;

  /* --- Estados dos resultados -------------------------------------------
     Um trio (fundo/borda/texto) por situação. Trocar aqui muda o card do
     banco, o texto do status e tudo que sinaliza aquela situação. */
  --ok-bg: #f0fdf9;
  --ok-border: #a7f3d0;
  --ok-text: #047857;
  --bad-bg: #fef2f2;
  --bad-border: #fecaca;
  --bad-text: #b91c1c;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --warn-text: #b45309;

  /* --- Espaçamento (escala de 4px) --------------------------------------
     Multiplicar estes valores deixa a interface inteira mais respirada;
     reduzir deixa mais compacta. É a régua de todo espaço da tela. */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;

  /* --- Tipografia -------------------------------------------------------- */
  --font-base: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Um ponto maior em toda a escala desde 10/10/2026 — pedido do dono: "aumentar
     um pouco o tamanho das fontes no Simule Já todo". A escala inteira sobe
     junto para os pesos relativos (rótulo × valor × título) ficarem como eram. */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 17px;
  --text-2xl: 20px;
  --text-3xl: 22px;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* --- Formas e profundidade -------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px -12px rgba(20, 20, 20, 0.18);
  --shadow-brand: 0 6px 16px -6px rgba(215, 159, 32, 0.55);
  --shadow-button: 0 10px 24px -10px rgba(215, 159, 32, 0.75);
  --shadow-button-hover: 0 14px 30px -10px rgba(244, 190, 65, 0.9);
  --focus-ring: 0 0 0 3px rgba(244, 190, 65, 0.3);

  /* --- Larguras de página ------------------------------------------------ */
  /* A régua da PÁGINA, uma só para o sistema inteiro.
     Eram três — 740px no simulador, 640px em configurações e minha conta, e
     980px no estoque, que precisou disso para a tabela de oito colunas caber.
     Três réguas significam a página mudando de tamanho debaixo do olho a cada
     troca pelo menu lateral. Igualado em 05/10/2026, por decisão do dono: a
     medida que o estoque exigia virou a medida de todas. */
  --largura-pagina: 980px;

  /* O teto de um campo de formulário.
     O campo não cresce junto com a página: um campo de 930px não fica mais
     fácil de ler nem de preencher, e do lado de um de 420 parece defeito. */
  --largura-campo: 420px;

  /* --- Menu lateral ------------------------------------------------------
     Coluna branca sobre a página preta, com o item selecionado em preto e
     dourado — o inverso do resto da tela, o que ajuda a separar navegação de
     conteúdo. */
  --rail: 72px;       /* recolhido: só os ícones */
  --rail-aberto: 248px;
  --menu-fundo: #ffffff;
  --menu-texto: var(--ink-soft);
  --menu-texto-ativo: var(--ouro);
  --menu-hover: var(--superficie-suave);
  --menu-ativo: #141414;   /* seletor preto sobre a coluna branca */
}

/* ==========================================================================
   Base
   ========================================================================== */

* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-base);
  background:
    radial-gradient(900px 420px at 20% -10%, rgba(244, 190, 65, 0.16), transparent),
    var(--bg);
  min-height: 100vh;
  margin: 0;
  padding: var(--space-8) var(--space-5) 70px;
  /* Abre espaço pro menu lateral fixo. Ao abrir, o menu passa POR CIMA do
     conteúdo em vez de empurrar a página — empurrar faria o formulário dançar
     toda vez que o mouse passasse perto da borda esquerda. */
  padding-left: calc(var(--rail) + var(--space-5));
  color: var(--ink);
}

.container {
  max-width: var(--largura-pagina);
  margin: 0 auto;
}

/* O teto dos campos, em todas as telas.
 *
 * Vale para o campo solto e para o botão que divide o cartão com ele, para os
 * dois terminarem na mesma linha — foi o desalinhamento entre um campo de 420px
 * e um botão de 930px que denunciou a falta desta regra.
 *
 * NÃO vale dentro de `.grid`: ali o campo acompanha a coluna, que já é uma
 * proporção da página. E não vale para o botão de AÇÃO DA PÁGINA ("Simular nos
 * bancos", "Salvar alterações"), que fica fora dos cartões justamente porque
 * fala da página inteira — e por isso tem a largura dela. */
.campo input,
.campo select,
.campo-senha,
.card > input,
.card > select,
.card > button.primary {
  max-width: var(--largura-campo);
}

.grid .campo input,
.grid .campo select,
.grid .campo-senha {
  max-width: none;
}

/* `textarea` fora do teto, de propósito: ela existe para texto comprido — o
   código de licença que o suporte manda é uma parede de caracteres — e apertar
   a caixa só obriga a rolar dentro dela. */
.campo textarea {
  max-width: none;
}

/* ==========================================================================
   Menu lateral
   ========================================================================== */

.menu-lateral {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--rail);
  background: var(--menu-fundo);
  border-right: 1px solid var(--line);
  padding: var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow: hidden;
  z-index: 40;
  transition: width 0.18s ease;
}

.menu-lateral:hover {
  width: var(--rail-aberto);
  box-shadow: 0 0 40px -12px rgba(20, 20, 20, 0.3);
}

.menu-topo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  margin-bottom: var(--space-6);
  min-height: 42px;
}

.menu-marca {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.menu-marca .marca-logo {
  width: 38px;
  height: 38px;
  font-size: var(--text-xl);
}

.menu-nome {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.3px;
  white-space: nowrap;
  color: var(--ink);
}

.menu-nome .sufixo {
  font-weight: var(--weight-medium);
  color: var(--ouro-escuro);
}

/* Tudo que é texto some quando o menu está recolhido. A opacidade (em vez de
   display:none) é o que dá o efeito de deslizar em vez de piscar. */
.menu-texto {
  opacity: 0;
  transition: opacity 0.12s ease;
}

.menu-lateral:hover .menu-texto {
  opacity: 1;
}

.menu-itens {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-4);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--menu-texto);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}

.menu-item svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.menu-item:hover {
  background: var(--menu-hover);
  color: var(--ink);
}

.menu-item.ativo {
  background: var(--menu-ativo);
  color: var(--menu-texto-ativo);
}

/* O selo do sino: bolinha dourada em cima do ícone, visível com o menu
   recolhido (é assim que ele fica o dia inteiro). Com mais de um aviso, mostra
   a conta. */
.menu-item {
  position: relative;
}

.menu-selo {
  position: absolute;
  left: 24px;
  top: 8px;
  min-width: 10px;
  height: 10px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
  color: var(--brand-900);
  font-size: 10px;
  font-weight: var(--weight-bold);
  line-height: 10px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--menu-fundo);
}

/* ==========================================================================
   Notificações: a atualização e os avisos do sistema
   ========================================================================== */

.notificacao-topo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.notificacao-versoes {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.notificacao--atualizacao {
  border: 1px solid var(--brand-500);
}

.notificacao-resumo {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  line-height: var(--leading-relaxed, 1.5);
}

.notificacao-resumo li {
  margin-bottom: var(--space-2);
}

.notificacao-importante {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--brand-100);
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

.notificacao-progresso {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--superficie-suave);
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.notificacao-progresso-barra {
  height: 100%;
  background: var(--brand-500);
  transition: width 0.4s ease;
}

.notificacao-nota {
  margin-top: var(--space-3);
}

.notificacao-erro {
  color: var(--warn-text);
  font-weight: var(--weight-semibold);
}

.notificacao--parado {
  border: 1px solid var(--warn-border);
}

/* ==========================================================================
   Cabeçalho e marca
   ========================================================================== */

.topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.topo--simples {
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

/* Faixas de aviso do topo do painel (ver sidebar.js): sem internet, mensalidade
   vencendo, mensalidade vencida. */
.faixa-aviso {
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  font-size: var(--text-md);
  font-weight: 600;
}

/* Âmbar: nada quebrou e a loja resolve — puxando um cabo ou pagando. */
.faixa-aviso--atencao {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
}

/* Vermelho só quando a simulação REALMENTE parou. Usar vermelho antes disso
   gasta o susto: quando ele significar "parou", ninguém mais vai reparar. */
.faixa-aviso--parado {
  background: var(--bad-bg);
  border: 1px solid var(--bad-border);
  color: var(--bad-text);
}

/* O aviso fixo da mensalidade, só para o gerente (ver desenharAvisoDeCobranca
   em sidebar.js). Flutua no canto e não tem fechar: sai quando a cobrança chega
   como paga. Âmbar, como as faixas: pagar é coisa que a loja resolve. */
.aviso-cobranca {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 340px;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
  border: 2px solid var(--warn-border);
  color: var(--warn-text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  cursor: pointer;
}
body.com-aviso-cobranca {
  padding-bottom: 140px;
}
.aviso-cobranca:hover {
  border-color: var(--warn-text);
}
.aviso-cobranca__titulo {
  font-weight: 700;
  font-size: var(--text-md);
}
.aviso-cobranca__acao {
  margin-top: 4px;
  font-weight: 600;
  text-decoration: underline;
}
@media (max-width: 600px) {
  .aviso-cobranca {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: none;
  }
}

/* A faixa de "atualize" (ver sidebar.js): âmbar como as outras, com o botão
   na mesma linha do texto. Em tela estreita o botão desce para a linha de
   baixo em vez de espremer o texto. */
.faixa-aviso--atualizacao {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

/* Versão obrigatória (sidebar.js): vermelho, porque a simulação realmente parou. */
.faixa-aviso--atualizacao.faixa-aviso--obrigatoria {
  background: var(--bad-bg);
  border-color: var(--bad-border);
  color: var(--bad-text);
}

.faixa-aviso--atualizacao .faixa-texto {
  flex: 1 1 320px;
}

.faixa-aviso--atualizacao button.primary {
  width: auto;
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-base);
}

.faixa-aviso--atualizacao .faixa-link {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
  white-space: nowrap;
}

.faixa-aviso--atualizacao .faixa-erro {
  flex-basis: 100%;
  font-weight: 500;
}

.marca {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.marca--configuracoes {
  margin: 0;
}

.marca-logo {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--logo-fundo);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--logo-texto);
  font-weight: var(--weight-black);
  font-size: var(--text-2xl);
  letter-spacing: -0.5px;
  box-shadow: var(--shadow-brand);
}

.marca--configuracoes .marca-logo {
  width: 38px;
  height: 38px;
  font-size: var(--text-xl);
}

/* Daqui pra baixo: o que fica FORA dos cards, direto sobre o fundo preto. */
h1 {
  font-size: var(--text-3xl);
  margin: 0;
  letter-spacing: -0.3px;
  color: var(--ink-sobre-preto);
}

.marca--configuracoes h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.2px;
}

h1 .sufixo {
  font-weight: var(--weight-medium);
  color: var(--ouro);
}

.subtitle {
  color: var(--ink-sobre-preto-suave);
  margin-top: 2px;
  margin-bottom: 0;
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.subtitle strong {
  color: var(--ink-sobre-preto);
}

.subtitle code {
  color: var(--ink);
}

/* Titulo de secao fora de cartao — hoje, a "Area do gerente" dentro de Minha
   conta. Separa dois assuntos na mesma pagina sem virar outra tela. */
.titulo-secao {
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  /* Fora do cartao o fundo e o preto do painel: a cor do texto vem de la, e nao
     a do corpo, senao o titulo some. */
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--ink-sobre-preto);
  font-size: var(--text-2xl);
}

.subtitle--bloco {
  margin-top: var(--space-3);
  margin-bottom: var(--space-7);
}

.subtitle code {
  background: var(--superficie-suave);
  padding: 1px 5px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}

a.voltar {
  color: var(--brand-700);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}

a.voltar:hover {
  text-decoration: underline;
}

/* Logo da loja no canto superior direito.
   Sem plaqueta de fundo: a logo usada é a horizontal de fundo transparente, e
   nela o carro e o "buy your dream" são claros/escuros sobre nada — um fundo
   preto atrás faria esses elementos sumirem. Ela assenta direto no cabeçalho.
   Se um dia entrar uma logo de fundo escuro, aí sim vale voltar a plaqueta. */
.logo-loja {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* Limita por altura E por largura: assim o cabeçalho não muda de tamanho
   dependendo da proporção do arquivo que a loja enviar. */
.logo-loja img {
  height: 72px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
}

/* --- O canto de cima à direita ---------------------------------------------
   (ver cantoDoTopo, em sidebar.js): a logo da loja. Entre 21 e 26/10/2026 a
   engrenagem dos "Ajustes do dia" (token do Itaú) dividia o canto com ela; o
   Itaú voltou atrás e a engrenagem saiu. Sem a logo, o bloco nem existe. */
.topo-direita {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* --- Identidade da loja, na tela de Configurações ------------------------ */

.marca-logo-linha {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* A prévia tem fundo preto de propósito: é sobre o preto do cabeçalho que a
   logo vai aparecer de verdade. Numa prévia sobre branco, uma logo de contorno
   escuro pareceria certa aqui e sumiria lá. */
.marca-logo-previa {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 84px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--brand-900);
}

.marca-logo-previa img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.marca-logo-vazia {
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.marca-logo-acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.btn-remover-logo {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--bad-text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.btn-remover-logo:hover {
  background: var(--bad-bg);
  border-color: var(--bad-border);
}

.acoes-topo {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

.btn-menu {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  line-height: 1;
}

.btn-menu:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

.btn-menu svg {
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.card h2 {
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0;
  margin-bottom: var(--space-5);
  color: var(--brand-700);
  font-weight: var(--weight-bold);
}

/* ==========================================================================
   Formulário
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.grid .full {
  grid-column: 1 / -1;
}

/* Três colunas, para o bloco em que os campos são irmãos e curtos — as três
   senhas da troca de senha. Em duas colunas sobraria uma célula vazia no canto,
   que é o buraco que esta tela ganhou ao virar larga. */
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Uma coluna, para o bloco que PERDEU um campo em tempo de execução — hoje só
   o card do F&I, quando a loja não tem portais cadastrados. Sem isto o card
   ficaria com metade da largura em branco, que é o defeito que esta tela já
   corrigiu uma vez. */
.grid--um {
  grid-template-columns: 1fr;
}

label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.campo {
  margin-bottom: var(--space-5);
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* A seta padrão do sistema operacional destoa do resto do formulário (muda de
   cara em cada Windows), então o select desenha a dele. */
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
  cursor: pointer;
}

input:disabled,
select:disabled {
  background: var(--superficie-suave);
  color: var(--ink-faint);
}

/* O único campo de texto longo do sistema é o código da licença, que vem numa
   linha só e comprida: fonte de largura fixa para conferir o que foi colado, e
   sem o canto de arrastar, que só serviria para desalinhar o card. */
textarea {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: var(--text-sm);
  resize: vertical;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.checkbox-row label {
  margin-bottom: 0;
  font-weight: var(--weight-normal);
}

.checkbox-row--alinhado {
  margin-top: var(--space-7);
}

.parcelas-check {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}

.parcelas-check label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--weight-normal);
  font-size: var(--text-base);
}

.bloco-parcelas {
  margin-top: var(--space-4);
}

/* ==========================================================================
   Portais parceiros (card do gerente, em conta.html)

   Etiquetas em linha, com o x de cada uma: é uma lista de nomes curtos que
   cresce e encolhe, e uma linha por portal faria quinze linhas de cartão para
   dizer quinze palavras.
   ========================================================================== */

.lista-origens {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.item-origem {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--superficie-suave);
  font-size: var(--text-md);
}

.btn-tirar-origem {
  border: none;
  background: none;
  padding: 0 var(--space-1);
  color: var(--ink-faint);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}

.btn-tirar-origem:hover {
  color: var(--bad-text);
}

/* No lugar do print que não abriu (ver historico.js). */
.print-ausente {
  padding: var(--space-4) var(--space-5);
  border: 1px dashed var(--line-forte);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
  color: var(--ink-soft);
  font-size: var(--text-md);
}

/* O recado que fica embaixo de um campo quando a lista dele não veio (ver
   app.js). Vermelho porque é pendência, não dica. */
.aviso-do-campo {
  display: block;
  margin-top: var(--space-2);
}

.campo-senha {
  position: relative;
}

.campo-senha input {
  padding-right: 64px;
}

.btn-mostrar-senha {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--brand-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}

small.hint {
  color: var(--ink-faint);
  font-weight: var(--weight-normal);
}

.campo small.hint,
.grid small.hint {
  display: block;
  margin-top: var(--space-2);
}

/* ...menos quando a dica está DENTRO do rótulo ("Complemento opcional"). Ali o
   `display: block` acima quebrava o rótulo em duas linhas, e numa grade isso
   empurra só aquele campo para baixo: os dois da mesma linha deixavam de
   começar na mesma altura, que é o tipo de desalinhamento que a tela inteira
   paga. */
.campo label small.hint {
  display: inline;
  margin-top: 0;
  margin-left: var(--space-2);
}

/*
 * `display: block` acima vence o `[hidden]` do navegador, que é regra de
 * agente do usuário e perde para qualquer classe. Sem esta linha, uma dica
 * marcada como escondida no HTML aparece assim mesmo — foi o que aconteceu com
 * o "já existe uma senha guardada" da tela de Estoque, que numa máquina sem
 * senha nenhuma dizia o contrário do que era verdade.
 */
.campo small.hint[hidden],
.grid small.hint[hidden] {
  display: none;
}

.consent-box {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: #78350f;
}

.valor-financiar-preview {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--brand-100);
  border: 1px solid var(--ouro);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  color: var(--brand-900);
}

.valor-financiar-preview strong {
  font-size: var(--text-xl);
}

.valor-financiar-preview .obs {
  display: block;
  font-size: var(--text-sm);
  color: var(--brand-700);
  opacity: 0.75;
  margin-top: 3px;
}

/* ==========================================================================
   Botões
   ========================================================================== */

/* Dourado com texto preto: é a cor da marca e o contraste funciona (dourado
   como TEXTO sobre branco não funcionaria, mas como fundo sim). */
button.primary {
  background: linear-gradient(135deg, var(--ouro), var(--ouro-escuro));
  color: #141414;
  border: none;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 0.01em;
  cursor: pointer;
  width: 100%;
  box-shadow: var(--shadow-button);
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}

button.primary:disabled {
  background: #6b6257;
  color: #b9b2a8;
  box-shadow: none;
  cursor: not-allowed;
}

button.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-button-hover);
}

.btn-toggle-print {
  margin-top: var(--space-4);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.btn-toggle-print:hover {
  background: var(--superficie-suave);
  border-color: var(--brand-500);
  color: var(--brand-700);
}

/* ==========================================================================
   Status
   ========================================================================== */

#status {
  text-align: center;
  margin: var(--space-4) 0;
  font-size: var(--text-md);
  color: var(--ink-sobre-preto-suave);
  min-height: 20px;
}

/* Sobre o preto, o verde e o vermelho dos tokens ficam escuros demais. */
#status.ok {
  color: #4ade80;
  font-weight: var(--weight-semibold);
}

#status.erro {
  color: #f87171;
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   Resultados das simulações
   ========================================================================== */

/* Os resultados: o veículo, os avisos da rodada e, no meio, a GRADE dos bancos com o cartão do Histórico
   (19/10/2026, pedido das lojas: "todas ao mesmo tempo, sem precisar rolar"). Mais larga que o formulário — a
   página tem 980px, e os bancos precisam de espaço para caberem juntos (quatro por linha numa tela comum) —,
   centrada no mesmo eixo dele e sem passar da tela. */
.resultados {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: min(1500px, calc(100vw - 140px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* O veículo e os avisos da rodada ficam na largura do formulário; só a grade dos bancos se alarga. */
.resultados > :not(.resultados-bancos) {
  width: 100%;
  max-width: var(--largura-pagina);
  align-self: center;
}

/* A GRADE DOS BANCOS — uniforme sempre (19/10/2026, dono: "todas no mesmo padrão, independente do
   resultado... preencha os espaços e deixe tudo organizado").

   - Colunas IGUAIS que ocupam a largura toda: quatro por linha quando cabem; com menos bancos, a grade
     encolhe (--bancos, contado em desenharResultados) em vez de deixar colunas vazias de um lado.
   - Cada cartão tem SEIS faixas (acordo, banco, condições, parcelas, avisos, botões) e usa as linhas da
     grade (subgrid): a faixa de um cartão tem a altura da maior faixa igual da linha. Os nomes ficam na
     mesma altura, as parcelas na mesma altura e os botões no pé de todos — e todos os cartões da linha
     terminam juntos, aprovado ou não. */
.resultados-bancos {
  --colunas: var(--bancos, 4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  column-gap: var(--space-4);
  row-gap: 0;
  width: 100%;
  max-width: calc(var(--colunas) * 360px + (var(--colunas) - 1) * var(--space-4));
  margin: 0 auto;
}

.resultado-banco {
  display: grid;
  grid-row: span 6;
  grid-template-rows: subgrid;
  row-gap: 0;
  min-width: 0;
  margin-bottom: var(--space-4);
}

/* Faixa com conteúdo ganha o respiro de cima; faixa vazia não ocupa nada. */
.resultado-banco > .rb:not(:empty) + .rb:not(:empty) {
  padding-top: var(--space-3);
}

.resultado-banco > .rb:empty {
  padding: 0;
}

/* A faixa de cima — do acordo ou da situação — encosta no topo e nas bordas do cartão e estica até a altura
   da maior faixa da linha: todos os cartões abrem com um cabeçalho do mesmo tamanho. */
.resultado-banco > .rb--faixa {
  display: flex;
  flex-direction: column;
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
}

.resultado-banco > .rb--faixa > .faixa-acordo,
.resultado-banco > .rb--faixa > .faixa-situacao {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

.faixa-situacao {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
  text-align: center;
  text-transform: uppercase;
}

.faixa-situacao--ok {
  background: var(--ok-bg);
  color: var(--ok-text);
  border-bottom: 1px solid var(--ok-border);
}

.faixa-situacao--ruim {
  background: var(--bad-bg);
  color: var(--bad-text);
  border-bottom: 1px solid var(--bad-border);
}

.faixa-situacao--neutro {
  background: var(--superficie-suave);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.faixa-situacao--chance-alta {
  background: #e3f2fa;
  color: #0b6f9c;
  border-bottom: 1px solid #b6dcef;
}

.faixa-situacao--chance-boa {
  background: var(--ok-bg);
  color: var(--ok-text);
  border-bottom: 1px solid var(--ok-border);
}

.faixa-situacao--chance-menor {
  background: var(--superficie-suave);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-forte);
}

.resultado-banco .detalhe-banco__topo {
  margin-bottom: 0;
}

.resultado-banco .rb--topo .badge-melhor {
  display: inline-block;
  margin: var(--space-2) 0 0;
}

.resultado-banco .detalhe-parcelas {
  margin-top: 0;
}

.resultado-banco__motivo {
  color: var(--ink);
}

.resultado-banco .rb--avisos > * + * {
  margin-top: var(--space-2);
}

.resultado-banco .rb--avisos > * {
  margin-bottom: 0;
}

.parcela-chip.parcela-chip--melhor {
  border-width: 2px;
  font-weight: var(--weight-semibold);
}

/* "sem parcelas": ocupa o lugar das parcelas no banco que não aprovou, apagado, para a faixa não ficar oca. */
.parcela-chip.parcela-chip--vazia {
  background: var(--superficie-suave);
  border-color: var(--line);
  border-style: dashed;
  color: var(--ink-faint);
}

/* O pé do cartão: o traço e os botões começam na mesma altura em todos os cartões da linha. */
.resultado-banco > .rb--acoes {
  align-self: stretch;
  align-content: start;
}

/* Os botões do cartão numa faixa só, lado a lado (quebram para a linha de baixo quando não cabem). Os blocos
   de seguir e de refazer "somem" como caixa — os botões deles entram na mesma faixa — e o que não é botão
   (andamento do seguir, aviso do refazer, o print aberto) ocupa a linha inteira. */
.resultado-banco__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line);
}

/* Um botão só (banco que não aprovou: só o refazer) fica do tamanho da linha toda, sem meia linha vazia. */
.resultado-banco__acoes > button:only-child,
.resultado-banco__acoes > .refazer-bloco:only-child > button {
  grid-column: 1 / -1;
}

.resultado-banco__acoes .seguir-bloco,
.resultado-banco__acoes .refazer-bloco {
  display: contents;
}

.resultado-banco__acoes > *:not(button),
.resultado-banco__acoes .seguir-bloco > *:not(button),
.resultado-banco__acoes .refazer-bloco > *:not(button) {
  grid-column: 1 / -1;
}

.resultado-banco__acoes button {
  margin: 0;
  width: 100%;
  justify-content: center;
  text-align: center;
}

.resultado-banco .btn-cancelar-refazer {
  grid-column: 1 / -1;
}

.banco-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);

  /* Faixa na cor da marca do banco (definida em bancos-visual.js e injetada como
     --cor-marca no próprio card). Fica na borda esquerda, larga o bastante pra
     ser lida de relance sem competir com o status do card, que é o verde ou o
     vermelho do fundo. */
  border-left: 6px solid var(--cor-marca, var(--line));
}

.banco-card.aprovado {
  border-color: var(--ok-border);
  background: var(--ok-bg);
}

.banco-card.reprovado {
  border-color: var(--bad-border);
  background: var(--bad-bg);
}

.banco-card.erro {
  border-color: var(--warn-border);
  background: var(--warn-bg);
}

/* As regras de status acima pintam a borda inteira, inclusive a esquerda. Esta
   devolve a faixa da marca: mesma especificidade, declarada depois. São dois
   sinais diferentes no mesmo card e os dois precisam sobreviver — a faixa diz
   QUAL banco é, o fundo diz COMO foi o resultado. */
.banco-card.aprovado,
.banco-card.reprovado,
.banco-card.erro,
.banco-card.chance-alta,
.banco-card.chance-boa,
.banco-card.chance-menor {
  border-left-color: var(--cor-marca, var(--line));
}

.banco-nome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
  letter-spacing: -0.1px;
}

/* Mesma lista de andamento da tela de espera, agora num card claro (o teste de
   login do dashboard). Só as cores mudam — a estrutura e a animação são as
   mesmas, pra quem já viu uma reconhecer a outra. */
.lista-progresso {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

.lista-progresso .linha-banco {
  background: var(--superficie-suave);
  color: var(--ink-soft);
  font-size: var(--text-base);
}

.lista-progresso .linha-banco.consultando {
  background: #fff8e6;
  color: var(--ink);
}

.lista-progresso .linha-banco.concluido {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.lista-progresso .linha-banco.concluido .marca {
  color: var(--ok-text);
}

.lista-progresso .linha-banco.falhou {
  background: var(--bad-bg);
  color: var(--bad-text);
}

.lista-progresso .linha-banco.falhou .marca {
  color: var(--bad-text);
}

.lista-progresso .girando-mini {
  border-color: rgba(215, 159, 32, 0.25);
  border-top-color: var(--ouro-escuro);
}

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

/* O banco simulou um veículo diferente do informado (hoje: câmbio divergente).
   Amarelo de atenção, não vermelho: a simulação existe e os números são reais —
   só podem não ser deste carro. */
/* Dois avisos, mesma moldura: o do veiculo fala desta simulacao, o da senha
   fala do acesso que faz as proximas (ver app.js). */
/* O terceiro, do retorno, fala da comissão desta simulação: o robô não
   conseguiu aplicar ou confirmar, ou aplicou outro valor — e a parcela muda
   com isso (ver frasesDoRetorno, em src/banks/utils.ts). */
.aviso-veiculo,
.aviso-senha,
.aviso-retorno {
  margin: var(--space-2) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
  color: var(--warn-text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* ==========================================================================
   Quem faz as simulações (Configurações)
   ========================================================================== */

.lista-operadores {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.item-operador {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--superficie-suave);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.btn-remover-operador {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.btn-remover-operador:hover {
  color: var(--bad-text);
}

.operador-vazio {
  color: var(--ink-faint);
  font-size: var(--text-md);
}

.novo-operador {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.novo-operador input {
  flex: 1 1 240px;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  color: var(--ink);
}

.btn-add-operador {
  padding: var(--space-3) var(--space-5);
  border: none;
  border-radius: var(--radius-md);
  background: var(--logo-fundo);
  color: var(--logo-texto);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.status-operadores {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  color: var(--ink-faint);
}

.status-operadores.ok {
  color: var(--ok-text);
}

.status-operadores.erro {
  color: var(--bad-text);
}

/* ==========================================================================
   Filtro de período do dashboard
   ========================================================================== */

.filtro-periodo {
  margin-bottom: var(--space-4);
}

.filtro-periodo__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Altura próxima à do "Personalizar painel" logo acima: dois grupos de botões
   empilhados com tamanhos diferentes fazem a página parecer desalinhada. */
.btn-periodo {
  padding: var(--space-4) var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-sobre-preto-suave);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.btn-periodo:hover {
  color: var(--ink-sobre-preto);
  border-color: rgba(255, 255, 255, 0.35);
}

/* O período escolhido precisa ser óbvio: quem lê um relatório tem que saber de
   que recorte ele é, senão compara semana com mês sem perceber. */
.btn-periodo.ativo {
  background: var(--logo-fundo);
  border-color: transparent;
  color: var(--logo-texto);
}

.filtro-periodo__datas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--ink-sobre-preto-suave);
  font-size: var(--text-base);
}

.filtro-periodo__datas[hidden] {
  display: none;
}

.filtro-periodo__datas input {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-base);
}

.btn-aplicar-periodo {
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--logo-fundo);
  color: var(--logo-texto);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.filtro-periodo__resumo {
  margin-top: var(--space-3);
  color: var(--ink-faint);
  font-size: var(--text-md);
}

/* ==========================================================================
   Tela do cliente
   ==========================================================================
   Feita para ser lida do outro lado da mesa, de longe e de lado: fonte grande,
   pouca informação por tela, contraste alto. É o oposto do painel do vendedor,
   que é denso de propósito. */

.btn-mostrar-cliente {
  width: 100%;
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  border: none;
  border-radius: var(--radius-md);
  background: var(--logo-fundo);
  color: var(--logo-texto);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

/* Dentro do card de um banco o botão é o mesmo, menor.
   Era um só, no topo da lista, abrindo os sete resultados juntos; virou um por
   banco em 05/10/2026, para o vendedor mostrar a condição que ele escolheu
   defender em vez de entregar uma tabela comparativa ao cliente. Aqui ele
   divide espaço com "Seguir no banco", então desce um corpo de letra e para de
   ocupar a largura inteira — continua dourado porque continua sendo a ação
   principal daquele card. */
.btn-mostrar-cliente--banco {
  width: auto;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  /* Só contorno, como o "Cancelar simulação" da tela de espera: com sete cards
     empilhados, dois botões dourados cheios em cada um viram uma parede de
     dourado e nenhum dos dois chama mais que o outro. O cheio fica para o
     "Seguir no banco", que é o passo que move a proposta.
     Em fundo claro o dourado da logo quase some, então aqui vale o escuro da
     mesma família — é o que o resto do sistema já usa para tinta dourada sobre
     branco. */
  background: transparent;
  border: 1px solid var(--ouro-escuro);
  color: var(--ouro-escuro);
  box-shadow: none;
}

.btn-mostrar-cliente--banco:hover {
  background: rgba(244, 190, 65, 0.12);
}

.tela-cliente {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  background: var(--surface);
  padding: var(--space-7) var(--space-6) var(--space-8);
}

.tela-cliente[hidden] {
  display: none;
}

/* Trava a rolagem do painel atrás, senão o vendedor rola a página errada. */
body.sem-rolagem {
  overflow: hidden;
}

.btn-fechar-cliente {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.tela-cliente__conteudo {
  max-width: 900px;
  margin: 0 auto;
  /* Espaço para o botão "Voltar", que flutua no canto: sem isso ele encavala no
     nome da loja em tela estreita. */
  padding-top: var(--space-6);
}

.cliente-topo {
  text-align: center;
  margin-bottom: var(--space-7);
}

.cliente-marca {
  font-size: var(--text-xl);
  font-weight: var(--weight-black);
  letter-spacing: 2px;
  color: var(--ouro-escuro);
}

.cliente-marca span {
  color: var(--ink-faint);
  font-weight: var(--weight-semibold);
}

.cliente-veiculo {
  margin-top: var(--space-5);
  font-size: 26px;
  line-height: var(--leading-tight);
  color: var(--ink);
}

.cliente-placa {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 2px var(--space-3);
  border: 2px solid var(--line-forte);
  border-radius: var(--radius-sm);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 1px;
  color: var(--ink-soft);
  vertical-align: middle;
}

.cliente-valor {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  color: var(--ink-soft);
}

.cliente-valor strong {
  color: var(--ink);
}

.cliente-opcoes {
  display: grid;
  gap: var(--space-5);
}

.opcao-cliente {
  border: 1px solid var(--line);
  border-left: 8px solid var(--cor-marca, var(--line));
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-card);
}

.opcao-cliente__banco {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
}

/* A taxa saiu desta tela em 30/09/2026 e o estilo dela foi junto (ver app.js).
   Ela continua na tela do vendedor, com estilo próprio (.banco-taxa). */

/* Quanto este banco financia. Fica entre o nome e as parcelas porque é o que
   dá sentido a elas — lido depois dos números, chega tarde. */
.opcao-cliente__financiado {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
  font-size: var(--text-lg);
  color: var(--ink-soft);
}

/* Banco que liberou menos que o pedido: destaque discreto, sem alarme. Não é
   má notícia — é outra condição, e o cliente precisa saber qual é. */
.opcao-cliente__financiado--menor {
  color: var(--ink);
}

.opcao-cliente__pedido {
  font-size: var(--text-base);
  color: var(--ink-faint);
}

/* Uma coluna por prazo, igual em todos os bancos: é o que deixa o 48x de um
   ficar exatamente embaixo do 48x do outro. Com larguras livres, um banco com
   cinco prazos e outro com quatro desalinhavam a tela inteira. */
.opcao-cliente__parcelas {
  display: grid;
  /* `minmax(0, 1fr)` em vez de `1fr`: sem isso, um valor largo empurra a coluna
     e o alinhamento entre bancos se perde justamente onde ele mais importa. */
  grid-template-columns: repeat(var(--colunas, 5), minmax(0, 1fr));
  gap: var(--space-3);
}

/* Altura reservada: numa janela estreita o valor quebra em duas linhas, e sem
   altura fixa o card do banco com mais prazos ficava mais alto que os outros —
   que foi o que deixou os números do C6 parecendo maiores que os do Itaú. */
.parcela-cliente {
  min-width: 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
  text-align: center;
}

/* Faixa dourada translúcida: separa o prazo do valor sem competir com ele. */
.parcela-cliente .vezes {
  display: block;
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) var(--space-2);
  padding: 2px 0;
  border-radius: var(--radius-sm);
  background: rgba(244, 190, 65, 0.22);
  font-size: var(--text-md);
  font-weight: var(--weight-black);
  color: var(--ouro-escuro);
  letter-spacing: 0.5px;
}

/* Tamanho relativo à largura da janela: num monitor de mesa sai grande, de ler
   do outro lado da mesa; numa janela estreita encolhe em vez de estourar a
   coluna. A altura reservada acima absorve a quebra, quando houver. */
.parcela-cliente .valor {
  display: block;
  font-size: clamp(13px, 1.5vw, 23px);
  font-weight: var(--weight-black);
  color: var(--ink);
  line-height: var(--leading-tight);
}

/* Banco que não ofereceu aquele prazo: a coluna continua ali, apagada. */
.parcela-cliente--vazia {
  background: transparent;
  border: 1px dashed var(--line);
}

.parcela-cliente--vazia .vezes {
  background: transparent;
  color: var(--ink-faint);
}

.parcela-cliente--vazia .valor {
  color: var(--ink-faint);
  font-weight: var(--weight-semibold);
}

/* Cinco prazos lado a lado precisam de uns 760px pra caber com o valor legível.
   Abaixo disso a tela reduz as colunas: perde-se o alinhamento entre bancos,
   mas numa janela assim não se vê dois bancos ao mesmo tempo de qualquer jeito —
   e valor cortado seria pior que coluna desalinhada. */
@media (max-width: 760px) {
  .opcao-cliente__parcelas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .opcao-cliente__parcelas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cliente-vazio {
  text-align: center;
  font-size: var(--text-xl);
  color: var(--ink-soft);
  padding: var(--space-8) 0;
}

/* O aviso não é formalidade: simulação não é aprovação, e prometer demais na
   frente do cliente cobra caro depois. */
.cliente-rodape {
  margin-top: var(--space-7);
  text-align: center;
  font-size: var(--text-base);
  color: var(--ink-faint);
}

/* ==========================================================================
   Chance de aprovação (Safra)
   ==========================================================================
   As três cores da régua do próprio portal: azul = maior chance, verde = boa,
   cinza = menor. O banco já ensinou essa linguagem ao lojista — repeti-la aqui
   é mais barato que inventar outra.

   O texto de cada nível é sempre escrito por extenso junto da cor. A cor sozinha
   diria a coisa certa só para quem enxerga as três, e "cinza x verde x azul" é
   justamente um trio que some em algumas formas de daltonismo. */
.chance-alta {
  color: #0b6f9c;
}

.chance-boa {
  color: var(--ok-text);
}

.chance-menor {
  color: var(--ink-soft);
}

.banco-card.chance-alta {
  border-color: #a8dbef;
  background: #f2fafd;
}

.banco-card.chance-boa {
  border-color: var(--ok-border);
  background: var(--ok-bg);
}

.banco-card.chance-menor {
  border-color: var(--line-forte);
  background: var(--superficie-suave);
}

/* Pílula da chance na coluna "Situação" de cada prazo. */
.pilula-chance {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  border: 1px solid currentColor;
}

/* Aviso de cliente já conhecido, abaixo do campo de CPF. Discreto de propósito:
   é uma oferta, não um alerta — o formulário funciona igual sem ele. */
.cliente-conhecido {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.btn-usar-dados {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--ouro-escuro);
  background: transparent;
  color: var(--ouro-escuro);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
}

.btn-usar-dados:hover {
  background: var(--ouro);
  color: var(--logo-texto);
}

/* Ação no fim do detalhe de uma simulação do histórico.
   `grid-column: 1 / -1` porque o detalhe é uma grade de cards de banco: sem
   isso a ação ocupa uma célula e deixa metade da linha vazia ao lado. */
.detalhe-acoes {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* O botão herda `button.primary` da tela principal: é a mesma ação, "rodar uma
   simulação", e repetir a aparência poupa ter que reconhecer um botão novo.
   Ele já vem com largura total, que é o que fecha o bloco do detalhe. */

/* Card de banco na tela de Configurações: mesma faixa e mesmo selo dos cards de
   resultado, pra a cor significar a mesma coisa nas três telas. */
.card--banco {
  border-left: 6px solid var(--cor-marca, var(--line));
}

.card--banco h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* A caixinha que diz se a loja opera este banco (ver bancos-da-loja.ts). */
.card--banco h2 .campo-ativo {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--brand-500);
  cursor: pointer;
}

/* Banco desmarcado continua na tela — para poder ser remarcado depois, e para
   o usuário e a senha dele não se perderem —, mas apagado: a lista precisa
   dizer de relance o que está valendo.

   Volta ao normal com o mouse em cima ou com o cursor num campo de dentro.
   Apagado não pode virar ilegível justamente para quem foi mexer ali. */
.card--banco-inativo {
  opacity: 0.45;
}

.card--banco-inativo:hover,
.card--banco-inativo:focus-within {
  opacity: 1;
}

/* --- Religar a sessão de um banco --------------------------------------- */

.campo--relogin {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

/* "Limpar sessão": irmão menor do "Entrar de novo", ao lado dele.
   Sem contorno e em tinta fraca de propósito — é o remédio do caso raro, e quem
   precisa dele chega aqui mandado pela mensagem de falha, não procurando. Botão
   de peso igual ao lado convidaria a limpar sessão por desencargo, e cada
   limpeza custa um login a mais na simulação seguinte. */
/* Um computador da loja, na lista do plano. Nome à esquerda, quando foi visto
   pela última vez no meio, e o "Remover" no fim — que reusa o botão discreto do
   "Limpar sessão" logo abaixo: as duas ações são do mesmo tipo, raras e com
   consequência, e nenhuma delas deve convidar ao clique. */
.maquina-linha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--text-base);
}

.maquina-linha:last-child {
  border-bottom: none;
}

/* Nome e ficha numa coluna; o "visto em" e o botão continuam à direita. */
.maquina-dados {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.maquina-nome {
  color: var(--ink);
}

.maquina-ficha {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* O que precisa ser enxergado sem ler a linha inteira: computador sem os logins
   dos bancos não simula em banco nenhum, e isso não pode ter a mesma cor do
   resto da frase. Serve à lista de máquinas e à tela de entrada na loja — é a
   mesma informação, vista de dois lugares. */
.aviso-forte {
  color: var(--bad-text);
  font-weight: var(--weight-semibold);
}

/* A conferência de Minha conta: um valor curto e forte embaixo do rótulo. */
.conferencia-valor {
  color: var(--ink);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) 0;
}

/* Com as duas classes, a cor do alerta precisa ganhar: as duas são de um
   seletor só, e aí quem vence é a que estiver mais abaixo no arquivo — foi
   assim que "Faltam 2: C6 Bank, Banco Safra" saiu preto no primeiro desenho. */
.conferencia-valor.aviso-forte {
  color: var(--bad-text);
}

/* O cartão de uma pessoa, aberto pelo nome dela na lista de contas. */
.item-usuario-nome--abre {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.item-usuario-cartao {
  flex-basis: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--superficie-suave);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.cartao-linha {
  margin-bottom: var(--space-2);
}

.cartao-maquina {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
}

.cartao-maquina-nome {
  color: var(--ink);
}

.cartao-maquina-ficha {
  color: var(--ink-faint);
}

/* O que entrou nesta máquina quando ela acabou de entrar na loja. */
.lista-do-que-veio {
  margin: var(--space-4) 0;
  padding-left: var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.maquina-visto {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

.btn-limpar-sessao {
  margin-left: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-limpar-sessao:hover:not(:disabled) {
  color: var(--ink);
}

.btn-limpar-sessao:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

.btn-relogin {
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--line-forte);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-family: inherit;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.btn-relogin:hover {
  background: var(--superficie-suave);
}

.btn-relogin:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Borda dourada: é um aviso de ação em curso, e precisa saltar no meio de sete
   cards de banco que se parecem todos. */
.card--relogin {
  border: 2px solid var(--ouro);
}

.relogin-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.relogin-acoes .primary {
  width: auto;
  margin: 0;
}

/* --- Cofre das senhas dos bancos ---------------------------------------- */

.cofre-linha {
  margin: 0 0 var(--space-3);
}

.cofre-linha--ok {
  color: var(--ok-text);
}

.cofre-linha--erro {
  color: var(--bad-text);
}

/* ==========================================================================
   Contas: tela de entrada, pé do menu e a lista de quem tem acesso
   ========================================================================== */

/* --- Tela de entrada ---------------------------------------------------- */

.tela-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-6);
}

.login-caixa {
  width: 100%;
  max-width: 420px;
}

.login-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.login-logo-loja img {
  height: 56px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  display: block;
}

.login-carregando {
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* --- Pé do menu lateral -------------------------------------------------- */

/* `margin-top: auto` empurra para baixo: o menu é uma coluna, e sem isso o
   rodapé ficaria colado nos itens, no meio da tela. */
.menu-rodape {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) 0;
  border-top: 1px solid var(--line);
}

.menu-usuario,
.menu-sair {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  color: var(--menu-texto);
  text-decoration: none;
  font-size: var(--text-md);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.menu-usuario:hover,
.menu-sair:hover {
  background: var(--superficie-suave);
  color: var(--ink);
}

/* A inicial faz as vezes do nome quando o menu está recolhido — recolhido só
   cabem os ícones, e sem ela não haveria como saber quem está logado sem
   abrir o menu. */
.menu-usuario-inicial {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--logo-fundo);
  color: var(--logo-texto);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.menu-usuario-textos {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--leading-tight);
}

.menu-usuario-nome {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-usuario-papel {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.menu-sair svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* --- Lista de contas, em Configurações ---------------------------------- */

.lista-usuarios {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.item-usuario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.item-usuario-quem {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.item-usuario-nome {
  font-weight: var(--weight-semibold);
}

.item-usuario-papel {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  background: var(--superficie-suave);
  color: var(--ink-soft);
}

.item-usuario-papel--gerente {
  background: var(--brand-100);
  color: var(--ouro-escuro);
}

/* O F&I fica entre os dois: não é o dourado do gerente, mas também não é o
   cinza de quem só simula — é quem passa a ficha da loja. */
.item-usuario-papel--fi {
  background: var(--ok-bg);
  color: var(--ok-text);
}

/* A plaqueta do papel é um `select` (ver gerente.js): a seta do navegador fica,
   porque é ela que diz que aquilo muda — o resto herda a fonte da linha para a
   ficha da pessoa não virar um formulário. */
select.item-usuario-papel {
  border: 1px solid var(--line);
  font-family: inherit;
  cursor: pointer;
}

/* A saída de "este computador não é desta loja", no pé da tela de entrada.
   Discreta de propósito: quem precisa dela está instalando a máquina, e quem
   só errou a senha não pode tropeçar num botão que apaga a loja. */
.link-maquina-nova {
  display: block;
  width: 100%;
  margin-top: var(--space-5);
  padding: var(--space-2);
  border: none;
  background: none;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  cursor: pointer;
}

.link-maquina-nova:hover {
  color: var(--ink-soft);
}

/* "para Bia", embaixo de quem simulou: é o vendedor dono do atendimento quando
   quem rodou a simulação foi o F&I (ver historico.js). Discreto de propósito —
   a coluna continua sendo de quem simulou. */
.historico-para-quem,
.historico-origem {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* "simulou no seu nome": a simulação que o F&I fez para o vendedor aparece no Histórico dele, e a marca
   diz de quem é o nome ao lado. Dourado discreto, para ser visto sem gritar. */
.historico-para-quem--voce {
  display: block;
  width: fit-content;
  margin-top: 2px;
  padding: 1px var(--space-3);
  border: 1px solid #e09200;
  border-radius: var(--radius-pill);
  background: #fff3cf;
  color: #7a4a00;
  font-weight: var(--weight-bold);
}

#lista-historico .linha-simulacao[aria-expanded="true"] .historico-para-quem--voce {
  background: transparent;
  color: #f7b500;
  border-color: #f7b500;
}

.item-usuario-acoes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-usuario {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-family: inherit;
  cursor: pointer;
}

.btn-usuario:hover {
  background: var(--superficie-suave);
  color: var(--ink);
}

.btn-usuario--remover {
  color: var(--bad-text);
  font-size: var(--text-lg);
  line-height: 1;
  padding: 2px var(--space-3);
}

.btn-usuario--remover:hover {
  background: var(--bad-bg);
  border-color: var(--bad-border);
  color: var(--bad-text);
}

.novo-usuario {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.novo-usuario input,
.novo-usuario select {
  flex: 1 1 140px;
  min-width: 0;
}

/* Selo com a sigla do banco, na cor da marca. Some para leitores de tela
   (aria-hidden no HTML): o nome do banco vem logo ao lado, e ouvir "BV BV
   Financeira" não ajuda ninguém. */
.banco-selo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.3px;
}

.banco-retorno {
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}

.banco-taxa {
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-bottom: var(--space-2);
}

/* O "média dos prazos" fica menor que a taxa, mas continua legível: é a
   ressalva de que aquele número não é a taxa de nenhum prazo isolado. */
.taxa-media {
  font-size: var(--text-xs);
  opacity: 0.85;
}

.banco-status {
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
  font-weight: var(--weight-semibold);
}

.banco-status.ok {
  color: var(--ok-text);
}

.banco-status.ruim {
  color: var(--bad-text);
}

.banco-status.erro {
  color: var(--warn-text);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  margin-top: var(--space-3);
}

/* Cabeçalho e divisórias com peso: numa tabela larga, linha fina e texto claro
   fazem o olho perder a linha no meio do caminho. */
th {
  text-align: left;
  padding: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--weight-bold);
  border-bottom: 2.5px solid var(--line-forte);
}

td {
  text-align: left;
  padding: var(--space-4) var(--space-3);
  color: var(--ink);
  border-bottom: 2px solid var(--line-forte);
}

/* Dentro dos cards de resultado a tabela é curta — ali a linha mais leve basta. */
.banco-card td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.valor-comparacao {
  font-size: var(--text-base);
  margin-bottom: var(--space-1);
}

.aviso-diferente {
  color: var(--warn-text);
  font-weight: var(--weight-semibold);
}

.contraproposta {
  margin-top: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: #fff7ed;
  border: 1.5px solid #fdba74;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: #9a3412;
}

/* A entrada necessária fica DENTRO da caixa de contraproposta, separada por uma
   linha: é a resposta da pergunta que a contraproposta acabou de levantar, não
   um assunto novo. */
.entrada-necessaria {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid #fdba74;
}

.entrada-diferenca {
  color: #b45309;
}

/* O CARD DO BANCO COM ACORDO DO MES.

   Primeira versao (02/10/2026): moldura fina e uma pilula azul ao lado do nome.
   Levou o veredito do balcao no mesmo dia — "nao chama atencao". Esta versao
   empilha quatro sinais no mesmo card, porque o vendedor olha a tela de relance
   com o cliente na frente: faixa dourada no topo, moldura grossa, brilho em
   volta e um degrade quente descendo do topo.

   O verde do aprovado continua embaixo, no fundo: a moldura diz PRIORIZE, o
   fundo diz APROVOU, a faixa lateral diz QUAL BANCO. Mesma especificidade das
   regras de status (.banco-card.aprovado) e declarada depois delas — e assim
   que o dourado vence o verde na borda sem apagar o resto.

   A faixa da marca do banco sai da borda esquerda e entra para dentro do card
   (o inset do box-shadow), para o dourado poder dar a volta inteira. */
.banco-card.banco-card--acordo {
  position: relative;
  border-color: #e09200;
  border-width: 3px;
  background: linear-gradient(180deg, #fff3cf 0, var(--ok-bg) 140px);
  box-shadow:
    inset 6px 0 0 var(--cor-marca, transparent),
    0 0 0 4px rgba(224, 146, 0, 0.22),
    0 14px 30px -14px rgba(224, 146, 0, 0.9),
    var(--shadow-card);
}

/* A faixa no topo, colada nas bordas: as margens negativas sao o padding do
   card ao contrario, e o raio e o do card menos os 3px da borda. */
.faixa-acordo {
  margin: calc(var(--space-5) * -1) calc(var(--space-6) * -1) var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: 13px 13px 0 0;
  background: linear-gradient(135deg, #f7b500, #e08700);
  color: #3a2300;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* A linha do gerente dentro da faixa: quanto falta para a meta do acordo. */
.faixa-acordo__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

/* Tres piscadas no instante em que o resultado aparece, e para. Piscar para
   sempre vira enfeite e o olho desliga; piscar na hora em que a tela abre e
   justamente quando ele esta olhando. O anel e um elemento por cima, para nao
   empurrar nada de lugar. */
.banco-card.banco-card--acordo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid rgba(224, 146, 0, 0.9);
  border-radius: var(--radius-lg);
  opacity: 0;
  pointer-events: none;
  animation: acordo-pulso 1.3s ease-out 3;
}

@keyframes acordo-pulso {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  60%,
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}

/* SEGUIR NO BANCO: o botao que leva a simulacao aprovada para o portal (ver
   app.js e seguir-no-banco.ts). Fica no pe do card, separado do resto por uma
   linha: o que vem acima e informacao, o que vem aqui e uma acao que mexe no
   banco. */
.seguir-bloco {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--line-forte);
}

.btn-seguir {
  background: linear-gradient(135deg, var(--ouro), var(--ouro-escuro));
  color: #141414;
  border: none;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  box-shadow: var(--shadow-button);
}

.btn-seguir:disabled {
  background: #d8d3cc;
  color: #8a837a;
  box-shadow: none;
  cursor: not-allowed;
}

.seguir-bloco .hint {
  display: block;
  margin-top: var(--space-2);
}

/* O andamento, enquanto a janela nao aparece. E a mesma espera da simulacao:
   dois minutos calados fazem qualquer um apertar o botao de novo. */
.seguir-andamento {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
  color: var(--ink-soft);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* A mesma bolinha dourada da simulacao (ver .girando-mini), no tamanho de uma
   linha de texto. */
.seguir-bolinha {
  flex: none;
  width: 16px;
  height: 16px;
}

/* O erro tecnico, para quem vai consertar — menor e mais discreto que o
   recado, que e para quem esta atendendo. */
.seguir-detalhe {
  flex-basis: 100%;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  line-height: var(--leading-normal);
}

/* Fechar a janela do banco pela tela: no fim do atendimento sao duas ou tres
   abertas, e enquanto houver uma aberta nao da para simular o proximo
   cliente. */
.btn-fechar-janela {
  flex-basis: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--line-forte);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.btn-fechar-janela:disabled {
  opacity: 0.6;
  cursor: default;
}

.seguir-print {
  flex-basis: 100%;
  color: var(--brand-700);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

.seguir-andamento--ok {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
}

.seguir-andamento--erro {
  background: var(--bad-bg);
  border: 1px solid var(--bad-border);
  color: var(--bad-text);
}

/* O campo do acordo em Configuracoes: caixinha e data na mesma linha.
   O do retorno usa a mesma caixa porque os dois dizem a mesma coisa — o
   comercial da loja com aquele banco — e ficam lado a lado na grade. Blocos
   iguais na mesma linha; um com fundo e outro sem pareceria defeito. */
.campo--acordo,
.campo--retorno {
  background: var(--superficie-suave);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.acordo-linha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  margin-bottom: var(--space-2);
}

.acordo-linha input {
  width: auto;
}

.badge-melhor {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 3px var(--space-4);
  background: linear-gradient(135deg, var(--warn-border), #f59e0b);
  color: #78350f;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  vertical-align: middle;
}

tr.linha-melhor td {
  background: var(--warn-bg);
  font-weight: var(--weight-bold);
}

.selo-melhor {
  color: var(--warn-text);
  font-size: var(--text-sm);
  margin-left: var(--space-2);
  font-weight: var(--weight-semibold);
}

.print-simulacao {
  margin-top: var(--space-4);
}

.print-simulacao img {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: block;
  cursor: zoom-in;
}

.print-simulacao small.hint {
  display: block;
  margin-top: var(--space-1);
}

/* Cabeçalho do veículo, acima dos cards dos bancos. */
.veiculo-identificado {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ouro);
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  color: var(--ink);
}

.veiculo-placa {
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  background: var(--brand-100);
  border: 1px solid var(--ouro);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-3);
  white-space: nowrap;
}

.aviso-proximo-passo {
  margin-top: var(--space-2);
  padding: var(--space-5) var(--space-5);
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: #065f46;
}

/* ==========================================================================
   Tela de espera da simulação
   A simulação leva 1 a 2 minutos e não tem como acelerar (são 6 portais de
   banco respondendo). O objetivo aqui é deixar claro que o sistema está
   trabalhando — com o cronômetro correndo, ninguém acha que travou.
   ========================================================================== */

.overlay-carregando {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-7);
  text-align: center;
  background: rgba(12, 12, 12, 0.82);
  backdrop-filter: blur(3px);
}

.overlay-carregando[hidden] {
  display: none;
}

.girando {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 5px solid rgba(244, 190, 65, 0.22);
  border-top-color: var(--ouro);
  animation: girar 0.9s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

.overlay-titulo {
  color: #fff;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.2px;
}

.overlay-texto {
  color: var(--ink-sobre-preto-suave);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  max-width: 420px;
  margin: calc(var(--space-4) * -1) 0 0;
}

/* Lista de bancos na tela de espera: mostra por onde a simulação anda, em vez
   de uma bolinha só girando por dois minutos. */
.overlay-bancos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  width: min(100%, 360px);
  text-align: left;
}

.linha-banco {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink-sobre-preto-suave);
  font-size: var(--text-md);
  transition: color 0.2s, background 0.2s;
}

.linha-banco .marca {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-bold);
}

/* Quem já está sendo consultado fica claro e com a bolinha girando. */
.linha-banco.consultando {
  color: #fff;
  background: rgba(244, 190, 65, 0.12);
}

.linha-banco.concluido {
  color: var(--ok-border);
}

.linha-banco.concluido .marca {
  color: #4ade80;
}

/* Terminou, mas não deu certo: marca própria, senão um ✓ verde diria que está
   tudo certo justamente onde não está. */
.linha-banco.falhou {
  color: #fca5a5;
}

.linha-banco.falhou .marca {
  color: #f87171;
}

.girando-mini {
  border-radius: 50%;
  border: 2px solid rgba(244, 190, 65, 0.25);
  border-top-color: var(--ouro);
  animation: girar 0.9s linear infinite;
}

/* O botão de desistir da rodada.
 *
 * DISCRETO DE PROPÓSITO: fundo nenhum, contorno fino, texto do tamanho da
 * dica. Ele divide a tela com sete bancos sendo consultados, e o que a pessoa
 * foi fazer ali é esperar — um botão de cancelar com peso de ação principal
 * convida ao clique errado no meio de um atendimento. Quem precisa dele vai
 * procurar; quem não precisa não esbarra. */
.overlay-cancelar {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  /* Borda e texto no dourado da marca, miolo transparente: o botão fica da cor
     do cronômetro logo acima dele — os dois são a mesma conversa ("quanto falta
     e quero parar") — sem ganhar peso de botão cheio. */
  border: 1px solid var(--ouro);
  background: transparent;
  color: var(--ouro);
  font-family: inherit;
  font-size: var(--text-base);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

/* No hover só o fundo muda, de nada para um véu dourado: a borda e o texto
   já estão na cor certa, e clarear os dois faria o botão piscar. */
.overlay-cancelar:hover:not(:disabled) {
  background: rgba(244, 190, 65, 0.12);
}

.overlay-cancelar:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Quem configurou o sistema pra reduzir animações não deve levar um disco
   girando na cara — o aviso continua, só para de rodar. */
@media (prefers-reduced-motion: reduce) {
  .girando,
  .girando-mini {
    animation-duration: 3s;
  }

  .banco-card.banco-card--acordo::after {
    animation: none;
  }
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.indicadores {
  display: grid;
  /* Quatro cards, ou seis com Fechou/Não fechou liberado: cabem na mesma linha
     a partir de 720px de largura (o dono viu o sexto cair sozinho na linha de baixo). */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.indicador {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.indicador-valor {
  font-size: 26px;
  font-weight: var(--weight-black);
  letter-spacing: -0.5px;
  line-height: var(--leading-tight);
  color: var(--brand-700);
}

.indicador-valor.ok {
  color: var(--ok-text);
}

.indicador-valor.ruim {
  color: var(--bad-text);
}

.indicador-rotulo {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-top: var(--space-1);
  line-height: var(--leading-normal);
}

.barra-taxa {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  margin-top: var(--space-2);
}

.barra-taxa span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--accent));
}

/* --- Fechamentos: os três números dentro do cartão e as duas barras -------- */

.indicadores--dentro {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: var(--space-4);
}

.indicadores--dentro .indicador {
  box-shadow: none;
  padding: var(--space-4);
}

.indicador-valor.neutro {
  color: var(--ink-soft);
}

.medidor-fechamento {
  padding: var(--space-3) 0;
}

.medidor-fechamento + .medidor-fechamento {
  border-top: 1px solid var(--line);
}

.barra-taxa--ok span {
  background: var(--ok-text);
}

.hint-celula {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  font-weight: normal;
}

/* Negócio a negócio: uma tabela igual à do Histórico, e a linha abre o cartão */

.subtitulo-fechamentos {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-5) 0 var(--space-1);
}

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

.tabela-fechamentos table {
  margin-top: var(--space-2);
}

/* Mais justa que as outras tabelas: cada célula tem duas linhas curtas, e com
   o espaçamento padrão a lista virava uma escada. */
.tabela-fechamentos th {
  padding: var(--space-2) var(--space-3);
}

.tabela-fechamentos td {
  padding: var(--space-3) var(--space-2);
  vertical-align: middle;
  line-height: 1.35;
}

/* A condição ("60x R$ 1.200,50 · 1,99%") e o motivo curto não quebram. */
.tabela-fechamentos .bancos-na-linha {
  white-space: nowrap;
}

.tabela-fechamentos .historico-cliente-extra {
  margin-top: 1px;
}

.tabela-fechamentos td:nth-child(3) {
  min-width: 130px;
}

/* O carro abreviado (ver veiculoCurto); o nome inteiro está no title e no cartão. */
.veiculo-na-linha {
  min-width: 150px;
  max-width: 240px;
}

/* O banco na linha: selo da marca e nome, como no Histórico. */
.banco-na-linha {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.banco-na-linha .banco-selo {
  min-width: 1.6rem;
  height: 1.6rem;
  font-size: 11px;
}

.situacao-na-linha {
  font-size: var(--text-base);
  color: var(--ink-soft);
  margin-top: 1px;
}

.situacao-na-linha.texto-ok,
.situacao-na-linha.texto-ruim {
  font-weight: var(--weight-semibold);
}

/* Data e CPF inteiros numa linha só: quebrados ao meio não se leem. */
.quando-na-linha,
.cpf-na-linha {
  white-space: nowrap;
}

/* A linha aberta e o cartão embaixo formam um bloco só, em dourado bem claro —
   e não o preto do Histórico: aqui o preto apagava o verde e pesava demais
   (pedido do dono em 11/10/2026). Mais específico que .linha-detalhe td e
   .linha-simulacao[aria-expanded] td, declarados mais abaixo, de propósito. */
.tabela-fechamentos .linha-fechamento[aria-expanded="true"] td {
  background: var(--brand-100);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  border-bottom: 0;
}

.tabela-fechamentos .linha-fechamento[aria-expanded="true"] .seta-abrir {
  color: var(--ouro-escuro);
}

.tabela-fechamentos .linha-fechamento[aria-expanded="true"] .bancos-na-linha,
.tabela-fechamentos .linha-fechamento[aria-expanded="true"] .historico-cliente-extra {
  color: var(--ink-soft);
}

.tabela-fechamentos .linha-fechamento-detalhe td {
  background: var(--brand-100);
  padding: 0 var(--space-4) var(--space-4);
  border-bottom: 2px solid var(--line-forte);
}

/* O cartão de um negócio: branco sobre o fundo escuro da linha aberta, com a
   faixa lateral na cor da marca do banco (inline, de bancos-visual.js). */
.fechamento-cartao {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 6px solid var(--ink-faint);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.fechamento-cartao__topo {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-lg);
}

.fechamento-cartao__topo > strong {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.fechamento-cartao__topo .situacao-na-linha {
  margin-top: 0;
  font-size: var(--text-md);
}

.fechamento-cartao__dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.dado__rotulo {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dado__valor {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  line-height: var(--leading-normal);
}

.fechamento-cartao__secao {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-2);
}

.comparativo {
  width: 100%;
  max-width: 760px;
  border-collapse: collapse;
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--text-md);
}

.comparativo th,
.comparativo td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.comparativo thead th {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--line);
}

.comparativo tbody th {
  font-weight: 600;
  color: var(--ink-soft);
  width: 110px;
}

.comparativo__ficha {
  font-weight: 700;
}

.comparativo__dif {
  color: var(--ink-soft);
  font-weight: var(--weight-semibold);
}

/* O cartão fica dentro da linha aberta do Histórico/Dashboard, cujo `td` é
   escuro e largo (.linha-detalhe td); a tabelinha de dentro tem as células
   dela, claras e justas. Mais específico de propósito, para ganhar dali. */
.fechamento-cartao .comparativo th,
.fechamento-cartao .comparativo td {
  background: transparent;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  color: inherit;
}

.fechamento-cartao .comparativo thead th {
  color: var(--ink-soft);
  border-bottom: 2px solid var(--line);
}

.fechamento-cartao .comparativo tbody th {
  color: var(--ink-soft);
}

.fechamento-cartao__veredito {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-weight: 600;
  background: var(--superficie-suave);
}

.veredito--ok {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.veredito--ruim {
  background: var(--bad-bg);
  color: var(--bad-text);
}

.veredito--aviso {
  background: var(--warn-bg);
  color: var(--warn-text);
}

.fechamento-cartao__obs {
  margin-top: var(--space-2);
  font-size: var(--text-md);
}

.texto-ok {
  color: var(--ok-text);
}

.texto-ruim {
  color: var(--bad-text);
}

.texto-aviso {
  color: var(--warn-text);
}

/* O número da coluna Fechou é um botão: abre a condição que fechou. */
.btn-ver-fechamentos {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ok-text);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn-ver-fechamentos:hover,
.btn-ver-fechamentos:focus-visible {
  text-decoration-style: solid;
}

/* A coluna Não fechou: o mesmo botão, em vermelho. */
.btn-ver-fechamentos--ruim {
  color: var(--bad-text);
}

/* As duas roscas, aprovações e fechamentos, lado a lado no mesmo cartão. */
.roscas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--space-5) var(--space-7);
}

.rosca-painel > .subtitulo-fechamentos {
  margin-top: 0;
}

/* A frase em cima da rosca: o total é de aprovações, não de clientes. */
.rosca-resumo {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.roscas .rosca-area {
  gap: var(--space-5);
}

.roscas .rosca {
  width: 170px;
  height: 170px;
}

.roscas .legenda-rosca {
  grid-template-columns: 1fr;
  min-width: 150px;
}

.roscas .legenda-rosca li {
  font-size: var(--text-md);
}

/* A janela dos fechamentos é larga: a tabela tem oito colunas. */
#dialogo-fechamentos {
  width: min(1180px, calc(100vw - 32px));
}

#dialogo-fechamentos .tabela-fechamentos {
  max-height: 65vh;
  overflow: auto;
}

/* O número grande do bloco Fechamentos, quando é botão */
.indicador--botao {
  appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

.indicador--botao:hover,
.indicador--botao:focus-visible {
  border-color: var(--brand-500);
}

.indicador--botao .indicador-rotulo small {
  color: var(--brand-700);
}


@media (max-width: 640px) {
  .indicadores--dentro,
  .indicadores--dentro.indicadores--tres {
    grid-template-columns: 1fr;
  }
}

/* --- Rosca: participação de cada banco nas aprovações --------------------- */

/* --- Personalização do painel -------------------------------------------- */

.acoes-dashboard {
  display: flex;
  justify-content: flex-end;
  margin-bottom: var(--space-4);
}

.btn-personalizar {
  background: transparent;
  border: 1.5px solid var(--ouro-escuro);
  color: var(--ouro);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.btn-personalizar:hover {
  background: rgba(244, 190, 65, 0.12);
}

.painel-personalizacao {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: var(--space-6) var(--space-7);
  margin-bottom: var(--space-6);
}

.painel-personalizacao[hidden] {
  display: none;
}

.painel-personalizacao h2 {
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2);
  color: var(--brand-700);
  font-weight: var(--weight-bold);
}

.subtitle-painel {
  margin: 0 0 var(--space-5);
  font-size: var(--text-base);
  color: var(--ink-soft);
}

.lista-blocos {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.item-bloco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
}

.item-bloco__nome {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  cursor: pointer;
}

.item-bloco__setas {
  display: flex;
  gap: var(--space-2);
}

.item-bloco__setas button {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--line-forte);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  line-height: 1;
}

.item-bloco__setas button:hover:not(:disabled) {
  border-color: var(--ouro-escuro);
  color: var(--ink);
}

.item-bloco__setas button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.btn-restaurar {
  background: none;
  border: none;
  color: var(--brand-700);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.bloco[hidden] {
  display: none;
}

/* --- Situação dos bancos -------------------------------------------------- */

.saude-quando {
  font-size: var(--text-base);
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
}

.lista-saude {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.item-saude {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-md);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
}

.item-saude__banco {
  font-weight: var(--weight-semibold);
}

.item-saude__erro,
.item-saude__aviso {
  font-size: var(--text-sm);
  color: var(--bad-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O banco entrou — isto aqui e recado, nao falha. */
.item-saude__aviso {
  color: #b45309;
}

.alerta-fluxo {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--warn-bg);
  border: 1.5px solid var(--warn-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: #78350f;
}

.alerta-fluxo ul {
  margin: var(--space-2) 0;
  padding-left: var(--space-6);
}

/* --- Mover e remover direto no bloco -------------------------------------- */

.bloco {
  position: relative;
}

/* Os controles só aparecem com o mouse em cima: no uso normal o painel fica
   limpo, e eles surgem quando você vai mexer. */
.bloco-acoes {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: flex;
  gap: var(--space-2);
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 5;
}

.bloco:hover .bloco-acoes,
.bloco:focus-within .bloco-acoes {
  opacity: 1;
}

.bloco-acoes button {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-forte);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bloco-pegar {
  cursor: grab;
}

.bloco-pegar:active {
  cursor: grabbing;
}

.bloco-acoes button:hover {
  border-color: var(--ouro-escuro);
  color: var(--ink);
}

.bloco-remover:hover {
  border-color: var(--bad-text);
  color: var(--bad-text);
}

.bloco.arrastando {
  opacity: 0.4;
}

.bloco.alvo-drop {
  outline: 2px dashed var(--ouro);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* O medidor tem pouco conteúdo; centralizado, ele ocupa melhor o card. */
.card--medidor {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* A rosca e a legenda ocupam o cartão inteiro — mas quem ocupa é a LEGENDA,
   em colunas (ver `.legenda-rosca`), não um espaço esticado entre as duas.
   Havia aqui um teto de 560px, com o motivo certo: em cartão largo, rosca de um
   lado e legenda do outro faz o olho perder a ligação entre a cor e o nome.
   Quando a página inteira passou para 980px isso virou um terço do cartão em
   branco — e a saída foi quebrar a legenda em colunas, que aproxima o nome do
   número em vez de afastar. */
.rosca-area {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  flex-wrap: wrap;
}

.rosca {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

.rosca .fatia {
  transition: opacity 0.12s;
}

.rosca:hover .fatia {
  opacity: 0.45;
}

.rosca .fatia:hover {
  opacity: 1;
}

/* Números no miolo usam tinta de texto, nunca a cor de uma série. */
.rosca-numero {
  font-size: 30px;
  font-weight: var(--weight-black);
  fill: var(--ink);
}

.rosca-legenda-centro {
  font-size: 11px;
  fill: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Em colunas de pelo menos 270px.
   O 270 não é gosto: é o que o nome mais comprido da tabela ("Santander
   Financiamentos") precisa para caber inteiro ao lado do seu número no corpo de
   15px. Abaixo disso o nome entraria em reticências, que num gráfico é pior que
   uma coluna a menos — o leitor fica sem saber de que banco é a fatia.
   Com isso dá duas colunas no cartão de 930px e uma só em janela estreita, pelo
   `auto-fit`, sem nunca espremer uma linha. */
.legenda-rosca {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 170px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-2) var(--space-5);
  align-content: center;
}

/* Um corpo acima do texto comum do sistema: esta legenda não é texto de apoio,
   é o conteúdo do bloco — é nela que se lê quanto cada banco aprovou, e a rosca
   ao lado só mostra a proporção. */
.legenda-rosca li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-lg);
  color: var(--ink);
}

.ponto-legenda {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* O nome NÃO estica.
 *
 * Esticando (era `flex: 1`), o número ia para a borda direita da coluna — e,
 * como as colunas têm todas a mesma largura, o vão entre nome e número virava
 * refém do nome mais comprido da tabela: "Santander Financiamentos" deixava
 * "C6 Bank 41" com 119px de buraco no meio, contra 14px na linha de baixo.
 * Medido em 05/10/2026, nos sete bancos da loja: de 14 a 119px na mesma grade.
 *
 * Com o número colado, o vão é o mesmo em toda linha e cada banco se lê como
 * uma frase só. O que se perde é a coluna de números alinhada; o que se ganha é
 * o número pertencer visivelmente àquele nome, que é o que a legenda existe
 * para dizer. A comparação entre bancos continua na rosca, na porcentagem e na
 * ordem — a lista já vem da maior para a menor. */
.legenda-nome {
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.legenda-valor {
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.legenda-valor small {
  color: var(--ink-soft);
  font-weight: var(--weight-normal);
}

@media (max-width: 900px) {
  .painel-resumo {
    grid-template-columns: 1fr;
  }
}

.busca-historico {
  margin-bottom: var(--space-4);
}

/* O card só da busca, no topo do Histórico: sem título e sem margem embaixo,
   porque o campo JÁ diz o que faz — um "Buscar" escrito acima de um campo que
   diz "Buscar por CPF ou placa..." é a mesma frase duas vezes. */
.card--busca {
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
}

.card--busca .busca-historico {
  margin-bottom: var(--space-2);
}

/* Rodapé do dashboard: o ponteiro para onde o histórico foi morar. */
.rodape-dashboard {
  margin-top: var(--space-7);
  text-align: center;
  font-size: var(--text-base);
  color: var(--ink-faint);
}

.rodape-dashboard a {
  color: var(--ouro-escuro);
  font-weight: var(--weight-semibold);
}

/* Em tela estreita essas tabelas não cabem; rolagem lateral é melhor que
   coluna cortada pela metade. */
#tabela-bancos,
#lista-historico {
  overflow-x: auto;
}

/* Colunas de aprovou/negou com fundo translúcido: a cor faz a leitura, o
   número só confirma. Translúcido (e não sólido) pra não competir com os
   selos de status, que são o destaque forte da tela. */
#tabela-bancos .celula-ok,
#card-regua .celula-ok {
  background: rgba(69, 197, 84, 0.14);
  font-weight: var(--weight-bold);
  color: var(--ok-text);
}

#tabela-bancos .celula-ruim,
#card-regua .celula-ruim {
  background: rgba(185, 28, 28, 0.1);
  font-weight: var(--weight-bold);
  color: var(--bad-text);
}

/* Quebra de régua: a exportação dentro do cartão claro (a do Histórico fica
   sobre o fundo escuro da página, e os botões dela são brancos). */
.exportar-regua {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.exportar-regua .btn-exportar {
  border-color: var(--line-forte);
  color: var(--ink);
}

.exportar-regua .btn-exportar:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

/* ==========================================================================
   Histórico: dados do atendimento, Fechou / Não fechou e exportação
   ========================================================================== */

.historico-cliente-extra {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-top: 2px;
  white-space: nowrap;
}

/* O CPF nunca quebra no meio: com a coluna do desfecho a tabela ficou mais
   apertada, e "081.156.369-" numa linha e "32" na outra não se lê de relance. */
.cpf-clicavel {
  white-space: nowrap;
}

.dados-do-atendimento {
  /* A largura inteira do detalhe, acima dos cartões dos bancos: numa coluna
     só o bloco ficava mais alto que os bancos ao lado. */
  grid-column: 1 / -1;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
  margin-bottom: var(--space-4);
}

.dados-do-atendimento h3 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-faint);
}

.dados-do-atendimento dl {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.dados-do-atendimento dt {
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.dados-do-atendimento dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.celula-desfecho {
  min-width: 150px;
}

.desfecho-botoes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}

/* Verde e vermelho, como o dono pediu: são decisão, não detalhe. */
.btn-desfecho {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.btn-desfecho--fechou {
  background: var(--ok-bg);
  color: var(--ok-text);
  border-color: var(--ok-border);
}

.btn-desfecho--nao {
  background: var(--bad-bg);
  color: var(--bad-text);
  border-color: var(--bad-border);
}

.btn-desfecho:hover {
  filter: brightness(0.96);
}

.desfecho-marcado {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.desfecho-linha {
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.desfecho-linha--forte {
  color: var(--ink);
  font-weight: var(--weight-semibold);
}

.desfecho-obs {
  font-style: italic;
  max-width: 260px;
}

.btn-desfecho-alterar {
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-faint);
  font-family: inherit;
  font-size: var(--text-xs);
  text-decoration: underline;
  cursor: pointer;
}

.dialogo-desfecho {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(640px, calc(100vw - 32px));
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}

.dialogo-desfecho::backdrop {
  background: rgba(20, 20, 20, 0.55);
}

.dialogo-desfecho__corpo {
  padding: var(--space-6);
}

.dialogo-desfecho__corpo h2 {
  margin-top: 0;
}

.dialogo-desfecho__corpo fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.dialogo-desfecho__corpo legend {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.conferir-no-banco {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  font-size: var(--text-sm);
}

.conferir-resultado {
  flex-basis: 100%;
}

.ficha-conferida {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.desfecho-simulado {
  min-height: 1.4em;
  margin: calc(-1 * var(--space-3)) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.dialogo-desfecho__acoes {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}

/* As perguntas, avisos e pedidos de texto da própria tela (public/dialogos.js): no lugar de
   alert/confirm/prompt do navegador, que deixavam o teclado sem foco no aplicativo. */
.dialogo-pergunta {
  width: min(460px, calc(100vw - 32px));
}

.dialogo-pergunta h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
}

.dialogo-pergunta__texto {
  margin: 0 0 var(--space-3);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}

.dialogo-pergunta__campo {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-4);
}

/* Os botões lado a lado, e não empilhados: o `button.primary` da tela principal ocupa a linha toda. */
.dialogo-pergunta .dialogo-desfecho__acoes {
  margin-top: var(--space-5);
}

.dialogo-pergunta .dialogo-desfecho__acoes button {
  width: auto;
  margin-top: 0;
}

.dialogo-pergunta .dialogo-desfecho__acoes button.primary {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-md);
}

.dialogo-pergunta .dialogo-pergunta__perigo {
  background: var(--bad-text);
  color: #ffffff;
  box-shadow: none;
}

.dialogo-pergunta .dialogo-pergunta__perigo:hover:not(:disabled) {
  background: #991b1b;
  box-shadow: none;
}

.exportar-historico {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-5);
  color: var(--ink-sobre-preto-suave);
  font-size: var(--text-sm);
}

/* O `display: flex` acima vence o `[hidden]` do navegador (ver a nota em small.hint). Sem esta
   linha, o bloco "Exportar o período" ficava à vista de vendedor e F&I — só o gerente exporta. */
.exportar-historico[hidden] {
  display: none;
}

.btn-exportar {
  padding: var(--space-2) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-sobre-preto);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.btn-exportar:hover {
  border-color: var(--brand-500);
  color: var(--brand-500);
}

/* Negócios para a loja a que a ferramenta não vale: só o aviso, no lugar da tela. */
.negocios-bloqueado {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-6);
  text-align: center;
  padding: var(--space-8) var(--space-6);
}

.negocios-bloqueado__titulo {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl);
  color: var(--ink);
}

.negocios-bloqueado__texto {
  max-width: 560px;
  margin: 0 auto var(--space-5);
  color: var(--ink-soft);
  font-size: var(--text-md);
  line-height: 1.5;
}

.negocios-bloqueado__link {
  display: inline-block;
  text-decoration: none;
}

.historico-vazio {
  color: var(--ink-faint);
  font-size: var(--text-base);
  padding: var(--space-5) 0;
  text-align: center;
}

.pilula {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.pilula.ok {
  background: var(--ok-bg);
  color: var(--ok-text);
  border: 1px solid var(--ok-border);
}

.pilula.ruim {
  background: var(--bad-bg);
  color: var(--bad-text);
  border: 1px solid var(--bad-border);
}

/* Âmbar: atenção sem alarme — a atualização disponível e a mensalidade que
   ainda deixa simular (ver notificacoes.js). */
.pilula.aviso {
  background: var(--warn-bg);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
}

/* Pílulas da chance de aprovação, no histórico — mesmas três cores do card. */
.pilula.chance-alta {
  background: #f2fafd;
  border: 1px solid #a8dbef;
}

.pilula.chance-boa {
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
}

.pilula.chance-menor {
  background: var(--superficie-suave);
  border: 1px solid var(--line-forte);
}

.bancos-na-linha {
  font-size: var(--text-base);
  color: var(--ink-soft);
  margin-top: var(--space-1);
}

.nome-veiculo {
  font-size: var(--text-base);
  color: var(--ink-soft);
  margin-top: 2px;
  max-width: 260px;
}

/* O ano do veículo era cinza-claro demais pra um dado que se lê o tempo todo. */
#lista-historico small.hint {
  color: var(--ink-soft);
}

.seta-abrir {
  color: var(--ink-soft);
}

.linha-simulacao[aria-expanded="true"] .nome-veiculo {
  color: var(--ink-sobre-preto-suave);
}

/* Na linha aberta (fundo preto), o texto de apoio usava o cinza dos cartões
   brancos e quase sumia: celular, nascimento, "via Facebook", "para Rey",
   entrada, ano do carro. Agora é o cinza claro de texto sobre preto. */
#lista-historico .linha-simulacao[aria-expanded="true"] .historico-cliente-extra,
#lista-historico .linha-simulacao[aria-expanded="true"] .historico-origem,
#lista-historico .linha-simulacao[aria-expanded="true"] .historico-para-quem,
#lista-historico .linha-simulacao[aria-expanded="true"] small.hint,
#lista-historico .linha-simulacao[aria-expanded="true"] .desfecho-linha,
#lista-historico .linha-simulacao[aria-expanded="true"] .btn-desfecho-alterar,
#lista-historico .linha-simulacao[aria-expanded="true"] .selo-outra-maquina {
  color: var(--ink-sobre-preto-suave);
}

#lista-historico .linha-simulacao[aria-expanded="true"] .desfecho-linha--forte {
  color: var(--ink-sobre-preto);
}

#lista-historico .linha-simulacao[aria-expanded="true"] .selo-outra-maquina {
  border-color: rgba(255, 255, 255, 0.3);
}

/* --- Histórico: linha que abre com o detalhe da simulação ----------------- */

.linha-simulacao {
  cursor: pointer;
}

.linha-simulacao:hover td {
  background: var(--superficie-suave);
}

.linha-simulacao:focus-visible {
  outline: 2px solid var(--ouro-escuro);
  outline-offset: -2px;
}

.seta-abrir {
  width: 22px;
  color: var(--ink-faint);
  user-select: none;
}

.cpf-clicavel {
  color: var(--brand-700);
  font-weight: var(--weight-semibold);
  border-bottom: 1px dashed var(--ink-faint);
  cursor: pointer;
}

.cpf-clicavel:hover {
  color: var(--ouro-escuro);
  border-bottom-color: var(--ouro-escuro);
}

/* A linha aberta fica destacada, senão ela some no meio das outras. */
.linha-simulacao[aria-expanded="true"] td {
  background: #141414;
  color: var(--ink-sobre-preto);
  font-weight: var(--weight-semibold);
}

.linha-simulacao[aria-expanded="true"] .seta-abrir,
.linha-simulacao[aria-expanded="true"] .bancos-na-linha {
  color: var(--ouro);
}

.linha-simulacao[aria-expanded="true"] .cpf-clicavel {
  color: var(--ouro);
  border-bottom-color: var(--ouro);
}

/* Fundo escuro no detalhe: é o que faz os cards brancos dos bancos saltarem.
   Sobre cinza claro ficava tudo branco no branco e a leitura se perdia. */
.linha-detalhe td {
  background: #141414;
  padding: var(--space-5);
  border-bottom: 3px solid var(--ouro-escuro);
}

.detalhe-simulacao {
  display: grid;
  /* min(260px, 100%): em janela estreita o cartão do banco ocupa a largura toda em vez de vazar. */
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
}

.detalhe-banco {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-faint);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

/* Faixa lateral pela situação: dá pra ver quem aprovou sem ler nada. */
.detalhe-banco--ok {
  border-left-color: var(--ok-text);
}

.detalhe-banco--ruim {
  border-left-color: var(--bad-text);
}

.detalhe-banco--chance-alta {
  border-left-color: #0b6f9c;
}

.detalhe-banco--chance-boa {
  border-left-color: var(--ok-text);
}

.detalhe-banco--chance-menor {
  border-left-color: var(--line-forte);
}

/* O banco com acordo vigente no Histórico: o mesmo cartão dourado da simulação. A faixa da
   situação (verde) vira o inset da esquerda, para o dourado poder dar a volta inteira. */
.detalhe-banco.detalhe-banco--acordo {
  position: relative;
  border-color: #e09200;
  border-width: 3px;
  background: linear-gradient(180deg, #fff3cf 0, var(--surface) 140px);
  box-shadow:
    inset 6px 0 0 var(--ok-text),
    0 0 0 4px rgba(224, 146, 0, 0.22),
    0 14px 30px -14px rgba(224, 146, 0, 0.9),
    var(--shadow-card);
}

.detalhe-banco--acordo .faixa-acordo {
  margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  border-radius: calc(var(--radius-md) - 3px) calc(var(--radius-md) - 3px) 0 0;
}

.detalhe-banco__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

/* O nome do banco agora vem com o selo da marca na frente. */
.detalhe-banco__topo > strong {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* No histórico o selo é menor: ali ele acompanha o nome numa lista, não abre um
   card. Grande demais, viraria o elemento mais pesado de uma linha que é só
   apoio. */
.detalhe-banco__topo .banco-selo {
  min-width: 1.9rem;
  height: 1.9rem;
  font-size: var(--text-xs);
}

.detalhe-banco__info {
  font-size: var(--text-md);
  color: var(--ink-soft);
  line-height: var(--leading-normal);
}

.detalhe-banco__info strong {
  color: var(--ink);
}

.detalhe-parcelas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.parcela-chip {
  background: var(--brand-100);
  border: 1px solid var(--ouro);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-md);
  color: var(--ink);
  white-space: nowrap;
}

.detalhe-banco .btn-toggle-print {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

/* ==========================================================================
   Telas estreitas
   ========================================================================== */

@media (max-width: 760px) {
  .indicadores {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

  /* Numa coluna só, o alinhamento com o campo ao lado deixa de fazer sentido. */
  .checkbox-row--alinhado {
    margin-top: 0;
  }
}

/* --------------------------------------------------------------------------
   De quem são as credenciais que estão na tela

   Uma loja tem vários logins em cada banco, para os vendedores simularem ao
   mesmo tempo sem derrubar a sessão uns dos outros. Este seletor é o que separa
   "o login da loja" do login de cada pessoa — e por isso ele fica ACIMA da
   lista de bancos e com a mesma cara dos outros cartões: quem não reparar nele
   vai achar que está editando a loja quando está editando o João.
   -------------------------------------------------------------------------- */

.card--credenciais-de select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-base);
  font-family: inherit;
}

.card--credenciais-de select:focus {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

.card--credenciais-de small.hint {
  display: block;
  margin-top: var(--space-3);
}

/*
 * Dois campos vazios na tela de uma pessoa são ambíguos: podem querer dizer
 * "ainda não configurei" ou "usa o da loja". Este aviso desfaz isso no lugar
 * onde a dúvida nasce, em vez de num texto de ajuda no rodapé.
 */
.aviso-usa-loja {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--brand-500);
  background: var(--brand-100);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--brand-700);
}

/* --------------------------------------------------------------------------
   Segredo que a pessoa vai copiar para fora do sistema

   São dois: o código de pareamento, que vai para as outras máquinas, e a senha
   do ponto de troca, que vai para o painel do Cloudflare. Os dois precisam de
   "Mostrar" E "Copiar" lado a lado — e é por isso que não reusam `.campo-senha`
   dos bancos, onde o único botão é posicionado em cima do campo e um segundo
   cairia exatamente sobre o primeiro.
   -------------------------------------------------------------------------- */

.campo-segredo-linha {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}

.campo-segredo-linha input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.04em;
}

.btn-segredo {
  flex: 0 0 auto;
  padding: 0 var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--brand-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-family: inherit;
  cursor: pointer;
}

.btn-segredo:hover {
  border-color: var(--brand-500);
}

/*
 * Selo de "veio de outra máquina" no histórico do gerente.
 *
 * Existe por causa dos prints: eles não viajam entre as máquinas (são telas
 * cheias de dado de cliente e pesam centenas de KB cada), então a simulação de
 * outro computador aparece sem imagem. Sem este selo isso parece defeito.
 */
.selo-outra-maquina {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs, 0.72rem);
  color: var(--ink-faint);
  vertical-align: middle;
  /* O nome do computador ("DESKTOP-B6N2J2R") é uma palavra só e não quebra:
     solto, ele alargava a coluna e empurrava a tabela para fora do cartão. O
     nome inteiro está no title. */
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selo-pelo-celular {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs, 0.72rem);
  color: var(--ink-faint);
  vertical-align: middle;
  white-space: nowrap;
}

/*
 * "Reunir aqui o histórico das outras máquinas": caixa e texto na mesma linha,
 * clicáveis juntos. É uma escolha por máquina, e a diferença entre marcada e
 * desmarcada é a base de clientes da loja estar ou não no disco daquele
 * computador — vale ser fácil de acertar.
 */
.campo-reune {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  font-weight: var(--weight-normal);
  text-transform: none;
  letter-spacing: normal;
}

.campo-reune input {
  width: auto;
  margin: 0;
  cursor: pointer;
}

/*
 * Campo com conteúdo impossível — hoje, só o CPF cuja conta dos dígitos não
 * fecha. Aparece enquanto a pessoa digita, e não só no clique de simular: é o
 * momento em que o cliente ainda está ali para repetir o número.
 */
.campo--invalido {
  border-color: var(--erro, #c0392b) !important;
  background: color-mix(in srgb, var(--erro, #c0392b) 6%, transparent);
}

/* ==========================================================================
   Estoque da loja

   O seletor que aparece no campo da placa, e a tela de conferência do gerente.
   Tudo aqui nasce escondido: máquina sem estoque carregado não mostra nada
   disso, e a tela de simulação fica idêntica ao que sempre foi.
   ========================================================================== */

/* A lista flutua sobre o campo seguinte em vez de empurrar a página: sem isto,
   o formulário inteiro pula a cada letra digitada. */
.campo-com-estoque {
  position: relative;
}

/* Mais larga que o campo quando precisa: o campo da placa ocupa meia coluna, e
   nele "HONDA FIT LX 1.5 16V CVT" chega cortado — que é justamente o pedaço que
   diz se é o carro certo. */
/* O `display` da classe vence o `[hidden]` do navegador (ver a nota em
   small.hint, mais acima). Sem estas regras, "esconder" a lista de sugestões
   deixava uma caixa vazia de 2px por cima do campo de baixo, o "cliente
   conhecido" ficava como caixa flex vazia e o "Do estoque: ..." continuava
   na tela depois de a placa mudar à mão (10/10/2026). */
.estoque-sugestoes[hidden],
.cliente-conhecido[hidden],
.estoque-escolhido[hidden] {
  display: none;
}

.estoque-sugestoes {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: min(480px, 84vw);
  z-index: 30;
  margin-top: var(--space-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  max-height: 260px;
  overflow-y: auto;
}

/* Duas linhas por carro: placa e preço em cima, nome inteiro embaixo.
   Em uma linha só, "VOLKSWAGEN T-CROSS COMFORTLINE 1.0 TSI" chegava cortado no
   meio — e duas versões do mesmo carro se diferenciam justamente no fim do
   nome. */
.estoque-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-size: var(--text-base);
}

.estoque-item:last-child {
  border-bottom: 0;
}

.estoque-item:hover,
.estoque-item--marcado {
  background: var(--brand-100);
}

.estoque-item-placa {
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.estoque-item-carro {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  line-height: var(--leading-tight);
}

.estoque-item-valor {
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.estoque-dica {
  display: block;
  margin-top: var(--space-2);
}

/* O que foi preenchido a partir do estoque. Fica visível depois da escolha
   porque o vendedor precisa poder conferir que é o carro certo antes de mandar
   sete bancos simularem — e some assim que a placa é alterada à mão. */
.estoque-escolhido {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.estoque-escolhido-carro {
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.estoque-escolhido-aviso {
  color: var(--warn-text);
  font-weight: var(--weight-semibold);
}

/* As duas condições da loja pelo mesmo carro: à vista e com troca. Os dois
   números ficam escritos no botão — a escolha se confere olhando, em vez de
   depender de lembrar qual é qual. */
.estoque-condicoes {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.estoque-condicao {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--line-forte);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.estoque-condicao:hover {
  background: var(--superficie-suave);
}

.estoque-condicao--ativa {
  background: var(--brand-900);
  border-color: var(--brand-900);
  color: var(--ouro);
}

/* --- Tela de Estoque ---------------------------------------------------- */

.estoque-resumo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  justify-content: space-between;
}

.estoque-numero {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}

.estoque-quando {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.estoque-falhou {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  font-size: var(--text-base);
}

.estoque-sem-fonte {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-base);
}

/* Rede de segurança da lista do pátio: numa janela estreita — ou no dia em que
 * entrar mais uma coluna — a tabela rola na horizontal AQUI DENTRO, em vez de
 * vazar para fora do cartão. Vazar foi o defeito relatado em 05/10/2026, e o
 * ruim dele é que não parece defeito: parece que a loja tem um carro com o
 * nome cortado. */
#estoque-lista {
  overflow-x: auto;
}

/* O preço não quebra em duas linhas: "R$ 112.900,00" partido no meio é o tipo
   de coisa que faz a tabela parecer desalinhada sem motivo. */
.estoque-td-valor {
  white-space: nowrap;
}

.estoque-sem-placa {
  color: var(--ink-faint);
  font-style: italic;
}

/* Confirmação verde da tela de Estoque — irmã de .estoque-falhou. */
.estoque-ok {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--ok-bg);
  border: 1px solid var(--ok-border);
  color: var(--ok-text);
  font-size: var(--text-base);
}

/* ==========================================================================
   Simulação cancelada e "Refazer num banco só" (13/10/2026)
   ========================================================================== */

/* O banco que não deu tempo de responder: cinza, sem cor de resultado — não é
   recusa nem erro, a pessoa parou antes. A faixa da marca continua. */
.banco-card.cancelado {
  background: var(--superficie-suave);
  border-color: var(--line-forte);
  border-style: dashed;
  border-left: 6px solid var(--cor-marca, var(--line));
}

/* Banco instável, ou banco pedindo um dado do cliente que a simulação não tem
   (13/10/2026): cinza como o cancelado, mas de borda cheia — o banco chegou a
   responder. Não é recusa nem falha do sistema, e o amarelo de erro dizia que era. */
.banco-card.pendente {
  background: var(--superficie-suave);
  border-color: var(--line-forte);
  border-left: 6px solid var(--cor-marca, var(--line));
}

.banco-status.neutro {
  color: var(--ink-soft);
}

.aviso-cancelada {
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--superficie-suave);
  border: 1px solid var(--line-forte);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink);
}

/* Histórico: a base da loja não respondeu a tempo e a lista é a que este computador já tinha
   (ver mostrarEscopoEAviso, em historico.js). Informa sem alarme; a tela tenta de novo sozinha. */
.aviso-historico-base {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--superficie-suave);
  border: 1px solid var(--line-forte);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm, 0.9em);
  line-height: var(--leading-normal);
  color: var(--ink);
}
.aviso-historico-base[hidden] {
  display: none;
}
/* A base RECUSOU esta máquina: não se resolve sozinho, então o aviso não pode parecer um tropeço de rede. */
.aviso-historico-base--recusada {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
  font-weight: var(--weight-semibold);
}


/* O refazer fica no pé do cartão, discreto: é para quando o banco falhou ou o
   vendedor quer conferir de novo, não a ação principal do resultado. */
.refazer-bloco {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line-forte);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.btn-refazer,
.btn-cancelar-refazer {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-forte);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.btn-refazer:hover,
.btn-refazer:focus-visible,
.btn-cancelar-refazer:hover {
  border-color: var(--ouro-escuro);
  color: var(--brand-700);
}

.btn-refazer:disabled,
.btn-cancelar-refazer:disabled {
  opacity: 0.6;
  cursor: default;
}

.aviso-refazer {
  flex-basis: 100%;
  color: var(--bad-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* O cartão enquanto o banco é refeito: só ele gira. */
.banco-card.refazendo {
  background: var(--brand-100);
  border-color: var(--ouro);
  border-left: 6px solid var(--cor-marca, var(--ouro));
}

.refazendo-andamento {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  font-size: var(--text-md);
  color: var(--ink);
}

.refazendo-andamento .girando-mini {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* No Histórico, o bloco do banco que está sendo refeito. */
.detalhe-banco .refazer-bloco {
  margin-top: var(--space-3);
}

.pilula.neutro {
  background: var(--superficie-suave);
  color: var(--ink-soft);
  border: 1px solid var(--line-forte);
}

.detalhe-banco--neutro {
  border-left-color: var(--line-forte);
  border-style: dashed;
  border-left-style: solid;
}

.detalhe-banco--refazendo {
  border-left-color: var(--ouro);
  background: var(--brand-100);
}

.detalhe-banco__refeito {
  font-size: var(--text-sm);
  color: var(--brand-700);
  font-weight: var(--weight-semibold);
  margin: calc(-1 * var(--space-2)) 0 var(--space-2);
}

/* ==========================================================================
   Cobrança da mensalidade (13/10/2026)
   ========================================================================== */

.cobranca-plano {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}

.cobranca-plano__rotulo {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cobranca-plano__nome {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.titulo-cobrancas {
  margin: var(--space-6) 0 var(--space-3);
  color: var(--ink-sobre-preto);
  font-size: var(--text-md);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cobranca-cartao {
  border-left: 6px solid var(--line-forte);
  margin-bottom: var(--space-4);
}

.cobranca-cartao--ruim {
  border-left-color: var(--bad-text);
}

.cobranca-cartao--aviso {
  border-left-color: var(--ouro-escuro);
}

.cobranca-cartao--ok {
  border-left-color: var(--ok-text);
}

.cobranca-cartao__topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cobranca-cartao__descricao {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.cobranca-cartao__frase {
  margin-top: var(--space-1);
  font-size: var(--text-md);
  color: var(--ink-soft);
}

.cobranca-cartao__valor {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.cobranca-cartao__valor strong {
  font-size: 26px;
  font-weight: var(--weight-black);
  color: var(--ink);
}

.formas-pagamento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-3);
}

.forma-pagamento {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--superficie-suave);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.forma-pagamento__titulo {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.forma-pagamento__valor {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.forma-pagamento__valor--mono {
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--text-base);
}

.pix-copia-e-cola {
  width: 100%;
  font-family: Consolas, "Courier New", monospace;
  font-size: var(--text-sm);
  resize: none;
  border: 1px solid var(--line-forte);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--surface);
  color: var(--ink);
}

.btn-copiar,
.btn-pagar-link {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  cursor: pointer;
  text-decoration: none;
  border: none;
  background: linear-gradient(135deg, var(--ouro), var(--ouro-escuro));
  color: #141414;
  box-shadow: var(--shadow-button);
}

.btn-copiar:disabled {
  opacity: 0.8;
  cursor: default;
}

.cobranca-cartao__recado {
  margin: var(--space-2) 0;
  font-size: var(--text-md);
  color: var(--ink);
}

.aviso-cobranca-memoria {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-lg);
  color: var(--warn-text);
  font-size: var(--text-base);
}

.rodape-cobranca {
  margin-top: var(--space-4);
  color: var(--ink-sobre-preto-suave);
  font-size: var(--text-sm);
}

.botao-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ouro);
  text-decoration: underline;
  cursor: pointer;
}

/* O QR do PIX na tela Cobrança (13/10/2026). Fundo branco sempre: câmera de banco não lê QR invertido. */
.pix-qr { width: min(240px, 100%); background: #fff; padding: 8px; border-radius: 12px; margin: 6px 0 4px; }
.pix-qr svg { display: block; width: 100%; height: auto; }

/* ==========================================================================
   Negócios — Fechou e Não fechou para o gerente (15/10/2026)

   A lista reaproveita a tabela e o cartão do Dashboard (.tabela-fechamentos,
   .fechamento-cartao): é o mesmo desenho, e o dono já os conhece. Aqui ficam só
   as peças que a tela nova acrescenta: os cinco números, as abas e os filtros.
   ========================================================================== */

.indicadores--negocios {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Cinco cartões na mesma linha: o número maior (R$ 11.240.050) tem que caber sem quebrar. */
.indicadores--negocios .indicador-valor {
  font-size: 22px;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

/* De onde vêm o financiado e o retorno: abre embaixo dos números, ao clicar no cartão. */
.detalhe-financiado {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  box-shadow: var(--shadow-card);
}

.detalhe-financiado[hidden] {
  display: none;
}

.detalhe-financiado__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.detalhe-financiado .num {
  text-align: right;
  white-space: nowrap;
}

.detalhe-financiado tfoot td {
  border-top: 2px solid var(--line);
  font-weight: var(--weight-bold);
}

.detalhe-financiado .hint {
  display: block;
  margin-top: var(--space-2);
}

/* Os acordos do mês: meta, quanto falta e o plus, com o aviso de quando falta pouco. */
.acordos-do-mes {
  margin-bottom: var(--space-6);
}

.acordos-do-mes[hidden] {
  display: none;
}

.acordos-do-mes__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.acordos-do-mes__topo h2 {
  margin: 0;
  color: var(--ink-sobre-preto);
  font-size: var(--text-xl);
}

.acordos-do-mes__topo small {
  color: var(--ink-sobre-preto-suave);
}

.aviso-acordo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

.acordos-do-mes__cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.acordo-cartao__banco {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.acordo-cartao__banco .pilula {
  margin-left: auto;
}

.acordo-cartao__de {
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* Os três números do bloco Acordos: a mesma grade dos de dentro dos Fechamentos, em três colunas. */
.indicadores--dentro.indicadores--tres {
  grid-template-columns: repeat(3, 1fr);
}

/* A lista de oportunidades abre embaixo do aviso: rola por dentro, para não empurrar a página. */
.oportunidades-do-acordo {
  margin: calc(var(--space-2) * -1) 0 var(--space-3);
}

.oportunidades-do-acordo .tabela-fechamentos {
  max-height: 420px;
  overflow: auto;
}

.acordo-detalhe__conta {
  margin: 0 0 var(--space-3);
  padding-left: 1.2em;
  line-height: var(--leading-normal);
}

/* A meta do acordo em Configurações: tipo, valor ou quantidade, plus e início. */
.acordo-meta {
  margin: var(--space-3) 0;
  padding: var(--space-3) var(--space-4);
  background: var(--superficie-suave);
  border-radius: var(--radius-md);
  display: grid;
  gap: var(--space-2);
}

.acordo-meta select {
  max-width: 460px;
}

.acordo-meta[hidden],
.acordo-meta__campos[hidden] {
  display: none;
}

.acordo-meta__rotulo {
  font-weight: var(--weight-semibold);
}

.acordo-meta__campos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.acordo-meta__campo {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}

.acordo-meta__dica {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .acordo-meta__campos {
    grid-template-columns: 1fr;
  }
}

/* "Últimos [90] dias": o gerente escolhe quantos dias quer ver. */
.filtro-periodo__dias {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-sobre-preto);
  font-size: var(--text-base);
}

.filtro-periodo__dias input {
  width: 84px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-base);
}

/* O período vale para a tela inteira: quem escolheu "últimos N dias" precisa ver isso marcado. */
.filtro-periodo__dias.ativo {
  color: var(--ink-sobre-preto);
  font-weight: var(--weight-bold);
}

.filtro-periodo__dias.ativo input {
  border-color: var(--logo-fundo);
  box-shadow: var(--focus-ring);
}

.conferencia-olx__dica {
  margin-top: var(--space-2);
  color: var(--ink-faint);
  font-size: var(--text-sm);
}

/* O número em que a pessoa clicou para filtrar fica marcado. */
.indicador--ativo {
  border-color: var(--brand-500);
  box-shadow: var(--focus-ring);
}

.negocios-abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.negocios-aba {
  padding: var(--space-3) var(--space-5);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.negocios-aba:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

/* A aba aberta tem a mesma cor do período escolhido lá em cima. */
.negocios-aba[aria-selected="true"] {
  background: var(--logo-fundo);
  border-color: transparent;
  color: var(--logo-texto);
}

.negocios-aba__n {
  margin-left: var(--space-1);
  font-weight: var(--weight-black);
}

/* Busca larga e três escolhas: a linha inteira é preenchida, sem coluna vazia. */
.negocios-filtros {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* A condição ao lado do banco ("48x R$ 2.100,00") é o dado; o nome é o rótulo. */
.banco-na-linha__condicao {
  font-weight: var(--weight-normal);
  color: var(--ink-soft);
}

/* O motivo do Não fechou é longo; na linha cabe um pedaço, o resto está no cartão.
   190px porque a tabela inteira tem que caber no cartão em 1366px, sem rolagem. */
.tabela-fechamentos .negocios-motivo {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.negocio-aprovacoes {
  margin-top: var(--space-3);
}

/* A faixa da conferência com o OLX360: quando foi a última, o que marcou e o botão. */
.conferencia-olx {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}

.conferencia-olx__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.conferencia-olx__linha .btn-toggle-print {
  margin-top: 0;
}

.conferencia-olx__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.conferencia-olx__previa {
  margin-top: var(--space-3);
}

.conferencia-olx__previa summary {
  cursor: pointer;
  font-weight: var(--weight-semibold);
  color: var(--ink);
}

.conferencia-olx__previa .tabela-fechamentos {
  max-height: 340px;
  overflow: auto;
  margin-top: var(--space-2);
}

.conferencia-olx__texto {
  flex: 1 1 380px;
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

.conferencia-olx__texto--ok {
  color: var(--ok-text);
  font-weight: var(--weight-semibold);
}

.conferencia-olx__texto--erro {
  color: var(--bad-text);
  font-weight: var(--weight-semibold);
}

.conferencia-olx .aviso-retorno {
  margin-top: var(--space-3);
}

.conferencia-olx__avisos {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.conferencia-olx__avisos ul {
  margin: var(--space-2) 0 0 var(--space-5);
}

/* O retorno que o OLX360 informou, no cartão: o valor em R$ é aproximado. */
.fechamento-cartao__retorno {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--superficie-suave);
  color: var(--ink);
  font-size: var(--text-base);
}

.fechamento-cartao__retorno small {
  color: var(--ink-soft);
}

/* A simulação que o Negócios mandou abrir no Histórico: um contorno por
   instantes, para o olho achar a linha no meio da lista. */
.linha-simulacao.linha-destacada td {
  box-shadow: inset 0 2px 0 var(--brand-500), inset 0 -2px 0 var(--brand-500);
}

/* A tabela do que cada banco aprovou: o banco (selo e nome) numa linha só, em
   letra normal — a regra geral das tabelas põe o nome em caixa alta e o
   "SANTANDER" caía para baixo do selo. */
.comparativo--aprovacoes tbody th {
  width: 170px;
  text-transform: none;
  letter-spacing: 0;
}

.comparativo--aprovacoes .banco-na-linha {
  color: var(--ink);
}

/* Um banco por grupo: a primeira linha de cada um ganha a linha de cima mais
   marcada, e as seguintes (os outros prazos) ficam leves. */
.fechamento-cartao .comparativo--aprovacoes tbody tr.aprov-1a th,
.fechamento-cartao .comparativo--aprovacoes tbody tr.aprov-1a td {
  border-top: 2px solid var(--line);
}

.fechamento-cartao .comparativo--aprovacoes tbody tr:not(.aprov-1a) th,
.fechamento-cartao .comparativo--aprovacoes tbody tr:not(.aprov-1a) td {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* A condição em que o banco informa a MAIOR chance: fundo azul claro, o mesmo
   azul da pílula "alta chance" da tela de resultado, e a parcela em negrito. */
.fechamento-cartao .comparativo--aprovacoes tbody tr.aprov-maior-chance th,
.fechamento-cartao .comparativo--aprovacoes tbody tr.aprov-maior-chance td {
  background: #f2fafd;
  font-weight: var(--weight-bold);
}

/* "A avaliar" não é aprovação: a linha fica apagada. */
.fechamento-cartao .comparativo--aprovacoes tbody tr.aprov-avaliar td {
  color: var(--ink-faint);
}

.negocio-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.negocio-acoes .btn-toggle-print {
  margin-top: 0;
  text-decoration: none;
  display: inline-block;
}

@media (max-width: 900px) {
  .indicadores--negocios {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .negocios-filtros {
    grid-template-columns: 1fr;
  }
}

/* O aviso do "Seguir no banco" no Histórico: o banco refaz a consulta agora, e
   quanto mais velha a simulação, mais o resultado pode mudar. De ontem para trás
   fica em âmbar (atenção sem alarme), como os outros avisos que ainda deixam
   seguir; o de hoje é só uma nota. */
.seguir-aviso--velha {
  color: var(--warn-text);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-normal);
}

/* O cartão do resultado, enxuto (19/10/2026): oito bancos em duas linhas cabem numa tela comum. A faixa do
   acordo e os botões encolhem SÓ aqui — no Histórico e no resto do sistema ficam como estão. */
.resultado-banco .faixa-acordo {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  letter-spacing: 0.2px;
}

.resultado-banco .faixa-acordo__meta {
  font-size: var(--text-xs);
}

.resultado-banco .detalhe-banco__info {
  font-size: var(--text-sm);
}

.resultado-banco__acoes button {
  padding: 6px var(--space-3);
  font-size: var(--text-sm);
  min-height: 0;
  box-shadow: none;
}

/* Em tela estreita (celular, janela pequena) a grade volta para a largura da página: lá não há o que ganhar
   saindo dela, e o cálculo da largura extra deixaria os cartões mais estreitos que o formulário. */
@media (max-width: 900px) {
  .resultados {
    width: auto;
    left: auto;
    transform: none;
  }
}

/* ==========================================================================
   Suporte (a ponte de suporte, lado da loja) — ver suporte.html
   ========================================================================== */

.suporte-chip {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Novo pede atenção (âmbar); em andamento é o dourado da casa; resolvido é o verde do "deu certo". */
.suporte-chip--novo {
  background: var(--warn-bg);
  border-color: var(--warn-border);
  color: var(--warn-text);
}

.suporte-chip--andamento {
  background: var(--brand-100);
  border-color: var(--brand-500);
  color: var(--ouro-escuro);
}

.suporte-chip--resolvido {
  background: var(--ok-bg);
  color: var(--ok-text);
}

.suporte-conversa {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-4);
  background: var(--surface);
}

.suporte-conversa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.suporte-conversa-assunto {
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.suporte-msgs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* A mensagem da loja encosta à direita; a do suporte, à esquerda — assim se lê
   de relance quem falou, como numa conversa de celular. */
.suporte-msg {
  max-width: 85%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.suporte-msg--loja {
  align-self: flex-end;
  background: var(--brand-100);
  border-color: var(--brand-500);
}

.suporte-msg--suporte {
  align-self: flex-start;
  background: var(--surface);
}

.suporte-msg-quem {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-bottom: 2px;
}

.suporte-msg-texto {
  font-size: var(--text-base);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.suporte-responder {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.suporte-responder textarea {
  width: 100%;
  resize: vertical;
}

.suporte-responder .btn-add-operador {
  align-self: flex-start;
}

.suporte-print-linha {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.suporte-print-previa {
  margin-top: var(--space-2);
}

.suporte-print-previa img {
  max-width: 320px;
  max-height: 220px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.suporte-msg-print {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: 2px;
}

/* ==========================================================================
   A NOVA ESPERA DA SIMULAÇÃO (aprovada pelo dono em 01/11/2026)
   Uma roda, a frase, um contador discreto e os cartões dos bancos andando sem
   parar, em ordem alfabética, cada um na cor da marca com a logo clara.
   ========================================================================== */
.overlay-frase {
  margin: 0;
  max-width: 440px;
  color: #fff;
  font-size: 19px;
  line-height: 1.45;
  font-weight: var(--weight-bold);
}
.overlay-frase small {
  display: block;
  margin-top: 6px;
  color: var(--ink-sobre-preto-suave);
  font-size: var(--text-md);
  font-weight: 400;
}
.overlay-carregando .overlay-texto {
  margin: -10px 0 0;
  min-height: 18px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}
.overlay-simulando-em {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 520px);
}
.overlay-simulando-em > span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.overlay-fila {
  position: relative;
  width: 100%;
  height: 52px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.trilho-bancos {
  position: absolute;
  top: 4px;
  left: 0;
  display: flex;
  gap: 12px;
  width: max-content;
  animation: passar-bancos 24s linear infinite;
}
@keyframes passar-bancos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.cartao-banco {
  width: 112px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-weight: var(--weight-bold);
  font-size: 13px;
}
.cartao-banco img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}