* {
  box-sizing: border-box;
}

/**
 * `hidden` esconde. Sempre.
 *
 * A regra do navegador e `[hidden] { display: none }`, com especificidade de um
 * seletor de atributo -- qualquer `display` que a folha declare depois ganha
 * dela. Como quase tudo aqui e `display: flex` ou `grid`, marcar um elemento
 * com o atributo `hidden` simplesmente NAO O ESCONDIA, e o mesmo bug voltou em
 * quatro lugares diferentes: campo de formulario que aparece conforme a escolha
 * de outro, segunda fileira de filtros, menu de acoes (que nascia aberto, um
 * por linha da tabela) e o cartao de configuracao do modo de janela.
 *
 * Uma linha aqui resolve a familia inteira. O `!important` e o ponto: sem ele
 * cada `display` novo da folha reabre o mesmo buraco, e o proximo a escrever
 * `<div hidden class="card">` descobre isso na tela do cliente.
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  background: #12141c;
  color: #eee;
}

a {
  color: #6ea8fe;
}

/* ---------- login ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: #1a1d29;
  border: 1px solid #2a2e3f;
  border-radius: 12px;
  padding: 28px;
}

.login-card h1 {
  margin: 0 0 4px;
  font-size: 24px;
}

/* ---------- layout ---------- */

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

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #1a1d29;
  padding: 12px 12px 10px;
  border-right: 1px solid #2a2e3f;
  display: flex;
  flex-direction: column;
  /* o menu fica parado enquanto a tela rola; so ele rola se nao couber na altura */
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* ---------- marca da empresa ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  /* a marca cede o que da sem apertar o nome da empresa: 30px que vao para a
     lista de telas, que e o que a pessoa usa */
  padding: 0 6px 10px;
  margin-bottom: 9px;
  border-bottom: 1px solid #2a2e3f;
}

.brand-logo {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #232739;
  border: 1px solid #2a2e3f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  font-size: 15px;
  color: #6ea8fe;
}

.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text {
  min-width: 0;
}

.brand h1 {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitle {
  margin: 2px 0 0;
  color: #8a8fa3;
  font-size: 12px;
}

/* ---------- navegacao ---------- */

nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

/* ---------------------------------------------------------------------------
   O MENU CABE NA TELA, SEM ROLAGEM
   ---------------------------------------------------------------------------
   Sao 16 telas em 6 grupos. Com 34px por item e 24px por rotulo, a lista pedia
   735px so para ela -- e sobrava barra de rolagem em qualquer notebook. Como a
   lista de modulos nao vai crescer mais, o caminho e apertar o que ja existe em
   vez de esconder o excesso: rolagem escondida com item cortado e pior que
   rolagem visivel.

   Cada numero aqui foi escolhido medindo: 30px continua sendo alvo de mouse
   confortavel e o rotulo de grupo, que e orientacao e nao acao, encolhe mais.
   --------------------------------------------------------------------------- */
.nav-group + .nav-group {
  margin-top: 7px;
}

.nav-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #6a6f82;
  padding: 0 10px 2px;
  line-height: 1.2;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: #b0b4c4;
  text-align: left;
  padding: 5px 12px;
  border-radius: 0 7px 7px 0;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.3;
}

/* o icone herda a cor do item, entao acompanha hover e estado ativo sozinho */
.ico {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: .75;
}

.nav-btn:hover {
  background: #232739;
  color: #eee;
}

.nav-btn:hover .ico {
  opacity: 1;
}

.nav-btn.active {
  background: #22375a;
  border-left-color: #6ea8fe;
  color: #fff;
  font-weight: 600;
}

.nav-btn.active .ico {
  opacity: 1;
  color: #6ea8fe;
}

.sidebar-footer {
  margin-top: auto;
  padding: 9px 6px 0;
  border-top: 1px solid #2a2e3f;
  font-size: 12px;
  color: #8a8fa3;
}

.footer-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.main {
  flex: 1;
  padding: 24px 28px;
  overflow-x: hidden;
}

.main-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.main-head h2 {
  margin: 0;
  font-size: 22px;
}

.hint {
  color: #8a8fa3;
  font-size: 13px;
  margin: 0;
}

/* ---------- forms ---------- */

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: #b0b4c4;
}

/* O lugar de um campo que nao existe para aquele caso.
   Ocupa a mesma celula da grade e usa o mesmo rotulo do campo que substitui:
   a pessoa procura "Operador responsável", encontra o rotulo, e le por que ali
   nao ha o que escolher -- em vez de encontrar um buraco. */
.campo-explicado {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.campo-explicado .campo-rotulo {
  font-size: 13px;
  color: #b0b4c4;
}

.campo-explicado .hint {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed #2a2e3f;
  border-radius: 6px;
  background: #12141c;
}

input, select, textarea {
  background: #12141c;
  border: 1px solid #2a2e3f;
  color: #eee;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #3d82cc;
}

/**
 * O calendario e o relogio dos campos de data sao desenhados pelo NAVEGADOR,
 * em preto -- invisiveis sobre o fundo escuro do sistema. Nao da para
 * estiliza-los; da para dizer ao navegador que a pagina e escura, e ai ele
 * desenha os proprios controles claros. `color-scheme` faz exatamente isso, e
 * de quebra acerta a barra de rolagem e o menu dos selects.
 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select {
  color-scheme: dark;
}

/* o icone continua discreto ate o mouse chegar perto -- so nao mais invisivel */
input::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
}

input:hover::-webkit-calendar-picker-indicator,
input:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

textarea {
  min-height: 70px;
  resize: vertical;
}

button {
  background: #2b6cb0;
  border: none;
  color: #fff;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

button:hover {
  background: #3d82cc;
}

/* link com cara de botao, ex.: "Abrir no WhatsApp" no modal de pre-cadastro */
a.button {
  background: #2b6cb0;
  border: none;
  color: #fff;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
}

a.button:hover {
  background: #3d82cc;
}

button.ghost {
  background: transparent;
  border: 1px solid #2a2e3f;
  color: #b0b4c4;
}

button.ghost:hover {
  background: #232739;
  color: #eee;
}

button.danger {
  background: #7f2d2d;
}

button.danger:hover {
  background: #a03636;
}

button.ok {
  background: #256d4a;
}

button.ok:hover {
  background: #2f8a5d;
}

/* acao que ainda nao pode ser feita (ex.: liberar antes da janela de saida) --
   continua clicavel de proposito, para o clique explicar o motivo em vez de
   simplesmente nao reagir */
button.warn {
  background: #6b4813;
  color: #f0b429;
}

button.warn:hover {
  background: #8a5e18;
}

button.small {
  padding: 5px 10px;
  font-size: 12px;
}

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

/* Formulario do dialogo em grade, e nao em coluna unica.
   Os cadastros ficavam altos demais -- oito campos viravam oito linhas e o
   dialogo passava da altura da tela. Aqui vale para todos de uma vez, em vez
   de cada formulario ter de lembrar de se envolver num .grid. Textarea,
   checkbox e as secoes proprias (ordem de coleta) ocupam a linha inteira. */
#modal-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  align-items: start;
}

#modal-form > label.wide,
#modal-form > label.check,
#modal-form > .order-section,
#modal-form > .checklist,
#modal-form > p,
#modal-form > div:not(.busca-wrap) {
  grid-column: 1 / -1;
}

/* dentro de uma secao o grid e o de sempre */
#modal-form .grid {
  grid-column: 1 / -1;
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ---------- cards ---------- */

.card {
  background: #1a1d29;
  border: 1px solid #2a2e3f;
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 18px;
}

.card h3 {
  margin: 0 0 12px;
  font-size: 16px;
  /* O `?` de ajuda mora dentro do titulo, e o texto dele quebra para a linha de
     baixo ocupando a largura toda. Sem wrap, a explicacao espremeria o titulo
     numa coluna de dois centimetros. */
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* o que o titulo empurra para a direita (botao de acao, contador) continua la */
.card h3 > .no-fim { margin-left: auto; }

/* Dentro do titulo o texto de ajuda e um item de flex: `width:100%` sozinho nao
   o joga para a linha de baixo, porque o flex ainda pode encolhe-lo para caber
   ao lado do `?`. `flex-basis:100%` e o que forca a quebra. */
.card h3 > .ajuda-texto { flex-basis: 100%; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.stat {
  background: #1a1d29;
  border: 1px solid #2a2e3f;
  border-radius: 10px;
  padding: 14px 16px;
}

.stat .value {
  font-size: 28px;
  font-weight: 600;
}

.stat .label {
  color: #8a8fa3;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stat.warn .value { color: #f0b429; }
.stat.bad .value { color: #f16c6c; }

/* indicador que leva a algum lugar: numero que nao abre nada e numero de
   relatorio, nao de painel */
.stat.clicavel { cursor: pointer; transition: border-color .12s, transform .12s; }
.stat.clicavel:hover { border-color: #3d63dd; transform: translateY(-1px); }
.stat.clicavel:active { transform: none; }
/* o cartao e um <button>: sem o reset ele encolhe para fonte de botao e
   centraliza tudo -- tem de continuar identico ao cartao passivo */
button.stat.clicavel { font: inherit; text-align: inherit; }
.stat.ativo { outline: 2px solid #6ea8fe; outline-offset: -2px; }

/* Coluna de acao fixa a direita.
   Em Entrada e saida a acao mais frequente do sistema ficava fora da tela: a
   tabela rolava na horizontal e o botao Saida saia junto. Grudado, ele nunca
   sai da vista, por mais colunas que a linha tenha. */
td .col-acao,
th.col-acao {
  display: flex;
  align-items: center;
  gap: 6px;
}

.table-wrap table td:last-child,
.table-wrap table th:last-child {
  position: sticky;
  right: 0;
  background: #1a1d29;
  box-shadow: -8px 0 8px -8px rgba(0, 0, 0, .6);
}

/* Sticky cria contexto de empilhamento: sem isto, o menu aberto numa linha
   ficava atras dos botoes das linhas de baixo, que pintam depois por virem
   depois no DOM. Enquanto o menu esta aberto, a celula dele vem na frente. */
.table-wrap table td.menu-aberto { z-index: 5; }

.table-wrap table thead th:last-child { background: #191c26; }

/* variacao contra o periodo anterior: numero solto nao vira decisao */
.delta {
  font-size: 11.5px;
  color: #8a8fa3;
  margin-top: 6px;
  letter-spacing: .02em;
}

.delta.up { color: #4ade80; }
.delta.down { color: #f0b429; }
.delta span { color: #6a6f82; }

/* ---------- modo TV ---------- */

/* relogio, data e turno: num monitor de patio essas tres coisas sao metade do
   valor da tela, e ate agora quem olhava de longe tinha de perguntar */
.tv-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #2a2e3f;
}

.tv-hora { font-size: 46px; font-weight: 700; line-height: 1; }
.tv-data { color: #8a8fa3; font-size: 15px; text-transform: capitalize; margin-top: 4px; }
.tv-resumo { text-align: right; font-size: 20px; }
.tv-turno { color: #8a8fa3; font-size: 14px; margin-top: 4px; }

/* patio vazio no monitor: tres colunas com "nenhum veiculo" em letra miuda
   parecem tela travada de longe */
.tv-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  color: #4ade80;
}

.tv-vazio-titulo { font-size: 64px; font-weight: 700; letter-spacing: -.02em; }
.tv-vazio p { color: #8a8fa3; font-size: 18px; margin: 8px 0 0; }

/* quem e esperado hoje, no alto da tela do portao: o agendamento so paga o
   trabalho de existir se chegar ate quem abre o portao */
.esperados-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.esperado {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 8px;
  padding: 7px 12px;
}

.esperado.atrasado { border-color: #6b3b3b; }

.esperado-hora {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  white-space: nowrap;
}

.esperado-quem {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
  overflow: hidden;
}

.esperado-quem .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* barra de filtros: uma linha de botoes, o resto guardado atras de "Mais
   filtros". Ate quatro botoes, sempre da mesma pergunta -- e o que mantem a
   barra menor do que a lista que ela filtra. */
.filtros { margin-bottom: 12px; }

.filtro-topo {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.filtro-topo .subnav { flex: 1; margin-bottom: 0; }

.filtro-acoes {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.filtro-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #2a2e3f;
}

.filtro-select {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #8a8fa3;
  min-width: 150px;
}

.filtro-select select { min-width: 150px; }

/* botao com escolha diferente do padrao ganha marca: senao a lista aparece
   recortada e nada na tela diz por que */
.colunas-abre.ativo,
button.ghost.ativo {
  border-color: #4f7cff;
  color: #dfe4ff;
}

/* curva por hora: barra simples, sem biblioteca -- o que importa e onde esta o
   pico, nao o valor exato de cada hora */
.barras {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  margin-top: 10px;
  padding: 0 2px;
}

.barra {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-width: 0;
}

.barra-valor {
  background: #2f3a5f;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

.barra.pico .barra-valor { background: #4f7cff; }

.barra-hora {
  font-size: 10px;
  color: #6f7488;
  text-align: center;
  padding-top: 4px;
}

/* barra de desfazer: confirmar depois e mais rapido que confirmar antes, e o
   erro de clique tem conserto sem virar cancelamento no historico */
.desfazer {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #232739;
  border: 1px solid #3a4157;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

/* faixa de excecao: so existe no DOM quando ha o que mostrar */
.excecoes { border-color: #6b2626; background: #1e1416; }
.excecoes h3 { margin-bottom: 4px; }

.excecao {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid #2a2e3f;
  cursor: pointer;
  font-size: 13.5px;
}

.excecao:hover { color: #fff; }
.excecao .tag { flex: none; }

/* aviso (laranja) x impedimento (vermelho): o que ainda da para evitar nao pode
   ter a mesma cor do que ja parou o caminhao */
.excecoes:has(.excecao.aviso:only-child) { border-color: #6b4813; background: #1e1a14; }

/* Excecao agrupada por TIPO: uma linha com a contagem, o detalhe por dentro.
   Treze linhas escritas "Ocorrencia grave em aberto" sao a mesma informacao
   treze vezes -- e empurravam o painel inteiro para baixo da dobra. */
.excecao-grupo > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 13.5px;
  color: #d7dae4;
  list-style: none;
}

.excecao-grupo > summary::-webkit-details-marker { display: none; }

.excecao-grupo > summary::before {
  content: "▸";
  color: #8a8fa3;
  font-size: 11px;
  transition: transform .12s;
}

.excecao-grupo[open] > summary::before { transform: rotate(90deg); }
.excecao-grupo > summary:hover { color: #fff; }

/* dentro do grupo a etiqueta ja foi dita no titulo: o item so tem o texto */
.excecao-grupo .excecao {
  padding-left: 22px;
  font-size: 12.5px;
}
.excecao.aviso { color: #f0b429; }
.excecao.aviso:hover { color: #ffd166; }
.stat.good .value { color: #4ade80; }

/* ---------- tables ---------- */

.table-wrap {
  overflow-x: auto;
  position: relative;
}

/* ---------- ordenacao e escolha de colunas ---------- */

th.ordenavel {
  cursor: pointer;
  user-select: none;
}

th.ordenavel:hover {
  color: #d7dae4;
}

.th-ord {
  color: #6ea8fe;
  font-size: 11px;
}

/* botao das colunas: fica sobre o canto direito do cabecalho, onde nao disputa
   espaco com nenhuma coluna */
.colunas-abre {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  background: #232739;
  border: 1px solid #2a2e3f;
  color: #8a8fa3;
  padding: 2px 7px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 5px;
  opacity: .55;
}

.colunas-abre:hover {
  opacity: 1;
  background: #2a2e3f;
  color: #eee;
}

/* com coluna escondida o botao fica aceso: senao a lista parece incompleta
   sem que nada na tela diga por que */
.colunas-abre.ativo {
  opacity: 1;
  color: #6ea8fe;
  border-color: #1d4a6b;
}

/* listas longas de cadastro: a pagina para de crescer com o numero de
   registros -- a rolagem fica dentro da caixa, o cabecalho fica fixo */
.list-scroll {
  max-height: 62vh;
  overflow-y: auto;
}
.list-scroll thead th {
  position: sticky;
  top: 0;
  background: #1a1d29;
  z-index: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #2a2e3f;
  white-space: nowrap;
}

th {
  color: #8a8fa3;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

tbody tr:hover {
  background: #1e2231;
}

td.wrap, th.wrap {
  white-space: normal;
  min-width: 180px;
}

.plate {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  letter-spacing: .08em;
  background: #232739;
  padding: 3px 7px;
  border-radius: 5px;
  display: inline-block;
}

/* Linha de apoio dentro da celula: numero do shipment, chave do veiculo, cidade
   do cliente. So tinha regra dentro de .list-item, entao na tabela ela saia sem
   estilo nenhum -- do tamanho do texto normal e colada no que estava acima, com
   a etiqueta da chave encostando na placa. */
/* A linha de apoio pode quebrar; a linha principal, nao. Sem isto o texto de
   apoio (empresa, motivo, quem autorizou) esticava a coluna e empurrava a
   tabela para fora da tela. */
td .meta {
  color: #8a8fa3;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 5px;
  white-space: normal;
  max-width: 34ch;
}

/* duas chaves na mesma linha (cavalo e carreta) precisam respirar entre si */
td .meta .tag + .tag {
  margin-left: 4px;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: #232739;
  color: #b0b4c4;
  border: 1px solid #2a2e3f;
}

.tag.alta, .tag.em_uso, .tag.manutencao { background: #4a3210; color: #f0b429; border-color: #6b4813; }
/* chave extraviada e vermelha em toda tela que a mostra: Chaveiro, Frota e
   ordem de coleta. A classe e o proprio status, entao a cor nunca diverge. */
.tag.critica, .tag.bad, .tag.extraviada { background: #4a1b1b; color: #f16c6c; border-color: #6b2626; }
.tag.good, .tag.disponivel { background: #143a29; color: #4ade80; border-color: #1d543a; }
.tag.info { background: #14304a; color: #6ea8fe; border-color: #1d4a6b; }

/* ---------- frota: a linha inteira mostra o evento ----------
   A etiqueta "Na mecânica" e texto no meio de texto -- quem varre a tabela nao
   a ve sem ler. Com o `data-evento` que a etiqueta carrega, a linha ganha faixa
   e fundo NA MESMA COR da etiqueta: ambar e "fora de uso, mas no patio";
   vermelho e "problema na estrada". Nenhum vocabulario novo.
   (`tr:has()` dispensa mexer no gerador de tabela; o marcador so existe na
   Frota, entao o seletor global nao alcanca outra tela.) */
tr:has([data-evento="patio"]) td { background: rgba(240, 180, 41, 0.055); }
tr:has([data-evento="patio"]) td:first-child { box-shadow: inset 3px 0 0 #f0b429; }
tr:has([data-evento="estrada"]) td { background: rgba(241, 108, 108, 0.06); }
tr:has([data-evento="estrada"]) td:first-child { box-shadow: inset 3px 0 0 #f16c6c; }
/* onde ele esta e quando volta, embaixo da etiqueta -- em ambar fraco para
   pertencer ao mesmo aviso, sem competir com a placa. As duas classes juntas
   ganham do `td .meta` generico, que senao mantinha o cinza. */
.meta.evento-meta { color: #d9a53a; }

/* ---------- frota: o aviso de conflito de agenda ----------
   O que sobrou da faixa dos 14 dias, que saiu por confundir a operacao: so o
   alarme de coleta marcada em cima de parada programada. E botao porque leva a
   lista ja filtrada -- aviso que so avisa vira paisagem. */
.f14-alerta {
  background: #4a1b1b; color: #f16c6c; border: 1px solid #6b2626;
  border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.f14-alerta:hover { background: #5a2020; }

/* ---------- pagina publica de pre-cadastro ---------- */

.pre-card {
  max-width: 440px;
}

/* ---------- acompanhamento do cliente final (status.html) ----------
   Pagina de fora de casa, quase sempre aberta no celular a partir de um link
   recebido no WhatsApp. Uma tela, uma resposta, nada para clicar. */

.status-card {
  max-width: 420px;
}

/* o dialogo que gera o link: QR de um lado, endereco e avisos do outro */
.link-cliente {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.link-cliente > div:last-child { flex: 1; min-width: 220px; }

.link-qr {
  flex-shrink: 0;
  background: #fff;
  padding: 6px;
  border-radius: 8px;
  line-height: 0;
}

.link-qr svg { width: 130px; height: 130px; display: block; }

.status-agora {
  font-size: 17px;
  font-weight: 600;
  color: #cfe1ff;
  background: #16233a;
  border: 1px solid #2c4468;
  border-left: 3px solid #3d82cc;
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 16px;
}

.status-agora.cancelada {
  color: #ffcfcf;
  background: #2a1618;
  border-color: #5c2b2b;
  border-left-color: #cc3d3d;
}

/* Os quatro passos aparecem sempre, e nao so o atual: ver a posicao no meio
   responde "quanto falta" junto com "onde esta". */
.status-passos {
  list-style: none;
  margin: 0 0 18px;
  padding: 0 0 0 6px;
}

.status-passos li {
  position: relative;
  padding: 0 0 16px 22px;
  font-size: 13.5px;
  color: #6b7085;
}

/* o fio que liga um passo ao outro; o ultimo nao tem para onde ligar */
.status-passos li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: #2a2e3f;
}
.status-passos li:last-child { padding-bottom: 0; }
.status-passos li:last-child::before { display: none; }

.status-passos .bolinha {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #2a2e3f;
  background: #0f1118;
}

.status-passos li.feito { color: #8a8fa3; }
.status-passos li.feito .bolinha { background: #2f6b46; border-color: #2f6b46; }
.status-passos li.feito::before { background: #2f6b46; }

.status-passos li.agora { color: #eee; font-weight: 600; }
.status-passos li.agora .bolinha {
  background: #3d82cc;
  border-color: #3d82cc;
  /* o unico ponto da tela que pede o olho: e a resposta que a pessoa veio ler */
  box-shadow: 0 0 0 3px rgba(61, 130, 204, 0.22);
}

.status-dados {
  border-top: 1px solid #2a2e3f;
  padding-top: 12px;
  margin-bottom: 14px;
}

.status-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
  color: #8a8fa3;
}

.status-linha strong {
  color: #eee;
  font-weight: 600;
  text-align: right;
}

.pre-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.pre-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 8px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  flex-shrink: 0;
}

.pre-info {
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #b0b4c4;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pre-privacy {
  margin-top: 18px;
  padding: 12px 14px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 8px;
}

.pre-privacy p {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: #8a8fa3;
  line-height: 1.5;
}

/* ---------- dialogo ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 8, 14, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}

.modal {
  background: #1a1d29;
  border: 1px solid #2a2e3f;
  border-radius: 12px;
  padding: 22px;
  width: 100%;
  /* dois campos por linha ja pedem mais largura do que os 460 de antes */
  max-width: 620px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
}

/* Formularios grandes (ordem de coleta, entrada na guarita).
   Mais largo = mais campos por linha = menos rolagem, que era a reclamacao: a
   ordem de coleta tem vinte campos, e com 760px eles caiam em tres por linha e
   o dialogo passava de duas telas de altura. O `min()` respeita telas pequenas:
   em monitor estreito ele volta a caber sozinho. */
.modal.wide {
  max-width: min(1080px, 94vw);
}

/* Dialogo do tamanho da tela: para listas em que ninguem pode ficar de fora
   (as placas disponiveis de uma operacao, por exemplo). */
.modal.tela {
  max-width: 96vw;
  width: 96vw;
  max-height: 94vh;
  height: 94vh;
  display: flex;
  flex-direction: column;
}

.modal.tela #modal-form {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  /* o formulario padrao e uma grade de campos; aqui ele e uma LISTA -- sem
     isto a grade esticava as linhas na altura da tela e abria vaos enormes */
  display: block;
}

/* as placas do dialogo de disponiveis: blocos por unidade, placas grandes */
.placas-bloco {
  margin-bottom: 20px;
}

.placas-titulo {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.placas-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.placas-grade .plate {
  font-size: 17px;
  padding: 6px 12px;
}

/* rotulo clicavel do quadro por operacao ("Disponíveis" abre as placas) */
.op-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.op-link:hover {
  color: #6ea8fe;
}

.modal h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.modal .hint {
  margin-bottom: 16px;
}

.modal .msg {
  margin: 12px 0 0;
}

.modal .row {
  margin-top: 16px;
}

/* ---------- patio e fila ---------- */

.queue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  align-items: start;
}

.queue-col {
  background: #1a1d29;
  border: 1px solid #2a2e3f;
  border-radius: 10px;
  padding: 14px;
  /* o quadro nao cresce sem limite: com quarenta veiculos a primeira coluna
     empurrava as outras para fora da tela, e ver a terceira exigia rolar a
     primeira inteira */
  display: flex;
  flex-direction: column;
  max-height: 62vh;
  min-height: 0;
}

.queue-col h3 {
  margin: 0 0 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-shrink: 0;
}

/* so a lista rola; o titulo com o total fica sempre a vista */
.queue-lista {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  /* espaco para a barra de rolagem nao encostar no cartao */
  padding-right: 2px;
}

.queue-cabecalho {
  display: flex;
  align-items: center;
  gap: 8px;
}

.queue-pagina {
  font-size: 11px;
  font-weight: 500;
  color: #8a8fa3;
  font-variant-numeric: tabular-nums;
}

.queue-item {
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.queue-item:last-child { margin-bottom: 0; }

.queue-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.queue-main .dock {
  background: #22375a;
  color: #6ea8fe;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

.queue-meta {
  color: #8a8fa3;
  font-size: 12px;
  margin: 4px 0 0;
}

/* tempo na etapa: fica sempre a direita da placa, para varrer a coluna de cima
   a baixo e achar quem esta parado sem precisar ler o cartao inteiro */
.queue-time {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: #8a8fa3;
}
.queue-time.warn { color: #f0b429; }
.queue-time.bad { color: #f16c6c; }

/* a borda esquerda repete o aviso do tempo: da para ver a coluna inteira de longe */
.queue-item.warn { border-left: 3px solid #f0b429; }
.queue-item.bad { border-left: 3px solid #f16c6c; }

/* ordem de coleta vinculada -- so numero e cliente, nunca valor */
.queue-order {
  font-size: 12px;
  color: #6ea8fe;
  background: #14203a;
  border-radius: 5px;
  padding: 4px 8px;
  margin-bottom: 8px;
}

.queue-item .actions {
  flex-wrap: wrap;
}

/* ocorrencia grave: o cartao precisa gritar, porque e o que impede o caminhao
   de sair e quem esta olhando o monitor tem de saber antes de ir ate a guarita */
.queue-alerta {
  font-size: 12px;
  font-weight: 600;
  color: #f16c6c;
  background: #3a1d1d;
  border-radius: 5px;
  padding: 4px 8px;
}

/* veiculos sem ordem: uma faixa horizontal abaixo das colunas, para nao
   competir com a fila de carregamento nem sumir da vista */
.queue-extra {
  margin-top: 16px;
}

.queue-livre {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.queue-livre .queue-item {
  margin-bottom: 0;
}

/* Frota por operacao: grade unidade x situacao. Cada celula e de UMA unidade
   (cavalo, carreta, Truck) -- os numeros nunca aparecem somados. */
.op-grade {
  display: grid;
  gap: 6px 10px;
  align-items: center;
  padding: 4px 2px;
}

.op-grade .op-cab {
  font-size: 12px;
  font-weight: 600;
  color: #8a8fa3;
  text-align: center;
}

.op-grade .op-rotulo {
  font-size: 13px;
  color: #eee;
  white-space: nowrap;
}

.op-grade .op-num {
  text-align: center;
}

.op-grade .op-num .tag {
  display: inline-block;
  min-width: 30px;
  text-align: center;
}

body.tv-mode .op-grade { gap: 10px 14px; }
body.tv-mode .op-grade .op-cab { font-size: 17px; }
body.tv-mode .op-grade .op-rotulo { font-size: 18px; }
body.tv-mode .op-grade .op-num .tag { font-size: 18px; min-width: 40px; padding: 4px 10px; }

/* Fora da TV os quadros tambem CABEM NA TELA, em qualquer resolucao: o
   conjunto ocupa a altura util da janela, as fileiras a dividem por igual e
   todos os quadros da fileira ficam do mesmo tamanho -- lista maior que o
   espaco rola por dentro do proprio quadro, com o titulo e o total sempre a
   vista. Combinado com o teto de 8 quadros (o botao Quadros escolhe quais),
   nada estoura a tela. Na TV valem as regras da TV, declaradas depois. */
.queue-caber {
  /* o desconto cobre cabecalho, barra de acoes e a nota de rodape que as
     visoes de lista carregam ("nada se altera por aqui") -- e o que zera a
     rolagem da pagina em qualquer resolucao */
  height: calc(100vh - 340px);
  min-height: 340px;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

.queue-caber .queue-col {
  max-height: none;
  min-height: 0;
}

/* a visao Entrada e saida carrega um rodape com botao, mais alto que a nota
   das outras -- o desconto extra zera a rolagem tambem nela */
.queue-caber.caber-acessos {
  height: calc(100vh - 410px);
}

/* Frota por operacao: quadros LARGOS. A grade de numeros nao cabe nos 230px
   dos quadros de lista -- cortada, ela nao serve para nada. Os quadros quebram
   em linhas (nunca rolam na horizontal), e o teto de 8 garante que tudo cabe
   na parede. Na TV o minimo sobe junto com a fonte. */
.queue-larga {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* modo TV: esconde a navegacao e amplia tudo para leitura a distancia */
body.tv-mode .sidebar,
body.tv-mode .main-head,
body.tv-mode #msg {
  display: none;
}

body.tv-mode .main {
  padding: 20px;
}

/* No monitor os quadros ocupam a tela inteira e NAO rolam: o que nao cabe entra
   na proxima pagina, que vira sozinha a cada 15s. Lista com barra de rolagem num
   painel de patio e lista que ninguem le -- nao ha quem role.

   A altura e do CONJUNTO, nao de cada coluna: com dez situacoes de frota elas
   quebram em duas fileiras, e `grid-auto-rows: 1fr` faz as duas dividirem a
   altura em vez de cada uma pedir uma tela. */
body.tv-mode .queue {
  height: calc(100vh - 190px);
  grid-auto-rows: 1fr;
  align-items: stretch;
}

body.tv-mode .queue-col {
  max-height: none;
  height: auto;
  min-height: 0;
}

body.tv-mode .queue-lista {
  overflow: hidden;
}

body.tv-mode .queue-col h3 {
  font-size: 20px;
}

body.tv-mode .queue-pagina {
  font-size: 15px;
  color: #6ea8fe;
}

body.tv-mode .queue-item .plate {
  font-size: 30px;
}

body.tv-mode .queue-meta {
  font-size: 16px;
}

body.tv-mode .queue-main .dock {
  font-size: 20px;
  padding: 4px 12px;
}

body.tv-mode .queue-time {
  font-size: 20px;
}

body.tv-mode .queue-order {
  font-size: 15px;
}

body.tv-mode .queue-alerta {
  font-size: 16px;
}

body.tv-mode #tv-toggle,
body.tv-mode .hint {
  opacity: .35;
}

body.tv-mode .queue-larga {
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  /* Na TV as OUTRAS visoes dividem uma altura fixa porque as listas delas
     paginam sozinhas. O quadro por operacao nao pagina: o conteudo e curto e
     conhecido (ate cinco linhas), entao cada quadro tem a SUA altura -- era a
     divisao de altura que cortava a ultima linha ("Mecânica / parados"). Com o
     teto de 8 quadros, duas fileiras cabem folgadas em qualquer monitor. */
  height: auto;
  grid-auto-rows: auto;
  align-items: start;
}

body.tv-mode .queue-larga .queue-col {
  height: auto;
}

body.tv-mode .queue-larga .queue-lista {
  overflow: visible;
}

/* ---------- tabela de antecedencia por distancia ----------
   Cada faixa e UMA frase: "301 km ate [450] km -> [18] h antes". Sem isto os
   inputs herdam o `width: 100%` do formulario e cada faixa vira seis linhas
   empilhadas, que e ilegivel justamente onde a leitura importa: a regra que
   trava o caminhao no portao. */

.faixas {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.faixa {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 6px;
  font-size: 13px;
  color: #b0b4c4;
}

/* o "de" e derivado da faixa anterior, entao e leitura e nao campo -- largura
   fixa para os numeros ficarem alinhados de uma linha para a outra */
.faixa-de {
  min-width: 78px;
  color: #8a8fa3;
  font-variant-numeric: tabular-nums;
}

.faixa-ate,
.faixa-horas {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.faixa-ate { min-width: 120px; }

.faixa-igual {
  color: #6a6f82;
  font-weight: 700;
}

.faixa-horas { margin-left: auto; }

.faixa input {
  width: 68px;
  padding: 5px 8px;
  text-align: right;
}

/* a ultima faixa mostra "o operador define" como placeholder em vez de um
   numero, e nao cabe em 68px -- vazia ela e a informacao mais importante */
.faixa-aberta input {
  width: 140px;
  text-align: left;
}

/* O Painel rola por dentro; a pagina nao. Numa portaria movimentada ele passava
   da tela e a pagina inteira rolava -- o titulo sumia, e voltar ao topo para
   trocar de tela virava mais um gesto. A altura vem do JS, que sabe onde o
   conteudo comeca. */
#view.painel-scroll {
  overflow-y: auto;
  padding-right: 6px;
}

/* ---------- grade de acessos por perfil ----------
   A pergunta aqui e comparativa ("o porteiro ve isso e o operador nao?"), e
   comparacao pede as colunas lado a lado -- por isso e grade, e nao um
   formulario por perfil. */

table.acessos td.acesso-celula {
  text-align: center;
  width: 120px;
}

table.acessos input[type="checkbox"] {
  width: auto;
  transform: scale(1.2);
}

/* travado aparece marcado e cinza, com o motivo -- e nao some: o gestor precisa
   saber que a regra existe, senao procura onde liga */
table.acessos input:disabled {
  opacity: .45;
  cursor: not-allowed;
}

table.acessos .acesso-celula .meta {
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

tr.acesso-grupo td {
  background: #12141c;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8a8fa3;
  padding-top: 12px;
}

/* contato de quem resolve, no dialogo de conferencia: nome grande e telefone
   clicavel -- o porteiro esta com o telefone na mao, nao com o mouse */
.contato-linha {
  padding: 8px 0;
  border-top: 1px solid #2a2e3f;
}

.contato-linha:first-of-type { border-top: none; }
.contato-linha a { font-size: 15px; font-weight: 600; }

/* ---------- painel de parametros ----------
   Cada parametro e uma decisao com a consequencia escrita embaixo. O que evita
   a tela virar um paredao de caixinhas sem contexto -- "para que serve isso?"
   e a pergunta que o texto de ajuda responde antes de ser feita. */

.par-secao {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}

.par-linha {
  padding: 10px 12px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 7px;
}

.par-linha.check {
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
}

.par-linha.check input { width: auto; margin-top: 3px; flex-shrink: 0; }

.par-frase {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #eee;
}

.par-frase input { width: 90px; padding: 5px 8px; text-align: right; }
.par-frase input[type="text"] { width: 160px; text-align: left; }

.par-ajuda {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.5;
  color: #8a8fa3;
  font-weight: 400;
}

/* ---------- blocos da regra de saida ----------
   Cada bloco e uma decisao, com a frase que a explica logo abaixo. Antes tudo
   isto era um dropdown de tres modos misturando alternativas ("tabela" ou
   "calculo") com um desligamento ("sem trava") no mesmo seletor. */

.regra-bloco {
  margin-top: 14px;
  padding: 12px 14px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 8px;
}

.regra-titulo {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8a8fa3;
  margin-bottom: 10px;
}

/* "O caminhao pode sair ate [60] minutos antes da hora de agenda." -- o campo
   dentro da frase, e nao um rotulo solto acima de uma caixa de texto */
.regra-linha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #b0b4c4;
}

.regra-linha input {
  width: 80px;
  padding: 5px 8px;
  text-align: right;
}

.regra-bloco .check {
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
}

.regra-bloco .check input {
  width: auto;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---------- checklist de entrada ---------- */

.checklist {
  margin-top: 16px;
  padding: 12px 14px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 8px;
}

/* conferencia do retorno: o que o sistema espera ver, para o porteiro bater
   contra o caminhao que esta na frente dele antes de confirmar */
.confere {
  margin-top: 12px;
  padding: 12px 14px;
  background: #12141c;
  border: 1px solid #3a4a3a;
  border-radius: 8px;
}

.confere-linhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
  margin-bottom: 10px;
}

.confere-linhas strong {
  font-size: 14px;
  letter-spacing: .02em;
}

.checklist-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8a8fa3;
  margin-bottom: 10px;
}

label.check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #d5d8e2;
  padding: 4px 0;
  cursor: pointer;
}

label.check input {
  width: auto;
  margin: 0;
}

/* ---------- lista de retorno na guarita ----------
   Uma linha por CONJUNTO, e nao por placa: com trinta caminhoes na rua a lista
   placa a placa virava um paredao de casinhas em que ninguem achava o cavalo e
   a carreta que andam juntos. As duas metades so aparecem quando a volta foi
   parcial, que e a excecao. */

.volta-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.volta-grupo {
  padding: 8px 10px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-radius: 7px;
}

.volta-cabeca {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
}

.volta-cabeca input { width: auto; flex-shrink: 0; }
.volta-cabeca .plate { margin-right: 4px; }

.volta-detalhe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 0 26px;
}

.volta-parte {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #8a8fa3;
}

.volta-parte input { width: auto; }
.volta-detalhe .meta { white-space: normal; }

.volta-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 4px;
}

.volta-item .meta { white-space: normal; }

.logo-editor {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.logo-preview {
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 26px;
  font-weight: 700;
  color: #6ea8fe;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-cell {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  color: #6ea8fe;
}

.logo-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

input[type="file"] {
  padding: 6px;
  font-size: 13px;
}

.empty {
  color: #8a8fa3;
  font-size: 13px;
  padding: 12px 0;
}

.msg {
  margin: 0 0 12px;
  font-size: 13px;
  min-height: 18px;
}

.msg.error { color: #f16c6c; }
.msg.ok { color: #4ade80; }

.notice {
  border-left: 3px solid #2b6cb0;
  background: #1e2231;
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-bottom: 10px;
}

.notice.alta { border-left-color: #f0b429; }
.notice.critica { border-left-color: #f16c6c; }
.notice strong { display: block; margin-bottom: 3px; }
.notice p { margin: 0; font-size: 13px; color: #b0b4c4; }

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #2a2e3f;
  font-size: 13px;
}

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

.list-item .meta { color: #8a8fa3; font-size: 12px; }

.late { color: #f0b429; }
.done { color: #4ade80; text-decoration: line-through; }

.subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.subnav button {
  background: #1a1d29;
  border: 1px solid #2a2e3f;
  color: #b0b4c4;
}

.subnav button.active {
  background: #2b6cb0;
  color: #fff;
  border-color: #3d82cc;
}

/* Cadastros em grupos: com oito abas numa fila so a tela virava uma parede de
   botoes que quebrava em duas linhas sem dizer o que era o que */
.cad-grupos {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.cad-grupo-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #6a6f82;
  margin-bottom: 6px;
}

.cad-grupo .subnav {
  margin-bottom: 0;
}

/* filtro dentro de um card (tipo de pessoa, tipo de frota): e um recorte da
   lista logo abaixo, nao uma troca de tela -- por isso menor que a subnav */
.subnav.compact {
  margin: 0 0 10px;
  gap: 6px;
}

.subnav.compact button {
  padding: 4px 10px;
  font-size: 12.5px;
}

.actions {
  display: flex;
  gap: 6px;
}

/* ---------- menu de acoes ---------- */

.acoes {
  display: flex;
  gap: 6px;
  align-items: center;
}

.menu-acoes {
  position: relative;
}

/* o botao de tres pontos e quadrado: sem isso ele ficava do tamanho de um
   botao de texto e voltava a ocupar a largura que o menu veio economizar */
.menu-acoes .menu-abre {
  padding: 4px 9px;
  font-size: 15px;
  line-height: 1;
}

/* `position: fixed` de proposito: dentro da tabela o menu vive em duas caixas
   com overflow (a rolagem horizontal e a vertical da lista), e absolute era
   recortado por elas. Fixo, ele escapa -- a posicao vem do retangulo do botao,
   calculada na hora de abrir. */
.menu-lista {
  position: fixed;
  z-index: 60;
  min-width: 165px;
  background: #1a1d29;
  border: 1px solid #2a2e3f;
  border-radius: 8px;
  padding: 5px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Sem esta linha o menu nasce ABERTO: `display: flex` acima ganha do
   `[hidden] { display: none }` do navegador, que tem especificidade menor.
   Era isso que enchia a tela de menus abertos, um por linha da tabela. */
.menu-lista[hidden] {
  display: none;
}

.menu-lista .menu-item {
  background: none;
  border: 0;
  color: #d7dae4;
  text-align: left;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  width: 100%;
}

.menu-lista .menu-item:hover {
  background: #232739;
}

/* Cabecalho de grupo no menu de acoes: diz EM QUE o clique vai mexer.
   Sem ele, a mesma acao repetida para alvos diferentes ("Mecanica (ABC1D23)",
   "Mecanica (XYZ4E56)") obrigava a ler cada linha ate o fim. */
.menu-grupo {
  padding: 9px 10px 4px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #6a6f82;
  white-space: nowrap;
}

.menu-grupo + .menu-item { margin-bottom: 1px; }
.menu-item + .menu-grupo { margin-top: 4px; border-top: 1px solid #2a2e3f; }

.menu-lista .menu-item.danger {
  color: #f16c6c;
}

.company-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8a8fa3;
}

.company-pick select { width: auto; min-width: 190px; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  /* no celular o menu volta a rolar com a pagina: fixar tiraria metade da tela */
  .sidebar { width: 100%; position: static; height: auto; overflow: visible; }
  .brand { padding-bottom: 12px; margin-bottom: 10px; }

  /* no celular o menu vira faixa horizontal: grupos e rotulos saem do caminho */
  nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .nav-group { display: contents; }
  .nav-group-label { display: none; }
  .nav-btn {
    width: auto;
    border-left: none;
    border-radius: 999px;
    border: 1px solid #2a2e3f;
    padding: 6px 12px;
    gap: 7px;
  }
  .nav-btn .ico { width: 15px; height: 15px; }
  .nav-btn.active { border-color: #3d82cc; }

  .sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
  }
  .footer-actions { margin-top: 0; }
  .main { padding: 16px; }
}

/* ---------------------------------------------------------------------------
   CELULAR (ate 640px) -- a guarita na mao do porteiro
   ---------------------------------------------------------------------------
   Nao e aplicativo: e a mesma tela, no tamanho que cabe. Duas coisas quebravam
   de verdade a 360px, e as duas foram medidas antes de mexer:

   1. o menu ocupava 336px de uma tela de 760 -- 44% em navegacao, num aparelho
      em que o porteiro quer ver a fila. Agora ele nasce fechado.
   2. os alvos de toque tinham 13px (as caixas do checklist do turno) e 24px
      (os botoes "Retirar" e "Devolver" do chaveiro). Botao de 24px e certeiro
      no mouse e loteria no polegar.

   O que NAO mudou: a densidade do desktop. Crescer botao em todo lugar so para
   servir ao celular estragaria a tela em que o sistema e usado o dia inteiro.
   --------------------------------------------------------------------------- */

.menu-toggle { display: none; }

@media (max-width: 640px) {
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand-text { flex: 1; min-width: 0; }
  .brand-text h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .menu-toggle {
    display: block;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 8px;
    background: #1a1d29;
    border: 1px solid #2a2e3f;
    color: #cfd3e0;
    font-size: 14px;
  }

  /* fechado por padrao; a classe no body abre. A navegacao e um estado da
     pagina, e nao de um componente -- por isso mora no body. */
  #nav { display: none; }
  body.nav-aberta #nav { display: flex; }
  body.nav-aberta .menu-toggle { background: #22375a; border-color: #3d82cc; color: #cfe1ff; }

  /* o rodape do menu (usuario, Sair) acompanha o menu: sozinho na tela ele so
     empurrava o conteudo para baixo */
  .sidebar-footer { display: none; }
  body.nav-aberta .sidebar-footer { display: flex; }

  .nav-btn { min-height: 40px; }

  /* Alvos de toque. 38px nao e o ideal de manual (44px), e o que cabe: numa
     linha de tabela com tres acoes, 44px empurraria a linha para 60px de altura
     e caberiam tres registros na tela. */
  .main button,
  #view button,
  .modal button { min-height: 38px; }

  /* O `?` e a escolha de colunas continuam pequenos de proposito: sao controles
     de segunda ordem, e cresce-los rouba espaco do titulo. Sem esta excecao, o
     `?` redondo virava uma pilula torta de 24x38 ao lado do titulo.

     O `#view` na frente e obrigatorio: a regra acima traz `#view button`, e um
     seletor de ID ganha de qualquer quantidade de classes. Escrito so como
     `.main .ajuda`, o `width` pegava e a altura nao -- meio efeito, que e pior
     que nenhum. */
  #view .ajuda,
  .modal .ajuda { min-height: 24px; width: 24px; height: 24px; }
  .main .help-btn { min-height: 24px; height: 24px; }
  #view .colunas-abre { min-height: 30px; }

  /* A caixa do checklist tinha 13px. E o primeiro toque do expediente, repetido
     item por item, e errar significa abrir o turno com um item desmarcado.

     O `body` na frente nao e enfeite: `label.check input { width: auto }` tem
     especificidade (0,1,2) e ganhava de `input[type=checkbox]` (0,1,1) -- a
     caixa voltava calada aos 13px do navegador. Com `body` a conta empata, e no
     empate vence quem vem depois, que e este bloco. */
  body input[type="checkbox"],
  body input[type="radio"] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* 16px no campo impede o zoom automatico do iOS ao focar -- o "pulo" que
     desalinha a tela inteira e obriga a beliscar para voltar.
     Caixa e radio ficam de fora do `min-height`: com 22px de largura e 40px de
     altura eles viravam retangulos esticados. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
    min-height: 40px;
  }

  .main { padding: 12px; }
  .card { padding: 12px; }

  /* uma coluna: duas colunas de formulario a 360px dao 160px por campo, que nao
     cabe nem uma placa com a etiqueta em cima */
  .grid { grid-template-columns: 1fr; }
}

.hint.ok-hint { color: #4ade80; }

/* ---------- ordem de coleta ---------- */

.order-section {
  border: 1px solid #2a2e3f;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.order-section-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8a8fa3;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  /* o texto de ajuda mora aqui dentro e precisa quebrar para a linha de baixo,
     ocupando a largura toda em vez de espremer o titulo */
  flex-wrap: wrap;
}

/* bloco financeiro marcado, para o operador enxergar a fronteira do dado */
.order-section.restricted {
  border-color: #6b2626;
  background: #1d1517;
}

.order-section.restricted .order-section-head {
  color: #f16c6c;
}

/* ---------- ajuda sob demanda ----------
   O texto de instrucao ocupava mais espaco que os campos e ninguem que ja sabe
   usar precisava dele todo dia. Vira um `?` do lado do titulo: um clique abre,
   outro fecha. Nada some -- so para de disputar espaco com o formulario. */

.ajuda {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  background: #232739;
  border: 1px solid #2a2e3f;
  color: #8a8fa3;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ajuda:hover,
.ajuda.aberta {
  background: #22375a;
  border-color: #3d82cc;
  color: #cfe1ff;
}

/* Uma linha de rodape que tambem carrega um `?` e um botao. Precisa ser `div` e
   nao `p`: o texto da ajuda e uma `div`, e o navegador fecha o `<p>` sozinho ao
   encontrar uma -- o texto sairia de dentro do paragrafo e o `?` perderia o
   irmao que ele abre. */
.linha-ajuda {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.linha-ajuda > .ajuda-texto { flex-basis: 100%; }
.linha-ajuda > .no-fim { margin-left: auto; }

.ajuda-texto {
  /* ocupa a linha inteira da grade do dialogo, abaixo do titulo */
  grid-column: 1 / -1;
  width: 100%;
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #12141c;
  border: 1px solid #2a2e3f;
  border-left: 2px solid #3d82cc;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #b0b4c4;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

/* ---------- campo de busca com filtro ---------- */

.busca-wrap {
  position: relative;
}

.busca-lista {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 3px;
  background: #1a1d29;
  border: 1px solid #3d82cc;
  border-radius: 7px;
  max-height: 264px;
  overflow-y: auto;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
}

.busca-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: left;
  padding: 7px 11px;
  cursor: pointer;
  font-size: 13.5px;
  color: #eee;
}

.busca-item em {
  font-style: normal;
  font-size: 11.5px;
  color: #8a8fa3;
}

.busca-item:hover,
.busca-item.marcado {
  background: #22375a;
}

.busca-item.marcado em {
  color: #b0b4c4;
}

/* ---------- secoes recolhiveis do painel ---------- */

details.card > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

details.card > summary::-webkit-details-marker {
  display: none;
}

/* seta que gira ao abrir, desenhada em CSS para nao depender de fonte */
details.card > summary::before {
  content: "";
  width: 0;
  height: 0;
  flex-shrink: 0;
  border-left: 5px solid #6a6f82;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s;
}

details.card[open] > summary::before {
  transform: rotate(90deg);
}

details.card > summary h3 {
  margin: 0;
}

details.card[open] > summary {
  margin-bottom: 12px;
}

details.card > summary:hover h3 {
  color: #fff;
}

/* ---------- manual ---------- */

/* o "?" fica colado no titulo da tela: a ajuda que a pessoa procura e sempre a
   da tela em que ela ja esta, nao um indice generico */
.help-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  margin-left: 10px;
  border-radius: 50%;
  background: #22283a;
  color: #8a8fa3;
  border: 1px solid #2a2e3f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.help-btn:hover {
  background: #2c3450;
  color: #fff;
}

.manual-grupo {
  margin: 22px 0 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #8a8fa3;
}

.manual-item summary h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.manual-item summary h3 svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.manual-item p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.55;
}

.manual-quando {
  color: #8a8fa3;
}

.manual-passos {
  margin: 0 0 10px;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.7;
}

/* o que costuma dar errado: destacado porque e o que evita chamado de suporte */
.manual-atencao {
  background: #1d2333;
  border-left: 3px solid #6ea8fe;
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
  color: #b9bdcc;
  margin: 0 !important;
}

/* ---------- painel compacto ---------- */

/* O painel e a tela que mais acumula cartao: com 9 indicadores no tamanho
   normal a pagina ja comecava com tres fileiras antes de qualquer conteudo.
   A variante compacta cabe em uma ou duas, sem perder a leitura de relance. */
.stats.compact {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

/* Reincidencia: motorista, cliente e local lado a lado.
   Sao tres perguntas da mesma familia ("quem repete?"), e ler as tres na mesma
   altura e o que mostra quando o atraso e do motorista e quando e do CD --
   empilhadas, uma some sob a rolagem e a comparacao se perde. Abaixo de 900px
   nao cabem tres colunas legiveis e elas empilham. */
.reincidencia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.reinc-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #8a8fa3;
  margin-bottom: 6px;
}

/* Lista, e nao tabela.
   Tres colunas de tabela dentro de uma caixa de 260px rolavam de lado e
   quebravam "3 de 4" na vertical -- o numero que a pessoa veio ler era o mais
   maltratado da tela. Em lista, o nome ocupa a linha inteira e os numeros vem
   embaixo: cabe em qualquer largura sem rolagem horizontal. */
.reinc-item {
  padding: 8px 10px;
  border: 1px solid #2a2e3f;
  border-radius: 6px;
  background: #12141c;
  margin-bottom: 6px;
}

.reinc-nome {
  font-size: 13px;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

.reinc-num {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 12px;
  color: #8a8fa3;
}

.stats.compact .stat {
  padding: 9px 11px;
}

.stats.compact .value {
  font-size: 20px;
  line-height: 1.15;
}

.stats.compact .label {
  font-size: 10.5px;
  letter-spacing: .02em;
  text-transform: none;
}

/* aviso critico e a unica coisa que continua aberta de cara no painel */
.avisos-topo .notice:last-of-type {
  margin-bottom: 0;
}

/* ---------- aviso de turno nao aberto ---------- */

/* Fica acima do conteudo em todas as telas ate o porteiro abrir o turno.
   E aviso, nao bloqueio: emergencia no portao nao pode esperar burocracia. */
.shift-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #4a3210;
  border: 1px solid #6b4813;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  color: #f0b429;
  font-size: 13px;
}

/* botao do checklist de turno alinhado a direita do cabecalho da caixa */
.checklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ---------- impressao ---------- */

/*
 * Ordem de coleta, livro de ocorrencias e passagem de turno acabam no papel:
 * o motorista leva a ordem, a ocorrencia vai para a pasta, o turno e assinado.
 * Sem isto a impressao saia com o menu lateral, os botoes e o fundo escuro
 * gastando tinta -- e o conteudo espremido em meia pagina.
 *
 * A regra e uma so: some tudo o que e navegacao e acao, e o papel fica branco
 * com texto preto. Nenhuma tela precisa saber que existe impressao.
 */
/* cabecalho de papel: invisivel na tela, obrigatorio na folha */
.print-head { display: none; }

@media print {
  body {
    background: #fff;
    color: #000;
  }

  /* Tudo o que serve para OPERAR a tela sai da folha: menu, botao, campo de
     filtro e o cartao inteiro de consulta. Antes so os botoes e alguns campos
     eram escondidos -- o rotulo "Buscar", as caixas de data e o cartao em volta
     continuavam, e a folha comecava com um formulario em branco. */
  /* o cabecalho de papel ja diz de que tela e: o titulo da interface repetiria.
     E BOTAO NAO IMPRIME -- nenhum: "Editar", "x", "+ Novo cadastro" e a coluna
     de acao inteira sao interface, e no papel viravam tarja preta na margem. */
  .sidebar,
  .main-head,
  .subnav,
  .cad-grupos,
  button,
  .actions,
  .col-acao,
  .menu-abre,
  .menu-lista,
  .colunas-abre,
  .desfazer,
  #shift-warning,
  #msg,
  #company-pick,
  [data-busca-local],
  [data-goto],
  .filtro-linha,
  .filtros,
  .nao-imprime {
    display: none !important;
  }

  /* label que so existe para embrulhar um campo de filtro nao imprime sozinho */
  label:has([data-busca-local]),
  label:has(input[type="date"]),
  label:has(input[type="time"]),
  label:has(select) {
    display: none !important;
  }

  .print-head {
    display: block;
    border-bottom: 2px solid #000;
    padding-bottom: 8px;
    margin-bottom: 14px;
  }

  .print-empresa { font-size: 17px; font-weight: 700; }
  .print-tela { font-size: 13px; }
  .print-recorte { font-size: 12px; font-style: italic; margin-top: 2px; }
  .print-rodape { font-size: 11px; color: #444; margin-top: 4px; }

  /* 100vh no papel e uma pagina inteira de nada antes do conteudo */
  .app { display: block; min-height: 0; }
  .main { padding: 0; overflow: visible; }
  #view { min-height: 0 !important; }

  /* a tabela vive dentro de um container que rola na horizontal; no papel o
     container encolhia a tabela em vez de deixa-la ocupar a folha */
  .table-wrap,
  .list-scroll {
    overflow: visible !important;
    max-height: none !important;
    width: auto !important;
  }

  table { width: 100% !important; table-layout: auto !important; }

  .card,
  .stat,
  .table-wrap {
    background: #fff;
    border-color: #999;
    box-shadow: none;
    break-inside: avoid;
  }

  th, td {
    border-color: #bbb;
    color: #000;
    white-space: normal;
  }

  thead, th { background: #eee !important; }

  /* a etiqueta colorida vira contorno: em impressora preto e branco, fundo
     escuro com texto claro sai como um borrao */
  .tag {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #666 !important;
  }

  .hint, .meta { color: #444; }
  .plate { background: #fff !important; border-color: #666; color: #000; }

  /* a coluna de acao gruda a direita com fundo proprio, para o botao Saida nao
     sair da vista ao rolar. No papel nao ha rolagem, e o fundo escuro virava
     uma tarja preta na ultima coluna */
  td:last-child,
  th:last-child {
    position: static !important;
    background: transparent !important;
  }

  /* bloco fechado no painel imprime aberto: no papel nao ha o que clicar */
  details { display: block; }
  details > summary { list-style: none; }
  details > div { display: block !important; max-height: none !important; overflow: visible !important; }

  .list-scroll { max-height: none !important; overflow: visible !important; }

  a[href]::after { content: ""; }
}