/* ═══════════════════════════════════════════════════════════════════════════
   ÓRBITA — a tela de entrada NO DOMÍNIO DA ESCOLA.
   Rota A, 2026-08-20. Carregado por portal/ e painel/, login e trocar_senha.

   🔒 POR QUE ESTE ARQUIVO EXISTE, e não duas cópias
   A primeira versão desta frente escreveu o mesmo bloco em `portal.css` e em
   `app.css` — 107 linhas duplicadas, diferindo só no prefixo da classe. Achado
   do Cortex, e ele apontou a contradição: o include ao lado existe justamente
   para não haver cópias, "porque cópias divergem na primeira correção que
   alguém fizer em uma só". **A regra vale para o CSS pelo mesmo motivo.**

   ⚠️ O QUE TORNOU O CONSERTO BARATO
   `data-marca="escola"` está no MESMO elemento que carrega `.auth-wrap` /
   `.login-wrap`. Então o prefixo da classe era redundante: o atributo sozinho
   seleciona o mesmo elemento nas duas superfícies.

   Onde os nomes realmente diferem (cartão, campo, botão), as duas classes ficam
   listadas LADO A LADO aqui — visíveis num lugar só, em vez de escondidas em
   dois arquivos.

   🔴 SEM FONTE DE FORA. O CSP desta plataforma é `default-src 'self'` e
   `font-src 'self'`: Google Fonts seria bloqueado pela nossa própria política.
   Os rótulos usam a pilha de monoespaçada do sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-marca="escola"] {
  background: var(--gx-preto-orbita);
  position: relative;
  isolation: isolate;
}
/* Todo conteúdo fica ACIMA das órbitas. */
[data-marca="escola"] > * { position: relative; z-index: 2; }

/* --- as órbitas ---------------------------------------------------------- */
[data-marca="escola"] .orbitas {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; overflow: hidden;
}
[data-marca="escola"] .orbitas span {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(253, 253, 253, .045);
}
[data-marca="escola"] .orbitas span:nth-child(1) { width: 210px; height: 210px; }
[data-marca="escola"] .orbitas span:nth-child(2) { width: 340px; height: 340px; }
[data-marca="escola"] .orbitas span:nth-child(3) {
  width: 490px; height: 490px; border-color: rgba(253, 253, 253, .028);
}

/* --- a logo da escola ---------------------------------------------------- */
/* A da Gigantes é uma assinatura horizontal (522x123) e o CSS de origem nasceu
   para ela: 40px de altura dá uns 170px de largura. Logo de escola costuma ser
   um selo quadrado, e a 40px vira um selinho ilegível. */
.marca-de-escola { height: 72px; width: auto; max-width: 240px; object-fit: contain; }

/* Escola SEM arquivo de logo: as iniciais.

   🔴 ESTE BLOCO JÁ USOU `--pc-primary` e `--pc-accent`, e era um DEFEITO:
   essas duas existem só em `portal.css`, e as telas do painel carregam
   `tokens.css` + `app.css` + `entrada.css` — nunca o `portal.css`. O
   `linear-gradient` ficava inválido, o navegador descartava a declaração, e o
   círculo das iniciais aparecia SEM FUNDO na tela do gestor. Latente: só
   apareceria numa escola sem arquivo de logo, e a Planeta tem.

   ⚠️ A lição, do Cortex em 2026-08-20, e ela é maior que o caso:
   **regra compartilhada que depende de token de UMA superfície é cópia
   disfarçada de compartilhamento.** De-duplicar não teria consertado nada.

   Agora usa `--gx-*` do `tokens.css`, que as quatro telas carregam.

   ⏳ E o certo a prazo é OUTRO: a cor da própria escola (`MARCA.cor` já existe
   no dado). Isso é o item A.2 da rota A e exige o template injetar a cor, então
   fica para quando a régua da cor for resolvida — com mais de uma escola na
   mão. Até lá, neutro, que serve a qualquer marca. */
.auth-marca-iniciais {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gx-ink-850), var(--gx-ink-500));
  color: #fdfdfd; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 28px; letter-spacing: .02em;
}

/* --- o cartão: o anel desenrolado na borda de cima ----------------------- */
[data-marca="escola"] .auth-card,
[data-marca="escola"] .login-card {
  background: var(--gx-carvao);
  border-color: var(--gx-fio-orbita);
  position: relative;
  overflow: hidden;
}
[data-marca="escola"] .auth-card::before,
[data-marca="escola"] .login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gx-anel);
}
/* O cartão virou preto: o texto dele vem junto. */
[data-marca="escola"] .auth-card h1,
[data-marca="escola"] .login-card h1 { color: #fdfdfd; }
[data-marca="escola"] .auth-card .pc-muted,
[data-marca="escola"] .login-card p { color: #8d8983; }

/* --- os campos: etiqueta técnica e um fio que acende --------------------- */
[data-marca="escola"] .pc-field label,
[data-marca="escola"] .field label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
  color: #5d5a56;
}
[data-marca="escola"] .pc-field input,
[data-marca="escola"] .field input {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid #2a2a2e;
  padding-left: 0; padding-right: 0; color: #fdfdfd;
}
[data-marca="escola"] .pc-field input:focus,
[data-marca="escola"] .field input:focus {
  outline: none; background: transparent; border-bottom-color: var(--gx-anel-a);
}

/* --- o botão ------------------------------------------------------------- */
[data-marca="escola"] .pc-btn--primary,
[data-marca="escola"] .btn--primary {
  background: var(--gx-anel-a); border-color: var(--gx-anel-a); color: #0a0a0b;
}
[data-marca="escola"] .pc-btn--primary:hover,
[data-marca="escola"] .btn--primary:hover {
  background: var(--gx-anel-b); border-color: var(--gx-anel-b);
}

@media (prefers-reduced-motion: no-preference) {
  [data-marca="escola"] .orbitas span { animation: gx-respira 14s ease-in-out infinite; }
  [data-marca="escola"] .orbitas span:nth-child(2) { animation-delay: -4s; }
  [data-marca="escola"] .orbitas span:nth-child(3) { animation-delay: -8s; }
  @keyframes gx-respira { 0%, 100% { opacity: 1 } 50% { opacity: .45 } }
}