/* Painel de Bordo · Qualificação + Config. Reuso tokens do app.css. */
.pb-wrap { display:flex; flex-direction:column; gap:16px }

.pb-alert { padding:12px 16px; background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.3);
  border-radius:10px; font-size:13px; color:var(--txt); margin-bottom:12px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.pb-alert b { color:var(--alert) }
.pb-info { padding:10px 14px; background:var(--surface2); border:1px solid var(--line);
  border-radius:8px; font-size:12px; color:var(--muted); margin-bottom:12px }

.pb-btn-rec { width:auto; padding:6px 14px; margin:0 0 0 auto; background:var(--steel); color:#fff;
  border:0; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer }
.pb-btn-rec:disabled { opacity:.6; cursor:default }

/* Drill-down */
.pb-drill-count { font-size:11px; color:var(--muted); margin:4px 0 8px }
.pb-tbl { width:100%; border-collapse:collapse; font-size:12px }
.pb-tbl th { background:var(--surface2); text-align:left; padding:8px 10px; font-size:10px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid var(--line) }
.pb-tbl td { padding:7px 10px; border-bottom:1px solid var(--line) }
.pb-tbl tr:hover td { background:var(--surface2) }
.pb-empty { padding:28px; text-align:center; color:var(--faint); font-size:13px }

/* Refino em tempo real do indicador 5 */
.pb-refino { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px;
  background:var(--surface2); border:1px solid var(--line); border-radius:8px; margin:0 0 12px; font-size:12px }
.pb-ref-lbl { font-weight:600; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.3px }
.pb-chk { display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:12px }
.pb-ref-et { padding:6px 10px; border:1px solid var(--line); border-radius:6px; font-size:12px }

/* KPI "on" (destacado quando expandido) */
.kpi.on { border-color:var(--steel); box-shadow:0 0 0 2px rgba(37,99,235,.15) }

/* Config: blocos e multi-select */
.pb-cfg-tools { float:right }
.pb-cfg-msg { font-size:12px; margin:8px 0; min-height:18px }
.pb-cfg-block { border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin:12px 0;
  background:var(--surface) }
.pb-cfg-block h4 { margin:0 0 10px; font-size:14px; color:var(--vault); font-weight:600 }
.pb-row { display:flex; align-items:center; gap:10px; margin:8px 0; flex-wrap:wrap }
.pb-row > label:first-child { min-width:220px; font-size:12px; color:var(--muted); font-weight:500 }
.pb-row input[type="text"], .pb-row input:not([type]), .pb-row input[type="number"] {
  padding:6px 10px; border:1px solid var(--line); border-radius:6px; font-size:12px }
.pb-tag-recon { display:inline-block; padding:1px 6px; font-size:9px; font-weight:700;
  background:rgba(220,38,38,.12); color:var(--alert); border-radius:8px; letter-spacing:.3px; text-transform:uppercase }

.pb-msel-wrap { align-items:flex-start }
.pb-msel { flex:1; max-height:240px; overflow-y:auto; border:1px solid var(--line); border-radius:6px;
  padding:8px; background:var(--surface2);
  display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start }

.pb-msel-it { display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; font-size:11px; font-weight:500; line-height:1.3;
  text-transform:none; letter-spacing:normal; white-space:nowrap;
  cursor:pointer; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--vault);
  transition:all .12s ease; user-select:none }

.pb-msel-it:hover { border-color:var(--steel); background:var(--surface2) }

.pb-msel-it input[type=checkbox] { position:absolute; opacity:0; pointer-events:none; width:0; height:0 }

.pb-msel-it:has(input:checked) {
  background:var(--steel); border-color:var(--steel); color:#fff }
.pb-msel-it:has(input:checked)::before {
  content:"✓"; font-size:10px; font-weight:700; margin-right:2px }

/* --- Accordion Painel de Bordo (Config) --- */
.pbc-list { display:flex; flex-direction:column; gap:8px; margin-top:10px }
.pbc-block { border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden; transition:box-shadow .15s }
.pbc-block.dirty { border-color:#f59e0b; box-shadow:0 0 0 2px rgba(245,158,11,.15) }
.pbc-block .pbc-dirty { display:none; color:#f59e0b; font-size:16px; margin:0 4px }
.pbc-block.dirty .pbc-dirty { display:inline }

.pbc-head { display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer; user-select:none }
.pbc-head:hover { background:var(--surface2) }
.pbc-num { width:22px; height:22px; border-radius:50%; background:var(--steel); color:#fff;
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center }
.pbc-tit { font-size:13px; font-weight:600; color:var(--vault) }
.pbc-resumo { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--muted); align-items:center }
.pbc-chip { padding:2px 8px; background:var(--surface2); border:1px solid var(--line); border-radius:12px }
.pbc-chev { color:var(--muted); font-size:12px; transition:transform .15s }
.pbc-block.open .pbc-chev { transform:rotate(180deg) }
.pbc-body { display:none; padding:6px 16px 14px; border-top:1px solid var(--line); background:var(--surface2) }
.pbc-block.open .pbc-body { display:block }

.pbc-mini { padding:4px 10px; background:var(--surface2); border:1px solid var(--line); border-radius:6px;
  font-size:11px; color:var(--muted); cursor:pointer }
.pbc-mini:hover { background:var(--surface); color:var(--txt) }

.pb-msel-tools { display:flex; gap:6px; align-items:center; width:100%; margin:6px 0 4px }
.pb-msel-search { flex:1; padding:5px 8px; border:1px solid var(--line); border-radius:6px; font-size:12px }

/* --- Tela Perfil --- */
.pf-wrap { display:flex; flex-direction:column; gap:8px; margin-top:12px }
.pf-sec { border:1px solid var(--line); border-radius:10px; background:var(--surface); overflow:hidden }
.pf-sec-head { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; user-select:none }
.pf-sec-head:hover { background:var(--surface2) }
.pf-chev { color:var(--muted); font-size:12px; transition:transform .15s }
.pf-sec.open .pf-chev { transform:rotate(90deg) }
.pf-sec-body { display:none; border-top:1px solid var(--line) }
.pf-sec.open .pf-sec-body { display:block }
.pf-badge { padding:1px 8px; font-size:10px; font-weight:700; background:rgba(37,99,235,.12); color:var(--steel);
  border-radius:8px; letter-spacing:.3px; text-transform:uppercase }
.pf-sec-tools { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap }
.pf-mini { padding:3px 8px; background:var(--surface2); border:1px solid var(--line); border-radius:6px;
  font-size:10px; color:var(--muted); cursor:pointer }
.pf-mini:hover { background:var(--surface); color:var(--txt) }

.pf-tbl { width:100%; border-collapse:collapse; font-size:12px }
.pf-tbl th { background:var(--surface2); text-align:left; padding:8px 10px; font-size:10px;
  color:var(--muted); text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid var(--line) }
.pf-tbl td { padding:6px 10px; border-bottom:1px solid var(--line) }
.pf-tbl tr:hover td { background:var(--surface2) }
.pf-view { display:flex; flex-direction:column; gap:2px }
.pf-view small { color:var(--faint); font-size:10px; font-family:var(--mono,"JetBrains Mono",monospace) }
.pf-cell { text-align:center; width:110px }
.pf-role { text-align:center; width:110px }

/* Reconciliar: estado de carregamento */
.pb-btn-rec.is-loading { opacity:.85; cursor:progress }
.pb-btn-rec[disabled]  { pointer-events:none }
.pb-spin {
  display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-2px;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation: pb-spin .8s linear infinite;
}
@keyframes pb-spin { to { transform: rotate(360deg) } }

/* Centralização dos conteúdos dos indicadores do Painel de Bordo */
#pbKpis .kpi {
  text-align: center;
}

#pbKpis .kpi .lbl,
#pbKpis .kpi .val,
#pbKpis .kpi .sub {
  width: 100%;
  text-align: center;
}

/* Eu rolo a tabela horizontalmente em vez de esconder colunas,
   porque a auditoria precisa de todos os campos. */
.pb-drill-tbl { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch }
.pb-drill-tbl .pb-tbl { min-width: 760px }
.pb-tbl th { position: sticky; top: 0; z-index: 1 }

@media (max-width: 1024px) {
  .pb-refino { gap: 6px }
  .pb-alert { flex-direction: column; align-items: flex-start }
  .pb-btn-rec { margin: 6px 0 0 }
}
@media (max-width: 640px) {
  #pbKpis .kpi .val { font-size: 24px }
}

/* KPIs: matriz clicável (drill BI) */
.kp-mat th, .kp-mat td { white-space:nowrap }
.kp-mat .kp-nome { position:sticky; left:0; background:var(--surface); z-index:1 }
.kp-cel { text-align:center; cursor:pointer }
.kp-grp { cursor:pointer }
.kp-cel:hover, .kp-grp:hover td { background:var(--surface2) }
.kp-cel.on, .kp-grp.on td { background:rgba(37,99,235,.10) }
.kp-sub { font-size:10px; opacity:.65; font-weight:400 }