/* E4 fatia 2 (DISPATCH-010) — Central de Fretes: lista, detalhe e registros.
 *
 * ⚠️ REGRA DESTE ARQUIVO: nenhuma cor literal fora de um fallback de token.
 * Todo `--u-*` vem com segundo argumento — `var(--u-token, <valor-anterior>)` — porque
 * as cinco flags da UIX01 são encadeadas e são o caminho de ROLLBACK dela. Ligadas (o
 * estado de hoje) a tela sai no vocabulário novo; desligadas, degrada para a paleta
 * anterior em vez de virar texto invisível sobre fundo invisível. Há teste varrendo
 * este arquivo atrás de `var(--u-...)` sem fallback.
 *
 * Namespace `fr-` de propósito: `.dw` é redefinido por cadastros.css e por pedido.css
 * (a ordem de carga em index.html é significativa por causa disso) e herdar essa briga
 * de cascata só para reusar três regras seria trocar duplicação declarada por defeito.
 */

.fr-pagina { display: flex; flex-direction: column; gap: 18px; }

.fr-topo, .fr-det-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.fr-titulo { margin: 0; font-size: 1.5rem; color: var(--u-texto, #263238); }
.fr-sub { margin: 2px 0 0; color: var(--u-texto-2, #78909c); font-size: .92rem; }
.fr-voltar { color: var(--u-texto-2, #78909c); text-decoration: none; font-size: .9rem; }
.fr-voltar:hover { text-decoration: underline; }
/* DEC-0012 — as ações do cabeçalho da lista: o destaque das cotações + o novo frete. */
.fr-topo-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-cod-grande { font-family: var(--u-fonte-mono, ui-monospace, monospace); letter-spacing: .5px; }

/* ------------------------------------------------------------------ filtros */
.fr-filtros { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.fr-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fr-chip {
  border: 1px solid var(--u-linha, #cfd8dc);
  background: var(--u-superficie, #fff);
  color: var(--u-texto-2, #546e7a);
  border-radius: var(--u-raio-controle, 999px);
  padding: 6px 12px; font-size: .85rem; cursor: pointer;
  min-height: var(--u-alvo-toque, 32px);
}
.fr-chip:hover { background: var(--u-hover, #eceff1); }
.fr-chip.ativo {
  background: var(--u-verde-marca, #5d8026);
  border-color: var(--u-verde-marca, #5d8026);
  color: var(--u-marca-ink, #fff);
}
.fr-sel { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--u-texto-2, #546e7a); }
.fr-sel select, .fr-sel input, .fr-campo select, .fr-campo input {
  border: 1px solid var(--u-linha, #cfd8dc);
  background: var(--u-superficie, #fff);
  color: var(--u-texto, #263238);
  border-radius: var(--u-raio-controle, 6px);
  padding: 6px 10px; min-height: var(--u-altura-campo, 34px); font: inherit;
}
/* E5 (DEC-0016 §1.1.2 / HANDOFF-009 §3.2) — placeholder é só EXEMPLO, nunca informação
 * (a unidade e o nome do campo estão no rótulo): visivelmente mais claro que valor digitado,
 * nos dois temas. Secundário com opacidade — sem repor o --u-texto-3 removido na UIX01 F4
 * (placeholder não é nó de texto medido pelo gate) e sem cor literal nova. */
.fr-campo input::placeholder { color: var(--u-texto-2, #6D7467); opacity: .55; }

/* ------------------------------------------------------------------ tabela */
.fr-tabela-wrap { overflow-x: auto; }
.fr-tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.fr-tabela th {
  text-align: left; padding: 8px 10px; font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .4px;
  color: var(--u-texto-2, #78909c);
  border-bottom: 1px solid var(--u-linha, #cfd8dc);
}
.fr-tabela td {
  padding: 10px; border-bottom: 1px solid var(--u-linha, #eceff1);
  color: var(--u-texto, #37474f);
}
.fr-tabela tbody tr { cursor: pointer; }
.fr-tabela tbody tr:hover { background: var(--u-hover, #f5f7f8); }
.fr-tabela tbody tr:focus-visible { outline: 2px solid var(--u-verde-marca, #5d8026); outline-offset: -2px; }
.fr-num { text-align: right; white-space: nowrap; }
.fr-data { white-space: nowrap; color: var(--u-texto-2, #78909c); }
.fr-cod a { font-family: var(--u-fonte-mono, ui-monospace, monospace); color: var(--u-verde-texto, #33691e); text-decoration: none; }
.fr-cod a:hover { text-decoration: underline; }
.fr-arq { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-mono { font-family: var(--u-fonte-mono, ui-monospace, monospace); }
.fr-td-vazio { color: var(--u-texto-2, #90a4ae); font-style: italic; }
.fr-tabela-mini td, .fr-tabela-mini th { padding: 7px 10px; }

/* --------------------------------------------------------------- status pill */
.fr-st {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
}
/* ⚠️ ACHADO NO GATE VISUAL, e a razão de o gate existir: a 1ª versão pintava
 * "Contratado" com `background: var(--u-info)` e `color: var(--u-tinte-ink)`.
 * Os DOIS são cores de TEXTO na paleta (--u-info: #6D7467, --u-tinte-ink: #575D53) —
 * o pill saiu escuro sobre escuro, contraste ~1,2:1, ilegível. Ler o CSS não mostrava;
 * o render mostrou na primeira olhada.
 *
 * A paleta só tem QUATRO pares fundo/tinta válidos (neutro, âmbar, verde, erro) e há
 * SEIS status. A saída não é inventar um quinto par: é distinguir por FORMA, que é o
 * que a própria UIX01 fez para separar "aguardando" de "sugestão" (borda sólida ×
 * tracejada). Os três status de repouso dividem o par neutro e se separam pela borda:
 *   rascunho  → tracejada (é provisório)
 *   contratado→ sólida e forte (há compromisso firmado)
 *   encerrado → sem borda, apagado (terminal, arquivado)
 */
.fr-st-neutro { background: var(--u-neutro-fundo, #eceff1); color: var(--u-neutro-ink, #455a64); }
.fr-st-rascunho {
  background: var(--u-neutro-fundo, #eceff1); color: var(--u-neutro-ink, #455a64);
  border: 1px dashed var(--u-linha-forte, #90a4ae);
}
.fr-st-firme {
  background: var(--u-neutro-fundo, #eceff1); color: var(--u-neutro-ink, #455a64);
  border: 1px solid var(--u-linha-forte, #546e7a); font-weight: 700;
}
.fr-st-ambar  { background: var(--u-ambar-fundo, #fff8e1); color: var(--u-ambar, #e65100); }
.fr-st-verde  { background: var(--u-verde-fundo, #e8f5e9); color: var(--u-verde-ink, #2e7d32); }
.fr-st-erro   { background: var(--u-erro-fundo, #ffebee);  color: var(--u-erro, #c62828); }

/* ----------------------------------------------------------------- pendência */
.fr-pends { display: inline-flex; gap: 5px; margin-left: 8px; flex-wrap: wrap; }
.fr-pend {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  background: var(--u-ambar-fundo, #fff8e1);
  color: var(--u-ambar, #e65100);
  border: 1px solid var(--u-ambar, #ffb300);
}
/* O alerta do §2.3 do HANDOFF-005: "visualmente inequívoco", não texto de rodapé. */
.fr-alerta {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--u-raio-cartao, 10px);
  background: var(--u-ambar-fundo, #fff8e1);
  border: 1px solid var(--u-ambar, #ffb300);
  border-left-width: 5px;
  color: var(--u-texto, #4e342e);
}
.fr-alerta-ico { font-size: 1.3rem; line-height: 1.2; }
.fr-alerta-txt ul { margin: 6px 0 0; padding-left: 18px; }
.fr-alerta-txt li { margin: 3px 0; }
.fr-alerta-nota { margin: 8px 0 0; font-size: .84rem; color: var(--u-texto-2, #6d4c41); }

/* ------------------------------------------------------------------- seções */
.fr-secao {
  background: var(--u-superficie, #fff);
  border: 1px solid var(--u-linha, #e0e0e0);
  border-radius: var(--u-raio-cartao, 10px);
  padding: 16px 18px;
}
.fr-secao h2 { margin: 0 0 4px; font-size: 1.05rem; color: var(--u-texto, #263238); }
.fr-secao-nota { margin: 0 0 12px; font-size: .86rem; color: var(--u-texto-2, #78909c); }

.fr-dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px; margin: 12px 0 0; }
.fr-dado dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .4px; color: var(--u-texto-2, #90a4ae); }
.fr-dado dd { margin: 2px 0 0; color: var(--u-texto, #263238); }

/* ------------------------------------------------------------------- ações */
.fr-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--u-linha, #eceff1); }
.fr-bt-reabrir { border-color: var(--u-ambar, #ffb300); color: var(--u-ambar, #e65100); }
.fr-bt-excluir { margin-left: auto; color: var(--u-erro, #c62828); border-color: var(--u-erro, #ef9a9a); }
.fr-bt-mini { padding: 3px 10px; font-size: .8rem; min-height: 0; }
.fr-somente-leitura { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--u-linha, #eceff1); font-size: .88rem; color: var(--u-texto-2, #78909c); }

/* ------------------------------------------------------------------ upload */
.fr-upload { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--u-linha, #eceff1); }
.fr-campo { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--u-texto-2, #546e7a); }
.fr-campo small { font-size: .75rem; color: var(--u-texto-2, #90a4ae); }
.fr-campo-arq input[type="file"] { font-size: .82rem; }
.fr-campo-linha { display: flex; gap: 12px; flex-wrap: wrap; }
.fr-campo-linha .fr-campo { flex: 1 1 150px; }

/* -------------------------------------------------------------- histórico */
.fr-hist { list-style: none; margin: 0; padding: 0; }
.fr-hist-item { display: flex; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--u-linha, #eceff1); font-size: .88rem; }
.fr-hist-item:last-child { border-bottom: 0; }
.fr-hist-quando { flex: 0 0 145px; color: var(--u-texto-2, #90a4ae); white-space: nowrap; font-size: .82rem; }
.fr-hist-texto { color: var(--u-texto, #37474f); }
.fr-hist-pend { display: block; font-size: .78rem; color: var(--u-ambar, #e65100); }

/* ---------------------------------------------------------------- vazio */
.fr-vazio { text-align: center; padding: 40px 20px; color: var(--u-texto-2, #78909c); }
.fr-vazio-ico { font-size: 2.4rem; opacity: .55; }
.fr-vazio p { margin: 6px 0; }
.fr-vazio-sub { font-size: .88rem; }

/* ------------------------------------------------------------- paginação */
.fr-pag { display: flex; gap: 12px; align-items: center; justify-content: center; font-size: .86rem; color: var(--u-texto-2, #78909c); }

/* ------------------------------------------------------ painel de criação */
.fr-dw-fundo {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(38, 50, 56, .45);
  display: flex; justify-content: flex-end;
}
.fr-dw {
  width: min(520px, 100%); height: 100%; overflow-y: auto;
  background: var(--u-fundo, #fff);
  border-left: 1px solid var(--u-linha, #cfd8dc);
  display: flex; flex-direction: column;
}
.fr-dw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--u-linha, #e0e0e0);
}
.fr-dw-head h2 { margin: 0; font-size: 1.1rem; color: var(--u-texto, #263238); }
.fr-dw-x { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: var(--u-texto-2, #78909c); }
.fr-dw-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fr-dw-nota { margin: 0; font-size: .84rem; color: var(--u-texto-2, #78909c); }
.fr-dw-erro {
  padding: 9px 12px; border-radius: var(--u-raio-controle, 6px);
  background: var(--u-erro-fundo, #ffebee); color: var(--u-erro, #c62828); font-size: .87rem;
}
.fr-dw-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ------------------------------------------- E5 (DEC-0016): fechamento do frete */
/* Mesmos átomos da tela (fr-dados, fr-campo, uix-bt); só o arranjo é novo. */
.fr-fech-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 20px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--u-linha, #eceff1);
}
.fr-fech-submit { display: flex; align-items: flex-end; }
.fr-fech-acoes {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--u-linha, #eceff1);
}
.fr-fech-acoes .fr-secao-nota { margin: 0; }
.fr-fech-encerrar { margin-left: auto; }
.fr-fech-nota { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--u-linha, #eceff1); }
.fr-fech-doc { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Saldo: âmbar da casa quando há diferença, verde quando quitado. */
.fr-saldo-aberto { color: var(--u-ambar, #e65100); font-weight: 700; }
.fr-saldo-quitado { color: var(--u-verde-ink, #2e7d32); font-weight: 700; }

/* ------------------------------------------- E5 (DEC-0016): relatório de fretes */
.fr-rel-filtros .fr-sel input[type="date"] { min-width: 150px; }
.fr-rel-tabela th.fr-num, .fr-rel-tabela td.fr-num { text-align: right; }
/* 14 colunas: um pouco mais densa que a lista, código sem quebra (achado no gate visual). */
.fr-rel-tabela { font-size: .84rem; }
.fr-rel-tabela th, .fr-rel-tabela td { padding: 8px 7px; }
.fr-rel-tabela .fr-cod a { white-space: nowrap; }
.fr-rel-totais td {
  font-weight: 700; color: var(--u-texto, #263238);
  background: var(--u-neutro-fundo, #eceff1);
  border-top: 2px solid var(--u-linha-forte, #90a4ae); border-bottom: 0;
}
.fr-rel-tabela tbody tr { cursor: default; }
.fr-rel-aviso {
  padding: 9px 12px; border-radius: var(--u-raio-controle, 6px);
  background: var(--u-ambar-fundo, #fff8e1); color: var(--u-ambar, #e65100);
  border: 1px solid var(--u-ambar, #ffb300); font-size: .87rem;
}

@media (max-width: 720px) {
  .fr-hist-item { flex-direction: column; gap: 2px; }
  .fr-hist-quando { flex: none; }
  .fr-dw { width: 100%; }
  .fr-fech-encerrar { margin-left: 0; }
  .fr-rel-filtros { flex-direction: column; align-items: stretch; }
}