/* SiSdesign — visual do GPlanSiS|Flows: IBM Plex, papel com grade, painéis laterais, acento âmbar. */
:root{
  --bg:#e9ebed; --panel:#f7f8f9; --panel2:#e1e4e7; --line:#c9ced3; --text:#1d2226; --muted:#5f676d;
  --accent:#b86e00; --accent-ink:#ffffff; --accent-soft:rgba(184,110,0,.14);
  --paper:#fdfdfc; --gridc:rgba(40,50,60,.07); --gridm:rgba(40,50,60,.13);
  --card:#ffffff; --cardline:#c9ced3; --cardtext:#1d2226; --cardmuted:#5f676d;
  --sel:#1f6fd1; --selsoft:rgba(31,111,209,.12);
  --danger:#b3261e; --warn:#9a6a00; --ok:#2e7d32; --info:#1f6fd1;
  --grupo:rgba(40,50,60,.035); --grupoline:rgba(40,50,60,.22);
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15181b; --panel:#1f2428; --panel2:#2a3035; --line:#384047; --text:#e3e6e8; --muted:#8e979d;
    --accent:#f6a709; --accent-ink:#1a1400; --accent-soft:rgba(246,167,9,.16);
    --paper:#181c1f; --gridc:rgba(220,230,240,.05); --gridm:rgba(220,230,240,.09);
    --card:#22282d; --cardline:#3b444b; --cardtext:#e3e6e8; --cardmuted:#98a1a7;
    --sel:#5a9bff; --selsoft:rgba(90,155,255,.16);
    --danger:#ff7b6e; --warn:#f6c445; --ok:#6fcf74; --info:#6aaeff;
    --grupo:rgba(220,230,240,.03); --grupoline:rgba(220,230,240,.18);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#15181b; --panel:#1f2428; --panel2:#2a3035; --line:#384047; --text:#e3e6e8; --muted:#8e979d;
  --accent:#f6a709; --accent-ink:#1a1400; --accent-soft:rgba(246,167,9,.16);
  --paper:#181c1f; --gridc:rgba(220,230,240,.05); --gridm:rgba(220,230,240,.09);
  --card:#22282d; --cardline:#3b444b; --cardtext:#e3e6e8; --cardmuted:#98a1a7;
  --sel:#5a9bff; --selsoft:rgba(90,155,255,.16);
  --danger:#ff7b6e; --warn:#f6c445; --ok:#6fcf74; --info:#6aaeff;
  --grupo:rgba(220,230,240,.03); --grupoline:rgba(220,230,240,.18);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
body{color:var(--text);font:13px/1.4 var(--font);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
[hidden]{display:none!important}
.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
input,select{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:5px 8px;min-width:0}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:12px}

/* ---------- entrar ---------- */
#entrar{position:fixed;inset:0;display:grid;place-items:center;padding:16px;background:var(--bg)}
.cartao-entrar{width:min(420px,100%);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px 24px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.cartao-entrar h1{margin:4px 0 0;font-size:22px;font-weight:600}
.cartao-entrar .sub{margin:0;color:var(--muted)}
.cartao-entrar p{margin:0}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 12px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;color:inherit}
.btn:hover{background:var(--panel2)}
.btn.pri{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:500}
.btn.grande{width:100%;min-height:42px;font-size:14px}
.msg{min-height:1.4em;color:var(--danger)}

/* ---------- app ---------- */
#app{display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:100%;height:100dvh;width:100%;overflow:hidden}
#top{min-width:0;display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line);min-height:46px;padding-top:max(6px,env(safe-area-inset-top))}
#marca{display:flex;align-items:center;gap:7px;font-size:15px;white-space:nowrap}
#marca b{font-weight:600;letter-spacing:-.01em}
#marca span{color:var(--accent);font-weight:500}
#caixa-busca{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:0 8px;flex:1 1 220px;max-width:360px;min-width:0}
#caixa-busca input{border:0;background:none;padding:6px 0;width:100%;outline:none}
#caixa-busca .ic{color:var(--muted)}
#frentes,#visoes{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:0 0 auto}
.frente,.visao{border:0;background:var(--panel);padding:5px 10px;display:inline-flex;align-items:center;gap:5px;color:var(--muted);white-space:nowrap;min-height:30px}
.frente+.frente,.visao+.visao{border-left:1px solid var(--line)}
.frente[aria-pressed="true"]{background:var(--accent-soft);color:var(--text);font-weight:500}
.frente[aria-pressed="true"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fc,var(--accent))}
.frente[data-f="sistemas"]{--fc:#2563eb}.frente[data-f="software"]{--fc:#7c3aed}.frente[data-f="solucoes"]{--fc:#16a34a}
.visao[aria-selected="true"]{background:var(--panel2);color:var(--text);font-weight:500}
#acoes{margin-left:auto;display:flex;gap:4px}
.tb{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:5px 8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-height:30px}
.tb:hover{background:var(--panel2)}
.tb.on{background:var(--accent-soft);border-color:var(--accent)}
body:not(.v-mapa) .so-mapa{display:none!important}
@media (max-width:1180px){ .tb .lbl,.visao .lbl{display:none} }

#main{display:grid;grid-template-columns:250px minmax(0,1fr) 340px;min-height:0;min-width:0;position:relative}
#main.sem-filtros{grid-template-columns:0 minmax(0,1fr) 340px}
#main.sem-painel{grid-template-columns:250px minmax(0,1fr) 0}
#main.sem-filtros.sem-painel{grid-template-columns:0 minmax(0,1fr) 0}
#filtros,#painel{background:var(--panel);min-height:0;overflow:hidden;display:flex;flex-direction:column}
#filtros{border-right:1px solid var(--line)}
#painel{border-left:1px solid var(--line)}
#painel[hidden]{display:flex!important}
#main.sem-painel #painel{visibility:hidden}
#main.sem-filtros #filtros{visibility:hidden}
.ph{display:flex;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid var(--line);font-weight:600;min-height:38px}
.ph .x{margin-left:auto;border:0;background:none;padding:4px;color:var(--muted);display:inline-flex}
.pb{overflow:auto;flex:1;padding:6px 10px 24px;overscroll-behavior:contain}
#centro{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column}
.vista{position:relative;flex:1;min-height:0}

/* ---------- filtros ---------- */
.sec{border-bottom:1px solid var(--line);padding:9px 0 10px}
.sec:last-child{border-bottom:0}
.sec h4{margin:0 0 6px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);display:flex;align-items:center;gap:6px}
.sec h4 button{margin-left:auto;border:0;background:none;color:var(--accent);font-size:11.5px;text-transform:none;letter-spacing:0;padding:0}
.ck{display:flex;align-items:center;gap:7px;padding:3px 2px;border-radius:5px;cursor:pointer;user-select:none}
.ck:hover{background:var(--panel2)}
.ck input{accent-color:var(--accent);margin:0}
.ck .n{margin-left:auto;color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums}
.ck i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.ck i.fio{height:3px;border-radius:2px;width:16px}
.lista-ck{max-height:210px;overflow:auto}
.resumo-vps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.resumo-vps div{background:var(--bg);border:1px solid var(--line);border-radius:7px;padding:6px 7px}
.resumo-vps b{display:block;font-size:17px;font-weight:600}
.resumo-vps span{font-size:11px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:2px 8px;border-radius:11px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;background:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
button.chip:hover{background:var(--panel2)}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--text)}
.chip.ok{color:var(--ok);border-color:currentColor}.chip.warn{color:var(--warn);border-color:currentColor}
.chip.err{color:var(--danger);border-color:currentColor}.chip.info{color:var(--info);border-color:currentColor}

/* ---------- canvas ---------- */
#v-mapa{overflow:hidden;background-color:var(--paper);
  background-image:linear-gradient(var(--gridm) 1px,transparent 1px),linear-gradient(90deg,var(--gridm) 1px,transparent 1px),
                   linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:100px 100px,100px 100px,20px 20px,20px 20px}
#svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;touch-action:none;display:block;user-select:none;-webkit-user-select:none;cursor:grab}
#svg.arrastando{cursor:grabbing}
#hud{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;gap:4px;z-index:3}
#hud button{width:32px;height:32px;border:1px solid var(--line);background:var(--panel);border-radius:7px;display:grid;place-items:center}
#hud button:hover{background:var(--panel2)}
#mini{position:absolute;right:10px;bottom:10px;width:200px;height:140px;background:var(--panel);border:1px solid var(--line);border-radius:7px;z-index:3;overflow:hidden;opacity:.96}
#mini-svg{width:100%;height:100%;display:block;touch-action:none;cursor:pointer;max-width:none}
#legenda{position:absolute;left:52px;bottom:10px;z-index:3;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 9px;font-size:11.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 12px;max-width:calc(100% - 290px)}
#legenda span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
#legenda i{display:inline-block;width:16px;height:3px;border-radius:2px}
#dica{position:absolute;left:10px;top:10px;z-index:3;background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 10px;font-size:12px;color:var(--muted);max-width:min(560px,80%)}
#dica:empty{display:none}

/* ---------- painel de detalhes ---------- */
.det-cab{display:flex;gap:10px;align-items:center;padding:10px 0 8px}
.det-cab img,.det-cab .glifo{width:44px;height:44px;border-radius:10px;flex:0 0 auto}
.glifo{display:grid;place-items:center;color:#fff;font-weight:600;font-size:15px}
.det-cab h3{margin:0;font-size:16px;font-weight:600;line-height:1.2}
.det-cab .id{font:11.5px var(--mono);color:var(--muted);word-break:break-all}
.det-sec{border-top:1px solid var(--line);padding:9px 0}
.det-sec h4{margin:0 0 6px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.det-sec h4 i{width:8px;height:8px;border-radius:50%}
.det-sec p{margin:0 0 6px}
.kv{display:grid;grid-template-columns:96px 1fr;gap:3px 8px;font-size:12.5px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.barra-ling{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--panel2);margin:4px 0 6px}
.barra-ling b{display:block;height:100%}
.ling-lista{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;font-size:12px;align-items:center}
.ling-lista i{width:9px;height:9px;border-radius:2px}
table.t{border-collapse:collapse;width:100%;font-size:12px}
table.t th{text-align:left;font-weight:500;color:var(--muted);border-bottom:1px solid var(--line);padding:3px 4px}
table.t td{border-bottom:1px solid var(--line);padding:3px 4px;vertical-align:top;overflow-wrap:anywhere}
ul.itens{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px;font-size:12.5px}
ul.itens li{display:flex;gap:6px;align-items:flex-start}
ul.itens li::before{content:"✓";color:var(--ok);font-weight:600;flex:0 0 auto}
ul.itens li.r::before{content:"!";color:var(--warn)}
ul.itens li.r.alto::before{color:var(--danger)}
ul.itens li.vazio::before{content:"–";color:var(--muted)}
.ev{font:11px var(--mono);color:var(--muted);overflow-wrap:anywhere}
a.lk{color:var(--sel);text-decoration:none}
a.lk:hover{text-decoration:underline}
.liga{display:flex;gap:6px;align-items:baseline;font-size:12.5px;padding:2px 0}
.liga i{width:14px;height:3px;border-radius:2px;flex:0 0 auto;transform:translateY(-3px)}
.liga button{border:0;background:none;color:var(--sel);padding:0;text-align:left}

/* ---------- atributos ---------- */
#v-atrib{overflow:auto;padding:14px;background:var(--bg)}
.atr-maq{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:10px;margin-bottom:12px}
.maq{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.maq h3{margin:0 0 6px;font-size:14px;font-weight:600}
.medidor{height:7px;border-radius:4px;background:var(--panel2);overflow:hidden;margin:2px 0 6px}
.medidor b{display:block;height:100%;background:var(--ok)}
.medidor b.warn{background:var(--warn)}.medidor b.err{background:var(--danger)}
.atr-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:10px}
.atr{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.atr h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.atr h3 .n{margin-left:auto;font-size:11.5px;font-weight:400}
.atr h5{margin:2px 0 0;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.risco{border-left:3px solid var(--warn);padding:3px 0 3px 8px;font-size:12.5px}
.risco.alto{border-color:var(--danger)}.risco.baixo{border-color:var(--line)}
.risco b{font-weight:500}
.risco p{margin:2px 0 0;color:var(--muted);font-size:12px}
.risco .onde{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.tabela-sis{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:auto}
.tabela-sis table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:720px}
.tabela-sis th{position:sticky;top:0;background:var(--panel);text-align:left;font-weight:500;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap}
.tabela-sis td{padding:5px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.tabela-sis tr:hover td{background:var(--panel2);cursor:pointer}
.pt{display:inline-flex;gap:3px;align-items:center;font-variant-numeric:tabular-nums}
.pt .okn{color:var(--ok)}.pt .rn{color:var(--warn)}.pt .an{color:var(--danger);font-weight:600}

/* ---------- lista (celular) ---------- */
#v-lista{overflow:auto;padding:10px;background:var(--bg)}
.grupo-lista h3{margin:12px 2px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600}
.cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:8px}
.cartao{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--cc,var(--line));border-radius:9px;padding:9px 10px;display:flex;flex-direction:column;gap:5px;text-align:left;min-width:0}
.cartao:hover{background:var(--panel2)}
.cartao .l1{display:flex;gap:8px;align-items:center;min-width:0}
.cartao .l1 img,.cartao .l1 .glifo{width:30px;height:30px;border-radius:7px;flex:0 0 auto;font-size:12px}
.cartao .l1 b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao .l1 small{display:block;font:11px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cartao .l1 .tx{min-width:0;flex:1}
.cartao .prob{color:var(--muted);font-size:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cartao .barra-ling{margin:0}
.vazio-lista{padding:30px;text-align:center;color:var(--muted)}

/* ---------- rodapé, menu, toast ---------- */
#bottom{display:flex;align-items:center;gap:8px;background:var(--panel);border-top:1px solid var(--line);padding:3px 10px;min-height:30px}
#status{font:11.5px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
#zoomsel{font:11.5px var(--mono);padding:1px 4px;height:24px}
.menu{position:fixed;z-index:30;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:4px;box-shadow:0 6px 24px rgba(0,0,0,.18);display:flex;flex-direction:column;min-width:190px}
.menu button{border:0;background:none;text-align:left;padding:7px 10px;border-radius:5px}
.menu button:hover{background:var(--panel2)}
#toast{position:fixed;left:50%;bottom:56px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:8px 14px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40;max-width:90vw}
#toast.on{opacity:1}
#abas-cel{display:none}

/* ---------- celular ---------- */
@media (max-width:760px){
  #app{grid-template-rows:auto minmax(0,1fr) auto auto}
  #top{flex-wrap:wrap;row-gap:6px;padding:6px 8px}
  #marca{order:1}
  #acoes{order:2}
  #caixa-busca{order:3;flex:1 1 100%;max-width:none}
  #frentes{order:4;flex:1 1 100%}
  #frentes .frente{flex:1;justify-content:center}
  #visoes,#b-filtros,#b-salvar,#b-layout{display:none!important}
  #main,#main.sem-filtros,#main.sem-painel,#main.sem-filtros.sem-painel{grid-template-columns:minmax(0,1fr)}
  #filtros,#painel{position:fixed;inset:0;z-index:20;border:0}
  #filtros{display:none}
  body.cel-filtros #filtros{display:flex;visibility:visible}
  #main.sem-painel #painel{display:none!important}
  #painel{padding-bottom:env(safe-area-inset-bottom)}
  .ph .x{padding:8px}
  #mini,#legenda{display:none}
  #bottom{min-height:24px}
  #abas-cel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--panel);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  #abas-cel button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 5px;font-size:11px;color:var(--muted)}
  #abas-cel button.on{color:var(--accent)}
  #abas-cel .ic{width:20px;height:20px}
  .cartoes{grid-template-columns:minmax(0,1fr)}
  #v-atrib{padding:10px}
  .tabela-sis table{min-width:0}
  .tabela-sis .lg{display:none}
}