/* NasLan LogIron — tema ferro */
:root{
  --fundo:#0e1013; --aco0:#16191d; --aco1:#1d2126; --aco2:#262b31;
  --texto:#e6e8eb; --suave:#9aa1aa; --fraco:#6b727b;
  --brasa:#ff7a1a; --brasa2:#ffb35c; --ok:#5cc94a; --alerta:#ffb020; --erro:#ff4d3a;
  --chanfro: inset 1px 1px 0 rgba(255,255,255,.10), inset -1px -1px 0 rgba(0,0,0,.65);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--fundo);color:var(--texto);
  font-family:"Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif;font-size:14px}
a{color:var(--brasa2)}
.aco{background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
  linear-gradient(180deg,var(--aco2),var(--aco1) 55%,var(--aco0))}
.placa{position:relative;border-radius:6px;padding:16px 18px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 3px),linear-gradient(180deg,#22262c,#191c20);
  border:1px solid #0a0b0d;box-shadow:var(--chanfro),0 0 0 2px #2c3138,0 0 0 3px #0a0b0d,0 8px 18px rgba(0,0,0,.55)}
.placa::before,.placa::after,.placa>.rb::before,.placa>.rb::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9dde2,#7b828b 45%,#2b3036 80%);box-shadow:0 1px 1px rgba(0,0,0,.8)}
.placa::before{top:6px;left:6px}.placa::after{top:6px;right:6px}
.placa>.rb::before{bottom:6px;left:6px}.placa>.rb::after{bottom:6px;right:6px}
.titulo{font-size:15px;font-weight:600;letter-spacing:.3px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.titulo small{margin-left:auto;color:var(--fraco);font-weight:400;font-size:12px}
.gravado{color:#c9ced4;text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}

.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
/* menu lateral preso na tela: rolar a página não leva o menu nem o "Recebendo logs" embora */
.lado{border-right:2px solid #0a0b0d;box-shadow:inset -1px 0 0 #2f343b;padding:18px 14px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{display:flex;align-items:center;gap:10px;padding:4px 6px 18px;border-bottom:1px solid #0a0b0d;box-shadow:0 1px 0 #2f343b;margin-bottom:10px;text-decoration:none;color:var(--texto)}
.brasao{width:52px;height:56px;flex:none;background:url("brasao.c6d1b47d9161.jpg") -31px -4px/114px auto no-repeat;filter:drop-shadow(0 0 6px rgba(255,122,26,.35))}
.marca b{display:block;font-size:22px;letter-spacing:1px;line-height:1}
.marca b span{color:var(--brasa)}
.marca em{font-style:normal;font-size:11px;color:var(--fraco);letter-spacing:1.5px}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:5px;color:var(--suave);text-decoration:none;font-size:14.5px;border:1px solid transparent}
.menu a:hover{color:var(--texto);background:rgba(255,255,255,.03)}
.menu a.ativo{color:#fff;border-color:#0a0b0d;background:linear-gradient(180deg,#3a2414,#22160e);box-shadow:var(--chanfro),inset 3px 0 0 var(--brasa),0 0 14px rgba(255,122,26,.15)}
.menu a.breve{opacity:.45}
.menu svg{flex:none}
.menu .cont{margin-left:auto;background:var(--erro);color:#fff;font-size:11px;border-radius:8px;padding:1px 7px;font-style:normal}
.sep{height:1px;background:#0a0b0d;box-shadow:0 1px 0 #2f343b;margin:8px 4px}
.estado{margin-top:auto;font-size:12px;color:var(--suave)}
.estado .placa{padding:12px 14px}
.led{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);margin-right:6px;flex:none}
.led.atraso{background:var(--alerta);box-shadow:0 0 8px var(--alerta)}
.led.sem{background:var(--erro);box-shadow:0 0 8px var(--erro)}

.topo{display:flex;align-items:center;gap:10px;padding:14px 22px;border-bottom:2px solid #0a0b0d;box-shadow:0 1px 0 #2f343b;flex-wrap:wrap;
  position:sticky;top:0;z-index:30}
/* cartões do painel presos logo abaixo da barra de busca (--topo é medido pelo base.html) */
.grade5.fixa{position:sticky;top:var(--topo,70px);z-index:20;background:var(--fundo);
  margin:-20px -22px 0;padding:20px 22px 14px;box-shadow:0 10px 14px -8px rgba(0,0,0,.85)}
.campo{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:5px;color:var(--suave);
  background:#0c0e10;border:1px solid #000;box-shadow:inset 0 2px 4px rgba(0,0,0,.8),0 1px 0 #30353c}
.campo input,.campo select{all:unset;color:var(--texto);width:100%;font-family:inherit;color-scheme:dark}
.campo b{font-weight:400;color:var(--fraco);font-size:12px;white-space:nowrap}
.botao{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:5px;border:1px solid #000;color:#1a0d04;font-weight:700;font-family:inherit;font-size:14px;cursor:pointer;text-decoration:none;
  background:linear-gradient(180deg,#ffc27a,#ff8a2a 45%,#d9580a);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 14px rgba(255,122,26,.35)}
.botao.metal{color:var(--texto);background:linear-gradient(180deg,#4a5059,#2b3037);box-shadow:var(--chanfro)}
.botao.perigo{color:#fff;background:linear-gradient(180deg,#a8321f,#6e1f13);box-shadow:var(--chanfro)}
.botao:disabled{opacity:.5;cursor:not-allowed}
.usuario{margin-left:auto;display:flex;align-items:center;gap:10px;color:var(--suave)}
.usuario a{color:var(--suave);text-decoration:none}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#1d1f22;
  background:radial-gradient(circle at 35% 30%,#e7eaee,#8a929b 60%,#4a5058);text-transform:uppercase}

main{padding:20px 22px;display:flex;flex-direction:column;gap:18px}
/* quadros do painel: todos numa linha só (menores) */
.grade5{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:8px}
.grade5 .cartao{padding:10px 11px;min-width:0}
.grade5 .placa::before,.grade5 .placa::after,.grade5 .placa>.rb::before,.grade5 .placa>.rb::after{width:5px;height:5px}
.grade5 .placa::before{top:4px;left:4px}.grade5 .placa::after{top:4px;right:4px}
.grade5 .placa>.rb::before{bottom:4px;left:4px}.grade5 .placa>.rb::after{bottom:4px;right:4px}
.grade5 .cartao .rot{font-size:11px;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grade5 .cartao .rot svg{width:14px;height:14px;flex:none}
.grade5 .cartao .val{font-size:20px;margin:5px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grade5 .cartao .val small{font-size:11px}
.grade5 .cartao .val.rede{font-size:17px}
.grade5 .cartao .det{font-size:10.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grade5 .cartao .barra{height:4px;margin-top:5px}
@media (max-width:1350px){.grade5{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:760px){.grade5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cartao .rot{color:var(--suave);font-size:13px;display:flex;gap:7px;align-items:center}
.cartao .val{font-size:30px;font-weight:700;margin:8px 0 4px;letter-spacing:.5px}
.cartao .val small{font-size:15px;color:var(--suave);font-weight:400}
.cartao .det{font-size:12px;color:var(--fraco)}
.bom{color:var(--ok)} .ruim{color:var(--alerta)} .erro{color:var(--erro)}
.barra{height:7px;border-radius:4px;background:#0b0c0e;box-shadow:inset 0 1px 2px #000;margin-top:8px;overflow:hidden}
.barra span{display:block;height:100%;background:linear-gradient(90deg,#d9580a,#ffb35c)}
.grade2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}
.res{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--fraco);font-weight:500;font-size:12px;letter-spacing:.6px;text-transform:uppercase;padding:8px 10px;
   background:linear-gradient(180deg,#2a2f36,#1f2328);border-bottom:1px solid #000}
td{padding:9px 10px;border-bottom:1px solid #121417;box-shadow:0 1px 0 #24282e;font-variant-numeric:tabular-nums}
.ip{color:#ffd2a6;font-family:Consolas,"DejaVu Sans Mono",monospace}
.mono{font-family:Consolas,"DejaVu Sans Mono",monospace}
.selo{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:3px;border:1px solid #000;box-shadow:var(--chanfro);white-space:nowrap}
.selo.t1,.selo.t3,.selo.login,.selo.ok{background:#1d3418;color:#9be48a}
.selo.t2,.selo.t4,.selo.cinza{background:#2b2f35;color:#c3c8cf}
.selo.logout,.selo.am{background:#3a2a0c;color:#ffcf73}
.selo.vm{background:#3d1510;color:#ff9b8c}
.equip{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #121417;box-shadow:0 1px 0 #24282e}
.equip:last-child{border:0;box-shadow:none}
.equip b{font-weight:600}.equip span{color:var(--fraco);font-size:12px;display:block}
.equip .r{margin-left:auto;text-align:right;font-size:12px;color:var(--suave)}
.hash{font-family:Consolas,monospace;font-size:12px;color:var(--suave);word-break:break-all}
.ficha{display:grid;grid-template-columns:160px 1fr;row-gap:10px;font-size:14px;margin:0}
.ficha dt{color:var(--fraco)} .ficha dd{margin:0}
.grande{font-size:24px;font-weight:700;margin:2px 0 14px}
.grande span{color:var(--brasa)}
.aviso{font-size:12.5px;color:var(--suave);display:flex;gap:8px;align-items:center}
.vazio{color:var(--fraco);padding:18px 4px;text-align:center}
.linha-tempo div{margin:6px 0;font-size:13px;color:var(--suave)}
.msg{padding:12px 16px;border-radius:5px;border:1px solid #000;box-shadow:var(--chanfro)}
.msg.success{background:#1d3418;color:#c9f3bd}
.msg.error,.msg.erro{background:#3d1510;color:#ffc4ba}
.msg.warning{background:#3a2a0c;color:#ffe0a3}
.form-grade{display:grid;grid-template-columns:200px 1fr;gap:14px 16px;align-items:center;max-width:760px}
.form-grade label{color:var(--suave)}
.form-grade .campo{width:100%}
.ajuda{grid-column:2;color:var(--fraco);font-size:12px;margin-top:-8px}
.errolista{grid-column:2;color:var(--erro);font-size:12.5px;margin-top:-8px}
#radar-mapa{border-radius:5px;background:radial-gradient(ellipse at 50% 45%,#1b2026,#111316 75%);box-shadow:inset 0 2px 8px rgba(0,0,0,.8);overflow:hidden}
#radar-mapa .aura{animation:pulsa 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulsa{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.legenda{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--suave)}
.legenda i{width:120px;height:6px;border-radius:3px;background:linear-gradient(90deg,#5a3a20,#ff8a2a,#ffe2b0)}
.legenda em{margin-left:auto;font-style:normal;color:var(--fraco)}
.legenda a{color:var(--fraco)}
#radar-paises .pais{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 2px;border-bottom:1px solid #121417;box-shadow:0 1px 0 #24282e;font-size:13px}
#radar-paises .pais span{display:flex;align-items:center;gap:8px}
.bandeira{width:20px;height:15px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.6);flex:none}
#radar-mapa{position:relative}
.rd-eixo{font:10px "Bahnschrift","Segoe UI",sans-serif;fill:#5d656e}
.rd-placar{position:absolute;left:14px;top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;pointer-events:none;
  padding:8px 12px;border-radius:5px;background:rgba(14,16,19,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.rd-placar:empty{display:none}
.rd-placar div{display:flex;align-items:baseline;gap:6px}
.rd-placar i{font-style:normal;font-weight:700;font-size:16px}
.rd-placar span{font-size:12px;color:var(--suave)}
.rd-placar b{font-size:20px;letter-spacing:.3px}
.rd-placar .down i,.rd-placar .down b{color:#7fdc6a}
.rd-placar .up i,.rd-placar .up b{color:#ffb35c}
.rd-placar small{flex-basis:100%;font-size:10.5px;color:var(--fraco)}
.rd-rotulo{font:600 11px "Bahnschrift","Segoe UI",sans-serif;fill:#e6e8eb;paint-order:stroke;stroke:#0e1013;stroke-width:3px}
.rd-rotulo .v{fill:#ffb35c;font-weight:400}
#radar-paises .pais b{font-weight:600;color:var(--brasa2)}
#radar-paises .pais .barra{grid-column:1/3;margin-top:4px;height:5px}
/* menu recolhível */
.app{transition:grid-template-columns .2s}
.lado{position:sticky}
.recolher{position:absolute;top:30px;right:-13px;z-index:40;width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:1px solid #000;color:var(--texto);font:700 18px/1 "Bahnschrift",sans-serif;padding:0 0 2px;
  background:radial-gradient(circle at 35% 30%,#5a616a,#2b3037 70%);box-shadow:var(--chanfro),0 2px 6px rgba(0,0,0,.7)}
.recolher:hover{color:var(--brasa2)}
.lado{overflow:visible}
.recolhido .app{grid-template-columns:76px 1fr}
.recolhido .lado{padding:18px 10px}
.recolhido .lado .rot{display:none}
.recolhido .marca{justify-content:center;padding:4px 0 18px}
.recolhido .menu a{justify-content:center;padding:10px 0}
.recolhido .menu a.ativo{box-shadow:var(--chanfro),inset 0 -3px 0 var(--brasa),0 0 14px rgba(255,122,26,.15)}
.recolhido .estado .placa{padding:12px 0;display:flex;justify-content:center}
.recolhido .estado .led{margin:0}
/* seletor de atualização */
.atualizar{display:flex;align-items:center;gap:8px}
.atualizar .campo{width:178px}
.atualizar .campo svg{display:none}
.atualizar select{cursor:pointer}
.atualizar select option{background:#16191d;color:var(--texto)}
.botao.girar{width:40px;padding:0;justify-content:center}
.botao.girar.girando svg{animation:gira .6s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.atualizar .quando{font-size:11.5px;color:var(--fraco);min-width:58px}
.atualizar .quando.erro{color:var(--erro)}
@media (max-width:1700px){.usuario .nome{display:none}}
@media (max-width:1450px){.atualizar .quando{display:none}}
.periodo-campos{display:grid;grid-template-columns:1.3fr .7fr 1.3fr 1.3fr auto;gap:10px;align-items:center}
@media (max-width:1100px){.periodo-campos{grid-template-columns:1fr 1fr}}
.opcoes{display:flex;flex-direction:column;gap:8px}
.opcao{display:flex;align-items:center;gap:10px;color:var(--texto);cursor:pointer}
.opcao input{accent-color:var(--brasa);width:16px;height:16px;margin:0}
.opcao span{color:var(--suave)}
/* entrar */
.entrar{min-height:100vh;display:grid;place-items:center;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,rgba(255,122,26,.10),transparent 70%),var(--fundo)}
.entrar .placa{width:380px;padding:28px 30px}
.entrar .logo{width:220px;display:block;margin:0 auto 6px}
.entrar h1{font-size:30px;text-align:center;margin:0 0 4px;letter-spacing:1px}
.entrar h1 span{color:var(--brasa)}
.entrar p{text-align:center;color:var(--fraco);margin:0 0 22px;letter-spacing:2px;font-size:11px}
.entrar .campo{margin-bottom:12px}
.entrar .botao{width:100%;justify-content:center}
/* entrar (nova): circuito no fundo, vitrine à esquerda, login à direita */
.pagina-entrar{min-height:100vh;overflow:hidden;
  background:radial-gradient(ellipse 70% 60% at 30% 50%,#141a17 0%,#0d0f12 60%,#08090b 100%)}
#circuito{position:fixed;inset:0;width:100vw;height:100vh;z-index:0}
.entrar2{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) 400px;align-items:center;gap:3vw;
  padding:40px 6vw 40px 4vw}
.vitrine{display:flex;align-items:center;justify-content:center;gap:2vw;min-width:0}
.robo{max-height:62vh;max-width:28vw;min-width:0;filter:drop-shadow(0 0 28px rgba(255,122,26,.25)) drop-shadow(0 18px 30px rgba(0,0,0,.8))}
.robo-vaga{display:none}
.vitrine-marca{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.vitrine-marca{min-width:0;flex:0 1 auto}
.vitrine .metal{width:min(400px,24vw);height:auto;overflow:visible}
.metal-texto{font-family:"Bahnschrift","DIN Alternate","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:118px;letter-spacing:4px}
.metal .brilho{mix-blend-mode:screen;opacity:.9}
@media (prefers-reduced-motion:reduce){.metal .brilho{display:none}}
.vitrine-frase{display:block;color:var(--suave);font-size:15px;max-width:440px;text-wrap:balance;line-height:1.5;letter-spacing:.3px}
.cartao-entrar{width:100%;padding:28px 30px;backdrop-filter:blur(2px)}
.cartao-entrar .logo{width:150px;display:block;margin:0 auto 6px;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 70%,transparent 100%)}
.cartao-entrar h1{font-size:30px;text-align:center;margin:0 0 4px;letter-spacing:1px}
.cartao-entrar h1 span{color:var(--brasa)}
.cartao-entrar p{text-align:center;color:var(--fraco);margin:0 0 22px;letter-spacing:2px;font-size:11px}
.cartao-entrar .campo{margin-bottom:12px}
.cartao-entrar .botao{width:100%;justify-content:center}
.verificar{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:30px 16px}
.verificar .cartao-entrar{width:100%}
@media (max-width:900px){.entrar2{grid-template-columns:1fr;padding:24px 16px}.vitrine{display:none}}
@media (max-width:1200px){.grade2,.res{grid-template-columns:1fr}}