/**
 * Estados gerais — Modo Cliente (FRONT-002)
 * carregando, skeleton, vazio, erro, sem-conexao, sessao-expirada,
 * acesso-negado, indisponivel, sucesso, pendente, bloqueado, manutencao.
 * Cada estado: ícone + título + texto + ação opcional, tema claro/escuro.
 */

.cliente-estado {
  text-align: center;
  padding: 50px var(--cliente-space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cliente-space-3);
}

.cliente-estado__icone {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cliente--claro .cliente-estado__icone { background: #fff; border: 1px solid var(--cliente-borda-clara); }
.cliente--escuro .cliente-estado__icone { background: rgba(255, 255, 255, .06); }

.cliente-estado__icone svg { width: 26px; height: 26px; }

.cliente-estado--erro .cliente-estado__icone,
.cliente-estado--acesso-negado .cliente-estado__icone,
.cliente-estado--bloqueado .cliente-estado__icone { color: var(--cliente-erro); }

.cliente-estado--sucesso .cliente-estado__icone { color: var(--cliente-sucesso); }
.cliente-estado--pendente .cliente-estado__icone,
.cliente-estado--sessao-expirada .cliente-estado__icone { color: var(--cliente-amarelo); }
.cliente-estado--sem-conexao .cliente-estado__icone,
.cliente-estado--indisponivel .cliente-estado__icone,
.cliente-estado--manutencao .cliente-estado__icone,
.cliente-estado--vazio .cliente-estado__icone { color: var(--cliente-texto-escuro-secundario); }

.cliente-estado__titulo {
  font-weight: var(--cliente-fw-bold);
  font-size: 15px;
  margin: 0;
}

.cliente-estado__texto {
  font-size: 13px;
  max-width: 280px;
  margin: 0;
}

.cliente--claro .cliente-estado__texto { color: var(--cliente-texto-escuro-secundario); }
.cliente--escuro .cliente-estado__texto { color: var(--cliente-texto-claro-secundario); }

.cliente-estado__acao {
  margin-top: var(--cliente-space-2);
}

/* Estado "carregando" com spinner girando (reaproveita a mesma keyframe do botão --carregando) */
.cliente-estado--carregando .cliente-estado__icone svg {
  animation: cliente-girar .9s linear infinite;
}

/* ================= Skeleton ================= */
.cliente-skeleton {
  border-radius: var(--cliente-raio-campo);
  background: linear-gradient(90deg, rgba(148, 163, 184, .18) 25%, rgba(148, 163, 184, .32) 37%, rgba(148, 163, 184, .18) 63%);
  background-size: 400% 100%;
  animation: cliente-skeleton-pulso 1.4s ease infinite;
  height: 14px;
}

.cliente--escuro .cliente-skeleton {
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 25%, rgba(255, 255, 255, .14) 37%, rgba(255, 255, 255, .06) 63%);
  background-size: 400% 100%;
}

@keyframes cliente-skeleton-pulso {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.cliente-skeleton--titulo { width: 60%; height: 16px; }
.cliente-skeleton--linha { width: 100%; }
.cliente-skeleton--linha-curta { width: 45%; }