/* Lelantus Console — design tokens + component system (ported from the Claude Design prototype). Tailwind (CDN) handles layout utilities in the templates; this sheet is the design system. */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Geist+Mono:wght@300;400;500;600&display=swap'); :root { --serif:'Instrument Serif',serif; --sans:'DM Sans',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; --bg:#080C0B; --bg-sidebar:#060907; --bg-surface:#0D160D; --bg-raised:#0F1E13; --bg-hover:rgba(232,237,232,0.03); --bg-active:rgba(15,53,48,0.28); --primary:#0F3530; --accent:#F59E0B; --accent-ink:#1a1100; /* --link: accent usado como TEXTO/link. No escuro = accent (≥8:1); no claro escurece p/ AA (laranja puro sobre fundo claro reprova). Fundos/bordas/ícones continuam usando --accent. */ --link:var(--accent); /* texto: hierarquia de 3 níveis, TODOS ≥ WCAG AA (4.5:1) sobre as superfícies escuras (LEL-UX-401). fg 14.6–16.9:1 · fg-mute 5.5–6.4:1 · fg-dim 4.6–5.3:1 (antes 3.5–4.1, reprovava) */ --fg:#E8EDE8; --fg-mute:#869684; --fg-dim:#788878; --border:rgba(26,42,26,0.55); --border-soft:rgba(232,237,232,0.07); /* severidade (escuro): AA-texto verificado sobre --bg-surface #0D160D; low=AZUL (não verde-cinza que lia 'ok'); med=âmbar (não oliva). Cor é reforço — identidade vem do rótulo + ícone (dataviz). */ --crit:#f07a70; --crit-bg:rgba(240,122,112,0.12); --high:#f59433; --high-bg:rgba(245,148,51,0.12); --med:#e0c24a; --med-bg:rgba(224,194,74,0.12); --low:#7aa6e0; --low-bg:rgba(122,166,224,0.12); --ok:#4ade80; --ok-bg:rgba(74,222,128,0.12); /* FILL da barra de severidade (não é texto → sem trava de AA): rampa monotônica que só PERDE intensidade (crit vívido → low neutro), sem oliva-verde nem azul-vivo. Identidade vem do glifo. */ --crit-fill:#ef7d78; --high-fill:#f0913a; --med-fill:#d8bd5a; --low-fill:#7d867e; --topbar-h:60px; --side-w:224px; --shadow:0 24px 60px -30px rgba(0,0,0,0.8); /* escala de espaçamento e raio — tokens (antes hardcoded por componente). Ver DESIGN-REFERENCE §Layout. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --radius-sm:6px; --radius-md:10px; --radius-lg:12px; --radius-pill:999px; /* camada de MARCA (landing lelant.us) — âmbar-sinal e menta usados em superfícies de marketing/telas de marca. NÃO substituem --accent/--ok do produto (esses são AA-verificados). Ver DESIGN-REFERENCE §Marca. */ --brand-signal:#F4A83C; --brand-mint:#63D6A6; } /* tema claro — o padrão do console é ESCURO (:root acima). O toggle no topbar troca [data-theme] no ; a sidebar permanece escura nos dois temas. */ [data-theme="light"] { --bg:#EBEFEA; --bg-sidebar:#0A120F; --bg-surface:#FFFFFF; --bg-raised:#F5F8F4; --bg-hover:rgba(15,53,48,0.04); --bg-active:rgba(15,53,48,0.08); /* claro (LEL-UX-401): fg-dim escurecido p/ AA; --link escurece o laranja (ilegível como texto no claro) */ --fg:#17231C; --fg-mute:#556455; --fg-dim:#5e6d62; --link:#8a5800; --border:rgba(23,35,28,0.14); --border-soft:rgba(23,35,28,0.08); /* severidade (claro): AA-texto verificado sobre #FFFFFF (crit 6.7 · high 4.8 · med 4.9 · low 5.5); high=laranja e med=âmbar deixam de ser o mesmo oliva; low=AZUL-ardósia (não verde que lia 'ok'). */ --crit:#b0261d; --crit-bg:rgba(176,38,29,0.10); --high:#a34700; --high-bg:rgba(163,71,0,0.10); --med:#786008; --med-bg:rgba(120,96,8,0.10); --low:#3f6b9c; --low-bg:rgba(63,107,156,0.10); --ok:#1a7a50; --ok-bg:rgba(26,122,80,0.10); /* FILL da barra (claro): rampa que só perde intensidade — vermelho vívido → laranja → âmbar suave → cinza-neutro. Médio deixa de ser oliva-verde; baixo deixa de ser azul-vivo. */ --crit-fill:#c0392b; --high-fill:#db6d1c; --med-fill:#d8b45a; --low-fill:#a9aaa0; --shadow:0 16px 40px -24px rgba(23,35,28,0.35); } [data-theme="light"] .sidebar { --fg:#E8EDE8; --fg-mute:#869684; --fg-dim:#788878; --border:rgba(232,237,232,0.08); --bg-hover:rgba(232,237,232,0.03); --bg-active:rgba(15,53,48,0.28); /* A sidebar é escura NOS DOIS temas, então toda cor de FUNDO usada aqui dentro precisa ser redefinida — senão pega o valor do tema claro. Faltava --bg-raised (quase branco no claro): .side-foot-link:hover/.active pintavam fundo branco com texto claro (~1.06:1, ilegível). */ --bg-raised:#0F1E13; --link:var(--accent); /* a sidebar é sempre escura: link volta ao accent brilhante (AA no escuro) */ } * { box-sizing:border-box; margin:0; padding:0; } html,body { height:100%; } body { background:var(--bg); color:var(--fg); font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased; } button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; } input,select { font-family:inherit; } a { color:inherit; text-decoration:none; } .mono { font-family:var(--mono); } .serif { font-family:var(--serif); } .dim { color:var(--fg-mute); } /* termo técnico traduzido: rótulo pt-BR amigável com o termo original no title= (macro _gloss.html t()). sublinhado pontilhado discreto = "passe o mouse p/ o termo técnico". Ver DESIGN-REFERENCE §Voz. */ .gloss { text-decoration:underline dotted; text-decoration-color:var(--border); text-underline-offset:2px; cursor:help; } ::selection { background:var(--accent); color:var(--accent-ink); } ::-webkit-scrollbar { width:9px; height:9px; } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:6px; } ::-webkit-scrollbar-track { background:transparent; } .htmx-indicator { opacity:0; transition:opacity .2s; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity:1; } /* a11y: foco de teclado visível (o realce de borda dos inputs não cobre botões/links) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; } @media (prefers-reduced-motion:reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* shell */ .shell { display:grid; grid-template-columns:var(--side-w) 1fr; height:100vh; } .sidebar { background:var(--bg-sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px 14px; color:var(--fg); } .side-brand { padding:8px 10px 24px; display:flex; align-items:baseline; gap:10px; } .wordmark { font-family:var(--mono); font-weight:500; font-size:15px; letter-spacing:.24em; } .wordmark .glyph { color:var(--link); font-weight:600; } .side-env { font-family:var(--mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); } .side-nav { display:flex; flex-direction:column; gap:1px; flex:1; overflow-y:auto; } .side-group { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); opacity:.85; padding:14px 12px 5px; user-select:none; } .side-group:first-of-type { padding-top:2px; } .side-item { display:flex; align-items:center; gap:11px; padding:8px 12px; border-radius:7px; color:var(--fg-mute); font-size:13px; font-weight:500; transition:background .16s, color .16s; position:relative; text-align:left; width:100%; } .side-item:hover { background:var(--bg-hover); color:var(--fg); } .side-item.active { background:var(--bg-active); color:var(--fg); } .side-item.active::before { content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:3px; height:16px; background:var(--accent); border-radius:0 2px 2px 0; } .side-ico { width:17px; height:17px; flex-shrink:0; opacity:.62; } .side-item:hover .side-ico, .side-item.active .side-ico { opacity:1; } .side-item.active .side-ico { color:var(--link); } .side-label { flex:1; } .side-note { font-family:var(--mono); font-size:10px; color:var(--fg-mute); background:var(--bg-hover); padding:2px 7px; border-radius:10px; } .side-item.active .side-note { color:var(--link); } .side-foot { border-top:1px solid var(--border); padding:16px 10px 4px; } .side-foot-link { display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:8px; border-radius:8px; color:var(--fg-mute); text-decoration:none; font-size:12.5px; transition:color .15s,background .15s; } .side-foot-link:hover { color:var(--fg); background:var(--bg-raised); } .side-foot-link.active { color:var(--fg); background:var(--bg-raised); } .side-foot-link .side-ico { width:16px; height:16px; } .side-health { display:flex; align-items:center; gap:8px; font-size:12px; } .side-meta { font-family:var(--mono); font-size:10px; color:var(--fg-mute); margin-top:6px; } /* main / topbar */ .main { display:flex; flex-direction:column; min-width:0; overflow:hidden; } .topbar { height:var(--topbar-h); flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--border); background:var(--bg); } .top-crumb { font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-mute); } .top-title { font-family:var(--serif); font-weight:400; font-size:24px; line-height:1.1; } .top-right { display:flex; align-items:center; gap:14px; } .top-tenant { display:flex; align-items:center; gap:10px; padding:6px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-surface); } .top-user { display:flex; align-items:center; gap:9px; } .top-user-email { font-size:11.5px; color:var(--fg-mute); } .top-tenant select { background:none; border:none; outline:none; color:var(--fg); font-size:12.5px; font-weight:600; cursor:pointer; } .top-tenant-dot { width:8px; height:8px; border-radius:50%; background:var(--ok); } /* overflow-anchor:none → ao trocar de página/filtro numa lista (swap HTMX outerHTML), o navegador não re-ancora em conteúdo abaixo e salta a viewport p/ outra tabela; a posição de rolagem é preservada. */ .scroll { flex:1; overflow-y:auto; overflow-anchor:none; } .page { padding:26px 24px 60px; max-width:1500px; } /* kpi */ .kpi-row { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; } .kpi { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; } .kpi-label { font-size:11.5px; color:var(--fg-mute); margin-bottom:12px; } .kpi-value { font-family:var(--serif); font-size:40px; line-height:.9; letter-spacing:-.02em; } .kpi-unit { font-size:20px; color:var(--fg-mute); margin-left:2px; } .kpi-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; } .kpi-meta { font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); } /* panel */ .panel { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; } .panel + .panel { margin-top:16px; } .sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding:18px 20px 14px; border-bottom:1px solid var(--border-soft); } .sec-label { font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:5px; } .sec-title { font-family:var(--serif); font-size:21px; line-height:1; } .mod-intro { margin-bottom:22px; max-width:720px; } .mod-tag { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--link); margin-bottom:12px; } .mod-intro p { color:var(--fg-mute); font-size:15px; line-height:1.55; } .empty { padding:32px 20px; text-align:center; color:var(--fg-mute); font-family:var(--mono); font-size:12px; } /* badges */ .badge { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; border:1px solid; white-space:nowrap; line-height:1.4; } .sev-crit { color:var(--crit); border-color:color-mix(in srgb,var(--crit) 35%,transparent); background:var(--crit-bg); } .sev-high { color:var(--high); border-color:color-mix(in srgb,var(--high) 35%,transparent); background:var(--high-bg); } .sev-med { color:var(--med); border-color:color-mix(in srgb,var(--med) 35%,transparent); background:var(--med-bg); } .sev-low { color:var(--low); border-color:color-mix(in srgb,var(--low) 35%,transparent); background:var(--low-bg); } .sev-ok { color:var(--ok); border-color:color-mix(in srgb,var(--ok) 35%,transparent); background:var(--ok-bg); } .dot-crit,.dot-high,.dot-med,.dot-low,.dot-ok { width:8px; height:8px; border-radius:50%; display:inline-block; } .dot-crit{background:var(--crit);} .dot-high{background:var(--high);} .dot-med{background:var(--med);} .dot-low{background:var(--low);} .dot-ok{background:var(--ok);} /* chips / filters */ .chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:6px 11px; border-radius:7px; border:1px solid var(--border); color:var(--fg-mute); transition:all .15s; } .chip:hover { color:var(--fg); border-color:var(--fg-dim); } .chip.active { background:var(--fg); color:var(--bg); border-color:var(--fg); } /* riskbar */ .riskbar { display:flex; align-items:center; gap:9px; } .riskbar-track { width:64px; height:4px; border-radius:3px; background:var(--border); overflow:hidden; } .riskbar-fill { display:block; height:100%; border-radius:3px; } .riskbar-num { font-family:var(--mono); font-size:13px; font-weight:500; min-width:34px; } /* tables */ .table { font-size:13px; } /* a classe utilitária .table do Tailwind CDN (display:table) colide com nosso container de linhas e o encolhe ao conteúdo — o header (.thead irmão) fica full-width e desalinha. Restaura bloco full-width. */ .panel .table { display:block; width:100%; } .thead { display:grid; padding:11px 20px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); border-bottom:1px solid var(--border-soft); background:var(--bg-raised); } .trow { display:grid; padding:14px 20px; align-items:center; border-bottom:1px solid var(--border-soft); transition:background .15s; } .trow:last-child { border-bottom:none; } .trow:hover { background:var(--bg-hover); } /* células de grid têm min-width:auto por padrão → o ellipsis de .cell-mono nunca dispara e strings longas estouram/quebram feio. Zerar deixa o ellipsis funcionar e contém o overflow. */ .trow > *, .thead > * { min-width:0; } .stealer-table .thead, .stealer-table .trow { grid-template-columns:2.2fr 1fr 1.2fr 1fr 1.2fr 1.1fr; gap:12px; } .surface-table .thead, .surface-table .trow { grid-template-columns:2.3fr 1.2fr 1.2fr 1fr 1.2fr; gap:12px; } .cell-mono { font-family:var(--mono); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; } .src-pill { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--mono); font-size:10.5px; padding:3px 8px; border-radius:5px; border:1px solid var(--border); color:var(--fg-mute); } .src-pill svg { width:12px; height:12px; flex-shrink:0; opacity:.9; } .src-dot { width:6px; height:6px; border-radius:50%; background:var(--fg-mute); flex-shrink:0; } .port { font-family:var(--mono); font-size:10.5px; padding:2px 7px; border-radius:4px; border:1px solid var(--border); color:var(--fg-mute); } .port.hot { color:var(--link); border-color:color-mix(in srgb,var(--accent) 40%,transparent); } /* overview: incidents + rails */ .ov-grid { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; } .inc-row { display:flex; align-items:center; gap:16px; padding:15px 20px 15px 0; border-bottom:1px solid var(--border-soft); text-align:left; width:100%; } .inc-row:last-child { border-bottom:none; } .inc-row:hover { background:var(--bg-hover); } .inc-sev-bar { width:3px; align-self:stretch; border-radius:0 2px 2px 0; min-height:40px; } .inc-main { flex:1; min-width:0; } .inc-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; } .inc-id { font-family:var(--mono); font-size:11px; color:var(--fg-mute); } .inc-title { font-size:14.5px; font-weight:500; } .inc-asset { color:var(--fg-mute); font-family:var(--mono); font-size:12.5px; } .inc-right { display:flex; flex-direction:column; align-items:flex-end; gap:5px; } .inc-ago { font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); } .health-row { display:flex; align-items:center; gap:11px; padding:12px 16px; } .health-name { font-size:13px; font-weight:500; } .health-detail { font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); margin-top:2px; } .health-status { font-family:var(--mono); font-size:10px; color:var(--ok); } .live-dot { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--ok); } .live-row { display:grid; grid-template-columns:62px 78px 1fr; gap:8px; padding:7px 18px; align-items:baseline; font-family:var(--mono); font-size:11.5px; } .live-row:hover { background:var(--bg-hover); } .live-t { color:var(--fg-dim); font-size:10.5px; } .live-msg { color:var(--fg-mute); } /* incidentes — refinamentos do redesign (filtros, dots de módulo, chevron, riskbar menor) */ .inc-modules { display:inline-flex; align-items:center; gap:4px; margin-left:2px; } .inc-sig { font-family:var(--mono); font-size:10px; color:var(--fg-mute); margin-left:4px; } .inc-chev { color:var(--fg-dim); font-size:18px; line-height:1; padding-left:4px; align-self:center; } .inc-row:hover .inc-chev { color:var(--fg-mute); } .filters { display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .riskbar-sm .riskbar-track { width:52px; } .riskbar-sm .riskbar-num { font-size:12px; min-width:26px; } /* mini stats */ .surface-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:16px; } .mini-stat { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; } /* asset cards */ .assets-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .asset-card { text-align:left; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:18px; overflow:hidden; transition:border-color .18s,transform .18s; display:block; width:100%; } .asset-card:hover { border-color:var(--fg-dim); transform:translateY(-2px); } .ac-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; } .ac-avatar { width:38px; height:38px; border-radius:10px; border:1px solid var(--border); display:grid; place-items:center; flex-shrink:0; color:var(--fg-mute); } .ac-name { font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ac-label { font-size:11px; color:var(--fg-mute); margin-top:2px; } .ac-score { font-family:var(--serif); font-size:30px; line-height:.85; } .ac-score span { font-size:14px; opacity:.5; } .ac-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; } .ac-src { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); } /* config */ .cfg-summary { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-bottom:16px; } .cfg-stat { text-align:left; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; } .cfg-grid { display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start; } .cfg-add { padding:18px 20px; border-bottom:1px solid var(--border-soft); background:var(--bg-raised); } .cfg-add-main { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .cfg-input { flex:1; min-width:160px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:11px 13px; color:var(--fg); font-size:13.5px; font-family:var(--mono); outline:none; transition:border-color .15s; } /* flex-basis só nos formulários horizontais (row); em coluna — login/MFA — basis viraria altura */ .cfg-add-main .cfg-input { flex:1 1 190px; min-width:150px; } .cfg-input:focus { border-color:var(--accent); } .cfg-input::placeholder { color:var(--fg-dim); } .cfg-select { cursor:pointer; } .cfg-add-btn { display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:var(--accent-ink); font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; padding:11px 16px; border-radius:8px; font-weight:500; } .cfg-add-btn:hover { background:#ffb01f; } .cfg-item { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--border-soft); } .cfg-item:last-child { border-bottom:none; } .cfg-item:hover { background:var(--bg-hover); } .cfg-item-icon { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); display:grid; place-items:center; color:var(--fg-mute); flex-shrink:0; font-family:var(--mono); font-size:10px; } .cfg-item-value { font-size:13.5px; font-weight:500; } .cfg-badge { font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-mute); border:1px solid var(--border); border-radius:5px; padding:2px 7px; } .cfg-remove { width:32px; height:32px; display:grid; place-items:center; border-radius:7px; color:var(--fg-dim); } .cfg-remove:hover { color:var(--crit); background:color-mix(in srgb,var(--crit) 10%,transparent); } .cfg-knob { display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--border-soft); } .cfg-knob:last-child { border-bottom:none; } .cfg-knob-body { flex:1; } .cfg-knob-label { font-size:13px; font-weight:500; } .cfg-knob-key { font-family:var(--mono); font-size:10px; color:var(--fg-dim); margin-top:2px; } .cfg-toggle-dot { width:26px; height:15px; border-radius:10px; background:var(--border); position:relative; transition:background .18s; flex-shrink:0; display:inline-block; } .cfg-toggle-dot::after { content:''; position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:var(--fg-mute); transition:transform .18s,background .18s; } .cfg-toggle-dot.on { background:var(--accent); } .cfg-toggle-dot.on::after { transform:translateX(11px); background:var(--accent-ink); } .knob-num { flex:0 0 auto; width:70px; min-width:0; text-align:center; } /* coverage */ .cov-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } .cov-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; padding:18px; } .cov-count { font-family:var(--serif); font-size:34px; line-height:.9; } .cov-mods { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; } .cov-card { display:flex; flex-direction:column; } .cov-add { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-family:var(--mono); font-size:11px; color:var(--fg-mute); transition:color .16s; } .cov-add:hover { color:var(--link); } /* orquestrador de coletas — MOBILE-FIRST: nome da fonte sempre em cima e visível; grid só no desktop. (não depende de media query max-width, então não quebra em webview/cache antigo) */ .collector-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:13px 20px; border-bottom:1px solid var(--border); } .collector-row:last-child { border-bottom:none; } .collector-row .co-src { flex-basis:100%; font-size:12.5px; word-break:break-all; color:var(--fg); } .collector-row .co-ago { font-size:11px; } .collector-row .co-interval { display:flex; gap:6px; align-items:center; } .collector-row .knob-num { width:84px; } .collector-row .co-actions { margin-left:auto; display:flex; gap:8px; align-items:center; } @media (min-width:820px) { .collector-row { display:grid; grid-template-columns:1.7fr .9fr 1.1fr auto; gap:12px; } .collector-row .co-src { flex-basis:auto; } .collector-row .co-actions { margin-left:0; justify-content:flex-end; } } .cov-node { width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px color-mix(in srgb,var(--ok) 55%,transparent); display:inline-block; } /* buttons */ .btn-accent { display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--accent); color:var(--accent-ink); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:11px 16px; border-radius:8px; font-weight:500; } .btn-accent:hover { background:#ffb01f; } .mini-btn { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; padding:5px 10px; border:1px solid var(--border); border-radius:6px; color:var(--fg-mute); transition:all .15s; } .mini-btn:hover { color:var(--fg); border-color:var(--fg-dim); } /* nível de criticidade ATUAL: marcado (âmbar) e não-clicável — sobrepõe o cinza padrão de :disabled */ .mini-btn.accent { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 15%,transparent); opacity:1; cursor:default; } /* variante destrutiva: outline vermelho (Retirar/Rejeitar) */ /* Investigation Hub — abas por entidade (#166) */ .hub-tabs { display:flex; gap:2px; flex-wrap:wrap; border-bottom:1px solid var(--border); margin-bottom:16px; } .hub-tab-btn { appearance:none; background:transparent; border:0; border-bottom:2px solid transparent; color:var(--fg-mute); font-family:var(--mono); font-size:12px; letter-spacing:.03em; padding:10px 14px; cursor:pointer; margin-bottom:-1px; transition:color .15s,border-color .15s; } .hub-tab-btn:hover { color:var(--fg); } .hub-tab-btn.active { color:var(--fg); border-bottom-color:var(--accent); } .hub-tab-n { display:inline-block; margin-left:5px; font-size:10px; color:var(--fg-dim); } .hub-tab-btn.active .hub-tab-n { color:var(--link); } .hub-panel[hidden] { display:none; } /* central de notificações (#186) — sino + dropdown
*/ .notif { position:relative; } .notif > summary { list-style:none; cursor:pointer; } .notif > summary::-webkit-details-marker { display:none; } .notif-bell { display:inline-grid; place-items:center; position:relative; width:34px; height:34px; border:1px solid var(--border); border-radius:8px; color:var(--fg-mute); transition:color .15s,border-color .15s; } .notif-bell:hover { color:var(--fg); border-color:var(--fg-dim); } .notif-dot { position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--crit); color:#fff; font-family:var(--mono); font-size:9.5px; line-height:16px; text-align:center; } .notif-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:120; width:300px; max-width:86vw; background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); overflow:hidden; } .notif-head { padding:11px 14px; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute); border-bottom:1px solid var(--border); } .notif-item { display:flex; align-items:flex-start; gap:10px; padding:11px 14px; text-decoration:none; color:var(--fg); border-bottom:1px solid var(--border-soft); } .notif-item:hover { background:var(--bg-raised); } .notif-item > [class^="dot-"] { margin-top:5px; flex-shrink:0; } .notif-body { display:flex; flex-direction:column; gap:2px; min-width:0; } .notif-title { font-size:12.5px; } .notif-sub { font-size:11px; color:var(--fg-mute); overflow-wrap:anywhere; } .notif-empty { padding:20px 14px; text-align:center; color:var(--fg-mute); font-size:12px; } .notif-foot { display:block; padding:10px 14px; text-align:center; font-size:11px; color:var(--fg-mute); text-decoration:none; } .notif-foot:hover { color:var(--link); } /* chip de entidade em foco (#165) */ .focus-chip { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 4px 0 10px; margin-left:4px; border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:20px; font-family:var(--mono); font-size:11.5px; color:var(--fg); max-width:260px; } .focus-dot { color:var(--link); } .focus-host { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .focus-x { color:var(--fg-mute); text-decoration:none; padding:0 5px; border-radius:50%; font-size:14px; line-height:1; } .focus-x:hover { color:var(--crit); } /* busca global / command palette (⌘K) */ /* `position:relative` é obrigatório: o badge do copilot é `position:absolute` com `right:-6px`, e sem um pai posicionado ele se ancora no VIEWPORT — ia parar no canto direito da tela, longe do próprio botão, e os 6px negativos viravam rolagem horizontal permanente em todas as páginas. `.notif-bell`, que tem o mesmo padrão de badge, já era relative. */ .cmdk-trigger { position:relative; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 10px; border:1px solid var(--border); border-radius:8px; color:var(--fg-mute); background:transparent; cursor:pointer; transition:color .15s,border-color .15s; } .cmdk-trigger:hover { color:var(--fg); border-color:var(--fg-dim); } .cmdk-kbd { font-family:var(--mono); font-size:10px; color:var(--fg-dim); border:1px solid var(--border); border-radius:4px; padding:1px 5px; } .cmdk-wrap[hidden] { display:none; } .cmdk-wrap { position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; } .cmdk-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); } .cmdk-box { position:relative; width:92%; max-width:560px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; } .cmdk-input { width:100%; box-sizing:border-box; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--fg); font-family:var(--mono); font-size:15px; padding:16px 18px; outline:none; } .cmdk-results { max-height:60vh; overflow:auto; padding:6px; } .cmdk-hint { color:var(--fg-dim); font-size:11px; padding:14px 16px; font-family:var(--mono); } .cmdk-group { padding:9px 10px 3px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-mute); } .cmdk-item { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px; text-decoration:none; color:var(--fg); } .cmdk-item:hover, .cmdk-item:focus, .cmdk-item.kbd-sel { background:var(--bg-raised); } .cmdk-item.kbd-sel { box-shadow:inset 2px 0 0 var(--accent); } .cmdk-item .l { font-family:var(--mono); font-size:12.5px; overflow-wrap:anywhere; } .cmdk-item .s { font-size:11px; color:var(--fg-mute); margin-left:auto; white-space:nowrap; padding-left:8px; } /* KPICard unificado (.stat-card) — usado por _kpi.html em todas as telas com KPIs */ .stat-card { background:var(--bg-surface); border:1px solid var(--border); border-radius:10px; padding:16px 18px; display:flex; flex-direction:column; min-width:0; } .stat-val { font-family:var(--mono); font-size:28px; font-weight:500; letter-spacing:-.02em; line-height:1; } .stat-unit { font-size:15px; color:var(--fg-mute); margin-left:2px; } .stat-label { font-size:11.5px; color:var(--fg-mute); margin-top:6px; } .stat-meta { font-family:var(--mono); font-size:10px; color:var(--fg-dim); margin-top:4px; } .stat-delta { font-family:var(--mono); font-size:10.5px; margin-top:8px; letter-spacing:.03em; } .stat-spark { margin-top:10px; display:block; overflow:visible; } /* accordion (progressive disclosure) —
com */ .acc > summary { list-style:none; cursor:pointer; } .acc > summary::-webkit-details-marker { display:none; } .acc-sum > :first-child { margin-right:auto; } /* título à esquerda; badge + seta agrupados à direita */ .acc-sum::after { content:"▸"; color:var(--fg-mute); font-size:11px; margin-left:10px; flex-shrink:0; align-self:center; } .acc[open] > .acc-sum::after { content:"▾"; } /* cabeçalho de tabela ordenável (client-side) */ .lt-h { cursor:pointer; user-select:none; } .lt-h:hover { color:var(--fg); } .lt-h[data-arrow]::after { content:" " attr(data-arrow); font-size:9px; color:var(--link); } .mini-btn.danger { color:var(--crit); border-color:color-mix(in srgb,var(--crit) 35%,transparent); } .mini-btn.danger:hover { color:var(--crit); border-color:var(--crit); background:var(--crit-bg); } /* menu de ações secundárias por linha (⋮) —
nativo, sem JS */ .row-menu { position:relative; display:inline-block; } .row-menu > summary { list-style:none; cursor:pointer; } .row-menu > summary::-webkit-details-marker { display:none; } .row-menu > summary::marker { content:""; } .row-menu-pop { position:absolute; right:0; top:calc(100% + 4px); z-index:30; display:flex; flex-direction:column; min-width:150px; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; padding:4px; box-shadow:var(--shadow); } .row-menu-item { text-align:left; font-family:var(--mono); font-size:11px; padding:7px 10px; border-radius:5px; color:var(--fg-mute); background:transparent; border:0; cursor:pointer; transition:all .12s; } .row-menu-item:hover { color:var(--fg); background:var(--bg-raised); } .row-menu-item.danger { color:var(--crit); } .row-menu-item.danger:hover { background:var(--crit-bg); } /* variante de erro: o toast padrão é verde/ok, e falha precisa ler como falha */ .toast-err { background:#2a0d0d; border-color:var(--crit); color:var(--crit); } .toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; background:#0d2a17; border:1px solid var(--ok); color:var(--ok); font-family:var(--mono); font-size:13px; padding:14px 20px; border-radius:10px; box-shadow:var(--shadow); z-index:200; } /* ── theme toggle (topbar) ─────────────────────────────────────── */ .theme-toggle { display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:8px; color:var(--fg-mute); transition:color .15s, border-color .15s; } .theme-toggle:hover { color:var(--fg); border-color:var(--fg-dim); } .theme-toggle .ico-sun { display:none; } .theme-toggle .ico-moon { display:block; } [data-theme="light"] .theme-toggle .ico-sun { display:block; } [data-theme="light"] .theme-toggle .ico-moon { display:none; } .top-lnk { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--fg-mute); border:1px solid var(--border); border-radius:6px; padding:5px 9px; transition:color .15s, border-color .15s; } .top-lnk:hover { color:var(--fg); border-color:var(--fg-dim); } /* ── executive: risk-posture hero ──────────────────────────────── */ .sec-note { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--fg-mute); text-transform:uppercase; } .pager { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--border-soft); } .pager-nav { display:flex; align-items:center; gap:8px; } .pager .mini-btn[disabled] { opacity:.4; pointer-events:none; } /* ── exposição: toolbar de filtro por lista ────────────────────── */ .expo-toolbar { display:flex; align-items:center; gap:7px; flex-wrap:wrap; justify-content:flex-end; max-width:66%; } .expo-toolbar .cfg-input { flex:0 1 auto; min-width:0; width:auto; padding:6px 9px; font-size:11.5px; } .expo-toolbar .expo-q { min-width:140px; } .expo-toolbar .expo-sel { cursor:pointer; color:var(--fg-mute); } .expo-toolbar .htmx-request.cfg-input, .expo-toolbar.htmx-request { opacity:.6; } .dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; } .hero { display:grid; grid-template-columns:minmax(320px,0.9fr) 1fr; margin-bottom:16px; } .hero-l { padding:26px 28px; border-right:1px solid var(--border-soft); } .hero-eyebrow { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; } .grade-top { display:flex; align-items:flex-end; gap:18px; } .grade-letter { font-family:var(--serif); font-size:96px; line-height:.8; } .grade-meta { padding-bottom:8px; } .grade-score { font-family:var(--mono); font-size:22px; font-weight:500; color:var(--fg); } .grade-score span { color:var(--fg-dim); font-size:15px; } .grade-tags { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; } .grade-bands { display:flex; gap:6px; margin-top:24px; } .band { flex:1; text-align:center; padding:9px 0 8px; border-radius:8px; border:1px solid var(--border); background:var(--bg); } .band-g { font-family:var(--serif); font-size:20px; line-height:1; color:var(--fg-dim); } .band-r { font-family:var(--mono); font-size:9px; letter-spacing:.04em; color:var(--fg-dim); margin-top:5px; } .band.on .band-g, .band.on .band-r { color:currentColor; } .hero-r { padding:26px 28px; display:flex; flex-direction:column; } /* 20px laterais como `.sec-head` e `.trow` — era o único tipo de linha de painel sem recuo, então o CTA encostava na borda (1px) e as linhas ficavam 20px fora do alinhamento do próprio título da seção. */ .driver { display:flex; align-items:center; gap:14px; padding:13px 20px; border-bottom:1px solid var(--border-soft); } .driver:last-child { border-bottom:none; } .driver-n { font-family:var(--serif); font-size:28px; line-height:.9; min-width:34px; text-align:center; } .driver-txt { flex:1; font-size:13.5px; color:var(--fg); } .driver-txt small { display:block; font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); margin-top:2px; } .chev { color:var(--fg-dim); flex-shrink:0; } .driver:hover .chev { color:var(--fg-mute); } /* executive KPI strip (augments .kpi) */ .kpi { display:flex; flex-direction:column; } .kpi-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:14px; } .kpi-flag { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; } .kpi-value .u { font-size:19px; color:var(--fg-mute); margin-left:2px; } .kpi-meter { height:4px; border-radius:3px; background:var(--border); margin:16px 0 10px; position:relative; } .kpi-fill { height:100%; border-radius:3px; } .kpi-tick { position:absolute; top:-3px; width:2px; height:10px; border-radius:2px; background:var(--fg-mute); } .kpi-target { font-family:var(--mono); font-size:10px; color:var(--fg-dim); } /* executive generic tables */ .tbl-thead { display:grid; padding:11px 22px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); border-bottom:1px solid var(--border-soft); background:var(--bg-raised); } .tbl-row { display:grid; padding:14px 22px; align-items:center; border-bottom:1px solid var(--border-soft); transition:background .15s; } .tbl-row:last-child { border-bottom:none; } .tbl-row:hover { background:var(--bg-hover); } .tbl-thead > *, .tbl-row > * { min-width:0; } .tbl-row .cell-mono { white-space:nowrap; } .num { font-family:var(--mono); font-size:12.5px; } .right { text-align:right; justify-self:end; } .center { text-align:center; justify-self:center; } .sla-cols { grid-template-columns:120px 1fr 1fr 1.4fr 130px; gap:14px; } .sla-att { display:flex; align-items:center; gap:10px; } .att-track { flex:1; height:5px; border-radius:3px; background:var(--border); overflow:hidden; } .att-fill { display:block; height:100%; border-radius:3px; } .att-num { font-family:var(--mono); font-size:12px; min-width:38px; text-align:right; } .sla-tgt { color:var(--fg); } .sla-tgt small { color:var(--fg-mute); font-size:11px; } .exp-cols { grid-template-columns:1.6fr 130px 1fr 100px 110px; gap:14px; } .jewel { display:flex; align-items:center; gap:12px; padding:14px 22px; border-bottom:1px solid var(--border-soft); } .jewel:last-child { border-bottom:none; } .jewel:hover { background:var(--bg-hover); } .jewel-main { flex:1; min-width:0; } .jewel-name { font-family:var(--mono); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .jewel-kind { font-family:var(--mono); font-size:10px; color:var(--fg-mute); margin-top:3px; } .jewel-tags { display:flex; gap:6px; flex-shrink:0; } .vuln-cols { grid-template-columns:1.3fr 1.2fr 1fr 120px 90px 90px; gap:14px; } .epss-bar { display:flex; align-items:center; gap:8px; } .epss-track { width:44px; height:4px; border-radius:3px; background:var(--border); overflow:hidden; } .epss-fill { display:block; height:100%; border-radius:3px; background:var(--fg-mute); } .two-col { display:grid; grid-template-columns:1fr 380px; gap:16px; align-items:start; } .stack-gap { margin-bottom:16px; } /* incidente — barra de caso (Pipeline + Responsável + SLA) */ .case-bar { display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:14px 24px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; margin-bottom:14px; } .case-bar-group { display:flex; align-items:center; gap:10px; } .case-bar-group + .case-bar-group { border-left:1px solid var(--border-soft); padding-left:18px; } .case-bar-label { font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); } .case-bar-sla { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; } .stepper { display:flex; align-items:center; gap:0; } .step { display:inline-flex; align-items:center; gap:8px; } .step.done .step-dot { background:var(--ok); border-color:var(--ok); } .step.cur .step-dot { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); } .step.cur .step-dot::after { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); } .step.cur .step-label { color:var(--fg); } .step.done .step-label { color:var(--fg-mute); } .step-dot { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border); display:grid; place-items:center; color:var(--bg); flex-shrink:0; transition:all .2s; } .step-line { width:26px; height:1px; background:var(--border); margin:0 8px; flex-shrink:0; } .step-line.on { background:var(--ok); } .step-label { font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--fg-mute); white-space:nowrap; } .assign-btn { display:inline-flex; align-items:center; gap:9px; padding:6px 10px 6px 6px; border:1px solid var(--border); border-radius:8px; } .assign-name { font-size:12.5px; font-weight:500; } .av { display:inline-grid; place-items:center; border-radius:50%; border:1.5px solid var(--fg-mute); font-family:var(--mono); font-size:10px; font-weight:600; flex-shrink:0; line-height:1; } .sla { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:4px 9px; border:1px solid; border-radius:20px; white-space:nowrap; } .sla b { font-weight:600; } .sla-label { color:var(--fg-mute); letter-spacing:.04em; } .age-badge { font-family:var(--mono); font-size:9.5px; color:var(--fg-dim); margin-left:5px; padding:1px 5px; border:1px solid var(--border); border-radius:4px; } @media (max-width:768px) { /* no celular os 5 rótulos do pipeline não cabem numa linha → cada grupo full-width e o stepper vira timeline VERTICAL (rótulo do grupo em cima, passos empilhados). */ .case-bar { gap:16px; padding:14px 16px; } .case-bar-group { flex-direction:column; align-items:flex-start; gap:9px; width:100%; } .case-bar-group + .case-bar-group { border-left:none; padding-left:0; } .case-bar-sla { margin-left:0; width:100%; } .stepper { flex-direction:column; align-items:flex-start; gap:0; } .step-line { width:1px; height:14px; margin:2px 0 2px 8px; } } /* incidente — sumário (IA) + disposição do analista (segmented controls) */ .id-summary { padding:16px 20px 20px; font-size:15px; line-height:1.6; color:var(--fg); } .dispo { padding:14px 20px 18px; display:flex; flex-direction:column; gap:16px; } .dispo-row { display:flex; flex-direction:column; gap:9px; } .dispo-label { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); } .seg { display:inline-flex; gap:3px; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:3px; flex-wrap:wrap; } .seg-btn { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.02em; padding:8px 12px; border-radius:7px; color:var(--fg-mute); transition:all .14s; } .seg-btn svg { width:14px; height:14px; flex-shrink:0; opacity:.8; } .seg-btn .dot { width:8px; height:8px; flex-shrink:0; opacity:.45; transition:opacity .14s, box-shadow .14s; } .seg-btn:hover { color:var(--fg); } .seg-btn:hover .dot { opacity:.85; } /* selecionado: tinge com a própria cor semântica (traffic-light na classificação, tom na severidade) */ .seg-btn.on { color:var(--fg); } .seg-btn.on .dot { opacity:1; box-shadow:0 0 7px color-mix(in srgb, currentColor 55%, transparent); } .seg-btn.tone-crit.on { color:var(--crit); background:var(--crit-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--crit) 42%,transparent); } .seg-btn.tone-high.on { color:var(--high); background:var(--high-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--high) 42%,transparent); } .seg-btn.tone-med.on { color:var(--med); background:var(--med-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--med) 42%,transparent); } .seg-btn.tone-low.on { color:var(--low); background:var(--low-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--low) 42%,transparent); } .seg-btn.tone-ok.on { color:var(--ok); background:var(--ok-bg); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ok) 42%,transparent); } .seg-btn.tone-crit:hover { color:var(--crit); } .seg-btn.tone-high:hover { color:var(--high); } .seg-btn.tone-med:hover { color:var(--med); } .seg-btn.tone-low:hover { color:var(--low); } .seg-btn.tone-ok:hover { color:var(--ok); } @media (max-width:1100px) { .hero, .two-col { grid-template-columns:1fr; } .hero-l { border-right:none; border-bottom:1px solid var(--border-soft); } } /* tablet (769–1024px): a sidebar colapsa para um trilho só-ícones (o rótulo vem no title/hover) */ @media (min-width:769px) and (max-width:1024px) { .shell { grid-template-columns:60px 1fr; } .sidebar { padding:16px 6px; } .side-brand { display:none; } .side-group { display:none; } .side-item { justify-content:center; gap:0; padding:11px 0; } .side-item .side-label { display:none; } .side-item .side-note { position:absolute; top:3px; right:7px; margin:0; } .side-foot { padding:12px 4px 4px; } .side-foot-link { justify-content:center; gap:0; padding:10px 0; } .side-foot-link span { display:none; } .side-health, .side-meta { display:none; } } @media (max-width:768px) { .sla-cols, .exp-cols, .vuln-cols { grid-template-columns:1fr; gap:8px; } .tbl-thead { display:none; } .tbl-row { padding:14px 16px; } } /* mobile shell controls — hidden on desktop, activated in the breakpoint below */ .nav-toggle { display:none; } .nav-backdrop { display:none; } .side-tenant { display:none; } .top-left { display:flex; align-items:center; gap:12px; min-width:0; } @media (max-width:1100px) { .kpi-row { grid-template-columns:repeat(3,1fr); } .ov-grid, .cfg-grid { grid-template-columns:1fr; } .assets-grid, .cov-grid { grid-template-columns:repeat(2,1fr); } .cfg-summary { grid-template-columns:repeat(3,1fr); } } @media (max-width:768px) { .shell { grid-template-columns:1fr; } /* sidebar → off-canvas drawer, opened by the hamburger */ .sidebar { position:fixed; top:0; left:0; bottom:0; width:min(84vw,300px); transform:translateX(-100%); transition:transform .22s ease; z-index:60; box-shadow:var(--shadow); } .shell.nav-open .sidebar { transform:translateX(0); } .nav-backdrop { display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); opacity:0; pointer-events:none; transition:opacity .2s; z-index:55; } .shell.nav-open .nav-backdrop { opacity:1; pointer-events:auto; } .nav-toggle { display:inline-grid; place-items:center; width:38px; height:38px; border:1px solid var(--border); border-radius:9px; color:var(--fg); flex-shrink:0; } /* tenant switcher lives in the drawer footer on mobile */ .side-tenant { display:flex; align-items:center; gap:8px; margin-bottom:14px; } .side-tenant select { flex:1; background:var(--bg-surface); border:1px solid var(--border); border-radius:8px; color:var(--fg); padding:9px 10px; font-family:var(--mono); font-size:12px; outline:none; } /* topbar: hamburger + title only; drop the placeholder search, desktop tenant, crumb e email */ .topbar { height:auto; min-height:var(--topbar-h); padding:10px 14px; gap:8px; align-items:center; } .top-tenant, .top-crumb, .top-user-email { display:none; } .top-left { flex:1 1 auto; } .top-heading { min-width:0; } .top-title { font-size:20px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .top-right { flex-shrink:0; } .top-user { gap:6px; flex-wrap:wrap; justify-content:flex-end; } /* papel (crit/high/ok) é decorativo no mobile — libera largura p/ o título; mantém "somente leitura" (sev-low) */ .top-user .role-badge { display:none; } .page { padding:18px 14px 88px; } /* stack the dense grids */ .kpi-row, .surface-stats, .cov-grid { grid-template-columns:repeat(2,1fr); } .assets-grid, .ov-grid, .cfg-grid { grid-template-columns:1fr; } .cfg-summary { grid-template-columns:repeat(3,1fr); } /* dense tables → stacked cards no mobile. TODAS as listas de Exposição (#expo-*) usam grid-template-columns inline; no celular viram flex-wrap com o 1º campo (mono) em linha própria e o resto fluindo abaixo — em vez de colunas de 1 caractere que quebravam a tela. */ [id^="expo-"] .thead { display:none; } [id^="expo-"] .trow { display:flex !important; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; grid-template-columns:none !important; padding:14px 16px; } [id^="expo-"] .trow > .cell-mono:first-child { flex-basis:100%; font-size:12.5px; overflow-wrap:anywhere; color:var(--fg); text-align:left !important; } [id^="expo-"] .trow > * { text-align:left !important; } [id^="expo-"] .trow .riskbar-track { display:none; } [id^="expo-"] .trow .badge, [id^="expo-"] .trow .src-pill { flex-shrink:0; } /* toolbar de filtro: full-width abaixo do título (não espremer o título) */ .expo-toolbar { max-width:100%; width:100%; justify-content:flex-start; } .expo-toolbar .expo-q { flex:1 1 140px; } .sec-head { flex-wrap:wrap; } /* held-pivot + takedown + detect-rule rows: stack so the action buttons never crush */ #held-list .trow { grid-template-columns:1fr !important; gap:8px !important; } .td-row, .detect-rule, .channel-row { grid-template-columns:1fr !important; gap:10px !important; } .td-row > span:last-child, .detect-rule > span:last-child, .channel-row > span:last-child { justify-content:flex-start !important; } .detect-hit, .conn-row, .audit-row { grid-template-columns:1fr auto !important; gap:6px 10px !important; } .enrich-row, .admin-row { grid-template-columns:1fr !important; gap:8px !important; } .enrich-row > span:last-child, .admin-row > span:last-child { justify-content:flex-start !important; } .top-user-email { display:none; } /* keep the mobile topbar compact */ /* módulos (Escopo) + DSR: garantir que os controles nunca sejam cortados */ #config-modules .cfg-knob, #config-knobs .cfg-knob { flex-wrap:wrap; gap:8px; } /* incident rows: drop the risk track so the score never clips off-edge */ .inc-row { gap:12px; } .inc-row .riskbar-track { display:none; } .ov-grid .panel + .panel { margin-top:16px; } /* ⌘K / ⌘. são dicas de teclado físico — no celular não servem e ainda roubam a largura do .top-title, que ficava truncado numa letra só. Mantém os botões, esconde as teclas. */ .cmdk-kbd { display:none; } .cmdk-trigger { padding:0 9px; } .top-right { gap:8px; } /* Executivos (#vips-body): as linhas usam grid-template-columns inline (1.6fr 1fr 0.8fr 1fr…) que no celular viram colunas de poucos px — os badges "N ident." e "ativo" se sobrepunham. Mesmo tratamento das listas de Exposição: flex-wrap, 1º campo em linha própria, resto abaixo. */ #vips-body .trow { display:flex !important; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; grid-template-columns:none !important; padding:14px 16px; } /* depois da regra .trow acima (mesma especificidade) e com !important, senão o display:flex da linha vence e o cabeçalho reaparece empilhado. */ #vips-body .vips-thead { display:none !important; } #vips-body .trow > .cell-mono:first-child { flex-basis:100%; font-size:12.5px; overflow-wrap:anywhere; color:var(--fg); text-align:left !important; } #vips-body .trow > * { text-align:left !important; } #vips-body .trow > span:last-child { justify-content:flex-start !important; } #vips-body .trow .badge, #vips-body .trow .mini-btn { flex-shrink:0; } /* formulários (+ Executivo / + Ligar): os inputs tinham flex:2/flex:1 inline e lado a lado cortavam o placeholder no meio ("Nome completo do e") → empilha full-width. */ #vips-body .cfg-add-main { flex-direction:column; align-items:stretch; } #vips-body .cfg-add-main .cfg-input { flex:1 1 auto !important; width:100%; min-width:0; } #vips-body .cfg-add-main .cfg-add-btn { width:100%; justify-content:center; } } /* ── copilot persistente (#176) — dock à direita, overlay deslizante ────────── */ .copilot { position:fixed; top:0; right:0; height:100vh; width:390px; max-width:92vw; z-index:130; display:flex; flex-direction:column; background:var(--bg-surface); border-left:1px solid var(--border); box-shadow:var(--shadow); transform:translateX(100%); transition:transform .22s ease; } body.copilot-open .copilot { transform:translateX(0); } .copilot-head { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); } .copilot-title { font-family:var(--serif); font-size:17px; color:var(--fg); display:flex; align-items:center; gap:8px; } .copilot-hbadge { font-family:var(--mono); font-size:10px; background:var(--accent); color:var(--accent-ink); padding:1px 7px; border-radius:10px; } .copilot-x { width:28px; height:28px; display:grid; place-items:center; border-radius:6px; color:var(--fg-mute); font-size:18px; line-height:1; transition:color .15s,background .15s; } .copilot-x:hover { color:var(--fg); background:var(--bg-hover); } .copilot-body { flex:1; min-height:0; display:flex; flex-direction:column; padding:14px 16px; overflow-y:auto; } #copilot-body-inner { display:flex; flex-direction:column; flex:1; min-height:0; } .copilot-sub { font-size:11.5px; color:var(--fg-mute); margin-bottom:12px; } .copilot-sugs { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; } .copilot-sugs-head { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); margin-bottom:2px; } .copilot-sug { display:flex; align-items:flex-start; gap:9px; padding:9px 11px; border:1px solid var(--border); border-radius:9px; background:var(--bg-raised); color:var(--fg); font-size:12.5px; line-height:1.4; transition:border-color .15s; } .copilot-sug:hover { border-color:var(--fg-dim); } .copilot-sug-dot { flex-shrink:0; width:7px; height:7px; border-radius:50%; margin-top:5px; background:var(--fg-mute); } .copilot-sug.tone-crit .copilot-sug-dot { background:var(--crit); } .copilot-sug.tone-high .copilot-sug-dot { background:var(--high); } .copilot-sug.tone-info .copilot-sug-dot { background:var(--accent); } .copilot-sug.tone-low .copilot-sug-dot { background:var(--low); } /* host em foco, mas quieto */ .copilot-log { flex:1; min-height:0; display:flex; flex-direction:column; gap:12px; overflow-y:auto; padding:2px 0 6px; } .copilot-hello { font-size:12.5px; color:var(--fg-mute); line-height:1.5; padding:10px 12px; background:var(--bg-hover); border-radius:9px; } .copilot-turn { display:flex; flex-direction:column; gap:8px; } .copilot-msg { font-size:13px; line-height:1.5; padding:9px 12px; border-radius:11px; white-space:pre-wrap; overflow-wrap:anywhere; } .copilot-msg.user { align-self:flex-end; max-width:85%; background:var(--bg-active); color:var(--fg); border:1px solid var(--border); } .copilot-msg.bot { align-self:flex-start; max-width:92%; background:var(--bg-raised); color:var(--fg); border:1px solid var(--border); } .copilot-msg.bot.heuristic { color:var(--fg-mute); font-size:12px; } /* citação: o que a resposta leu. Discreta — é para conferir, não para competir com o texto. */ .copilot-sources { display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:0 2px; } .copilot-sources-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-mute); } .copilot-src { font-size:10px; color:var(--fg-mute); background:var(--bg-active); border:1px solid var(--border); border-radius:999px; padding:1px 7px; } /* proposta: ação preenchida esperando confirmação humana. Precisa ler como "ainda não aconteceu" — um cartão que parecesse recibo faria o analista acreditar num efeito que não houve. */ .copilot-prop { border:1px solid var(--border); border-left:3px solid var(--fg-mute); border-radius:9px; padding:9px 11px; display:flex; flex-direction:column; gap:5px; background:var(--bg-raised); } .copilot-prop.tone-high { border-left-color:var(--high); } .copilot-prop.tone-crit { border-left-color:var(--crit); } .copilot-prop.tone-info { border-left-color:var(--accent); } .copilot-prop-head { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); } .copilot-prop-title { font-size:12.5px; line-height:1.45; color:var(--fg); } .copilot-prop-effect { font-size:11px; line-height:1.45; color:var(--fg-mute); } .copilot-prop-btn { align-self:flex-start; font:inherit; font-size:11.5px; cursor:pointer; margin-top:2px; padding:4px 12px; border-radius:7px; border:1px solid var(--border); background:var(--bg-active); color:var(--fg); } .copilot-prop-btn:hover:not(:disabled) { border-color:var(--fg-dim); } .copilot-prop-btn:disabled { cursor:default; color:var(--fg-mute); } .copilot-prop.done { border-left-color:var(--ok); opacity:.72; } /* espera: só existe enquanto a requisição está em voo (htmx-request vem do htmx) */ .copilot-wait { display:none; font-size:11px; color:var(--fg-mute); padding:2px 4px 6px; } .copilot-wait.htmx-request { display:block; } @media (prefers-reduced-motion: no-preference) { .copilot-wait.htmx-request { animation:copilot-pulse 1.4s ease-in-out infinite; } } @keyframes copilot-pulse { 0%,100% { opacity:.55; } 50% { opacity:1; } } .copilot-form { flex-shrink:0; display:flex; gap:8px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px solid var(--border); } .copilot-input { flex:1; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:10px 12px; color:var(--fg); font-size:13px; outline:none; transition:border-color .15s; } .copilot-input:focus { border-color:var(--accent); } .copilot-send { flex-shrink:0; width:38px; height:38px; display:grid; place-items:center; border-radius:9px; background:var(--accent); color:var(--accent-ink); font-size:16px; font-weight:600; transition:opacity .15s; } .copilot-send:disabled { opacity:.5; } .copilot-dot { top:-6px; right:-6px; } @media (max-width:640px){ .copilot { width:100vw; } } /* indicador de carregando animado (achado 7) — lê como "trabalhando", não "travado" */ @keyframes lelPulse { 0%,100% { opacity:.4 } 50% { opacity:.95 } } .lel-loading { display:inline-flex; align-items:center; gap:8px; animation:lelPulse 1.2s ease-in-out infinite; } .lel-loading::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; animation:lelPulse 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .lel-loading, .lel-loading::before { animation:none; opacity:.7; } } /* aviso de expiração de sessão (achado 1) */ .sess-modal { position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center; } .sess-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.55); } .sess-box { position:relative; width:92%; max-width:400px; background:var(--bg-surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:22px; } .sess-title { font-family:var(--serif); font-size:19px; color:var(--fg); margin-bottom:8px; } .sess-msg { font-size:13px; color:var(--fg-mute); line-height:1.55; margin-bottom:18px; } .sess-actions { display:flex; gap:10px; justify-content:flex-end; } /* Exposição — KPIs agrupados em clusters visuais (achado 2b) */ .expo-kpis { display:flex; flex-direction:column; gap:18px; margin-bottom:18px; } .expo-panorama { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:2px; border-bottom:1px solid var(--border-soft); } .expo-panorama-num { font-family:var(--serif); font-size:30px; line-height:1; color:var(--high); } .expo-panorama-lbl { font-size:14px; color:var(--fg); } .expo-panorama-hint { font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); margin-left:2px; } .expo-kpi-group { display:flex; flex-direction:column; gap:9px; } .expo-kpi-label { font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); display:flex; align-items:center; gap:7px; } .expo-kpi-dot { width:7px; height:7px; border-radius:2px; flex-shrink:0; } .expo-kpi-dot.tone-crit { background:var(--crit); } .expo-kpi-dot.tone-high { background:var(--high); } .expo-kpi-dot.tone-med { background:var(--med); } .expo-kpi-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } @media (max-width:1024px) { .expo-kpi-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:560px) { .expo-kpi-cards { grid-template-columns:1fr; } } /* onboarding guiado — checklist de primeiros passos (LEL-UX-405) */ .onboard { margin-bottom:16px; padding:18px 20px; border-color:color-mix(in srgb,var(--accent) 28%,var(--border)); } .onboard-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; } .onboard-head-right { display:flex; align-items:center; gap:10px; flex-shrink:0 } .onboard-count { font-size:11px; color:var(--fg-mute); } .onboard-x { width:26px; height:26px; display:grid; place-items:center; border-radius:6px; color:var(--fg-mute); font-size:17px; line-height:1; transition:color .15s,background .15s; } .onboard-x:hover { color:var(--fg); background:var(--bg-hover); } .onboard-bar { height:5px; border-radius:3px; background:var(--bg-active); margin:12px 0 16px; overflow:hidden; } .onboard-fill { display:block; height:100%; background:var(--accent); border-radius:3px; transition:width .3s ease; } .onboard-steps { display:flex; flex-direction:column; gap:8px; } .onboard-step { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; border:1px solid var(--border); background:var(--bg-raised); } .onboard-step.done { opacity:.72; } .onboard-mark { flex-shrink:0; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; font-family:var(--mono); font-size:11px; } .onboard-step.todo .onboard-mark { background:color-mix(in srgb,var(--accent) 16%,transparent); color:var(--link); border:1px solid color-mix(in srgb,var(--accent) 40%,transparent); } .onboard-step.done .onboard-mark { background:color-mix(in srgb,var(--ok) 18%,transparent); color:var(--ok); } .onboard-body { flex:1; min-width:0; } .onboard-step-title { font-size:13px; color:var(--fg); } .onboard-step-desc { font-size:11.5px; color:var(--fg-mute); margin-top:2px; } .onboard-done-tag { flex-shrink:0; font-size:10px; color:var(--ok); text-transform:uppercase; letter-spacing:.06em; } .onboard-cta { flex-shrink:0; } /* Critic — banner de possível falso positivo no Hub (LEL-UX-310); só sinaliza, não age */ .critic-flag { border-color:color-mix(in srgb,var(--med) 45%,var(--border)); border-left:3px solid var(--med); background:color-mix(in srgb,var(--med) 7%,var(--bg-surface)); } /* ── slider de risco do playbook ─────────────────────────────────────────── */ .pb-slider { display:flex; flex-direction:column; gap:6px; width:260px; } .pb-slider input[type=range] { width:100%; accent-color:var(--accent); cursor:pointer; margin:0; } .pb-slider output { display:flex; align-items:center; gap:8px; font-size:11.5px; min-height:20px; } /* a escala mostra ONDE cada faixa começa — sem ela o operador arrasta às cegas */ .pb-scale { display:flex; justify-content:space-between; font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-mute); } /* ── conectores ITSM: uma linha por conector, formulário sob demanda ───────── Antes eram três formulários de credencial abertos ao mesmo tempo. No celular virava uma parede de campos vazios que não respondia a pergunta que importa: qual deles está configurado. */ .itsm-row { border-top:1px solid var(--border); } .itsm-disc { display:block; } .itsm-sum { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 4px; cursor:pointer; list-style:none; } .itsm-sum::-webkit-details-marker { display:none; } /* triângulo nativo do Safari */ .itsm-sum:hover .itsm-act { border-color:var(--fg-dim); color:var(--fg); } .itsm-sum:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; } .itsm-name { font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--fg); min-width:96px; } .itsm-state { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--fg-mute); margin-right:auto; } .itsm-dot { width:7px; height:7px; border-radius:50%; background:var(--fg-mute); flex-shrink:0; } .itsm-state.tone-ok .itsm-dot { background:var(--ok); } .itsm-state.tone-high .itsm-dot { background:var(--high); } .itsm-state.tone-low .itsm-dot { background:var(--fg-mute); } /* o "botão" do summary é decorativo: o clique é do , senão viraria controle dentro de controle e o teclado teria dois alvos para a mesma ação */ .itsm-act { font-size:11px; padding:3px 10px; border-radius:7px; border:1px solid var(--border); color:var(--fg-mute); white-space:nowrap; } details[open] > .itsm-sum .itsm-act { color:var(--fg); border-color:var(--fg-dim); } /* teste de credencial: só existe para conector completo, então não pesa nas linhas vazias */ .itsm-verify { display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:0 4px 12px; } .itsm-vwait { display:none; font-size:11px; color:var(--fg-mute); } .itsm-vwait.htmx-request { display:inline; } .itsm-vres { font-size:11.5px; line-height:1.45; } .itsm-vres.ok { color:var(--ok); } .itsm-vres.bad { color:var(--crit); } .itsm-form { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; padding:2px 4px 14px; } .itsm-field { display:flex; flex-direction:column; gap:4px; flex:1 1 190px; min-width:150px; } .itsm-form .itsm-save { flex:0 0 auto; } @media (max-width:560px) { .itsm-state { margin-right:0; flex-basis:100%; } /* estado desce, não aperta o botão */ .itsm-field { flex-basis:100%; } } /* ── coleta: a hierarquia módulo → coletor, visível ────────────────────────── O módulo é desligado em Escopo e o orquestrador pula o coletor. Antes esta tela mostrava o coletor como "habilitado · sem rodar" e o aviso mandava conferir worker/credencial — a causa errada. Duas telas se contradiziam em silêncio. */ .mod-off { font-size:11px; color:var(--high); text-decoration:none; border:1px solid var(--high); border-radius:999px; padding:2px 9px; white-space:nowrap; } .mod-off:hover { background:var(--high-bg); } /* a linha barrada não pode parecer operante: o toggle ao lado dela não muda nada */ .collector-row.co-blocked { opacity:.6; } .collector-row.co-blocked .co-src { text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--fg-mute); } /* ── plataforma: saúde da operação (superadmin) ──────────────────────────── */ .plat-worker { display:flex; align-items:center; gap:14px; padding:14px 20px; } .plat-worker-h { font-size:13.5px; color:var(--fg); } /* pulso: o estado do worker precisa ser legível antes de qualquer número da tela */ .plat-pulse { width:10px; height:10px; border-radius:50%; flex-shrink:0; background:var(--fg-mute); } .plat-pulse.tone-ok { background:var(--ok); } .plat-pulse.tone-warn { background:var(--high); } .plat-pulse.tone-crit { background:var(--crit); } @media (prefers-reduced-motion: no-preference) { .plat-pulse.tone-ok { animation:plat-batida 2.4s ease-in-out infinite; } } @keyframes plat-batida { 0%,100% { opacity:1; } 50% { opacity:.35; } } .plat-cols { grid-template-columns:1.3fr 0.6fr 1.6fr 2fr; gap:12px; } .plat-sit, .plat-mods { display:flex; flex-wrap:wrap; gap:5px; align-items:center; } .plat-mod { font-family:var(--mono); font-size:9.5px; padding:1px 6px; border-radius:999px; border:1px solid var(--border); color:var(--fg-mute); } .plat-mod.on { color:var(--fg); border-color:var(--fg-dim); } .plat-mod.off { text-decoration:line-through; opacity:.55; } @media (max-width:900px) { .plat-cols { grid-template-columns:1fr 1fr; } .plat-mods { grid-column:1 / -1; } } /* ── relatório mensal (IA) — Fase 2 Task 9 ─────────────────────────────────── Deck validado em scratchpad/unimed-seguros-relatorio.html, portado para os tokens do console (não o token-set próprio do deck) — mesma linguagem visual do resto do produto. */ .report-toolbar { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; } .report-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .report-empty { padding:28px 26px; } .sev-dist { display:flex; gap:2px; height:14px; } .sev-dist-seg { min-width:4px; border-radius:4px; } .sev-dist-legend { display:flex; flex-wrap:wrap; gap:18px; margin-top:12px; } .sev-dist-key { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--fg-mute); } .sev-dist-swatch { width:9px; height:9px; border-radius:3px; display:inline-block; flex-shrink:0; } .sev-dist-key b { color:var(--fg); margin-left:1px; } .report-slide { margin-bottom:16px; } .report-slide:last-of-type { margin-bottom:8px; } .report-annex-badge { display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 45%,transparent); border-radius:20px; padding:3px 10px; margin-bottom:10px; } /* achados em destaque — cartão com "por que importa" */ .report-finds { display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:820px) { .report-finds { grid-template-columns:1fr; } } .report-fcard { background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; padding:16px 18px; display:flex; flex-direction:column; gap:6px; } .report-fcard-top { display:flex; align-items:center; justify-content:space-between; gap:10px; } .report-fwhy { font-size:13px; color:var(--fg-mute); border-left:2px solid var(--accent); padding-left:10px; margin-top:4px; line-height:1.5; } .report-fwhy b { color:var(--fg); } /* recomendações */ .report-recs { display:flex; flex-direction:column; gap:10px; } .report-rec { display:grid; grid-template-columns:24px 1fr auto; gap:14px; align-items:start; background:var(--bg-raised); border:1px solid var(--border); border-radius:10px; padding:13px 16px; } .report-rec-n { color:var(--accent); font-weight:700; font-size:13px; padding-top:2px; } .report-rec-t { font-size:14px; } .report-rec-meta { text-align:right; font-family:var(--mono); font-size:10.5px; color:var(--fg-mute); white-space:nowrap; line-height:1.5; } .report-rec-meta b { display:block; color:var(--fg); font-weight:600; } /* barras de magnitude — sinais por módulo */ .report-bars { display:flex; flex-direction:column; gap:12px; } .report-bar { display:grid; grid-template-columns:170px 1fr 56px; align-items:center; gap:14px; } @media (max-width:640px) { .report-bar { grid-template-columns:100px 1fr 44px; gap:8px; } } .report-bar-l { font-size:13px; color:var(--fg); } .report-bar-track { height:10px; background:var(--bg-raised); border-radius:6px; overflow:hidden; border:1px solid var(--border); } .report-bar-fill { height:100%; background:var(--fg-mute); border-radius:6px; } /* volume ≠ risco: tom neutro, não âmbar de alarme */ /* KPIs do relatório: grade auto-fit preenche a linha (sem os buracos da grade fixa 5-col com 7 cartões) */ .report-kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(158px, 1fr)); gap:14px; } /* P3 — anexo navegável: fronteira exec↔anexo, índice, colapsáveis, zebra */ .report-annex { background:var(--bg); border:1px solid var(--border); border-radius:14px; padding:22px 20px; margin-top:8px; scroll-margin-top:12px; } .report-index { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:baseline; padding:10px 0 16px; border-bottom:1px solid var(--border); margin-bottom:16px; } .report-index-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-dim); } .report-index a { font-size:12.5px; color:var(--link); text-decoration:none; border-bottom:1px solid transparent; } .report-index a:hover { border-bottom-color:currentColor; } .report-index-top { margin-left:auto; color:var(--fg-mute) !important; } .report-page [id^="anexo"] { scroll-margin-top:12px; } /* âncora não cola no topo */ .report-collapse > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:2px 0; } .report-collapse > summary::-webkit-details-marker { display:none; } .report-collapse > summary::before { content:"▸"; color:var(--fg-mute); font-size:11px; transition:transform .12s; } .report-collapse[open] > summary::before { transform:rotate(90deg); } .report-collapse-hint { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-dim); } /* cabeçalhos do relatório: título + badge/hint AGRUPADOS à esquerda (não empurrados à borda, que deixava um vão grande no meio). O .sec-head global continua space-between no resto do console. */ .report-page .sec-head { justify-content:flex-start; align-items:baseline; flex-wrap:wrap; gap:6px 12px; } .report-collapse[open] .report-collapse-hint { visibility:hidden; } /* zebra nas tabelas do relatório — trow ímpar recebe um véu (thead é o 1º filho, então 2n+1 = linhas pares visuais) */ .report-page .table .trow:nth-of-type(even) { background:color-mix(in srgb, var(--fg) 4%, transparent); } .report-exec-note { display:none; } /* só na impressão executiva */ @media print { .report-annex { break-before:page; background:none; border:none; padding:0; } .report-collapse > summary::before, .report-collapse-hint, .report-index { display:none; } /* padrão (completo / Ctrl+P): expande as listas recolhidas → PDF de registro integral */ .report-collapse > *:not(summary) { display:revert !important; } /* executivo: mantém as listas longas RECOLHIDAS (só o resumo/contagem) — a curadoria da tela chega ao entregável; um clique no "PDF completo" traz o registro inteiro. */ #report-root.report-print-exec .report-collapse:not([open]) > *:not(summary) { display:none !important; } #report-root.report-print-exec .report-exec-note { display:block; } } /* recomendações em telas estreitas: o meta (dono/prazo) empilha SOB o título em vez de transbordar pra fora do card e cortar no meio da palavra (o white-space:nowrap era o culpado). */ @media (max-width:900px) { .report-rec { grid-template-columns:24px 1fr; } .report-rec-meta { grid-column:2; text-align:left; white-space:normal; margin-top:5px; } .report-rec-meta b { display:inline; } } /* Risco humano — bloco de prioridade máxima (autolesão/ameaça), não pode diluir na tabela */ .report-crisis { border:1px solid color-mix(in srgb,var(--crit) 40%,transparent); border-left:4px solid var(--crit); background:var(--crit-bg); border-radius:12px; padding:16px 18px; } .report-crisis-head { font-family:var(--mono); text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:700; color:var(--crit); display:flex; align-items:center; gap:8px; } .report-crisis-flag { font-size:15px; line-height:1; } .report-crisis-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:9px 0; border-top:1px solid color-mix(in srgb,var(--crit) 16%,transparent); } .report-crisis-row + .report-crisis-row { } .report-bar-n { font-size:13px; text-align:right; color:var(--fg); } .report-print-footer { display:none; } /* só na impressão */ /* impressão: A4 RETRATO com margens reais (área segura + paginação nativa do navegador de volta); medida de leitura contida; marca de confidencialidade recorrente em cada página. */ @media print { .sidebar, .topbar, .copilot, .nav-backdrop, .report-actions, #cmdk, #sess-modal { display:none !important; } @page { size:A4 portrait; margin:14mm 12mm 18mm; } html, body { -webkit-print-color-adjust:exact; print-color-adjust:exact; } .shell { display:block; height:auto; } .main, .scroll { overflow:visible; height:auto; } .page.report-page { padding:0; max-width:100%; } /* prosa não passa de ~90 caracteres mesmo com a página cheia (era 140–160 em paisagem) */ .report-page p, .report-rec-t, .report-fwhy { max-width:170mm; } .report-slide { break-inside:avoid; page-break-inside:avoid; } .report-fcard, .report-rec, .kpi, .panel, .trow { break-inside:avoid; } .report-cover { break-after:page; page-break-after:always; margin-bottom:0; } .report-cover .panel { min-height:240mm; } /* preenche o retrato (útil ~265mm) sem 2ª página em branco */ .report-print-footer { display:block; position:fixed; bottom:4mm; left:0; right:0; text-align:center; font-family:var(--mono); font-size:8.5px; letter-spacing:.04em; color:var(--fg-mute); } } /* badge de PAPEL de usuário no chrome — neutro, NÃO usa cor de severidade (crítico é risco, não perfil) */ .badge.role-badge { color:var(--fg-mute); border-color:var(--border); background:var(--bg-hover); } .badge.role-badge.role-super { color:var(--accent); border-color:color-mix(in srgb,var(--accent) 35%,transparent); background:transparent; } .report-cover-spacer { min-height:24px; }