/* painel/fretado.css — a área Fretado (spec 2026-09-15). Usa os tokens de `estilo.css`
   (--marca, --acento, --ok, --alerta, --perigo, --linha, --fundo, --suave-texto, --tinta):
   a mesma paleta do resto do painel, para "verde" querer dizer a mesma coisa em toda tela.

   ⚠️ O SELO NUNCA É SÓ COR. Cada estado tem a frase por extenso ao lado da cor — "Dentro
   de 2 linhas", "Endereço fora do campo aceitável". Quem não distingue verde de cinza (e
   quem imprime a tela) precisa ler a mesma coisa que quem distingue. */

#painel-fretado { --raio: 10px; }

.fretado-topo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.fretado-topo h2 { margin: 0 12px 0 0; }
.fretado-topo .cresce { flex: 1; }
.fretado-campo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--suave-texto); }
#painel-fretado input.fretado-raio { width: 90px; margin: 0; }
#painel-fretado select.fretado-lotes { width: auto; margin: 0; min-width: 240px; }
.fretado-estado { font-size: 13px; color: var(--suave-texto); }
/* "N itens não calculados" é AVISO, não decoração: é o que separa um resultado velho de
   um resultado. Aceso em cor de alerta enquanto houver item medido com outro critério. */
.fretado-estado.pendente { color: var(--alerta); font-weight: 600; }
.fretado-validade { font-size: 12px; color: var(--suave-texto); }
.fretado-erro { min-height: 1.2em; }

.fretado-botao { border: 1px solid var(--linha); background: #fff; color: var(--tinta);
  border-radius: 999px; padding: 8px 16px; cursor: pointer; font: inherit; position: relative; overflow: hidden; }
.fretado-botao:hover { border-color: var(--acento); }
.fretado-botao[disabled] { opacity: .5; cursor: default; }
.fretado-botao.perigo { color: var(--perigo); border-color: var(--perigo); }
.fretado-botao.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
/* O `<input type=file>` mora DENTRO do rótulo e some: o clique no rótulo já o aciona, e um
   input de arquivo nu não obedece a estilo nenhum. */
.fretado-botao input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fretado-mini { border: 1px solid var(--linha); background: #fff; color: var(--marca); border-radius: 999px;
  padding: 3px 10px; margin-left: 8px; font-size: 12px; cursor: pointer; font-family: inherit; }
.fretado-mini.perigo { color: var(--perigo); border-color: #fecaca; }
.fretado-mini.perigo:hover { background: var(--perigo); border-color: var(--perigo); color: #fff; }

/* escolha de rotas do cálculo */
.fretado-escolha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px;
  padding: 10px 12px; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); }
.fretado-escolha-titulo { font-size: 13px; font-weight: 600; color: var(--suave-texto); }
.fretado-regra { margin: 4px 0 0; font-size: 12px; flex-basis: 100%; }
.fretado-escolha-item { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; }
#painel-fretado .fretado-escolha-select { min-width: 320px; max-width: 100%; font-size: 14px; padding: 6px 8px; }
/* PARTE C (18/09/2026): lote de formulário compara até 6 rotas (24/09/2026) — seletores em 2 colunas × 3 linhas
   em vez de um só; no estreito, um embaixo do outro (mesma regra do rádio de origem). */
.fretado-escolha-dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; flex: 1 1 100%; }
/* ⚠️ MESMO PREFIXO DE ID QUE A REGRA DO SELETOR ÚNICO (L43): sem `#painel-fretado` aqui, a
   especificidade de ID daquela regra ganha da classe e os 320px de piso vazam para a grade
   de dois seletores, estourando a coluna abaixo de ~652px. */
#painel-fretado .fretado-escolha-dupla .fretado-escolha-select { min-width: 0; width: 100%; }
@media (max-width: 640px) { .fretado-escolha-dupla { grid-template-columns: 1fr; } }
#painel-fretado .fretado-escolha-select option.inativa { color: var(--suave-texto); }
/* Rota desativada que CONTINUA no lote aparece assim: apagada, mas clicável — é a única
   forma de desmarcá-la. O "(desativada)" vai no texto; a opacidade sozinha não explica. */
.fretado-escolha-item.inativa { opacity: .6; }
#painel-fretado .fretado-escolha-item input { width: auto; margin: 0; }

/* entrada: a zona de soltar e a caixa de colar */
.fretado-entrada { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.fretado-zona { border: 2px dashed var(--linha); border-radius: var(--raio); padding: 22px 16px;
  text-align: center; color: var(--suave-texto); transition: border-color .15s ease, background-color .15s ease; }
.fretado-zona.sobre { border-color: var(--acento); background: var(--gelo); }
#painel-fretado textarea.fretado-colar { font: inherit; background: #fff; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: 8px; padding: 9px 11px; width: 100%; min-height: 70px;
  resize: vertical; line-height: 1.5; }
#painel-fretado .fretado-entrada .fretado-botao { align-self: flex-start; }
/* importar os qualificados de um formulário (17/09/2026): o terceiro bloco da entrada,
   com o mesmo respiro da caixa de colar; o progresso é texto `meta` e some quando vazio */
.fretado-importar { display: flex; flex-direction: column; gap: 8px; }
.fretado-importar .meta { margin: 0; }
.fretado-importar-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#painel-fretado .fretado-importar .fretado-escolha-select { min-width: 320px; max-width: 100%; }
#painel-fretado .fretado-importar .fretado-botao { align-self: center; }
.fretado-progresso:empty { display: none; }

/* a lista de itens */
.fretado-itens { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.fretado-item { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio); padding: 10px 12px; }
.fretado-item.pendente { opacity: .7; }
.fretado-item-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fretado-rotulo { font-weight: 700; min-width: 160px; max-width: 280px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
#painel-fretado input.fretado-endereco { flex: 1; min-width: 220px; margin: 0; }
.fretado-reler { border: 1px solid var(--linha); background: #fff; color: var(--marca); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit; }
.fretado-apagar { border: 0; background: none; color: var(--suave-texto); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 6px; }
.fretado-apagar:hover { color: var(--perigo); }

/* os selos — cor + frase, nunca cor sozinha (ver o topo) */
.fretado-selo { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.fretado-selo.dentro { background: #ecfdf5; color: var(--ok); border-color: #a7f3d0; }
.fretado-selo.fora { background: var(--fundo); color: var(--suave-texto); border-color: var(--linha); }
.fretado-selo.aviso { background: #fefce8; color: var(--alerta); border-color: #fde68a; }
.fretado-selo.erro { background: #fef2f2; color: var(--perigo); border-color: #fecaca; white-space: normal; }
.fretado-selo.neutro { background: var(--fundo); color: var(--suave-texto); border-color: var(--linha); }
/* Sem cálculo, o selo do resultado não grita: o que vale é o botão Calcular lá em cima. */
#painel-fretado .fretado-selo.neutro { opacity: .75; }
/* ⚠️ O VEREDICTO DE ENDEREÇO IMPRECISO: `dentro aviso` / `fora aviso`. A regra combinada
   existe para a precedência ser DECIDIDA e não sorteada pela ordem do arquivo — o amarelo
   do aviso entra por cima do verde, e a frase " (impreciso)" diz o resto (o selo nunca é
   só cor, ver o topo). Sem número na porta, 500 m de erro cabem dentro de um raio de 650. */
.fretado-selo.dentro.aviso, .fretado-selo.fora.aviso {
  background: #fefce8; color: var(--alerta); border-color: #fde68a; }

/* a sanfona — só as paradas que deram pé (D10) */
.fretado-sanfona { margin: 8px 0 0 4px; font-size: 13px; }
.fretado-sanfona summary { cursor: pointer; color: var(--marca); }
.fretado-sanfona ul { margin: 6px 0 0; padding-left: 20px; color: var(--suave-texto); line-height: 1.6; }

/* o bloco de rotas (só admin) */
.fretado-rotas { background: #fff; border: 1px solid var(--linha); border-radius: 16px; padding: 18px 22px; }
.fretado-rotas h3 { margin: 0 0 12px; font-size: 17px; }
.fretado-lista-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; max-width: 720px; }
.fretado-lista-form textarea { grid-column: 1 / -1; font: inherit; border: 1px solid var(--linha);
  border-radius: 8px; padding: 9px 11px; min-height: 80px; resize: vertical; }
.fretado-lista-form button { grid-column: 1; justify-self: start; }
#painel-fretado .fretado-lista-form input { margin: 0; }
.fretado-lista-rotas { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.fretado-lista-rotas > li { border-top: 1px solid var(--linha); padding-top: 10px; font-size: 14px; }
.fretado-lista-rotas > li.inativa { opacity: .55; }
.fretado-lista-rotas span { color: var(--suave-texto); font-size: 13px; }
.fretado-linhas { list-style: none; padding: 0; margin: 8px 0 0 18px; display: flex; flex-direction: column; gap: 4px; }
.fretado-linhas li.inativa { opacity: .55; }
.fretado-sem-coord { margin: 8px 0 0 18px; padding-left: 16px; font-size: 13px; color: var(--perigo); line-height: 1.6; }

@media (max-width: 900px) {
  .fretado-lista-form { grid-template-columns: 1fr; }
  .fretado-rotulo { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { #painel-fretado * { transition: none !important; } }

/* A dica da zona de soltar: os formatos aceitos, e o HEIC do iPhone que não é. */
.fretado-zona-dica { margin-top: 8px; font-size: 12px; color: var(--suave-texto); }

/* a sanfona do modelo de IA (só admin) */
.fretado-config { margin-top: 18px; }
.fretado-config-opcoes { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.fretado-config-opcao { display: flex; align-items: baseline; gap: 6px; font-size: 14px; cursor: pointer; }
#painel-fretado .fretado-config-opcao input { width: auto; margin: 0; }

/* 16/09/2026: o nome do lote no topo; a linha sem número em vermelho pastel; o "Processando" */
.fretado-lote-nome { font-size: 14px; margin-right: 6px; }
.fretado-item.sem-numero { background: #fff1f2; border-color: #fecdd3; }
.fretado-estado.processando { color: var(--alerta); font-weight: 600; }
/* O rádio da origem dos itens (17/09/2026): dois CARTÕES lado a lado ocupando a largura da
   entrada — cada um com a bolinha, o título e uma linha dizendo o que entra por ali. Antes
   eram duas pílulas encolhidas à esquerda com o resto da linha vazio. Alvo de toque ≥ 44px;
   no estreito, um embaixo do outro. */
.fretado-origem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fretado-origem-opcao { display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  min-height: 44px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio);
  background: #fff; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.fretado-origem-opcao:hover { border-color: var(--acento); }
.fretado-origem-opcao.marcada { border-color: var(--acento); background: var(--gelo);
  box-shadow: 0 0 0 1px var(--acento) inset; }
.fretado-origem-opcao input { margin: 3px 0 0; width: auto; flex: none; accent-color: var(--acento); }
.fretado-origem-opcao:focus-within { outline: 2px solid var(--acento); outline-offset: 2px; }
.fretado-origem-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fretado-origem-texto strong { font-weight: 600; color: var(--tinta); }
.fretado-origem-texto .meta { margin: 0; line-height: 1.4; }
@media (max-width: 640px) { .fretado-origem { grid-template-columns: 1fr; } }
/* PARTE C (18/09/2026): com item no lote a origem trava na do primeiro item — a bolinha
   desabilitada precisa parecer inerte, não só ficar cinza por conta do navegador sozinho. */
.fretado-origem-opcao input:disabled + .fretado-origem-texto { opacity: .7; }