/* Design System DevSecOps Pointer v1.0 — tema GitLab (acento #FC6D26). Tokens de marca/tokens.json. */
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/urbanist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Urbanist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/urbanist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/jetbrainsmono-latin.woff2") format("woff2"); }

:root {
  --azul-700: #00056D; --azul-500: #1444D3; --magenta-500: #E52C91; --magenta-claro: #FF7BC0;
  --ciano-400: #58C7ED; --teal-500: #58AAAA; --grafite-900: #0E0F0F; --navy-800: #1B1F2C;
  --offwhite-50: #F7F7F7; --borda-200: #E5E7EB; --texto-secundario: #4A4F5C; --texto-terciario: #6B7280;
  --texto-sobre-escuro: #C9D3F2; --texto-terciario-escuro: #9FB0DE; --tonal-azul: #E8EDFB; --tonal-ciano: #E8F7FD;
  --branco: #FFFFFF; --parceiro-acento: #FC6D26; --link: #7759C2; --link-escuro: #A989C2;
  --fonte: Urbanist, Aptos, Calibri, Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --raio-card: 24px; --raio-card-p: 16px; --raio-chip: 8px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--branco); color: var(--grafite-900); font-family: var(--fonte); font-size: 17px;
  line-height: 1.5; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; }
.mono { font-family: var(--mono); font-weight: 500; }
.rotulo { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--azul-500); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oculto { display: none !important; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 var(--s4); }

/* Cabeçalho escuro com padrão diagonal */
.topo { background: var(--azul-700) url("../img/padrao-diagonal-tile-240.png") repeat; color: var(--branco);
  border-bottom: 4px solid var(--parceiro-acento); }
.topo .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-top: var(--s4); padding-bottom: var(--s4); flex-wrap: wrap; }
.topo .marca { height: 36px; width: auto; display: block; }
.topo .cliente { display: flex; align-items: center; gap: var(--s3); color: var(--texto-sobre-escuro); font-weight: 600; }
.topo .cliente img { height: 40px; width: auto; background: var(--branco); border-radius: 12px; padding: 6px 10px; }
.heroi { background: var(--azul-700); color: var(--branco); padding: var(--s6) 0 var(--s6); }
.heroi .rotulo { color: var(--ciano-400); }
.heroi h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -.02em; margin: var(--s2) 0 var(--s3);
  font-weight: 700; }
.heroi p { color: var(--texto-sobre-escuro); max-width: 760px; margin: 0; font-size: 19px; }
.heroi .nota-legal { color: var(--texto-terciario-escuro); font-size: 12px; margin-top: var(--s4); }

main { padding: var(--s6) 0 var(--s7); }
h2 { font-size: 30px; line-height: 1.15; margin: var(--s6) 0 var(--s3); color: var(--azul-500); }
h2:first-child, .rotulo + h2 { margin-top: 4px; }
h3 { font-size: 21px; line-height: 1.2; margin: var(--s4) 0 var(--s2); font-weight: 600; }
p { margin: 0 0 var(--s3); }
.secundario { color: var(--texto-secundario); }
.terciario { color: var(--texto-terciario); font-size: 14px; }

/* Cards */
.grade { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card { background: var(--branco); border: 1px solid var(--borda-200); border-radius: var(--raio-card); padding: var(--s4); }
.card.acento { border-color: var(--ciano-400); }
.card h3 { margin-top: 0; }
.card .icone { width: 40px; height: 40px; color: var(--azul-500); margin-bottom: var(--s2); }
.card .qr { width: 132px; height: 132px; border: 1px solid var(--borda-200); border-radius: var(--raio-card-p); padding: 6px;
  background: var(--branco); }
.card .qr svg { width: 100%; height: 100%; display: block; }
.card h2 { margin-top: var(--s2); }
.tm { font-size: .42em; vertical-align: super; line-height: 0; margin-left: 2px; }
.card .rodape-card { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s3); }
.pilula { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .06em;
  border-radius: 999px; padding: 3px 12px; background: var(--tonal-azul); color: var(--azul-700); }
.pilula.aberta { background: #E3F2F2; color: #1E5E5E; }
.pilula.fechada { background: var(--offwhite-50); color: var(--texto-secundario); border: 1px solid var(--borda-200); }
.callout { background: var(--tonal-ciano); border-left: 4px solid var(--ciano-400); border-radius: 0 var(--raio-card-p) var(--raio-card-p) 0;
  padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.callout.erro { background: #FDECF4; border-left-color: var(--magenta-500); }

/* Botões */
.botao { display: inline-flex; align-items: center; gap: var(--s2); font: 600 17px var(--fonte); border-radius: 12px;
  padding: 12px 22px; border: 2px solid var(--azul-500); background: var(--azul-500); color: var(--branco);
  cursor: pointer; text-decoration: none; }
.botao:hover { background: var(--azul-700); border-color: var(--azul-700); }
.botao.secundario { background: var(--branco); color: var(--azul-500); }
.botao.secundario:hover { background: var(--tonal-azul); }
.botao.cta { background: var(--magenta-500); border-color: var(--magenta-500); }
.botao.cta:hover { background: #C21F78; border-color: #C21F78; }
.botao[disabled] { opacity: .5; cursor: not-allowed; }

/* Tabelas */
.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda-200); border-radius: var(--raio-card-p); }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th { background: var(--azul-500); color: var(--branco); font-weight: 600; text-align: left; padding: 10px 12px;
  white-space: nowrap; }
td { padding: 9px 12px; border-top: 1px solid var(--borda-200); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--offwhite-50); }
td.num, th.num { text-align: right; }
td.num { font-family: var(--mono); font-weight: 500; white-space: nowrap; }
tr.total td { background: var(--tonal-azul) !important; font-weight: 700; }

/* Formulários */
.passos { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.progresso { position: sticky; top: 0; z-index: 5; background: var(--branco); border-bottom: 1px solid var(--borda-200);
  padding: 10px 0; }
.progresso .barra { height: 8px; background: var(--offwhite-50); border-radius: 999px; overflow: hidden; }
.progresso .barra span { display: block; height: 100%; width: 0; background: var(--azul-500); transition: width .2s; }
.progresso .container { display: grid; gap: 6px; }
.campo { display: grid; gap: 6px; margin-bottom: var(--s3); }
.campo label, .campo legend { font-weight: 600; }
.campo .ajuda { color: var(--texto-secundario); font-size: 14px; }
input[type=text], input[type=email], input[type=password], textarea, select { font: 400 17px var(--fonte);
  color: var(--grafite-900); padding: 12px 14px; border: 1px solid #B9BEC9; border-radius: 12px; width: 100%;
  background: var(--branco); }
textarea { min-height: 120px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
.opcoes { display: grid; gap: var(--s2); }
.opcao { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--borda-200);
  border-radius: 12px; cursor: pointer; }
.opcao:hover { border-color: var(--ciano-400); }
.opcao input { margin-top: 5px; accent-color: var(--azul-500); }
.consentimento { display: flex; gap: 10px; align-items: flex-start; background: var(--offwhite-50); padding: var(--s3);
  border-radius: 12px; font-size: 15px; }
.consentimento input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--azul-500); }

.capacidade { border: 1px solid var(--borda-200); border-radius: var(--raio-card); padding: var(--s4); margin-bottom: var(--s3); }
.capacidade.completa { border-color: var(--ciano-400); }
.capacidade h3 { margin: 0 0 4px; }
.capacidade .detalhe { color: var(--texto-secundario); margin-bottom: var(--s3); font-size: 15px; }
.lente { display: grid; grid-template-columns: 140px auto 1fr; align-items: center; gap: var(--s3); padding: 6px 0;
  border-top: 1px dashed var(--borda-200); }
.lente:first-of-type { border-top: 0; }
.lente .nome-lente { font-weight: 600; }
.notas { display: inline-flex; border: 1px solid #B9BEC9; border-radius: 10px; overflow: hidden; }
.notas label { position: relative; }
.notas input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.notas span { display: block; min-width: 44px; text-align: center; padding: 8px 0; font-family: var(--mono);
  font-weight: 500; border-left: 1px solid #B9BEC9; cursor: pointer; user-select: none; }
.notas label:first-child span { border-left: 0; }
.notas input:checked + span { background: var(--azul-500); color: var(--branco); }
.notas input:focus-visible + span { outline: 3px solid var(--ciano-400); outline-offset: -3px; }
.lente .nivel { color: var(--texto-secundario); font-size: 14px; min-height: 1.4em; }
.relevancia { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); align-items: center; padding: 8px 0;
  border-top: 1px dashed var(--borda-200); }
.hp { position: absolute; left: -10000px; }
.acoes { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; margin-top: var(--s4); }

/* Resultados */
.abas { display: flex; gap: var(--s2); flex-wrap: wrap; border-bottom: 1px solid var(--borda-200); margin-bottom: var(--s4); }
.abas button { font: 600 16px var(--fonte); background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 10px 14px; cursor: pointer; color: var(--texto-secundario); }
.abas button[aria-selected=true] { color: var(--azul-500); border-bottom-color: var(--azul-500); }
.indicadores { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.indicador { text-align: center; border: 1px solid var(--borda-200); border-radius: var(--raio-card); padding: var(--s3); }
.indicador .nome { font-weight: 600; font-size: 15px; min-height: 2.6em; }
.indicador svg { width: 120px; height: 120px; }
.indicador .sem { color: var(--texto-terciario); font-size: 14px; }
.dominio { page-break-before: always; break-before: page; }
.dominio-cab { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0 var(--s3); }
.dominio-cab img { width: 36px; height: 36px; }
.dominio-cab h2 { margin: 0; }
.graficos { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; margin: var(--s4) 0; }
.graficos .card { padding: var(--s3); }
.graficos svg { width: 100%; height: auto; display: block; }
.legenda { display: flex; flex-wrap: wrap; gap: var(--s3); font-size: 13px; color: var(--texto-secundario); }
.legenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.texto-consultor { border-left: 3px solid var(--ciano-400); padding-left: var(--s4); margin: var(--s3) 0; }
.texto-consultor h4 { margin: var(--s3) 0 var(--s2); font-size: 17px; color: var(--azul-700); }
.lista-textos { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.lista-textos li { background: var(--offwhite-50); border-radius: 12px; padding: 10px 14px; white-space: pre-wrap; }
.lista-textos li .quem { display: block; font-size: 13px; color: var(--texto-terciario); margin-bottom: 2px; white-space: normal; }
.bloco-csp { border-top: 4px solid var(--azul-500); padding-top: var(--s3); margin-top: var(--s6); }
.bloco-csp > .rotulo { display: block; margin-bottom: 4px; }
.cadeado { max-width: 480px; margin: var(--s6) auto; }

/* Resultados v2: filtros, indicadores, cartões de gráfico, tooltip */
.titulo-painel { font-size: 36px; margin: 4px 0 var(--s3); }
.intro p { max-width: 900px; }
.filtros { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end; padding: var(--s3) 0; margin-bottom: var(--s3);
  border-bottom: 1px solid var(--borda-200); position: sticky; top: 0; background: var(--branco); z-index: 4; }
.filtros label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.filtros select { font: 400 15px var(--fonte); padding: 8px 12px; border: 1px solid #B9BEC9; border-radius: 10px; background: var(--branco); min-width: 200px; }
.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: var(--s4) 0; }
.tile { border: 1px solid var(--borda-200); border-radius: var(--raio-card-p); padding: var(--s3) var(--s4); display: grid; gap: 2px; }
.tile-rotulo { font-size: 14px; color: var(--texto-secundario); }
.tile-valor { font-size: 34px; font-weight: 700; color: var(--azul-700); line-height: 1.1; }
.tile-sub { font-size: 13px; color: var(--texto-terciario); }
.heroi-tile { border-color: var(--ciano-400); background: var(--tonal-ciano); }
.heroi-tile .tile-valor { font-size: 52px; }
.grade-2 { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--s3) 0; }
.grade-3 { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: var(--s3) 0; }
.cartao { margin: var(--s3) 0; border: 1px solid var(--borda-200); border-radius: var(--raio-card); padding: var(--s4); background: var(--branco); min-width: 0; }
.cartao.largo { grid-column: 1 / -1; }
.cartao-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.cartao-cab h3 { margin: 0; font-size: 19px; }
.cartao-cab p { margin: 2px 0 0; }
.cartao-corpo svg { width: 100%; height: auto; display: block; }
.cartao-corpo svg.bullet { margin: 6px 0 4px; }
.grafico-resp { width: 100%; min-width: 0; }
.grafico-radar { overflow: visible; max-width: 620px; margin: 0 auto; }
.filtros-cartao { position: static; margin: 0 0 var(--s3); padding: 0; border: 0; background: none; box-shadow: none; }
.jornada > li ul li { border: 0; padding: 0; }
.botao-mini { font: 600 13px var(--fonte); border: 1px solid var(--borda-200); background: var(--branco); color: var(--azul-500);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.botao-mini:hover { background: var(--tonal-azul); }
.escopos { display: grid; gap: 14px; }
.escopo-linha { display: grid; grid-template-columns: 200px 1fr 56px; gap: var(--s3); align-items: center; }
.escopo-nome { font-weight: 600; font-size: 15px; }
.escopo-pct { font-family: var(--mono); font-weight: 500; text-align: right; color: var(--azul-700); }
.medidor { position: relative; height: 14px; background: var(--tonal-azul); border-radius: 999px; }
.medidor-valor { position: absolute; inset: 0 auto 0 0; background: var(--azul-500); border-radius: 999px; }
.medidor-alvo { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--grafite-900); border-radius: 2px; }
button.indicador { font: inherit; background: var(--branco); cursor: pointer; display: grid; justify-items: center; gap: 6px; }
button.indicador:hover:not([disabled]) { border-color: var(--ciano-400); }
button.indicador[disabled] { cursor: default; opacity: .7; }
.indicador .sub { font-size: 13px; color: var(--texto-terciario); }
.dominio-cab { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); }
.dominio-pct svg { display: block; }
.destaques { background: var(--offwhite-50); border-radius: var(--raio-card-p); padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.destaques ul { margin: 6px 0 0; padding-left: 20px; }
.destaques li { margin: 4px 0; }
.legenda.interativa { gap: 6px; margin-bottom: var(--s2); }
.item-legenda { display: inline-flex; align-items: center; gap: 6px; font: 500 13px var(--fonte); color: var(--texto-secundario);
  border: 1px solid var(--borda-200); background: var(--branco); border-radius: 999px; padding: 4px 10px 4px 6px; cursor: pointer; }
.item-legenda[aria-pressed=false] { opacity: .45; text-decoration: line-through; }
.item-legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legenda i.bola { width: 12px; height: 12px; border-radius: 50%; }
.legenda i.traco { width: 18px; height: 3px; border-radius: 2px; vertical-align: 3px; }
.legenda i.traco-v { width: 3px; height: 14px; border-radius: 1px; vertical-align: -2px; }
.ps-tip { position: fixed; z-index: 50; display: none; pointer-events: none; background: var(--branco); border: 1px solid var(--borda-200);
  border-radius: 12px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(14, 15, 15, .12); font-size: 13px; max-width: 320px; }
.ps-tip-titulo { font-weight: 700; margin-bottom: 4px; color: var(--grafite-900); }
.ps-tip-linha { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.ps-tip-linha strong { font-family: var(--mono); font-weight: 500; color: var(--grafite-900); }
.ps-tip-linha span:last-child { color: var(--texto-secundario); }
.ps-tip-chave { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
svg .alvo { cursor: crosshair; outline: none; }
svg .seg { cursor: pointer; outline: none; transition: opacity .15s; }
svg .seg.ativo, svg .seg:focus { opacity: .8; }
svg .alvo.ativo { fill: rgba(20, 68, 211, .05); }
.calor { display: grid; font-size: 13.5px; }
.calor-linha { display: grid; grid-template-columns: minmax(180px, 2.4fr) repeat(6, minmax(52px, 1fr)); gap: 2px; margin-bottom: 2px; }
.calor-cab span { font-weight: 600; font-size: 12.5px; color: var(--texto-secundario); padding: 4px 6px; }
.calor-grupo { display: flex; justify-content: space-between; font-weight: 700; color: var(--azul-500); padding: 12px 6px 4px;
  border-bottom: 1px solid var(--borda-200); margin-bottom: 4px; }
.calor-grupo-pct { font-family: var(--mono); font-weight: 500; }
.calor-nome { padding: 6px; align-self: center; }
.calor-num { text-align: center; }
.calor-cel { text-align: center; padding: 7px 4px; border-radius: 4px; font-family: var(--mono); font-weight: 500; font-size: 12.5px; cursor: default; outline: none; }
.calor-cel.ativo, .calor-cel:focus { outline: 2px solid var(--grafite-900); outline-offset: -2px; }
.calor-total { font-weight: 700; }
.escala-seq { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--texto-terciario); margin-bottom: var(--s2); }
.escala-seq i { width: 200px; height: 10px; border-radius: 5px; display: inline-block; }
.ordenar { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
th[aria-sort=ascending] .ordenar::after { content: " ▲"; font-size: 10px; }
th[aria-sort=descending] .ordenar::after { content: " ▼"; font-size: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 13px; border: 1px solid var(--borda-200); border-radius: 999px; padding: 3px 10px; background: var(--offwhite-50); }
.chip-cap { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--borda-200); border-radius: 999px;
  padding: 2px 3px 2px 10px; background: var(--branco); outline: none; }
.chip-cap b { font-family: var(--mono); font-weight: 500; font-size: 12px; border-radius: 999px; padding: 1px 7px; }
.chip-cap em { font-size: 11px; color: var(--texto-terciario); padding-right: 6px; }
.chip-cap.ativo, .chip-cap:focus { border-color: var(--azul-500); }
table.casos { table-layout: fixed; min-width: 760px; }
table.casos th:nth-child(1) { width: 16%; } table.casos th:nth-child(2), table.casos th:nth-child(3) { width: 18%; }
table.casos th:nth-child(4) { width: 18%; } table.casos th:nth-child(5) { width: 30%; }
.chip-cap span { white-space: normal; }
.situacao { font-weight: 600; white-space: nowrap; }
.situacao.sim { color: #0B7A7A; } .situacao.parcial { color: #9A4A00; } .situacao.nao { color: var(--texto-secundario); }
.status-kpi { font-weight: 600; white-space: nowrap; }
.status-kpi.atingida { color: #0B7A7A; } .status-kpi.parcial { color: #B3321E; } .status-kpi.acompanhamento, .status-kpi.sem-meta { color: var(--texto-secundario); }
.situacao-plano { font-size: 13px; font-weight: 600; border-radius: 999px; padding: 2px 10px; background: var(--offwhite-50); border: 1px solid var(--borda-200); white-space: nowrap; }
.situacao-plano.concluida { background: #E3F2F2; border-color: #B7E0E0; }
.card h4 { margin: 0 0 6px; font-size: 17px; color: var(--azul-700); }
.card h5 { margin: 12px 0 4px; font-size: 13px; text-transform: none; color: var(--texto-secundario); font-weight: 700; }
.card ul { margin: 0; padding-left: 18px; font-size: 15px; }
.card.risco { border-left: 4px solid var(--parceiro-acento); }
.card.st { border-top: 4px solid var(--azul-500); }
.card.st .rotulo { letter-spacing: .06em; }
.nav-blocos { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.nav-blocos a { text-decoration: none; font-weight: 600; font-size: 14px; color: var(--azul-500); border: 1px solid var(--borda-200); border-radius: 999px; padding: 6px 14px; }
.nav-blocos a:hover { background: var(--tonal-azul); }
.fluxo { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; counter-reset: etapa; }
.fluxo li { position: relative; display: grid; gap: 2px; border: 1px solid var(--borda-200); border-radius: 12px; padding: 10px 14px 10px 38px; min-width: 140px; counter-increment: etapa; }
.fluxo li::before { content: counter(etapa); position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--azul-500); color: var(--branco); font: 500 11px var(--mono); display: grid; place-items: center; }
.fluxo-nome { font-weight: 600; font-size: 14px; }
.fluxo-tempo { font-family: var(--mono); font-size: 12px; color: var(--texto-terciario); }
.jornada { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s3); position: relative; }
.jornada > li { border: 1px solid var(--borda-200); border-top: 4px solid var(--ciano-400); border-radius: 16px; padding: var(--s3); }
.jornada > li h4 { margin: 4px 0 8px; font-size: 17px; }
.jornada > li ul { padding-left: 18px; margin: 0; font-size: 14.5px; }
.jornada h5 { margin: 10px 0 4px; font-size: 13px; color: var(--texto-secundario); }
.qr-grade { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.qr-item { border: 1px solid var(--borda-200); border-radius: var(--raio-card); padding: var(--s3); text-align: center; break-inside: avoid; }
.qr-item svg { width: 190px; height: 190px; display: block; margin: 8px auto; }
.qr-item p { margin: 0; font-size: 13px; word-break: break-all; color: var(--texto-terciario); }
@media (max-width: 900px) { .grade-2 { grid-template-columns: 1fr; } .escopo-linha { grid-template-columns: 1fr 1fr 48px; } }
@media (max-width: 760px) {
  .calor-linha { grid-template-columns: minmax(120px, 2fr) repeat(6, minmax(40px, 1fr)); }
  .dominio-cab { grid-template-columns: auto 1fr; } .dominio-pct { display: none; }
  .filtros { position: static; }
}

/* Rodapé */
.rodape { border-top: 1px solid var(--borda-200); padding: var(--s4) 0 var(--s5); color: var(--texto-terciario); font-size: 13px; }
.rodape .container { display: flex; gap: var(--s4); justify-content: space-between; align-items: center; flex-wrap: wrap; }
.rodape .badge { height: 44px; width: auto; }
.rodape .assinatura { max-width: 720px; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .lente { grid-template-columns: 1fr; gap: 6px; }
  .graficos { grid-template-columns: 1fr; }
  .notas span { min-width: 48px; padding: 10px 0; }
}

/* Impressão A4 (PDF gerado no CI) */
@page { size: A4; margin: 16mm 14mm 18mm;
  @bottom-left { content: "Pointer DevSecOps · Professional Services"; font: 8pt Urbanist, Aptos, Calibri, Arial, sans-serif; color: #6B7280; }
  @bottom-right { content: counter(page) " / " counter(pages); font: 8pt "JetBrains Mono", Consolas, monospace; color: #6B7280; } }
@page :first { @bottom-left { content: none; } @bottom-right { content: none; } }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { font-size: 10.5pt; }
  .topo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .heroi, th, .indicador, tr.total td, tbody tr:nth-child(even) td, .pilula, .callout, .lista-textos li {
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .abas, .progresso, .acoes, .nao-imprimir, .filtros, .nav-blocos, .botao-mini { display: none !important; }
  .cartao, .tile, .destaques, .jornada > li, .card, .calor-linha, tr { break-inside: avoid; }
  .grade-2 { grid-template-columns: 1fr; }
  .ps-tip { display: none !important; }
  .painel { break-before: page; }
  .bloco-csp { break-before: page; margin-top: 0; }
  h2, h3, h4, .rotulo, .cartao-cab, .dominio-cab { break-after: avoid; }
  .tabela-wrap { overflow: visible; }
  .cartao.largo { break-inside: auto; }
  .texto-consultor { break-inside: avoid; }
  .painel { display: block !important; }
  main { padding: 0; }
  h2 { font-size: 18pt; }
  h3 { font-size: 13pt; }
  .card, .capacidade, .indicador { break-inside: avoid; }
  .graficos { grid-template-columns: 1fr 1fr; gap: 12px; }
  .graficos .card { padding: 10px; }
  .heroi { min-height: 225mm; display: flex; align-items: flex-end; padding: 0 0 24mm; break-after: page; }
  table { font-size: 9pt; }
  .rodape { font-size: 8pt; }
}
td ul, td ol { margin: 0; padding-left: 18px; }
td ul li + li { margin-top: 2px; }
.calor .curto { display: none; }
.radar-eixos { columns: 2; column-gap: 36px; margin: 8px 0 0; padding-left: 22px; font-size: 12.5px; color: var(--texto-secundario); }
.radar-eixos li::marker { font-family: var(--mono); color: var(--texto-terciario); }
@media (max-width: 700px) {
  .calor .longo { display: none; } .calor .curto { display: inline; }
  .calor-linha { grid-template-columns: minmax(96px, 1.6fr) repeat(6, minmax(34px, 1fr)); }
  .calor-cel { font-size: 11px; padding: 6px 1px; }
  .calor { font-size: 12.5px; }
}
.grade-kpi { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: var(--s2); }
.card.kpi { display: grid; gap: 6px; align-content: start; border-top: 4px solid #9CA3AF; }
.card.kpi.atingida { border-top-color: #10B1B1; } .card.kpi.parcial { border-top-color: #E24329; }
.kpi-cab { display: grid; gap: 4px; }
.kpi-cab h4 { margin: 0; font-size: 16px; }
.card.kpi p { margin: 0; }
.kpi-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.kpi-num span { display: block; font-size: 12px; color: var(--texto-terciario); }
.kpi-num strong { font-family: var(--mono); font-size: 22px; font-weight: 600; color: var(--azul-700); }
.kpi-num small { font-size: 12px; font-weight: 400; color: var(--texto-secundario); }
.kpi-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
/* documento de impressão: grade de 2 colunas também na tela (os gráficos são desenhados na largura impressa) */
.impressao .grade-2 { grid-template-columns: 1fr 1fr; }
.impressao table.casos { min-width: 0; }
.impressao .grade-kpi { grid-template-columns: 1fr 1fr; }
.texto-consultor > .rotulo { display: block; }
.caixa-arq { cursor: default; outline: none; }
.caixa-arq.ativo > rect:first-child, .caixa-arq:focus > rect:first-child { stroke: var(--azul-500); stroke-width: 2; }
.tile-texto .tile-valor { font-size: 22px; line-height: 1.2; }
/* Levantamento: métricas, inventário e simulador */
.origem-lev { margin: var(--s3) 0; }
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 15px; }
.ficha dt { color: var(--texto-secundario); font-weight: 600; }
.ficha dd { margin: 0; overflow-wrap: anywhere; }
.avisos { margin-top: var(--s3); font-size: 14px; }
.avisos summary, .premissas summary, .alertas-lev summary { cursor: pointer; font-weight: 600; color: var(--azul-500); }
.tiles-mini { margin: var(--s3) 0 0; }
.tiles-mini .tile-valor { font-size: 24px; }
.evidencias { margin-top: var(--s3); }
.evidencias-dominio { background: var(--tonal-ciano); border-radius: var(--raio-card-p); padding: var(--s3) var(--s4); margin: var(--s3) 0; }
.evidencias-dominio ul { margin: 6px 0 0; padding-left: 18px; }
.alertas-lev { display: grid; gap: var(--s2); margin: var(--s3) 0; }
.alertas-lev .callout { margin: 0; }
.callout.alerta-alto { background: #FDEDEA; border-left-color: #E24329; }
.callout.alerta-medio { background: #FFF4EC; border-left-color: #FC6D26; }
.callout.alerta-info { background: var(--tonal-azul); border-left-color: var(--azul-500); }
.trat { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.trat-migra { background: #E6F7F7; color: #0B7A7A; }
.trat-pos-importacao { background: var(--tonal-azul); color: var(--azul-700); }
.trat-registry { background: #F0ECFA; color: #54389E; }
.trat-manual { background: #FFF4EC; color: #A2440F; }
.trat-perdido { background: #F1F2F4; color: #4A4F5C; }
.simulador { border-top: 4px solid var(--azul-500); margin-top: var(--s6); padding-top: var(--s3); }
.controles-sim { margin: var(--s3) 0; }
.controles-sim summary { cursor: pointer; font-weight: 700; color: var(--azul-700); margin-bottom: var(--s3); }
.grade-campos { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grade-campos label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--texto-secundario); }
.grade-campos input, .grade-campos select { font: 400 15px var(--fonte); padding: 8px 10px; border: 1px solid #B9BEC9; border-radius: 10px; background: var(--branco); }
.acoes-sim { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0; }
.comercial { border: 2px dashed var(--magenta-500); margin: var(--s3) 0; }
.comercial .rotulo { color: var(--magenta-500); }
.premissas { margin: var(--s3) 0; font-size: 14.5px; color: var(--texto-secundario); }
.premissas ul { padding-left: 18px; }
@media print { .controles-sim, .acoes-sim, .comercial, .alertas-lev details { display: none !important; } .premissas { display: block; } .premissas[open] summary, .premissas summary { display: none; } }

/* comparativo das métricas do levantamento */
.comparativo-metricas { margin-top: 32px; }
.impressao .comparativo-metricas { break-before: page; margin-top: 0; }

/* Onboarding (PS-ONB-01) */
.onb-bloco + .onb-bloco { margin-top: 28px; }
.sumario a { white-space: nowrap; }
table.ficha { width: 100%; table-layout: fixed; }
table.ficha th { width: 34%; }
table.ficha td, .fontes li { overflow-wrap: anywhere; }

/* Painel executivo de métricas DORA (PS-DOR-01) */
.faixa-origem { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); background: var(--tonal-azul);
  border-radius: var(--raio-card-p); padding: var(--s3) var(--s4); margin-bottom: var(--s4); }
.faixa-origem > div { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.faixa-origem strong { font-size: 16px; color: var(--azul-700); }
.escopo-cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s3) 0; }
.escopo-cab h2 { flex-basis: 100%; margin: 0; }
.escopo-cab a { overflow-wrap: anywhere; }
.pilula.fonte-nativa { background: #E6F7F7; color: #0B6B6B; }
.pilula.fonte-calculada { background: #FFF4EC; color: #A2440F; }
.pilula.fonte-erro { background: #FDECF4; color: #9E1C63; }
.dora-kpis { align-items: start; }
.dora-grupo h3 { margin: 0 0 var(--s2); font-size: 15px; font-family: var(--mono); font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--azul-500); }
.dora-grupo .tiles { margin: 0; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dora-tile { align-content: start; }
.tile-pergunta { font-size: 13px; color: var(--texto-secundario); margin-top: 6px; border-top: 1px solid var(--borda-200); padding-top: 6px; }
.tendencia { font-size: 13px; font-weight: 600; white-space: nowrap; }
.tendencia.melhora { color: #0B7A7A; }
.tendencia.piora { color: #B3321E; }
.tendencia.estavel, .tendencia.sem { color: var(--texto-secundario); font-weight: 500; }
.nota-grafico { margin: 6px 0 0; }
.origem-dados { margin: var(--s4) 0; }
.origem-dados h3 { margin-top: 4px; }
.origem-projetos { margin-top: var(--s3); }
.origem-projetos summary { cursor: pointer; font-weight: 600; color: var(--azul-500); margin-bottom: var(--s2); }
.link-escopo { font: 600 15px var(--fonte); color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; }
table.dora-todos td { vertical-align: middle; }
table.dora-todos .pilula { white-space: nowrap; }
table.dora-todos td.num .tendencia { display: inline-block; margin-top: 2px; font-family: var(--fonte); font-size: 12px; }
.comparar-escopos { border: 1px solid var(--borda-200); border-radius: var(--raio-card-p); padding: var(--s2) var(--s3) var(--s3); margin: 0 0 var(--s3);
  display: flex; flex-wrap: wrap; gap: var(--s2); }
.comparar-escopos legend { font-size: 13px; font-weight: 600; color: var(--texto-secundario); padding: 0 6px; }
.chip-escopo { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; border: 1px solid var(--borda-200); border-radius: 999px;
  padding: 4px 12px; background: var(--offwhite-50); cursor: pointer; }
.chip-escopo:has(input:checked) { border-color: var(--azul-500); background: var(--tonal-azul); }
.chip-escopo:has(input:disabled) { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) { .filtros select { min-width: 0; width: 100%; } .filtros label { flex: 1 1 100%; } }

/* Chamados (painel do cliente) */
.card.kpi .kpi-valor { font-family: var(--mono); font-size: 30px; font-weight: 600; color: var(--azul-700); margin: 0; }
.pilula.sev-emergencia { background: #FDECF4; color: #8A1452; }
.pilula.sev-alta { background: #FDE8E3; color: #8A2E1A; }
.pilula.sev-media { background: #FFF4D6; color: #6B4E00; }
.pilula.sev-baixa { background: var(--offwhite-50); color: var(--texto-secundario); border: 1px solid var(--borda-200); }
.pilula.st-aberto { background: var(--tonal-azul); color: var(--azul-700); }
.pilula.st-em_atendimento { background: #E3F2F2; color: #1E5E5E; }
.pilula.st-aguardando_cliente { background: #FFF4D6; color: #6B4E00; }
.pilula.st-aguardando_gitlab { background: #EFE7FA; color: #4A2B7A; }
.pilula.st-resolvido { background: #E6F4EA; color: #1E5E34; }
.pilula.st-fechado { background: var(--offwhite-50); color: var(--texto-secundario); border: 1px solid var(--borda-200); }
.pilula.sla-ok { background: #E6F4EA; color: #1E5E34; }
.pilula.sla-erro { background: #FDE8E3; color: #8A2E1A; }
.pilula.sla-neutra { background: var(--offwhite-50); color: var(--texto-secundario); border: 1px solid var(--borda-200); }
.meta-chamado { display: grid; gap: 10px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: var(--s3) 0; }
.meta-chamado div { display: grid; gap: 2px; }
.meta-chamado dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-terciario); }
.meta-chamado dd { margin: 0; }
.texto-longo { white-space: pre-wrap; }
.linha-tempo { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--borda-200); }
.linha-tempo li { position: relative; padding: 4px 0 14px 20px; }
.linha-tempo li::before { content: ""; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--azul-500); border: 2px solid var(--branco); }
.linha-tempo li.ev-status::before { background: var(--ciano-400); }
.linha-tempo li.ev-support::before { background: #7A4ED1; }
.linha-tempo li.ev-resolucao::before { background: #1E9E4A; }
.linha-tempo .ev-texto { margin: 4px 0 0; white-space: pre-wrap; }
.acoes-chamado { margin: var(--s4) 0; }
.acoes-chamado .bloco-acao { border-top: 1px dashed var(--borda-200); padding-top: var(--s3); margin-top: var(--s3); }
.acoes-chamado summary { font-weight: 700; cursor: pointer; margin-bottom: 8px; color: var(--azul-700); }
.acoes-chamado form { margin-top: 8px; }
td.mono a { white-space: nowrap; }
.filtros input[type=text] { font: 400 15px var(--fonte); padding: 8px 12px; border: 1px solid #B9BEC9; border-radius: 10px; min-width: 220px; }
/* Página do técnico (onboarding) */
.checklist { list-style: none; padding: 0; }
.checklist li { padding: 6px 0; border-top: 1px dashed var(--borda-200); }
.checklist label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.checklist input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--azul-500); }
section.card { margin: var(--s4) 0; }
section.card h2 { margin-top: 0; }