/* Componentes do DMS. Toda cor vem de tokens.css — nenhum hex novo aqui. */

/* `hidden` tem de vencer o `display` dos componentes: sem isto, um botão
 * inline-flex marcado como hidden continua na tela (o atributo perde para a
 * regra de classe) e o usuário vê controle que não deveria existir. */
[hidden] { display: none !important; }

.dg-dms {
  margin: 0;
  background: var(--surface-soft);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

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

.dg-topo {
  display: flex;
  align-items: center;
  /* `flex-start` (e não `space-between`) porque a barra quebra em duas linhas
   * em telas de 1280 px: com `space-between` a marca ficava sozinha à esquerda
   * e o menu jogado na outra ponta. Quem empurra a meta para a direita é o
   * `margin-left: auto` do `.dg-topo__meta`. */
  justify-content: flex-start;
  /* Com 10 áreas + o chip de sincronização + a conta + a versão, 1280 px de
   * largura já não cabia tudo numa linha. Em vez de espremer o menu (o "Pontos
   * do motorista" quebrava em três linhas), a barra quebra em duas: menu em
   * cima, meta (sincronização · conta · versão) embaixo. Acima de ~1400 px
   * continua uma linha só. */
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 0.875rem 1.75rem;
  background: var(--brand-900);
  color: #fff;
}

.dg-topo__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  text-decoration: none;
  font-size: var(--text-body-l);
  letter-spacing: 0.01em;
}

.dg-topo__ponto {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--brand-300);
}

.dg-topo__nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Meta do topo (sincronização · conta · versão) como **um** item flex: quando a
 * barra quebra em duas linhas, o grupo vai inteiro — foi assim que o selo de
 * versão deixou de ficar órfão sozinho embaixo do menu. */
.dg-topo__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-left: auto;
}

/* Estado da integração: **um ponto de luz + a idade em minutos**. Antes era um
 * chip com moldura, barra de acento e o texto "atualizado há N min" — quase 100
 * px de chrome em toda tela para dizer o que cabe em 40. O texto completo vai no
 * `title`/`aria-label`, e o que é grave continua tendo a faixa de alarme inteira
 * logo abaixo. O **texto muda junto com a cor** (parada, erro): cor nunca é o
 * único sinal (§22 do design.md). */
.dg-online {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 1.5rem;
  padding: 0 0.3rem;
  border-radius: 3px;
  color: #fff;
  text-decoration: none;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  /* é **botão** desde 29/10/2026: abre o diálogo da integração, não navega */
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.dg-online:hover,
.dg-online:focus-visible { background: var(--brand-800); }
.dg-online:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 1px; }

.dg-online__luz {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 2px var(--success-tint);
}

.dg-online--parada,
.dg-online--nunca,
.dg-online--desligada { color: var(--warning-soft); }

.dg-online--parada .dg-online__luz,
.dg-online--nunca .dg-online__luz,
.dg-online--desligada .dg-online__luz {
  background: var(--warning);
  box-shadow: 0 0 0 2px var(--warning-tint);
}

.dg-online--falhou { color: var(--error-soft); }
.dg-online--falhou .dg-online__luz {
  background: var(--error);
  box-shadow: 0 0 0 2px var(--error-tint);
}

/* o alarme de sincronização parada: faixa larga, texto de erro, link para a
 * Integração. Aparece em toda tela — o operador não precisa procurar. */
.dg-alarme {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  padding: 0.5rem 1.75rem;
  background: var(--warning-soft);
  color: var(--warning-forte);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--warning);
  text-decoration: none;
  font-size: var(--text-body-s);
}

.dg-alarme strong { font-weight: 600; }
.dg-alarme:hover, .dg-alarme:focus-visible { text-decoration: underline; }
.dg-alarme[hidden] { display: none; }
.dg-alarme--erro {
  background: var(--error-soft);
  color: var(--error-forte);
  border-left-color: var(--error);
}


.dg-topo__link {
  color: #fff;
  text-decoration: none;
  font-size: var(--text-body-s);
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  /* nome de área não quebra no meio: quebrado, "Pontos do motorista" virava
   * três linhas e a barra inteira crescia */
  white-space: nowrap;
}

.dg-topo__link:hover,
.dg-topo__link:focus-visible { border-bottom-color: var(--brand-300); }

/* Conta do operador: **um bloco de iniciais** que abre um painel com nome,
 * papel, versão/ambiente e a saída. Antes o topo carregava o nome inteiro
 * ("Motorista Teste Offline"), o "sair" e o selo de versão em três blocos — ~300
 * px de chrome para informação que se consulta uma vez por sessão. O nome não se
 * perde: está no `title`/`aria-label` do botão e escrito no painel. */
.dg-conta { position: relative; }

.dg-conta__botao {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: 1.75rem;
  min-width: 1.75rem;
  padding: 0.1rem 0.2rem;
  background: var(--brand-800);
  border: 1px solid var(--brand-700);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.dg-conta__botao:hover { background: var(--brand-700); }

.dg-conta__botao:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 1px;
}

/* iniciais em **bloco**, não em pílula: o design.md (§5) pede raio contido */
.dg-conta__iniciais {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 3px;
  background: var(--brand-500);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.dg-conta__seta {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--brand-300);
  transition: transform var(--motion-micro) var(--ease);
}

.dg-conta--aberto .dg-conta__seta { transform: rotate(180deg); }

.dg-conta__painel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 1500;
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 12rem;
  padding: 0.5rem 0.6rem;
  background: var(--brand-900);
  border: 1px solid var(--brand-700);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(3, 30, 45, 0.28);
}

.dg-conta--aberto .dg-conta__painel { display: flex; }

.dg-conta__nome {
  margin: 0;
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: #fff;
}

.dg-conta__meta {
  margin: 0;
  font-size: 0.6875rem;
  color: var(--brand-300);
}

.dg-conta__sair-form { margin: 0.3rem 0 0; }

.dg-conta__sair {
  width: 100%;
  min-height: 1.9rem;
  background: none;
  border: 1px solid var(--brand-700);
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
  font-size: var(--text-body-s);
  cursor: pointer;
}

.dg-conta__sair:hover { background: var(--brand-700); }

.dg-conta__sair:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 1px;
}

/* Botão do tema (sol/lua): peça pequena no topo, sempre visível — a preferência
 * não pode depender de estar logado. Ícone funcional, `title` com a ação. */
.dg-tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--brand-300);
  cursor: pointer;
}

.dg-tema:hover { background: var(--brand-800); color: #fff; }

.dg-tema:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 1px; }

.dg-tema .dg-icone { width: 0.9rem; height: 0.9rem; }

.dg-tema__icone { display: inline-flex; }
.dg-tema__icone--sol { display: none; }

html[data-tema="escuro"] .dg-tema__icone--lua { display: none; }
html[data-tema="escuro"] .dg-tema__icone--sol { display: inline-flex; }

/* O selo de versão da barra saiu em 29/10/2026 (pedido do usuário: "podemos
 * remover a versão e deixar na mesma altura da logo e do botão de menu"; e a
 * informação já estava duplicada — ela vive no painel da conta). O
 * `data-versao` do `<html>` continua servindo ao `verificar_versao.py`, e o pé
 * do login continua mostrando o número. */

/* A mesma informação no pé do login (que não tem topo). O login é a primeira
 * tela depois de um deploy — é ali que se confere se subiu o que se esperava. */
.dg-versao-login {
  margin-top: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ conteúdo */

.dg-conteudo {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
}

.dg-rodape {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1rem 1.5rem 2rem;
  color: var(--ink-500);
  font-size: var(--text-label);
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------- bloco de destaque */

.dg-bloco {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 1px 2px var(--brand-tint);
}

.dg-bloco--destaque {
  border-left: 4px solid var(--brand-600);
  margin-bottom: 1.25rem;
}

.dg-numero {
  margin: 0;
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  font-variant-numeric: tabular-nums;
  color: var(--texto-forte);
}

.dg-numero--s { font-size: var(--text-h3); }

.dg-rotulo {
  display: block;
  margin: 0;
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
  font-weight: var(--weight-semibold);
}

.dg-metricas {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.dg-nota {
  margin: 0.75rem 0 0;
  color: var(--ink-500);
  font-size: var(--text-body-s);
}

/* ------------------------------------------------------------ filtros */

.dg-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.dg-campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 11rem; }
.dg-campo--largo { min-width: 18rem; flex: 1; }

/* filtros colados na tela de trabalho: menos respiro, mais mapa */
.dg-filtros--compacto {
  padding: 0.75rem 1rem;
  margin-bottom: 0.875rem;
}

.dg-filtros--compacto .dg-campo { min-width: 9rem; }

.dg-campo select,
.dg-campo input {
  font: inherit;
  padding: 0.5rem 0.625rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
  min-height: 2.375rem;
}

.dg-campo select:focus-visible,
.dg-campo input:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

/* ------------------------------------------------------------ botões */

.dg-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.125rem;
  border-radius: 4px;
  border: 1px solid var(--brand-800);
  background: var(--brand-800);
  color: #fff;
  font: inherit;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
}

.dg-botao:hover { background: var(--brand-900); }

.dg-botao--secundario {
  background: var(--surface);
  color: var(--texto-marca);
  border-color: var(--border);
}

.dg-botao--secundario:hover { background: var(--brand-tint); }

/* botão desabilitado precisa parecer desabilitado: o "Montar" da seleção
 * continuava com o fundo cheio e convidava ao clique que não fazia nada */
.dg-botao:disabled,
.dg-botao:disabled:hover {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--ink-500);
  cursor: not-allowed;
}

.dg-botao:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.dg-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

/* quando todas as ações são botões lado a lado, eles ficam juntos */
.dg-acoes--inicio {
  justify-content: flex-start;
  gap: 0.75rem;
}

.dg-geo {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ------------------------------------------------------------- grupos */

.dg-grupo { margin-bottom: 1.75rem; }

.dg-grupo__titulo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.5rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--texto-forte);
}

.dg-grupo__barra {
  width: 3px;
  height: 1.125rem;
  background: var(--brand-600);
  border-radius: 2px;
}

.dg-grupo__contagem {
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
}

/* ------------------------------------------------------------ tabelas */

.dg-tabela {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  font-size: var(--text-body-s);
}

.dg-tabela th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-700);
  font-weight: var(--weight-semibold);
}

.dg-tabela td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.dg-tabela tbody tr:last-child td { border-bottom: 0; }
.dg-tabela tbody tr:hover { background: var(--brand-tint); }

.dg-col-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dg-col-marca { width: 2.25rem; }
.dg-endereco { max-width: 26rem; }
.dg-fraco { color: var(--ink-500); }
.dg-col-assinatura { width: 9rem; }

/* ------------------------------------------------------------ avisos */

.dg-aviso {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border-left: 4px solid var(--warning);
  background: var(--warning-soft);
  color: var(--warning-forte);
  font-size: var(--text-body-s);
}

.dg-aviso--erro {
  border-left-color: var(--error);
  background: var(--error-soft);
  color: var(--error-forte);
}

.dg-vazio {
  padding: 1.5rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--ink-500);
}

.dg-migalha {
  margin: 0 0 1rem;
  font-size: var(--text-body-s);
  color: var(--ink-500);
}

.dg-migalha a { color: var(--texto-marca); }

.dg-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------- romaneio */

.dg-romaneio__cabecalho { margin: 1.5rem 0 0.75rem; }

.dg-romaneio__titulo {
  margin: 0;
  font-size: var(--text-h2);
  color: var(--texto-forte);
}

.dg-romaneio__linha {
  margin: 0.25rem 0 0;
  font-size: var(--text-body-s);
  color: var(--ink-700);
}

.dg-tabela--romaneio td { padding: 0.625rem 0.75rem; }
.dg-tabela--romaneio .dg-col-assinatura { border-left: 1px solid var(--border); }

.dg-romaneio__rodape {
  margin: 0.75rem 0 0;
  font-size: var(--text-label);
  color: var(--ink-500);
}

/* ---------------------------------------------------------------- mapa */

/* A tela do roteirizador usa a largura toda: mapa apertado é mapa inútil. */
.dg-conteudo--largo {
  max-width: none;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.dg-mapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20.5rem;
  gap: 1rem;
  align-items: start;
}

.dg-mapa__area {
  position: relative;
  min-width: 0;
}

/* mapa ampliado: some a barra de filtros e o painel, fica só o mapa */
.dg-mapa-ampliado .dg-filtros { display: none; }

.dg-operacao--ampla .dg-operacao__painel,
.dg-operacao--ampla .dg-divisor { display: none; }

.dg-operacao--ampla .dg-operacao__mapa .dg-mapa__lienzo { border-radius: 6px; }

/* barra de ferramentas flutuante sobre o mapa — encolhe com o conteúdo para
 * não virar uma faixa branca cobrindo o mapa */
.dg-mapa__barra {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
  max-width: calc(100% - 5rem);
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 1px 3px var(--brand-tint-forte);
}

.dg-mapa__grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.dg-mapa__grupo + .dg-mapa__grupo {
  padding-left: 0.375rem;
  border-left: 1px solid var(--border);
}

.dg-ferramenta {
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--texto-marca);
  cursor: pointer;
}

.dg-ferramenta:hover { background: var(--brand-tint); }

.dg-ferramenta[aria-pressed="true"] {
  background: var(--brand-800);
  border-color: var(--texto-marca);
  color: #fff;
}

.dg-ferramenta:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.dg-ferramenta:disabled {
  color: var(--ink-500);
  border-style: dashed;
  cursor: not-allowed;
}

/* ferramenta só de ícone: o rótulo vira title/aria-label e a barra encolhe
 * sem perder o alvo de clique (1,75 rem ≈ 28 px) */
.dg-ferramenta--icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
}

.dg-ferramenta--icone svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* o fechamento do laço é ação, não modo: fica destacado enquanto há contorno */
.dg-ferramenta--fechar {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}

.dg-ferramenta--fechar:hover { background: var(--success-forte); }
.dg-ferramenta--fechar:disabled {
  background: var(--success-soft);
  border-color: var(--border);
  color: var(--ink-500);
}

.dg-mapa__lienzo {
  height: clamp(26rem, calc(100vh - 19rem), 54rem);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
}

.dg-mapa__lienzo--carga { height: clamp(20rem, 46vh, 32rem); }

.dg-mapa__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.25rem;
  margin-top: 0.5rem;
}

.dg-mapa__dica { margin: 0; }

.dg-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-label);
  color: var(--ink-700);
}

.dg-legenda__ponto {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  margin-right: 0.375rem;
  vertical-align: middle;
}

.dg-legenda__ponto--rua { background: var(--brand-800); }
.dg-legenda__ponto--cep { background: var(--warning); }
.dg-legenda__ponto--cidade { background: var(--ink-500); }
.dg-legenda__ponto--manual { background: var(--success); }

.dg-mapa__painel {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.125rem;
}

.dg-resumo { margin-bottom: 1rem; }
.dg-resumo .dg-numero { line-height: var(--leading-tight); }
.dg-resumo .dg-nota { margin-top: 0.5rem; }

.dg-metricas--compactas { gap: 1rem; margin-top: 0.5rem; }
.dg-metricas--compactas .dg-numero--s { font-size: var(--text-body-l); }

.dg-painel__titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0.5rem;
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--texto-forte);
}

.dg-carga-form { margin-top: 0.75rem; }
.dg-carga-form .dg-botao { width: 100%; margin-top: 0.5rem; }

.dg-selecao {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  max-height: 20rem;
  overflow: auto;
}

.dg-selecao__vazio {
  padding: 0.5rem 0;
  font-size: var(--text-body-s);
  color: var(--ink-500);
  font-style: italic;
}

.dg-selecao__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-s);
}

.dg-selecao__item > div { min-width: 0; }

.dg-selecao__cidade {
  display: inline;
  font-size: var(--text-label);
  color: var(--ink-500);
}

.dg-selecao__acao,
.dg-selecao__remover {
  background: none;
  border: 0;
  padding: 0;
  color: var(--texto-marca);
  font: inherit;
  font-size: var(--text-label);
  text-decoration: underline;
  cursor: pointer;
}

.dg-selecao__acao:focus-visible,
.dg-selecao__remover:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.dg-popup p { margin: 0.25rem 0; font-size: var(--text-body-s); }

.dg-popup__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.dg-popup .dg-botao { min-height: 2rem; padding: 0 0.75rem; font-size: var(--text-label); }

/* pino do ponto de entrega — cor = precisão da coordenada */
.dg-pino-ponto {
  box-sizing: border-box;
  display: block;
  width: 16px;
  height: 16px;
  background: transparent;
  border: 0;
}

/* alfinete: gota apontando para a coordenada (a ponta no anchor) */
.dg-pino-ponto__forma {
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  background: var(--ink-500);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* a cor da precisão vai na GOTA, não no pai: o pai é a caixa transparente que o
 * Leaflet posiciona — pintá-lo desenharia um quadrado atrás do alfinete */
.dg-pino-ponto--geocodificado .dg-pino-ponto__forma { background: var(--brand-800); }
.dg-pino-ponto--cep .dg-pino-ponto__forma { background: var(--warning); }
.dg-pino-ponto--cidade .dg-pino-ponto__forma { background: var(--ink-500); }
.dg-pino-ponto--manual .dg-pino-ponto__forma { background: var(--success); }

/* entrega fora de carga: uma cor só (a precisão vai no popup, não na cor) */
.dg-pino-ponto--livre .dg-pino-ponto__forma { background: var(--brand-800); }
.dg-legenda__ponto--livre { background: var(--brand-800); }

/* PEDIDO DA CARTEIRA: alfinete com losango — o desenho fica junto das cores de
 * carga (mais abaixo), porque a cor do pai precisa ser anulada lá. */

/* a mini-legenda das formas, ao lado da dica do mapa */
.dg-formas {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0.75rem;
  z-index: 600;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--text-label);
  color: var(--ink-700);
  white-space: nowrap;
}

.dg-formas__item { display: inline-flex; align-items: center; gap: 0.35rem; }

/* os dois pinos em SVG: mesmo desenho do mapa, com o contorno branco */
.dg-formas__pino,
.dg-pino-legenda {
  width: 0.7rem;
  height: 0.875rem;
  flex: 0 0 auto;
  display: block;
  color: var(--texto-marca);
}

.dg-legenda__pinos {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-right: 0.3rem;
  vertical-align: middle;
}

/* documento da carteira nas listas: mesma leitura do pino */
.dg-documento--carteira { color: var(--texto-marca); font-weight: 600; }
.dg-popup__situacao { font-size: 0.76rem; color: var(--ink-500); }

/* ponto que já está na carga: maior e com o pulso do dg-halo, sem contorno quadrado */
.dg-pino-ponto--sel {
  width: 20px;
  height: 20px;
}
.dg-pino-ponto--sel .dg-pino-ponto__forma { border-width: 3px; }

/* "pulo" dos pinos de uma carga ao apontar/focar o nome dela (ou ao trocar a
 * cor): chama atenção sem mudar cor nem posição. A animação usa a propriedade
 * `translate`, independente do `transform` da gota (rotação) e do transform que
 * o Leaflet escreve no pai para posicionar o marcador. */
@keyframes dg-pulo {
  0% { translate: 0 0; }
  12% { translate: 0 -12px; }
  30% { translate: 0 0; }
  44% { translate: 0 -7px; }
  60% { translate: 0 0; }
  72% { translate: 0 -4px; }
  86% { translate: 0 0; }
  93% { translate: 0 -2px; }
  100% { translate: 0 0; }
}

.dg-pino-ponto--pulando .dg-pino-ponto__forma {
  animation: dg-pulo 1100ms var(--ease) 1;
}

@media (prefers-reduced-motion: reduce) {
  .dg-pino-ponto--pulando .dg-pino-ponto__forma { animation: none; }
}

/* comparação entre fontes: dois tons da MESMA família — fonte não é estado, então
 * não gasta verde/âmbar/vermelho, que continuam significando precisão e erro */
.dg-pino-ponto--fonte-google .dg-pino-ponto__forma { background: var(--brand-500); }
.dg-pino-ponto--fonte-nominatim .dg-pino-ponto__forma { background: var(--brand-800); }
.dg-pino-ponto--fonte-places .dg-pino-ponto__forma { background: var(--brand-300); }

/* caixa do popup da fonte: título, o que o serviço entendeu e a ação */
.dg-fonte { display: grid; gap: 4px; max-width: 248px; }
.dg-fonte__titulo { font-size: 0.86rem; color: var(--ink-900); }
.dg-fonte__nivel {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.dg-fonte__texto { margin: 0; font-size: 0.8rem; color: var(--ink-700); }
.dg-fonte__nota { font-size: 0.72rem; color: var(--ink-500); }
.dg-fonte__alerta { margin: 0; font-size: 0.76rem; color: var(--error-forte); }
.dg-fonte .dg-selecao__acao { justify-self: start; margin-top: 2px; }

/* na tela de Clientes a comparação ocupa o modal: dois cartões lado a lado */
.dg-fontes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  margin-bottom: 8px;
}
.dg-fontes .dg-fonte {
  max-width: none;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-800);
  border-radius: 8px;
  background: var(--surface);
}
.dg-fonte__topo { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dg-endereco-conferencia {
  margin: 0 0 10px;
  font-size: 0.84rem;
  color: var(--ink-700);
  background: var(--surface-soft);
  border-radius: 6px;
  padding: 6px 8px;
}
.dg-col-endereco { max-width: 300px; }

/* mapa do comparativo: altura fixa — é ferramenta de decisão, não vitrine */
.dg-mapa-fontes {
  height: 300px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--surface-soft);
}

/* barra de ferramentas do mapa do comparativo */
.dg-mapa-fontes__barra {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.dg-mapa-fontes__botao {
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-900);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.dg-mapa-fontes__botao:hover { background: var(--surface-soft); }
.dg-mapa-fontes__botao:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

/* pino do ponto marcado à mão dentro do comparativo */
.dg-pino-ponto--manual .dg-pino-ponto__forma { background: var(--success); }

.dg-mapa-fontes__manual {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* pino numerado da sequência — peça pequena, fundo sólido */
.dg-pino-rota {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand-900);
  color: #fff;
  border: 2px solid #fff;
  font-size: 12px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.dg-pino-deposito {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--success);
  color: #fff;
  border: 2px solid #fff;
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
}

.dg-mapa__painel .dg-botao { width: 100%; }

.dg-ferramentas { margin-bottom: 0.75rem; }

.dg-grupo-lista {
  list-style: none;
  margin: 0.5rem 0 1rem;
  padding: 0;
  max-height: 18rem;
  overflow: auto;
}

.dg-grupo-lista__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-s);
}

.dg-grupo-lista__item > div { min-width: 0; }

.dg-itens {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0;
  max-height: 12rem;
  overflow: auto;
  font-size: var(--text-label);
}

.dg-itens li {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.125rem 0;
  border-bottom: 1px dotted var(--border);
}

.dg-itens-caixa { margin: 0.25rem 0 0.5rem; }

/* ------------------------------------------------- cargas no painel do mapa */

.dg-cargas {
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

.dg-cargas__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-s);
}

.dg-cargas__item--oculta { background: var(--surface-soft); }
.dg-cargas__item--oculta .dg-cargas__nome { color: var(--ink-500); }

.dg-cargas__marca {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
}

.dg-cargas__nome {
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-cargas__item > .dg-fraco { grid-column: 1 / -1; font-size: var(--text-label); }

.dg-cargas__acoes {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

.dg-unir__linha {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.dg-unir__linha .dg-campo { flex: 1; min-width: 9rem; }

.dg-agrupar {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.625rem;
}

.dg-agrupar .dg-campo { flex: 1; min-width: 9rem; }

.dg-grupos__acoes {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.dg-grupo-lista__marca {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  cursor: pointer;
}

.dg-grupo-lista__marca > span { min-width: 0; }

.dg-auto {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dg-auto .dg-campo { max-width: 9rem; }

/* ponto reservado: a cor e a forma vivem na gota (`__forma`); o pai é transparente */
.dg-pino-ponto--carga {
  background: transparent;
  border: 0;
}

.dg-legenda__ponto--carga {
  border-radius: 2px;
  background: var(--brand-300);
  box-shadow: inset 0 0 0 1px var(--brand-900);
}

.dg-popup__carga {
  margin: 0.5rem 0 0;
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--texto-marca);
}

.dg-nota--acao { margin: 0; align-self: center; }

/* abas de situação da tela de cargas */
.dg-abas {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.dg-aba {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--texto-marca);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.dg-aba--atual {
  background: var(--brand-800);
  border-color: var(--texto-marca);
  color: #fff;
}

.dg-acoes-celula {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.dg-acoes-celula form { margin: 0; }

@media (max-width: 1100px) {
  .dg-mapa { grid-template-columns: minmax(0, 1fr) 17rem; }
}

@media (max-width: 900px) {
  .dg-mapa { grid-template-columns: 1fr; }
  .dg-mapa__lienzo { height: 62vh; }
  .dg-mapa__painel { position: static; max-height: none; }
  .dg-mapa__barra { left: 0.5rem; }
}

/* -------------------------------------------------------------- selos */

.dg-selo {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  background: var(--brand-soft);
  color: var(--texto-marca);
  white-space: nowrap;
}

.dg-selo--entregue { background: var(--success-soft); color: var(--success-forte); }
/* a palavra da lista junta documento e estágio (28/10/2026): Pedido e Faturado
 * são o "ainda não saiu"; em entrega e parcial têm cor própria */
.dg-selo--pedido { background: var(--surface-soft); color: var(--ink-700); }
.dg-selo--faturado { background: var(--brand-soft); color: var(--texto-marca); }
.dg-selo--em_entrega { background: var(--warning-soft); color: var(--warning-forte); }
.dg-selo--entregue_parcial { background: var(--warning-soft); color: var(--warning-forte); }
.dg-selo--em_rota { background: var(--warning-soft); color: var(--warning-forte); }
.dg-selo--pendente { background: var(--warning-soft); color: var(--warning-forte); }
.dg-selo--cancelado,
.dg-selo--devolvido,
.dg-selo--reentrega { background: var(--error-soft); color: var(--error-forte); }
.dg-selo--manual { background: var(--success-soft); color: var(--success-forte); }
.dg-selo--cep { background: var(--warning-soft); color: var(--warning-forte); }
.dg-selo--geocodificado { background: var(--brand-soft); color: var(--texto-marca); }
.dg-selo--cidade,
.dg-selo--erp { background: var(--surface-soft); color: var(--ink-700); }
.dg-selo--montando { background: var(--brand-soft); color: var(--texto-marca); }
.dg-selo--planejada,
.dg-selo--em_andamento { background: var(--success-soft); color: var(--success-forte); }
.dg-selo--cancelada { background: var(--error-soft); color: var(--error-forte); }
.dg-selo--validado { background: var(--success-soft); color: var(--success-forte); }
.dg-selo--recebido { background: var(--warning-soft); color: var(--warning-forte); }
.dg-selo--suspeito,
.dg-selo--recusado { background: var(--error-soft); color: var(--error-forte); }
.dg-selo--vazio { background: var(--surface-soft); color: var(--ink-500); }

/* respiro entre blocos da mesma tela, sem style inline (a CSP proíbe) */
.dg-secao { margin-top: 1.5rem; }

.dg-campo-inline {
  font: inherit;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
  max-width: 100%;
}

.dg-campo-inline:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

/* ============================================= operação em tela cheia */
/* O mapa não divide altura com painel nem com rodapé: a página **não rola**, e
 * o painel tem a própria rolagem. É o desenho dos roteirizadores de mercado —
 * mapa amplo com o menu ao lado — e evita que rolar a página mova o mapa sob o
 * dedo do operador no meio de um laço. */

.dg-app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dg-app .dg-topo { flex: 0 0 auto; }
.dg-app .dg-rodape { display: none; }

.dg-app .dg-conteudo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: none;
  /* `margin: auto` do layout de leitura encolhe o item flex para a largura do
   * conteúdo — com a barra de filtros escondida, isso espremia o mapa no meio */
  margin: 0;
  padding: 0.75rem 1rem;
}

.dg-app .dg-filtros { flex: 0 0 auto; margin-bottom: 0; }

.dg-operacao {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  --painel: 23rem;
}

.dg-operacao__mapa {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.dg-operacao__mapa .dg-mapa__lienzo {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  border-radius: 6px 0 0 6px;
}

.dg-operacao__mapa .dg-mapa__pe { flex: 0 0 auto; }

.dg-divisor {
  flex: 0 0 0.5rem;
  cursor: col-resize;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 2px;
}

.dg-divisor:hover { background: var(--brand-tint); }

.dg-redimensionando { cursor: col-resize; user-select: none; }

.dg-divisor:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand-500);
}

.dg-operacao__painel {
  flex: 0 0 var(--painel);
  width: var(--painel);
  min-width: 15rem;
  max-width: 42rem;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 6px 6px 0;
  padding: 0.875rem 1rem 1.25rem;
}

.dg-resumo--painel { margin: 0 0 0.75rem; }
.dg-resumo--painel .dg-numero { color: var(--texto-forte); }

.dg-painel__acoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
}

.dg-painel__acoes .dg-botao {
  width: 100%;
  padding: 0 0.5rem;
  font-size: var(--text-body-s);
}

.dg-painel__acoes .dg-botao:first-child { grid-column: 1 / -1; }

.dg-botao--largo { width: 100%; }

/* ------------------------------------------------ paleta categórica das cargas */
/* Cor **categórica**, não de marca: existe para separar cargas no mapa, e por
 * isso não usa os tokens. O índice vem do servidor (`app/cores.py`), então o
 * alfinete e o quadradinho da lista mostram sempre a mesma cor. */

.dg-cor-carga {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  background: var(--carga-cor, var(--ink-500));
}

/* o quadradinho do painel é botão: alvo de clique maior que a mancha, para não
 * exigir mira em 11 px no meio da lista de cargas */
.dg-cor-carga--clicavel {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--border);
}

.dg-cor-carga--clicavel:hover,
.dg-cor-carga--clicavel:focus-visible {
  outline: none;
  box-shadow: var(--shadow-foco);
}

/* Paleta categórica das cargas — uma cor por carga ABERTA, reservada em
 * `app/cores.py`. Régua medida em CIEDE2000: ΔE00 ≥ 14 entre qualquer par (15 cores:
 * o pior par mede 14,7) e ≥ 20 contra a cor da marca
 * (#014665, pino sem carga). São 15 porque o modal de escolha é 5 × 3 e com 12
 * a última fileira saía incompleta. Os hex são a fonte
 * única: a mesma classe pinta o pino do mapa, o quadradinho da lista e a
 * paleta de escolha. `scripts/verificar_cores.py` recalcula e falha se um par
 * ficar parecido demais. */
.dg-cor-carga--c0, .dg-pino-ponto--c0 { --carga-cor: #C8102E; }
.dg-cor-carga--c1, .dg-pino-ponto--c1 { --carga-cor: #F28E2B; }
.dg-cor-carga--c2, .dg-pino-ponto--c2 { --carga-cor: #9E9D24; }
.dg-cor-carga--c3, .dg-pino-ponto--c3 { --carga-cor: #388E3C; }
.dg-cor-carga--c4, .dg-pino-ponto--c4 { --carga-cor: #0F9E8E; }
.dg-cor-carga--c5, .dg-pino-ponto--c5 { --carga-cor: #0288D1; }
.dg-cor-carga--c6, .dg-pino-ponto--c6 { --carga-cor: #6A3FD0; }
.dg-cor-carga--c7, .dg-pino-ponto--c7 { --carga-cor: #B5179E; }
.dg-cor-carga--c8, .dg-pino-ponto--c8 { --carga-cor: #8A5A2B; }
.dg-cor-carga--c9, .dg-pino-ponto--c9 { --carga-cor: #D6336C; }
.dg-cor-carga--c10, .dg-pino-ponto--c10 { --carga-cor: #B8860B; }
.dg-cor-carga--c11, .dg-pino-ponto--c11 { --carga-cor: #1B5E20; }
.dg-cor-carga--c12, .dg-pino-ponto--c12 { --carga-cor: #C090D8; }
.dg-cor-carga--c13, .dg-pino-ponto--c13 { --carga-cor: #F06C60; }
.dg-cor-carga--c14, .dg-pino-ponto--c14 { --carga-cor: #0CB4D8; }

/* paleta de escolha: só as cores livres ficam clicáveis; a atual fica marcada
 * e a que outra carga aberta usa fica apagada com o nome no title */
.dg-cores {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.625rem;
  margin: 0.75rem 0;
}

.dg-cor-opcao {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--carga-cor, var(--ink-500));
  cursor: pointer;
}

.dg-cor-opcao:hover,
.dg-cor-opcao:focus-visible {
  outline: none;
  box-shadow: var(--shadow-foco);
}

.dg-cor-opcao--atual {
  border-color: var(--ink-900);
  box-shadow: inset 0 0 0 2px #fff;
}

.dg-cor-opcao--atual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.45rem;
  height: 0.9rem;
  margin: -0.6rem 0 0 -0.3rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.7));
}

.dg-cor-opcao--ocupada {
  opacity: 0.35;
  cursor: not-allowed;
}

.dg-cor-opcao--ocupada:hover { box-shadow: none; }

.dg-pino-ponto--carga .dg-pino-ponto__forma {
  background: var(--carga-cor, var(--brand-300));
}

/* PEDIDO DA CARTEIRA: **alfinete com losango**.
 * A cor do pino é da CARGA; o tipo de documento é a FORMA. O losango identifica
 * o pedido (documento que ainda não existe) e a haste fina até a coordenada
 * preserva a mira do alfinete — as pontas finas ajudam a enxergar no mapa
 * (pedido do usuário, 27/10/2026). Desenhado em ::before/::after com medidas
 * proporcionais para o pino selecionado (20 px) manter a mesma geometria.
 * Este bloco vem DEPOIS das regras de cor de propósito: ele anula o
 * `background` que o pai do pino recebe quando a entrega está numa carga. */
.dg-pino-ponto--carteira .dg-pino-ponto__forma {
  --pino-cor: var(--brand-800);
  border: 0;
  border-radius: 0;
  transform: none;
  background: transparent;
  box-shadow: none;
}

.dg-pino-ponto--carteira.dg-pino-ponto--carga .dg-pino-ponto__forma {
  --pino-cor: var(--carga-cor, var(--brand-300));
}

.dg-pino-ponto--carteira .dg-pino-ponto__forma::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 56%;
  aspect-ratio: 1;
  box-sizing: border-box;
  transform: translateX(-50%) rotate(45deg);
  background: var(--pino-cor);
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dg-pino-ponto--carteira .dg-pino-ponto__forma::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 38%;
  margin-left: -1px;
  background: var(--pino-cor);
}

.dg-pino-ponto--carteira.dg-pino-ponto--sel .dg-pino-ponto__forma::before {
  border-width: 3px;
}

/* --------------------------------------------------------------- modais */

.dg-modal {
  /* **fundo por token** (29/10/2026): sem ele o `<dialog>` usa o branco do
   * navegador e, no tema escuro, o texto claro (dos tokens) ficava invisível —
   * acontecia em **todos** os modais, não só no novo da integração. */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  width: min(92vw, 30rem);
  max-width: 30rem;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 1rem 3rem rgba(3, 30, 45, 0.28);
  color: var(--ink-900);
}

.dg-modal::backdrop { background: rgba(3, 30, 45, 0.45); }

.dg-modal--largo {
  width: min(94vw, 80rem);
  max-width: 80rem;
}

.dg-modal__titulo {
  margin: 0 0 0.75rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--texto-forte);
}

.dg-modal .dg-campo {
  min-width: 0;
  margin-bottom: 0.5rem;
}

.dg-modal__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.dg-grupo-lista--modal { max-height: min(48vh, 26rem); }

/* -------------------------------------------------- popup do mapa (maior) */

.leaflet-popup-content-wrapper {
  border-radius: 8px;
  box-shadow: 0 0.5rem 1.5rem rgba(3, 30, 45, 0.25);
}

.leaflet-popup-content {
  margin: 0.875rem 1rem;
  font-size: var(--text-body-s);
  line-height: var(--leading-body);
}

.dg-popup { min-width: 19rem; }
.dg-popup strong { font-size: var(--text-body); color: var(--texto-forte); }

@media (max-width: 900px) {
  .dg-app { height: auto; overflow: auto; }
  .dg-app .dg-rodape { display: flex; }
  .dg-operacao { flex-direction: column; }
  .dg-divisor { display: none; }
  .dg-operacao__mapa .dg-mapa__lienzo { height: 60vh; flex: 0 0 auto; border-radius: 6px; }
  .dg-operacao__painel {
    width: auto;
    max-width: none;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 0.75rem;
  }
}


/* ============================================ roteirizador: mapa e painéis */
/* O mapa é o palco; tudo o mais flutua por cima dele. A tela não rola, e o
 * painel de cargas é redimensionável e recolhível — o operador ajusta a tela ao
 * trabalho dele, não o contrário. Fontes menores de propósito: o assunto aqui
 * é o mapa, não o texto. */

.dg-operacao-tela { font-size: 0.9375rem; }

.dg-palco {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.dg-palco > #mapa { position: absolute; inset: 0; }

.dg-palco__dica {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  transform: translateX(-50%);
  z-index: 620;
  margin: 0;
  max-width: min(90%, 46rem);
  padding: 0.25rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-700);
  font-size: var(--text-label);
  text-align: center;
}

/* a barra de ferramentas fica no alto à esquerda, ao lado do zoom */
.dg-mapa__barra { left: 3.5rem; right: auto; top: 0.75rem; }

.dg-flutuante {
  position: absolute;
  z-index: 610;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 0.5rem 1.5rem rgba(3, 30, 45, 0.18);
}

.dg-flutuante--cargas {
  top: 0.75rem;
  right: 0.75rem;
  width: 340px;
  min-width: 260px;
  max-width: 620px;
  max-height: calc(100% - 1.5rem);
}

.dg-flutuante--selecao {
  left: 0.75rem;
  bottom: 0.75rem;
  width: 320px;
  max-height: 46%;
}

/* seleção vazia: "0 paradas" não informa nada e "nada selecionado" aparecia
 * duas vezes. O estado vazio passa a ser uma frase só, com o total como
 * contexto — o mesmo lugar que o resumo ocupa quando há seleção. */
.dg-flutuante--selecao.dg-flutuante--vazia .dg-flutuante__numero,
.dg-flutuante--selecao.dg-flutuante--vazia #mapa-resumo { display: none; }

.dg-flutuante--selecao.dg-flutuante--vazia #mapa-entregas {
  margin-top: 0.15rem;
  color: var(--ink-700);
  font-size: var(--text-body);
}

.dg-flutuante__topo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--border);
}

.dg-flutuante__titulo {
  margin: 0;
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--texto-forte);
  white-space: nowrap;
}

.dg-flutuante__recolher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--texto-marca);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.dg-flutuante__recolher svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-flutuante__recolher[aria-expanded="false"] svg { transform: rotate(180deg); }

.dg-flutuante__corpo {
  padding: 0.625rem;
  overflow: auto;
}

.dg-flutuante--recolhido .dg-flutuante__corpo { display: none; }

.dg-flutuante__numero {
  margin: 0 0 0.25rem;
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--texto-forte);
}

.dg-flutuante__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0.5rem 0;
}

.dg-botao--pequeno {
  min-height: 2rem;
  padding: 0 0.625rem;
  font-size: var(--text-label);
}

/* divisor: alça na borda esquerda do painel de cargas */
.dg-divisor {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  cursor: col-resize;
  border: 0;
  padding: 0;
  background: transparent;
  z-index: 2;
}

.dg-divisor:hover, .dg-divisor:focus-visible {
  background: var(--brand-tint);
  outline: none;
}

/* lista de cargas */
.dg-cargas { list-style: none; margin: 0.5rem 0 0; padding: 0; }

.dg-cargas__item {
  display: block;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-s);
}

.dg-cargas__item--oculta .dg-cargas__nome { color: var(--ink-500); text-decoration: line-through; }

/* com seleção ativa, a carga inteira é o alvo do clique — o operador não
 * precisa acertar o botão "incluir N" */
.dg-cargas__item--alvo { cursor: pointer; }

.dg-cargas__item--alvo:hover { background: var(--brand-tint); }

.dg-cargas__linha {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.dg-cargas__nome {
  color: var(--texto-marca);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-cargas__meta {
  display: block;
  margin-left: 2.6rem;
  color: var(--ink-500);
  font-size: var(--text-label);
}

/* custo em linha própria: junto com paradas/peso/km a linha quebrava no meio
 * do valor, que é justamente o número que o operador procura */
.dg-cargas__custo {
  display: block;
  margin: 0.1rem 0 0 2.6rem;
  color: var(--ink-700);
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
}

.dg-cargas__acoes {
  display: flex;
  gap: 0.35rem;
  margin: 0.25rem 0 0 2.6rem;
  align-items: center;
}

.dg-cargas__acao {
  border: 0;
  background: none;
  padding: 0;
  color: var(--texto-marca);
  cursor: pointer;
  line-height: 0;
}

.dg-cargas__acao:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* ações da linha da carga em ícone: alvo de 1,6 rem, com o vermelho reservado
 * ao cancelar (lixeira) e o hover do resto na tinta da marca */
.dg-cargas__acao--icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
}

.dg-cargas__acao--icone:hover { background: var(--brand-tint); color: var(--texto-forte); }

.dg-cargas__acao--icone svg,
.dg-cargas__acao--icone .dg-olho { width: 0.9rem; height: 0.9rem; }

.dg-cargas__acao--perigo { color: var(--error-forte); }

.dg-cargas__acao--perigo:hover { background: var(--error-soft); color: var(--error-forte); }

/* botão com ícone + texto (ação de lote, que não vira só ícone) */
.dg-botao--com-icone { display: inline-flex; align-items: center; gap: 0.375rem; }

.dg-botao--com-icone svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}



.dg-olho { width: 1rem; height: 1rem; color: var(--texto-marca); }

.dg-cargas__acao[aria-pressed="true"] .dg-olho { color: var(--ink-500); }

.dg-legenda--painel {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-top: 0.5rem;
  font-size: var(--text-label);
}

/* abas pequenas */
.dg-abas--min { display: flex; gap: 0.25rem; }

.dg-abas--min .dg-aba {
  padding: 0.125rem 0.4rem;
  font-size: var(--text-label);
}

/* ------------------------------------------------ modal da lista de entregas */

.dg-lista { display: flex; flex-direction: column; min-height: 0; }

.dg-lista__barra {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.dg-campo--busca { flex: 1; min-width: 14rem; }

.dg-lista__rolagem {
  max-height: min(52vh, 30rem);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.dg-tabela--densa { font-size: var(--text-label); }
.dg-tabela--densa th, .dg-tabela--densa td { padding: 0.25rem 0.5rem; }
.dg-tabela--densa th[data-ordenar] { cursor: pointer; user-select: none; }
.dg-tabela--densa th[data-ordenar]:hover { background: var(--brand-tint); }

.dg-modal__acoes--lista { align-items: flex-end; }

/* ------------------------------------------------- modal da sequência */

/* escolha do provedor de rota no modal de sequência: teste sem trocar o padrão */
.dg-sequencia__provedor {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.dg-sequencia__provedor .dg-campo { margin: 0; }

.dg-sequencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.dg-sequencia__mapa {
  height: min(38vh, 22rem);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dg-sequencia__paradas {
  list-style: none;
  margin: 0;
  padding: 0 0.25rem 0 0;
  max-height: min(38vh, 22rem);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--text-label);
}

.dg-sequencia__item {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
  /* a ordem é ajustável: a pega e o cursor dizem isso sem precisar de texto */
  cursor: grab;
}

.dg-sequencia__item:active {
  cursor: grabbing;
}

.dg-sequencia__item::before {
  content: "⠿";
  margin-right: 0.35rem;
  color: var(--ink-500);
  opacity: 0.65;
}

.dg-fechar__linha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* no modo ampliado, só o mapa */
.dg-mapa-ampliado .dg-flutuante,
.dg-mapa-ampliado .dg-filtros { display: none; }

@media (max-width: 900px) {
  .dg-flutuante--cargas { width: 280px; }
  .dg-sequencia { grid-template-columns: 1fr; }
}


/* --------------------------------------- barra de filtros compacta e múltipla */

.dg-filtros--barra {
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}

.dg-filtros--barra .dg-rotulo { font-size: 0.6875rem; }
.dg-filtros--barra .dg-campo { min-width: 0; gap: 0.125rem; }
.dg-filtros--barra select,
.dg-filtros--barra input {
  padding: 0.25rem 0.4rem;
  min-height: 1.875rem;
  font-size: var(--text-label);
}

.dg-campo--curto { min-width: 6.5rem; }
.dg-campo--data { min-width: 15rem; }
.dg-campo--saida { min-width: 9.5rem; }
.dg-campo--saida input { width: 9.5rem; }

.dg-datas { display: flex; align-items: center; gap: 0.25rem; }
.dg-datas input { width: 8rem; }

/* caixinha "incluir reentregas": fica na linha da barra, sem virar select */
.dg-marca {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.875rem;
  font-size: var(--text-label);
  color: var(--ink-800);
}

.dg-filtros--barra .dg-marca input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--texto-marca);
}

/* "Mais filtros" agora é modal: os três grupos de checkbox num diálogo largo,
 * que não disputa espaço com o mapa (pedido do usuário, 27/10/2026) */
.dg-filtros-modal__grupos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 58vh;
  overflow: auto;
  margin: 0.5rem 0 0.25rem;
}

.dg-filtros-modal__grupo h3 { margin: 0 0 0.25rem; }

.dg-filtros-modal__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 42vh;
  overflow: auto;
  padding-right: 0.25rem;
}

.dg-filtros-modal__lista .dg-multi__item {
  align-items: center;
  padding: 0.05rem 0.25rem;
  line-height: 1.35;
  font-size: var(--text-label);
}

.dg-filtros-modal__busca { margin: 0 0 0.5rem; }

.dg-filtros-modal__busca input {
  width: 100%;
  font: inherit;
  font-size: var(--text-label);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}

/* modal compacto: título, nota e rodapé sem o respiro do modal padrão */
.dg-modal--filtros { padding: 0.9rem 1.1rem; }
.dg-modal--filtros .dg-modal__titulo { margin: 0 0 0.25rem; font-size: var(--text-body); }
.dg-modal--filtros > .dg-nota { margin: 0 0 0.5rem; }
.dg-modal--filtros .dg-modal__acoes { margin-top: 0.5rem; padding-top: 0.5rem; }

/* situação editável dentro do modal de detalhes (reentrega marcada aqui) */
.dg-situacao {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.dg-situacao select {
  font: inherit;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}

/* selo da reentrega no popup do mapa: o motivo de a nota furar o período */
.dg-popup__reentrega {
  margin: 0.25rem 0 0;
  padding: 0.25rem 0.5rem;
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  color: var(--warning-forte);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
}

.dg-multi { position: relative; }

.dg-multi__resumo {
  display: inline-block;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--texto-marca);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-multi__resumo::-webkit-details-marker { display: none; }
.dg-multi[open] .dg-multi__resumo { background: var(--brand-tint); }

/* O menu de múltipla escolha virou **painel** (lista + rodapé com "inverter"):
 * o painel é que flutua sobre o mapa; a lista rola dentro dele, e o rodapé fica
 * sempre à vista — antes o rodapé rolaria junto com os itens. */
.dg-multi__painel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 900;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  max-width: 20rem;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 0.5rem 1.5rem rgba(3, 30, 45, 0.18);
}

.dg-multi__lista {
  max-height: 16rem;
  overflow: auto;
}

/* largura fixa no menu de RCA: com o nome em uma linha a lista cabe quase
 * inteira sem rolar — o nome de vendedor é longo, e deixar a caixa encolher
 * até a largura do chip quebrava cada nome em duas linhas */
.dg-multi--largo .dg-multi__painel { width: 19rem; min-width: 16rem; max-width: 26rem; }

/* a linha é **dois** controles: a marca (incluir) e o círculo cortado (excluir) */
.dg-multi__item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.25rem;
  font-size: var(--text-label);
  cursor: default;
}

.dg-multi__marca {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}

.dg-multi__texto { min-width: 0; }

.dg-multi__item:hover { background: var(--brand-tint); }

.dg-filtros__ferramentas {
  display: flex;
  gap: 0.375rem;
  margin-left: auto;
}

.dg-filtros__ferramentas .dg-botao { gap: 0.35rem; }

/* ferramenta só de ícone: o rótulo vive no title e no aria-label */
.dg-filtros__ferramentas .dg-botao--icone { padding: 0.35rem 0.45rem; }

.dg-filtros__ferramentas .dg-botao svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------- painel de seleção ampliado */

.dg-flutuante--selecao .dg-selecao {
  max-height: 26vh;
  font-size: var(--text-label);
}

.dg-flutuante--selecao.dg-flutuante--ampla {
  left: 1.5rem;
  right: 1.5rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: auto;
  max-height: none;
  z-index: 700;
  box-shadow: 0 1rem 3rem rgba(3, 30, 45, 0.35);
}

.dg-flutuante--selecao.dg-flutuante--ampla .dg-flutuante__corpo { flex: 1 1 auto; min-height: 0; }

/* recolhido nunca fica grande — nem que o modo ampliado tenha ficado ligado */
.dg-flutuante--selecao.dg-flutuante--ampla.dg-flutuante--recolhido {
  left: 0.75rem;
  right: auto;
  top: auto;
  bottom: 0.75rem;
  width: 320px;
  max-height: 46%;
}

.dg-flutuante--selecao.dg-flutuante--ampla .dg-selecao {
  max-height: none;
  font-size: var(--text-body-s);
}

.dg-flutuante--selecao.dg-flutuante--ampla .dg-selecao__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-s);
}

.dg-flutuante--selecao .dg-flutuante__topo { flex-wrap: wrap; }
.dg-flutuante--selecao .dg-flutuante__topo .dg-botao { margin-left: auto; }


/* ----------------------------- alinhamento da barra e botão de sem-ponto */

.dg-filtros--barra { align-items: stretch; }

.dg-filtros--barra > .dg-campo,
.dg-filtros--barra > .dg-multi { justify-content: flex-end; }
.dg-filtros--barra > .dg-multi { display: flex; align-items: flex-end; }

.dg-multi__resumo {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  height: 1.875rem;
}

.dg-filtros--barra .dg-botao--pequeno { min-height: 1.875rem; }
.dg-filtros__ferramentas { align-items: flex-end; }

/* #8: o "ampliar" fica colado no "recolher", não espalhado pelo cabeçalho */
.dg-flutuante__topo > * { margin-left: 0; }
.dg-flutuante__topo > .dg-botao { margin-left: auto; }
.dg-flutuante__recolher { margin-left: 0; }

/* entregas sem ponto: aviso clicável */
.dg-sem-ponto {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.375rem 0.5rem;
  border: 1px dashed var(--warning);
  border-radius: 4px;
  background: var(--warning-soft);
  color: var(--warning-forte);
  font: inherit;
  font-size: var(--text-label);
  text-align: left;
  cursor: pointer;
}

.dg-sem-ponto:hover { background: var(--surface); }
.dg-sem-ponto:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }


/* Alfinete selecionado: anel que expande no pseudo-elemento.
 * `transform` no próprio marcador brigaria com o posicionamento do Leaflet, e
 * `box-shadow` animado depende de o sistema não ter "reduzir animações" ligado.
 * O anel é indicador de estado, não enfeite — por isso ele não se desliga. */
.dg-pino-ponto--sel {
  outline: 2px solid var(--brand-900);
  outline-offset: 1px;
  overflow: visible;
}

.dg-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid var(--brand-700);
  animation: dg-pulso 1.3s ease-out infinite;
  pointer-events: none;
}

@keyframes dg-pulso {
  0%   { transform: scale(0.85); opacity: 0.95; }
  70%  { transform: scale(1.9); opacity: 0.25; }
  100% { transform: scale(2.1); opacity: 0; }
}


/* painel de correção: fica em cima do mapa, sem bloquear o clique nele */
.dg-flutuante--corrigir {
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  z-index: 750;
}

.dg-corrigir__lista {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  max-height: 9rem;
  overflow: auto;
  font-size: var(--text-label);
}

.dg-corrigir__lista li { padding: 0.125rem 0; }


/* --- densidade do popup: menos entrelinha, menos respiro entre linhas ------ */
/* `line-height: 0.2rem` sobreporia as linhas (a linha fica menor que a fonte);
 * o ganho vem de 1.2 na entrelinha e do respiro entre os parágrafos. */
.leaflet-popup-content {
  line-height: 1.2;
  margin: 0.625rem 0.75rem;
}

.dg-popup p { margin: 0.125rem 0; }
.dg-popup__acoes { margin-top: 0.375rem; gap: 0.25rem; }
.leaflet-popup-content .dg-itens li { padding: 0; }

/* --- marcação múltipla: caixa alinhada ao texto, não à linha de base ------ */
.dg-multi__item {
  align-items: center;
  line-height: 1.2;
}

.dg-multi__item input {
  flex: 0 0 auto;
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
}

/* --- barra de filtros: rótulos na mesma altura, controles na mesma base --- */
.dg-filtros--barra { align-items: flex-end; }
.dg-filtros--barra > * { align-self: flex-end; }

.dg-filtros--barra .dg-rotulo {
  display: block;
  line-height: 1;
  min-height: 0.875rem;
  margin-bottom: 0.25rem;
}

.dg-filtros--barra .dg-campo,
.dg-filtros--barra .dg-multi { display: flex; flex-direction: column; }

.dg-datas { align-items: center; line-height: 1; }


/* Avisos flutuantes: informam sem empurrar a tela. O "x" recarrega a página;
 * como a mensagem já foi consumida do `flash`, ela não volta. */
.dg-avisos {
  position: fixed;
  /* canto de baixo (29/10/2026): no topo o toast cobria a faixa de KPIs da torre */
  bottom: 1rem;
  right: 1rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(92vw, 26rem);
  pointer-events: none;
}

.dg-aviso {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  pointer-events: auto;
  box-shadow: 0 0.5rem 1.5rem rgba(3, 30, 45, 0.18);
}

.dg-aviso__fechar {
  margin-left: auto;
  color: inherit;
  text-decoration: none;
  font-weight: var(--weight-bold);
  line-height: 1;
  padding: 0 0.125rem;
  /* é <button>: fechar o aviso não pode navegar (o <a href> recarregava a tela) */
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.dg-aviso__fechar:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }


/* ===================== barra de filtros: grade de alturas fixas ============ */
/* Antes cada controle tinha a própria altura: select com `min-height` herdado
 * (2,375rem), data nativa com altura intrínseca, chip com padding próprio e
 * botão com 2rem. Aqui **todos** passam a ter a mesma caixa, com rótulo em
 * linha própria e o mesmo respiro — é o único jeito de alinhar de verdade. */

.dg-filtros--barra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.375rem 0.5rem;
  padding: 0.375rem 0.5rem;
  margin-bottom: 0.375rem;
}

.dg-filtros--barra .dg-campo {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.dg-filtros--barra .dg-rotulo {
  font-size: 0.6875rem;
  line-height: 1;
  height: 0.75rem;
  margin: 0;
  letter-spacing: 0.04em;
}

/* a caixa padrão de TODO controle da barra */
.dg-filtros--barra .dg-campo select,
.dg-filtros--barra .dg-campo input,
.dg-filtros--barra .dg-datas input,
.dg-filtros--barra .dg-multi__resumo,
.dg-filtros--barra .dg-botao {
  height: 1.75rem;
  min-height: 1.75rem;
  max-height: 1.75rem;
  padding: 0 0.375rem;
  box-sizing: border-box;
  font-size: 0.8125rem;
  line-height: 1.75rem;
  border-radius: 4px;
}

.dg-filtros--barra .dg-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0 0.625rem;
}

/* o menu de múltipla escolha não tem rótulo em cima: o espaço é reservado
 * para o chip cair na mesma linha dos selects */
.dg-multi { display: flex; align-self: flex-end; }

.dg-filtros__ferramentas { display: flex; gap: 0.375rem; margin-left: auto; }
.dg-datas { display: flex; align-items: center; gap: 0.25rem; line-height: 1; }
.dg-datas input { width: 7.25rem; }
.dg-datas span { font-size: 0.75rem; color: var(--ink-500); }

/* ===================== popup do mapa: mais denso ainda ==================== */

.leaflet-popup-content { margin: 0.5rem 0.625rem; line-height: 1.15; }
.dg-popup { min-width: 17rem; }
.dg-popup strong { font-size: var(--text-body-s); }
.dg-popup p { margin: 0; font-size: var(--text-label); }
.dg-popup__carga { margin: 0.25rem 0 0; font-size: var(--text-label); }
.dg-popup__acoes { margin-top: 0.25rem; gap: 0.25rem; }
.dg-popup .dg-botao {
  min-height: 1.5rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
}
.dg-popup .dg-itens { max-height: 7rem; margin: 0.125rem 0; }
.dg-popup .dg-itens li { padding: 0; line-height: 1.15; }


/* Ações do popup em ícone: o rótulo vira "title" (dica ao passar o mouse). */
.dg-icone-acao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--texto-marca);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.dg-icone-acao:hover { background: var(--brand-tint); }

.dg-icone-acao--svg svg,
.dg-icone-acao svg {
  width: 1rem;
  height: 1rem;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dg-icone-acao--on { background: var(--brand-800); border-color: var(--texto-marca); color: #fff; }
.dg-icone-acao:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }


/* popup do mapa: entrega em cima, notas em lista, ações curtas */
.dg-popup__topo {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.dg-popup__selo {
  padding: 0 0.3rem;
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--texto-marca);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.dg-popup__notas {
  list-style: none;
  margin: 0.25rem 0;
  padding: 0.25rem 0 0;
  border-top: 1px solid var(--border);
  max-height: 7.5rem;
  overflow: auto;
  font-size: var(--text-label);
}

.dg-popup__notas li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.1rem 0;
}

.dg-popup__acoes-nota { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.dg-popup__acoes-nota .dg-icone-acao { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; }

/* em tela estreita o popup não pode passar da largura da janela */
@media (max-width: 640px) {
  .dg-popup { min-width: 0; }
  .leaflet-popup-content { margin: 0.5rem; }
  .dg-popup .dg-botao { font-size: 0.6875rem; }
}


/* a carga é o alvo: quando há seleção, ela mostra "incluir N" e responde ao clique */
.dg-cargas__incluir {
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--brand-500);
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--texto-marca);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.dg-cargas__incluir:hover { background: var(--brand-800); color: #fff; }
.dg-cargas__incluir:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }


/* nome da área ao lado do botão: campo no painel, sem prompt do navegador */
.dg-flutuante__acoes--area { align-items: stretch; }

.dg-campo__entrada {
  flex: 1 1 auto;
  min-width: 0;
  height: 1.75rem;
  padding: 0 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-label);
}

.dg-campo__entrada:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }


/* checkbox da UF no cabeçalho do grupo: marca o estado inteiro */
.dg-grupo__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.dg-grupo__marca input {
  width: 0.9375rem;
  height: 0.9375rem;
  margin: 0;
}


/* ==================== botões destrutivos: cor pela gravidade ============== */
/* A regra do parque é "um padrão, uma cor": ação que tira ou desfaz dado não
 * pode ter a mesma cara do botão comum. Dois níveis, com os tokens da marca:
 *   --aviso   (âmbar)  desfaz algo reversível ou tira item de um conjunto;
 *   --perigo  (vermelho) apaga o objeto ou desmonta trabalho de gente. */

.dg-botao--aviso {
  background: var(--warning-soft);
  border-color: var(--warning);
  color: var(--warning-forte);
}

.dg-botao--aviso:hover { background: var(--warning); color: #fff; }

.dg-botao--perigo {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error-forte);
}

.dg-botao--perigo:hover { background: var(--error); color: #fff; }

.dg-botao--aviso:focus-visible,
.dg-botao--perigo:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* o "remover" pequeno das listas segue a mesma régua */
.dg-selecao__remover { color: var(--error-forte); }
.dg-selecao__remover:hover { color: var(--error); }

/* ação destrutiva em forma de link pequeno (cancelar carga, tirar nota) */
.dg-selecao__acao.dg-selecao__remover { color: var(--error-forte); }
.dg-selecao__acao.dg-selecao__remover:hover { color: var(--error); }


/* interruptor Roteirizar × Áreas: as ferramentas não se misturam */
.dg-modo { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }

.dg-modo__opcao {
  padding: 0.25rem 0.625rem;
  border: 0;
  background: var(--surface);
  color: var(--texto-marca);
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.dg-modo__opcao + .dg-modo__opcao { border-left: 1px solid var(--border); }
.dg-modo__opcao--on { background: var(--brand-800); color: #fff; }
.dg-modo__opcao:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }

/* no modo área a roteirização sai de cena: nada de cargas nem seleção de entregas */
.dg-palco--area .dg-flutuante--cargas,
.dg-palco--area .dg-flutuante--selecao,
.dg-palco--area .dg-dica { display: none; }

.dg-flutuante--area {
  top: 3.5rem;
  right: 0.75rem;
  width: 20rem;
  z-index: 760;
}

/* espera: a montagem automática não pode parecer que não fez nada */
.dg-espera {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  background: rgba(16, 42, 56, 0.38);
}

.dg-espera__caixa {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.2rem;
  border-left: 4px solid var(--brand-600);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(16, 42, 56, 0.28);
  color: var(--ink-900);
}

.dg-espera__texto { margin: 0; font-size: var(--text-body); }

.dg-espera__giro {
  width: 1.05rem;
  height: 1.05rem;
  border: 2px solid var(--brand-600);
  border-right-color: transparent;
  border-radius: 50%;
  animation: dg-girar 0.8s linear infinite;
}

@keyframes dg-girar {
  to { transform: rotate(1turn); }
}

@media (prefers-reduced-motion: reduce) {
  .dg-espera__giro {
    animation: none;
    border-right-color: var(--brand-600);
    opacity: 0.55;
  }
}

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

.dg-visao__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.dg-visao__titulo {
  margin: 0.125rem 0 0;
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
  color: var(--texto-forte);
}

.dg-visao__acoes {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.dg-visao {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 0.75rem;
}

.dg-visao .dg-bloco { padding: 1rem 1.125rem; }
.dg-visao__destaque { margin-bottom: 0; }
.dg-visao__destaque .dg-metricas { gap: 1.25rem; }

.dg-visao__card {
  display: flex;
  flex-direction: column;
}

.dg-visao__card .dg-numero { margin: 0.125rem 0 0; }
.dg-visao__card .dg-nota { margin-top: 0.25rem; }

.dg-visao__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  color: var(--texto-marca);
  text-decoration: none;
}

.dg-visao__link:hover { text-decoration: underline; }

.dg-resumo-cargas {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.dg-resumo-cargas li + li { border-top: 1px solid var(--border); }

.dg-resumo-carga {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.25rem;
  text-decoration: none;
  color: var(--ink-900);
  font-size: var(--text-body-s);
}

.dg-resumo-carga:hover { background: var(--brand-tint); }
.dg-resumo-carga__nome { font-weight: var(--weight-semibold); }
.dg-resumo-carga__meta { color: var(--ink-500); }

.dg-resumo-carga__custo {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.dg-cargas-abertas { margin-top: 0.75rem; }

.dg-guia { margin-top: 0.75rem; }

.dg-guia__passos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.dg-guia__passos li {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.dg-guia__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--texto-marca);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
}

.dg-guia__passos strong {
  display: block;
  color: var(--ink-900);
  font-size: var(--text-body-s);
}

.dg-guia__passos span {
  color: var(--ink-500);
  font-size: var(--text-label);
  line-height: var(--leading-snug);
}

@media (max-width: 900px) {
  .dg-visao { grid-template-columns: 1fr 1fr; }
  .dg-guia__passos { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .dg-visao { grid-template-columns: 1fr; }
  .dg-guia__passos { grid-template-columns: 1fr; }
  .dg-visao__cabecalho { align-items: flex-start; }
}

/* -------------------------------------------------------- configurações */

.dg-config__cabecalho { margin-bottom: 1rem; }

.dg-config__barra {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.dg-config__busca {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: var(--space-3);
}

.dg-config__busca .dg-rotulo { margin: 0; }
.dg-config__busca input { min-width: 18rem; }

.dg-config__acoes {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.dg-config__grupo { margin-top: 0.75rem; }
.dg-config__grupo-cabecalho { margin-bottom: 0.25rem; }
.dg-config__grupo-cabecalho .dg-nota { margin-top: 0.25rem; }

.dg-config__itens { display: grid; }

.dg-config__item {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border);
}

.dg-config__item:first-child { border-top: 0; }

.dg-config__rotulo label {
  display: block;
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

.dg-config__rotulo code {
  display: block;
  margin-top: 0.125rem;
  color: var(--ink-500);
  font-size: var(--text-label);
}

.dg-config__controle input,
.dg-config__controle select {
  width: 100%;
  max-width: 32rem;
}

.dg-config__ajuda {
  margin: 0.25rem 0 0;
  color: var(--ink-500);
  font-size: var(--text-body-s);
}

.dg-config__padrao {
  margin: 0.125rem 0 0;
  color: var(--ink-500);
  font-size: var(--text-label);
}

.dg-config__vazio {
  margin: 0.75rem 0;
  color: var(--ink-500);
  font-size: var(--text-body-s);
}

/* referência externa dentro de um tópico: só o link, sem consulta no servidor */
.dg-precos {
  margin: 0.5rem 0 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--surface-soft);
  border-left: 3px solid var(--brand-300);
  border-radius: 4px;
}

.dg-precos .dg-rotulo { margin: 0; }
.dg-precos .dg-nota { margin-top: 0.25rem; }
.dg-precos__links { margin-top: 0.35rem; }
.dg-precos__links a {
  color: var(--texto-marca);
  font-weight: var(--weight-semibold);
}

@media (max-width: 720px) {
  .dg-config__item { grid-template-columns: 1fr; gap: 0.25rem; }
  .dg-config__barra { align-items: stretch; }
  .dg-config__busca { margin-left: 0; }
  .dg-config__busca input { min-width: 0; width: 100%; }
}

/* -------------------------------------------------------------- entregas */

.dg-entregas__acoes {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.75rem 0;
}

.dg-entregas__acoes .dg-nota { margin: 0; max-width: 44rem; }

.dg-entregas__botoes {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* o seletor de colunas usa o mesmo details dos filtros, mas abre para a
   esquerda porque fica no canto direito da barra */
.dg-colunas .dg-multi__lista {
  left: auto;
  right: 0;
  min-width: 12rem;
}

.dg-ordenar {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.dg-ordenar:hover { color: var(--texto-marca); text-decoration: underline; }
.dg-ordenar:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.dg-tabela--entregas th { white-space: nowrap; }

.dg-entregas__nota { margin: 0 0 0.5rem; }

/* Seletor de colunas: popover ancorado no botão. Sem isto o painel entra no fluxo
 * da barra de filtros e empurra as ferramentas — era o que quebrava a UX. */
.dg-colunas { position: relative; display: inline-flex; }

.dg-colunas__painel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 900;
  display: grid;
  gap: 0.125rem;
  min-width: 11rem;
  max-height: 18rem;
  overflow: auto;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 0.5rem 1.5rem rgba(3, 30, 45, 0.18);
}

.dg-colunas__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.2rem 0.25rem;
  font-size: var(--text-label);
  cursor: pointer;
}

.dg-colunas__item:hover { background: var(--brand-tint); }
.dg-colunas__item input { margin: 0; }

/* Período: datas livres + atalhos fixos atrás da seta. */
.dg-periodo { position: relative; display: inline-flex; align-items: center; }

.dg-periodo__resumo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--texto-marca);
  cursor: pointer;
  list-style: none;
}

.dg-periodo__resumo::-webkit-details-marker { display: none; }
.dg-periodo[open] .dg-periodo__resumo { background: var(--brand-tint); }

.dg-periodo__resumo svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-periodo[open] .dg-periodo__resumo svg { transform: rotate(180deg); }

.dg-periodo__painel {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 900;
  display: grid;
  gap: 0.125rem;
  min-width: 10rem;
  padding: 0.375rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 0.5rem 1.5rem rgba(3, 30, 45, 0.18);
}

.dg-periodo__atalho {
  display: block;
  width: 100%;
  padding: 0.3rem 0.375rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-size: var(--text-label);
  text-align: left;
  cursor: pointer;
}

.dg-periodo__atalho:hover { background: var(--brand-tint); }
.dg-periodo__atalho:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* Detalhes da entrega */
.dg-detalhes {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.dg-detalhes__bloco {
  padding: 0.5rem 0.625rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dg-detalhes__bloco > .dg-rotulo { margin: 0 0 0.375rem; }

.dg-detalhes__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.375rem 0.75rem;
}

.dg-detalhes__campo { display: grid; gap: 0.1rem; }
.dg-detalhes__campo dt { font-size: var(--text-label); color: var(--ink-500); }
.dg-detalhes__campo dd { margin: 0; font-size: var(--text-body-s); }

/* Coordenada com link externo: o valor é link, o alfinete é a ação. Sem
 * moldura e sem fundo — dentro da grade de detalhes, botão pesa mais que ajuda. */
.dg-geo-modal__linha {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.dg-link-mapa {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--texto-marca);
  text-decoration: none;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}

.dg-link-mapa:hover { text-decoration: underline; }
.dg-link-mapa:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.dg-link-mapa svg {
  width: 0.9rem;
  height: 0.9rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-geo-modal__origem { color: var(--ink-500); }
.dg-geo-modal__nota { color: var(--ink-500); }

/* Geolocalização do detalhe: campos à esquerda, miniatura do mapa à direita.
 * A miniatura é uma tile recortada — px, não rem: a conta é em pixels de tile. */
.dg-geo-modal {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dg-geo-modal__campos {
  flex: 0 1 auto;
  max-width: 32rem;
  margin: 0;
}

.dg-geo-modal__mapa { flex: none; margin-left: auto; }

.dg-mini-mapa {
  position: relative;
  display: block;
  width: 240px;
  height: 150px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}

.dg-mini-mapa:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.dg-mini-mapa:hover { border-color: var(--brand-500); }

.dg-mini-mapa img {
  position: absolute;
  width: 256px;
  height: 256px;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.dg-mini-mapa__pino {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: var(--texto-marca);
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Ponto do cliente é anel: a forma distingue do GPS da entrega, a cor não
 * carrega segundo significado (28/10/2026). */
.dg-mini-mapa__pino--cliente {
  background: transparent;
  border: 2px solid var(--texto-marca);
  box-shadow: 0 0 0 2px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dg-detalhes__historico {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.25rem;
  max-height: 11rem;
  overflow: auto;
}

.dg-detalhes__historico li {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-label);
}

.dg-detalhes__historico li:last-child { border-bottom: 0; }
.dg-detalhes__historico time { color: var(--ink-500); }

/* ------------------------------------------------------------- canhotos */

.dg-canhoto {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--ink-700);
  font: inherit;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.dg-canhoto:hover { border-color: var(--brand-500); }
.dg-canhoto:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

.dg-canhoto--vazio {
  color: var(--texto-marca);
  border-color: var(--brand-300);
  background: var(--brand-soft);
}

.dg-canhoto--recebido {
  background: var(--warning-soft);
  color: var(--warning-forte);
  border-color: transparent;
}

.dg-canhoto--suspeito,
.dg-canhoto--recusado {
  background: var(--error-soft);
  color: var(--error-forte);
  border-color: transparent;
}

.dg-canhoto--validado {
  background: var(--success-soft);
  color: var(--success-forte);
  border-color: transparent;
}

.dg-canhoto__conteudo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem;
  margin: 0.5rem 0 1rem;
}

.dg-canhoto__foto-col {
  display: grid;
  align-content: start;
  gap: 0.5rem;
}

.dg-canhoto__previa {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 0.5rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.dg-canhoto__previa img {
  max-width: 100%;
  max-height: 55vh;
  object-fit: contain;
  border-radius: 4px;
}

.dg-canhoto__lado {
  display: grid;
  align-content: start;
  gap: 0.375rem;
}

.dg-canhoto__situacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.dg-canhoto__situacao .dg-nota {
  margin: 0;
  font-size: var(--text-label);
}

.dg-canhoto__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-height: 1.5rem;
}

.dg-canhoto__check {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--ink-700);
  font-size: 0.75rem;
}

.dg-canhoto__check--ok { background: var(--success-soft); color: var(--success-forte); }
.dg-canhoto__check--erro { background: var(--error-soft); color: var(--error-forte); }
.dg-canhoto__check--formato { background: var(--brand-soft); color: var(--texto-marca); }

.dg-canhoto__acoes-foto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.dg-canhoto__acoes-foto svg {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-ver {
  display: flex;
  justify-content: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.dg-ver img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}

#canhoto-download[hidden] { display: none; }

.dg-arquivo {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.dg-arquivo input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.dg-canhoto__qr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dg-canhoto__qr img {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 4.5rem;
  background: #fff;
  border-radius: 4px;
}

.dg-canhoto__qr .dg-nota {
  margin: 0;
  font-size: var(--text-label);
}

.dg-canhoto__evidencias {
  display: grid;
  gap: 0.375rem;
  padding: 0.5rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dg-canhoto__evidencias-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.dg-canhoto__evidencias-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.dg-canhoto__evidencia {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}

.dg-canhoto__evidencia img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dg-canhoto-card__evidencia {
  position: relative;
  width: 100%;
  min-height: 2.5rem;
  cursor: pointer;
}

.dg-canhoto-card__evidencia input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dg-canhoto-card__fotos {
  margin: 0.25rem 0 0;
  font-size: var(--text-label);
}

/* editor de foto: girar e recortar no navegador */
.dg-foto-editor { display: grid; gap: 0.75rem; }

.dg-foto-editor__palco {
  position: relative;
  display: flex;
  justify-content: center;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.dg-foto-editor__palco canvas {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  touch-action: none;
}

.dg-foto-editor__crop {
  position: absolute;
  border: 2px solid var(--brand-500);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  cursor: move;
  touch-action: none;
}

.dg-foto-editor__alca {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--brand-500);
  border: 2px solid #fff;
  border-radius: 2px;
}

.dg-foto-editor__alca[data-alca="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.dg-foto-editor__alca[data-alca="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.dg-foto-editor__alca[data-alca="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.dg-foto-editor__alca[data-alca="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }

.dg-foto-editor__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dg-foto-editor__erro { color: var(--error-forte); }

.dg-canhoto__erro { color: var(--error-forte); }

@media (max-width: 720px) {
  .dg-canhoto__conteudo { grid-template-columns: 1fr; }
}

/* fila de canhotos no celular */
.dg-canhotos-app {
  max-width: 42rem;
  margin: 0 auto;
}

.dg-canhotos__cabecalho { margin-bottom: 1rem; }
.dg-canhotos__cabecalho .dg-filtros { margin-top: 0.75rem; }

.dg-canhoto-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dg-canhoto-card__info { min-width: 0; }

.dg-canhoto-card__titulo {
  margin: 0;
  color: var(--ink-900);
  font-size: var(--text-body-s);
  font-weight: var(--weight-semibold);
}

.dg-canhoto-card__info .dg-fraco {
  margin: 0.125rem 0 0;
  font-size: var(--text-label);
}

.dg-canhoto-card__status {
  margin: 0.25rem 0 0;
  color: var(--texto-marca);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
}

.dg-canhoto-card__ver {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--texto-marca);
  font-size: var(--text-label);
}

.dg-canhoto-card__erro {
  margin: 0.25rem 0 0;
  color: var(--error-forte);
  font-size: var(--text-label);
}

.dg-canhoto-card__foto {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}

.dg-canhoto-card__foto input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.dg-canhoto-card__ajustar {
  width: 100%;
  min-height: 2.5rem;
}

@media (max-width: 640px) {
  .dg-canhoto-card {
    align-items: stretch;
    flex-direction: column;
  }
  .dg-canhoto-card__foto { width: 100%; }
}

/* no celular a fila é uma ferramenta focada: a navegação do desktop rouba a
   largura e corta as opções; o operador volta por "Entregas" no topo */
@media (max-width: 760px) {
  body.dg-canhotos .dg-topo__nav { display: none; }
  body.dg-canhotos .dg-conteudo { padding: 1rem 0.9rem 2rem; }
}

/* -------------------------------------------------------------- print */

@media print {
  .dg-dms { background: #fff; }
  .dg-topo, .dg-rodape, .dg-nao-imprime, .dg-filtros, .dg-acoes { display: none !important; }
  .dg-conteudo { max-width: none; padding: 0; }
  .dg-tabela { border-color: #999; font-size: 10pt; }
  .dg-tabela th { background: #eee; }
  .dg-romaneio__titulo { font-size: 16pt; }
}

/* ------------------------------------------------------------ integração */

.dg-integracao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.dg-integracao__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0;
}

.dg-integracao__lista {
  margin: 0.25rem 0 0.5rem;
  padding-left: 1.1rem;
  font-size: var(--text-label);
}

.dg-integracao__sql {
  margin: 0.5rem 0 0;
  padding: 0.75rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.75rem;
  line-height: 1.45;
  overflow: auto;
  max-height: 18rem;
}

.dg-integracao__log {
  margin: 0.25rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--text-label);
}

.dg-integracao__log time { color: var(--ink-500); }

/* -------------------------------------------------- clientes (geocodificação) */

.dg-geo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.dg-geo__andamento {
  display: grid;
  gap: 0.375rem;
  margin-top: 0.5rem;
  max-width: 34rem;
}

.dg-geo__barra {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.dg-geo__barra > span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand-500);
  transition: width 0.4s ease;
}

/* ------------------------------------------- carga no modal do roteirizador */

.dg-carga-modal__paradas {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  max-height: 18rem;
  overflow: auto;
  display: grid;
  gap: 0.125rem;
}

.dg-carga-modal__paradas li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.5rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-label);
}

.dg-carga-modal__paradas li:last-child { border-bottom: 0; }

/* gestão de área compacta: campos curtos, resumo em uma linha e ações juntas */
.dg-flutuante--area .dg-flutuante__corpo { gap: 0.5rem; }
.dg-flutuante--area .dg-flutuante__acoes { gap: 0.375rem; }
.dg-flutuante--area .dg-nota { margin: 0; font-size: var(--text-label); }

.dg-area__linha { display: flex; align-items: flex-end; gap: 0.5rem; }
.dg-area__linha .dg-campo { flex: 1 1 auto; }

/* (o `.dg-cor-area` — swatch da cor da área — mora no bloco "Gestão de área no
 * mapa", no fim deste arquivo, junto das outras regras da paleta de área). */

/* a NF na sequência é link para o detalhamento (/entregas?pedido=) */
.dg-sequencia__nota {
  font-size: var(--text-label);
  color: var(--texto-marca);
  text-decoration: underline;
}
.dg-sequencia__nota:hover { color: var(--brand-600); }
.dg-sequencia__nota:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* a sequência é arrastável: a linha é o alvo do gesto */
.dg-sequencia__item[draggable="true"] { cursor: grab; }
.dg-sequencia__item--arrastando { opacity: 0.45; }
.dg-sequencia__item[draggable="true"]:hover { background: var(--surface-2, rgba(0, 0, 0, 0.03)); }

/* ------------------------ icones de acao em tabela (Clientes) ------------- */
.dg-icone { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dg-icone-botao { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--texto-marca); cursor: pointer; }
.dg-icone-botao:hover { background: var(--brand-soft); color: var(--texto-marca); }
.dg-icone-botao:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.dg-col-acoes { display: flex; gap: 4px; align-items: center; }
.dg-lista__barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

/* ------------------- aviso de desktop-only (só na tela do roteirizador) ----
   Escondido em tela grande; aparece quando não cabe (celular/tablet deitado).
   .dg-operacao-tela marca a tela de operação, então o aviso não vaza para as
   telas de consulta, que são responsivas de propósito. */
.dg-so-desktop { display: none; }

@media (max-width: 900px) {
  .dg-operacao-tela .dg-so-desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 12px;
    background: var(--warning-soft);
    border-left: 4px solid var(--warning);
    color: var(--warning-forte);
    font-size: var(--text-label);
  }
  .dg-operacao-tela .dg-so-desktop a {
    color: var(--warning-forte);
    font-weight: var(--weight-bold);
    text-decoration: underline;
  }
}

/* telas de consulta no celular: a tabela rola dentro da própria caixa,
   em vez de empurrar a página inteira (as colunas continuam legíveis) */
@media (max-width: 820px) {
  .dg-tabela { display: block; overflow-x: auto; white-space: nowrap; }
  .dg-conteudo { padding-inline: 10px; }
  .dg-filtros--barra { flex-wrap: wrap; gap: 6px; }
}

/* nota de qualidade do ponto (1 a 5) — três faixas, três tokens que já existem.
 * Nome próprio (dg-qual): dg-nota já é o texto auxiliar do sistema. */
.dg-qual { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; border-radius: 4px; font-weight: var(--weight-bold); font-size: var(--text-label); }
.dg-qual--alta { background: var(--success-soft); color: var(--success-forte); }
.dg-qual--media { background: var(--warning-soft); color: var(--warning-forte); }
.dg-qual--baixa { background: var(--error-soft); color: var(--error-forte); }

/* ---------------------------------------------------------------- 0.5.2+ */


/* "pulo" dos pinos de uma carga ao apontar/focar o nome dela (ou ao trocar a
 * cor): a animação usa a propriedade `translate`, independente do `transform`
 * da gota e do transform que o Leaflet escreve no pai. */
@keyframes dg-pulo {
  0% { translate: 0 0; }
  12% { translate: 0 -12px; }
  30% { translate: 0 0; }
  44% { translate: 0 -7px; }
  60% { translate: 0 0; }
  72% { translate: 0 -4px; }
  86% { translate: 0 0; }
  93% { translate: 0 -2px; }
  100% { translate: 0 0; }
}

.dg-pino-ponto--pulando .dg-pino-ponto__forma {
  animation: dg-pulo 1100ms var(--ease) 1;
}

@media (prefers-reduced-motion: reduce) {
  .dg-pino-ponto--pulando .dg-pino-ponto__forma { animation: none; }
}

/* saída prevista (reentrega) */
.dg-campo--saida { min-width: 9.5rem; }
.dg-campo--saida input { width: 9.5rem; }

.dg-marca {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 1.875rem;
  font-size: var(--text-label);
  color: var(--ink-800);
}

.dg-filtros--barra .dg-marca input[type="checkbox"] {
  width: 0.95rem;
  height: 0.95rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  accent-color: var(--texto-marca);
}

/* situação editável no modal de detalhes */
.dg-situacao {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.dg-situacao select {
  font: inherit;
  padding: 0.25rem 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}

.dg-popup__reentrega {
  margin: 0.25rem 0 0;
  padding: 0.25rem 0.5rem;
  border-left: 3px solid var(--warning);
  background: var(--warning-soft);
  color: var(--warning-forte);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
}

/* "Mais filtros" em modal */
.dg-filtros-modal__grupos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 58vh;
  overflow: auto;
  margin: 0.5rem 0 0.25rem;
}

.dg-filtros-modal__grupo h3 { margin: 0 0 0.25rem; }

.dg-filtros-modal__lista {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 42vh;
  overflow: auto;
  padding-right: 0.25rem;
}

.dg-filtros-modal__lista .dg-multi__item {
  align-items: center;
  padding: 0.05rem 0.25rem;
  line-height: 1.35;
  font-size: var(--text-label);
}

.dg-filtros-modal__busca { margin: 0 0 0.5rem; }

.dg-filtros-modal__busca input {
  width: 100%;
  font: inherit;
  font-size: var(--text-label);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}

/* modal compacto: título, nota e rodapé sem o respiro do modal padrão */
.dg-modal--filtros { padding: 0.9rem 1.1rem; }
.dg-modal--filtros .dg-modal__titulo { margin: 0 0 0.25rem; font-size: var(--text-body); }
.dg-modal--filtros > .dg-nota { margin: 0 0 0.5rem; }
.dg-modal--filtros .dg-modal__acoes { margin-top: 0.5rem; padding-top: 0.5rem; }

/* ações da linha da carga em ícone, compactas */
.dg-cargas__acao--icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
}

.dg-cargas__acao--icone:hover { background: var(--brand-tint); color: var(--texto-forte); }

.dg-cargas__acao--icone svg,
.dg-cargas__acao--icone .dg-olho { width: 0.9rem; height: 0.9rem; }

.dg-cargas__acao--perigo { color: var(--error-forte); }
.dg-cargas__acao--perigo:hover { background: var(--error-soft); color: var(--error-forte); }

/* legenda do painel: os MESMOS pinos do mapa (classes), não uma silhueta */
.dg-legenda__pinos {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.dg-legenda__pino {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

/* ações de lote do painel: dois ícones compactos, uma linha só */
#corpo-cargas .dg-flutuante__acoes--icones { justify-content: flex-start; }

#corpo-cargas .dg-flutuante__acoes--icones .dg-botao--icone {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
}

#corpo-cargas .dg-flutuante__acoes--icones .dg-botao--icone svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* modal de filtros com ALTURA FIXA: a busca esconde itens, mas o modal não
 * pode encolher (pedido do usuário, 28/10/2026). O corpo é flex e as três
 * listas rolam dentro; o rodapé fica sempre no mesmo lugar. */
.dg-modal--filtros {
  height: auto;
  overflow: auto;
}

.dg-modal--filtros .dg-filtros-modal__grupos {
  height: min(46vh, 24rem);
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.dg-modal--filtros .dg-filtros-modal__grupo {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.dg-modal--filtros .dg-filtros-modal__lista {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

/* Logo DIANAGRO DMS */
.dg-topo__logo-caixa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.2rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* LOGO DIANAGRO DMS */
.dg-topo__logo {
  display: block;
  height: 1.8rem;
  width: auto;
  /* filter: brightness(0) invert(1); */
}

.dg-topo__dms {
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-200);
}

/* peso e valor por nota/pedido na seleção: mesma linha da cidade; no painel
 * estreito o texto quebra em vez de esconder (pedido do usuário, 28/10/2026) */
.dg-selecao__detalhe {
  display: block;
  font-size: var(--text-label);
  color: var(--ink-500);
}

.dg-selecao__numeros {
  margin-left: 0.375rem;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dg-selecao__numeros::before {
  content: "· ";
  color: var(--ink-300);
}

.dg-selecao__acao--icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0;
  padding: 0;
  border-radius: 4px;
  color: var(--ink-500);
  text-decoration: none;
}

.dg-selecao__acao--icone:hover {
  background: var(--error-soft);
  color: var(--error-forte);
}

.dg-selecao__acao--icone svg { width: 0.95rem; height: 0.95rem; }

/* o " — " entre documento e cliente vira prefixo de CSS: no modo ampliado o
 * cliente ocupa uma coluna e o traço sai */
.dg-selecao__cliente::before { content: " — "; }

/* a seleção ampliada cobre a barra de ferramentas e o zoom do mapa (que
 * ficavam por cima do cabeçalho do painel) e usa a largura em uma linha por
 * item: documento | cliente | cidade · peso · valor | lixeira */
.dg-flutuante--selecao.dg-flutuante--ampla { z-index: 1100; }

.dg-flutuante--selecao.dg-flutuante--ampla .dg-selecao__item { align-items: center; }

.dg-flutuante--selecao.dg-flutuante--ampla .dg-selecao__item > div {
  display: grid;
  grid-template-columns: auto minmax(0, 0.9fr) minmax(14rem, 1.2fr);
  align-items: baseline;
  gap: 0.75rem;
}

.dg-flutuante--selecao.dg-flutuante--ampla .dg-selecao__cliente::before { content: none; }
.dg-flutuante--selecao.dg-flutuante--ampla .dg-selecao__detalhe { display: inline; }

/* um scroll só na seleção: o corpo fica fixo e só a lista rola (antes o corpo
 * e a lista rolavam, dois scrolls — pedido do usuário, 28/10/2026) */
.dg-flutuante--selecao .dg-flutuante__corpo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dg-flutuante--selecao .dg-selecao {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

/* totais compactos da seleção: uma linha de ícone + valor (o ícone é o
 * rótulo) no lugar do número grande e das linhas empilhadas (28/10/2026) */
.dg-flutuante--selecao .dg-flutuante__numero {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.15rem;
  font-size: var(--text-body-l);
}

.dg-selecao__numero .dg-fraco { font-weight: 400; }

.dg-selecao__icone,
.dg-selecao__total svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
}

.dg-selecao__icone {
  color: var(--texto-marca);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-selecao__resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.35rem;
  margin: 0 0 0.1rem;
  font-size: var(--text-label);
  color: var(--ink-700);
}

.dg-selecao__total {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}

.dg-selecao__total svg {
  color: var(--ink-400);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-selecao__total + .dg-selecao__total::before {
  content: "·";
  color: var(--ink-300);
}

.dg-flutuante--selecao .dg-selecao__filtro {
  margin: 0 0 0.25rem;
  font-size: var(--text-label);
  color: var(--ink-400);
}

/* lista de entregas: barra compacta (busca com lupa, limpar em ícone),
 * cabeçalhos numéricos alinhados aos valores, "ver" em ícone e fechar no X
 * (28/10/2026 — alinhamento + densidade) */
.dg-lista { position: relative; }

.dg-lista__barra {
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}

.dg-lista__busca {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 14rem;
}

.dg-lista__lupa {
  position: absolute;
  left: 0.55rem;
  width: 0.9rem;
  height: 0.9rem;
  color: var(--ink-400);
  pointer-events: none;
}

.dg-lista__busca input {
  width: 100%;
  height: 2rem;
  font: inherit;
  font-size: var(--text-label);
  padding: 0.25rem 0.5rem 0.25rem 1.9rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}

.dg-lista__limpar {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
  padding: 0;
}

.dg-lista__limpar:hover { background: var(--error-soft); color: var(--error-forte); }

.dg-lista__limpar svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.dg-lista__total {
  margin-left: auto;
  font-size: var(--text-label);
  color: var(--ink-500);
  white-space: nowrap;
}

.dg-lista .dg-modal__fechar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
  padding: 0;
}

.dg-lista .dg-modal__fechar:hover { background: var(--brand-tint); color: var(--texto-forte); }

.dg-lista .dg-modal__fechar svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.dg-lista .dg-modal__titulo { margin-right: 2rem; }

/* o th da tabela é `text-align: left`; o cabeçalho numérico precisa seguir o
 * valor (direita) para não ficar desalinhado */
.dg-tabela th.dg-col-num, .dg-tabela td.dg-col-num { text-align: right; }

.dg-tabela .dg-col-marca { text-align: center; }
.dg-tabela .dg-col-acao { width: 2.5rem; text-align: center; }

/* Coluna de ações da lista de entregas (31/10/2026). O `td` continua
 * table-cell — e o `vertical-align: middle` vale — porque o flex mora num
 * wrapper DENTRO dele; fazer do `td` um flex tira a condição de table-cell e a
 * fileira de ícones fica colada no topo de uma linha alta. */
.dg-tabela th[data-coluna="detalhes"],
.dg-tabela td[data-coluna="detalhes"] {
  width: auto;
  min-width: 7.25rem;       /* quatro alvos de 1,5rem + respiro e o padding */
  white-space: nowrap;
  text-align: right;
  /* a linha inteira alinha pelo TOPO (o resto da tabela também): a fileira de
   * ícones fica na altura da primeira linha de texto. Centrar na célula fazia
   * os ícones flutuarem no meio de uma linha de 4 linhas de texto. */
  vertical-align: top;
}
.dg-tabela td[data-coluna="detalhes"] .dg-linha-acoes {
  display: flex;
  flex-wrap: wrap;          /* a largura manda: quebra em vez de espremer */
  align-items: center;      /* todos no mesmo eixo vertical */
  justify-content: flex-end;
  gap: 0.2rem 0.25rem;
}
/* margem de qualquer filho desalinha a fileira — zera tudo. Em 31/10/2026 o
 * botão herdou `margin-top: .75rem` do MODAL de detalhes (mesma classe). */
.dg-tabela td[data-coluna="detalhes"] .dg-linha-acoes > * { margin: 0; }
.dg-tabela td[data-coluna="detalhes"] .dg-linha-acoes form { display: flex; margin: 0; }
/* nesta coluna o ícone é compacto (1,5rem): quatro alvos cabem sem alargar a
 * tabela além do necessário — a densidade do design.md vale aqui também */
.dg-tabela td[data-coluna="detalhes"] .dg-icone-acao { width: 1.5rem; height: 1.5rem; }
.dg-tabela td[data-coluna="detalhes"] .dg-icone-acao svg { width: 0.85rem; height: 0.85rem; }
.dg-tabela .dg-col-acao svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--ink-400);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.dg-modal__acoes--lista { align-items: center; }

.dg-campo--inline {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0;
}

.dg-modal .dg-campo--inline { margin-bottom: 0; }
.dg-campo--inline .dg-rotulo { display: inline; margin: 0; }

.dg-campo--inline { flex-direction: row; }

/* ------------------------------------------------- sequenciamento / fechar */
/* marca compacta: o checkbox herda o estilo de campo (min-height 2.375rem,
 * padding e borda) e ficava enorme; aqui ele volta a ser um quadradinho */
.dg-campo--marca {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.dg-campo--marca .dg-rotulo { margin: 0; }

.dg-campo--marca input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  min-height: 0;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--texto-marca);
}

/* botão com ícone + texto (ações do sequenciamento e do fechamento) */
.dg-botao { gap: 0.375rem; }

.dg-botao svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* alça de arrastar na lista da sequência */
.dg-sequencia__pega {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
  color: var(--ink-400);
  cursor: grab;
  vertical-align: middle;
}

.dg-sequencia__pega svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: currentColor;
  stroke: none;
}

/* X de fechar do modal (o da lista já é específico; este serve ao sequenciamento) */
.dg-modal__fechar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
  padding: 0;
}

.dg-modal__fechar:hover { background: var(--brand-tint); color: var(--texto-forte); }

.dg-modal__fechar svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.dg-modal--sequencia .dg-modal__titulo { margin-right: 2rem; }

/* fechamento: o tipo de entrega manda nos campos (fretado esconde
 * motorista/veículo/liberado); a data de retorno é só o dia */
.dg-campo--oculto { display: none !important; }

/* formulário de ação em linha (aceitar/recusar na tabela) */
.dg-em-linha { display: inline; margin: 0; }
.dg-em-linha .dg-botao--mini { margin: 0 .1rem; }


/* =============================== menu (29/10/2026) ======================== */
/* O menu cresceu para onze áreas e virava duas linhas no laptop e três no
 * celular. Em 29/10/2026 o usuário pediu a ordem do expediente e submenu para o
 * que não é o dia: *"Primeiro temos que ter o home/dashboard, depois roteirizar,
 * torre de controle, cargas, entregas e demais. Acho que podemos trabalhar com
 * sub menus no caso de cadastro."*
 *
 * Um markup (`base.html`), um conteúdo (`app/navegacao.py`) e três
 * apresentações:
 *   > 1080 px : as áreas do dia na barra; "Cadastros" e "Sistema" abrem um
 *               painel por clique (o gatilho fica aceso quando um filho está
 *               aberto — sem isso, /clientes não diz onde você está);
 *   <= 1080 px: um botão "Menu" abre o painel; o submenu vira **acordeão**, e o
 *               grupo aceso já abre aberto.
 * Teclado: `aria-expanded`/`aria-haspopup`, Escape fecha, clique fora fecha. */

.dg-topo__nav { gap: 0.85rem; align-items: center; }

/* o item aceso usa o acento claro da marca sobre o petróleo — é o mesmo sinal do
 * hover, permanente; nunca uma cor nova */
.dg-topo__link--atual {
  border-bottom-color: var(--brand-300);
  font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------- submenu */

.dg-nav-grupo { position: relative; display: inline-flex; align-items: center; }

.dg-nav-grupo__gatilho {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0 2px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  cursor: pointer;
}

.dg-nav-grupo__gatilho:hover { border-bottom-color: var(--brand-300); }

.dg-nav-grupo__gatilho:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 2px;
}

.dg-nav-grupo__seta {
  width: 0.8rem;
  height: 0.8rem;
  transition: transform var(--motion-micro) var(--ease);
}

.dg-nav-grupo--aberto .dg-nav-grupo__seta { transform: rotate(180deg); }

.dg-nav-grupo__painel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 1500;
  display: none;
  flex-direction: column;
  min-width: 13rem;
  padding: 0.25rem;
  background: var(--brand-900);
  border: 1px solid var(--brand-700);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(3, 30, 45, 0.28);
}

.dg-nav-grupo--aberto .dg-nav-grupo__painel { display: flex; }

.dg-nav-grupo__item {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.3rem 0.55rem;
  border-left: 3px solid transparent;
  border-bottom: 0;
  border-radius: 4px;
}

.dg-nav-grupo__item:hover,
.dg-nav-grupo__item:focus-visible {
  background: var(--brand-800);
  border-left-color: var(--brand-300);
  border-bottom-color: transparent;
}

.dg-nav-grupo__item.dg-topo__link--atual {
  background: var(--brand-800);
  border-left-color: var(--brand-300);
  border-bottom-color: transparent;
}

/* o hambúrguer só existe no celular/janela estreita */
.dg-topo__menu { display: none; }

/* ------------------------------------- <= 1080 px: painel + acordeão */

@media (max-width: 1080px) {
  .dg-topo {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.4rem 0.75rem;
    padding: 0.55rem 1rem;
  }

  .dg-topo__marca { grid-column: 1; }

  .dg-topo__menu {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.25rem 0.6rem;
    background: var(--brand-800);
    color: #fff;
    border: 1px solid var(--brand-700);
    border-radius: 5px;
    font-family: inherit;
    font-size: var(--text-body-s);
    cursor: pointer;
  }

  .dg-topo__menu:hover { background: var(--brand-700); }
  .dg-topo__menu:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }

  .dg-topo__menu-icone { display: none; width: 1.05rem; height: 1.05rem; }
  .dg-topo__menu-icone svg { width: 100%; height: 100%; }
  .dg-topo__menu-icone--abrir { display: inline-flex; }

  .dg-topo--aberto .dg-topo__menu {
    background: var(--brand-300);
    border-color: var(--brand-300);
    color: var(--texto-forte);
  }

  .dg-topo--aberto .dg-topo__menu-icone--abrir { display: none; }
  .dg-topo--aberto .dg-topo__menu-icone--fechar { display: inline-flex; }

  /* a meta fica **na mesma linha** da marca e do menu (pedido do usuário,
   * 29/10/2026: no celular ela caía numa segunda linha e comia ~40 px de altura).
   * Como a versão saiu da barra, sobra o ponto de integração, o tema e a conta —
   * cabem ao lado do logo. */
  .dg-topo__meta {
    grid-column: 2;
    /* `grid-row: 1` é obrigatório: sem ele o posicionamento esparso do grid põe
     * a meta na **segunda linha** (marca na coluna 1, menu na 3 e o cursor já
     * passou da coluna 2) — foi o que manteve a barra com 92 px no celular. */
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin-left: 0;
    gap: 0.3rem 0.45rem;
    flex-wrap: nowrap;
  }

  /* o painel: cobre a largura toda, logo abaixo da barra */
  .dg-topo__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1400;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(100dvh - 5rem);
    overflow: auto;
    padding: 0 0 0.5rem;
    background: var(--brand-900);
    border-top: 1px solid var(--brand-700);
    border-bottom: 1px solid var(--brand-700);
    box-shadow: 0 14px 28px rgba(3, 30, 45, 0.32);
    overscroll-behavior: contain;
  }

  .dg-topo--aberto .dg-topo__nav { display: flex; }

  .dg-topo__nav > * + * { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

  .dg-topo__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.75rem; /* alvo de toque (§21) */
    padding: 0.35rem 1rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
    border-radius: 0;
    font-size: var(--text-body);
  }

  .dg-topo__link:hover,
  .dg-topo__link:focus-visible {
    background: var(--brand-800);
    border-left-color: var(--brand-300);
    border-bottom-color: transparent;
  }

  .dg-topo__link--atual {
    background: var(--brand-800);
    border-left-color: var(--brand-300);
  }

  /* acordeão: o gatilho é a linha do grupo, o painel abre logo abaixo dele */
  .dg-nav-grupo { display: block; }

  .dg-nav-grupo__gatilho {
    width: 100%;
    justify-content: space-between;
    padding: 0.35rem 1rem;
    border-left: 3px solid transparent;
    border-bottom: 0;
    font-size: var(--text-body);
    text-align: left;
  }

  .dg-nav-grupo__seta { width: 1rem; height: 1rem; }

  .dg-nav-grupo__painel {
    position: static;
    display: none;
    min-width: 0;
    padding: 0 0 0.2rem;
    background: var(--brand-800);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .dg-nav-grupo--aberto .dg-nav-grupo__painel { display: flex; }

  .dg-nav-grupo__item {
    min-height: 2.75rem;
    padding-left: 2.1rem;
    font-size: var(--text-body-s);
    border-radius: 0;
  }

  .dg-nav-grupo__item:hover,
  .dg-nav-grupo__item:focus-visible,
  .dg-nav-grupo__item.dg-topo__link--atual {
    background: var(--brand-700);
    border-left-color: var(--brand-300);
  }
}

/* no telefone o botão é só o ícone: "Menu" escrito rouba 40 px da marca */
@media (max-width: 480px) {
  .dg-topo__menu-texto { display: none; }
  .dg-topo__menu { min-width: 2.75rem; justify-content: center; }
}

/* ================== tema escuro: mapa (29/10/2026) ======================== */
/* **O mapa continua claro no tema escuro.** A primeira tentativa foi inverter os
 * tiles (`invert(1) hue-rotate(180deg)`) e o usuário descreveu o resultado como
 * "iluminação noturna": estrada rosa, água dourada, rótulo estourado. Mapa é
 * dado — e o dado é legível na paleta em que foi desenhado. Quem quiser mapa
 * escuro de verdade configura `TILES_ESCURO_URL` no `.env` (fonte própria, com
 * cache separado); o cliente pede `?tema=escuro` e o proxy decide.
 *
 * O que fica do tema é só o **fundo** atrás dos tiles (durante o carregamento) e
 * a borda do contêiner, para o bloco claro não brigar com a moldura escura. */
html[data-tema="escuro"] .leaflet-container {
  background: var(--surface-soft);
  outline: 1px solid var(--border);
  outline-offset: -1px;
}

html[data-tema="escuro"] .leaflet-control-attribution a { color: var(--brand-300); }

/* Papel não tem tema: no print os tokens voltam ao claro, senão o texto branco
 * do tema escuro imprime invisível. */
@media print {
  html[data-tema="escuro"] {
    --surface: #fff;
    --surface-soft: #fff;
    --surface-warm: #fff;
    --ink-900: #111;
    --ink-700: #333;
    --ink-500: #555;
    --border: #999;
    --brand-800: #014665;
  }
}

/* ============ tema escuro: ajustes de significado (29/10/2026) ============ */
/* O chip de integração usa o tom `-soft` como TEXTO porque ele fica sobre o
 * petróleo do topo. No escuro o `-soft` é escuro e sumiria; ali a tinta é a
 * `-forte` (o par que existe para texto). */
html[data-tema="escuro"] .dg-online--parada,
html[data-tema="escuro"] .dg-online--nunca,
html[data-tema="escuro"] .dg-online--desligada { color: var(--warning-forte); }

html[data-tema="escuro"] .dg-online--falhou { color: var(--error-forte); }

/* no escuro a barra de acento do painel de cargas (brand-800) desaparece:
 * usa o azul claro, mesma família */


/* ===================== diálogo da integração (29/10/2026) ================ */
/* O estado do ERP abre aqui, na própria tela: o operador não sai da torre para
 * conferir a sincronização, e quem não tem acesso a `/integracao` continua
 * sabendo o que está acontecendo. */
.dg-modal--compacto { max-width: min(30rem, 92vw); }

.dg-sync__estado {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.25rem;
  font-size: var(--text-body);
  color: var(--texto-forte);
}

.dg-sync__texto {
  margin: 0 0 0.6rem;
  font-size: var(--text-body-s);
  color: var(--ink-700);
  line-height: var(--leading-normal);
}

.dg-sync__dados {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.8rem;
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.6rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: var(--text-body-s);
}

.dg-sync__dados dt {
  margin: 0;
  font-size: var(--text-label);
  color: var(--ink-500);
}

.dg-sync__dados dd {
  margin: 0.05rem 0 0;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.dg-sync__recado { margin: 0; min-height: 1.1rem; }

.dg-sync__recado:empty { display: none; }

/* o ponto de luz dentro do diálogo segue o estado do mesmo jeito que no topo */
.dg-sync__estado .dg-online__luz--parada,
.dg-sync__estado .dg-online__luz--nunca,
.dg-sync__estado .dg-online__luz--desligada { background: var(--warning); box-shadow: 0 0 0 2px var(--warning-tint); }

.dg-sync__estado .dg-online__luz--falhou { background: var(--error); box-shadow: 0 0 0 2px var(--error-tint); }

/* a faixa de alarme é botão (abre o diálogo da integração), não link */
button.dg-alarme {
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
}

/* botão "desfazer" do toast (silenciar alerta) — mesma família do fechar */
.dg-aviso__acao {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-weight: var(--weight-semibold);
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
  cursor: pointer;
}

.dg-aviso__acao:hover { opacity: 0.8; }

/* ===================== telas de Área (30/10/2026) ======================== */
/* Criar área deixou de ser "caçar o município num combo de 5.566" e virou
 * **digitar** (busca com sugestão) ou **colar/importar** a lista. As peças
 * abaixo são as três da tela: o painel do formulário, a busca com a lista de
 * sugestões e os chips da seleção — mais a prévia da importação. */

.dg-area-form {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.5rem;
}

.dg-area-form__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.65rem;
}

/* dentro do painel o campo não ganha o respiro da barra de filtros */
.dg-area-form .dg-campo { margin: 0; }

/* ------------------------------------------------- busca com sugestão --- */

.dg-munia { position: relative; }

.dg-munia__lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 15rem;
  overflow: auto;
  padding: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow-card);
}

.dg-munia__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.28rem 0.45rem;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-body-s);
  text-align: left;
  cursor: pointer;
}

.dg-munia__item:hover,
.dg-munia__item--ativo { background: var(--brand-soft); }

.dg-munia__item--escolhido { color: var(--ink-500); }

.dg-munia__item--escolhido::after {
  content: "já na seleção";
  margin-left: auto;
  font-size: var(--text-label);
  color: var(--ink-500);
}

.dg-munia__nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-munia__uf {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  color: var(--texto-marca);
}

.dg-munia__vazio {
  margin: 0;
  padding: 0.4rem 0.45rem;
  font-size: var(--text-body-s);
  color: var(--ink-500);
}

/* ------------------------------------------------------------- chips --- */
/* O vazio é um `::before` de `:empty`: a dica some sozinha no primeiro
 * município escolhido, sem o JS precisar esconder nada. */

.dg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  min-height: 2.35rem;
  margin: 0;
  padding: 0.35rem 0.4rem;
  list-style: none;
  background: var(--surface-soft);
  border: 1px dashed var(--border);
  border-radius: 4px;
}

.dg-chips:empty::before {
  content: attr(data-vazio);
  align-self: center;
  padding: 0 0.25rem;
  font-size: var(--text-body-s);
  color: var(--ink-500);
}

.dg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.2rem 0.1rem 0.45rem;
  border-radius: 3px;
  background: var(--brand-soft);
  color: var(--texto-marca);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
}

.dg-chip__rotulo { white-space: nowrap; }

.dg-chip__remover {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  color: currentColor;
  opacity: 0.8;
  cursor: pointer;
}

.dg-chip__remover:hover { background: var(--error-soft); color: var(--error-forte); opacity: 1; }

.dg-chip__remover:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.dg-chip__remover svg {
  width: 0.7rem;
  height: 0.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* -------------------------------------------------- importar a lista --- */

.dg-modal--importar { width: min(94vw, 64rem); }

.dg-importar__entrada {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.65rem;
}

.dg-importar__entrada textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-body-s);
  resize: vertical;
}

.dg-importar__entrada textarea:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}

/* uma linha do arquivo = uma linha aqui; rola dentro, o modal não cresce */
.dg-importar__previa {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.6rem;
  padding: 0.25rem;
  max-height: min(46vh, 22rem);
  overflow: auto;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.dg-previa__linha {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) minmax(9rem, 15rem) 4.6rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem 0.25rem;
  border-radius: 3px;
  font-size: var(--text-body-s);
}

.dg-previa__linha--ambiguo,
.dg-previa__linha--parecido { background: var(--warning-soft); }

.dg-previa__linha--nao_encontrado { background: var(--error-soft); }

.dg-previa__num {
  font-size: var(--text-label);
  font-variant-numeric: tabular-nums;
  color: var(--ink-500);
  text-align: right;
}

.dg-previa__original { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dg-previa__nota { font-size: var(--text-label); color: var(--error-forte); }

.dg-previa__escolha {
  width: 100%;
  min-height: 1.9rem;
  padding: 0.15rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
  font: inherit;
  font-size: var(--text-label);
}

.dg-previa__escolha:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.dg-previa__selo {
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-align: center;
}

.dg-previa__selo--ok { background: var(--success-soft); color: var(--success-forte); }
.dg-previa__selo--aviso { background: var(--warning-soft); color: var(--warning-forte); }
.dg-previa__selo--erro { background: var(--error-soft); color: var(--error-forte); }

/* ------------------------------------------------------------- apoio --- */

.dg-nota--ok { color: var(--success-forte); }
.dg-nota--aviso { color: var(--warning-forte); }
.dg-nota--erro { color: var(--error-forte); }

.dg-icone-botao--perigo:hover { background: var(--error-soft); color: var(--error-forte); }

.dg-area-ufs { font-variant-numeric: tabular-nums; }

.dg-area-ufs .dg-fraco {
  display: block;
  font-size: var(--text-label);
}

@media (max-width: 640px) {
  .dg-previa__linha {
    grid-template-columns: 1.4rem minmax(0, 1fr);
    grid-template-areas: "num linha" ". escolha" ". selo";
    row-gap: 0.15rem;
  }
  .dg-previa__num { grid-area: num; }
  .dg-previa__original { grid-area: linha; }
  .dg-previa__escolha, .dg-previa__nota { grid-area: escolha; }
  .dg-previa__selo { grid-area: selo; justify-self: start; }
}

/* aviso de sucesso — a categoria `ok` já era usada no servidor (área, carga
 * devolvida) e não tinha estilo: caía no padrão amarelo de aviso e dizia a cor
 * errada para o que deu certo. */
.dg-aviso--ok {
  border-left-color: var(--success);
  background: var(--success-soft);
  color: var(--success-forte);
}

/* ------------------- vendedores e cadência da área (30/10/2026) --------- */
/* A área ganhou vendedores (RCA) e cadência. O bloco é uma lista curta (~25
 * linhas) com filtro local: a cadência é **do vínculo**, então cada linha tem o
 * seu `<select>`, e o vazio significa "herda a da área". */

.dg-vendedores {
  margin: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-soft);
  min-width: 0;
}

.dg-vendedores__barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.dg-vendedores__busca {
  flex: 1;
  min-width: 0;
  max-width: 18rem;
  font: inherit;
  font-size: var(--text-body-s);
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}

.dg-vendedores__busca:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.dg-vendedores__lista {
  max-height: 13rem;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.15rem 0.25rem;
}

.dg-vendedor {
  display: grid;
  grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr) minmax(8rem, 11rem);
  align-items: center;
  gap: 0.4rem;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
  font-size: var(--text-body-s);
}

.dg-vendedor:hover { background: var(--brand-soft); }

/* o checkbox herda o estilo de campo (min-height 2.375rem) e ficaria enorme */
.dg-vendedor input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  accent-color: var(--brand-800);
}

.dg-vendedor__nome {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.dg-vendedor__equipe {
  font-size: var(--text-label);
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dg-vendedor__periodo {
  width: 100%;
  min-height: 1.75rem;
  padding: 0.1rem 0.25rem;
  font: inherit;
  font-size: var(--text-label);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}

.dg-vendedor__periodo:disabled { color: var(--ink-500); background: var(--surface-soft); }
.dg-vendedor__periodo:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.dg-vendedores__vazio { margin: 0.2rem; padding: 0.4rem; }

.dg-area-rcas { font-variant-numeric: tabular-nums; }

.dg-area-rcas .dg-fraco {
  display: block;
  font-size: var(--text-label);
}

@media (max-width: 720px) {
  .dg-vendedor {
    grid-template-columns: auto minmax(0, 1fr) minmax(7rem, 9rem);
  }
  .dg-vendedor__equipe { display: none; }
}

/* ação destrutiva em ícone: mesma régua de alvo, cor de perigo */
.dg-icone-acao--perigo { color: var(--danger, #b3261e); }
.dg-icone-acao--perigo:hover { background: rgba(179, 38, 30, 0.12); }

/* ---------------------------------------------------------------------- */
/* Acessos e perfis (30/10/2026) — compacto, porque são 30 permissões      */
/* numa tela só: linha de .3rem, select pequeno e o estado na própria linha */
/* ---------------------------------------------------------------------- */
.dg-acessos__filiais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0.75rem 0 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.dg-acessos__filiais legend {
  padding: 0 0.25rem;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.dg-acessos__filial {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875rem;
}
.dg-acessos__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 1rem 0 2rem;
}
.dg-perm { margin-bottom: 1rem; }
.dg-perm caption {
  padding: 0.35rem 0 0.25rem;
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--texto-forte);
}
.dg-perm th,
.dg-perm td { padding: 0.3rem 0.5rem; }
.dg-perm__col { width: 8.5rem; }
.dg-perm__col--estado { width: 6.5rem; }
.dg-perm__col select { width: 100%; }
.dg-perm__col--check { width: 2.25rem; }
.dg-perm__rotulo { font-size: 0.875rem; cursor: pointer; }
.dg-perm select { font-size: 0.8125rem; padding: 0.15rem 0.25rem; }
/* a exceção aparece na borda do rótulo — sem deslocar a tabela */
.dg-perm--negada td:first-child { box-shadow: inset 3px 0 0 var(--error-forte); }
.dg-perm--concedida td:first-child { box-shadow: inset 3px 0 0 var(--success-forte); }
.dg-bloqueio { max-width: 44rem; }
.dg-bloqueio__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.dg-usuario__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}


/* ============ filtros: excluir (not like) e inverter (30/10/2026) ========== */

/* Pedido do usuário: *"opção de inverter seleção e opção de excluir para ter um
 * not like — marco para excluir a RCA 11 - Ana Beatriz, para não aparecer as
 * suas vendas"*. O círculo cortado é o controle de exclusão da linha; a marca
 * (quadradinho) continua querendo dizer "só estes". Um eixo, uma cor: excluir é
 * `--error-forte`, o mesmo vermelho de "recusado" do resto do sistema. */
.dg-multi__excluir {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-500);
  opacity: 0.5;
  cursor: pointer;
}

.dg-multi__excluir svg {
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

/* discreto até a linha ser apontada: 20 linhas com um vermelho aceso em cada
 * uma gritariam mais que o mapa */
.dg-multi__item:hover .dg-multi__excluir,
.dg-multi__excluir:focus-visible { opacity: 1; }

.dg-multi__excluir:hover {
  background: var(--error-soft);
  color: var(--error-forte);
}

.dg-multi__excluir:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 1px;
}

/* excluído: o estado fica **preso** na linha (fundo sólido, texto riscado),
 * não só no hover — quem olha a lista precisa ver o que está fora do filtro */
.dg-multi__excluir[aria-pressed="true"] {
  opacity: 1;
  background: var(--error-soft);
  color: var(--error-forte);
}

.dg-multi__item--excluido .dg-multi__texto {
  color: var(--error-forte);
  text-decoration: line-through;
}

.dg-multi__rodape {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border);
}

.dg-multi__contagem {
  margin-left: auto;
  font-size: 0.6875rem;
  white-space: nowrap;
}

.dg-multi__inverter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.35rem;
  padding: 0 0.375rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-700);
  font: inherit;
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.dg-multi__inverter svg {
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-multi__inverter:hover { background: var(--brand-tint); }

/* cabeçalho de cada lista do "Mais filtros": nome do eixo e o inverter juntos */
.dg-filtros-modal__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  margin: 0 0 0.25rem;
}

.dg-filtros-modal__cabecalho h3 { margin: 0; }

/* o inverter fica colado no nome do eixo e não encolhe: "MUNICÍPIO" não come o
   botão, e a coluna do modal (1/3 da largura) comporta os dois */
.dg-filtros-modal__cabecalho .dg-multi__inverter { flex: 0 0 auto; }

/* a caixa da marca dentro da lista não herda os 30 px da barra de filtros: era
 * isso que fazia cada linha medir 36 px mesmo com nome em uma linha só */
.dg-filtros--barra .dg-multi__item input[type="checkbox"] {
  min-height: 0;
  height: 0.95rem;
  width: 0.95rem;
  padding: 0;
  margin: 0;
}

/* lista do RCA mais alta: com a linha em 28 px cabem 12 vendedores sem rolar
 * (antes eram 9, com cada nome em duas linhas) */
.dg-multi--largo .dg-multi__lista { max-height: min(22rem, 55vh); }

/* ============== Gestão de área no mapa (30/10/2026) ====================== */
/* O usuário pediu ícones, filtro por RCA (filtro de ÁREA, não de pedido), paleta
 * de cor da área "como é feito nas cargas" e a lembrança do modo Áreas no F5.
 * Depois pediu **30 cores**: *"Vamos precisar de muito mais, pelo menos umas 30"*.
 *
 * A cor da área é **eixo próprio**: o pino é da carga (15 cores, `app/cores.py`);
 * o polígono é do território (30, `services/areas.py`). O hex mora aqui e o JS lê
 * a variável para pintar o polígono no Leaflet — um hex, um lugar.
 *
 * A paleta de 30 foi **medida**, não escolhida no olho: seleção gulosa por
 * "ponto mais distante" em CIELAB, com L 32..78 (funciona como linha fina sobre
 * mapa claro), croma 30..78 e exclusão de ΔE00 < 20 contra a cor da marca
 * (#014665). Resultado: **menor par ΔE00 = 14.2**, o mesmo piso da paleta das
 * cargas (14.7) — `scripts/verificar_cores.py` recalcula e reprova se alguém
 * trocar um hex por outro parecido. */

:root {
  --area-cor-0: #76374c;
  --area-cor-1: #c8102e;
  --area-cor-2: #f28884;
  --area-cor-3: #8b2900;
  --area-cor-4: #e25c30;
  --area-cor-5: #66441b;
  --area-cor-6: #a06114;
  --area-cor-7: #b88e61;
  --area-cor-8: #fcae4c;
  --area-cor-9: #d2bc87;
  --area-cor-10: #4d4e00;
  --area-cor-11: #939145;
  --area-cor-12: #bcc647;
  --area-cor-13: #168203;
  --area-cor-14: #68a371;
  --area-cor-15: #48d870;
  --area-cor-16: #04573b;
  --area-cor-17: #2a8476;
  --area-cor-18: #31d3cf;
  --area-cor-19: #009eb0;
  --area-cor-20: #5acbf5;
  --area-cor-21: #3a9bee;
  --area-cor-22: #4372de;
  --area-cor-23: #b3bbf5;
  --area-cor-24: #6b43ab;
  --area-cor-25: #9679f8;
  --area-cor-26: #8c037c;
  --area-cor-27: #d261d5;
  --area-cor-28: #ff9cf6;
  --area-cor-29: #bd5089;
}

/* o swatch do painel: mostra a cor atual e abre a paleta */
.dg-cor-area {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--area-cor, var(--brand-800));
  cursor: pointer;
}

.dg-cor-area:hover { box-shadow: var(--shadow-foco); }
.dg-cor-area:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }

/* a paleta em si: 30 cores em grade de 10 colunas (3 fileiras), a atual marcada.
 * Grade de tamanho FIXO, não `flex-wrap`: 30 quadradinhos soltos quebrariam em
 * linhas tortas dentro dos 20 rem do painel; e 6 colunas com swatch de 1,6 rem
 * deixariam 7 rem de vazio à direita. 10 × 3 usa a largura e ocupa menos altura. */
.dg-cores-area {
  display: grid;
  grid-template-columns: repeat(10, 1.45rem);
  justify-content: center;
  gap: 0.25rem;
  margin: 0.35rem 0 0;
  padding: 0.4rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
}

.dg-cores-area[hidden] { display: none; }

.dg-cor-area-opcao {
  position: relative;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 2px solid var(--border);
  border-radius: 4px;
  background: var(--area-cor, var(--ink-500));
  cursor: pointer;
}

.dg-cor-area-opcao:hover,
.dg-cor-area-opcao:focus-visible {
  outline: none;
  box-shadow: var(--shadow-foco);
}

.dg-cor-area-opcao--atual { border-color: var(--ink-900); box-shadow: inset 0 0 0 2px #fff; }

/* ações do painel em ícone, compactas: o texto fica no title/aria-label e a
 * explicação do gesto no #area-resumo (a régua das ações de linha do roteirizador) */
.dg-area__acoes { align-items: center; }

.dg-area__acoes .dg-botao--icone {
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
}

.dg-area__acoes .dg-botao--icone svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-area__acoes .dg-botao svg {
  width: 0.95rem;
  height: 0.95rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ferramenta armada (incluir/remover município) tem de parecer armada */
.dg-botao[aria-pressed="true"] {
  background: var(--brand-800);
  border-color: var(--brand-800);
  color: #fff;
}

.dg-botao--aviso[aria-pressed="true"] {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

/* indisponível para roteirizar: cadeado neutro, com o motivo no title */
.dg-icone-acao--bloqueado { color: var(--text-muted, #6b7780); cursor: help; }
.dg-icone-acao[disabled] { opacity: .45; cursor: not-allowed; }

/* busca do mapa: campo compacto dentro da barra de ferramentas (31/10/2026) */
.dg-mapa__grupo--busca { gap: .25rem; }
.dg-mapa__busca {
  width: 13rem;
  max-width: 32vw;
  padding: .3rem .45rem;
  font-size: .8125rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink-900);
}
.dg-mapa__busca:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* Aproveitamento de espaço na lista de entregas (31/10/2026): data, peso, valor,
 * situação, carga e canhoto têm conteúdo de UMA linha — a largura delas passa a
 * ser a do próprio conteúdo (`width: 1%` com `nowrap` = mínimo real) e a sobra
 * vai para cliente e município, que são as colunas que quebram linha. */
.dg-tabela th[data-coluna="data"], .dg-tabela td[data-coluna="data"],
.dg-tabela th[data-coluna="peso"], .dg-tabela td[data-coluna="peso"],
.dg-tabela th[data-coluna="valor"], .dg-tabela td[data-coluna="valor"],
.dg-tabela th[data-coluna="status"], .dg-tabela td[data-coluna="status"],
.dg-tabela th[data-coluna="carga"], .dg-tabela td[data-coluna="carga"],
.dg-tabela th[data-coluna="canhoto"], .dg-tabela td[data-coluna="canhoto"] {
  width: 1%;
  white-space: nowrap;
}

/* Densidade da lista de entregas (31/10/2026): 11 colunas × 24px de padding
 * horizontal gastavam ~264px — mais que uma coluna inteira. .5rem tira ~70px e
 * o cliente/município, que quebram linha, recebem esse espaço. */
.dg-tabela--entregas th,
.dg-tabela--entregas td { padding-inline: 0.5rem; }

/* sugestões da busca do mapa (31/10/2026): painel logo abaixo do campo, com a
 * cidade primeiro porque "juiz de fora" é o nome de uma cidade. */
.dg-mapa__grupo--busca { position: relative; }
.dg-mapa__sugestoes {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1000;            /* acima dos painéis do Leaflet (400-800) */
  width: 18rem;
  max-width: 60vw;
  max-height: 17rem;
  overflow-y: auto;
  padding: 0.25rem 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  font-size: 0.8125rem;
}
.dg-mapa__sugestoes[hidden] { display: none !important; }
.dg-sugestao__grupo {
  padding: 0.25rem 0.6rem 0.15rem;
  font-size: 0.6875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.dg-sugestao {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  color: var(--ink-900);
  font: inherit;
}
.dg-sugestao:hover,
.dg-sugestao--atual { background: var(--brand-tint); }
.dg-sugestao__principal {
  font-weight: var(--weight-semibold);
  white-space: nowrap;      /* "NF 312178" numa linha só */
}
.dg-sugestao__detalhe {
  color: var(--ink-500);
  font-size: 0.75rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-sugestao__aviso { color: var(--alerta); font-size: 0.6875rem; }
.dg-sugestoes__vazio { padding: 0.35rem 0.6rem; color: var(--ink-500); }

/* Rótulo do que está sob o mouse (área, município, região) — no canto, e não
 * um balão seguindo o cursor: o balão cobre justamente o que se quer ver
 * (31/10/2026). Fica acima da escala do Leaflet, à esquerda. */
.dg-palco__rotulo {
  position: absolute;
  right: 0.5rem;            /* canto inferior direito, acima do crédito do mapa */
  bottom: 0.6rem;
  text-align: right;
  z-index: 1001;
  margin: 0;
  max-width: min(42%, 26rem);
  padding: 0.2rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--ink-700);
  font-size: var(--text-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.dg-palco__rotulo[hidden] { display: none !important; }