/* Componentes limitados aos gráficos da operação; herdam os tokens Linhas. */
.op-grafico {
  --op-grafico-texto: var(--texto, #f7f8fa);
  --op-grafico-secundario: var(--texto2, #bac0c8);
  --op-grafico-linha: var(--linha, rgba(235, 238, 243, .105));
  --op-grafico-fundo: var(--sup, #141619);
  color: var(--op-grafico-texto);
  font-family: Geist, Arial, sans-serif;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  min-width: 0;
  width: 100%;
  margin: 0;
  container: op-grafico / inline-size;
}
.op-grafico *, .op-grafico *::before, .op-grafico *::after { box-sizing: border-box; }
.op-grafico [hidden] { display: none !important; }
.op-grafico ::selection { color: var(--texto, #f7f8fa); background: color-mix(in srgb, var(--marca-2, #d60000) 50%, var(--sup2, #1b1e22)); }
.op-grafico__cabecalho { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; row-gap: 7px; align-items: start; margin-bottom: 24px; }
.op-grafico .op-grafico__titulo { grid-column: 1; margin: 0; font-size: 1.0625rem; line-height: 1.4; font-weight: 600; letter-spacing: -.025em; text-wrap: balance; }
.op-grafico .op-grafico__descricao { grid-column: 1; max-width: 72ch; margin: 0; color: var(--op-grafico-secundario); font-size: .8125rem; line-height: 1.6; }
.op-grafico__legenda { grid-column: 2; grid-row: 1 / 3; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: 20px; row-gap: 8px; max-width: 32ch; padding: 3px 0 0; margin: 0; font-size: .75rem; font-weight: 500; color: var(--op-grafico-secundario); }
.op-grafico__legenda li { display: inline-flex; align-items: center; gap: 7px; }
.op-grafico__chave { display: block; width: 24px; height: 12px; flex: 0 0 24px; overflow: visible; }
.op-grafico__plot { position: relative; min-width: 0; min-height: 232px; touch-action: pan-y; border-radius: 4px; }
.op-grafico__plot:focus-visible, .op-grafico__dados > summary:focus-visible { outline: 2px solid var(--marca-txt, #ff6868); outline-offset: 5px; }
.op-grafico__plot--barras { max-height: 392px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--linha2, rgba(235, 238, 243, .19)) transparent; }
.op-grafico__svg { display: block; width: 100%; height: auto; overflow: visible; }
.op-grafico__svg--atualizado { animation: op-grafico-atualizar 180ms ease-out; }
.op-grafico__grade { stroke: var(--op-grafico-linha); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.op-grafico__base { stroke: var(--linha2, rgba(235, 238, 243, .19)); stroke-dasharray: none; }
.op-grafico__eixo { fill: var(--op-grafico-secundario); font-family: inherit; font-size: 11px; }
.op-grafico__valor { fill: var(--op-grafico-texto); font-family: inherit; font-size: 12px; font-weight: 550; }
.op-grafico__linha { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.op-grafico__area { pointer-events: none; }
.op-grafico__ponto { stroke: var(--op-grafico-fundo); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.op-grafico__barra { opacity: .9; }
.op-grafico__inspecao { pointer-events: none; }
.op-grafico__cursor { stroke: var(--texto2, #bac0c8); stroke-width: 1; stroke-dasharray: 3 4; opacity: .65; vector-effect: non-scaling-stroke; }
.op-grafico__ponto-halo { fill-opacity: .18; }
.op-grafico__ponto-ativo { stroke: var(--op-grafico-fundo); stroke-width: 2; vector-effect: non-scaling-stroke; }
.op-grafico__faixa { fill: var(--texto, #f7f8fa); fill-opacity: .045; }
.op-grafico .op-grafico__vazio { position: absolute; inset: 0; display: grid; place-content: center; padding: 28px; margin: 0; color: var(--op-grafico-secundario); text-align: center; font-size: .875rem; }
.op-grafico__rodape { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; row-gap: 0; margin-top: 14px; border-top: 1px solid var(--op-grafico-linha); }
.op-grafico .op-grafico__ajuda { flex: 1; min-width: 180px; margin: 0; padding-block: 10px; color: var(--op-grafico-secundario); font-size: .6875rem; line-height: 1.6; }
.op-grafico__tooltip {
  position: fixed;
  inset: auto;
  z-index: 1000;
  width: max-content;
  min-width: 260px;
  max-width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow: auto;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--linha2, rgba(235, 238, 243, .19));
  border-radius: 8px;
  background: var(--sup2, #1b1e22);
  color: var(--texto, #f7f8fa);
  font: .8125rem/1.5 Geist, Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--linha2, rgba(235, 238, 243, .19)) transparent;
}
.op-grafico__tooltip::backdrop { background: transparent; pointer-events: none; }
.op-grafico__tooltip-periodo { display: block; font-size: .875rem; font-weight: 600; line-height: 1.45; letter-spacing: -.015em; padding-bottom: 14px; border-bottom: 1px solid var(--linha, rgba(235, 238, 243, .105)); }
.op-grafico__tooltip-valores { display: grid; gap: 0; padding: 0; margin: 0; }
.op-grafico__tooltip-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 24px; row-gap: 5px; padding-top: 14px; }
.op-grafico__tooltip-item + .op-grafico__tooltip-item { margin-top: 12px; border-top: 1px solid var(--linha, rgba(235, 238, 243, .105)); }
.op-grafico__tooltip-item dt { display: flex; align-items: flex-start; gap: 8px; color: var(--texto2, #bac0c8); }
.op-grafico__tooltip-item .op-grafico__chave { margin-top: 4px; }
.op-grafico__tooltip-item dd { display: flex; flex-direction: column; align-items: flex-end; max-width: 19ch; margin: 0; text-align: right; }
.op-grafico__tooltip-numero { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.op-grafico__tooltip-unidade { margin-top: 3px; color: var(--texto2, #bac0c8); font-size: .6875rem; font-weight: 400; }
.op-grafico__tooltip-ausente { color: var(--texto2, #bac0c8); font-size: .75rem; font-weight: 400; }
.op-grafico__tooltip-item .op-grafico__tooltip-detalhe { grid-column: 1 / -1; margin: 0; padding-left: 32px; color: var(--texto2, #bac0c8); font-size: .75rem; }
.op-grafico__dados { flex: 0 0 auto; max-width: 100%; margin: 0 0 0 auto; }
.op-grafico__dados[open] { flex-basis: 100%; }
.op-grafico__dados > summary { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: fit-content; max-width: 100%; min-height: 44px; margin-left: auto; padding: 10px 0 10px 4px; color: var(--op-grafico-secundario); cursor: pointer; list-style: none; font-size: .75rem; font-weight: 500; text-underline-offset: 4px; transition: color 160ms ease-out; }
.op-grafico__dados > summary::-webkit-details-marker { display: none; }
.op-grafico__dados > summary > svg { flex: 0 0 16px; transition: transform 180ms ease-out; }
.op-grafico__dados[open] > summary > svg { transform: rotate(180deg); }
.op-grafico__dados > summary:hover { color: var(--op-grafico-texto); text-decoration: underline; }
.op-grafico__tabela-scroll { max-height: 320px; overflow: auto; margin-top: 6px; scrollbar-width: thin; scrollbar-color: var(--linha2, rgba(235, 238, 243, .19)) transparent; }
.op-grafico__tabela { width: 100%; border-collapse: collapse; font-size: .75rem; text-align: left; }
.op-grafico__tabela th, .op-grafico__tabela td { padding: 11px 16px 11px 0; vertical-align: top; border-bottom: 1px solid var(--op-grafico-linha); min-width: 100px; }
.op-grafico__tabela th { font-weight: 500; color: var(--op-grafico-secundario); }
.op-grafico__tabela thead th { position: sticky; top: 0; z-index: 1; background: var(--op-grafico-fundo); }
.op-grafico__tabela tbody tr:hover { background: var(--sup2, #1b1e22); }
.op-grafico__tabela td:last-child, .op-grafico__tabela th:last-child { padding-right: 0; }
.op-grafico__detalhe { display: block; margin-top: 3px; color: var(--op-grafico-secundario); font-size: .6875rem; overflow-wrap: anywhere; }
.op-grafico .op-grafico__cobertura { margin: 8px 0 0; color: var(--op-grafico-secundario); font-size: .6875rem; }
.op-grafico__sr { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
@keyframes op-grafico-atualizar { from { opacity: .65; } to { opacity: 1; } }
@container op-grafico (max-width: 560px) {
  .op-grafico__cabecalho { grid-template-columns: minmax(0, 1fr); row-gap: 7px; margin-bottom: 18px; }
  .op-grafico__legenda { grid-column: 1; grid-row: auto; max-width: none; justify-content: flex-start; padding-top: 7px; }
  .op-grafico__rodape { column-gap: 16px; }
  .op-grafico .op-grafico__ajuda { flex-basis: 100%; padding-bottom: 0; }
  .op-grafico__dados { margin-left: 0; }
  .op-grafico__dados > summary { margin-left: 0; justify-content: flex-start; padding-left: 0; }
}
@media (max-width: 560px) {
  .op-grafico__tooltip { min-width: 220px; padding: 16px; }
  .op-grafico__tooltip-item { column-gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .op-grafico__svg--atualizado { animation: none; } .op-grafico__dados > summary, .op-grafico__dados > summary > svg { transition: none; } }