/* DrawerAnalytics (O12) — Fase BB. Painel analítico fixo no topo do DetailDrawer.
   Princípio #27 respeitado: tokens sempre sem fallback hex (todos existem em tokens.css). */

.cmp-drawer-analytics {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}

.cmp-drawer-analytics__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmp-drawer-analytics__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}
.cmp-drawer-analytics__sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.cmp-drawer-analytics__kpis,
.cmp-drawer-analytics__forecast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.cmp-drawer-analytics__section-head {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
  margin-top: var(--space-1);
}

.cmp-drawer-analytics__chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.cmp-drawer-analytics__chart-cap {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.cmp-drawer-analytics__chart-canvas {
  position: relative;
  height: 240px;
}

.cmp-drawer-analytics__panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.cmp-drawer-analytics__panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.cmp-drawer-analytics__fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.cmp-drawer-analytics__field {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: baseline;
}
.cmp-drawer-analytics__field dt {
  font-size: var(--text-xs);
  color: var(--text-muted);
}
.cmp-drawer-analytics__field dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Drawer estreito / mobile: empilha as grades de 2 colunas. */
@media (max-width: 560px) {
  .cmp-drawer-analytics__kpis,
  .cmp-drawer-analytics__forecast,
  .cmp-drawer-analytics__panels {
    grid-template-columns: 1fr;
  }
}