/* telas/performance/estilo.css — aba Performance do Analytics (#510).
   Cor só por token do tema (--ds-*, --ink-*, --line): o que carrega
   significado é o delta (ds-delta) e o alerta de dado. Sem paleta nova. */
.pf { width: 100%; max-width: 1360px; min-width: 0; box-sizing: border-box; }
.pf-cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.pf-cabeca h2 { margin: 0 0 4px; }
.pf-janela { margin: 4px 0 12px; }
.pf section { margin: 20px 0; min-width: 0; }
.pf section h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.pf section h3 small { font-weight: 400; opacity: .7; margin-left: 6px; }
.pf-cards.ds-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pf-topo-cards.ds-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pf-fontes { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; }
.pf-fonte-pill b { font-variant-numeric: tabular-nums; }
.pf-fontes-abas { margin: 18px 0 10px; }
.pf-fontes-abas button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pf-aba-estado { font-size: 10px; }
.pf-visoes { margin: 10px 0 14px; }
.pf-visoes button { min-height: 40px; }
.pf-filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 10px 0; }
.pf-filtros label { display: flex; flex-direction: column; font-size: 12px; opacity: .9; gap: 3px; min-width: 0; }
.pf-filtros select { max-width: 260px; min-height: 36px; }
.pf-duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pf-chart svg { width: 100%; height: auto; max-height: 320px; display: block; }
.pf-chart .pf-tracejada { stroke-dasharray: 5 4; opacity: .7; }
.pf-chart .dica b { font-variant-numeric: tabular-nums; }
.pf-funil { display: grid; gap: 8px; }
.pf-funil-etapa { display: grid; grid-template-columns: 140px 1fr 260px; gap: 12px; align-items: center; }
.pf-funil-rot { font-weight: 600; }
.pf-funil-barra { height: 22px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 6px; overflow: hidden; }
.pf-funil-barra span { display: block; height: 100%; background: var(--ds-chart-1, var(--accent, #4c8bf5)); border-radius: 6px; transition: width .2s; }
.pf-funil-val { display: flex; gap: 10px; align-items: baseline; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-funil-pct { font-size: 12px; opacity: .75; }
.pf-alerta { border-left: 3px solid var(--ds-err, #e0605b); padding: 10px 14px; background: color-mix(in srgb, var(--ds-err) 8%, transparent); border-radius: 6px; line-height: 1.5; }
.pf-alerta ul { margin: 6px 0 0; padding-left: 18px; }
.pf-vazio { border: 1px dashed var(--line, #45505d); border-radius: 12px; padding: 18px; }
.pf-vazio h3 { margin: 8px 0 4px; }
.pf-vazio p { margin: 4px 0; line-height: 1.5; }
.pf-erro { border-left: 3px solid var(--ds-err, #e0605b); padding: 10px 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pf-skeleton { margin: 12px 0; }
.pf-calor { position: relative; display: inline-block; min-width: 96px; text-align: right; }
.pf-calor i { position: absolute; inset: 2px auto 2px 0; background: var(--ds-chart-1, #4c8bf5); opacity: .18; border-radius: 4px; }
.pf-calor b { position: relative; font-weight: 500; padding: 0 4px; font-variant-numeric: tabular-nums; }
.pf-link { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; padding: 0; text-decoration: underline dotted; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.pf-link small { opacity: .7; }
.pf .ds-tabela small { opacity: .7; }
.pf-lucro { width: 100%; }
.pf-lucro td { padding: 6px 8px; border-bottom: 1px solid var(--line, #45505d); }
.pf-lucro td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-lucro .pf-total td { font-weight: 600; }
.pf-metodologia { margin: 24px 0; line-height: 1.5; }
.pf-metodologia dt { font-weight: 600; margin-top: 8px; }
.pf-metodologia dd { margin: 2px 0 0; opacity: .85; }
.pf .ds-kpi.neutro .ds-kpi-val { opacity: .5; }
@media (max-width: 900px) {
  .pf-duas { grid-template-columns: 1fr; }
  .pf-funil-etapa { grid-template-columns: 1fr; gap: 4px; }
  .pf-funil-val { white-space: normal; flex-wrap: wrap; }
  .pf-filtros select { max-width: 100%; }
}
@media (max-width: 640px) {
  .pf-cards.ds-kpis, .pf-topo-cards.ds-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cabeca .analytics-selo { display: none; }
  /* tabela larga vira cartão empilhado (TabelaDensa carimba data-rotulo em cada célula) */
  .pf .ds-tabela-rol { overflow: visible; }
  .pf .ds-tabela thead { display: none; }
  .pf .ds-tabela tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line, #45505d); }
  .pf .ds-tabela td { display: flex; justify-content: space-between; gap: 8px; border: 0; padding: 2px 0; }
  .pf .ds-tabela td::before { content: attr(data-rotulo); opacity: .65; font-size: 11px; }
  .pf .ds-tabela td:first-child { grid-column: 1 / -1; font-weight: 600; }
  .pf .ds-tabela td:first-child::before { content: none; }
}