/* SISPEQ · apresentação C3 — página, modos e componentes comuns.
   Cores, fontes e espaços vêm de marca.css (tokens do kit). Cada demonstração
   tem o próprio arquivo em css/cenas/ só para o leiaute dela. */

: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;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fonte-sans);
  color: var(--grafite);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; }
img { display: block; }
.mono { font-family: var(--fonte-mono); }
.rotulo-mini { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-secundario); }

/* ---------- topo e sumário (modo leitura) ---------- */

.topo {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topo-altura); z-index: 30;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--branco); border-bottom: 1px solid var(--ui-borda);
}
.topo-logo { height: 22px; width: auto; }
.topo-titulo { font-size: 14px; font-weight: 600; color: var(--texto-secundario); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-espaco { flex: 1; }
.topo-botao {
  border: 1px solid var(--ui-borda); background: var(--branco); color: var(--verde-profundo);
  border-radius: var(--raio-selo); padding: 7px 14px; font-size: 13px; font-weight: 600;
}
.topo-botao:hover { border-color: var(--verde-sispeq); }

.sumario {
  position: fixed; top: var(--topo-altura); bottom: 0; left: 0; width: var(--sumario-largura); z-index: 20;
  overflow-y: auto; padding: 24px 16px; background: var(--branco); border-right: 1px solid var(--ui-borda);
}
.sumario-titulo { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-secundario); padding: 0 10px 10px; }
.sumario ol { list-style: none; margin: 0; padding: 0; }
.sumario a {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 8px;
  color: var(--grafite); text-decoration: none; font-size: 14px; line-height: 1.35;
}
.sumario a:hover { background: var(--ui-fundo); }
.sumario a.ativo { background: var(--verde-claro); color: var(--verde-profundo); font-weight: 600; }
.sum-num { font-family: var(--fonte-mono); font-size: 12px; color: var(--texto-secundario); min-width: 16px; }

/* ---------- capítulos: modo leitura ---------- */

body.modo-leitura #doc { padding-top: var(--topo-altura); margin-left: var(--sumario-largura); }
body.modo-leitura .cap {
  display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 40px;
  padding: 72px 48px; border-bottom: 1px solid var(--borda); align-items: start;
}
body.modo-leitura .cap-texto { position: sticky; top: calc(var(--topo-altura) + 24px); }
body.modo-leitura .cap.cheio { display: block; padding: 0; border: 0; }
body.modo-leitura .controles-apresentacao { display: none; }
body.modo-leitura .cap-titulo { font-size: 30px; }
body.modo-leitura .cap-linha { font-size: 16px; }

@media (max-width: 1200px) {
  body.modo-leitura #doc { margin-left: 0; }
  body.modo-leitura .sumario { transform: translateX(-105%); box-shadow: var(--sombra-curta); }
  body.modo-leitura.pronto .sumario { transition: transform 0.2s ease; }
  body.modo-leitura.sumario-aberto .sumario { transform: none; }
}
@media (min-width: 1201px) { .so-leitura { display: none; } }
@media (max-width: 1000px) {
  body.modo-leitura .cap { grid-template-columns: minmax(0, 1fr); padding: 48px 16px; gap: 24px; }
  body.modo-leitura .cap-texto { position: static; }
  .topo { padding: 0 12px; gap: 10px; }
  .topo-titulo { display: none; }
}

/* ---------- texto de cada capítulo ---------- */

.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; }

/* ---------- selos e pílulas ---------- */

.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); }

/* ---------- palco das demonstrações ---------- */

.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); }

/* ---------- modo apresentação ---------- */

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; }

/* setas laterais e dica de navegação (modo apresentação) */
.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; }

/* ---------- PDF e gravação ---------- */

@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;
}
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; }

/* ---------- casca do app recriada ---------- */

.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 do sistema: cabeçalho verde, linhas zebradas de 38 px */
.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; }

/* barras simples */
.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); }

/* botões de demonstração */
.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; }

/* abas de passo dentro do palco */
.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 escrita de gráfico */
.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; }

/* moldura de celular */
.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; }

/* legenda do texto sobre o palco escuro */
.palco-nota { position: absolute; color: #DCEBE4; font-size: 14px; line-height: 1.45; }
.palco-nota strong { color: var(--branco); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}