:root { color-scheme: light dark; --fg:#1a2b3c; --fg2:#5b6b7b; --bg:#f4f7fa; --card:#fff; --linha:#dfe6ee; --acc:#0b7a75; --acc2:#0f9a93; --erro:#c62828; --ok:#2e7d32; --aviso:#ef6c00; }
@media (prefers-color-scheme: dark) { :root { --fg:#e6edf3; --fg2:#9fb0c0; --bg:#0f1720; --card:#172230; --linha:#25344a; --acc:#3fc1b9; --acc2:#5fd3cb; } }
* { box-sizing:border-box } body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif }
a { color:var(--acc) } button, .btn { font:inherit; padding:.45rem .9rem; border-radius:6px; border:1px solid var(--acc); background:var(--acc); color:#fff; cursor:pointer; text-decoration:none; display:inline-block }
button.sec, .btn.sec { background:transparent; color:var(--acc) } button.perigo { background:var(--erro); border-color:var(--erro) } button:disabled { opacity:.5; cursor:default }
button.mini { padding:.2rem .5rem; font-size:.85em }
input, select, textarea { font:inherit; padding:.45rem .6rem; border:1px solid var(--linha); border-radius:6px; background:var(--card); color:var(--fg); width:100% }
label { display:block; font-size:.85em; color:var(--fg2); margin:.6rem 0 .2rem } textarea { min-height:5rem }
header { display:flex; align-items:center; gap:1.5rem; padding:.6rem 16px; background:var(--card); border-bottom:1px solid var(--linha); flex-wrap:wrap }
.marca { font-weight:700; font-size:1.2em; text-decoration:none; color:var(--fg) } .marca span { color:var(--acc) }
nav a { margin-right:1rem; text-decoration:none; color:var(--fg2) } nav a.ativo { color:var(--acc); font-weight:600 } .usuario { margin-left:auto; color:var(--fg2); font-size:.9em }
main { max-width:1200px; margin:0 auto; padding:16px } .carregando { color:var(--fg2) }
.card { background:var(--card); border:1px solid var(--linha); border-radius:10px; padding:1rem 1.2rem; margin-bottom:1rem }
.login { max-width:400px; margin:8vh auto } .login h1 { margin:.2rem 0 1rem } .login .oidc { margin-top:1rem; display:flex; gap:.5rem; flex-wrap:wrap }
h1 { font-size:1.5em; margin:.2rem 0 .8rem } h2 { font-size:1.15em; margin:1rem 0 .5rem } h3 { font-size:1em; margin:.8rem 0 .3rem; color:var(--fg2) }
table { width:100%; border-collapse:collapse; font-size:.93em } th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--linha); vertical-align:top } th { color:var(--fg2); font-weight:600; font-size:.85em }
tr.link { cursor:pointer } tr.link:hover { background:color-mix(in srgb, var(--acc) 8%, transparent) }
.linha { display:flex; gap:.8rem; flex-wrap:wrap; align-items:end } .linha > * { flex:1 1 160px } .linha > .curto { flex:0 0 auto }
.grade { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1rem }
.chip { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.8em; background:color-mix(in srgb, var(--acc) 15%, transparent); color:var(--acc); margin-right:.3rem }
.chip.cinza { background:color-mix(in srgb, var(--fg2) 15%, transparent); color:var(--fg2) } .chip.vermelho { background:color-mix(in srgb, var(--erro) 15%, transparent); color:var(--erro) }
.chip.verde { background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok) } .chip.laranja { background:color-mix(in srgb, var(--aviso) 15%, transparent); color:var(--aviso) }
.abas { display:flex; gap:.2rem; border-bottom:1px solid var(--linha); margin-bottom:1rem; flex-wrap:wrap } .abas a { padding:.5rem .8rem; text-decoration:none; color:var(--fg2); border-bottom:2px solid transparent }
.abas a.ativo { color:var(--acc); border-color:var(--acc) } .muted { color:var(--fg2); font-size:.9em } .erro { color:var(--erro) } .ok { color:var(--ok) }
#aviso { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); background:var(--fg); color:var(--bg); padding:.6rem 1rem; border-radius:8px; max-width:90vw; z-index:9 }
.kpi { display:flex; gap:1rem; flex-wrap:wrap } .kpi .card { flex:1 1 180px; margin:0 } .kpi b { font-size:1.6em; display:block }
pre { white-space:pre-wrap; font-size:.85em; background:color-mix(in srgb, var(--fg2) 10%, transparent); padding:.6rem; border-radius:6px; max-height:300px; overflow:auto }
details summary { cursor:pointer; color:var(--fg2) } .acoes-linha { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem } .selo { font-size:.75em; border:1px solid var(--linha); padding:0 .3rem; border-radius:4px; color:var(--fg2) }
.copiar { display:flex; gap:.4rem } .copiar input { flex:1 } @media (max-width:640px) { header { gap:.6rem } .usuario { margin-left:0; width:100% } }

/* visualizador de mapas */
.viewer { display:grid; grid-template-columns:300px 1fr 300px; grid-template-rows:1fr auto; height:calc(100vh - 70px); gap:0; border:1px solid var(--linha); border-radius:10px; overflow:hidden; background:var(--card) }
.painel-esq, .painel-dir { overflow:auto; font-size:.9em; border-right:1px solid var(--linha) } .painel-dir { border-right:0; border-left:1px solid var(--linha); padding:.6rem .8rem }
.painel-cab { padding:.6rem .8rem; border-bottom:1px solid var(--linha) } .painel-acoes { display:flex; flex-wrap:wrap; gap:.3rem; padding:.4rem .8rem; border-bottom:1px solid var(--linha) }
.lista-camadas .cam { padding:.4rem .8rem; border-bottom:1px solid var(--linha) } .cam-acoes { display:flex; gap:.2rem; align-items:center; margin-top:.2rem; flex-wrap:wrap }
.mapa-area { position:relative; display:flex; flex-direction:column; min-width:0 } #mapa { flex:1; min-height:300px } .barra { display:flex; gap:.3rem; padding:.3rem; border-bottom:1px solid var(--linha); align-items:center } .barra input { flex:1 }
.rodape { display:flex; gap:1rem; padding:.2rem .6rem; font-size:.78em; color:var(--fg2); border-top:1px solid var(--linha); flex-wrap:wrap }
#resBusca, #medida { position:absolute; top:44px; left:8px; z-index:5; max-width:420px; max-height:60%; overflow:auto; margin:0 }
.tabela-area { grid-column:1 / -1; max-height:280px; display:flex; flex-direction:column; border-top:1px solid var(--linha) } .tab-cab { display:flex; gap:.4rem; align-items:center; padding:.3rem .6rem; flex-wrap:wrap } .tab-corpo { overflow:auto; font-size:.85em } tr.sel td { background:color-mix(in srgb, #ffea00 35%, transparent) }
.dlg { position:fixed; inset:auto 16px 16px 16px; max-width:640px; margin:auto; z-index:8; box-shadow:0 8px 30px #0006; max-height:85vh; overflow:auto }
.maplibregl-ctrl-attrib { font-size:10px }
@media (max-width:1000px) { .viewer { grid-template-columns:1fr; height:auto } .painel-esq, .painel-dir { max-height:220px } #mapa { height:55vh } }
@media (max-width:768px) { .barra [data-medir], .painel-acoes #salvarPub, .painel-acoes #add { display:none } }
.sep{display:inline-block;width:1px;height:20px;background:var(--linha);margin:0 .2rem}
.mapboxgl-ctrl-group{display:none}

/* Fase 6: modo apresentação (funciona no celular) */
.apres { max-width: 1400px; margin: 0 auto } .apres-cab { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:.6rem 0 } .apres-cab h1 { margin:0 0 .2rem }
.apres-mapa { display:grid; grid-template-columns: 1fr 320px; gap:.6rem; height: calc(100vh - 160px); min-height: 420px } .apres-mapa #mapa { border:1px solid var(--linha); border-radius:10px; min-height:300px }
.apres-lado { overflow:auto; font-size:.9em; padding:.4rem .6rem; border:1px solid var(--linha); border-radius:10px; background:var(--card) } .apres-lado .barra { padding:0 0 .4rem }
@media (max-width: 800px) { .apres-mapa { grid-template-columns: 1fr; height:auto } .apres-mapa #mapa { height: 60vh } .apres-cab { flex-direction:column } }
.cam-item summary { cursor:pointer } .cam-item summary label { display:inline }

/* seletor de cor visível e paleta rápida */
input[type=color] { height:2.4rem; padding:.15rem; cursor:pointer; min-width:3rem }
.paleta { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin:.4rem 0 } .paleta .sw { width:1.4rem; height:1.4rem; padding:0; border:1px solid #0004; border-radius:4px; cursor:pointer } .paleta .sw:hover { outline:2px solid var(--acc) }

/* grupos de camadas */
.grupo { border-bottom:1px solid var(--linha) } .grupo-cab { display:flex; align-items:center; gap:.3rem; padding:.35rem .6rem; background:color-mix(in srgb, var(--acc) 7%, transparent); flex-wrap:wrap }
.grupo-cab label { flex:1; margin:0; cursor:pointer } .grupo-acoes { display:flex; gap:.2rem } .grupo-corpo .cam { padding-left:1.4rem }

.arrasto { cursor:grab; color:var(--fg2); padding:0 .35rem 0 0; user-select:none; font-size:1.1em } .arrasto:active { cursor:grabbing }
.cam.arrastando { opacity:.4 } .alvo-drop { outline:2px dashed var(--acc); outline-offset:-2px; background:color-mix(in srgb, var(--acc) 10%, transparent) }
.cam { display:block } .cam > label { display:inline }
.menu-grupo { position:absolute; z-index:20; display:flex; flex-direction:column; gap:.25rem; padding:.5rem; min-width:200px; max-height:320px; overflow:auto; box-shadow:0 6px 24px #0004; margin:0 }
.menu-grupo button { text-align:left }

/* visualizador e apresentação em tela cheia (só nessas páginas; as demais seguem com 1200 px) */
main:has(.viewer), main:has(.apres) { max-width:none; padding:0 }
main:has(.viewer) .viewer { height:calc(100dvh - var(--alt-topo, 52px)); border:0; border-radius:0; grid-template-columns:minmax(260px, 300px) 1fr minmax(240px, 280px) }
main:has(.apres) .apres { max-width:none; padding:0 12px } main:has(.apres) .apres-mapa { height:calc(100dvh - var(--alt-topo, 52px) - 110px) }
.barra { flex-wrap:wrap } .barra input#busca { min-width:180px }
@media (max-width:1000px) { main:has(.viewer) .viewer { grid-template-columns:1fr; height:auto } }
.pasta-cab td { background:color-mix(in srgb, var(--acc) 8%, transparent); padding:.35rem .5rem } td.nw { white-space:nowrap }
/* painéis redimensionáveis no visualizador */
main:has(.viewer) .viewer { position:relative; grid-template-columns:var(--larg-esq, 300px) 1fr var(--larg-dir, 280px) }
.divisor { position:absolute; top:0; bottom:0; width:6px; cursor:col-resize; z-index:6; background:transparent } .divisor:hover, body.redimensionando .divisor { background:color-mix(in srgb, var(--acc) 35%, transparent) }
body.redimensionando { cursor:col-resize; user-select:none } body.redimensionando #mapa { pointer-events:none }
@media (max-width:1000px) { .divisor { display:none } main:has(.viewer) .viewer { grid-template-columns:1fr } }

.paleta-office { position:fixed; z-index:30; width:250px; padding:.5rem; margin:0; box-shadow:0 6px 24px #0005 }
.po-tit { font-size:.78em; font-weight:600; color:var(--fg2); margin:.35rem 0 .2rem } .po-grade { display:grid; grid-template-columns:repeat(10, 1fr); gap:3px } .po-tons { gap:0 3px; margin-top:4px }
.po-grade .sw { width:100%; aspect-ratio:1; height:auto; padding:0; border:1px solid #0002; border-radius:2px; cursor:pointer } .po-grade .sw:hover { outline:2px solid #e65100; position:relative; z-index:1 }
.cor-bloco { align-items:end } .cor-bloco input[type=range] { padding:0 }

.simbolos { display:inline-flex; gap:2px; vertical-align:middle; margin-right:.35rem } .simb { display:inline-block; width:18px; height:12px; box-sizing:border-box; border-radius:2px }

.cam.cam-cor { margin:5px 6px; border-radius:7px; padding:.35rem .5rem } .cam.cam-cor b { text-shadow:0 0 3px var(--card), 0 0 2px var(--card) }

/* cabeçalho de grupo de camadas: fundo escuro, texto branco */
.grupo-cab { background:#123b3a; color:#fff; border-radius:6px; margin:4px 6px 0 } .grupo-cab b, .grupo-cab label { color:#fff } .grupo-cab .muted { color:#cfe3e1 }
.grupo-cab button.mini { background:transparent; color:#fff; border-color:#ffffff80 } .grupo-cab button.mini:hover { background:#ffffff26 }
.grupo-cab input[type=checkbox] { accent-color:#4fd1c5 }