/* ==========================================================================
   SKELETON LOADER - Sistema de loading para todo o site
   ========================================================================== */

/* Animação de shimmer */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Base do skeleton */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(145, 158, 171, 0.12) 0%,
        rgba(145, 158, 171, 0.24) 50%,
        rgba(145, 158, 171, 0.12) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton para tema escuro */
[data-theme="dark"] .skeleton,
.theme-dark .skeleton {
    background: linear-gradient(
        90deg,
        rgba(145, 158, 171, 0.16) 0%,
        rgba(145, 158, 171, 0.32) 50%,
        rgba(145, 158, 171, 0.16) 100%
    );
    background-size: 200% 100%;
}

/* ==========================================================================
   TIPOS DE SKELETON
   ========================================================================== */

/* Texto */
.skeleton-text {
    height: 14px;
    width: 100%;
    margin-bottom: 8px;
}

.skeleton-text.small {
    height: 12px;
    width: 60%;
}

.skeleton-text.large {
    height: 18px;
}

.skeleton-text.title {
    height: 24px;
    width: 70%;
    margin-bottom: 12px;
}

/* Imagem/Avatar */
.skeleton-image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
}

.skeleton-image.square {
    aspect-ratio: 1/1;
}

.skeleton-image.circle {
    border-radius: 50%;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar.small {
    width: 32px;
    height: 32px;
}

.skeleton-avatar.large {
    width: 64px;
    height: 64px;
}

/* Botão */
.skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 8px;
}

.skeleton-button.full {
    width: 100%;
}

/* Badge/Tag */
.skeleton-badge {
    height: 24px;
    width: 80px;
    border-radius: 6px;
}

/* ==========================================================================
   COMPONENTES ESPECÍFICOS - HOME
   ========================================================================== */

/* Card de Campanha em Destaque */
.skeleton-favorite-campaign {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.skeleton-favorite-campaign .skeleton-image {
    height: 200px;
    border-radius: 0;
}

.skeleton-favorite-campaign .skeleton-content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Card de Campanha Normal */
.skeleton-campaign-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.skeleton-campaign-card .skeleton-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    flex-shrink: 0;
}

.skeleton-campaign-card .skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Card de Ganhador */
.skeleton-winner-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
}

.skeleton-winner-card .skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ==========================================================================
   COMPONENTES ESPECÍFICOS - SINGLE (CAMPANHA)
   ========================================================================== */

/* Carousel/Imagem Principal */
.skeleton-carousel {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 0;
}

/* Seção de Preço/Data */
.skeleton-price-section {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    gap: 16px;
}

.skeleton-price-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

/* Botões de Quantidade */
.skeleton-quantity-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0 16px;
    margin-bottom: 16px;
}

.skeleton-quantity-btn {
    height: 48px;
    border-radius: 8px;
}

/* Promoções */
.skeleton-promo-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Ranking */
.skeleton-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(145, 158, 171, 0.12);
}

.skeleton-ranking-item .skeleton-position {
    width: 32px;
    height: 24px;
}

.skeleton-ranking-item .skeleton-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ==========================================================================
   COMPONENTES ESPECÍFICOS - DASHBOARD
   ========================================================================== */

/* Card de Estatística */
.skeleton-stat-card {
    padding: 24px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-stat-card .skeleton-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.skeleton-stat-card .skeleton-value {
    height: 32px;
    width: 60%;
}

/* Linha de Tabela */
.skeleton-table-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid rgba(145, 158, 171, 0.12);
}

.skeleton-table-row .skeleton-cell {
    height: 16px;
}

.skeleton-table-row .skeleton-cell:nth-child(1) { width: 15%; }
.skeleton-table-row .skeleton-cell:nth-child(2) { width: 25%; }
.skeleton-table-row .skeleton-cell:nth-child(3) { width: 20%; }
.skeleton-table-row .skeleton-cell:nth-child(4) { width: 15%; }
.skeleton-table-row .skeleton-cell:nth-child(5) { width: 10%; }

/* Sidebar Item */
.skeleton-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.skeleton-sidebar-item .skeleton-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.skeleton-sidebar-item .skeleton-label {
    height: 16px;
    width: 80px;
}

/* ==========================================================================
   CONTAINERS DE SKELETON
   ========================================================================== */

/* Container que esconde conteúdo real durante loading */
.skeleton-container {
    position: relative;
}

.skeleton-container.loading .skeleton-content-real {
    opacity: 0;
    visibility: hidden;
    position: absolute;
}

.skeleton-container.loading .skeleton-placeholder {
    display: block;
}

.skeleton-container:not(.loading) .skeleton-placeholder {
    display: none;
}

/* Grid de campanhas skeleton */
.skeleton-campaigns-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Grid de ganhadores skeleton */
.skeleton-winners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */

/* Esconder durante loading */
.hide-on-loading {
    transition: opacity 0.3s ease;
}

.loading .hide-on-loading {
    opacity: 0;
    pointer-events: none;
}

/* Mostrar apenas durante loading */
.show-on-loading {
    display: none;
}

.loading .show-on-loading {
    display: block;
}

/* Fade in quando carregado */
.fade-in-on-load {
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Delay de animação para efeito cascata */
.skeleton-delay-1 { animation-delay: 0.1s; }
.skeleton-delay-2 { animation-delay: 0.2s; }
.skeleton-delay-3 { animation-delay: 0.3s; }
.skeleton-delay-4 { animation-delay: 0.4s; }
.skeleton-delay-5 { animation-delay: 0.5s; }