/* ============================================================
   NORTH — Estilos por vista
============================================================ */

/* ============================================================
   INÍCIO — Central de operações
============================================================ */
.central-grid {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-4);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;   /* cada card com a altura do próprio conteúdo */
}
@media (max-width: 1180px) { .central-grid { grid-template-columns: 1fr; } }

.consulta-resultado {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--cor-rota, var(--primary));
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  animation: vistaEntra .16s ease-out;
}
.consulta-resultado .forma-g {
  width: 34px; height: 34px; flex-shrink: 0; color: var(--cor-rota);
}
.consulta-resultado .nome { font-size: var(--fs-lg); font-weight: 700; }
.consulta-resultado .rota { font-size: var(--fs-base); color: var(--text-2); margin-top: 1px; }

.rotas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
@media (max-width: 480px) { .rotas-grid { grid-template-columns: 1fr; } }

/* Resumo por rota na central */
.rota-linha {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.rota-linha:last-child { border-bottom: none; }
.rota-linha .rota-forma { width: 11px; height: 11px; }
.rota-linha .nome { font-size: var(--fs-base); font-weight: 600; }
.rota-linha .meta { font-size: var(--fs-sm); color: var(--text-3); }
.barra-prog {
  flex: 1; height: 5px; border-radius: var(--r-full);
  background: var(--surface-2); overflow: hidden; min-width: 40px;
}
.barra-prog i { display: block; height: 100%; border-radius: inherit; background: currentColor; }

/* ============================================================
   EXPEDIÇÃO
============================================================ */
.exp-lista { display: flex; flex-direction: column; gap: var(--sp-3); }

.ent-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: border-color var(--t-fast);
}
.ent-card.aberto { border-color: var(--border-strong); }

.ent-cabeca {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); width: 100%; text-align: left;
  transition: background var(--t-fast);
}
.ent-cabeca:hover { background: var(--surface-2); }
.ent-nome { font-size: var(--fs-md); font-weight: 700; }
.ent-meta {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: 3px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-3);
}
.ent-seta { color: var(--text-3); transition: transform var(--t); flex-shrink: 0; }
.ent-seta svg { width: 17px; height: 17px; display: block; }
.ent-card.aberto .ent-seta { transform: rotate(180deg); }

.ent-corpo { padding: 0 var(--sp-4) var(--sp-4); border-top: 1px solid var(--border-soft); }
.ent-secao { margin-top: var(--sp-4); }
.ent-secao-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-bottom: var(--sp-2);
}

.entrega {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 11px; border-radius: var(--r-sm);
  background: var(--surface-2); margin-bottom: 5px; font-size: var(--fs-base);
}
.entrega:last-child { margin-bottom: 0; }
.entrega.anterior { opacity: .55; }
.entrega .bairro { font-weight: 500; flex: 1; min-width: 0; }
.entrega .hora { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

.lancar-linha { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.lancar-linha .busca { flex: 1; }

/* Seleção de entregador em modal */
.ent-opcao {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; text-align: left;
  padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2);
  margin-bottom: var(--sp-2); transition: border-color var(--t-fast), background var(--t-fast);
}
.ent-opcao:hover { border-color: var(--primary); background: var(--primary-soft); }
.ent-opcao .nome { font-size: var(--fs-md); font-weight: 600; }
.ent-opcao .sub  { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }

/* ============================================================
   MAPA
============================================================ */
.mapa-wrap {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--border); line-height: 0; background: var(--surface);
}
#mapa { width: 100%; height: min(70dvh, 640px); display: block; background: var(--map-bg); }
@media (max-width: 1000px) { #mapa { height: 58dvh; } }

/* Tiles escuros mantendo legibilidade das ruas.
   O `grayscale` tira o azul que o OSM invertido devolve e deixa o mapa
   no mesmo cinza neutro da interface — antes havia um `sepia` aqui,
   que existia para casar com o fundo marrom da paleta anterior.
   Comparado lado a lado com um tile real de Araçatuba antes de fixar:
   mais escuro que isto começa a esconder as ruas secundárias. */
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) grayscale(.92) brightness(.82) contrast(1.06);
}
.leaflet-container { background: var(--map-bg); font-family: var(--font); }
.leaflet-control-zoom a {
  background: var(--surface) !important; color: var(--text) !important;
  border-color: var(--border) !important;
}
.leaflet-control-zoom a:hover { background: var(--surface-2) !important; }
.leaflet-control-attribution {
  background: color-mix(in srgb, var(--bg) 84%, transparent) !important; color: var(--text-3) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--text-2) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--sh-2);
}
.leaflet-popup-content { margin: 11px 13px; font-size: var(--fs-base); line-height: 1.55; }
.leaflet-popup-close-button { color: var(--text-3) !important; }

/* Botões flutuantes */
.mapa-fabs {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: var(--z-drawer);
  display: flex; flex-direction: column; gap: var(--sp-2); line-height: 1;
}
.mapa-fab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); color: var(--text);
  font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--sh-2);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.mapa-fab svg { width: 15px; height: 15px; }
.mapa-fab:hover { background: var(--surface-2); }
.mapa-fab.ativo { background: var(--primary-btn); border-color: var(--primary-btn); color: var(--bg); }
.mapa-fab .cnt {
  min-width: 17px; padding: 0 4px; border-radius: var(--r-full);
  background: var(--primary-btn); color: var(--bg); font-size: 10px; font-weight: 800; text-align: center;
}
.mapa-fab.ativo .cnt { background: color-mix(in srgb, var(--bg) 32%, transparent); }

/* Barra de estado */
.mapa-estado {
  position: absolute; bottom: var(--sp-3); left: var(--sp-3); z-index: var(--z-drawer);
  display: flex; align-items: center; gap: 7px; line-height: 1;
  padding: 7px 12px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(8px); border: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); pointer-events: none;
}

/* Gavetas */
.gaveta {
  position: absolute; top: 0; bottom: 0; z-index: 850;
  width: 288px; background: var(--surface); line-height: 1.5;
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform var(--t); box-shadow: var(--sh-3);
}
.gaveta.esq { left: 0;  border-right: 1px solid var(--border); transform: translateX(-101%); }
.gaveta.dir { right: 0; border-left:  1px solid var(--border); transform: translateX(101%); }
.gaveta.aberta { transform: none; }
.gaveta-topo {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.gaveta-topo > svg { width: 15px; height: 15px; color: var(--primary); }
.gaveta-titulo {
  flex: 1; font-size: var(--fs-sm); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-2);
}
.gaveta-corpo { flex: 1; overflow-y: auto; padding: var(--sp-3); }
@media (max-width: 560px) { .gaveta { width: min(288px, 86vw); } }

/* Cartão de entregador no mapa */
.mapa-ent {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px; margin-bottom: var(--sp-2);
  transition: border-color var(--t-fast);
}
.mapa-ent:last-child { margin-bottom: 0; }
.mapa-ent.seguindo { border-color: var(--primary); background: var(--primary-soft); }
.mapa-ent-topo { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 7px; }
.mapa-ent-nome { flex: 1; font-size: var(--fs-base); font-weight: 700; min-width: 0; }
.mapa-ent-local {
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.55;
  padding: 7px 9px; background: var(--bg-elev); border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); margin-bottom: 7px;
}
.mapa-ent-local .linha { display: flex; align-items: flex-start; gap: 5px; }
.mapa-ent-local svg { width: 12px; height: 12px; margin-top: 3px; flex-shrink: 0; color: var(--text-3); }
.mapa-ent-dados {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px;
  font-size: var(--fs-xs); color: var(--text-3);
}
.mapa-ent-dados span {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  padding: 2px 7px; border-radius: var(--r-full); font-variant-numeric: tabular-nums;
}

.mapa-secao {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); padding-bottom: 6px; margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}
.mapa-secao svg { width: 13px; height: 13px; }
.mapa-secao .cnt { margin-left: auto; }

/* Cidades */
.cidade-grupo { margin-bottom: var(--sp-3); }
.cidade-uf {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3); padding-bottom: 4px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border-soft);
}
.cidade-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: 5px 3px; border-radius: var(--r-sm); font-size: var(--fs-base);
}
.cidade-item:hover { background: var(--surface-2); }

/* Marcador do entregador */
.marcador {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 800; color: var(--bg);
  border: 2.5px solid var(--bg); box-shadow: 0 2px 10px rgba(14,9,5,.55);
  position: relative; cursor: pointer;
  transition: opacity var(--t-fast);
}
.marcador.velho { opacity: .8; }
.marcador.morto { opacity: .55; }
.marcador .sinal {
  position: absolute; right: -3px; bottom: -3px;
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg);
}
.marcador .sinal.vivo  { background: var(--ok); }
.marcador .sinal.velho { background: var(--warn); }
.marcador .sinal.morto { background: var(--danger); }
/* Seta de direção — só aparece quando há heading confiável */
.marcador-heading {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px;
  margin: -23px 0 0 -23px; pointer-events: none;
}
.marcador-heading::before {
  content: ""; position: absolute; left: 50%; top: -1px; margin-left: -5px;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid currentColor;
}
@keyframes marcadorEntra { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.marcador-novo { animation: marcadorEntra .32s cubic-bezier(.2,.9,.3,1.2); }

.popup-mapa strong { display: block; font-size: var(--fs-md); margin-bottom: 3px; }
.popup-mapa .l { color: var(--text-2); font-size: var(--fs-sm); }

/* ============================================================
   CONTA
============================================================ */
.conta-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0,1fr); }
.usuario-linha {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 13px; margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.usuario-linha .nome { font-size: var(--fs-md); font-weight: 600; }
.usuario-linha .sub  { font-size: var(--fs-sm); color: var(--text-3); margin-top: 1px; }
.usuario-acoes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.grupo-cargo {
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); padding: var(--sp-4) 0 var(--sp-2);
}
.grupo-cargo:first-child { padding-top: 0; }

/* ── Bloco de unidade (só o proprietário vê mais de um) ──
   Marca visível o suficiente para separar as unidades sem virar outro
   card dentro do card. */
.grupo-empresa {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin: var(--sp-6) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.grupo-unidade:first-child > .grupo-empresa { margin-top: 0; border-top: 0; }
.grupo-unidade > .card-corpo { padding-top: var(--sp-2); }
/* Fechado, o cabeçalho da unidade encosta no próximo — a linha de
   baixo já separa os dois. */
.grupo-unidade:not(.aberta) > .grupo-empresa { margin-bottom: 0; }
.grupo-empresa .nome { font-weight: 700; font-size: var(--fs-md); }
.grupo-empresa svg { width: 1.1em; height: 1.1em; color: var(--text-3); flex-shrink: 0; }
.grupo-empresa + .grupo-cargo { padding-top: var(--sp-3); }
.grupo-vazio {
  padding: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-3);
}

/* ============================================================
   ENTREGADOR (web) — visão simplificada
============================================================ */
.pe-lista { display: flex; flex-direction: column; gap: var(--sp-3); }
.pe-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--sh-1);
}
.pe-card.feito { opacity: .6; }
.pe-topo { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pe-bairro { font-size: var(--fs-lg); font-weight: 700; }
.pe-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.pe-obs {
  font-size: var(--fs-base); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 8px 10px; margin-top: var(--sp-2);
}
.pe-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border-soft);
}

/* ============================================================
   NOTIFICAÇÕES
============================================================ */
.notif {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-3); margin-bottom: var(--sp-2);
}
.notif.resolvida { border-color: var(--ok-line); background: var(--ok-soft); }
.notif-topo { display: flex; align-items: flex-start; gap: var(--sp-2); margin-bottom: 7px; }
.notif-bairro { font-size: var(--fs-md); font-weight: 700; }
.notif-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 7px; }
.notif-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-top: var(--sp-3); padding-top: 7px; border-top: 1px solid var(--border-soft);
}
.notif-campo {
  font-size: var(--fs-sm); color: var(--text-2);
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 6px 9px; margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.notif-campo svg { width: 12px; height: 12px; color: var(--text-3); flex-shrink: 0; }
.notif-hist { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-soft); }
.notif-hist div { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 2px; }

/* Faixa global de conexão */
#faixa-rede {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 16px; font-size: var(--fs-base); font-weight: 600;
  background: var(--danger); color: var(--bg);
}
#faixa-rede svg { width: 15px; height: 15px; }