/*
  console.css
  O sistema visual inteiro do console da empresa, escrito na mao, sem framework.
  Tokens vindos de rotacheia-app/src/theme.ts, direcao de arte "Placa de Saida".
  Lei do amarelo: ele marca a acao do caminhoneiro no aplicativo, entao no console
  ele so aparece em foco de teclado e em aviso, nunca como botao de acao da empresa.
*/

:root {
  /* cores do theme.ts */
  --papel: #F3F5F0;
  --verde: #00663C;
  --verde-marco: #073B26;
  --orvalho: #E3EFE4;
  --ceu: #CFDEE3;
  --amarelo: #FFC800;
  --ambar: #F2A007;
  --asfalto: #1E2321;
  --desbotado: #454E4A;
  --pare: #B8232E;
  --branco: #FFFFFF;

  /* derivados, todos nascidos das cores acima */
  --borda: #D6DED8;
  --borda-forte: #A9B7AF;
  --cinza: #8A948F;
  --papel-fundo: #EAEEE7;
  --pare-papel: #F7E4E5;
  --ambar-papel: #FDF0D9;

  /* tipografia */
  --titulo: "Overpass", system-ui, sans-serif;
  --corpo: "Asap", system-ui, sans-serif;
  --mono: "Overpass Mono", ui-monospace, monospace;
  --caixa-alta: .085em;

  /* espaco, do theme.ts */
  --e-minimo: 4px;
  --e-pequeno: 8px;
  --e-medio: 16px;
  --e-grande: 24px;
  --e-amplo: 32px;
  --e-respiro: 48px;

  /* raio */
  --r-pequeno: 6px;
  --r-medio: 10px;
  --r-grande: 16px;
  --r-pilula: 999px;

  /* medidas do console */
  --alvo: 44px;
  --alvo-toque: 56px;
  --topo: 64px;
  --largura: 1280px;
  --sombra-cartao: 0 1px 2px rgba(30, 35, 33, .06), 0 6px 16px -12px rgba(30, 35, 33, .28);
  --sombra-alta: 0 10px 30px -16px rgba(7, 59, 38, .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--asfalto);
  font-family: var(--corpo);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--titulo); font-weight: 800; line-height: 1.12; }
p { margin: 0; }
a { color: var(--verde); }
::selection { background: var(--amarelo); color: var(--asfalto); }

/* Foco visivel em tudo que recebe teclado. Aqui o amarelo e sinal, nao decoracao. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
  border-radius: var(--r-pequeno);
}

.pular {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--verde); color: var(--branco);
  padding: 12px 20px; border-radius: var(--r-medio);
  font-family: var(--titulo); font-weight: 800; text-decoration: none;
}
.pular:focus { left: 16px; top: 16px; }

/* ------------------------------------------------------------------ topo */

.topo {
  position: sticky; top: 0; z-index: 100;
  background: var(--papel);
  border-bottom: 2px solid var(--asfalto);
}
.topo-inner {
  max-width: var(--largura); margin-inline: auto;
  min-height: var(--topo);
  display: flex; align-items: center; gap: var(--e-grande);
  padding: 0 var(--e-grande);
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--verde); text-decoration: none; flex: none;
}
.marca-caminhao { display: block; }
.marca-nome {
  font-family: var(--titulo); font-weight: 800; font-size: 21px;
  letter-spacing: -.01em; color: var(--verde);
}
.marca-etiqueta {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--caixa-alta); text-transform: uppercase;
  color: var(--desbotado); border: 1.5px solid var(--borda-forte);
  border-radius: var(--r-pequeno); padding: 2px 6px;
}

.navegacao { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; overflow-x: auto; }
.navegacao-item {
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  color: var(--desbotado); text-decoration: none; white-space: nowrap;
  padding: 8px 12px; border-radius: var(--r-pequeno);
  border-bottom: 3px solid transparent;
}
.navegacao-item:hover { color: var(--asfalto); background: var(--papel-fundo); }
.navegacao-item.aceso { color: var(--verde); border-bottom-color: var(--verde); background: var(--orvalho); }

.topo-conta { display: flex; align-items: center; gap: var(--e-pequeno); margin-left: auto; flex: none; }
.topo-empresa {
  font-family: var(--mono); font-size: 13px; color: var(--desbotado);
  max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topo-sair { margin: 0; }

/* -------------------------------------------------------------- conteudo */

.conteudo {
  max-width: var(--largura); margin-inline: auto;
  padding: var(--e-grande) var(--e-grande) var(--e-respiro);
}
.sem-barra .conteudo { max-width: 520px; padding-top: var(--e-respiro); }

.cabecalho-tela {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--e-medio); flex-wrap: wrap; margin-bottom: var(--e-grande);
}
.titulo-tela { font-size: 30px; letter-spacing: -.015em; }
.apoio-tela { color: var(--desbotado); font-size: 15px; margin-top: 4px; }
.acoes-tela { display: flex; gap: var(--e-pequeno); flex-wrap: wrap; }

/* Grades. Colunas caem sozinhas no celular. */
.grade { display: grid; gap: var(--e-medio); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Cinco colunas so aparecem na conferencia de caixa, onde as parcelas sao cinco e separa-las
   e o proprio ponto da tela: somar duas delas para caber em quatro esconderia a diferenca que
   explica o extrato do banco. */
.grade-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grade-lado { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }

/* ---------------------------------------------------------- placa verde */
/* A placa e AREA de verde, nunca filete fino. Serve de topo de secao e de destaque. */

.placa {
  position: relative;
  background: var(--verde); color: var(--branco);
  border-radius: var(--r-grande);
  padding: var(--e-grande) var(--e-amplo);
  box-shadow: var(--sombra-alta);
}
.placa::before {
  content: ""; position: absolute; inset: 5px;
  border: 2.5px solid rgba(255, 255, 255, .9);
  border-radius: 11px; pointer-events: none;
}
.placa > * { position: relative; }
.placa h1, .placa h2 { color: var(--branco); text-transform: uppercase; letter-spacing: -.012em; }
.placa .rotulo, .placa .placa-apoio { color: rgba(255, 255, 255, .82); }
.placa-numero {
  font-family: var(--mono); font-weight: 600; font-size: 34px;
  letter-spacing: .06em; color: var(--branco);
}
.placa-compacta { padding: var(--e-medio) var(--e-grande); border-radius: var(--r-medio); }
.placa-compacta::before { inset: 4px; border-radius: 7px; border-width: 2px; }

/* --------------------------------------------------------------- cartao */

.cartao {
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-grande);
  padding: var(--e-grande);
  box-shadow: var(--sombra-cartao);
}
.cartao + .cartao { margin-top: var(--e-medio); }
.cartao-titulo {
  font-family: var(--titulo); font-weight: 800; font-size: 19px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-pequeno);
  margin-bottom: var(--e-medio);
}
.cartao-apoio { color: var(--desbotado); font-size: 14px; }
.cartao-aperto { padding: var(--e-medio); }
.cartao-lista { padding: 0; }
.cartao-lista > * { padding: var(--e-medio) var(--e-grande); border-top: 1px solid var(--borda); }
.cartao-lista > *:first-child { border-top: 0; }
.cartao-pare { border-color: var(--pare); background: var(--pare-papel); }
.cartao-atencao { border-color: var(--ambar); background: var(--ambar-papel); }

/* Numero grande de painel, sempre em mono porque e dado. */
.metrica { display: flex; flex-direction: column; gap: 2px; }
.metrica-valor { font-family: var(--mono); font-weight: 600; font-size: 30px; line-height: 1.1; }
.metrica-rotulo {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--caixa-alta); text-transform: uppercase; color: var(--desbotado);
}

/* ---------------------------------------------------------- conta aberta */
/* A CONTA DO FRETE ABERTA NA TELA DA EMPRESA: o que ela paga, o que a RotaCheia retem e o que o
   caminhoneiro recebe, os tres na mesma linha.

   POR QUE ELA E UMA LINHA E NAO TRES METRICAS: o que a empresa precisa entender aqui e a
   SUBTRACAO, e nao os tres valores. Espalhados em tres cantos do painel, cada um vira um numero
   solto. Lado a lado, com o ponto no meio, e uma conta que se le de uma vez.

   O VERDE ENTRA COMO AREA, que e a lei desta identidade, e nunca como filete: fundo de orvalho
   com borda verde. Amarelo nao encosta aqui, porque esta conta e da empresa, e amarelo marca
   acao do caminhoneiro. Todo numero e mono, porque numero e dado.

   Ela quebra em varias linhas no painel estreito, e os pontos separadores somem do leitor de
   tela por aria-hidden: quem ouve recebe rotulo e valor, que ja dizem tudo. */
.conta-aberta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--e-pequeno) var(--e-medio);
  background: var(--orvalho);
  border: 1.5px solid var(--verde);
  border-radius: var(--r-medio);
  padding: var(--e-medio);
}
.conta-aberta-termo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conta-aberta-rotulo {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--caixa-alta); text-transform: uppercase; color: var(--verde-marco);
}
.conta-aberta-valor {
  font-family: var(--mono); font-weight: 600; font-size: 20px; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--verde-marco);
}
.conta-aberta-ponto { color: var(--verde); font-weight: 700; font-size: 20px; }
/* Sem vigencia de taxa a conta nao fecha, e isso e recusa: vermelho, e nao verde. */
.conta-aberta-parada { background: var(--pare-papel); border-color: var(--pare); display: block; }
.conta-aberta-parada strong { color: var(--pare); }

/* A mesma conta encolhida para caber embaixo de um valor de tabela ou ao lado de uma metrica.
   Sem area e sem borda: numa lista de vinte linhas, vinte retangulos verdes viram parede. */
.conta-aberta-curta { display: block; font-size: 13px; font-weight: 400; color: var(--desbotado); }
.conta-aberta-curta .mono { color: var(--verde-marco); }

/* --------------------------------------------------------------- botoes */
/* Tres variantes: principal em verde, vazio para acao secundaria, perigo em vermelho. */

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--alvo); padding: 0 20px;
  font-family: var(--titulo); font-weight: 800; font-size: 16px;
  border: 2px solid transparent; border-radius: var(--r-medio);
  text-decoration: none; cursor: pointer;
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao.desligado { opacity: .45; pointer-events: none; }

.botao-principal { background: var(--verde); color: var(--branco); border-color: var(--verde); }
.botao-principal:hover { background: var(--verde-marco); border-color: var(--verde-marco); }

.botao-vazio { background: var(--branco); color: var(--verde); border-color: var(--verde); }
.botao-vazio:hover { background: var(--orvalho); }

.botao-perigo { background: var(--branco); color: var(--pare); border-color: var(--pare); }
.botao-perigo:hover { background: var(--pare-papel); }

.botao-grande { min-height: 56px; font-size: 18px; padding: 0 28px; border-radius: var(--r-medio); }
.botao-curto { min-height: 36px; font-size: 14px; padding: 0 12px; border-radius: var(--r-pequeno); }
.botao-largo { width: 100%; }

/* --------------------------------------------------------- rotulo e dado */

.rotulo {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--caixa-alta); text-transform: uppercase; color: var(--desbotado);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dado { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.dado-grande { font-family: var(--mono); font-weight: 600; font-size: 22px; letter-spacing: .02em; }
.dinheiro { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.placa-veiculo {
  display: inline-block; font-family: var(--mono); font-weight: 600; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--papel-fundo); border: 1.5px solid var(--borda-forte);
  border-radius: var(--r-pequeno); padding: 2px 8px;
}
.apoio { color: var(--desbotado); font-size: 14px; }
.pare-texto { color: var(--pare); }

/* A foto da prova: o canhoto dentro do cartão da contestação e do desfecho.

   O teto de altura existe para a foto não empurrar o botão da decisão para fora da tela: quem
   está julgando precisa ver a prova E a ação na mesma vista, senão a foto vira um obstáculo a
   ser rolado em vez da coisa que decide. O tamanho cheio, que é onde se lê o carimbo, abre em
   outra aba pelo próprio link.

   object-fit: contain e não cover, porque canhoto amassado fotografado torto perde justamente a
   borda com o carimbo quando a imagem é cortada para preencher a caixa. Fundo de papel para a
   foto branca não se dissolver no cartão branco. */
.prova-foto { margin: 0; }
.prova-foto img {
  display: block; width: 100%; max-height: 320px; object-fit: contain;
  background: var(--papel-fundo);
  border: 1px solid var(--borda); border-radius: var(--r-medio);
}
.prova-foto figcaption { margin-top: var(--e-minimo); }

/* ------------------------------------------------------------ formulario */

.formulario { display: grid; gap: var(--e-medio); }
.linha-de-campos { display: grid; gap: var(--e-medio); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.linha-de-campos-3 { display: grid; gap: var(--e-medio); grid-template-columns: repeat(3, minmax(0, 1fr)); }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > label {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--caixa-alta); text-transform: uppercase; color: var(--desbotado);
}
.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"],
.campo input[type="tel"],
.campo input[type="number"],
.campo input[type="date"],
.campo input[type="datetime-local"],
.campo input[type="search"],
.campo select,
.campo textarea {
  width: 100%; min-height: var(--alvo);
  font-family: var(--corpo); font-size: 16px; color: var(--asfalto);
  background: var(--branco);
  border: 1.5px solid var(--borda-forte); border-radius: var(--r-medio);
  padding: 10px 12px;
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23454E4A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--desbotado); }
.campo .ajuda { font-size: 13px; color: var(--desbotado); }
.campo.tem-erro input, .campo.tem-erro select, .campo.tem-erro textarea { border-color: var(--pare); background: var(--pare-papel); }
.campo .erro-do-campo { font-size: 13px; color: var(--pare); font-weight: 600; }
.campo-dado input { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.escolha { display: flex; align-items: center; gap: 10px; min-height: var(--alvo); }
.escolha input[type="checkbox"], .escolha input[type="radio"] { width: 20px; height: 20px; accent-color: var(--verde); }

/* Escolha que a regra nao permite nesta viagem. Ela CONTINUA VISIVEL de proposito: some
   o clique, nao a linha. Sumir com a opcao faria quem opera procurar em outra tela um
   desfecho que existe e nao cabe, e a frase em vermelho ao lado diz por que ele nao cabe. */
.escolha-impedida { opacity: .72; cursor: not-allowed; }
.escolha-impedida strong { color: var(--desbotado); }

/* Escolha de linha inteira: titulo em cima, consequencia e conta embaixo, uma por linha.
   O radio sobe para o topo porque o texto tem tres alturas e centralizar deixaria a bolinha
   flutuando no meio do paragrafo. */
.escolha-linha { align-items: flex-start; }
.escolha-linha input[type="radio"] { margin-top: 3px; flex: none; }
.escolha-linha .apoio { display: block; margin-top: 2px; }

.acoes-do-formulario {
  display: flex; gap: var(--e-pequeno); flex-wrap: wrap;
  padding-top: var(--e-pequeno); border-top: 1px solid var(--borda); margin-top: var(--e-pequeno);
}

/* --------------------------------------------------------- tabela densa */

.tabela-rolagem { overflow-x: auto; border-radius: var(--r-grande); border: 1.5px solid var(--borda); background: var(--branco); }
.tabela { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabela thead th {
  text-align: left; white-space: nowrap;
  font-family: var(--mono); font-weight: 600; font-size: 11px;
  letter-spacing: var(--caixa-alta); text-transform: uppercase; color: var(--desbotado);
  background: var(--papel-fundo);
  padding: 10px 12px; border-bottom: 2px solid var(--borda-forte);
  position: sticky; top: 0; z-index: 1;
}
.tabela td { padding: 10px 12px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela tbody tr:hover { background: var(--papel-fundo); }
.tabela .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tabela .acao { text-align: right; white-space: nowrap; }
.tabela a { font-weight: 600; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }
.tabela-vazia { padding: var(--e-amplo); text-align: center; color: var(--desbotado); }

/* --------------------------------------------------------- selo e chips */
/* Cor nunca vai sozinha: o selo sempre carrega a palavra do estado junto. */

.selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1.5px solid; border-radius: var(--r-pilula);
  padding: 3px 10px; white-space: nowrap;
}
.selo::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.selo-falta { background: var(--papel-fundo); border-color: var(--borda-forte); color: var(--desbotado); }
.selo-gravado { background: var(--ambar-papel); border-color: var(--ambar); color: #8A5B04; }
.selo-confirmado { background: var(--orvalho); border-color: var(--verde); color: var(--verde); }
.selo-impedido { background: var(--pare-papel); border-color: var(--pare); color: var(--pare); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--corpo); font-weight: 500; font-size: 13px;
  background: var(--branco); color: var(--asfalto);
  border: 1.5px solid var(--borda-forte); border-radius: var(--r-pilula);
  padding: 4px 12px; white-space: nowrap;
}
.chip-exigencia { background: var(--orvalho); border-color: var(--verde); color: var(--verde-marco); }
.chip-recusa { background: var(--pare-papel); border-color: var(--pare); color: var(--pare); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Chip que tambem e escolha de lista fechada, no formulario de publicar. */
.chip-escolha { position: relative; cursor: pointer; }
.chip-escolha input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-escolha:has(input:checked) { background: var(--verde); border-color: var(--verde); color: var(--branco); }
.chip-escolha:has(input:focus-visible) { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* -------------------------------------------------------- linha do tempo */

.linha-do-tempo { list-style: none; margin: 0; padding: 0 0 0 var(--e-grande); border-left: 2px solid var(--borda); }
.linha-do-tempo li { position: relative; padding: 0 0 var(--e-medio) var(--e-pequeno); }
.linha-do-tempo li::before {
  content: ""; position: absolute; left: calc(var(--e-grande) * -1 - 7px); top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--branco); border: 3px solid var(--borda-forte);
}
.linha-do-tempo li.confirmado::before { border-color: var(--verde); }
.linha-do-tempo li.gravado::before { border-color: var(--ambar); }
.linha-do-tempo li.impedido::before { border-color: var(--pare); }
.linha-do-tempo .quando { font-family: var(--mono); font-size: 12px; color: var(--desbotado); }
.linha-do-tempo .o-que { font-weight: 600; }

/* ----------------------------------------------------- teclado numerico */
/* Usado na portaria, no celular do operador. Tecla grande, sem enfeite. */

.conferencia { max-width: 420px; margin-inline: auto; }
.visor-codigo { display: flex; justify-content: center; gap: 10px; margin-bottom: var(--e-grande); }
.visor-digito {
  width: 62px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 600; font-size: 44px; line-height: 1;
  background: var(--branco); color: var(--asfalto);
  border: 2.5px solid var(--borda-forte); border-radius: var(--r-medio);
}
.visor-digito.cheio { border-color: var(--verde); background: var(--orvalho); }
.visor-digito.errado { border-color: var(--pare); background: var(--pare-papel); }
.visor-codigo.escondido .visor-digito { color: var(--desbotado); }

.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tecla {
  min-height: 68px;
  font-family: var(--mono); font-weight: 600; font-size: 28px;
  background: var(--branco); color: var(--asfalto);
  border: 2px solid var(--borda-forte); border-radius: var(--r-medio);
  cursor: pointer; user-select: none;
}
.tecla:hover { background: var(--papel-fundo); }
.tecla:active { background: var(--orvalho); border-color: var(--verde); transform: translateY(1px); }
.tecla-apagar { font-family: var(--titulo); font-weight: 800; font-size: 16px; color: var(--pare); border-color: var(--pare); }
.tecla-confirmar { font-family: var(--titulo); font-weight: 800; font-size: 16px; background: var(--verde); color: var(--branco); border-color: var(--verde); }
.tecla-confirmar:hover { background: var(--verde-marco); }

/* Campo de codigo quando o operador prefere digitar pelo teclado do computador. */
.campo-codigo input {
  width: 100%; text-align: center;
  font-family: var(--mono); font-weight: 600; font-size: 40px; letter-spacing: .35em;
  text-indent: .35em;
  min-height: 84px; border: 2.5px solid var(--borda-forte); border-radius: var(--r-medio);
  background: var(--branco);
}

/* --------------------------------------------------------------- recados */

.recado {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1.5px solid; border-left-width: 6px; border-radius: var(--r-medio);
  padding: 12px 16px; margin-bottom: var(--e-medio);
  font-size: 15px; font-weight: 500;
}
.recado-marca { width: 10px; height: 10px; border-radius: 50%; margin-top: 6px; flex: none; background: currentColor; }
.recado-sucesso { background: var(--orvalho); border-color: var(--verde); color: var(--verde-marco); }
.recado-erro { background: var(--pare-papel); border-color: var(--pare); color: var(--pare); }
.recado-texto { color: var(--asfalto); }
.recado-erro .recado-texto { color: #7C1720; }

/* O recado que nasce escondido e a tela mostra quando precisa. .recado e flex, entao o
   atributo hidden sozinho perderia a queda de braco com o display. */
.recado[hidden] { display: none; }

/* Texto que existe so para quem usa leitor de tela, como o aviso de que a conta mudou sem a
   pagina recarregar. Nao usa display:none nem visibility:hidden, que tirariam ele do leitor
   junto com a tela. */
.so-no-leitor {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/*
  Aviso de fim de sessao. Fica preso no rodape da janela, e nao no fluxo da pagina, porque
  quem precisa dele esta no meio de um formulario longo e ja rolou a tela para longe do topo.
  Amarelo pela lei do amarelo la de cima: aviso pode, acao da empresa nao.
*/
.aviso-sessao {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--e-medio); z-index: 60;
  width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--ambar); border-left-width: 6px;
  border-radius: var(--r-medio); background: var(--ambar-papel);
  box-shadow: var(--sombra-alta);
  font-size: 15px; font-weight: 500; color: var(--asfalto);
}
/* Vem depois da regra acima de proposito: sem isto o display:flex vence o atributo hidden. */
.aviso-sessao[hidden] { display: none; }
.aviso-sessao-marca { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--ambar); }
.aviso-sessao-texto { flex: 1; }
.aviso-sessao .botao { flex: none; }

.vazio {
  border: 2px dashed var(--borda-forte); border-radius: var(--r-grande);
  padding: var(--e-respiro) var(--e-grande); text-align: center; color: var(--desbotado);
  background: var(--papel-fundo);
}
.vazio strong { display: block; font-family: var(--titulo); font-size: 18px; color: var(--asfalto); margin-bottom: 6px; }

/* ---------------------------------------------------------------- rodape */

.rodape { border-top: 2px solid var(--asfalto); background: var(--papel-fundo); margin-top: var(--e-respiro); }
.rodape-inner {
  max-width: var(--largura); margin-inline: auto;
  padding: var(--e-medio) var(--e-grande);
  display: flex; justify-content: space-between; gap: var(--e-medio); flex-wrap: wrap;
}
.rodape-linha, .rodape-dado { font-size: 13px; color: var(--desbotado); }

/* ------------------------------------------------- retrato e quem pegou */
/* Nasceram repetidos em operacao, frota e avaliar, cada tela com um tamanho. Moram aqui
   agora, em uma medida so: o mesmo motorista tem que ter a mesma cara nas tres telas. */

.retrato {
  width: 52px; height: 52px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--branco); border: 2.5px solid var(--verde); border-radius: 50%;
  font-family: var(--titulo); font-weight: 900; font-size: 19px; color: var(--verde);
  letter-spacing: .04em;
}
/* O retrato do portao e grande de proposito: ele e conferido com a pessoa na frente. */
.retrato-grande { width: 132px; height: 132px; font-size: 44px; border-radius: var(--r-grande); }

.quem-pegou, .condutor-fixo {
  display: flex; align-items: center; gap: var(--e-medio);
  background: var(--orvalho); border-radius: var(--r-medio);
  padding: var(--e-pequeno) var(--e-medio);
}
.quem-pegou .nome { font-weight: 600; }

/* Grupo de campos sem a moldura que o navegador poe sozinho no fieldset. */
.grupo, .grupo-de-notas, .grupo-de-escolha { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Ficha de dois lados: o rotulo a esquerda e o dado, sempre em mono, alinhado a direita. */
.par-de-dados { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-pequeno); }
.par-de-dados dt { font-size: 14px; color: var(--desbotado); }
.par-de-dados dd { margin: 0; font-family: var(--mono); font-weight: 600; text-align: right; }

/* ------------------------------------------------------------- utilidades */

.pilha { display: flex; flex-direction: column; gap: var(--e-pequeno); }
.fileira { display: flex; align-items: center; gap: var(--e-pequeno); flex-wrap: wrap; }
.fileira-fim { display: flex; align-items: center; gap: var(--e-pequeno); justify-content: flex-end; flex-wrap: wrap; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-pequeno); }
.espaco-pequeno { margin-top: var(--e-pequeno); }
.espaco-medio { margin-top: var(--e-medio); }
.espaco-grande { margin-top: var(--e-grande); }
.so-leitura { color: var(--desbotado); }
.escondido { display: none; }

/* ------------------------------------------------- backoffice da plataforma */
/* As tres telas que so a Zenite abre: painel, saques e extrato de motorista.
   O amarelo NAO entra aqui, e nao e esquecimento: a lei do amarelo diz que ele marca acao do
   caminhoneiro, e estas telas sao da casa. O que entrou usa area de verde, o que falta usa
   vermelho, e nada mais precisa de cor. */

/* Numero de painel dentro da placa verde: o rotulo e o valor viram brancos, senao o cinza de
   .metrica-rotulo desaparece no verde e o valor sai na cor do corpo. */
.placa .metrica-rotulo { color: rgba(255, 255, 255, .82); }
.placa .metrica-valor { color: var(--branco); }

/* O valor por extenso da confirmacao de repasse. Ele existe para ser lido devagar, entao nao e
   mono e nao e miudo: mono alinha digito, e aqui nao ha digito nenhum para alinhar. */
.por-extenso {
  font-family: var(--corpo); font-weight: 600; font-size: 19px; line-height: 1.35;
  color: var(--pare); margin-top: var(--e-minimo);
}

/* Pedido de saque que passou do prazo. Vermelho de recusa em texto, porque nao ha o que recusar:
   a plataforma e que esta devendo resposta. */
.demora { color: var(--pare); font-weight: 600; }

/* Celula de valor no extrato do motorista. A cor entra como AREA da celula, e nunca como filete
   de borda: e a mesma regra da placa, aplicada a um retangulo pequeno. O simbolo de mais ou de
   menos nao existe nesta tabela porque a coluna ja diz, e cor nunca vai sozinha aqui: a linha
   traz o nome do lancamento escrito ao lado. */
.tabela td.celula-entrou { background: var(--orvalho); color: var(--verde-marco); }
.tabela td.celula-saiu { background: var(--pare-papel); color: var(--pare); }
.tabela tbody tr:hover td.celula-entrou { background: #D5E8D7; }
.tabela tbody tr:hover td.celula-saiu { background: #F2D8DA; }

/* ----------------------------------------- lista de espera do caminhoneiro */
/* A unica tela desta pasta que nao e da empresa. Quem preenche ela esta no posto, em pe, com
   o celular em uma mao, entao todo alvo cresce para o dedo de motorista.
   O botao de enviar e AMARELO, e essa e a unica vez que o amarelo aparece como acao no
   console inteiro: a lei do amarelo diz que ele marca a acao do caminhoneiro, e a acao
   desta tela e dele. */

/* So o que se digita cresce. A caixa de marcar tem tamanho proprio, mais abaixo. */
.motorista .campo input[type="text"],
.motorista .campo input[type="tel"],
.motorista .campo select { min-height: var(--alvo-toque); font-size: 17px; }

/* Grupo de escolha e fieldset, para o leitor de tela anunciar a pergunta junto da opcao.
   Fieldset em display flex desalinha a legenda em alguns navegadores, entao ele volta a
   bloco e a ajuda e o erro de dentro dele viram bloco tambem. */
.motorista fieldset.campo { display: block; border: 0; margin: 0; padding: 0; min-width: 0; }
.motorista fieldset.campo .ajuda,
.motorista fieldset.campo .erro-do-campo { display: block; margin-top: 6px; }
.motorista legend {
  padding: 0; margin-bottom: 6px;
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: var(--caixa-alta); text-transform: uppercase; color: var(--desbotado);
}
.motorista .chips { gap: var(--e-pequeno); }
.motorista .chip-escolha {
  min-height: var(--alvo-toque); padding: 10px 20px;
  font-size: 16px; font-weight: 600; border-radius: var(--r-medio);
}
.motorista .escolha { min-height: var(--alvo-toque); align-items: flex-start; }
.motorista .escolha input[type="checkbox"] {
  width: 26px; height: 26px; margin-top: 3px; flex: none;
}
.motorista .escolha span { font-size: 16px; line-height: 1.4; }

/* A caixa de marcar mora dentro de .campo, e .campo > label e o rotulo miudo em caixa alta.
   Sem esta linha a frase do consentimento sai em versal, em mono e em cinza, que e a pior
   forma possivel de escrever justamente a frase que a pessoa precisa ler antes de aceitar.
   Aqui ela volta a ser frase de corpo. */
.motorista .campo > label.escolha {
  font-family: var(--corpo); font-weight: 400; font-size: 16px;
  letter-spacing: normal; text-transform: none; color: var(--asfalto);
}

/* O recado de erro promete campo marcado em vermelho, e chip e caixa de marcar nao tem borda
   de input para pintar. A legenda e o contorno da caixa fazem essa marca aparecer. */
.motorista fieldset.campo.tem-erro legend { color: var(--pare); }
.motorista .campo.tem-erro > label.escolha input[type="checkbox"] {
  outline: 3px solid var(--pare); outline-offset: 2px;
}

.botao-motorista { background: var(--amarelo); color: var(--asfalto); border-color: var(--amarelo); }
.botao-motorista:hover { background: var(--ambar); border-color: var(--ambar); }

/* --------------------------------------------------------------- celular */
/* O operador confere portaria pelo telefone, entao o console inteiro cabe na tela pequena. */

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

@media (max-width: 720px) {
  body { font-size: 17px; }
  .topo-inner { flex-wrap: wrap; padding: 8px var(--e-medio); gap: var(--e-pequeno); }
  .navegacao { order: 3; width: 100%; padding-bottom: 4px; border-top: 1px solid var(--borda); padding-top: 6px; }
  .navegacao-item { font-size: 15px; padding: 8px 10px; min-height: var(--alvo-toque); display: inline-flex; align-items: center; }
  .topo-conta { margin-left: auto; }
  .topo-empresa { max-width: 14ch; }
  .conteudo { padding: var(--e-medio) var(--e-medio) var(--e-amplo); }
  .titulo-tela { font-size: 25px; }
  .grade-2, .grade-3, .grade-4, .grade-5 { grid-template-columns: minmax(0, 1fr); }
  .linha-de-campos, .linha-de-campos-3 { grid-template-columns: minmax(0, 1fr); }
  .cartao { padding: var(--e-medio); border-radius: var(--r-medio); }
  .placa { padding: var(--e-medio) var(--e-grande); }
  .botao { min-height: var(--alvo-toque); font-size: 17px; width: 100%; }
  .aviso-sessao { flex-wrap: wrap; }
  .aviso-sessao .botao { width: 100%; }
  .botao-curto { width: auto; min-height: 40px; }
  .acoes-tela .botao, .acoes-do-formulario .botao { width: 100%; }
  .tabela { font-size: 15px; }
  .tabela thead th, .tabela td { padding: 12px 10px; }
  .visor-digito { width: 56px; height: 76px; font-size: 38px; }
  .tecla { min-height: 74px; font-size: 30px; }
  .retrato-grande { width: 108px; height: 108px; font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

@media print {
  .topo, .rodape, .acoes-tela, .teclado, .aviso-sessao { display: none; }
  body { background: var(--branco); }
  .cartao, .tabela-rolagem { box-shadow: none; border-color: var(--borda-forte); }
}