/* =========================================================================
   PG-DS-LOADING-V1 (20/07/2026) — Card de carregamento/processamento.

   Estilo unico do componente Components/Shared/PgLoadingOverlay.razor.

   MORA AQUI, e nao num <style> dentro do .razor, de proposito: bloco
   <style> em Blazor e' GLOBAL, sem scoping. Quando cada pagina declarava
   o proprio card, havia `pg-ft-loading` em 4 arquivos e `pg-dash-loading`
   em 2, com valores diferentes — o estilo de uma pagina vazava na outra,
   e qual vencia dependia da ordem de renderizacao.

   TUDO por token (--cp-*): o card precisa acompanhar o tema. Doze copias
   antigas fixavam rgba(255,255,255,.98) e, com o dark ativo, apareciam
   BRANCAS sobre a interface escura.
   ========================================================================= */

.pg-ds-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.pg-ds-loading-card {
    background: var(--cp-surface);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    min-width: 280px;
    padding: 32px 40px;
    text-align: center;
    /* A borda so' aparece no dark, onde o card e' escuro sobre fundo
       escuro e a sombra sozinha nao separa a superficie do fundo. */
    border: 1px solid var(--cp-line, transparent);
    box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
}

.pg-ds-loading-title {
    color: var(--cp-primary);
    font-size: 15px;
    font-weight: 700;
    display: block;
    margin-top: 16px;
}

.pg-ds-loading-sub {
    color: var(--cp-muted);
    font-size: 13px;
    display: block;
    margin-top: 4px;
}

/* Sombra mais densa no dark: a de 15% some sobre --cp-bg (#0b0f2c). */
:root[data-theme="dark"] .pg-ds-loading-card {
    box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

/* Quem pediu para nao animar (SO/navegador) nao deve ver o giro. */
@media (prefers-reduced-motion: reduce) {
    .pg-ds-loading-card .mud-progress-circular.mud-progress-indeterminate {
        animation-duration: 3s;
    }
}