/* O site de vendas (108): o desenho do bloco do financeiro (097): o saldo, as contas que vencem no
   mês, com a baixa, e o fluxo de caixa, com a previsão tracejada. As linhas das contas são as do
   desenho dos aluguéis (cenas-da-gestao.css). Nenhum desenho é captura de tela (CA-005); o estado
   parado é o desenho completo, que fica para quem pediu menos movimento (telas.css). */

.cena-financeiro {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 0.9em;
  padding: 6% 8% 5%;
  container-type: inline-size;
}

/* No desenho estreito (o celular), duas contas bastam: o fluxo de caixa precisa da altura. */
@container (max-width: 24rem) {
  .cena-financeiro .linhas > span:nth-child(3) {
    display: none;
  }

  .cena-financeiro .linhas > span {
    padding: 0.3em 0;
  }
}

.topo-do-financeiro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  align-items: center;
  justify-content: space-between;
}

/* O saldo: a etiqueta de preço do mapa, cheia de tinta. */
.saldo {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--tinta);
  color: var(--rua);
}

.saldo small {
  color: var(--tinta-clara);
  font-size: 0.85em;
}

.saldo b {
  font: 700 1.3em/1 var(--placa);
  font-variant-numeric: tabular-nums;
}

/* A legenda do fluxo: o quadradinho cheio é o que entrou, o vazio o que saiu, o tracejado a previsão. */
.legenda-do-fluxo {
  display: flex;
  gap: 0.8em;
  font-size: 0.82em;
  font-weight: 700;
}

.legenda-do-fluxo span::before {
  content: '';
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.3em;
  border: 1.5px solid var(--tinta);
  border-radius: 0.15em;
  vertical-align: -0.05em;
}

.legenda-do-fluxo span:first-child::before {
  background: var(--tinta);
}

.legenda-do-fluxo span:last-child::before {
  border-style: dashed;
}

.cena-financeiro .linhas > span {
  padding: 0.45em 0;
}

/* A baixa: a conta de cima passa de "Vence dia 5" a "Pago". As duas falas ocupam o mesmo lugar. */
.linhas .baixa {
  display: grid;
  background: var(--praca);
  animation: dar-baixa 9s infinite;
}

.baixa > span {
  grid-area: 1 / 1;
  text-align: center;
}

.baixa > span:first-child {
  opacity: 0;
  animation: antes-da-baixa 9s infinite;
}

.baixa > span:last-child {
  animation: depois-da-baixa 9s infinite;
}

@keyframes dar-baixa {
  0%,
  34% {
    background: var(--rua);
  }

  38%,
  100% {
    background: var(--praca);
  }
}

@keyframes antes-da-baixa {
  0%,
  34% {
    opacity: 1;
  }

  38%,
  100% {
    opacity: 0;
  }
}

@keyframes depois-da-baixa {
  0%,
  34% {
    opacity: 0;
  }

  38%,
  100% {
    opacity: 1;
  }
}

/* ---------- O fluxo de caixa: um par de barras por mês, e os três da frente tracejados. ---------- */

.fluxo {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.7em;
  min-height: 0;
}

.mes {
  display: grid;
  grid-template: minmax(0, 1fr) auto / repeat(2, minmax(0, 1fr));
  gap: 0 0.2em;
  min-height: 0;
}

.mes i {
  align-self: end;
  height: var(--e);
  border: 1.5px solid var(--tinta);
  border-bottom: 0;
  border-radius: 0.3em 0.3em 0 0;
  background: var(--tinta);
  transform-origin: bottom;
  animation: subir-a-barra 9s var(--saida) calc(var(--d) * 0.25s) infinite both;
}

.mes i + i {
  height: var(--s);
  background: var(--rua);
}

.mes.previsto i {
  border-style: dashed;
  border-bottom-style: none;
  background: rgb(27 27 24 / 22%);
}

.mes.previsto i + i {
  background: transparent;
}

.mes small {
  grid-column: 1 / -1;
  padding-top: 0.25em;
  border-top: 1.5px solid var(--tinta);
  font-size: 0.82em;
  font-weight: 700;
  text-align: center;
}

@keyframes subir-a-barra {
  0% {
    transform: scaleY(0);
  }

  8%,
  92% {
    transform: none;
  }

  100% {
    transform: scaleY(0);
  }
}