/* Resumo do dashboard gerencial e bloco "Limite de regime". Usa só os tokens do fluxo.css. */

.resumo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--espaco-4);
  margin: 0 0 var(--espaco-5);
  padding: 0;
  list-style: none;
}

.resumo-indicador {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-1);
  min-width: 0;
  padding: var(--espaco-4);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  box-shadow: var(--sombra-do-cartao);
  font-variant-numeric: tabular-nums;
}

.resumo-rotulo {
  color: var(--suave);
  font-size: var(--tamanho-do-rotulo);
  font-weight: 600;
}

.resumo-valor {
  display: flex;
  align-items: baseline;
  gap: var(--espaco-2);
  color: var(--texto);
  font-size: var(--tamanho-do-titulo);
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.resumo-detalhe {
  color: var(--suave);
  font-size: var(--tamanho-do-corpo-menor);
  overflow-wrap: anywhere;
}

.resumo-periodo {
  font-size: var(--tamanho-do-rotulo);
}

.variacao-seta {
  font-size: 0.7em;
}

.variacao-alta .resumo-valor,
.variacao-alta .variacao-diferenca {
  color: var(--marca);
}

.variacao-queda .resumo-valor,
.variacao-queda .variacao-diferenca {
  color: var(--atencao-texto);
}

.variacao-neutra .resumo-valor {
  color: var(--suave);
}

.resumo-estado {
  font-weight: 600;
}

.resumo-limite-em-aviso {
  background: var(--atencao-fundo);
  border-color: var(--atencao-borda);
}

.resumo-limite-em-aviso .resumo-valor,
.resumo-limite-em-aviso .resumo-estado {
  color: var(--atencao-texto);
}

.resumo-limite-acima-do-teto {
  background: var(--atencao-fundo);
  border-color: var(--atencao-texto);
}

.resumo-limite-acima-do-teto .resumo-valor,
.resumo-limite-acima-do-teto .resumo-estado {
  color: var(--atencao-escuro);
}

@media (max-width: 1100px) {
  .resumo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .resumo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Limite de regime ---------- */

.limites {
  display: grid;
  gap: var(--espaco-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.limite {
  display: grid;
  gap: var(--espaco-1);
  padding: var(--espaco-3);
  border: 1px solid var(--borda);
  border-radius: var(--raio-do-cartao);
  font-variant-numeric: tabular-nums;
}

.limite-nome {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.limite-valores,
.limite-falta {
  color: var(--suave);
  font-size: var(--tamanho-do-corpo-menor);
}

.limite-trilho {
  position: relative;
  display: block;
  height: 0.75rem;
  background: var(--borda);
  border-radius: var(--raio-da-pilula);
  overflow: hidden;
}

.limite-barra {
  display: block;
  height: 100%;
  background: var(--marca);
  transition: width 0.3s ease;
}

.limite-marca-do-aviso {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--texto);
  opacity: 0.6;
}

.limite-em-aviso {
  background: var(--atencao-fundo);
  border-color: var(--atencao-borda);
}

.limite-em-aviso .limite-barra {
  background: var(--atencao-texto);
}

.limite-em-aviso .limite-aviso,
.limite-em-aviso .limite-falta {
  color: var(--atencao-texto);
}

.limite-acima-do-teto {
  background: var(--atencao-fundo);
  border-color: var(--atencao-texto);
  border-width: 2px;
}

.limite-acima-do-teto .limite-barra {
  background: var(--atencao-escuro);
}

.limite-acima-do-teto .limite-aviso,
.limite-acima-do-teto .limite-falta {
  color: var(--atencao-escuro);
}

.limite-aviso {
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .limite-barra {
    transition: none;
  }
}