/* Hiperlink · Monitoramento — visual 2026-11 */
:root{
  --bg:#0F1A2C; --surface:#16233A; --surface-2:#1C2B46; --line:#26354F;
  --text:#E7EDF6; --muted:#8C9BB5; --fiber:#5CC8FF;
  --up:#2FD08A; --warn:#F2B441; --down:#FF5A5F; --idle:#5B6A86;
  --up-bg:rgba(47,208,138,.13); --warn-bg:rgba(242,180,65,.14); --down-bg:rgba(255,90,95,.14); --fiber-bg:rgba(92,200,255,.12);
  --radius-lg:14px; --radius:9px; --radius-sm:6px;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-cond:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  color-scheme:dark;
}
[data-tema="claro"]{
  --bg:#EEF2F8; --surface:#FFFFFF; --surface-2:#F4F7FB; --line:#DCE3EE;
  --text:#14213A; --muted:#5D6B85; --fiber:#0A84C6;
  --up:#0E9F62; --warn:#B7790B; --down:#D93A40; --idle:#8D9AB1;
  --up-bg:rgba(14,159,98,.1); --warn-bg:rgba(183,121,11,.12); --down-bg:rgba(217,58,64,.1); --fiber-bg:rgba(10,132,198,.1);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--fiber)}
code{font-family:var(--font-cond);background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:5px;font-size:.92em}
:focus-visible{outline:2px solid var(--fiber);outline-offset:2px}

/* ---------- casca ---------- */
.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.lateral{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;padding:22px 14px;
  background:var(--surface);border-right:1px solid var(--line)}
.marca{display:flex;align-items:center;gap:10px;padding:0 8px 20px;text-decoration:none;color:var(--text)}
.marca img{width:38px;height:38px;object-fit:contain}
.marca b{display:block;font-size:15px;line-height:1.15}
.marca span{display:block;font-size:12px;color:var(--muted)}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius);color:var(--muted);text-decoration:none;font-weight:500}
.nav a svg{width:18px;height:18px;flex:none}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a[aria-current="page"]{background:var(--fiber-bg);color:var(--text);box-shadow:inset 3px 0 0 var(--fiber)}
.nav-sep{font-size:12px;color:var(--muted);padding:16px 10px 4px}
.lateral-pe{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:6px}
.quem{padding:0 10px;font-size:13px;color:var(--muted)}
.quem b{color:var(--text);font-weight:600}
.btn-tema{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:var(--radius);background:none;color:var(--muted);font:inherit;font-weight:500;cursor:pointer;text-align:left}
.btn-tema:hover{background:var(--surface-2);color:var(--text)}
.btn-tema svg{width:18px;height:18px}

.conteudo{padding:28px 32px 80px;min-width:0;max-width:1680px}
.cabecalho{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.cabecalho h1{margin:0;font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.01em}
.cabecalho p{margin:4px 0 0;color:var(--muted);font-size:14px}

/* ---------- blocos ---------- */
.painel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin-bottom:20px}
.painel h2{margin:0 0 4px;font-size:17px;font-weight:600}
.painel .ajuda{margin:0 0 16px;color:var(--muted);font-size:13.5px;max-width:72ch}
.estreito{max-width:960px}

/* ---------- formulários ---------- */
.campo-linha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select,textarea{font:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;min-height:42px}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fiber);box-shadow:0 0 0 3px var(--fiber-bg)}
textarea{width:100%;resize:vertical}
input:disabled,textarea:disabled{opacity:.6}
label.rotulo{display:block;font-size:13.5px;color:var(--muted);margin:0 0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius);
  background:var(--fiber);color:#06223A;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
[data-tema="claro"] .btn{color:#fff}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.6;cursor:wait}
.btn-sec{background:var(--surface-2);color:var(--text);border-color:var(--line)}
[data-tema="claro"] .btn-sec{color:var(--text)}
.btn-perigo{background:transparent;color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,transparent)}
[data-tema="claro"] .btn-perigo{color:var(--down)}
.btn-perigo:hover{background:var(--down-bg);filter:none}
.btn-peq{min-height:32px;padding:0 11px;font-size:13px}
.aviso{padding:11px 14px;border-radius:var(--radius);font-size:14px;margin-bottom:16px;border:1px solid}
.aviso-erro{background:var(--down-bg);color:var(--down);border-color:color-mix(in srgb,var(--down) 35%,transparent)}

/* ---------- tabelas ---------- */
.tabela-wrap{overflow-x:auto;margin:0 -4px}
table{width:100%;border-collapse:collapse}
th,td{padding:11px 10px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
th{color:var(--muted);font-weight:500;font-size:13px}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.acoes{text-align:right;white-space:nowrap}
td.acoes form{display:inline}
.vazio{color:var(--muted);padding:22px 10px!important;text-align:center}

/* ---------- selos ---------- */
.selo{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.selo::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.selo-up,.selo-bom{background:var(--up-bg);color:var(--up)}
.selo-warn,.selo-atencao{background:var(--warn-bg);color:var(--warn)}
.selo-down,.selo-critico{background:var(--down-bg);color:var(--down)}
.selo-idle,.selo-offline{background:var(--surface-2);color:var(--muted)}
.selo-info{background:var(--fiber-bg);color:var(--fiber)}
.selo-sem::before{display:none}

/* ---------- modal ---------- */
dialog{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);color:var(--text);padding:22px;width:min(380px,92vw)}
dialog::backdrop{background:rgba(5,10,20,.6);backdrop-filter:blur(2px)}
dialog h3{margin:0 0 14px;font-size:17px}
dialog form>input,dialog form>select{width:100%;margin-bottom:10px}
.modal-botoes{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

/* ================= DASHBOARD ================= */
.status-geral{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:var(--radius-lg);margin-bottom:18px;border:1px solid var(--line);background:var(--surface)}
.status-geral .farol{width:14px;height:14px;border-radius:50%;flex:none;background:var(--idle)}
.status-geral.ok .farol{background:var(--up);box-shadow:0 0 0 6px var(--up-bg)}
.status-geral.falha{border-color:color-mix(in srgb,var(--down) 50%,transparent);background:linear-gradient(90deg,var(--down-bg),var(--surface) 70%)}
.status-geral.falha .farol{background:var(--down);box-shadow:0 0 0 6px var(--down-bg);animation:pulsa 1.6s ease-in-out infinite}
.status-frase{font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.status-detalhe{color:var(--muted);font-size:14px;margin-top:2px}
.status-detalhe b{color:var(--down);font-weight:600}
.status-numeros{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.status-numeros div{text-align:right}
.status-numeros strong{display:block;font-size:20px;font-weight:600;line-height:1.2}
.status-numeros span{font-size:12.5px;color:var(--muted)}
@keyframes pulsa{50%{box-shadow:0 0 0 11px transparent}}

.barra-filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.barra-filtros input[type=search]{flex:1;min-width:220px;max-width:360px}
.chave{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--muted);font-size:14px;user-select:none}
.chave input{appearance:none;width:36px;height:20px;min-height:0;padding:0;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .15s}
.chave input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.chave input:checked{background:var(--fiber-bg);border-color:var(--fiber)}
.chave input:checked::after{transform:translateX(16px);background:var(--fiber)}
.atualizado{margin-left:auto;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
.atualizado i{width:7px;height:7px;border-radius:50%;background:var(--up)}
.atualizado.velho i{background:var(--warn)}

.olts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px;align-items:start}
.olt{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.olt.tem-falha{border-color:color-mix(in srgb,var(--down) 55%,transparent)}
.olt.offline{border-color:var(--down)}
.olt-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:16px 16px 12px}
.olt-nome{font-size:16.5px;font-weight:600;line-height:1.25}
.olt-ip{font-family:var(--font-cond);font-size:13px;color:var(--muted)}
.olt-resumo{display:flex;gap:16px;padding:0 16px 12px;font-size:13.5px;color:var(--muted)}
.olt-resumo b{color:var(--text);font-weight:600}
.olt-resumo .n-down b{color:var(--down)}
.olt-resumo .n-on b{color:var(--up)}

/* faixa de fibra: um segmento por PON, largura = clientes */
.fibra{display:flex;gap:2px;height:8px;margin:0 16px 14px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.fibra span{min-width:4px;background:var(--up)}
.fibra span.d{background:var(--down)}
.offline .fibra span{background:var(--idle)}

.pons{border-top:1px solid var(--line)}
.pon{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:8px 16px;font-family:var(--font-cond);font-size:14px;border-bottom:1px solid var(--line)}
.pon:last-child{border-bottom:0}
.pon .ponto{width:9px;height:9px;border-radius:50%;background:var(--up)}
.pon.d{background:var(--down-bg)}
.pon.d .ponto{background:var(--down);box-shadow:0 0 0 4px var(--down-bg)}
.pon-nome{font-weight:600;font-family:var(--font);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pon-sub{display:block;color:var(--muted);font-size:12.5px;font-weight:400}
.pon-dir{text-align:right;line-height:1.3}
.pon-cli{font-size:14px;white-space:nowrap}
.pon-cli .on{color:var(--up);font-weight:600}
.pon-cli .off{color:var(--muted)}
.pon-up{display:block;font-size:12px;color:var(--muted)}
.pon-up.baixo{color:var(--warn)}
.ocupacao{height:3px;border-radius:2px;background:var(--surface-2);margin-top:4px;overflow:hidden}
.ocupacao i{display:block;height:100%;background:var(--up)}
.olt-pe{padding:9px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:var(--surface-2)}
.sem-resultado{grid-column:1/-1;color:var(--muted);padding:40px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius-lg)}
.esqueleto{height:340px;border-radius:var(--radius-lg);background:linear-gradient(100deg,var(--surface) 40%,var(--surface-2) 50%,var(--surface) 60%) 0 0/200% 100%;animation:brilho 1.4s linear infinite;border:1px solid var(--line)}
@keyframes brilho{to{background-position:-200% 0}}

/* ping flutuante */
.fab-add{position:fixed;bottom:24px;right:24px;height:48px;padding:0 18px;border-radius:999px;border:0;background:var(--fiber);color:#06223A;
  font:inherit;font-weight:600;display:flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);z-index:1000}
[data-tema="claro"] .fab-add{color:#fff}
.fab-add svg{width:18px;height:18px}
.ping-widget{position:fixed;width:200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:999;font-size:13px}
.ping-widget-header{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);cursor:move;user-select:none}
.ping-widget-titulo{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-cond);font-weight:600}
.ping-widget-fechar{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;padding:2px 4px;border-radius:4px}
.ping-widget-fechar:hover{color:var(--text);background:var(--surface-2)}
.ping-widget-body{padding:9px 10px}
.ping-ok{color:var(--up);font-weight:600}
.ping-fail{color:var(--down);font-weight:600}

/* ================= SINAL ================= */
.resultado{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;margin-top:18px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.resultado:empty{display:none}
.resultado .campo{background:var(--surface);padding:12px 14px}
.campo .k{color:var(--muted);font-size:12.5px}
.campo .v{font-size:15px;margin-top:2px;word-break:break-word}
.campo.destaque{grid-column:1/-1;display:flex;align-items:center;gap:14px}
.rx-grande{font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.rx-grande.bom{color:var(--up)} .rx-grande.atencao{color:var(--warn)} .rx-grande.critico{color:var(--down)}
.regua{position:relative;flex:1;max-width:360px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--down) 0 15%,var(--warn) 15% 25%,var(--up) 25%)}
.regua i{position:absolute;top:-5px;width:4px;height:18px;border-radius:2px;background:var(--text);transform:translateX(-2px)}
.resumo{color:var(--muted);font-size:13.5px}
td.mono,.mono{font-family:var(--font-cond)}
td{white-space:nowrap}

/* ================= WHATSAPP ================= */
.conexao{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.qrcode-box img{width:240px;height:240px;border-radius:var(--radius);background:#fff;padding:10px}
.passos{margin:10px 0 0;padding-left:20px;color:var(--muted);font-size:14px;max-width:46ch}
.passos li{margin-bottom:4px}
.mensagens-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px 20px}

/* ================= LOGIN ================= */
.login-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:
  radial-gradient(900px 500px at 15% 110%,rgba(92,200,255,.16),transparent 60%),var(--bg)}
.login-box{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:34px 30px}
.login-box img{width:64px;height:64px;object-fit:contain;display:block;margin-bottom:18px}
.login-box h1{margin:0;font-size:22px;font-weight:600}
.login-box p{margin:4px 0 22px;color:var(--muted);font-size:14px}
.login-box input{width:100%;margin-bottom:12px}
.login-box .btn{width:100%;margin-top:6px}

/* ================= RESPONSIVO ================= */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .lateral{position:sticky;z-index:50;height:auto;flex-direction:row;align-items:center;gap:2px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto}
  .marca{padding:0 8px 0 2px}
  .marca div,.nav-sep,.quem{display:none}
  .nav{display:flex;gap:2px}
  .nav a{padding:8px 10px;white-space:nowrap}
  .nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--fiber)}
  .lateral-pe{margin:0 0 0 auto;border:0;padding:0;flex-direction:row}
  .btn-tema span,.nav a.sair span{display:none}
  .conteudo{padding:18px 14px 90px}
  .status-geral{flex-wrap:wrap}
  .status-numeros{margin-left:0;width:100%;justify-content:space-between}
  .status-numeros div{text-align:left}
  .atualizado{margin-left:0;width:100%}
}
@media (max-width:560px){ .nav a span{display:none} .status-frase{font-size:18px} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* OLT sem resposta: PONs ficam em cinza (estado desconhecido) */
.olt.offline .pon{opacity:.55}
.olt.offline .pon .ponto,.olt.offline .ocupacao i{background:var(--idle);box-shadow:none}
.olt.offline .pon-cli .on{color:var(--muted)}
.login-box img{width:84px;height:84px}