/* ═══════════════════════════════════════════════════════════════════ aware-kit.css — i9aware Design Kit Versão: 1.0 · 2026-07-13 Autor: Manuel Oliveira · i9 Security INTEGRAÇÃO: Entra como 4º e último em base.html e admin_base.html, depois de aware-premium.css. Nunca editar site.css nem aware-premium.css. base.html / admin_base.html — adicionar no : TOKENS HERDADOS (não redefinidos aqui): --sev-info / --sev-aviso / --sev-critico / --sev-ok → site.css --aw-glow-sucesso / --aw-glow-aviso / --aw-glow-critico → aware-premium.css --aw-easing / --aw-mono / --aw-base → aware-premium.css TOKENS NOVOS (definidos aqui, prefixo --awk-): Spacing, radius, shadow-scale, font-scale, componentes. ═══════════════════════════════════════════════════════════════════ */ /* ─── 0. TOKENS QUE FALTAVAM ──────────────────────────────────── */ :root { /* Spacing scale */ --awk-space-xs: 4px; --awk-space-sm: 8px; --awk-space-md: 16px; --awk-space-lg: 24px; --awk-space-xl: 40px; /* Radius scale */ --awk-radius-sm: 8px; --awk-radius-md: 12px; --awk-radius-lg: 16px; --awk-radius-pill: 999px; /* Font scale (complementa --aw-mono já existente) */ --awk-text-xs: 9px; --awk-text-sm: 11px; --awk-text-md: 13px; --awk-text-lg: 16px; --awk-text-num: 28px; /* números grandes LCD / calendário */ --awk-text-hero: 40px; /* KPI hero */ /* Shadow scale */ --awk-shadow-card: 0 2px 12px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25); --awk-shadow-hover: 0 6px 24px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30); --awk-shadow-glow-cyan: 0 0 18px rgba(0,198,255,0.20); --awk-shadow-glow-green: 0 0 18px rgba(45,212,167,0.22); --awk-shadow-glow-amber: 0 0 20px rgba(245,185,66,0.22); --awk-shadow-glow-red: 0 0 20px rgba(255,90,95,0.24); --awk-shadow-glow-violet: 0 0 18px rgba(167,139,250,0.22); /* Cor IA Act (única sem token) */ --awk-ia-act: #a78bfa; --awk-ia-act-bg: rgba(167,139,250,0.10); --awk-ia-act-border: rgba(167,139,250,0.25); /* Gradiente da linha de topo dos cards (padrão da casa) */ --awk-line-top: linear-gradient(90deg, var(--sev-info, #00c6ff), #0072ff); /* Transição padrão — usa --aw-easing se disponível */ --awk-transition: 0.2s var(--aw-easing, cubic-bezier(0.16,1,0.3,1)); } /* ─── 1. CALENDÁRIO REGRESSIVO ────────────────────────────────── */ /* Uso:

Diag

dias

Diagnóstico NIS2-ADM-02

Prazo: 25 ago · Innovagency

Variantes data-tipo → cor da aba: Diag → vermelho (urgência) Carta → azul marinho Ciclo → verde Audit → verde escuro PAT → roxo Cert → azul aço */ .awk-countdown { display: flex; align-items: center; gap: var(--awk-space-lg); padding: var(--awk-space-md) var(--awk-space-lg); background: var(--aw-surface-card, #111827); border: 1px solid var(--aw-line-card, #1e2d45); border-radius: var(--awk-radius-lg); position: relative; overflow: hidden; transition: box-shadow var(--awk-transition); } .awk-countdown::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--awk-line-top); } .awk-countdown:hover { box-shadow: var(--awk-shadow-hover); } .awk-cal { width: 72px; height: 80px; border-radius: var(--awk-radius-md); background: #1e2d45; border: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05); } .awk-cal-top { height: 22px; display: flex; align-items: center; justify-content: center; font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-xs); font-weight: 700; color: #fff; letter-spacing: 0.15em; text-transform: uppercase; background: linear-gradient(135deg, #c0392b, #e74c3c); /* default: vermelho */ } /* Variantes de cor da aba — adicionar inline style="--awk-cal-color-a:#...; --awk-cal-color-b:#..." */ .awk-cal-top[style*="--"] { background: linear-gradient(135deg, var(--awk-cal-color-a, #c0392b), var(--awk-cal-color-b, #e74c3c)); } /* Atalhos de variante via classe */ .awk-cal.carta .awk-cal-top { background: linear-gradient(135deg, #1a5276, #2471a3); } .awk-cal.ciclo .awk-cal-top { background: linear-gradient(135deg, #1e8449, #27ae60); } .awk-cal.audit .awk-cal-top { background: linear-gradient(135deg, #145a32, #1e8449); } .awk-cal.pat .awk-cal-top { background: linear-gradient(135deg, #6c3483, #8e44ad); } .awk-cal.cert .awk-cal-top { background: linear-gradient(135deg, #154360, #1a5276); } .awk-cal.ia .awk-cal-top { background: linear-gradient(135deg, #4a1d96, #7c3aed); } .awk-cal-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .awk-cal-num { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-num); font-weight: 700; color: #fff; line-height: 1; } /* Urgência: num fica vermelho quando ≤ 7 dias — adicionar classe .urgente via JS */ .awk-cal-num.urgente { color: var(--sev-critico, #ff5a5f); } .awk-cal-num.aviso { color: var(--sev-aviso, #f5b942); } .awk-cal-unit { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-xs); color: #64748b; text-transform: uppercase; letter-spacing: 0.1em; } .awk-countdown-info { flex: 1; min-width: 0; } .awk-countdown-title { font-size: var(--awk-text-md); font-weight: 600; color: #e2e8f0; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .awk-countdown-sub { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-sm); color: #64748b; } /* Grade de múltiplos countdowns */ .awk-countdown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--awk-space-md); } /* ─── 2. BADGE DE ESTADO (dot pulsante) ───────────────────────── */ /* Uso: Conforme Em análise Intervenção urgente Activo Sem dados */ .awk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--awk-radius-pill); font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .awk-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* ok / conforme */ .awk-badge--ok { background: rgba(45,212,167,0.10); border: 1px solid rgba(45,212,167,0.28); color: #2dd4a7; } .awk-badge--ok::before { background: #2dd4a7; box-shadow: 0 0 5px #2dd4a7; animation: awk-pulse-ok 2.2s ease infinite; } /* aviso */ .awk-badge--aviso { background: rgba(245,185,66,0.10); border: 1px solid rgba(245,185,66,0.28); color: var(--sev-aviso, #f5b942); } .awk-badge--aviso::before { background: var(--sev-aviso, #f5b942); animation: awk-pulse-aviso 1.8s ease infinite; } /* crítico */ .awk-badge--critico { background: rgba(255,90,95,0.12); border: 1px solid rgba(255,90,95,0.35); color: var(--sev-critico, #ff5a5f); animation: awk-blink-critico 1s step-end infinite; } .awk-badge--critico::before { background: var(--sev-critico, #ff5a5f); box-shadow: 0 0 7px var(--sev-critico, #ff5a5f); } /* info / activo */ .awk-badge--info { background: rgba(0,198,255,0.10); border: 1px solid rgba(0,198,255,0.25); color: var(--sev-info, #00c6ff); } .awk-badge--info::before { background: var(--sev-info, #00c6ff); animation: awk-pulse-ok 3s ease infinite; } /* IA Act */ .awk-badge--ia { background: var(--awk-ia-act-bg); border: 1px solid var(--awk-ia-act-border); color: var(--awk-ia-act); } .awk-badge--ia::before { background: var(--awk-ia-act); animation: awk-pulse-ok 3.5s ease infinite; } /* inativo / sem dados */ .awk-badge--inativo { background: rgba(100,116,139,0.12); border: 1px solid rgba(100,116,139,0.22); color: #64748b; } .awk-badge--inativo::before { background: #475569; } @keyframes awk-pulse-ok { 0%, 100% { opacity: 1; box-shadow: 0 0 5px #2dd4a7; } 50% { opacity: 0.35; box-shadow: 0 0 0 transparent; } } @keyframes awk-pulse-aviso { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes awk-blink-critico { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ─── 3. LCD DISPLAY ──────────────────────────────────────────── */ /* Uso:

Taxa resposta

84%

diagnóstico Q2

Variantes: awk-lcd--green / --cyan / --red / --amber */ .awk-lcd-card { background: var(--aw-surface-card, #111827); border: 1px solid var(--aw-line-card, #1e2d45); border-radius: var(--awk-radius-md); padding: var(--awk-space-md); text-align: center; } .awk-lcd-label { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-xs); color: #64748b; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 10px; } .awk-lcd-display { background: #060d0a; border: 1px solid #0d2016; border-radius: var(--awk-radius-sm); padding: 10px 12px; font-family: var(--aw-mono, ui-monospace, monospace); font-size: 28px; font-weight: 700; letter-spacing: 4px; box-shadow: inset 0 2px 8px rgba(0,0,0,0.6); margin-bottom: 8px; line-height: 1; } .awk-lcd--green { color: #00e676; text-shadow: 0 0 12px rgba(0,230,118,0.45); } .awk-lcd--cyan { color: #00c6ff; text-shadow: 0 0 12px rgba(0,198,255,0.45); } .awk-lcd--red { color: #ff5a5f; text-shadow: 0 0 12px rgba(255,90,95,0.45); } .awk-lcd--amber { color: #f5b942; text-shadow: 0 0 12px rgba(245,185,66,0.45); } .awk-lcd--violet{ color: var(--awk-ia-act); text-shadow: 0 0 12px rgba(167,139,250,0.40); } .awk-lcd-sub { font-family: var(--aw-mono, ui-monospace, monospace); font-size: 10px; color: #64748b; } /* Grade de 4 LCDs */ .awk-lcd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--awk-space-md); } /* ─── 4. SHIELD DE SCORE ──────────────────────────────────────── */ /* Uso:

Innovagency

Score médio · 2 eixos fracos

Variantes shield: awk-shield--ok / --aviso / --critico / --info */ .awk-shield-card { display: flex; align-items: center; gap: var(--awk-space-lg); padding: var(--awk-space-md) var(--awk-space-lg); background: var(--aw-surface-card, #111827); border: 1px solid var(--aw-line-card, #1e2d45); border-radius: var(--awk-radius-lg); transition: box-shadow var(--awk-transition); } .awk-shield-card:hover { box-shadow: var(--awk-shadow-hover); } .awk-shield { position: relative; width: 60px; height: 68px; flex-shrink: 0; } .awk-shield svg { width: 60px; height: 68px; } .awk-shield--ok svg path { fill: rgba(45,212,167,0.10); stroke: #2dd4a7; stroke-width: 1.5; } .awk-shield--aviso svg path { fill: rgba(245,185,66,0.10); stroke: #f5b942; stroke-width: 1.5; } .awk-shield--critico svg path { fill: rgba(255,90,95,0.12); stroke: #ff5a5f; stroke-width: 1.5; } .awk-shield--info svg path { fill: rgba(0,198,255,0.10); stroke: #00c6ff; stroke-width: 1.5; } .awk-shield--ok { filter: drop-shadow(0 0 8px rgba(45,212,167,0.25)); } .awk-shield--aviso { filter: drop-shadow(0 0 8px rgba(245,185,66,0.25)); } .awk-shield--critico{ filter: drop-shadow(0 0 8px rgba(255,90,95,0.30)); } .awk-shield--info { filter: drop-shadow(0 0 8px rgba(0,198,255,0.25)); } .awk-shield-num { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -48%); font-family: var(--aw-mono, ui-monospace, monospace); font-size: 18px; font-weight: 700; color: #fff; } .awk-shield-info { flex: 1; min-width: 0; } .awk-shield-title { font-size: var(--awk-text-md); font-weight: 600; color: #e2e8f0; margin-bottom: 4px; } .awk-shield-desc { font-size: var(--awk-text-sm); color: #64748b; } .awk-shield-desc--ok { color: #2dd4a7; } .awk-shield-desc--aviso { color: var(--sev-aviso, #f5b942); } .awk-shield-desc--critico { color: var(--sev-critico, #ff5a5f); } .awk-shield-desc--info { color: var(--sev-info, #00c6ff); } /* ─── 5. UPTIME / PARTICIPAÇÃO (ticks) ───────────────────────── */ /* Uso:

Diagnóstico NIS2-ADM-01

84%

Taxa de resposta · 42 de 50

JS necessário (colocar no template ou num script global): document.querySelectorAll('.awk-uptime-bar').forEach(el => { const pct = parseFloat(el.dataset.pct || 0); const ticks = parseInt(el.dataset.ticks || 30); awareKitBuildUptime(el, pct, ticks); }); */ .awk-uptime-card { background: #050a0a; border: 1px solid #0d2016; border-radius: var(--awk-radius-md); padding: var(--awk-space-md); font-family: var(--aw-mono, ui-monospace, monospace); } .awk-uptime-host { font-size: var(--awk-text-sm); color: #2dd4a7; margin-bottom: 4px; } .awk-uptime-host::before { content: '↗ '; color: #64748b; } .awk-uptime-val { font-size: 22px; font-weight: 700; color: #2dd4a7; text-shadow: 0 0 10px rgba(45,212,167,0.30); margin-bottom: 2px; } .awk-uptime-val.aviso { color: var(--sev-aviso, #f5b942); text-shadow: 0 0 10px rgba(245,185,66,0.30); } .awk-uptime-val.critico { color: var(--sev-critico, #ff5a5f); text-shadow: 0 0 10px rgba(255,90,95,0.30); } .awk-uptime-label { font-size: var(--awk-text-xs); color: #64748b; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: var(--awk-space-sm); } .awk-uptime-bar { display: flex; gap: 3px; margin-top: 10px; } .awk-uptime-tick { flex: 1; height: 18px; border-radius: 3px; } .awk-uptime-tick.up { background: #2dd4a7; box-shadow: 0 0 4px rgba(45,212,167,0.30); } .awk-uptime-tick.mid { background: var(--sev-aviso, #f5b942); } .awk-uptime-tick.down { background: var(--sev-critico, #ff5a5f); } .awk-uptime-tick.gap { background: #0d2016; } /* Versão compacta (linha inline dentro de cards maiores) */ .awk-uptime-inline { display: flex; align-items: center; gap: var(--awk-space-sm); margin-bottom: 8px; } .awk-uptime-inline-label { font-size: var(--awk-text-sm); color: #e2e8f0; width: 80px; flex-shrink: 0; } .awk-uptime-inline-bar { display: flex; gap: 2px; flex: 1; } .awk-uptime-inline-bar .awk-uptime-tick { height: 14px; } .awk-uptime-inline-pct { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-sm); width: 38px; text-align: right; color: #64748b; } /* ─── 6. GAUGE SEMI-CIRCULAR ──────────────────────────────────── */ /* Uso (o SVG é gerado via template ou JS):

Score processo

41%

Processo · média do ciclo

stroke-dashoffset = 157 * (1 - valor/100) Ex: 41% → 157 * 0.59 ≈ 93 */ .awk-gauge-wrap { background: var(--aw-surface-card, #111827); border: 1px solid var(--aw-line-card, #1e2d45); border-radius: var(--awk-radius-md); padding: var(--awk-space-md); text-align: center; } .awk-gauge-label { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-xs); color: #64748b; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 6px; } .awk-gauge-svg { overflow: visible; } .awk-gauge-val { font-family: var(--aw-mono, ui-monospace, monospace); font-size: 20px; font-weight: 700; margin-top: -6px; line-height: 1; } .awk-gauge-sub { font-family: var(--aw-mono, ui-monospace, monospace); font-size: 10px; color: #64748b; margin-top: 4px; } /* Gradientes standard por eixo — usar id nos SVG */ /* Técnico: azul */ /* #awk-g-tecnico: #1a4fbe → #00c6ff */ /* Humano: amarelo */ /* #awk-g-humano: #b45309 → #f5b942 */ /* Processo: violeta */ /* #awk-g-processo: #6c3483 → #a855f7 */ /* Conformidade: teal*/ /* #awk-g-conformidade:#0f766e → #2dd4a7 */ /* IA Act: índigo */ /* #awk-g-ia: #4a1d96 → #a78bfa */ /* ─── 7. ITEM DE DIÁRIO / TIMELINE ───────────────────────────── */ /* Uso:

✅

Diagnóstico NIS2-ADM-01 publicado

2026-07-09 · 42 respondentes · Pedro Lobo

# a4b2c3d1e5f6a7b8 · verificado

...

Variantes dot: awk-tl-dot--ok / --aviso / --info / --critico / --ia / --pendente */ .awk-tl { display: flex; flex-direction: column; } .awk-tl-item { display: flex; gap: var(--awk-space-md); padding: 10px 0; border-bottom: 1px solid rgba(30,45,69,0.6); position: relative; } .awk-tl-item:last-child { border-bottom: none; } /* linha vertical de continuidade */ .awk-tl-item:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 42px; bottom: -10px; width: 1px; background: rgba(30,45,69,0.8); } .awk-tl-dot { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; z-index: 1; } .awk-tl-dot--ok { background: rgba(45,212,167,0.12); } .awk-tl-dot--aviso { background: rgba(245,185,66,0.12); } .awk-tl-dot--info { background: rgba(0,198,255,0.12); } .awk-tl-dot--critico { background: rgba(255,90,95,0.14); } .awk-tl-dot--ia { background: rgba(167,139,250,0.12);} .awk-tl-dot--pendente { background: rgba(100,116,139,0.12);} .awk-tl-body { flex: 1; min-width: 0; } .awk-tl-title { font-size: var(--awk-text-md); font-weight: 500; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; } .awk-tl-meta { font-size: var(--awk-text-sm); color: #64748b; margin-bottom: 3px; } .awk-tl-hash { font-family: var(--aw-mono, ui-monospace, monospace); font-size: 9px; color: #334155; letter-spacing: 0.05em; } /* Variante "last activity" do nexus — barra lateral colorida */ .awk-tl-item.awk-tl-item--highlight { background: rgba(15,118,110,0.05); border-left: 2px solid var(--sev-info, #00c6ff); border-radius: 0 var(--awk-radius-sm) var(--awk-radius-sm) 0; padding-left: var(--awk-space-sm); margin-left: -var(--awk-space-sm); } /* ─── 8. TOAST / ALERTA ───────────────────────────────────────── */ /* Uso:

ℹ️

Patch disponível — KB5040442

Windows Server 2022 · Aprovação pendente.

agora

Variantes: awk-toast--info / --ok / --aviso / --critico */ .awk-toast { border-radius: var(--awk-radius-md); padding: 14px 16px; display: flex; gap: var(--awk-space-md); align-items: flex-start; border-left: 3px solid; background: var(--aw-surface-card, #111827); transition: box-shadow var(--awk-transition); } .awk-toast:hover { box-shadow: var(--awk-shadow-card); } .awk-toast--info { border-left-color: var(--sev-info, #00c6ff); } .awk-toast--ok { border-left-color: #2dd4a7; } .awk-toast--aviso { border-left-color: var(--sev-aviso, #f5b942); } .awk-toast--critico { border-left-color: var(--sev-critico, #ff5a5f);} .awk-toast-icon { font-size: 16px; margin-top: 1px; flex-shrink: 0; } .awk-toast-body { flex: 1; } .awk-toast-title { font-size: var(--awk-text-md); font-weight: 600; color: #e2e8f0; margin-bottom: 3px; } .awk-toast-msg { font-size: var(--awk-text-sm); color: #64748b; line-height: 1.5; } .awk-toast-time { font-family: var(--aw-mono, ui-monospace, monospace); font-size: 10px; color: #64748b; white-space: nowrap; } /* ─── 9. SECTION LABEL (padrão Nexus) ────────────────────────── */ /* Uso:

Diário de conformidade

*/ .awk-section-label { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-xs); color: #64748b; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(30,45,69,0.8); display: flex; align-items: center; gap: 10px; } .awk-section-label::before { content: ''; display: inline-block; width: 3px; height: 14px; background: linear-gradient(180deg, var(--sev-info, #00c6ff), #0072ff); border-radius: 2px; flex-shrink: 0; } /* ─── 10. CARD BASE (padrão da casa com hover) ────────────────── */ /* Uso:

...

*/ .awk-card { background: var(--aw-surface-card, #111827); border: 1px solid var(--aw-line-card, #1e2d45); border-radius: var(--awk-radius-lg); padding: var(--awk-space-md) var(--awk-space-lg); position: relative; overflow: hidden; transition: border-color var(--awk-transition), box-shadow var(--awk-transition); } /* linha de topo no hover — padrão Nexus */ .awk-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sev-info, #00c6ff), transparent); opacity: 0; transition: opacity var(--awk-transition); } .awk-card:hover::before { opacity: 1; } .awk-card:hover { border-color: #243555; box-shadow: var(--awk-shadow-card); } /* variantes de glow permanente (para cards de alerta activo) */ .awk-card--glow-ok { box-shadow: var(--awk-shadow-glow-green); border-color: rgba(45,212,167,0.30); } .awk-card--glow-aviso { box-shadow: var(--awk-shadow-glow-amber); border-color: rgba(245,185,66,0.30); } .awk-card--glow-critico { box-shadow: var(--awk-shadow-glow-red); border-color: rgba(255,90,95,0.35); } .awk-card--glow-info { box-shadow: var(--awk-shadow-glow-cyan); border-color: rgba(0,198,255,0.28); } .awk-card--glow-ia { box-shadow: var(--awk-shadow-glow-violet); border-color: var(--awk-ia-act-border);} /* ─── 11. BARRA DE RISCO / SCORE POR EIXO ────────────────────── */ /* Uso:

⚙️ Processo 41/100

*/ .awk-risk-row { margin-bottom: 10px; } .awk-risk-row:last-child { margin-bottom: 0; } .awk-risk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .awk-risk-name { font-size: var(--awk-text-sm); color: #e2e8f0; } .awk-risk-val { font-family: var(--aw-mono, ui-monospace, monospace); font-size: var(--awk-text-sm); font-weight: 700; } .awk-risk-track { height: 6px; background: #1e2d45; border-radius: 3px; overflow: hidden; border: 1px solid rgba(30,45,69,0.5); } .awk-risk-fill { height: 100%; border-radius: 3px; transition: width 0.8s var(--aw-easing, ease); } /* Variantes gradient por nível (em alternativa à cor do eixo) */ .awk-risk-fill--low { background: linear-gradient(90deg, #00b09b, #2dd4a7); } .awk-risk-fill--med { background: linear-gradient(90deg, #b45309, #f5b942); } .awk-risk-fill--high { background: linear-gradient(90deg, #c0392b, #ff5a5f); } .awk-risk-fill--crit { background: linear-gradient(90deg, #7f1d1d, #ff5a5f); animation: awk-flicker 1.5s infinite; } @keyframes awk-flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.55; } 94% { opacity: 1; } } /* ─── 12. CERT / DOCUMENTO COM PRAZO ─────────────────────────── */ /* Uso:

📋

Carta trimestral Q2 2026

Assinada por Manuel Oliveira · i9 Security

*/ .awk-cert-card { background: var(--aw-surface-card, #111827); border: 1px solid var(--aw-line-card, #1e2d45); border-radius: var(--awk-radius-lg); padding: var(--awk-space-md) var(--awk-space-lg); position: relative; overflow: hidden; transition: box-shadow var(--awk-transition); } /* círculo decorativo fundo — sutil */ .awk-cert-card::after { content: ''; position: absolute; bottom: -30px; right: -30px; width: 80px; height: 80px; border-radius: 50%; background: rgba(0,198,255,0.03); border: 1px solid rgba(0,198,255,0.08); pointer-events: none; } .awk-cert-card:hover { box-shadow: var(--awk-shadow-card); } .awk-cert-icon { font-size: 26px; display: block; margin-bottom: 10px; } .awk-cert-name { font-size: var(--awk-text-md); font-weight: 600; color: #e2e8f0; margin-bottom: 4px; } .awk-cert-issuer { font-family: var(--aw-mono, ui-monospace, monospace); font-size: 10px; color: #64748b; margin-bottom: var(--awk-space-md); } .awk-cert-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(30,45,69,0.8); padding-top: 10px; } .awk-cert-expiry { font-family: var(--aw-mono, ui-monospace, monospace); font-size: 10px; color: #64748b; } .awk-cert-expiry-val { display: block; font-size: 12px; font-weight: 700; margin-top: 2px; } .awk-cert-expiry--ok { color: #2dd4a7; } .awk-cert-expiry--aviso { color: var(--sev-aviso, #f5b942); } .awk-cert-expiry--critico { color: var(--sev-critico, #ff5a5f); } /* ─── JS HELPER — UPTIME BUILDER ─────────────────────────────── */ /* Copiar para o final de base.html / admin_base.html (bloco scripts), ou para um ficheiro aware-kit.js separado: function awareKitBuildUptime(el, pct, ticks) { ticks = ticks || 30; const filled = Math.round((pct / 100) * ticks); for (let i = 0; i < ticks; i++) { const t = document.createElement('div'); if (i < filled) { t.className = pct >= 80 ? 'awk-uptime-tick up' : pct >= 50 ? 'awk-uptime-tick mid' : 'awk-uptime-tick down'; } else { t.className = 'awk-uptime-tick gap'; } el.appendChild(t); } } document.querySelectorAll('.awk-uptime-bar[data-pct]').forEach(el => { awareKitBuildUptime(el, parseFloat(el.dataset.pct), parseInt(el.dataset.ticks || 30)); }); // Calendários regressivos — actualizar número de dias // data-deadline="2026-09-30" document.querySelectorAll('.awk-cal-num[data-deadline]').forEach(el => { const diff = Math.ceil((new Date(el.dataset.deadline) - new Date()) / 86400000); el.textContent = Math.max(0, diff); if (diff <= 7) el.classList.add('urgente'); else if (diff <= 30) el.classList.add('aviso'); }); */ /* ─── FIM DO KIT ──────────────────────────────────────────────── */