/* Relatório do Desempenho (relatorio_ui.js, 1.2.408): tokens do sidepanel.css; roxo cheio só com texto branco */
.rl { display: flex; flex-direction: column; gap: 10px; }
.rl-topo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rl-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--roxo-claro); }
.rl-eyebrow .material-symbols-outlined { font-size: 18px; }
.rl-topo small, .rl .if-hint a, .rl-acao a { color: var(--muted); }
.rl .if-hint a, .rl-acao a { color: var(--roxo-claro); }

.rl-resumo { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.rl-resumo button { width: 100%; text-align: left; background: rgba(240, 82, 82, 0.08); border: 1px solid rgba(240, 82, 82, 0.25); border-radius: 12px; padding: 8px 10px; cursor: pointer; font-size: 12px; line-height: 1.4; }
.rl-resumo b { color: var(--perigo); margin-right: 4px; }

.rl-abas { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.rl-abas button { flex: none; position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px; padding: 5px 11px; font-size: 12px; cursor: pointer; color: var(--muted); }
.rl-abas button.active { background: #8000FF; border-color: #8000FF; color: #fff; }
.rl-abas button i { position: absolute; top: 2px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--perigo); }
.rl-corpo { display: flex; flex-direction: column; gap: 10px; }

.rl-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.rl-kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rl-kpi span { font-size: 11px; color: var(--muted); }
.rl-kpi b { font-size: 16px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rl-kpi em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); }
.rl-kpi em.bom { color: var(--ok); }
.rl-kpi em.ruim { color: var(--perigo); }
.rl-kpi small { font-size: 10.5px; color: var(--faint); }

.rl-achados { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.rl-achados li { font-size: 12px; padding-left: 14px; position: relative; color: var(--text); }
.rl-achados li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-claro); }
.rl-achados li.ruim::before { background: var(--perigo); }
.rl-achados li.bom::before { background: var(--ok); }

.rl-graf { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.rl-graf figcaption { font-size: 11.5px; color: var(--muted); margin-bottom: 8px; }
.rl-barras { display: flex; align-items: flex-end; gap: 3px; height: 96px; }
.rl-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; height: 100%; }
.rl-pilha { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.rl-pilha i { flex: 1; max-width: 16px; background: var(--grad); border-radius: 4px 4px 0 0; min-height: 1px; }
.rl-pilha i.rl-b2, .rl-leg i.b2 { background: rgba(156, 152, 196, 0.35); }
.rl-col small { font-size: 9px; color: var(--faint); white-space: nowrap; }
.rl-leg { font-size: 10.5px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.rl-leg i { width: 8px; height: 8px; border-radius: 2px; background: var(--indigo); display: inline-block; margin-left: 6px; }
.rl-funil { display: flex; flex-direction: column; gap: 6px; }
.rl-etapa > span { font-size: 11px; color: var(--muted); }
.rl-trilho { position: relative; height: 14px; background: rgba(255, 255, 255, 0.04); border-radius: 100px; margin-top: 2px; }
.rl-trilho i { position: absolute; inset: 0 auto 0 0; background: var(--grad); border-radius: 100px; }
.rl-trilho.viz i { background: rgba(156, 152, 196, 0.35); }
.rl-trilho b { position: absolute; right: 6px; top: 0; font-size: 10px; line-height: 14px; font-weight: 600; }
.rl-tab { overflow-x: auto; }
.rl-tab table { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rl-tab th { text-align: left; color: var(--muted); font-weight: 500; padding: 3px 6px 5px 0; border-bottom: 1px solid var(--line); }
.rl-tab td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.rl-tab td:not(:first-child), .rl-tab th:not(:first-child) { text-align: right; white-space: nowrap; }

.rl-fazer, .rl-ofertas { display: flex; flex-direction: column; gap: 6px; }
.rl-acao { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.rl-acao span { color: var(--muted); }
.rl-acao small { color: var(--ambar); }
.rl-oferta { border: 1px solid rgba(198, 167, 255, 0.35); background: linear-gradient(160deg, rgba(128, 0, 255, 0.16), rgba(67, 97, 238, 0.08) 70%, var(--surface)); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.rl-prod { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--roxo-claro); font-weight: 600; }
.rl-oferta p { color: var(--muted); }
.rl-oferta blockquote { border-left: 2px solid var(--roxo-claro); padding: 4px 8px; color: var(--text); font-style: italic; background: rgba(255, 255, 255, 0.03); border-radius: 0 8px 8px 0; }
.rl-oferta .if-btn { align-self: stretch; justify-content: center; }
.rl-combo .rl-oferta { border-color: var(--roxo-claro); }
.rl-falta { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }

/* Saúde da loja (1.2.413): nota de 0 a 100 e os 5 pilares; o pior abre a aba dele */
.rl-saude { display: flex; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; }
.rl-nota { flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--indigo-claro); }
.rl-nota b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.rl-nota small { font-size: 9.5px; color: var(--muted); }
.rl-nota.bom { border-color: var(--ok); } .rl-nota.medio { border-color: var(--ambar); } .rl-nota.ruim { border-color: var(--perigo); }
.rl-pilares { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rl-pilares button { display: grid; grid-template-columns: 68px 1fr 24px; align-items: center; gap: 6px; background: none; border: 0; padding: 1px 0; cursor: pointer; font-size: 11px; color: var(--muted); text-align: left; }
.rl-pilares button.pior span { color: var(--text); font-weight: 600; }
.rl-pilares i { height: 6px; border-radius: 100px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.rl-pilares i em { display: block; height: 100%; border-radius: 100px; background: var(--indigo-claro); }
.rl-pilares i.bom em { background: var(--ok); } .rl-pilares i.medio em { background: var(--ambar); } .rl-pilares i.ruim em { background: var(--perigo); }
.rl-pilares b { font-size: 11px; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.rl-emjogo { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ambar); }
.rl-emjogo .material-symbols-outlined { font-size: 16px; }
.rl-acao-bts { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.rl-acao-bts .if-btn { padding: 5px 12px; }
.rl-acao [data-rl-res] { overflow-wrap: anywhere; }