/*
 * Sistema de Pedidos de Venda — Plus IoT
 *
 * Os tokens abaixo são os mesmos do arquivo de design (Paper, página "Telas"),
 * extraídos das telas de referência do sistema irmão. Se um valor mudar lá, muda
 * aqui — e só aqui: nenhum componente escreve hex solto.
 */

:root {
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  --color-surface: #ffffff;
  --color-surface-subtle: #f6f8f9;
  /* Um degrau abaixo do `subtle`: a coluna do quadro precisa afundar em relação à
     página, senão fica tudo do mesmo branco e o olho não acha a borda. */
  --color-surface-sunken: #edf1f3;
  --color-border: #eaecf0;
  --color-text: #0f1a20;
  --color-text-body: #33454d;
  --color-text-muted: #5b6b72;

  --color-navy: #052241;
  --color-navy-line: #123b5c;
  --color-navy-text: #a8c4d4;

  --color-primary: #0e8194;
  --color-primary-escuro: #0b6b7b;
  --color-interactive: #009ab3;
  /* O mesmo teal, escuro o bastante para texto: `#009ab3` sobre o `soft` da
     navegacao dava 2,99:1, no elemento mais repetido da interface. */
  --color-interactive-texto: #00707f;
  --color-interactive-soft: #009ab31a;
  --color-interactive-ring: #009ab324;
  --color-accent: #2bd6ad;

  /* ⚠️ 3,82:1 sobre o proprio fundo `soft` — reprovado em AA (4,5:1), e era a
     cor do PRECO EM DISPUTA na tela de aprovacao: o numero sobre o qual a
     decisao e tomada era o texto menos legivel da tela. `#8a5200` da 5,6:1.
     O tom antigo fica para preenchimento e icone grande, onde 3:1 basta. */
  --color-warning: #8a5200;
  --color-warning-forte: #b26b00;
  --color-warning-soft: #fbf3e6;
  --color-warning-borda: #f0dfc2;
  --color-danger: #b3261e;
  --color-danger-soft: #fdf3f2;
  --color-danger-borda: #ebc9c6;
  --color-success: #1c6b3c;

  /* Desligado — legivel, e distinguivel do ativo sem depender de opacidade. */
  --color-desligado: #e3e8ea;
  --color-desligado-borda: #d1d8db;
  --color-desligado-texto: #67757c;
  --color-success-soft: #f1f8f3;
  --color-success-borda: #cfe5d8;

  --text-label: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-display: 38px;

  --tracking-tight: -0.02em;
  --tracking-caps: 0.08em;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 999px;

  --sidebar: 240px;
  --topo: 85px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 22px;
  color: var(--color-text-body);
  background: var(--color-surface-subtle);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-text);
  letter-spacing: var(--tracking-tight);
}
h1 {
  font-size: var(--text-xl);
  line-height: 28px;
  font-weight: 600;
}
h2 {
  font-size: var(--text-lg);
  line-height: 24px;
  font-weight: 600;
}
h3 {
  font-size: var(--text-md);
  line-height: 22px;
  font-weight: 600;
}
p {
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Estrutura
   -------------------------------------------------------------------------- */

.app {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}

.sidebar {
  width: var(--sidebar);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__topo {
  height: var(--topo);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

/* A marca era o texto "Plus IoT" imitando o logo com duas cores. Agora e o
   arquivo de verdade, o mesmo do sistema de cancelamento em producao. O tamanho
   fica aqui porque o SVG entrou sem `width`/`height`. */
.marca {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.marca svg {
  width: auto;
  height: 34px;
}
/* Na tela de entrar ele e o unico elemento de marca da pagina, e pode respirar. */
.entrar__marca .marca svg {
  height: 42px;
}

.sidebar__nav {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 16px;
  overflow-y: auto;
}

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

.menu__categoria {
  padding: 0 16px 8px;
  font-size: var(--text-label);
  line-height: 14px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.menu__categoria + .menu__categoria,
.menu__item + .menu__categoria {
  padding-top: 20px;
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  line-height: 150%;
  color: var(--color-text-body);
  text-decoration: none;
}
.menu__item:hover {
  background: var(--color-surface-subtle);
  text-decoration: none;
}
.menu__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--color-text-muted);
}
/* O rótulo empurra o contador para a direita. ⛔ `.menu__item span` pega TODO
   span do item — e o contador também é um — então ele saía esticado até a borda,
   virando pílula. A exclusão é o conserto: só o rótulo cresce. */
.menu__item span:not(.contador) {
  flex-grow: 1;
}
/* O "onde estou" e o elemento mais repetido da interface: aparece em 100% das
   telas. `--color-interactive` sobre o `soft` dava 2,99:1 — reprovado. O tom
   escuro da 4,9:1, e a barra da esquerda deixa de depender so da cor. */
.menu__item--ativo {
  background: var(--color-interactive-soft);
  color: var(--color-interactive-texto);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.menu__item--ativo svg {
  stroke: var(--color-interactive-texto);
}

/* Um digito tem de sair REDONDO, nao em comprimido.
   O que alargava era `padding: 0 7px` sem largura minima: o "2" mede uns 7px, e
   com 14px de folga a caixa saia com 21x20 — quase quadrada, e o raio total
   transformava esse "quase" numa pilula. Agora `min-width` iguala a altura, e a
   folga so entra quando o numero e maior que a largura minima. Tres digitos
   viram pilula de novo, e ai esta certo. */
.contador {
  flex: none;
  height: 20px;
  min-width: 20px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.contador--alerta {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

.usuario {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 10px;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 1px var(--color-border);
  background: var(--color-surface);
}
.usuario__dados {
  flex-grow: 1;
  min-width: 0;
}
.usuario__nome {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.usuario__papel {
  font-size: var(--text-sm);
  line-height: 16px;
  color: var(--color-text-muted);
}
.usuario a {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.usuario svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-text-muted);
}

.conteudo {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topo {
  min-height: var(--topo);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 40px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.topo__titulo h1 {
  margin-bottom: 2px;
}
.topo__apoio {
  font-size: var(--text-sm);
  line-height: 16px;
  color: var(--color-text-muted);
}
.topo__acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.area {
  flex-grow: 1;
  padding: 28px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.area--colunas {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}
.coluna {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lateral {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   Blocos
   -------------------------------------------------------------------------- */

.cartao {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cartao--liso {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.rotulo {
  font-size: var(--text-label);
  line-height: 14px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}

.apoio {
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}

.nota {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-navy-text);
  font-size: var(--text-base);
  line-height: 22px;
}
.nota strong {
  display: block;
  color: var(--color-surface);
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: 4px;
}
.nota svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke: var(--color-accent);
  margin-top: 1px;
}

.aviso {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 22px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  color: var(--color-text-body);
}
.aviso--erro {
  background: var(--color-danger-soft);
  border-color: var(--color-danger-borda);
  color: var(--color-danger);
}
.aviso--alerta {
  background: var(--color-warning-soft);
  border-color: var(--color-warning-borda);
  color: var(--color-warning);
}
.aviso--ok {
  background: var(--color-success-soft);
  border-color: var(--color-success-borda);
  color: var(--color-success);
}
.aviso ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.aviso li + li {
  margin-top: 4px;
}

.selo {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.selo::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}
.selo--sem-ponto::before {
  display: none;
}
.selo--alerta {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.selo--erro {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.selo--ok {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.selo--info {
  background: var(--color-interactive-soft);
  color: var(--color-interactive);
}

.regra {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-warning);
}

/* --------------------------------------------------------------------------
   Formulário
   -------------------------------------------------------------------------- */

form p {
  margin: 0 0 14px;
}
label {
  display: block;
  font-size: var(--text-sm);
  line-height: 16px;
  font-weight: 500;
  color: var(--color-text-body);
  margin-bottom: 7px;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="file"],
select,
textarea {
  width: 100%;
  max-width: 520px;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
}
textarea {
  min-height: 92px;
  line-height: 22px;
  resize: vertical;
}
/* ⛔ Havia CINCO regras `outline: none` no sistema contra UMA que devolvia o
   anel. Quem navega por teclado perdia o rastro do foco em qualquer formulario,
   e a borda colorida sozinha falha para daltonicos.

   Uma regra so, valendo para tudo que recebe foco. O `:focus-visible` nao
   aparece no clique de mouse — o anel so surge quando alguem esta navegando
   pelo teclado, que e quando ele serve. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-interactive);
  box-shadow: 0 0 0 3px var(--color-interactive-ring);
}
.helptext,
.ajuda {
  display: block;
  margin-top: 5px;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}
ul.errorlist {
  margin: 5px 0 0;
  padding-left: 18px;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-danger);
}

.botao {
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-body);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.botao:hover {
  background: var(--color-surface-subtle);
  text-decoration: none;
}
.botao svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.botao--principal {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-surface);
  font-weight: 600;
}
.botao--principal:hover {
  background: var(--color-primary-escuro);
  border-color: var(--color-primary-escuro);
}
.botao--principal svg {
  stroke: var(--color-surface);
}
.botao--ok {
  background: var(--color-success);
  border-color: var(--color-success);
  color: var(--color-surface);
  font-weight: 600;
}
/* ⚠️ Sem esta regra o botão SOME ao passar o mouse.
   `.botao:hover` tem especificidade (0,2,0) e `.botao--ok`, (0,1,0) — o hover
   genérico ganha, troca o verde por quase-branco, e o texto continua branco.
   Contraste medido nesse estado: 1.07. Literalmente invisível.
   Toda variante que pinta o fundo precisa do próprio hover. */
.botao--ok:hover {
  background: color-mix(in srgb, var(--color-success) 82%, #000);
  border-color: color-mix(in srgb, var(--color-success) 82%, #000);
  color: var(--color-surface);
}
.botao--ok svg {
  stroke: var(--color-surface);
}

.botao--perigo {
  border-color: var(--color-danger-borda);
  color: var(--color-danger);
  font-weight: 600;
}
/* Aqui o fundo é claro nos dois estados, então o texto vermelho continua legível —
   mas o hover genérico daria o mesmo cinza de um botão neutro, e recusar não é
   uma ação neutra. */
.botao--perigo:hover {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* Quem chega pelo teclado precisa ver onde está. O anel fica FORA da borda para
   não ser engolido pelo fundo colorido do próprio botão. */
.botao:focus-visible {
  outline: 2px solid var(--color-interactive);
  outline-offset: 2px;
}
/* ⛔ `opacity` NAO serve para estado desabilitado: ela apaga o texto junto com
   o fundo. O botao principal desabilitado media 1,87:1 — ilegivel — e o campo
   desabilitado ficava pixel a pixel igual ao ativo, entao a pessoa clicava,
   digitava e nada acontecia, sem entender por que.

   Tokens solidos: da para ler que esta desligado, e da para ler o que diz. */
.botao:disabled {
  background: var(--color-desligado);
  border-color: var(--color-desligado-borda);
  color: var(--color-desligado-texto);
  box-shadow: none;
  cursor: not-allowed;
}
.botao--principal:disabled,
.botao--ok:disabled,
.botao--perigo:disabled {
  background: var(--color-desligado);
  border-color: var(--color-desligado-borda);
  color: var(--color-desligado-texto);
}

input:disabled,
select:disabled,
textarea:disabled,
input[readonly],
textarea[readonly] {
  background: var(--color-desligado);
  border-color: var(--color-desligado-borda);
  color: var(--color-desligado-texto);
  cursor: not-allowed;
}
.botao--alto {
  height: 48px;
  width: 100%;
  max-width: 520px;
  font-size: var(--text-md);
}

/* --------------------------------------------------------------------------
   Passos do pedido
   -------------------------------------------------------------------------- */

.passos {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0;
  padding: 14px 40px;
  list-style: none;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
.passos li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.passos a,
.passos span.passo {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-decoration: none;
}
.passos a:hover {
  background: var(--color-surface-subtle);
  text-decoration: none;
}
.passos .passo--atual {
  background: var(--color-interactive-soft);
  color: var(--color-interactive);
  font-weight: 600;
}
.passos b {
  font-weight: 600;
}
.passos li::after {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--color-border);
}
.passos li:last-child::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Tabela
   -------------------------------------------------------------------------- */

.tabela {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-base);
}
th,
td {
  padding: 13px 20px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
th {
  background: var(--color-surface-subtle);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}
tr:last-child td {
  border-bottom: none;
}
td.num,
th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabela--chave th {
  width: 220px;
  background: transparent;
  font-size: var(--text-base);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 400;
  color: var(--color-text-muted);
}

.vazio {
  padding: 28px 20px;
  text-align: center;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Painel
   -------------------------------------------------------------------------- */

.grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.metrica {
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}
.metrica:hover {
  text-decoration: none;
  border-color: #d5dae0;
}
.metrica__numero {
  font-size: 32px;
  line-height: 36px;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-text);
}
.metrica__rotulo {
  font-size: var(--text-sm);
  line-height: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.metrica--alerta {
  background: var(--color-warning-soft);
  border-color: var(--color-warning-borda);
}
.metrica--alerta .metrica__numero,
.metrica--alerta .metrica__rotulo {
  color: var(--color-warning);
}
.metrica--ok {
  background: var(--color-success-soft);
  border-color: var(--color-success-borda);
}
.metrica--ok .metrica__numero,
.metrica--ok .metrica__rotulo {
  color: var(--color-success);
}
.metrica--erro {
  background: var(--color-danger-soft);
  border-color: var(--color-danger-borda);
}
.metrica--erro .metrica__numero,
.metrica--erro .metrica__rotulo {
  color: var(--color-danger);
}

.secao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.secao__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* --------------------------------------------------------------------------
   Escolha em lista (cliente, contrato, endereço, corte...)
   -------------------------------------------------------------------------- */

.opcoes {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.opcao {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
}
.opcao__nome {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-body);
}
.opcao__nota {
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}
.opcao--ativa {
  background: var(--color-interactive-soft);
  border: 1.5px solid var(--color-interactive);
}
.opcao--ativa .opcao__nome,
.opcao--ativa .opcao__nota {
  color: var(--color-interactive);
}
.opcao--ativa .opcao__nome {
  font-weight: 600;
}
.opcao--alerta {
  background: var(--color-warning-soft);
  border: 1.5px solid var(--color-warning);
}
.opcao--alerta .opcao__nome,
.opcao--alerta .opcao__nota {
  color: var(--color-warning);
}
.opcao--desabilitada {
  background: var(--color-surface-subtle);
  border-style: dashed;
  cursor: not-allowed;
}
.opcao--desabilitada .opcao__nome {
  color: var(--color-text-muted);
}

.linha-escolha {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.linha-escolha--ativa {
  background: var(--color-interactive-soft);
  border: 1.5px solid var(--color-interactive);
}
.linha-escolha__dados {
  flex-grow: 1;
  min-width: 0;
}
.linha-escolha__titulo {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}
.linha-escolha__detalhe {
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Preço: tabela / sugerido / piso
   -------------------------------------------------------------------------- */

.precos {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex-wrap: wrap;
}
.preco {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}
.preco__etiqueta {
  font-size: var(--text-sm);
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.preco__valor {
  font-size: var(--text-lg);
  line-height: 24px;
  font-weight: 600;
  color: var(--color-text);
}
.preco--piso {
  background: var(--color-navy);
}
.preco--piso .preco__etiqueta {
  color: var(--color-accent);
  font-weight: 600;
}
.preco--piso .preco__valor {
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   Exceção
   -------------------------------------------------------------------------- */

.excecao {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-warning-borda);
}
.excecao__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.excecao__nome {
  flex-grow: 1;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}
.excecao__comparacao {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.excecao__evidencia {
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}
.excecao--decidida {
  border-color: var(--color-border);
}

.rota {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rota__uf {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}
.rota__etiqueta {
  font-size: var(--text-sm);
  line-height: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}
.rota__valor {
  font-size: var(--text-xl);
  line-height: 28px;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-text);
}
.rota__uf--alerta {
  background: var(--color-warning-soft);
}
.rota__uf--alerta .rota__etiqueta,
.rota__uf--alerta .rota__valor {
  color: var(--color-warning);
}

.dados-numericos {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dados-numericos > div {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.dados-numericos b {
  width: 74px;
  flex-shrink: 0;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-surface);
}
.dados-numericos span {
  flex-grow: 1;
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-navy-text);
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.entrar {
  display: flex;
  min-height: 100vh;
  align-items: stretch;
}
.entrar__marca {
  width: 560px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  background: var(--color-navy);
  color: var(--color-navy-text);
}
.entrar__marca .marca {
  font-size: 30px;
}
.entrar__titulo {
  max-width: 440px;
  font-size: var(--text-display);
  line-height: 46px;
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--color-surface);
  margin: 0 0 20px;
}
.entrar__sub {
  max-width: 380px;
  font-size: var(--text-md);
  line-height: 24px;
}
.entrar__nota {
  border-top: 1px solid var(--color-navy-line);
  padding-top: 14px;
}
.entrar__nota .rotulo {
  color: var(--color-accent);
  margin-bottom: 8px;
}
.entrar__nota p {
  max-width: 400px;
  font-size: var(--text-sm);
  line-height: 20px;
  margin: 0;
}
.entrar__campo {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 180px 40px 48px;
  background: var(--color-surface);
}
.entrar__form {
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.entrar__rodape {
  width: 400px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Mensagens
   -------------------------------------------------------------------------- */

.mensagens {
  margin: 0;
  padding: 20px 40px 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}
.mensagens li {
  padding: 13px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: var(--text-base);
}
.mensagens li.error {
  border-color: var(--color-danger-borda);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.mensagens li.warning {
  border-color: var(--color-warning-borda);
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.mensagens li.success {
  border-color: var(--color-success-borda);
  background: var(--color-success-soft);
  color: var(--color-success);
}

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--text-sm);
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--color-surface-subtle);
  color: var(--color-text-body);
}

.fraco {
  color: var(--color-text-muted);
}
.forte {
  color: var(--color-text);
  font-weight: 500;
}
.rodape {
  margin-top: 8px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media print {
  .sidebar,
  .topo__acoes,
  .passos {
    display: none;
  }
  body {
    background: #fff;
  }
  .area {
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Composicao - o pedido inteiro numa tela (§8.1, as seis etapas como secoes)
   -------------------------------------------------------------------------- */

/* O `hidden` do HTML precisa ganhar de `display:flex`/`grid` declarados aqui.
   Sem `!important`, o estilo do autor vence a folha do navegador e a secao
   escondida continua ocupando a tela inteira. */
[hidden] {
  display: none !important;
}

.area--compor .coluna {
  gap: 16px;
}

.bloco {
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.bloco__cabecalho {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}
.bloco__cabecalho > div:first-of-type {
  flex-grow: 1;
  min-width: 0;
}
.bloco__numero {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
}
.bloco__corpo {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Campos em grade: dois por linha, um quando o conteudo pede. */
.campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 20px;
  align-items: start;
}
.campo {
  min-width: 0;
}
.campo--largo {
  grid-column: 1 / -1;
}

/* Caixa de marcar: o rótulo é o texto ao lado, não um título acima. O `<label>`
   envolve os dois, então clicar na frase marca a caixa. */
.marca {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 500;
  color: var(--color-text);
}
.campo--marca input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-interactive);
  cursor: pointer;
}
/* A ajuda alinha com o TEXTO, não com a caixa: alinhada à caixa ela parece
   legenda do quadradinho. */
.campo--marca .ajuda {
  margin-left: 26px;
}
.campo input,
.campo select,
.campo textarea {
  max-width: none;
}
.campo__obrigatorio {
  color: var(--color-interactive);
}
.campo__erro {
  margin-top: 5px;
  font-size: var(--text-sm);
  line-height: 18px;
  color: var(--color-danger);
}
.campo--erro input,
.campo--erro select,
.campo--erro textarea {
  border-color: var(--color-danger);
}
.campo--desabilitado {
  opacity: 0.55;
}
.campo__leitura {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-weight: 600;
  color: var(--color-text);
}
.campo--acao {
  display: flex;
  align-items: flex-end;
  padding-bottom: 2px;
}

.cortes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px 20px;
}

/* A busca de cliente: por CNPJ, nao por <select> de mil linhas (§3.4). */
.busca {
  position: relative;
}
.busca input[type="search"] {
  width: 100%;
  max-width: none;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-text);
}
/* `:not(:focus-visible)`: tira o anel do clique de mouse e DEIXA o do teclado,
   que a regra global devolve. `:focus` puro matava os dois. */
.busca input[type="search"]:focus:not(:focus-visible) {
  outline: none;
  border-color: var(--color-interactive);
  box-shadow: 0 0 0 3px var(--color-interactive-ring);
}
.busca__resultados {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(5, 34, 65, 0.12);
}
.busca__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.busca__item:last-child {
  border-bottom: none;
}
.busca__item:hover {
  background: var(--color-interactive-soft);
}
.busca__nome {
  font-weight: 600;
  color: var(--color-text);
}
.busca__detalhe,
.busca__nada {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.busca__nada {
  padding: 14px 16px;
}

.cliente-cartao {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--color-interactive);
  border-radius: var(--radius-md);
  background: var(--color-interactive-soft);
}
.cliente-cartao__dados {
  flex-grow: 1;
  min-width: 0;
}
.cliente-cartao__nome {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

.subbloco {
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ligacao {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}
.ligacao:hover {
  text-decoration: underline;
}

.mais summary {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  cursor: pointer;
}
.mais[open] summary {
  margin-bottom: 12px;
}
.mais > *:not(summary) {
  margin-top: 12px;
}

.faixa {
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}
.faixa__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.enderecos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
}

.fiscal {
  padding: 18px 20px;
  border: 1px solid var(--color-warning-borda);
  border-radius: var(--radius-md);
  background: var(--color-warning-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.historico .tabela {
  margin-top: 10px;
}

/* O painel ao vivo: a etapa [6] deixou de ser a ultima tela e virou o lado. */
.rail {
  position: sticky;
  top: 20px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.rail__numero {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--color-text);
}
.rail__secao {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
/* O motivo de o envio ter falhado, por nome de campo. Antes o clique morria em
   silencio: o navegador recusa o envio e nao mostra bolha em campo escondido. */
.rail__erro-envio {
  margin-bottom: 12px;
  padding: 11px 13px;
  border: 1px solid var(--color-danger-borda);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--text-sm);
  line-height: 1.45;
  font-weight: 500;
}

.rail__acoes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.rail__acoes .botao {
  width: 100%;
}
.rail .excecao textarea {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Painel - destaque grande para o que exige acao, ficha pequena para filtro
   -------------------------------------------------------------------------- */

.destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
}

.destaque {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.destaque:hover {
  border-color: var(--color-interactive);
  text-decoration: none;
  transform: translateY(-1px);
}
/* A faixa da esquerda carrega o estado: cor e' informacao, nao enfeite. */
.destaque::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.destaque--acao::before { background: var(--color-danger); }
.destaque--espera::before { background: var(--color-warning); }
.destaque--ok::before { background: var(--color-success); }

.destaque__rotulo {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.destaque__numero {
  font-size: 34px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.destaque__numero--texto {
  font-size: 26px;
  line-height: 40px;
}
.destaque--acao .destaque__numero { color: var(--color-danger); }
.destaque--espera .destaque__numero { color: var(--color-warning); }
.destaque--ok .destaque__numero { color: var(--color-success); }
.destaque__nota {
  font-size: var(--text-sm);
  line-height: 18px;
  color: var(--color-text-muted);
}

/* -- a barra de filtro, compartilhada por painel, pedidos e contratos ------ */

.filtros {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 4px;
}
.filtros__linha {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.busca-campo {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 300px;
  min-width: 220px;
  max-width: 460px;
  margin: 0;
  padding: 0 14px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.busca-campo:focus-within {
  border-color: var(--color-interactive);
  box-shadow: 0 0 0 3px var(--color-interactive-ring);
}
.busca-campo svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.busca-campo input {
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  max-width: none;
  height: 40px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
}
.busca-campo input:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.filtros__select {
  height: 42px;
  min-height: 42px;
  max-width: 240px;
  padding: 0 12px;
}
.filtros .botao {
  height: 42px;
}

/* ---------------------------------------------------------------------------
 * O <select> vestido
 *
 * A lista aberta do <select> nativo e desenhada pelo sistema operacional:
 * nenhuma regra daqui alcanca aquela faixa azul. Por isso a lista e HTML de
 * verdade, e o <select> continua no formulario, escondido, sendo quem guarda o
 * valor e quem o navegador envia.
 *
 * ⚠️ `.escolha__nativo` NAO usa `display: none`: campo escondido assim some da
 *    validacao do formulario, e um `required` invisivel bloqueia o envio sem
 *    dizer por que. Ele fica de tamanho zero, presente.
 * --------------------------------------------------------------------------- */

.escolha {
  position: relative;
  display: inline-block;
}

.escolha__nativo {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  border: 0;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.escolha__gatilho {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 210px;
  max-width: 260px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.escolha__gatilho:hover {
  border-color: var(--color-text-muted);
}
/* ⛔ Aqui removia o anel justamente no `:focus-visible` — o estado em que ele
   existe para aparecer. A borda e a sombra ficam; o anel volta. */
.escolha__gatilho:focus-visible,
.escolha--aberta .escolha__gatilho {
  border-color: var(--color-interactive);
  box-shadow: 0 0 0 3px var(--color-interactive-ring);
}

/* Sem escolha feita, o rotulo e placeholder — e se le como tal. Escolhido, ele
   ganha peso: da para ver que ha filtro ligado sem abrir a lista. */
.escolha__valor {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.escolha--padrao .escolha__valor {
  font-weight: 400;
  color: var(--color-text-muted);
}

.escolha__seta {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}
.escolha--aberta .escolha__seta {
  transform: rotate(180deg);
}

.escolha__lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  /* A lista cresce ate caber o nome, em vez de herdar a largura do gatilho:
     "Atlantico Sul Frotas" cortado no meio nao ajuda ninguem a escolher. */
  width: max-content;
  min-width: 100%;
  max-width: 340px;
  max-height: 296px;
  overflow-y: auto;
  overscroll-behavior: contain; /* rolar a lista nao rola a pagina atras */
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgba(5, 34, 65, 0.12);
  animation: escolha-entra 0.12s ease-out;
}
.escolha--acima .escolha__lista {
  top: auto;
  bottom: calc(100% + 6px);
}

@keyframes escolha-entra {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .escolha__lista {
    animation: none;
  }
  .escolha__seta {
    transition: none;
  }
}

.escolha__opcao {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
}
.escolha__opcao > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Um realce so, para mouse e teclado. Dois — um de hover e outro de foco —
   deixam a lista com duas linhas acesas e ninguem sabe qual o Enter escolhe. */
.escolha__opcao--realce {
  background: var(--color-surface-subtle);
}
.escolha__opcao--escolhida {
  font-weight: 600;
}

.escolha__marca {
  display: inline-flex;
  width: 16px;
  height: 16px;
  color: var(--color-interactive);
  opacity: 0;
}
.escolha__opcao--escolhida .escolha__marca {
  opacity: 1;
}
.escolha__marca svg {
  width: 100%;
  height: 100%;
}

/* "e mais N: use a busca" nao e opcao: e recado. Nao acende, nao clica. */
.escolha__nota {
  padding: 8px 10px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  cursor: default;
}

.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.ficha {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-body);
  text-decoration: none;
  white-space: nowrap;
}
.ficha:hover {
  border-color: var(--color-interactive);
  text-decoration: none;
}
.ficha b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.ficha--ativa {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}
.ficha--ativa b { color: var(--color-accent); }
.ficha--zero {
  color: var(--color-text-muted);
  opacity: 0.62;
}
.ficha--zero b { color: var(--color-text-muted); }
.ficha--ativa.ficha--zero { opacity: 1; }

/* --------------------------------------------------------------------------
   Paginacao - 50 por pagina, e o total sempre a vista
   -------------------------------------------------------------------------- */

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.paginacao__conta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.paginacao__conta b {
  font-weight: 600;
  color: var(--color-text);
}
.paginacao__botoes {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pagina-botao {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-body);
  text-decoration: none;
  white-space: nowrap;
}
.pagina-botao:hover {
  border-color: var(--color-interactive);
  color: var(--color-primary);
  text-decoration: none;
}
.pagina-botao svg {
  width: 14px;
  height: 14px;
}
.pagina-botao--inerte {
  opacity: 0.4;
  pointer-events: none;
}
.pagina-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 7px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-body);
  text-decoration: none;
}
.pagina-numero:hover {
  background: var(--color-interactive-soft);
  color: var(--color-primary);
  text-decoration: none;
}
.pagina-numero--atual {
  background: var(--color-navy);
  color: #fff;
  font-weight: 600;
}
.pagina-numero--atual:hover {
  background: var(--color-navy);
  color: #fff;
}
.pagina-reticencia {
  padding: 0 2px;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Composicao em passos - uma etapa por vez, e o rascunho salvando sozinho
   -------------------------------------------------------------------------- */

.trilha-passos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.trilha-passos li {
  display: flex;
  align-items: center;
}
.trilha-passos li::after {
  content: "";
  width: 14px;
  height: 1px;
  margin: 0 4px;
  background: var(--color-border);
}
.trilha-passos li:last-child::after {
  display: none;
}

.trilha-passo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px 0 9px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.trilha-passo:hover {
  border-color: var(--color-interactive);
  color: var(--color-primary);
}
.trilha-passo b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.trilha-passo--atual {
  border-color: var(--color-navy);
  background: var(--color-navy);
  color: #fff;
  font-weight: 500;
}
.trilha-passo--atual b {
  background: var(--color-accent);
  color: var(--color-navy);
}
.trilha-passo--atual:hover {
  border-color: var(--color-navy);
  color: #fff;
}
.trilha-passo--feito {
  color: var(--color-text-body);
  border-color: var(--color-success-borda);
}
.trilha-passo--feito b {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.navegacao-passos {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.navegacao-passos .botao svg {
  width: 15px;
  height: 15px;
}

/* -- o indicador de salvamento ------------------------------------------- */

.rail__salvo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
  line-height: 18px;
  color: var(--color-text-muted);
}
.ponto-salvo {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
}
.rail__salvo--salvando .ponto-salvo {
  background: var(--color-interactive);
  animation: pulsar 1s ease-in-out infinite;
}
.rail__salvo--ok {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.rail__salvo--ok .ponto-salvo {
  background: var(--color-success);
}
.rail__salvo--aviso {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.rail__salvo--aviso .ponto-salvo {
  background: var(--color-warning);
}
.rail__salvo--erro {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.rail__salvo--erro .ponto-salvo {
  background: var(--color-danger);
}

@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
  .rail__salvo--salvando .ponto-salvo {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Tabelas de lista - uma linha por linha, e o valor inteiro a um passo
   -------------------------------------------------------------------------- */

/* `table-layout: fixed` e' o que faz a reticencia acontecer: sem largura definida
   a celula cresce ate caber o texto, e nada nunca corta. Com ele, o <colgroup> de
   cada tabela manda, e o conteudo se ajusta as colunas em vez do contrario. */
.tabela--fixa {
  /* Quando a janela e' estreita demais, quem rola e' a TABELA, nao a pagina — uma
     pagina que rola de lado esconde a barra lateral e o titulo junto. */
  overflow-x: auto;
}
.tabela--fixa table {
  table-layout: fixed;
  width: 100%;
  /* O piso: abaixo disto as colunas parariam de encolher e a tabela rolaria. Sem
     ele, `table-layout: fixed` espreme a coluna do cliente ate 79px e o nome do
     cliente — que e' a coluna que importa — vira reticencia sozinha. */
  min-width: var(--tabela-min, 900px);
}
.tabela--fixa td,
.tabela--fixa th {
  padding: 14px 16px;
}

/* A linha inteira abre o registro. O alvo antes era so' o codigo: 60px de link
   numa linha de mil, com o resto da linha parecendo clicavel e nao sendo. O
   comportamento mora no `lista.js`, e depende do `data-href` na <tr>. */
.linha--abre {
  cursor: pointer;
}
.linha--abre:hover td {
  background: var(--color-surface-sunken);
}

/* Dentro de tabela o sublinhado no hover briga com o fundo da linha: dois avisos
   para o mesmo "isto abre". O fundo basta, e é ele que cobre a linha inteira —
   que é a área que de fato responde ao clique. O link continua colorido e
   continua sublinhando fora de tabela, onde é o único sinal que existe. */
.tabela a:hover {
  text-decoration: none;
}

/* Um codigo partido em duas linhas deixa de ser codigo: ninguem le
   `DS-2026-` / `01A87D0D` como um numero so. */
.codigo {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* Uma linha, com reticencia. O valor inteiro fica no `title` — cortar na tela nao
   pode virar cortar o dado: quem precisa do nome completo passa o mouse, e quem
   precisa dele em texto abre a ficha. */
.corta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Celula de duas linhas: o dado em cima, a qualificacao embaixo, nenhuma quebra. */
.celula {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.celula__apoio {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  line-height: 16px;
  color: var(--color-text-muted);
}
.celula__apoio .selo {
  vertical-align: -1px;
}

/* Selo dentro de tabela e' etiqueta, nao botao: menor, e sem empurrar a linha. */
.tabela--fixa .selo {
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
}
.tabela--fixa .selo::before {
  width: 5px;
  height: 5px;
}

/* O campo de numero do ERP dentro da linha: compacto, e sem esticar a altura. */
.linha-erp {
  display: flex;
  gap: 6px;
  align-items: center;
}
.linha-erp input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  height: 32px;
  min-height: 32px;
  padding: 5px 9px;
  font-size: var(--text-sm);
}
.linha-erp .botao {
  height: 32px;
  padding: 0 11px;
  flex-shrink: 0;
  font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Cadastro de cliente - o veredito do CNPJ e a lista do que ja da para usar
   -------------------------------------------------------------------------- */

.veredito {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--color-text-muted);
}
.veredito a {
  display: inline-block;
  margin-top: 4px;
  font-weight: 500;
}
.veredito--ok {
  background: var(--color-success-soft);
  color: var(--color-success);
}
.veredito--ok .ponto-salvo { background: var(--color-success); }
.veredito--aviso {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}
.veredito--aviso .ponto-salvo { background: var(--color-warning); }
.veredito--erro {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.veredito--erro .ponto-salvo { background: var(--color-danger); }

.lista-completude {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
}
.completude__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.completude__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}
.completude__item--ok {
  color: var(--color-text-body);
}
.completude__item--ok .completude__marca {
  background: var(--color-success-soft);
  border-color: var(--color-success-borda);
  color: var(--color-success);
}

/* ---------------------------------------------------------------------------
 * A esteira do pedido, em faixa
 *
 * Horizontal e rasa de propósito. A primeira versão era uma lista vertical com
 * data e autor em cada passo: honesta, e comia meia tela antes do primeiro dado
 * do pedido. Quem abre um pedido veio ler o pedido.
 *
 * As datas não sumiram — continuam no `title` de cada passo e, inteiras, no
 * histórico ao pé da página.
 * --------------------------------------------------------------------------- */

.faixa {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 14px 16px 12px;
  margin-bottom: 14px;
}

.faixa__passos {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0 0 2px;
  overflow-x: auto;
  gap: 0;
}

.faixa__passo {
  flex: 1 1 0;
  min-width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* O fio que liga um passo ao seguinte, atrás das bolinhas. */
.faixa__passo::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(-50% + 6px);
  width: calc(100% - 12px);
  height: 2px;
  background: var(--color-border);
}
.faixa__passo:first-child::before {
  display: none;
}
/* O fio ATRAS de um passo feito tambem esta feito: e o caminho ja andado. */
.faixa__passo--feito::before {
  background: var(--color-primary);
}

.faixa__marca {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.faixa__passo--feito .faixa__marca {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.faixa__passo--feito {
  color: var(--color-text-body);
}

.faixa__passo--atual .faixa__marca {
  border-color: var(--color-interactive);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px var(--color-interactive-ring);
}

.faixa__passo--atual {
  color: var(--color-text);
  font-weight: 600;
}

.faixa__nome {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 2px;
}

.faixa__nota {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.faixa--parada {
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------
 * A barra de ação em lote — aparece só quando há pedido marcado
 * --------------------------------------------------------------------------- */

.lote {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--color-interactive-ring);
  border-radius: 10px;
  background: var(--color-interactive-soft);
}

.lote__contagem {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.lote__aviso {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-basis: 100%;
}

.lote select,
.lote input[type="text"] {
  height: 34px;
}

.marca-pedido {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * O alternador de vista
 * --------------------------------------------------------------------------- */

.vistas {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--color-surface);
}

.vista {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  border-right: 1px solid var(--color-border);
}
.vista:last-child {
  border-right: 0;
}
.vista svg {
  width: 15px;
  height: 15px;
}
.vista:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text-body);
}
.vista--ativa {
  background: var(--color-navy);
  color: #fff;
}
.vista--ativa:hover {
  background: var(--color-navy);
  color: #fff;
}

/* ---------------------------------------------------------------------------
 * O quadro
 *
 * Três decisões que sustentam o desenho:
 *
 * 1. **Ocupa a altura da janela.** A primeira versão era uma tira baixa no topo de
 *    uma página vazia — parecia um acessório, não a tela. Aqui as colunas vão até
 *    embaixo e rolam por dentro; o quadro é a tela.
 *
 * 2. **Rolagem horizontal por desenho.** São doze colunas. Espremê-las para caber
 *    deixaria o cartão sem espaço para o nome do cliente, que é o dado pelo qual a
 *    pessoa procura o pedido.
 *
 * 3. **Cor por fase, não por enfeite.** Doze colunas cinzentas iguais obrigam a ler
 *    o rótulo de cada uma para saber se aquilo é bom, é espera ou é fim de linha.
 * --------------------------------------------------------------------------- */

/* A altura do quadro sai do LAYOUT, não de uma conta com número mágico.
 *
 * A primeira versão era `calc(100vh - 258px)`, medido numa janela onde as fichas
 * de filtro cabiam em uma linha. Numa janela onde elas quebram em duas, o quadro
 * passava 52px do pé da tela e a página inteira ganhava barra de rolagem — junto
 * com as colunas, que já tinham a sua. Duas rolagens verticais concorrendo é como
 * se perde o cartão que se estava arrastando.
 *
 * Agora o `<body>` trava em 100vh nesta tela e cada nível repassa o que sobrou.
 * `min-height: 0` em toda a corrente é o que autoriza os filhos a encolher: sem
 * ele, o padrão `auto` do flex deixa o conteúdo empurrar o container para fora. */
.corpo--travado,
.corpo--travado .app {
  height: 100vh;
  overflow: hidden;
}
.corpo--travado .conteudo,
.corpo--travado .area {
  min-height: 0;
}
.corpo--travado .area {
  overflow: hidden;
  /* O rodape de 48px da `.area` existe para a pagina que ROLA: e o respiro
     depois da ultima linha. Numa tela que nao rola ele e so chao desperdicado,
     e o quadro para antes do fim da janela sem motivo. */
  padding-bottom: 14px;
}

.quadro {
  display: flex;
  gap: 12px;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1 1 auto;
  min-height: 220px;

  /* Sai do respiro lateral da `.area` e vai de borda a borda.
     A margem negativa cancela o padding da área e o padding próprio devolve o
     alinhamento: a primeira coluna nasce onde as outras telas começam, mas a
     ROLAGEM atravessa a janela inteira. Sem isto, o quadro terminava 40px antes
     da borda e as colunas pareciam esbarrar numa parede invisível. */
  --respiro: 40px;
  margin-left: calc(var(--respiro) * -1);
  margin-right: calc(var(--respiro) * -1);
  padding: 2px var(--respiro) 10px;

  /* A esmaecida das bordas ocupa exatamente o respiro. É o que faz o cartão que
     sai de cena sumir em vez de ser cortado com uma tesoura.
     As duas pontas são independentes e ligadas por JavaScript: esmaecer a esquerda
     com o quadro parado no começo apagaria a primeira coluna à toa. */
  --corte-esq: 0px;
  --corte-dir: 0px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--corte-esq),
    #000 calc(100% - var(--corte-dir)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--corte-esq),
    #000 calc(100% - var(--corte-dir)),
    transparent 100%
  );
}

.quadro--corta-esq {
  --corte-esq: var(--respiro);
}
.quadro--corta-dir {
  --corte-dir: var(--respiro);
}

@media (max-width: 720px) {
  .quadro {
    --respiro: 16px;
  }
}

.quadro__coluna {
  --fase: var(--color-text-muted);
  flex: 0 0 264px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 12px;
  background: var(--color-surface-sunken);
  overflow: hidden;
  transition: background 0.12s, opacity 0.12s, box-shadow 0.12s;
}

/* As cinco cores do quadro saem todas da paleta que já existe — nenhum hex novo.
   Todas escuras o bastante para texto branco por cima: `--color-interactive` foi
   descartada aqui (contraste ~2.8) em favor de `--color-primary`, que é a mesma
   família dois tons abaixo. */
.quadro__coluna--venda      { --fase: var(--color-text-muted); }
/* O âmbar puro dá contraste 4.2 com o branco por cima — abaixo do mínimo de 4.5,
   e este rótulo não é "texto grande" que autorize a exceção. Escurecido na própria
   família, sobe para ~5.1. */
.quadro__coluna--espera     { --fase: color-mix(in srgb, var(--color-warning) 86%, #000); }
.quadro__coluna--andamento  { --fase: var(--color-primary); }
.quadro__coluna--fim        { --fase: var(--color-success); }
.quadro__coluna--fora       { --fase: var(--color-danger); }

/* Coluna sem ninguém não compete por atenção — mas continua visível, porque é
   para dentro dela que se arrasta. */
.quadro__coluna--vazia {
  background: color-mix(in srgb, var(--color-surface-sunken) 55%, transparent);
}
.quadro__coluna--vazia .quadro__topo {
  opacity: 0.72;
}

/* A barra de cor. É ela que dá ao quadro a leitura de longe: verde é fim, âmbar é
   espera, vermelho saiu do trilho. Doze cabeçalhos brancos iguais obrigariam a ler
   o rótulo de cada um para descobrir a mesma coisa. */
.quadro__topo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 10px 13px 9px;
  background: var(--fase);
  color: #fff;
}

/* O ponto some: a barra inteira já é a cor. */
.quadro__marca {
  display: none;
}

.quadro__nome {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quadro__contagem {
  flex: none;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* De quem é a bola nesta coluna. Repete na tela a regra que o servidor aplica —
   quem lê "administrativo" já sabe por que o cartão não se move na mão dele. */
.quadro__dono {
  grid-column: 1 / -1;
  font-size: var(--text-label);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quadro__dono:empty {
  display: none;
}

.quadro__pilha {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* A metade em CSS do bloqueio de encadeamento: sem isto, o navegador entrega o
     excedente ao ancestral por conta propria quando a coluna chega na ponta — e o
     quadro desliza de lado sem ninguem ter pedido. A outra metade esta em
     `quadro.js`, que nao mexe no `scrollLeft` quando o cursor esta aqui dentro. */
  overscroll-behavior: contain;
}

.quadro__vazio {
  margin: auto 0;
  padding: 14px 0;
  text-align: center;
  color: var(--color-text-muted);
  opacity: 0.5;
  font-size: var(--text-xs);
}

.quadro__ocultos {
  margin: 2px 0 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Enquanto se arrasta: acende o que dá, apaga o que não dá. Quem decidiu qual é
   qual foi o servidor — ver quadro.js. */
.quadro__coluna--pode {
  background: var(--color-interactive-soft);
  box-shadow: inset 0 0 0 2px var(--color-interactive-ring);
}
.quadro__coluna--nao-pode {
  opacity: 0.3;
}
.quadro__coluna--sobre {
  box-shadow: inset 0 0 0 2px var(--color-interactive);
}

/* O aviso do arrasto flutua sobre o quadro em vez de ocupar uma linha embaixo
   dele. Reservar altura para uma frase que quase sempre esta vazia era tirar do
   quadro um espaco que ele usa o tempo todo. */
.quadro__nota {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 40;
  margin: 0;
  max-width: min(560px, 90vw);
  padding: 9px 15px;
  border-radius: 999px;
  font-size: var(--text-sm);
  color: #fff;
  background: var(--color-navy);
  box-shadow: 0 6px 20px rgba(5, 34, 65, 0.28);
}
/* Sem texto, nao existe. */
.quadro__nota:empty {
  display: none;
}
.quadro__nota--recusa {
  background: var(--color-danger);
  font-weight: 500;
}

/* -- o cartão -- */

.cartao-pedido {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 11px 12px 10px 14px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: 0 1px 2px rgba(15, 26, 32, 0.04);
  transition: box-shadow 0.12s, transform 0.12s;
}

/* A faixa da fase, na lateral do cartão: o cartão continua legível fora da coluna
   — enquanto voa, e no instante em que aterrissa. */
.cartao-pedido::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--fase);
}

.cartao-pedido:hover {
  box-shadow: 0 3px 10px rgba(15, 26, 32, 0.09);
}
.cartao-pedido:active {
  cursor: grabbing;
}

.cartao-pedido--voando {
  opacity: 0.4;
  transform: rotate(-1.5deg);
}

/* Salvando: o cartão já está na coluna nova, mas o servidor ainda não respondeu. */
.cartao-pedido--esperando {
  opacity: 0.6;
  border-style: dashed;
}

.cartao-pedido__cliente {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.32;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cartao-pedido__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.cartao-pedido__plano {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cartao-pedido__pe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.cartao-pedido__linhas b {
  color: var(--color-text-body);
  font-variant-numeric: tabular-nums;
}

.cartao-pedido__preco {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--color-text-body);
}

.cartao-pedido__rodape {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 7px;
  border-top: 1px solid var(--color-border);
}

.cartao-pedido__vendedor {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .quadro__coluna {
    flex-basis: 82vw;
  }
}

/* Cabeçalho de um bloco que abre: o título de um lado, a saída do outro.
   Todo bloco que abre precisa fechar — e a saída tem de estar onde o olho já
   está, não no rodapé de um formulário de vinte campos. */
.subbloco__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}

/* ---------------------------------------------------------------------------
 * A gaveta do cartão
 *
 * Painel colado na direita, metade da tela, altura inteira — e não uma caixa no
 * meio. A diferença não é gosto: o quadro fica visível atrás, então dá para ler
 * um cartão e ver de onde ele veio; e um painel alto e estreito lê como coluna,
 * que é a forma de quem varre uma fila.
 *
 * `<dialog>` nativo: Esc, foco preso dentro e fundo escurecido vêm do navegador.
 * --------------------------------------------------------------------------- */

.modal {
  /* `<dialog>` centraliza com `margin: auto`. Empurrar a margem esquerda para
     `auto` e zerar as outras cola o painel na direita, do topo ao pé. */
  margin: 0 0 0 auto;
  width: min(50vw, 720px);
  min-width: min(100vw, 440px);
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  padding: 0;
  border: 0;
  /* Reta: colada na borda da janela, canto arredondado deixa uma fresta que
     parece falha de encaixe. */
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-body);
  box-shadow: -18px 0 50px rgba(5, 34, 65, 0.2);
  overflow: hidden;

  /* O estado de repouso é este, e é o que vale quando nada mais acontece: o painel
     no lugar, opaco. É a posição para a qual qualquer falha cai. */
  translate: 0 0;
  opacity: 1;
}

/* A entrada: desliza de fora da janela, pela direita.
 *
 * ⚠️ Duas tentativas anteriores falharam pelo MESMO motivo, e vale registrar. Com
 *    `animation` no elemento e com `transition` + `@starting-style`, o navegador
 *    congela a mudança enquanto a aba está em segundo plano — e o painel fica
 *    parado no primeiro quadro, fora da tela. Medido nas duas.
 *
 *    Aqui a animação vive numa CLASSE que o JavaScript põe ao abrir e tira depois,
 *    por tempo. O relógio dispara mesmo com a aba escondida; a classe sai; e o
 *    elemento cai no estado de repouso acima. A falha para no lugar certo. */
.modal--entrando {
  animation: gaveta-entra 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes gaveta-entra {
  from {
    translate: 100% 0;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal--entrando {
    animation: none;
  }
}

/* O `<dialog>` recebe o foco ao abrir, e o navegador desenha o anel nele — um
   contorno preto em volta do painel inteiro. Ele não é controle: quem precisa de
   anel são os botões e campos lá dentro, e esses continuam com o deles. */
.modal:focus,
.modal:focus-visible {
  outline: none;
}



.modal::backdrop {
  background: rgba(5, 34, 65, 0.34);
}

.modal__conteudo {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ⛔ O `<form>` fica ENTRE o modal e o corpo rolável, e um elemento no meio que
   não é flex quebra a cadeia: `.gaveta__corpo` deixa de receber altura, o
   `overflow-y: auto` nunca entra, o formulário cresce até o tamanho do conteúdo
   e o rodapé — onde está o "Salvar" — sai da tela.

   Com a janela do plano isso ficou visível: ela carrega uma tabela de faixas
   dentro, e o formulário passou a ser mais alto que a janela. Não dava para
   salvar plano nenhum. */
.modal__conteudo > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.modal__carregando {
  margin: auto;
  padding: 40px;
  text-align: center;
  color: var(--color-text-muted);
}

@media (max-width: 860px) {
  .modal {
    width: 100vw;
  }
}

/* -- cabeçalho, corpo, rodapé -- */

.gaveta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--color-border);
  flex: none;
}

.gaveta__identidade {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  min-width: 0;
}

.gaveta__numero {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
}

.gaveta__fechar {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.gaveta__fechar:hover {
  background: var(--color-surface-sunken);
  color: var(--color-text);
}
.gaveta__fechar svg {
  width: 17px;
  height: 17px;
}

.gaveta__corpo {
  padding: 18px 20px 24px;
  overflow-y: auto;
  /* Mesma razao da pilha: rolar a gaveta ate o fim nao pode mover o que esta atras. */
  overscroll-behavior: contain;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gaveta__cliente {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.26;
}

.gaveta__secao-titulo {
  font-size: var(--text-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 7px;
}

/* Um titulo de secao que vem DEPOIS de campos precisa respirar; o primeiro da
   gaveta, nao — ja tem o padding do corpo acima dele. */
.campos + .gaveta__secao-titulo {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* -- linhas de propriedade: rótulo à esquerda, valor à direita --
   Substituem a grade em caixas. Numa gaveta de 640px quatro colunas não cabem, e
   forçá-las quebrava rótulo no meio e deixava buraco ao lado dos valores curtos. */

.props {
  margin: 0;
  border-top: 1px solid var(--color-border);
}

.props__linha {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 9px 2px;
  border-bottom: 1px solid var(--color-border);
}

.props dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.props dd {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--text-sm);
}

.props dd .apoio {
  font-size: var(--text-xs);
}

@media (max-width: 560px) {
  .props__linha {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.gaveta__excecoes {
  border: 1px solid var(--color-warning-borda);
  background: var(--color-warning-soft);
  border-radius: 10px;
  padding: 12px 14px;
}
.gaveta__excecao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-top: 6px;
  font-size: var(--text-sm);
}

.gaveta__observacao {
  margin: 0;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.gaveta__pe {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 13px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  flex: none;
}

/* Dentro da gaveta a faixa não precisa de moldura: já está numa. */
.modal .faixa {
  border: 0;
  background: var(--color-surface-subtle);
  border-radius: 10px;
  margin-bottom: 0;
}

/* Tela vazia que ensina, em vez de só constatar o vazio. Quem nunca viu a tela
   cheia sai sem entender para que ela serve — e volta a fazer por fora. */
.vazio-guia {
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  padding: 26px 24px;
  max-width: 620px;
}
.vazio-guia__titulo {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.vazio-guia p {
  margin: 0 0 8px;
  font-size: var(--text-sm);
}
.vazio-guia p:last-child {
  margin-bottom: 0;
}

/* Três tabelas curtas lado a lado quando cabe, empilhadas quando não. Uma abaixo
   da outra em tela larga desperdiçaria metade da página e obrigaria a rolar para
   comparar canal com vendedor — que é justamente a comparação que se quer fazer. */
.grade-relatorios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Rodapé de um bloco que é formulário inteiro: as ações ficam presas ao bloco,
   não soltas embaixo dele. */
.bloco__pe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
  border-radius: 0 0 var(--radius-lg, 14px) var(--radius-lg, 14px);
}

/* ---------------------------------------------------------------------------
 * Janela centrada
 *
 * A gaveta cola na direita porque serve para varrer uma fila — ler um cartão e ver
 * de onde ele veio. Um formulário não é isso: ele pede atenção inteira, e o lugar
 * disso é o meio da tela.
 * --------------------------------------------------------------------------- */

.modal--centro {
  margin: auto;
  width: min(560px, calc(100vw - 32px));
  min-width: 0;
  height: auto;
  max-height: calc(100vh - 64px);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(5, 34, 65, 0.24);
}

.modal--centro .modal__conteudo {
  height: auto;
  max-height: calc(100vh - 64px);
}

/* A janela do plano carrega uma TABELA de faixas: em 560px cada preço vira uma
   caixinha de três dígitos e a linha quebra. Larga o bastante para a faixa caber
   inteira, e ainda longe da largura da tela. */
.modal--larga {
  width: min(880px, calc(100vw - 32px));
}

/* ---------------------------------------------------------------------------
 * O editor de faixas de preço
 *
 * Uma linha por faixa, com o recorte editável — porque faixa NÃO é constante do
 * sistema: o banco já tem uma `50-99` que o desenho de três colunas fixas não
 * tinha como mostrar, e que por isso não aparecia em lugar nenhum.
 * --------------------------------------------------------------------------- */

.faixas table {
  font-size: var(--text-sm);
}
.faixas td {
  padding: 6px 8px;
  vertical-align: middle;
}
.faixas th {
  white-space: nowrap;
}

/* Os campos ficam do tamanho da célula: o `min-height: 46px` do formulário
   normal transforma dezoito faixas numa página de rolagem. */
.faixas input[type="number"],
.faixas select {
  width: 100%;
  max-width: none;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.faixas input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* A linha em branco do fim é convite, não erro: fica apagada até receber algo. */
.faixas__linha--nova td {
  background: var(--color-surface-subtle);
}
.faixas__linha--erro td {
  background: var(--color-danger-soft);
}

.faixas__tirar {
  text-align: center;
}
.faixas__tirar input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-danger);
  cursor: pointer;
}

.faixas__nota {
  margin-top: 10px;
}

/* A barra de salvar gruda no fim da tela: com dezoito faixas o botão fica abaixo
   da dobra, e quem edita a terceira linha não vê que existe um salvar. */
.barra-salvar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 0;
  /* O fundo da página (`--color-surface-subtle`) esmaecendo para cima, para a
     barra não cortar a última faixa com uma linha dura. */
  background: linear-gradient(
    to top,
    var(--color-surface-subtle) 62%,
    transparent
  );
}

/* O caminho de volta de uma tela interna. Fica ACIMA do título, não ao lado:
   ao lado ele disputa com o título e vira mais um botão da barra. */
.voltar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 3px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
}
.voltar:hover {
  color: var(--color-interactive);
  text-decoration: none;
}
.voltar svg {
  width: 15px;
  height: 15px;
}

/* Entra de baixo e some, em vez de vir da lateral: o movimento aponta para onde a
   janela está, e ela está no meio. */
.modal--centro.modal--entrando {
  animation: janela-entra 0.16s ease-out;
}

@keyframes janela-entra {
  from {
    translate: 0 12px;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal--centro.modal--entrando {
    animation: none;
  }
}

.modal__titulo {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text);
}

/* ---------------------------------------------------------------------------
 * A tela de configuração
 *
 * Linha, não azulejo. Os seis azulejos iguais da versão anterior davam o mesmo
 * peso visual para "5 planos travados" e "2 usuários" — e é justamente o peso que
 * a tela precisa diferenciar. Em linha cabe o número, o nome, a explicação do que
 * aquilo faz e o aviso quando há um.
 * --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
 * O painel de configuração: conteúdo à esquerda, sumário à direita
 *
 * Três versões desta tela falharam pelo mesmo motivo — ela apontava para outras
 * telas em vez de fazer alguma coisa. A quarta põe o catálogo como conteúdo e
 * comprime o resto num sumário de uma linha por assunto.
 *
 * O sumário é estreito de propósito: nome, número, seta. Se um item precisar de
 * um parágrafo para se explicar, o parágrafo mora na tela dele, não aqui.
 * --------------------------------------------------------------------------- */

.painel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 24px;
  align-items: start;
}

.painel__principal {
  min-width: 0; /* sem isto a tabela empurra a coluna e estoura a grade */
}

.painel__lado {
  position: sticky;
  top: 20px;
}

/* Abaixo de 1100px o sumário não cabe ao lado sem espremer a tabela de planos.
   Ele desce para o fim, que é a ordem certa: o catálogo é o conteúdo. */
@media (max-width: 1100px) {
  .painel {
    grid-template-columns: minmax(0, 1fr);
  }
  .painel__lado {
    position: static;
  }
}

.sumario {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  overflow: hidden;
}

.sumario__titulo {
  font-size: var(--text-label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--color-border);
}

.sumario__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1px 8px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--color-border);
  color: inherit;
  text-decoration: none;
  transition: background 0.12s;
}
.sumario__item:last-child {
  border-bottom: 0;
}
.sumario__item:hover {
  background: var(--color-surface-subtle);
  text-decoration: none;
}

.sumario__nome {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sumario__valor {
  grid-column: 1;
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A seta ocupa as duas linhas da célula, para ficar no meio vertical do item. */
.sumario__seta {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 15px;
  height: 15px;
  color: var(--color-text-muted);
  flex: none;
}
.sumario__item:hover .sumario__seta {
  color: var(--color-interactive);
}

/* O estado entra na COR DO NÚMERO, não num ponto extra: o item já é uma linha
   curta, e mais um enfeite ao lado seria mais coisa para o olho separar. O
   vermelho só aparece quando alguma coisa barra pedido — senão vira decoração. */
.sumario__item--trava .sumario__valor {
  color: var(--color-danger);
  font-weight: 600;
}
.sumario__item--atencao .sumario__valor {
  color: var(--color-warning);
  font-weight: 600;
}

/* O bloco que abre a tela quando algo está travando a venda. */
.bloco--alerta {
  border-color: var(--color-warning-borda);
}
.bloco--alerta .bloco__cabecalho {
  background: var(--color-warning-soft);
}

/* Linha de plano sem faixa publicada: some do caminho sem sumir da tela. */
.linha--faltando td {
  background: var(--color-danger-soft);
}

/* ---------------------------------------------------------------------------
 * As assinaturas do contrato
 *
 * Caixa marcável à mão hoje, marcada pela integração amanhã — a mesma linha nos
 * dois casos. É por isso que o rodapé de cada uma diz QUEM marcou: "confirmado
 * pela integração" e "marcado por Fulano" são fatos diferentes.
 * --------------------------------------------------------------------------- */

.assinaturas {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.assinatura {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--color-border);
}
.assinatura:last-child {
  border-bottom: 0;
}

.assinatura__marca {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: transparent;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.assinatura__marca:hover {
  border-color: var(--color-interactive);
}

.assinatura--feita .assinatura__marca {
  background: var(--color-success);
  border-color: var(--color-success);
  color: #fff;
}

.assinatura__nome {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.assinatura--feita .assinatura__nome {
  color: var(--color-text-body);
}

/* O contrato dentro da gaveta: bloco com fundo próprio, porque é a resposta para
   "por que este pedido não anda" — e essa pergunta não pode competir de igual para
   igual com o preço por linha. */
.gaveta__contrato {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-subtle);
  padding: 12px 14px;
}
.gaveta__contrato .assinaturas {
  margin-top: 4px;
}
.gaveta__contrato .assinatura {
  border-bottom-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}
.gaveta__contrato .linha-escolha {
  background: var(--color-surface);
  border-radius: 8px;
  padding: 10px 12px;
}

/* A decisão da exceção dentro da gaveta.
   A coluna "Aprovação" costuma ser a mais cheia do quadro, e até agora abrir um
   cartão dela mostrava o motivo e mandava a pessoa para outra tela decidir. */
.decisao {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.decisao input[type="text"] {
  width: 100%;
  max-width: none;
}
.decisao__botoes {
  display: flex;
  gap: 8px;
}
.decisao__botoes .botao {
  flex: 1 1 0;
  height: 34px;
}

/* Título de seção com uma ação do lado direito. */
.gaveta__topo-secao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 4px;
}
.gaveta__topo-secao .botao {
  height: 30px;
  padding: 0 12px;
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
 * O que a auditoria de 31/08/2026 pediu e ainda nao tinha lugar
 * --------------------------------------------------------------------------- */

/* Duas acoes opostas e irreversiveis ficavam a 10px uma da outra, e a
   destrutiva sem contorno perceptivel (1,44:1). Agora 24px, e o "Rejeitar"
   com borda que da para ver. */
.decisao__acoes {
  display: flex;
  gap: 24px;
  margin-top: 12px;
}
.decisao__acoes .botao {
  flex-grow: 1;
}
.botao--perigo {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.botao--perigo:hover {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

/* Cartao que nao tem para onde ir nao pode convidar ao arraste. */
.cartao-pedido--parado {
  cursor: default;
  opacity: 0.92;
}
.cartao-pedido--parado:hover {
  box-shadow: none;
}

/* A caixa de marcar da exportacao media 13px, e decide quais pedidos entram num
   pacote de faturamento. 18px de caixa, area de clique de 44px pelo ::before. */
.marcar-pedido {
  position: relative;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-interactive);
  cursor: pointer;
}
.marcar-pedido::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------------------
 * A camada responsiva
 *
 *     [D] Auditoria de 31/08/2026: responsividade 1/10. Existiam quatro media
 *         queries no CSS inteiro, e NENHUMA tocava a barra lateral, o cabeçalho,
 *         a área de conteúdo ou as tabelas. `--sidebar: 240px` era constante em
 *         toda largura.
 *
 *         Medido em 375px: a barra ocupava 240px dos 375 (64% da tela), sobravam
 *         55px úteis de conteúdo, e a página estourava 453px para o lado.
 *
 * ⚠️ A ordem importa: `--sidebar` é uma variável, e mudá-la resolve largura da
 *    barra E o que depende dela de uma vez. Abaixo de 860px a barra sai do fluxo
 *    e volta por um botão — não há espaço para ela e conteúdo ao mesmo tempo.
 * --------------------------------------------------------------------------- */

/* O botão do menu só existe onde a barra se esconde.
   ⛔ Esta regra tem de vir ANTES da media query que a liga: mesma
      especificidade, e quem vem depois vence. */
.menu-abrir {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}
.menu-abrir svg {
  width: 22px;
  height: 22px;
}

/* -- até 1024px: a barra vira só ícones ----------------------------------- */
@media (max-width: 1024px) {
  :root {
    --sidebar: 68px;
  }
  .menu__item span,
  .menu__categoria,
  .usuario__dados {
    display: none;
  }
  .menu__item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  /* O contador não pode sumir junto com o rótulo: ele é a única pista de que há
     trabalho parado. Vira um ponto no canto do ícone. */
  .menu__item .contador {
    position: absolute;
    top: 4px;
    right: 10px;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    padding: 0 4px;
  }
  .menu__item {
    position: relative;
  }
  .marca svg {
    width: 44px;
  }
  .sidebar__topo {
    justify-content: center;
    padding: 16px 8px;
  }
  .usuario {
    justify-content: center;
    padding: 6px;
  }
  .topo,
  .area {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* -- até 860px: a barra sai do fluxo -------------------------------------- */
@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    z-index: 60;
    top: 0;
    left: 0;
    width: 264px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 28px rgba(5, 34, 65, 0.18);
  }
  .app[data-menu="aberto"] .sidebar {
    transform: translateX(0);
  }
  /* Com a barra fora do fluxo os rótulos voltam: ela está inteira na tela. */
  .app[data-menu="aberto"] .menu__item span,
  .app[data-menu="aberto"] .menu__categoria,
  .app[data-menu="aberto"] .usuario__dados {
    display: revert;
  }
  .app[data-menu="aberto"] .menu__item {
    justify-content: flex-start;
    padding-left: 12px;
    padding-right: 12px;
  }
  .app[data-menu="aberto"] .menu__item .contador {
    position: static;
    min-width: 20px;
    height: 20px;
    font-size: var(--text-xs);
    padding: 0 6px;
  }

  .menu-fundo {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(5, 34, 65, 0.34);
    border: 0;
    padding: 0;
    cursor: pointer;
  }

  .menu-abrir {
    display: inline-flex;
  }

  .conteudo {
    width: 100%;
    min-width: 0;
  }
  .topo {
    flex-wrap: wrap;
    padding: 12px 16px;
    gap: 12px;
  }
  /* ⛔ `flex-shrink: 0` no bloco de ações fazia o "Novo pedido" ficar 93px fora
     da tela, e a página inteira ganhava barra horizontal por causa dele. Com
     `wrap` no `.topo` ele desce; com `basis: 100%` ele desce inteiro, em vez de
     brigar por uma sobra que não existe. */
  .topo__acoes {
    flex-shrink: 1;
    flex-basis: 100%;
    flex-wrap: wrap;
  }
  .topo__titulo {
    flex: 1 1 auto;
    min-width: 0;
  }
  .area {
    padding: 20px 16px 32px;
  }
  /* Alvo de toque: nada abaixo de 44px onde o dedo é o ponteiro. */
  .menu__item,
  .ficha,
  .vista,
  .botao,
  .pagina-numero,
  .pagina-botao {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar {
    transition: none;
  }
}

/* -- as tabelas: largura mínima por TIPO de dado, não em pixels fixos ------
   CNPJ media 134px numa caixa de 124: a chave de negócio do cliente saía
   cortada em todas as 51 linhas, enquanto a coluna do nome ao lado levava
   481px. Nome pode truncar; identificador, não. */
.tabela .codigo,
.tabela code {
  white-space: nowrap;
}
@media (max-width: 860px) {
  .tabela {
    --tabela-min: 640px;
  }
}

/* O ponto de obrigatorio nao pode parecer texto cortado. */
.campo__obrigatorio {
  text-decoration: none;
  border: 0;
  cursor: help;
  color: var(--color-danger);
}

/* Borda visivel e uma escala de elevacao de verdade.
   `#eaecf0` sobre branco media 1,18:1 — abaixo do minimo de 3:1 para elemento de
   interface —, e o sistema inteiro tinha UMA sombra. Sem profundidade, cartao,
   tabela e modal nao tinham limite perceptivel: a interface lia como wireframe. */
:root {
  --color-border: #d7dde1;
  --sombra-1: 0 1px 2px rgba(15, 26, 32, 0.06);
  --sombra-2: 0 4px 12px rgba(15, 26, 32, 0.1);
  --sombra-3: 0 12px 32px rgba(5, 34, 65, 0.16);
}

.cartao,
.bloco,
.destaque {
  box-shadow: var(--sombra-1);
}

/* Zebra: cinquenta linhas separadas por uma borda de 1,18:1 viravam um bloco
   cinza so, e o olho perdia a linha no meio do caminho. */
.tabela tbody tr:nth-child(even) td,
.tabela table tr:nth-child(even):not(:first-child) td {
  background: color-mix(in srgb, var(--color-surface-subtle) 55%, transparent);
}
.tabela tbody tr:hover td,
.tabela table tr:hover:not(:first-child) td {
  background: var(--color-surface-subtle);
}

/* CNPJ, codigo e data-hora nao truncam: sao chave de negocio. O nome ao lado
   pode — ele se reconhece pelo comeco. */
.tabela .codigo,
.tabela code,
.tabela .num {
  white-space: nowrap;
}

/* "editar" era um `<td>` com clique. Virou botao de verdade; aqui ele volta a
   parecer o texto discreto que era. */
button.ligacao {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--color-interactive-texto);
  cursor: pointer;
  text-align: left;
}
button.ligacao:hover {
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Fase 5, o resto: tipografia, alturas, icones e a fonte que pode nao carregar
 * --------------------------------------------------------------------------- */

/* -- UX-054: a escala era comprimida -------------------------------------
   `h1` a 22px contra corpo de 14px da razao 1,57 — sem salto, todas as telas
   tem a mesma temperatura e o olho nao acha por onde comecar. E `12px/lh16`
   era o corpo dominante em /atividade/ e /contratos/: texto de tabela nao pode
   descer abaixo de 13px. */
:root {
  --text-xl: 26px;
  --text-lg: 20px;
}
h1 {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.topo__titulo h1 {
  font-size: 26px;
}
.tabela td,
.tabela th {
  font-size: var(--text-sm);
}
.celula__apoio {
  font-size: var(--text-xs);
}

/* -- UX-050: cinco alturas de campo e tres de botao, sem regra ------------
   32 / 34 / 38 / 40 / 46 / 48px conviviam. Duas: `md` para formulario, `sm`
   para grade densa. Cada tela parecia feita por uma pessoa diferente. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
.escolha__gatilho {
  min-height: 40px;
  height: 40px;
}
textarea {
  min-height: 80px;
  height: auto;
}
.filtros__select,
.filtros .botao,
.busca-campo {
  height: 40px;
  min-height: 40px;
}
/* A grade de precos e densa de proposito: 18 faixas em 40px viram uma pagina
   de rolagem. Ali vale o tamanho `sm`, e so ali. */
.faixas input[type="number"],
.faixas select,
.faixas .escolha__gatilho {
  height: 32px;
  min-height: 32px;
}

/* -- UX-056: dois CTAs primarios no mesmo campo de visao ------------------
   "Continuar" e "Enviar pedido", os dois em teal, os dois 40px: sem alvo
   obvio, a pessoa hesita no passo mais critico do fluxo. O avancar do
   assistente vira secundario; o primario e o que fecha. */
#passo-avancar.botao--principal {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
#passo-avancar.botao--principal:hover {
  border-color: var(--color-interactive);
  background: var(--color-surface-subtle);
}

/* -- UX-055: sem icone fora da navegacao ---------------------------------
   Onze SVG numa tela inteira, dez deles na barra lateral. Densidade alta de
   texto sem ancora visual: o olho varre linha a linha. O selo de estado ganha
   um ponto colorido — nao e enfeite, e o que deixa "sim" e "sem preco"
   diferentes antes de ler a palavra. */
.selo::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  opacity: 0.75;
  vertical-align: 1px;
}
.selo--sem-ponto::before {
  display: none;
}

/* -- UX-057: a fonte externa pode nao carregar ---------------------------
   Em rede corporativa restrita a Outfit nao chega, e o layout inteiro reflui
   para `system-ui`, que tem metricas diferentes — e as colunas de largura
   fixa, ja apertadas, cortam mais. `size-adjust` aproxima a metrica do
   fallback para o refluxo ser menor. */
@font-face {
  font-family: "Outfit fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial");
  size-adjust: 96%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}
:root {
  --font-sans: "Outfit", "Outfit fallback", system-ui, -apple-system, "Segoe UI",
    sans-serif;
}

/* O contador de caracteres so aparece perto do teto: sempre visivel e ruido. */
.campo__conta {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.campo__conta--cheio {
  color: var(--color-danger);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * UX-032: doze colunas em 3.380px
 *
 * A promessa do quadro e ver o fluxo INTEIRO de uma vez. Com doze colunas de
 * 264px cabiam 4,3 em 1440px — 64% fora da tela — e a pessoa navegava as cegas
 * por rolagem lateral, perdendo justamente o panorama que justifica a vista.
 *
 * A saida nao e apertar as doze: e deixar a coluna VAZIA encolher. Numa
 * operacao real metade dos estados esta vazia a maior parte do tempo, e uma
 * coluna vazia de 264px e 264px de nada. Ela vira uma faixa estreita que ainda
 * diz o nome e ainda aceita o cartao arrastado.
 * --------------------------------------------------------------------------- */

.quadro__coluna--vazia {
  flex: 0 0 52px;
  min-width: 52px;
  align-self: flex-start;
  background: color-mix(in srgb, var(--color-surface-sunken) 60%, transparent);
}
.quadro__coluna--vazia .quadro__pilha,
.quadro__coluna--vazia .quadro__dono,
.quadro__coluna--vazia .quadro__ocultos {
  display: none;
}
/* ⛔ `height: 100%` no CABEÇALHO era o erro: é ele que carrega a cor da fase, e
   esticado do topo ao rodapé a coluna encolhida virava um bloco maciço e
   saturado — gritando por atenção justamente por estar vazia.

   Encolhida ela é uma FAIXA QUIETA: fundo igual ao das outras, só uma listra de
   cor no topo dizendo a fase, e o nome de pé em cinza. */
.quadro__coluna--vazia .quadro__topo {
  height: auto;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 10px 4px 8px;
  background: var(--color-surface-sunken);
  border-top: 3px solid var(--fase);
  color: var(--color-text-muted);
}
/* O nome de pe: e o unico jeito de caber em 60px sem virar reticencia. */
.quadro__coluna--vazia .quadro__nome {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  /* Sem isto o nome estica a coluna até a altura da mais cheia do quadro. */
  max-height: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quadro__coluna--vazia .quadro__contagem {
  display: none;
}
/* Ao arrastar, a coluna encolhida VOLTA ao tamanho: quem esta com o cartao na
   mao precisa enxergar onde solta. */
.quadro--arrastando .quadro__coluna--vazia {
  flex: 0 0 200px;
  min-width: 200px;
}
.quadro--arrastando .quadro__coluna--vazia .quadro__nome {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: var(--text-sm);
}
.quadro--arrastando .quadro__coluna--vazia .quadro__pilha {
  display: flex;
}

/* Agendar reajuste: a acao vive ACIMA da grade, porque ela e sobre a tabela
   inteira, nao sobre uma faixa. */
.agendar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.agendar__texto {
  flex: 1 1 320px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.agendar input[type="date"] {
  width: 170px;
}

/* ---------------------------------------------------------------------------
   A porta de entrada do pedido: dois caminhos, escolhidos antes de digitar.

   São dois pedidos e sempre foram — o formulário do Google que este sistema
   substitui já era um de cliente novo e um de adicional. Escolher no começo é o
   que dispensa o vendedor de entender o seletor de tipo antes de comecar.
   --------------------------------------------------------------------------- */
.escolha-fluxo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.escolha-fluxo__botao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.escolha-fluxo__botao:hover {
  border-color: var(--color-accent);
  background: var(--color-surface-2, var(--color-surface));
}
.escolha-fluxo__botao:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.escolha-fluxo__titulo {
  font-weight: 600;
  font-size: 1.05rem;
}
.escolha-fluxo__apoio {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  line-height: 1.4;
}
@media (max-width: 640px) {
  .escolha-fluxo {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   A tela de composição, na forma do formulário que ela substitui (18/09/2026)

   Quatro etapas, linhas de produto que se acrescentam, cartões de escolha para
   entrega e frete, o cadastro do cliente numa janela de três passos, e o resumo
   do pedido ao lado, que vai se preenchendo.

   Nada aqui inventa cor nova: tudo sai dos tokens de `:root`. Uma tela com
   paleta própria é uma tela que envelhece sozinha.
   -------------------------------------------------------------------------- */

/* Botões de acrescentar: tracejado porque o que eles fazem é abrir espaço, não
   confirmar nada. */
.botao--tracejado {
  width: 100%;
  border-style: dashed;
  border-color: var(--color-line, var(--color-border));
  color: var(--color-interactive-texto);
  background: transparent;
}
.botao--tracejado:hover {
  background: var(--color-interactive-soft);
  border-color: var(--color-interactive);
}

.botao-x {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.botao-x:hover {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.mono {
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- linha de produto */

.produto {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--color-surface);
}
.produto__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}
.produto__numero {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-muted);
}
.produto__corpo {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding: 14px;
}
.produto__pe {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.produto__subtotal {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-text);
}

/* ------------------------------------------------------- cartões de escolha

   A `.opcao` de sempre, com o rádio dentro. O estado marcado vem do próprio
   `:checked`: sem JavaScript para pintar, não há como a pintura discordar do
   que está selecionado. */

.opcoes--cartoes .opcao {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}
.opcoes--cartoes .opcao input[type="radio"] {
  margin: 2px 0 0;
  accent-color: var(--color-interactive);
  flex: 0 0 auto;
}
.opcoes--cartoes .opcao > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opcoes--cartoes .opcao:hover {
  border-color: var(--color-interactive);
}
.opcoes--cartoes .opcao:has(input:checked) {
  background: var(--color-interactive-soft);
  border: 1.5px solid var(--color-interactive);
}
.opcoes--cartoes .opcao:has(input:checked) .opcao__nome {
  color: var(--color-interactive-texto);
  font-weight: 600;
}

/* ------------------------------------------ o cadastro do cliente, em janela */

.cadastro-fundo {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5, 34, 65, 0.55);
  overflow-y: auto;
}
.cadastro {
  width: 100%;
  max-width: 720px;
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  box-shadow: 0 24px 60px -20px rgba(5, 34, 65, 0.5);
}
.cadastro__cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--color-border);
}
.cadastro__cabecalho h2 {
  margin: 0;
  font-size: var(--text-lg);
}
.cadastro__trilha {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}
.cadastro__trilha div {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.cadastro__barra {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--color-border);
}
.cadastro__trilha div[data-em="1"] {
  color: var(--color-text);
  font-weight: 500;
}
.cadastro__trilha div[data-em="1"] .cadastro__barra {
  background: var(--color-interactive);
}
.cadastro__corpo {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cadastro__pe {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-subtle);
}

/* ------------------------------------------------------- a ficha do cliente */

.cliente-cartao--ficha {
  display: block;
}
.cliente-cartao__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ficha-cliente {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px;
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.ficha-cliente dt {
  font-size: var(--text-label);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.ficha-cliente dd {
  margin: 0;
  font-size: var(--text-sm);
}

/* --------------------------------------------------------- resumo do pedido */

.resumo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.resumo__secao {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.resumo__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.resumo__linha span:last-child {
  text-align: right;
  color: var(--color-text-body);
}
.resumo__linha--forte {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.resumo__linha--forte span:last-child {
  color: var(--color-text);
}
.resumo__item {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.resumo__item:last-child {
  border-bottom: 0;
}
.resumo__totais {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .produto__corpo {
    grid-template-columns: 1fr;
  }
  .cadastro__trilha div span {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   A trilha e o resumo na forma do formulário (18/09/2026)

   A trilha de fichas arredondadas é a do cadastro de cliente, e continua sendo
   dela. Nesta tela ela é a barra do formulário: quatro colunas de largura igual,
   traço em cima que acende na etapa atual, número em círculo.
   -------------------------------------------------------------------------- */

.trilha-passos--formulario {
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-bottom: 4px;
}
.trilha-passos--formulario li {
  flex: 1 1 0;
  min-width: 150px;
}
.trilha-passos--formulario li::after {
  display: none;
}
.trilha-passos--formulario .trilha-passo {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  padding: 12px 12px 12px 0;
  border: 0;
  border-top: 3px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  text-align: left;
  white-space: normal;
  transition: border-color 0.18s;
}
.trilha-passos--formulario .trilha-passo:hover {
  border-top-color: var(--color-interactive);
  background: transparent;
}
.trilha-passos--formulario .trilha-passo b {
  width: 24px;
  height: 24px;
  background: var(--color-surface-subtle);
  color: var(--color-text-muted);
}
.trilha-passos--formulario .trilha-passo--atual {
  border-top-color: var(--color-interactive);
  background: transparent;
  color: var(--color-text);
  font-weight: 600;
}
.trilha-passos--formulario .trilha-passo--atual b {
  background: var(--color-interactive);
  color: #fff;
}
.trilha-passos--formulario .trilha-passo--feito b {
  background: var(--color-success-soft);
  color: var(--color-success);
}

/* O pé de cada etapa: voltar à esquerda, continuar à direita. */
.bloco__pe--navegacao {
  justify-content: space-between;
}

/* --------------------------------------------------------- o resumo, como painel */

.resumo__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.resumo__topo h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}
.resumo__linha--total {
  align-items: baseline;
  margin-top: 2px;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.resumo__numero {
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

/* A caixa da justificativa é a ÚNICA coisa que o vendedor precisa fazer no painel:
   ela vem antes dos cartões que explicam cada exceção, e se distingue deles. */
.excecao--justificativa {
  border-color: var(--color-interactive);
  background: var(--color-interactive-soft);
}
.excecao--justificativa textarea {
  background: var(--color-surface);
}