/* =====================================================================
   Painel Nexo · Fase 3: painel de captação do cliente (painel_cliente.js)
   Carregue DEPOIS de estilo.css.

   Marcas de gráfico: finas, ponta arredondada de 4px, linhas de 2px,
   separação de 2px da superfície entre fatias, grade discreta.
   Texto NUNCA na cor da série: valores e rótulos usam os tons de texto;
   a marca colorida ao lado é que carrega a identidade.
   ===================================================================== */
.pn-painel__cabeca{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap}
.pn-painel__cabeca .pn-subtitulo{margin-bottom:0}
.pn-painel__ferramentas{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
.pn-painel__abas{margin:var(--space-5) 0 var(--space-5)}
.pn-painel__corpo > .nexo-alert{margin-bottom:var(--space-4)}

.pn-periodo{display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden}
.pn-periodo button{
  border:0; background:var(--surface-default); color:var(--text-secondary); cursor:pointer;
  font:600 var(--type-body-sm-size) var(--font-body); padding:8px 12px; min-width:46px;
}
.pn-periodo button + button{border-left:1px solid var(--border-default)}
.pn-periodo button[aria-pressed="true"]{background:var(--action-primary); color:var(--text-inverse)}
.pn-periodo button:focus-visible{outline:2px solid var(--focus-ring); outline-offset:-2px}
.pn-intervalo{display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--type-body-sm-size); color:var(--text-muted)}
.pn-intervalo input{
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:6px 8px;
  background:var(--surface-default); color:var(--text-primary); font:inherit;
}
.pn-intervalo--ativo input{border-color:var(--action-primary); box-shadow:0 0 0 1px var(--action-primary)}

/* cartões de número */
.pn-cartoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--space-4); margin-bottom:var(--space-5)}
.pn-cartao{
  position:relative; display:flex; flex-direction:column; gap:var(--space-1);
  background:var(--surface-default); border:1px solid var(--border-default); border-radius:var(--radius-lg);
  padding:var(--space-5); min-width:0;
}
.pn-cartao--destaque{border-color:color-mix(in srgb, var(--action-primary) 40%, var(--border-default))}
.pn-cartao__rotulo{font-size:var(--type-body-sm-size); color:var(--text-muted); padding-right:52px}
.pn-cartao__valor{font:700 var(--type-h2-size)/1.1 var(--font-body); font-variant-numeric:tabular-nums; color:var(--text-primary)}
.pn-cartao--destaque .pn-cartao__valor{font-size:var(--type-h1-size)}
.pn-cartao__sub{font-size:var(--type-body-sm-size); color:var(--text-secondary)}
.pn-cartao__sub .nexo-status{margin-top:var(--space-2)}
.pn-progresso{display:block; height:6px; border-radius:var(--radius-pill); background:var(--border-default); overflow:hidden; margin:var(--space-2) 0}
.pn-progresso i{display:block; height:100%; background:var(--action-primary); border-radius:var(--radius-pill)}
.pn-fonte__botao{
  position:absolute; top:var(--space-4); right:var(--space-4);
  border:1px solid var(--border-default); background:transparent; color:var(--text-muted); cursor:pointer;
  font:600 11px var(--font-body); letter-spacing:.04em; text-transform:uppercase; border-radius:var(--radius-pill); padding:3px 8px;
}
.pn-fonte__botao[aria-expanded="true"]{color:var(--action-primary); border-color:var(--action-primary)}
.pn-fonte{
  margin-top:var(--space-3); padding:var(--space-3); border-radius:var(--radius-md);
  background:var(--surface-subtle); border:1px solid var(--border-default);
  font-size:var(--type-caption-size); color:var(--text-secondary); line-height:1.45;
}

.pn-grade2{display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-5)}
.pn-grade2 > .pn-bloco{margin-bottom:var(--space-5)}
.pn-bloco__cabeca{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3)}
.pn-bloco__cabeca h3{margin-right:auto}
.pn-bloco__fonte{font-size:var(--type-caption-size); color:var(--text-muted)}
.pn-nota{font-size:var(--type-caption-size); color:var(--text-muted); margin:var(--space-3) 0 0}

/* gráficos SVG */
.pn-grafico{width:100%; min-height:240px}
.pn-grafico svg{display:block; width:100%; height:auto; overflow:visible}
.pn-eixo text{font:11.5px var(--font-body); fill:var(--text-muted); font-variant-numeric:tabular-nums}
.pn-grade{stroke:var(--pn-grade-graf); stroke-width:1}
.pn-base{stroke:var(--pn-base-graf); stroke-width:1}
.pn-marca-1{fill:var(--action-primary)}
.pn-ref{fill:none; stroke:var(--text-secondary); stroke-width:2; stroke-dasharray:5 4}
.pn-area{fill:var(--action-primary); fill-opacity:.12}
.pn-linha{fill:none; stroke:var(--action-primary); stroke-width:2; stroke-linejoin:round}
.pn-ponto{fill:var(--action-primary); stroke:var(--surface-default); stroke-width:2}
.pn-mira{stroke:var(--border-strong); stroke-width:1}
.pn-rotulo{font:600 12px var(--font-body); fill:var(--text-primary)}
.pn-rotulo--fraco{fill:var(--text-muted); font-weight:500}
.pn-alvo{fill:transparent}
svg .pn-serie-1{fill:var(--pn-serie-1)} svg .pn-serie-2{fill:var(--pn-serie-2)} svg .pn-serie-3{fill:var(--pn-serie-3)}
svg .pn-serie-4{fill:var(--pn-serie-4)} svg .pn-serie-5{fill:var(--pn-serie-5)} svg .pn-serie-6{fill:var(--pn-serie-6)}
svg .pn-serie-7{fill:var(--pn-serie-7)}
svg [class^="pn-serie-"]{stroke:var(--surface-default); stroke-width:2}   /* separação de 2px entre fatias */

.pn-legenda{display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-4); margin-top:var(--space-3); font-size:var(--type-caption-size); color:var(--text-secondary)}
.pn-legenda span{display:inline-flex; align-items:center; gap:6px}
.pn-legenda i{display:inline-block; width:12px; height:12px; border-radius:3px}
.pn-legenda i.pn-serie-1{background:var(--pn-serie-1)} .pn-legenda i.pn-serie-2{background:var(--pn-serie-2)}
.pn-legenda i.pn-serie-3{background:var(--pn-serie-3)} .pn-legenda i.pn-serie-4{background:var(--pn-serie-4)}
.pn-legenda i.pn-serie-5{background:var(--pn-serie-5)} .pn-legenda i.pn-serie-6{background:var(--pn-serie-6)}
.pn-legenda i.pn-serie-7{background:var(--pn-serie-7)}
.pn-legenda i.pn-serie-marca{background:var(--action-primary)}
.pn-legenda i.pn-serie-ref{height:0; border-radius:0; border-top:2px dashed var(--text-secondary)}
.pn-legenda b{color:var(--text-primary)}

/* barras horizontais (uma série só: o título nomeia, sem legenda) */
.pn-barras{display:flex; flex-direction:column; gap:var(--space-2)}
.pn-barra{display:grid; grid-template-columns:minmax(120px,38%) 1fr auto; align-items:center; gap:var(--space-3); font-size:var(--type-body-sm-size)}
/* quebra entre palavras ou na barra ("Monitoramento/<wbr>Prestação"), nunca no
   meio da palavra: overflow-wrap:anywhere cortava "Prestaç|ão" */
.pn-barra__rotulo{color:var(--text-secondary); overflow-wrap:break-word; hyphens:manual}
.pn-barra__trilho{height:14px; background:var(--surface-subtle); border-radius:0 4px 4px 0; overflow:hidden}
.pn-barra__trilho i{display:block; height:100%; min-width:2px; background:var(--action-primary); border-radius:0 4px 4px 0}
.pn-barra__valor{font-variant-numeric:tabular-nums; color:var(--text-primary); font-weight:600; min-width:3ch; text-align:right}

/* lista de aportes */
.pn-lista{display:flex; flex-direction:column}
.pn-lista__linha{display:grid; grid-template-columns:auto 1fr auto; gap:var(--space-3); align-items:center; padding:var(--space-2) 0; border-bottom:1px solid var(--border-default)}
.pn-lista__linha:last-child{border-bottom:0}
.pn-lista__quando{font:700 12px var(--font-body); color:var(--text-primary); background:var(--pn-tenue); border-radius:var(--radius-sm); padding:3px 7px}
.pn-lista__quem{display:block; font-weight:600; font-size:var(--type-body-sm-size)}
.pn-lista__o-que{display:block; font-size:var(--type-caption-size); color:var(--text-muted)}
.pn-lista__valor{font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--type-body-sm-size)}

/* % captado na tabela de projetos */
.pn-pbarra{display:flex; align-items:center; gap:var(--space-2); min-width:120px}
.pn-pbarra__trilho{flex:1; height:6px; border-radius:var(--radius-pill); background:var(--border-default); overflow:hidden}
.pn-pbarra__trilho i{display:block; height:100%; background:var(--action-primary)}
.pn-pbarra span:last-child{font-variant-numeric:tabular-nums; font-size:var(--type-caption-size); color:var(--text-secondary); min-width:4ch; text-align:right}

/* kanban: só empresa e etapa (reunião de 23/10: sem detalhe clicável) */
.pn-kanban{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(200px,1fr); gap:var(--space-3); overflow-x:auto; padding-bottom:var(--space-2)}
.pn-kanban__coluna{
  background:var(--surface-default); border:1px solid var(--border-default); border-radius:var(--radius-lg);
  border-top:4px solid color-mix(in srgb, var(--action-primary) calc(30% + var(--pn-ordem) * 7%), var(--surface-default));
  display:flex; flex-direction:column; min-width:0; max-height:520px;
}
.pn-kanban__coluna--ganho{border-top-color:var(--feedback-success)}
.pn-kanban__coluna--perdido{border-top-color:var(--border-strong)}
.pn-kanban__cabeca{display:flex; align-items:baseline; gap:var(--space-2); padding:var(--space-3) var(--space-3) var(--space-2)}
.pn-kanban__n{font:700 var(--type-h3-size)/1 var(--font-body); font-variant-numeric:tabular-nums; color:var(--text-primary)}
.pn-kanban__nome{font-size:var(--type-caption-size); color:var(--text-secondary); font-weight:600}
.pn-kanban__nome small{display:block; font-weight:500; color:var(--text-muted)}
.pn-kanban__lista{list-style:none; margin:0; padding:0 var(--space-2) var(--space-2); overflow-y:auto; display:flex; flex-direction:column; gap:4px}
.pn-kanban__lista li{font-size:var(--type-body-sm-size); padding:6px var(--space-2); background:var(--surface-subtle); border-radius:var(--radius-sm); overflow-wrap:anywhere}
.pn-kanban__lista li.pn-kanban__vazio{background:transparent; color:var(--text-muted); font-style:italic}

/* dica ao passar o mouse */
.pn-dica{
  position:fixed; z-index:95; pointer-events:none; max-width:260px;
  background:var(--pn-tooltip-bg); color:var(--pn-tooltip-ink);
  border-radius:var(--radius-sm); padding:7px 10px; font:12.5px/1.45 var(--font-body); box-shadow:var(--shadow-elevated);
}

@media (max-width:980px){ .pn-grade2{grid-template-columns:1fr} }
@media (max-width:560px){
  .pn-painel__ferramentas{width:100%}
  .pn-intervalo{flex-wrap:wrap}
  .pn-barra{grid-template-columns:1fr auto}
  .pn-barra__trilho{grid-column:1 / -1; grid-row:2}
}

/* Exportar PDF: só o painel */
@media print{
  .pn-lateral, .pn-painel__ferramentas, .pn-fonte__botao, .pn-painel__abas{display:none !important}
  .pn-app{display:block} .pn-principal{padding:0}
  .pn-bloco, .pn-cartao{break-inside:avoid}
}