/* One Quote — sistema visual (as telas de dentro)
   ==========================================================================

   PRECISA DE css/base.css CARREGADO ANTES. É lá que moram os tokens de cor,
   a fonte, o reset e os dois botões que as duas famílias de página dividem.
   Sozinho, este arquivo desenha uma tela sem cor nenhuma.

   Duas famílias de superfície e uma só cor de marca. O trabalho acontece
   sobre um fundo azulado claro, em cartões brancos de canto macio; a
   navegação mora no azul-marinho do logotipo, que é o único bloco escuro da
   tela e por isso diz sozinho "isto é o menu, o resto é o seu trabalho".
   Tipografia do sistema (Segoe UI no Windows, SF no Apple), escala pequena e
   apertada. Cor é informação: nada é colorido por decoração. */


/* Login: a marca é o elemento principal do cartão. */
.marca-login {
  justify-content: center;
  margin-bottom: 2px;
}

.marca-login .marca-simbolo {
  width: 30px;
}

.marca-login .marca-nome {
  font-size: 21px;
}

.marca-sidebar .marca-nome {
  font-size: 15.5px;
}

/* ============ Login ============ */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--bg);
}

/* O painel escuro da esquerda. Ocupa pouco menos da metade: o formulário é o
   que a pessoa veio fazer, e o texto ao lado é o que ela lê enquanto decide
   se está no lugar certo. */
.login-lado {
  flex: 0 0 44%;
  max-width: 560px;
  background: linear-gradient(160deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
  color: var(--nav-ink);
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

.marca-login-lado .marca-simbolo {
  width: 30px;
}

.marca-login-lado .marca-nome {
  font-size: 20px;
  color: var(--nav-ink);
}

.marca-login-lado .marca-nome b {
  color: var(--nav-ink-forte);
}

.login-lado h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--nav-ink-forte);
  max-width: 15em;
  text-wrap: balance;
}

.login-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 34em;
}

/* O tique verde é desenhado em CSS, e não como imagem: são três linhas, e
   qualquer arquivo a mais aqui atrasaria justamente a primeira tela. */
.login-lista li {
  position: relative;
  padding-left: 28px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nav-ink);
}

.login-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
}

.login-lista li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 7px;
  height: 4px;
  border-left: 1.6px solid var(--online);
  border-bottom: 1.6px solid var(--online);
  transform: rotate(-45deg);
}

.login-rodape {
  margin: 0;
  font-size: 12px;
  color: var(--nav-ink-fraco);
}

/* No celular a tela inteira é o formulário: o painel não some por falta de
   espaço, some porque ler três argumentos antes de digitar a senha, num
   aparelho, é atrito. */
@media (max-width: 860px) {
  .login-lado {
    display: none;
  }

  /* Sem o painel ao lado, o cartão precisa da margem que o `.login-wrap`
     deixou de ter quando virou um layout de duas colunas. */
  .login-wrap {
    padding: 0 18px;
  }
}

/* `margin: auto` no lugar do `justify-content` do pai: com o painel escuro ao
   lado, o cartão precisa centralizar no espaço que SOBROU, e não na tela. */
.login-card {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-lg);
  padding: 40px 36px 32px;
  width: 100%;
  max-width: 380px;
  margin: auto;
  box-shadow: var(--shadow-forte);
  text-align: center;
  transition: max-width var(--transicao-movimento);
}

@media (max-width: 860px) {
  .login-card {
    margin: 24px auto;
  }
}

/* Entrar são dois campos; cadastrar são doze, mais a escolha do que a pessoa
   veio fazer e a lista de categorias. O cartão cresce em vez de espremer. */
.login-card-largo {
  max-width: 480px;
}

.logo {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.021em;
  color: var(--ink);
}

.subtitle {
  margin: 3px 0 28px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: -0.008em;
}

form {
  display: flex;
  flex-direction: column;
  text-align: left;
}

label {
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--ink-2);
  letter-spacing: -0.004em;
}

input,
select {
  padding: 9px 12px;
  margin-bottom: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--transicao-estado), box-shadow var(--transicao-estado);
}

input::placeholder {
  color: var(--faint);
}

/* O anel usa o azul da marca. Era `rgba(0, 103, 192, ...)`, herança de uma
   paleta anterior: um azul que não existe mais em lugar nenhum do sistema, e
   que aparecia no foco de TODO campo do produto. */
input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--anel-foco);
}

input[type="file"] {
  padding: 7px 9px;
  font-size: 12.5px;
  color: var(--muted);
}


/* ---- O recado da tela de entrada ----
   Este bloco é a única coisa que diz o que fazer AGORA: confirme o e-mail, o
   convite venceu, peça um novo ao gestor, as senhas não conferem. Era um
   parágrafo cinza de 12,5px encostado no rodapé do cartão, do mesmo tamanho e
   da mesma cor do "Esqueci minha senha" logo acima, e por isso lido como
   rodapé. Quem acabava de criar a conta clicava "Entrar" de novo sem nunca ter
   visto o pedido de confirmar o e-mail.
   Agora tem cor, contorno, ícone e uma primeira linha em negrito que resume o
   estado em três palavras. A cor não decora: verde é o que deu certo, vermelho
   é o que travou, âmbar é o que depende de outra pessoa. */
.status {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* Sem recado não há caixa: a margem de 18px ficaria sobrando embaixo do botão. */
.status:empty {
  display: none;
}

.status-aviso {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.status-aviso svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.status-aviso strong {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: var(--ink);
}

/* E-mail de empresa passa dos 40 caracteres sem um espaço onde quebrar, e
   quase todo recado daqui mostra um. Sem isto a palavra única empurra o cartão
   inteiro para fora da tela do celular. */
.status-aviso span {
  overflow-wrap: anywhere;
}

/* A mensagem de e-mail/senha errados é curta de propósito (ver avisoDeEntrada):
   duas linhas sem título, então centralizada fica mais limpa que o layout de
   ícone à esquerda + parágrafo, que é feito para texto mais longo. */
.status-aviso.status-aviso-centro {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.status-aviso.status-aviso-centro svg {
  margin-top: 0;
}

.status-ok {
  background: var(--ok-wash);
  border-color: var(--ok);
  color: var(--ink-2);
}

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

.status-erro {
  background: var(--danger-wash);
  border-color: var(--danger);
  color: var(--ink-2);
}

.status-erro svg {
  color: var(--danger);
}

.status-atencao {
  background: var(--warn-wash);
  border-color: var(--warn);
  color: var(--ink-2);
}

.status-atencao svg {
  color: var(--warn);
}

.status-info {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--ink-2);
}

.status-info svg {
  color: var(--accent-text);
}

/* "Entrando...", "Salvando...": duram um segundo e não pedem decisão nenhuma.
   Caixa colorida para isso seria alarme falso, então o andamento continua
   sendo a linha discreta de sempre. */
.status-andamento {
  grid-template-columns: 1fr;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.aviso-primeiro-acesso {
  margin: 0 0 18px;
  padding: 10px 12px;
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: left;
}

/* E-mail corporativo não tem onde quebrar.
   Desde que o acesso passou a ser por convite, três avisos mostram o endereço
   de quem foi convidado — e endereço de empresa passa fácil dos 60 caracteres
   sem um espaço no meio. Sem isto, a palavra única empurra o cartão inteiro
   para fora da tela do celular: 528px de página dentro de uma janela de 375,
   medido no laboratório. */
.aviso-primeiro-acesso strong,
.form-error strong,
.chart-note strong {
  overflow-wrap: anywhere;
}

.switch-link {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.voltar-site {
  margin: 6px 0 0;
  text-align: center;
}

.voltar-site a {
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: none;
}

.voltar-site a:hover {
  color: var(--accent-text);
}

.link-inline {
  background: none;
  border: none;
  color: var(--accent-text);
  font-weight: 500;
  font-size: 12.5px;
  padding: 0;
  cursor: pointer;
}

.link-inline:hover {
  background: none;
  text-decoration: underline;
}

/* Nasce escondido, e quem mostra é o JavaScript.
 *
 * Era `style="display: none;"` no próprio HTML, em cinco blocos da tela de
 * entrada. Um atributo `style` no HTML é justamente o que a
 * Content-Security-Policy passa a bloquear sem `style-src 'unsafe-inline'` —
 * e o efeito seria a tela de entrada abrindo com os cinco blocos empilhados
 * à vista: login, cadastro, convite, "esqueci minha senha" e nova senha,
 * todos ao mesmo tempo.
 *
 * Classe, e não o atributo `hidden`: quem mostra escreve
 * `elemento.style.display = "flex"`, e estilo escrito pela CSSOM ganha da
 * classe sem precisar de `!important` em lugar nenhum. Com `hidden` seria
 * preciso `[hidden] { display: none !important }`, e aí o `!important`
 * ganharia de volta e nada abriria.
 *
 * O nome repetido no seletor não é engano. `.app-shell` declara
 * `display: flex` e está logo abaixo daqui: com a mesma especificidade, quem
 * ganha é quem vem depois — e o resultado foi a casca do sistema aparecendo
 * inteira embaixo da tela de entrada, para quem nem tinha entrado. Repetir a
 * classe dobra a especificidade e tira a regra da dependência da ordem, sem
 * usar `!important` (que ganharia até do `style.display` da CSSOM e travaria
 * a tela fechada para sempre). */
.oculto-de-inicio.oculto-de-inicio {
  display: none;
}

/* ---- A faixa do erro que ninguém previu ----

   Ver js/erro-inesperado.js. Ela existe para o caso em que a tela para sem
   dizer nada — e por isso ela não pode parecer parte da tela: fica presa no
   alto, por cima de tudo, na cor de quem traz má notícia.

   Faixa e não diálogo: o erro pode vir de um temporizador enquanto a pessoa
   digita, e roubar o foco nesse momento troca um defeito silencioso por um
   defeito grosseiro. */
.faixa-erro-inesperado {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--danger-wash);
  border-bottom: 2px solid var(--danger);
  box-shadow: var(--shadow-forte);
}

.faixa-erro-texto {
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink);
}

.faixa-erro-detalhe {
  flex: 0 1 auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
}

.faixa-erro-acoes {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ============ Estrutura ============ */

.app-shell {
  min-height: 100vh;
  display: flex;
  background: var(--bg);
}

/* ---- A barra lateral ----

   Escura, e não mais um cinza a mais.

   A tela tinha três cinzas quase iguais empilhados — barra, fundo e cartão —
   e a pessoa precisava procurar a divisão entre eles. O azul-marinho do
   logotipo resolve isso sem inventar cor nenhuma: o menu vira um bloco só,
   reconhecível pelo canto do olho, e todo o resto da tela passa a ser
   trabalho. É também o que separa "onde eu vou" de "o que eu faço", que era a
   distinção que faltava. */
.sidebar {
  /* A largura é ditada pelo pior caso, e o pior caso encolheu.

     Eram 250, medidos quando o item mais longo se chamava "Cadastro | Centro
     de Custo". Esse prefixo saiu quando o menu ganhou títulos de seção — quem
     agrupa agora é a seção, não o rótulo — e o item mais longo passou a ser
     "Categoria - Compradores", que pede 40 pontos a menos. A barra ficou com
     uma faixa de vazio à direita do texto, larga o bastante para se notar.

     Os dois limites são o mesmo cálculo em dois tamanhos de letra: ícone,
     folga, a palavra mais comprida do sistema e o respiro dos dois lados. Em
     tela baixa a letra do menu é menor, e a barra acompanha.

     Subiu de novo quando "Categoria - Compradores" virou "Compradores por
     categoria": eram 226 no máximo e o item quebrava em duas linhas, o único
     do menu a fazer isso. Item de menu tem uma linha, e a barra tem a largura
     do maior deles. */
  width: clamp(230px, 22.5vh, 242px);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--nav-bg) 0%, var(--nav-bg-2) 100%);
  color: var(--nav-ink);
  display: flex;
  flex-direction: column;
  padding: var(--sidebar-pad) 10px calc(var(--sidebar-pad) - 2px);
  gap: 2px;

  /* Fixa na tela enquanto o conteúdo rola.
     `align-self: flex-start` é indispensável: sem ele o item flex estica até
     a altura do conteúdo e o sticky não tem folga para agir. */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;

  /* Quem rola é a lista de itens, não a barra inteira: a marca fica presa em
     cima e o cartão de quem está usando fica preso embaixo. Antes a barra
     rolava por completo e, em tela baixa, o cartão simplesmente não existia
     até alguém descobrir que dava para rolar ali. */
  overflow: hidden;
  transition: width var(--transicao-movimento) ease;
}

/* Barra de rolagem discreta: no escuro, a barra padrão do Windows é um risco
   branco de alto contraste bem no meio da navegação. */
.sidebar::-webkit-scrollbar {
  width: 8px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 4px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px clamp(8px, 1.7vh, 14px);
}

/* No escuro, "one" fica no cinza-claro e "quote" no branco: o mesmo contraste
   de peso do logotipo original, só que invertido de fundo. */
.marca-sidebar .marca-nome {
  font-size: 15.5px;
  color: var(--nav-ink);
}

.marca-sidebar .marca-nome b {
  color: var(--nav-ink-forte);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--nav-ink);
  padding: 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.menu-toggle:hover {
  background: var(--nav-hover);
  color: var(--nav-ink-forte);
}

/* ---- O menu ---- */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--nav-gap);
  flex: 1;

  /* `min-height: 0` é o que permite ao item flex encolher abaixo do conteúdo —
     sem ele, `overflow-y` nunca entra em ação e a lista empurra o rodapé da
     barra para fora da tela. */
  min-height: 0;
  overflow-y: auto;
}

/* O bloco de rodapé (Suporte) não divide a sobra de espaço com o menu de
   cima: quem estica é só a lista principal. Uma linha fina separa os dois. */
.sidebar-nav-rodape {
  flex: 0 0 auto;
  margin-top: clamp(5px, 1.1vh, 8px);
  padding-top: clamp(5px, 1.1vh, 8px);
  border-top: 1px solid var(--nav-linha);
}

/* Sem itens não há bloco — senão sobraria a linha separadora sozinha. */
.sidebar-nav:empty {
  display: none;
}

/* ---- Comprar ou vender ----

   Só existe para a conta que tem os dois módulos. Dois botões no mesmo
   desenho dos itens de menu, e não um interruptor: interruptor diz
   "ligado/desligado", e aqui nenhum dos lados é a ausência do outro. O lado
   ativo NÃO leva o azul da aba ativa: seriam dois blocos azuis na mesma
   barra respondendo a perguntas diferentes ("de que lado?" e "em que
   tela?"). Ele se marca com o fundo claro e a borda, como um cartão erguido. */
.seletor-lado {
  display: flex;
  flex-direction: column;
  gap: var(--nav-gap);
  margin-bottom: clamp(6px, 1.3vh, 10px);
  padding-bottom: clamp(5px, 1.1vh, 8px);
  border-bottom: 1px solid var(--nav-linha);
}

.seletor-lado[hidden] {
  display: none;
}

.seletor-lado .seletor-lado-titulo {
  margin-top: 2px;
}

.lado-item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: 1px solid transparent;
  color: var(--nav-ink);
  padding: var(--nav-item-pad) 10px;
  font-size: var(--nav-item-fs);
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  line-height: 1.35;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: -0.004em;
  transition: background var(--transicao-estado), color var(--transicao-estado);
}

.lado-item svg {
  width: var(--nav-icone);
  height: var(--nav-icone);
  flex-shrink: 0;
  color: var(--nav-ink-fraco);
}

.lado-item > span:not(.nav-contador) {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lado-item .nav-contador {
  margin-left: auto;
}

.lado-item:hover {
  background: var(--nav-hover);
  color: var(--nav-ink-forte);
}

.lado-item:hover svg,
.lado-item.active svg {
  color: var(--nav-ink-forte);
}

.lado-item.active {
  background: var(--nav-hover);
  border-color: var(--nav-linha);
  color: var(--nav-ink-forte);
}

.lado-item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Encolhida, a barra mostra só os dois ícones, como faz com os itens. */
.app-shell.menu-encolhido .seletor-lado-titulo,
.app-shell.menu-encolhido .lado-item span {
  display: none;
}

.app-shell.menu-encolhido .lado-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* No celular o seletor entra junto com o menu, e some com ele. Sem linhas
   próprias: quem o emoldura é a linha de baixo do nome da empresa e a de
   cima do menu, senão cada divisa aparece em dobro. */
@media (max-width: 900px) {
  .seletor-lado {
    display: none;
    margin: 4px 0 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .sidebar.aberto .seletor-lado:not([hidden]) {
    display: flex;
  }

  .lado-item {
    padding: 10px 10px;
    font-size: 14px;
  }
}

/* ---- O mapa dos módulos da conta (Configurações) ----

   Uma linha por módulo, com a chave de desligar à direita. */
.lista-modulos {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modulo-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* O texto estica e empurra o botão para a ponta: o ícone fica colado à
   esquerda, e o "Desligar" dos dois módulos na mesma coluna. */
.modulo-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.modulo-texto strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
}

.modulo-texto > span {
  font-size: 12.5px;
  color: var(--faint);
}

.modulo-linha .btn-secondary {
  flex-shrink: 0;
}

/* Títulos de seção: o menu deixou de ser uma lista de dez coisas soltas.

   Dez itens seguidos sem hierarquia obrigam a ler todos para achar um. Três
   grupos de três ou quatro itens ("O dia a dia", "Cadastros", "Administração")
   deixam a pessoa pular direto para o pedaço certo — e explicam por que o
   item está ali. */
.nav-grupo {
  margin: var(--nav-grupo-mt) 10px 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nav-ink-fraco);
  white-space: nowrap;
}

.nav-grupo:first-child {
  margin-top: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: none;
  border: none;
  color: var(--nav-ink);
  padding: var(--nav-item-pad) 10px;
  font-size: var(--nav-item-fs);
  font-weight: 400;
  font-family: inherit;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  letter-spacing: -0.004em;
  position: relative;
  transition: background var(--transicao-estado), color var(--transicao-estado);
}

.nav-item svg {
  width: var(--nav-icone);
  height: var(--nav-icone);
  flex-shrink: 0;
  color: var(--nav-ink-fraco);
  transition: color var(--transicao-estado);
}

/* O rótulo nunca dobra. A barra tem a largura do maior rótulo, então isto não
   corta nada hoje; existe para o dia em que um rótulo novo for mais comprido
   do que a barra e a resposta certa for reticência, e não uma segunda linha. */
.nav-item > span:not(.nav-contador) {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.nav-item:hover svg {
  color: var(--nav-ink-forte);
}

.nav-item.active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 500;
  box-shadow: 0 4px 12px -4px rgba(var(--accent-rgb), 0.9);
}

.nav-item.active svg {
  color: #ffffff;
}

.nav-item:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* O contador do item de menu (quantos esperam por você naquela tela).
   Fica na ponta direita e some quando é zero — número zero em selo é ruído. */
.nav-contador {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.14);
  color: var(--nav-ink-forte);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* No item ativo o fundo do menu é o azul da marca, e um véu BRANCO por cima
   dele clareava a pastilha até o número branco dentro dela ficar em 3,11:1 —
   abaixo do mínimo de leitura. O véu escuro faz o contrário: escurece o azul
   e devolve o contraste ao número, sem trocar a cor de nada. */
.nav-item.active .nav-contador {
  background: rgba(0, 0, 0, 0.32);
}

/* Contador de coisa que trava o fluxo (aprovação parada, prazo estourado):
   sai do cinza e vai para o vermelho, porque não é "quantos", é "quantos
   estão esperando por você". */
.nav-contador-alerta {
  background: var(--alerta-cheio);
  color: #ffffff;
}

/* ---- O cartão de quem está usando (rodapé da barra) ----

   Saiu do canto superior direito e veio para cá. No alto ele disputava espaço
   com o título da página e com as ações da tela, e no celular sumia; aqui ele
   tem o lugar que tem em qualquer sistema que a pessoa usa o dia inteiro — o
   pé do menu — e cabe inteiro: nome, papel, se está online e a saída. */
.sidebar-usuario {
  margin-top: clamp(6px, 1.3vh, 10px);
  padding-top: clamp(6px, 1.3vh, 10px);
  border-top: 1px solid var(--nav-linha);
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: clamp(4px, 0.9vh, 6px) 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  flex: 1;
  min-width: 0;
  font-family: inherit;
}

.user-chip:hover {
  background: var(--nav-hover);
}

.user-chip:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* O avatar carrega o ponto de presença, e é por isso que ele é `position:
   relative`: o ponto se ancora no canto do círculo, não na linha de texto. */
/* No azul da marca, e não num véu branco: o círculo com as iniciais é o
   único ponto de cor da barra além do item ativo, e os dois dizem a mesma
   coisa, "isto é seu". */
.avatar {
  position: relative;
  width: var(--avatar-tam);
  height: var(--avatar-tam);
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

/* O anel é da cor do fundo em que o ponto está pousado: sem ele, verde sobre
   o círculo do avatar vira uma mancha em vez de um sinal. */
.presenca-ponto {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--online);
  box-shadow: 0 0 0 2px var(--nav-bg-2);
}

.user-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.user-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--nav-ink-forte);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 11px;
  color: var(--nav-ink-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sair é um ícone, e não a palavra: a palavra ao lado do nome parecia parte do
   nome. O rótulo continua existindo para quem lê a tela por voz. */
.nav-sair {
  background: none;
  border: none;
  color: var(--nav-ink-fraco);
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-sair svg {
  width: 17px;
  height: 17px;
  display: block;
}

.nav-sair:hover {
  background: var(--nav-hover);
  color: var(--nav-ink-forte);
}

.nav-sair:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* ---- Barra encolhida (só ícones) ----

   Numa tela de 1280 a barra come um quinto da largura, e quem já sabe o
   caminho não precisa dos rótulos. O estado é lembrado no navegador: quem
   encolheu uma vez não encolhe de novo todo dia. */
.app-shell.menu-encolhido .sidebar {
  width: 68px;
  padding-left: 8px;
  padding-right: 8px;
}

.app-shell.menu-encolhido .marca-nome,
.app-shell.menu-encolhido .nav-item span,
.app-shell.menu-encolhido .nav-contador,
.app-shell.menu-encolhido .user-meta,
.app-shell.menu-encolhido .nav-grupo,
.app-shell.menu-encolhido .identidade-empresa,
.app-shell.menu-encolhido .emlz-detalhe,
.app-shell.menu-encolhido .emlz-label,
.app-shell.menu-encolhido .emlz-alerta,
.app-shell.menu-encolhido .nav-sair {
  display: none;
}

.app-shell.menu-encolhido .nav-item,
.app-shell.menu-encolhido .user-chip {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

.app-shell.menu-encolhido .sidebar-brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

/* O botão de encolher: mora no rodapé do menu, virado para o lado que vai
   acontecer. Só existe em tela larga — no celular quem manda é o botão de
   abrir o menu. */
.menu-encolher {
  display: none;
  background: none;
  border: none;
  color: var(--nav-ink-fraco);
  padding: clamp(5px, 1vh, 7px) 10px;
  margin-top: clamp(3px, 0.8vh, 6px);
  border-radius: var(--radius-sm);
  cursor: pointer;
  align-items: center;
  gap: 10px;
  font-family: inherit;
  font-size: 12px;
}

.menu-encolher svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  transition: transform var(--transicao-movimento);
}

.menu-encolher:hover {
  background: var(--nav-hover);
  color: var(--nav-ink-forte);
}

.app-shell.menu-encolhido .menu-encolher {
  justify-content: center;
}

.app-shell.menu-encolhido .menu-encolher svg {
  transform: rotate(180deg);
}

.app-shell.menu-encolhido .menu-encolher span {
  display: none;
}

@media (min-width: 901px) {
  .menu-encolher {
    display: flex;
  }
}

/* ---- Barra superior ---- */

.app-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Deixou de ser uma faixa branca vazia: agora é o cabeçalho da página, com o
   título à esquerda e as ações à direita. Usa a cor do fundo para não criar
   um segundo plano — o que devolve altura ao conteúdo. */
.topbar {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: var(--pad-topo) var(--pad-conteudo) calc(var(--pad-topo) * 0.7);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* O `margin-right: auto` empurra tudo que vem depois para a direita. */
.topbar-titulo {
  min-width: 0;
  margin-right: auto;
  padding-top: 2px;
}

/* A data por extenso, acima do título.

   Parece enfeite e não é: quem trabalha com prazo ("faltam 3 dias", "vence
   hoje") precisa saber que dia o sistema acha que é hoje. Ela some nas telas
   que não são painel, onde o que importa é o nome da tela. */
.topbar-data {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* No azul da marca: é a única linha do cabeçalho com cor, e é a que muda
     todo dia. Cinza, ela sumia em cima da saudação. */
  color: var(--accent-text);
  white-space: nowrap;
}

.topbar-data[hidden] {
  display: none;
}

/* O caminho de volta, acima do título ("← Configurações").

   Morava à direita, como um botão de contorno ao lado das ações da tela, e o
   olho que procurava "o que eu faço aqui" achava primeiro "sair daqui". Em
   cima do título ele vira o que é: o lugar de onde a pessoa veio, lido antes
   do nome da tela em que ela está. Texto na cor da marca e sem caixa, como um
   link: é navegação, não ação. */
.topbar-voltar {
  margin: 0 0 3px;
}

.topbar-voltar[hidden] {
  display: none;
}

.btn-voltar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: -8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-text);
  white-space: nowrap;
  transition: background var(--transicao-estado), color var(--transicao-estado);
}

.btn-voltar:hover {
  background: var(--accent-wash);
}

.btn-voltar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.topbar-titulo h1 {
  margin: 0 0 2px;
  font-size: clamp(17px, 2.9vh, 21px);
  font-weight: 600;
  letter-spacing: -0.021em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modo saudação: o título vira a frase que cumprimenta a pessoa, e cresce.
   Só os painéis usam — é onde o dia começa. */
.topbar-saudacao h1 {
  font-size: var(--fs-saudacao);
  font-weight: 650;
  letter-spacing: -0.028em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.saudacao-icone {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.acoes-pagina {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.acoes-pagina:empty {
  display: none;
}

.icone-btn {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--card-line);
  color: var(--ink-2);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

.icone-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.icone-btn:hover {
  background: var(--accent-wash);
  color: var(--accent-text);
  border-color: var(--accent-wash-2);
}

.icone-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sino-contador {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--alerta-cheio);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 999px;
  padding: 0 5px;
  min-width: 17px;
  text-align: center;
  line-height: 17px;
  box-shadow: 0 0 0 2px var(--bg);
}

.link-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-weight: 400;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.link-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.app-main {
  flex: 1;
  padding: 4px var(--pad-conteudo) 40px;
  min-width: 0;
}

.page-sub {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: -0.004em;
}

/* A linha embaixo da saudação, quando é feita de atalhos (o painel do dono):
   cada pedaço é um botão que parece texto e se sublinha ao passar o mouse.
   Parece texto de propósito: a linha continua sendo lida como uma frase, e
   só quem procura um caminho descobre que ela também é um. */
.page-sub .sub-atalho {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--transicao-estado), text-decoration-color var(--transicao-estado);
}

.page-sub .sub-atalho:hover {
  color: var(--accent-text);
  text-decoration-color: currentColor;
}

.page-sub .sub-atalho:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.page-sub .sub-separador {
  margin: 0 2px;
}

.secao-titulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--faint);
  margin: 24px 0 8px;
}

.secao-titulo:first-of-type {
  margin-top: 0;
}

.painel-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.empty {
  color: var(--muted);
  font-size: 12.5px;
}

/* ---- Cadastros: edição direto na tabela ---- */

/* A regra global `form` é coluna; aqui precisa ser linha. Sem declarar
   explicitamente, o flex-basis dos campos vira altura em vez de largura. */
.form-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.form-inline input,
.form-inline select {
  margin-bottom: 0;
  width: auto;
  min-width: 180px;
  flex: 1 1 180px;
}

.form-inline button {
  flex: 0 0 auto;
}

.campo-inline {
  margin-bottom: 0;
  padding: 6px 9px;
  font-size: 12.5px;
  background: transparent;
  border-color: transparent;
}

.campo-inline:hover {
  border-color: var(--line);
  background: var(--surface);
}

.campo-inline:focus {
  background: var(--surface);
}

.marca-salvo {
  display: block;
  font-size: 11px;
  color: var(--ok);
  margin-top: 2px;
  padding-left: 2px;
}

.marca-erro {
  color: var(--danger);
}

/* A categoria escolhida da lista comum da plataforma. É a coluna que decide
   quais fornecedores são encontrados, então tem a maior largura da tabela. */
.col-cad-categoria {
  width: 44%;
}

/* Como a equipe do cliente chama aquilo. Opcional, e por isso menor. */
.col-cad-apelido {
  width: 34%;
}

.col-cad-codigo {
  width: 20%;
}

.col-cad-desc {
  width: 32%;
}

/* Quem autoriza o gasto daquele centro de custo. Larga o bastante para caber
   nome completo: "Ana P..." obrigaria a abrir o seletor para conferir. */
.col-cad-aprovador {
  width: 26%;
}

.col-cad-acao {
  width: 22%;
}

/* ---- Chamados ---- */

.lista-chamados {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chamado {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.chamado-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.chamado-id h2 {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.chamado-sub {
  font-size: 11.5px;
  color: var(--faint);
}

.chamado-mensagem {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.chamado-resposta {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
}

.chamado-resposta-rotulo {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
  margin-bottom: 3px;
}

.chamado-resposta p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.chamado-acoes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.chamado-botoes {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.chamado-botoes select {
  margin: 0;
  width: auto;
  padding: 6px 9px;
  font-size: 12.5px;
}

textarea {
  padding: 9px 11px;
  margin-bottom: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-family: inherit;
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
}

textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.campo-resposta {
  margin-bottom: 0;
}

.lista-simples {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lista-simples li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-2);
}

.lista-simples strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Camada da plataforma: a lista de empresas ----

   Era uma grade de cartões. Cartão é bom para poucos e para olhar um de cada
   vez; esta tela existe para comparar todos, e a partir de umas dez empresas a
   grade obrigava a rolar lendo nome por nome. As colunas fazem o que o cartão
   não fazia: alinham os mesmos números uns embaixo dos outros. */

.emp-nome {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

/* A sigla colorida sobreviveu ao cartão porque ela não é enfeite: é o que faz
   a empresa certa ser encontrada de relance numa lista comprida, antes de
   qualquer leitura. Menor do que era no cartão, para caber na altura da
   linha. */
/* As iniciais de cada cliente, no quadrado colorido.

   O FUNDO é a cor de destaque daquela empresa, a 12% — é ele que distingue um
   cliente do outro de relance. O TEXTO não é mais: ele era a mesma cor em
   cheio sobre o próprio véu dela, o que dava 4,03:1 com o azul da marca e
   daria pior com qualquer cor mais clara que alguém cadastrasse. Uma cor
   escolhida no cadastro não pode decidir se o texto é legível.

   O azul de leitura do sistema resolve os dois lados: passa sobre o véu de
   qualquer matiz (12% de alfa sobre branco é sempre claro) e a distinção
   entre clientes continua onde sempre esteve, que é o fundo. */
.emp-sigla {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--accent-text);
}

.emp-nome-texto {
  min-width: 0;
  flex: 1;
}

/* A barra de espaço, achatada para caber na linha. Ela fica porque um número
   solto ("228 KB") não diz se é muito: é o traço ao lado que transforma o
   número em "quase nada" ou "quase no limite". */
.emp-espaco {
  display: block;
}

.emp-espaco .armz-barra {
  display: block;
  margin-bottom: 4px;
}

.col-emp-nome {
  width: 25%;
}

.col-emp-situacao {
  width: 17%;
}

/* Número alinhado à direita, e não à esquerda como o resto da tabela.
   Coluna de número existe para ser somada com o olho, e isso só funciona com
   as casas decimais uma embaixo da outra. `th` precisa do peso do seletor da
   tabela para vencer o `text-align: left` do cabeçalho.

   O respiro lateral encolhe de 14px para 8px: com o padrão, "ECONOMIA" não
   cabia na largura útil e o cabeçalho quebrava em "ECONO / MIA". São três
   colunas curtas lado a lado, e elas já se separam pelo alinhamento. */
.tabela-requisicoes th.col-emp-num,
.tabela-requisicoes td.col-emp-num {
  padding-left: 8px;
  padding-right: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cada coluna de número tem a largura do cabeçalho dela, e não uma fatia
   igual para as três. Com as três em 9%, "ECONOMIA" não cabia e quebrava em
   "ECONO / MIA": o conteúdo é curto, mas quem manda na largura mínima é a
   palavra do cabeçalho. */
.tabela-requisicoes th.col-emp-pessoas,
.tabela-requisicoes td.col-emp-pessoas {
  width: 9%;
}

.tabela-requisicoes th.col-emp-abertas,
.tabela-requisicoes td.col-emp-abertas {
  width: 10%;
}

.tabela-requisicoes th.col-emp-economia,
.tabela-requisicoes td.col-emp-economia {
  width: 12%;
}

.col-emp-espaco {
  width: 14%;
}

.col-emp-acoes {
  width: 13%;
}

/* A empresa que ficou sem ninguém capaz de entrar. É a única linha da tela que
   pede decisão de quem administra, as outras são só informação, e por isso é a
   única marcada. Um filete na borda, e não a linha inteira colorida: colorir a
   linha apagaria os selos que estão dentro dela. */
.tabela-requisicoes tbody tr.linha-atencao td:first-child {
  box-shadow: inset 3px 0 0 var(--danger);
}

@media (max-width: 640px) {
  /* No cartão do celular a coluna deixou de existir, e com ela tudo o que
     existia para organizar colunas: o alinhamento à direita, o respiro
     estreito e, principalmente, a largura em porcentagem. A largura era a que
     estragava a tela — 9% de 375px é uma tira de 34px, e "PESSOAS" descia uma
     letra por linha dentro dela. O `width: auto` do cartão não vencia sozinho
     porque estas regras têm um seletor a mais. */
  .tabela-requisicoes td.col-emp-nome,
  .tabela-requisicoes td.col-emp-situacao,
  .tabela-requisicoes td.col-emp-pessoas,
  .tabela-requisicoes td.col-emp-abertas,
  .tabela-requisicoes td.col-emp-economia,
  .tabela-requisicoes td.col-emp-espaco,
  .tabela-requisicoes td.col-emp-acoes {
    width: auto;
  }

  .tabela-requisicoes td.col-emp-num {
    text-align: left;
    padding-left: 0;
    padding-right: 0;
  }

  /* O filete lateral vira a borda de cima do cartão: a "primeira célula" no
     empilhado é a linha do nome, e um traço vertical de 3px ali dentro
     pareceria sujeira. */
  .tabela-requisicoes tbody tr.linha-atencao td:first-child {
    box-shadow: none;
  }

  .tabela-requisicoes tbody tr.linha-atencao {
    border-left: 3px solid var(--danger);
  }
}

/* ============ Indicadores ============ */

/* Quatro colunas fixas, e não auto-fit.

   Todos os painéis mostram exatamente quatro indicadores. Com auto-fit, uma
   largura intermediária cabia três e jogava o quarto sozinho na linha de
   baixo — um bloco solto com dois terços de vazio ao lado. Número fixo por
   faixa de tela nunca sobra um.

   minmax(0, 1fr) no lugar de auto: sem isso uma célula do grid nunca encolhe
   abaixo do conteúdo e a linha estoura para fora da tela. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

/* Com o quadradinho de ícone, quatro indicadores numa tela de 1200px deixam
   cada bloco com 230px — e "Tempo médio de fechamento" quebra em três linhas.
   Duas colunas resolvem: dois blocos largos por linha, nenhum rótulo picado. */
@media (max-width: 1240px) {
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat-tile {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: var(--pad-cartao) calc(var(--pad-cartao) + 1px);
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  min-width: 0;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

.stat-texto {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* O quadradinho de ícone.

   Ele não está ali para enfeitar: é o que deixa a fileira de quatro números
   distinguível de relance. Sem ele, quatro caixas brancas iguais obrigam a
   ler os quatro rótulos toda vez para achar o número que se procurava.

   `flex-shrink: 0` porque um quadrado que amassa deixa de ser quadrado — e
   numa tela de 1100px de largura a coluna do indicador fica estreita. */
.stat-icone {
  width: var(--stat-icone);
  height: var(--stat-icone);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icone svg {
  width: 21px;
  height: 21px;
  display: block;
}

.stat-icone-azul {
  background: var(--tom-azul-wash);
  color: var(--tom-azul);
}

.stat-icone-violeta {
  background: var(--tom-violeta-wash);
  color: var(--tom-violeta);
}

.stat-icone-verde {
  background: var(--tom-verde-wash);
  color: var(--tom-verde);
}

.stat-icone-ambar {
  background: var(--tom-ambar-wash);
  color: var(--tom-ambar);
}

.stat-icone-rosa {
  background: var(--tom-rosa-wash);
  color: var(--tom-rosa);
}

.stat-icone-navy {
  background: var(--tom-navy-wash);
  color: var(--tom-navy);
}

.stat-icone-vermelho {
  background: var(--danger-wash);
  color: var(--danger);
}

/* ---- Blocos que levam para outra tela ---- */

.stat-tile-link,
.chart-card-link,
.barra-linha-link,
.notif-link {
  cursor: pointer;
  transition: border-color var(--transicao-estado), box-shadow var(--transicao-estado), transform var(--transicao-estado);
}

.stat-tile-link:hover,
.chart-card-link:hover {
  border-color: var(--accent-wash-2);
  box-shadow: var(--shadow-forte);
  transform: translateY(-1px);
}

.stat-tile-link:focus-visible,
.chart-card-link:focus-visible,
.barra-linha-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.notif-link:hover {
  background: var(--accent-wash);
}

/* O número vem primeiro e é o maior elemento do bloco: é o que a pessoa veio
   ler. O rótulo abaixo diz do que ele é, e a linha de apoio explica como foi
   contado — nessa ordem de importância, e com o tamanho dizendo isso. */
.stat-value {
  font-size: var(--fs-stat);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: var(--ink);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Valor que é frase, e não cifra (categoria, condição de pagamento): corpo de
   texto, não corpo de número. Ver o porquê em statTile(). */
.stat-value-texto {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  /* Frase quebra: é a exceção ao `nowrap` da cifra logo acima. Sem esta
     linha, o nome de uma categoria comprida saía do bloco e escrevia por
     cima do indicador vizinho. */
  white-space: normal;
}

/* O rótulo tem uma linha. Ele diz de que é o número, e um rótulo dobrado
   ("Tempo médio de / fechamento") desalinha a fileira inteira: a grade de
   indicadores já cai para duas colunas antes de o mais comprido não caber. */
.stat-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.004em;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stat-support {
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.35;
}

/* ============ Gráficos ============ */

/* Duas colunas, pelo mesmo motivo das quatro acima: os painéis têm quatro
   gráficos, e duas colunas fecham 2x2 exato. Com três, sobrava um cartão
   sozinho na última linha. De quebra, cartões mais largos deixam de cortar os
   rótulos das barras ("Aguardando apr..." era o estado normal). */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: var(--pad-cartao) calc(var(--pad-cartao) + 2px);
  box-shadow: var(--shadow);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.chart-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A altura reservada é a de DUAS linhas, e não a de uma.

   Reservar espaço só quando falta a nota resolvia metade do problema: bastava
   a tela estreitar para uma nota mais comprida quebrar em duas linhas e
   empurrar o gráfico daquele cartão para baixo, desencontrando a fileira de
   novo. Duas linhas cobrem todas as notas que existem hoje em qualquer
   largura. O custo é uma linha em branco nos cartões de nota curta; o ganho é
   que os gráficos batem sempre, e não só quando a janela colabora. */
.chart-note {
  margin: 0 0 12px;
  min-height: 30px;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--faint);
}

/* ---- Onde a nota fica em relação ao que ela explica ----

   Estas quatro classes substituem 36 atributos `style=` montados em
   JavaScript, e a razão de existirem não é arrumação: era só por causa deles
   que a Content-Security-Policy precisava de `style-src 'unsafe-inline'`.
   Sem `unsafe-inline`, uma injeção de CSS deixa de conseguir desenhar por
   cima da tela ou vazar o que está escrito nela por seletor de atributo.

   De quebra, some a variação sem motivo: os 36 usavam 10, 14, 16, 18 e 22px
   para dizer três coisas. Agora são três distâncias, e cada uma tem nome.

   ANTES do que explica  a nota introduz o bloco que vem em seguida.
   DEPOIS do que explica a nota comenta o que a pessoa acabou de ler.
   COLADA               a nota pertence ao campo logo acima e sobe até ele.

   O seletor é composto (`.chart-note.nota-antes`, e não só `.nota-antes`) de
   propósito. A base de cada um destes elementos declara `margin` inteiro, e
   `margin` cancela `margin-top`: com a mesma especificidade, quem ganha é
   quem estiver mais abaixo no arquivo, e `.campo-nota` está 1000 linhas
   abaixo daqui. Foi exatamente o que aconteceu na primeira tentativa — a nota
   do bloco de itens voltou para os -12px da base e escreveu por cima do
   rótulo acima dela, em 360px de largura. Um ponto a mais no seletor tira a
   regra da dependência da ordem. */
.chart-note.nota-antes {
  margin-bottom: 16px;
}

.chart-note.nota-depois {
  margin-top: 14px;
}

.chart-note.nota-colada {
  margin: -8px 0 16px;
}

.campo-nota.nota-sem-folga {
  margin-top: 0;
}

/* O mesmo, para o que não é nota: um bloco que precisa respirar do anterior,
   e um título de seção que abre um assunto novo dentro da mesma tela. */
.form-card.bloco-afastado,
.form-actions.bloco-afastado {
  margin-top: 16px;
}

.chart-title.titulo-afastado {
  margin-top: 22px;
}

.barras {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
  gap: 7px;
}

.barra-linha {
  display: grid;
  grid-template-columns: minmax(0, 136px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  text-align: left;
}

.barra-linha-link:hover {
  background: var(--accent-wash);
}

.barra-rotulo {
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra-trilho {
  background: var(--bg);
  border-radius: 3px;
  height: 15px;
  overflow: hidden;
}

.barra-preenchida {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  min-width: 2px;
}

.barra-valor {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 30px;
  text-align: right;
}

/* Sem margem no topo: quem dá o respiro é a linha da nota, que agora existe
   em todo cartão. Os 12px que havia aqui empurravam o gráfico de colunas para
   baixo e o desencontravam do gráfico de barras ao lado. */
.colunas {
  position: relative;
  height: 172px;
  border-bottom: 1px solid var(--line-soft);
  margin: 0 0 24px;
}

.coluna-slot {
  position: absolute;
  bottom: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3px;
}

.coluna-marca {
  display: block;
  width: 100%;
  max-width: 34px;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

/* Cada coluna do gráfico é uma fatia fixa da largura do cartão (100/n%), e as
   fatias são posicionadas por cima umas das outras. Um rótulo que não coubesse
   na fatia dele — "R$ 25 mil" em seis meses num cartão estreito — ia escrever
   por cima do mês vizinho. Ele quebra em duas linhas quando precisa; como sobe
   a partir do fim da coluna, a barra não se mexe. */
.coluna-valor {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
  text-align: center;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.coluna-rotulo {
  position: absolute;
  bottom: -20px;
  font-size: 11px;
  color: var(--faint);
  text-transform: capitalize;
}

/* ============ Tabela ============ */

/* A tabela nunca rola na horizontal: largura fixa em porcentagem, conteúdo
   quebra linha. As colunas são compostas (duas linhas por célula) justamente
   para caber tudo no que a tela mostra. */
.tabela-scroll {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.tabela-requisicoes {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12.5px;
}

.tabela-requisicoes th,
.tabela-requisicoes td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Nada dentro de uma célula é mais largo do que ela.

   Esta é a regra que faltava, e a falta dela explica o texto escrito por cima
   de outro texto. A tabela tem largura fixa por coluna; qualquer coisa que
   não quebre linha — um selo de status, um botão, um valor — simplesmente
   passava POR CIMA da coluna vizinha quando não cabia. Nada avisava: o
   navegador desenha o transbordo em silêncio.

   Quebrar é a saída certa aqui. Cortar com reticências esconderia justamente
   o que a pessoa veio ler ("Aguardando apr..." não diz de quem se espera o
   quê), e rolagem lateral numa tabela de trabalho é pior do que uma linha
   mais alta. */
.tabela-requisicoes td > *,
.tabela-requisicoes td .badge,
.tabela-requisicoes td button,
.tabela-requisicoes td select {
  max-width: 100%;
}

/* Selo e botão nascem com `white-space: nowrap`, que é o certo em barra de
   ferramentas e errado dentro de uma coluna estreita. Aqui eles quebram. */
.tabela-requisicoes td .badge,
.tabela-requisicoes td .btn-mini {
  white-space: normal;
  overflow-wrap: break-word;
}

/* Em tela de computador, o selo volta a ter uma linha só.

   A regra acima existe para o celular e para a janela apertada, onde um selo
   que não quebra passa por cima da coluna vizinha. A partir de 1280 pontos
   as colunas de status foram medidas para o selo mais comprido do sistema
   ("Aguardando aprovação", "Aguardando resposta") caber inteiro, com folga
   menor em volta da palavra, e um selo dobrado ali só deixava a linha mais
   alta sem informar nada. */
@media (min-width: 1280px) {
  .tabela-requisicoes td .badge {
    white-space: nowrap;
    padding: 3px 8px;
  }
}

/* Cabeçalho em caixa alta e pequeno: ele precisa ser reconhecível como
   cabeçalho sem competir com o conteúdo da linha. A faixa cinza saiu — a
   linha de baixo já separa, e a faixa criava um terceiro tom dentro do
   cartão branco. */
.tabela-requisicoes th {
  color: var(--muted);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  padding: 14px 14px 10px;
  /* Cabeçalho tem uma linha. A coluna de pessoas se chamava "Requisitante /
     Comprador" e dobrava em toda largura; virou "Responsáveis". Se um título
     novo não couber, ele corta com reticência em vez de dobrar, porque um
     cabeçalho de duas linhas levanta a fileira inteira. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tabela-requisicoes tbody tr:last-child td {
  border-bottom: none;
}

.tabela-requisicoes tbody tr:hover {
  background: var(--surface-2);
}

/* A linha de quem excluiu a conta. Fica na lista porque o nome ainda assina o
   histórico, mas não tem nada para clicar — e precisa parecer o que é: um
   registro, não uma pessoa esperando alguma coisa. */
.tabela-requisicoes tbody tr.linha-encerrada {
  opacity: 0.62;
}

/* Célula de duas linhas */
.cel-principal {
  display: block;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}

.cel-apoio {
  display: block;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 1px;
}

.ganho {
  color: var(--ok);
  font-weight: 500;
}

/* As larguras somam 100 com a tabela cheia (as sete colunas). Quando alguma
   sai — o anexo some se ninguém anexou nada, a coluna de ações não existe
   para quem só acompanha — o navegador redistribui o que sobra na mesma
   proporção, e é por isso que o que importa aqui é a RELAÇÃO entre elas.

   A de status cresceu: ela carrega o selo, que é a palavra mais comprida da
   linha ("Aguardando aprovação"), e com 13% ele não cabia em nenhuma tela
   abaixo de 1400px. */
.col-requisicao {
  width: 20%;
}

.col-classificacao {
  width: 12%;
}

.col-status {
  width: 20%;
}

.col-pessoas {
  width: 12%;
}

.col-valores {
  width: 13%;
}

/* 7 e não 6: com 6% a coluna tinha 31 pontos de texto e "ANEXO", em caixa
   alta espaçada, virava duas linhas no cabeçalho. */
.col-anexo {
  width: 7%;
}

.col-acoes {
  width: 16%;
}

.tabela-requisicoes .col-status .cel-principal {
  font-weight: 400;
}

/* Números e datas nunca partem no meio — mas a LINHA pode quebrar entre as
   palavras dela.

   Antes as duas coisas vinham juntas: `nowrap` segurava a linha inteira, e
   uma linha de apoio comprida ("0 de 1 responderam · faltam 3 dias") saía da
   coluna e ia escrever em cima da coluna do lado. `overflow-wrap: normal`
   sozinho já garante o que se queria: a quebra acontece no espaço, nunca no
   meio de "14/08/2026" ou de "R$ 24.500,00". */
.col-valores .cel-principal,
.col-status .cel-apoio {
  overflow-wrap: normal;
}

/* Menos quando o apoio é texto escrito por gente — o nome de quem precisa
   aprovar, o motivo de uma reprovação. Sem quebrar linha, um motivo comprido
   passa por cima da coluna vizinha. */
.col-status .cel-apoio-essencial {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* O selo virou pastilha com um ponto na frente.

   O ponto não é enfeite: ele repete, em forma, a informação que a cor dá — e
   é o que faz o estado continuar legível para quem não separa verde de
   vermelho. Cor sozinha nunca deve ser o único portador de um significado. */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.002em;
  line-height: 1.35;
}

/* `currentColor` no ponto: cada estado já define a cor do texto, e o ponto a
   segue sem precisar de uma regra por status.

   O ponto é `inline-block` dentro de um selo `inline-block`, e não um item de
   caixa flexível: numa coluna estreita de celular, o selo precisa poder
   quebrar "Aguardando aprovação" em duas linhas. Como caixa flexível ele não
   quebrava — encolhia até o limite da maior palavra e passava POR CIMA da
   coluna vizinha, que é exatamente o defeito que o laboratório pegou. */
.badge[class*="status-"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  vertical-align: 1px;
}

/* Neutro: para rótulos que não são estado (ex.: tipo Material/Serviço).
   As cores de status ficam reservadas ao ciclo de vida da requisição. */
.badge-neutro {
  background: var(--bg);
  color: var(--muted);
}

.status-NOVA {
  background: var(--accent-wash);
  color: var(--accent-text);
}

.status-EM_ANALISE,
.status-EM_COTACAO,
.status-EM_NEGOCIACAO {
  background: var(--warn-wash);
  color: var(--warn);
}

.status-FECHADA {
  background: var(--ok-wash);
  color: var(--ok);
}

.status-CANCELADA,
.status-REPROVADA {
  background: var(--danger-wash);
  color: var(--danger);
}

/* Esperando a decisão de alguém. Fica no cinza neutro de propósito: não é
   trabalho em andamento (laranja) nem resultado (verde ou vermelho) — é
   ausência de movimento, e a cor precisa dizer isso. */
.status-EM_APROVACAO {
  background: var(--bg);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ============ Roteamento ============ */

.col-usr-nome {
  width: 15%;
}

.col-usr-email {
  width: 16%;
}

.col-usr-papel {
  width: 13%;
}

/* O centro de custo da pessoa: de onde sai a verba do que ela pedir e, por
   consequência, quem aprova os pedidos dela. */
.col-usr-centro {
  width: 15%;
}

/* 14 e não 10: é a coluna do selo, e "Aguardando resposta" é o selo mais
   comprido da tela. Com 10% ele saía em três linhas. Já foi 19, e sobrava:
   a folga saía da coluna das ações, que é a que precisa dela. */
.col-usr-status {
  width: 14%;
}

/* Três ações por linha (desativar, reenviar convite, excluir). Com 21% o
   Excluir descia para uma segunda linha em toda pessoa da equipe, e a tabela
   inteira ficava com o dobro da altura. 26% cabe as três lado a lado a partir
   de 1440px; em 1280 o Excluir desce sozinho, alinhado à direita embaixo dos
   outros dois, e continua lendo como uma fila só. */
.col-usr-acao {
  width: 26%;
}

.sel-papel,
.sel-centro {
  margin: 0;
  padding: 5px 8px;
  font-size: 12px;
  width: 100%;
}

/* Requisitante sem centro de custo: o pedido dele cai na Gestão em vez de ir
   para quem responde pela área. Não é erro que trave nada, mas precisa
   incomodar até alguém escolher. */
.campo-pendente {
  border-color: var(--danger);
  background: var(--danger-wash);
}

.col-rot-categoria {
  width: 28%;
}

.col-rot-tipo {
  width: 12%;
}

.col-rot-chips {
  width: 36%;
}

.col-rot-add {
  width: 24%;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--accent-wash);
  color: var(--accent-text);
  border-radius: 5px;
  padding: 2px 4px 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
}

.chip-x {
  background: none;
  border: none;
  color: var(--accent-text);
  font-size: 14px;
  line-height: 1;
  padding: 0 3px;
  cursor: pointer;
  border-radius: 3px;
  opacity: 0.65;
}

.chip-x:hover {
  background: var(--accent-wash);
  color: var(--accent-text);
  opacity: 1;
}

.pool-geral {
  font-size: 11.5px;
  color: var(--faint);
  font-style: italic;
}

.sel-add {
  margin: 0;
  padding: 5px 8px;
  font-size: 12px;
  width: 100%;
}

.btn-anexo {
  font-size: 12px;
}

/* Encaminhar a requisição para um comprador, dentro da célula de ações: a
   regra geral de campo estica em 100% e empurraria os botões para fora. */
.sel-atribuir {
  width: auto;
  max-width: 140px;
  margin: 0;
  padding: 4px 8px;
  font-size: 12px;
}

/* ============ Botões e formulários ============ */

.form-card {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 24px;
  margin: 0 0 18px;
  max-width: 420px;
  box-shadow: var(--shadow);
}

/* Cartão que guarda uma TABELA, e não um formulário.

   Os 420px acima existem porque campo de formulário longo demais é difícil de
   ler. Uma tabela de cinco ou seis colunas dentro desse limite é o contrário:
   cada coluna fica com 50px e o conteúdo sai por cima do vizinho. Aqui o
   cartão ocupa a largura da página, como as tabelas soltas ocupam. */
.form-card-tabela {
  max-width: none;
}

.form-card h2 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
}

.form-card form {
  text-align: left;
}

/* Dobra quando não cabe: "Reenviar ajustada" e "Cancelar o pedido" lado a lado
   passavam 3px da borda do cartão com a fonte do Linux. Um botão na linha de
   baixo é melhor do que um botão cortado. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}


/* O botão que ocupa a largura do formulário. A tela de entrada empilha os
   campos numa coluna, e o botão que fecha a coluna acompanha a largura dela. */
.btn-bloco {
  width: 100%;
  padding: 10px 16px;
}



/* ---- Os dois botões que recusam, removem e apagam ----

   .btn-destrutivo é a ação destrutiva do dia a dia: Excluir, Remover,
   Suspender, Reprovar, Cancelar. Ela se chamava .btn-ghost, e o nome mentia
   duas vezes: prometia um botão neutro de baixa ênfase e entregava vermelho no
   hover, e por causa disso um botão "Fechar", que só fecha um painel, piscava
   como se fosse apagar alguma coisa.

   Contorno em vez de texto solto: ao lado de um "Aprovar" azul preenchido, a
   recusa sem contorno nenhum era lida como legenda, e não como o outro lado de
   uma decisão de duas vias.

   .btn-perigo, mais abaixo, continua sendo outra coisa: o irreversível que só
   acorda quando se digita o nome por extenso. */
.btn-destrutivo {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--danger);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.btn-destrutivo:hover {
  background: var(--danger-wash);
  border-color: var(--danger);
}

/* O ghost de verdade: baixa ênfase e neutro, sem promessa de destruição.
   É o "Fechar" de um painel, o "Voltar" de um passo. */
.btn-ghost {
  background: none;
  border: none;
  color: var(--muted);
  font-weight: 400;
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  padding: 4px 8px;
}

.btn-ghost:hover {
  background: var(--bg);
  color: var(--ink-2);
}

.btn-mini {
  padding: 5px 11px;
  font-size: 12px;
}

/* Desabilitado é sempre a mesma coisa e por isso tem sempre o mesmo cursor.
   Este dizia `wait`, que promete "já volta", enquanto o primário dizia
   `not-allowed`. Quem clica não sabia qual dos dois era verdade. */
.btn-mini:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.acoes-linha {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  overflow-wrap: normal;
}

/* ---- Documento anexado à proposta ---- */

/* Do lado de quem vende: a lista do que ele mandou, com a saída para trocar. */
.anexos-proposta {
  margin-top: 12px;
}

.lista-anexos {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lista-anexos li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
}

/* Do lado de quem compra: na célula do fornecedor, embaixo da data — é onde
   ele procura "o que este me mandou". */
.anexo-proposta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
}

/* ---- "Para responder agora" (topo do painel de vendas) ----
   Lista, não tabela: são poucas linhas e cada uma é um botão para a tela onde
   se responde. */

.trabalho-hoje {
  margin-bottom: 16px;
}

.lista-oportunidades {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.oport-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
}

.oport-linha:hover {
  background: var(--surface-2);
  border-color: var(--card-line);
}

.oport-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.oport-texto strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.oport-texto span {
  font-size: 11.5px;
  color: var(--muted);
}

.oport-lado {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.oport-prazo {
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.oport-mais {
  margin-top: 10px;
  cursor: pointer;
  color: var(--accent-text);
}

@media (max-width: 640px) {
  .oport-linha {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* ---- Configurações do bloco ----
   A tela é montada a partir do catálogo do banco, então o CSS descreve formas
   (marca, número, texto) e não configurações específicas. */

.cfg-grupo {
  margin-bottom: 22px;
}

.cfg-grupo:last-of-type {
  margin-bottom: 10px;
}

.cfg-grupo > .rotulo-micro {
  display: block;
  margin-bottom: 8px;
}

.cfg-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  background: var(--surface);
}

/* Na versão de ligar/desligar a marca vem primeiro, como numa lista de opções. */
.cfg-item-marca {
  grid-template-columns: auto 1fr;
  cursor: pointer;
  font-weight: 400;
}

.cfg-item-marca input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent);
}

/* Chave que depende de outra desligada: continua visível, para a pessoa
   entender por que não está valendo, mas sai do primeiro plano. */
.cfg-item-desligado {
  opacity: 0.5;
}

.cfg-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cfg-texto strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.cfg-texto span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.cfg-campo {
  width: 96px;
  margin: 0;
}

/* A lista fechada precisa caber "Não utilizar" sem cortar: 96px serve para um
   número de dois dígitos e para mais nada. */
.cfg-campo-escolha {
  width: auto;
  min-width: 152px;
}

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

  .cfg-item-marca {
    grid-template-columns: auto 1fr;
  }

  .cfg-campo {
    width: 100%;
  }
}

/* ---- A cor da marca (Configurações > Dados cadastrais) ----

   Três controles e uma amostra. O chip é redondo porque o que ele mostra é a
   cor e nada mais: um quadrado com canto arredondado pareceria um botão com
   rótulo faltando.

   A amostra usa as classes de verdade (.btn-primary, .link-inline) em vez de
   imitá-las. Uma cópia com os mesmos valores escritos aqui envelheceria no dia
   em que o botão mudasse de forma, e a prévia passaria a mostrar um botão que
   não existe mais em nenhuma tela. */

.cor-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-cor {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  padding: 0;
  flex: none;
  position: relative;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line-soft), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform var(--transicao-estado), box-shadow var(--transicao-estado);
}

.chip-cor:hover {
  transform: translateY(-1px) scale(1.06);
}

.chip-cor:disabled {
  cursor: default;
  transform: none;
}

/* O anel de fora precisa do branco por baixo para não encostar na cor do
   chip: sem ele, um chip escuro e o anel escuro viram uma bola só. */
.chip-cor.is-ativo {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink-2);
}

/* O ponto branco no meio diz "é esta" mesmo para quem não distingue o anel
   pela cor. */
.chip-cor.is-ativo::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.cor-tom-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cor-tom-extremo {
  flex: none;
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.cor-tom-linha input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.cor-tom-linha input[type="range"]:disabled {
  cursor: default;
}

/* Tracejada, e não sólida: o contorno diz que ali dentro é amostra, não uma
   parte da tela que se opera. */
.cor-previa {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.cor-previa-botao {
  display: inline-block;
}

/* ---- Primeiros passos (painel da empresa nova) ---- */

.primeiros-passos {
  margin-bottom: 16px;
}

.lista-passos {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.passo {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.passo[role="button"] {
  cursor: pointer;
}

.passo[role="button"]:hover {
  background: var(--surface-2);
  border-color: var(--card-line);
}

/* O passo cumprido some do caminho sem sumir da lista: quem chegou depois
   precisa ver que aquilo já foi feito, e não procurar onde se faz. */
.passo-feito {
  opacity: 0.55;
}

.passo-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
}

.passo-feito .passo-marca {
  background: var(--accent);
  border-color: var(--accent);
}

.passo-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.passo-texto strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.passo-texto span {
  font-size: 12px;
  color: var(--muted);
}

/* "Fazer depois" é uma saída, não um convite: fica apagado até a pessoa passar
   por cima da linha. Se disputasse atenção com o passo, o bloco viraria uma
   pergunta ("faço ou adio?") em vez de uma lista do que fazer. */
.passo-depois {
  align-self: center;
  background: none;
  border: none;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0.65;
}

.passo:hover .passo-depois,
.passo-depois:focus-visible {
  opacity: 1;
  color: var(--accent-text);
}

.passo-depois:hover {
  background: none;
  text-decoration: underline;
}

.passos-nota-adiados {
  margin-top: 12px;
}

/* No celular a linha não tem largura para texto e saída lado a lado: o
   "fazer depois" desce para debaixo do passo, alinhado com ele. */
@media (max-width: 560px) {
  .passo {
    grid-template-columns: 22px 1fr;
    row-gap: 4px;
  }

  .passo-depois {
    grid-column: 2;
    justify-self: start;
    padding-left: 0;
  }
}

/* ---- "mais": onde ficam cancelar e excluir ----
   Abre para baixo, dentro da própria linha. Uma bolha flutuante seria cortada
   pela rolagem horizontal da tabela, que é o que existe no celular. */

.acoes-mais {
  display: inline-block;
}

.acoes-mais summary {
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.1;
  user-select: none;
}

.acoes-mais summary::-webkit-details-marker {
  display: none;
}

.acoes-mais summary:hover {
  background: var(--surface-2);
  color: var(--ink-2);
}

.acoes-mais[open] summary {
  color: var(--ink-2);
}

.acoes-mais-lista {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding-top: 4px;
}

.form-error {
  color: var(--danger);
  font-size: 12.5px;
  min-height: 17px;
  margin: 0 0 6px;
}

/* Dados que o gestor precisa copiar e repassar. */
.credencial {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: 12px 0;
}

.credencial div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.credencial span {
  font-size: 11px;
  color: var(--muted);
}

.credencial strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  user-select: all;
}

/* Um valor que o formulário MOSTRA e ninguém edita, porque ele já foi decidido
   num campo acima. Não é um campo desativado: campo desativado tem a moldura
   inteira dizendo "aqui se digita" e a cor cinza dizendo "agora não", e quem
   lê fica procurando o que destravar. Isto é uma linha de leitura, e se parece
   com uma. Ocupa a mesma folga de um campo, para não desalinhar o formulário. */
.campo-fixo {
  margin: 0 0 15px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.campo-nota {
  margin: -12px 0 16px;
  font-size: 11.5px;
  color: var(--faint);
}

/* A margem negativa acima existe para a nota encostar no campo que ela
   explica, e todo campo tem 15px de folga embaixo. Depois de um rótulo, que
   tem só 5px, ela subia demais e escrevia por cima do texto. */
label + .campo-nota {
  margin-top: 0;
}

/* O mesmo acerto do lado de baixo: `.campo-resposta` tira a folga de 15px da
   caixa de texto, e a nota logo depois dela subia os mesmos 12px por cima da
   borda. Na Divulgação, "Sugerimos um texto..." saía riscado pela linha de
   baixo da caixa. */
.campo-resposta + .campo-nota {
  margin-top: 6px;
}

/* A mesma nota, quando ela deixa de explicar e passa a avisar que algo não
   foi salvo. Some sozinha nos casos bons, fica nos ruins. */
.campo-nota-erro {
  color: var(--danger);
  font-weight: 500;
}

input:disabled,
select:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
}

/* Sem margem no topo, como os outros gráficos: quem dá o respiro é a linha
   da nota. Os 6px daqui desencontravam este cartão do vizinho na mesma
   fileira. */
.destaque-numero {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* ---- A cota de e-mail (rodapé da barra lateral) ---- */

/* Era um quadrante de empresas e outro de armazenamento. Os dois viraram
   seções da Visão geral; o que ficou na barra é a cota de e-mail do dia, o
   único número que, estourado, fecha a porta da plataforma. Só o dono vê
   (js/ui-dashboard.js, renderizarBlocoEmail). */
.sidebar-email {
  margin-top: auto;
  padding-top: 10px;
}

.sidebar-email[hidden] {
  display: none;
}

/* Compacto de propósito: a barra lateral não pode ganhar rolagem por causa
   deste bloco. O quadrado inteiro é o botão.

   A cor de fundo, a de texto e a de hover NÃO moram aqui: estão na seção da
   barra escura, mais abaixo, onde `--nav-*` as define. Este bloco cuida de
   forma e tamanho. */
.emlz {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 9px 12px 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.emlz:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.emlz-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
}

.emlz-topo svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--faint);
}

.emlz-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--muted);
}

.emlz-valor {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink-2);
}

/* A barra de uso é compartilhada: a lista de empresas desenha o espaço de
   cada uma com ela (js/ui-empresas.js). */
.armz-barra {
  display: block;
  background: var(--bg);
  border-radius: 3px;
  height: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}

.armz-preenchida {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
  transition: width var(--transicao-longa);
}

.emlz-detalhe {
  font-size: 11px;
  line-height: 1.4;
  color: var(--faint);
}

.emlz-detalhe strong {
  color: var(--ink);
  font-weight: 600;
}

.emlz-alerta {
  display: block;
  margin-top: 7px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

/* Faixas de atenção */
.emlz-atencao .armz-preenchida {
  background: var(--warn);
}

.emlz-atencao .emlz-valor,
.emlz-atencao .emlz-alerta {
  color: var(--warn);
}

.emlz-atencao {
  border-color: rgba(138, 90, 0, 0.28);
}

.emlz-critico .armz-preenchida {
  background: var(--danger);
}

.emlz-critico .emlz-valor,
.emlz-critico .emlz-alerta {
  color: var(--danger);
}

.emlz-critico {
  border-color: rgba(179, 38, 30, 0.32);
  background: var(--danger-wash);
}

.sucesso {
  color: var(--ok);
  font-weight: 500;
}

/* ============ Notificações ============ */

.painel-notificacoes {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 17px 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}

.lista-notificacoes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.lista-notificacoes li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 9px 0 9px 11px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
}

.lista-notificacoes li:last-child {
  border-bottom: none;
}

.lista-notificacoes li.nao-lida {
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
}

.notif-titulo {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.notif-msg {
  font-size: 12.5px;
  color: var(--ink-2);
}

.notif-data {
  font-size: 11px;
  /* --muted, e não --faint: o painel de avisos tem fundo --accent-wash, e o
     --faint passa nas TRÊS superfícies do sistema (branco, --surface-2 e
     --bg) mas não nesta quarta, onde dá 4,44:1. */
  color: var(--muted);
}

/* ============ Fornecedores ============ */

.col-forn-nome {
  width: 21%;
}

/* A coluna da Confiabilidade (etapa 83) só existe com o módulo ligado. A
   tabela é de largura fixa e as outras cinco somavam 100%: sem uma fatia
   dela, a coluna nascia com largura zero e o texto descia letra por letra. */
.col-forn-conf {
  width: 14%;
}

.col-forn-contato {
  width: 16%;
}

.col-forn-cats {
  width: 19%;
}

.col-forn-acesso {
  width: 13%;
}

/* 17 e não 12: em 12 cabia um botão por linha, e os três (Editar, Desativar,
   Remover) saíam empilhados como uma coluna de botões ao lado de cada
   fornecedor. Agora ficam dois por linha, e o de remover fecha a fila. */
.col-forn-acao {
  width: 17%;
}

/* As ações da linha encostam na borda direita, como em toda tabela em que a
   última coluna não tem título: é onde o olho procura "o que dá para fazer
   com esta linha", e duas linhas de botões alinhadas à direita leem como uma
   fila só. No celular a tabela vira cartão e as ações voltam à esquerda. */
@media (min-width: 641px) {
  .col-usr-acao,
  .col-forn-acao {
    text-align: right;
  }

  .col-usr-acao > .acoes-linha,
  .col-forn-acao > .acoes-linha {
    justify-content: flex-end;
  }
}

/* Fornecedor desativado continua na lista (o histórico dele importa), mas
   recuado visualmente para não competir com os que estão em uso. */
.linha-inativa .col-forn-nome,
.linha-inativa .col-forn-contato {
  opacity: 0.62;
}

/* ============ Cotação ============ */

/* O cartão de disparo é mais largo que os outros: a lista de fornecedores com
   nome, contato e situação não caberia em 420px sem quebrar cada linha em três. */
.form-card-largo {
  max-width: 640px;
}

.lista-fornecedores {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 15px;
  max-height: 320px;
  overflow-y: auto;
}

.item-fornecedor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
}

.item-fornecedor:last-child {
  border-bottom: none;
}

.item-fornecedor:hover {
  background: var(--surface-2);
}

/* A regra geral de input estica tudo em 100%; caixa de marcar não. */
.item-fornecedor input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  grid-row: span 2;
  accent-color: var(--accent);
}

.item-forn-nome {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.item-forn-apoio {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
}

/* ---- Cotar no mercado ----
   Fica fora da lista de fornecedores de propósito: é outra decisão, não mais
   um nome para marcar. Por isso o quadro próprio, com a explicação junto. */

.opcao-mercado {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 15px;
  cursor: pointer;
  font-weight: 400;
}

.opcao-mercado:hover {
  background: var(--surface-2);
}

/* Mercado fora: a categoria da compra não está encaixada, e marcar a caixa não
   levaria a cotação a ninguém. Fica visível — some seria esconder um caminho
   que existe e explicar nada — mas sem o convite do cursor e do hover, e com o
   título esmaecido. O aviso logo abaixo diz por quê e onde se resolve. */
.opcao-mercado-fora {
  cursor: default;
  border-style: dashed;
}

.opcao-mercado-fora:hover {
  background: transparent;
}

.opcao-mercado-fora .opcao-mercado-texto strong,
.opcao-mercado-fora .opcao-mercado-texto .campo-nota {
  opacity: 0.55;
}

.opcao-mercado input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--accent);
}

.opcao-mercado-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.opcao-mercado-texto strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.opcao-mercado-texto .campo-nota {
  margin: 0;
}

/* O aviso de que a categoria não está encaixada. Cor de alerta, não de erro:
   nada está errado ainda — a cotação vai sair, só não vai chegar ao mercado. */
.aviso-mercado {
  display: block;
  margin-top: 6px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.45;
}

.aviso-mercado[hidden] {
  display: none;
}

.cotacao-rodada {
  margin-bottom: 8px;
}

.cotacao-prazo {
  font-size: 11.5px;
  color: var(--muted);
}

/* O lembrete a quem não respondeu (etapa 65). O botão e a frase que diz em
   que pé ele está dividem a linha: a frase é a explicação, e por isso ela
   está sempre à vista, e não só no `title` de um botão cinza. */
.lembrete-cotacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 16px;
}

.lembrete-cotacao .chart-note {
  margin: 0;
  min-height: 0;
  flex: 1 1 260px;
}

.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* O texto que o fornecedor lê. Fica em bloco recuado para se distinguir do
   resto da tela: é conteúdo escrito por uma pessoa, não dado do sistema. */
.bloco-escopo {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0 0 16px;
}

.bloco-escopo p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.rotulo-micro {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.rodada-anterior {
  border-left: 2px solid var(--line);
  padding: 2px 0 2px 12px;
  margin-bottom: 12px;
}

.rodada-anterior p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}

.col-prop-forn {
  width: 22%;
}

.col-prop-situacao {
  width: 16%;
}

.col-prop-valor {
  width: 15%;
}

.col-prop-prazo {
  width: 10%;
}

.col-prop-pgto {
  width: 25%;
}

.col-prop-acao {
  width: 12%;
}

.col-prop-valor .cel-principal {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ============ Cotações do fornecedor ============ */

.lista-cotacoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.cotacao-card {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.cotacao-card-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.cotacao-card-id h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.cotacao-card-sub {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}

.cotacao-card-situacao {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
  flex-shrink: 0;
}

/* O que já foi enviado, em quatro dados curtos. Mesmo desenho do bloco de
   credencial: rótulo pequeno em cima, valor forte embaixo. */
.proposta-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 10px 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.proposta-resumo > div {
  display: flex;
  flex-direction: column;
}

.proposta-resumo span {
  font-size: 11px;
  color: var(--faint);
}

.proposta-resumo strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.proposta-obs {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: pre-wrap;
}

.proposta-form {
  margin-top: 4px;
}

.proposta-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}

.campo-proposta {
  display: flex;
  flex-direction: column;
  flex: 1 1 150px;
}

/* ============ Telas da plataforma ============ */

.col-lead-nome {
  width: 30%;
}

.col-lead-contato {
  width: 38%;
}

.col-lead-data {
  width: 16%;
}

.col-lead-acao {
  width: 16%;
}

.col-pes-nome {
  width: 22%;
}

/* A coluna da Confiabilidade (etapa 84) só existe com o módulo ligado, e na
   lista de fornecedores. As outras cedem a fatia dela; sem ela, a tabela
   redistribui o que sobra. */
.col-pes-conf {
  width: 14%;
}

.col-pes-onde {
  width: 18%;
}

.col-pes-papel {
  width: 16%;
}

.col-pes-status {
  width: 12%;
}

/* 18 e não 14: "Voltar ao gratuito" é o botão mais comprido da coluna e
   dobrava em duas linhas. */
.col-pes-acao {
  width: 18%;
}

/* ============ Cadastro aberto ============ */

.aviso-cadastro {
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
  text-align: left;
}

/* A escolha do que a pessoa veio fazer é a primeira coisa do formulário e
   precisa parecer uma escolha — três blocos clicáveis, não três radinhos
   espremidos numa linha. */
.grupo-intencao {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 15px;
}

.opcao-intencao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  transition: border-color var(--transicao-estado), background var(--transicao-estado);
}

.opcao-intencao:hover {
  background: var(--surface-2);
}

.opcao-intencao.marcada {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.opcao-intencao input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  grid-row: span 2;
  accent-color: var(--accent);
}

.opcao-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.opcao-resumo {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* ============ Busca de categoria ============ */

/* A caixa onde a pessoa digita o que compra ou vende. O menu dela NÃO está
   aqui dentro: ele é filho do <body>, para não ser cortado por tabela com
   rolagem nem por bloco com overflow. Por isso `.busca-cat-menu` é regra de
   primeiro nível, e não descendente de `.busca-cat`. */

.busca-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* Os pedaços de dentro nascem escondidos e aparecem quando o JavaScript tira
   o `hidden`. Sem esta linha eles nasceriam TODOS à vista: `display: flex` nas
   regras abaixo vence o `display: none` que o navegador dá ao `hidden`. */
.busca-cat [hidden] {
  display: none;
}

.busca-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Dentro de um formulário de uma linha só, a caixa ocupa o lugar que era do
   <select>. `align-items: flex-start` no formulário porque o bloco "Outra"
   abre embaixo dela: com o alinhamento central, abrir o bloco empurraria o
   botão Adicionar para o meio do nada. */
.form-inline-busca {
  align-items: flex-start;
}

.form-inline .busca-cat {
  flex: 1 1 240px;
  min-width: 200px;
}

.form-inline .busca-cat-entrada {
  width: 100%;
  flex: none;
  min-width: 0;
}

/* Na tabela de categorias ela se comporta como os outros campos de lá: sem
   moldura até alguém chegar perto. */
.col-cad-categoria .busca-cat-entrada {
  padding: 6px 26px 6px 9px;
  font-size: 12.5px;
  background: transparent;
  border-color: transparent;
}

.col-cad-categoria .busca-cat-entrada:hover {
  border-color: var(--line);
}

.col-cad-categoria .busca-cat-entrada:focus {
  background: var(--surface);
  border-color: var(--accent);
}

.busca-cat-campo {
  position: relative;
  display: flex;
  align-items: center;
}

.busca-cat-entrada {
  width: 100%;
  margin: 0;
  padding-right: 28px;
}

.busca-cat-limpar {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
  padding: 2px 5px;
  cursor: pointer;
  border-radius: 4px;
}

.busca-cat-limpar:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.busca-cat-menu {
  position: fixed;
  z-index: 60;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 24px rgba(27, 30, 47, 0.14);
}

.busca-cat-grupo {
  padding: 7px 12px 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.busca-cat-opcao {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 12px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
}

.busca-cat-opcao[aria-selected="true"],
.busca-cat-opcao:hover {
  background: var(--accent-wash);
}

.busca-cat-nome {
  min-width: 0;
}

/* O termo que fez a linha aparecer. Ele explica a busca: quem digitou "caixa
   de papelão" e viu "Embalagens" precisa saber por quê, senão desconfia. */
.busca-cat-eco {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.busca-cat-eco::before {
  content: "· ";
}

.busca-cat-tipo {
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}

.busca-cat-opcao-outra {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px;
  padding-top: 9px;
  color: var(--accent-text);
  font-weight: 500;
}

.busca-cat-vazio {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
}

.busca-cat-outra {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.busca-cat-outra-rotulo {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}

.busca-cat-outra-texto {
  margin: 0;
}

.busca-cat-tipos {
  display: flex;
  gap: 14px;
}

.busca-cat-tipos label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-2);
  cursor: pointer;
}

/* `flex: none` e `min-width: 0` porque dentro de um `.form-inline` a regra
   `.form-inline input` dava 180px de largura mínima a TODO campo — inclusive
   a estes dois rádios, que iam parar em cantos opostos da tela. */
.busca-cat-tipos input {
  width: 14px;
  height: 14px;
  min-width: 0;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

.busca-cat .busca-cat-outra-texto {
  width: 100%;
  min-width: 0;
  flex: none;
}

/* A sugestão do texto livre: "isso já existe na lista, é esta aqui". Fica
   visualmente ligada ao campo de escrever, porque é resposta ao que está
   sendo digitado nele. */
.busca-cat-dica {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.busca-cat-dica-texto {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--muted);
}

.busca-cat-sugestao {
  background: var(--accent-wash);
  border: 1px solid var(--accent-wash-2);
  color: var(--accent-text);
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.busca-cat-sugestao:hover {
  background: var(--accent-wash-2);
}

/* ============ Vitrine de oportunidades ============ */

/* O único bloco do sistema que existe para vender alguma coisa. Por isso é o
   único com fundo de destaque — em qualquer outra tela isso seria ruído. */
.vitrine {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 20px;
}

/* A vitrine é a única superfície do sistema pintada de --accent-wash, e sobre
   ela o cinza de apoio fica em 4,44:1 — dez centésimos abaixo do mínimo. Aqui
   o rótulo micro sobe um degrau da escala. É o painel que convida a assinar,
   então é o último lugar onde vale economizar legibilidade. */
.vitrine .rotulo-micro {
  color: var(--muted);
}

.vitrine h2 {
  margin: 4px 0 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--ink);
}

.vitrine-texto {
  margin: 12px 0 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 60ch;
}

.vitrine-linhas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vitrine-linha {
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
}

.vitrine-cat {
  font-size: 12.5px;
  color: var(--ink-2);
}

.vitrine-qtd {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* ============ Responsivo ============ */

@media (max-width: 900px) {
  .app-shell {
    flex-direction: column;
  }

  /* A barra continua azul-marinho no celular: ela vira o cabeçalho do
     aplicativo, e um cabeçalho escuro com a marca clara é a mesma leitura da
     tela grande. Trocar para fundo claro aqui obrigaria a ter duas versões de
     tudo o que mora dentro dela. */
  .sidebar {
    width: 100%;
    border-right: none;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 20;

    /* No celular a barra vira cabeçalho: altura pelo conteúdo, não 100vh. */
    align-self: auto;
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
  }

  .sidebar-brand {
    padding: 0;
  }

  .menu-toggle {
    display: block;
  }

  /* Fechado, o cabeçalho é só marca e botão. Tudo o mais — menu, nome da
     empresa, quadros do rodapé e o cartão de quem está usando — entra junto
     quando o menu abre. Antes, o cartão de usuário ficava sempre visível e
     roubava uma linha inteira da altura útil do celular. */
  .sidebar-nav,
  .identidade-empresa,
  .sidebar-usuario {
    display: none;
  }

  .sidebar-nav {
    gap: 2px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--nav-linha);
    max-height: none;
    overflow: visible;
  }

  .sidebar.aberto .sidebar-nav,
  .sidebar.aberto .sidebar-usuario {
    display: flex;
  }

  /* `:not([hidden])` não é preciosismo: estes três blocos são ligados e
     desligados pelo atributo `hidden` no JavaScript, e uma regra de display
     sem a ressalva venceria o atributo — o nome da empresa apareceria em
     branco para quem não tem empresa nenhuma. */
  .sidebar.aberto .identidade-empresa:not([hidden]) {
    display: block;
  }

  .sidebar.aberto .sidebar-nav:empty {
    display: none;
  }

  /* Sem espaço fixo no topo do celular: entra junto com o menu. */
  .sidebar-email {
    display: none;
    margin-top: 10px;
    padding-top: 0;
  }

  .sidebar.aberto .sidebar-email:not([hidden]) {
    display: block;
  }

  .nav-item {
    padding: 10px 10px;
    font-size: 14px;
  }

  /* Título, sino, avatar e botão de ação não cabem numa linha só de 375px —
     o título acabava virando reticências. O botão da tela desce para a
     segunda linha, ocupando a largura toda. */
  .topbar {
    padding: 12px 16px 10px;
    position: static;
    flex-wrap: wrap;
  }

  .topbar-titulo {
    flex: 1 1 auto;
  }

  .topbar-titulo h1 {
    font-size: 18px;
  }

  .acoes-pagina {
    order: 3;
    flex-basis: 100%;
    margin-top: 4px;
  }

  .acoes-pagina .btn-primary {
    width: 100%;
  }


  .app-main {
    padding: 4px 16px 40px;
  }

  .painel-topo {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .stat-value {
    font-size: 22px;
  }

  .chart-grid {
    grid-template-columns: 1fr;
  }

  .barra-linha {
    grid-template-columns: 88px 1fr auto;
  }

  /* Seis meses num cartão de 300px dão 50px por coluna: menos folga e letra
     um pouco menor evitam que o rótulo precise quebrar toda vez. */
  .coluna-slot {
    padding: 0 2px;
  }

  .coluna-valor {
    font-size: 10px;
  }

  /* Botão cujo rótulo é uma frase ("+ Convidar mais fornecedores (nova
     rodada)") não cabe numa linha de celular. Duas linhas é melhor do que
     meia frase fora da tela. */
  .form-actions .btn-primary,
  .form-actions .btn-secondary,
  .acoes-pagina .btn-primary {
    white-space: normal;
  }

  .form-card {
    max-width: none;
  }

  /* Sem espaço para 6 colunas: fica o essencial (requisição, status, valores)
     e as ações. O resto some — nada de rolagem lateral. */
  .col-classificacao,
  .col-pessoas,
  .col-anexo,
  .col-usr-email,
  .col-usr-status,
  .col-rot-tipo {
    display: none;
  }

  /* A data sai: no celular o espaço vale mais para o valor. */
  .col-status .cel-apoio {
    display: none;
  }

  /* Menos "com quem o pedido está parado", "por que foi reprovado" e "de quem
     comprar": essas três ficam, porque são a resposta que a pessoa veio
     buscar. A última chegou junto com o fim da aba "Cotações finalizadas" —
     era a coluna que sobrevivia ao celular naquela tela. */
  .col-status .cel-apoio-essencial {
    display: block;
  }

  /* Somam 100: no celular sobra pouca largura e cada ponto percentual a mais
     numa coluna sai de outra. Antes somavam 104 e o navegador encolhia todas
     — inclusive a de status, que já era a mais apertada. */
  .col-requisicao {
    width: 24%;
  }

  .col-status {
    width: 26%;
  }

  .col-valores {
    width: 26%;
  }

  .col-acoes {
    width: 24%;
  }

  /* Numa coluna de 90px o selo com o texto de sempre quebraria no meio da
     palavra. Menor, ele cabe inteiro — e continua legível porque o que
     informa é a cor mais a palavra, não o tamanho da letra. */
  .tabela-requisicoes td .badge {
    font-size: 10.5px;
    padding: 2px 6px;
  }

  /* O ponto do selo sai da tabela no celular. Ele custa 12px de uma coluna de
     90 — e são 12px tirados justamente da palavra que ele acompanha. Fora da
     tabela (na ficha da cotação, na lista de pessoas) ele continua. */
  .tabela-requisicoes td .badge[class*="status-"]::before {
    display: none;
  }

  /* Botão de linha mais apertado: "Disparar cotação" e "Aprovar" dividem uma
     coluna de 80px com o resto da linha. Menos folga em volta da palavra é o
     que evita que ela quebre no meio. */
  .tabela-requisicoes td .btn-mini {
    padding: 4px 7px;
    font-size: 11.5px;
  }

  /* O valor é o que se vem olhar no celular, então ele fica inteiro. A quebra
     no meio do número é o último recurso e só acontece com cifra que não
     caberia em largura nenhuma — melhor partida do que por cima da coluna
     vizinha. */
  .col-valores .cel-principal {
    font-size: 11.5px;
    overflow-wrap: break-word;
  }

  .col-usr-nome {
    width: 40%;
  }

  .col-usr-papel {
    width: 34%;
  }

  .col-usr-acao {
    width: 26%;
  }

  .col-rot-categoria {
    width: 34%;
  }

  .col-rot-chips {
    width: 38%;
  }

  .col-rot-add {
    width: 28%;
  }

  /* Quatro colunas num aparelho de 375px gastam 80px só de folga lateral —
     quase um quarto da tela para não escrever nada. Oito de cada lado ainda
     separam as colunas e devolvem 16px de leitura. */
  .tabela-requisicoes th,
  .tabela-requisicoes td {
    padding: 9px 8px;
  }

  .acoes-linha {
    flex-wrap: wrap;
  }

  /* Fornecedores: sobram o nome, o acesso e as ações. Contato e categorias
     saem — são para consultar, não para decidir na hora.
     Nas categorias, o nome interno sai: é apelido, e a categoria é o que
     manda. */
  .col-cad-apelido,
  .col-forn-contato,
  .col-forn-cats,
  .col-prop-prazo,
  .col-prop-pgto {
    display: none;
  }

  .col-cad-categoria {
    width: 70%;
  }

  .col-cad-acao {
    width: 30%;
  }

  .col-forn-nome {
    width: 30%;
  }

  .col-forn-conf {
    width: 22%;
  }

  .col-forn-acesso {
    width: 24%;
  }

  .col-forn-acao {
    width: 24%;
  }

  .col-prop-forn {
    width: 32%;
  }

  .col-prop-situacao {
    width: 24%;
  }

  .col-prop-valor {
    width: 24%;
  }

  .col-prop-acao {
    width: 20%;
  }

  .form-card-largo {
    max-width: none;
  }

  /* O cabeçalho do cartão de cotação empilha: situação e prazo alinhados à
     esquerda, junto do código, em vez de espremidos na borda direita. */
  .cotacao-card-topo {
    flex-direction: column;
    gap: 8px;
  }

  .cotacao-card-situacao {
    align-items: flex-start;
    text-align: left;
  }
}

/* ============ A marca do cliente ============ */

/* Fica logo abaixo da marca da plataforma, separada por uma linha: são duas
   marcas diferentes e juntá-las sem respiro leria como uma só. A hierarquia é
   deliberada — a One Quote em cima, pequena, porque é a casa; a empresa do
   cliente embaixo, maior, porque é onde a pessoa trabalha. */
.identidade-empresa {
  padding: 0 8px clamp(7px, 1.5vh, 12px);
  margin-bottom: clamp(6px, 1.3vh, 10px);
  border-bottom: 1px solid var(--nav-linha);
}

/* O nome é a única marca do cliente agora, então ele carrega o peso sozinho:
   um pouco maior e mais escuro do que era quando dividia espaço com o
   quadrado de iniciais. */
.empresa-nome {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nav-ink-forte);
  letter-spacing: -0.01em;
  line-height: 1.3;
  /* Uma linha. "Onlyfy Tecnologia e Serviços Corporativos S.A." ocupava duas
     e empurrava o menu inteiro para baixo; o nome completo continua a um
     repouso de mouse, no `title`. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 900px) {
  /* No celular a barra do topo é estreita: menos respiro em volta do nome. */
  .identidade-empresa {
    padding: 0 0 12px;
    margin-bottom: 10px;
  }
}

/* ============ Filtros da lista de requisições ============ */

/* Uma linha que quebra sozinha conforme a largura. Em tela grande cabe tudo
   lado a lado; no celular vira uma coluna, sem nenhuma regra a mais. */
.filtros-req {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.filtros-req select,
.filtros-req input[type="search"] {
  margin-bottom: 0;
  width: auto;
  font-size: 12.5px;
  padding: 8px 12px;
}

/* A busca é o filtro mais usado: ganha o dobro de espaço dos seletores e é a
   única que cresce quando sobra largura. */
.filtros-req .filtro-busca {
  flex: 1 1 220px;
  min-width: 180px;
}

/* Os seletores dividem a linha em partes iguais, com teto.
   Cada um se ajustava ao próprio conteúdo, e "Todas as categorias" tinha o
   dobro da largura de "Todos os status" porque uma categoria da lista tem
   nome comprido: a fileira saía em degraus, com o último seletor sozinho numa
   segunda linha de largura aleatória. Com base e teto iguais, eles ficam do
   mesmo tamanho, e o que não cabe desce inteiro. */
.filtros-req select {
  flex: 1 1 190px;
  min-width: 150px;
  max-width: 250px;
}

.filtro-marca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.filtro-marca input {
  margin: 0;
  width: auto;
  accent-color: var(--accent);
}

.filtros-req #f-limpar {
  margin-left: auto;
  white-space: nowrap;
}

.resumo-lista {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
}

.resumo-lista strong {
  color: var(--ink-2);
  font-weight: 600;
}

@media (max-width: 900px) {
  /* No celular, o e-mail e o status já saem da tabela de usuários; o centro de
     custo fica, porque é campo de trabalho e não de consulta — sem ele a
     Gestão não conseguiria amarrar ninguém pelo telefone. */
  .col-usr-nome {
    width: 30%;
  }

  .col-usr-papel {
    width: 22%;
  }

  .col-usr-centro {
    width: 24%;
  }

  .col-usr-acao {
    width: 24%;
  }

  /* Na tabela de centros de custo a descrição é a que sai: o código já
     identifica, e o aprovador é o que se vem editar aqui. */
  .col-cad-desc {
    display: none;
  }

  .col-cad-codigo {
    width: 32%;
  }

  .col-cad-aprovador {
    width: 38%;
  }

  .filtros-req #f-limpar {
    margin-left: 0;
  }
}

/* ============ O que é pago (lado de quem vende) ============ */

/* O cadeado.
   A regra que escolhemos para o conteúdo pago: o fornecedor SEMPRE vê que o
   número existe e o que ele significa; o valor é que fica coberto. Esconder a
   tela inteira seria mais simples e pior de vender — ninguém assina o que não
   sabe que existe. */
.bloqueio {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 0 0 18px;
}

.bloqueio-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  margin-bottom: 10px;
}

.bloqueio-selo svg {
  width: 19px;
  height: 19px;
  display: block;
}

.bloqueio h2 {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.016em;
  color: var(--ink);
}

.bloqueio-texto {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 62ch;
}

.bloqueio-pedido {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ok);
  font-weight: 500;
}

/* A prévia por trás do cadeado.
   Os números dela são inventados — não são dados reais borrados. Borrar dado
   real ainda seria entregá-lo: bastaria abrir o inspetor do navegador para
   ler o que o plano cobra. */
.previa-bloqueada {
  position: relative;
  pointer-events: none;
  user-select: none;
  opacity: 0.75;
}

/* O desfoque some para quem pediu para reduzir animação/efeito? Não: aqui ele
   não é enfeite, é a trava. Fica em qualquer preferência. */
.borrado {
  filter: blur(5px);
  color: var(--faint);
}

/* ---- O selo de oportunidade vinda do mercado ---- */

/* Cor própria, diferente das cores de status: não é uma etapa do ciclo de
   vida da cotação, é a origem dela. O fornecedor precisa saber que ninguém o
   convidou ali, para não achar que perdeu um convite antigo. */
.badge-mercado {
  background: var(--accent-wash);
  color: var(--accent-text);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Borda no tom de destaque: na lista, o cartão de mercado precisa se separar
   dos convites sem virar outra coisa. */
.cotacao-card-mercado {
  border-color: var(--accent);
}

/* ============ Ficha da empresa cliente (administração) ============ */

/* A saída definitiva de um cliente.
   Vermelha e no fim da página porque é o que se faz uma vez e não se desfaz.
   Um cartão igual aos outros, no meio dos outros, seria clicado por engano. */
.card-risco {
  border-color: var(--danger);
}

.card-risco h2 {
  color: var(--danger);
}

.btn-perigo {
  background: var(--danger);
  color: #ffffff;
  border: 1px solid var(--danger);
  border-radius: var(--radius-btn);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.btn-perigo:focus-visible {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

.btn-perigo:hover:not(:disabled) {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

/* Desabilitado é o estado NORMAL deste botão: ele só acorda quando o nome da
   empresa é digitado por extenso. Precisa parecer inerte, não quebrado. */
.btn-perigo:disabled {
  background: var(--bg);
  border-color: var(--line);
  color: var(--faint);
  cursor: not-allowed;
}

/* Caixa de marcar em linha com o rótulo, dentro de formulários que por padrão
   empilham label e campo. */
.linha-marca {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink-2);
}

.linha-marca input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

/* Na tela de entrada a marca fica entre o campo de senha e o botão, e precisa
   de um respiro dos dois — colada, parecia legenda do campo de cima. */
.linha-manter {
  margin: 12px 0 16px;
  font-size: 12.5px;
}

/* ============ Alinhamento dos painéis ============ */

/* Cartão sem dados ainda: o texto vai para o meio, não fica pendurado no topo.
   Numa fileira em que um cartão tem gráfico e o vizinho está vazio, o texto
   colado em cima fazia o cartão vazio parecer cortado pela metade. */
.chart-card .empty {
  margin: auto 0;
  padding: 6px 0;
}

/* As barras ficam ancoradas no topo, com espaçamento fixo.

   Antes elas se distribuíam pela altura livre do cartão (space-evenly). O
   efeito colateral: dois cartões lado a lado com quantidades diferentes de
   barras ficavam com as linhas em alturas diferentes, e a fileira inteira
   parecia torta. Espaçamento fixo faz a terceira barra de um cartão bater com
   a terceira do vizinho — a sobra fica embaixo, onde ninguém repara. */
.barras {
  justify-content: flex-start;
}

/* Faixas de tela.

   Os números são ditados pelo conteúdo, não por nomes de aparelho: abaixo de
   1180px quatro indicadores lado a lado ficam estreitos demais para o rótulo
   ("Tempo médio de fechamento" quebrava em três linhas), e abaixo de 900px a
   barra lateral já virou menu recolhível e o conteúdo tem a tela toda. */
@media (max-width: 1180px) {
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

@media (max-width: 520px) {
  .stat-row {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ---------------------------------------------------------------------------
   A faixa do convite para entrar numa empresa

   Fica no alto do conteúdo, antes de qualquer tela, e usa a cor de destaque —
   não a de alerta. Não é um erro nem um risco: é uma decisão que a pessoa
   precisa tomar, e pintá-la de amarelo faria parecer que alguma coisa deu
   errado.

   O texto é o elemento principal aqui, e não o botão. Quem aceita muda a
   conta de lugar e leva o histórico junto — ler antes de clicar é o que a
   faixa está pedindo, então a linha do texto ganha largura de leitura em vez
   de ocupar toda a tela.
   --------------------------------------------------------------------------- */

.faixa-convite {
  margin-bottom: 16px;
}

.faixa-convite[hidden] {
  display: none;
}

.faixa-convite-cartao {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.faixa-convite-cartao + .faixa-convite-cartao {
  margin-top: 10px;
}

/* Convite respondido: o mesmo lugar, outra cor. Verde porque aqui não há mais
   nada a decidir — é o recibo do que acabou de acontecer. */
.faixa-convite-ok {
  background: var(--ok-wash);
  border-color: var(--ok);
}

.faixa-convite-titulo {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.faixa-convite-texto {
  margin: 0 0 8px;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}

.faixa-convite-prazo {
  margin: 0 0 12px;
  max-width: 68ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.faixa-convite-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* Cinto de segurança: o rótulo do botão é curto e fixo, mas um texto que
   cresça sozinho não pode voltar a furar a caixa no celular. */
.faixa-convite-acoes button {
  max-width: 100%;
  white-space: normal;
}

.faixa-convite-erro:empty {
  display: none;
}

.faixa-convite-erro {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--danger);
}

/* ============ Abas de status (topo das listas) ============ */

/* A fileira de recortes com a contagem escrita ao lado. Ela responde de
   relance a pergunta que trazia a pessoa até a lista — "quantas estão
   esperando aprovação?" — sem que ela precise abrir um seletor para
   descobrir. O seletor continua ali embaixo, para o recorte fino. */
.abas-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--card-line);
  padding-bottom: 0;
}

.aba-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 12px 10px;
  cursor: pointer;
  margin-bottom: -1px;
  white-space: nowrap;
}

.aba-status:hover {
  color: var(--ink);
}

.aba-status.active {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.aba-status:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.aba-conta {
  background: var(--bg);
  color: var(--ink-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 8px;
  min-width: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.aba-status.active .aba-conta {
  background: var(--accent-wash);
  color: var(--accent-text);
}

/* Esperando decisão de alguém: o número sai do cinza. É a única contagem da
   fileira que representa trabalho parado. */
.aba-conta-alerta {
  background: var(--warn-wash);
  color: var(--warn);
}

/* ============ Atalhos de configuração (hub) ============ */

/* Uma grade de blocos, e não mais uma lista de links.

   Configuração é o lugar onde se entra sabendo o QUE se quer mudar e sem
   saber ONDE isso mora. Um bloco com ícone, nome e uma linha dizendo o que
   se faz ali responde a segunda pergunta antes de a pessoa precisar clicar
   para descobrir. */
.hub-grid {
  display: grid;
  /* 310 e não 260: o nome do bloco fica numa linha só, e quando não cabe ele
     não dobra, é cortado com reticência. Em 260 "Compradores por categoria"
     saía como "Compradores por cate..." numa tela larga, onde cabem cinco
     colunas — que é justamente onde havia espaço de sobra.

     O número é medido, não escolhido: o nome mais longo da grade ocupa 178
     pontos, o cartão gasta 98 entre a borda, o ícone e o vão, e a fonte da
     integração contínua é um oitavo mais larga que a daqui. */
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 14px;
  margin: 0 0 24px;
}

/* Todo cartão tem a mesma altura, e não a altura do seu texto.

   A grade já esticava os cartões de UMA fileira até o mais alto dela, e é por
   isso que o desalinho não se via no código: cada fileira ficava certa consigo
   mesma e diferente das outras, e a tela inteira parecia montada em pedaços.

   `min-height` resolve as duas de uma vez, desde que nenhuma linha passe de
   três linhas de texto na coluna mais estreita (310px). É por isso que as
   linhas dos cartões são curtas, e é isso que a suíte cobra: uma linha que
   cresça faz a fileira dela crescer junto, e o desalinho volta. */
.hub-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 18px;
  min-height: 112px;
  box-shadow: var(--shadow);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  min-width: 0;
  transition: border-color var(--transicao-estado), box-shadow var(--transicao-estado), transform var(--transicao-estado);
}

.hub-card:hover {
  border-color: var(--accent-wash-2);
  box-shadow: var(--shadow-forte);
  transform: translateY(-1px);
}

.hub-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hub-icone {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hub-icone svg {
  width: 24px;
  height: 24px;
  display: block;
}

.hub-icone-azul {
  background: var(--tom-azul-wash);
  color: var(--tom-azul);
}

.hub-icone-violeta {
  background: var(--tom-violeta-wash);
  color: var(--tom-violeta);
}

.hub-icone-verde {
  background: var(--tom-verde-wash);
  color: var(--tom-verde);
}

.hub-icone-ambar {
  background: var(--tom-ambar-wash);
  color: var(--tom-ambar);
}

.hub-icone-rosa {
  background: var(--tom-rosa-wash);
  color: var(--tom-rosa);
}

.hub-icone-navy {
  background: var(--tom-navy-wash);
  color: var(--tom-navy);
}

.hub-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hub-texto strong {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -0.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Três linhas, no máximo, e é isto que garante a altura igual.

   Contar caracteres não garante: a mesma linha de 79 letras cabe em três
   linhas aqui e passa para quatro na fonte do Linux, que a integração
   contínua usa. O corte em três é uma rede de segurança, e não o desenho: as
   linhas dos cartões são escritas curtas o bastante para nunca encostar nele,
   e a suíte mede isso na coluna mais estreita. Se um dia uma escapar, ela
   perde o fim da frase em vez de desalinhar a tela inteira. */
.hub-texto span {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* No celular a grade vira uma coluna só, e a altura igual deixa de servir a
   alguém: não há vizinho ao lado para alinhar. Os 112px mínimos viravam uma
   faixa branca embaixo de cada cartão, e a tela de Configurações passava de
   dois metros de rolagem. Aqui o cartão tem a altura do que diz. */
@media (max-width: 600px) {
  .hub-grid {
    gap: 10px;
  }

  .hub-card {
    min-height: 0;
    padding: 14px;
    gap: 12px;
    align-items: center;
  }

  .hub-icone {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .hub-icone svg {
    width: 21px;
    height: 21px;
  }
}

/* ---- O título de cada fileira, com a linha que explica ----

   O título continua o rótulo miúdo de sempre; a linha embaixo só aparece
   quando a fileira precisa dizer algo que o título não diz. */
.secao-cabeca {
  margin: 26px 0 10px;
}

.secao-cabeca:first-child {
  margin-top: 0;
}

.secao-cabeca .secao-titulo {
  margin: 0;
}

.secao-dica {
  margin: 3px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ============ Módulos (Configurações) ============

   O cartão de uma ferramenta que a conta liga. Diferente do cartão de atalho
   de propósito: ele é vertical, tem o estado no canto e um rodapé que diz o
   alcance e o que o clique faz. Numa tela com as duas grades, quem bate o
   olho separa "o que eu ligo" de "para onde eu vou" sem ler os títulos.

   Colunas mais estreitas que as da grade de atalhos (228 contra 310): o
   título aqui pode dobrar, porque o cartão cresce para baixo e a fileira
   inteira cresce junto. É o que deixa quatro módulos numa fileira só a partir
   de 1280px, que é a tela em que a maior parte das pessoas usa. */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}

.mod-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  min-width: 0;
  padding: 16px 16px 0;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transicao-estado), box-shadow var(--transicao-estado), transform var(--transicao-estado);
}

/* O módulo ligado ganha um filete verde no alto: numa fileira de quatro, os
   que já estão valendo se separam dos outros antes de se ler o selo. */
.mod-card-ligado {
  box-shadow: inset 0 3px 0 var(--ok), var(--shadow);
}

.mod-card:hover {
  border-color: var(--accent-wash-2);
  box-shadow: var(--shadow-forte);
  transform: translateY(-1px);
}

.mod-card-ligado:hover {
  box-shadow: inset 0 3px 0 var(--ok), var(--shadow-forte);
}

.mod-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mod-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.mod-icone {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.mod-icone svg {
  width: 22px;
  height: 22px;
}

/* O selo do estado. A cor diz o estado e o ponto repete a cor, e a palavra
   diz tudo sozinha: quem não distingue verde de cinza lê "Ligado". */
.mod-estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}

.mod-estado::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.mod-estado-ligado {
  background: var(--ok-wash);
  color: var(--ok);
}

.mod-estado-desligado {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Desligado é o ponto vazado: a ausência de alguma coisa, e não mais uma cor. */
.mod-estado-desligado::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.mod-estado-disponivel {
  background: var(--accent-wash);
  color: var(--accent-text);
}

.mod-estado-pendente {
  background: var(--warn-wash);
  color: var(--warn);
}

.mod-titulo {
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
}

/* `flex: 1` é o que prende o rodapé embaixo: a linha estica até ele, e dois
   cartões da mesma fileira têm o rodapé na mesma altura mesmo quando um diz
   duas linhas e o outro três. */
.mod-linha {
  flex: 1;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.mod-rodape {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px -16px 0;
  padding: 11px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-2);
}

.mod-alcance {
  min-width: 0;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mod-acao {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent-text);
  white-space: nowrap;
}

.mod-acao svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transicao-estado);
}

.mod-card:hover .mod-acao svg {
  transform: translateX(2px);
}

/* No celular o cartão deita: ícone à esquerda, nome e selo na mesma linha, a
   frase embaixo do nome. Em pé, cada módulo gastava meia tela de altura, e
   os quatro empurravam os cadastros para depois de três rolagens. */
@media (max-width: 600px) {
  .mod-grid {
    gap: 10px;
  }

  .mod-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    padding: 14px 14px 0;
  }

  .mod-topo {
    display: contents;
  }

  .mod-icone {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
  }

  .mod-titulo {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .mod-estado {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .mod-linha {
    grid-column: 2 / 4;
    grid-row: 2;
  }

  .mod-rodape {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 10px -14px 0;
    padding: 10px 14px;
  }
}

/* ============ Presença (quem está online) ============ */

/* O ponto verde ao lado do nome, nas listas de gente. Ele vale por uma
   pergunta que se faz o tempo todo num sistema de aprovação — "adianta
   cobrar agora?" — e que hoje só se responde por WhatsApp. */
.ponto-presenca {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: 1px;
}

.ponto-presenca-online {
  background: var(--online);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16);
}

/* ============ Estado vazio ============ */

/* "Nenhuma requisição" escrito em cinza no canto superior esquerdo parece
   erro de carregamento. Um bloco centrado, com um ícone e a próxima ação,
   parece o que de fato é: você chegou antes do trabalho. */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 48px 24px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.vazio-icone {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--accent-wash);
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.vazio-icone svg {
  width: 26px;
  height: 26px;
}

.vazio strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.vazio p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 380px;
  line-height: 1.5;
}

.vazio .btn-primary {
  margin-top: 10px;
}

/* ============ Busca com lupa ============ */

/* A lupa desenhada dentro do campo, e não um ícone ao lado: é o que faz o
   campo ser reconhecido como busca antes de alguém ler o texto de dentro
   dele. Vai como imagem de fundo para não exigir um elemento a mais em
   volta de cada campo de busca do sistema. */
/* O seletor é deste tamanho de propósito. A regra de padding dos campos da
   barra usa `.filtros-req input[type="search"]`, que pesa uma classe, um
   atributo e um elemento; qualquer seletor mais leve perde para ela e o texto
   do campo volta a ficar em cima da lupa. Empatar no peso e vir depois no
   arquivo é o que resolve — sem `!important`, que é dívida que a próxima
   pessoa paga. */
.filtros-req input.filtro-busca {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238b90a3' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5.4'/%3E%3Cpath d='M13 13l3.4 3.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
  background-size: 15px 15px;
  padding-left: 32px;
}

/* ============ O bloco de e-mail na barra escura ============ */

/* O quadro do rodapé da barra lateral nasceu para fundo claro. No
   azul-marinho ele precisa ser o contrário: fundo levemente mais claro que
   a barra, e não mais escuro. */
.emlz {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--nav-linha);
  color: var(--nav-ink);
}

.emlz:hover {
  background: rgba(255, 255, 255, 0.11);
}

.emlz-label {
  color: var(--nav-ink-fraco);
}

.emlz-topo svg {
  color: var(--nav-ink-fraco);
}

.emlz-valor {
  color: var(--nav-ink-forte);
}

.emlz-detalhe {
  color: var(--nav-ink);
}

.emlz-detalhe strong {
  color: var(--nav-ink-forte);
}

.emlz .armz-barra {
  background: rgba(255, 255, 255, 0.12);
}

/* No escuro, o âmbar e o vermelho de texto do sistema (feitos para fundo
   branco) ficam ilegíveis. Estes dois são as versões claras dos mesmos
   avisos, e existem só aqui dentro. */
.emlz-atencao .emlz-valor,
.emlz-atencao .emlz-alerta {
  color: var(--nav-atencao);
}

.emlz-atencao .armz-preenchida {
  background: var(--nav-atencao);
}

.emlz-critico {
  background: rgba(229, 72, 77, 0.16);
  border-color: rgba(229, 72, 77, 0.4);
}

.emlz-critico .emlz-valor,
.emlz-critico .emlz-alerta {
  color: var(--nav-critico);
}

.emlz-critico .armz-preenchida {
  background: var(--nav-critico);
}

/* ============ Prazo ============ */

/* O prazo escrito, com a urgência também na cor. Ver o porquê em prazoHtml().

   `display: inline` e não caixa flexível, pelo mesmo motivo do selo de status:
   isto mora numa coluna de 80px no celular, e "venceu há 12 dias" precisa poder
   quebrar em duas linhas em vez de passar por cima da coluna vizinha. O
   relógio acompanha a primeira palavra como se fosse uma letra dela. */
.prazo {
  display: inline;
}

.prazo svg {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 3px;
}

.prazo-apertado {
  color: var(--warn);
  font-weight: 500;
}

.prazo-vencido {
  color: var(--danger);
  font-weight: 500;
}

/* ============ Tela baixa: o menu inteiro sem rolagem ============ */

/* A régua contínua acima aperta os espaços, e isso resolve a maior parte. O
   que ela não resolve é CONTEÚDO: os dois quadros do rodapé da barra — o de
   empresas e o de armazenamento — custam três linhas cada um, e três linhas
   não encolhem.

   Abaixo de 760 pontos de altura (todo notebook com escala do sistema ligada)
   os dois viram o essencial: o rótulo e o número. O detalhe continua a um
   clique, dentro da tela de Empresas e das Configurações, que é onde ele
   pode ser lido com calma.

   A régua de decisão é esta: numa tela baixa, o menu inteiro visível vale mais
   do que qualquer indicador dentro dele. Rolar a barra lateral para achar a
   primeira aba é o pior defeito de navegação que existe — a pessoa não sabe
   que há algo acima, porque nada na tela diz isso. */

@media (max-height: 760px) {
  .emlz-detalhe,
  .emlz-alerta {
    display: none;
  }

  .emlz {
    padding: 7px 10px 8px;
  }

  .emlz-topo {
    margin-bottom: 0;
  }

  .emlz .armz-barra {
    margin-top: 6px;
    margin-bottom: 0;
  }

  .sidebar-email {
    padding-top: 8px;
  }
}

/* Mais baixo ainda (546 pontos é o que um monitor de 1080 entrega a 150%):
   o nome da empresa cliente perde a linha separadora e encosta no menu. */
@media (max-height: 620px) {
  .identidade-empresa {
    padding-bottom: 5px;
    margin-bottom: 5px;
  }

  .nav-grupo {
    margin-top: 5px;
    margin-bottom: 2px;
  }

  /* A marca também é uma linha só, e a entrelinha de parágrafo dela custa
     cinco pontos no alto da barra — os mesmos cinco que faltam lá embaixo. */
  .marca-sidebar .marca-nome {
    line-height: 1.15;
  }

  .sidebar-nav-rodape {
    margin-top: 4px;
    padding-top: 4px;
  }
}

/* A entrelinha do menu é do menu, e não a do texto corrido.

   O corpo do sistema usa 1,5 porque parágrafo se lê assim. Um item de menu não
   é parágrafo: é uma linha só, e a folga de leitura vira altura desperdiçada
   dez vezes seguidas. Com 1,35 no item e 1,2 no título de seção, o menu da
   Gestão — o mais longo do sistema, com dez itens e três seções — cabe inteiro
   nos 546 pontos de um notebook a 150%. */
.nav-item {
  line-height: 1.35;
}

.nav-grupo {
  line-height: 1.2;
}

/* Abaixo de 540 pontos de altura — janela pequena, ou escala do sistema em
   175% — o título de seção troca o texto por uma linha.

   A separação continua existindo (é ela que impede o menu de virar uma lista
   de dez itens iguais), mas deixa de custar dezenove pontos por seção. O texto
   continua no documento para quem lê a tela por voz; some só para os olhos. */
@media (max-height: 540px) {
  .nav-grupo {
    height: 1px;
    margin: 4px 10px;
    padding: 0;
    border-top: 1px solid var(--nav-linha);
    font-size: 0;
    overflow: hidden;
  }

  .nav-grupo:first-child {
    display: none;
  }
}

/* Formulário aberto: nada mais na tela. O que vem depois da caixa do
   formulário (barra de filtros, quadro ou tabela, nota de rodapé) sai de cena
   enquanto a compra está sendo escrita. O quadro logo abaixo era um convite a
   clicar no cartão de outra compra e perder o que já tinha sido digitado. */
#form-nova-requisicao-container.so-formulario ~ * {
  display: none;
}

/* ============ Quadro (a lista arrumada por etapa) ============ */

/* A faixa que fica entre o título da página e os filtros: à esquerda os
   recortes de status, à direita a forma de olhar. São as duas perguntas que se
   faz antes de olhar a lista — "quais?" e "de que jeito?" — e por isso dividem
   uma linha só, em vez de empilhar duas fileiras de controle sobre a tela. */
.barra-lista {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--card-line);
}

.barra-lista .abas-status {
  margin: 0;
  border-bottom: none;
}

/* No quadro, as colunas SÃO as abas de status, com a mesma contagem escrita.
   Manter a fileira seria a mesma informação duas vezes, três centímetros acima
   de si mesma. O seletor fino continua na barra de filtros, logo abaixo. */
.barra-lista.em-quadro .abas-status {
  display: none;
}

/* Lista ou quadro. Dois botões encostados, e não um interruptor: interruptor
   diz "ligado/desligado" e aqui nenhuma das duas formas é a ausência da
   outra. */
.seletor-visao {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding-bottom: 6px;
}

.botao-visao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.2;
  padding: 6px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.botao-visao svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.botao-visao:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.botao-visao.active {
  background: var(--surface);
  border-color: var(--card-line);
  color: var(--accent-text);
  box-shadow: var(--shadow);
}

.botao-visao:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* O quadro rola na horizontal dentro da própria caixa. Sem isso, seis colunas
   empurrariam a página inteira para o lado e a barra lateral sairia de vista a
   cada rolagem — o defeito que o laboratório marca como rolagem-horizontal. */
.quadro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.quadro-coluna {
  flex: 0 0 clamp(238px, 21vw, 292px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Sem contorno: a coluna é o chão em que os cartões estão pousados, e um
     chão com moldura vira mais um cartão. O tom já separa do fundo. */
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 10px 6px;
}

.quadro-coluna-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 3px;
}

/* O rótulo da coluna virou <h2> para o quadro ter estrutura para quem navega
   por títulos. O <h2> traz margem e corpo próprios do navegador, e nenhum dos
   dois é desejado aqui: quem desenha continua sendo o selo lá dentro. */
.quadro-coluna-topo .quadro-coluna-titulo {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  /* O seletor tem dois nomes de propósito. Na ficha da empresa o quadro mora
     dentro de um `.form-card`, e a regra `.form-card h2` (margem de 16 e
     corpo 16) ganhava desta com um nome só: o selo da coluna descia e a
     contagem ao lado ficava numa segunda linha. */
}

.quadro-coluna-conta {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* O dinheiro parado naquela etapa. É a única coisa que uma coluna sabe e um
   cartão não: quanto vale, somado, o trabalho que está ali. */
.quadro-coluna-soma {
  margin: 5px 3px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Quando nem todo cartão da coluna tem valor, a soma diz de quantos ela é.
   Um total que finge cobrir tudo é um número inventado. */
.quadro-coluna-parcial {
  font-weight: 400;
  color: var(--faint);
}

/* A economia acumulada, ao lado da soma da coluna Fechada. Verde porque é
   ganho, e é o número que a empresa mostra para justificar o sistema. */
.quadro-coluna-ganho {
  color: var(--ok);
}

.quadro-coluna-corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 6px;
  /* Uma coluna cheia não pode esticar a página até o rodapé sumir. Ela rola
     por dentro, e o cabeçalho de todas as outras continua no lugar. */
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Etapa vazia continua no quadro: "a fila de aprovação está limpa" é uma
   resposta, e some junto com a coluna se ela desaparecer. */
.quadro-coluna-vazia {
  margin: 0;
  padding: 14px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  color: var(--faint);
  text-align: center;
}

.quadro-cartao {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  box-shadow: var(--shadow);
}

.quadro-cartao-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* Três linhas de título e depois reticências. O título é o que identifica a
   compra e precisa aparecer inteiro quase sempre; um pedido com oitenta
   caracteres, porém, sozinho faria um cartão do tamanho de três. */
.quadro-cartao h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.35;
  color: var(--ink);
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quadro-cartao-valor {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.quadro-cartao-meta,
.quadro-cartao-apoio {
  margin: 5px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.quadro-cartao-apoio {
  color: var(--ink-2);
}

/* Entrega e pagamento do que já fechou. Não é a linha principal do cartão —
   é o que se confere no recebimento —, então fica no tom de apoio, uma linha
   abaixo de quem vende. */
.quadro-cartao-entrega {
  margin: 3px 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.quadro-cartao-pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--muted);
}

.quadro-cartao-pessoa {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sem comprador ainda: o nome que aparece é o de quem pediu, e ele não é o
   dono do trabalho. O tom mais claro diz isso sem precisar de rótulo. */
.quadro-cartao-pessoa-fraca {
  color: var(--faint);
  font-style: italic;
}

.quadro-cartao-acoes {
  margin-top: 9px;
}

.quadro-cartao-acoes .acoes-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* A tarja da lateral. Duas cores e nada mais: vermelho é relógio vencido ou
   decisão esperando quem está olhando; âmbar é trabalho sem dono. Um cartão
   sem tarja é o normal — se tudo fosse marcado, nada estaria marcado. */
.quadro-cartao-urgente {
  border-left: 3px solid var(--danger);
}

.quadro-cartao-atencao {
  border-left: 3px solid var(--warn);
}

.quadro-cartao-clicavel {
  cursor: pointer;
}

.quadro-cartao-clicavel:hover {
  border-color: var(--accent);
}

.quadro-cartao-clicavel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* O cartão que está aberto na ficha abaixo. Sem esta marca, a ficha parece ter
   vindo do nada e trocar de cartão parece não ter feito efeito. */
.quadro-cartao-aberto {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* A ficha inteira, aberta embaixo do quadro — a oportunidade do fornecedor,
   o chamado de quem responde o suporte. */
.ficha-do-quadro:not(:empty) {
  margin-top: 22px;
}

/* Em tela estreita a coluna passa a ocupar quase a largura toda: rolar de lado
   uma coluna por vez é como se lê um quadro no celular. */
@media (max-width: 640px) {
  .quadro-coluna {
    flex-basis: min(84vw, 300px);
  }

  .quadro-coluna-corpo {
    max-height: none;
  }

  .botao-visao span {
    display: none;
  }

  .botao-visao {
    padding: 6px 9px;
  }
}

/* ==========================================================================
   A apresentação de primeiro acesso (js/tour.js)

   Duas peças fixas por cima de tudo: o FOCO e o CARTÃO. O véu escuro não é
   um elemento — é a sombra do foco, um box-shadow largo o bastante para
   cobrir a tela inteira. Um elemento só desenha o claro e o escuro, e mover
   o foco leva a escuridão junto, sem emenda e sem quatro painéis a costurar.

   O z-index fica acima de tudo o que a plataforma empilha (barra do celular
   em 20, menu de busca em 60): o passeio acontece por cima da casa inteira.
   ========================================================================== */

.tour-raiz {
  position: fixed;
  inset: 0;
  z-index: 120;
  animation: tour-aparecer 0.28s ease both;
}

.tour-sumindo {
  opacity: 0;
  transition: opacity var(--transicao-movimento) ease;
}

@keyframes tour-aparecer {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tour-furo {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 200vmax rgba(14, 16, 28, 0.58);
  transition:
    top var(--transicao-passeio) cubic-bezier(0.4, 0, 0.2, 1),
    left var(--transicao-passeio) cubic-bezier(0.4, 0, 0.2, 1),
    width var(--transicao-passeio) cubic-bezier(0.4, 0, 0.2, 1),
    height var(--transicao-passeio) cubic-bezier(0.4, 0, 0.2, 1),
    border-radius var(--transicao-passeio) cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* O anel de luz na borda do foco: respira devagar para dizer "é aqui" sem
   piscar — piscar é linguagem de erro. */
.tour-furo::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid rgba(122, 158, 255, 0.9);
  animation: tour-respirar 2.4s ease-in-out infinite;
}

@keyframes tour-respirar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(122, 158, 255, 0.35); }
  50% { box-shadow: 0 0 0 7px rgba(122, 158, 255, 0); }
}

/* Nos passos de centro o foco se recolhe a um ponto: o véu fica inteiro e a
   transição de abrir/fechar é o que costura um passo no outro. */
.tour-furo-centro {
  border-radius: 50%;
}

.tour-furo-centro::after {
  display: none;
}

.tour-cartao {
  position: fixed;
  width: min(352px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-forte);
  padding: 16px 18px 14px;
  transition:
    top var(--transicao-passeio) cubic-bezier(0.4, 0, 0.2, 1),
    left var(--transicao-passeio) cubic-bezier(0.4, 0, 0.2, 1);
}

/* No celular o cartão é uma folha no pé da tela, sempre no mesmo lugar: o
   alvo muda a cada passo, e um cartão que persegue alvo pequeno fica pulando. */
.tour-cartao-base {
  top: auto !important;
  left: 10px !important;
  right: 10px;
  bottom: 10px;
  width: auto;
  /* Numa janela baixinha a folha inteira comeria a tela: ela para em pouco
     mais de meia altura e o texto rola por dentro — o alvo fica visível. */
  max-height: min(58vh, 430px);
}

/* A folha sobe quando o alvo do passo mora no pé da tela (a conta, o
   Suporte): embaixo ela cobriria exatamente o que o foco quer mostrar. */
.tour-cartao-base.tour-cartao-alto {
  top: 10px !important;
  bottom: auto;
}

.tour-progresso {
  height: 3px;
  border-radius: 2px;
  background: var(--line-soft);
  overflow: hidden;
  margin-bottom: 10px;
}

.tour-progresso i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width var(--transicao-longa) ease;
}

.tour-rotulo {
  margin: 0 0 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.tour-titulo {
  margin: 0 0 6px;
  font-size: 16.5px;
  color: var(--ink);
}

.tour-conteudo {
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.tour-conteudo p {
  margin: 0 0 8px;
}

.tour-conteudo p:last-child {
  margin-bottom: 0;
}

.tour-conteudo b {
  color: var(--ink);
  font-weight: 600;
}

.tour-surgir {
  animation: tour-subir 0.3s ease both;
}

@keyframes tour-subir {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.tour-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tour-lista li {
  padding: 4px 0;
}

.tour-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* Pular fica longe do Avançar, encostado na outra margem: sair do passeio
   não pode ser um clique errado de quem só queria seguir. */
.tour-pular {
  margin-right: auto;
  color: var(--faint);
}

.tour-pular:hover {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .tour-raiz,
  .tour-furo,
  .tour-furo::after,
  .tour-cartao,
  .tour-surgir,
  .tour-progresso i {
    animation: none;
    transition: none;
  }
}


/* ==========================================================================
   A caixa de diálogo (js/dialogo.js)

   Substitui alert(), confirm() e prompt(). O z-index fica em 130, acima de
   tudo o que a plataforma empilha — inclusive da apresentação de primeiro
   acesso, em 120: uma pergunta que trava o trabalho precisa ser respondida
   antes de qualquer outra coisa na tela.

   A caixa é centrada em tela larga e encostada no rodapé no celular, onde o
   polegar alcança. É a mesma decisão do cartão da apresentação.
   ========================================================================== */

.dialogo-raiz {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: dialogo-entrar 0.18s ease both;
}

.dialogo-saindo {
  opacity: 0;
  transition: opacity var(--transicao-movimento) ease;
  pointer-events: none;
}

@keyframes dialogo-entrar {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dialogo-fundo {
  position: absolute;
  inset: 0;
  background: rgba(14, 16, 28, 0.5);
}

.dialogo-caixa {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-forte);
  padding: 24px 26px 20px;
  animation: dialogo-subir 0.22s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes dialogo-subir {
  from { transform: translateY(10px) scale(0.985); }
  to   { transform: none; }
}

/* No celular a caixa sobe do rodapé, e a escala sairia como tremor. */
@keyframes dialogo-subir-celular {
  from { transform: translateY(22px); }
  to   { transform: none; }
}

/* O ícone e o título na mesma linha: o tom é lido antes da frase. */
.dialogo-cabeca {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.dialogo-icone {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.dialogo-icone svg {
  width: 19px;
  height: 19px;
}

.dialogo-cabeca h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.32;
  font-weight: 650;
  color: var(--ink);
  padding-top: 5px;
}

.dialogo-info    .dialogo-icone { background: var(--accent-wash);  color: var(--accent-text); }
.dialogo-atencao .dialogo-icone { background: var(--warn-wash);    color: var(--warn); }
.dialogo-perigo  .dialogo-icone { background: var(--danger-wash);  color: var(--danger); }

.dialogo-perigo .dialogo-confirmar {
  background: var(--danger);
  border-color: var(--danger);
}

.dialogo-perigo .dialogo-confirmar:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

.dialogo-texto {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* As referências: o que a pessoa precisa ter à vista para responder. No
   fechamento são o primeiro orçamento e a proposta escolhida — os dois números
   que o prompt() do navegador jogava dentro do próprio título, em texto
   corrido, onde ninguém compara nada. */
.dialogo-referencias {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  display: grid;
  gap: 8px;
}

.dialogo-referencias div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.dialogo-referencias dt {
  font-size: 12px;
  color: var(--muted);
}

.dialogo-referencias dd {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.dialogo-rotulo {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}

.dialogo-campo {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.dialogo-campo:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* O campo de dinheiro: o "R$" é da caixa, não do que se digita. Assim a
   máscara pode reescrever o conteúdo inteiro a cada tecla sem nunca apagar a
   cifra nem deixar a pessoa apagá-la sem querer. */
.dialogo-moeda {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.dialogo-moeda:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.dialogo-moeda span {
  display: grid;
  place-items: center;
  padding: 0 11px;
  background: var(--surface-2);
  border-right: 1px solid var(--line-soft);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.dialogo-moeda .dialogo-campo {
  border: 0;
  border-radius: 0;
  font-size: 19px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  padding: 11px 12px;
}

.dialogo-moeda .dialogo-campo:focus {
  box-shadow: none;
}

.dialogo-nota {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* O aviso do teto de gasto. Âmbar, e não vermelho: passar do teto não é erro,
   é uma decisão que precisa ser tomada de olhos abertos. */
.dialogo-aviso {
  margin: 10px 0 0;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 500;
}

.dialogo-erro:empty {
  display: none;
}

.dialogo-erro {
  margin: 12px 0 0;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--danger-wash);
  color: var(--danger);
  font-size: 12.5px;
  line-height: 1.5;
}

.dialogo-acoes {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* A tela de trás não rola enquanto a caixa está aberta: rolar o fundo é o
   gesto que faz a pessoa achar que a caixa não é modal e clicar fora dela. */
body.com-dialogo {
  overflow: hidden;
}

@media (max-width: 560px) {
  .dialogo-raiz {
    align-items: flex-end;
    padding: 0;
  }

  .dialogo-caixa {
    max-width: none;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    max-height: 88vh;
    animation-name: dialogo-subir-celular;
  }

  /* Os botões ocupam a linha inteira, e o de confirmar vem primeiro na ordem
     visual: no celular o polegar chega antes ao de baixo. */
  .dialogo-acoes {
    flex-direction: column-reverse;
    gap: 8px;
  }

  .dialogo-acoes button {
    width: 100%;
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialogo-raiz,
  .dialogo-caixa,
  .dialogo-saindo {
    animation: none;
    transition: none;
  }
}

/* ============ Pular para o conteúdo ============
   Invisível até o foco, e aí vira um botão comum no alto da tela. */
.pular-para-conteudo {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}

.pular-para-conteudo:focus {
  left: 0;
}

.app-main:focus {
  outline: none;
}


/* ==========================================================================
   A linha do tempo da compra (js/ui-historico.js)

   Nasce fechada, num <details>: é consulta, não trabalho do dia. Aberta por
   padrão empurraria o mapa comparativo para fora da tela em toda cotação com
   dez eventos.
   ========================================================================== */

.historico {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.historico-resumo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}

/* O triângulo padrão do <details> some nos dois motores e volta como seta
   nossa, que gira: a do navegador tem tamanho e cor que não se controlam. */
.historico-resumo::-webkit-details-marker { display: none; }

.historico-resumo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform var(--transicao-movimento) ease;
  flex: none;
  margin-left: 2px;
}

.historico[open] .historico-resumo::before {
  transform: rotate(45deg);
}

.historico-conta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

.historico .chart-note,
.historico .empty {
  padding: 0 20px 4px;
  margin: 0;
}

.historico-lista {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 20px 18px;
}

/* O fio que liga os eventos. Desenhado na borda esquerda de cada item, e não
   como um elemento à parte: assim ele começa e termina exatamente onde a
   lista começa e termina, sem sobrar risco no vazio. */
.historico-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 0 16px 16px;
  border-left: 2px solid var(--line-soft);
  position: relative;
}

.historico-item:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.historico-marca {
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}

/* O último evento é o estado de agora: ponto cheio, e não anel. */
.historico-item:last-child .historico-marca {
  background: var(--accent);
}

.historico-corpo {
  flex: 1 1 auto;
  min-width: 0;
}

.historico-titulo {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

.historico-detalhe {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.historico-quando {
  flex: none;
  font-size: 11.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

/* No celular a hora desce para baixo do texto: em 375px ela roubava metade da
   largura da frase que a pessoa veio ler. */
@media (max-width: 560px) {
  .historico-item {
    flex-direction: column;
    gap: 2px;
  }

  .historico-quando {
    padding-top: 2px;
  }
}

/* O seletor de visão SOMA no celular, e não some mais.
   Ele estava escondido porque a lista não cabia nessa largura; agora ela cabe,
   virou cartão e é o padrão do celular (ver LARGURA_LISTA_PRIMEIRO em
   js/ui-quadro.js). Esconder a escolha agora seria trancar quem prefere o
   quadro dentro da lista, que é o defeito de antes ao contrário. */
@media (max-width: 640px) {
  .seletor-visao {
    margin-left: 0;
    padding-bottom: 0;
  }
}


/* ==========================================================================
   Os itens de uma compra (js/ui-itens.js)

   O editor é uma lista numerada de linhas, e cada linha é um grid que quebra
   em coluna no celular. A numeração não é enfeite: é por ela que o comprador
   e o fornecedor falam da mesma linha ao telefone.
   ========================================================================== */

.bloco-itens {
  margin-bottom: 18px;
}

.itens-lista {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.item-linha {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  grid-template-areas:
    "num campos remover"
    ".   spec   spec";
  gap: 8px 10px;
  align-items: start;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}

.item-num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-wash);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-top: 20px;
}

/* A descrição ocupa a linha inteira e os dois campos pequenos dividem a de
   baixo. Os três lado a lado só cabem em tela larga, e a coluna do formulário
   de requisição tem 380px em qualquer tela: ali "Quantidade" e "Unidade"
   escreviam um por cima do outro (conferido no laboratório).

   Duas linhas funcionam em toda largura, e o custo é 30px de altura por item.
   Nenhuma largura de tela paga isso melhor do que um rótulo ilegível. */
.item-campos {
  grid-area: campos;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.item-campo-desc {
  grid-column: 1 / -1;
}

.item-campo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.item-campo > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.item-campo input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  margin: 0;
}

.item-campo select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  margin: 0;
}

.item-campo input:focus,
.item-campo select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* O campo de unidade: a lista e, embaixo dela, a caixa que só aparece quando
   a unidade não está na lista. Empilhados, e não lado a lado: lado a lado a
   lista encolheria justamente na coluna mais estreita do formulário, e a
   caixa de escrever ficaria com espaço para três letras. */
.campo-unidade {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* No formulário de uma linha só (o "adicionar item" do catálogo) o campo é um
   dos irmãos flexíveis, e não um bloco de largura própria. */
.form-inline .campo-unidade {
  flex: 1 1 180px;
  min-width: 180px;
}

/* `flex: 1 1 180px` de `.form-inline select` alcança o seletor aqui dentro, e
   dentro de uma coluna a base de 180px vira ALTURA: o campo virava um bloco de
   180 pixels de alto ao lado de caixas de 37. Aqui os dois voltam a ter a
   altura do próprio conteúdo. */
.form-inline .campo-unidade select,
.form-inline .campo-unidade input {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.item-spec {
  grid-area: spec;
}

.item-spec summary {
  font-size: 11.5px;
  color: var(--accent-text);
  cursor: pointer;
  padding: 2px 0;
  width: fit-content;
}

.item-spec textarea {
  margin-top: 6px;
  font-size: 13px;
}

.item-linha .item-remover {
  grid-area: remover;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .item-linha {
    grid-template-columns: 26px 1fr;
    grid-template-areas:
      "num campos"
      ".   spec"
      ".   remover";
  }

  .item-linha .item-remover {
    margin-top: 4px;
    justify-self: start;
  }
}

/* ---- A tabela de leitura (fornecedor e mapa) ---- */

.tabela-itens .col-item-n     { width: 6%; text-align: center; color: var(--faint); }
.tabela-itens .col-item-desc  { width: 44%; }
.tabela-itens .col-item-qtd   { width: 16%; }
.tabela-itens .col-item-preco { width: 20%; }
.tabela-itens .col-item-subtotal {
  width: 14%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tabela-itens tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  font-weight: 700;
  padding-top: 12px;
}

.col-item-total-rotulo {
  text-align: right;
  color: var(--muted);
  font-weight: 600;
}

/* O campo de preço dentro da célula: mesmo tratamento do campo de moeda do
   diálogo, para o "R$" nunca ser algo que se possa apagar sem querer. */
.item-preco-campo {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
  max-width: 100%;
}

.item-preco-campo:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.item-preco-campo span {
  display: grid;
  place-items: center;
  padding: 0 7px;
  background: var(--surface-2);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.item-preco-campo input {
  border: 0;
  width: 100%;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  background: transparent;
  color: var(--ink);
  margin: 0;
}

/* O anel vai na CAIXA, e não no campo.
   O <input> aqui não tem borda própria — quem desenha a moldura é o wrapper,
   com o "R$" grudado à esquerda. Tirar o contorno do campo sem pôr nada no
   lugar deixava o fornecedor digitando preço item a item sem saber em qual
   linha o cursor está, se ele estiver navegando por teclado. */
.item-preco-campo input:focus {
  outline: none;
}

.item-preco-campo:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

/* ---- O mapa por item, do lado do comprador ---- */

.mapa-itens {
  margin-top: 16px;
}

.mapa-itens .celula-menor {
  color: var(--ok);
  font-weight: 700;
}

.mapa-itens .celula-menor::after {
  content: " menor";
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

.mapa-itens .celula-vazia {
  color: var(--faint);
}

/* Proposta acima do teto de gasto declarado pela empresa. Âmbar, e não
   vermelho: passar do teto não é erro, é uma decisão que precisa ser tomada
   de olhos abertos. */
.tabela-requisicoes td.celula-acima-teto .cel-principal {
  color: var(--warn);
}

.tabela-requisicoes td.celula-acima-teto .cel-apoio {
  color: var(--warn);
  font-weight: 600;
}

/* O aceite dos termos no cadastro. A caixa e o texto alinhados pelo topo: o
   texto tem duas linhas e centralizar deixaria a caixa boiando no meio delas. */
.linha-termos {
  align-items: flex-start;
  margin: 14px 0 4px;
}

.linha-termos span {
  font-size: 12.5px;
  line-height: 1.5;
}

.linha-termos a {
  color: var(--accent-text);
}

/* Os links de documento no pé da tela de entrada. Discretos: quem vem entrar
   não procura os termos, e quem procura sabe olhar o rodapé. */
.entrada-legal {
  margin: 10px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: var(--faint);
}

.entrada-legal a {
  color: var(--muted);
}


/* ==========================================================================
   Os filtros que recolhem, e a lista que vira cartão no celular

   Duas mudanças que só valem abaixo de 640px, e que resolvem os dois defeitos
   que sobraram do celular: os seis campos antes do conteúdo, e a tabela de
   quatro colunas quebrando palavra no meio.
   ========================================================================== */

.btn-filtros {
  display: none;
  align-items: center;
  gap: 7px;
}

/* `[hidden]` precisa vencer o display desta regra: a do navegador para
   `[hidden]` tem especificidade menor do que uma classe, então sem esta linha
   o contador aparecia escrito "0" mesmo escondido. */
.filtros-conta[hidden] {
  display: none;
}

.filtros-conta {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* O bloco recolhível é uma caixa de verdade, e não `display: contents`.
   Com `contents` os campos herdavam o flex da barra e o desenho ficava
   idêntico ao de sempre, o que era a intenção — só que a caixa passa a ter
   tamanho zero, e o detector do laboratório then acusava seis vazamentos
   falsos por tela. Um detector que grita sem motivo é um detector que as
   pessoas aprendem a ignorar, e aí ele deixa de pegar o defeito de verdade.

   Uma linha flexível aninhada dá o mesmo resultado visual: a busca à
   esquerda, os filtros correndo ao lado dela e quebrando quando falta
   largura. */
.filtros-avancados {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* Linha inteira, e não um item que disputa espaço com a busca.
     Com `1 1 460px` o bloco cabia ao lado da busca em algumas larguras e não
     em outras, e a busca acabava encalhada no meio da segunda fileira: a
     ordem do que se lê mudava conforme o tamanho da janela. Ocupando a linha,
     a leitura é sempre a mesma: primeiro onde se digita, depois por onde se
     recorta. */
  flex: 1 1 100%;
  min-width: 0;
}

@media (max-width: 640px) {
  .btn-filtros {
    display: inline-flex;
  }

  /* Fechado por padrão. A busca fica; o resto espera ser pedido. */
  .filtros-avancados {
    display: none;
  }

  .filtros-req.filtros-abertos .filtros-avancados {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  /* Os seletores tinham larguras diferentes porque cada um se ajustava ao
     próprio conteúdo. Empilhados, isso vira uma escada. */
  .filtros-req.filtros-abertos .filtros-avancados select {
    width: 100%;
    max-width: none;
  }

  /* ---- A lista vira cartão ----

     A tabela mantinha quatro colunas em 375px, e o resultado era "Forneciment
     / o e / instalação" e "R$ 1.480.000, / 90" com a cifra partida. Nada
     transbordava (o detector do laboratório não via nada), e mesmo assim era
     ilegível: o defeito estava dentro da caixa.

     Aqui cada linha vira um bloco. O cabeçalho some (o rótulo de cada dado
     vira o ::before de cada célula), e a célula de ações ganha a linha inteira,
     onde o botão tem tamanho de dedo em vez de tamanho de coluna. */
  .tabela-requisicoes thead {
    display: none;
  }

  .tabela-requisicoes,
  .tabela-requisicoes tbody,
  .tabela-requisicoes tr,
  .tabela-requisicoes td {
    display: block;
    width: auto;
  }

  .tabela-requisicoes tbody tr {
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--card-line);
  }

  .tabela-requisicoes tbody tr:last-child {
    border-bottom: 0;
  }

  .tabela-requisicoes td {
    padding: 0 0 8px;
    border-bottom: 0;
    overflow-wrap: break-word;
  }

  .tabela-requisicoes td:last-child {
    padding-bottom: 0;
  }

  /* A primeira coluna é o título do cartão: maior, e sem rótulo, porque um
     "REQUISIÇÃO:" em cima do código não informa nada. */
  .tabela-requisicoes td:first-child .cel-principal {
    font-size: 14.5px;
    font-weight: 650;
  }

  /* O rótulo de cada dado, à esquerda, na largura fixa que faz os valores se
     alinharem em coluna. `data-rotulo` é escrito pelas telas que montam a
     tabela; célula sem ele simplesmente não ganha rótulo. */
  .tabela-requisicoes td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--faint);
    margin-bottom: 2px;
  }

  /* Dado que não existe some do cartão. Na tabela um traço basta, porque a
     coluna acima já diz do que se trata; no cartão ele viria com um rótulo em
     maiúsculas por cima, gastando duas linhas para dizer "não tem". */
  .tabela-requisicoes td.celula-sem-conteudo {
    display: none;
  }

  /* As ações ganham a linha inteira e o botão, o tamanho do dedo. */
  .tabela-requisicoes .acoes-linha {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }

  .tabela-requisicoes td .btn-mini {
    padding: 9px 14px;
    font-size: 13px;
  }

  /* O selo volta ao tamanho normal: a coluna estreita que exigia 10,5px não
     existe mais. */
  .tabela-requisicoes td .badge {
    font-size: 11.5px;
    padding: 3px 8px;
  }

  .tabela-requisicoes td .badge[class*="status-"]::before {
    display: inline-block;
  }

  /* A tabela de itens é a exceção: ela É uma grade de números, e virar cartão
     desfaria justamente a comparação que ela existe para permitir. Continua
     tabela, com rolagem lateral própria. */
  .tabela-itens thead {
    display: table-header-group;
  }

  .tabela-itens,
  .tabela-itens tbody,
  .tabela-itens tr,
  .tabela-itens td {
    display: revert;
  }

  .tabela-itens {
    min-width: 460px;
  }

  .tabela-itens-scroll {
    overflow-x: auto;
  }
}


/* ---------------------------------------------------------------------------
   O painel do dono da plataforma (js/ui-painel-plataforma.js)

   Sete seções, uma por pergunta, e um sumário no alto que rola até cada uma.
   Tudo o que é indicador, gráfico e tabela reaproveita os blocos dos outros
   painéis (.stat-tile, .chart-card, .barras, .tabela-requisicoes); o que é
   novo aqui é só a moldura e o que não existia: o alerta em frase, o selo de
   cobertura de categoria e a barra de uso de espaço.
   --------------------------------------------------------------------------- */

.dono-sumario {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 18px;
}

.dono-sumario button {
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transicao-estado), color var(--transicao-estado);
}

.dono-sumario button:hover {
  border-color: var(--accent-wash-2);
  color: var(--accent-text);
}

.dono-sumario button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   O seletor de recorte de uma tela com mais de uma lista (Empresas
   compradoras: Empresas ou Pessoas; js/ui-empresas.js). Mesma cara do
   sumário do painel do dono, com o número de cada lista dentro do botão e,
   quando há gente esperando aprovação, quantas.
   --------------------------------------------------------------------------- */

.visoes-da-tela {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.visao-da-tela {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color var(--transicao-estado), color var(--transicao-estado),
    background var(--transicao-estado);
}

.visao-da-tela:hover {
  border-color: var(--accent-wash-2);
  color: var(--accent-text);
}

.visao-da-tela.active {
  background: var(--accent-wash);
  border-color: var(--accent-wash-2);
  color: var(--accent-text);
  font-weight: 600;
}

.visao-da-tela:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visao-conta {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--muted);
}

.visao-da-tela.active .visao-conta {
  color: inherit;
}

.visao-alerta {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-wash);
  color: var(--warn);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.dono-secao {
  margin-bottom: 28px;
  /* A rolagem do sumário para um pouco antes do título, para ele não colar no
     alto da janela. */
  scroll-margin-top: 12px;
}

/* Título de seção: uma linha, sempre. É rótulo, não texto corrido. */
.dono-secao-titulo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dono-secao-titulo:focus {
  outline: none;
}

.dono-secao-nota {
  margin: 0 0 12px;
}

.dono-secao-nota:empty {
  margin-bottom: 8px;
}

/* ---- Os pontos críticos: alerta em frase ---- */

.dono-alertas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dono-alerta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--card-line);
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.dono-alerta-critico {
  background: var(--danger-wash);
  border-color: var(--danger-wash);
  color: var(--danger);
}

.dono-alerta-atencao {
  background: var(--warn-wash);
  border-color: var(--warn-wash);
  color: var(--warn);
}

.dono-alerta-texto {
  flex: 1;
  min-width: 0;
}

.dono-alerta .link-inline {
  color: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- O selo de cobertura de categoria ---- */

.badge-cobertura-critico {
  background: var(--danger-wash);
  color: var(--danger);
}

.badge-cobertura-atencao {
  background: var(--warn-wash);
  color: var(--warn);
}

.badge-cobertura-ok {
  background: var(--ok-wash);
  color: var(--ok);
}

/* ---- A barra de uso de espaço ---- */

.dono-uso-barra {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
  margin: 8px 0 2px;
}

.dono-uso-preenchida {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

.dono-uso-atencao .dono-uso-preenchida {
  background: var(--warn);
}

.dono-uso-critico .dono-uso-preenchida {
  background: var(--danger);
}

/* ---- Listas de linha com botão na ponta ---- */

.dono-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dono-lista li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}

.dono-lista li:first-child {
  border-top: 0;
  padding-top: 0;
}

.dono-lista .cel-texto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.dono-lista-uso .dono-uso-barra {
  margin-top: 4px;
}

.dono-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.dono-numero-apoio {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Indicadores dentro de um cartão: dois por linha, porque o cartão tem metade
   da largura da tela; três quando são só três. */
.chart-card .stat-row {
  margin-bottom: 0;
}

.chart-card .stat-row.dono-grade-dupla {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dono-grade-tripla {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

/* A tabela do painel tem colunas de número curtas; a primeira leva o nome. */
.dono-tabela th:first-child,
.dono-tabela td:first-child {
  min-width: 200px;
}

.dono-tabela td .dono-acoes {
  justify-content: flex-start;
}

@media (max-width: 900px) {
  .chart-card .stat-row.dono-grade-dupla,
  .dono-grade-tripla {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* O nome na lista é dado, não rótulo: em tela estreita ele quebra em vez de
   passar por cima do botão ao lado. Abaixo de 520px o botão desce para a
   linha de baixo, porque um nome de razão social e um botão não cabem juntos
   em 360px de largura. */
.dono-lista .cel-principal,
.dono-lista .cel-apoio {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .dono-lista li {
    flex-wrap: wrap;
  }

  .dono-lista .cel-texto {
    flex-basis: 100%;
  }

  .dono-lista .dono-acoes {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Os convites do dono (etapa 63): dois indicadores em metade da fileira. Na
   grade de quatro, dois números sozinhos deixariam duas casas vazias ao lado. */
.stat-row.dono-convites {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: calc(50% - 6px);
}

@media (max-width: 900px) {
  .stat-row.dono-convites {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
  }
}

/* ==========================================================================
   O catálogo de itens com código (etapa 66)

   Na linha de compra, o código entra à esquerda da descrição e divide a
   primeira fileira com ela; quantidade e unidade seguem na segunda, nas
   mesmas duas colunas. A coluna do código é estreita de propósito: código é
   curto, e a descrição continua sendo o que se lê.
   ========================================================================== */

.item-campos.com-codigo {
  grid-template-columns: minmax(0, 120px) minmax(0, 1fr);
}

.item-campos.com-codigo .item-campo-desc {
  grid-column: auto;
}

.item-campo-codigo input {
  font-variant-numeric: tabular-nums;
}

.item-codigo-nota {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.3;
}

/* O código na tabela de leitura, acima da descrição: é como ele aparece na
   planilha da empresa, e é por ele que comprador e fornecedor conferem a
   linha ao telefone. */
.cel-codigo {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-text);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* A tabela do cadastro. */
.col-cad-desc-item {
  width: 42%;
}

/* Quatro pontos a mais do que a descrição perdeu: a unidade deixou de ser uma
   caixa com "un" escrito e virou uma lista, e lista fechada mostra o rótulo
   inteiro ("m² (metro quadrado)"). */
.col-cad-unidade {
  width: 20%;
}

.importar-itens {
  margin: 4px 0 16px;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.importar-itens summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
}

.importar-itens textarea {
  margin-top: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

.importar-itens .form-actions {
  margin-top: 8px;
}

.campo-busca {
  margin-bottom: 10px;
  max-width: 420px;
}

@media (max-width: 640px) {
  .item-campos.com-codigo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Sete públicos na Comunicação (etapa 68): em duas colunas a lista cabe na
   tela sem rolar. No celular volta a ser uma coluna, como todo grupo. */
.grupo-intencao.em-colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 860px) {
  .grupo-intencao.em-colunas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============ Divulgação (etapa 74) ============ */

/* O selo do item de menu: uma palavra ao lado do nome, no lugar em que o
   contador ficaria. É o destaque discreto da aba nova. Some quando a aba
   está ativa, porque aí o fundo azul já a destaca. */
.nav-selo {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: var(--nav-ink-forte);
}

.nav-item.active .nav-selo {
  background: rgba(0, 0, 0, 0.32);
  color: #ffffff;
}

.vitrine-divulgacao .vitrine-texto strong {
  color: var(--ink);
}

/* O pedido à esquerda, na largura de formulário; os pedidos já feitos à
   direita, com o resto da tela. Abaixo de 1100px o par volta a ser coluna:
   dois cartões de 400px lado a lado não deixam o texto da apresentação
   respirar. */
@media (min-width: 1101px) {
  .dv-colunas {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }

  .dv-colunas > .form-card {
    max-width: none;
    margin-bottom: 0;
  }
}

/* A linha do alcance, logo abaixo do seletor de categoria: é o número que
   a pessoa precisa ler antes do botão, e por isso tem corpo de frase e a cor
   de destaque. */
.dv-alcance {
  margin: 4px 0 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-text);
  min-height: 1.4em;
}

.dv-pedido {
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 12px;
}

.dv-pedido-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dv-pedido-categoria {
  display: block;
  font-size: 13.5px;
  color: var(--ink);
}

.dv-pedido-assunto {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.dv-pedido-numeros {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.dv-pedido-frase {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 64ch;
}

.dv-pedido-nota {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.dv-ajuste {
  margin-top: 12px;
}

@media (max-width: 900px) {
  .dv-pedido-topo {
    flex-direction: column;
  }
}

/* ---- A fila da Divulgação no Painel do dono (etapa 75) ---- */

/* A configuração do módulo numa linha: chave, preço, descanso e o botão.
   É formulário de três campos, e três campos empilhados ocupariam a altura
   de uma tabela inteira por nada. */
.dono-dv-config {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 18px;
}

.dono-dv-config .cfg-item-marca {
  margin: 0 0 6px;
}

.dono-dv-config label.dono-dv-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.dono-dv-config label.dono-dv-campo input {
  width: 120px;
  margin: 0;
}

.dono-dv-config .form-actions {
  margin: 0 0 2px;
}

/* O texto do pedido abre embaixo da linha, e não numa caixa: o dono lê o
   e-mail inteiro como o comprador vai ler. */
.dono-dv-texto {
  margin: 0;
}

.dono-dv-texto summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--accent-text);
}

.dono-dv-texto-corpo {
  white-space: pre-wrap;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 8px 0 0;
  max-width: 64ch;
}

.dono-dv-nota {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

/* O relatório da apresentação enviada (etapa 76): os nomes das empresas,
   um selo por empresa, e a linha de quem adicionou. */
.dv-pedido-empresas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.dv-pedido-empresas li {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--bg);
  border-radius: 999px;
  padding: 4px 10px;
}

.dv-pedido-conversao {
  margin: 10px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent-text);
}

/* ---- Auditoria de qualidade (4 set 2026) ---- */

/* A opção de público marcada, na Comunicação do dono, pinta o fundo com o
   lavado da marca, e o texto de apoio ("6 usuários") continuava na cor mais
   apagada: 4,45:1, um fio abaixo do mínimo da WCAG. Em cima do lavado ele
   sobe um tom. */
.opcao-intencao.marcada .cel-apoio {
  color: var(--muted);
}

/* A fila da Divulgação tem sete colunas, e a tabela de largura fixa dava a
   cada uma um sétimo: em 1280 o selo "Aguardando Pix" passava por cima do
   botão "Marcar como paga", e o botão dobrava em duas linhas. As duas
   colunas que carregam rótulo (situação e ações) ganham o que as de dado
   podem ceder: nome, contato e categoria quebram linha sem perder nada. */
.dono-dv-tabela th:nth-child(1) { width: 15%; }
.dono-dv-tabela th:nth-child(2) { width: 15%; }
.dono-dv-tabela th:nth-child(3) { width: 10%; }
.dono-dv-tabela th:nth-child(4) { width: 13%; }
.dono-dv-tabela th:nth-child(5) { width: 10%; }
.dono-dv-tabela th:nth-child(6) { width: 16%; }
.dono-dv-tabela th:nth-child(7) { width: 21%; }

/* O cartão de chaves tinha 420px como todo formulário, e um rótulo de
   catálogo ("Prazo para responder, prioridade urgente (dias)") dobrava em
   duas linhas ao lado do campo de número. A largura é a do formulário largo,
   que já existe: cabe o rótulo mais comprido do catálogo com o campo ao lado. */
#painel-controle {
  max-width: 640px;
}

/* ---- O card Módulos, em Configurações do dono (etapa 77) ---- */

.modulo-bloco {
  border-top: 1px solid var(--card-line);
  padding: 16px 0 4px;
}

.modulo-bloco:first-of-type {
  border-top: none;
  padding-top: 4px;
}

/* O selo do modo ("Para todos os fornecedores") não cabe ao lado do nome numa
   tela de 360px com a fonte do Linux, que é mais larga: desce para a linha
   de baixo em vez de sair do cartão. */
.modulo-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.modulo-cabeca strong {
  font-size: 14px;
  color: var(--ink);
}

.modulo-modos {
  margin-top: 10px;
}

.modulo-escolhidos {
  margin: 8px 0 0 30px;
}

.modulo-liberar {
  display: flex;
  gap: 8px;
  align-items: center;
}

.modulo-liberar select {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.modulo-escolhidos .chips {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .modulo-escolhidos {
    margin-left: 0;
  }
}

/* A descrição do módulo é parágrafo, não nota de campo: a nota de campo
   nasce colada no campo de cima, e aqui não há campo em cima dela. */
.modulo-descricao {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 64ch;
}


/* ==========================================================================
   A ficha do cliente (js/ui-ficha-cliente.js, etapa 78)

   Comprador e fornecedor, a mesma moldura: o sumário do painel do dono no
   alto, uma seção por pergunta, e dentro delas os cartões que já existem.
   ========================================================================== */

/* A linha que abre a ficha. O cursor diz que é clicável, e o foco pelo
   teclado desenha o mesmo contorno dos botões. */
.tabela-requisicoes tbody tr.linha-abre {
  cursor: pointer;
}

.tabela-requisicoes tbody tr.linha-abre:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.tabela-requisicoes tbody tr.linha-abre:focus-visible td {
  background: var(--accent-wash);
}

.ficha-sumario {
  margin-bottom: 18px;
}

/* Um cartão que ocupa a largura da seção, mesmo quando guarda um formulário:
   a seção Cadastro tem dois lado a lado, cada um com o limite de sempre. */
.ficha-secao > .form-card {
  max-width: none;
}

.ficha-secao .form-card form {
  max-width: 420px;
}

.ficha-secao .card-risco {
  max-width: 560px;
}

/* A linha do tempo, sem o <details>: aqui ela é a seção inteira. */
.ficha-linha-do-tempo .historico-lista {
  padding: 4px 0 0;
  margin: 0;
}

/* O cadastro do fornecedor, em leitura: rótulo e valor, um por linha. */
.ficha-dados {
  margin: 0;
  display: grid;
  gap: 10px;
}

.ficha-dados > div {
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 12px;
  font-size: 13px;
}

.ficha-dados dt {
  color: var(--muted);
  font-weight: 500;
}

.ficha-dados dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .ficha-dados > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* A situação do plano ao lado das ações, e um título que abre o assunto
   seguinte dentro do mesmo cartão. */
.ficha-plano {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ficha-plano-situacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.form-card h2.titulo-afastado {
  margin-top: 22px;
}

.ficha-aviso {
  border-color: var(--warn);
}

/* "23/08/2026 (há 12 dias)" pode dobrar entre a data e o "há quanto tempo",
   nunca dentro de um dos dois. A célula inteira em nowrap invadia o botão
   "Reenviar convite" em 1280px, que é onde seis colunas disputam a linha. */
.col-usr-acesso .acesso-relativo {
  white-space: nowrap;
}

/* ===========================================================================
   Confiabilidade do fornecedor (etapa 83)

   A nota aparece em quatro formatos, do menor para o maior: a linha compacta
   (número mais cinco tracinhos) na lista, na hora de convidar e na comparação;
   o anel com a nota geral; os seis cartões de eixo; e a abertura de cada eixo
   para o Plano Pro e para o dono. Todos pintam com os tons de apoio de
   css/base.css, um por eixo, e nunca com cor escrita à mão.
   =========================================================================== */

/* ---- A linha compacta ---- */

.nota-conf {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  font-size: 12.5px;
  color: var(--ink);
}

.nota-conf-numero {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
}

.nota-tracos {
  display: inline-flex;
  gap: 3px;
}

.nota-tracos i {
  display: block;
  width: 13px;
  height: 5px;
  border-radius: 2px;
  background: var(--card-line);
}

.nota-tracos i.on {
  background: var(--accent);
}

.nota-conf-vazia {
  color: var(--faint);
  font-size: 12px;
  white-space: normal;
}

.nota-conf-previa {
  color: var(--tom-violeta);
}

/* Na linha de apoio da lista de convidados e da comparação, a nota vem antes
   do e-mail ou da data, com um respiro. */
.item-forn-apoio .nota-conf,
.cel-apoio .nota-conf {
  margin-right: 4px;
}

/* Na comparação de propostas a nota ocupa a própria linha, acima da data ou
   do motivo da recusa: emendada a eles virava uma frase que ninguém escreveu. */
.nota-linha {
  display: block;
  margin-bottom: 2px;
}

/* O nome que abre a ficha: cara de texto, peso do nome, cor de link. */
.nome-forn-ficha {
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
  white-space: normal;
}

.selo-inovacao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--tom-ambar);
  background: var(--tom-ambar-wash);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.selo-inovacao svg {
  width: 12px;
  height: 12px;
}

/* ---- O anel ---- */

.anel-conf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 20px;
  margin-bottom: 12px;
  position: relative;
}

.anel-conf-svg {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.anel-conf-trilho {
  fill: none;
  stroke: var(--card-line);
  stroke-width: 3.2;
}

.anel-conf-arco {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.anel-conf-numero {
  position: absolute;
  left: 20px;
  width: 72px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.anel-conf-vazio .anel-conf-numero {
  color: var(--faint);
}

.anel-conf-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.anel-conf-texto strong {
  font-size: 14px;
  font-weight: 600;
}

.anel-conf-texto span {
  font-size: 12px;
  color: var(--faint);
  line-height: 1.4;
}

.anel-conf-acoes {
  display: flex;
  gap: 6px;
}

/* ---- Os seis eixos ---- */

/* Quantas colunas cabem é a LARGURA que decide, não a tela: a mesma grade
   mora na ficha inteira e dentro de um cartão do painel de vendas, e uma
   regra por largura de janela errava num dos dois. Cada cartão pede 240px;
   o que sobrar vira coluna. */
.eixos-conf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.eixo-conf {
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.eixo-conf-cab {
  display: flex;
  align-items: center;
  gap: 12px;
}

.eixo-conf-cab .stat-texto {
  flex: 1;
}

/* O número e o "/100" são dois elementos lado a lado, e não um número com um
   <small> dentro: o corpo menor dentro do maior esticava a linha e o detector
   de quebras lia duas linhas onde há uma. */
.eixo-conf-valor {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.eixo-conf .stat-value {
  font-size: 24px;
}

.eixo-conf-base {
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
}

/* "Sem dado ainda" é frase, e frase se lê em corpo de frase, em cinza. */
.eixo-conf-vazio .stat-value {
  color: var(--faint);
}

/* O rótulo é de uma linha, como todo rótulo de indicador; o `title` guarda o
   nome inteiro para a coluna estreita. */
.eixo-conf .stat-label {
  margin-top: 0;
  font-size: 13px;
  color: var(--ink);
}

.barra-conf {
  height: 6px;
  border-radius: 3px;
  background: var(--line-soft);
  overflow: hidden;
}

.barra-conf i {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.barra-conf-azul { background: var(--tom-azul); }
.barra-conf-verde { background: var(--tom-verde); }
.barra-conf-ambar { background: var(--tom-ambar); }
.barra-conf-violeta { background: var(--tom-violeta); }
.barra-conf-navy { background: var(--tom-navy); }
.barra-conf-rosa { background: var(--tom-rosa); }

/* De onde vem o dado: a plataforma mede (cinza) ou o comprador responde
   (violeta). É a cor que diz o que é fato do banco e o que é opinião. */
.fonte-conf {
  font-size: 11px;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fonte-conf b {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}

.fonte-conf b.comp {
  background: var(--tom-violeta-wash);
  color: var(--tom-violeta);
}

.rodape-conf {
  margin-top: 14px;
}

/* ---- A ficha do comprador ---- */

.ficha-conf-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .ficha-conf-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- As perguntas ---- */

.form-avaliacao {
  margin-top: 12px;
}

.pergunta-conf {
  border: none;
  padding: 0;
  margin: 0 0 14px;
  min-width: 0;
}

.pergunta-conf legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
  padding: 0;
}

.degraus-conf {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.degrau-conf {
  position: relative;
  margin: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.degrau-conf input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.degrau-conf span {
  display: inline-block;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
}

.degrau-conf input:checked + span {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-text);
}

.degrau-conf input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.degrau-conf-nulo span {
  color: var(--faint);
}

/* ---- A fila de avaliação ---- */

/* No painel, os dois blocos da Confiabilidade ocupam a largura da tela, como
   os indicadores e os gráficos em volta deles. Com a largura de formulário
   (420 e 640) eles eram o único bloco do painel que não encostava na borda
   direita, e o vazio ao lado parecia um cartão que não carregou. */
.fila-conf,
.minha-conf {
  max-width: none;
}

.fila-conf .nota-antes,
.minha-conf .nota-antes {
  max-width: 72ch;
}

.fila-conf-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fila-conf-item {
  border-top: 1px solid var(--line-soft);
  padding: 10px 0;
}

.fila-conf-item:first-child {
  border-top: none;
  padding-top: 0;
}

.fila-conf-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.fila-conf-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fila-conf-texto strong {
  font-size: 13px;
}

.fila-conf-texto span {
  font-size: 12px;
  color: var(--faint);
}

/* ---- A abertura ---- */

.abertura-conf .ficha-dados > div {
  grid-template-columns: minmax(120px, 1fr) auto;
}

.abertura-conf .destaque-numero small {
  font-size: 14px;
  font-weight: 500;
  color: var(--faint);
}

/* O eixo de inovação sozinho dentro do cartão de gráfico: sem sombra dupla. */
.abertura-conf .eixo-conf {
  box-shadow: none;
  border: none;
  padding: 4px 0 0;
}

.minha-conf .titulo-afastado {
  margin-top: 22px;
}

/* ---- Os parâmetros, dentro do bloco do módulo ---- */

.modulo-parametros {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
}

.modulo-parametros .form-actions {
  margin-top: 8px;
}

/* Enquanto nenhum eixo tem número: uma frase no lugar dos seis cartões, com
   o que falta para o número existir. */
.sem-historico-conf {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
}

.form-card .sem-historico-conf {
  box-shadow: none;
  background: var(--surface-2);
}

.sem-historico-conf-texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.sem-historico-conf-texto strong {
  font-size: 14px;
  font-weight: 600;
}

.sem-historico-conf-texto span {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* "Sem dado ainda" em corpo de frase: a regra do número (24px) ganhava da
   regra da frase por ser mais específica. */
.eixo-conf .stat-value-texto {
  font-size: 15px;
}

/* As médias por eixo no painel do dono: os mesmos cartões, sem o selo de
   fonte, que ali não faz sentido. */
.eixos-conf-medias .eixo-conf {
  gap: 8px;
}

/* ============ Homologação de fornecedor (etapa 85) ============ */

/* O selo do lado ("quem compra") ao lado do selo do modo, no cartão Módulos
   do dono. */
.modulo-selos {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* A lista de pessoas, documentos e decisões: uma linha por item, com o
   quadradinho de iniciais ou a marca do documento à esquerda e as ações à
   direita. É a mesma forma nas quatro telas, de propósito. */
.hm-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hm-item,
.hm-doc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.hm-item-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.hm-item-texto strong {
  font-size: 13px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.hm-item-texto span {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.hm-sigla {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-wash);
}

/* O parecer, abaixo do nome, com a barra à esquerda que o separa da linha de
   apoio. */
.hm-parecer {
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1.45;
}

.hm-decisao-recusa .hm-parecer {
  border-left-color: var(--danger);
}

/* A marca do documento: vazia enquanto não há arquivo, cheia com o visto
   depois. */
.hm-doc-marca {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--line);
  flex-shrink: 0;
  position: relative;
}

.hm-doc-ok .hm-doc-marca {
  background: var(--ok);
  border-color: var(--ok);
}

.hm-doc-ok .hm-doc-marca::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.hm-doc .acoes-linha {
  margin-left: auto;
  justify-content: flex-end;
}

.hm-arquivo {
  max-width: 220px;
  font-size: 12px;
}

/* A linha de acrescentar, embaixo de cada lista: os campos dividem a largura
   e o botão fica no fim. */
.hm-adicionar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.hm-adicionar input[type="text"],
.hm-adicionar select {
  flex: 1 1 180px;
  min-width: 0;
  margin: 0;
}

.hm-adicionar input[type="file"] {
  flex: 1 1 200px;
  min-width: 0;
}

.hm-adicionar .linha-marca {
  margin: 0;
}

.hm-subtitulo {
  margin: 18px 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.hm-paragrafo {
  margin: 0;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* As duas grades: a das Configurações (duas colunas iguais) e a da
   solicitação (a ficha larga, as decisões estreitas). Em tela estreita,
   uma coluna só. */
.hm-grade-cfg,
.hm-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  align-items: start;
}

.hm-grade {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.hm-grade-cfg .form-card,
.hm-grade .form-card {
  max-width: none;
}

@media (max-width: 1100px) {
  .hm-grade-cfg,
  .hm-grade {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hm-status-linha {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

/* A ficha em edição: duas colunas de campos; endereço e dados bancários,
   que são compridos, ocupam a linha inteira. */
.hm-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.hm-campos textarea {
  grid-column: 1 / -1;
}

.hm-campos label:has(+ textarea) {
  grid-column: 1 / -1;
}

@media (max-width: 720px) {
  .hm-campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hm-opcoes-decisao {
  margin-bottom: 12px;
}

/* A linha do tempo da solicitação: quando à esquerda, o quê à direita. */
.hm-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.hm-tempo li {
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(0, 1fr);
  gap: 10px;
  font-size: 12.5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.hm-tempo li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hm-tempo-quando {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hm-tempo-oque {
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* A tabela de solicitações. As larguras somam 100%, senão a coluna nova
   nasce com largura zero (a lição da Confiabilidade). */
.tabela-homologacoes .col-hm-codigo {
  width: 12%;
}

.tabela-homologacoes .col-hm-fornecedor {
  width: 25%;
}

.tabela-homologacoes .col-hm-quem {
  width: 15%;
}

.tabela-homologacoes .col-hm-andamento {
  width: 19%;
}

.tabela-homologacoes .col-hm-status {
  width: 16%;
}

.tabela-homologacoes .col-hm-acoes {
  width: 13%;
}

/* A linha que espera a decisão de quem está lendo. O fundo é o cinza do
   sistema, e não o azul-lavado: sobre o azul, o CNPJ em --faint dava 4,45:1
   e reprovava por um fio. Sobre --bg, os quatro tons de texto passam. */
.hm-linha-minha td {
  background: var(--bg);
}

.hm-tabela-cfg td {
  vertical-align: middle;
}

.hm-tabela-cfg .cfg-campo-escolha {
  min-width: 120px;
}

/* ============ Homologação: o fluxo em etapas (etapa 89) ============ */

/* O recado dentro de um cartão: o fluxo incompleto, o link vencido, a
   correção pedida. Âmbar, como os outros avisos que pedem uma ação. */
.aviso-inline {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.aviso-inline.aviso-atencao {
  background: var(--warn-wash);
  color: var(--warn);
  border-left: 3px solid var(--warn);
}

.form-actions.form-actions-esquerda {
  justify-content: flex-start;
}

.hm-texto-alerta {
  color: var(--warn);
  font-weight: 500;
}

/* As etapas, numeradas: o número à esquerda, o que a etapa é no meio, as
   ações à direita. Em tela estreita as ações descem para baixo do texto. */
.hm-etapas,
.hm-passos,
.hm-fluxo-resumo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hm-etapa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  flex-wrap: wrap;
}

.hm-etapa-numero {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--accent-wash);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.hm-etapa-corpo {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hm-etapa-titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hm-etapa-titulo strong {
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.hm-etapa-linha {
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.hm-etapa-acoes {
  margin-left: auto;
  flex-wrap: wrap;
}

.hm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.hm-chip {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--card-line);
  background: var(--surface);
  color: var(--ink-2);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.hm-chip-alerta {
  border-color: var(--warn);
  color: var(--warn);
  background: var(--warn-wash);
}

/* O formulário de etapa, aberto embaixo da lista. */
.hm-form-etapa {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.hm-form-etapa .hm-campos > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.hm-rotulo-grupo {
  margin: 12px 0 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.hm-marcas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 14px;
  margin-bottom: 8px;
}

.hm-marcas .linha-marca {
  margin: 0;
  min-width: 0;
}

.hm-marcas .linha-marca span {
  overflow-wrap: anywhere;
}

.hm-marcas small {
  color: var(--muted);
}

/* O resumo do caminho, na tela do pedido. */
.hm-fluxo-resumo li {
  padding: 8px 10px;
  border-left: 3px solid var(--accent-wash);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.hm-fluxo-inicio {
  margin-bottom: 8px;
}

.hm-fluxo-inicio li {
  border-left-color: var(--line);
}

/* As etapas de uma solicitação: cada uma com as pessoas embaixo. */
.hm-passo {
  padding: 10px 12px;
  border: 1px solid var(--card-line);
  border-radius: var(--radius-sm);
}

.hm-passo-em_andamento {
  border-color: var(--accent);
}

.hm-passo-pulada,
.hm-passo-interrompida {
  opacity: 0.75;
}

.hm-passo-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.hm-passo-cabeca .badge {
  margin-left: auto;
  flex-shrink: 0;
}

.hm-passo .hm-decisoes .hm-item {
  flex-wrap: wrap;
}

.hm-decisor-retirado .hm-item-texto strong {
  text-decoration: line-through;
  color: var(--muted);
}

.hm-adicionar-decisor {
  margin-top: 8px;
}

.hm-arquivo-nome {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

/* ============ A página do link, sem login ============ */

.externa-wrap {
  min-height: 100vh;
  background: var(--bg);
  padding-inline: 16px;
}

.externa-topo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.marca-externa .marca-simbolo {
  width: 26px;
}

.marca-externa .marca-nome {
  font-size: 17px;
}

.externa-topo-nota {
  font-size: 12.5px;
  color: var(--muted);
}

.externa-miolo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

.externa-miolo:focus {
  outline: none;
}

.externa-cabeca {
  margin: 8px 0 18px;
}

.externa-cabeca h1,
.externa-recado h1 {
  margin: 4px 0 8px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.externa-sobre {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.externa-recado {
  max-width: 560px;
  margin: 40px auto;
}

.externa-ok h1::before {
  content: "✓ ";
  color: var(--ok);
}

.externa-rodape {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 0 28px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 600px) {
  .externa-cabeca h1,
  .externa-recado h1 {
    font-size: 19px;
  }
}