/* Reporte 17 — Painel Comparativo de Projetos */
#report-comparative-analysis { color: #19314f; }
#report-comparative-analysis [hidden] { display: none !important; }

.pf-cmp-report { max-width: 1800px; margin: 0 auto; }

/* Sub-navegação interna (Visão Geral / Cronograma / Orçamento / WBS / Aquisições / Lições Aprendidas) */
.pf-cmp-subnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #dde7f1; margin-bottom: 20px; padding-bottom: 0; }
.pf-cmp-subnav button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #607791; padding: 10px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; }
.pf-cmp-subnav button:hover { color: #123c68; background: #eaf2f9; border-radius: 8px 8px 0 0; }
.pf-cmp-subnav button.is-active { color: #123c68; border-bottom-color: #1887b6; }

.pf-cmp-panel { display: none; }
.pf-cmp-panel.is-active { display: block; }

.pf-cmp-section-desc { color: #64748b; font-size: 13px; margin: 0 0 18px; max-width: 820px; }

/* KPIs de visão geral */
.pf-cmp-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 8px; }
.pf-cmp-kpi-card { background: #fff; border: 1px solid #dde7f1; border-radius: 14px; padding: 16px 18px; box-shadow: 0 5px 14px rgba(15, 42, 90, .035); }
.pf-cmp-kpi-card .lbl { font-size: 11px; color: #71849a; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.pf-cmp-kpi-card .val { font-size: 25px; font-weight: 760; color: #0d315b; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pf-cmp-kpi-card .sub { font-size: 12px; color: #71849a; margin-top: 6px; }
.pf-cmp-kpi-card .sub.neg { color: #b73535; }
.pf-cmp-kpi-card .sub.pos { color: #117b48; }

.pf-cmp-card { background: #fff; border: 1px solid #dde7f1; border-radius: 14px; padding: 20px; margin-bottom: 18px; box-shadow: 0 5px 14px rgba(15, 42, 90, .035); }
.pf-cmp-card h3 { margin: 0 0 4px; font-size: 15px; color: #0d315b; }
.pf-cmp-card .card-desc { color: #71849a; font-size: 12.5px; margin: 0 0 14px; }

.pf-cmp-grid-2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }

/* Tabelas */
.pf-cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-cmp-table th { text-align: left; color: #71849a; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 10px; border-bottom: 2px solid #dde7f1; white-space: nowrap; }
.pf-cmp-table td { padding: 10px; border-bottom: 1px solid #edf2f7; vertical-align: middle; }
.pf-cmp-table tr:last-child td { border-bottom: none; }
.pf-cmp-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-cmp-proj-name { font-weight: 700; color: #0d315b; }
.pf-cmp-proj-area { font-size: 11px; color: #71849a; }

.pf-cmp-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.pf-cmp-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pf-cmp-badge.ok { background: #e6f7ed; color: #117b48; }
.pf-cmp-badge.warn { background: #fff5d8; color: #9d6508; }
.pf-cmp-badge.bad { background: #ffebeb; color: #b73535; }

.pf-cmp-bar-track { position: relative; height: 8px; background: #eef2f7; border-radius: 5px; overflow: hidden; width: 120px; display: inline-block; vertical-align: middle; }
.pf-cmp-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #3b82f6; border-radius: 5px; }

/* Gráficos de barra agrupada — construídos em HTML/CSS puro, sem dependência externa */
.pf-cmp-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 12px; color: #71849a; }
.pf-cmp-legend .item { display: flex; align-items: center; gap: 6px; }
.pf-cmp-legend .item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.pf-cmp-chart-groups { display: flex; flex-direction: column; gap: 14px; max-height: 520px; overflow-y: auto; padding-right: 4px; }
.pf-cmp-chart-group-label { font-size: 12.5px; font-weight: 700; color: #0d315b; margin-bottom: 6px; }
.pf-cmp-chart-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.pf-cmp-chart-bar-row:last-child { margin-bottom: 0; }
.pf-cmp-chart-bar-row .tag { font-size: 10.5px; color: #71849a; width: 62px; flex-shrink: 0; }
.pf-cmp-chart-bar-track { flex: 1; height: 14px; background: #eef2f7; border-radius: 4px; overflow: hidden; min-width: 60px; }
.pf-cmp-chart-bar-fill { height: 100%; border-radius: 4px; min-width: 2px; }
.pf-cmp-chart-bar-value { font-size: 11.5px; color: #19314f; width: 118px; text-align: right; flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Barra empilhada (composição de aquisições por projeto) */
.pf-cmp-stacked-track { display: flex; height: 20px; border-radius: 5px; overflow: hidden; width: 100%; background: #eef2f7; }
.pf-cmp-stacked-seg { height: 100%; }

/* Donut de composição do portfólio */
.pf-cmp-donut-row { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.pf-cmp-donut { width: 160px; height: 160px; border-radius: 50%; position: relative; flex-shrink: 0; }
.pf-cmp-donut-hole { position: absolute; inset: 22px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.pf-cmp-donut-total { font-weight: 760; font-size: 14px; color: #0d315b; }
.pf-cmp-donut-total-label { font-size: 10px; color: #71849a; margin-top: 2px; }
.pf-cmp-donut-legend { display: flex; flex-direction: column; gap: 9px; font-size: 12.5px; flex: 1; min-width: 180px; }
.pf-cmp-donut-legend .row { display: flex; align-items: center; gap: 8px; }
.pf-cmp-donut-legend .row i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pf-cmp-donut-legend .row .name { flex: 1; color: #19314f; }
.pf-cmp-donut-legend .row .val { color: #71849a; font-variant-numeric: tabular-nums; font-size: 12px; }

/* Tabs internas de projeto (WBS) */
.pf-cmp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-cmp-tab-btn { background: #eef2f7; border: 1px solid #dde7f1; color: #19314f; font-size: 12.5px; font-weight: 700; padding: 7px 13px; border-radius: 8px; cursor: pointer; transition: .15s; }
.pf-cmp-tab-btn:hover { background: #eaf2f9; }
.pf-cmp-tab-btn.is-active { background: #123c68; border-color: #123c68; color: #fff; }

/* Gauges — projetos concluídos */
.pf-cmp-gauge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pf-cmp-gauge-card { border: 1px solid #dde7f1; border-radius: 12px; padding: 16px 12px; text-align: center; }
.pf-cmp-gauge-name { font-size: 12px; font-weight: 700; color: #0d315b; margin-bottom: 12px; min-height: 34px; }
.pf-cmp-gauge-ring { width: 108px; height: 108px; border-radius: 50%; margin: 0 auto 10px; position: relative; }
.pf-cmp-gauge-hole { position: absolute; inset: 13px; background: #fff; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pf-cmp-gauge-value { font-size: 17px; font-weight: 760; }
.pf-cmp-gauge-caption { font-size: 9px; color: #71849a; margin-top: 2px; text-transform: uppercase; letter-spacing: .03em; }
.pf-cmp-gauge-days { font-size: 11.5px; color: #71849a; display: flex; flex-direction: column; gap: 6px; align-items: center; }

.pf-cmp-empty { padding: 20px; color: #71849a; font-size: 13px; }

@media (max-width: 900px) {
  .pf-cmp-kpi-grid { grid-template-columns: 1fr 1fr; }
  .pf-cmp-grid-2 { grid-template-columns: 1fr; }
}