/* Rota das Visitas (mapa-visitas.html). Herda tokens e componentes de
   css/styles.css (.top, .brand, .excel-btn, .access-banner, login de vidro);
   aqui só o que é desta tela.

   Convenção do repositório: NENHUM backdrop-filter (já borrou texto em
   WebView Android). Fundos sólidos. */

.mapa-header-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.mapa-header-btn{ margin-top:0; text-decoration:none; }

.mapa-wrap{ padding-bottom:28px; }

/* ---------- Filtros ---------- */
.mapa-filtros{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:10px 14px;
  margin-top:22px;
  padding:14px 16px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
}
.mapa-atalhos{ display:flex; gap:6px; flex-wrap:wrap; align-self:center; }
.mapa-chip{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-dim);
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 13px;
  cursor:pointer;
  transition:color .12s, border-color .12s, background .12s;
}
.mapa-chip:hover{ color:var(--text); border-color:var(--text-faint); }
.mapa-chip[aria-pressed="true"]{
  color:#12151A;
  background:var(--accent);
  border-color:var(--accent-deep, var(--accent));
}
.mapa-campo{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mapa-campo span{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:600;
  color:var(--text-faint);
}
/* Campos em vidro arredondado (pedido 14/09/2026: "mais vidro, mais
   arredondado"). Vidro = gradiente translúcido + brilho interno em cima +
   sombra embaixo, SEM backdrop-filter (regra do repositório). O gradiente é
   a camada --mapa-vidro; select e data empilham o próprio ícone por cima dela
   (background-image com duas camadas), senão o ícone some. */
.mapa-filtros{
  --mapa-vidro:linear-gradient(165deg, rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.035) 48%, rgba(255,255,255,0.06) 100%);
}
.mapa-campo input,
.mapa-campo select{
  font-family:'Inter', sans-serif;
  font-size:14px;
  color:var(--text);
  background-color:#14181e;
  background-image:var(--mapa-vidro);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  padding:9px 16px;
  min-width:0;
  color-scheme:dark;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -3px 8px -2px rgba(0,0,0,0.45),
    0 4px 12px -4px rgba(0,0,0,0.5);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.mapa-campo input::placeholder{ color:var(--text-faint); }
.mapa-campo input:hover,
.mapa-campo select:hover{ border-color:rgba(255,255,255,0.24); }
.mapa-campo input:focus,
.mapa-campo select:focus{
  outline:none;
  border-color:rgba(242,183,5,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -3px 8px -2px rgba(0,0,0,0.45),
    0 0 0 3px rgba(242,183,5,0.16),
    0 4px 12px -4px rgba(0,0,0,0.5);
}
.mapa-campo select{
  min-width:150px;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  padding-right:38px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CED6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"),
    var(--mapa-vidro);
  background-repeat:no-repeat, no-repeat;
  background-position:right 14px center, 0 0;
  background-size:14px 14px, 100% 100%;
}
.mapa-campo select option{ background:#1A1F26; color:var(--text); }
.mapa-campo-busca{ flex:1 1 180px; }
.mapa-campo-busca input{ width:100%; }
.mapa-check{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:var(--text-dim);
  padding-bottom:9px;
  cursor:pointer;
  user-select:none;
}
.mapa-check input{ accent-color:var(--accent); width:16px; height:16px; }

/* ---------- KPIs ---------- */
.mapa-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:12px;
  margin-top:14px;
}
.mapa-kpi{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 16px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mapa-kpi span{
  font-size:10.5px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-weight:600;
  color:var(--text-faint);
}
.mapa-kpi strong{
  font-family:'Oswald', sans-serif;
  font-size:28px;
  font-weight:600;
  color:var(--text);
  line-height:1.15;
}
.mapa-kpi em{ font-style:normal; font-size:12px; color:var(--text-dim); }

/* ---------- Botões de vendedor (um trajeto por vez) ---------- */
.mapa-vend-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mapa-vend-chips:empty{ display:none; }
.mapa-vend-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Inter', sans-serif;
  font-size:14px;
  font-weight:600;
  color:var(--text);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 14px 7px 12px;
  cursor:pointer;
  transition:border-color .12s, background .12s, transform .12s;
}
.mapa-vend-chip b{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--text-dim);
  background:rgba(255,255,255,0.06);
  border-radius:999px;
  padding:1px 7px;
}
/* Km do vendedor no período (30/09/2026), depois do número de visitas.
   Pílula própria NA COR do vendedor (30/09/2026: "melhore a visualização,
   está apagado" — o cinza sem fundo sumia no botão escuro). Todos (sem cor)
   fica no amarelo do destaque. Selecionado: igual à pílula das visitas. */
.mapa-vend-km{
  font-family:'JetBrains Mono', monospace; font-size:12.5px; font-weight:700; white-space:nowrap;
  color:color-mix(in srgb, var(--cor, var(--accent)) 55%, #FFFFFF);
  background:color-mix(in srgb, var(--cor, var(--accent)) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--cor, var(--accent)) 50%, transparent);
  border-radius:999px; padding:1px 8px;
}
.mapa-vend-chip[aria-pressed="true"] .mapa-vend-km{ color:var(--cor-txt, #12151A); background:rgba(0,0,0,0.16); border-color:transparent; }
.mapa-vend-chip:hover{ border-color:var(--cor, var(--accent)); transform:translateY(-1px); }
.mapa-vend-ponto{ width:11px; height:11px; border-radius:50%; background:var(--cor); flex:none; }
.mapa-vend-chip[aria-pressed="true"]{
  color:var(--cor-txt, #12151A);
  background:var(--cor, var(--accent));
  border-color:var(--cor, var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 12px rgba(0,0,0,0.35);
}
.mapa-vend-chip[aria-pressed="true"] .mapa-vend-ponto{ background:var(--cor-txt, #12151A); }
.mapa-vend-chip[aria-pressed="true"] b{ color:var(--cor-txt, #12151A); background:rgba(0,0,0,0.16); }

/* ---------- Mapa + lista ---------- */
.mapa-corpo{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 360px;
  gap:14px;
  margin-top:14px;
}
.mapa-mapa-card{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#1a1e24;
  min-height:560px;
}
.mapa-mapa{ position:absolute; inset:0; }
.mapa-status{
  position:absolute;
  left:50%;
  top:12px;
  transform:translateX(-50%);
  z-index:500;
  max-width:calc(100% - 24px);
  background:#12151A;
  color:#e9ecef;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  padding:7px 14px;
  font-size:12.5px;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.35);
  text-align:center;
}
.mapa-status.is-erro{ border-color:rgba(225,149,60,0.6); color:#f3c58a; }

.mapa-lado{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:560px;
}
.mapa-lado-titulo{
  font-family:'Oswald', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--text);
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:8px;
}
.mapa-pill{
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  color:#12151A;
  background:var(--accent);
  border-radius:999px;
  padding:1px 9px;
}
.mapa-lista{ overflow-y:auto; padding:6px 8px 10px; }
.mapa-vazio{ padding:18px 10px; color:var(--text-dim); font-size:13px; text-align:center; }

.mapa-grupo + .mapa-grupo{ margin-top:8px; border-top:1px solid var(--line); padding-top:6px; }
.mapa-grupo-cab{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:8px 8px 6px;
  font-size:14px;
  color:var(--text);
}
.mapa-grupo-cab small{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:1px; }
.mapa-grupo-ponto{
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--cor);
  margin-top:4px;
  flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cor) 30%, transparent);
}

.mapa-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  border-radius:10px;
  padding:7px 8px;
  cursor:pointer;
  color:inherit;
  font:inherit;
}
.mapa-item:hover:not(:disabled){ background:rgba(255,255,255,0.05); }
.mapa-item:disabled{ cursor:default; opacity:0.6; }
.mapa-item-num{
  flex:none;
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--cor);
  color:var(--cor-txt, #12151A);
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mapa-item.is-sem-gps .mapa-item-num{ background:#5a6270; color:#e9ecef; }
.mapa-item-txt{ min-width:0; display:flex; flex-direction:column; gap:1px; }
.mapa-item-txt strong{ font-size:13.5px; color:var(--text); font-weight:600; }
.mapa-item-txt small{ font-size:11.5px; color:var(--text-dim); }
.mapa-item-desl{ color:var(--text-faint) !important; font-family:'JetBrains Mono', monospace; font-size:11px !important; }
.mapa-tag{
  font-style:normal;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#12151A;
  background:#8fc1dc;
  border-radius:4px;
  padding:0 5px;
  vertical-align:1px;
}
.mapa-tag.is-legado{ background:#c9ced6; }

/* Calendário: mesmo popup do Almoxarifado (.almox-datepicker em
   css/almoxarifado.css — histórico do "dia de hoje" documentado lá; não
   mudar o vidro dourado sem pedido). z-index acima do Leaflet (até 1000).
   Sem backdrop-filter. */
.mapa-campo .mapa-date-input{
  cursor:pointer;
  width:150px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9CED6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E"),
    var(--mapa-vidro);
  background-repeat:no-repeat, no-repeat;
  background-position:right 14px center, 0 0;
  background-size:15px 15px, 100% 100%;
  padding-right:38px;
}
.mapa-datepicker{
  position:fixed;
  z-index:1200;
  width:264px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(130% 75% at 14% -12%, rgba(255,255,255,0.10), rgba(255,255,255,0) 55%),
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.012) 45%, rgba(255,255,255,0.015) 100%),
    var(--panel);
  box-shadow:0 24px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family:'Inter', sans-serif;
}
.mapa-datepicker.hidden{ display:none; }
.mapa-datepicker-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mapa-datepicker-title{
  font-family:'Oswald', sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--text);
}
.mapa-datepicker-nav{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text-dim);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  line-height:1;
}
.mapa-datepicker-nav:hover{ border-color:var(--accent); color:var(--accent); }
.mapa-datepicker-weekdays{ display:grid; grid-template-columns:repeat(7, 1fr); margin-bottom:4px; }
.mapa-datepicker-weekdays span{
  text-align:center;
  font-size:10.5px;
  color:var(--text-faint);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.mapa-datepicker-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:2px; }
.mapa-datepicker-day{
  height:32px;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  font-family:'Inter', sans-serif;
  font-size:12.5px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mapa-datepicker-day:hover{ background:var(--panel-2); }
.mapa-datepicker-day--outside{ color:var(--text-faint); opacity:0.5; }
.mapa-datepicker-day--today,
.mapa-datepicker-day--selected{
  border-radius:999px;
  color:#151a1f;
  font-weight:700;
  background:linear-gradient(160deg, #ffe066 0%, #f2b705 55%, #c89100 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -5px 7px -3px rgba(120,80,0,0.35),
    0 2px 4px rgba(0,0,0,0.35),
    0 6px 12px -4px rgba(242,183,5,0.45),
    0 10px 18px -10px rgba(0,0,0,0.6);
  transform:translateY(-1px);
}
.mapa-datepicker-day--today:hover,
.mapa-datepicker-day--selected:hover{ background:linear-gradient(160deg, #ffe066 0%, #f2b705 55%, #c89100 100%); }
.mapa-datepicker-day:disabled{ cursor:default; }
.mapa-datepicker-foot{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
.mapa-datepicker-today{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--text-dim);
  border-radius:8px;
  padding:6px 10px;
  font-size:11.5px;
  cursor:pointer;
  font-family:'JetBrains Mono', monospace;
}
.mapa-datepicker-today:hover{ border-color:var(--accent); color:var(--accent); }

/* Seta de sentido do trajeto (mapaDesenharSetas): chevron SVG na cor do
   vendedor com contorno branco, apontando pra direita antes do rotate. */
.mapa-seta-wrap{ background:transparent; border:0; pointer-events:none; }
.mapa-seta{ width:22px; height:22px; }
.mapa-seta svg{ width:22px; height:22px; display:block; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,0.45)); }

/* Marcador numerado (L.divIcon) */
.mapa-marcador-wrap{ background:transparent; border:0; }
.mapa-marcador{
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--cor);
  color:var(--cor-txt, #12151A);
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.45);
  font-family:'JetBrains Mono', monospace;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mapa-marcador.is-legado{ border-style:dashed; opacity:0.85; }
.leaflet-popup-content{ font-family:'Inter', sans-serif; font-size:13px; line-height:1.45; }

@media (max-width: 900px){
  .mapa-corpo{ grid-template-columns:1fr; }
  .mapa-mapa-card{ min-height:420px; }
  .mapa-lado{ max-height:none; }
  .mapa-campo select{ min-width:120px; }
}
@media (max-width: 640px){
  .mapa-filtros{ padding:12px; }
  .mapa-campo{ flex:1 1 calc(50% - 7px); }
  .mapa-campo input, .mapa-campo select{ width:100%; }
  .mapa-kpi strong{ font-size:22px; }
}

/* Ausência no trajeto (16/09/2026): parada onde o cliente não estava.
   Anel dourado no marcador e etiqueta dourada na lista. */
.mapa-tag.is-ausente{ background:#f3d58a; color:#5b3d00; }
.mapa-marcador.is-ausente{ box-shadow:0 0 0 3px #D9A441, 0 2px 6px rgba(0,0,0,0.35); }