/* ============================================================================
InnetOps Guard — CAMADA DE REDESIGN (tipografia + controles coerentes)
----------------------------------------------------------------------------
COMO USAR (escolha 1):
A) Cole TODO este arquivo no FINAL de styles.css, OU
B) Salve como innetops-redesign.css e importe por ÚLTIMO no index.html:
(depois de styles.css — a ordem importa, esta camada precisa vir por cima)
PRÉ-REQUISITO: adicionar o das fontes no do index.html
(ver README.md, seção "Passo 1"). Sem ele, cai nas fontes de fallback.
FILOSOFIA: não renomeia nenhuma classe; só refina. Bate com o bloco
":root ... Light Minimal-Futurista" que já existe no fim do seu styles.css.
============================================================================ */
/* ============================================================================
1) TOKENS — FONTES + PALETA
============================================================================ */
:root {
/* --- Famílias (os 3 papéis do sistema) --- */
--font-ui: 'Manrope', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--font-display: 'Space Grotesk', var(--font-ui);
--font-mono: 'JetBrains Mono', ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
/* --- PALETA ATIVA: "VIOLETA" (roxo → azul; verde = sinais OK) ---
Para trocar de paleta, comente este bloco e descomente um dos alternativos
no final deste arquivo (seção 7). Estes 3 tokens recoloram o app inteiro. */
--accent-1: #7c5cff; /* roxo — primário (botões, item ativo, foco) */
--accent-2: #4f7bf7; /* azul — segundo tom do gradiente, links, ASN */
--accent-3: #22c58a; /* verde — reservado a estados "OK/válido" */
--accent-grad: linear-gradient(135deg, var(--accent-1) 0%, var(--accent-2) 100%);
--accent-grad-soft: linear-gradient(135deg, rgba(124,92,255,.14), rgba(79,123,247,.10));
/* aliases legados que o app já lê — mantidos coerentes com a paleta */
--brand: var(--accent-1);
--brand-strong: #6a49f0;
--accent: var(--accent-3);
--blue: var(--accent-2);
/* foco + halo do acento */
--focus: var(--accent-1);
--focus-ring: 0 0 0 3px rgba(124, 92, 255, .32);
--shadow-accent: 0 8px 22px rgba(124, 92, 255, .28);
/* glow de fundo no topo, recolorido para o acento */
--bg-glow:
radial-gradient(900px 520px at 88% -8%, rgba(124, 92, 255, .06), transparent 60%),
radial-gradient(1100px 620px at 8% -12%, rgba(79, 123, 247, .06), transparent 62%);
/* aplica a família de UI já no root */
font-family: var(--font-ui);
}
body { font-family: var(--font-ui); }
/* ============================================================================
2) TIPOGRAFIA — DISPLAY x UI x MONO
Regra do sistema:
• Space Grotesk → títulos e NÚMEROS de destaque (stats/scores/%)
• Manrope → corpo, rótulos, navegação, botões, tabelas
• JetBrains Mono → TODO identificador de rede (ASN, prefixo, IP, RPSL…)
Como o app já usa var(--font-mono) em todos os dados técnicos, redefinir
--font-mono (acima) já atualiza ASN/prefixos/IPs/AS-path automaticamente.
============================================================================ */
h1 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.028em; }
h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
h3 { font-family: var(--font-ui); font-weight: 700; letter-spacing: -.008em; }
.brand strong,
.brand.compact strong { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.login-heading h1 { font-family: var(--font-display); }
/* números de destaque (stats) em Space Grotesk */
.metric strong,
.score-block strong { font-family: var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* EXCEÇÃO: o ASN é um identificador → sempre mono, mesmo dentro de .metric */
#metric-asn { font-family: var(--font-mono); letter-spacing: -.01em; }
/* rótulos/overlines */
.eyebrow { font-family: var(--font-ui); font-weight: 700; letter-spacing: .11em; }
/* ============================================================================
3) CHECKBOX COERENTE (custom, 100% CSS — não exige mudar o HTML)
Substitui o checkbox nativo por uma caixa com o gradiente do acento + check.
Os !important nas dimensões vencem as regras espalhadas hoje
(.field input[type=checkbox]{width:auto…}, .checkbox-line…, .lgx-dns input…).
============================================================================ */
input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
flex: 0 0 auto;
display: inline-block;
vertical-align: middle;
position: relative;
border: 1.5px solid var(--line-strong, #d6d1e6);
border-radius: 6px;
background: var(--surface, #fff);
cursor: pointer;
transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]:hover { border-color: var(--accent-1); }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Marcado: gradiente do acento + "✓" branco por SVG de fundo.
(Pseudo-elementos ::after NÃO pintam em na maioria dos navegadores;
por isso o check vem como background-image em camada, sobre o gradiente.) */
input[type="checkbox"]:checked {
border-color: transparent;
background:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M4%208.4l2.6%202.6L12%205'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat,
var(--accent-grad);
}
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
/* ============================================================================
4) TOGGLE / SWITCH (OPCIONAL — para ligar/desligar, ex.: "Auto-update",
"Permitir escrita externa", modos de notificação)
Exige uma pequena mudança de HTML por toggle:
============================================================================ */
.switch { position: relative; display: inline-flex; align-items: center; width: 42px; height: 24px; flex: 0 0 auto; cursor: pointer; }
.switch input {
position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; cursor: pointer;
/* neutraliza a caixa custom da secao 3 dentro do switch. width/height precisam de
!important: a secao 3 forca width/height:20px !important; sem isso a area clicavel
do input ficaria 20x20 no canto em vez de cobrir o trilho 42x24 inteiro. */
min-width: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important;
}
.switch .track { width: 42px; height: 24px; border-radius: 999px; background: var(--line-strong, #d6d1e6); transition: background .18s ease; }
.switch .track::after {
content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .18s ease;
}
.switch input:checked + .track { background: var(--accent-grad); }
.switch input:checked + .track::after { left: 21px; }
.switch input:focus-visible + .track { box-shadow: var(--focus-ring); }
/* ============================================================================
5) SEGMENTADO (OPCIONAL — 2 a 3 opções curtas; ex.: Escopo Regional/Global)
Já existe .lgx-seg no Looking Glass; use esta versão genérica em outros lugares.
============================================================================ */
.segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-md, 10px); background: var(--surface-2, #f1eff8); border: 1px solid var(--line, #e7e4f0); }
.segmented button { border: 0; border-radius: 7px; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted, #6b6580); background: transparent; cursor: pointer; }
.segmented button:hover { color: var(--text, #16121f); }
.segmented button[aria-pressed="true"] { color: #fff; font-weight: 600; background: var(--accent-grad); box-shadow: var(--shadow-accent); }
/* ============================================================================
6) MICROAJUSTES (herdam a paleta nova automaticamente)
============================================================================ */
/* barra-acento no cabeçalho de painel e nos cards já leem --accent-grad;
aqui só garantimos o foco coerente em todos os acionáveis */
.primary-button:focus-visible,
.icon-button:focus-visible,
.link-button:focus-visible,
.nav-item:focus-visible,
select:focus-visible,
.field input:focus-visible,
.field textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ============================================================================
7) PALETAS ALTERNATIVAS — para trocar, substitua os 3 tokens --accent-* e
os 3 valores de rgba (focus-ring, shadow-accent, brand-strong) na seção 1.
----------------------------------------------------------------------------
ÍNDIGO (azul lidera):
--accent-1:#3b82f6; --accent-2:#7c5cff; --accent-3:#12b981;
--brand-strong:#2f6fe0;
--focus-ring: 0 0 0 3px rgba(59,130,246,.32);
--shadow-accent: 0 8px 22px rgba(59,130,246,.28);
ESMERALDA (verde/teal lidera, roxo de apoio):
--accent-1:#10b981; --accent-2:#0ea5e9; --accent-3:#7c5cff;
--brand-strong:#0e9f70;
--focus-ring: 0 0 0 3px rgba(16,185,129,.30);
--shadow-accent: 0 8px 22px rgba(16,185,129,.26);
============================================================================ */