/* Relatórios de demonstração no estilo Power BI (vendas, aprovações e prazos).
   Paleta própria do relatório, validada com o script de dataviz: claro (#fcfcfb) e escuro (#1a1a19).
   Cor de marca para o principal, cinza para contexto; status sempre com ícone e texto. */

.bi {
  --bi-bg: #f1f1ee;
  --bi-card: #fcfcfb;
  --bi-ink: #0b0b0b;
  --bi-ink2: #52514e;
  --bi-ink3: #7a7975;
  --bi-grid: #e2e1dd;
  --bi-track: #ebeae6;
  --bi-s1: #2a78d6;
  --bi-on: #1f63b8;
  --bi-on-ink: #ffffff;
  --bi-s2: #eb6834;
  --bi-gray: #85847f;
  --bi-ctl: #85847f;
  --bi-good: #0b6a0b;
  --bi-bad: #b3261e;
  --bi-line: #d6d5d0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  min-height: 560px;
  background: var(--bi-bg);
  color: var(--bi-ink);
  font-family: "Segoe UI", var(--font-base), sans-serif;
  font-size: 0.92rem;
  position: relative;
}

.bi[data-theme="dark"] {
  --bi-bg: #111110;
  --bi-card: #1a1a19;
  --bi-ink: #f0efec;
  --bi-ink2: #c3c2b7;
  --bi-ink3: #8f8e86;
  --bi-grid: #333331;
  --bi-track: #2a2a28;
  --bi-s1: #3987e5;
  --bi-on: #3987e5;
  --bi-on-ink: #111110;
  --bi-s2: #d95926;
  --bi-gray: #7d7c76;
  --bi-ctl: #7d7c76;
  --bi-good: #5ad45a;
  --bi-bad: #ff8a80;
  --bi-line: #3a3a37;
}

.bi *,
.bi *::before,
.bi *::after {
  box-sizing: border-box;
}

.bi h2,
.bi h3,
.bi p,
.bi ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bi button {
  font: inherit;
  color: inherit;
}

.bi :focus-visible {
  outline: 3px solid var(--bi-s1);
  outline-offset: 2px;
}

.bi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.bi-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bi-ink2);
}

.bi-title {
  max-width: 62ch;
  font-size: clamp(1.1rem, 3.4vw, 1.5rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--bi-ink);
}

.bi-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 8px;
  border: 1px solid var(--bi-ctl);
  background: var(--bi-card);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.bi-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.bi-slicer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.bi-slicer-l {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bi-ink2);
  margin-right: 4px;
}

.bi-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding-inline: 14px;
  border-radius: 999px;
  border: 1px solid var(--bi-ctl);
  background: var(--bi-card);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Texto 4,5:1 ou mais nos dois temas (a cor da série sozinha dava 4,42:1 no claro e 3,64:1 no escuro). */
.bi-chip[aria-pressed="true"] {
  background: var(--bi-on);
  border-color: var(--bi-on);
  color: var(--bi-on-ink);
}

.bi-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bi-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.bi[data-mode="desktop"] .bi-kpis,
.bi[data-mode="tablet"] .bi-kpis {
  grid-template-columns: repeat(4, 1fr);
}

.bi-kpi {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--bi-line);
  background: var(--bi-card);
}

.bi-kpi-l {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bi-ink2);
}

.bi-kpi-v {
  font-size: clamp(1.25rem, 4.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.bi-kpi-d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  font-weight: 600;
}

.bi-kpi-n {
  font-weight: 400;
  color: var(--bi-ink2);
}

.bi-good {
  color: var(--bi-good);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.bi-bad {
  color: var(--bi-bad);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.bi-grid-c {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

.bi[data-mode="desktop"] .bi-grid-c,
.bi[data-mode="tablet"] .bi-grid-c {
  grid-template-columns: repeat(2, 1fr);
}

.bi[data-mode="desktop"] .bi-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.bi-span-2 {
  grid-column: 1 / -1;
}

.bi[data-mode="desktop"] .bi-grid-3 .bi-span-2 {
  grid-column: span 2;
}

.bi-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--bi-line);
  background: var(--bi-card);
}

.bi-card-h h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.bi-card-s {
  font-size: 0.82rem;
  color: var(--bi-ink2);
}

.bi-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--bi-ink2);
}

/* Linhas */
.bi-line {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
}

.bi-grid {
  stroke: var(--bi-grid);
  stroke-width: 1;
}

.bi-ax {
  fill: var(--bi-ink2);
  font-size: 12px;
}

.bi-path {
  fill: none;
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bi-path.bi-s1,
.bi-dot.bi-s1 {
  stroke: var(--bi-s1);
}

.bi-path.bi-s-gray,
.bi-dot.bi-s-gray {
  stroke: var(--bi-gray);
}

.bi-dash {
  stroke-dasharray: 6 5;
}

.bi-dot {
  fill: var(--bi-card);
  stroke-width: 2.5;
}

.bi-cross {
  stroke: var(--bi-ink3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.bi-ref {
  stroke: var(--bi-ink2);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.bi-ref-t,
.bi-dl {
  fill: var(--bi-ink2);
  font-size: 12px;
  font-weight: 600;
}

.bi-leg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 0.85rem;
  color: var(--bi-ink2);
}

.bi-leg li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bi-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.bi-sw.bi-s1 {
  background: var(--bi-s1);
}

.bi-sw.bi-s-gray {
  background: var(--bi-gray);
}

/* Barras clicáveis */
.bi-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bi-bar {
  display: grid;
  grid-template-columns: minmax(84px, 112px) 1fr minmax(52px, auto);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.bi-bar:hover {
  background: var(--bi-track);
}

.bi-bar[disabled] {
  cursor: default;
}

.bi-bar[aria-pressed="true"] {
  border-color: var(--bi-s1);
  background: var(--bi-track);
  font-weight: 700;
}

.bi-bar-l {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
}

.bi-flag .bi-bar-l {
  font-weight: 700;
}

.bi-bar-t {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: var(--bi-track);
  overflow: hidden;
}

.bi-bar-f {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  border-radius: 0 4px 4px 0;
  background: var(--bi-s1);
  transition: width 0.3s ease;
}

.bi-flag .bi-bar-f {
  background: var(--bi-s2);
}

.bi-dim .bi-bar-f {
  opacity: 0.35;
}

.bi-bar-v {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Tabela */
.bi-tablewrap {
  overflow-x: auto;
}

/* Região rolável alcançável pelo teclado: o anel fica por dentro para não ser cortado pelo overflow. */
.bi-tablewrap:focus-visible {
  outline: 3px solid var(--bi-s1);
  outline-offset: -3px;
}

.bi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.bi-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bi-ink2);
  border-bottom: 1px solid var(--bi-line);
  white-space: nowrap;
}

.bi-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--bi-grid);
  white-space: nowrap;
}

.bi-table .bi-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Cabeçalho de linha (primeira coluna): lê como dado, não como título de coluna. */
.bi-table tbody th.bi-rowh {
  padding: 9px 10px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bi-ink);
  border-bottom: 1px solid var(--bi-grid);
}

/* Alternância gráfico e tabela do gráfico de linhas */
.bi-vista {
  display: flex;
  justify-content: flex-end;
}

.bi-vazio {
  padding: 16px;
  color: var(--bi-ink2);
}

/* Tooltip */
.bi-tip {
  position: absolute;
  z-index: 6;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--bi-line);
  background: var(--bi-card);
  color: var(--bi-ink);
  font-size: 0.85rem;
  pointer-events: none;
}

.bi-tip[hidden] {
  display: none;
}

.bi-tip-t {
  font-weight: 700;
  margin-bottom: 4px;
}

.bi-tip-r {
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .bi-bar-f {
    transition: none;
  }
}

.bi[data-mode='phone'] .bi-table th,
.bi[data-mode='phone'] .bi-table td {
  padding: 8px 6px;
  font-size: 0.8rem;
}

.bi[data-mode='phone'] .bi-table th,
.bi[data-mode='phone'] .bi-table td {
  white-space: normal;
}