.esqueleto,
.esqueleto-caixa::before,
.esqueleto-caixa::after {
  border-radius: 4px;
  background-color: #e2e5ea;
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.75) 50%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: esqueleto-brilho 1.4s ease-in-out infinite;
}

.dark .esqueleto,
.dark .esqueleto-caixa::before,
.dark .esqueleto-caixa::after {
  background-color: var(--color-grafite-claro);
  background-image: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%);
}

.esqueleto {
  display: block;
}

.esqueleto-caixa {
  position: relative;
  display: block;
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

.dark .esqueleto-caixa {
  border-color: var(--color-cinza-escuro);
}

.esqueleto-caixa::before,
.esqueleto-caixa::after {
  content: "";
  position: absolute;
  inset-inline-start: 16px;
}

.esqueleto-caixa::before {
  inset-block-start: 16px;
  block-size: 12px;
  inline-size: 5rem;
}

.esqueleto-caixa::after {
  inset-block-start: 38px;
  block-size: 16px;
  inline-size: 13rem;
  animation-delay: 0.12s;
}

.esqueleto-dialogo {
  display: flex;
  flex-direction: column;
}

.esqueleto--titulo {
  block-size: 20px;
  inline-size: 14rem;
}

.esqueleto--linha {
  block-size: 14px;
  inline-size: min(100%, 26rem);
  margin-block-start: 10px;
}

.esqueleto--botao {
  block-size: 40px;
  inline-size: 11rem;
  margin-block-start: 32px;
  align-self: flex-end;
}

.esqueleto-caixa--alta {
  block-size: 147px;
  margin-block-start: 20px;
}

.esqueleto-caixa--baixa {
  block-size: 107px;
  margin-block-start: 12px;
}

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

@media (prefers-reduced-motion: reduce) {
  .esqueleto,
  .esqueleto-caixa::before,
  .esqueleto-caixa::after {
    animation: esqueleto-pulso 1.8s ease-in-out infinite;
    background-image: none;
  }

  @keyframes esqueleto-pulso {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
  }
}

.esqueleto-notificacoes {
  display: flex;
  flex-direction: column;
  padding: 14px 12px;
}

.esqueleto-notificacoes .esqueleto--linha:nth-child(even) {
  inline-size: 70%;
}