/* =====================================================================
   UrbanGuide · Painel — tema retrô 8-bit (original)
   ===================================================================== */
:root{
  --night:#12142e; --night2:#181b3d; --panel:#1f2353; --panel2:#272c63; --edge:#0a0b1c; --hi:#3a418c;
  --red:#BE1324; --red-d:#7a0b16; --red-l:#ff3b4f;
  --gold:#ffc83a; --gold-d:#b8861a; --green:#3ddc84; --cyan:#4cc9f0; --white:#f4f4ff; --muted:#a7abd6; --dim:#7c80b3;
  --px:"Press Start 2P",monospace; --num:"VT323",monospace; --body:"Pixelify Sans","Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--night);color:var(--white);font-family:var(--body);font-size:16px;line-height:1.35;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 67% 8%,#fff6 50%,transparent 51%),
    radial-gradient(2px 2px at 83% 31%,#fff5 50%,transparent 51%),radial-gradient(1px 1px at 33% 62%,#fff4 50%,transparent 51%),
    radial-gradient(2px 2px at 52% 44%,#ffffff30 50%,transparent 51%),radial-gradient(1px 1px at 91% 72%,#fff5 50%,transparent 51%);
  background-attachment:fixed}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit}
.hidden{display:none!important}
.px{font-family:var(--px);text-transform:uppercase;letter-spacing:.02em;line-height:1.5}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.label{font-family:var(--px);font-size:9px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;line-height:1.6}

/* ---------- Blocos pixelados ---------- */
.box{background:var(--panel);border:4px solid var(--edge);box-shadow:inset 3px 3px 0 var(--hi),inset -3px -3px 0 #151843,0 6px 0 #070814;position:relative}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:4px solid var(--edge);background:var(--panel2);color:var(--white);
  font-family:var(--px);font-size:10px;text-transform:uppercase;padding:12px 16px;cursor:pointer;box-shadow:inset 2px 2px 0 #ffffff25,inset -2px -3px 0 #00000045,0 4px 0 var(--edge);
  transition:transform .06s,box-shadow .06s;text-decoration:none;line-height:1.2}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(4px);box-shadow:inset 2px 2px 0 #ffffff25,inset -2px -3px 0 #00000045,0 0 0 var(--edge)}
.btn-red{background:var(--red)}
.btn-gold{background:var(--gold);color:#2a1c00}
.btn-sm{padding:8px 10px;font-size:8px}
.btn-block{width:100%}
.input{width:100%;background:#0e1030;border:4px solid var(--edge);box-shadow:inset 3px 3px 0 #00000060;padding:11px 12px;outline:none;color:var(--white)}
.input:focus{border-color:var(--gold)}
select.input{padding:9px 10px}
.field{display:block;margin-bottom:14px}
.field>span{display:block;margin-bottom:6px}

/* ---------- Tela de entrada ---------- */
#login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 210px;position:relative;overflow:hidden}
.scene{position:absolute;left:0;right:0;bottom:0;height:200px;pointer-events:none}
.scene>svg{position:absolute;bottom:0;left:0;height:200px}
.scene .drive svg{display:block;width:100%;height:auto}
.scene .road{position:absolute;left:0;right:0;bottom:0;height:34px;background:#2a2b3a;border-top:4px solid #55576e}
.scene .road::after{content:"";position:absolute;left:0;right:0;top:13px;height:4px;background:repeating-linear-gradient(90deg,var(--gold) 0 24px,transparent 24px 52px);animation:dash 1s linear infinite}
@keyframes dash{to{background-position:-52px 0}}
.scene .drive{position:absolute;bottom:7px;left:-90px;width:56px;z-index:2;animation:drive 9s linear infinite}
@keyframes drive{to{left:calc(100% + 90px)}}
.cloud{position:absolute;top:var(--y);left:-160px;width:120px;height:36px;animation:cloud var(--t) linear infinite;animation-delay:var(--d);opacity:.9}
.cloud::before,.cloud::after{content:"";position:absolute;background:#e6e8ff;box-shadow:0 4px 0 #b9bce8}
.cloud::before{left:20px;top:0;width:60px;height:24px}.cloud::after{left:0;top:12px;width:110px;height:20px}
@keyframes cloud{to{left:calc(100% + 160px)}}
.login-card{width:100%;max-width:420px;padding:26px 24px;z-index:2}
.login-card .logo{display:block;height:64px;margin:0 auto 14px;image-rendering:auto}
.login-card h1{font-size:10px;text-align:center;margin:14px 0 4px;color:var(--muted);letter-spacing:.4em}
.blink{animation:blink 1s steps(1) infinite;text-align:center;font-size:10px;color:var(--white);margin:0 0 20px}
@keyframes blink{50%{opacity:0}}
.err{color:var(--red-l);min-height:20px;font-size:14px;margin:4px 0 8px}
.players{margin-top:22px;padding-top:18px;border-top:4px dashed #ffffff18;text-align:center}
.players .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}

/* ---------- Estrutura ---------- */
#app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
.side{background:var(--night2);border-right:4px solid var(--edge);padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;z-index:900}
.side .logo{height:46px;align-self:flex-start;margin:2px 6px 22px}
.nav a{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:6px;cursor:pointer;color:var(--muted);text-decoration:none;font-family:var(--px);font-size:9px;text-transform:uppercase;border:4px solid transparent}
.nav a:hover{color:var(--white);background:#ffffff0a}
.nav a.on{color:var(--white);background:var(--red);border-color:var(--edge);box-shadow:inset 2px 2px 0 #ffffff30,0 4px 0 var(--edge)}
.nav svg{width:20px;height:20px;flex:none;image-rendering:pixelated}
.me{margin-top:auto;padding:12px}
.me b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me small{display:block;color:var(--dim);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.me .btn{margin-top:10px;width:100%}
main{min-width:0}
.hud{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;background:#0d0f26f0;border-bottom:4px solid var(--edge);position:sticky;top:0;z-index:800;flex-wrap:wrap}
.hud h2{margin:0;font-size:15px;color:var(--white)}
.hud .stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hud .stat{display:flex;align-items:center;gap:8px}
.hud .stat .num{font-size:26px;line-height:1}
.live{display:inline-flex;align-items:center;gap:8px}
.rec{width:10px;height:10px;background:var(--red-l);animation:blink 1s steps(1) infinite}
.icon-btn{background:none;border:0;cursor:pointer;padding:4px;display:inline-flex}
.page{padding:22px 24px 40px}
.banner{margin:14px 24px 0;padding:10px 14px;border:4px solid #6b4b00;background:#3a2a00;color:var(--gold);font-size:14px}

/* ---------- KPIs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpi{padding:14px 14px 12px;display:flex;gap:12px;align-items:flex-start}
.kpi .ic{width:34px;height:34px;flex:none;image-rendering:pixelated}
.kpi .v{font-family:var(--num);font-size:40px;line-height:.95;margin-top:6px}
.kpi .s{font-size:13px;color:var(--dim);margin-top:4px}
.kpi.gold{background:#2b2550}.kpi.gold .v{color:var(--gold)}
.kpi.red .v{color:#ff6b7b}

/* ---------- Painéis ---------- */
.grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;margin-bottom:18px}
.card{padding:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card-h h3{margin:0;font-size:11px;color:var(--gold)}
#map{height:540px;border:4px solid var(--edge);background:#4f9a5c}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:2px solid var(--edge)}
.chart-box{position:relative;height:250px}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.mini>div{background:var(--night2);border:4px solid var(--edge);padding:10px}
.mini .num{display:block;font-size:30px;line-height:1;margin-top:4px}
.feed{display:flex;flex-direction:column;gap:6px;max-height:262px;overflow:auto}
.feed div{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:7px 10px;background:var(--night2);border-left:4px solid var(--dim)}
.feed div.t{border-color:var(--red)}.feed div.p{border-color:var(--gold)}.feed div.o{border-color:var(--green)}
.feed small{color:var(--dim);white-space:nowrap}
.tabs{display:inline-flex;gap:6px}
.tabs button{border:4px solid var(--edge);background:var(--panel2);padding:9px 12px;cursor:pointer;font-family:var(--px);font-size:8px;text-transform:uppercase;color:var(--muted)}
.tabs button.on{background:var(--gold);color:#2a1c00}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:9px 10px;border-bottom:2px dashed #ffffff14;text-align:right;white-space:nowrap}
td{font-family:var(--num);font-size:21px}
td.t{font-family:var(--body);font-size:15px}
th{font-family:var(--px);font-size:8px;color:var(--dim);text-transform:uppercase;font-weight:400}
th:first-child,td:first-child{text-align:left}
tbody tr:hover{background:#ffffff08}
.table-wrap{overflow-x:auto}
.select{background:#0e1030;border:4px solid var(--edge);padding:8px 10px;outline:none;color:var(--white)}
.achv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.achv .box{padding:14px;display:flex;gap:12px;align-items:center}
.achv .ic{width:36px;height:36px;flex:none}
.achv b{display:block;font-family:var(--num);font-size:30px;line-height:1}
.achv small{color:var(--dim);font-size:13px}

/* ---------- Mapa ---------- */
.leaflet-container{font-family:var(--body);background:#4f9a5c}
#map{background:#4f9a5c}#map.detailed .leaflet-overlay-pane canvas{opacity:.25}
.leaflet-tile-pane{filter:saturate(1.3) contrast(1.04)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--white);border:4px solid var(--edge);border-radius:0;box-shadow:0 6px 0 #00000060}
.leaflet-popup-content{margin:12px 14px;font-size:15px;line-height:1.45}
.leaflet-popup-close-button{color:var(--white)!important}
.leaflet-bar{border:4px solid var(--edge)!important;border-radius:0!important}
.leaflet-bar a{background:var(--panel)!important;color:var(--white)!important;border-radius:0!important;font-family:var(--px);border-bottom:2px solid var(--edge)!important}
.leaflet-control-attribution{font-size:10px}
.car{width:16px;height:24px;transform-origin:50% 50%;filter:drop-shadow(1px 2px 0 #0008)}
.car svg{width:16px;height:24px;display:block;image-rendering:pixelated}
.pop{font-family:var(--px);font-size:9px;color:var(--gold);text-shadow:2px 2px 0 #000;white-space:nowrap;animation:pop 1.2s ease-out forwards;pointer-events:none}
@keyframes pop{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:1;transform:translateY(-6px) scale(1.1)}100%{transform:translateY(-34px) scale(1);opacity:0}}
.pin svg{width:22px;height:22px;image-rendering:pixelated;filter:drop-shadow(1px 2px 0 #0009)}

/* ---------- Bônus (descontos) ---------- */
.search{display:flex;gap:10px;margin-bottom:14px}
.search .input{flex:1}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px}
.chip{flex:none;border:4px solid var(--edge);background:var(--panel2);padding:9px 12px;cursor:pointer;font-size:15px;color:var(--muted);box-shadow:0 3px 0 var(--edge)}
.chip.on{background:var(--gold);color:#2a1c00}
.hl-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:14px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:22px}
.hl{padding:18px;cursor:pointer;background:var(--red);min-height:150px}
.hl .off{font-family:var(--num);font-size:56px;line-height:.9;color:var(--gold);text-shadow:3px 3px 0 var(--red-d)}
.hl .n{font-size:17px;margin-top:10px;font-weight:600}
.hl .c{font-size:13px;opacity:.85}
.hl .star{position:absolute;top:10px;right:10px;width:26px;height:26px}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.p-card{padding:12px;cursor:pointer;display:flex;gap:12px;align-items:center}
.p-card:hover{transform:translateY(-2px)}
.plogo{width:54px;height:54px;flex:none;display:grid;place-items:center;font-family:var(--px);font-size:16px;border:4px solid var(--edge);overflow:hidden;background:#333}
.plogo img{width:100%;height:100%;object-fit:cover}
.p-card .n{font-size:16px;font-weight:600}
.p-card .c{font-size:13px;color:var(--dim)}
.tag{display:inline-block;margin-top:6px;background:var(--gold);color:#2a1c00;font-family:var(--px);font-size:8px;padding:4px 6px;border:2px solid var(--edge)}
.empty{color:var(--dim);padding:28px 0;text-align:center}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;background:#05061acc;display:grid;place-items:center;padding:16px;z-index:3000}
.modal-box{width:100%;max-width:460px;padding:22px;max-height:90vh;overflow:auto}
.modal-box h3{margin:0 0 6px;font-size:13px;color:var(--gold)}
.coupon{margin:16px 0;padding:16px;border:4px dashed var(--gold);text-align:center;background:#00000030}
.coupon .code{font-family:var(--num);font-size:46px;line-height:1;color:var(--gold)}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pill{display:inline-block;padding:4px 7px;font-family:var(--px);font-size:7px;border:2px solid var(--edge)}
.pill.master{background:var(--gold);color:#2a1c00}.pill.lojista{background:var(--red)}.pill.motorista{background:var(--cyan);color:#06222c}
.form-row{display:grid;grid-template-columns:1.1fr 1.3fr 1fr 150px auto;gap:10px;align-items:end;margin-bottom:12px}
.form-row .field{margin:0}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:2px dashed #ffffff14}
.switch p{margin:4px 0 0;color:var(--dim);font-size:14px}
.toggle{appearance:none;width:52px;height:28px;background:#0e1030;border:4px solid var(--edge);position:relative;cursor:pointer;flex:none}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--dim)}
.toggle:checked{background:var(--green)}.toggle:checked::after{left:26px;background:#fff}
pre{background:#0b0c22;border:4px solid var(--edge);padding:14px;font-size:13px;overflow:auto;color:#c9ccf5;font-family:ui-monospace,Menlo,monospace}
.note{color:var(--dim);font-size:14px}

/* ---------- Responsivo ---------- */
@media (max-width:1150px){.kpis,.achv{grid-template-columns:repeat(2,minmax(0,1fr))}.grid2{grid-template-columns:1fr}.form-row{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  #app{grid-template-columns:1fr}
  .side{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;flex-direction:row;padding:6px;border-right:0;border-top:4px solid var(--edge);z-index:1500}
  .side .brand,.side .me{display:none}
  .nav{display:flex;width:100%;justify-content:space-around}
  .nav a{flex-direction:column;gap:5px;font-size:7px;padding:7px 4px;margin:0}
  main{padding-bottom:84px}
  .hud{padding:10px 14px}.hud h2{font-size:12px}.hud .stat .num{font-size:22px}
  .page{padding:14px}
  .banner{margin:12px 14px 0}
  #map{height:58vh}
  .kpi{padding:10px;gap:8px}.kpi .v{font-size:28px}.kpi .ic{width:20px;height:20px}.kpi .s{font-size:12px}
  .page[data-page=overview]{display:flex;flex-direction:column}
  .page[data-page=overview] .grid2{order:1}.page[data-page=overview] .kpis{order:2}.page[data-page=overview]>.card{order:3}
  .hud .stat.label{display:none}.hud .stats{gap:10px}
  .form-row{grid-template-columns:1fr}
  .mobile-only{display:inline-flex!important}
}
.mobile-only{display:none!important}

.city-label{font-size:9px;color:#fff;text-align:center;text-shadow:2px 0 0 #0a0b1c,-2px 0 0 #0a0b1c,0 2px 0 #0a0b1c,0 -2px 0 #0a0b1c;white-space:nowrap;pointer-events:none}
.map-switch{display:flex;gap:4px}.map-switch .btn{font-size:7px;padding:7px 8px}.map-switch .btn.on{background:var(--gold);color:#2a1c00}
#map.z-low .car,#map.z-low .car svg{width:9px;height:14px}
#map.z-mid .car,#map.z-mid .car svg{width:12px;height:18px}

/* ---------- Marca (versão pixel do logo) ---------- */
.brand{display:flex;flex-direction:column;align-items:center;gap:12px}
.emblem{display:inline-block}.emblem svg{width:100%;height:100%;display:block}
.wordmark{line-height:1;white-space:nowrap;text-shadow:3px 3px 0 #000}
.wordmark span{color:#fff}.wordmark b{color:#e0283a;font-weight:400}
.brand .bar{display:block;height:4px;background:#e0283a;box-shadow:0 3px 0 #000}
.brand-lg{margin:4px 0 6px}
.brand-lg .emblem{width:84px;height:105px;animation:bob 2.4s steps(2) infinite;filter:drop-shadow(4px 4px 0 #000)}
.brand-lg .wordmark{font-size:22px}
.brand-lg .bar{width:72px}
@keyframes bob{50%{transform:translateY(-4px)}}
.brand-sm{flex-direction:row;gap:9px;align-self:flex-start;margin:4px 6px 24px}
.brand-sm .emblem{width:24px;height:30px}
.brand-sm .wordmark{font-size:11px;text-shadow:2px 2px 0 #000}
@media (max-width:420px){.brand-lg .wordmark{font-size:17px}}