.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #ebedf3;
    border-radius: 4px;
}

    .skeleton::after {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        width: 50%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
        animation: shimmer 1.4s infinite;
    }

@keyframes shimmer {
    0% {
        left: -50%;
    }

    100% {
        left: 100%;
    }
}

.skeleton-header {
    height: 46px;
}

.skeleton-cell {
    height: 70px;
}

.skeleton-row {
    height: 45px;
    margin-bottom: 8px;
}

.skeleton-title {
    height: 24px;
    width: 200px;
    margin: 10px 0;
}

.skeleton-button {
    height: 34px;
    width: 120px;
    display: inline-block;
    margin: 10px 0;
}

/* Bloco de KPI/indicador dentro de uma faixa flex: sem flex-basis o item colapsa para a
   largura do conteúdo (zero) e o skeleton fica invisível. A altura padrão acompanha a
   pílula de KPI e pode ser sobrescrita inline por createKpiRowLoading. */
.skeleton-kpi {
    flex: 1 1 180px;
    height: 96px;
}

.skeleton-chart {
    width: 100%;
}

/* Faixas que emolduram o skeleton de tabela quando a tela que está recarregando é um DataTable:
   "exibir N registros" e busca em cima, contador e paginação embaixo. Cada bloco recebe a medida
   do controle real inline (createChromeControlLoading), então aqui só mora a geometria da faixa —
   e o max-width impede que a largura medida numa janela maior estoure a linha numa menor. */
.skeleton-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.skeleton-table-toolbar---footer {
    margin-top: 12px;
    margin-bottom: 0;
}

.skeleton-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.skeleton-control {
    max-width: 100%;
}

/* A tabela do skeleton herda o padding de célula do `.table` do Bootstrap, e nas colunas das pontas
   ele vira uma margem que a lista real não tem: o bloco cinza descola da borda do card e não bate
   com as faixas de controle, que vão de ponta a ponta. O padding das colunas do meio fica — é ele
   que abre o vão entre uma coluna e outra. */
.table-skeleton > thead > tr > th:first-child,
.table-skeleton > tbody > tr > td:first-child {
    padding-left: 0;
}

.table-skeleton > thead > tr > th:last-child,
.table-skeleton > tbody > tr > td:last-child {
    padding-right: 0;
}