/* Frota Tinker - tema Gecko Brasil (verde da marca, cinza do logotipo).
   Comum a todas as paginas; o que e so de uma pagina fica no <style> dela. */
:root{
  --marca:#0d8140; --marca-2:#00a94f; --marca-esc:#075c2d; --marca-clara:#e7f4ec; --marca-cinza:#6a6b6d;
  --fundo:#f3f5f4; --sup:#fff; --sup-2:#f8faf9; --tinta:#17201b; --mudo:#65706a; --linha:#e1e6e3; --linha-2:#edf1ee;
  --acento:var(--marca);
  --ok:#0d7a3e; --okf:#e3f3ea; --mal:#b3261e; --malf:#fbe9e7; --pend:#8a5a00; --pendf:#fdf1d8; --jog:#0b6aa8; --jogf:#e2f1fb;
  --raio:12px; --raio-p:8px;
  --sombra:0 1px 2px rgba(16,40,26,.05),0 1px 3px rgba(16,40,26,.06);
  --sombra-alta:0 8px 24px rgba(16,40,26,.08),0 2px 6px rgba(16,40,26,.05);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tinta);
     font:14.5px/1.55 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:var(--marca)}

/* ---------- topo ---------- */
.topo{background:var(--sup);border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:20;
      box-shadow:0 1px 0 rgba(16,40,26,.02)}
.topo-in{max-width:1280px;margin:0 auto;padding:0 20px;height:62px;display:flex;align-items:center;gap:22px}
/* Marca: a palavra "gecko" e a IMAGEM do logotipo do sistema-mae (o K dele nao
   existe em fonte nenhuma); a segunda linha imita o "BACK SYSTEM": caixa alta
   fina, verde em degrade, da mesma largura da palavra. */
.marca,.marca-login{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.marca .ic{width:42px;height:42px;display:block}
.nome-marca{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:max-content}
.nome-marca img{height:23px;width:auto;display:block}
.nome-marca em{font:300 10.4px/1 "Montserrat","Inter",sans-serif;font-style:normal;text-transform:uppercase;
               letter-spacing:.2em;margin-right:-.2em;white-space:nowrap;text-align:justify;text-align-last:justify;
               background:linear-gradient(90deg,#075c2d,#1e9a45 35%,#6cbe45 55%,#1e9a45 75%,#075c2d);
               -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--marca)}
.marca-login .ic{width:64px;height:64px}
.marca-login .nome-marca img{height:36px}
.marca-login .nome-marca em{font-size:16.2px;letter-spacing:.2em}
.abas{display:flex;gap:2px;align-self:stretch}
.abas a{display:flex;align-items:center;padding:0 13px;font-size:14px;font-weight:500;color:var(--mudo);
        text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.abas a:hover{color:var(--tinta)}
.abas a.ativa{color:var(--marca);border-bottom-color:var(--marca);font-weight:600}
/* Menus das abas (Relatorios, Recursos): o que nao e do dia a dia sai da linha. */
.abas .grupo{position:relative;margin-bottom:-1px}
.abas .grupo > summary{list-style:none;display:flex;align-items:center;gap:5px;height:100%;box-sizing:border-box;padding:0 13px;font-size:14px;
        font-weight:500;color:var(--mudo);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;user-select:none}
.abas .grupo > summary::-webkit-details-marker{display:none}
.abas .grupo > summary:hover,.abas .grupo[open] > summary{color:var(--tinta)}
.abas .grupo > summary:focus-visible{outline:0;box-shadow:inset 0 0 0 2px rgba(13,129,64,.3)}
.abas .grupo.ativa > summary{color:var(--marca);border-bottom-color:var(--marca);font-weight:600}
.abas .grupo .seta{width:13px;height:13px;transition:transform .15s}
.abas .grupo[open] .seta{transform:rotate(180deg)}
.grupo-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:310px;max-width:calc(100vw - 24px);background:var(--sup);
        border:1px solid var(--linha);border-radius:var(--raio);box-shadow:var(--sombra-alta);padding:6px}
.abas .grupo-menu a{display:block;padding:9px 11px;border:0;border-radius:8px;margin:0;background:none;white-space:normal;color:var(--tinta)}
.abas .grupo-menu a:hover,.abas .grupo-menu a:focus-visible{background:var(--marca-clara);outline:0}
.abas .grupo-menu a.ativa{background:var(--marca-clara);color:var(--marca-esc)}
.grupo-menu b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.grupo-menu small{display:block;font-size:12.5px;font-weight:400;color:var(--mudo);line-height:1.35;margin-top:2px}
.quem{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--marca-2),var(--marca-esc));
    color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;letter-spacing:.02em}
.quem .nome{display:flex;flex-direction:column;line-height:1.2;font-size:13px;font-weight:600}
.quem .nome small{font-size:11.5px;font-weight:400;color:var(--mudo)}
.sair{font-size:13px;color:var(--mudo);text-decoration:none;padding:6px 10px;border:1px solid var(--linha);border-radius:999px}
.sair:hover{color:var(--mal);border-color:#f0c6c2;background:var(--malf)}

/* ---------- faixa do titulo ---------- */
.faixa{background:linear-gradient(120deg,var(--marca-esc) 0%,var(--marca) 55%,var(--marca-2) 100%);color:#fff;position:relative;overflow:hidden}
.faixa::after{content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;
              border:44px solid rgba(255,255,255,.06);pointer-events:none}
.faixa-in{max-width:1280px;margin:0 auto;padding:22px 20px 24px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px;position:relative;z-index:1}
.faixa h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em}
.faixa .volta{display:inline-block;font-size:12.5px;color:rgba(255,255,255,.8);text-decoration:none;margin-bottom:4px}
.faixa .volta:hover{color:#fff}
.faixa p{margin:4px 0 0;font-size:13px;color:rgba(255,255,255,.85)}
.faixa p b{color:#fff}
.faixa .dir{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pilula{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:999px;
        background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2);white-space:nowrap}
#rel::before{content:"";width:8px;height:8px;border-radius:50%;background:#7ef0a8;box-shadow:0 0 0 0 rgba(126,240,168,.7);animation:pulso 2s infinite}
#rel.mal{background:rgba(179,38,30,.35);border-color:rgba(255,190,185,.5)}
#rel.mal::before{background:#ffb4ab;animation:none}
#rel.parado::before{display:none}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(126,240,168,.6)}70%{box-shadow:0 0 0 7px rgba(126,240,168,0)}100%{box-shadow:0 0 0 0 rgba(126,240,168,0)}}
.lab{background:var(--pendf);color:#6b4a00;border-bottom:1px solid #f0dfb4;font-size:12.5px}
.lab div{max-width:1280px;margin:0 auto;padding:7px 20px}
.lab code{background:rgba(0,0,0,.05);padding:1px 5px;border-radius:4px}

/* ---------- conteudo ---------- */
main{max-width:1280px;margin:0 auto;padding:24px 20px 64px}
h2{font-size:16px;font-weight:700;margin:32px 0 12px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;letter-spacing:-.005em}
h2::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--marca);align-self:center;margin-right:-6px}
h2 .mais{font-size:13px;font-weight:500;color:var(--marca);text-decoration:none}
h2 .mais:hover{text-decoration:underline}
main > h2:first-child, #dados > h2:first-child{margin-top:0}
.caixa{background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio);overflow-x:auto;box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linha-2);vertical-align:top}
th{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--mudo);background:var(--sup-2);white-space:nowrap}
tbody tr:hover td{background:#f7fbf8}
tr:last-child td{border-bottom:0}
td.n,th.n{font-variant-numeric:tabular-nums;text-align:right}
b.maq{font-size:15.5px}
td a{color:var(--marca);font-weight:600;text-decoration:none} td a:hover{text-decoration:underline}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;line-height:1.6}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.on,.ok{background:var(--okf);color:var(--ok)} .off{background:var(--malf);color:var(--mal)}
.pend{background:var(--pendf);color:var(--pend)} .jog{background:var(--jogf);color:var(--jog)}
.sub{display:block;font-size:12px;color:var(--mudo);font-weight:400}
.msg{padding:12px 16px;border-radius:var(--raio-p);margin:0 0 18px;font-size:14px;border:1px solid transparent;display:flex;gap:8px}
.msg.ok{background:var(--okf);color:var(--ok);border-color:#c5e6d2} .msg.mal{background:var(--malf);color:var(--mal);border-color:#f3cbc7}
.nota{font-size:13px;color:var(--mudo);margin:10px 2px 0;max-width:90ch}
.vazio{padding:22px 16px;color:var(--mudo);font-size:14px;text-align:center}

/* ---------- formularios ---------- */
label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:500;color:var(--mudo)}
input,select{font:inherit;font-size:14px;padding:9px 11px;border:1px solid #d3dad6;border-radius:var(--raio-p);background:#fff;color:var(--tinta);
             transition:border-color .15s,box-shadow .15s}
input:hover,select:hover{border-color:#b9c4be}
input:focus,select:focus{outline:0;border-color:var(--marca);box-shadow:0 0 0 3px rgba(13,129,64,.15)}
input[type=checkbox]{accent-color:var(--marca);padding:0}
button{font:inherit;font-size:14px;font-weight:600;padding:9px 16px;border:0;border-radius:var(--raio-p);
       background:var(--marca);color:#fff;cursor:pointer;transition:background .15s,transform .05s;box-shadow:0 1px 2px rgba(7,92,45,.25)}
button:hover{background:var(--marca-esc)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(13,129,64,.3)}
button:disabled{opacity:.5;cursor:default}
form.filtro{background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:end;box-shadow:var(--sombra)}
form.aprovar{display:inline;background:none;border:0;padding:0;margin:0 0 0 8px;box-shadow:none}
form.aprovar button{padding:3px 11px;font-size:12px;border-radius:999px}

/* ---------- totais ---------- */
.totais{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin:14px 0 0}
.cifra{background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio);padding:14px 16px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.cifra::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--marca)}
.cifra .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cifra .l{font-size:12px;color:var(--mudo)}

/* Topo em tela estreita (celular, tablet, janela pequena): as abas quebram em linhas - todas a vista, sem a
   rolagem lateral escondida de antes - e o topo deixa de ser fixo para nao cobrir a pagina. */
@media (max-width:1200px){
  .topo{position:static}
  .topo-in{height:auto;flex-wrap:wrap;padding:10px 16px;gap:10px 14px}
  .abas{order:3;width:100%;margin:0;padding:0;flex-wrap:wrap;overflow:visible;align-self:auto;gap:6px}
  .abas a{padding:7px 13px;border:1px solid var(--linha);border-radius:999px;margin:0;background:var(--sup);font-size:13.5px}
  .abas a.ativa{background:var(--marca);border-color:var(--marca);color:#fff}
  .abas .grupo > summary{height:auto;padding:7px 11px 7px 13px;border:1px solid var(--linha);border-radius:999px;background:var(--sup);font-size:13.5px}
  .abas .grupo.ativa > summary{background:var(--marca);border-color:var(--marca);color:#fff}
  .abas .grupo-menu a,.abas .grupo-menu a.ativa{padding:9px 11px;border:0;border-radius:8px;font-size:14px}
  .abas .grupo-menu a.ativa{background:var(--marca-clara);color:var(--marca-esc)}
}

@media (max-width:860px){
  .quem .nome{display:none}
  .faixa-in,main,.lab div{padding-left:16px;padding-right:16px}
  .faixa h1{font-size:20px}
  .faixa .dir{margin-left:0}
}

/* ---------- tabelas: um dado por celula, 25 linhas por pagina ---------- */
td.nw{white-space:nowrap}
th.c{text-align:center}
.paginas{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px 0 0}
.paginas a,.paginas .off{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--linha);
  background:var(--sup);color:var(--tinta);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.paginas a:hover{border-color:var(--marca);color:var(--marca)}
.paginas .off{color:#b7c0bb;background:var(--sup-2)}
.paginas .pos{font-size:13.5px;color:var(--mudo);padding:0 6px;white-space:nowrap}
.paginas .pos b{color:var(--tinta)}

/* ---------- acoes em icone (lista de VLTs) ---------- */
.ic-acao{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;margin-right:4px;border-radius:8px;
  border:1px solid var(--linha);background:var(--sup);color:var(--marca);box-shadow:none;vertical-align:middle;cursor:pointer;text-decoration:none}
.ic-acao:hover{background:var(--marca);border-color:var(--marca);color:#fff}
.ic-acao:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(13,129,64,.3)}

/* ---------- lista de VLTs: botoes sempre a vista (29/09/2026) ---------- */
/* Com a coluna Alertas (so aparece quando algum VLT tem alerta) a tabela passava da largura da pagina e os botoes
   ficavam fora da vista, a direita. A coluna Acoes fica presa na borda direita da caixa (rolagem lateral so para o
   resto) e os alertas quebram em linhas em vez de alargar a tabela. */
#agora th:last-child,#agora td.acoes{position:sticky;right:0;z-index:1;box-shadow:inset 1px 0 0 var(--linha-2)}
#agora th:last-child{background:var(--sup-2)}
#agora td.acoes{background:var(--sup)}
#agora tbody tr:hover td.acoes{background:#f7fbf8}
#agora td.alertas{min-width:96px;max-width:150px}
#agora td.alertas .tag{white-space:normal;line-height:1.25;padding:3px 9px;margin:0 4px 4px 0}
#agora td.alertas .tag::before{flex:none}

/* ---------- botao "Ao vivo" do topo: as telas de monitor (29/09/2026) ---------- */
.aovivo{position:relative;margin-left:auto;flex:none}
.aovivo ~ .quem{margin-left:0}
.aovivo > summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 11px 7px 12px;border-radius:999px;border:1px solid #cfe5d8;
  background:var(--marca-clara);color:var(--marca-esc);font-size:13.5px;font-weight:600;white-space:nowrap;user-select:none;transition:background .15s,border-color .15s}
.aovivo > summary::-webkit-details-marker{display:none}
.aovivo > summary:hover{border-color:var(--marca)}
.aovivo > summary:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(13,129,64,.3)}
.aovivo[open] > summary{background:var(--marca);border-color:var(--marca);color:#fff}
.aovivo .ponto{width:8px;height:8px;border-radius:50%;background:#e5484d;animation:aovivo 1.8s infinite}
@keyframes aovivo{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 6px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.aovivo .seta{width:14px;height:14px;transition:transform .15s}
.aovivo[open] .seta{transform:rotate(180deg)}
.aovivo-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:320px;max-width:calc(100vw - 24px);background:var(--sup);border:1px solid var(--linha);
  border-radius:var(--raio);box-shadow:var(--sombra-alta);padding:6px}
.aovivo-menu a{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:8px;text-decoration:none;color:var(--tinta)}
.aovivo-menu a:hover,.aovivo-menu a:focus-visible{background:var(--marca-clara);outline:0}
.aovivo-menu .ic-tela{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:#0b110f;color:#26c46f}
.aovivo-menu .ic-tela svg{width:20px;height:20px}
.aovivo-menu .ic-tela.ic{background:linear-gradient(135deg,#6d28d9,#2a0d63)}
.aovivo-menu .ic-tela img{width:24px;height:auto}
.aovivo-menu b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.aovivo-menu small{display:block;font-size:12.5px;color:var(--mudo);line-height:1.35;margin-top:2px}
.aovivo-menu .dica{margin:4px 4px 2px;padding:8px 6px 4px;border-top:1px solid var(--linha-2);font-size:12px;color:var(--mudo);line-height:1.4}
.aovivo-menu .dica b{display:inline;font-size:inherit;color:var(--tinta)}
@media (max-width:860px){.aovivo > summary{padding:6px 10px;font-size:13px}}
/* Aba Problemas: contador no menu (vermelho com parada, amarelo so com atencao) */
.abas .cont{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:700;line-height:1.6}
/* Ponto de problema aberto ao lado do numero do VLT na lista (vermelho = parada, amarelo = atencao) */
.prob-ponto{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:7px;vertical-align:middle}
.prob-ponto.off{background:var(--mal)} .prob-ponto.pend{background:var(--pend)}