/* Escritório Clean. Layout: HUD no topo; o mapa em pixel art é o palco (esquerda) e o painel fica ao lado; rodapé curto.
   O mundo dentro do mapa tem cores próprias (é um "jogo"); a moldura segue o tema claro/escuro do sistema. */
:root{
  --bg:#E7EBDF; --panel:#F5F7F0; --sunk:#E0E5D6; --ink:#1D271C; --muted:#56624F; --line:#C7CEBB;
  --accent:#2D6A42; --on-accent:#F3F8F0;
  --ok:#2E7D45; --ok-bg:#D7ECD9; --warn:#8F5E00; --warn-bg:#F6E5BC; --warn-solid:#E9A91F;
  --frame:#3B3327;
  --f-display:"Pixelify Sans","Courier New",monospace;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111711; --panel:#182019; --sunk:#202A21; --ink:#E4EADB; --muted:#9BA892; --line:#2E3A2E;
    --accent:#86C595; --on-accent:#0F1A12;
    --ok:#7DCB91; --ok-bg:#1E3524; --warn:#F0BE55; --warn-bg:#3A2E12; --warn-solid:#E9A91F;
    --frame:#0A0D0A; color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:15px; line-height:1.5;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:16px 32px;
}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
button{font:inherit; color:inherit}
.wrap{max-width:1320px; margin:0 auto; display:grid; gap:16px}

/* HUD */
.hud{display:flex; flex-wrap:wrap; align-items:center; gap:12px 28px; padding:12px 16px;
  background:var(--panel); border:1px solid var(--line); border-radius:6px}
.marca h1{font-family:var(--f-display); font-weight:700; font-size:1.7rem; line-height:1; margin:0}
.marca p{margin:5px 0 0; color:var(--muted); font-size:.85rem}
.aovivo{display:inline-flex; align-items:center; gap:6px; font-weight:700}
.aovivo i{width:9px; height:9px; border-radius:50%; background:var(--muted)}
.aovivo[data-on="true"]{color:var(--ok)}
.aovivo[data-on="true"] i{background:var(--ok); animation:pulso 2s ease-in-out infinite}
@keyframes pulso{50%{opacity:.35}}
.hora{font-family:var(--f-display); font-size:2.1rem; line-height:1; font-variant-numeric:tabular-nums}
.placar{display:flex; gap:10px 22px; margin:0; flex-wrap:wrap}
.placar div{display:grid}
.placar dt{font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.placar dd{margin:0; font-family:var(--f-display); font-size:1.4rem; line-height:1.2; font-variant-numeric:tabular-nums}
.conta{margin-left:auto; display:flex; gap:6px 14px; flex-wrap:wrap; align-items:center; font-size:.85rem}
.conta span{color:var(--muted)}
.falha{margin:0; padding:8px 12px; border-radius:4px; background:var(--warn-bg); color:var(--warn); font-weight:700}

/* Jogo */
.jogo{display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start}
@media (max-width:1000px){ .jogo{grid-template-columns:minmax(0,1fr)} }
.mapa-col{min-width:0}
.mapa-wrap{position:relative; width:100%; max-width:100%; aspect-ratio:384/240; background:#2B241B;
  border:4px solid var(--frame); border-radius:4px; overflow:hidden; container-type:inline-size;
  box-shadow:0 0 0 1px var(--line), 0 14px 32px -16px rgba(0,0,0,.5)}
#mapa{position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; cursor:pointer; display:block}
.placa{position:absolute; pointer-events:none; font-family:var(--f-display); font-weight:600; font-size:clamp(8px,1.6cqi,13px);
  line-height:1; color:#2A2318; background:#F2E9D2; border:1px solid #6B5B45; padding:2px 4px; border-radius:2px;
  display:flex; align-items:center; gap:4px; white-space:nowrap; box-shadow:0 1px 0 #6B5B45}
.placa .barra{width:3.4em; height:.55em; background:#D8CCAE; border:1px solid #6B5B45; position:relative; overflow:hidden}
.placa .barra i{position:absolute; inset:0 auto 0 0; background:var(--c); width:var(--p); transition:width .6s}
.nevoa-txt{position:absolute; pointer-events:none; transform:translate(-50%,-50%); font-family:var(--f-display);
  font-size:clamp(7px,1.45cqi,12px); color:#D3DCCD; text-align:center; letter-spacing:.08em; text-transform:uppercase; line-height:1.25}
@container (max-width:560px){ .placa .barra{display:none} .placa{font-size:7px; padding:1px 2px} .nevoa-txt{font-size:6px} }
/* Celular em pé: o mapa fica maior e rola para o lado (de ponta a ponta da tela), como num jogo. */
.mapa-rolagem{max-width:100%}
.dica-mapa{display:none; margin:6px 0 0; font-size:.8rem; color:var(--muted)}
@media (max-width:700px) and (orientation:portrait){
  .mapa-rolagem{overflow-x:auto; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
    padding-inline:max(16px, env(safe-area-inset-left, 0px))}
  .mapa-wrap{width:700px; max-width:none}
  .dica-mapa{display:block}
}
/* Celular deitado: o mapa inteiro cabe na altura da tela. */
@media (orientation:landscape) and (max-height:520px){
  .mapa-wrap{max-width:calc((100svh - 24px) * 1.6); margin-inline:auto}
  .jogo{grid-template-columns:minmax(0,1fr)}
  .hud{padding:8px 12px; gap:6px 18px}
  .marca h1{font-size:1.15rem}
  .marca p{margin-top:2px; font-size:.75rem}
  .hora{font-size:1.4rem}
  .placar{gap:4px 16px}
  .placar dt{font-size:.6rem}
  .placar dd{font-size:1rem}
}
.legenda-caixa{margin-top:10px}
.legenda-caixa summary{cursor:pointer; font-size:.82rem; color:var(--muted); font-weight:700}
.legenda{display:flex; flex-wrap:wrap; gap:6px 18px; margin:10px 0 0; padding:0; list-style:none; font-size:.82rem; color:var(--muted)}
.legenda li{display:flex; align-items:center; gap:6px}
.sw{width:14px; height:14px; flex:none; border:1px solid var(--frame); border-radius:2px}
.sw.agente{background:linear-gradient(#E9EEF0 0 45%, #4FB06A 45% 100%)}
.sw.cadeado{background:linear-gradient(#E9EEF0 0 45%, #9AA39A 45% 100%); opacity:.6}
.sw.papel{background:repeating-linear-gradient(#F6F3EA 0 2px, #CFC7B4 2px 3px)}
.sw.entregue{background:#5BC27A}
.sw.nevoa{background:repeating-conic-gradient(#232A25 0 25%, #3A443D 0 50%) 0 0/4px 4px}

/* Painel */
.painel{display:grid; gap:12px; min-width:0}
.cartao{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px; min-width:0}
.agora h2{font-family:var(--f-display); font-size:1.08rem; margin:0 0 10px; display:flex; align-items:center; gap:8px}
.agora .n{background:var(--accent); color:var(--on-accent); border-radius:3px; padding:0 7px; font-size:.95rem}
.agora .n.zero{background:var(--sunk); color:var(--muted)}
.lista{display:grid; gap:8px}
.missao{border:1px solid var(--line); background:var(--sunk); border-radius:4px; padding:10px 12px; display:grid; gap:4px}
.missao-top{display:flex; align-items:center; gap:8px; font-size:.85rem}
.missao-top .onde{margin-left:auto; color:var(--muted)}
.missao-t{margin:0; font-weight:700}
.missao-d{margin:0; font-size:.88rem}
.dot{width:10px; height:10px; border-radius:2px; background:var(--c); flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.vazio{margin:0; color:var(--muted); font-size:.9rem}
.nota{font-size:.78rem; color:var(--muted); margin:12px 0 0}

.abas{display:flex; gap:2px; border-bottom:1px solid var(--line); margin:-4px 0 12px; overflow-x:auto}
.aba{font-family:var(--f-display); font-weight:600; font-size:.95rem; background:none; border:0; border-bottom:3px solid transparent;
  padding:6px 10px; color:var(--muted); cursor:pointer; white-space:nowrap}
.aba[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.corpo{min-height:320px}
.corpo h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin:16px 0 8px; font-weight:700}
.corpo h4:first-child{margin-top:0}

.pill{font-size:.72rem; font-weight:700; padding:1px 7px; border-radius:3px; background:var(--sunk); color:var(--muted); white-space:nowrap}
.pill.lendo,.pill.trabalhando,.pill.sonda{background:var(--ok-bg); color:var(--ok)}
.pill.espera{background:var(--warn-bg); color:var(--warn)}

/* Ganho */
.ganho-resumo{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:6px}
.ganho-resumo div{background:var(--sunk); border-radius:4px; padding:8px 10px; display:grid; gap:2px; min-width:0}
.ganho-resumo span{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.ganho-resumo b{font-family:var(--f-display); font-size:1.15rem; font-variant-numeric:tabular-nums}
.ganho-resumo b.ok{color:var(--ok)}
.ganho{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.ganho li{display:grid; gap:4px}
.g-top{display:flex; align-items:center; gap:8px}
.g-red{margin-left:auto; font-family:var(--f-display); color:var(--ok); font-variant-numeric:tabular-nums}
.g-meta,.g-uso{font-size:.8rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.g-barras{display:grid; grid-template-columns:3.6em minmax(0,1fr) 3.4em; gap:3px 8px; align-items:center; font-size:.78rem}
.g-rot{color:var(--muted)}
.g-h{text-align:right; font-variant-numeric:tabular-nums}
.g-bar{height:8px; background:var(--sunk); border-radius:1px; overflow:hidden}
.g-bar i{display:block; height:100%; width:var(--p)}
.g-bar.antes i{background:var(--warn-solid)}
.g-bar.depois i{background:var(--ok)}

/* Setor */
.chips{display:flex; flex-wrap:wrap; gap:4px; margin-bottom:14px}
.chip{font-size:.78rem; padding:3px 8px; border:1px solid var(--line); border-radius:3px; background:var(--sunk); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.setor h3{font-family:var(--f-display); font-size:1.3rem; margin:0; line-height:1.1}
.setor p{margin:4px 0 10px; font-size:.9rem}
.cob{font-size:.84rem; color:var(--muted)}
.medidos{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:9px}
.medidos li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; font-size:.88rem}
.medidos .h{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
.medidos .bar{grid-column:1/-1; height:6px; background:var(--sunk); border-radius:1px; overflow:hidden}
.medidos .bar i{display:block; height:100%; width:var(--p); background:var(--warn-solid)}

/* Agentes */
.ags{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.ag{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:1px 10px; align-items:center; padding:8px;
  border-radius:4px; cursor:pointer; border:1px solid transparent; background:none; text-align:left; width:100%}
.ag:hover{background:var(--sunk)}
.ag[aria-pressed="true"]{border-color:var(--accent); background:var(--sunk)}
.ag-nome{font-weight:700}
.ag-txt,.ag-base{grid-column:2/-1; font-size:.84rem; color:var(--muted)}
.ag-base{font-size:.76rem}

/* Diário */
.diario{list-style:none; margin:0; padding:0; display:grid; gap:7px; font-size:.86rem; max-height:440px; overflow:auto}
.diario li{display:grid; grid-template-columns:3.3em minmax(0,1fr); gap:8px}
.diario time{font-family:var(--f-display); color:var(--muted); font-variant-numeric:tabular-nums}
.diario li.ok time{color:var(--ok)}
.diario li.aviso time{color:var(--warn)}

.rodape{color:var(--muted); font-size:.8rem; display:grid; gap:4px}
.rodape p{margin:0; max-width:110ch}

/* Saúde do servidor */
.alerta-servidor{display:grid; gap:2px; width:100%; text-align:left; margin:0 0 12px; padding:10px 12px; border-radius:4px;
  border:1px solid var(--warn-solid); background:var(--warn-bg); color:var(--warn); cursor:pointer; font-size:.86rem}
.alerta-servidor b{font-size:.92rem}
.saude{list-style:none; margin:0 0 8px; padding:0; display:grid; gap:6px; font-size:.86rem}
.saude li{display:grid; grid-template-columns:4.6em minmax(0,1fr); gap:8px; align-items:baseline}
.saude li b{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; text-align:center; padding:1px 0; border-radius:3px}
.saude li.ok b{background:var(--ok-bg); color:var(--ok)}
.saude li.aviso b{background:var(--warn-bg); color:var(--warn)}
.falhas{margin:0 0 8px; padding-left:18px; font-size:.8rem; color:var(--muted); display:grid; gap:3px}
.falhas code{font-size:.78rem; color:var(--ink)}
.placa .ponto-alerta{background:#C2412D; color:#FFF; border-radius:3px; padding:0 3px; font-size:.85em; line-height:1.2}

/* Privacidade */
.texto-legal{max-width:68ch; margin:0 auto; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px}
.texto-legal h1{font-family:var(--f-display); font-size:1.6rem; margin:0 0 12px}
.texto-legal h2{font-size:1.05rem; margin:20px 0 6px}
.texto-legal p{margin:0 0 10px}
.texto-legal .miudo{font-size:.8rem; color:var(--muted)}

/* Login */
.tela-login{min-height:100vh; display:grid; place-items:center}
.login{max-width:420px; width:100%; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:28px 24px;
  display:grid; gap:12px; justify-items:center; text-align:center}
.login img{image-rendering:pixelated}
.login h1{font-family:var(--f-display); font-size:1.9rem; margin:0}
.login p{margin:0}
.login .miudo{font-size:.8rem; color:var(--muted)}
.login .aviso{background:var(--warn-bg); color:var(--warn); padding:8px 12px; border-radius:4px; font-weight:700}
.btn-google{display:inline-block; background:var(--accent); color:var(--on-accent); text-decoration:none; font-weight:700;
  padding:10px 18px; border-radius:4px}
@media (max-width:520px){ .hora{font-size:1.7rem} .placar dd{font-size:1.15rem} .marca h1{font-size:1.4rem} .conta{margin-left:0} }