/* ============================================================
   Logística — Roteirização de Entrega (op-1)
   ============================================================ */
/* Modo fullscreen: oculta sidebar e page-header global */
body.logistica-fullscreen #sidebar { display: none !important; }
body.logistica-fullscreen #page-header { display: none !important; }
body.logistica-fullscreen .content-area {
  margin-left: 0 !important; width: 100vw !important;
  height: 100vh !important; max-height: 100vh !important;
  overflow: hidden !important;
}
body.logistica-fullscreen #page-container {
  height: 100vh; padding: 0; margin: 0; max-width: none;
}

/* Menu overlay: clica em "☰ Menu" no fullscreen → sidebar aparece como drawer */
body.logistica-fullscreen.lr-menu-overlay-open #sidebar {
  display: flex !important;
  position: fixed !important; top: 0; left: 0; bottom: 0;
  z-index: 9999; width: 280px;
  box-shadow: 6px 0 24px rgba(0,0,0,.6);
  animation: lrSlideIn .18s ease-out;
}
@keyframes lrSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
body.logistica-fullscreen.lr-menu-overlay-open::before {
  content: ''; position: fixed; inset: 0;
  background: rgba(0,0,0,.55); z-index: 9998;
  cursor: pointer;
}

.lr-wrap {
  display: flex; flex-direction: column;
  height: 100vh;
  background: var(--color-bg);
  padding: 0;
  overflow: hidden;
}

/* Top bar com stats — compactas inline */
.lr-stats {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 14px; border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  min-height: 36px;
}
.lr-stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  min-width: 0; white-space: nowrap;
}
.lr-stat .v {
  font-size: 17px; font-weight: 800; color: var(--color-text); line-height: 1;
  letter-spacing: -.01em;
}
.lr-stat .v.warn { color: #eab308; }
.lr-stat .v.ok   { color: #22c55e; }
.lr-stat .l {
  font-size: 10.5px; color: var(--color-text-3);
  text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600;
}
/* Auto-rotear pill com LED */
.lr-auto-rotear {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4);
  color: #22c55e; padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
}
.lr-auto-rotear.off { background: rgba(107,107,117,.12); border-color: var(--color-border); color: var(--color-text-3); }
.lr-auto-rotear .led {
  width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 6px #22c55e;
  animation: lrLed 1.4s infinite;
}
.lr-auto-rotear.off .led { background: var(--color-text-3); box-shadow: none; animation: none; }
@keyframes lrLed { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.lr-btn-refresh {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text-2); padding: 6px 12px; border-radius: 6px;
  font-size: 12px; cursor: pointer; font-weight: 600;
}
.lr-btn-config, .lr-btn-sair {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text-2); padding: 6px 12px; border-radius: 6px;
  font-size: 12px; cursor: pointer; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.lr-btn-config:hover, .lr-btn-sair:hover { border-color: #a855f7; color: #a855f7; }
.lr-btn-monitor {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text-2); padding: 6px 12px; border-radius: 6px;
  font-size: 12px; cursor: pointer; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.lr-btn-monitor:hover { border-color: #16a34a; color: #16a34a; }
.lr-btn-theme {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  padding: 6px 10px; border-radius: 6px;
  font-size: 14px; cursor: pointer;
}
.lr-btn-theme:hover { border-color: #eab308; }

/* ============================================================
   LIGHT THEME (toggle via botão 🌞/🌙)
   ============================================================ */
body.lr-light .lr-wrap {
  /* Redefine as variaveis globais dentro do escopo da tela
     pra todos os usos de var(--color-*) virarem light de uma vez. */
  --color-bg:        #f8fafc;
  --color-bg-alt:    #ffffff;
  --color-surface:   #ffffff;
  --color-surface-1: #ffffff;
  --color-surface-2: #f1f5f9;
  --color-surface-3: #e2e8f0;
  --color-border:    #e2e8f0;
  --color-border-2:  #cbd5e1;
  --color-text:      #0f172a;
  --color-text-1:    #0f172a;
  --color-text-2:    #334155;
  --color-text-3:    #64748b;
  background: #f8fafc;
  color: #0f172a;
}
/* Forca cards (background hardcoded #1f1f23) a ficar brancos no light */
body.lr-light .lr-ped-card,
body.lr-light .lr-rota-card { background: #ffffff !important; }
body.lr-light .lr-ped-card.sel { background: #ecfdf5 !important; }
body.lr-light .lr-rota-card.ativa { background: #eff6ff !important; }
/* Auto-rotear / Sugerir / Atualizar / Tema / Config — fundos hardcoded escuros viram light */
body.lr-light .lr-auto-rotear { background: #ffffff; color: #0f172a; border-color: #cbd5e1; }
body.lr-light .lr-btn-sugerir { background: #a855f7; color: #fff; border-color: #a855f7; }
/* Counts e pills warn ja tem contraste OK; aqui forca text-2/3 mais escuros no light */
body.lr-light .lr-count.warn { background: rgba(234,179,8,.18); color: #92400e; border-color: rgba(234,179,8,.5); }
body.lr-light .lr-count-pill.warn { background: rgba(234,179,8,.18); color: #92400e; border-color: rgba(234,179,8,.5); }
body.lr-light .lr-rotas-sec-header { background: #f8fafc; color: #0f172a; }
/* Drop targets e estados drag visiveis */
body.lr-light .lr-ped-card.dragging,
body.lr-light .lr-rota-card.dragging { opacity: .55; }
body.lr-light .lr-rota-card.drop-target { border-color: #22c55e; background: #ecfdf5 !important; }
/* Map filter chips lemos */
body.lr-light .lr-mb-pop { box-shadow: 0 8px 28px rgba(15,23,42,.15); }
body.lr-light .lr-mb-row { background: #f8fafc; }
body.lr-light .lr-mb-row:hover { background: #ecfdf5; }
body.lr-light .lr-stats {
  background: #ffffff;
  border-bottom-color: #e2e8f0;
}
body.lr-light .lr-stat .v { color: #1e293b; }
body.lr-light .lr-stat .v.warn { color: #ca8a04; }
body.lr-light .lr-stat .v.ok { color: #16a34a; }
body.lr-light .lr-stat .l { color: #64748b; }
body.lr-light .lr-btn-refresh,
body.lr-light .lr-btn-config,
body.lr-light .lr-btn-sair,
body.lr-light .lr-btn-monitor,
body.lr-light .lr-btn-theme {
  background: #ffffff; border-color: #cbd5e1; color: #475569;
}
body.lr-light .lr-col {
  background: #ffffff; border-right-color: #e2e8f0;
}
body.lr-light .lr-col-header {
  background: #f1f5f9; border-bottom-color: #e2e8f0;
}
body.lr-light .lr-col-title { color: #0f172a; }
body.lr-light .lr-search {
  background: #ffffff; border-color: #cbd5e1; color: #1e293b;
}
body.lr-light .lr-chip {
  background: #f1f5f9; border-color: #cbd5e1; color: #475569;
}
body.lr-light .lr-chip.active { background: #f97316; color: #fff; border-color: #f97316; }
body.lr-light .lr-count {
  background: #f1f5f9; color: #1e293b; border-color: #cbd5e1;
}
body.lr-light .lr-ped-card {
  background: #ffffff; border-color: #e2e8f0;
}
body.lr-light .lr-ped-card:hover { border-color: #f97316; }
body.lr-light .lr-ped-card.sel { background: #ecfdf5; border-color: #22c55e; }
body.lr-light .lr-ped-num { color: #0f172a; }
body.lr-light .lr-ped-cli { color: #1e293b; }
body.lr-light .lr-ped-end { color: #475569; }
body.lr-light .lr-ped-foot {
  border-top-color: #e2e8f0;
}
body.lr-light .lr-ped-pag { color: #475569; }
body.lr-light .lr-ped-total { color: #0f172a; }
body.lr-light .lr-empty { color: #64748b; }
body.lr-light .lr-rotas-sec-header {
  background: #f1f5f9; color: #64748b;
}
body.lr-light .lr-rota-card {
  background: #ffffff; border-color: #e2e8f0;
}
body.lr-light .lr-rota-id { color: #0f172a; }
body.lr-light .lr-rota-motoboy { color: #475569; }
body.lr-light .lr-rota-paradas { color: #64748b; }
body.lr-light .lr-rota-ped-mini {
  background: #f1f5f9; color: #475569; border-color: #cbd5e1;
}
body.lr-light .lr-map-wrap { background: #e2e8f0; }
/* Light: tints/badges hardcoded que lavam no branco → reforço de fundo/borda + texto escuro */
body.lr-light .lr-selection-bar { background: rgba(34,197,94,.16); border-bottom-color: rgba(34,197,94,.45); color: #15803d; }
body.lr-light .lr-painel-alertas { background: rgba(239,68,68,.10); box-shadow: 0 2px 10px rgba(239,68,68,.14); }
body.lr-light .lr-alerta-tipo { color: #b91c1c; }
body.lr-light .lr-st.aguardando { background: rgba(234,179,8,.20); color: #a16207; border: 1px solid rgba(234,179,8,.45); }
body.lr-light .lr-st.em-rota    { background: rgba(59,130,246,.18); color: #1d4ed8; border: 1px solid rgba(59,130,246,.45); }
/* MAPA: filter independente do tema da UI (toggle próprio) */
body.lr-map-dark .lr-map .leaflet-tile-pane {
  filter: invert(.92) hue-rotate(180deg) saturate(.85);
}
body.lr-map-light .lr-map .leaflet-tile-pane { filter: none; }
/* Drawer no light */
body.lr-light .lr-drawer {
  background: #ffffff; border-color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
body.lr-light .lr-drawer-header { background: #f1f5f9; border-bottom-color: #e2e8f0; }
body.lr-light .lr-drawer-title { color: #0f172a; }
body.lr-light .lr-drawer-status { color: #475569; }
body.lr-light .lr-drawer-meta { color: #475569; border-bottom-color: #e2e8f0; }
body.lr-light .lr-drawer-meta b { color: #0f172a; }
body.lr-light .lr-drawer-parada {
  background: #f8fafc; border-color: #e2e8f0;
}
body.lr-light .lr-dp-num { color: #0f172a; }
body.lr-light .lr-dp-cli { color: #475569; }
body.lr-light .lr-dp-bairro { color: #64748b; }
body.lr-light .lr-drawer-footer { background: #f1f5f9; border-top-color: #e2e8f0; }

/* Fix barra "selecionado(s)" só aparece quando há seleção */
.lr-selection-bar[hidden] { display: none !important; }

/* Main grid 3 colunas — ~45% pras colunas (cabem os cards completos) */
.lr-main {
  display: grid;
  grid-template-columns: 430px 400px 1fr;
  gap: 0; flex: 1; min-height: 0;
}

.lr-col {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
  min-height: 0;
}
.lr-col-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  flex-shrink: 0;
}
.lr-col-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--color-text);
  margin-bottom: 8px; text-transform: uppercase; letter-spacing: .02em;
}
.lr-col-header-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.lr-col-header-row .lr-col-title { margin-bottom: 0; flex-shrink: 0; white-space: nowrap; }
.lr-col-header-row .lr-search { margin-bottom: 0; flex: 1; min-width: 0; }
.lr-count {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  padding: 1px 7px; border-radius: 8px;
  font-size: 10px; color: var(--color-text-2); font-weight: 800;
}
.lr-count.warn { background: rgba(234,179,8,.18); color: #ca8a04; border-color: rgba(234,179,8,.35); }
.lr-count-pill {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  padding: 1px 6px; border-radius: 7px;
  font-size: 10px; color: var(--color-text-2); font-weight: 700;
}
.lr-count-pill.warn { background: rgba(234,179,8,.18); color: #ca8a04; border-color: rgba(234,179,8,.35); }

.lr-search {
  width: 100%;
  background: var(--color-bg); border: 1px solid var(--color-border);
  color: var(--color-text); padding: 7px 10px; border-radius: 6px;
  font-size: 12px; margin-bottom: 8px;
}
.lr-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.lr-chip {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  padding: 3px 9px; border-radius: 10px;
  font-size: 11px; font-weight: 600; cursor: pointer;
  color: var(--color-text-2);
}
.lr-chip.active { background: #f97316; color: #fff; border-color: #f97316; }

/* Barra de seleção */
.lr-selection-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: rgba(34,197,94,.1);
  border-bottom: 1px solid rgba(34,197,94,.3);
  font-size: 11.5px; color: #22c55e; font-weight: 700;
  flex-shrink: 0;
}
.lr-btn-clear {
  background: transparent; border: 1px solid var(--color-border);
  color: var(--color-text-2); padding: 4px 8px; border-radius: 5px;
  font-size: 10.5px; cursor: pointer;
}
.lr-btn-create {
  background: #22c55e; border: 1px solid #22c55e; color: #fff;
  padding: 4px 10px; border-radius: 5px; font-size: 11px; cursor: pointer; font-weight: 700;
}

/* Lista pedidos */
.lr-list {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 6px;
}
.lr-empty {
  text-align: center; padding: 30px 10px;
  color: var(--color-text-3); font-size: 12px;
}
.lr-empty.small { padding: 14px 8px; font-size: 11px; }

/* Card de pedido: layout flat (sem coluna esquerda). Drag e checkbox ficam INLINE na line1 ao lado do nº */
.lr-ped-card {
  display: block;
  background: #1f1f23; border: 1px solid var(--color-border);
  border-radius: 7px; padding: 7px 9px;
  cursor: pointer; transition: all .12s;
}
.lr-ped-card:hover { border-color: #f97316; }
.lr-ped-card.sel { background: rgba(249,115,22,.08); border-color: #f97316; }
.lr-ped-body { min-width: 0; }
.lr-ped-line1 {
  display: flex; align-items: center; gap: 5px; font-size: 11.5px;
  white-space: nowrap; overflow: hidden;
}
.lr-ped-line1 .lr-drag {
  color: var(--color-text-2); font-size: 14px; line-height: 1;
  user-select: none; cursor: grab; flex-shrink: 0;
  font-weight: 700; letter-spacing: -1px;
}
.lr-ped-line1 .lr-drag:hover { color: var(--color-text); }
.lr-ped-check-inline {
  width: 14px; height: 14px; accent-color: #f97316;
  cursor: pointer; flex-shrink: 0; margin: 0;
}
.lr-ped-id { font-weight: 800; color: var(--color-text); }
.lr-ped-bairro-sep, .lr-ped-end-sep { color: var(--color-text-3); }
.lr-ped-bairro { font-weight: 700; color: var(--color-text); font-style: italic; }
.lr-ped-end-rua { color: var(--color-text-2); overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
/* Aging discreto: texto pequeno colorido, sem pill/background (igual mockup) */
.lr-ped-aging {
  margin-left: auto; padding: 0;
  font-size: 11px; font-weight: 700;
  color: #f97316; flex-shrink: 0;
}
.lr-ped-aging.warn   { color: #eab308; }
.lr-ped-aging.danger { color: #ef4444; }
.lr-ped-aging.ok     { color: #22c55e; }
.lr-ped-cli {
  font-size: 11.5px; color: var(--color-text); margin-top: 3px; font-weight: 600;
  padding-left: 22px;
  display: flex; align-items: center; gap: 6px;
}
.lr-ped-cli-txt {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lr-ped-info-btn {
  flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  color: #3b82f6;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; transition: background .12s, color .12s;
}
.lr-ped-info-btn:hover { color: #2563eb; background: rgba(59,130,246,.14); }
.lr-ped-info-btn:active { color: #1d4ed8; background: rgba(59,130,246,.22); }
.lr-ped-obs { color: var(--color-text-3); font-weight: 400; font-style: italic; font-size: 10px; }
.lr-ped-foot {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 5px; padding-top: 5px; border-top: 1px dashed var(--color-border);
  font-size: 10.5px;
  padding-left: 22px; /* mesmo indent da linha do cliente */
}
/* Badge +X de atraso dentro do aging */
.lr-ped-aging-atraso {
  display: inline-block; margin-left: 4px;
  background: #ef4444; color: #fff;
  padding: 0 4px; border-radius: 3px;
  font-size: 9px; font-weight: 800; line-height: 1.4;
  vertical-align: middle;
}
.lr-ped-qtd { color: var(--color-text-2); font-weight: 600; }
.lr-ped-ref { font-size: 10.5px; color: var(--color-text-3); font-style: italic; font-weight: 400; line-height: 1.3; padding: 1px 0 0 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; }
/* Halo amarelo de busca encontrada (pulsa por 5s; some quando timer expira) */
@keyframes lr-busca-hit-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(234,179,8,.85), 0 0 0 2px rgba(234,179,8,.55) inset; }
  50%     { box-shadow: 0 0 0 6px rgba(234,179,8,0), 0 0 0 2px rgba(234,179,8,.85) inset; }
}
.lr-ped-card.busca-hit { animation: lr-busca-hit-pulse 1.1s ease-in-out infinite; border-color: #eab308 !important; }
.lr-ped-troco { color: #22c55e; }
.lr-ped-troco b { color: #22c55e; font-weight: 800; }
.lr-ped-pag { color: #22c55e; font-weight: 700; }
.lr-ped-spacer { flex: 1; }
.lr-ped-marca { font-size: 9.5px; font-weight: 800; letter-spacing: .03em; }
.lr-ped-marca.esphirras { color: #f59e0b; }
.lr-ped-marca.chase     { color: #dc2626; }
/* Origem (iFood/Site): texto pequeno e discreto, sem pill nem borda */
.lr-ped-origem { font-size: 10px; color: var(--color-text-3); font-weight: 400; }
/* F4.5: tag 🥤 quando pedido contém bebida */
.lr-ped-bebida { font-size: 13px; line-height: 1; color: #eab308; cursor: help; }
.lr-ped-star { color: #eab308; font-size: 12px; }
.lr-ped-card.prio { border-left: 3px solid #eab308; }
.lr-ped-card.dragging { opacity: .4; }
.lr-rota-card.drop-target { background: rgba(34,197,94,.12); border-color: #22c55e; border-style: dashed; }

/* D&D de paradas dentro da rota */
.lr-rota-parada[draggable="true"] { cursor: grab; }
.lr-rota-parada[draggable="true"]:hover { background: rgba(255,255,255,.03); border-radius: 4px; }
.lr-rota-parada.dragging { opacity: .4; }
.lr-rota-parada.drop-target-stop {
  background: rgba(59,130,246,.15);
  outline: 1.5px dashed #3b82f6;
  outline-offset: -2px; border-radius: 4px;
}

/* Lista de pendentes recebendo parada arrastada de volta */
.lr-list.drop-target-volta {
  outline: 2px dashed #f97316;
  outline-offset: -4px;
  background: rgba(249,115,22,.06);
}

/* Barra flutuante de ação sobre o mapa (Ctrl+click em pinos) */
.lr-map-action-bar {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 500; display: flex; align-items: center; gap: 10px;
  background: rgba(24,24,27,.95); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  font-size: 12px;
}
.lr-map-action-bar[hidden] { display: none; }
.lr-map-action-cnt { color: #e5e5e5; }
.lr-map-action-cnt b { color: #fff; font-weight: 800; margin-right: 2px; }
.lr-map-action-clear {
  background: rgba(255,255,255,.12); border: none; color: #fff;
  padding: 4px 10px; border-radius: 12px; font-size: 11px; cursor: pointer;
}
.lr-map-action-clear:hover { background: rgba(255,255,255,.2); }
.lr-map-action-create {
  background: #f97316; border: none; color: #fff; font-weight: 800;
  padding: 4px 12px; border-radius: 12px; font-size: 12px; cursor: pointer;
}
.lr-map-action-create:hover { background: #ea580c; }

/* Animação "piscando" — pedido novo entrando via realtime */
@keyframes lrPedidoNovoPiscar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
  50%      { box-shadow: 0 0 0 4px rgba(249,115,22,.55); }
}
.lr-ped-card.novo {
  animation: lrPedidoNovoPiscar 1.2s ease-in-out 4;
  border-color: #f97316;
}
.lr-rota-mb-edit {
  background: transparent; border: none; padding: 2px;
  color: var(--color-text-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; border-radius: 4px;
  transition: color .12s, background .12s;
}
.lr-rota-mb-edit:hover { color: #f97316; background: rgba(249,115,22,.12); }
.lr-rota-mb-edit svg { display: block; }
.lr-rota-orfa {
  background: rgba(249,115,22,.12); color: #f97316;
  padding: 3px 10px; border-radius: 4px; cursor: pointer;
  font-size: 10.5px; font-weight: 700; border: 1px dashed rgba(249,115,22,.4);
}
.lr-rota-orfa:hover { background: rgba(249,115,22,.2); }
/* 📲 Enviar: atalho no card pra mandar a rota pro app do entregador (= despachar) */
.lr-rota-enviar {
  background: rgba(34,197,94,.14); color: #22c55e;
  padding: 3px 9px; border-radius: 5px; cursor: pointer; margin-left: 5px;
  font-size: 10.5px; font-weight: 800; border: 1px solid rgba(34,197,94,.45);
  white-space: nowrap; transition: background .1s, transform .05s;
}
.lr-rota-enviar:hover { background: rgba(34,197,94,.26); }
.lr-rota-enviar:active { transform: scale(.96); }
.lr-rota-enviar:disabled { cursor: default; transform: none; }
.lr-rota-enviar.enviado { background: rgba(120,128,140,.12); color: var(--text-2, #9aa0a8); border-color: rgba(120,128,140,.3); }
.lr-detped-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 12.5px; color: var(--color-text);
}
.lr-detped-grid b { color: var(--color-text-3); font-weight: 600; }

/* Coluna rotas */
.lr-col-rotas { border-right: 1px solid var(--color-border); }
.lr-rotas-split { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lr-rotas-sec { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.lr-rotas-sec + .lr-rotas-sec { border-top: 1px solid var(--color-border); }
/* Colapsado: lista some, cabecalho fica visivel; secao despachadas vai pro fundo */
.lr-rotas-sec.collapsed { flex: 0 0 auto; }
.lr-rotas-sec.collapsed .lr-rotas-list { display: none; }
.lr-rotas-sec-desp.collapsed { margin-top: auto; }
.lr-rotas-sec-header {
  padding: 8px 14px;
  font-size: 11.5px; color: var(--color-text); font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--color-bg-alt);
  display: flex; align-items: center; gap: 8px;
}
.lr-rotas-list { flex: 1; overflow-y: auto; padding: 6px; }

/* Atribuicao Leaflet/OSM/CARTO discreta (mantida por exigencia da licenca CC-BY) */
.leaflet-control-attribution {
  font-size: 8px !important;
  background: rgba(255,255,255,.55) !important;
  color: rgba(0,0,0,.55) !important;
  padding: 0 4px !important;
  line-height: 1.4 !important;
  opacity: .55;
  transition: opacity .15s;
}
.leaflet-control-attribution:hover { opacity: 1; }
.leaflet-control-attribution a { color: rgba(0,0,0,.7) !important; }

/* Popover de atribuir motoboy (ancorado ao botao + motoboy / lapis) */
.lr-mb-pop {
  position: absolute; z-index: 1100;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 4px;
}
.lr-mb-section-tit {
  font-size: 10px; font-weight: 800; color: var(--color-text-3);
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 4px 2px;
}
.lr-mb-section-tit.sep { margin-top: 8px; border-top: 1px solid var(--color-border); padding-top: 8px; }
.lr-mb-row {
  background: var(--color-bg-alt); border: 1px solid transparent;
  border-radius: 8px; padding: 8px 10px;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s;
}
.lr-mb-row:hover { border-color: #22c55e; background: rgba(34,197,94,.06); }
.lr-mb-ava {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
}
.lr-mb-info { flex: 1; min-width: 0; }
.lr-mb-nome { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.lr-mb-sub  { font-size: 10.5px; color: var(--color-text-3); margin-top: 1px; }
.lr-mb-arrow { color: var(--color-text-3); font-size: 14px; flex-shrink: 0; }
.lr-mb-row-clear { margin-top: 6px; border-top: 1px dashed var(--color-border); border-radius: 0 0 8px 8px; padding-top: 10px; }
.lr-mb-empty { font-size: 11.5px; color: var(--color-text-3); padding: 8px 4px; text-align: center; }

/* Mapa */
.lr-map-wrap {
  position: relative; min-height: 0;
  background: #1a1a1a;
}
.lr-map {
  width: 100%; height: 100%;
}

/* Chips de filtro: lateral DIREITA, em cima da legenda (lado do mar em VV) */
.lr-map-wrap > .lr-map-filters,
.lr-map-filters {
  position: absolute !important;
  right: 10px !important;
  bottom: 130px !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  align-items: flex-end !important;
  flex-wrap: nowrap !important;
  z-index: 500;
}
.lr-map-filter {
  background: rgba(24,24,27,.92); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.1);
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  color: #fff; display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.lr-map-filter.off { opacity: .42; background: rgba(24,24,27,.55); }
.lr-map-filter .dot { width: 9px; height: 9px; border-radius: 50%; }
body.lr-light .lr-map-filter { background: rgba(255,255,255,.95); color: #0f172a; border-color: rgba(0,0,0,.08); }
body.lr-light .lr-map-filter.off { background: rgba(255,255,255,.6); opacity: .5; }

/* Legenda canto inferior direito (acima do attribution Leaflet) — lado do mar em VV, não tampa cidade */
.lr-map-legend {
  position: absolute; bottom: 22px; right: 10px;
  background: rgba(24,24,27,.92); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.08);
  padding: 8px 12px; border-radius: 8px; z-index: 500;
  font-size: 10.5px; color: #e5e5e5;
  min-width: 150px;
}
.lr-map-legend .lg-tit {
  font-size: 9.5px; color: var(--color-text-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.lr-map-legend .lg-row { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.lr-map-legend .dot { width: 8px; height: 8px; border-radius: 50%; }
body.lr-light .lr-map-legend { background: rgba(255,255,255,.95); color: #0f172a; border-color: rgba(0,0,0,.08); }
body.lr-light .lr-map-legend .lg-tit { color: #64748b; }

/* Pin em formato de gota (teardrop) — wrapper transparente, SVG faz o desenho */
.lr-pin-gota { background: transparent !important; border: none !important; }

/* Pino fixo da loja (símbolo de casa) */
.lr-pin-loja { background: transparent !important; border: none !important; }
.lr-pin-loja .lr-loja-marker {
  width: 38px; height: 38px;
  background: #fbbf24; color: #1f2937;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
}

/* ============================================================
   F7.2 — Modal "Criar rota" + cards de rota nas colunas
   ============================================================ */
.lr-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.7);
  z-index: 9999; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.lr-modal {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; width: 520px; max-width: 92vw; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.lr-modal-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 16px 20px; border-bottom: 1px solid var(--color-border);
}
.lr-modal-title { font-size: 16px; font-weight: 800; color: var(--color-text); }
.lr-modal-sub { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
.lr-modal-close {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text-2); width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; font-size: 13px;
}
.lr-modal-body { padding: 16px 20px; overflow-y: auto; flex: 1; }
.lr-modal-section { margin-bottom: 16px; }
.lr-modal-section:last-child { margin-bottom: 0; }
.lr-modal-label {
  font-size: 11px; color: var(--color-text-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px;
}
.lr-modal-hint {
  font-size: 11px; color: var(--color-text-3); margin-top: 5px;
  line-height: 1.4;
}
.lr-modal-select, .lr-modal-textarea {
  width: 100%; background: var(--color-bg); border: 1px solid var(--color-border);
  color: var(--color-text); padding: 9px 11px; border-radius: 6px;
  font-size: 13px; font-family: inherit; resize: vertical;
}
.lr-modal-pedidos {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 8px; max-height: 220px; overflow-y: auto;
}
.lr-modal-ped {
  display: grid; grid-template-columns: 22px 60px 1fr auto; gap: 9px;
  align-items: center; padding: 6px 8px; font-size: 12px;
  border-bottom: 1px dashed var(--color-border);
}
.lr-modal-ped:last-child { border-bottom: none; }
.lr-modal-ped-pos {
  background: #f97316; color: #fff; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
}
.lr-modal-ped-num { font-weight: 800; color: var(--color-text); }
.lr-modal-ped-info { color: var(--color-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-modal-ped-total { color: var(--color-text); font-weight: 700; }

.lr-modal-footer {
  padding: 12px 20px; background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  display: flex; gap: 8px; justify-content: flex-end;
}
.lr-modal-btn-cancel {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text-2); padding: 8px 16px; border-radius: 6px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.lr-modal-btn-confirm {
  background: #22c55e; border: 1px solid #22c55e; color: #fff;
  padding: 8px 16px; border-radius: 6px;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.lr-modal-btn-confirm:disabled { opacity: .6; cursor: not-allowed; }

/* Paradas só visíveis quando card expandido (click no card colapsa/expande) */
.lr-rota-card .lr-rota-paradas { display: none; }
.lr-rota-card.expanded .lr-rota-paradas { display: block; }

/* Meta da rota: progresso entregues/total fica em verde */
.lr-rota-progresso { color: #22c55e; font-weight: 700; }
.lr-rota-calc { color: #94a3b8; font-style: italic; opacity: .85; }
/* Despachada — meta com motoboy no canto direito */
.lr-rota-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lr-rota-meta-mb { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; }
.lr-rota-mb-ico { font-size: 14px; filter: grayscale(.3); }

/* Botão ↩ voltar pra pendente (só nas despachadas) */
.lr-rota-revert {
  background: transparent; border: 1px solid var(--color-border); border-radius: 4px;
  padding: 2px 7px; font-size: 13px; line-height: 1; cursor: pointer;
  color: var(--color-text-2); flex-shrink: 0;
}
.lr-rota-revert:hover { border-color: #eab308; color: #eab308; }

/* Status icons das paradas — só aparecem em rotas despachadas */
.lr-st {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 4px;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.lr-st.aguardando { background: rgba(234,179,8,.18); color: #eab308; font-size: 12px; }
.lr-st.em-rota    { background: rgba(59,130,246,.20); color: #3b82f6; font-size: 12px; }
.lr-st.entregue   { background: #22c55e; color: #fff; }
.lr-st.falhou     { background: #ef4444; color: #fff; }

/* Timestamp HH:MM da parada (alinha à direita) */
.lr-rota-ts { margin-left: auto; font-size: 10px; color: var(--color-text-3); font-weight: 600; }

/* Cards de rota nas colunas */
.lr-rota-card {
  background: #1f1f23; border: 1px solid var(--color-border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 6px;
  cursor: pointer; transition: all .12s;
}
.lr-rota-card:hover { border-color: #f97316; }
.lr-rota-card.ativa { background: rgba(59,130,246,.1); border-color: #3b82f6; }
.lr-rota-head {
  display: flex; align-items: center; gap: 8px;
}
.lr-rota-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.lr-rota-titulo {
  font-size: 12.5px; color: var(--color-text); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lr-rota-titulo b { color: var(--color-text); font-weight: 800; }
.lr-rota-bairros { color: var(--color-text-3); font-weight: 500; }
.lr-rota-pill {
  font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0;
}
.lr-rota-pill.pendente { background: rgba(234,179,8,.18); color: #eab308; border: 1px solid rgba(234,179,8,.4); }
.lr-rota-pill.em-rota  { background: rgba(59,130,246,.18); color: #3b82f6; border: 1px solid rgba(59,130,246,.4); }   /* DESPACHADA (recebida, não saiu) — azul */
.lr-rota-pill.em-andamento { background: rgba(34,197,94,.18); color: #22c55e; border: 1px solid rgba(34,197,94,.4); } /* EM ROTA (na rua) — verde */
body.lr-light .lr-rota-pill.em-andamento { background: rgba(34,197,94,.15); color: #16a34a; border: 1px solid rgba(34,197,94,.4); }
/* TAG "rota pronta pra sair" (pendentes): verde quando todos prontos, âmbar parcial */
.lr-rota-tag-pronta { font-size: 9.5px; font-weight: 800; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.lr-rota-tag-pronta.ok { background: rgba(34,197,94,.16); color: #22c55e; border: 1px solid rgba(34,197,94,.45); }
.lr-rota-tag-pronta.parcial { background: rgba(245,158,11,.14); color: #f59e0b; border: 1px solid rgba(245,158,11,.4); }
/* Rota toda pronta: borda verde sutil */
.lr-rota-card.pronta { border-color: rgba(34,197,94,.5); box-shadow: 0 0 0 1px rgba(34,197,94,.2); }
/* Selo por pedido (pendentes): ✓ pronto / ⏳ na cozinha */
.lr-st-ped { flex: 0 0 auto; min-width: 16px; text-align: center; font-size: 12px; font-weight: 800; }
.lr-st-ped.pronto { color: #22c55e; }
.lr-st-ped.cozinha { color: #f59e0b; }
/* ETA dinâmico (retorno à loja) — info plus, discreta */
.lr-rota-eta { color: #38bdf8; font-weight: 700; white-space: nowrap; }
.lr-rota-meta {
  font-size: 10.5px; color: var(--color-text-3); margin-top: 4px;
  font-weight: 600;
}
.lr-rota-motoboy {
  font-size: 11px; color: var(--color-text); margin-top: 4px;
}
.lr-rota-motoboy b { color: var(--color-text); font-weight: 700; }
.lr-rota-orfa {
  background: rgba(249,115,22,.12); color: #f97316;
  padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; border: 1px dashed rgba(249,115,22,.4);
}
.lr-rota-paradas {
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-border);
  display: flex; flex-direction: column; gap: 3px;
}
.lr-rota-parada {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 7px;
  font-size: 10.5px; padding: 3px 0; overflow: hidden;
}
.lr-rota-parada > .lr-rota-pednum,
.lr-rota-parada > .lr-rota-pedsep { flex: 0 0 auto; }
.lr-rota-parada > .lr-rota-pedcli { flex: 0 1 auto; max-width: 35%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-rota-parada > .lr-rota-pedinfo { flex: 1 1 auto; min-width: 0; }
.lr-rota-parada > .lr-rota-pos { flex: 0 0 auto; }
.lr-rota-parada > .lr-rota-drag,
.lr-rota-parada > .lr-st { flex: 0 0 auto; min-width: 18px; text-align: center; }
.lr-rota-parada > .lr-rota-prio,
.lr-rota-parada > .lr-rota-ts { flex: 0 0 auto; }
.lr-rota-drag {
  color: var(--color-text-3); font-size: 14px; line-height: 1;
  user-select: none; cursor: grab; text-align: center;
}
/* Círculo numerado: outline com cor da rota (mockup) — não filled */
.lr-rota-pos {
  width: 17px; height: 17px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--rota-cor, #f97316) !important;
  color: var(--rota-cor, #f97316) !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; flex-shrink: 0;
}
.lr-rota-pednum { font-weight: 700; color: var(--color-text); }
.lr-rota-pedsep { color: var(--color-text-3); }
.lr-rota-pedcli { font-weight: 600; color: var(--color-text-2); white-space: nowrap; }
.lr-rota-pedinfo {
  color: var(--color-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Botão prioridade — estado default = ☆ outline cinza, hover amarelo */
.lr-rota-prio {
  background: transparent; border: 1px solid var(--color-border);
  border-radius: 4px; padding: 1px 5px;
  font-size: 11px; line-height: 1; cursor: pointer;
  color: var(--color-text-3); flex-shrink: 0;
}
.lr-rota-prio:hover { border-color: #eab308; color: #eab308; }
/* Estado active = PRIORIZADO laranja, fonte menor + bold */
.lr-rota-prio.active {
  background: rgba(249,115,22,.2); color: #f97316; border-color: #f97316;
  font-size: 7.5px; font-weight: 800; padding: 1px 4px; letter-spacing: .02em;
}
.lr-rota-lupa {
  background: transparent; border: 1px solid var(--color-border);
  color: var(--color-text-3); width: 24px; height: 24px;
  border-radius: 5px; cursor: pointer; font-size: 11px; padding: 0;
}
.lr-rota-lupa:hover { color: var(--color-text); border-color: #3b82f6; }
.lr-rota-info {
  background: transparent; border: 1px solid var(--color-border);
  color: #3b82f6; width: 24px; height: 24px;
  border-radius: 5px; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s, color .12s;
}
.lr-rota-info:hover { color: #2563eb; border-color: #3b82f6; background: rgba(59,130,246,.12); }

/* ============================================================
   F7.3 — Drawer de detalhes da rota selecionada
   ============================================================ */
.lr-drawer {
  position: absolute; top: 10px; right: 10px; width: 360px; max-height: calc(100% - 20px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  display: flex; flex-direction: column; z-index: 1050; /* acima do leaflet zoom (z 1000) */
  overflow: hidden;
}
.lr-drawer-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 14px; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border);
}
.lr-drawer-title { font-size: 16.5px; font-weight: 800; color: var(--color-text); font-family: 'JetBrains Mono', monospace; }
.lr-drawer-status { font-size: 13px; color: var(--color-text-2); margin-top: 3px; font-weight: 600; }
.lr-drawer-close {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  color: var(--color-text-2); width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; font-size: 12px;
}
.lr-drawer-body { padding: 12px 14px; overflow-y: auto; flex: 1; }
.lr-drawer-meta { font-size: 13.5px; color: var(--color-text-2); line-height: 1.75; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--color-border); }
.lr-drawer-meta b { color: var(--color-text); }

.lr-drawer-paradas { display: flex; flex-direction: column; gap: 5px; }
.lr-drawer-parada {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 9px; background: var(--color-bg-alt);
  border: 1px solid var(--color-border); border-radius: 6px;
  font-size: 13px; cursor: pointer; transition: border-color .12s, background .12s;
}
.lr-drawer-parada:hover { border-color: #3b82f6; background: rgba(59,130,246,.08); }
.lr-drawer-parada:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.lr-dp-ver { color: #64748b; font-size: 18px; font-weight: 700; line-height: 1; }
.lr-drawer-parada:hover .lr-dp-ver { color: #3b82f6; }
.lr-drawer-parada.st-entregue { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.3); }
.lr-drawer-parada.st-nao_entregue { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.3); }
.lr-dp-pos {
  background: #3b82f6; color: #fff; width: 22px; height: 22px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
}
.lr-dp-num { font-weight: 700; color: var(--color-text); font-size: 13.5px; }
.lr-dp-cli { color: var(--color-text-2); font-size: 13px; }
.lr-dp-bairro { color: var(--color-text-3); font-size: 12px; }

.lr-drawer-footer { padding: 10px 14px; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); display: flex; gap: 6px; }
.lr-drawer-btn {
  flex: 1; padding: 9px; border-radius: 6px; border: 1px solid;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.lr-drawer-btn.despachar { background: #22c55e; border-color: #22c55e; color: #fff; }
.lr-drawer-btn.chamar { background: #f97316; border-color: #f97316; color: #fff; }
.lr-drawer-btn.cancelar { background: var(--color-surface-2); border-color: #ef4444; color: #ef4444; }
.lr-drawer-btn:disabled { opacity: .6; cursor: default; }

/* ============================================================
   F7.4 — Sugestões automáticas (botão + modal)
   ============================================================ */
.lr-btn-sugerir {
  background: linear-gradient(135deg, #a855f7, #f97316);
  border: none; color: #fff; padding: 7px 14px; border-radius: 6px;
  font-size: 12px; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 8px rgba(168,85,247,.35);
}
.lr-btn-sugerir:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(168,85,247,.45); }

.lr-sug-config {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: 6px; padding: 8px 12px; font-size: 12px;
  color: var(--color-text-2); margin-bottom: 14px; line-height: 1.5;
}
.lr-sug-config b { color: var(--color-text); }
.lr-sug-grupos { display: flex; flex-direction: column; gap: 8px; }
.lr-sug-grupo {
  background: var(--color-bg-alt); border: 1.5px solid var(--color-border);
  border-radius: 8px; padding: 10px 12px;
}
.lr-sug-grupo:has(.lr-sug-check:checked) {
  border-color: #22c55e; background: rgba(34,197,94,.04);
}
.lr-sug-grupo-head {
  font-size: 13px; color: var(--color-text); margin-bottom: 8px;
}
.lr-sug-check { width: 16px; height: 16px; accent-color: #22c55e; cursor: pointer; }
.lr-sug-grupo-peds {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.lr-sug-ped-chip {
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; color: var(--color-text-2); font-weight: 600;
}

/* ============================================================
   F11 — Central de Alertas: SINO FIXO na barra superior + dropdown
   ============================================================ */
/* O sino é o último botão da barra (à direita do ⚙ Config). O painel abre como
   dropdown ancorado embaixo dele — não flutua sobre o mapa nem tapa o Config. */
.lr-sino-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.lr-sino-bar {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--color-bg-alt); border: 1px solid var(--color-border); color: var(--color-text);
  font-size: 18px; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, box-shadow .15s;
}
.lr-sino-bar.tem { background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: #ef4444; color: #fff; }
.lr-sino-bar.pulsa { animation: lrSinoPulse 1.4s ease-in-out infinite; }
@keyframes lrSinoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
  50%      { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
.lr-sino-bar.pulsa .lr-sino-ic { animation: lrSinoBell 1s infinite; display: inline-block; }
@keyframes lrSinoBell { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.lr-sino-badge {
  position: absolute; top: -5px; right: -5px; background: #fff; color: #ef4444;
  font-size: 11px; font-weight: 900; min-width: 19px; height: 19px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
  border: 1.5px solid #ef4444;
}
/* Dropdown do sino — ancorado embaixo, alinhado à direita da barra */
.lr-painel-pop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 372px; max-height: 72vh;
  background: var(--color-bg); border: 2px solid #ef4444; border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0,0,0,.5); z-index: 1300;
  display: flex; flex-direction: column; overflow: hidden;
}
.lr-painel-pop.recolhido { display: none; }
.lr-painel-colapsar {
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 13px;
}
.lr-alerta-card.avisado { border-color: #22c55e; }
.lr-alerta-avisado {
  font-size: 10.5px; font-weight: 700; color: #22c55e; margin-top: 5px;
}
.lr-aa-btn.atender { background: #22c55e; border-color: #22c55e; color: #fff; }
.lr-aa-btn.atender.done { background: rgba(34,197,94,.12); border-color: #22c55e; color: #22c55e; cursor: default; }
.lr-aa-btn.prompt { background: #fff; border-color: #fff; color: #7f1d1d; }
.lr-alerta-card.cancel { border-color: #ef4444; border-left: 4px solid #ef4444; }
.lr-alerta-card.cancel .lr-alerta-detalhe { color: #fca5a5; font-style: normal; }
@keyframes lrPainelPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(239,68,68,.4); }
  50%      { box-shadow: 0 8px 24px rgba(239,68,68,.8); }
}
.lr-painel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #ef4444; color: #fff;
  font-weight: 800; font-size: 13px;
}
.lr-painel-pulse {
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  animation: lrDotPulse 1s infinite;
}
@keyframes lrDotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.lr-painel-tit { flex: 1; }
.lr-painel-mute {
  background: rgba(255,255,255,.2); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 50%;
  cursor: pointer; font-size: 12px;
}

.lr-painel-list { padding: 8px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.lr-alerta-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 9px 11px;
}
.lr-alerta-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 5px;
}
.lr-alerta-tipo { font-size: 12px; font-weight: 800; color: #ef4444; }
.lr-alerta-tempo { font-size: 10px; color: var(--color-text-3); font-weight: 700; }
.lr-alerta-info { font-size: 12px; color: var(--color-text); }
.lr-alerta-end { font-size: 10.5px; color: var(--color-text-2); margin-top: 2px; }
.lr-alerta-detalhe {
  font-size: 11px; font-style: italic;
  background: var(--color-bg-alt); padding: 5px 8px; border-radius: 5px;
  margin-top: 6px; color: var(--color-text-2);
}
.lr-alerta-acoes { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.lr-aa-btn {
  flex: 1; min-width: 90px;
  padding: 6px 8px; border-radius: 5px; border: 1px solid;
  font-size: 10.5px; font-weight: 700; cursor: pointer;
}
.lr-aa-btn.resp { background: #22c55e; border-color: #22c55e; color: #fff; }
.lr-aa-btn.falha { background: var(--color-surface-2); border-color: #eab308; color: #eab308; }
.lr-aa-btn.falha.done { background: rgba(34,197,94,.1); border-color: #22c55e; color: #22c55e; cursor: default; }
.lr-aa-btn.saipos { background: var(--color-surface-2); border-color: #3b82f6; color: #3b82f6; }
.lr-aa-btn.disp { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-3); }
.lr-aa-btn.contato { background: var(--color-surface-2); border-color: #22c55e; color: #22c55e; }

/* Submenus do card de alerta (Copiar Alerta / Consegui Contato) */
.lr-alerta-subtit { width: 100%; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--color-text-3); margin: 2px 0 3px; }

/* Histórico do dia no sino (finalizados) */
.lr-painel-histtit { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--color-text-3); margin: 10px 2px 6px; border-top: 1px dashed var(--color-border); padding-top: 9px; }
.lr-hist-card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 8px;
  padding: 7px 10px; margin-bottom: 5px; opacity: .8; }
.lr-hist-l1 { font-size: 11px; color: var(--color-text); display: flex; gap: 5px; align-items: baseline; flex-wrap: wrap; }
.lr-hist-l1 b { color: var(--color-primary); }
.lr-hist-hora { margin-left: auto; font-size: 10px; color: var(--color-text-3); }
.lr-hist-detalhe { font-size: 11px; color: var(--color-text); font-style: italic; margin-top: 3px; line-height: 1.35; }
/* Troca de forma de pagamento (alerta) — box claro: header + lista do que cobrar */
.lr-pag-troca { margin: 5px 0; padding: 7px 9px; border-radius: 8px; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); border-left: 3px solid #f59e0b; }
.lr-pag-troca-tit { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: #f59e0b; margin-bottom: 4px; }
.lr-pag-linha { font-size: 13px; color: var(--color-text); line-height: 1.55; }
.lr-pag-linha b { font-weight: 800; }
/* Finalizado: motoboy claro (🛵) + rodapé com desfecho e botão "ver pedido" */
.lr-hist-mb { color: var(--color-text-2); font-weight: 600; }
.lr-hist-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.lr-hist-ver { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 7px; background: var(--color-surface-2, rgba(255,255,255,.06)); border: 1px solid var(--color-border); color: var(--color-text); cursor: pointer; flex-shrink: 0; }
.lr-hist-ver:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.lr-hist-desfecho { font-size: 10.5px; color: var(--color-text-2); margin-top: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   Modal de Sugestão de Rotas v2 — lista (endereço+janela+diâmetro) + mapa preview
   ════════════════════════════════════════════════════════════════════════ */
.lr-sug-modal {
  width: min(1040px, 94vw); height: min(680px, 90vh);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.lr-sug-cfgstrip {
  font-size: 11.5px; color: var(--color-text-2);
  padding: 8px 18px; background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border);
}
.lr-sug-cfgstrip b { color: var(--color-primary); }
.lr-sug-body { flex: 1; display: grid; grid-template-columns: 1fr 460px; min-height: 0; }
.lr-sug-list { overflow-y: auto; padding: 14px; border-right: 1px solid var(--color-border); }
.lr-sug-mapwrap { position: relative; background: var(--color-surface); }
#lr-sug-map { position: absolute; inset: 0; }
.lr-sug-maptools { position: absolute; top: 10px; left: 10px; z-index: 600; display: flex; gap: 6px; }
.lr-sug-mapbtn {
  background: rgba(17,17,24,.92); border: 1px solid var(--color-border); color: var(--color-text-2);
  font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 7px; cursor: pointer; backdrop-filter: blur(4px);
}
.lr-sug-mapbtn.on { background: var(--color-primary); color: #000; border-color: var(--color-primary); }

.lr-sug-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 11px; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.lr-sug-card.active { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.lr-sug-card.lr-sug-off { opacity: .5; filter: grayscale(.4); }
.lr-sug-card.lr-sug-off:hover { opacity: .75; }
.lr-sug-card-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; }
.lr-sug-check { width: 17px; height: 17px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
.lr-sug-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.lr-sug-card-title { font-size: 13.5px; font-weight: 800; flex: 1; color: var(--color-text); }
.lr-sug-card-title small { display: block; font-size: 10.5px; color: var(--color-text-3); font-weight: 600; margin-top: 1px; }

.lr-sug-badges { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 10px; }
.lr-sug-badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 6px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--color-surface-2); color: var(--color-text-2); border: 1px solid var(--color-border);
}
.lr-sug-badge.ok { color: #22c55e; border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); }
.lr-sug-badge.warn { color: var(--color-primary); border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.1); }

.lr-sug-stops { border-top: 1px solid var(--color-border); }
.lr-sug-stop { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--color-border); }
.lr-sug-stop:last-child { border-bottom: none; }
/* Pin da lista = nº do PEDIDO. A ordem (1º/2º) fica inline antes do nome (.lr-sug-stop-ord). */
.lr-sug-pin { min-width: 26px; height: 22px; padding: 0 6px; border-radius: 7px; color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.lr-sug-stop-ord { font-size: 10px; font-weight: 800; color: var(--color-text-3); margin-right: 2px; }
.lr-sug-stop-info { flex: 1; min-width: 0; }
.lr-sug-stop-l1 { font-size: 12.5px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 6px; }
.lr-sug-stop-num { color: var(--color-text-3); font-weight: 600; }
.lr-sug-stop-addr { font-size: 11px; color: var(--color-text-2); margin-top: 2px; line-height: 1.35; }
.lr-sug-stop-addr .b { color: var(--color-text-3); }
.lr-sug-stop-age { font-size: 10px; color: var(--color-text-3); white-space: nowrap; margin-top: 1px; }
.lr-sug-footinfo { font-size: 12px; color: var(--color-text-2); }
.lr-sug-footinfo b { color: var(--color-text); }

/* Card flutuante (canto sup. esquerdo do mapa) ao clicar num pedido: nº + endereço */
.lr-map-card {
  position: absolute; top: 12px; left: 12px; z-index: 600;
  background: rgba(17,17,24,.95); border: 1px solid var(--color-border);
  border-radius: 10px; padding: 10px 30px 10px 12px; min-width: 150px; max-width: 250px;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); backdrop-filter: blur(4px);
}
.lr-map-card-num { font-size: 15px; font-weight: 800; color: var(--color-primary); line-height: 1; }
.lr-map-card-addr { font-size: 12px; color: var(--color-text-2); margin-top: 4px; line-height: 1.35; }
.lr-map-card-addr .b { color: var(--color-text-3); }
.lr-map-card-x { position: absolute; top: 5px; right: 7px; background: transparent; border: none; color: var(--color-text-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px; }
.lr-map-card-x:hover { color: var(--color-text); }