/* ==========================================================================
   Efeitos do painel interno — Mídia 63

   Aqui mora UMA coisa só: o cursor expansivo. Cubos e glitch ficam no login
   (login-efeitos.css). O painel é ferramenta de trabalho, o editor passa horas
   cadastrando matéria, e efeito decorativo nessa tela cansa e atrapalha.

   Regras que valem para tudo neste arquivo:
   - anima apenas `transform` e `opacity` (nada de width/height/top/left, que
     forçam reflow a cada quadro);
   - o círculo é camada extra, NÃO substitui o cursor do sistema;
   - `pointer-events: none` sempre, para nunca roubar clique de dropdown,
     do select2 ou do CKEditor;
   - desliga inteiro em `prefers-reduced-motion` e abaixo de 1024px.
   ========================================================================== */

.efx-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90; /* acima da topbar (50), sidebar (60) e menu do usuário (80);
                    abaixo do select2 e dos diálogos do CKEditor, que passam de
                    1000 — e é justamente onde o cursor fica desligado */
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px; /* centraliza sem usar top/left animado */
    border: 1.5px solid var(--adm-muted, #63686f);
    border-radius: 50%;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    transition: opacity 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* o `scale` fica numa custom property para o rAF só escrever `transform`
   uma vez por quadro, com translate e scale juntos */
.efx-cursor.is-ativo {
    opacity: 1;
}

/* sobre link, botão ou item de menu: expande e assume o crimson da marca */
.efx-cursor.is-interativo {
    border-color: var(--adm-accent, #c8102e);
    background-color: color-mix(in srgb, var(--adm-accent, #c8102e) 12%, transparent);
}

/* sobre campo de texto, tabela ou CKEditor o círculo some: ali o ponteiro
   precisa ser o I-beam de verdade, sem concorrência visual */
.efx-cursor.is-texto {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   DESLIGAMENTOS
   -------------------------------------------------------------------------- */

/* vertigem e enxaqueca não são detalhe: sem movimento, sem cursor custom */
@media (prefers-reduced-motion: reduce) {
    .efx-cursor {
        display: none !important;
    }
}

/* toque não tem cursor para seguir, e o rAF só gastaria bateria */
@media (max-width: 1023.98px) {
    .efx-cursor {
        display: none !important;
    }
}

/* ponteiro grosso (caneta, TV, toque) também não usa */
@media (pointer: coarse) {
    .efx-cursor {
        display: none !important;
    }
}

/* ==========================================================================
   Entrada em cascata das listas

   Itens entram com fade curto e 8px de deslocamento, escalonados. Serve para
   o olho perceber que a lista mudou ao trocar de página ou de filtro — numa
   listagem de matérias todas as linhas são parecidas, e sem isso a troca de
   página não dá nenhum sinal de que algo aconteceu.

   POR QUE O `opacity: 0` NÃO ESTÁ AQUI. A tentação é começar invisível no CSS
   e deixar o JS revelar. Se o JS falhar, não carregar ou for bloqueado, a
   listagem fica em branco e o painel parece quebrado. Quem esconde é o próprio
   JS (`.efx-cascata` é posta por ele): sem JS, tudo aparece normalmente.

   O atraso vem do `--i` que o template escreve com `forloop.counter0`, e não
   de `:nth-child` no CSS — regra por índice não sobrevive a filtro nem a
   paginação.
   ========================================================================== */

.efx-cascata {
    opacity: 0;
}

.efx-cascata.is-visivel {
    /* `both` mantém o estado final: sem ele o item volta a opacity 0 no fim */
    animation: efx-entra 220ms ease-out both;
    /* teto de 12 no template; aqui o clamp é cinto e suspensória — 40ms × 100
       itens seria uma espera de 4 segundos para a última linha aparecer */
    animation-delay: calc(min(var(--i, 0), 11) * 40ms);
}

@keyframes efx-entra {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .efx-cascata,
    .efx-cascata.is-visivel {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   Abas com indicador deslizante

   O filete embaixo da aba ativa passa a deslizar até a aba nova em vez de
   simplesmente reaparecer no outro lugar. Como as abas são LINKS que trocam de
   página, o deslize só existe dentro da mesma carga: na entrada, o indicador
   é posicionado sem animar (a classe `.sem-transicao`, posta e removida pelo
   JS). Animar na carga seria o filete correndo da esquerda toda vez que a
   página abre, o que lê como falha de carregamento.

   O indicador é um `::after` do container, movido por `translateX` e `width`
   vindos de duas custom properties. Sem elemento novo no HTML, sem JS para
   pintar — o JS só mede e escreve os dois números.
   ========================================================================== */

.fila-abas[data-abas] {
    position: relative;
}

.fila-abas[data-abas]::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* cobre a borda de 2px do container */
    height: 2px;
    width: var(--aba-largura, 0);
    background: var(--adm-accent, #c8102e);
    transform: translateX(var(--aba-x, 0));
    transition: transform 220ms ease-out, width 220ms ease-out;
    pointer-events: none;
}

.fila-abas[data-abas].sem-transicao::after {
    transition: none;
}

/* Com o indicador desenhando o estado ativo, a borda embaixo de cada aba
   viraria filete dobrado. */
.fila-abas[data-abas] .fila-aba.is-active {
    border-bottom-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .fila-abas[data-abas]::after {
        transition: none;
    }
}

/* ============================================================
   Feixes de luz atrás dos cards da home (alvo: laser-flow)

   O original é um shader que roda na placa de vídeo. Aqui é um degradê em
   camada, girando devagar. Três motivos para não portar o shader:

   1. rodaria em TODA visita à home do painel, que é a primeira tela do dia;
   2. falha em placa antiga, máquina virtual e acesso remoto — que é como se
      entra no painel de fora da redação;
   3. o que ele comunica (um facho de luz atravessando o fundo) cabe num
      degradê cônico girando. A diferença é de refinamento, não de mensagem.

   Só `transform` anima. A camada é `pointer-events: none` e fica em z-index
   negativo, atrás de qualquer card, então não captura clique nem cobre menu.
   ============================================================ */

.painel {
    position: relative;
    isolation: isolate; /* prende o z-index negativo dentro do painel */
}

.painel__laser {
    position: absolute;
    /* `0` nas laterais, e não `-5%`: com a camada 5% mais larga que o
       `.painel` nada a clipava (o `overflow: hidden` é da própria camada, não
       do pai), e a página ganhava rolagem horizontal — 26px em 1024, 39px em
       1280, medido em 11/09/2026. Os feixes já nascem maiores que a camada e
       são cortados por ela; a sangria lateral não fazia falta. */
    inset: -10% 0 auto 0;
    height: 460px;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    /* some por baixo antes de encostar no conteúdo de trabalho */
    mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%);
}

.painel__feixe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    opacity: 0.5;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--adm-accent, #c8102e) 12deg,
        transparent 34deg,
        transparent 180deg,
        var(--adm-accent, #c8102e) 194deg,
        transparent 214deg,
        transparent 360deg
    );
    animation: painel-feixe 34s linear infinite;
}
.painel__feixe--2 {
    opacity: 0.22;
    animation-duration: 61s;
    animation-direction: reverse;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        var(--m63-preto-400, #63686f) 18deg,
        transparent 46deg,
        transparent 360deg
    );
}

@keyframes painel-feixe {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* No escuro o fundo é quase preto e o mesmo feixe fica agressivo */
:root[data-theme="dark"] .painel__feixe { opacity: 0.28; }
:root[data-theme="dark"] .painel__feixe--2 { opacity: 0.14; }

/* Movimento infinito é o caso de manual do reduced-motion. Fica o degradê
   parado, que ainda dá profundidade ao topo da página. */
@media (prefers-reduced-motion: reduce) {
    .painel__feixe { animation: none; }
}

/* Abaixo de 1024px a home é uma coluna só e o feixe fica atrás de texto em
   tela pequena, onde ele atrapalha em vez de ambientar. */
@media (max-width: 1023.98px) {
    .painel__laser { display: none; }
}


/* ==========================================================================
   FUNDO DA HOME DO PAINEL: anéis e fios
   ==========================================================================

   Somam-se aos feixes que já existiam, não os substituem. Os feixes ficam no
   topo, com máscara que os apaga antes do conteúdo; estes dois cobrem a tela
   inteira, bem mais fracos, para dar profundidade sem competir com os cards.

   `position: fixed` porque o pedido era preencher todo o fundo, e a home do
   painel rola. `z-index: -1` e `pointer-events: none` são o que mantém isto
   atrás de tudo e fora do caminho do clique: o mesmo par que o .painel__laser
   usa e que já se provou nesta árvore de empilhamento.
   ========================================================================== */

.painel__fundo {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* O canvas dos fios ocupa a tela toda; quem desenha é o fundo-painel.js. */
.painel__fios {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* --------------------------------------------------------------------------
   Anéis
   --------------------------------------------------------------------------
   Em CSS puro de propósito: são escala e opacidade, que o compositor resolve
   sem tocar em layout nem em pintura. Pôr isto no canvas junto com os fios
   custaria desenho por quadro para um efeito que o navegador faz de graça.

   Nascem fora do centro. Centralizado, o conjunto viraria um alvo no meio da
   tela e puxaria o olho justamente para onde ficam os cards de módulo.
   -------------------------------------------------------------------------- */
.painel__aneis {
    position: absolute;
    top: 18%;
    left: 74%;
    width: min(52vw, 720px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
}

.painel__anel {
    position: absolute;
    inset: 0;
    border: 1px solid var(--adm-accent, #c8102e);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.2);
    will-change: transform, opacity;
    animation: painel-anel 11s ease-out infinite;
}

/* O atraso escalonado é o efeito inteiro: sem ele os cinco anéis pulsariam
   juntos e o resultado seria um círculo piscando. */
.painel__anel:nth-child(2) { animation-delay: 2.2s; }
.painel__anel:nth-child(3) { animation-delay: 4.4s; }
.painel__anel:nth-child(4) { animation-delay: 6.6s; }
.painel__anel:nth-child(5) { animation-delay: 8.8s; }

@keyframes painel-anel {
    0%   { opacity: 0;    transform: scale(0.18); }
    12%  { opacity: 0.16; }
    70%  { opacity: 0.05; }
    100% { opacity: 0;    transform: scale(1.25); }
}

/* No escuro o fundo é quase preto e o mesmo traço fica duro. */
:root[data-theme="dark"] .painel__anel { opacity: 0; }
:root[data-theme="dark"] .painel__fios { opacity: 0.75; }

/* Movimento infinito de novo: sem animação, fica um anel parado e discreto,
   que ainda dá textura ao fundo. Os fios o JS nem chega a desenhar. */
@media (prefers-reduced-motion: reduce) {
    .painel__anel { animation: none; opacity: 0.06; transform: scale(0.9); }
    .painel__anel:not(:first-child) { display: none; }
}

/* Abaixo de 1024px a home é uma coluna só: o fundo passa a atravessar texto
   em vez de ambientar, e é onde a bateria importa mais. */
@media (max-width: 1023.98px) {
    .painel__fundo { display: none; }
}