/* ============================================================
   report-parts.css — peças de relatório partilhadas (rx-core, Out 2026)

   Usadas pelos relatórios dos dois produtos; só estrutura e cores do
   contrato (--rx-*). Prefixo #app.report-view: os report.css dos produtos
   têm regras genéricas (ex.: "details summary::before") que, sem ele,
   ganhavam a estas.

   .rx-bars  — barras horizontais na mesma escala (rótulo · barra · valor).
               .rx-bars--compact: mais baixas e juntas (listas longas).
               .rx-bars--stacked: rótulo numa linha própria (rótulos longos).
   .rx-dim   — linha compacta que abre (<details>): nome · barra · valor,
               frase de resumo (2 linhas) e, ao abrir, o detalhe.
   .rx-tone-good/okay/bad/neutral/strong — cor de dados das barras
               (semânticas do contrato; nunca a cor de destaque).
   ============================================================ */

#app.report-view .rx-tone-good    { background: var(--rx-good); }
#app.report-view .rx-tone-okay    { background: var(--rx-warn); }
#app.report-view .rx-tone-bad     { background: var(--rx-bad); }
#app.report-view .rx-tone-neutral { background: var(--rx-text-3); opacity: 0.55; }
#app.report-view .rx-tone-strong  { background: var(--rx-text-2); }

/* ── Barras horizontais ── */
#app.report-view .rx-bars { display: grid; gap: 0.625rem; margin: 0.25rem 0 0.5rem; }
#app.report-view .rx-bar-row {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
}
#app.report-view .rx-bar-label { min-width: 0; font-size: 0.8125rem; color: var(--rx-text-2); overflow-wrap: anywhere; }
#app.report-view .rx-bar-label strong { color: var(--rx-text-1); font-weight: 650; }
#app.report-view .rx-bar-track { height: 10px; border-radius: 99px; background: var(--rx-border); overflow: hidden; }
#app.report-view .rx-bar-track i { display: block; height: 100%; border-radius: 99px; }
#app.report-view .rx-bar-val {
  min-width: 3rem;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--rx-text-1);
  white-space: nowrap;
}
#app.report-view .rx-bars--compact { gap: 0.375rem; }
#app.report-view .rx-bars--compact .rx-bar-row { grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) auto; gap: 0.625rem; }
#app.report-view .rx-bars--compact .rx-bar-label { font-size: 0.75rem; }
#app.report-view .rx-bars--compact .rx-bar-track { height: 6px; }
#app.report-view .rx-bars--compact .rx-bar-val { min-width: 2rem; font-size: 0.75rem; }
#app.report-view .rx-bars--stacked .rx-bar-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label val" "track track";
  row-gap: 0.3125rem;
}
#app.report-view .rx-bars--stacked .rx-bar-label { grid-area: label; }
#app.report-view .rx-bars--stacked .rx-bar-val { grid-area: val; }
#app.report-view .rx-bars--stacked .rx-bar-track { grid-area: track; }
@media (max-width: 560px) {
  #app.report-view .rx-bar-row,
  #app.report-view .rx-bars--compact .rx-bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label val" "track track";
    row-gap: 0.3125rem;
  }
  #app.report-view .rx-bar-label { grid-area: label; }
  #app.report-view .rx-bar-val { grid-area: val; min-width: 0; }
  #app.report-view .rx-bar-track { grid-area: track; }
}

/* ── Linhas compactas que abrem ── */
#app.report-view .rx-dim { border-top: 1px solid var(--rx-border); }
#app.report-view .rx-dim:first-child,
#app.report-view .rx-dims-head + .rx-dim { border-top: 0; }
#app.report-view .rx-dims-head {
  margin: 0.875rem 0 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rx-text-3);
}
#app.report-view .rx-dim > summary {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  grid-template-areas: "name bar val" "why why why";
  align-items: center;
  gap: 0.375rem 1rem;
  padding: 0.875rem 0;
  list-style: none;
  cursor: pointer;
}
#app.report-view .rx-dim > summary::-webkit-details-marker { display: none; }
#app.report-view .rx-dim > summary::before { content: none; }
#app.report-view .rx-dim-name {
  grid-area: name;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--rx-text-1);
}
#app.report-view .rx-dim-name svg { color: var(--rx-text-3); flex-shrink: 0; margin: 0; }
#app.report-view .rx-dim-bar { grid-area: bar; height: 6px; border-radius: 99px; background: var(--rx-border); overflow: hidden; }
#app.report-view .rx-dim-bar i { display: block; height: 100%; border-radius: 99px; }
#app.report-view .rx-dim-val { grid-area: val; justify-self: end; }
#app.report-view .rx-dim-why {
  grid-area: why;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--rx-text-2);
}
#app.report-view .rx-dim:not([open]) .rx-dim-why {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#app.report-view .rx-dim-body { padding: 0 0 1rem; font-size: 0.8125rem; line-height: 1.55; color: var(--rx-text-3); }
@media (max-width: 480px) {
  #app.report-view .rx-dim > summary {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name val" "bar bar" "why why";
  }
}