:root {
  --verde-sispeq: #0D6B4C;
  --verde-profundo: #08402E;
  --verde-claro: #E3F1EB;
  --papel: #F4F2EE;
  --papel-escuro: #E9E6DF;
  --branco: #FFFFFF;
  --borda: #DDD9D1;
  --grafite: #1C2622;
  --texto-secundario: #5B6660;
  --marinho: #0A2540;
  --menta: #0DBE88;
  --on-menta: #06281C;
  --aviso-fundo: #FFF1D6;
  --aviso-texto: #7A4B00;
  --ui-fundo: #F3F5F4;
  --ui-borda: #D9DFDC;
  --ui-zebra: #F3F8F5;
  --ui-secao: #5B6863;
  --fonte-display: Montserrat, Arial, sans-serif;
  --fonte-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --espaco-4: 4px;
  --espaco-8: 8px;
  --espaco-12: 12px;
  --espaco-16: 16px;
  --espaco-24: 24px;
  --espaco-32: 32px;
  --espaco-56: 56px;
  --raio-sm: 6px;
  --raio-md: 10px;
  --raio-icone: 23%;
  --raio-selo: 999px;
}
@font-face { font-family: 'Montserrat'; src: url('/fonts/Montserrat-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('/fonts/Inter-latin.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/JetBrainsMono-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
.display { font-family: var(--fonte-display); font-size: 64px; line-height: 1; font-weight: 800; }
.titulo-capa { font-family: var(--fonte-display); font-size: 34px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.titulo-documento { font-family: var(--fonte-display); font-size: 22px; line-height: 1.25; font-weight: 700; }
.titulo-secao { font-family: var(--fonte-display); font-size: 16px; line-height: 1.3; font-weight: 700; }
.titulo-tela { font-family: var(--fonte-sans); font-size: 18px; line-height: 1.3; font-weight: 700; }
.corpo { font-family: var(--fonte-sans); font-size: 15px; line-height: 1.6; font-weight: 400; }
.corpo-ui { font-family: var(--fonte-sans); font-size: 13px; line-height: 1.45; font-weight: 400; }
.rotulo { font-family: var(--fonte-sans); font-size: 12px; line-height: 1.3; font-weight: 600; }
.sobretitulo { font-family: var(--fonte-sans); font-size: 12px; line-height: 1.3; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.selo { font-family: var(--fonte-sans); font-size: 11px; line-height: 1.2; font-weight: 600; }
.codigo { font-family: var(--fonte-mono); font-size: 13px; line-height: 1.4; font-weight: 400; }
.numero-documento { font-family: var(--fonte-mono); font-size: 12px; line-height: 1.5; font-weight: 400; }


:root {
  --vermelho: #B3261E;
  --vermelho-fundo: #FBE5E3;
  --ambar: #C27C0E;
  --cinza-plan: #CCD3CF;
  --cinza-neutro: #8A9590;
  --marinho-fundo: #E6ECF3;
  --sombra-curta: 0 6px 18px rgba(4, 30, 21, 0.22);
  --topo-altura: 56px;
  --sumario-largura: 264px;
}

.sobretitulo { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--verde-sispeq); margin-bottom: 10px; }
.cap-titulo { font-family: var(--fonte-display); font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: var(--verde-profundo); margin: 0 0 18px; }
.cap-passo { font-family: var(--fonte-display); font-weight: 700; color: var(--verde-sispeq); margin: -6px 0 16px; }
.pedido {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin: 0 0 20px;
  background: var(--branco); border-left: 4px solid var(--verde-sispeq); border-radius: 0 10px 10px 0;
}
.pedido-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-sispeq); }
.pedido-texto { font-weight: 600; line-height: 1.4; }
.cap-linha { line-height: 1.55; margin: 0 0 12px; }
.cap-fonte { font-size: 13px; line-height: 1.5; color: var(--texto-secundario); margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--borda); }
.cap-selos { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.cap-selo-linha { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.35; }
.cap-selo-linha .selo-disp { flex: none; min-width: 132px; text-align: center; }


.selo-disp {
  display: inline-block; padding: 4px 10px; border-radius: var(--raio-selo);
  font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.selo-no-ar { background: var(--menta); color: var(--on-menta); }
.selo-em-implementacao { background: var(--aviso-fundo); color: var(--aviso-texto); }
.selo-em-desenvolvimento { background: var(--marinho-fundo); color: var(--marinho); box-shadow: inset 0 0 0 1px #C5D2E0; }

.pilula {
  display: inline-block; padding: 3px 9px; border-radius: var(--raio-selo);
  font-size: 11px; font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.prazo-no-ritmo, .tom-verde { background: var(--verde-claro); color: var(--verde-sispeq); }
.prazo-abaixo, .tom-aviso { background: var(--aviso-fundo); color: var(--aviso-texto); }
.prazo-atrasado, .tom-vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.prazo-concluido, .tom-marinho { background: var(--marinho-fundo); color: var(--marinho); }
.prazo-nao-iniciado, .tom-cinza { background: #EEF0EF; color: var(--texto-secundario); }


.cap-palco {
  position: relative; border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse at 28% 18%, rgba(13, 107, 76, 0.55), rgba(13, 107, 76, 0) 62%), var(--verde-profundo);
  display: flex; align-items: center; justify-content: center;
}
.cap-palco.claro { background: var(--papel-escuro); }
.palco-escala { position: relative; overflow: hidden; }
.palco { position: absolute; top: 0; left: 0; transform-origin: 0 0; overflow: hidden; }
body.modo-leitura .cap-palco { padding: 0; }
.palco-vazio {
  position: absolute; inset: 40px; display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(255, 255, 255, 0.35); border-radius: 12px; color: rgba(255, 255, 255, 0.8); font-size: 22px;
}
.botao-rever {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  border: 0; border-radius: var(--raio-selo); padding: 5px 12px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.86); color: var(--verde-profundo);
}
.botao-rever:hover { background: var(--branco); }
.cap-palco.claro .botao-rever { background: var(--branco); box-shadow: 0 0 0 1px var(--ui-borda); }


body.modo-apresentacao { overflow: hidden; background: #06261B; }
body.modo-apresentacao .topo, body.modo-apresentacao .sumario { display: none; }
body.modo-apresentacao #doc { position: fixed; inset: 0; }
body.modo-apresentacao .cap {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  margin: -540px 0 0 -960px; transform: scale(var(--escala-tela, 1)); transform-origin: 50% 50%;
  display: none;
}
body.modo-apresentacao .cap.atual { display: grid; }
body.modo-apresentacao .cap,
body.modo-pdf .cap {
  grid-template-columns: 540px minmax(0, 1fr); gap: 44px; padding: 56px 56px 64px 72px;
  background: var(--papel); align-items: stretch;
}
body.modo-apresentacao .cap.cheio, body.modo-pdf .cap.cheio { display: none; padding: 0; grid-template-columns: 1fr; }
body.modo-apresentacao .cap.cheio.atual, body.modo-pdf .cap.cheio { display: block; }
body.modo-apresentacao .cap-texto, body.modo-pdf .cap-texto { display: flex; flex-direction: column; justify-content: center; min-height: 0; }
body.modo-apresentacao .sobretitulo, body.modo-pdf .sobretitulo { font-size: 16px; }
body.modo-apresentacao .cap-titulo, body.modo-pdf .cap-titulo { font-size: 46px; }
body.modo-apresentacao .cap-passo, body.modo-pdf .cap-passo { font-size: 24px; }
body.modo-apresentacao .pedido-texto, body.modo-pdf .pedido-texto { font-size: 21px; }
body.modo-apresentacao .pedido-rotulo, body.modo-pdf .pedido-rotulo { font-size: 14px; }
body.modo-apresentacao .cap-linha, body.modo-pdf .cap-linha { font-size: 20px; margin-bottom: 14px; }
body.modo-apresentacao .cap-fonte, body.modo-pdf .cap-fonte { font-size: 15px; }
body.modo-apresentacao .cap-selo-linha, body.modo-pdf .cap-selo-linha { font-size: 15px; }
body.modo-apresentacao .cap-selo-linha .selo-disp, body.modo-pdf .cap-selo-linha .selo-disp { font-size: 13px; min-width: 150px; }
body.modo-apresentacao .cap-palco, body.modo-pdf .cap-palco { height: 100%; }

.controles-apresentacao { display: none; }
body.modo-apresentacao .controles-apresentacao {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
}
.progresso { height: 3px; background: rgba(255, 255, 255, 0.14); }
.progresso-barra { height: 100%; width: 0; background: var(--verde-sispeq); transition: width 0.35s ease; }
.controles-linha {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  background: rgba(6, 38, 27, 0.82); color: #E9F2EE; font-size: 13px;
}
.ctl.ctl-forte { background: var(--verde-sispeq); border-color: var(--verde-sispeq); }
.ctl.ctl-forte:hover { background: #12855F; }

.seta-nav, .dica-navegacao { display: none; }
body.modo-apresentacao .seta-nav {
  display: flex; align-items: center; justify-content: center;
  position: fixed; top: 50%; z-index: 41; width: 46px; height: 46px; margin-top: -23px;
  border: 0; border-radius: 50%; font-size: 0; color: transparent;
  background: rgba(6, 38, 27, 0.55); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0.75; transition: opacity 0.2s ease, background 0.2s ease;
}
body.modo-apresentacao .seta-nav:hover { opacity: 1; background: var(--verde-sispeq); }
body.modo-apresentacao .seta-nav::before {
  content: ''; width: 12px; height: 12px; border-top: 3px solid #fff; border-right: 3px solid #fff;
}
.seta-anterior { left: 12px; }
.seta-anterior::before { transform: translateX(3px) rotate(-135deg); }
.seta-proximo { right: 12px; }
.seta-proximo::before { transform: translateX(-3px) rotate(45deg); }
body.modo-apresentacao .dica-navegacao {
  display: block; position: fixed; left: 50%; bottom: 64px; z-index: 42; transform: translateX(-50%);
  max-width: min(720px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 12px;
  background: rgba(6, 38, 27, 0.92); color: #fff; font-size: 14px; line-height: 1.4; text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); transition: opacity 0.6s ease;
}
body.modo-apresentacao .dica-navegacao.sumiu { opacity: 0; pointer-events: none; }
body.modo-pdf .seta-nav, body.modo-pdf .dica-navegacao, body.modo-render .seta-nav, body.modo-render .dica-navegacao { display: none !important; }
.progresso-rotulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl {
  border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #E9F2EE;
  border-radius: var(--raio-selo); padding: 4px 12px; font-size: 12px; font-weight: 600;
}
.ctl:hover { background: rgba(255, 255, 255, 0.1); }
body.modo-apresentacao #botao-modo-flutuante { display: block; }


@page { size: 1920px 1080px; margin: 0; }
body.modo-pdf { background: var(--papel); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.modo-pdf .topo, body.modo-pdf .sumario, body.modo-pdf .controles-apresentacao, body.modo-pdf .botao-rever { display: none !important; }
body.modo-pdf .cap {
  position: relative; display: grid; width: 1920px; height: 1080px; overflow: hidden;
  break-after: page; page-break-after: always;
  contain: strict;}
body.modo-pdf .cap.cheio { display: block; }
body.modo-pdf .cap-palco .palco { transform: none; }
body.modo-pdf .palco-escala { width: 1200px; height: 800px; }

body.modo-render { margin: 0; overflow: hidden; background: var(--verde-profundo); }
body.modo-render .topo, body.modo-render .sumario, body.modo-render .controles-apresentacao { display: none; }
.render-quadro {
  position: fixed; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden;
  background: radial-gradient(ellipse at 28% 18%, rgba(13, 107, 76, 0.55), rgba(13, 107, 76, 0) 62%), var(--verde-profundo);
}
.render-quadro .palco { left: 150px; transform-origin: 0 0; }


.app-janela {
  position: absolute; display: flex; overflow: hidden;
  background: var(--ui-fundo); border: 1px solid var(--ui-borda); border-radius: 12px;
  box-shadow: var(--sombra-curta); font-size: 13px; color: var(--grafite);
}
.app-lateral {
  flex: none; width: 176px; background: var(--branco); border-right: 1px solid var(--ui-borda);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 14px;
}
.app-logo { width: 118px; height: auto; }
.app-unidade { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--ui-borda); border-radius: 8px; font-size: 13px; }
.app-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.app-menu li { padding: 6px 8px; border-radius: 6px; font-size: 12px; color: var(--ui-secao); }
.app-menu li.ativo { background: var(--verde-claro); color: var(--verde-profundo); font-weight: 600; }
.app-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-faixa { margin: 12px 12px 0; padding: 12px 16px; border-radius: 12px; background: var(--verde-sispeq); color: var(--branco); }
.app-faixa-titulo { font-size: 17px; font-weight: 700; line-height: 1.25; }
.app-faixa-sub { font-size: 12px; opacity: 0.88; margin-top: 2px; }
.app-corpo { flex: 1; min-height: 0; padding: 12px; overflow: hidden; position: relative; }

.ficticio {
  position: absolute; left: 12px; bottom: 8px; z-index: 4;
  font-family: var(--fonte-sans); font-size: 10.5px; font-weight: 600; color: var(--texto-secundario);
  background: rgba(255, 255, 255, 0.86); padding: 2px 8px; border-radius: 4px; pointer-events: none;
}

.secao-faixa {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 14px; border-radius: 8px; background: var(--verde-sispeq); color: var(--branco);
}
.secao-titulo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.secao-resumo { font-size: 12px; font-weight: 600; opacity: 0.95; }

.cartao { background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; padding: 14px; }
.cartao-titulo { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); margin-bottom: 10px; }
.kpi-valor { font-family: var(--fonte-display); font-size: 30px; font-weight: 800; line-height: 1; color: var(--grafite); }
.kpi-rotulo { font-size: 11px; font-weight: 600; color: var(--texto-secundario); text-transform: uppercase; letter-spacing: 0.06em; }

.tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; overflow: hidden; }
.tabela th { background: var(--verde-sispeq); color: var(--branco); font-weight: 600; text-align: left; padding: 9px 10px; font-size: 12px; }
.tabela td { height: 38px; padding: 0 10px; border-top: 1px solid #E7ECE9; }
.tabela tr:nth-child(even) td { background: var(--ui-zebra); }
.tabela tr.destaque td { background: #FFF8E6; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; }

.barra-trilho { position: relative; height: 10px; border-radius: 5px; background: #E6EAE8; overflow: hidden; }
.barra-cheia { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--verde-sispeq); }

.botao-demo {
  border: 0; border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 700;
  background: var(--verde-sispeq); color: var(--branco); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.botao-demo:hover { background: var(--verde-profundo); }
.botao-demo.secundario { background: var(--branco); color: var(--verde-profundo); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.botao-demo.perigo { background: var(--vermelho); }
.botao-demo:disabled { opacity: 0.45; cursor: default; }

.passos-abas { position: absolute; left: 24px; right: 24px; top: 20px; display: flex; gap: 8px; z-index: 6; flex-wrap: wrap; }
.passo-aba {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--raio-selo);
  padding: 7px 14px 7px 8px; font-size: 13px; font-weight: 600;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.86);
}
.passo-aba:hover { background: rgba(255, 255, 255, 0.2); }
.passo-aba.ativo { background: var(--branco); color: var(--verde-profundo); }
.passo-num {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18); font-family: var(--fonte-mono); font-size: 12px;
}
.passo-aba.ativo .passo-num { background: var(--verde-sispeq); color: var(--branco); }
.cap-palco.claro .passo-aba { background: var(--branco); color: var(--ui-secao); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cap-palco.claro .passo-aba.ativo { background: var(--verde-sispeq); color: var(--branco); box-shadow: none; }
.cap-palco.claro .passo-aba.ativo .passo-num { background: rgba(255, 255, 255, 0.25); }

.legenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--texto-secundario); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }

.celular {
  position: absolute; width: 330px; height: 680px; border-radius: 40px; background: #121A17;
  padding: 14px 12px 18px; box-shadow: var(--sombra-curta);
}
.cel-barra { display: flex; justify-content: space-between; color: #DDE6E2; font-size: 12px; font-weight: 600; padding: 2px 16px 8px; }
.cel-tela { position: relative; height: calc(100% - 26px); border-radius: 28px; background: var(--ui-fundo); overflow: hidden; }
.celular .ficticio { left: 26px; bottom: 26px; }

.palco-nota { position: absolute; color: #DCEBE4; font-size: 14px; line-height: 1.45; }
.palco-nota strong { color: var(--branco); }

body.modo-filme .seta-nav, body.modo-filme .dica-navegacao, body.modo-filme .botao-rever, body.modo-filme .controles-linha .ctl { display: none !important; }
body.modo-filme { cursor: none; }

.palco-parte { position: absolute; left: 0; top: 0; width: 1200px; height: 800px; }

body.menos-movimento *, body.menos-movimento *::before, body.menos-movimento *::after { transition: none !important; animation: none !important; }
.sumario-movimento {
  margin: 14px 16px 18px; padding: 6px 12px; border: 1px solid var(--ui-borda); border-radius: var(--raio-selo);
  background: transparent; color: var(--texto-secundario); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sumario-movimento:hover { border-color: var(--verde-sispeq); color: var(--verde-sispeq); }

.gf-clic { cursor: pointer; transition: opacity 0.15s; }
.gf-clic:hover { opacity: 0.78; }
.gf-clic:focus-visible { outline: 2px solid var(--verde-sispeq); outline-offset: 2px; }
.gf-barras, .gf-linha { display: block; width: 100%; height: 100%; }
.gf-emp { display: flex; gap: 2px; width: 100%; overflow: hidden; border-radius: 5px; }
.gf-emp i { display: block; min-width: 2px; }
.gf-barrash { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.gf-bh-linha { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 62px; align-items: center; gap: 10px; font-size: 12px; }
.gf-bh-rot { color: var(--grafite); line-height: 1.15; }
.gf-bh-trilho { position: relative; height: 11px; border-radius: 6px; background: #E4E9E6; }
.gf-bh-trilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; }
.gf-bh-trilho u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--grafite); }
.gf-bh-linha b { text-align: right; font-variant-numeric: tabular-nums; }
.gf-legenda { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 11.5px; color: var(--ui-secao); }
.gf-leg { display: inline-flex; align-items: center; gap: 6px; }
.gf-leg i { flex: none; width: 11px; height: 11px; border-radius: 3px; }
.gf-leg b { color: var(--grafite); font-variant-numeric: tabular-nums; }

.partes-slot { display: inline-flex; gap: 3px; padding: 3px; border-radius: var(--raio-selo); background: var(--ui-fundo); border: 1px solid var(--ui-borda); }
.parte-botao { border: 0; background: transparent; color: var(--texto-secundario); border-radius: var(--raio-selo); padding: 6px 12px; font: 600 12.5px/1.2 var(--fonte-sans); cursor: pointer; white-space: nowrap; }
.parte-botao.ativa { background: var(--verde-sispeq); color: var(--branco); }
.parte-botao:focus-visible { outline: 2px solid var(--menta); outline-offset: 1px; }
.sum-parte { padding: 12px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-sispeq); list-style: none; }
.botao-voltar { position: absolute; left: 12px; top: 10px; z-index: 8; display: none; align-items: center; gap: 6px; border: 0; border-radius: var(--raio-selo); padding: 6px 13px; font: 700 13px/1.2 var(--fonte-sans); color: var(--verde-profundo); background: var(--branco); box-shadow: var(--sombra-curta); cursor: pointer; }
.botao-voltar.visivel { display: inline-flex; }
.botao-voltar:hover { background: var(--verde-claro); }
.botao-voltar:focus-visible { outline: 2px solid var(--menta); outline-offset: 2px; }
@media (max-width: 1180px) { .controles-linha .progresso-rotulo { display: none; } }
@media (max-width: 900px) { .topo .partes-slot { display: none; } .controles-linha .partes-slot { display: none; } }
.controles-linha .ctl { white-space: nowrap; }
@media (max-width: 1320px) { .controles-linha .botao-movimento { display: none; } }
@media (max-width: 900px) {
  .controles-linha { flex-wrap: wrap; gap: 6px; padding-left: max(8px, env(safe-area-inset-left, 0px)); padding-right: max(8px, env(safe-area-inset-right, 0px)); }
  .controles-linha .topo-espaco, .controles-linha #botao-tela-cheia { display: none; }
  .controles-linha .ctl { flex: 1 1 auto; min-height: 40px; text-align: center; }
  .controles-linha #botao-leitura { order: -1; font-weight: 700; }
}
body.modo-apresentacao #doc { bottom: var(--barra-apresentacao, 0px); }
@media (max-height: 520px) {
  .controles-linha { padding-top: 3px; padding-bottom: 3px; }
  .controles-linha .ctl { min-height: 30px; padding-top: 3px; padding-bottom: 3px; }
  .seta-nav { display: none; }
}
@media (max-width: 699px) and (orientation: portrait) { #botao-modo { display: none; } }
@media (max-width: 699px) { .botao-rever, .botao-voltar:not(.visivel) { display: none; } }
@media (max-width: 900px), (max-height: 520px) {
  .botao-voltar { left: auto; top: auto; right: 6px; bottom: 6px; padding: 3px 9px; font-size: 11px; }
}

.ul-camada { position: absolute; inset: 0; }

.ul-trilha { position: absolute; left: 115px; right: 115px; top: 112px; height: 110px; }
.ul-linha { position: absolute; left: 0; right: 0; top: 13px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.ul-linha-cheia { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.85); transition: width 0.6s ease; }
.ul-no { position: absolute; top: 0; width: 170px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ul-ponto { width: 30px; height: 30px; border-radius: 50%; background: var(--verde-profundo); border: 3px solid rgba(255, 255, 255, 0.45); }
.ul-no.feito .ul-ponto { background: var(--branco); border-color: var(--branco); }
.ul-no.atual .ul-ponto { border-color: var(--branco); box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.16); }
.ul-no-cinza.atual .ul-ponto { background: var(--cinza-neutro); }
.ul-no-aviso.atual .ul-ponto { background: var(--ambar); }
.ul-no-vermelho.atual .ul-ponto { background: var(--vermelho); }
.ul-no-nome { color: var(--branco); font-size: 15px; font-weight: 700; }
.ul-no-sub { color: rgba(255, 255, 255, 0.75); font-size: 12.5px; }
.ul-no-fantasma .ul-ponto { background: transparent; border-style: dashed; border-color: #9FD3BF; }
.ul-no-fantasma .ul-no-nome { color: #9FD3BF; }
.ul-junta { position: absolute; left: 210px; width: 780px; top: 262px; padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.ul-junta-topo { display: flex; justify-content: space-between; align-items: flex-start; }
.ul-junta-id { font-size: 30px; font-weight: 700; color: var(--verde-profundo); }
.ul-junta-sit { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ul-sit-grande { font-size: 15px; padding: 6px 14px; }
.ul-junta-dados { font-size: 13.5px; color: var(--texto-secundario); }
.ul-serv-rot { margin-top: 4px; }
.ul-servs { display: flex; flex-direction: column; gap: 6px; }
.ul-serv { display: grid; grid-template-columns: 44px 1fr 110px 150px; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 8px; background: var(--ui-fundo); font-size: 14px; }
.ul-serv .pilula { justify-self: end; font-size: 12px; }
.ul-serv-alvo { box-shadow: inset 0 0 0 2px var(--vermelho); }
.ul-rel { font-size: 13px; color: var(--marinho); }
.ul-falta { font-size: 15px; }
.ul-falta-txt { font-weight: 700; color: var(--vermelho); }
.ul-motivo { padding: 8px 12px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 13px; line-height: 1.4; }
.ul-regra { position: absolute; left: 140px; right: 140px; top: 684px; text-align: center; color: var(--branco); font-size: 17px; font-weight: 600; line-height: 1.45; }

.ul-telas { position: absolute; left: 24px; right: 24px; top: 78px; height: 516px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ul-tela { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta); transition: opacity 0.3s ease; }
.ul-tela.apagada { opacity: 0.3; }
.ul-tela-topo { padding: 12px 14px; background: var(--verde-sispeq); color: var(--branco); }
.ul-tela-titulo { font-family: var(--fonte-display); font-size: 17px; font-weight: 700; }
.ul-tela-sub { font-size: 12px; opacity: 0.88; }
.ul-tela-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 34px; }
.ul-plan-cab { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-secundario); }
.ul-plan-resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ul-plan-resumo > div { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--ui-fundo); font-size: 11px; color: var(--texto-secundario); }
.ul-plan-resumo b { font-family: var(--fonte-display); font-size: 16px; color: var(--grafite); }
.ul-plan-lista { display: flex; flex-direction: column; gap: 3px; }
.ul-plan-linha { display: grid; grid-template-columns: 64px auto 1fr; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 6px; font-size: 12px; }
.ul-plan-linha:nth-child(even) { background: var(--ui-zebra); }
.ul-plan-falta { font-size: 11px; color: var(--texto-secundario); text-align: right; }
.ul-plan-linha.ul-alvo { box-shadow: inset 0 0 0 2px #E9C98F; background: #FFFBF1; }
.ul-mais { font-size: 11px; color: var(--texto-secundario); }
.ul-mcjs { font-size: 11.5px; }
.ul-mcjs th { padding: 7px 6px; font-size: 11px; }
.ul-mcjs td { height: 36px; padding: 0 6px; }
.ul-mcjs tr.ul-alvo td { background: #FFFBF1 !important; }
.ul-mcjs .pilula { font-size: 10px; padding: 2px 6px; }
.ul-cel { display: inline-block; min-width: 26px; padding: 2px 4px; border-radius: 4px; text-align: center; font-size: 11px; font-weight: 700; }
.ul-cel-a { background: var(--verde-claro); color: var(--verde-sispeq); }
.ul-cel-p { background: #EEF0EF; color: var(--texto-secundario); }
.ul-cel-r { background: var(--vermelho-fundo); color: var(--vermelho); }
.ul-g-quadro { display: flex; flex-direction: column; gap: 6px; }
.ul-g-item { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--ui-fundo); font-size: 13px; }
.ul-g-item i { width: 12px; height: 12px; border-radius: 3px; }
.ul-g-item b { font-family: var(--fonte-display); font-size: 20px; padding: 0 4px; border-radius: 4px; }
.ul-g-item-alvo { box-shadow: inset 0 0 0 2px #E9C98F; }
.ul-g-linha { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 2px; border-bottom: 1px solid #E6EAE8; font-size: 13px; }
.ul-g-linha b { font-family: var(--fonte-display); font-size: 18px; padding: 0 4px; border-radius: 4px; }
.ul-g-junta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 13px; }
.ul-g-frente { padding: 6px 10px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 12px; }
.ul-barra { position: absolute; left: 24px; right: 24px; top: 610px; display: flex; flex-direction: column; gap: 10px; }
.ul-mesma { color: var(--branco); font-family: var(--fonte-display); font-size: 18px; font-weight: 700; }
.ul-controles { display: flex; align-items: center; gap: 8px; }
.ul-ver { color: rgba(255, 255, 255, 0.75); font-size: 13px; font-weight: 600; }
.ul-filtro { border: 1px solid rgba(255, 255, 255, 0.3); background: transparent; color: var(--branco); border-radius: var(--raio-selo); padding: 5px 12px; font-size: 12.5px; font-weight: 600; }
.ul-filtro.ativo { background: var(--branco); color: var(--verde-profundo); }
.ul-espaco { flex: 1; }
.ul-botoes-rx { display: none; gap: 8px; }
.com-rx .ul-botoes-rx { display: inline-flex; }
.ul-msg { padding: 10px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: #E9F2EE; font-size: 15px; line-height: 1.4; }
.ul-msg-reparo { background: rgba(179, 38, 30, 0.28); }
.ul-msg-liberada { background: rgba(13, 107, 76, 0.5); }

.ul-f-cartao { position: absolute; left: 60px; right: 60px; top: 96px; padding: 22px 26px; display: flex; flex-direction: column; gap: 16px; }
.ul-f-topo { display: flex; justify-content: space-between; align-items: center; }
.ul-f-topo .cartao-titulo { margin: 0; font-size: 13px; }
.ul-f-barras { display: flex; flex-direction: column; gap: 16px; }
.ul-f-linha { display: grid; grid-template-columns: 560px 1fr; gap: 20px; align-items: center; }
.ul-f-barra { height: 66px; min-width: 270px; padding: 0 18px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; color: var(--branco); font-size: 17px; font-weight: 600; }
.ul-f-barra b { font-family: var(--fonte-display); font-size: 30px; }
.ul-f-0 { background: var(--marinho); }
.ul-f-1 { background: #2F5E7E; }
.ul-f-2 { background: var(--verde-sispeq); }
.ul-f-explica { font-size: 15px; line-height: 1.45; }
.ul-f-reparo { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid #E6EAE8; font-size: 14px; color: var(--texto-secundario); }
.ul-f-reparo .pilula { font-size: 13px; }
.ul-ligacao { position: absolute; left: 60px; top: 520px; border: 0; border-radius: var(--raio-selo); padding: 10px 18px; background: rgba(255, 255, 255, 0.12); color: var(--branco); font-size: 15px; font-weight: 600; }
.ul-ligacao:hover { background: rgba(255, 255, 255, 0.2); }

.ul-si-quadro { position: absolute; left: 100px; width: 1000px; top: 74px; height: 625px; overflow: hidden; border-radius: 12px; background: var(--branco); border: 1px solid var(--ui-borda); box-shadow: var(--sombra-curta); }
.ul-si-img { display: block; width: 100%; height: auto; }
.ul-si-rodape { position: absolute; left: 100px; width: 1000px; top: 710px; display: flex; justify-content: space-between; gap: 18px; color: var(--branco); }
.ul-si-legenda { flex: 1; min-width: 0; }
.ul-si-titulo { font-family: var(--fonte-display); font-size: 18px; font-weight: 700; }
.ul-si-texto { font-size: 13px; line-height: 1.4; color: rgba(255, 255, 255, 0.85); margin-top: 2px; }
.ul-si-selo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 300px; font-size: 11.5px; color: rgba(255, 255, 255, 0.8); text-align: right; }

.pn-janela { left: 20px; top: 66px; width: 1160px; height: 718px; }
.pn-vista { position: absolute; inset: 12px; overflow: hidden; border-radius: 8px; }
.pn-pagina { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pn-bloco { position: absolute; width: 958px; display: flex; flex-direction: column; gap: 8px; }
.pn-bloco-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

.pn-cartao { padding: 11px 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; overflow: hidden; }
.pn-cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pn-cartao-topo .cartao-titulo { margin: 0; font-size: 10.5px; }
.pn-cartao-topo .selo-disp { font-size: 9.5px; padding: 3px 8px; }
.pn-sub { font-size: 11px; color: var(--texto-secundario); line-height: 1.35; }
.pn-texto { font-size: 12px; line-height: 1.45; margin: 0; color: var(--grafite); }

.pn-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; height: 112px; flex: none; }
.pn-kpis .kpi-valor { font-size: 25px; }
.pn-trilho { height: 8px; margin: 2px 0; }
.pn-kpi-linha { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pn-kpi-linha .pilula { font-size: 10px; }
.pn-linha2 { flex: 1; min-height: 0; display: grid; gap: 10px; }
.pn-bloco-b .pn-linha2 { grid-template-columns: 560px 1fr; }
.pn-bloco-c .pn-linha2 { grid-template-columns: 1fr; }
.pn-bloco-d .pn-linha2 { grid-template-columns: 600px 1fr; }
.pn-bloco-e .pn-linha2 { grid-template-columns: 512px 1fr; }
.pn-bloco-f .pn-linha2 { grid-template-columns: 352px 1fr; }
.pn-svg { display: block; width: 100%; flex: 1; min-height: 0; }
.pn-eixo { font-family: var(--fonte-sans); font-size: 10px; fill: #6B7671; }
.pn-eixo-foco { font-weight: 700; fill: var(--grafite); }
.pn-hoje { font-weight: 600; fill: var(--grafite); }
.pn-rotulo-num { font-family: var(--fonte-sans); font-size: 12px; font-weight: 700; }
.pn-rotulo-mini { font-family: var(--fonte-sans); font-size: 10px; font-weight: 700; fill: var(--grafite); }
.legenda i.pn-tracejado { width: 18px; height: 3px; border-radius: 0; background: repeating-linear-gradient(90deg, var(--marinho) 0 5px, transparent 5px 8px); }
.pn-cartao .legenda { font-size: 10.5px; gap: 12px; }

.pn-docs { display: flex; flex-direction: column; }
.pn-doc { display: grid; grid-template-columns: 196px 1fr 58px 132px; gap: 10px; align-items: center; height: 27px; padding: 0 4px; border-radius: 6px; }
.pn-doc-prova { cursor: pointer; }
.pn-doc-prova:hover, .pn-doc.ativa { background: var(--vermelho-fundo); }
.pn-doc-rotulo { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pn-doc-num { font-size: 11px; font-weight: 600; }
.pn-doc-desc { font-size: 9.5px; color: var(--texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-doc-barras { display: flex; flex-direction: column; gap: 2px; }
.pn-trilho-fino { position: relative; height: 7px; border-radius: 4px; background: #EEF1EF; overflow: hidden; }
.pn-trilho-alto { height: 11px; }
.pn-trilho-plan { height: 4px; background: transparent; }
.pn-barra-exec, .pn-barra-plan { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.pn-barra-plan { background: #CCD3CF; }
.pn-doc-pct { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.pn-doc-pct span { font-size: 9.5px; color: var(--texto-secundario); }
.pn-doc-prazo .pilula { font-size: 10px; }
.pn-dica { font-size: 11px; font-weight: 600; color: var(--marinho); margin-top: 2px; }
.pn-legenda-topo { margin-bottom: 2px; }


.pn-servs { display: flex; flex-direction: column; }
.pn-serv { display: grid; grid-template-columns: 176px 1fr 66px 132px; gap: 10px; align-items: center; height: 38px; }
.pn-serv-rotulo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pn-serv-rotulo b { font-size: 12px; }
.pn-serv-rotulo span { font-size: 10px; color: var(--texto-secundario); }
.pn-setores { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.pn-setor { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 6px; background: var(--ui-fundo); }
.pn-setor-nome { font-size: 12px; font-weight: 600; }

.pn-tabela { font-size: 11.5px; }
.pn-tabela th { padding: 7px 10px; font-size: 11px; }
.pn-tabela td { height: 30px; }
.pn-mini-barra { position: relative; display: inline-block; width: 64px; height: 6px; margin-right: 8px; border-radius: 3px; background: #EEF1EF; overflow: hidden; vertical-align: middle; }
.pn-mini-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.pn-gargalos { display: flex; flex-direction: column; gap: 8px; }
.pn-gargalo { padding: 7px 10px; border-left: 4px solid; border-radius: 0 8px 8px 0; background: var(--ui-fundo); }
.pn-impacto-alto { border-color: var(--vermelho); }
.pn-impacto-medio { border-color: var(--ambar); }
.pn-impacto-baixo { border-color: var(--marinho); }
.pn-gargalo-onde { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.pn-impacto { font-size: 10px; font-weight: 600; color: var(--texto-secundario); white-space: nowrap; }
.pn-gargalo-texto { font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
.pn-gargalo-rdo span { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: var(--raio-selo); background: var(--marinho-fundo); color: var(--marinho); font-size: 10px; font-weight: 700; }

.pn-bloco-a .pn-linha2 { grid-template-columns: 540px 1fr; }
.pn-uns { display: flex; flex-direction: column; }
.pn-un { display: grid; grid-template-columns: 150px 1fr 60px 118px; gap: 10px; align-items: center; height: 40px; padding: 0 4px; border-radius: 6px; }
.pn-un-foco { background: var(--ui-zebra); box-shadow: inset 3px 0 0 var(--verde-sispeq); }
.pn-pqos { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.pn-pqo-titulo { font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.pn-pqo-linha { display: grid; grid-template-columns: 78px 1fr 132px; gap: 8px; align-items: center; height: 20px; }
.pn-pqo-rot { font-size: 11px; color: var(--texto-secundario); }
.pn-pqo-trilho { position: relative; height: 9px; border-radius: 5px; background: #EEF1EF; overflow: hidden; }
.pn-pqo-trilho i, .pn-sit-trilho i, .pn-pq-trilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.pn-pqo-num { font-size: 11px; color: var(--texto-secundario); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pn-pqo-num b { color: var(--grafite); margin-right: 6px; }

.pn-sit-total { display: flex; align-items: baseline; gap: 6px; margin: -2px 0 2px; }
.pn-sit-total b { font-family: var(--fonte-display); font-size: 22px; font-weight: 800; line-height: 1; }
.pn-sit-total span { font-size: 11px; color: var(--texto-secundario); }
.pn-sit { display: flex; flex-direction: column; gap: 5px; }
.pn-sit-topo { display: grid; grid-template-columns: 10px 1fr auto 34px; gap: 6px; align-items: center; font-size: 11.5px; line-height: 1.2; }
.pn-sit-cor { width: 10px; height: 10px; border-radius: 2px; }
.pn-sit-topo b { font-variant-numeric: tabular-nums; }
.pn-sit-topo em { font-style: normal; font-size: 10.5px; color: var(--texto-secundario); text-align: right; }
.pn-sit-trilho { position: relative; height: 8px; margin-top: 3px; border-radius: 5px; background: #EEF1EF; overflow: hidden; }
.pn-pq { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.pn-pq-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-secundario); }
.pn-pq-num { font-family: var(--fonte-display); font-size: 26px; font-weight: 800; letter-spacing: 0; }
.pn-pq-trilho { position: relative; height: 14px; margin: 4px 0 5px; border-radius: 7px; background: #EEF1EF; overflow: hidden; }
.pn-pq-trilho i { border-radius: 7px; }
.pn-funil { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.pn-funil-linha { height: 38px; }
.pn-funil-barra {
  height: 100%; min-width: 230px; border-radius: 8px; padding: 0 14px;
  display: flex; justify-content: space-between; align-items: center;
  color: var(--branco); font-size: 12.5px; font-weight: 600;
}
.pn-funil-linha:nth-child(1) .pn-funil-barra { background: var(--marinho); }
.pn-funil-linha:nth-child(2) .pn-funil-barra { background: #2F5E7E; }
.pn-funil-linha:nth-child(3) .pn-funil-barra { background: var(--verde-sispeq); }
.pn-funil-barra b { font-family: var(--fonte-display); font-size: 17px; }
.pn-funil-reparo { margin-top: 2px; }

.pn-gaveta {
  position: absolute; top: 0; right: 0; bottom: 0; width: 476px; z-index: 5;
  display: none; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: var(--branco); border-left: 1px solid var(--ui-borda); box-shadow: -10px 0 24px rgba(4, 30, 21, 0.18);
}
.pn-gaveta.aberta { display: flex; }
.pn-gaveta-topo { display: flex; align-items: center; gap: 10px; }
.pn-gaveta-titulo { flex: 1; font-family: var(--fonte-display); font-size: 16px; font-weight: 700; color: var(--verde-profundo); }
.pn-gaveta-topo .selo-disp { font-size: 9.5px; }
.pn-fechar { border: 1px solid var(--ui-borda); background: var(--branco); border-radius: var(--raio-selo); padding: 3px 10px; font-size: 11px; font-weight: 600; color: var(--ui-secao); }
.pn-niveis { position: relative; display: flex; flex-direction: column; gap: 10px; }
.pn-niveis::before { content: ''; position: absolute; left: 9px; top: 14px; bottom: 14px; width: 2px; background: var(--ui-borda); }
.pn-nivel { position: relative; margin-left: 26px; padding: 8px 12px; border: 1px solid var(--ui-borda); border-radius: 10px; background: var(--branco); display: flex; flex-direction: column; gap: 3px; }
.pn-nivel::before { content: ''; position: absolute; left: -22px; top: 11px; width: 10px; height: 10px; border-radius: 50%; background: var(--verde-sispeq); box-shadow: 0 0 0 3px var(--branco), 0 0 0 4px var(--verde-sispeq); }
.pn-nivel-rot { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); }
.pn-nivel-linha { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pn-servicos { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.pn-servicos-rot { font-size: 10.5px; font-weight: 600; color: var(--texto-secundario); }
.pn-servico { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 6px; align-items: center; font-size: 11px; }
.pn-servico .pilula { font-size: 9.5px; }
.pn-rel { font-size: 10.5px; color: var(--marinho); }
.pn-rel-alvo { font-weight: 700; text-decoration: underline; }
.pn-motivo { font-size: 10.5px; color: var(--vermelho); margin-top: 2px; }
.pn-rel-campos { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 11px; color: var(--texto-secundario); }
.pn-rel-campos b { color: var(--grafite); }
.pn-via { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-profundo); font-size: 11.5px; font-weight: 600; }
.pn-via-icone { width: 13px; height: 17px; border-radius: 2px; background: var(--branco); border: 1.5px solid var(--verde-sispeq); }

.pn-modo-galeria .pn-janela { visibility: hidden; }

.cap-painel .passos-abas .passo-aba { padding: 6px 12px 6px 7px; font-size: 12.5px; }
.pn-galeria { display: none; position: absolute; left: 20px; right: 20px; top: 62px; bottom: 10px; flex-direction: column; gap: 8px; }
.pn-modo-galeria .pn-galeria { display: flex; }
.pn-modo-galeria .pn-janela { visibility: hidden; }
.pn-gal-abas { flex: none; display: flex; gap: 6px; }
.pn-gal-aba { flex: 1; padding: 7px 4px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.14); color: var(--branco); font: 600 12.5px/1.2 var(--fonte-sans); cursor: pointer; }
.pn-gal-aba:hover { background: rgba(255, 255, 255, 0.24); }
.pn-gal-aba.ativo { background: var(--branco); color: var(--verde-profundo); }
.pn-gal-quadro { position: relative; height: 590px; flex: none; overflow: hidden; border-radius: 10px; background: var(--branco); }
.pn-gal-img { display: block; width: 100%; height: auto; will-change: transform; }
.pn-gal-tempo { position: relative; flex: none; height: 18px; }
.pn-gal-trilho { position: absolute; left: 0; right: 0; top: 2px; width: 100%; margin: 0; accent-color: var(--menta); cursor: pointer; }
.pn-gal-marcas { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; pointer-events: none; }
.pn-gal-marcas i { position: absolute; top: 0; width: 2px; height: 5px; background: rgba(255, 255, 255, 0.75); }
.pn-gal-controles { flex: none; display: flex; align-items: center; gap: 7px; min-width: 0; }
.pn-gal-bot { flex: none; width: 34px; height: 30px; border: 0; border-radius: 7px; background: rgba(255, 255, 255, 0.16); color: var(--branco); font-size: 13px; cursor: pointer; }
.pn-gal-bot.forte { background: var(--branco); color: var(--verde-profundo); }
.pn-gal-rotulo { flex: none; max-width: 340px; padding: 0 6px; color: var(--branco); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-gal-secoes { flex: 1; min-width: 0; display: flex; justify-content: flex-end; gap: 4px; overflow: hidden; }
.pn-gal-secao { flex: 0 1 auto; min-width: 0; padding: 5px 7px; border: 0; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); font: 600 10px/1.15 var(--fonte-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.pn-gal-secao.ativo { background: var(--menta); color: var(--on-menta); }
.pn-gal-aba:focus-visible, .pn-gal-bot:focus-visible, .pn-gal-secao:focus-visible, .pn-gal-trilho:focus-visible { outline: 2px solid var(--menta); outline-offset: 1px; }


.rdt { position: absolute; inset: 0; font-family: var(--fonte-sans); color: var(--grafite); }
.rdt .mono { font-size: 0.93em; }
.rdt button { font-family: inherit; }
.rdt-passo { position: absolute; inset: 0; display: none; }
.rdt-passo.ativo { display: block; }
.rdt-ico { flex: none; display: block; }
.rdt-suave { color: var(--texto-secundario); font-weight: 400; font-size: 12px; margin-left: 6px; }
.rdt .cartao { padding: 10px 12px; }
.rdt .cartao-titulo { margin-bottom: 6px; }

.rdt-marca {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: var(--raio-selo);
  background: var(--verde-claro); color: var(--verde-sispeq); font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.rdt-manual {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px 1px 6px; border-radius: var(--raio-selo);
  background: var(--ui-fundo); box-shadow: inset 0 0 0 1px var(--ui-borda); color: var(--texto-secundario);
  font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap;
}
.rdt-ref { color: var(--marinho); }

.rdt-faixa { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rdt-faixa-texto { min-width: 0; }
.rdt-faixa-acoes { display: flex; align-items: center; gap: 10px; flex: none; }

.rdt-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; border-top: 1px solid var(--ui-borda); border-top-color: color-mix(in srgb, var(--ui-borda) 55%, var(--branco)); font-size: 12.5px; }
.cartao-titulo + .rdt-linha { border-top: 0; }
.rdt-linha-val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.rdt-linha.total { border-top: 1px solid var(--ui-borda); font-weight: 700; }


.rdt-j1 { left: 24px; top: 72px; width: 1152px; height: 704px; }
.rdt-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; }
.rdt-pdf.emitido, .rdt-pdf.emitido:hover { background: var(--menta); color: var(--on-menta); box-shadow: none; }
.rdt-form { display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 8px 12px; align-content: start; }
.rdt-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rdt-cab { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; padding: 8px 14px; }
.rdt-campo { flex: none; }
.rdt-campo-rot { font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-secundario); margin-bottom: 2px; }
.rdt-campo-val { font-size: 13px; font-weight: 600; white-space: nowrap; }

.rdt-legenda { display: flex; flex-direction: column; gap: 8px; padding: 2px 4px 0; }
.rdt-leg-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.rdt-leg-desc { font-size: 12px; line-height: 1.35; color: var(--texto-secundario); }

.rdt-ativ-lista { display: flex; flex-direction: column; gap: 5px; }
.rdt-ativ { padding: 6px 10px 6px 12px; border-left: 3px solid var(--verde-sispeq); border-radius: 0 8px 8px 0; background: var(--ui-zebra); }
.rdt-ativ-texto { font-size: 13px; line-height: 1.35; }
.rdt-ativ-origem { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; color: var(--texto-secundario); }
.rdt-ocor-linha { font-size: 13px; line-height: 1.4; }

.rdt-paral-cab {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 58px 70px 142px; gap: 8px; padding: 5px 9px;
  background: var(--verde-sispeq); color: var(--branco); border-radius: 6px; font-size: 11.5px; font-weight: 600;
}
.rdt-paral-vazio { padding: 8px 9px 1px; font-size: 12.5px; color: var(--texto-secundario); }

.rdt-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rdt-fotos-linha { display: flex; gap: 8px; }
.rdt-foto {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 38px; border-radius: 6px;
  background: var(--ui-fundo); box-shadow: inset 0 0 0 1px var(--ui-borda); color: var(--cinza-neutro);
}
.rdt-foto.mais { background: var(--branco); border: 1.5px dashed var(--ui-borda); }
.rdt-assins-linha { display: flex; gap: 14px; }
.rdt-assin { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.rdt-assin-estado { height: 24px; display: flex; align-items: flex-end; border-bottom: 1.5px solid var(--grafite); padding-bottom: 2px; font-size: 11.5px; color: var(--texto-secundario); }
.rdt-assin-papel { font-size: 11.5px; font-weight: 600; }


.rdt-esq2 { position: absolute; left: 24px; top: 116px; width: 560px; display: flex; flex-direction: column; gap: 30px; }
.rdt-papeis { position: relative; }
.rdt-bloco-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--branco); margin-bottom: 16px; }
.rdt-papeis-lista { position: relative; display: flex; flex-direction: column; gap: 22px; }
.rdt-papeis-fio { position: absolute; left: 42px; top: 44px; bottom: 44px; width: 3px; border-radius: 2px; background: var(--branco); opacity: 0.5; }
.rdt-papel {
  position: relative; display: flex; align-items: center; gap: 18px; min-height: 88px; padding: 16px 22px; background: var(--branco);
  border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta);
}
.rdt-papel-num {
  flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--verde-sispeq); color: var(--branco); font-family: var(--fonte-display); font-size: 18px; font-weight: 700;
}
.rdt-papel-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 21px; color: var(--verde-profundo); }
.rdt-papel-acao { font-size: 15.5px; margin-top: 3px; }
.rdt-aviso { padding: 16px 20px 18px; border-radius: 12px; background: var(--aviso-fundo); color: var(--aviso-texto); box-shadow: var(--sombra-curta); }
.rdt-aviso-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.rdt-aviso-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 16px; line-height: 1.25; }
.rdt-aviso-texto { margin: 0; font-size: 15px; line-height: 1.5; }
.rdt-trava { position: static; font-size: 15px; }

.rdt-pdf-col { position: absolute; left: 640px; top: 72px; width: 536px; height: 704px; }
.rdt-pdf-chip {
  position: absolute; left: 60px; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px;
  border-radius: var(--raio-selo); background: var(--menta); color: var(--on-menta); font-size: 13px; font-weight: 700;
}
.rdt-pdf-nota { position: absolute; left: 60px; top: 650px; width: 417px; font-size: 14px; }
.rdt-folha {
  position: absolute; left: 60px; top: 44px; width: 417px; height: 596px; padding: 18px 20px 34px; border-radius: 10px;
  background: var(--branco); box-shadow: var(--sombra-curta); display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.rdt-folha-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 2px solid var(--verde-sispeq); }
.rdt-folha-logo {
  flex: none; display: flex; align-items: center; justify-content: center; width: 72px; height: 38px; border: 1.5px dashed var(--ui-borda);
  border-radius: 4px; font-size: 9.5px; line-height: 1.15; text-align: center; color: var(--texto-secundario);
}
.rdt-folha-tit { flex: 1; text-align: center; }
.rdt-folha-titulo { font-family: var(--fonte-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--verde-profundo); }
.rdt-folha-num { font-size: 12px; margin-top: 2px; }
.rdt-folha-modelo {
  flex: none; padding: 3px 8px; border-radius: 4px; background: var(--verde-claro); color: var(--verde-sispeq);
  font-size: 9.5px; font-weight: 700; line-height: 1.2; text-align: center; max-width: 72px;
}
.rdt-folha-contrato { font-size: 10.5px; color: var(--texto-secundario); }
.rdt-folha-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; padding: 8px 10px; border: 1px solid var(--ui-borda); border-radius: 4px; }
.rdt-folha-rot { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-secundario); }
.rdt-folha-val { font-size: 11px; font-weight: 600; margin-top: 1px; white-space: nowrap; }
.rdt-folha-secoes { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.rdt-folha-sec-t { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-sispeq); margin-bottom: 5px; }
.rdt-folha-barras { display: flex; flex-direction: column; gap: 5px; }
.rdt-barra { display: block; height: 6px; border-radius: 3px; background: var(--ui-borda); }
.rdt-folha-fotos { display: flex; gap: 8px; }
.rdt-folha-foto { display: block; width: 62px; height: 34px; border-radius: 4px; background: var(--ui-borda); }
.rdt-folha-assin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 8px; }
.rdt-folha-ass { display: flex; flex-direction: column; gap: 4px; }
.rdt-folha-linha { display: block; height: 26px; border-bottom: 1.5px solid var(--grafite); }
.rdt-folha-ass-t { font-size: 10.5px; font-weight: 600; line-height: 1.2; }


.rdt-j3a { left: 24px; top: 72px; width: 520px; height: 548px; }
.rdt-j3b { left: 656px; top: 72px; width: 520px; height: 548px; }
.rdt .app-janela.sem-lateral .app-corpo { padding-bottom: 30px; }
.rdt-regs { display: flex; flex-direction: column; gap: 12px; }
.rdt-reg { background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; padding: 10px 12px 12px; }
.rdt-reg-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rdt-reg-num { font-size: 15px; font-weight: 700; }
.rdt-reg-meta { font-size: 12.5px; color: var(--texto-secundario); }
.rdt-paral-bloco { padding: 8px 10px 9px 12px; border-left: 3px solid var(--ambar); border-radius: 0 8px 8px 0; background: var(--aviso-fundo); color: var(--aviso-texto); }
.rdt-paral-rot { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 3px; }
.rdt-paral-motivo { font-size: 14px; line-height: 1.4; color: var(--grafite); }
.rdt-paral-campos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--grafite); }
.rdt-paral-campos b { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aviso-texto); }

.rdt-foco-lista { display: flex; flex-direction: column; gap: 8px; }
.rdt-foco-item { padding: 8px 10px 9px 12px; border-left: 3px solid var(--ui-borda); border-radius: 0 8px 8px 0; background: var(--branco); }
.rdt-foco-item.rdo { border-left-color: var(--ambar); background: var(--aviso-fundo); background: color-mix(in srgb, var(--aviso-fundo) 55%, var(--branco)); }
.rdt-foco-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.rdt-foco-onde { font-size: 14px; font-weight: 700; color: var(--verde-profundo); }
.rdt-foco-texto { font-size: 13.5px; line-height: 1.42; }
.rdt-foco-origem { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rdt-elo { padding: 0 1px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: var(--aviso-fundo); color: var(--aviso-texto); font-weight: 600; }
.rdt-liga { position: absolute; left: 0; top: 0; width: 1200px; height: 800px; pointer-events: none; overflow: visible; }
.rdt-p3-msg { position: absolute; left: 24px; right: 24px; top: 656px; }
.rdt-p3-msg-t { font-family: var(--fonte-display); font-weight: 800; font-size: 28px; line-height: 1.15; color: var(--branco); }
.rdt-p3-msg-s { position: static; margin-top: 8px; font-size: 16px; }


.celular.rdt-fone { left: 40px; top: 72px; width: 360px; height: 700px; }
.rdt-app { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 8px 8px 30px; }
.rdt-app-faixa { flex: none; padding: 8px 12px; border-radius: 14px; background: var(--verde-sispeq); color: var(--branco); }
.rdt-app-faixa-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rdt-app-faixa-t { font-size: 15px; font-weight: 700; line-height: 1.25; }
.rdt-app-faixa-s { font-size: 11px; opacity: 0.92; margin-top: 1px; }
.rdt-app-sec { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 2px 0; }
.rdt-app-sec-t { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); }
.rdt-app-sec-n { font-size: 10.5px; color: var(--texto-secundario); }
.rdt-app-lista { flex: none; display: flex; flex-direction: column; gap: 4px; }
.rdt-app-item { padding: 4px 8px 5px 9px; border: 1px solid var(--ui-borda); border-left: 3px solid var(--ui-borda); border-radius: 8px; background: var(--branco); }
.rdt-app-item.critico { border-left-color: var(--vermelho); }
.rdt-app-item-topo { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rdt-app-item-tipo { font-size: 11.5px; font-weight: 700; color: var(--verde-profundo); }
.rdt-app-item-texto { font-size: 11.5px; line-height: 1.3; }
.rdt-app-item .pilula { font-size: 10px; padding: 1px 7px; }
.rdt-app-recado { flex: none; padding: 5px 9px 6px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); }
.rdt-app-recado-t { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rdt-app-recado-x { font-size: 11.5px; line-height: 1.3; color: var(--grafite); margin-top: 1px; }
.rdt-app-acao { flex: none; position: relative; height: 42px; margin-top: 2px; }
.rdt-app-botao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; font-size: 14px; }
.rdt-app-conf {
  position: absolute; inset: 0; display: none; align-items: center; gap: 10px; padding: 0 12px; border-radius: 8px;
  background: var(--menta); color: var(--on-menta);
}
.rdt-app-conf-ico { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--on-menta); color: var(--menta); }
.rdt-app-conf-t { font-size: 12px; font-weight: 700; line-height: 1.2; }
.rdt-app-conf-h { font-size: 11px; line-height: 1.2; }
.rdt-recebido .rdt-app-botao { display: none; }
.rdt-recebido .rdt-app-conf { display: flex; }

.rdt-p4-dir { position: absolute; left: 432px; top: 72px; width: 744px; display: flex; flex-direction: column; gap: 14px; }
.rdt-card-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rdt-card-topo .cartao-titulo { margin: 0; }
.rdt-card-topo .rdt-suave { margin: 0; }

.rdt-tl { position: relative; height: 150px; }
.rdt-tl-barra {
  position: absolute; height: 32px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; overflow: hidden;
  color: var(--branco); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.rdt-tl-barra.dia { top: 38px; background: var(--verde-sispeq); }
.rdt-tl-barra.noite { top: 78px; padding-left: 16px; background: var(--marinho); }
.rdt-tl-banda {
  position: absolute; top: 24px; height: 94px; border: 1.5px dashed var(--verde-sispeq); border-radius: 6px;
  background: var(--verde-claro);
}
.rdt-tl-banda-rot { position: absolute; top: 3px; left: 0; padding-right: 8px; text-align: right; font-size: 12px; font-weight: 700; color: var(--verde-profundo); box-sizing: border-box; }
.rdt-tl-ciente { position: absolute; top: 3px; height: 115px; width: 0; display: none; }
.rdt-tl-ciente::after { content: ""; position: absolute; left: -1px; top: 18px; bottom: 0; width: 2px; background: var(--menta); }
.rdt-tl-ponto {
  position: absolute; left: -9px; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--menta); color: var(--on-menta);
}
.rdt-tl-ciente-t { position: absolute; left: 14px; top: 1px; font-size: 11.5px; font-weight: 700; color: var(--verde-profundo); white-space: nowrap; }
.rdt-recebido .rdt-tl-ciente { display: block; }
.rdt-tl-eixo { position: absolute; left: 0; right: 0; top: 124px; height: 18px; }
.rdt-tl-tick { position: absolute; top: 0; font-size: 12px; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.rdt-tl-tick::before { content: ""; position: absolute; left: 0; top: -8px; height: 6px; width: 1px; background: var(--ui-borda); }

.rdt-reg-valor { display: inline-flex; }
.rdt-reg-espera { color: var(--texto-secundario); font-weight: 400; }
.rdt-reg-ok { display: none; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--raio-selo); background: var(--menta); color: var(--on-menta); font-weight: 700; }
.rdt-recebido .rdt-reg-espera { display: none; }
.rdt-recebido .rdt-reg-ok { display: inline-flex; }

.rdt-slots { position: relative; display: flex; align-items: stretch; gap: 14px; }
.rdt-slot {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; height: 84px; padding-top: 9px;
  border: 1.5px dashed var(--ui-borda); border-radius: 10px; background: var(--branco);
}
.rdt-slot.atual { border-style: solid; border-color: var(--verde-sispeq); background: var(--verde-claro); }
.rdt-slot-nome { font-size: 15px; font-weight: 700; }
.rdt-slot-dono { font-size: 11px; font-weight: 600; color: var(--verde-sispeq); visibility: hidden; }
.rdt-slot.atual .rdt-slot-dono { visibility: visible; }
.rdt-slots-seta { align-self: center; flex: none; font-size: 22px; color: var(--cinza-neutro); }
.rdt-ficha {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 8px;
  border-radius: var(--raio-selo); background: var(--marinho); color: var(--branco); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.rdt-p4-msg { margin-top: 6px; }


.rdt-j5 { left: 24px; top: 72px; width: 1152px; height: 704px; }
.rdt-hist { display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 14px; align-items: start; }
.rdt-hist-esq { display: flex; flex-direction: column; gap: 10px; }
.rdt-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.rdt-filtro { display: inline-flex; gap: 6px; padding: 5px 11px; border: 1px solid var(--ui-borda); border-radius: var(--raio-selo); background: var(--branco); font-size: 12px; }
.rdt-filtro-rot { color: var(--texto-secundario); }
.rdt-filtro-val { font-weight: 600; }
.rdt-hist-lista { display: flex; flex-direction: column; gap: 8px; }
.rdt-hist-nota { margin: 6px 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--texto-secundario); }
.rdt-pas {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; text-align: left; color: var(--grafite);
  border: 1px solid var(--ui-borda); border-radius: 10px; background: var(--branco);
}
.rdt-pas:hover { border-color: var(--verde-sispeq); }
.rdt-pas.ativo { border-color: var(--verde-sispeq); box-shadow: inset 4px 0 0 var(--verde-sispeq); background: var(--verde-claro); }
.rdt-pas-topo { display: flex; justify-content: space-between; align-items: baseline; }
.rdt-pas-data { font-size: 14px; font-weight: 700; }
.rdt-pas-hora { font-size: 12px; color: var(--texto-secundario); }
.rdt-pas-turnos { font-size: 12.5px; color: var(--grafite); }
.rdt-pas-base { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; font-size: 12px; }
.rdt-pas-rdo { color: var(--marinho); font-weight: 600; }
.rdt-pas-ciente { display: inline-flex; align-items: center; gap: 4px; color: var(--verde-sispeq); font-weight: 600; }

.rdt-det-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.rdt-det-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 17px; color: var(--verde-profundo); }
.rdt-det-ciente {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 9px; border-radius: var(--raio-selo);
  background: var(--menta); color: var(--on-menta); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.rdt-det-lista { display: flex; flex-direction: column; gap: 5px; }
.rdt-det-item { display: flex; flex-direction: column; gap: 1px; padding: 5px 10px 6px 11px; border-left: 3px solid var(--ui-borda); border-radius: 0 8px 8px 0; background: var(--ui-zebra); }
.rdt-det-item.critico { border-left-color: var(--vermelho); }
.rdt-det-tipo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--verde-profundo); }
.rdt-det-texto { font-size: 12.5px; line-height: 1.35; }
.rdt-det-recado { margin-top: 10px; padding: 8px 11px; border-radius: 8px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 12.5px; line-height: 1.4; }
.rdt-det-recado b { display: block; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1px; }
.rdt-hrdo { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--ui-borda); }
.rdt-hrdo-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.rdt-hrdo-topo .cartao-titulo { margin: 0; }
.rdt-hrdo-num { font-size: 13px; font-weight: 700; color: var(--marinho); }
.rdt-hrdo-rot { font-size: 12px; font-weight: 700; color: var(--aviso-texto); }
.rdt-hrdo-txt { font-size: 12.5px; line-height: 1.4; }

.rdt-registro .rdt-linha { font-size: 13.5px; padding: 5px 0; }
.rdt-tl-barra { font-size: 13px; }
.rdt-tl-ciente-t { font-size: 12px; }
.rdt-det-topo .rdt-suave { margin-left: 0; font-size: 12.5px; }


.cq-passo { position: absolute; inset: 0; visibility: hidden; opacity: 0; }
.cq-passo.ativo { visibility: visible; opacity: 1; }

.cq-janela { left: 24px; top: 72px; }
.cq-janela .app-lateral { width: 150px; }
.cq-janela .app-logo { width: 110px; }

.cq-legenda { position: absolute; left: 896px; top: 72px; width: 280px; color: var(--verde-claro); }
.cq-legenda-selo { margin-bottom: 14px; }
.cq-legenda-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--branco); margin: 0 0 18px; }
.cq-linhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.cq-linhas li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.cq-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 600;
  color: var(--branco); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 45%, transparent);
}
.cq-nota {
  margin-top: 22px; padding: 12px 14px; border-radius: 10px; font-size: 15px; font-weight: 600; line-height: 1.4;
  color: var(--branco); background: color-mix(in srgb, var(--branco) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--branco) 22%, transparent);
}
.cq-situacao { margin-top: 12px; font-size: 13.5px; line-height: 1.45; color: var(--verde-claro); opacity: 0.9; }

.cq-barra { display: flex; align-items: center; gap: 6px; height: 36px; }
.cq-barra-espaco { flex: 1; }
.cq-ferr {
  position: relative; display: inline-flex; height: 34px; border-radius: 8px; overflow: hidden;
  background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda);
  font-size: 12.5px; font-weight: 600; color: var(--ui-secao);
}
.cq-ferr-base, .cq-ferr-on { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; height: 100%; white-space: nowrap; }
.cq-ferr-on { position: absolute; inset: 0; background: var(--verde-sispeq); color: var(--branco); opacity: 0; }
.cq-ferr svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cq-barra .botao-demo { height: 34px; padding: 0 14px; white-space: nowrap; }
.cq-barra .botao-demo.cq-botao { transform-origin: 50% 50%; }

.cq-tela {
  position: relative; margin-top: 10px; border-radius: 10px; overflow: hidden;
  background-color: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda);
  background-image:
    linear-gradient(color-mix(in srgb, var(--ui-borda) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ui-borda) 55%, transparent) 1px, transparent 1px);
  background-size: 36px 36px;
}
.cq-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.cq-status {
  position: absolute; left: 14px; bottom: 10px; z-index: 2; height: 18px;
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 500; color: var(--grafite);
}
.cq-status span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }

.cq-obj { fill: none; stroke: var(--grafite); stroke-width: 3; stroke-linejoin: round; }
.cq-placa { fill: var(--ui-fundo); }
.cq-cota { fill: none; stroke: var(--verde-sispeq); stroke-width: 1.6; }
.cq-cota-seta { fill: var(--verde-sispeq); stroke: none; }
.cq-cota-txt { fill: var(--verde-sispeq); font-family: var(--fonte-mono); font-size: 13px; font-weight: 600; }
.cq-txt { fill: var(--grafite); font-family: var(--fonte-sans); font-size: 13px; font-weight: 600; }
.cq-txt-mono { fill: var(--grafite); font-family: var(--fonte-mono); font-size: 14px; font-weight: 700; }
.cq-txt-verde { fill: var(--verde-sispeq); font-family: var(--fonte-sans); font-size: 13.5px; font-weight: 700; }
.cq-fino { fill: none; stroke: var(--ui-secao); stroke-width: 1; }
.cq-ponta { fill: var(--marinho); stroke: var(--branco); stroke-width: 2; opacity: 0; }

.cq-resultado {
  position: relative; display: flex; align-items: center; gap: 14px; margin-top: 10px; height: 74px; padding: 9px 14px;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px;
}
.cq-mini { position: relative; flex: none; width: 92px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-mini svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-res-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cq-res-txt b { font-size: 13.5px; font-weight: 700; color: var(--grafite); }
.cq-res-txt span { font-size: 12px; color: var(--texto-secundario); }
.cq-arquivo { font-family: var(--fonte-mono); font-size: 12px; color: var(--grafite); }
.cq-ok {
  flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--raio-selo);
  background: var(--menta); color: var(--on-menta); font-size: 12px; font-weight: 700;
}
.cq-ok svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.cq-cad-acoes { display: flex; align-items: center; gap: 6px; height: 36px; }
.cq-cad-rodape { display: flex; align-items: center; gap: 14px; height: 34px; margin-top: 10px; }
.cq-cad-rodape .legenda { flex: 1; gap: 16px; }
.cq-cad-rodape .legenda i { border-radius: 50%; }
.cq-revisao { position: relative; display: inline-block; min-width: 56px; height: 24px; }
.cq-revisao span {
  position: absolute; right: 0; top: 0; padding: 4px 11px; border-radius: var(--raio-selo); white-space: nowrap;
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 600;
}
.cq-revisao .r0 { background: var(--ui-fundo); color: var(--texto-secundario); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-revisao .r1 { background: var(--verde-claro); color: var(--verde-sispeq); opacity: 0; }
.cq-aviso {
  position: absolute; right: 14px; top: 12px; z-index: 3; max-width: 330px; padding: 8px 14px; border-radius: var(--raio-selo);
  background: var(--grafite); color: var(--branco); font-size: 12.5px; font-weight: 600; opacity: 0; white-space: nowrap;
}

.cq-anexos-corpo { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.cq-anexos-topo { display: flex; align-items: center; gap: 10px; }
.cq-anexos-topo .secao-faixa { flex: 1; }
.cq-anexos-topo .botao-demo { white-space: nowrap; }
.cq-anexos-tabela { position: relative; }
.cq-anexos-tabela .tabela td { height: 70px; }
.cq-anexos-tabela .tabela tr.cq-linha td { opacity: 0; }
.cq-formato { display: inline-block; padding: 3px 10px; border-radius: var(--raio-selo); font-size: 11.5px; font-weight: 600; background: var(--marinho-fundo); color: var(--marinho); }
.cq-solta {
  height: 112px; border-radius: 10px; border: 1.5px dashed var(--ui-borda); background: var(--branco);
  display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--ui-secao); font-size: 13px; font-weight: 600;
}
.cq-voa {
  position: absolute; left: 0; top: 0; z-index: 5; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px;
  background: var(--branco); border-radius: 8px; box-shadow: var(--sombra-curta), inset 0 0 0 1px var(--ui-borda);
  font-family: var(--fonte-mono); font-size: 12px; font-weight: 600; color: var(--grafite); opacity: 0;
}
.cq-voa svg { width: 16px; height: 16px; fill: none; stroke: var(--verde-sispeq); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cq-fio { display: flex; align-items: center; gap: 0; margin-top: 26px; }
.cq-fio-no {
  flex: none; display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; min-width: 168px; text-align: center;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px;
}
.cq-fio-no small { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-secundario); }
.cq-fio-no b { font-family: var(--fonte-mono); font-size: 13px; font-weight: 600; color: var(--grafite); }
.cq-fio-lig { flex: 1; position: relative; height: 2px; background: var(--ui-borda); min-width: 24px; }
.cq-fio-lig i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--verde-sispeq); transform-origin: 0 50%; transform: scaleX(0); }

.cq-cel { left: 190px; top: 72px; }
.cq-cel .cel-tela { font-size: 12px; color: var(--grafite); }
.cq-c-cab { position: absolute; left: 0; right: 0; top: 0; height: 66px; background: var(--verde-sispeq); color: var(--branco); padding: 11px 16px; }
.cq-c-cab small { display: block; font-size: 11.5px; opacity: 0.9; }
.cq-c-cab b { display: block; margin-top: 5px; font-family: var(--fonte-mono); font-size: 17px; font-weight: 700; }
.cq-c-aviso {
  position: absolute; left: 0; right: 0; top: 66px; height: 36px; z-index: 3; padding: 0 14px; display: flex; align-items: center; gap: 9px;
  background: var(--grafite); color: var(--branco); font-size: 12px; font-weight: 600; opacity: 0;
}
.cq-c-aviso svg { width: 18px; height: 16px; flex: none; fill: none; stroke: var(--branco); stroke-width: 1.8; stroke-linecap: round; }
.cq-c-aviso svg path.cq-risco { stroke: var(--aviso-fundo); }
.cq-c-ref { position: absolute; left: 14px; right: 14px; top: 112px; height: 62px; padding: 9px 12px; background: var(--branco); border-radius: 12px; box-shadow: 0 1px 0 var(--ui-borda); line-height: 1.4; }
.cq-c-ref .mono { font-size: 12px; font-weight: 600; }
.cq-c-ref span.sec { color: var(--texto-secundario); }
.cq-c-rot { position: absolute; font-size: 11.5px; font-weight: 600; color: var(--texto-secundario); }
.cq-c-res { position: absolute; top: 204px; height: 44px; width: 137px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 14px; font-weight: 700; background: var(--branco); box-shadow: inset 0 0 0 2px var(--ui-borda); color: var(--grafite); overflow: hidden; }
.cq-c-res.a { left: 14px; }
.cq-c-res.b { left: 155px; }
.cq-c-res .on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--verde-sispeq); color: var(--branco); opacity: 0; }
.cq-c-bloco { position: absolute; top: 278px; width: 133px; height: 128px; border-radius: 12px; overflow: hidden; background: var(--ui-zebra); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-c-bloco.foto { left: 14px; }
.cq-c-bloco.croqui { left: 159px; background-color: var(--branco); background-image: linear-gradient(color-mix(in srgb, var(--ui-borda) 60%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--ui-borda) 60%, transparent) 1px, transparent 1px); background-size: 16px 16px; }
.cq-c-bloco svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-c-camera { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; color: var(--ui-secao); }
.cq-c-camera svg { position: static; width: 38px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.cq-c-foto { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ui-secao), var(--grafite) 45%, var(--ui-secao)); opacity: 0; }
.cq-c-foto i { position: absolute; left: 0; right: 0; top: 48px; height: 28px; border-top: 2px solid var(--grafite); border-bottom: 2px solid var(--grafite); background: repeating-radial-gradient(circle at 50% -40%, var(--papel-escuro) 0 3px, var(--borda) 3px 6px); }
.cq-c-traco { fill: none; stroke: var(--marinho); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cq-c-dedo { position: absolute; left: 0; top: 0; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: color-mix(in srgb, var(--branco) 45%, transparent); border: 2px solid var(--branco); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35); opacity: 0; z-index: 3; }
.cq-c-registrar { position: absolute; left: 14px; right: 14px; top: 420px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--verde-sispeq); color: var(--branco); font-size: 14px; font-weight: 700; }
.cq-c-fila { position: absolute; left: 14px; right: 14px; top: 482px; height: 112px; padding: 10px 12px; background: var(--branco); border-radius: 12px; box-shadow: 0 1px 0 var(--ui-borda), inset 0 0 0 1px var(--ui-borda); opacity: 0; }
.cq-c-fila-cab { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); }
.cq-c-fila-cab em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 11px; letter-spacing: 0; }
.cq-c-fila-item { margin-top: 9px; padding: 8px 10px; border-radius: 8px; background: var(--ui-fundo); line-height: 1.4; }
.cq-c-fila-item .mono { font-size: 12px; font-weight: 600; }
.cq-c-fila-item span.sec { display: block; color: var(--texto-secundario); font-size: 11.5px; }
.cq-c-fila-item span.est { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--aviso-texto); font-size: 11.5px; font-weight: 600; }
.cq-c-fila-item span.est svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.cq-anot { position: absolute; width: 270px; font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--branco); opacity: 0; }
.cq-anot.esq { text-align: right; }
.cq-anot-linha { position: absolute; height: 1.5px; background: color-mix(in srgb, var(--branco) 55%, transparent); transform-origin: 0 50%; opacity: 0; }

.cq-pipe { fill: none; stroke: var(--grafite); stroke-width: 5; stroke-linejoin: round; }
.cq-peca { fill: var(--grafite); stroke: var(--branco); stroke-width: 2; }
.cq-valvula { fill: var(--branco); stroke: var(--grafite); stroke-width: 2.6; stroke-linejoin: round; }
.cq-junta { fill: var(--verde-sispeq); stroke: var(--branco); stroke-width: 4; }
.cq-anel { fill: none; stroke: var(--verde-sispeq); stroke-width: 2; }
.cq-chip { fill: var(--verde-sispeq); }
.cq-chip-txt { fill: var(--branco); font-family: var(--fonte-mono); font-size: 12px; font-weight: 700; }
.cq-bloco { fill: var(--branco); stroke: var(--grafite); stroke-width: 1.2; }
.cq-leve { fill: var(--texto-secundario); font-family: var(--fonte-sans); font-size: 11.5px; font-weight: 600; }
.cq-aviso2 { position: absolute; right: 14px; top: 12px; z-index: 3; opacity: 0; white-space: nowrap; }

.cq-arq { display: flex; align-items: center; gap: 12px; }
.cq-mini2 { position: relative; flex: none; width: 72px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cq-mini2 svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cq-mini2.pdf i { position: absolute; right: 3px; bottom: 3px; padding: 1px 5px; border-radius: 3px; font-style: normal; font-size: 9px; font-weight: 700; background: var(--vermelho); color: var(--branco); }

.cq-c-flash { position: absolute; inset: 0; z-index: 2; background: var(--branco); opacity: 0; }
.cq-cel .cel-sinal { position: relative; display: inline-block; width: 22px; height: 16px; }
.cq-sinal { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.cq-barras { stroke: var(--ui-borda); stroke-width: 3; stroke-linecap: round; }
.cq-sinal .cq-risco { stroke: var(--vermelho); stroke-width: 2; stroke-linecap: round; }

.cq-solta svg { width: 24px; height: 24px; fill: none; stroke: var(--verde-sispeq); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cq-cad-rodape .legenda svg { width: 16px; height: 16px; flex: none; }
.cq-cad-rodape .legenda span { white-space: nowrap; }


.mapa { position: absolute; inset: 0; color: var(--grafite); }

.cap-mapa .botao-rever { top: auto; bottom: 12px; }

.mapa-banda {
  position: absolute; border-radius: 16px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.mapa-rotulo { position: absolute; color: var(--branco); }
.mapa-rotulo-nome { font-family: var(--fonte-display); font-weight: 800; font-size: 12px; line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; }
.mapa-rotulo-qtd { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--verde-claro); }
.mapa-rotulo-quando { margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--verde-claro); opacity: 0.8; }
.mapa-nota {
  position: absolute; display: flex; align-items: center; padding: 0 10px 0 14px;
  border-left: 3px solid rgba(255, 255, 255, 0.32); color: var(--verde-claro); font-size: 15px; line-height: 1.4;
}
.mapa-dica { position: absolute; left: 214px; bottom: 9px; font-size: 13px; font-weight: 600; color: var(--verde-claro); opacity: 0.92; }

.mapa-fio { position: absolute; background: var(--verde-claro); border-radius: 2px; }
.mapa-fio--h { height: 3px; }
.mapa-fio--v { width: 3px; transform-origin: 50% 0; }
.mapa-fio--h.dir-d { transform-origin: 0 50%; }
.mapa-fio--h.dir-e { transform-origin: 100% 50%; }
.mapa-fio::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-color: transparent; }
.mapa-fio--h.dir-d::after { right: -2px; top: -4px; border-width: 5.5px 0 5.5px 8px; border-left-color: var(--verde-claro); }
.mapa-fio--h.dir-e::after { left: -2px; top: -4px; border-width: 5.5px 8px 5.5px 0; border-right-color: var(--verde-claro); }
.mapa-fio--v::after { left: -4px; bottom: -3px; border-width: 8px 5.5px 0 5.5px; border-top-color: var(--verde-claro); }

.mapa-no { position: absolute; }
.mapa-cartao {
  position: relative; display: flex; flex-direction: column; gap: 7px; width: 100%; height: 100%; padding: 7px;
  text-align: left; color: var(--grafite); background: var(--branco);
  border: 1px solid var(--ui-borda); border-radius: 11px; box-shadow: var(--sombra-curta);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.mapa-cartao:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(4, 30, 21, 0.3); }
.mapa-cartao:focus-visible { outline: 3px solid var(--branco); outline-offset: 2px; }
.mapa-num {
  position: absolute; left: -8px; top: -8px; z-index: 2; min-width: 24px; height: 24px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  background: var(--verde-profundo); color: var(--branco); border: 2px solid var(--branco);
  font-family: var(--fonte-mono); font-size: 11.5px; font-weight: 700; line-height: 1;
}
.mapa-textos { display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 0 1px; }
.mapa-nome { font-size: 13.5px; font-weight: 700; line-height: 1.2; color: var(--verde-profundo); }
.mapa-sub { font-size: 11px; line-height: 1.25; color: var(--texto-secundario); }
.mapa-no.sel .mapa-cartao { border-color: var(--verde-sispeq); box-shadow: 0 0 0 3px var(--branco), 0 10px 22px rgba(4, 30, 21, 0.35); }
.mapa-no.sel .mapa-num { background: var(--verde-sispeq); }
.mapa.com-ficha .mapa-no:not(.sel) .mapa-cartao { opacity: 0.5; }
.mapa.com-ficha .mapa-no:not(.sel) .mapa-cartao:hover { opacity: 0.9; }

.mapa-mini {
  --u: 1px; position: relative; flex: 0 1 auto; display: flex; width: 100%; height: calc(54 * var(--u)); min-height: calc(32 * var(--u));
  border: 1px solid var(--ui-borda); border-radius: calc(5 * var(--u)); background: var(--ui-fundo); overflow: hidden;
}
.mapa-m-lat {
  flex: none; width: calc(15 * var(--u)); display: flex; flex-direction: column; gap: calc(2.5 * var(--u));
  padding: calc(4 * var(--u)) calc(3 * var(--u)); background: var(--branco); border-right: 1px solid var(--ui-borda);
}
.mapa-m-lat i { display: block; height: calc(2 * var(--u)); border-radius: var(--u); background: var(--ui-borda); }
.mapa-m-lat i.on { background: var(--verde-sispeq); }
.mapa-m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--u)); padding: calc(3 * var(--u)); }
.mapa-m-faixa { position: relative; flex: none; height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: var(--verde-sispeq); }
.mapa-m-faixa::after {
  content: ''; position: absolute; left: calc(3 * var(--u)); top: 50%; width: 36%; height: calc(2 * var(--u));
  margin-top: calc(-1 * var(--u)); border-radius: var(--u); background: var(--branco); opacity: 0.85;
}
.mapa-m-corpo { flex: 1; min-height: 0; display: flex; }

.mapa-m-b { flex: none; height: calc(2 * var(--u)); border-radius: var(--u); background: var(--cinza-plan); }
.mapa-m-b.w1 { width: 14%; } .mapa-m-b.w2 { width: 24%; } .mapa-m-b.w3 { width: 36%; } .mapa-m-b.w4 { width: 50%; } .mapa-m-b.w5 { width: 70%; }
.mapa-m-b.f { background: var(--cinza-neutro); }
.mapa-m-p { flex: none; width: calc(9 * var(--u)); height: calc(3.4 * var(--u)); margin-left: auto; border-radius: 99px; background: var(--ui-borda); }
.mapa-m-p.v { background: var(--verde-sispeq); }
.mapa-m-p.m { background: var(--marinho); }
.mapa-m-p.r { background: var(--vermelho); }
.mapa-m-p.c { background: var(--cinza-neutro); }

.mapa-m-tab { flex: 1; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.mapa-m-th { flex: none; height: calc(4 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--verde-sispeq); opacity: 0.7; }
.mapa-m-tr { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-tr.z { background: var(--ui-zebra); }
.mapa-m-tr, .mapa-m-li, .mapa-m-pfl { box-shadow: inset 0 0 0 1px var(--ui-borda); }

.mapa-m-empresa { flex: 1; display: flex; gap: calc(4 * var(--u)); }
.mapa-m-logo { position: relative; flex: none; width: calc(22 * var(--u)); border: 1px dashed var(--cinza-neutro); border-radius: calc(3 * var(--u)); background: var(--branco); }
.mapa-m-logo::after { content: ''; position: absolute; left: 24%; right: 24%; top: 36%; height: 28%; border-radius: calc(1.5 * var(--u)); background: var(--ui-borda); }
.mapa-m-col { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(2.2 * var(--u)); }
.mapa-m-campo { height: calc(5 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-campo.curto { width: 60%; }

.mapa-m-pf { flex: 1; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.mapa-m-pfl { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-av { flex: none; width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); border-radius: 50%; background: var(--verde-claro); box-shadow: inset 0 0 0 1px var(--verde-sispeq); }

.mapa-m-cts { flex: 1; display: flex; gap: calc(3 * var(--u)); }
.mapa-m-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: calc(3 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(2.5 * var(--u)); background: var(--branco); }
.mapa-m-n { height: calc(5 * var(--u)); width: 52%; border-radius: calc(1.5 * var(--u)); background: var(--verde-sispeq); opacity: 0.85; }
.mapa-m-ct:nth-child(2) .mapa-m-n { background: var(--marinho); width: 40%; }
.mapa-m-ct:nth-child(3) .mapa-m-n { background: var(--cinza-neutro); width: 64%; }
.mapa-m-ct .mapa-m-b { width: 80%; }
.mapa-m-ct .mapa-m-b + .mapa-m-b { width: 48%; margin-top: calc(1.5 * var(--u)); }

.mapa-m-ls { flex: 1; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }
.mapa-m-li { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-cx { flex: none; width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border: 1px solid var(--cinza-neutro); border-radius: calc(0.8 * var(--u)); }
.mapa-m-cx.ok { background: var(--verde-sispeq); border-color: var(--verde-sispeq); }

.mapa-m-dc { flex: 1; display: flex; gap: calc(4 * var(--u)); }
.mapa-m-pg { flex: none; width: calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(2.2 * var(--u)); padding: calc(3 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-pg .mapa-m-b { width: 100%; }
.mapa-m-pg .mapa-m-b.w4 { width: 56%; }
.mapa-m-its { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1.5 * var(--u)); }

.mapa-m-celular { flex: 1; display: flex; justify-content: center; align-items: flex-start; gap: calc(8 * var(--u)); }
.mapa-m-cel { flex: none; width: calc(22 * var(--u)); height: calc(56 * var(--u)); padding: calc(2 * var(--u)) calc(2 * var(--u)) 0; border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; background: var(--grafite); }
.mapa-m-cel-tela { height: 100%; display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(2 * var(--u)); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0; background: var(--ui-fundo); }
.mapa-m-cel-tela .mapa-m-faixa { height: calc(5 * var(--u)); }
.mapa-m-cel-tela .mapa-m-b { width: 100%; background: var(--ui-borda); }
.mapa-m-cel-tela .mapa-m-b.w4 { width: 60%; }
.mapa-m-lado { flex: none; width: calc(30 * var(--u)); padding-top: calc(4 * var(--u)); display: flex; flex-direction: column; gap: calc(3 * var(--u)); }

.mapa-m-fx { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: calc(3.5 * var(--u)); }
.mapa-m-fxl { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.mapa-m-fxp { position: relative; flex: 1; height: calc(7 * var(--u)); border-radius: 99px; background: var(--ui-borda); }
.mapa-m-fxp::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: calc(2 * var(--u)); margin-top: calc(-1 * var(--u)); border-radius: var(--u); background: var(--branco); opacity: 0.9; }
.mapa-m-fxp.a { background: var(--aviso-fundo); box-shadow: inset 0 0 0 1px var(--ambar); }
.mapa-m-fxp.a::after { background: var(--ambar); opacity: 0.7; }
.mapa-m-fxp.v { background: var(--verde-claro); box-shadow: inset 0 0 0 1px var(--verde-sispeq); }
.mapa-m-fxp.v::after { background: var(--verde-sispeq); opacity: 0.7; }
.mapa-m-seta { flex: none; width: 0; height: 0; border-style: solid; border-width: calc(2.4 * var(--u)) 0 calc(2.4 * var(--u)) calc(3.4 * var(--u)); border-color: transparent transparent transparent var(--cinza-neutro); }
.mapa-m-via { height: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); border: 1px dashed var(--verde-sispeq); background: var(--branco); }

.mapa-m-desenho { flex: 1; min-width: 0; border: 1px solid var(--ui-borda); border-radius: calc(2 * var(--u)); background: var(--branco); }
.mapa-m-svg { display: block; width: 100%; height: 100%; }
.mapa-m-svg .tr { fill: none; stroke: var(--marinho); stroke-width: 1.4; stroke-linejoin: round; }
.mapa-m-svg .co { fill: none; stroke: var(--cinza-neutro); stroke-width: 0.6; }
.mapa-m-svg .pt { fill: var(--branco); stroke: var(--marinho); stroke-width: 1; }

.mapa-m-gr { flex: 1; display: grid; grid-template-columns: repeat(9, 1fr); grid-auto-rows: 1fr; gap: calc(1.5 * var(--u)); }
.mapa-m-gc { border-radius: var(--u); background: var(--branco); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.mapa-m-gc.a { background: var(--verde-sispeq); box-shadow: none; }
.mapa-m-gc.b { background: var(--verde-claro); box-shadow: inset 0 0 0 1px var(--verde-sispeq); }
.mapa-m-gc.c { background: var(--marinho-fundo); box-shadow: inset 0 0 0 1px var(--marinho); }

.mapa-m-bs { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: calc(2 * var(--u)); }
.mapa-m-bl { flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); }
.mapa-m-bl .mapa-m-b { width: calc(16 * var(--u)); }
.mapa-m-bt { position: relative; flex: 1; height: calc(3.4 * var(--u)); border-radius: 99px; background: var(--ui-borda); overflow: hidden; }
.mapa-m-bf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--verde-sispeq); }

.mapa-m-gt { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: calc(2 * var(--u)); }
.mapa-m-gtl { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; gap: calc(3 * var(--u)); }
.mapa-m-gtl .mapa-m-b { width: calc(14 * var(--u)); }
.mapa-m-gtt { position: relative; flex: 1; height: calc(3.4 * var(--u)); }
.mapa-m-gtb { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--marinho); }
.mapa-m-gtb.v { background: var(--verde-sispeq); }

.mapa-m-ps { flex: 1; display: flex; align-items: flex-end; gap: calc(3.5 * var(--u)); padding-top: calc(3 * var(--u)); }
.mapa-m-pa { position: relative; flex: 1; height: 82%; border: 1px solid var(--verde-sispeq); border-radius: calc(1.5 * var(--u)); background: var(--verde-claro); }
.mapa-m-pa::before {
  content: ''; position: absolute; left: -1px; top: calc(-3 * var(--u) - 1px); width: 46%; height: calc(3 * var(--u));
  border: 1px solid var(--verde-sispeq); border-bottom: 0; border-radius: calc(1.5 * var(--u)) calc(1.5 * var(--u)) 0 0; background: var(--verde-claro);
}
.mapa-m-pdf { flex: none; width: calc(20 * var(--u)); height: 100%; display: flex; flex-direction: column; gap: calc(2.2 * var(--u)); padding: calc(3 * var(--u)); border: 1px solid var(--ui-borda); border-radius: calc(1.5 * var(--u)); background: var(--branco); }
.mapa-m-pdf .mapa-m-b { width: 100%; }
.mapa-m-pdf .mapa-m-b.w4 { width: 55%; }

.mapa-m-tl { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-left: calc(3 * var(--u)); }
.mapa-m-tl::before { content: ''; position: absolute; left: calc(4.4 * var(--u)); top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); width: 1px; background: var(--cinza-neutro); }
.mapa-m-tlr { position: relative; display: flex; align-items: center; gap: calc(3.5 * var(--u)); }
.mapa-m-pt { flex: none; width: calc(3.2 * var(--u)); height: calc(3.2 * var(--u)); border-radius: 50%; background: var(--verde-sispeq); box-shadow: 0 0 0 calc(1.2 * var(--u)) var(--ui-fundo); }
.mapa-m-tlr .mapa-m-b { width: 62%; }
.mapa-m-tlr:nth-child(2) .mapa-m-b { width: 44%; }
.mapa-m-tlr:nth-child(3) .mapa-m-b { width: 54%; }

.mapa-ficha {
  position: absolute; top: 28px; bottom: 34px; width: 500px; z-index: 8; display: none; flex-direction: column;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; overflow: hidden;
  box-shadow: var(--sombra-curta), 0 18px 40px rgba(4, 30, 21, 0.3);
}
.mapa-ficha.lado-d { right: 18px; }
.mapa-ficha.lado-e { left: 18px; }
.mapa-ficha-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.mapa-ficha-topo .secao-faixa { flex: 1; }
.mapa-ficha-fechar { flex: none; padding: 7px 12px; font-size: 12.5px; }
.mapa-ficha-cabeca { flex: none; display: flex; align-items: center; gap: 14px; padding: 4px 16px 10px; }
.mapa-ficha-previa { flex: none; width: 150px; }
.mapa-ficha-previa .mapa-mini { --u: 1.1px; }
.mapa-ficha-titulo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--fonte-display); font-weight: 800; font-size: 19px; line-height: 1.2; color: var(--verde-profundo); }
.mapa-ficha-n { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--verde-profundo); color: var(--branco); font-family: var(--fonte-mono); font-size: 13px; font-weight: 700; }
.mapa-ficha-corpo { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 10px; }
.mapa-ficha-lista { margin: 0; }
.mapa-ficha-linha { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--ui-borda); }
.mapa-ficha-linha:first-child { border-top: 0; }
.mapa-ficha-linha dt { padding-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); }
.mapa-ficha-linha dd { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--grafite); }
.mapa-ficha-legenda { margin-top: 6px; padding: 10px 12px; border-radius: 8px; background: var(--ui-fundo); }
.mapa-ficha-legenda-titulo { margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-secundario); }
.mapa-ficha-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mapa-chip { display: inline-block; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--grafite); }
.mapa-chip.vermelho { background: #FF7C80; }
.mapa-chip.azul { background: var(--marinho-fundo); box-shadow: inset 0 0 0 1px #C5D2E0; }
.mapa-chip.laranja { background: #FFC000; }
.mapa-chip.amarelo { background: #FFFF66; }
.mapa-chip.verde { background: #00B050; }
.mapa-ficha-aviso { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: 8px; background: var(--ui-fundo); font-size: 13.5px; line-height: 1.4; }
.mapa-ficha-aviso .selo-disp { flex: none; }
.mapa-ficha-rodape { flex: none; display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px 14px; border-top: 1px solid var(--ui-borda); }
.mapa-ficha-rodape .botao-demo { padding: 8px 14px; font-size: 12.5px; }


.contrato { position: absolute; inset: 0; color: var(--grafite); }

.contrato-passo {
  position: absolute; left: 24px; right: 24px; top: 72px; bottom: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.contrato-passo.ativo { opacity: 1; visibility: visible; transition: opacity 0.18s ease; }
.contrato.sem-transicao .contrato-passo,
.contrato.sem-transicao .contrato-passo.ativo { transition: none; }

.contrato-cartao {
  position: relative; background: var(--branco); border: 1px solid var(--ui-borda);
  border-radius: 12px; box-shadow: var(--sombra-curta);
}
.contrato-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--verde-sispeq); }
.contrato-titulo-cartao { margin: 0; font-family: var(--fonte-display); font-weight: 700; font-size: 18px; line-height: 1.2; color: var(--verde-profundo); }
.contrato-icone { display: inline-flex; }


.contrato-faixa { height: 30px; display: flex; align-items: center; gap: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.92); }
.contrato-faixa .selo-disp { font-size: 13px; padding: 4px 12px; }

.contrato-tela-configura { position: absolute; left: 0; right: 0; top: 42px; bottom: 0; display: flex; flex-direction: column; gap: 12px; }

.contrato-mascara { flex: none; height: 352px; padding: 14px 18px 30px; }
.contrato-masc-texto { margin: 3px 0 0; font-size: 15px; line-height: 1.35; }
.contrato-masc-fluxo { margin-top: 8px; display: grid; row-gap: 6px; }
.contrato-masc-linha { display: grid; grid-template-columns: 112px 352px 34px 1fr; column-gap: 8px; align-items: center; height: 108px; }
.contrato-masc-topo { height: 22px; align-items: end; }
.contrato-masc-legenda { font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ui-secao); }
.contrato-modelo { padding: 2px 0 2px 10px; border-left: 3px solid var(--verde-sispeq); font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--grafite); }
.contrato-mascara-seta { justify-self: center; color: var(--verde-sispeq); }

.contrato-xls { width: 352px; height: 104px; border-collapse: collapse; table-layout: fixed; background: var(--branco); font-size: 12px; }
.contrato-xls th, .contrato-xls td { height: 22px; padding: 0 5px; border: 1px solid var(--ui-borda); text-align: left; font-weight: 400; white-space: nowrap; overflow: hidden; }
.contrato-xls thead th { height: 16px; padding: 0; background: var(--ui-fundo); color: var(--texto-secundario); font-size: 10.5px; font-weight: 600; text-align: center; }
.contrato-xls tbody th { padding: 0; background: var(--ui-fundo); color: var(--texto-secundario); font-size: 10.5px; font-weight: 600; text-align: center; }
.contrato-xls thead th.contrato-xls-canto, .contrato-xls thead th:nth-child(1) { width: 20px; }
.contrato-xls thead th:nth-child(2) { width: 62px; }
.contrato-xls thead th:nth-child(3) { width: 102px; }
.contrato-xls thead th:nth-child(4) { width: 64px; }
.contrato-xls thead th:nth-child(5) { width: 104px; }
.contrato-xls td.contrato-xls-titulo { font-weight: 700; text-overflow: ellipsis; }
.contrato-xls-a td.contrato-xls-titulo { background: var(--verde-claro); color: var(--verde-profundo); }
.contrato-xls-b td.contrato-xls-titulo { background: var(--ui-fundo); color: var(--grafite); font-size: 11px; letter-spacing: 0.03em; text-transform: uppercase; }
.contrato-xls td.contrato-xls-rot { color: var(--texto-secundario); font-weight: 600; font-size: 11.5px; }
.contrato-chip {
  border: 0; border-radius: 4px; padding: 1px 5px; font-size: 11px; line-height: 1.4;
  background: var(--verde-claro); color: var(--verde-sispeq); box-shadow: inset 0 0 0 1px rgba(13, 107, 76, 0.28);
}
.contrato-chip:hover { box-shadow: inset 0 0 0 1px var(--verde-sispeq); }
.contrato-chip.ativo { background: var(--verde-sispeq); color: var(--branco); }

.contrato-rel {
  height: 108px; overflow: hidden; font-size: 12px;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 4px; box-shadow: 0 1px 4px rgba(4, 30, 21, 0.16);
}
.contrato-doc-rot { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; line-height: 1.3; text-transform: uppercase; color: var(--texto-secundario); }

.contrato-campo { display: inline-grid; align-items: center; justify-items: start; }
.contrato-campo > * { grid-area: 1 / 1; }
.contrato-marc { font-size: 11px; line-height: 1.35; padding: 0 4px; border-radius: 3px; background: var(--verde-claro); color: var(--verde-sispeq); white-space: nowrap; }
.contrato-val { font-size: 12px; font-weight: 600; line-height: 1.35; color: var(--grafite); white-space: nowrap; }
.contrato-campo.destaque .contrato-val { background: var(--marinho-fundo); box-shadow: 0 0 0 2px var(--marinho); border-radius: 3px; }

.contrato-a-faixa { height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: var(--verde-sispeq); color: var(--branco); }
.contrato-a-logo { flex: none; width: 44px; height: 26px; display: grid; place-items: center; border: 1px dashed rgba(255, 255, 255, 0.7); border-radius: 4px; font-size: 10px; font-weight: 600; }
.contrato-a-titulo { flex: 1; font-family: var(--fonte-display); font-weight: 700; font-size: 14px; line-height: 1.2; }
.contrato-a-num { flex: none; min-width: 104px; padding: 2px 8px; border-radius: 4px; background: var(--branco); color: var(--grafite); display: flex; flex-direction: column; align-items: flex-start; }
.contrato-a-num i, .contrato-b-num i { font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; color: var(--texto-secundario); }
.contrato-a-dados { display: grid; grid-template-columns: 168px 1fr 140px; gap: 2px 12px; padding: 5px 12px 0; }
.contrato-a-cel { min-width: 0; }

.contrato-b-topo { height: 37px; display: grid; grid-template-columns: 56px 1fr 130px; border-bottom: 1.5px solid var(--grafite); }
.contrato-b-logo { display: grid; place-items: center; border-right: 1.5px solid var(--grafite); font-size: 10px; font-weight: 600; color: var(--texto-secundario); }
.contrato-b-titulo { display: grid; place-items: center; padding: 0 10px; text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase; border-right: 1.5px solid var(--grafite); }
.contrato-b-num { padding: 2px 8px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.contrato-b-grade { display: grid; grid-template-columns: repeat(3, 1fr); }
.contrato-b-cel { height: 34px; min-width: 0; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--ui-secao); border-right: 1px solid var(--ui-secao); }
.contrato-b-cel.larga { grid-column: span 2; }
.contrato-b-cel:nth-child(2), .contrato-b-cel:nth-child(5) { border-right: 0; }
.contrato-b-cel:nth-child(n + 3) { border-bottom: 0; }

.contrato-tela-configura-baixo { flex: 1; min-height: 0; display: grid; grid-template-columns: 296px 330px 1fr; gap: 12px; }
.contrato-cfg-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.contrato-cfg { flex: 1; min-height: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.contrato-fichas { display: flex; flex-wrap: wrap; gap: 6px; }
.contrato-ficha { padding: 3px 9px; border-radius: 999px; background: var(--ui-fundo); box-shadow: inset 0 0 0 1px var(--ui-borda); font-size: 13px; font-weight: 600; line-height: 1.3; }
.contrato-regras { display: flex; flex-direction: column; gap: 8px; }
.contrato-regra { display: flex; flex-direction: column; gap: 1px; }
.contrato-regra-rot { font-size: 12.5px; color: var(--texto-secundario); }
.contrato-regra-val { font-size: 15px; font-weight: 700; }
.contrato-logo-linha { display: flex; align-items: center; gap: 12px; }
.contrato-logo-linha p { margin: 0; font-size: 13.5px; line-height: 1.35; }
.contrato-logo-amostra {
  flex: none; width: 62px; height: 40px; display: grid; place-items: center;
  border: 1.5px dashed var(--ui-secao); border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ui-secao);
}

.contrato-eng { padding: 16px 20px; border-left: 6px solid var(--verde-sispeq); display: flex; flex-direction: column; gap: 9px; }
.contrato-eng-titulo { margin: 0; font-family: var(--fonte-display); font-weight: 700; font-size: 19px; line-height: 1.25; color: var(--verde-profundo); }
.contrato-eng-bloco p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.4; }
.contrato-linhas { margin-top: 2px; display: grid; gap: 2px; }
.contrato-linha {
  width: 100%; height: 30px; padding: 0 2px; border: 0; border-bottom: 1.5px dashed var(--ui-secao); border-radius: 0;
  background: transparent; font: inherit; font-size: 15px; color: var(--grafite); outline: none;
}
.contrato-linha:focus { border-bottom: 1.5px solid var(--verde-sispeq); }


.contrato-tela-mudanca { position: absolute; inset: 0; }
.contrato-trilho { position: absolute; left: 0; right: 0; top: 12px; height: 46px; }
.contrato-trilho-base, .contrato-trilho-feito { position: absolute; left: 136.5px; width: 586px; top: 21px; height: 3px; border-radius: 2px; }
.contrato-trilho-base { background: rgba(255, 255, 255, 0.14); }
.contrato-trilho-feito { background: rgba(255, 255, 255, 0.92); transform-origin: 0 50%; }
.contrato-trilho-aberto { position: absolute; left: 722.5px; width: 293px; top: 21px; height: 0; border-top: 3px dashed rgba(255, 255, 255, 0.55); }
.contrato-nos { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contrato-no { justify-self: center; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.contrato-no-feito { background: var(--menta); color: var(--on-menta); }
.contrato-no-agora { background: var(--branco); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25); }
.contrato-no-ponto { width: 18px; height: 18px; border-radius: 50%; background: var(--verde-sispeq); }
.contrato-no-aberto { border: 3px dashed rgba(255, 255, 255, 0.65); }

.contrato-etapas { position: absolute; left: 0; right: 0; top: 94px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contrato-etapa {
  display: flex; flex-direction: column; overflow: hidden; min-height: 310px;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta);
}
.contrato-etapa-topo { padding: 20px 18px 16px; }
.contrato-etapa-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 24px; line-height: 1.15; color: var(--verde-profundo); }
.contrato-etapa-desc { margin-top: 8px; font-size: 18px; line-height: 1.4; }
.contrato-etapa-caso { flex: 1; padding: 14px 18px 18px; background: var(--ui-fundo); border-top: 1px solid var(--ui-borda); }
.contrato-etapa-data { margin-top: 8px; font-size: 23px; font-weight: 700; line-height: 1.1; }
.contrato-etapa-texto { margin-top: 6px; font-size: 17px; line-height: 1.4; }
.contrato-etapa-agora { box-shadow: 0 0 0 3px var(--branco), var(--sombra-curta); }
.contrato-etapa-aberto { background: rgba(255, 255, 255, 0.08); border: 1.5px dashed rgba(255, 255, 255, 0.5); box-shadow: none; color: var(--branco); }
.contrato-etapa-aberto .contrato-etapa-nome { color: var(--branco); }
.contrato-etapa-aberto .contrato-etapa-caso { background: transparent; border-top: 1.5px dashed rgba(255, 255, 255, 0.4); }
.contrato-etapa-aberto .contrato-rotulo { color: rgba(255, 255, 255, 0.8); }

.contrato-painel {
  position: absolute; left: 0; right: 0; top: 440px; height: 220px; padding: 0 28px;
  display: grid; grid-template-columns: 250px 1fr 270px; gap: 26px; align-items: center;
}
.contrato-painel-id { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contrato-painel-titulo { margin: 0; font-family: var(--fonte-display); font-weight: 800; font-size: 30px; line-height: 1.1; color: var(--verde-profundo); }
.contrato-painel .selo-disp { font-size: 14px; padding: 5px 14px; }
.contrato-painel-itens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.contrato-painel-item { padding: 22px 16px; border-radius: 10px; background: var(--verde-claro); color: var(--verde-profundo); font-size: 19px; font-weight: 700; line-height: 1.25; }
.contrato-painel-nota { margin: 0; font-size: 17px; line-height: 1.45; color: var(--texto-secundario); }


.contrato-tela-suporte { position: absolute; inset: 0; }
.contrato-sup-destaque {
  position: absolute; left: 0; right: 0; top: 56px; height: 112px; padding: 0 36px;
  display: flex; align-items: center; font-family: var(--fonte-display); font-weight: 800; font-size: 38px; letter-spacing: -0.01em; color: var(--verde-profundo);
}
.contrato-sup-caminho { position: absolute; left: 4px; top: 214px; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
.contrato-sup-fluxo { position: absolute; left: 0; right: 0; top: 252px; display: flex; align-items: stretch; }
.contrato-sup-no { flex: none; width: 282px; padding: 28px 24px; display: flex; flex-direction: column; gap: 18px; }
.contrato-sup-tec { width: 332px; }
.contrato-sup-origem { background: var(--ui-fundo); }
.contrato-sup-titulo { font-family: var(--fonte-display); font-weight: 700; font-size: 28px; line-height: 1.2; color: var(--verde-profundo); }
.contrato-sup-desc { margin: 0; font-size: 19px; line-height: 1.4; }
.contrato-pessoa { display: flex; align-items: center; gap: 14px; }
.contrato-avatar { flex: none; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--verde-sispeq); color: var(--branco); font-family: var(--fonte-display); font-weight: 800; font-size: 28px; }
.contrato-pessoa-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 29px; line-height: 1.1; color: var(--verde-profundo); }
.contrato-pessoa-papel { margin-top: 3px; font-size: 17px; line-height: 1.3; color: var(--texto-secundario); }
.contrato-sup-seta { flex: none; width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--branco); text-align: center; }
.contrato-sup-seta-larga { width: 178px; padding: 0 8px; }
.contrato-sup-seta-rot { font-size: 16px; line-height: 1.3; color: rgba(255, 255, 255, 0.92); }
.contrato-sup-escada { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.contrato-sup-nivel { padding: 6px 18px; border-radius: 999px; background: var(--verde-claro); color: var(--verde-sispeq); font-size: 18px; font-weight: 700; }
.contrato-sup-sobe { display: flex; align-items: center; gap: 10px; padding-left: 16px; font-size: 15px; line-height: 1.3; color: var(--texto-secundario); }
.contrato-sup-seta-baixo { color: var(--verde-sispeq); }


.comeco { position: absolute; inset: 0; color: var(--grafite); }

.comeco-topo { position: absolute; left: 40px; right: 40px; top: 32px; display: flex; align-items: baseline; gap: 18px; }
.comeco-titulo { margin: 0; font-family: var(--fonte-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; color: var(--verde-profundo); }
.comeco-sub { margin: 0; font-size: 18px; color: var(--texto-secundario); }

.comeco-fases { position: absolute; left: 40px; right: 40px; top: 92px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.comeco-seta {
  height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 40px 0 18px;
  background: var(--verde-sispeq); color: var(--branco);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%);
}
.comeco-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.22); font-family: var(--fonte-mono); font-size: 15px; font-weight: 500;
}
.comeco-seta-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 22px; }
.comeco-col { display: flex; flex-direction: column; }
.comeco-fase {
  flex: 1; margin-top: 14px; min-height: 178px; padding: 20px 22px;
  background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta);
}
.comeco-fase ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.comeco-fase li { position: relative; padding-left: 20px; font-size: 19px; line-height: 1.4; }
.comeco-fase li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 2px; background: var(--verde-sispeq); }

.comeco-cartao { position: absolute; top: 386px; height: 378px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta); }
.comeco-cartao-titulo { margin: 0 0 8px; font-family: var(--fonte-display); font-weight: 700; font-size: 21px; line-height: 1.2; color: var(--verde-profundo); }
.comeco-medidas { left: 40px; width: 724px; padding: 18px 22px 14px; }
.comeco-contato { left: 780px; width: 380px; padding: 18px 24px; }
.comeco-contato-texto { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; color: var(--texto-secundario); }

.comeco-medida { display: grid; grid-template-columns: 30px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--ui-borda); }
.comeco-medida-num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-claro); color: var(--verde-sispeq); font-family: var(--fonte-mono); font-size: 14px; font-weight: 500;
}
.comeco-medida-nome { font-size: 19px; font-weight: 600; line-height: 1.3; }
.comeco-medida-pedido { margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--texto-secundario); }
.comeco-medida .selo-disp { font-size: 12.5px; padding: 4px 12px; }
.comeco-meta { text-align: right; }
.comeco-meta-valor { font-family: var(--fonte-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--verde-sispeq); }
.comeco-meta-rot { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--texto-secundario); }
.comeco-pips { margin-top: 7px; display: flex; gap: 4px; justify-content: flex-end; }
.comeco-pip { position: relative; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--verde-sispeq); }
.comeco-pip i { position: absolute; inset: 0; border-radius: 50%; background: var(--verde-sispeq); }

.comeco-pessoa { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--ui-borda); }
.comeco-avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--verde-sispeq); color: var(--branco); font-family: var(--fonte-display); font-weight: 800; font-size: 24px;
}
.comeco-pessoa-nome { font-family: var(--fonte-display); font-weight: 700; font-size: 23px; line-height: 1.1; color: var(--verde-profundo); }
.comeco-pessoa-papel { margin-top: 3px; font-size: 16.5px; color: var(--texto-secundario); }

.cp-cena { position: absolute; inset: 0; }
.cp-celular { left: 24px; top: 92px; }

.cp-tela { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ui-fundo); }
.cp-topo { flex: none; display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px; background: var(--verde-sispeq); color: var(--branco); }
.cp-topo b { display: block; font-size: 15px; line-height: 1.2; }
.cp-topo span { display: block; font-size: 11px; opacity: 0.85; }
.cp-topo .cp-voltar { display: inline; font-size: 22px; line-height: 1; opacity: 0.9; }
.cp-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; overflow: hidden; }
.cp-campo { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 8px; }
.cp-campo span { font-size: 10px; color: var(--texto-secundario); }
.cp-campo b { font-size: 12px; }
.cp-secao { margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-sispeq); }
.cp-servico { display: flex; flex-direction: column; gap: 10px; padding: 10px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.cp-servico-topo { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12.5px; }
.cp-pil { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.cp-pil.cinza { background: #EEF0EF; color: var(--texto-secundario); }
.cp-pil.verde { background: var(--verde-claro); color: var(--verde-sispeq); }
.cp-pil.azul { background: var(--marinho-fundo); color: var(--marinho); }
.cp-pil.vazio { min-width: 64px; text-align: center; border: 1px dashed #C9D1CD; color: var(--texto-secundario); }
.cp-botao { display: block; padding: 9px 12px; border-radius: 8px; background: var(--verde-sispeq); color: var(--branco); font-size: 12.5px; font-weight: 700; text-align: center; }
.cp-botao.sec { background: var(--branco); color: var(--verde-profundo); box-shadow: inset 0 0 0 1px var(--ui-borda); }
.cp-junta { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 8px; font-size: 12px; }
.cp-resultado { padding: 6px 10px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-sispeq); font-size: 11.5px; font-weight: 700; }
.cp-anexos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-foto { position: relative; flex: none; height: 64px; border-radius: 8px; background: linear-gradient(135deg, #7D8D86, #3D4C46); }
.cp-foto span { position: absolute; left: 8px; bottom: 6px; font-size: 10px; font-weight: 600; color: var(--branco); }
.cp-croqui { flex: none; padding: 6px 8px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 8px; }
.cp-croqui-rot { font-size: 10px; color: var(--texto-secundario); }
.cp-croqui-svg { display: block; width: 100%; height: 84px; }
.cp-croqui-txt { font-family: var(--fonte-mono); font-size: 11px; font-weight: 700; fill: var(--verde-profundo); }
.cp-pronto { margin: 4px 0; font-size: 11.5px; line-height: 1.45; }
.cp-par { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-secundario); }
.cp-res { display: flex; flex-direction: column; gap: 5px; padding: 10px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.cp-res-topo { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.cp-res-linha { font-size: 11px; color: var(--texto-secundario); }
.cp-res-linha:empty { display: none; }
.cp-res-linha.forte { font-weight: 700; color: var(--verde-profundo); }

.cp-janela { left: 372px; top: 92px; width: 808px; height: 600px; }
.cp-filtros { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.cp-filtro { padding: 4px 8px; background: var(--branco); border: 1px solid #C9D1CD; border-radius: 6px; }
.cp-filtro span { display: block; font-size: 9.5px; color: var(--texto-secundario); }
.cp-filtro b { font-size: 11.5px; }
.cp-tabela { background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; overflow: hidden; }
.cp-cab, .cp-linha { display: grid; grid-template-columns: 40px 120px 86px 66px 1fr 112px; column-gap: 6px; align-items: center; padding: 0 10px; }
.cp-cab { height: 32px; background: var(--verde-sispeq); color: var(--branco); font-size: 11px; font-weight: 600; }
.cp-linha { height: 56px; font-size: 11.5px; }
.cp-doc span { display: block; }
.cp-doc em { display: block; font-style: normal; font-size: 10px; color: var(--texto-secundario); }
.cp-juntas span { display: block; font-size: 11px; line-height: 1.35; }
.cp-tab-corpo { position: relative; }
.cp-vazio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--branco); font-size: 12px; font-weight: 600; }
.cp-gerar { display: inline-block; padding: 6px 10px; border-radius: 6px; background: var(--verde-sispeq); color: var(--branco); font-size: 11px; font-weight: 700; white-space: nowrap; }
.cp-rel { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 12px 14px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.cp-rel-topo { display: flex; align-items: baseline; gap: 10px; }
.cp-rel-topo b { font-size: 15px; }
.cp-rel-topo span { font-size: 11.5px; color: var(--texto-secundario); }
.cp-ciclo { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.cp-etapa { position: relative; padding: 6px 11px; border-radius: 99px; background: #EEF0EF; color: var(--texto-secundario); font-size: 11px; font-weight: 700; }
.cp-etapa:not(:last-child)::after { content: '→'; position: absolute; right: -17px; top: 5px; color: var(--cinza-neutro); font-weight: 400; }
.cp-etapa.depois { background: transparent; box-shadow: inset 0 0 0 1px #C9D1CD; }
.cp-etapa.feita { background: var(--verde-claro); color: var(--verde-sispeq); }
.cp-etapa.atual { background: var(--aviso-fundo); color: var(--aviso-texto); box-shadow: 0 0 0 2px #E8C98A; }
.cp-nota { left: 372px; top: 712px; width: 808px; }

.qa-janela { left: 20px; top: 66px; width: 1160px; height: 718px; }
.qa-janela .app-corpo { padding: 0; }
.qa-gaveta { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--branco); }
.qa-cab { flex: none; display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 18px; background: var(--verde-sispeq); color: var(--branco); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.qa-fechar { font-size: 20px; font-weight: 400; opacity: 0.9; }
.qa-conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; }
.qa-rotulo { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-secundario); }
.qa-sub { margin-top: 4px; color: var(--verde-sispeq); }

.qa-resumo { flex: none; display: flex; align-items: center; gap: 22px; padding: 12px 18px; background: #F3F7F5; border: 1px solid var(--ui-borda); border-radius: 10px; }
.qa-rosca { width: 112px; height: 112px; flex: none; }
.qa-rosca-num { font-family: var(--fonte-display); font-size: 20px; font-weight: 800; fill: var(--grafite); }
.qa-rosca-rot { font-family: var(--fonte-sans); font-size: 9px; fill: var(--texto-secundario); }
.qa-barras { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.qa-blinha { display: grid; grid-template-columns: 170px 1fr 104px; gap: 12px; align-items: center; font-size: 11.5px; }
.qa-btrilho { position: relative; height: 8px; border-radius: 4px; background: #E3E8E5; overflow: hidden; }
.qa-btrilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.qa-bnum { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qa-bnum em { font-style: normal; color: var(--texto-secundario); }
.qa-ensaios { flex: none; width: 250px; display: flex; flex-direction: column; gap: 6px; padding-left: 18px; border-left: 1px solid var(--ui-borda); }
.qa-ens { display: grid; grid-template-columns: 24px 70px 1fr; gap: 8px; align-items: center; font-size: 11px; }
.qa-ens span { color: var(--texto-secundario); white-space: nowrap; }

.qa-abas { flex: none; display: flex; gap: 18px; border-bottom: 1px solid var(--ui-borda); }
.qa-abas span { padding: 6px 0 8px; font-size: 11.5px; font-weight: 600; color: var(--ui-secao); }
.qa-abas span.ativo { color: var(--verde-sispeq); box-shadow: inset 0 -2px 0 var(--verde-sispeq); }
.qa-busca { flex: none; padding: 7px 12px; border: 1px solid #C9D1CD; border-radius: 6px; font-size: 11.5px; color: var(--texto-secundario); }
.qa-tab { font-size: 11.5px; }
.qa-tab th { padding: 7px 10px; font-size: 11px; }
.qa-tab td { height: 33px; }
.qa-tab tr.qa-foco td { background: #FFF8E6; }
.qa-mini { font-size: 10.5px; }
.qa-sit { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.qa-sit::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qa-sit-aguardando { background: #EEF0EF; color: #5B6660; }
.qa-sit-preparacao { background: #E8F0FA; color: #3F6FA8; }
.qa-sit-aguardaInsp { background: var(--marinho-fundo); color: var(--marinho); }
.qa-sit-inspecao { background: var(--aviso-fundo); color: var(--aviso-texto); }
.qa-sit-reparo { background: var(--vermelho-fundo); color: var(--vermelho); }
.qa-sit-liberada { background: var(--verde-claro); color: var(--verde-sispeq); }
.qa-ensaios-cel { display: inline-flex; gap: 4px; }
.qa-ensaio { display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; border: 1px solid; }
.qa-ensaio.ok { background: var(--verde-claro); color: var(--verde-sispeq); border-color: #BFDCCD; }
.qa-ensaio.falta { background: #F1F3F2; color: #6B7671; border-color: #D9DFDC; }
.qa-ensaio.reprovado { background: var(--vermelho-fundo); color: var(--vermelho); border-color: #F0C2BE; }
.qa-etapa { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; }
.qa-etapa-planejada { background: #EEF0EF; color: #5B6660; }
.qa-etapa-torqueada { background: var(--marinho-fundo); color: var(--marinho); }
.qa-etapa-liberada { background: var(--verde-claro); color: var(--verde-sispeq); }
.qa-av-cel { display: grid; grid-template-columns: 1fr 40px; gap: 8px; align-items: center; min-width: 120px; }
.qa-av-cel b { text-align: right; font-size: 11px; }

.qa-th-topo { display: flex; justify-content: space-between; align-items: center; }
.qa-campos { display: flex; gap: 22px; font-size: 12px; color: var(--texto-secundario); }
.qa-campos b { color: var(--grafite); }
.qa-etiqueta { padding: 4px 12px; border-radius: 99px; background: #EEF0EF; color: var(--ui-secao); font-size: 11px; font-weight: 700; }
.qa-etiqueta.simulacao { background: var(--marinho); color: var(--branco); }
.qa-de-onde { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-profundo); font-size: 12.5px; font-weight: 600; }
.qa-bloco { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--ui-borda); border-radius: 10px; }
.qa-selo-th { padding: 2px 9px; border-radius: 99px; background: #8B5508; color: var(--branco); font-size: 10.5px; letter-spacing: 0; text-transform: none; }
.qa-selo-th.liberado { background: var(--verde-sispeq); }
.qa-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.qa-kpi { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; background: var(--ui-fundo); border-radius: 8px; }
.qa-kpi span { font-size: 10.5px; color: var(--texto-secundario); }
.qa-kpi b { font-family: var(--fonte-display); font-size: 22px; font-weight: 800; }
.qa-chips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.qa-chip { padding: 6px 0; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 700; background: var(--aviso-fundo); color: var(--aviso-texto); transition: none; }
.qa-chip.liberada { background: var(--verde-claro); color: var(--verde-sispeq); }
.qa-av { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; align-items: center; }
.qa-av-num { font-family: var(--fonte-display); font-size: 26px; font-weight: 800; }
.qa-av-trilho { height: 14px; border-radius: 7px; }
.qa-av-trilho i { background: var(--verde-sispeq); border-radius: 7px; }
.qa-av-nota { font-size: 11.5px; font-weight: 700; color: var(--verde-sispeq); }

.ve-janela { left: 20px; top: 66px; width: 1160px; height: 718px; }
.ve-janela .app-corpo { padding: 0; }
.ve-vista { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--branco); }
.ve-cab { flex: none; display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 18px; background: var(--verde-sispeq); color: var(--branco); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ve-fechar { font-size: 20px; font-weight: 400; opacity: 0.9; }
.ve-conteudo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; overflow: hidden; }
.ve-rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-secundario); }
.ve-sit { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.ve-sit-vencido { background: var(--vermelho-fundo); color: var(--vermelho); }
.ve-sit-em30 { background: var(--aviso-fundo); color: var(--aviso-texto); }
.ve-sit-em90 { background: var(--marinho-fundo); color: var(--marinho); }

.ve-resumo { flex: none; display: flex; align-items: center; gap: 22px; padding: 12px 18px; background: #F3F7F5; border: 1px solid var(--ui-borda); border-radius: 10px; }
.ve-rosca { width: 112px; height: 112px; flex: none; }
.ve-rosca-num { font-family: var(--fonte-display); font-size: 24px; font-weight: 800; fill: var(--grafite); }
.ve-rosca-rot { font-family: var(--fonte-sans); font-size: 8.5px; fill: var(--texto-secundario); }
.ve-barras { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ve-blinha { display: grid; grid-template-columns: 150px 1fr 80px; gap: 12px; align-items: center; font-size: 11.5px; }
.ve-blinha b { text-align: right; font-variant-numeric: tabular-nums; }
.ve-btrilho { position: relative; height: 9px; border-radius: 5px; background: #E3E8E5; overflow: hidden; }
.ve-btrilho i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.ve-abas { flex: none; display: flex; gap: 16px; border-bottom: 1px solid var(--ui-borda); }
.ve-abas span { padding: 6px 0 8px; font-size: 11.5px; font-weight: 600; color: var(--ui-secao); }
.ve-abas span.ativo { color: var(--verde-sispeq); box-shadow: inset 0 -2px 0 var(--verde-sispeq); }
.ve-busca { flex: none; padding: 7px 12px; border: 1px solid #C9D1CD; border-radius: 6px; font-size: 11.5px; color: var(--texto-secundario); }
.ve-tab { font-size: 11.5px; }
.ve-tab th { padding: 7px 10px; font-size: 11px; }
.ve-tab td { height: 29px; }

.ve-grade { display: grid; grid-template-columns: 430px 1fr; gap: 14px; }
.ve-coluna { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.ve-cartao { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ui-borda); border-radius: 10px; background: var(--branco); box-shadow: 0 2px 8px rgba(4, 30, 21, 0.06); }
.ve-tela { flex: none; padding: 7px 12px; background: var(--verde-profundo); color: var(--branco); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.ve-cartao-corpo { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 12px 14px; }
.ve-aviso-tit { font-size: 13px; font-weight: 700; color: var(--verde-profundo); }
.ve-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #E7ECE9; border-radius: 8px; }
.ve-item b { display: block; font-size: 12px; }
.ve-item span:not(.ve-sit) { display: block; font-size: 10.5px; color: var(--texto-secundario); }
.ve-alerta { display: flex; gap: 8px; padding: 9px 12px; border-radius: 8px; background: #F7F1E6; color: #5C3B00; font-size: 12px; line-height: 1.4; }
.ve-alerta::before { content: '⚠'; color: #8B5508; }
.ve-hg { position: relative; display: flex; align-items: flex-end; gap: 14px; height: 140px; padding: 0 6px; }
.ve-hg-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ve-hg-col i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: #2FA3C7; }
.ve-hg-col i.acima { background: var(--vermelho); }
.ve-hg-col span { font-size: 10px; color: var(--texto-secundario); }
.ve-hg-limite { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--grafite); }
.ve-hg-limite span { position: absolute; right: 0; top: -18px; font-size: 10px; font-weight: 700; color: var(--grafite); background: var(--branco); padding: 0 4px; }
.ve-lote { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.ve-selo-lote { padding: 2px 9px; border-radius: 99px; background: var(--vermelho); color: var(--branco); font-size: 10.5px; font-weight: 700; }
.ve-restricao { padding: 9px 12px; border-radius: 8px; background: var(--vermelho-fundo); color: var(--vermelho); font-size: 12px; font-weight: 600; }

.ve-form { display: flex; flex-direction: column; gap: 12px; width: 720px; padding: 16px 18px; border: 1px solid var(--ui-borda); border-radius: 10px; }
.ve-form-topo { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.ve-rascunho { padding: 3px 10px; border-radius: 99px; background: #EEF0EF; color: var(--texto-secundario); font-size: 11px; font-weight: 700; }
.ve-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ve-campo { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border: 1px solid #C9D1CD; border-radius: 6px; }
.ve-campo > span { font-size: 10px; color: var(--texto-secundario); }
.ve-valor { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ve-valor em { font-style: normal; font-size: 10.5px; color: var(--texto-secundario); }
.ve-campo.com-erro { border-color: var(--vermelho); box-shadow: 0 0 0 2px rgba(179, 38, 30, 0.15); }
.ve-acoes { display: flex; justify-content: flex-end; }
.ve-botao { display: inline-block; padding: 9px 16px; border-radius: 8px; background: var(--verde-sispeq); color: var(--branco); font-size: 12.5px; font-weight: 700; }
.ve-erro { padding: 10px 14px; border-radius: 8px; background: var(--vermelho-fundo); color: var(--vermelho); font-size: 12.5px; font-weight: 600; line-height: 1.4; }

.pl-janela { position: absolute; left: 20px; top: 66px; width: 1160px; height: 718px; overflow: hidden; border-radius: 12px; }
.pl-app { left: 0; top: 0; width: 100%; height: 100%; }
.pl-app .app-menu li.pl-botao { position: relative; background: var(--verde-sispeq); color: var(--branco); font-weight: 700; }
.pl-app-corpo { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.pl-app-caixa { padding: 12px 16px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.pl-app-tit { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--verde-profundo); }
.pl-app-lin { display: grid; grid-template-columns: 70px 210px 1fr 60px 140px; align-items: center; column-gap: 12px; height: 40px; border-top: 1px solid #EDF1EF; font-size: 12px; }
.pl-app-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-app-barra { height: 10px; border-radius: 5px; background: #DCE3DF; overflow: hidden; }
.pl-app-barra b { display: block; height: 100%; background: var(--verde-sispeq); }
.pl-app-num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

.pl-espaco { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; overflow: hidden; color: var(--grafite); font-size: 12px; }
.pl-espaco > .ficticio { right: 12px; bottom: 5px; left: auto; top: auto; }
.pl-topo { flex: none; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-bottom: 1px solid #E7ECE9; }
.pl-nav { color: var(--texto-secundario); font-size: 14px; }
.pl-atalho { padding: 6px 12px; border: 1px solid var(--ui-borda); border-radius: 8px; font-size: 11px; font-weight: 700; }
.pl-menu { flex: none; display: flex; align-items: center; gap: 18px; height: 24px; padding: 0 12px; border-bottom: 1px solid #E7ECE9; font-size: 11.5px; }
.pl-menu b { color: var(--verde-sispeq); }
.pl-ferr { flex: none; display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-bottom: 1px solid #E7ECE9; }
.pl-ferr-ic, .pl-rail-ic { display: inline-flex; width: 18px; height: 18px; padding: 2px; color: var(--grafite); border-radius: 4px; }
.pl-ferr-ic svg, .pl-rail-ic svg { width: 100%; height: 100%; }
.pl-ferr-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--ui-borda); }
.pl-abas { flex: none; display: flex; align-items: flex-end; gap: 16px; height: 26px; padding: 0 12px; border-bottom: 1px solid #E7ECE9; font-size: 11.5px; font-weight: 600; }
.pl-aba { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 2px solid transparent; color: var(--grafite); }
.pl-aba.ativo { color: var(--verde-sispeq); border-bottom-color: var(--verde-sispeq); font-weight: 700; }
.pl-aba-x { font-style: normal; color: var(--texto-secundario); }
.pl-meio { flex: 1; min-height: 0; display: flex; }
.pl-rail { flex: none; width: 34px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: 8px; border-right: 1px solid #E7ECE9; }
.pl-rail.dir { border-right: 0; border-left: 1px solid #E7ECE9; }
.pl-rail-ic { width: 24px; height: 24px; padding: 4px; }
.pl-rail-ic.ativo { background: var(--verde-claro); color: var(--verde-sispeq); }
.pl-area { position: relative; flex: 1; min-width: 0; background: var(--ui-fundo); }
.pl-situacao { flex: none; display: flex; align-items: center; gap: 22px; height: 24px; padding: 0 12px; border-top: 1px solid #E7ECE9; font-size: 11px; color: var(--ui-secao); }

.pl-painel { position: absolute; inset: 0; }
.pl-rola { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; overflow: hidden; }
.pl-cron { display: flex; flex-direction: column; background: var(--branco); }
.pl-filtros { flex: none; display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; }
.pl-caixa { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 150px; padding: 2px 10px; border: 1px solid #C9D1CD; border-radius: 6px; background: var(--branco); }
.pl-caixa span { font-size: 9px; color: var(--texto-secundario); }
.pl-caixa b { font-size: 11px; font-weight: 500; }
.pl-caixa.busca { min-width: 190px; height: 28px; }
.pl-ajustar { padding: 4px 9px; border: 1px solid var(--verde-sispeq); border-radius: 6px; font-size: 10.5px; font-weight: 700; color: var(--verde-sispeq); }
.pl-conta { font-size: 11px; color: var(--ui-secao); }
.pl-cron-tab { flex: none; display: flex; flex-direction: column; border-top: 1px solid var(--ui-borda); }
.pl-cron-cab, .pl-lin { display: grid; grid-template-columns: 44px 236px 42px 42px 40px 44px 644px; }
.pl-cron-cab { height: 40px; background: #0D6B4C; color: var(--branco); font-size: 10.5px; font-weight: 700; align-items: center; }
.pl-cron-cab .pl-g { height: 40px; border-left: 2px solid var(--branco); }
.pl-meses, .pl-semanas { position: absolute; left: 0; right: 0; height: 20px; }
.pl-meses { top: 0; }
.pl-semanas { top: 20px; background: rgba(0, 0, 0, 0.14); }
.pl-mes, .pl-sem { position: absolute; top: 4px; font-size: 9.5px; white-space: nowrap; }
.pl-sem { font-weight: 500; }
.pl-c { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-c2, .pl-c3, .pl-c4 { text-align: right; }
.pl-cron-corpo { position: relative; }
.pl-lin { position: relative; align-items: center; height: 19px; border-top: 1px solid #EDF1EF; font-size: 10.5px; }
.pl-lin-obra { background: #DDE7E2; font-weight: 700; }
.pl-lin-fase { background: #EDF3F0; font-weight: 700; }
.pl-lin.sel { background: #DCE5F0; }
.pl-lin.crit .pl-c0 { color: var(--vermelho); font-weight: 700; }
.pl-g { position: relative; display: block; height: 100%; }
.pl-g-resumo { position: absolute; top: 7px; height: 5px; background: var(--grafite); }
.pl-g-barra { position: absolute; top: 3px; height: 10px; background: #7FB8A3; overflow: hidden; }
.pl-g-barra b { position: absolute; left: 0; top: 0; bottom: 0; background: #0D6B4C; }
.pl-g-barra.crit { background: var(--vermelho); }
.pl-g-base { position: absolute; top: 14px; height: 2px; background: #9AA5A0; }
.pl-g-marco { position: absolute; top: 5px; width: 9px; height: 9px; background: #0D6B4C; transform: rotate(45deg); }
.pl-g-rot { position: absolute; top: 3px; font-size: 9.5px; font-weight: 400; white-space: nowrap; }
.pl-setas { position: absolute; left: 448px; top: 0; pointer-events: none; }
.pl-setas svg { display: block; }
.pl-hoje { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed var(--vermelho); }
.pl-semana { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid #E3E8E5; }
.pl-detalhe { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 0 10px; border-top: 3px solid #E1E7E4; }
.pl-det-abas { flex: none; display: flex; align-items: center; gap: 18px; height: 26px; border-bottom: 1px solid #EDF1EF; font-size: 11px; font-weight: 600; color: var(--ui-secao); }
.pl-det-abas .ativo { color: var(--verde-sispeq); font-weight: 700; }
.pl-det-tit { margin-left: 10px; color: var(--grafite); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-campos { flex: none; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 10px; }
.pl-campo { display: flex; flex-direction: column; padding: 3px 9px; border: 1px solid #C9D1CD; border-radius: 6px; min-width: 0; }
.pl-campo span { font-size: 9px; color: var(--texto-secundario); }
.pl-campo b { font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-det-nota { font-size: 10.5px; font-weight: 700; color: var(--verde-sispeq); }

.pl-cartoes { flex: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.pl-cartao { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; min-width: 0; }
.pl-cartao span { font-size: 11px; color: var(--ui-secao); }
.pl-cartao b { font-size: 20px; font-weight: 800; white-space: nowrap; }
.pl-cartao.ruim b { color: var(--vermelho); }
.pl-cartoes.seis .pl-cartao b { font-size: 16px; }
.pl-acoes { flex: none; display: flex; align-items: center; gap: 10px; }
.pl-acoes .pl-caixa { min-width: 210px; padding: 4px 10px; }
.pl-botao-verde { padding: 7px 14px; border-radius: 8px; background: #0D6B4C; color: var(--branco); font-size: 11.5px; font-weight: 700; }
.pl-caixa-branca { padding: 10px 14px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.pl-tit { margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--verde-sispeq); }
.pl-tab { font-size: 11.5px; }
.pl-tab th { padding: 7px 8px; font-size: 11px; background: #0D6B4C; }
.pl-tab td { height: 32px; padding: 0 8px; }
.pl-nome-td { display: block; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-muda { display: inline-block; margin-right: 4px; padding: 2px 7px; border-radius: 99px; background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 10px; font-weight: 700; }
.pl-nota { flex: none; padding: 10px 14px; border-radius: 10px; font-size: 13px; }
.pl-nota.forte { background: var(--vermelho-fundo); color: var(--vermelho); font-weight: 700; }
.pl-nota-linha { margin-top: 6px; font-size: 11.5px; color: var(--ui-secao); }
.pl-acoes .pl-nota-linha { margin-top: 0; }

.pl-rec-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.pl-rec { display: flex; flex-direction: column; min-height: 0; }
.pl-rec-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.pl-rec-topo span { font-size: 11px; color: var(--ui-secao); }
.pl-rec-area { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 12px; min-height: 0; }
.pl-rec-limite { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed var(--vermelho); z-index: 1; }
.pl-rec-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pl-rec-barra { display: block; width: 100%; max-width: 54px; background: #0D6B4C; border-radius: 3px 3px 0 0; }
.pl-rec-barra.acima { background: var(--vermelho); }
.pl-rec-num { font-size: 10.5px; font-weight: 700; }
.pl-rec-num.acima { color: var(--vermelho); }
.pl-rec-sem { height: 16px; font-size: 10px; color: var(--ui-secao); }

.pl-cus-lin { display: grid; grid-template-columns: 34px 1fr 60px; align-items: center; column-gap: 10px; height: 26px; font-size: 11.5px; }
.pl-cus-lin b { text-align: right; }
.pl-cus-trilho { height: 12px; border-radius: 6px; background: #E7ECE9; overflow: hidden; }
.pl-cus-barra { display: block; height: 100%; background: #8A9590; }
.pl-cus-barra.va { background: #0D6B4C; }
.pl-cus-barra.cr { background: #C27C0E; }
.pl-total td { font-weight: 700; }

.pl-tab-port td { height: 37px; }
.pl-niv0 td:first-child { font-weight: 700; }
.pl-niv1 td:first-child { padding-left: 26px; font-weight: 700; }
.pl-niv2 td:first-child { padding-left: 48px; }

.pl-cartoes.tres .pl-cartao b { font-size: 22px; }
.pl-ris { flex: 1; min-height: 0; display: flex; gap: 10px; }
.pl-ris-mz { flex: none; width: 300px; }
.pl-ris-lista { flex: 1; min-width: 0; }
.pl-matriz { display: grid; grid-template-columns: 24px repeat(5, 1fr); grid-auto-rows: 44px; gap: 5px; }
.pl-mz-eixo { align-self: center; justify-self: center; font-size: 10.5px; color: var(--ui-secao); }
.pl-mz { display: flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--branco); font-size: 14px; font-weight: 700; }
.pl-mz.baixa { background: #3F8A67; }
.pl-mz.media { background: #B07D2E; }
.pl-mz.alta { background: #C2504A; }
.pl-ris-txt { font-weight: 600; line-height: 1.25; }
.pl-ris-resp { font-size: 10.5px; line-height: 1.25; color: var(--ui-secao); }
.pl-ris-lista .pl-tab td { height: 62px; }
.pl-ris-ativ { color: var(--verde-sispeq); font-weight: 700; }

.pl-port { display: grid; grid-template-columns: 330px 1fr; gap: 10px; padding: 10px; box-sizing: border-box; overflow: hidden; }
.pl-port .pl-caixa-branca { min-height: 0; margin: 0; }
.pl-port-graf { display: flex; flex-direction: column; gap: 8px; }
.pl-port-area { flex: 1; min-height: 0; }
.pl-port-sel td { background: var(--verde-claro) !important; }

.ca-cena { position: absolute; left: 20px; top: 66px; width: 1160px; height: 718px; color: var(--grafite); font-size: 13px; }
.ca-cena > .ficticio { left: 14px; bottom: 6px; right: auto; }
.ca-vista { position: absolute; inset: 0 0 24px; display: flex; gap: 10px; }
.ca-par { display: flex; gap: 10px; min-height: 0; }
.ca-col { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.ca-esq { flex: 1.1 1 0; min-width: 0; }
.ca-dir { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ca-cresce { flex: 1; min-height: 0; }
.ca-cartao { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 13px 16px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.ca-tit { flex: none; display: flex; flex-direction: column; gap: 1px; }
.ca-tit b { font: 700 16px/1.25 var(--fonte-display); color: var(--verde-profundo); }
.ca-tit span { font-size: 12.5px; color: var(--texto-secundario); }
.ca-graf { flex: 1; min-height: 0; }
.ca-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 7px; }

.ca-reg { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--ui-borda); border-radius: 9px; background: var(--ui-zebra); }
.ca-hora { flex: none; font-size: 12.5px; font-weight: 700; color: var(--verde-sispeq); }
.ca-reg-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ca-reg-txt span { font-size: 12px; font-weight: 700; color: var(--verde-sispeq); }
.ca-reg-txt b { font-size: 14.5px; line-height: 1.25; }
.ca-reg-txt small { font-size: 12.5px; color: var(--texto-secundario); }

.ca-tres { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ca-num { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 12px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.ca-num i { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-sispeq); }
.ca-num span { font-size: 12px; color: var(--texto-secundario); }
.ca-num b { font: 800 22px/1.1 var(--fonte-display); white-space: nowrap; }
.ca-num b.vermelho { color: var(--vermelho); font-size: 19px; }
.ca-num small { font-size: 11.5px; color: var(--texto-secundario); }

.ca-prog { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid #EDF1EF; font-size: 13.5px; }
.ca-prog b { flex: none; width: 44px; }
.ca-prog span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-escs { display: flex; flex-direction: column; gap: 7px; }
.ca-esc { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 8px 11px; border: 1px solid var(--ui-borda); border-left: 4px solid var(--verde-sispeq); border-radius: 9px; background: var(--ui-zebra); }
.ca-esc b { font-size: 13.5px; line-height: 1.25; }
.ca-esc span:not(.pilula) { grid-column: 1; font-size: 12px; color: var(--texto-secundario); }
.ca-esc small { grid-column: 1; font-size: 12px; color: var(--texto-secundario); }
.ca-esc .pilula { grid-column: 2; grid-row: 1; align-self: start; }

.ca-serv { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: center; }
.ca-serv .gf-bh-linha { grid-template-columns: 250px 1fr 58px; font-size: 13px; }
.ca-detalhe { display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 9px; background: var(--ui-zebra); font-size: 13px; line-height: 1.35; color: var(--texto-secundario); }
.ca-detalhe b { color: var(--verde-profundo); }

.ca-tab { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.ca-tab td { padding: 9px 8px; border-top: 1px solid #EDF1EF; line-height: 1.3; vertical-align: middle; }
.ca-tab tr:first-child td { border-top: 0; }
.ca-tab td span { display: block; font-size: 13.5px; color: var(--texto-secundario); }
.ca-horas { font-weight: 800; color: var(--vermelho); white-space: nowrap; text-align: right; }
.ca-causa { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; }
.ca-causa .gf-legenda { flex-direction: column; font-size: 13px; }
.ca-cartao .gf-bh-linha { font-size: 13px; }
.ca-prev { justify-content: center; align-items: flex-start; gap: 2px; }
.ca-prev span { font-size: 12.5px; font-weight: 700; color: var(--texto-secundario); }
.ca-prev s { font-size: 15px; color: var(--texto-secundario); }
.ca-prev b { font: 800 34px/1.1 var(--fonte-display); color: var(--vermelho); }
.ca-prev small { font-size: 13px; color: var(--texto-secundario); }

.gs-janela { left: 20px; top: 24px; width: 1160px; height: 752px; }
.gs-janela .app-corpo { flex: 1; min-height: 0; padding: 12px; }

.dor-fundo { position: absolute; inset: 0; }
.dor-fundo .ficticio { left: 40px; bottom: 16px; }
.dor-fonte { position: absolute; width: 314px; height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 20px 22px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; box-shadow: var(--sombra-curta); }
.dor-fonte b { font: 700 21px/1.2 var(--fonte-display); color: var(--verde-profundo); }
.dor-fonte span { font-size: 16px; line-height: 1.35; color: var(--texto-secundario); }
.dor-pergunta { position: absolute; left: 372px; top: 310px; width: 456px; text-align: center; font: 800 44px/1.15 var(--fonte-display); color: var(--branco); }
.dor-painel { position: absolute; left: 60px; top: 76px; width: 1080px; height: 690px; display: flex; flex-direction: column; align-items: center; padding: 42px 44px; background: var(--branco); border-radius: 16px; box-shadow: var(--sombra-curta); }
.dor-painel img { width: 190px; height: auto; }
.dor-painel-tit { margin-top: 26px; font: 800 38px/1.15 var(--fonte-display); color: var(--verde-profundo); }
.dor-painel-sub { margin-top: 10px; max-width: 700px; text-align: center; font-size: 18px; line-height: 1.45; color: var(--texto-secundario); }
.dor-respostas { flex: 1; min-height: 0; width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.dor-resp { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 15px; background: var(--ui-zebra); border: 1px solid var(--ui-borda); border-radius: 12px; }
.dor-resp span { font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--verde-sispeq); }
.dor-graf { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.dor-graf .gf-bh-linha { grid-template-columns: 62px 1fr 34px; gap: 6px; font-size: 11px; }
.dor-graf .gf-bh-rot, .dor-graf .gf-bh-linha b { font-size: 11px; text-transform: none; letter-spacing: 0; }
.dor-resp > b { font: 800 29px/1.1 var(--fonte-display); color: var(--grafite); white-space: nowrap; }
.dor-resp small { font-size: 13.5px; line-height: 1.35; color: var(--texto-secundario); }

.qc-grade { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
.qc-cartao { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 0; padding: 14px 16px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.qc-cartao:hover { border-color: var(--verde-sispeq); opacity: 1; }
.qc-nome { font-size: 14.5px; font-weight: 700; color: var(--verde-profundo); }
.qc-graf { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.qc-graf .gf-barras { max-height: 140px; }
.qc-graf .gf-bh-linha { grid-template-columns: 62px 1fr 32px; gap: 6px; font-size: 11.5px; }
.qc-emp { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.qc-emp .gf-legenda { font-size: 11px; gap: 5px 10px; }
.qc-num { font: 800 29px/1.1 var(--fonte-display); color: var(--grafite); white-space: nowrap; }
.qc-rot { font-size: 13px; line-height: 1.3; color: var(--texto-secundario); }

.ql-grade { height: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); gap: 8px; }
.ql-cartao { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 0; padding: 9px 14px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.ql-topo { display: flex; justify-content: space-between; align-items: center; }
.ql-num { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--verde-sispeq); color: var(--branco); font-size: 11.5px; font-weight: 700; }
.ql-sentido { padding: 2px 9px; border: 1px solid var(--ui-borda); border-radius: 99px; font-size: 10.5px; font-weight: 700; color: var(--ui-secao); }
.ql-cartao b { font-size: 13.5px; color: var(--verde-profundo); }
.ql-cartao p { margin: 0; font-size: 12px; line-height: 1.35; color: var(--texto-secundario); }

.mp-janela { left: 20px; top: 66px; width: 1160px; height: 718px; }
.mp-janela .app-corpo { position: relative; flex: 1; min-height: 0; padding: 0; }
.mp-janela .ficticio { left: auto; right: 12px; bottom: 3px; }
.mp-vista { position: absolute; inset: 8px 8px 22px; display: flex; gap: 8px; min-height: 0; }
.mp-col { flex-direction: column; }
.mp-leitura { padding: 8px 11px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-profundo); font-size: 12px; font-weight: 600; line-height: 1.35; }

.mp-tit-vista { flex: none; display: flex; align-items: baseline; gap: 12px; padding: 9px 14px; border-radius: 10px; background: var(--verde-sispeq); color: var(--branco); }
.mp-tit-vista b { font: 800 19px/1.2 var(--fonte-display); white-space: nowrap; }
.mp-tit-vista span { font-size: 12.5px; opacity: 0.9; }
.mp-cartoes { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; }
.mp-cartao { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; text-align: left; font-family: var(--fonte-sans); background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; cursor: pointer; }
.mp-cartao:hover { border-color: var(--verde-sispeq); }
.mp-cartao:focus-visible { outline: 2px solid var(--verde-sispeq); outline-offset: 2px; }
.mp-cart-topo { flex: none; display: flex; justify-content: space-between; gap: 14px; }
.mp-cart-topo > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mp-sigla { font: 800 22px/1.1 var(--fonte-display); color: var(--verde-sispeq); }
.mp-nome { font-size: 12px; font-weight: 700; color: var(--grafite); }
.mp-pergunta { font-size: 12px; color: var(--texto-secundario); }
.mp-cart-num { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.mp-cart-num b { font: 800 26px/1.1 var(--fonte-display); color: var(--grafite); white-space: nowrap; }
.mp-cart-num span { font-size: 11px; color: var(--texto-secundario); }
.mp-gcart { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.mp-lin2 { flex-direction: row; align-items: center; gap: 18px; }
.mp-lin2 .gf-legenda { flex: 1; }
.mp-graf { min-height: 0; flex: 1; }



.mp-faixa { flex: none; display: flex; align-items: center; gap: 14px; padding: 7px 12px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.mp-faixa-graf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.mp-fato { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px; border-radius: 12px; background: var(--verde-sispeq); color: var(--branco); }
.mp-fato span { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.mp-fato b { font: 800 26px/1.2 var(--fonte-display); }
.mp-fato small { font-size: 13px; opacity: 0.88; }
.mp-quadros { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px; }
.mp-quadro { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 18px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.mp-q-nome { font: 800 19px/1.2 var(--fonte-display); color: var(--verde-sispeq); }
.mp-q-rot { font-size: 13px; color: var(--texto-secundario); }
.mp-q-val { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.mp-q-val s { font-size: 14px; color: var(--texto-secundario); }
.mp-seta { font-size: 16px; color: var(--verde-sispeq); }
.mp-depois { display: inline-block; font: 800 24px/1.15 var(--fonte-display); color: var(--grafite); }

.mp-janela { left: 20px; top: 66px; width: 1160px; height: 718px; background: #F4F6F5; }
.mp-janela > .ficticio { z-index: 3; left: 10px; bottom: 6px; }
.mp-vista.mp-tela { inset: 0; display: flex; flex-direction: row; gap: 0; }
.mp-lat { flex: none; width: 196px; display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; background: var(--branco); border-right: 1px solid var(--ui-borda); overflow: hidden; }
.mp-lat-logo { width: 104px; height: auto; margin: 0 4px 2px; }
.mp-lat-un { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; border: 1px solid var(--ui-borda); border-radius: 9px; font-size: 10.5px; }
.mp-lat-un b { font-size: 11.5px; }
.mp-lat-un span { color: var(--texto-secundario); }
.mp-lat-un i { align-self: flex-start; padding: 0 6px; border-radius: 99px; background: var(--verde-claro); color: var(--verde-sispeq); font-style: normal; font-weight: 600; font-size: 9.5px; }
.mp-lat-painel { display: flex; flex-direction: column; padding: 6px 9px; border-radius: 8px; background: var(--verde-sispeq); color: var(--branco); }
.mp-lat-painel b { font-size: 11.5px; }
.mp-lat-painel span { font-size: 9.5px; opacity: 0.9; }
.mp-lat-grupo { border-radius: 8px; overflow: hidden; background: #EAF3EE; }
.mp-lat-grupo.cinza { background: #EEF1F0; }
.mp-lat-tit { padding: 4px 9px; font-size: 10.5px; font-weight: 700; color: var(--branco); background: var(--verde-sispeq); }
.mp-lat-grupo.cinza .mp-lat-tit { background: var(--ui-secao); }
.mp-lat ul { list-style: none; margin: 0; padding: 3px 0; }
.mp-lat li { padding: 2px 10px; font-size: 10.5px; color: var(--grafite); }
.mp-lat li.ativo { font-weight: 700; color: var(--verde-sispeq); background: var(--branco); }
.mp-prin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-topo { flex: none; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--branco); border-bottom: 1px solid var(--ui-borda); font-size: 12px; }
.mp-topo-nav { color: var(--ui-secao); word-spacing: 2px; }
.mp-atalho { padding: 5px 13px; font: 700 11px/1 var(--fonte-sans); color: var(--grafite); background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 8px; cursor: pointer; }
.mp-atalho:hover { background: var(--verde-claro); }
.mp-atalho:focus-visible { outline: 2px solid var(--verde-sispeq); }
.mp-corpo { flex: 1; min-height: 0; padding: 10px 14px 12px; }
.mp-corpo.mp-col { display: flex; flex-direction: column; gap: 8px; }
.mp-hero { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 11px 18px; border-radius: 12px; background: #2E8559; color: var(--branco); }
.mp-hero-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mp-hero-txt b { font: 800 19px/1.2 var(--fonte-sans); }
.mp-hero-txt span { font-size: 11.5px; opacity: 0.95; }
.mp-hero-bot { display: flex; gap: 7px; flex: none; }
.mp-hero-bot span { padding: 6px 13px; border-radius: 7px; background: var(--branco); color: var(--verde-profundo); font-size: 11px; font-weight: 700; white-space: nowrap; }
.mp-hero-bot span.sec { background: transparent; color: var(--branco); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.mp-sec { flex: none; font-size: 12.5px; font-weight: 700; }
.mp-barra { flex: none; display: flex; align-items: center; gap: 12px; }
.mp-busca, .mp-campo { position: relative; display: flex; align-items: center; height: 32px; padding: 0 10px; background: var(--branco); border: 1px solid #BCC6C1; border-radius: 7px; font-size: 11px; color: var(--ui-secao); }
.mp-busca { width: 230px; }
.mp-busca small, .mp-campo small { position: absolute; left: 8px; top: -7px; padding: 0 3px; background: #F4F6F5; font-size: 9px; }
.mp-campo { min-width: 130px; color: var(--grafite); }
.mp-cheque { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; white-space: nowrap; cursor: pointer; }
.mp-cheque input { margin: 0; accent-color: var(--verde-sispeq); }
.mp-filtros { display: inline-flex; align-items: center; }
.mp-filtros small { margin-right: 6px; font-size: 10.5px; color: var(--ui-secao); }
.mp-filtro { padding: 6px 11px; margin-left: -1px; font: 700 10.5px/1.1 var(--fonte-sans); color: var(--ui-secao); background: var(--branco); border: 1px solid var(--ui-borda); cursor: pointer; }
.mp-filtro:first-of-type { border-radius: 6px 0 0 6px; margin-left: 0; }
.mp-filtro:last-child { border-radius: 0 6px 6px 0; }
.mp-filtro.ativo { background: #E2E8E5; color: var(--grafite); }
.mp-conta { font-size: 10.5px; color: var(--texto-secundario); white-space: nowrap; }
.mp-bot { flex: none; padding: 6px 12px; border: 1px solid var(--verde-sispeq); border-radius: 7px; font-size: 11px; font-weight: 700; color: var(--verde-profundo); }
.mp-auto { flex: none; font-size: 11px; font-weight: 600; color: var(--verde-sispeq); }
.mp-linha-kpi { flex: none; display: flex; gap: 8px; }
.mp-linha-kpi.cinco .mp-kpi, .mp-linha-kpi.seis .mp-kpi { flex: 1 1 0; }
.mp-kpi { min-width: 118px; display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 9px; }
.mp-kpi b { font: 800 20px/1.1 var(--fonte-sans); }
.mp-kpi span { font-size: 10.5px; line-height: 1.25; color: var(--texto-secundario); }
.mp-kpi.ambar { background: #FDF0DD; }
.mp-kpi.ambar b { color: #8A5A00; }
.mp-kpi.azul { background: #E3ECF8; }
.mp-kpi.azul b, .mp-kpi.azul span { color: #2F6FB0; }
.mp-kpi.verm { background: #FBE5E3; }
.mp-kpi.verm b, .mp-kpi.verm span { color: var(--vermelho); }
.mp-kpi.verde { background: var(--verde-claro); }
.mp-kpi.verde b, .mp-kpi.verde span { color: var(--verde-sispeq); }
.mp-kpi.sel { box-shadow: 0 0 0 2px var(--verde-sispeq); }
.mp-kpi-graf { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 7px 12px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 9px; }
.mp-kpi-graf .gf-legenda { font-size: 10px; gap: 4px 10px; }
.mp-tabwrap { flex: none; min-width: 0; overflow: hidden; border: 1px solid var(--ui-borda); border-radius: 10px; background: var(--branco); }
.mp-tab { width: 100%; border-collapse: collapse; font-size: 11px; }
.mp-tab th { padding: 7px 8px; text-align: left; font-size: 10.5px; font-weight: 700; color: var(--branco); background: var(--verde-sispeq); white-space: nowrap; }
.mp-tab td { height: 30px; padding: 2px 8px; border-top: 1px solid #E7ECE9; }
.mp-tab tbody tr:nth-child(even) td { background: var(--ui-zebra); }
.mp-tab small { display: block; font-size: 9.5px; color: var(--texto-secundario); }
.mp-forte { font-weight: 700; white-space: nowrap; }
.mp-mono { font-size: 10px; white-space: nowrap; }
.mp-num { text-align: right; font-variant-numeric: tabular-nums; }
.mp-traco { color: var(--texto-secundario); }
.mp-pcrs { table-layout: fixed; }
.mp-pcrs th, .mp-pcrs td { padding-left: 5px; padding-right: 4px; }
.mp-pcrs th:nth-child(1) { width: 122px; }
.mp-pcrs th:nth-child(2) { width: 112px; }
.mp-pcrs th:nth-child(3) { width: 162px; }
.mp-pcrs td:nth-child(3) { font-size: 10.5px; line-height: 1.15; }
.mp-chip { display: inline-block; padding: 2px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.mp-chip.st-v { background: #CDEBD9; color: #0A5A3D; }
.mp-chip.st-a { background: #FBEDB5; color: #6B5300; }
.mp-chip.st-l { background: #FBDDBE; color: #7A3E00; }
.mp-chip.st-r { background: #F8D2CE; color: #8A1C15; }
.mp-chip.st-b { background: #D3EAF5; color: #0C4A63; }
.mp-chip.st-p { background: #FDF0DD; color: #7A4B00; }
.mp-chip.st-x { background: #B3451E; color: var(--branco); }
.mp-chip.cinza { background: #E6EBE8; color: var(--ui-secao); }
.mp-chip.mp-apagada { opacity: 0.22; }
.mp-tab tr.mp-marcada td { background: #FFF6DA !important; }
.mp-tab tr.mp-rep td { background: #FBE5E3 !important; }
.mp-leg { flex: none; display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--ui-secao); }
.mp-leg b { color: var(--grafite); }
.mp-leg > div { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mp-duo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.mp-bloco { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 13px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; font-size: 12px; }
.mp-intro { flex: none; font-size: 11px; line-height: 1.35; color: var(--texto-secundario); }
.mp-rep-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 236px; gap: 10px; }
.mp-rep-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-res td { height: 25px; }
.mp-lado small { font-size: 10.5px; color: var(--texto-secundario); }
.mp-rep-num { font: 800 34px/1.1 var(--fonte-sans); color: var(--vermelho); }
.mp-lado .mp-graf { flex: 1; min-height: 0; }
.mp-tabwrap:has(.mp-mcjs) { flex: 1; min-height: 0; overflow-y: auto; }
.mp-mcjs th { position: sticky; top: 0; z-index: 1; }
.mp-mcjs td { height: 25px; padding-top: 1px; padding-bottom: 1px; }
.mp-pcrs td { height: 38px; }
.mp-idx th { white-space: normal; line-height: 1.15; }
.mp-mcp td { height: 40px; }
.mp-bloco .gf-bh-linha { grid-template-columns: minmax(90px, 42%) 1fr 88px; }
.mp-corpo { padding-bottom: 22px; }

.ao-cena { position: absolute; left: 20px; top: 66px; width: 1160px; height: 718px; display: flex; gap: 16px; color: var(--grafite); font-size: 13px; }
.ao-cel { position: relative; flex: none; width: 340px; height: 718px; }
.ao-cel .celular { position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 340px; height: 718px; transform: none; }
.ao-tela { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--ui-fundo); }
.ao-tela-topo { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 12px; background: var(--verde-sispeq); color: var(--branco); }
.ao-tela-topo b { font: 700 18px/1.2 var(--fonte-display); }
.ao-tela-topo span { font-size: 12.5px; opacity: 0.9; }
.ao-tela-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 40px; overflow: hidden; }

.ao-inicio { align-items: stretch; gap: 10px; padding: 34px 18px 40px; }
.ao-inicio img { width: 170px; height: auto; align-self: center; }
.ao-inicio-tit { text-align: center; font: 800 20px/1.2 var(--fonte-display); color: var(--verde-profundo); }
.ao-inicio-sub { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-secundario); }
.ao-perfil { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 16px; text-align: left; font-family: var(--fonte-sans); background: var(--branco); border: 1px solid var(--ui-borda); border-left: 4px solid var(--verde-sispeq); border-radius: 10px; cursor: pointer; }
.ao-perfil:hover { background: var(--verde-claro); }
.ao-perfil:focus-visible { outline: 2px solid var(--verde-sispeq); outline-offset: 2px; }
.ao-perfil b { font: 800 18px/1.2 var(--fonte-display); color: var(--verde-profundo); }
.ao-perfil span { font-size: 13.5px; line-height: 1.35; color: var(--texto-secundario); }

.ao-grupo { margin-top: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--verde-sispeq); }
.ao-item { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 9px; }
.ao-item-doc { font-size: 11.5px; font-weight: 700; color: var(--verde-sispeq); }
.ao-item-nome { font-size: 13px; font-weight: 600; line-height: 1.25; }
.ao-apagado { opacity: 0.25; }

.ao-form-nome { padding: 2px 4px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--verde-profundo); }
.ao-opcoes { display: flex; flex-direction: column; gap: 8px; }
.ao-opcao { padding: 13px; text-align: left; font: 700 15px/1.2 var(--fonte-sans); background: var(--branco); border: 2px solid var(--ui-borda); border-radius: 10px; cursor: pointer; }
.ao-opcao:focus-visible { outline: 2px solid var(--verde-sispeq); outline-offset: 2px; }
.ao-opcao.op-concluido.ativo { background: var(--verde-claro); border-color: var(--verde-sispeq); color: var(--verde-profundo); }
.ao-opcao.op-parcial.ativo { background: var(--aviso-fundo); border-color: #E0A11B; color: var(--aviso-texto); }
.ao-opcao.op-nao.ativo { background: var(--vermelho-fundo); border-color: var(--vermelho); color: var(--vermelho); }
.ao-just { display: flex; flex-direction: column; gap: 4px; padding: 11px 13px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; font-size: 14px; line-height: 1.35; }
.ao-just small { font-size: 11.5px; font-weight: 700; color: var(--texto-secundario); }
.ao-just.dispensada span { color: var(--texto-secundario); }
.ao-botao { margin-top: auto; padding: 13px; text-align: center; border-radius: 10px; background: var(--verde-sispeq); color: var(--branco); font-weight: 700; font-size: 14px; }

.ao-aprov { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px; padding: 8px 11px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.ao-aprovar { align-self: stretch; padding: 7px; text-align: center; border-radius: 7px; background: var(--verde-sispeq); color: var(--branco); font-weight: 700; font-size: 12.5px; }
.ao-aprovar.feito { background: var(--verde-claro); color: var(--verde-profundo); }

.ao-rot { font-size: 12.5px; color: var(--texto-secundario); }
.ao-status-cel { padding: 16px 12px; text-align: center; border-radius: 10px; font: 800 19px/1.2 var(--fonte-display); background: var(--aviso-fundo); color: var(--aviso-texto); }
.ao-status-cel.f2 { background: #E3ECF8; color: #2F6FB0; }
.ao-status-cel.f4 { background: var(--verde-claro); color: var(--verde-sispeq); }
.ao-cq-txt { margin: 0; padding: 0 4px; font-size: 13.5px; line-height: 1.45; color: var(--texto-secundario); }

.ao-direita { position: relative; flex: 1; min-width: 0; }
.ao-vista { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.ao-vista.ao-lado { flex-direction: row; }
.ao-bloco { display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 13px 16px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.ao-bloco h4 { margin: 0; font: 700 15px/1.25 var(--fonte-display); color: var(--verde-profundo); }
.ao-bloco p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--texto-secundario); }
.ao-cresce { flex: 1; min-height: 0; }
.ao-graf { flex: 1; min-height: 0; }
.ao-origem { display: flex; align-items: center; gap: 22px; }
.ao-origem-txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 15px; }
.ao-tres { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ao-tres .ao-bloco { justify-content: space-between; }
.ao-tres .gf-bh-linha { grid-template-columns: 30px 1fr 70px; gap: 6px; }
.ao-duas { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ao-grande { font: 800 40px/1 var(--fonte-display); color: var(--verde-sispeq); }
.ao-grande.azul { color: #2F6FB0; }
.ao-coluna-graf { flex: none; width: 262px; align-items: center; justify-content: center; gap: 16px; }
.ao-coluna-graf h4 { align-self: flex-start; }
.ao-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; }
.ao-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border: 1px solid var(--ui-borda); border-radius: 9px; }
.ao-linha-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ao-linha-txt b { font-size: 14px; line-height: 1.25; }
.ao-linha-txt small { font-size: 12.5px; line-height: 1.3; color: var(--aviso-texto); }
.ao-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ao-tab th { padding: 9px 10px; text-align: left; font-size: 12px; color: var(--branco); background: var(--verde-sispeq); }
.ao-tab td { height: 76px; padding: 4px 10px; border-top: 1px solid #E7ECE9; line-height: 1.3; }
.ao-td-doc { font-weight: 700; color: var(--verde-sispeq); }
.ao-pil-aprov { white-space: nowrap; }
.ao-regra { flex: none; padding: 12px 16px; border-radius: 10px; background: var(--verde-claro); color: var(--verde-profundo); font-size: 14px; font-weight: 600; }

.ao-trilha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding-top: 6px; }
.ao-no { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; font-size: 13px; font-weight: 700; color: var(--texto-secundario); }
.ao-no::before { content: ''; position: absolute; top: 15px; left: -50%; right: 50%; height: 4px; background: #DCE3DF; }
.ao-no:first-child::before { display: none; }
.ao-no i { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #DCE3DF; }
.ao-no.evento i { width: 22px; height: 22px; margin: 6px 0; }
.ao-no.feito { color: var(--verde-profundo); }
.ao-no.feito::before { background: var(--verde-sispeq); }
.ao-no.feito i { background: var(--verde-sispeq); }
.ao-no.atual i { box-shadow: 0 0 0 5px var(--verde-claro); }
.ao-status-grade { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ao-tres-v { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ao-tres-v .ao-bloco { flex: 1; justify-content: center; gap: 4px; }
.ao-tres-v b { font: 800 19px/1.2 var(--fonte-display); color: var(--verde-sispeq); }

.db-janela { left: 20px; top: 66px; width: 1160px; height: 718px; }
.db-janela .app-corpo { position: relative; flex: 1; min-height: 0; padding: 0; }
.db-vista { position: absolute; inset: 10px 12px 12px; }
.db-duas { display: grid; grid-template-columns: 340px 1fr; gap: 12px; }
.db-lado { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; padding: 18px; background: var(--verde-profundo); border-radius: 12px; color: var(--branco); }
.db-lado .db-tit { align-self: flex-start; color: #9FD3BF; }
.db-lado p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.86); }
.db-lado .gf-gauge { padding: 12px; background: var(--branco); border-radius: 12px; box-sizing: content-box; width: 250px; }
.db-lado .gf-barrash { padding: 12px; background: var(--branco); border-radius: 12px; box-sizing: border-box; color: var(--grafite); gap: 13px; }
.db-lado .gf-bh-linha { grid-template-columns: 112px 1fr 44px; font-size: 11px; }
.db-tit { font-size: 13px; font-weight: 700; color: var(--verde-profundo); }
.db-chegadas { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.db-chegada { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); font-size: 12px; }
.db-seta { color: var(--menta); font-weight: 700; }
.db-resumo { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); }
.db-resumo b { flex: none; font: 800 26px/1.1 var(--fonte-display); }
.db-resumo span { font-size: 12.5px; line-height: 1.35; }

.db-lista { display: grid; grid-auto-rows: 1fr; gap: 8px; min-height: 0; }
.db-sec { display: grid; grid-template-columns: 54px 1fr 74px; align-items: center; gap: 12px; padding: 0 16px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.db-num { font: 800 19px/1 var(--fonte-display); color: var(--verde-sispeq); }
.db-sec-corpo { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.db-sec-topo { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.db-sec-topo span { font-size: 12px; color: var(--texto-secundario); font-variant-numeric: tabular-nums; }
.db-trilho { height: 15px; border-radius: 8px; background: #E4E9E6; overflow: hidden; }
.db-trilho i { display: block; height: 100%; border-radius: 8px; }
.db-pct { text-align: right; font: 800 20px/1 var(--fonte-display); font-variant-numeric: tabular-nums; }
.db-ok { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--verde-sispeq); color: var(--branco); font-size: 12px; font-weight: 800; }

.db-falta { display: grid; grid-template-columns: 54px 200px 1fr auto; align-items: center; gap: 12px; padding: 0 16px; font-size: 14px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.db-falta-txt { color: var(--texto-secundario); }
.db-falta.ok { background: var(--verde-claro); border-color: #B5DCCB; }
.db-falta.sel { box-shadow: inset 0 0 0 2px var(--verde-sispeq); }

.db-botao { align-self: stretch; padding: 13px; border-radius: 9px; text-align: center; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12); transition: background 0.2s, color 0.2s; }
.db-botao.pronto { color: var(--on-menta); background: var(--menta); }

.db-final { display: grid; grid-template-columns: 340px 1fr 370px; gap: 14px; }
.db-livro { position: relative; display: flex; align-items: center; justify-content: center; background: var(--verde-profundo); border-radius: 12px; overflow: hidden; }
.db-folha { position: absolute; left: 66px; top: 76px; bottom: 76px; width: 206px; border-radius: 4px; background: var(--branco); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.db-folha.f3 { transform: translate(26px, 12px); }
.db-folha.f2 { transform: translate(18px, 8px); }
.db-folha.f1 { transform: translate(9px, 4px); }
.db-capa { position: absolute; left: 60px; top: 70px; bottom: 82px; width: 206px; display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; border-radius: 4px 8px 8px 4px; border-left: 9px solid var(--menta); background: var(--verde-sispeq); color: var(--branco); box-shadow: var(--sombra-curta); box-sizing: border-box; }
.db-capa img { width: 118px; height: auto; }
.db-capa b { margin-top: auto; font: 800 27px/1.1 var(--fonte-display); }
.db-capa span { font-size: 12.5px; line-height: 1.35; }
.db-capa small { font-size: 10.5px; opacity: 0.85; }
.db-indice { display: flex; flex-direction: column; justify-content: space-around; padding: 16px 18px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.db-ind { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.db-ind i { flex: 1; border-bottom: 1px dotted var(--ui-borda); }
.db-entrega { display: flex; flex-direction: column; gap: 9px; padding: 16px; background: var(--ui-zebra); border: 1px solid var(--ui-borda); border-radius: 12px; }
.db-entrega p { margin: 0; font-size: 12px; color: var(--texto-secundario); }
.db-pastas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.db-pasta { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 76px; padding: 10px 7px 7px; border-radius: 3px 7px 7px 7px; background: #F0C75E; color: #5A4300; }
.db-pasta i { position: absolute; left: 0; top: -6px; width: 30px; height: 7px; border-radius: 4px 4px 0 0; background: #F0C75E; }
.db-pasta b { font: 800 14px/1 var(--fonte-display); }
.db-pasta span { font-size: 9.5px; line-height: 1.2; }
.db-saida { display: flex; align-items: center; gap: 9px; padding: 11px 12px; font-size: 14px; font-weight: 700; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 9px; }

.ins-janela { left: 20px; top: 24px; width: 1160px; height: 752px; }
.ins-janela .app-corpo { flex: 1; min-height: 0; padding: 12px; }
.ins-grade { height: 100%; display: grid; grid-template-columns: 310px 1fr; gap: 12px; }
.ins-lado { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 12px; }
.ins-tit { font-size: 13px; color: var(--verde-profundo); }
.ins-donut { display: flex; justify-content: center; }
.ins-prin { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ins-kpis { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ins-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--ui-borda); background: var(--branco); }
.ins-kpi b { font: 800 30px/1.1 var(--fonte-sans); }
.ins-kpi span { font-size: 13px; }
.ins-kpi.verde { background: var(--verde-claro); color: var(--verde-sispeq); }
.ins-kpi.ambar { background: var(--aviso-fundo); color: var(--aviso-texto); }
.ins-kpi.verm { background: var(--vermelho-fundo); color: var(--vermelho); }
.ins-kpi.sel { box-shadow: 0 0 0 2px var(--verde-sispeq); }
.ins-tabwrap { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--ui-borda); border-radius: 10px; background: var(--branco); }
.ins-tab { width: 100%; height: 100%; border-collapse: collapse; font-size: 13.5px; }
.ins-tab th { height: 38px; padding: 0 12px; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--branco); background: var(--verde-sispeq); }
.ins-tab td { padding: 0 12px; border-top: 1px solid #E7ECE9; }
.ins-tab tbody tr:nth-child(even) td { background: var(--ui-zebra); }
.ins-forte { font-weight: 700; }
.ins-nota { flex: none; padding: 10px 14px; border-radius: 8px; background: var(--verde-claro); color: var(--verde-profundo); font-size: 13px; font-weight: 600; }

.sd-janela { left: 20px; top: 24px; width: 1160px; height: 752px; }
.sd-janela .app-corpo { flex: 1; min-height: 0; padding: 10px 12px 12px; }
.sd-grade { height: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; }
.sd-quadro { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; overflow: hidden; }
.sd-topo { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sd-topo b { font-size: 14px; color: var(--verde-profundo); }
.sd-topo span { font-size: 11px; color: var(--texto-secundario); }
.sd-graf { flex: none; display: flex; flex-direction: column; gap: 5px; }
.sd-lin { flex: none; display: flex; align-items: center; gap: 14px; }
.sd-barras { flex: 1; min-height: 0; }
.sd-kpis { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sd-kpi { display: flex; flex-direction: column; padding: 4px 9px; border: 1px solid var(--ui-borda); border-radius: 8px; }
.sd-kpi b { font: 800 18px/1.1 var(--fonte-sans); }
.sd-kpi span { font-size: 10px; }
.sd-kpi.verde { background: var(--verde-claro); color: var(--verde-sispeq); }
.sd-kpi.ambar { background: var(--aviso-fundo); color: var(--aviso-texto); }
.sd-kpi.verm { background: var(--vermelho-fundo); color: var(--vermelho); }
.sd-tabwrap { flex: none; overflow: hidden; border: 1px solid var(--ui-borda); border-radius: 8px; }
.sd-quadro:nth-child(1) .sd-tabwrap { flex: 1; min-height: 0; }
.sd-tab { width: 100%; height: 100%; border-collapse: collapse; font-size: 11px; }
.sd-tab th { padding: 5px 7px; text-align: left; font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--branco); background: var(--verde-sispeq); }
.sd-tab td { height: 23px; padding: 1px 7px; border-top: 1px solid #E7ECE9; white-space: nowrap; }
.sd-tab tbody tr { cursor: pointer; }
.sd-tab tbody tr:nth-child(even) td { background: var(--ui-zebra); }
.sd-tab tbody tr:hover td { background: var(--verde-claro); }
.sd-tab tbody tr.sel td { background: #FFF6DA; }
.sd-tab .pilula { padding: 1px 7px; font-size: 10px; }
.sd-forte { font-weight: 700; }
.sd-num { text-align: right; font-variant-numeric: tabular-nums; }
.sd-tab th, .sd-tab td { padding-left: 5px; padding-right: 5px; }

.cd-janela { left: 20px; top: 66px; width: 1160px; height: 718px; }
.cd-janela .app-corpo { position: relative; flex: 1; min-height: 0; padding: 0; }
.cd-vistas { position: absolute; inset: 10px 12px 26px; }
.cd-vista { position: absolute; inset: 0; display: flex; gap: 12px; min-height: 0; color: var(--grafite); font-size: 13px; }

.cd-v1 { align-items: stretch; }
.cd-editor { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #20272B; border-radius: 10px; overflow: hidden; color: #DDE5E1; }
.cd-fita { flex: none; display: flex; gap: 4px; padding: 7px 10px; background: #2B3338; }
.cd-fita span { padding: 4px 11px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #B5C2BC; }
.cd-fita span.ativo { background: var(--verde-sispeq); color: var(--branco); }
.cd-area { flex: 1; min-height: 0; display: flex; }
.cd-tela { flex: 1; min-width: 0; }
.cd-svg { display: block; width: 100%; height: 100%; background: #1A2024; }
.cd-grade { stroke: #2A3237; stroke-width: 1; }
.cd-tubo { fill: none; stroke: #7FD8B6; stroke-width: 5; stroke-linecap: round; }
.cd-junta { fill: #1A2024; stroke: #F0B24A; stroke-width: 3; }
.cd-valvula { fill: #1A2024; stroke: #7FD8B6; stroke-width: 2.5; }
.cd-cota { fill: none; stroke: #8FB8E8; stroke-width: 1.5; }
.cd-rotulo { font: 700 13px var(--fonte-mono); fill: #F0B24A; }
.cd-rotulo-cota { font: 600 12px var(--fonte-mono); fill: #8FB8E8; }
.cd-carimbo rect { fill: none; stroke: #E6ECE9; stroke-width: 1.5; }
.cd-carimbo text { font: 600 12.5px var(--fonte-mono); fill: #E6ECE9; }
.cd-camadas { flex: none; width: 124px; display: flex; flex-direction: column; gap: 9px; padding: 12px 11px; background: #2B3338; font-size: 12px; }
.cd-camadas b { font-size: 12px; color: var(--branco); }
.cd-camadas span { display: flex; align-items: center; gap: 7px; }
.cd-camadas i { width: 11px; height: 11px; border-radius: 3px; }
.cd-comando { flex: none; padding: 7px 12px; background: #14191C; font: 500 12px var(--fonte-mono); color: #B5C2BC; }
.cd-comando b { color: #7FD8B6; }
.cd-lado { flex: none; width: 212px; display: flex; flex-direction: column; gap: 10px; }
.cd-num { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 14px 16px; background: var(--verde-profundo); border-radius: 10px; color: var(--branco); }
.cd-num b { font: 800 30px/1.1 var(--fonte-display); }
.cd-num span { font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, 0.84); }

.cd-v2, .cd-v3 { flex-direction: column; }
.cd-etapas { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cd-etapa { display: flex; flex-direction: column; gap: 7px; padding: 16px 18px; background: var(--verde-claro); border-radius: 10px; }
.cd-etapa em { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--verde-sispeq); color: var(--branco); font: 700 13px var(--fonte-sans); }
.cd-etapa b { font: 700 17px/1.25 var(--fonte-display); color: var(--verde-profundo); }
.cd-etapa p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--grafite); }
.cd-cartao { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 15px 18px; background: var(--branco); border: 1px solid var(--ui-borda); border-radius: 10px; }
.cd-tit { font: 700 16px/1.25 var(--fonte-display); color: var(--verde-profundo); }
.cd-sub { font-size: 13px; line-height: 1.4; color: var(--texto-secundario); }
.cd-lista { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 6px; }
.cd-linha { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px; padding: 11px 13px; background: var(--ui-fundo); border-radius: 8px; }
.cd-linha b { color: var(--verde-profundo); }
.cd-linha small { font-size: 12.5px; color: var(--texto-secundario); }

.cd-fluxo { flex: none; display: flex; align-items: stretch; gap: 8px; }
.cd-passo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 15px 16px; background: var(--verde-profundo); border-radius: 10px; color: var(--branco); }
.cd-passo span { font-size: 12px; font-weight: 700; color: #9FD3BF; }
.cd-passo b { font: 700 17px/1.25 var(--fonte-display); }
.cd-passo small { font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.84); }
.cd-seta { align-self: center; font-style: normal; font-size: 20px; font-weight: 700; color: var(--verde-sispeq); }
.cd-duas { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }
.cd-destaque { justify-content: center; background: var(--verde-claro); border-color: transparent; }
.cd-destaque .cd-sub { font-size: 14.5px; line-height: 1.5; color: var(--grafite); }

/* Palcos das demonstrações dentro das páginas do site. Vem depois do CSS das cenas. */

/* O site define tipografia e espaçamento para p, ul, h1–h3, img e a; dentro do palco valem os padrões que as cenas
   esperam (os da apresentação, que não mexia nesses elementos). */
.cap-palco { font-family: var(--fonte-sans); font-size: 16px; line-height: normal; color: var(--grafite); text-align: left; }
/* Especificidade de elemento (0,0,1): vence as regras de elemento do site, que vêm antes, e perde para qualquer classe
   das cenas. */
:where(.cap-palco) :is(p, ul, ol, li, h1, h2, h3, h4, dl, dd, figure, table) { margin: revert; padding: revert; font-size: revert; line-height: revert; letter-spacing: revert; font-family: inherit; font-weight: revert; color: inherit; }
:where(.cap-palco) :is(h1, h2, h3, h4) { font-weight: bold; }
:where(.cap-palco) img { max-width: none; height: auto; }
:where(.cap-palco) button { font: inherit; cursor: pointer; }
:where(.cap-palco) a { color: inherit; }

/* Seção com demonstração: texto à esquerda, palco à direita; empilha em telas estreitas. */
.demo-secao .demo-in { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 40px; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
.demo-secao .demo-texto { position: sticky; top: 96px; }
.demo-secao .demo-texto p { color: var(--texto-2); }
.demo-secao .demo-texto h2 { font-size: clamp(26px, 2.6vw, 34px); }
.demo-dica { font-size: 14px; color: var(--texto-2); border-left: 3px solid var(--menta); padding: 4px 0 4px 12px; margin-top: 20px; }
@media (max-width: 1080px) {
  .demo-secao .demo-in { grid-template-columns: 1fr; gap: 24px; }
  .demo-secao .demo-texto { position: static; max-width: 760px; }
}

.demo { position: relative; min-height: 120px; }
.demo .cap-palco { padding: 0; border-radius: 16px; }
.demo .palco-escala { margin: 0 auto; }
.demo > .demo-poster { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--borda); }

.demo-botoes { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.demo-botoes .botao-rever, .demo-botoes .botao-ampliar {
  position: static; border: 1px solid var(--borda); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600;
  background: var(--branco); color: var(--verde-profundo); font-family: var(--fonte-sans); cursor: pointer;
}
.demo-botoes .botao-rever:hover, .demo-botoes .botao-ampliar:hover { border-color: var(--verde); color: var(--verde); }
.demo.demo-ampliada .demo-botoes { position: fixed; top: 12px; right: 12px; z-index: 210; margin: 0; }

/* Ampliada: o palco ocupa a janela (no celular em pé, gira para caber deitado). */
html.com-demo-ampliada, html.com-demo-ampliada body { overflow: hidden; }
.demo.demo-ampliada { position: fixed; inset: 0; z-index: 200; background: #06261B; display: flex; align-items: center; justify-content: center; }
.demo.demo-ampliada .cap-palco { width: 100%; height: 100%; border-radius: 0; display: flex; align-items: center; justify-content: center; }

@media (max-width: 699px) {
  .demo.montada:not(.demo-ampliada) .cap-palco { cursor: zoom-in; }
  .demo.montada:not(.demo-ampliada) .cap-palco::after {
    content: 'Toque para ampliar'; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
    background: rgba(8, 64, 46, 0.92); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; pointer-events: none;
  }
}

/* Fundo da seção onde o palco escuro aparece */
.demo-secao.secao-branca .demo .cap-palco.claro { background: var(--papel-escuro); }

/* Antes de montar: reserva o espaço do palco (3:2; 3:4 quando a cena tem duas partes) para a página não pular. */
.demo:not(.montada) { aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 28% 18%, rgba(13,107,76,.55), rgba(13,107,76,0) 62%), #08402E; }
.demo[data-partes="2"]:not(.montada) { aspect-ratio: 3 / 4; }
.demo:not(.montada) .demo-poster { border: 0; height: 100%; }
.demo:not(.montada) .demo-poster img { width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: .92; }