/* hub-ds.css — DS v2 Hope (spec S2 FR12–FR15). Tokens = design/design_handoff_painel_completo/README.md ("Skins — tokens"). Dois skins de marca por atributo: . v2 "Azul Ads4Pros" é o PADRÃO: sem data-skin (ou com valor desconhecido) o CSS resolve v2. Os 4 blocos abaixo declaram o MESMO conjunto de nomes (lint de paridade em tests/test_staticShell.py); o que não varia fica no bloco comum. Papéis: --lime = "valor conquistado" (azul em v2) — também como cor de texto/ícone; --limeFill = o mesmo papel como FUNDO que carrega texto --onLime (badge 04, barra/meta batida, marca-texto); --limeBd = contorno desse fundo; --detail/--onDetail = fundo e texto da ação primária; --ok/--warn/--err (FR12) = fundos tonais, bordas, barras e pontos, e o texto de estado usa --*-text (ruling T10-b, FR14: ≥ 4.5:1 em --bk, --cv, linha zebra/hover e fundos tonais); --w-title/--w-btn = pesos (v2 nunca bold); --label-* = rótulo caixa-alta (.hub-kicker). */ :root { --spacing-outer: 10px; --spacing-block: 16px; --spacing-menu: 10px; --r-shell: 18px; --r-ctl: 10px; --r-item: 8px; --r-stage: 6px; --r-box: 12px; --sans: 'Space Grotesk', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --sidebar-w: 200px; --sidebar-w-min: 66px; --sh-overlay: 0 10px 30px rgba(0,0,0,.08); --sh-drawer: -10px 0 40px rgba(0,0,0,.12); --sh-modal: 0 20px 60px rgba(0,0,0,.18); } /* v2 Azul Ads4Pros, claro — também o fallback sem atributo */ :root, :root[data-skin="v2"] { --cv: #f6f7f9; --bk: #ffffff; --ink: #01122c; --gr: #5b6470; --ln: #dee2ea; --hv: #e8f1fc; --zb: rgba(1,18,44,.025); --lime: #0a6ad8; --limeFill: var(--lime); --onLime: #ffffff; --limeBd: var(--limeFill); --detail: #d97706; --onDetail: #18120a; --ok: #02CB00; --warn: #d97706; --err: #C0392B; /* ajustes FR14 (ADR-0009), só L em OKLab, pior fundo = badge 12% sobre a linha com hover (#e8f1fc): --ok-text README #0f7a0e 4.38:1 → #0b780a 4.50:1; --warn-text README #b45309 3.91:1 → #a84800 4.55:1 */ --ok-text: #0b780a; --warn-text: #a84800; --err-text: #B42D20; --scrim: rgba(1,18,44,.45); --logo-filter: none; --w-title: 500; --w-btn: 600; --label-font: var(--mono); --label-spacing: .1em; --label-color: var(--gr); color-scheme: light; /* scrollbars e controles nativos no tom do tema */ } /* v2 escuro — o segundo seletor cobre data-theme="dark" sem data-skin (ou com skin desconhecido) */ :root[data-skin="v2"][data-theme="dark"], :root:not([data-skin="v1"])[data-theme="dark"] { --cv: #01122c; --bk: #061b3a; --ink: #ffffff; --gr: #b4bfcf; --ln: rgba(255,255,255,.12); --hv: rgba(255,255,255,.07); --zb: rgba(255,255,255,.03); /* ajustes FR14 (ADR-0009), só L em OKLab: --lime fica o do README (#3585e0: 4.56:1 como texto sobre --bk), mas #fff sobre ele dá 3.76:1 (badge 04, 12px) → o FUNDO que carrega --onLime desce para #2577d1 (4.53:1); --err-text README #EC6A5C 4.00:1 (badge 12% sobre a linha com hover) → #f77465 4.51:1 */ --lime: #3585e0; --limeFill: #2577d1; --onLime: #ffffff; --limeBd: var(--limeFill); --detail: #d97706; --onDetail: #18120a; --ok: #02CB00; --warn: #d97706; --err: #EC6A5C; --ok-text: #5be066; --warn-text: #f5a340; --err-text: #f77465; --scrim: rgba(1,18,44,.45); --logo-filter: invert(1) brightness(.95); --w-title: 500; --w-btn: 600; --label-font: var(--mono); --label-spacing: .1em; --label-color: var(--gr); color-scheme: dark; } /* v1 Papel & Lime, claro (o Hope da S2) */ :root[data-skin="v1"] { --cv: #F3F0E8; --bk: #FBFAF5; --ink: #1A1915; --gr: #6B6A62; --ln: #D8D4C8; --hv: rgba(26,25,21,.06); --zb: rgba(26,25,21,.03); --lime: #D9FF3D; --limeFill: var(--lime); --onLime: #1A1915; --limeBd: var(--onLime); --detail: var(--ink); --onDetail: var(--cv); --ok: #1F8A4C; --warn: #B7791F; --err: #C0392B; --ok-text: #007135; --warn-text: #915500; --err-text: #B42D20; --scrim: rgba(10,10,8,.38); --logo-filter: none; --w-title: 700; --w-btn: 500; --label-font: var(--sans); --label-spacing: .16em; --label-color: var(--ink); color-scheme: light; } /* v1 escuro */ :root[data-skin="v1"][data-theme="dark"] { --cv: #161613; --bk: #1D1D19; --ink: #F1EEE6; --gr: #A6A398; --ln: #2E2D28; --hv: rgba(241,238,230,.07); --zb: rgba(241,238,230,.035); --lime: #D9FF3D; --limeFill: var(--lime); --onLime: #1A1915; --limeBd: var(--onLime); --detail: var(--ink); --onDetail: var(--cv); --ok: #4CC27E; --warn: #E0A544; --err: #EC6A5C; --ok-text: var(--ok); --warn-text: var(--warn); --err-text: #FA7768; /* S2: --err (#EC6A5C) cai < 4.5 no badge em linha zebra/hover */ --scrim: rgba(10,10,8,.38); --logo-filter: invert(1) brightness(.95); --w-title: 700; --w-btn: 500; --label-font: var(--sans); --label-spacing: .16em; --label-color: var(--ink); color-scheme: dark; } /* reset + base */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { height: 100%; } body { min-height: 100%; background: var(--cv); color: var(--ink); font: 400 14px/1.45 var(--sans); -webkit-font-smoothing: antialiased; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } /* negrito do navegador (b/strong/h*) segue o skin: v2 nunca bold (500), v1 700 — igual ao `bold` de antes */ b, strong, h1, h2, h3, h4, h5, h6 { font-weight: var(--w-title); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .gr { color: var(--gr); } .ok { color: var(--ok-text); } .warn { color: var(--warn-text); } .err { color: var(--err-text); } .hidden { display: none !important; } /* Visualizador (ADR-0013): quem só vê não recebe botão que altera dado (o backend recusa com 403 de qualquer jeito). Antes do guard saber o papel, o que altera fica invisível (sem flash para o viewer; o admin vê ~1 fetch depois). */ [data-role="viewer"] [data-mutates] { display: none !important; } body[data-hub-app="gestao"]:not([data-role]) [data-mutates] { visibility: hidden; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } } /* casca (layout em blocos: 10px da borda, 16px entre blocos, 10px laterais no menu) */ .hub-canvas { display: flex; gap: var(--spacing-block); padding: var(--spacing-outer); height: 100vh; height: 100dvh; } .hub-sidebar { position: relative; width: var(--sidebar-w); flex: none; display: flex; flex-direction: column; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-shell); overflow: hidden; } .hub-sidebar.is-collapsed { width: var(--sidebar-w-min); align-items: center; } .hub-sidebar-logo { padding: 14px var(--spacing-menu) 8px; display: flex; justify-content: center; } .hub-sidebar-logo img { width: 132px; height: auto; display: block; filter: var(--logo-filter); } .hub-sidebar.is-collapsed .hub-sidebar-logo { padding: 18px 0 12px; font-weight: 700; font-size: 20px; } .hub-nav { flex: 1; min-height: 0; overflow: auto; padding: 8px var(--spacing-menu) 0; display: flex; flex-direction: column; gap: 2px; } .hub-nav-item { position: relative; height: 32px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; border-radius: var(--r-item); font-weight: 500; text-decoration: none; white-space: nowrap; width: 100%; } .hub-nav-item:hover { background: var(--hv); } .hub-nav-item.is-active { background: var(--hv); } .hub-nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--ink); } .hub-nav-item.is-disabled { color: var(--gr); cursor: not-allowed; } .hub-nav-item.is-disabled:hover { background: transparent; } .hub-nav-item .caret { font-size: 11px; color: var(--gr); } .hub-nav-item .aside { font: 400 11px var(--mono); color: var(--gr); } .hub-sub { display: flex; flex-direction: column; gap: 2px; margin-left: 16px; padding-left: 8px; border-left: 1px solid var(--ln); } .hub-sub .hub-nav-item { height: 30px; padding: 0 10px; font-size: 13px; font-weight: 400; color: var(--gr); border-radius: 7px; } .hub-sub .hub-nav-item.is-active { color: var(--ink); } .hub-nav-sep { height: 1px; background: var(--ln); margin: 10px 4px; flex: none; } .hub-sidebar.is-collapsed .hub-nav { padding: 8px var(--spacing-menu); } .hub-sidebar.is-collapsed .hub-nav-item { width: 44px; height: 36px; justify-content: center; padding: 0; font: 500 12px var(--mono); } .hub-sidebar.is-collapsed .hub-nav-item.is-active::before { left: -10px; top: 9px; bottom: 9px; } .hub-sidebar.is-collapsed .hub-sub, .hub-sidebar.is-collapsed .caret, .hub-sidebar.is-collapsed .aside, .hub-sidebar.is-collapsed .hub-sidebar-foot-text { display: none; } .hub-sidebar-foot { padding: 8px var(--spacing-menu) 14px; width: 100%; } .hub-sidebar-foot-inner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--ln); } .hub-sidebar.is-collapsed .hub-sidebar-foot-inner { justify-content: center; padding: 8px 0; border-top: 0; } .hub-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--hv); display: grid; place-items: center; font: 500 11px var(--mono); flex: none; } .hub-sidebar-foot-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .hub-sidebar-foot-text b { font-size: 13px; font-weight: 500; } .hub-sidebar-foot-text span { font-size: 12px; color: var(--gr); } .hub-sidebar-foot-text [data-view-only] { font-style: italic; } .hub-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--spacing-block); } .hub-topbar { height: 52px; flex: none; display: flex; align-items: center; gap: var(--spacing-block); padding: 0 8px; } .hub-topbar-ctx { margin-right: auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hub-topbar-title { font-size: 20px; font-weight: var(--w-title); letter-spacing: -0.01em; line-height: 1.1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* carimbo numa linha: o texto corta com reticências e o "tentar de novo" (flex: none) segue visível e com o anel de foco inteiro */ .hub-topbar-stamp { font: 400 12px var(--mono); color: var(--gr); display: flex; align-items: baseline; gap: .6ch; min-width: 0; white-space: nowrap; } .hub-stamp-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hub-topbar-stamp button { flex: none; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); } .hub-topbar-actions { display: flex; align-items: center; gap: 8px; flex: none; } .hub-search { width: 300px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; border: 1px solid var(--ln); border-radius: var(--r-ctl); background: var(--bk); color: var(--gr); } .hub-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); } .hub-search kbd { font: 500 11px var(--mono); padding: 3px 6px; border: 1px solid var(--ln); border-radius: 5px; } .hub-help { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ln); background: var(--bk); display: grid; place-items: center; font-weight: var(--w-title); font-size: 15px; } .hub-page { flex: 1; min-height: 0; overflow: auto; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-shell); padding: var(--spacing-block); display: flex; flex-direction: column; gap: var(--spacing-block); container-type: inline-size; } .hub-mobile-header, .hub-drawer-scrim, .hub-burger { display: none; } .hub-collapse { height: 32px; width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--r-item); font-size: 13px; color: var(--gr); white-space: nowrap; } .hub-collapse:hover { background: var(--hv); color: var(--ink); } .hub-sidebar.is-collapsed .hub-collapse { width: 44px; justify-content: center; padding: 0; } .hub-drawer-close { display: none; } .hub-drawer-prefs { display: none; } /* 960–1119px (sidebar aberta): busca de 220px dá ~220px ao título em vez de ~140px; a dica Ctrl K fica */ @media (max-width: 1119px) { .hub-search { width: 220px; } } /* 720–959px: com "Azul | Papel" ao lado de "Claro | Escuro", a busca de 300px empurraria as ações para fora da topbar; encolhe a busca (o atalho Ctrl K continua valendo, só a dica sai). Perto de 720px nem 160px cabe: o título/carimbo guarda 120px (o "tentar de novo" da falha tem ~100px): ele cede primeiro (flex-shrink alto) até esse piso, depois só a busca cede; os segmentados não encolhem */ @media (max-width: 959px) { .hub-search { width: 160px; } .hub-search kbd { display: none; } .hub-topbar-ctx { min-width: 120px; flex-shrink: 99; } .hub-topbar-actions { flex: 0 1 auto; min-width: 0; } .hub-topbar-actions > * { flex: none; } .hub-topbar-actions > .hub-search { flex: 0 1 160px; min-width: 0; } } /* controles */ .btn { height: 40px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-ctl); font-size: 14px; font-weight: var(--w-btn); white-space: nowrap; border: 1px solid transparent; } .btn-primary { background: var(--detail); color: var(--onDetail); } .btn-secondary { border-color: var(--ln); background: var(--bk); } .btn-danger { background: var(--err); color: #fff; } .btn-warn { border-color: var(--warn); color: var(--warn-text); background: var(--bk); } .btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 9px; } .btn[disabled] { opacity: .45; cursor: not-allowed; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field-label { font-size: 13px; font-weight: 500; } .input { height: 42px; width: 100%; padding: 0 12px; border: 1px solid var(--ln); border-radius: var(--r-ctl); background: var(--bk); } .input:focus { outline: none; border: 1.5px solid var(--ink); } .input.is-invalid { border: 1.5px solid var(--err); } .field-error { font-size: 13px; color: var(--err-text); } .segmented { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--ln); border-radius: var(--r-ctl); background: var(--bk); font-size: 13px; font-weight: 500; } .segmented button { padding: 5px 10px; border-radius: 7px; color: var(--gr); } .segmented button.is-on { background: var(--hv); color: var(--ink); } .field .segmented { align-self: flex-start; } .chip { height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ln); border-radius: 18px; background: var(--bk); font-size: 13px; font-weight: 500; white-space: nowrap; } .chip.is-on { border-color: var(--ink); background: var(--hv); } .chip .caret { font-size: 10px; color: var(--gr); } .chip.is-on button.caret { font-size: 14px; width: 22px; height: 22px; margin-right: -6px; border-radius: 50%; display: grid; place-items: center; } .chip.is-on button.caret:hover { background: var(--ln); color: var(--ink); } .menu { position: absolute; z-index: 30; width: 300px; padding: 6px; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-box); box-shadow: var(--sh-overlay); display: flex; flex-direction: column; gap: 2px; } .menu-item { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--r-item); font-size: 14px; text-align: left; width: 100%; } .menu-item:hover, .menu-item.is-on { background: var(--hv); } .menu-item .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--ln); display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--cv); flex: none; } .menu-item.is-on .box { border-color: var(--ink); background: var(--ink); } .menu-item .count { margin-left: auto; font: 400 12px var(--mono); color: var(--gr); } .badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; } .badge-ok { background: color-mix(in oklab, var(--ok) 12%, transparent); color: var(--ok-text); } .badge-warn { background: color-mix(in oklab, var(--warn) 12%, transparent); color: var(--warn-text); } .badge-err { background: color-mix(in oklab, var(--err) 12%, transparent); color: var(--err-text); } .badge-gr { background: color-mix(in oklab, var(--gr) 12%, transparent); color: color-mix(in oklab, var(--gr) 70%, var(--ink)); } /* --gr puro reprova AA no v1 claro (4,1–4,4:1); 70/30 mantém AA nos 4 blocos e segue distinto do .badge-ink (travado em test_staticShell) */ .badge-ink { background: color-mix(in oklab, var(--ink) 11%, transparent); color: var(--ink); } .badge-outline { background: transparent; border: 1px solid var(--ink); color: var(--ink); } .badge-stage { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-stage); border: 1px solid var(--ln); font-size: 12px; font-weight: 500; white-space: nowrap; } .badge-stage .n { font-family: var(--mono); } .badge-stage.is-win { background: var(--limeFill); border-color: var(--limeFill); color: var(--onLime); } /* rótulo caixa-alta (Skins, regra 3) — só onde o README admite caixa-alta (faixa do TTV, cabeçalhos da TV; S3). v2: JetBrains Mono .1em em grafite com traço de 28px antes ("kicker"); v1: Space Grotesk .16em em tinta, sem traço */ .hub-kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.2 var(--label-font); letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--label-color); white-space: nowrap; } :root:not([data-skin="v1"]) .hub-kicker::before { content: ""; flex: none; width: 28px; height: 1px; background: currentColor; opacity: .6; } /* KPIs: faixa com réguas, não cards */ .kpis { display: flex; flex-wrap: wrap; padding: 4px 0 20px; border-bottom: 1px solid var(--ln); position: relative; } .kpi { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 16px; border-left: 1px solid var(--ln); position: relative; } .kpi:first-child { border-left-color: transparent; } .kpi-value { font: 500 24px/1.1 var(--mono); letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--gr); } .kpi-delta { font: 500 12px var(--mono); } .kpi-info { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--gr); color: var(--gr); display: grid; place-items: center; font: var(--w-title) 10px var(--mono); } .kpi-info.is-warn { border-color: var(--warn); color: var(--warn-text); } .kpi-info-wrap { position: relative; display: inline-flex; flex: none; } .popover { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 300px; max-width: calc(100vw - 32px); padding: 12px 14px; text-align: left; white-space: normal; font-weight: 400; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-ctl); font-size: 13px; line-height: 1.5; box-shadow: var(--sh-overlay); color: var(--ink); } .popover b { font-weight: var(--w-title); } @container (max-width: 1199px) { .kpis { row-gap: 16px; } .kpi { flex: 0 0 33.333%; } .kpi:nth-child(3n+1) { border-left-color: transparent; } } /* celular: 2 por linha (3 cortava o valor); régua some na 1ª célula de cada linha */ @container (max-width: 599px) { .kpi { flex: 0 0 50%; padding: 0 12px; } .kpi-value { font-size: 20px; } .kpi:nth-child(3n+1) { border-left-color: var(--ln); } .kpi:nth-child(2n+1) { border-left-color: transparent; } } /* tabela */ .toolbar { display: flex; align-items: center; gap: 8px; position: relative; flex-wrap: wrap; } .toolbar .search { width: 340px; max-width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--ln); border-radius: var(--r-ctl); background: var(--bk); } .toolbar .spacer { margin-left: auto; } .toolbar .btn { height: 36px; } .tbl { display: flex; flex-direction: column; flex: 1; min-height: 0; } .tbl-head, .tbl-row { display: grid; grid-template-columns: var(--cols); align-items: center; } .tbl-head { font-size: 12px; font-weight: 500; color: var(--gr); border-bottom: 1px solid var(--ln); position: sticky; top: 0; background: var(--bk); z-index: 1; } .tbl-head .tbl-cell { padding: 12px; } .tbl-row { height: 44px; font-size: 14px; cursor: pointer; } .tbl-row:nth-child(even) { background: var(--zb); } .tbl-row:hover { background: var(--hv); } .tbl-cell { padding: 0 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tbl-cell.right { text-align: right; } .tbl-cell .sub { display: block; font: 400 11px var(--mono); color: var(--gr); line-height: 1.2; } .tbl-cell.name { line-height: 1.2; font-weight: 500; } .tbl-foot { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid var(--ln); margin-top: auto; flex-wrap: wrap; } .legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-right: auto; font-size: 12px; color: var(--gr); } .pager { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--gr); } .pager .range { font-family: var(--mono); color: var(--ink); } .pager .sizes { display: flex; border: 1px solid var(--ln); border-radius: var(--r-item); padding: 2px; gap: 2px; font: 500 12px var(--mono); } .pager .sizes button { padding: 4px 8px; border-radius: 6px; } .pager .sizes button.is-on { background: var(--hv); color: var(--ink); } .pager .nav { display: flex; gap: 4px; } .pager .nav button { width: 30px; height: 30px; border: 1px solid var(--ln); border-radius: var(--r-item); } .pager .nav button[disabled] { opacity: .45; cursor: not-allowed; } @container (max-width: 1199px) { .hide-1200 { display: none !important; } .tbl-head, .tbl-row { grid-template-columns: var(--cols-narrow, var(--cols)); } } /* larga (afiliados/colaboradores até a S4 trocar por Hub.table): a coluna Ações fica presa à direita, visível sem rolar a tabela (auditoria da casca #4). Fundo opaco (--bk) com a zebra/hover por cima para o conteúdo não vazar. Só ≥ 720px: no celular a coluna de ações sozinha passa da largura e cobriria o nome (lá a tabela rola inteira). */ @media (min-width: 720px) { .acts-sticky th:last-child, .acts-sticky td:last-child:not([colspan]) { position: sticky; right: 0; z-index: 1; background-color: var(--bk); box-shadow: inset 1px 0 0 var(--ln); } .acts-sticky tbody tr:nth-child(even) td:last-child:not([colspan]) { background-image: linear-gradient(var(--zb), var(--zb)); } .acts-sticky tbody tr:hover td:last-child:not([colspan]) { background-image: linear-gradient(var(--hv), var(--hv)); } .acts-sticky th:last-child { z-index: 2; } /* cabeçalho sempre por cima das células presas do corpo */ } /* estados */ .empty { padding: 64px 48px; max-width: 560px; display: flex; flex-direction: column; gap: 16px; } .empty h2 { font-size: 28px; font-weight: var(--w-title); letter-spacing: -0.015em; } .empty.sm { padding: 72px 12px; gap: 10px; } .empty.sm h2 { font-size: 20px; } .empty p { font-size: 16px; line-height: 1.5; color: var(--gr); } .empty.sm p { font-size: 14px; } .empty .link { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .empty .row { display: flex; gap: 8px; flex-wrap: wrap; } .skeleton { background: var(--hv); border-radius: 6px; animation: hub-pulse 1.2s ease-in-out infinite; } @keyframes hub-pulse { 50% { opacity: .55; } } .chart-wrap { position: relative; height: 260px; } .chart-empty { height: 220px; border: 1px dashed var(--ln); border-radius: 14px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 0 32px; } .chart-empty b { font-size: 16px; font-weight: var(--w-title); } .chart-empty p { font-size: 14px; color: var(--gr); } /* drawer / modal / toast */ .drawer { position: fixed; right: var(--spacing-outer); top: var(--spacing-outer); bottom: var(--spacing-outer); width: 480px; max-width: calc(100vw - 20px); z-index: 50; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-shell); box-shadow: var(--sh-drawer); display: flex; flex-direction: column; overflow: hidden; transform: translateX(16px); opacity: 0; transition: transform .2s ease-out, opacity .2s ease-out; } .drawer.is-open { transform: none; opacity: 1; } .drawer-scrim { position: fixed; inset: 0; z-index: 49; background: var(--scrim); } .drawer-head { padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--ln); } .drawer-head .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .drawer-head h2 { font-size: 24px; font-weight: var(--w-title); letter-spacing: -0.01em; } .drawer-head .code { font: 400 13px var(--mono); color: var(--gr); } .drawer-head .badges { display: flex; gap: 6px; flex-wrap: wrap; } .drawer-body { padding: 16px 20px; overflow: auto; display: flex; flex-direction: column; gap: 18px; } .drawer-body section { display: flex; flex-direction: column; gap: 10px; } .drawer-body section + section { border-top: 1px solid var(--ln); padding-top: 16px; } .drawer-body h3 { font-size: 14px; font-weight: var(--w-title); } .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .kv div { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kv span { font-size: 12px; color: var(--gr); } .kv b { font-weight: 400; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .close { width: 32px; height: 32px; border: 1px solid var(--ln); border-radius: var(--r-item); display: grid; place-items: center; flex: none; } .timeline { display: flex; flex-direction: column; } .tl-item { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; min-height: 32px; } .tl-item .rail { position: relative; display: flex; justify-content: center; } .tl-item .rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ln); } .tl-item .dot { position: relative; margin-top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--ink); } .tl-todo .dot { border-color: var(--gr); background: var(--bk); } .tl-todo .txt { color: var(--gr); } .tl-admin .dot { border-radius: 2px; border-color: var(--gr); background: var(--bk); } .tl-item .txt { font-size: 14px; line-height: 1.35; padding-bottom: 8px; } .tl-item .when { font: 400 12px var(--mono); color: var(--gr); padding-top: 2px; } .actions { display: flex; flex-wrap: wrap; gap: 8px; } .confirm { padding: 12px; border-radius: var(--r-box); background: color-mix(in oklab, var(--err) 9%, transparent); border: 1px solid color-mix(in oklab, var(--err) 35%, transparent); display: flex; flex-direction: column; gap: 10px; width: 100%; } .confirm b { color: var(--err-text); font-weight: var(--w-title); } .confirm .row { display: flex; gap: 8px; } .modal-scrim { position: fixed; inset: 0; z-index: 60; background: var(--scrim); display: grid; place-items: center; padding: 16px; } .modal { width: 520px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-shell); box-shadow: var(--sh-modal); display: flex; flex-direction: column; } .modal.wide { width: 720px; } .modal-head { padding: 20px 20px 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .modal.wide .modal-head { padding-bottom: 20px; border-bottom: 1px solid var(--ln); } .modal-head h2 { font-size: 20px; font-weight: var(--w-title); } .modal-head p { font-size: 14px; color: var(--gr); margin-top: 4px; } .modal-head .meta { display: flex; gap: 12px; font: 400 12px var(--mono); color: var(--gr); margin-top: 6px; flex-wrap: wrap; } .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .modal-body .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .modal-body .section { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--ln); padding-top: 16px; } .modal-body .section-head { display: flex; align-items: baseline; justify-content: space-between; } .modal-body .section-head b { font-size: 14px; font-weight: var(--w-title); } .modal-body .section-head span { font-size: 12px; color: var(--gr); } .modal-foot { padding: 16px 20px; border-top: 1px solid var(--ln); display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .modal-foot .dirty { margin-right: auto; font-size: 13px; color: var(--gr); } .toast-stack { position: fixed; right: 26px; bottom: 26px; width: 400px; max-width: calc(100vw - 24px); z-index: 70; display: flex; flex-direction: column; gap: 8px; } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-box); font-size: 14px; line-height: 1.45; box-shadow: var(--sh-overlay); } .toast .ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: var(--w-title); } .toast-ok .ico { background: color-mix(in oklab, var(--ok) 14%, transparent); color: var(--ok-text); } .toast-err { border-color: color-mix(in oklab, var(--err) 40%, var(--ln)); } .toast-err .ico { background: color-mix(in oklab, var(--err) 14%, transparent); color: var(--err-text); } .toast .msg { flex: 1; font-weight: 500; } .toast .x { color: var(--gr); } /* login / sessão expirada */ .login-canvas { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; padding: 24px 24px calc(24px + 16vh); } /* conteúdo ~8vh acima do centro (pedido do operador, 2026-09-27) */ .login-logo { width: 200px; height: auto; filter: var(--logo-filter); } .login-card { width: 400px; max-width: 100%; padding: 32px; background: var(--bk); border: 1px solid var(--ln); border-radius: var(--r-shell); display: flex; flex-direction: column; gap: 20px; } .login-card .step { font: 500 12px var(--mono); color: var(--gr); } .login-card h1 { font-size: 28px; font-weight: var(--w-title); letter-spacing: -0.015em; } .login-card .lead { font-size: 15px; line-height: 1.5; color: var(--gr); } .login-card .lead .link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .login-card .input { height: 44px; } .login-card .btn { height: 44px; font-size: 15px; width: 100%; } .login-card a.btn { text-decoration: none; } .login-card .note { font-size: 13px; color: var(--gr); line-height: 1.5; } /* canon Percus (login-ui): banner do ?reason=, ajuda do campo, rodapé "Conexão segura" e "Falar com o operador" */ .login-banner { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--hv); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; } .field-help { font-size: 13px; color: var(--gr); line-height: 1.45; } .login-foot { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .login-foot .login-secure { display: inline-flex; align-items: center; gap: 6px; } .login-secure svg { width: 13px; height: 13px; flex: none; } .login-foot a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .otp input { height: 56px; width: 100%; text-align: center; border: 1.5px solid var(--ln); border-radius: var(--r-ctl); background: var(--bk); font: 500 26px var(--mono); } .otp input:focus { outline: none; border-color: var(--ink); } .otp.is-invalid input { border-color: var(--err); background: color-mix(in oklab, var(--err) 5%, transparent); } /* FR14: o inválido tem a mesma especificidade do :focus e vem depois; sem isto o campo focado com erro não tem anel */ .input.is-invalid:focus, .otp.is-invalid input:focus { outline: 2px solid var(--ink); outline-offset: 2px; } .alert-err { padding: 10px 12px; border-radius: var(--r-ctl); background: color-mix(in oklab, var(--err) 10%, transparent); color: var(--err-text); font-size: 14px; font-weight: 500; line-height: 1.4; } .resend { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--gr); } .resend .t { font-family: var(--mono); } .resend button { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .resend-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; } .resend-bar { height: 3px; border-radius: 2px; background: var(--ln); overflow: hidden; } .resend-bar div { height: 100%; background: var(--gr); transition: width 1s linear; } /* login: foguete de bolinhas (hub-rocket.js; desenho do handoff M5 v2). Camada fixa ATRÁS do .login-canvas (z-index 0 contra 1): nunca cobre campo, botão nem anel de foco; toasts/modais seguem por cima. Cor só por token do skin. */ .hub-rocket { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --rk-body: var(--lime); --rk-light: color-mix(in oklab, var(--lime) 50%, var(--onLime)); --rk-win: var(--onLime); --rk-fin: var(--detail); --rk-flame: var(--warn); --rk-hot: color-mix(in oklab, var(--warn) 50%, var(--onLime)); } /* TV (aviso de venda, HubRocket.fly): o voo em diagonal passa POR CIMA do conteúdo e do cartão; dura ~3 s */ body[data-hub-app="tv"] .hub-rocket.is-over { z-index: 40; } .hub-rocket-ship { position: absolute; left: 0; top: 0; offset-anchor: 50% 50%; offset-rotate: auto 90deg; offset-distance: 0%; animation-name: hub-rocket-fly; animation-fill-mode: both; } .hub-rocket-body { position: absolute; inset: 0; animation: hub-rocket-shake .3s linear both; } .hub-rocket-dot { position: absolute; border-radius: 50%; opacity: 0; animation: hub-rocket-dot .8s cubic-bezier(.2,.7,.3,1) both; } .hub-rocket-dot.is-B { background: var(--rk-body); } .hub-rocket-dot.is-L { background: var(--rk-light); } .hub-rocket-dot.is-W { background: var(--rk-win); } .hub-rocket-dot.is-O { background: var(--rk-fin); } .hub-rocket-dot.is-F { background: var(--rk-hot); box-shadow: 0 0 6px var(--rk-flame); animation: hub-rocket-flame .01s steps(1) both, hub-rocket-flick .16s ease-in-out infinite alternate; } .hub-rocket-dot.is-F.is-core { background: var(--rk-flame); } .hub-rocket-trail { position: absolute; left: 0; top: 0; width: 3.5px; height: 3.5px; border-radius: 50%; background: var(--rk-light); offset-anchor: 50% 50%; offset-rotate: 0deg; opacity: 0; animation: hub-rocket-trail .6s linear both; } .hub-rocket-trail.is-fin { background: var(--rk-fin); } @keyframes hub-rocket-fly { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes hub-rocket-shake { 0%, 100% { transform: none; } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 1px); } 80% { transform: translate(1px, 0); } } @keyframes hub-rocket-dot { 0% { opacity: 0; transform: translate(var(--sx), var(--sy)); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } } @keyframes hub-rocket-flame { from { opacity: 0; } to { opacity: 1; } } @keyframes hub-rocket-flick { from { transform: scale(1); } to { transform: scale(.55) translateY(3px); } } @keyframes hub-rocket-trail { 0% { opacity: 0; transform: scale(1); } 2% { opacity: .85; } 100% { opacity: 0; transform: scale(.3); } } @media (prefers-reduced-motion: reduce) { .hub-rocket { display: none; } } .expired { position: fixed; inset: 0; z-index: 80; background: var(--cv); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 48px 64px; } .expired .body { display: flex; flex-direction: column; gap: 24px; max-width: 760px; } .expired h1 { font-size: 64px; font-weight: var(--w-title); letter-spacing: -0.03em; line-height: 1.02; } .expired p { font-size: 20px; color: var(--gr); } .expired .btn { align-self: flex-start; height: 48px; padding: 0 22px; font-size: 16px; } .expired .stamp { font: 400 12px var(--mono); color: var(--gr); } /* gráfico de barras (DOM, sem lib) */ .bars-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .bars-head b { font-size: 16px; font-weight: var(--w-title); } .bars-goal { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gr); } .bars-goal i { width: 18px; border-top: 1.5px dashed var(--ink); } .bars-goal .mono { color: var(--ink); } .bars { position: relative; height: 260px; display: grid; grid-template-columns: 48px repeat(var(--n), minmax(0, 1fr)); column-gap: 20px; align-items: end; padding-bottom: 28px; } .bars .axis { position: absolute; left: 0; right: 0; top: 0; bottom: 28px; display: flex; flex-direction: column; justify-content: space-between; font: 400 11px var(--mono); color: var(--gr); pointer-events: none; } .bars .axis div { display: flex; align-items: center; gap: 8px; height: 0; } .bars .axis span { width: 40px; text-align: right; } .bars .axis i { flex: 1; border-top: 1px solid var(--ln); } .bars .goal-line { position: absolute; left: 56px; right: 0; border-top: 1.5px dashed var(--ink); z-index: 1; } .bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; } .bar .v { font: 500 12px var(--mono); color: var(--gr); white-space: nowrap; } .bar.is-current .v { color: var(--ink); } .bar .b { flex: none; width: 100%; max-width: 64px; background: var(--ink); border: 1px solid var(--ink); border-radius: 4px 4px 0 0; } .bar.is-current .b { background: var(--bk); border: 1.5px solid var(--ink); } .bar.is-current.is-win .b { background: var(--limeFill); border: 1px solid var(--limeBd); } .bar .m { position: absolute; bottom: -24px; font-size: 12px; color: var(--gr); } .side-list { display: flex; flex-direction: column; gap: 12px; } .side-list .row { display: flex; flex-direction: column; gap: 6px; } .side-list .l { display: flex; align-items: baseline; gap: 8px; font-size: 14px; } .side-list .l b { flex: 1; min-width: 0; font-weight: 500; } .side-list .l .n { font: 400 12px var(--mono); color: var(--gr); } .side-list .l .v { font: 500 13px var(--mono); width: 96px; text-align: right; white-space: nowrap; } .side-list .track { height: 6px; border-radius: 3px; background: var(--zb); } .side-list .track div { height: 100%; border-radius: 3px; } .two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; } .kpis + .two-col { margin-top: var(--spacing-block); } .two-col > section { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .two-col > section:first-child { padding-right: 16px; border-right: 1px solid var(--ln); } @container (max-width: 899px) { .two-col { grid-template-columns: 1fr; } .two-col > section:first-child { padding-right: 0; border-right: 0; } } /* celular (< 720px): sem moldura */ @media (max-width: 719px) { .hub-canvas { display: block; padding: 0; height: auto; } /* fechada: visibility:hidden tira os links do Tab (FR14); o hidden só entra depois do slide de saída */ .hub-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 55; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease-out, visibility 0s linear .2s; border-radius: 0 var(--r-shell) var(--r-shell) 0; } .hub-sidebar.is-collapsed { width: 260px; } /* recolhido no desktop e a janela encolheu: a gaveta não herda os 66px */ .hub-sidebar.is-mobile-open { transform: none; visibility: visible; transition-delay: 0s; box-shadow: 8px 0 30px rgba(0,0,0,.15); } @media (prefers-reduced-motion: reduce) { .hub-sidebar { transition-delay: 0s !important; } } .hub-drawer-scrim.is-on { display: block; position: fixed; inset: 0; z-index: 54; background: var(--scrim); } .hub-topbar { display: none; } .hub-mobile-header { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px; background: var(--bk); border-bottom: 1px solid var(--ln); position: sticky; top: 0; z-index: 10; } .hub-burger, .hub-mobile-header .hub-help { display: grid; width: 38px; height: 38px; border: 1px solid var(--ln); border-radius: var(--r-ctl); place-items: center; background: var(--bk); } .hub-mobile-header .ctx { margin-right: auto; min-width: 0; } .hub-mobile-header .hub-topbar-title { font-size: 17px; } .hub-mobile-header .hub-topbar-stamp { font-size: 11px; } .hub-page { border: 0; border-radius: 0; padding: 16px; overflow: visible; } .btn-primary, .btn-secondary { width: 100%; height: 48px; } .toast-stack { left: 12px; right: 12px; bottom: 16px; width: auto; } .drawer { right: 0; top: 0; bottom: 0; width: 100vw; max-width: 100vw; border-radius: 0; } .empty { padding: 40px 0; } .expired { padding: 32px 20px; } .expired h1 { font-size: 40px; } .hub-collapse { display: none; } :root:not([data-skin="v1"]) .hub-kicker { font-size: 11px; } :root:not([data-skin="v1"]) .hub-kicker::before { width: 22px; } .hub-drawer-prefs { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px calc(var(--spacing-menu) + 12px) 4px; } .hub-drawer-close.is-on { display: grid; place-items: center; position: fixed; left: 270px; top: 12px; z-index: 56; width: 38px; height: 38px; border: 1px solid var(--ln); border-radius: var(--r-ctl); background: var(--bk); font-size: 18px; } } /* kanban time-to-value (S3 L2, handoff M4) — Hub.kanban. Só tokens. Skin (D10) só por token e por um seletor: o gargalo é chip laranja no v2 e marca-texto lime no v1; a coluna 04 ("conquista") usa --limeFill/--onLime (azul no v2, lime no v1); títulos por --w-title (500 v2, 700 v1). Sem sombra em cartão; movimento só o do drawer (prefers-reduced-motion zera). */ .kb { display: flex; flex-direction: column; gap: var(--spacing-block); min-width: 0; } .kb-band { height: 40px; flex: none; display: flex; align-items: center; gap: 20px; padding: 0 4px; border-bottom: 1px solid var(--ln); min-width: 0; overflow: hidden; } .kb-med-band { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--gr); white-space: nowrap; } .kb-median { font: 500 16px var(--mono); color: var(--ink); } .kb-rule { width: 1px; height: 18px; flex: none; background: var(--ln); } .kb-bn { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; } .kb-bn-detail { font-size: 13px; color: var(--gr); min-width: 0; overflow: hidden; text-overflow: ellipsis; } .kb-no-bottleneck { font-size: 14px; font-weight: 500; color: var(--gr); } /* v2: chip laranja do DS (âmbar tonal, texto --warn-text) */ .kb-bottleneck { flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid color-mix(in oklab, var(--warn) 38%, transparent); border-radius: 999px; background: color-mix(in oklab, var(--warn) 8%, transparent); color: var(--warn-text); font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; } /* v1: marca-texto lime — fundo --limeFill com texto --onLime (lime nunca é cor de texto no v1 claro) */ :root[data-skin="v1"] .kb-bottleneck { padding: 3px 7px; border: 0; border-radius: 2px; background: var(--limeFill); color: var(--onLime); font: var(--w-title) 14px var(--sans); letter-spacing: normal; text-transform: none; } .kb-cols { display: flex; gap: 56px; overflow-x: auto; padding-bottom: 4px; } .kb-col { flex: 1 1 0; min-width: 196px; display: flex; flex-direction: column; gap: 12px; } /* degrau: área de 184px com o bloco alinhado embaixo, 124/144/164/184 (a silhueta da marca) */ .kb-head { position: relative; height: 184px; flex: none; display: flex; align-items: flex-end; } .kb-block { width: 100%; height: 184px; min-width: 0; padding: 12px 14px; border: 1px solid var(--ink); border-radius: 10px; background: var(--bk); color: var(--ink); display: flex; flex-direction: column; justify-content: space-between; } .kb-col:nth-child(1) .kb-block { height: 124px; } .kb-col:nth-child(2) .kb-block { height: 144px; } .kb-col:nth-child(3) .kb-block { height: 164px; } .kb-block-skel { border-color: var(--ln); } .kb-block-top { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .kb-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 16px; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb-n { font: 500 12px var(--mono); } .kb-sub { font-size: 12px; color: var(--gr); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb-block-base { display: flex; align-items: flex-end; gap: 12px; min-width: 0; } .kb-count { font: 500 40px/0.9 var(--mono); letter-spacing: -0.03em; } .kb-stats { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12px; line-height: 1.3; } .kb-stuck-n { font-weight: 500; color: var(--warn-text); } .kb-med { color: var(--gr); } .kb-med .mono { white-space: nowrap; } /* 04 Ter resultado = conquista: secundário em --onLime puro (qualquer mistura cai abaixo de 4.5:1 no v2 escuro) */ .kb-col.is-win .kb-block { background: var(--limeFill); border-color: var(--limeBd); color: var(--onLime); } .kb-col.is-win .kb-sub, .kb-col.is-win .kb-med { color: var(--onLime); } /* taxa de passagem no vão de 56px, alinhada à base do cabeçalho */ .kb-rate { position: absolute; right: -56px; bottom: 22px; width: 56px; text-align: center; font: 500 13px var(--mono); color: var(--gr); white-space: nowrap; } .kb-cards { display: flex; flex-direction: column; gap: 8px; } /* cartão: o nome é o botão que abre o drawer e o ::after dele cobre o cartão inteiro; a ação sugerida fica por cima */ .kb-card { position: relative; min-width: 0; padding: 10px 12px; border: 1px solid var(--ln); border-radius: 8px; background: var(--bk); display: flex; flex-direction: column; gap: 6px; } .kb-card:hover { background: var(--hv); } .kb-card.is-selected { border-color: var(--ink); background: var(--hv); } .kb-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .kb-card-open { min-width: 0; font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb-card-open::after { content: ""; position: absolute; inset: 0; border-radius: 8px; } .kb-card-open:focus-visible { outline: none; } .kb-card-open:focus-visible::after { outline: 2px solid var(--ink); outline-offset: 2px; } .kb-badge-stuck { flex: none; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 10px; background: color-mix(in oklab, var(--warn) 14%, transparent); color: var(--warn-text); font-size: 11px; font-weight: 500; } .kb-card-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; min-width: 0; } .kb-ref { max-width: 100%; font-size: 12px; color: var(--gr); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kb-days { flex: none; font-size: 12px; color: var(--gr); white-space: nowrap; } .kb-days.warn { color: var(--warn-text); } .kb-flags { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--gr); } .kb-next { position: relative; z-index: 1; align-self: flex-start; text-align: left; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gr); } .kb-next:hover { text-decoration-color: var(--ink); } .kb-next[disabled] { opacity: .45; cursor: progress; } .kb-empty { height: 120px; padding: 0 12px; border: 1px dashed var(--ln); border-radius: 8px; display: grid; place-items: center; text-align: center; font-size: 14px; font-weight: 500; color: var(--gr); } .kb-more { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--zb); font-size: 13px; font-weight: 500; color: var(--gr); text-decoration: none; } a.kb-more:hover { background: var(--hv); color: var(--ink); } .kb-skel { height: 88px; border-radius: 8px; } .kb-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--ln); } .kb-out { margin-right: auto; font-size: 13px; color: var(--gr); } .kb-out-n { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .kb-filter { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--gr); } .kb-select { height: 32px; min-width: 180px; padding: 0 10px; border: 1px solid var(--ln); border-radius: 8px; background: var(--bk); color: var(--ink); font-size: 13px; font-weight: 500; } .kb-select.is-on { border-color: var(--ink); } /* celular (S3 L5, review do L3): a faixa de 40px cortava o gargalo inteiro. Abaixo de 720 ela quebra linha, a régua some e o gargalo ganha a própria linha, com o "N de M travados…" quebrando em vez de virar reticência */ @media (max-width: 719px) { .kb-band { height: auto; flex-wrap: wrap; gap: 6px 16px; padding: 8px 4px; } .kb-rule { display: none; } .kb-bn { flex: 1 1 100%; flex-wrap: wrap; gap: 6px 10px; white-space: normal; } .kb-bn-detail { white-space: normal; overflow: visible; } } /* modo TV (S3 L4, M5): . Sem sidebar/topbar; palco 16:9 que escala com a tela (--tvu = 1px do palco 1920×1080, preso entre .4px e 4px: monitor pequeno e 4K); escuro forçado no (HubPure.TV_HEAD_THEME); cursor some após 3 s parado (.is-idle, hub-shell.js); sem anel de foco (a TV não tem interação). Fundo: v2 escuro = gradiente radial da marca, só por tokens (D10); v1 e claro = --cv sólido. */ body[data-hub-app="tv"] { --tvu: clamp(.4px, min(100vw / 1920, 100vh / 1080), 4px); --tv-bg: var(--cv); height: 100vh; height: 100dvh; overflow: hidden; display: grid; place-items: center; background: var(--tv-bg); } :root:not([data-skin="v1"])[data-theme="dark"] body[data-hub-app="tv"] { --tv-bg: radial-gradient(calc(900 * var(--tvu)) calc(500 * var(--tvu)) at 90% 5%, color-mix(in oklab, var(--lime) 18%, transparent), transparent 60%), radial-gradient(calc(700 * var(--tvu)) calc(400 * var(--tvu)) at 10% 95%, color-mix(in oklab, var(--detail) 14%, transparent), transparent 60%), radial-gradient(ellipse at 20% 80%, color-mix(in oklab, var(--lime) 36%, var(--cv)) 0%, color-mix(in oklab, var(--lime) 17%, var(--cv)) 45%, var(--cv) 100%); } body[data-hub-app="tv"] :focus, body[data-hub-app="tv"] :focus-visible { outline: none; } body[data-hub-app="tv"].is-idle, body[data-hub-app="tv"].is-idle * { cursor: none; } /* sessão expirada, versão TV (hub-shell.js expireTv): logo 200, "TV DESCONECTADA", 136, carimbo mono 28 */ .tv-expired { background: var(--tv-bg, var(--cv)); padding: calc(72 * var(--tvu, 1px)) calc(96 * var(--tvu, 1px)); } .tv-expired .tv-expired-logo { display: block; width: calc(200 * var(--tvu, 1px)); height: auto; filter: var(--logo-filter); } .tv-expired .body { max-width: calc(1300 * var(--tvu, 1px)); gap: calc(32 * var(--tvu, 1px)); } .tv-expired .tv-kicker { font-family: var(--label-font); font-size: calc(22 * var(--tvu, 1px)); font-weight: 500; letter-spacing: var(--label-spacing); text-transform: uppercase; color: var(--gr); } .tv-expired h1 { font-size: calc(136 * var(--tvu, 1px)); letter-spacing: -0.035em; line-height: .98; } .tv-expired p { font-size: calc(36 * var(--tvu, 1px)); line-height: 1.4; } .tv-expired .stamp { font-size: calc(28 * var(--tvu, 1px)); } /* S4 L5a — peças do Hub.table que eram "kit local" das telas (ordenação por cabeçalho, formulário com regra por campo, modal de links, drawer com seções próprias) e o .btn-danger do escuro. Só acréscimo, sem token novo. */ /* .btn-danger no escuro: #fff sobre --err (#EC6A5C) dá ~3:1; o texto escuro do fundo da página (--cv) passa de 5,8:1 nos 2 skins */ :root[data-theme="dark"] .btn-danger { color: var(--cv); } .tbl-head .th-sort { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; } .tbl-head .tbl-cell.right .th-sort { margin-left: auto; } .tbl-head .th-sort:hover, .tbl-head .th-sort.is-on { color: var(--ink); } .tbl-head .th-sort .dir { font-size: 9px; } .modal-body .form-sec, .modal-body .form-stack { display: flex; flex-direction: column; gap: 14px; } .modal-body textarea.input { height: auto; min-height: 84px; padding: 10px 12px; line-height: 1.4; resize: vertical; } .modal-body .alert-err ul { margin: 0; padding-left: 18px; } .modal-body .alert-err .btn { display: block; margin-top: 8px; width: auto; height: 34px; } .modal-body > .gr { font-size: 14px; } [data-theme="dark"] select.input { color-scheme: dark; } .link-row { display: flex; flex-direction: column; gap: 6px; } .link-row .line { display: flex; gap: 8px; } .link-row .input { font-size: 12px; height: 36px; } .link-row .btn { flex: none; width: auto; height: 36px; } .drawer-body a.btn { text-decoration: none; } .drawer-body .hint { font-size: 13px; color: var(--gr); line-height: 1.45; overflow-wrap: anywhere; } /* S5 L4 — gráficos do M6 (hub-charts.js: linha + área, barras, sparkline; SVG/DOM, sem canvas). Cor só por token: linha e barras em --ink, conquista (trecho/barras do mês atual, último ponto, chip do mês atual) em --lime/--limeFill com o contorno --limeBd; eixos em --gr/--ln. Réguas de 3 ticks mono 11, eixo X com meses (M6: gráficos de 160px). */ .hc { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .hc-plot { position: relative; margin-left: 44px; } .hc-tick { position: absolute; left: -44px; right: 0; height: 0; display: flex; align-items: center; gap: 6px; pointer-events: none; } .hc-tick span { width: 38px; flex: none; text-align: right; font: 400 11px var(--mono); color: var(--gr); white-space: nowrap; } .hc-tick i { flex: 1; border-top: 1px solid var(--ln); } .hc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .hc-line, .hc-cur, .hc-cur-bd { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; } .hc-line { stroke: var(--ink); stroke-width: 1.5; } .hc-cur-bd { stroke: var(--limeBd); stroke-width: 4.5; } .hc-cur { stroke: var(--lime); stroke-width: 2.5; } .hc-area { fill: color-mix(in oklab, var(--lime) 12%, transparent); stroke: none; } .hc-dot { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--lime); border: 2px solid var(--limeBd); } .hc-spark { position: relative; } .hc-spark .hc-dot { width: 10px; height: 10px; margin: -5px 0 0 -5px; } .hc-bars { position: absolute; inset: 0; } .hc-bar { position: absolute; bottom: 0; border-radius: 3px 3px 0 0; background: var(--ink); } .hc-bar.is-current { background: var(--limeFill); box-shadow: inset 0 0 0 1px var(--limeBd); } .hc-x { position: relative; height: 18px; margin-left: 44px; } .hc-m { position: absolute; top: 0; transform: translateX(-50%); padding: 1px 6px; border-radius: 4px; font: 500 11px var(--mono); color: var(--gr); white-space: nowrap; } .hc-m.is-current { background: var(--limeFill); color: var(--onLime); } /* S5 L4 (M6) — faixa de 7 KPIs das telas de projeto (host .kpis7 em volta do Hub.kpis): 7 colunas com réguas; abaixo de 1200px de janela com o menu aberto (contêiner < 940px), 2 linhas (4 + 3); abaixo de 600px, lista rótulo · valor · delta em linhas de 44px. A régua da 1ª de cada linha some (o 3n+1 do Hub.kpis de 6 itens não vale aqui) */ .kpis7 .kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 4px 0 18px; } .kpis7 .kpi { padding: 0 14px; } .kpis7 .kpi-label { font-size: 13px; line-height: 1.3; gap: 2px 6px; } @container (max-width: 1199px) { .kpis7 .kpis { row-gap: 16px; } .kpis7 .kpi:nth-child(3n+1) { border-left-color: var(--ln); } .kpis7 .kpi:first-child { border-left-color: transparent; } } @container (max-width: 939px) { .kpis7 .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis7 .kpi:nth-child(4n+1) { border-left-color: transparent; } } @container (max-width: 599px) { .kpis7 .kpis { display: flex; flex-direction: column; row-gap: 0; padding: 0; border-top: 1px solid var(--ln); border-bottom: 0; } .kpis7 .kpi { position: relative; flex: none; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; padding: 0 72px 0 0; border-left: 0; border-bottom: 1px solid var(--ln); } .kpis7 .kpi-value { order: 1; font-size: 16px !important; overflow: visible; } .kpis7 .kpi-label { flex: 1; min-width: 0; font-size: 14px; } .kpis7 .kpi-delta { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 64px; text-align: right; } } .modal-body .guide-steps { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; font-size: 14px; line-height: 1.5; } .modal-body .guide-steps li::marker { font-family: var(--mono); color: var(--gr); } /* S7 L2 — central de ajuda: o "?" do shell e o corpo do drawer (HubHelp.openDrawer abre em qualquer página da Gestão). Aqui ficam só as peças que o drawer usa (etiquetas, captura, erros comuns, esqueleto, caixa de erro) e as .help-d-*; o layout do índice e do artigo mora no