/* blocos.css
   Blocos das telas: cabecalho da tela, cartoes, valores em dinheiro, barras de progresso,
   estados (carregando, vazio, erro), listas e o brilho da estrela. */

/* ---------- Cabecalho de cada tela ---------- */
.tela-cabeca {
  margin-bottom: var(--e5);
}

.tela-cabeca h1 {
  margin: 0 0 var(--e1);
  font-size: 26px;
}

.tela-subtitulo {
  margin: 0;
  color: var(--texto-suave);
}

.tela-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e4);
}

@media (max-width: 767px) {
  .tela-cabeca h1 {
    font-size: 22px;
  }
}

/* ---------- Cartoes ---------- */
.cartao {
  padding: var(--e5);
  margin-bottom: var(--e4);
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  transition: transform var(--rapido) ease, box-shadow var(--rapido) ease;
  animation: subir var(--lento) ease backwards;
}

.cartao h2 {
  font-size: 18px;
  margin-bottom: var(--e3);
}

@media (hover: hover) {
  .cartao:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-forte);
  }
}

.grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--e4);
  margin-bottom: var(--e4);
}

.grade-cartoes .cartao {
  margin-bottom: 0;
}

.grade-cartoes .cartao:nth-child(2) { animation-delay: 60ms; }
.grade-cartoes .cartao:nth-child(3) { animation-delay: 120ms; }
.grade-cartoes .cartao:nth-child(4) { animation-delay: 180ms; }

.cartao-rotulo {
  margin: 0 0 var(--e2);
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
}

.cartao-valor {
  display: block;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.cartao-previsto {
  margin: var(--e2) 0 0;
  font-size: 13px;
  color: var(--texto-fraco);
}

/* ---------- Dinheiro ---------- */
.dinheiro {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dinheiro-positivo {
  color: var(--verde);
}

.dinheiro-negativo {
  color: var(--vermelho);
}

/* ---------- Barra de progresso ---------- */
.barra {
  height: 10px;
  margin: var(--e2) 0 var(--e3);
  border-radius: 999px;
  background: var(--fundo-separacao);
  overflow: hidden;
}

.barra-enchimento {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--degrade);
  transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.barra-ambar .barra-enchimento {
  background: var(--ambar);
}

.barra-verde .barra-enchimento {
  background: var(--verde);
}

/* ---------- Carregando (esqueleto) ---------- */
.esqueleto-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e3);
}

.esqueleto-bloco {
  border-radius: var(--raio-pequeno);
  background: linear-gradient(90deg, var(--fundo-separacao) 0%, #F7F7F9 50%, var(--fundo-separacao) 100%);
  background-size: 200% 100%;
  animation: esqueleto-brilho 1.4s ease-in-out infinite;
}

.esqueleto-cartao {
  height: 88px;
}

.esqueleto-linha {
  height: 16px;
  margin-bottom: var(--e2);
}

.esqueleto-linha:nth-child(odd) {
  width: 80%;
}

@keyframes esqueleto-brilho {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* ---------- Vazio e erro ---------- */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e7) var(--e4);
  text-align: center;
}

.estado-vazio h2 {
  margin: 0;
  font-size: 20px;
}

.estado-vazio p {
  margin: 0;
  max-width: 420px;
  color: var(--texto-suave);
}

.estado-estrela {
  width: 64px;
  height: 64px;
  opacity: 0.9;
  animation: estrela-respira 3s ease-in-out infinite;
}

@keyframes estrela-respira {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.08) rotate(8deg); }
}

.estado-erro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  text-align: center;
  border-color: var(--vermelho-suave);
}

.estado-erro p {
  margin: 0;
  color: var(--texto-suave);
}

.estado-erro-icone {
  width: 28px;
  height: 28px;
  color: var(--ambar);
}

/* ---------- Lista de aparelhos ---------- */
.aparelhos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aparelho {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-top: 1px solid var(--fundo-separacao);
}

.aparelho:first-child {
  border-top: 0;
}

.aparelho-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--fundo-bloco);
  color: var(--texto-suave);
  flex-shrink: 0;
}

.aparelho-textos {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.aparelho-textos span {
  font-size: 13px;
  color: var(--texto-suave);
}

/* ---------- Brilho da estrela ao salvar ---------- */
.brilho-estrela {
  position: fixed;
  z-index: 970;
  width: 28px;
  height: 28px;
  pointer-events: none;
  animation: brilho 650ms ease-out forwards;
}

@keyframes brilho {
  0% { transform: scale(0.3) rotate(0deg); opacity: 0; }
  40% { transform: scale(1.4) rotate(90deg); opacity: 1; }
  100% { transform: scale(0.6) rotate(180deg) translateY(-24px); opacity: 0; }
}

/* ---------- Mostruario de pecas (provisorio) ---------- */
.pecas-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e3);
}

.pecas-legenda {
  margin: var(--e2) 0 0;
  font-size: 13px;
  color: var(--texto-suave);
}

.pecas-estados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--e4);
}

.pecas-estado .cartao {
  box-shadow: none;
}