/* ============================================================
   ew-loader — indicador de carregamento da plataforma.

   Doze barras em roda, do azul escuro ao claro, girando em passos. É
   desenhado em CSS puro: nenhuma imagem, nenhuma biblioteca, nenhum pedido
   de rede. Um GIF de spinner precisaria ser baixado justamente no momento em
   que a página ainda está carregando — o indicador chegaria depois do que
   ele deveria anunciar.

   Servido do domínio principal e usado pela plataforma, pela MDplay e pelo
   EW Analytics. Três cópias do mesmo desenho divergiriam na primeira troca
   de cor.

   Uso:
     <span class="ew-loader" role="status" aria-label="Carregando">
       <i></i> ×12
     </span>

   Tamanho pelo font-size do elemento: .ew-loader { font-size: 20px }.
   ============================================================ */

.ew-loader {
    display: inline-block;
    position: relative;
    width: 3.2em;
    height: 3.2em;
    font-size: 14px;           /* a medida de tudo abaixo */
    vertical-align: middle;
    animation: ew-loader-gira 1.1s steps(12, end) infinite;
}

.ew-loader i {
    position: absolute;
    top: 0;
    left: 50%;
    width: .42em;
    height: 1.05em;
    margin-left: -.21em;
    border-radius: .21em;
    /* A origem no centro da roda: é o que faz cada barra girar em torno do
       meio em vez de em torno de si mesma. */
    transform-origin: 50% 1.6em;
}

/* Uma regra por barra. Poderia ser uma variável inline com o índice, mas aí
   a cor e o ângulo passariam a morar no HTML — e o desenho deixaria de estar
   inteiro neste arquivo. */
.ew-loader i:nth-child(1)  { transform: rotate(  0deg); background: #1400c8; }
.ew-loader i:nth-child(2)  { transform: rotate( 30deg); background: #b9e6fb; }
.ew-loader i:nth-child(3)  { transform: rotate( 60deg); background: #93d8fa; }
.ew-loader i:nth-child(4)  { transform: rotate( 90deg); background: #7fcdf8; }
.ew-loader i:nth-child(5)  { transform: rotate(120deg); background: #63c2f6; }
.ew-loader i:nth-child(6)  { transform: rotate(150deg); background: #47b4f3; }
.ew-loader i:nth-child(7)  { transform: rotate(180deg); background: #35a8f0; }
.ew-loader i:nth-child(8)  { transform: rotate(210deg); background: #2f8fea; }
.ew-loader i:nth-child(9)  { transform: rotate(240deg); background: #2a72e3; }
.ew-loader i:nth-child(10) { transform: rotate(270deg); background: #2452dc; }
.ew-loader i:nth-child(11) { transform: rotate(300deg); background: #1a2fd2; }
.ew-loader i:nth-child(12) { transform: rotate(330deg); background: #1610cd; }

@keyframes ew-loader-gira {
    to { transform: rotate(360deg); }
}

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

.ew-loader.pequeno { font-size: 9px; }
.ew-loader.grande  { font-size: 20px; }

/* ---------- cobertura de página ----------

   Fundo translúcido em vez de opaco: deixa ver que o conteúdo antigo ainda
   está ali, o que distingue "carregando o próximo" de "a página sumiu". */
.ew-loader-tela {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(2px);

    /* Nasce invisível e não intercepta clique: só o estado .ativo o acende.
       Sem o pointer-events, uma cobertura esquecida travaria a página
       inteira sem nada aparecer na tela. */
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

.ew-loader-tela.ativo {
    opacity: 1;
    pointer-events: auto;
}

/* Em fundo escuro — a MDplay — o véu branco apagaria a tela. */
.ew-loader-tela.escuro { background: rgba(10, 10, 10, .66); }

/* ---------- dentro de um bloco ---------- */

.ew-loader-bloco {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 60px;
}

/* ---------- menos movimento ----------

   Quem pediu menos movimento no sistema não recebe a rotação: animação
   causa mal-estar real em quem tem sensibilidade vestibular. O indicador
   continua visível — parado, ele ainda diz "espere". */
@media (prefers-reduced-motion: reduce) {
    .ew-loader { animation: none; }
    .ew-loader-tela { transition: none; }
}