/* SM Preventiva: tema "console de monitoramento" (carregado por último, sobrepõe style.css e extra.css).
   Ideia: o menu e o login são o rack, escuro e com grade de planta técnica; a área de trabalho é aço claro, para leitura longa.
   Os indicadores são leitores de instrumento (canto chanfrado e régua). O verde da SM só marca sinal ao vivo/online;
   a cor de ação é --marca, que cada empresa de TI troca pela própria cor. As cores de situação continuam semânticas. */
:root{
  --rack:#0D1424;--rack2:#17223A;--rack3:#22304D;--rack-tx:#C8D2E3;--rack-tx2:#8794AD;
  --aco:#ECF0F5;--placa:#FFFFFF;--fio:#D4DBE5;--fio2:#B9C3D1;
  --tinta:#121A2B;--tinta2:#525E75;--tinta3:#858FA3;
  --marca:#1769E0;--sinal:#25D366;
  --verde:#0E8A4B;--verde-claro:#E3F5EA;--verm:#C8312A;--verm-claro:#FCE9E7;--amar:#9C5F00;--amar-claro:#FFF1D6;--azul:#1769E0;
  /* nomes antigos, apontando para o tema novo */
  --noite:var(--tinta);--noite2:var(--rack2);--petroleo:var(--marca);--link:var(--marca);--nevoa:#E6ECF4;--nevoa2:#F3F6FA;
  --limao:var(--sinal);--sub-noite:var(--rack-tx2);
  --tx:var(--tinta);--tx2:var(--tinta2);--tx3:var(--tinta3);--borda:var(--fio);--borda2:var(--fio2);--fundo:var(--aco);--card:var(--placa);
  --r:6px;--r2:4px;--sombra:0 1px 0 rgba(13,20,36,.04);
  --chanfro:14px;
  --grade:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 24px);
  font-family:"IBM Plex Sans",system-ui,sans-serif}
body{background:var(--aco);color:var(--tinta)}
h1,h2,h3,.wm,.kpi .v,.mon-kpi .v,.vis-met .v,.relogio,.cod-num,.maq-itens a b,.demo-grade b,.esc-cab h3{font-family:"Chakra Petch","IBM Plex Sans",sans-serif}
h1{font-size:27px;font-weight:600;letter-spacing:-.01em;color:var(--tinta);line-height:1.15}
h2{font-size:16px;font-weight:600;letter-spacing:0;color:var(--tinta)}
h3{font-weight:600}
a{color:var(--marca)}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
::selection{background:rgba(23,105,224,.18)}
code,.cod,kbd,samp{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}

/* ---------------------------------------------------------- rack: menu lateral */
.lado{background:var(--grade),var(--rack);color:var(--rack-tx);width:272px;padding:18px 10px 14px;border-right:1px solid #050a14;scrollbar-color:var(--rack3) transparent}
.lado .marca{padding:4px 10px 14px;margin-bottom:6px;border-bottom:1px solid rgba(255,255,255,.07)}
.wm{font-size:20px;font-weight:600;letter-spacing:.01em}.wm b{font-weight:700}
.lado a.it{color:var(--rack-tx);border-radius:3px;padding:7px 12px;font-size:13.5px;position:relative}
.lado a.it svg{opacity:.65}
.lado a.it:hover{background:var(--rack2);color:#fff}
.lado a.it.ativo{background:var(--rack2);color:#fff;box-shadow:none;font-weight:500}
.lado a.it.ativo::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;background:var(--sinal);border-radius:0 2px 2px 0;box-shadow:0 0 10px rgba(37,211,102,.55)}
.lado a.it.ativo svg{stroke:var(--sinal);opacity:1}
.lado a.it .selo{background:var(--sinal);color:var(--rack)}
.lado .esc{background:var(--rack2);border:1px solid var(--rack3);border-radius:3px}
.lado .esc i{background:var(--sinal);box-shadow:0 0 0 3px rgba(37,211,102,.18)}
.rodape-lado{color:var(--rack-tx2);border-top:1px solid rgba(255,255,255,.07);padding-top:14px}
.rodape-lado a{color:var(--rack-tx2)!important}.rodape-lado a:hover{color:#fff!important}
.rodape-lado button{border-radius:3px;border-color:var(--rack3)}
.rodape-lado button:hover{background:var(--rack2)}
.barra-movel{background:var(--grade),var(--rack)}

/* ---------------------------------------------------------- área de trabalho */
.principal{padding:22px 36px 40px}
.topo{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--fio)}
.sub{color:var(--tinta2)}

/* faixa de estado do monitoramento (dado real do agendador) */
.pulso-sis{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--tinta2);margin:0 0 18px;padding:7px 12px;background:var(--placa);
  border:1px solid var(--fio);border-radius:3px;width:max-content;max-width:100%}
.pulso-sis i{width:8px;height:8px;border-radius:50%;background:var(--sinal);flex-shrink:0;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:pulso 2.4s ease-out infinite}
.pulso-sis.parado{color:var(--verm);border-color:#F0B9B4;background:var(--verm-claro)}
.pulso-sis.parado i{background:var(--verm);animation:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* blocos: placas finas, sem sombra difusa */
.card{border:1px solid var(--fio);border-radius:var(--r);box-shadow:var(--sombra);padding:18px 20px}
.card>h2:first-child{padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--fio)}
.esc-item,.rel-card,.vis-cartao,.mq,.lista-chk label,.demo-grade a{border-radius:var(--r)}
.bloco{background:var(--nevoa2);border:1px solid var(--fio);border-radius:var(--r2)}

/* indicadores: leitores de instrumento, com canto chanfrado e régua no rodapé */
.kpi{border:1px solid var(--fio);border-radius:0;box-shadow:none;padding:15px 18px 20px;
  clip-path:polygon(0 0,calc(100% - var(--chanfro)) 0,100% var(--chanfro),100% 100%,0 100%);
  background:linear-gradient(var(--placa),var(--placa)) padding-box}
.kpi::before{content:"";position:absolute;left:18px;right:18px;bottom:8px;height:5px;
  background:repeating-linear-gradient(90deg,var(--fio2) 0 1px,transparent 1px 8px);opacity:.9}
.kpi .l{color:var(--tinta2);font-size:12.5px}
.kpi .v{font-size:34px;font-weight:600;color:var(--tinta);letter-spacing:-.01em;margin-top:2px}
.kpi:first-child{background:var(--grade),var(--rack);border-color:var(--rack)}
.kpi:first-child::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 8px)}
.kpi:first-child::after{left:18px;bottom:8px;width:40px;height:5px;border-radius:0;background:var(--sinal);box-shadow:0 0 10px rgba(37,211,102,.5)}
.kpi:first-child .l,.kpi:first-child .d{color:var(--rack-tx2)}
.kpi-link:hover{border-color:var(--marca);box-shadow:none}
.kpi-link:first-child:hover{box-shadow:none;border-color:var(--sinal)}
.kpi.sel{outline:2px solid var(--marca)}

/* monitoramento: leitores escuros, a cor da situação vai no número e na barra lateral */
.mon-kpi{background:var(--grade),var(--rack)!important;border-radius:0;box-shadow:none;border-left:4px solid var(--rack-tx2);
  clip-path:polygon(0 0,calc(100% - var(--chanfro)) 0,100% var(--chanfro),100% 100%,0 100%)}
.mon-kpi::after{display:none}
.mon-kpi .l{color:var(--rack-tx2);opacity:1}.mon-kpi .d{color:var(--rack-tx2);opacity:1}
.mon-kpi .v{font-weight:600}
a.mon-kpi:hover{transform:none;box-shadow:inset 0 0 0 1px var(--rack3)}
.k-ok{border-left-color:var(--sinal)}.k-ok .v{color:var(--sinal)}
.k-aviso{border-left-color:#F2B233}.k-aviso .v{color:#F2B233}
.k-critico{border-left-color:#FF5A4F}.k-critico .v{color:#FF6B61}
.k-offline{border-left-color:#7D889C}.k-offline .v{color:#AEB7C7}
.k-novo,.k-neutro{border-left-color:#5B9BFF}.k-novo .v,.k-neutro .v{color:#8AB8FF}
.mon-abas a,.abas a{border-radius:3px;font-weight:500}
.mon-abas a:hover{border-color:var(--marca);color:var(--tinta)}
.mon-abas a.on,.abas a.on{background:var(--rack);color:#fff;border-color:var(--rack);box-shadow:inset 0 -2px 0 var(--sinal)}
.mon-graf .gc{border-radius:var(--r);box-shadow:none;border-top:1px solid var(--fio)}
.mon-graf .gc .gc-top h3{font-family:"Chakra Petch",sans-serif;font-size:14.5px}
.mon-filtros{border-radius:var(--r)}
.btn-exp{background:var(--rack);color:#fff;border-radius:3px;font-weight:600}
.btn-exp:hover{filter:none;background:var(--rack2)}
.btn-exp.sec{border-radius:3px}
.chip-f{background:var(--nevoa);border-color:var(--fio2);color:var(--tinta);border-radius:3px}

/* tabelas: cabeçalho de painel, linhas finas */
th{background:var(--nevoa2);color:var(--tinta2);font-weight:600;font-size:12px;border-bottom:1px solid var(--fio2)}
th:first-child,th:last-child{border-radius:0}
td{border-bottom:1px solid #E6EBF2}
tr:hover td{background:#F5F8FC}
td.n,.kpi .v,.mon-kpi .v,.vis-met .v{font-variant-numeric:tabular-nums}

/* etiquetas de situação: retângulos curtos, cor semântica */
.tag{border-radius:3px;padding:2px 8px;font-weight:600;letter-spacing:.005em}
.t-critico,.t-falhou,.t-improdutivo{background:var(--verm-claro);color:var(--verm);box-shadow:inset 0 0 0 1px #F3C2BE}
.t-aviso,.t-pendente,.t-ocioso{background:var(--amar-claro);color:var(--amar);box-shadow:inset 0 0 0 1px #F2D7A2}
.t-ok,.t-concluida,.t-produtivo,.t-ativo{background:var(--verde-claro);color:var(--verde);box-shadow:inset 0 0 0 1px #B9E3C9}
.t-enviada,.t-aprovada,.t-neutro{background:#E5EEFC;color:#1453B8;box-shadow:inset 0 0 0 1px #BFD3F5}
.t-novo,.t-offline,.t-expirada,.t-recusada,.t-inativo,.t-intervalo{background:#EDF0F5;color:#5A6478;box-shadow:inset 0 0 0 1px #D4DAE4}
.pt-ok{background:var(--sinal);box-shadow:0 0 6px rgba(37,211,102,.6)}.pt-critico{background:var(--verm)}.pt-aviso{background:#E9A21F}

/* avisos */
.alerta{border-radius:3px;border-left-width:3px}
.aviso-card{background:var(--amar-claro);border:1px solid #F2D7A2;border-left:3px solid #E9A21F;border-radius:3px;padding:10px 14px;color:#5E3B00;margin:8px 0}
.aviso-card p{margin:4px 0}

/* formulários e botões */
input,select,textarea{border-radius:3px;border-color:var(--fio2)}
input:focus,select:focus,textarea:focus{border-color:var(--marca);box-shadow:0 0 0 3px rgba(23,105,224,.16)}
input[type=checkbox],input[type=radio]{accent-color:var(--marca)}
.btn{background:var(--marca);border-color:var(--marca);border-radius:0;font-weight:600;letter-spacing:.01em;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
.btn:hover{background:var(--rack);border-color:var(--rack)}
.btn.sec{background:var(--placa);color:var(--tinta);border-color:var(--fio2);clip-path:none;border-radius:3px}
.btn.sec:hover{background:var(--nevoa2);border-color:var(--marca);color:var(--marca)}
.btn.verm{background:var(--verm);border-color:var(--verm)}
.btn.peq{clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}.btn.sec.peq{clip-path:none}
details summary{color:var(--marca)}
.lista-chk label{border-color:var(--fio)}
.lista-chk label:has(input:checked){border-color:var(--marca);background:#F2F7FF}
.vis-b.sel,.mq-vis a.sel{background:var(--rack)}
.vis-av{background:var(--rack);color:var(--sinal)}
.vis-mini i,.uso i b{background:var(--marca)}
.uso i{background:#E3E8F0}
.demo-faixa{background:var(--rack);color:#fff;border-radius:3px;border-left:3px solid var(--sinal)}
.demo-faixa a{color:var(--sinal)}
.info{background:var(--nevoa);color:var(--marca)}
.info::after{background:var(--rack);border-radius:4px}
.ajuda-corpo{border-left-color:var(--marca);border-radius:3px}
.filtro-ativo{border-left-color:var(--marca);border-radius:3px}

/* ---------------------------------------------------------- login: o rack inteiro */
.login-pag{background:var(--aco)}
.login-arte{background:var(--grade),var(--rack);padding:48px 56px}
.login-arte h2{font-family:"Chakra Petch",sans-serif;font-size:40px;font-weight:600;line-height:1.1;letter-spacing:-.01em;max-width:480px}
.login-arte p{color:var(--rack-tx);font-size:15.5px}
.login-arte small{color:var(--rack-tx2)}
/* telemetria decorativa: uma linha de sinal atravessando a grade */
.login-arte .pulso{right:0;left:0;bottom:120px;top:auto;width:auto;height:90px;border:0;border-radius:0;box-shadow:none;opacity:.9;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'><polyline fill='none' stroke='%2325D366' stroke-width='1.6' stroke-linejoin='round' points='0,60 70,60 90,58 110,62 130,60 160,60 175,20 190,82 205,48 220,60 300,60 320,57 340,63 360,60 400,60 412,34 424,72 436,60 600,60'/></svg>") center/100% 100% no-repeat}
.login-form{background:var(--aco)}
.login-box{background:var(--placa);border:1px solid var(--fio);padding:32px 30px;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.login-box h1{font-size:28px}
.login-box .btn{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}

/* ---------------------------------------------------------- celular */
@media(max-width:1000px){
  .principal{padding:16px 14px}
  .pulso-sis{width:auto}
  .lado{width:100%}
  .topo{padding-bottom:12px}
  h1{font-size:23px}
}
@media(max-width:860px){.login-arte h2{font-size:26px}.login-arte .pulso{display:none}.login-box{padding:24px 20px}}
@media(prefers-reduced-motion:reduce){.pulso-sis i{animation:none}}
@media print{.pulso-sis{display:none}.kpi,.mon-kpi,.btn{clip-path:none}.kpi:first-child,.mon-kpi{background:#fff!important}
  .kpi::before,.kpi:first-child::after{display:none}.mon-kpi .v,.mon-kpi .l{color:var(--tinta)!important}}

/* ---------------------------------------------------------- ícones (templates/_icones.html) */
.ic{width:19px;height:19px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic .ac{stroke:var(--ic-ac,currentColor)}.ic .acf{fill:var(--ic-ac,currentColor);stroke:none}
.lado{--ic-ac:rgba(37,211,102,.62)}
.lado a.it .ic{opacity:.82;transition:opacity .12s}
.lado a.it:hover .ic,.lado a.it.ativo .ic{opacity:1}
.lado a.it:hover{--ic-ac:var(--sinal)}
.lado a.it.ativo{--ic-ac:var(--sinal)}
.lado a.it.ativo .ic{stroke:#fff;filter:drop-shadow(0 0 5px rgba(37,211,102,.35))}
.lado a.it svg:not(.ic){display:none}
/* assinatura do produto no rodapé do menu (o topo mostra a marca da empresa de TI) */
.assin{display:flex;align-items:center;gap:8px;margin-top:12px;color:var(--rack-tx2)!important;font:600 12px "Chakra Petch",sans-serif;text-decoration:none!important;letter-spacing:.02em}
.assin img{width:18px;height:18px}
.assin:hover{color:#fff!important}
/* logo do produto na tela de entrada */
.login-arte .marca img{width:46px;height:46px}
.login-arte .wm{font-size:30px;font-weight:600}
.login-arte .wm b{color:#fff;font-weight:700}