/*
 * Recobtech · indicador de carregamento (identidade visual v1.0).
 *
 * Mesmo desenho dos "indicadores de progresso" do kit
 * (08-Moeda-e-Relatorios): trilha clara, órbita Marinho e a moeda laranja com
 * halo branco na ponta. Sobrescreve o .spinner-border do Bootstrap, então todo
 * spinner do sistema muda sem alterar as telas. Carregar DEPOIS do Bootstrap.
 */

@keyframes rb-orbit {
    to { transform: rotate(360deg); }
}

.spinner-border {
    --rb-b: .25em;              /* espessura da órbita */
    --rb-trilha: #E9EDF4;
    --rb-orbita: #12285A;
    --rb-moeda: #E8650A;
    --rb-halo: #FFFFFF;

    position: relative;
    border: var(--rb-b) solid var(--rb-trilha);
    border-left-color: var(--rb-orbita);
    border-top-color: var(--rb-orbita);
    /* uma volta com aceleração e desaceleração suaves, sem rebote */
    animation: rb-orbit 1.1s cubic-bezier(.45, .05, .55, .95) infinite;
}

.spinner-border-sm {
    --rb-b: .2em;
}

/* A moeda: fica na ponta da órbita (45°) e gira junto com ela. */
.spinner-border::after {
    content: '';
    position: absolute;
    /* camada maior que a órbita, para a moeda não ser cortada na borda */
    inset: calc(-2 * var(--rb-b));
    transform: rotate(45deg);
    background: radial-gradient(circle at 50% calc(var(--rb-b) * 1.5),
        var(--rb-moeda) 0, var(--rb-moeda) calc(var(--rb-b) * .95),
        var(--rb-halo) calc(var(--rb-b) * .95 + .5px), var(--rb-halo) calc(var(--rb-b) * 1.3),
        transparent calc(var(--rb-b) * 1.3 + .5px));
    pointer-events: none;
}

/* Dentro de botão (fundo colorido): órbita na cor do texto e sem halo. */
.btn .spinner-border {
    --rb-trilha: rgba(128, 128, 128, .28);
    --rb-orbita: currentColor;
    --rb-halo: transparent;
}

/* Sobre fundo escuro/Marinho: moeda Laranja claro, como no ícone de app. */
.rb-on-dark .spinner-border,
.spinner-border.rb-on-dark {
    --rb-trilha: rgba(245, 247, 251, .18);
    --rb-orbita: #F5F7FB;
    --rb-moeda: #FF9A4D;
    --rb-halo: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .spinner-border {
        animation-duration: 2.2s;
    }
}

/* Pré-carregador de página (theme-loader dos layouts) */
.theme-loader {
    background-color: #F5F7FB !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-loader .spinner-border {
    width: 3.25rem;
    height: 3.25rem;
}