/* Naja Backups — visual do mockup v5 aprovado (22/10/2026). Tema padrão: escuro. */
:root, body[data-tema="clean"], body[data-tema="naja"] {
  --accent-100:250 210 210; --accent-500:231 55 55; --accent-600:224 20 20; --accent-700:184 17 17;
  --texto:#111827; --texto-2:#374151; --suave:#6b7280; --claro:#9ca3af; --linha:#e5e7eb; --linha-2:#f3f4f6;
  --fundo:#f6f7f9; --branco:#fff; --cab:#fafbfc; --hover:#fafbfc;
  --ok:#047857; --atencao:#b45309; --atraso:#be123c;
  --nav-bg:#fff; --nav-grad:none; --nav-borda:#eceef1; --nav-texto:#6b7280; --nav-forte:#111827; --nav-sub:rgb(var(--accent-600));
  --dagua:url('../img/naja-cobra-cinza.png'); --dagua-op:.05;
  --heat-o:#cfe9dd; --heat-a:#f6c56b; --heat-f:#e11d48; --heat-vazio:#f3f4f6;
  --barra:#d1d5db; --barra-hoje:#6b7280; --barra-marca:#f6c56b; --grade:#f1f2f4;
  --campo-borda:#d1d5db; --campo-bg:#fff; --btn-borda:#d6dae0;
}
body[data-tema="naja"] {
  --nav-bg:rgb(224 20 20); --nav-grad:linear-gradient(100deg,#FF3B3B 0%,#E01414 46%,#B71C1C 100%); --nav-borda:#b81111;
  --nav-texto:rgba(255,255,255,.85); --nav-forte:#fff; --nav-sub:#fff; --dagua:url('../img/naja-cobra-branca.png'); --dagua-op:.09;
}
/* escuro: as cores do tema escuro desenhado para o Naja Conecta (base #17181C, cartão #1E2025) */
body[data-tema="escuro"] {
  color-scheme:dark;
  --texto:#E7E7EA; --texto-2:#C3C5CC; --suave:#9497A0; --claro:#71747E; --linha:rgba(255,255,255,.09); --linha-2:rgba(255,255,255,.05);
  --fundo:#17181C; --branco:#1E2025; --cab:#26282E; --hover:rgba(255,255,255,.04);
  --ok:#4ADE80; --atencao:#FBBF24; --atraso:#F87171;
  --nav-bg:#1E2025; --nav-borda:rgba(255,255,255,.07); --nav-texto:#A9ACB5; --nav-forte:#E7E7EA; --nav-sub:#FF4D4D;
  --dagua:url('../img/naja-cobra-branca.png'); --dagua-op:.045;
  --heat-o:#24493a; --heat-a:#b7832a; --heat-f:#F87171; --heat-vazio:rgba(255,255,255,.06);
  --barra:#3a3d45; --barra-hoje:#A9ACB5; --barra-marca:#b7832a; --grade:rgba(255,255,255,.06);
  --campo-borda:rgba(255,255,255,.14); --campo-bg:#17181C; --btn-borda:rgba(255,255,255,.14);
}

* { box-sizing:border-box; }
body { margin:0; background:var(--fundo); color:var(--texto); font:14px/1.5 Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif; }
button, input, select, textarea { font:inherit; }
button { cursor:pointer; }
a { color:var(--texto-2); text-decoration:underline; text-decoration-color:var(--linha); text-underline-offset:3px; }
a:hover { color:rgb(var(--accent-700)); text-decoration-color:currentColor; }
body[data-tema="escuro"] a:hover { color:#FF7A7A; }
.ic { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; vertical-align:-3px; }
.mono { font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:12.5px; }
.fraco { color:var(--suave); font-size:13px; }
.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.oculto { display:none !important; }

/* navbar (igual ao Naja Conecta) */
.topo { position:relative; display:flex; align-items:stretch; gap:22px; height:54px; padding:0 24px; background-color:var(--nav-bg); background-image:var(--nav-grad); border-bottom:1px solid var(--nav-borda); overflow:hidden; }
.topo::after { content:""; position:absolute; right:-14px; top:-18px; width:120px; height:120px; background:var(--dagua) no-repeat center/contain; opacity:var(--dagua-op); pointer-events:none; }
.lockup { display:flex; align-items:center; gap:8px; color:var(--nav-forte); text-decoration:none !important; }
.lockup img { height:26px; width:auto; }
.lockup .cobra-clara { display:none; }
body[data-tema="naja"] .lockup .cobra-clara { display:block; }
body[data-tema="naja"] .lockup .cobra-escura { display:none; }
.lockup span { display:flex; flex-direction:column; line-height:1; }
.lockup b { font-size:14.5px; font-weight:800; letter-spacing:-.01em; }
.lockup small { font-size:7.5px; font-weight:700; letter-spacing:.3em; margin-top:2px; }
.nav { display:flex; gap:2px; flex:1; }
.nav a { display:flex; align-items:center; padding:0 12px; color:var(--nav-texto); border-bottom:2px solid transparent; text-decoration:none; font-weight:500; }
.nav a:hover { color:var(--nav-forte); }
.nav a.ativo { color:var(--nav-forte); border-bottom-color:var(--nav-sub); }
.quem { display:flex; align-items:center; gap:12px; color:var(--nav-texto); font-size:13px; position:relative; z-index:1; }
.quem a, .quem button { color:var(--nav-texto); text-decoration:none; background:none; border:0; padding:0; font-size:13px; }
.quem strong { color:var(--nav-forte); font-weight:600; }

.faixa-pag { background:var(--branco); border-bottom:1px solid var(--linha); }
.faixa-pag .dentro { padding:16px 24px 14px; }
.migalha { font-size:12.5px; color:var(--suave); margin-bottom:3px; }
.migalha a { color:var(--suave); }
h1 { font-size:18px; font-weight:650; margin:0; letter-spacing:-.01em; }
h2 { font-size:14.5px; font-weight:650; margin:0; }
.conteudo { padding:18px 24px 28px; max-width:1240px; }
.resumo-linha { display:flex; flex-wrap:wrap; gap:4px 18px; margin-top:6px; color:var(--suave); font-size:13px; }
.resumo-linha b { color:var(--texto); font-weight:600; font-variant-numeric:tabular-nums; }
.secao { display:flex; align-items:center; gap:10px; margin:28px 0 10px; font-size:13px; font-weight:600; color:var(--suave); }
.secao::after { content:""; flex:1; height:1px; background:var(--linha); }

.card { background:var(--branco); border:1px solid var(--linha); border-radius:8px; }
.card-cab { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--linha-2); }
.card-corpo { padding:14px 16px; }
.cont { display:inline-block; min-width:20px; text-align:center; font-size:12px; font-weight:600; background:var(--linha-2); color:var(--texto-2); border-radius:4px; padding:1px 5px; margin-left:4px; }
.st { display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; color:var(--suave); }
.st::before { content:""; width:7px; height:7px; border-radius:50%; background:#cbd5e1; flex:none; }
.st.ok::before { background:#10b981; }
.st.atencao { color:var(--atencao); } .st.atencao::before { background:#f59e0b; }
.st.atraso { color:var(--atraso); font-weight:500; } .st.atraso::before { background:#e11d48; }
.tag { display:inline-block; font-size:12px; line-height:1; padding:3px 6px; border-radius:4px; background:var(--linha-2); color:var(--texto-2); white-space:nowrap; }
.btn { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--btn-borda); background:var(--branco); color:var(--texto); border-radius:6px; padding:6px 11px; font-weight:500; white-space:nowrap; text-decoration:none; }
.btn:hover { border-color:var(--claro); background:var(--cab); color:var(--texto); }
.btn.pri { background:rgb(var(--accent-600)); border-color:rgb(var(--accent-600)); color:#fff; }
.btn.pri:hover { background:rgb(var(--accent-700)); }
.btn.perigo:hover { color:var(--atraso); border-color:var(--atraso); }
.btn.peq { padding:3px 8px; font-size:12.5px; }
.btn.icone { padding:4px 6px; }
.btn[disabled] { opacity:.6; cursor:wait; }
.acoes { display:flex; gap:6px; justify-content:flex-end; flex-wrap:nowrap; align-items:center; }
form.inline { display:inline; }

.problemas { list-style:none; margin:0; padding:0; }
.problemas li { display:grid; grid-template-columns:130px 1fr auto auto; gap:12px; align-items:center; padding:10px 16px; border-top:1px solid var(--linha-2); }
.problemas li:first-child { border-top:0; }
.vazio { padding:14px 16px; color:var(--suave); }

table.t { width:100%; border-collapse:collapse; }
table.t th { text-align:left; font-size:12.5px; font-weight:500; color:var(--suave); padding:9px 16px; border-bottom:1px solid var(--linha); background:var(--cab); }
table.t th.num { text-align:right; }
table.t td { padding:9px 16px; border-bottom:1px solid var(--linha-2); vertical-align:middle; }
table.t tr:last-child td { border-bottom:0; }
table.t tr.clicavel { cursor:pointer; }
table.t tr.clicavel:hover td { background:var(--hover); }
.var-neg { color:var(--atencao); font-weight:500; }
td.arq { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.desc-linha { color:var(--suave); font-size:12.5px; margin-top:2px; }

/* servidores recolhidos/expansíveis */
tr.srv-lin { cursor:pointer; }
tr.srv-lin:hover td { background:var(--hover); }
.chev { display:inline-block; width:16px; color:var(--claro); font-size:16px; line-height:1; transition:transform .15s; }
tbody.srv.aberto .chev { transform:rotate(90deg); color:var(--texto-2); }
tr.srv-det { display:none; }
tbody.srv.aberto tr.srv-det { display:table-row; }
tbody.srv.aberto tr.srv-lin td { border-bottom-color:transparent; }
tr.srv-det > td { padding:0 16px 14px 32px !important; }
.det { border:1px solid var(--linha); border-radius:6px; overflow:hidden; }
.det-cab { display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; padding:8px 12px; border-bottom:1px solid var(--linha-2); }
table.t.sub th { background:transparent; padding:7px 12px; }
table.t.sub td { padding:7px 12px; }

/* renomear no lugar */
.lapis { border:0; background:none; color:var(--claro); padding:1px 4px; margin-left:2px; cursor:pointer; opacity:0; border-radius:4px; vertical-align:1px; }
.lapis:hover { color:var(--texto); background:var(--linha-2); }
tr:hover > td > .lapis, h1:hover .lapis, .lapis:focus { opacity:1; }
.inp-nome { font:inherit; font-weight:600; padding:1px 6px; border:1px solid rgb(var(--accent-500)); border-radius:4px; width:200px; background:var(--campo-bg); color:var(--texto); box-shadow:0 0 0 3px rgb(var(--accent-100)); outline:none; }
body[data-tema="escuro"] .inp-nome { border-color:#FF4D4D; box-shadow:0 0 0 3px rgba(255,77,77,.22); }

.cab-item { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cab-item .meta { display:flex; flex-wrap:wrap; gap:4px 16px; font-size:12.5px; color:var(--suave); margin-top:5px; }
.cab-item .meta span { display:inline-flex; align-items:center; gap:5px; }
.notas-txt { white-space:pre-line; margin:10px 0 0; color:var(--texto-2); font-size:13.5px; max-width:780px; }

/* histórico */
.duas { display:grid; grid-template-columns:1.5fr 1fr; gap:12px; margin-bottom:12px; }
.heat { width:100%; border-collapse:separate; border-spacing:3px; }
.heat th { font-size:11px; color:var(--claro); font-weight:500; text-align:center; width:6.2%; }
.heat th:first-child { width:auto; }
.heat th.hoje { color:var(--texto); font-weight:700; }
.heat td.nome { font-size:12.5px; color:var(--texto-2); padding-right:8px; white-space:nowrap; }
.heat td.q { padding:0; }
.heat td.q i { display:block; height:16px; border-radius:2px; background:var(--heat-vazio); }
.heat td.q i.o { background:var(--heat-o); } .heat td.q i.a { background:var(--heat-a); } .heat td.q i.f { background:var(--heat-f); }
.heat td.q i.p { background:transparent; box-shadow:inset 0 0 0 1px var(--linha); }
.heat td.q.hoje i { box-shadow:0 0 0 1px var(--branco), 0 0 0 2px var(--suave); }
.legenda { display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--suave); margin-top:8px; }
.legenda span { display:inline-flex; align-items:center; gap:5px; }
.legenda i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.legenda i.o { background:var(--heat-o); } .legenda i.a { background:var(--heat-a); } .legenda i.f { background:var(--heat-f); } .legenda i.v { background:var(--heat-vazio); }
.espaco { list-style:none; margin:0; padding:0; }
.espaco li { display:grid; grid-template-columns:130px 1fr 80px; gap:10px; align-items:center; padding:5px 0; font-size:13px; }
.espaco .trilho { height:6px; background:var(--linha-2); border-radius:3px; overflow:hidden; }
.espaco .trilho i { display:block; height:100%; background:var(--barra-hoje); border-radius:3px; opacity:.6; }
.avisos { list-style:none; margin:0; padding:0; }
.avisos li { display:grid; grid-template-columns:110px 130px 1fr auto; gap:12px; align-items:center; padding:9px 16px; border-top:1px solid var(--linha-2); font-size:13px; }
.avisos li:first-child { border-top:0; }
.g-b { fill:var(--barra); } .g-h { fill:var(--barra-hoje); } .g-m { fill:var(--barra-marca); } .g-l { stroke:var(--grade); } .g-t { fill:var(--claro); }

/* acesso */
.tela-login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px 16px; position:relative; overflow:hidden; }
.tela-login::before { content:""; position:absolute; right:-80px; bottom:-90px; width:400px; height:400px; background:url('../img/naja-cobra-cinza.png') no-repeat center/contain; opacity:.05; }
body[data-tema="escuro"] .tela-login::before { background-image:url('../img/naja-cobra-branca.png'); opacity:.04; }
.caixa-login { position:relative; width:100%; max-width:380px; background:var(--branco); border:1px solid var(--linha); border-radius:10px; padding:26px; }
.caixa-login .lockup { color:var(--texto); margin-bottom:20px; }
.caixa-login .lockup img { height:36px; }
.caixa-login .lockup b { font-size:19px; }
.caixa-login .lockup small { font-size:10px; }
.caixa-login h2 { font-size:15.5px; margin-bottom:4px; }
.caixa-login .sub { color:var(--suave); font-size:13px; margin:0 0 14px; }
.byline { text-align:center; font-size:12px; color:var(--claro); margin-top:18px; }
.campo { margin:12px 0; }
.campo label { display:block; font-size:12.5px; font-weight:500; color:var(--texto-2); margin-bottom:5px; }
.campo input, .campo textarea, .campo select { width:100%; padding:7px 10px; border:1px solid var(--campo-borda); border-radius:6px; background:var(--campo-bg); color:var(--texto); }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline:none; border-color:rgb(var(--accent-500)); box-shadow:0 0 0 3px rgb(var(--accent-100)); }
body[data-tema="escuro"] .campo input:focus, body[data-tema="escuro"] .campo textarea:focus, body[data-tema="escuro"] .campo select:focus { border-color:#FF4D4D; box-shadow:0 0 0 3px rgba(255,77,77,.22); }
.campo input[readonly] { background:var(--cab); color:var(--suave); }
.campo textarea { min-height:96px; resize:vertical; }
.campo small { display:block; color:var(--suave); font-size:12px; margin-top:4px; }
.erro-campo { color:var(--atraso); font-size:12.5px; margin-top:4px; }
.codigo input { letter-spacing:.45em; font-size:21px; text-align:center; font-family:ui-monospace,Consolas,monospace; padding:9px; }
.passos { margin:10px 0; padding-left:20px; font-size:13.5px; }
.passos li { margin:5px 0; }
.qr { width:196px; height:196px; margin:12px auto; background:#fff; border-radius:6px; padding:8px; }
.qr svg { width:100%; height:100%; display:block; }
.prazo { display:flex; align-items:center; gap:8px; color:var(--atencao); font-size:13px; margin:6px 0 2px; }
.senha-gerada { font-family:ui-monospace,Consolas,monospace; font-size:19px; background:var(--cab); border:1px dashed var(--campo-borda); border-radius:6px; padding:12px; text-align:center; letter-spacing:.08em; user-select:all; }
.faixa-nota { display:flex; gap:10px; align-items:center; padding:9px 14px; border:1px solid var(--linha); background:var(--branco); border-left:3px solid #f59e0b; border-radius:6px; margin-bottom:12px; font-size:13px; }
.faixa-nota p { margin:0; flex:1; }
.faixa-nota.erro { border-left-color:#e11d48; }

/* configurações (padrão do Naja Conecta) */
.conf { display:grid; grid-template-columns:190px 1fr; gap:18px; align-items:start; }
.submenu { padding:6px 0; }
.submenu a { display:block; padding:8px 14px; color:var(--texto-2); border-left:3px solid transparent; text-decoration:none; font-weight:500; }
.submenu a small { display:block; font-weight:400; color:var(--suave); font-size:12px; }
.submenu a.ativo { border-left-color:rgb(var(--accent-600)); color:var(--texto); background:var(--hover); }
.grupo-conf { display:none; } .grupo-conf.ativo { display:block; }
.linha-conf { display:flex; justify-content:space-between; gap:20px; padding:12px 16px; border-top:1px solid var(--linha-2); }
.linha-conf:first-of-type { border-top:0; }
.linha-conf .tx { flex:1; }
.linha-conf .tx b { font-weight:600; display:block; }
.linha-conf .tx span { color:var(--suave); font-size:12.5px; }
.linha-conf .ctl { width:320px; flex:none; }
.linha-conf .ctl.campo { margin:0; }
.card-pe { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid var(--linha); background:var(--cab); border-radius:0 0 8px 8px; font-size:12.5px; color:var(--suave); }
.switch { position:relative; width:36px; height:20px; flex:none; display:inline-block; }
.switch input { opacity:0; width:0; height:0; }
.switch span { position:absolute; inset:0; background:#d1d5db; border-radius:10px; transition:.15s; cursor:pointer; }
body[data-tema="escuro"] .switch span { background:#3a3d45; }
.switch span::before { content:""; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s; }
.switch input:checked + span { background:#10b981; }
.switch input:checked + span::before { transform:translateX(16px); }
.temas { display:flex; gap:14px; flex-wrap:wrap; }
.temas label { display:flex; align-items:center; gap:6px; cursor:pointer; }

/* modais e mensagens */
.fundo-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:80; padding:16px; }
.fundo-modal.aberto { display:flex; }
.modal { background:var(--branco); border:1px solid var(--linha); border-radius:10px; width:100%; max-width:460px; max-height:90vh; overflow:auto; }
.modal .m-cab { padding:16px 20px 4px; }
.modal .m-corpo { padding:4px 20px 8px; }
.modal .m-pe { display:flex; justify-content:flex-end; gap:8px; padding:12px 20px 16px; }
.modal h3 { margin:0; font-size:15.5px; font-weight:650; }
.opcao { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--linha); border-radius:6px; padding:10px 12px; margin:8px 0; cursor:pointer; }
.opcao:has(input:checked) { border-color:var(--claro); background:var(--cab); }
.opcao p { margin:2px 0 0; font-size:12.5px; color:var(--suave); }
.barra { height:5px; background:var(--linha-2); border-radius:3px; overflow:hidden; margin:12px 0 6px; }
.barra i { display:block; height:100%; width:30%; background:var(--suave); animation:vaivem 1.2s ease-in-out infinite alternate; }
@keyframes vaivem { from { margin-left:0; } to { margin-left:70%; } }
.torrada { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:none; align-items:center; gap:8px; background:#111827; color:#fff; padding:9px 14px; border-radius:6px; font-size:13px; z-index:90; max-width:90vw; }
body[data-tema="escuro"] .torrada { background:#E7E7EA; color:#111827; }
.torrada.erro { background:#9f1239; color:#fff; }

/* celular */
@media (max-width: 760px) {
  .topo { height:auto; flex-wrap:wrap; padding:10px 14px 0; gap:6px; }
  .nav { order:3; flex-basis:100%; overflow-x:auto; }
  .nav a { padding:10px 10px; }
  .quem { margin-left:auto; }
  .quem .some-cel { display:none; }
  .faixa-pag .dentro, .conteudo { padding-left:14px; padding-right:14px; }
  .problemas li { grid-template-columns:1fr auto; }
  table.t, table.t tbody, table.t tr, table.t td { display:block; width:100%; }
  table.t thead { display:none; }
  table.t tr { border-bottom:1px solid var(--linha-2); padding:6px 0; }
  table.t td { border:0; padding:2px 14px; text-align:left; }
  table.t td[data-r]::before { content:attr(data-r) ": "; color:var(--suave); font-size:12px; }
  tbody.srv.aberto tr.srv-det { display:block; }
  tr.srv-det > td { padding:0 10px 10px !important; }
  td.arq { max-width:none; }
  .acoes { justify-content:flex-start; flex-wrap:wrap; }
  .lapis { opacity:1; }
  .duas, .conf { grid-template-columns:1fr; }
  .submenu { display:flex; overflow-x:auto; padding:0; }
  .submenu a { border-left:0; border-bottom:2px solid transparent; white-space:nowrap; }
  .submenu a.ativo { border-bottom-color:rgb(var(--accent-600)); }
  .linha-conf { flex-direction:column; gap:8px; }
  .linha-conf .ctl { width:100%; }
  .avisos li { grid-template-columns:1fr; gap:2px; }
  .heat th:nth-child(-n+8):not(:first-child), .heat td.q:nth-child(-n+8):not(:first-child) { display:none; }
}