:root { --c0:#2e9e5b; --c1:#e0b400; --c2:#e8730c; --c3:#c62828; --fundo:#f3f6f9; --texto:#1c2833; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--fundo); color:var(--texto); }
header, main, footer { max-width: 900px; margin: 0 auto; padding: 12px 16px; }
header h1 { margin: 0 0 4px; font-size: 1.6rem; }
header p { margin: 0; color:#555; }
#mapa { height: 360px; border-radius: 10px; margin: 8px 0; }
.atalhos { display:flex; flex-wrap:wrap; gap:6px; }
.atalhos button, form button, .relato button { padding:6px 10px; border:1px solid #bbb; border-radius:6px; background:#fff; cursor:pointer; }
.atalhos button.ativo { background:#1c2833; color:#fff; }
form { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
form label { display:flex; flex-direction:column; font-size:.9rem; }
form input { padding:6px; font-size:1rem; }
#btn { background:#1565c0; color:#fff; border:none; font-size:1rem; padding:8px 18px; }
#btn:disabled { opacity:.6; }
.coord { font-size:.85rem; color:#666; margin:4px 0; }
.cartao { border-radius:12px; padding:20px; color:#fff; margin-top:12px; }
.cartao.n0{background:var(--c0)} .cartao.n1{background:var(--c1);color:#222} .cartao.n2{background:var(--c2)} .cartao.n3{background:var(--c3)}
.rotulo { font-size:2rem; font-weight:700; }
.detalhe { opacity:.9; margin-top:4px; }
.motivos { margin:8px 0 0; padding-left:20px; }
.resumos { display:flex; gap:12px; margin-top:10px; flex-wrap:wrap; }
.resumos div { flex:1; min-width:180px; padding:10px; border-radius:8px; background:#fff; border-left:6px solid #999; }
.resumos .n0{border-color:var(--c0)} .resumos .n1{border-color:var(--c1)} .resumos .n2{border-color:var(--c2)} .resumos .n3{border-color:var(--c3)}
h2 { font-size:1.1rem; margin:16px 0 6px; }
.faixa { display:grid; grid-template-columns: repeat(24, 1fr); gap:2px; }
.faixa div { height:44px; border-radius:4px; font-size:.65rem; display:flex; align-items:end; justify-content:center; color:#fff; padding-bottom:2px; }
.faixa .n0{background:var(--c0)} .faixa .n1{background:var(--c1);color:#222} .faixa .n2{background:var(--c2)} .faixa .n3{background:var(--c3)}
.faixa .sel { outline:3px solid #1c2833; }
.relato { margin-top:16px; font-size:.9rem; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.erro { background:#ffe5e5; color:#900; padding:10px; border-radius:8px; }
footer { font-size:.8rem; color:#666; }
@media (max-width:600px){ #mapa{height:280px} .faixa div{font-size:.5rem} .rotulo{font-size:1.5rem} }