/* ══ Abastece Aqui — Página de rota (/rota) ══ */
:root {
  --rota-panel-w: 380px;
  --rota-red: #e10008;
  --rota-gold: #edaa03;
  --rota-green: #16a34a;
  --rota-orange: #ea8600;
  --rota-intense: #dc2626;
  --rota-bg: #f1f2f4;
  --rota-card: #fff;
  --rota-border: rgba(0, 0, 0, 0.09);
  --rota-text: #1a1a1a;
  --rota-muted: #5b5b5b;
  --rota-radius: 12px;
  --rota-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

html, body { height: 100%; }
html, body { overflow-x: clip; }
body { display: flex; flex-direction: column; background: var(--rota-bg); color: var(--rota-text); font-family: Arial, Helvetica, sans-serif; }

/* ── Layout desktop ≥900px: 2 colunas, 100vh ── */
.rota-layout { display: flex; flex-direction: row; height: 100dvh; min-height: 100dvh; }

/* RouteHeader + resumo + passos */
.rota-panel {
  width: var(--rota-panel-w); min-width: var(--rota-panel-w); max-width: var(--rota-panel-w);
  background: var(--rota-card); border-right: 1px solid var(--rota-border);
  display: flex; flex-direction: column; min-height: 0; z-index: 800;
}
.rota-head { padding: 12px 14px 10px; border-bottom: 2px solid var(--rota-red); flex-shrink: 0; }
.rota-head-row { display: flex; align-items: center; gap: 8px; }
.rota-back {
  min-width: 40px; min-height: 40px; width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rota-border); border-radius: 8px; background: #fff;
  text-decoration: none; color: var(--rota-text); font-weight: bold; font-size: 18px;
}
.rota-title { min-width: 0; flex: 1; font-size: 15px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-icon {
  min-width: 40px; min-height: 40px; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--rota-border); background: #fff;
  cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--rota-text);
}
.btn-icon:hover { background: var(--rota-bg); }
.btn-icon.spinning { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.rota-summary-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
.rota-summary-line strong { font-size: 13px; }
.badge-traffic { font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.badge-leve { background: #e7f6ec; color: #146c35; border-color: var(--rota-green); }
.badge-moderado { background: #fdf3d7; color: #7a5200; border-color: var(--rota-orange); }
.badge-intenso { background: #fdecec; color: #7a0000; border-color: var(--rota-intense); }
.rota-fuel { margin-top: 6px; font-size: 12px; color: var(--rota-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rota-nav-hint { display: none; margin-top: 6px; font-size: 12px; font-weight: bold; color: #146c35; }
.rota-layout.navigating .rota-nav-hint { display: block; }

/* Skeleton loading no painel */
.rota-skeleton { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.rota-skeleton span { display: block; height: 13px; border-radius: 4px; background: linear-gradient(90deg, #eee 25%, #e2e2e2 50%, #eee 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* StepsList */
.rota-steps-wrap { flex: 1; min-height: 0; overflow-y: auto; }
#rota-status { padding: 8px 14px; font-size: 12px; color: var(--rota-muted); border-bottom: 1px solid var(--rota-bg); }
.rota-error { display: none; margin: 10px 14px; padding: 12px; background: #fdecec; border: 1px solid var(--rota-red); border-radius: 8px; font-size: 13px; }
.rota-error.show { display: block; }
.rota-error button { margin-top: 8px; min-height: 40px; padding: 8px 14px; border-radius: 8px; border: none; background: var(--rota-red); color: #fff; font-weight: bold; cursor: pointer; }
.rota-nogps { display: none; margin: 10px 14px; padding: 12px; background: #fdf3d7; border: 1px solid var(--rota-gold); border-radius: 8px; font-size: 13px; }
.rota-nogps.show { display: block; }
.rota-nogps button { margin-top: 8px; margin-right: 6px; min-height: 40px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--rota-border); background: #fff; font-weight: bold; cursor: pointer; }
nav.rota-steps ol { list-style: none; padding: 4px 8px 90px; }
nav.rota-steps li {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 6px; border: none; border-bottom: 1px solid #f1f2f4; background: none;
  font-size: 14px; cursor: pointer;
}
nav.rota-steps li:hover { background: #fafafa; }
.step-ico {
  width: 36px; height: 36px; flex-shrink: 0; background: var(--rota-bg);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.step-txt { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; line-height: 1.35; }
.step-dist { flex-shrink: 0; font-size: 12px; color: var(--rota-muted); font-weight: normal; }
nav.rota-steps li.step-first .step-ico, nav.rota-steps li.step-last .step-ico { background: #e7f6ec; }
nav.rota-steps li.step-last .step-txt { color: #146c35; }

/* Ações fixas no fundo do painel */
.rota-actions { flex-shrink: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rota-border); background: #fff; display: flex; flex-direction: column; gap: 8px; }
.btn-primary { min-height: 48px; border: none; border-radius: 10px; background: var(--rota-red); color: #fff; font-weight: bold; font-size: 14px; cursor: pointer; }
.btn-primary.stop { background: #1a1a1a; }
.btn-secondary { min-height: 44px; border-radius: 10px; border: 1px solid var(--rota-border); background: #fff; font-weight: bold; font-size: 13px; cursor: pointer; color: var(--rota-text); text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rota-ext-links { display: flex; gap: 8px; }
.rota-ext-links a { flex: 1; }

/* RouteMap */
.rota-map-wrap { position: relative; flex: 1; min-width: 0; }
#rota-map { position: absolute; inset: 0; z-index: 1; background: #e3e5e8; }
#rota-map.loading::after {
  content: ""; position: absolute; inset: 0; z-index: 500;
  background: linear-gradient(90deg, #e8eaed 25%, #dfe2e6 50%, #e8eaed 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite;
}
.leaflet-control-attribution { white-space: nowrap !important; font-size: 10px !important; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.leaflet-control-attribution a { font-size: 10px !important; }
.rota-fab {
  position: absolute; z-index: 600; width: 44px; height: 44px;
  background: #fff; border: 1px solid var(--rota-border); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.15); cursor: pointer; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--rota-text);
}
#btn-center { right: 12px; bottom: 28px; }
#btn-back-float { display: none; }
.origin-marker { background: none; border: none; }
.origin-dot { width: 18px; height: 18px; background: #2563eb; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(37,99,235,.25), 0 1px 4px rgba(0,0,0,.3); }
.dest-marker { background: none; border: none; }
.dest-badge { width: 34px; height: 34px; background: var(--rota-red); border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 1px 6px rgba(0,0,0,.3); }

/* Grip do bottom sheet (só mobile) */
.sheet-grip { display: none; }

/* ── Mobile <900px: mapa 55vh + bottom sheet ── */
@media (max-width: 899.98px) {
  .rota-layout { flex-direction: column; height: 100dvh; }
  .rota-map-wrap { flex: none; height: 55vh; min-height: 55vh; }
  #btn-back-float {
    display: inline-flex; left: 12px; top: 12px; text-decoration: none;
  }
  .leaflet-control-zoom { display: none !important; }
  .rota-panel {
    width: 100%; min-width: 0; max-width: none; flex: 1; min-height: 0;
    border-right: none; border-top: 1px solid var(--rota-border);
    border-radius: 16px 16px 0 0; margin-top: -16px; z-index: 700;
    box-shadow: 0 -4px 24px rgba(0,0,0,.12);
  }
  .sheet-grip {
    display: flex; justify-content: center; width: 100%; padding: 8px 0 4px;
    background: none; border: none; cursor: grab; touch-action: none; flex-shrink: 0;
  }
  .sheet-grip::before { content: ""; width: 44px; height: 5px; border-radius: 999px; background: #c9c9c9; }
  .rota-head { border-bottom: 1px solid var(--rota-border); padding-top: 0; }
  .rota-head .rota-back { display: none; }
  /* 3 estados do sheet */
  .rota-panel[data-sheet="collapsed"] .rota-steps-wrap,
  .rota-panel[data-sheet="collapsed"] .rota-actions .btn-secondary,
  .rota-panel[data-sheet="collapsed"] .rota-ext-links { display: none; }
  .rota-panel[data-sheet="collapsed"] { flex: none; }
  .rota-panel[data-sheet="half"] { flex: 1; }
  .rota-panel[data-sheet="expanded"] { flex: 1; }
  .rota-panel[data-sheet="expanded"] .rota-steps-wrap { flex: 1; }
  nav.rota-steps ol { padding-bottom: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}