/* ==========================================================================
   Loader do sistema — relógio animado
   Fonte única da animação de carregamento do Bate no Ponto.

   Marcação padrão (gerada por js/components/loader.js):
   <div class="loader">
       <span class="hour"></span>
       <span class="min"></span>
       <span class="circel"></span>
   </div>

   As medidas originais da animação são preservadas e derivadas de
   --loader-escala, permitindo reutilizar o mesmo componente em botões,
   listas, modais e overlays sem duplicar CSS.
   ========================================================================== */

.loader {
    --loader-escala: 1;
    --loader-cor: #00bf63;

    box-sizing: border-box;
    width: calc(65px * var(--loader-escala));
    height: calc(65px * var(--loader-escala));
    border: calc(8px * var(--loader-escala)) solid var(--loader-cor);
    border-radius: 50px;
    position: relative;
    margin: 25px auto;
    flex: 0 0 auto;
}

.loader span {
    box-sizing: border-box;
    display: block;
    background: var(--loader-cor);
}

.loader .hour,
.loader .min {
    width: calc(6px * var(--loader-escala));
    height: calc(22px * var(--loader-escala));
    border-radius: 50px;
    position: absolute;
    top: calc(24.5px * var(--loader-escala));
    left: calc(21px * var(--loader-escala));
    animation: load9243 1.2s linear infinite;
    transform-origin: top center;
}

.loader .min {
    height: calc(17px * var(--loader-escala));
    animation: load9243 4s linear infinite;
}

.loader .circel {
    width: calc(10px * var(--loader-escala));
    height: calc(10px * var(--loader-escala));
    border-radius: 50px;
    position: absolute;
    top: calc(19px * var(--loader-escala));
    left: calc(19px * var(--loader-escala));
}

@keyframes load9243 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* --- Variações de tamanho ------------------------------------------------ */

.loader--mini {
    --loader-escala: 0.28;
    margin: 0;
}

.loader--pequeno {
    --loader-escala: 0.42;
    margin: 0 auto;
}

.loader--medio {
    --loader-escala: 0.65;
}

.loader--grande {
    --loader-escala: 1.25;
}

/* --- Variações de cor ---------------------------------------------------- */

.loader--claro {
    --loader-cor: #ffffff;
}

.loader--sem-margem {
    margin: 0;
}

/* --- Bloco de carregamento (loader + texto opcional) --------------------- */

.loader-bloco {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    padding: 24px 12px;
    text-align: center;
}

.loader-bloco .loader {
    margin: 0;
}

.loader-bloco__texto {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #6c757d;
    line-height: 1.5;
}

/* --- Overlays ------------------------------------------------------------ */

.loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.loader-overlay--local {
    position: absolute;
    z-index: 20;
    border-radius: inherit;
}

.loader-overlay[hidden] {
    display: none;
}

/* --- Loader dentro de botões --------------------------------------------- */

.loader-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* --- Tema escuro --------------------------------------------------------- */

[data-theme="dark"] .loader-overlay {
    background: rgba(18, 18, 18, 0.88);
}

[data-theme="dark"] .loader-bloco__texto {
    color: #adb5bd;
}

/* --- Acessibilidade ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .loader .hour {
        animation-duration: 6s;
    }

    .loader .min {
        animation-duration: 20s;
    }
}