/* ============================================================
   Gráficos
   ============================================================ */

.chart-page { display: flex; flex-direction: column; gap: var(--space-5); }

.chart-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.chart-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--slate);
  font-size: 0.85rem;
  font-weight: 800;
  transition: all var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.chart-tab svg { width: 1.1rem; height: 1.1rem; }
.chart-tab:hover { border-color: var(--blush-200); color: var(--blush-600); }
.chart-tab.is-active { background: var(--blush-500); border-color: var(--blush-500); color: var(--white); box-shadow: 0 8px 18px rgba(184, 67, 106, 0.2); }
.chart-tab.is-active svg { color: var(--white); }

.chart-card { display: flex; flex-direction: column; overflow: hidden; }
.chart-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-3);
  flex-wrap: wrap;
}
.chart-card__title { font-size: var(--text-h2); }
.chart-card__subtitle { margin-top: 0.15rem; font-size: var(--text-xs); color: var(--slate); }
.chart-card__badges { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-5) var(--space-3);
  flex-wrap: wrap;
}
.chart-toolbar__group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.chart-toolbar__label { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--slate); }
.chart-toolbar__zoom { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; }

.chart-canvas-wrap {
  position: relative;
  width: 100%;
  height: 25rem;
  padding: 0 var(--space-3) var(--space-2);
}
.chart-canvas-wrap canvas { width: 100% !important; height: 100% !important; display: block; }

@media (max-width: 900px) {
  .chart-canvas-wrap { height: 21rem; }
}
@media (max-width: 560px) {
  .chart-canvas-wrap { height: 19rem; padding: 0 var(--space-1) var(--space-1); }
  .chart-toolbar { padding: var(--space-2) var(--space-3) var(--space-2); }
  .chart-card__top { padding: var(--space-4) var(--space-4) var(--space-2); }
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--slate);
}
.chart-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.chart-legend__swatch { width: 1.5rem; height: 0; border-top: 2px solid currentColor; border-radius: 2px; }
.chart-legend__swatch--dashed { border-top-style: dashed; }
.chart-legend__swatch--point { width: 0.6rem; height: 0.6rem; border: 0; border-radius: 50%; background: currentColor; }
.chart-legend__swatch--area { width: 1.1rem; height: 0.65rem; border: 0; border-radius: 0.25rem; background: rgba(184, 67, 106, 0.18); }
.chart-legend__item--p3 { color: var(--chart-outer); }
.chart-legend__item--p15 { color: var(--chart-inner); }
.chart-legend__item--p50 { color: var(--chart-p50); }
.chart-legend__item--patient { color: var(--chart-patient); }

.chart-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: var(--space-3) var(--space-5) var(--space-4);
  font-size: var(--text-xs);
  color: var(--slate);
  line-height: 1.5;
}
.chart-note svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; color: var(--sky-600); }
.chart-note--warning { color: var(--warning-text); }
.chart-note--warning svg { color: var(--warning-text); }

.chart-empty { padding: var(--space-6) var(--space-5) var(--space-8); }
.chart-loading { padding: var(--space-10) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); color: var(--slate); }

.chart-table { padding: var(--space-2) var(--space-5) var(--space-5); }
.chart-table .table-wrap { max-height: 18rem; overflow: auto; }

/* Resumo de último ponto */
.chart-last-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem var(--space-5);
  border-top: 1px solid var(--line);
  background: var(--surface);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}
.chart-last-summary__value { font-weight: 800; font-variant-numeric: tabular-nums; }
.chart-last-summary__meta { color: var(--slate); font-size: var(--text-xs); }

/* Tooltip externa (opcional) */
.chart-tooltip {
  position: absolute;
  z-index: 5;
  min-width: 12rem;
  max-width: 18rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--white);
  font-size: 0.75rem;
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.75rem));
  opacity: 0;
  transition: opacity var(--duration-fast);
}
.chart-tooltip.is-visible { opacity: 1; }
.chart-tooltip__title { font-weight: 800; margin-bottom: 0.2rem; }
.chart-tooltip__row { display: flex; justify-content: space-between; gap: 0.75rem; }
.chart-tooltip__row span:first-child { color: rgba(255, 255, 255, 0.72); }
.chart-tooltip__row strong { font-weight: 800; font-variant-numeric: tabular-nums; }

/* Estado de erro de CDN */
.cdn-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-5);
  text-align: center;
}

.chart-section-note { font-size: var(--text-xs); color: var(--slate-soft); text-align: center; padding-bottom: var(--space-2); }

/* Legenda interativa */
button.chart-legend__item {
  background: none;
  border: 0;
  padding: 0.15rem 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  min-height: 28px;
}
button.chart-legend__item:hover { text-decoration: underline; }
button.chart-legend__item.is-off { opacity: 0.42; }
button.chart-legend__item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 0.3rem; }