/*
|--------------------------------------------------------------------------
| Carregamento: esqueleto e espera longa
|--------------------------------------------------------------------------
|
| Quem espera precisa saber que o sistema está trabalhando e por quanto tempo.
|
|   Até ~1 s   spinner discreto (ou nada).
|   Passou de 5 s   a dica aparece: "Ainda buscando…" + segundos decorridos.
|   Passou de 15 s  tom de atenção: "Está demorando mais que o normal…".
|   Passou de 40 s  orienta o próximo passo (recarregar / avisar a TI).
|
| O texto é montado por js/carregamento.js, sozinho, em:
|   - .ds-table-state / .ds-lista-estado que tenham um .ds-spinner;
|   - o overlay #loadingSpinner (mostrarSpinner());
|   - o "processing" do DataTables (a tabela fica esmaecida + barra no topo).
| Para um carregador novo: <div class="ds-carregando"> <span class="ds-spinner"> <p> </div>.
|
| Esqueleto (.ds-skeleton): forma do conteúdo que vai chegar, no lugar do vazio.
|
*/

.ds-skeleton {
    display: block;

    min-height: 12px;

    border-radius: var(--ds-radius-sm);

    background: linear-gradient(
        90deg,
        var(--ds-color-surface-sunken) 25%,
        var(--ds-color-surface-hover) 37%,
        var(--ds-color-surface-sunken) 63%
    );
    background-size: 400% 100%;

    animation: ds-esqueleto 1.4s ease-in-out infinite;
}

.ds-skeleton--linha {
    height: 14px;
}

.ds-skeleton--titulo {
    width: 40%;
    height: 16px;
}

.ds-skeleton--avatar {
    flex: none;

    width: 32px;
    height: 32px;

    border-radius: 50%;
}

/* Linhas de lista/tabela ainda sem dados */
.ds-esqueleto {
    display: grid;
    gap: var(--ds-space-3);

    width: min(100%, 520px);
    margin: var(--ds-space-4) auto 0;
}

.ds-esqueleto__linha {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.ds-esqueleto__texto {
    display: grid;
    flex: 1;
    gap: var(--ds-space-1-5);
}

.ds-esqueleto__texto > .ds-skeleton:last-child {
    width: 60%;
}

/* Dica de espera (texto que evolui) */
.ds-carregando__dica {
    display: block;

    max-width: 52ch;
    margin: var(--ds-space-2) auto 0;

    color: var(--ds-color-text-muted);

    font: var(--ds-text-body-sm);
    text-align: center;

    animation: ds-aparecer .25s ease-out;
}

.ds-carregando__dica[hidden] {
    display: none;
}

.ds-carregando__tempo {
    font-variant-numeric: tabular-nums;
}

.ds-carregando--lento .ds-carregando__dica {
    color: var(--ds-color-warning-fg);
}

.ds-carregando__acoes {
    display: flex;
    justify-content: center;
    gap: var(--ds-space-2);

    margin-top: var(--ds-space-3);
}

/* Overlay global (mostrarSpinner) */
.ds-loading-overlay .ds-carregando__dica {
    color: rgba(255, 255, 255, .85);
}

.ds-loading-overlay.ds-carregando--lento .ds-carregando__dica {
    color: var(--ds-color-warning-bg);
}

/* Tabela do DataTables buscando dados: esmaece e mostra a barra */
.dataTables_wrapper {
    position: relative;
}

.dataTables_wrapper.is-processando table.dataTable tbody {
    opacity: .45;

    transition: opacity .2s ease;

    pointer-events: none;
}

.dataTables_wrapper.is-processando::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--ds-color-primary), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;

    animation: ds-barra 1.1s ease-in-out infinite;
}

.ds .dataTables_wrapper .dataTables_processing .ds-carregando__dica {
    margin: var(--ds-space-1) 0 0;

    text-align: left;
}

/* Navegação lenta: barra no topo + aviso depois de 4 s */
.ds-navegacao {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--ds-z-toast);

    height: 3px;

    background: linear-gradient(90deg, transparent, var(--ds-color-primary), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;

    animation: ds-barra 1.1s ease-in-out infinite;
}

.ds-navegacao__aviso {
    position: fixed;
    top: var(--ds-space-4);
    left: 50%;
    z-index: var(--ds-z-toast);

    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);

    padding: var(--ds-space-2) var(--ds-space-4);

    border: var(--ds-border-width) solid var(--ds-color-border);
    border-radius: var(--ds-radius-full);

    background: var(--ds-color-surface);
    box-shadow: var(--ds-shadow-floating);

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-body-sm);

    transform: translateX(-50%);

    animation: ds-aparecer .25s ease-out;
}

.ds-navegacao__aviso.ds-carregando--lento {
    color: var(--ds-color-warning-fg);
}

@keyframes ds-esqueleto {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes ds-barra {
    0% {
        background-position: -40% 0;
    }

    100% {
        background-position: 140% 0;
    }
}

@keyframes ds-aparecer {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-skeleton,
    .ds-navegacao,
    .dataTables_wrapper.is-processando::before,
    .ds-carregando__dica {
        animation: none;
    }
}