/* ══════════════════════════════════════════════════════════════════════════
   O login do portal ELS na linguagem do site — por SOBREPOSIÇÃO.
   Carregado por último no <head> de portal-login.jsp: troca as variáveis de
   cor da tela original pelas da marca e ajusta o que precisa de fundo
   escuro. Estrutura, conteúdo ("o elo") e Java ficam intactos.
   Reverter = tirar o <link> deste arquivo.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --tinta: #FFFFFF;
  --cinza: rgba(255, 255, 255, .72);
  --fraco: rgba(255, 255, 255, .5);
  --azul: #FFA94D;                 /* o destaque da tela vira o âmbar da marca */
  --azul-fraco: rgba(242, 133, 31, .14);
  --dorme: rgba(255, 255, 255, .2);
  --dorme-tinta: rgba(255, 255, 255, .55);
  --papel: rgba(255, 255, 255, .055);
  --fundo: #08081C;
  --brd: rgba(255, 255, 255, .12);
  --verde: #34D399;
  --verde-fraco: rgba(52, 211, 153, .14);
  --coral: #FF6B5E;
  --coral-fraco: rgba(255, 107, 94, .14);
  color-scheme: dark;
}
html, body { background: #08081C !important; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  background:
    radial-gradient(ellipse 55% 45% at 30% 40%, rgba(91, 91, 214, .22), transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 90%, rgba(242, 133, 31, .10), transparent 70%),
    linear-gradient(168deg, #0b0b24 0%, #08081C 60%) !important;
}
h1, h2, .pilar h2, button.entrar { font-family: "Archivo", system-ui, sans-serif !important; }
label, .saida, .rotulo-elo, .pilar .exemplo { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* trilho do topo */
.rail { background: rgba(8, 8, 28, .82) !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  backdrop-filter: saturate(1.6) blur(16px); }
.rail .risco { background: rgba(255, 255, 255, .16) !important; }
.rail .assina { color: rgba(255, 255, 255, .55) !important; }

/* o elo: cartões de vidro, fios no azul do logotipo, centro em âmbar */
.pilar { background: rgba(255, 255, 255, .045) !important; border-color: rgba(255, 255, 255, .1) !important; box-shadow: none !important; }
.pilar.on { background: rgba(255, 255, 255, .085) !important; border-color: rgba(242, 133, 31, .55) !important;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9), 0 0 0 1px rgba(242, 133, 31, .18) !important; }
.pilar .icone { background: rgba(255, 255, 255, .08) !important; color: #759FCD !important; }
.pilar.on .icone { background: #2A2A74 !important; color: #fff !important; }
.pilar .exemplo { background: rgba(255, 255, 255, .06) !important; color: rgba(255, 255, 255, .75) !important; border-color: rgba(255, 255, 255, .1) !important; }
.pilar.on .exemplo { background: rgba(242, 133, 31, .12) !important; color: #FFA94D !important; border-color: rgba(242, 133, 31, .4) !important; }
.orbita { border-color: rgba(117, 159, 205, .28) !important; }
/* o anel herdava a tinta (agora branca) e saía forte demais: volta ao azul do logotipo, discreto */
.diagrama svg circle[fill="none"] { stroke: rgba(117, 159, 205, .38); }
.diagrama #marcas { stroke: rgba(117, 159, 205, .3); }
.ponto { background: #15153D !important; border-color: rgba(117, 159, 205, .7) !important; }
.ponto.on { background: #FFA94D !important; border-color: #fff !important; box-shadow: 0 0 0 6px rgba(242, 133, 31, .25), 0 0 24px rgba(242, 133, 31, .6) !important; }
.diagrama svg.fios line, .diagrama svg.fios path { stroke: rgba(117, 159, 205, .35); }
.fio-aceso { stroke: #FFA94D !important; filter: drop-shadow(0 0 6px rgba(242, 133, 31, .7)); }
.centro .nucleo { background: radial-gradient(circle at 35% 30%, #FFD3A0, #F2851F 55%, #A2510A) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 40px rgba(242, 133, 31, .65) !important; }
.centro .halo { background: radial-gradient(circle, rgba(242, 133, 31, .28), transparent 70%) !important; }
.centro .onda, .centro .onda2 { border-color: rgba(242, 133, 31, .45) !important; }
.rotulo-elo { color: rgba(255, 255, 255, .55) !important; }
.saida { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .12) !important;
  box-shadow: 0 20px 40px -30px rgba(0, 0, 0, .9) !important; color: #fff; }
.saida .etq { color: rgba(255, 255, 255, .5) !important; }
.saida .hora { color: #759FCD !important; }
.saida .tempo { background: rgba(52, 211, 153, .14) !important; color: #34D399 !important; }
.saida .tempo.fora { background: rgba(255, 107, 94, .14) !important; color: #FF6B5E !important; }

/* o acesso */
.acesso h1 { color: #fff !important; letter-spacing: -.035em; }
.acesso h1 b { background: linear-gradient(90deg, #FFA94D, #F2851F 55%, #ffcf8f); -webkit-background-clip: text; background-clip: text;
  color: transparent !important; padding-right: .06em; }
.acesso .lead { color: rgba(255, 255, 255, .68) !important; }
label { color: rgba(255, 255, 255, .55) !important; }
input { background: rgba(255, 255, 255, .05) !important; color: #fff !important; border-color: rgba(255, 255, 255, .16) !important; }
input::placeholder { color: rgba(255, 255, 255, .32) !important; }
input:focus { border-color: #F2851F !important; box-shadow: 0 0 0 4px rgba(242, 133, 31, .2) !important; outline: none; }
input:-webkit-autofill { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0 60px #15153D inset !important; caret-color: #fff; }
.olho { color: rgba(255, 255, 255, .5) !important; }
.olho:hover { color: #fff !important; }
button.entrar { background: #F2851F !important; color: #231200 !important; border: 0 !important;
  box-shadow: 0 0 0 1px rgba(255, 169, 77, .5) inset, 0 14px 30px -12px rgba(242, 133, 31, .75) !important; }
button.entrar:hover { background: #FFA94D !important; }
.erro { background: rgba(255, 107, 94, .12) !important; color: #FF6B5E !important; border-color: rgba(255, 107, 94, .4) !important; }
.ganhos { border-top-color: rgba(255, 255, 255, .1) !important; }
.ganhos i { background: #F2851F !important; box-shadow: 0 0 0 4px rgba(242, 133, 31, .2) !important; }
.ganhos b { color: #fff !important; }
.ganhos span { color: rgba(255, 255, 255, .55) !important; }