/* Painel de pendências — obra 790 OCRIM · identidade Idugel */
:root{
  --vermelho:#A92B2E; --vermelho-esc:#8d2225;
  --azul:#1F3864; --azul-cla:#2D6CB5; --azul-ocrim:#27536b;
  --tinta:#16202c; --tinta-2:#4a5a6b; --tinta-3:#7d8b99;
  --fundo:#f2f5f8; --papel:#ffffff; --linha:#dde5ed; --linha-f:#c3d0dc;
  --st-fin:#1F8A5B; --st-and:#2D6CB5; --st-prz:#7A90A4; --st-agu:#C98A1E;
  --sombra:0 1px 2px rgba(22,32,44,.06), 0 4px 16px rgba(22,32,44,.07);
  --sombra-f:0 6px 28px rgba(22,32,44,.16);
  --r:12px; --tr:.22s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
img{display:block}
.env{max-width:1320px; margin:0 auto; padding:0 24px}

/* ---------- cabeçalho ---------- */
header.topo{background:var(--papel); border-bottom:1px solid var(--linha); z-index:60;
  box-shadow:0 1px 0 rgba(22,32,44,.03)}
.topo .env{display:flex; align-items:center; gap:24px; min-height:82px; padding-top:12px; padding-bottom:12px}
.topo img.idugel{height:40px; width:auto}
.topo img.ocrim{height:52px; width:auto}
.topo .meio{flex:1; min-width:0}
.topo h1{font-size:19px; color:var(--azul)}
.topo p{margin:2px 0 0; font-size:12.5px; color:var(--tinta-3)}
.selo{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--vermelho); background:#fbf0f0; border:1px solid #f0d8d9;
  padding:3px 9px; border-radius:99px}

/* ---------- KPIs ---------- */
.kpis{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin:26px 0 8px}
.kpi{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); padding:15px 16px;
  box-shadow:var(--sombra); position:relative; overflow:hidden}
.kpi::before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cor,var(--azul))}
.kpi .n{font-size:30px; font-weight:800; line-height:1; color:var(--cor,var(--azul)); font-variant-numeric:tabular-nums}
.kpi .r{font-size:11.5px; color:var(--tinta-2); margin-top:6px; line-height:1.35}
.kpi.clicavel{cursor:pointer; transition:transform var(--tr), box-shadow var(--tr)}
.kpi.clicavel:hover{transform:translateY(-2px); box-shadow:var(--sombra-f)}

/* ---------- seções ---------- */
section{margin:34px 0}
.cab-sec{display:flex; align-items:baseline; gap:12px; margin-bottom:6px; flex-wrap:wrap}
.cab-sec h2{font-size:17px; color:var(--azul)}
.cab-sec .nota{font-size:12.5px; color:var(--tinta-3)}

/* ---------- fluxo ---------- */
.quadro{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra);
  padding:10px 14px 14px}
#fluxo{width:100%; height:auto; display:block; touch-action:pan-y}
.no-cx{cursor:pointer}
.no-cx rect.cp{fill:#fff; stroke:var(--linha-f); stroke-width:1.5; transition:stroke var(--tr), filter var(--tr)}
.no-cx:hover rect.cp{stroke:var(--azul-cla); filter:drop-shadow(0 6px 14px rgba(31,56,100,.18))}
.no-cx.sel rect.cp{stroke:var(--vermelho); stroke-width:2.5}
.no-cx.apagado{opacity:.32}
.no-cx text.tit{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-weight:700; fill:var(--azul)}
.no-cx text.sub{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-size:11px; fill:var(--tinta-3)}
.no-cx text.qtd{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-weight:800; fill:var(--azul); text-anchor:end;
  font-variant-numeric:tabular-nums}
.no-cx text.qtdr{font:600 10px -apple-system,Arial,sans-serif; fill:var(--tinta-3); text-anchor:end}
.grupo-cx{fill:#f7fafc; stroke:var(--linha); stroke-dasharray:5 4}
.grupo-tt{font:700 10.5px -apple-system,Arial,sans-serif; fill:var(--tinta-3); letter-spacing:.09em}
.lig{fill:none; stroke:#b9c8d6; stroke-width:2.5; stroke-linecap:round}
.lig-anim{fill:none; stroke:var(--azul-cla); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:9 15; animation:corre 1.1s linear infinite}
.lig-ar{fill:none; stroke:#cbb88a; stroke-width:2; stroke-dasharray:3 7; animation:corre 1.5s linear infinite reverse}
@keyframes corre{to{stroke-dashoffset:-24}}
.pulso{animation:pulsa 2.4s ease-in-out infinite; transform-origin:center}
@keyframes pulsa{0%,100%{opacity:.85} 50%{opacity:.25}}
.legenda{display:flex; gap:20px; flex-wrap:wrap; font-size:11.5px; color:var(--tinta-2); padding:10px 4px 0;
  border-top:1px solid var(--linha); margin-top:6px}
.legenda i{display:inline-block; width:22px; height:3px; border-radius:2px; vertical-align:middle; margin-right:6px}

/* ---------- filtros ---------- */
.filtros{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra);
  padding:13px 16px; display:flex; flex-direction:column; gap:10px; position:sticky; top:0; z-index:40}
.fl{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.fl > label{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3);
  margin-right:2px; min-width:74px}
.chip{border:1px solid var(--linha-f); background:#fff; border-radius:99px; padding:5px 12px; font-size:12.5px;
  color:var(--tinta-2); transition:all var(--tr); white-space:nowrap}
.chip:hover{border-color:var(--azul-cla); color:var(--azul)}
.chip.on{background:var(--azul); border-color:var(--azul); color:#fff; font-weight:600}
.chip.on.pri{background:var(--vermelho); border-color:var(--vermelho)}
.chip .c{opacity:.6; font-size:11px; margin-left:5px; font-variant-numeric:tabular-nums}
input[type=search],select{border:1px solid var(--linha-f); border-radius:8px; padding:7px 11px; font-size:13px;
  background:#fff; color:var(--tinta); outline:none; transition:border-color var(--tr)}
input[type=search]{flex:1; min-width:200px}
input[type=search]:focus,select:focus{border-color:var(--azul-cla)}
.limpar{color:var(--vermelho); font-size:12.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px}
.contagem{font-size:13px; color:var(--tinta-2)}
.contagem b{color:var(--azul); font-size:15px}

/* ---------- grupos e cards ---------- */
.grupo{margin:22px 0}
.grupo > h3{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--azul);
  padding:8px 0 10px; border-bottom:2px solid var(--linha); margin-bottom:14px}
.grupo > h3 .pt{width:9px; height:9px; border-radius:99px; background:var(--azul-cla); flex:none}
.grupo > h3 .q{margin-left:auto; font-size:12px; font-weight:600; color:var(--tinta-3)}
.ver-planta{font-size:11px; font-weight:600; color:var(--azul-cla); border:1px solid var(--linha-f);
  background:#fff; border-radius:99px; padding:3px 10px; transition:all var(--tr)}
.ver-planta:hover{background:var(--azul-cla); color:#fff; border-color:var(--azul-cla)}
.malha{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px}
.card{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra);
  overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
  transition:transform var(--tr), box-shadow var(--tr), border-color var(--tr);
  animation:entra .34s ease both}
.card:hover{transform:translateY(-3px); box-shadow:var(--sombra-f); border-color:var(--linha-f)}
@keyframes entra{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.card .tiras{display:flex; gap:2px; background:#e9eff4; height:152px}
.card .tiras figure{flex:1; margin:0; overflow:hidden; background:#e9eff4; position:relative; min-width:0}
.card .tiras img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:transform .4s ease}
.card .tiras img.bg{object-fit:cover; filter:blur(16px) saturate(.7) brightness(1.04); transform:scale(1.25);
  opacity:.5}
.card:hover .tiras img.bg{transform:scale(1.3)}
.card:hover .tiras img{transform:scale(1.06)}
.card .semfoto{height:152px; display:grid; place-items:center; color:var(--tinta-3); font-size:12px; background:#eef3f7}
.card .corpo{padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1}
.card .alto{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.num{font:800 12px/1 -apple-system,Arial; color:#fff; background:var(--azul); border-radius:6px; padding:5px 7px;
  font-variant-numeric:tabular-nums}
.pill{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:3px 8px;
  border-radius:99px; color:#fff; white-space:nowrap}
.tag{font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:99px; border:1px solid var(--linha-f);
  color:var(--tinta-2); background:#f7fafc; white-space:nowrap}
.tag.pri{color:var(--vermelho); border-color:#f0d8d9; background:#fbf0f0}
.card .acao{font-size:13.5px; font-weight:600; color:var(--tinta); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card .const{font-size:12.5px; color:var(--tinta-2); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .rodape{margin-top:auto; padding-top:8px; border-top:1px solid var(--linha); display:flex; gap:12px;
  font-size:11.5px; color:var(--tinta-3); flex-wrap:wrap}
.card .rodape b{color:var(--tinta-2); font-weight:600}
.vazio{text-align:center; padding:60px 20px; color:var(--tinta-3)}

/* ---------- prazos ---------- */
.prazos{display:flex; gap:10px; flex-wrap:wrap}
.prz{flex:1; min-width:120px; background:var(--papel); border:1px solid var(--linha); border-radius:10px;
  padding:12px 14px; cursor:pointer; transition:all var(--tr); box-shadow:var(--sombra)}
.prz:hover{transform:translateY(-2px); box-shadow:var(--sombra-f)}
.prz.on{border-color:var(--vermelho); box-shadow:0 0 0 2px #fbf0f0}
.prz .d{font-size:12px; color:var(--tinta-3); font-weight:600}
.prz .n{font-size:22px; font-weight:800; color:var(--azul); font-variant-numeric:tabular-nums}
.prz .bar{height:4px; border-radius:2px; background:var(--azul-cla); margin-top:8px; transform-origin:left;
  animation:cresce .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes cresce{from{transform:scaleX(0)} to{transform:scaleX(1)}}

/* ---------- modal ---------- */
.fundo-modal{position:fixed; inset:0; background:rgba(16,24,34,.62); backdrop-filter:blur(3px); z-index:100;
  display:grid; place-items:center; padding:28px; animation:surge .2s ease both}
@keyframes surge{from{opacity:0} to{opacity:1}}
.modal{background:var(--papel); border-radius:16px; max-width:1000px; width:100%; max-height:90vh; overflow:auto;
  box-shadow:0 24px 70px rgba(0,0,0,.34); animation:sobe .26s cubic-bezier(.2,.9,.3,1) both}
@keyframes sobe{from{opacity:0; transform:translateY(18px) scale(.985)} to{opacity:1; transform:none}}
.modal .mtopo{position:sticky; top:0; background:var(--papel); border-bottom:1px solid var(--linha);
  padding:16px 22px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; z-index:2}
.modal .mtopo h3{font-size:16px; color:var(--azul); flex:1; min-width:180px}
.nav-b{border:1px solid var(--linha-f); border-radius:8px; width:32px; height:32px; display:grid; place-items:center;
  color:var(--tinta-2); transition:all var(--tr)}
.nav-b:hover:not(:disabled){background:var(--azul); color:#fff; border-color:var(--azul)}
.nav-b:disabled{opacity:.3; cursor:default}
.modal .mcorpo{padding:20px 22px 26px; display:grid; grid-template-columns:1fr 300px; gap:24px}
.campo{margin-bottom:16px}
.campo h4{font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-3);
  margin:0 0 4px}
.campo p{margin:0; font-size:14px; line-height:1.6; white-space:pre-wrap}
.lista-f{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.lista-f li{font-size:13px; color:var(--tinta-2); padding-left:14px; position:relative; line-height:1.5}
.lista-f li::before{content:'·'; position:absolute; left:3px; color:var(--vermelho); font-weight:800}
.ficha{background:#f7fafc; border:1px solid var(--linha); border-radius:10px; padding:14px 16px}
.ficha dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:7px 12px; font-size:12.5px}
.ficha dt{color:var(--tinta-3); font-weight:600}
.ficha dd{margin:0; color:var(--tinta); text-align:right}
.fotos-m{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:12px}
.fotos-m figure{margin:0; position:relative}
.fotos-m figcaption{position:absolute; left:5px; bottom:5px; background:var(--st-fin); color:#fff;
  font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px;
  border-radius:99px}
.fotos-m img{width:100%; height:120px; object-fit:contain; background:#eef3f7; border-radius:8px; border:1px solid var(--linha); cursor:zoom-in; background:#eef3f7;
  transition:transform var(--tr)}
.fotos-m img:hover{transform:scale(1.03)}
.aviso{font-size:11.5px; color:var(--st-agu); background:#fdf7e9; border:1px solid #f0e2c0; border-radius:8px;
  padding:8px 10px; margin-top:10px; line-height:1.45}
.lupa{position:fixed; inset:0; background:rgba(10,14,20,.9); z-index:120; display:grid; place-items:center;
  cursor:zoom-out; padding:30px; animation:surge .18s ease both}
.lupa img{max-width:96vw; max-height:92vh; image-rendering:auto; border-radius:6px;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lupa .cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#cfd8e2; font-size:12px}

footer{border-top:1px solid var(--linha); margin-top:48px; padding:22px 0 40px; font-size:12px; color:var(--tinta-3)}
footer b{color:var(--tinta-2)}

.dica-rola{display:none; font-size:11.5px; color:var(--tinta-3); padding:2px 4px 6px}

@media (max-width:1100px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .modal .mcorpo{grid-template-columns:1fr}
}
@media (max-width:720px){
  .env{padding:0 14px}
  .kpis{grid-template-columns:repeat(2,1fr); gap:10px}
  .kpi .n{font-size:26px}
  /* logos lado a lado, título em linha própria */
  .topo .env{flex-wrap:wrap; min-height:0; gap:10px 12px; padding:12px 14px}
  .topo img.idugel{height:30px; margin-right:auto}
  .topo img.ocrim{height:38px}
  .topo .meio{order:3; flex:0 0 100%}
  .topo h1{font-size:16px}
  .topo p{font-size:11.5px}
  /* o fluxo ganha rolagem lateral em vez de encolher até sumir */
  .rolaX{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .rolaX #fluxo{min-width:720px}
  .dica-rola{display:block}
  .filtros{position:static; padding:12px}
  .fl > label{min-width:auto; flex:0 0 100%}
  .malha{grid-template-columns:1fr}
  .modal .mtopo h3{font-size:14px; flex:0 0 100%; order:5}
  .fundo-modal{padding:10px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important}
}
@media print{
  .filtros,.lupa,.fundo-modal{display:none !important}
  .card{break-inside:avoid; box-shadow:none}
  body{background:#fff}
}

/* ===================== abas e vista do fluxograma ===================== */
.abas{display:inline-flex; gap:3px; background:#e7eef4; border-radius:99px; padding:3px; margin-left:4px}
.aba{font-size:12.5px; font-weight:600; color:var(--tinta-2); padding:5px 14px; border-radius:99px;
  transition:all var(--tr); white-space:nowrap}
.aba:hover{color:var(--azul)}
.aba.on{background:var(--papel); color:var(--azul); box-shadow:0 1px 3px rgba(22,32,44,.13)}

.quadro.planta{padding:0; overflow:hidden}
.planta-barra{display:flex; align-items:center; gap:14px; padding:11px 15px; border-bottom:1px solid var(--linha);
  flex-wrap:wrap}
.planta-tit{flex:1; min-width:200px; font-size:12.5px; color:var(--tinta-2); line-height:1.35}
.planta-tit b{color:var(--azul); display:block; font-size:13.5px}
.planta-ctrl{display:flex; align-items:center; gap:5px}
.pbtn{width:30px; height:30px; border:1px solid var(--linha-f); border-radius:8px; background:#fff;
  color:var(--tinta-2); font-size:16px; line-height:1; display:grid; place-items:center; transition:all var(--tr)}
.pbtn.largo{width:auto; padding:0 12px; font-size:12px; font-weight:600}
.pbtn:hover{background:var(--azul); color:#fff; border-color:var(--azul)}
.pzoom{font-size:11.5px; color:var(--tinta-3); min-width:44px; text-align:center;
  font-variant-numeric:tabular-nums}

.planta-caixa{position:relative; height:clamp(320px, 52vh, 620px); overflow:hidden; background:#fff;
  cursor:grab; touch-action:none; contain:paint}
.planta-caixa.puxando{cursor:grabbing}
.planta-palco{position:absolute; top:0; left:0; transform-origin:0 0; will-change:transform}
.planta-palco img{display:block; image-rendering:auto; user-select:none; -webkit-user-drag:none}
.planta-palco svg{position:absolute; top:0; left:0; overflow:visible}
.planta-dica{position:absolute; left:12px; bottom:10px; background:rgba(255,255,255,.92); border:1px solid var(--linha);
  border-radius:8px; padding:5px 10px; font-size:11px; color:var(--tinta-3); pointer-events:none;
  animation:some 7s ease forwards}
@keyframes some{0%,72%{opacity:1} 100%{opacity:0}}

.pa{cursor:pointer}
.pa-et rect{fill:rgba(255,255,255,.93); stroke:var(--azul-cla); stroke-width:3}
.pa-et text{font:700 40px -apple-system,Arial,sans-serif; fill:var(--azul)}
.pa:hover .pa-et rect{fill:#fff; stroke-width:5}
.pa.sel .pa-et rect{fill:var(--vermelho); stroke:var(--vermelho)}
.pa.sel .pa-et text{fill:#fff}
.pa.vazio .pa-et rect{stroke:var(--tinta-3); fill:rgba(255,255,255,.86)}
.pa.vazio .pa-et text{fill:var(--tinta-2); font-weight:600}
.pa-cx{fill:var(--azul-cla); transition:opacity var(--tr)}
.pa-borda{fill:none; stroke:var(--azul-cla); stroke-width:6; stroke-dasharray:26 18; opacity:.5;
  transition:opacity var(--tr), stroke var(--tr), stroke-width var(--tr)}
.pa:hover .pa-borda{opacity:1; stroke-width:10; animation:corre 1.4s linear infinite}
.pa.sel .pa-borda{stroke:var(--vermelho); opacity:1; stroke-width:12; stroke-dasharray:none}
.pa.sel .pa-cx{fill:var(--vermelho)}
.pa.apagado{opacity:.22}
.pa.vazio .pa-borda{stroke:var(--tinta-3); stroke-dasharray:10 14; opacity:.32}
.pa.vazio .pa-cx{fill:var(--tinta-3)}

.planta-ficha{position:absolute; top:12px; left:12px; right:12px; max-width:520px; background:rgba(255,255,255,.97);
  border:1px solid var(--linha-f); border-radius:11px; padding:11px 14px; box-shadow:var(--sombra-f);
  pointer-events:none; animation:entra .18s ease both}
.planta-ficha h4{margin:0 0 3px; font-size:13.5px; color:var(--azul)}
.planta-ficha p{margin:0; font-size:12px; color:var(--tinta-2); line-height:1.45}
.pf-n{margin-top:7px; font-size:12.5px; color:var(--tinta)}
.pf-n b{font-size:17px; color:var(--azul)}
.pf-p{color:var(--vermelho); font-weight:600}
.pf-c{margin-top:3px; font-size:11px; color:var(--tinta-3)}

.planta-rodape{border-top:1px solid var(--linha); padding:9px 15px 11px; background:#fafcfe}
#planta-mini{width:100%; height:44px; display:block; border:1px solid var(--linha); border-radius:6px;
  background:#fff; cursor:pointer}
.mini-a{fill:var(--azul-cla); transition:opacity var(--tr); pointer-events:none}
.mini-v{fill:rgba(169,43,46,.12); stroke:var(--vermelho); stroke-width:2; vector-effect:non-scaling-stroke;
  pointer-events:none}
.planta-leg{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:11px; color:var(--tinta-2)}
.planta-leg i{display:inline-block; width:14px; height:4px; border-radius:2px; margin-right:5px;
  vertical-align:middle}

.planta-cards{display:flex; gap:8px; flex-wrap:wrap; padding:12px 15px 15px; border-top:1px solid var(--linha)}
.pcard{display:flex; align-items:baseline; gap:7px; border:1px solid var(--linha-f); background:#fff;
  border-radius:10px; padding:7px 12px; transition:all var(--tr)}
.pcard:hover{border-color:var(--azul-cla); transform:translateY(-2px); box-shadow:var(--sombra)}
.pcard.on{background:var(--azul); border-color:var(--azul)}
.pcard.on .pc-n,.pcard.on .pc-t{color:#fff}
.pc-n{font-size:17px; font-weight:800; color:var(--azul); font-variant-numeric:tabular-nums}
.pc-t{font-size:12.5px; color:var(--tinta-2)}
.pc-p{font-size:10.5px; font-weight:700; color:var(--vermelho); background:#fbf0f0; border-radius:99px;
  padding:2px 7px}
.pcard.fantasma{border-style:dashed; opacity:.85}
.pc-f{font-size:10.5px; color:var(--tinta-3); font-style:italic}
@media (max-width:720px){
  .abas{margin-left:0; flex:0 0 100%}
  .planta-caixa{height:300px}
  .planta-ficha{max-width:none; font-size:11px}
}

/* ═══════════════════════════════════════════════════════════════════════
   VISTORIA — marcação, avanço, escopo e ajuste para iPad
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --m-fin:#1F8A5B; --m-and:#2D6CB5; --m-trv:#A92B2E; --m-esc:#C98A1E; --m-sem:#d7e0e8;
}
body.cliente [data-interno]{display:none !important}

/* ---------- ferramentas ---------- */
#ferr{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--papel);
  border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra); padding:10px 14px; margin-bottom:12px}
#ferr .ff{flex:1}
#ferr .qm{display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tinta-3)}
#ferr .qm input{font:600 13.5px/1 inherit; color:var(--tinta); border:1px solid var(--linha-f); border-radius:8px;
  padding:9px 11px; width:150px; background:#fbfdff; text-transform:none; letter-spacing:0}
#ferr .qm input:focus{outline:2px solid var(--azul-cla); outline-offset:1px; border-color:var(--azul-cla)}
.bt{border:1px solid var(--linha-f); background:#fff; border-radius:9px; padding:10px 14px; font-size:13px;
  font-weight:600; color:var(--tinta-2); transition:all var(--tr); min-height:42px; cursor:pointer}
.bt:hover{border-color:var(--azul-cla); color:var(--azul); background:#f6fafe}
.sinc{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px;
  border-radius:99px; border:1px solid transparent; white-space:nowrap}
.sinc.ok{color:var(--m-fin); background:#eaf6f0; border-color:#c9e7d8}
.sinc.local{color:var(--m-esc); background:#fdf6e9; border-color:#f0e0bd}
.sinc.aguarda{color:var(--tinta-3); background:#f1f5f9; border-color:var(--linha)}
.sw{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--tinta-2);
  cursor:pointer; user-select:none}
.sw input{position:absolute; opacity:0; pointer-events:none}
.sw span{width:42px; height:24px; border-radius:99px; background:#d7e0e8; position:relative; transition:background var(--tr); flex:none}
.sw span::after{content:''; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:99px;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform var(--tr)}
.sw input:checked + span{background:var(--azul)}
.sw input:checked + span::after{transform:translateX(18px)}
.sw input:focus-visible + span{outline:2px solid var(--azul-cla); outline-offset:2px}

/* ---------- barra de avanço ---------- */
#avanco{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra);
  padding:16px 18px 14px; margin-bottom:12px}
.av-topo{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:11px}
.av-topo h2{font-size:17px; color:var(--azul)}
.av-n{font-size:13px; color:var(--tinta-2)}
.av-n b{color:var(--azul); font-size:16px; font-variant-numeric:tabular-nums}
.av-barra{display:flex; gap:2px; height:26px; border-radius:7px; overflow:hidden; background:var(--m-sem)}
.av-barra .fa{display:grid; place-items:center; min-width:0; transition:flex .45s var(--tr)}
.av-barra .fa b{font-size:11.5px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums}
.av-barra .fa.concluido{background:var(--m-fin)} .av-barra .fa.andamento{background:var(--m-and)}
.av-barra .fa.travado{background:var(--m-trv)}   .av-barra .fa.foraescopo{background:var(--m-esc)}
.av-barra .fa.sem{background:var(--m-sem)} .av-barra .fa.sem b{color:var(--tinta-3)}
.av-leg{display:flex; gap:8px; flex-wrap:wrap; margin-top:11px}
.lg{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--linha-f); background:#fff;
  border-radius:99px; padding:7px 13px; font-size:12.5px; color:var(--tinta-2); min-height:38px; transition:all var(--tr)}
.lg i{width:10px; height:10px; border-radius:99px; flex:none}
.lg.concluido i{background:var(--m-fin)} .lg.andamento i{background:var(--m-and)}
.lg.travado i{background:var(--m-trv)}   .lg.foraescopo i{background:var(--m-esc)}
.lg.sem i{background:var(--m-sem); border:1px solid var(--linha-f)}
.lg b{font-variant-numeric:tabular-nums; color:var(--azul)}
.lg.on{background:var(--azul); border-color:var(--azul); color:#fff} .lg.on b{color:#fff}
.av-porno{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:8px; margin-top:13px;
  padding-top:13px; border-top:1px solid var(--linha)}
.pn{display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid transparent; border-radius:9px;
  text-align:left; transition:all var(--tr); min-height:40px}
.pn:hover{background:#f6fafe; border-color:var(--linha)}
.pn .r{font-size:12px; font-weight:600; color:var(--tinta-2); flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.pn .b{position:relative; width:58px; height:7px; border-radius:99px; background:var(--m-sem); flex:none; overflow:hidden}
.pn .b u{position:absolute; inset:0 auto 0 0; background:#b9cbdd; border-radius:99px}
.pn .b i{position:absolute; inset:0 auto 0 0; background:var(--m-fin); border-radius:99px; z-index:2}
.pn .v{font:800 13px/1 inherit; color:var(--azul); font-variant-numeric:tabular-nums; flex:none}
.pn .v small{font-weight:600; color:var(--tinta-3); font-size:10.5px}

/* ---------- botões de marcação ---------- */
.marcar{display:flex; gap:4px; margin:10px -14px -14px; padding:9px 14px 12px; border-top:1px solid var(--linha);
  background:#fafcfe}
.mb{flex:1; min-width:0; min-height:44px; border:1px solid var(--linha-f); background:#fff; border-radius:9px;
  font-size:11px; font-weight:700; color:var(--tinta-3); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:1px; transition:all .16s var(--tr); touch-action:manipulation;
  -webkit-tap-highlight-color:transparent}
.mb .s{font-size:14px; line-height:1}
.mb.obs{flex:0 0 42px; font-size:16px; color:var(--tinta-3)}
.mb:active{transform:scale(.94)}
.mb.concluido.on{background:var(--m-fin); border-color:var(--m-fin); color:#fff}
.mb.andamento.on{background:var(--m-and); border-color:var(--m-and); color:#fff}
.mb.travado.on{background:var(--m-trv); border-color:var(--m-trv); color:#fff}
.mb.foraescopo.on{background:var(--m-esc); border-color:var(--m-esc); color:#fff}
.nota-card{margin:0 -14px -14px; padding:9px 14px 11px; background:#fffdf4; border-top:1px solid #f0e6c8;
  font-size:12px; color:var(--tinta-2); line-height:1.45}
.nota-card b{color:var(--m-esc); font-weight:700}
.card.feito{border-color:#c9e7d8}
.card.feito .tiras{opacity:.62}
.card.feito .acao{text-decoration:line-through; text-decoration-color:#9dc9b4; text-decoration-thickness:1.5px;
  color:var(--tinta-2)}

/* ---------- marcação dentro da ficha ---------- */
.mmarca{background:#fafcfe; border:1px solid var(--linha); border-radius:10px; padding:13px 14px; margin-bottom:12px}
.mmarca h4{margin:0 0 9px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-3)}
.mmarca .marcar{margin:0 0 9px; padding:0; border:0; background:none}
.mmarca textarea{width:100%; font:13.5px/1.5 inherit; color:var(--tinta); border:1px solid var(--linha-f);
  border-radius:8px; padding:9px 11px; resize:vertical; background:#fff}
.mmarca textarea:focus{outline:2px solid var(--azul-cla); outline-offset:1px; border-color:var(--azul-cla)}
.mmarca .mq{display:block; margin-top:7px; font-size:11px; color:var(--tinta-3)}

/* ---------- seção escopo ---------- */
.gr-esc{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:11px; margin-bottom:16px}
.ge{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra);
  padding:14px 15px; text-align:left; transition:all var(--tr); display:flex; flex-direction:column; gap:3px}
.ge:hover{transform:translateY(-2px); box-shadow:var(--sombra-f); border-color:var(--azul-cla)}
.ge .n{font-size:26px; font-weight:800; line-height:1; color:var(--azul); font-variant-numeric:tabular-nums}
.ge .r{font-size:13px; font-weight:700; color:var(--tinta)}
.ge .e{font-size:11.5px; color:var(--tinta-3); line-height:1.4}
.ge.pri .n{color:var(--vermelho)}
.fronteiras{display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:13px}
.fr{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra); padding:16px 18px}
.fr.cuidado{border-color:#f0d8d9; background:#fffcfc}
.fr h3{font-size:14.5px; color:var(--azul); margin-bottom:9px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.fr .regra{margin:0 0 11px; font-size:13.5px; line-height:1.5; color:var(--tinta)}
.fr .prova{margin:0 0 11px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px}
.fr .prova li{display:flex; gap:10px; font-size:12.5px; color:var(--tinta-2); line-height:1.45}
.fr .prova .dt{flex:0 0 108px; font-weight:700; color:var(--azul-ocrim); font-size:11.5px; font-variant-numeric:tabular-nums}
.fr-itens{font-size:12px; color:var(--tinta-2); line-height:2; padding-top:9px; border-top:1px solid var(--linha)}
.ni{font:700 11.5px/1 inherit; color:var(--azul); background:#eef4fb; border:1px solid #d6e4f3; border-radius:6px;
  padding:5px 7px; margin:0 3px; min-height:30px; transition:all var(--tr)}
.ni:hover{background:var(--azul); color:#fff; border-color:var(--azul)}
.fr .obs, .san .obs{margin:10px 0 0; font-size:12px; color:var(--tinta-3); line-height:1.5}
.san{background:#fbfcfd; border:1px dashed var(--linha-f); border-radius:var(--r); padding:16px 18px; margin-top:13px}
.san h3{font-size:14.5px; color:var(--azul); margin-bottom:10px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.san table{width:100%; border-collapse:collapse; font-size:13px}
.san td{padding:7px 0; border-bottom:1px solid var(--linha); color:var(--tinta-2)}
.san td:last-child{text-align:right; font-weight:700; color:var(--azul); font-variant-numeric:tabular-nums; white-space:nowrap}
.san tr.tot td{border-top:1.5px solid var(--linha-f); border-bottom:0; padding-top:9px}
.san .d{font-weight:600; color:var(--tinta-3); font-size:11.5px}

/* ---------- aviso flutuante ---------- */
#aviso{position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); z-index:300; background:var(--tinta);
  color:#fff; font-size:13.5px; font-weight:600; padding:12px 20px; border-radius:99px; box-shadow:var(--sombra-f);
  opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; max-width:88vw; text-align:center}
#aviso.on{opacity:1; transform:translate(-50%,0)}

/* ═══════════════ toque e telas menores (iPad) ═══════════════ */
@media (hover:none){
  .card:hover{transform:none; box-shadow:var(--sombra)}
  .card:hover .tiras img, .card:hover .tiras img.bg{transform:none}
  .kpi.clicavel:hover, .prz:hover, .ge:hover{transform:none; box-shadow:var(--sombra)}
  .chip, .lg, .bt, .ni, .ver-planta{-webkit-tap-highlight-color:transparent; touch-action:manipulation}
  .chip{min-height:38px; padding:8px 14px}
  .card{cursor:default}
}
@media (max-width:1120px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .env{padding:0 18px}
  .topo .env{gap:14px; min-height:0}
  .topo img.idugel{height:32px} .topo img.ocrim{height:42px}
  .topo h1{font-size:17px}
}
@media (max-width:820px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .malha{grid-template-columns:1fr}
  .fronteiras{grid-template-columns:1fr}
  .fl > label{min-width:100%; margin-bottom:-4px}
  .filtros{position:static}
  #ferr{position:sticky; top:0; z-index:45}
}
@media (max-width:560px){
  #ferr{position:static}   /* no telefone a barra inteira ocuparia meia tela */
  .marcar{gap:3px}
  .fr .prova li{flex-direction:column; gap:1px}
  .fr .prova .dt{flex:none}
  body{font-size:15.5px}
}
@supports (padding:env(safe-area-inset-left)){
  .env{padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right))}
  footer.env{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}

/* ---------- atalhos de navegação ---------- */
.atalhos{display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px}
.atalhos a{font-size:12.5px; font-weight:600; color:var(--tinta-2); text-decoration:none;
  border:1px solid var(--linha); background:var(--papel); border-radius:99px; padding:8px 15px;
  min-height:38px; display:inline-flex; align-items:center; transition:all var(--tr)}
.atalhos a:hover{border-color:var(--azul-cla); color:var(--azul)}

/* O ambiente de publicação aplica img{max-width:100%}. O fluxograma tem 14173 px
   de largura e é posicionado junto com um SVG de mesmas dimensões: clampá-lo
   desalinharia os pontos do desenho. */
#plantaImg{max-width:none}

/* ---------- gaveta das pendências da área ---------- */
#gaveta{position:relative; margin-top:14px; background:var(--papel); border:1px solid var(--linha-f);
  border-radius:var(--r); box-shadow:var(--sombra); padding:16px 16px 18px; animation:abre .22s var(--tr)}
@keyframes abre{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
#gaveta .bico{position:absolute; top:-9px; width:16px; height:16px; background:var(--papel);
  border-left:1px solid var(--linha-f); border-top:1px solid var(--linha-f);
  transform:translateX(-50%) rotate(45deg)}
.gv-topo{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px;
  padding-bottom:11px; border-bottom:1px solid var(--linha)}
.gv-topo h3{font-size:15.5px; color:var(--azul)}
.gv-n{font-size:12.5px; color:var(--tinta-2)}
.gv-n b{color:var(--azul); font-variant-numeric:tabular-nums}
.gv-x{margin-left:auto; width:34px; height:34px; border-radius:9px; color:var(--tinta-3); font-size:15px;
  border:1px solid var(--linha); flex:none}
.gv-x:hover{background:var(--vermelho); border-color:var(--vermelho); color:#fff}
.gv-malha{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.no-cx.vazio-no{opacity:.4}
.no-cx.vazio-no rect.cp{stroke-dasharray:4 3}
@media (max-width:820px){ .gv-malha{grid-template-columns:1fr} }

/* ---------- placar por fornecedor ---------- */
.plc{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:11px}
.pf{background:var(--papel); border:1px solid var(--linha); border-radius:var(--r); box-shadow:var(--sombra);
  padding:13px 14px; text-align:left; display:flex; flex-direction:column; gap:9px; transition:all var(--tr)}
.pf:hover{border-color:var(--azul-cla); transform:translateY(-2px); box-shadow:var(--sombra-f)}
.pf.on{border-color:var(--azul); box-shadow:0 0 0 2px rgba(31,56,100,.12), var(--sombra)}
.pf-top{display:flex; align-items:baseline; gap:8px}
.pf-top b{font-size:13px; color:var(--azul); letter-spacing:.01em}
.pf-t{margin-left:auto; font-size:20px; font-weight:800; color:var(--tinta); font-variant-numeric:tabular-nums}
.pf-barra{display:flex; gap:2px; height:9px; border-radius:5px; overflow:hidden; background:var(--m-sem)}
.pf-barra i{display:block; min-width:2px}
.pf-n{display:flex; gap:10px; font-size:11.5px; flex-wrap:wrap}
.pf-n .fin{color:var(--m-fin); font-weight:700}
.pf-n .atr{color:var(--vermelho); font-weight:700}
.chip.gr{font-weight:600}
@media (hover:none){ .pf:hover{transform:none; box-shadow:var(--sombra)} }