.painel,
.grafico {
  --entrada-duracao: 0.8s;
  --entrada-passo: 40ms;
  --entrada-espera: 60ms;
  --entrada-teto: 8;
  --entrada-curva: cubic-bezier(0.22, 1, 0.36, 1);
}

.coluna,
.barra-preenchimento,
.medidor,
.faisca {
  animation-duration: var(--entrada-duracao);
  animation-timing-function: var(--entrada-curva);
  animation-fill-mode: both;
  animation-delay: calc(
    var(--entrada-espera) + min(var(--indice, 0), var(--entrada-teto)) * var(--entrada-passo)
  );
}

.grafico {
  --eixo-x-altura: 1.5rem;
  --eixo-y-largura: 3.25rem;

  --serie-pago: #5E93DB;
  --serie-aberto: #BA8A32;
  --serie-analise: #9E80D6;
  --serie-atrasado: #CE6A66;
  --grafico-grade: #ECEEF2;
  --grafico-eixo: #D7DBE2;
  --grafico-trilho: #EEF0F4;
}

.dark .grafico {
  --serie-pago: #5B94DE;
  --serie-aberto: #B98A2E;
  --serie-analise: #C4AAF5;
  --serie-atrasado: #F08A8A;
  --grafico-grade: #3B424D;
  --grafico-eixo: #4B5563;
  --grafico-trilho: #3B424D;
}

.grafico-corpo {
  display: flex;
  gap: 0.75rem;
  min-height: 0;
}

.grafico-eixo-y-coluna {
  flex: 0 0 auto;
  width: var(--eixo-y-largura);
  display: flex;
  flex-direction: column;
  padding-bottom: var(--eixo-x-altura);
}

.grafico-rolagem {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.grafico-area {
  position: relative;
  flex: 1;
  min-height: 13rem;
}

.grafico-grade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.grafico-grade__linha {
  height: 1px;
  background-color: var(--grafico-grade);
}

.grafico-grade__linha:last-child {
  background-color: var(--grafico-eixo);
}

.grafico-eixo-y {
  position: relative;
  flex: 1;
}

.grafico-eixo-y__marca {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.grafico-eixo-x {
  flex: 0 0 auto;
  height: var(--eixo-x-altura);
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.grafico-eixo-x__marca {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
}

@media (width < 40rem) {
  .grafico-rolagem {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .grafico-rolagem > * {
    min-width: calc(var(--colunas) * 2.75rem);
  }
}

@media (width >= 40rem) {
  .grafico-eixo-x__marca--secundaria {
    visibility: hidden;
  }
}

.grafico-colunas {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

.coluna-vaga {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.coluna {
  width: 100%;
  max-width: 24px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  animation-name: coluna-entrar;
  transform-origin: bottom;
}

.coluna-vaga:hover .coluna__segmento {
  filter: brightness(1.08);
}

.coluna__segmento {
  flex: 0 0 auto;
  min-height: 2px;
}

.coluna__segmento--pago {
  background-color: var(--serie-pago);
}

.coluna__segmento--aberto {
  background-color: var(--serie-aberto);
}

.coluna__segmento--topo {
  border-radius: 4px 4px 0 0;
}

@keyframes coluna-entrar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.barra-trilho {
  height: 10px;
  border-radius: 9999px;
  background-color: var(--grafico-trilho);
  overflow: hidden;
}

.barra-preenchimento {
  height: 100%;
  border-radius: 0 4px 4px 0;
  background-color: var(--serie-pago);
  animation-name: barra-entrar;
  transform-origin: left;
}

.barra-preenchimento--aberto {
  background-color: var(--serie-aberto);
}

.barra-preenchimento--atrasado {
  background-color: var(--serie-atrasado);
}

@keyframes barra-entrar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.medidor {
  display: flex;
  gap: 2px;
  height: 8px;
  animation-name: barra-entrar;
  transform-origin: left;
}

.medidor__parte {
  border-radius: 9999px;
  min-width: 2px;
}

.medidor__parte--atrasado {
  background-color: var(--serie-atrasado);
}

.medidor__parte--aberto {
  background-color: var(--serie-aberto);
}

.legenda-marca {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.legenda-marca--pago {
  background-color: var(--serie-pago);
}

.legenda-marca--aberto {
  background-color: var(--serie-aberto);
}

.legenda-marca--atrasado {
  background-color: var(--serie-atrasado);
}

.legenda-marca--analise {
  background-color: var(--serie-analise);
}

.legenda-marca--pendente {
  background-color: var(--serie-aberto);
}

.faisca {
  animation-name: faisca-revelar;
}

@keyframes faisca-revelar {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .coluna,
  .barra-preenchimento,
  .medidor,
  .faisca {
    animation: none;
    transform: none;
    clip-path: none;
  }
}

.painel {
  --painel-borda: #E5E7EB;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}

.dark .painel {
  --painel-borda: var(--color-cinza-escuro);
}

.painel__topo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.painel__abas {
  border-bottom: 1px solid var(--painel-borda);
  overflow-x: auto;
  scrollbar-width: none;
}

.painel__abas::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@media (width < 71.875rem) {
  .painel__abas {
    mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent 100%);
  }
}

.painel__corpo {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.painel__cartao,
.painel__hero,
.painel__indicador {
  padding: 1.25rem;
}

.painel__cartao {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.painel__cabecalho {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.5rem;
}

.painel__cabecalho__titulo { grid-area: 1 / 1; }
.painel__cabecalho__nota { grid-area: 2 / 1; }
.painel__cabecalho__acao { grid-area: 1 / 2; }

@media (width < 40rem) {
  .painel__cabecalho__acao--larga {
    grid-area: 3 / 1 / 4 / 3;
    margin-top: 0.5rem;
  }
}

.painel__rolagem {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.painel__indicadores {
  flex: 0 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

.painel__hero-valor {
  font-size: 2.25rem;
}

@media (width >= 40rem) {
  .painel__hero-valor {
    font-size: 3rem;
  }

  .painel__indicadores,
  .painel__corpo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .painel__hero {
    grid-column: span 2;
  }

  .painel__corpo--fluxo > *,
  .painel__corpo--largo > * {
    grid-column: span 2;
  }
}

@media (width >= 71.875rem) {
  .painel {
    height: 100%;
    min-height: 0;
    gap: 0.75rem;
  }

  .painel__topo {
    flex-direction: row;
    align-items: stretch;
    gap: 1.5rem;
  }

  .painel__titulo {
    flex: 0 0 auto;
    align-self: center;
    min-width: 0;
  }

  .painel__abas {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: flex-end;
  }

  .painel__indicadores {
    gap: 0.75rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .painel__hero { grid-column: span 4; }
  .painel__indicador { grid-column: span 2; }

  .painel__hero-valor {
    font-size: 2rem;
  }

  .painel__cartao,
  .painel__hero,
  .painel__indicador {
    padding: 0.875rem;
  }

  .painel__cabecalho {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .painel__cabecalho__nota {
    grid-area: 1 / 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .painel__cabecalho__acao {
    grid-area: 1 / 3;
  }

  .painel__rolagem {
    scrollbar-width: none;
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
  }

  .painel__rolagem::-webkit-scrollbar {
    width: 0;
  }

  .painel__corpo {
    flex: 1;
    gap: 0.75rem;
    min-height: 15.5rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }

  .painel__corpo--fluxo > * { grid-column: span 8; }
  .painel__corpo--fluxo > * + * { grid-column: span 4; }
  .painel__corpo--quartos > * { grid-column: span 3; }
  .painel__corpo--largo > * { grid-column: span 12; }

  .grafico-corpo {
    flex: 1;
    min-height: 0;
  }

  .grafico-area {
    min-height: 4.5rem;
  }
}

.painel__faisca {
  margin: 0.5rem -1.25rem -1.25rem;
}

.painel__faisca--pago { color: var(--serie-pago); }
.painel__faisca--pendente { color: var(--serie-aberto); }
.painel__faisca--analise { color: var(--serie-analise); }
.painel__faisca--atrasado { color: var(--serie-atrasado); }

@media (width >= 71.875rem) {
  .painel__faisca {
    margin: 0.5rem -0.875rem -0.875rem;
  }
}

.faisca {
  display: block;
  width: 100%;
  height: 2.5rem;
  overflow: visible;
}

.painel__empresa {
  max-width: 16rem;
  padding-left: 0.75rem;
  border-left: 1px solid #d1d5db;
}

.dark .painel__empresa {
  border-left-color: var(--color-cinza-escuro);
}

@media (max-width: 40rem) {
  .painel__empresa {
    max-width: 100%;
    padding-left: 0;
    border-left: 0;
  }
}

.painel-periodo {
  padding: 0.375rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;

  background-color: transparent;
  color: #4b5563;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.dark .painel-periodo {
  border-color: var(--color-cinza-escuro);
  color: var(--color-cinza-claro);
}

.painel-periodo--ativo {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

.dark .painel-periodo--ativo {
  background-color: var(--color-azul-noturno);
  border-color: var(--color-azul-noturno);
  color: var(--color-grafite-escuro);
}

.painel-periodo--clicavel:not(.painel-periodo--ativo) {
  cursor: pointer;
}

.painel-periodo--clicavel:not(.painel-periodo--ativo):hover {
  background-color: #f3f4f6;
}

.dark .painel-periodo--clicavel:not(.painel-periodo--ativo):hover {
  background-color: var(--color-grafite-claro);
}

.painel-periodo--datas {
  font-variant-numeric: tabular-nums;
}

.painel__valor--pago,
.painel__valor--pendente,
.painel__valor--analise,
.painel__valor--atrasado {
  color: var(--color-gray-800);
}

.dark .painel__valor--pago { color: #7FB4F5; }
.dark .painel__valor--pendente { color: #EFC75E; }
.dark .painel__valor--analise { color: #C4AAF5; }
.dark .painel__valor--atrasado { color: var(--color-vermelho-claro); }