/* ===============================
   BASE DO SKELETON
================================= */
.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
    border-radius: 6px;
}

    /* Efeito shimmer */
    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150px;
        width: 150px;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.6), transparent );
        animation: skeleton-loading 1.4s infinite;
    }

/* ===============================
   VARIAÇÕES DE SKELETON
================================= */

/* Header Buttons */
.skeleton-button {
    height: 38px;
    width: 180px;
}

.skeleton-button.large {
    width: 220px;
}

.skeleton-button.outline {
    opacity: 0.6;
}

/* Título (ícone + texto) */
.skeleton-title {
    width: 160px;
    height: 18px;
    margin-bottom: 10px;
}

/* Valor monetário */
.skeleton-value {
    width: 120px;
    height: 30px;
}

/* Área de gráfico */
.skeleton-chart {
    width: 100%;
    height: 240px;
    margin-top: 15px;
}

/* ===============================
   AJUSTES VISUAIS DOS CARDS
================================= */
.skeleton-row .card,
.row .card {
    border-radius: 10px;
}

.skeleton-row .card-body,
.row .card-body {
    padding: 20px;
}

/* Evita seleção de texto */
.skeleton {
    user-select: none;
}

/* ===============================
   ANIMAÇÃO
================================= */
@keyframes skeleton-loading {
    0% {
        left: -150px;
    }

    100% {
        left: 100%;
    }
}

/* ===============================
   DARK MODE (opcional)
   Ative se usar tema escuro
================================= */
/*
body.dark-mode .skeleton {
    background-color: #2c2c2c;
}

body.dark-mode .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
}
*/