/* ============================================================ TRIAGEM DJEN — Toledo Piza Tokens + components. Three themes via [data-theme] on . ============================================================ */ :root { --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --font-serif: 'Montserrat', Georgia, serif; /* spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; /* radii */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; /* type scale */ --txt-xs: 11px; --txt-sm: 12.5px; --txt-base: 13.5px; --txt-md: 15px; --txt-lg: 18px; --txt-xl: 22px; --txt-xxl: 28px; /* density — overridden when body[data-density="compact"] */ --row-py: 14px; --row-gap: 7px; --doc-lh: 1.78; --doc-fs: 14.5px; } body[data-density="compact"] { --row-py: 9px; --row-gap: 4px; --doc-lh: 1.65; --doc-fs: 13.5px; } /* ---------- THEMES ---------- */ /* ============================================================ INTELIVIX BRAND SYSTEM --c-indigo #11016d primary --c-navy #001C53 ink / dark surfaces --c-cyan #0798ca highlight / links --c-purple #251581 secondary --c-paper #F5FAFD light bg --c-border #e2e8f0 ============================================================ */ /* PAPEL — soft brand paper */ body, body[data-theme="papel"] { --bg: #eef4fa; --surface: #f5fafd; --card: #ffffff; --card-2: #f5fafd; --ink: #001C53; --ink-2: #33476f; --ink-3: #6b7a9c; --ink-4: #a8b3ca; --line: #e2e8f0; --line-2: #cdd7e3; --accent: #11016d; --accent-soft: #251581; --brand: #001C53; --hl: #0798ca; --hl-soft: rgba(7, 152, 202, 0.20); --hl-flash: #4fc3e8; --hl-mark: #0798ca; --ok: #1f8a5b; --ok-bg: #d4ece0; --ok-ring: #4faa82; --warn: #b6791b; --warn-bg: #f3e6c8; --warn-ring: #d4a248; --crit: #c23b3b; --crit-bg: #f3d6d6; --crit-ring: #d97070; --shadow-1: 0 1px 1px rgba(0,28,83,.05), 0 2px 6px rgba(0,28,83,.05); --shadow-2: 0 2px 4px rgba(0,28,83,.07), 0 12px 32px rgba(0,28,83,.10); --shadow-lg: 0 10px 50px rgba(0,28,83,.18); } /* LINHA — crisp brand light (default) */ body[data-theme="linha"] { --bg: #f5fafd; --surface: #ffffff; --card: #ffffff; --card-2: #f5fafd; --ink: #001C53; --ink-2: #33476f; --ink-3: #6b7a9c; --ink-4: #aab4ca; --line: #e2e8f0; --line-2: #cbd5e1; --accent: #11016d; --accent-soft: #251581; --brand: #001C53; --hl: #0798ca; --hl-soft: rgba(7, 152, 202, 0.18); --hl-flash: #4fc3e8; --hl-mark: #0798ca; --ok: #1f8a5b; --ok-bg: #d4ece0; --ok-ring: #4faa82; --warn: #b6791b; --warn-bg: #f3e6c8; --warn-ring: #d4a248; --crit: #c23b3b; --crit-bg: #f3d6d6; --crit-ring: #d97070; --shadow-1: 0 1px 2px rgba(0,28,83,.04), 0 2px 6px rgba(0,28,83,.04); --shadow-2: 0 2px 4px rgba(0,28,83,.06), 0 12px 32px rgba(0,28,83,.08); --shadow-lg: 0 10px 50px rgba(0,28,83,.16); } /* NOITE — Intelivix midnight navy */ body[data-theme="noite"] { --bg: #00112f; --surface: #001C53; --card: #042460; --card-2: #001f57; --ink: #eaf2fb; --ink-2: #a4b4d0; --ink-3: #6f80a2; --ink-4: #455474; --line: #143064; --line-2: #24407a; --accent: #6a4ff0; --accent-soft: #8b76f5; --brand: #eaf2fb; --hl: #29b6e8; --hl-soft: rgba(41, 182, 232, 0.20); --hl-flash: #6fd3f5; --hl-mark: #29b6e8; --ok: #4fce96; --ok-bg: #0a2e22; --ok-ring: #2f7a5a; --warn: #ecbf6b; --warn-bg: #2c2412; --warn-ring: #8a7138; --crit: #f08585; --crit-bg: #2e1218; --crit-ring: #a84848; --shadow-1: 0 1px 1px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.4); --shadow-2: 0 2px 4px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.6); --shadow-lg: 0 10px 50px rgba(0,0,0,.7); } /* ---------- RESET ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: var(--font-sans); background: var(--bg); color: var(--ink); font-size: var(--txt-base); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; overflow: hidden; } button { font-family: inherit; } ::selection { background: var(--hl-soft); color: var(--ink); } /* ---------- APP SHELL ---------- */ #app { display: flex; flex-direction: column; height: 100vh; } /* ---------- TOPBAR ---------- */ .topbar { display: flex; align-items: center; gap: 18px; height: 54px; padding: 0 18px; background: var(--brand); color: var(--bg); border-bottom: 1px solid transparent; flex-shrink: 0; position: relative; z-index: 10; white-space: nowrap; } body[data-theme="linha"] .topbar { background: #001C53; color: #eaf2fb; } body[data-theme="papel"] .topbar { background: #001C53; color: #eaf2fb; } body[data-theme="noite"] .topbar { background: #00112f; color: var(--ink); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand-mark { font-family: var(--font-serif); font-weight: 600; font-size: 15.5px; letter-spacing: 0.01em; white-space: nowrap; } .brand-mark .amp { color: rgba(255,255,255,0.4); margin: 0 4px; font-weight: 400; } .brand-divider { width: 1px; height: 18px; background: rgba(255,255,255,0.18); flex-shrink: 0; } .brand-product { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.6); font-weight: 500; white-space: nowrap; } .topbar .spacer { flex: 1; } .top-progress { display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255,255,255,0.7); white-space: nowrap; font-variant-numeric: tabular-nums; } .top-progress .num { color: #fff; font-weight: 600; } .top-progress .num .total { color: rgba(255,255,255,0.5); font-weight: 400; } .progress-track { width: 140px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; flex-shrink: 0; } .progress-fill { height: 100%; background: var(--accent); transition: width .35s cubic-bezier(.4,0,.2,1); } body[data-theme="linha"] .progress-fill, body[data-theme="papel"] .progress-fill, body[data-theme="noite"] .progress-fill { background: linear-gradient(90deg, #251581, #0798ca); } .top-crit { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,0.06); font-size: 11.5px; color: rgba(255,255,255,0.78); border: 1px solid rgba(255,255,255,0.1); white-space: nowrap; flex-shrink: 0; } .top-crit .dot { width: 6px; height: 6px; border-radius: 50%; background: #e85f7a; } .top-crit.zero { opacity: 0.45; } .user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; font-size: 12px; color: rgba(255,255,255,0.85); cursor: pointer; white-space: nowrap; flex-shrink: 0; } .user-chip:hover { background: rgba(255,255,255,0.1); } .user-chip .who { display: none; } @media (min-width: 1100px) { .user-chip .who { display: inline; } } .user-chip .avatar { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #251581 0%, #0798ca 100%); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 12px rgba(37,21,129,0.4); } /* ---------- VIEWS ---------- */ .view { flex: 1; display: none; overflow: hidden; flex-direction: column; } .view.active { display: flex; } /* ============================================================ QUEUE VIEW ============================================================ */ .queue-head { padding: 22px 32px 4px; flex-shrink: 0; background: var(--bg); } .queue-title-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 4px; } .queue-title { font-size: var(--txt-xl); font-weight: 600; letter-spacing: -0.02em; font-feature-settings: "ss01"; } .queue-date { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .queue-desc { font-size: 13px; color: var(--ink-2); max-width: 640px; margin-bottom: 16px; } /* Filter rail */ .filters { display: flex; gap: 6px; align-items: center; padding: 14px 32px; flex-shrink: 0; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .filter-group { display: flex; gap: 4px; align-items: center; } .filter-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 600; margin-right: 6px; } .filter-divider { width: 1px; height: 18px; background: var(--line-2); margin: 0 8px; } .chip { font-family: inherit; font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 9999px; border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; transition: all .14s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .chip:hover { background: var(--card); color: var(--ink); } .chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .chip .chip-count { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .chip.on .chip-count { color: rgba(255,255,255,0.6); } .chip .dot { width: 7px; height: 7px; border-radius: 50%; } .chip[data-fv="alta"] .dot { background: var(--ok-ring); } .chip[data-fv="media"] .dot { background: var(--warn-ring); } .chip[data-fv="baixa"] .dot { background: var(--crit-ring); } .chip[data-fg="alert"] .dot { background: var(--crit); } .filter-spacer { flex: 1; } .sort-button { font-family: inherit; font-size: 12px; padding: 5px 13px; background: transparent; border: 1px solid var(--line); border-radius: 9999px; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .sort-button:hover { border-color: var(--ink-3); color: var(--ink); } /* Queue list */ .queue-scroll { overflow-y: auto; overflow-x: hidden; flex: 1; padding: 12px 32px 80px; } .qrow { position: relative; display: grid; /* qtags fuses confidence + alerts into one tidy vertical stack. */ grid-template-columns: 8px /* spine */ 26px /* num */ minmax(0, 1.4fr) /* qmain */ minmax(0, 1.5fr) /* qrazao */ minmax(0, 1fr) /* qenc */ 112px /* qtags */ 16px; /* qstatus */ column-gap: 14px; align-items: center; padding: var(--row-py) 18px var(--row-py) 16px; margin-bottom: var(--row-gap); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: all .14s cubic-bezier(.4,0,.2,1); } .qrow::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: transparent; } .qrow.p-crit::before { background: var(--crit); } .qrow.p-warn::before { background: var(--warn-ring); } .qrow:hover { border-color: var(--ink-3); transform: translateY(-1px); box-shadow: var(--shadow-1); } .qrow:hover .qproc { color: var(--ink); } .qrow.done { background: var(--card-2); opacity: 0.62; } .qrow.done:hover { opacity: 0.95; } .qrow.done .qproc { text-decoration: line-through; text-decoration-color: var(--ink-4); } .q-prio { /* placeholder slot for spine */ } .qnum { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; } .qmain { min-width: 0; } .qproc { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qmeta { font-size: 11px; color: var(--ink-3); margin-top: 3px; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qmeta .qtrib { font-weight: 600; color: var(--ink-2); margin-right: 4px; } .qrazao { min-width: 0; } .qrazao-name { font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qrazao-motivo { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .qenc { min-width: 0; } .qenc-arrow { font-size: 10px; color: var(--ink-4); margin-right: 5px; font-family: var(--font-mono); } .qenc-tag { display: inline-block; padding: 3px 9px; border-radius: var(--r-xs); background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; font-size: 11.5px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Confidence + alerts column — unified vertical stack of pills, right-aligned, uniform width. Confidence sits on top, alerts beneath. */ .qtags { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; min-width: 0; } .qtags .conf, .qtags .alert { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* alta = quiet — collapse the row to just a tiny baseline so it doesn't crowd alerts when present, but stays visible when alone */ .qtags .conf.alta { background: transparent; border-color: transparent; color: var(--ink-3); padding: 2px 0; font-size: 9.5px; letter-spacing: 0.1em; opacity: 0.55; } .qtags:has(.alert) .conf.alta { display: none; } .conf { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: var(--r-xs); display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; font-variant-numeric: tabular-nums; } .conf::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .conf.alta { background: transparent; color: var(--ink-3); border-color: transparent; padding: 3px 4px; } .conf.alta::before { background: var(--ok-ring); opacity: 0.6; } /* media = warn */ .conf.media { background: var(--warn-bg); color: var(--warn); } .conf.media::before { background: var(--warn-ring); } /* baixa = crit */ .conf.baixa { background: var(--crit-bg); color: var(--crit); } .conf.baixa::before { background: var(--crit-ring); } /* Reviewer-header alerts row (horizontal) */ .qalerts { display: inline-flex; align-items: center; gap: 4px; } .alert { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 9999px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--ink-3); white-space: nowrap; } /* state: crítico */ .alert.crit { background: var(--crit-bg); border-color: var(--crit-ring); color: var(--crit); } /* state: atenção */ .alert.warn { background: var(--warn-bg); border-color: var(--warn-ring); color: var(--warn); } /* state: informativo (brand cyan) */ .alert.info { background: var(--hl-soft); border-color: var(--hl); color: var(--hl-mark); } .alert .icon { font-size: 9px; margin-right: 3px; } /* Status dot */ .qstatus { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .qstatus .dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1.5px solid var(--ink-4); transition: all .15s; } .qstatus.aprovado .dot { background: var(--ok); border-color: var(--ok); } .qstatus.corrigido .dot { background: var(--accent); border-color: var(--accent); border-radius: 2px; } /* Empty state */ .empty { text-align: center; padding: 80px 20px; color: var(--ink-3); } .empty .big { font-size: 17px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; } /* ============================================================ REVIEWER VIEW ============================================================ */ .rev-head { display: flex; align-items: center; gap: 14px; padding: 10px 20px; background: var(--surface); border-bottom: 1px solid var(--line); flex-shrink: 0; min-height: 50px; } .rev-head .doc-id { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .rev-head .doc-id-meta { font-size: 11px; color: var(--ink-3); margin-left: 8px; white-space: nowrap; flex-shrink: 0; } .btn { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 15px; border-radius: 9999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); transition: all .16s ease; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; } .btn:hover { border-color: var(--ink-3); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.35; cursor: not-allowed; } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.ghost:hover { background: var(--card); color: var(--ink); } .btn.primary { background: var(--ok); color: #fff; border-color: var(--ok); font-weight: 600; } body[data-theme="noite"] .btn.primary { color: #0e0f24; } .btn.primary:hover { background: var(--ok-ring); border-color: var(--ok-ring); } .btn.warn { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } body[data-theme="noite"] .btn.warn { color: #0e0f24; } .btn.warn:hover { background: var(--accent-soft); border-color: var(--accent-soft); } .btn .kbd { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,0.13); margin-left: 2px; } .btn.ghost .kbd, .btn:not(.primary):not(.warn) .kbd { background: var(--bg); color: var(--ink-3); border: 1px solid var(--line); } .rev-counter { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .rev-counter .now { color: var(--ink); font-weight: 600; } .rev-spacer { flex: 1; } /* body grid: minimap | document | gutter | classification */ .rev-body { flex: 1; display: grid; grid-template-columns: 28px minmax(0, 1.3fr) 32px minmax(380px, 1fr); overflow: hidden; position: relative; } /* MINIMAP — vertical heat strip showing where evidence sits */ .minimap { background: var(--surface); border-right: 1px solid var(--line); position: relative; overflow: hidden; } .minimap-track { position: absolute; left: 50%; top: 16px; bottom: 16px; width: 2px; background: var(--line-2); transform: translateX(-50%); border-radius: 1px; } .minimap-mark { position: absolute; left: 50%; width: 16px; height: 3px; background: var(--hl-mark); transform: translateX(-50%); border-radius: 1px; cursor: pointer; transition: all .15s; } .minimap-mark:hover, .minimap-mark.active { height: 4px; width: 22px; background: var(--accent); } .minimap-cursor { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); opacity: 0.6; pointer-events: none; transition: top .15s; } /* DOCUMENT PANE */ .doc-pane { overflow-y: auto; padding: 28px 36px 100px; background: var(--bg); position: relative; } .doc-meta { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .doc-proc { font-family: var(--font-mono); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; } .doc-sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; letter-spacing: 0.02em; } .doc-sub strong { color: var(--ink-2); font-weight: 600; } .doc-sub .sep { margin: 0 8px; color: var(--ink-4); } .ai-disclaimer { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-2); font-size: 10.5px; font-weight: 400; line-height: 1.4; color: var(--ink-4); } .ai-disclaimer svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.45; margin-top: 1px; } .doc-section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); font-weight: 600; margin-bottom: 14px; font-feature-settings: "ss01"; } .doc-text { font-size: var(--doc-fs); line-height: var(--doc-lh); color: var(--ink); white-space: pre-wrap; word-wrap: break-word; font-feature-settings: "ss01", "cv11", "kern"; max-width: 72ch; } /* Evidence highlight — three style variants */ mark.ev { background: var(--hl-soft); color: inherit; padding: 1px 3px; border-radius: var(--r-xs); cursor: pointer; scroll-margin-top: 120px; position: relative; transition: background .2s, box-shadow .2s; text-decoration: none; } mark.ev:hover { background: var(--hl); } mark.ev.active { background: var(--hl); box-shadow: 0 0 0 2px var(--hl-flash); } mark.ev.flash { animation: ev-flash 1.4s cubic-bezier(.4,0,.2,1); } @keyframes ev-flash { 0% { background: var(--hl-flash); box-shadow: 0 0 0 4px var(--hl-flash); } 40% { background: var(--hl); box-shadow: 0 0 0 2px var(--hl); } 100% { background: var(--hl-soft); box-shadow: 0 0 0 0 transparent; } } /* numbered marker inside highlight */ mark.ev .ev-num { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; background: var(--hl-mark); color: #fff; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; border-radius: 8px; padding: 0 5px; margin-right: 4px; position: relative; top: -1px; vertical-align: middle; line-height: 1; letter-spacing: 0; } body[data-theme="noite"] mark.ev .ev-num { color: #14132b; } /* highlight style variants */ body[data-hl-style="underline"] mark.ev { background: transparent; border-bottom: 2px solid var(--hl); padding: 0 1px 1px; border-radius: 0; } body[data-hl-style="underline"] mark.ev:hover { background: var(--hl-soft); } body[data-hl-style="underline"] mark.ev.active { background: var(--hl-soft); border-bottom-color: var(--hl-mark); box-shadow: none; } body[data-hl-style="marker"] mark.ev { background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); padding: 0 1px; border-radius: 0; } body[data-hl-style="marker"] mark.ev:hover { background: linear-gradient(transparent 25%, var(--hl) 25%); } body[data-hl-style="marker"] mark.ev.active { background: linear-gradient(transparent 8%, var(--hl) 8%); box-shadow: none; } /* CONNECTOR GUTTER */ .gutter { position: relative; background: var(--bg); border-left: 1px dashed var(--line); border-right: 1px solid var(--line); pointer-events: none; } .gutter svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .gutter path { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: 0; transition: opacity .2s; stroke-dasharray: 3 3; } .gutter path.visible { opacity: 0.55; } .gutter path.flash { opacity: 0.85; stroke-width: 1.6; stroke-dasharray: 0; animation: line-draw .5s ease-out; } @keyframes line-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } /* CLASSIFICATION PANE */ .class-pane { overflow-y: auto; padding: 24px 26px 120px; background: var(--surface); } .cls-section { margin-bottom: 22px; } .cls-section + .cls-section { padding-top: 0; } .cls-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; } .cls-label .count { font-family: var(--font-mono); font-size: 10px; background: var(--card-2); padding: 2px 6px; border-radius: 3px; letter-spacing: 0; color: var(--ink-3); } /* Razão card — primary */ .razao-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; position: relative; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .razao-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-2); } .razao-card .razao-name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; color: var(--ink); } .razao-card .razao-cod { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.06em; } .razao-card.changed { border-color: var(--accent); background: linear-gradient(180deg, var(--card) 0%, var(--card-2) 100%); } .razao-card .changed-from { font-size: 10.5px; color: var(--accent); margin-top: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* Encaminhamento flow */ .enc-flow { background: var(--card); border: 1px solid var(--line); border-radius: 12px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; padding: 13px 15px; display: flex; align-items: center; gap: 12px; font-size: 13px; } .enc-flow:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--line-2); } .enc-flow .from { color: var(--ink-2); flex: 1; font-weight: 500; } .enc-flow .arrow { color: var(--ink-3); font-family: var(--font-mono); font-size: 14px; } .enc-flow .to { flex: 1; color: var(--accent); font-weight: 700; text-align: right; font-size: 13.5px; } .enc-flow .to-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 6px; background: var(--accent); color: #fff; border-radius: 50%; font-size: 10px; vertical-align: middle; } /* Motivo box */ .motivo { font-size: 13px; line-height: 1.55; color: var(--ink-2); padding: 12px 14px 12px 16px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ink-3); border-radius: 0 var(--r-md) var(--r-md) 0; } /* Evidence list */ .ev-list { display: flex; flex-direction: column; gap: 6px; } .ev-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px 10px 14px; cursor: pointer; transition: all .14s; position: relative; display: flex; gap: 10px; align-items: flex-start; } .ev-card:hover { border-color: var(--hl-mark); background: var(--card-2); transform: translateX(2px); } .ev-card.active { border-color: var(--hl-mark); background: var(--card); box-shadow: inset 3px 0 0 var(--hl-mark); } .ev-card .ev-badge { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--hl-mark); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; margin-top: 1px; } body[data-theme="noite"] .ev-card .ev-badge { color: #14132b; } .ev-card .ev-text { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); flex: 1; font-family: var(--font-sans); } .ev-card .ev-text em { font-style: normal; background: var(--hl-soft); padding: 0 2px; } /* Confidence + flag row */ .confidence-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .review-flag { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--accent); font-weight: 600; padding: 8px 12px; background: var(--card); border: 1px solid var(--accent-soft); border-radius: var(--r-sm); } .review-flag .ic { font-size: 14px; } /* Verdict */ .verdict { padding: 10px 14px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .verdict.aprovado { background: var(--ok-bg); color: var(--ok); } .verdict.corrigido { background: var(--card); color: var(--accent); border: 1px solid var(--accent-soft); } .verdict .ic { font-size: 14px; } .verdict .undo { margin-left: auto; font-size: 11px; font-weight: 500; color: inherit; opacity: 0.7; cursor: pointer; text-decoration: underline; } .verdict .undo:hover { opacity: 1; } /* Actions bar — sticky bottom */ .actions-bar { position: sticky; bottom: 0; margin: 20px -26px 0; padding: 18px 26px 18px; background: var(--surface); border-top: 1px solid var(--line); } .actions-bar::before { content: ''; position: absolute; left: 0; right: 0; top: -24px; height: 24px; background: linear-gradient(180deg, transparent, var(--surface)); pointer-events: none; } .actions-row { display: flex; gap: 8px; } .actions-row .btn { flex: 1; justify-content: center; padding: 11px 14px; font-size: 13px; } /* Correct panel (inline) */ .correct-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; margin-bottom: 10px; display: none; } .correct-panel.open { display: block; } .correct-panel .field-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; } .correct-panel select { width: 100%; font-family: inherit; font-size: 13px; padding: 9px 11px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--bg); color: var(--ink); margin-bottom: 10px; } /* ---------- SHORTCUT BAR ---------- */ .shortcut-bar { position: fixed; bottom: 16px; left: 24px; display: flex; gap: 0; align-items: center; padding: 5px 4px; background: var(--ink); color: var(--bg); border-radius: 999px; font-size: 11px; box-shadow: var(--shadow-2); z-index: 50; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; transform: translateY(8px); } body[data-theme="linha"] .shortcut-bar { background: #001C53; } body[data-theme="papel"] .shortcut-bar { background: #001C53; } body[data-theme="noite"] .shortcut-bar { background: #00112f; border: 1px solid var(--line); } body.show-shortcuts .shortcut-bar { opacity: 0.95; pointer-events: auto; transform: translateY(0); } body.show-shortcuts .shortcut-bar:hover { opacity: 1; } .shortcut-bar .sc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; color: rgba(255,255,255,0.7); white-space: nowrap; } .shortcut-bar .sc + .sc { border-left: 1px solid rgba(255,255,255,0.08); } .shortcut-bar .sc:hover { color: #fff; } .shortcut-bar .key { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; background: rgba(255,255,255,0.12); border-radius: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: #fff; padding: 0 5px; } .shortcut-bar .sc.approve .key { background: var(--ok); } .shortcut-bar .sc.correct .key { background: var(--accent); } /* ---------- TWEAKS PANEL ---------- */ .tweaks-panel { position: fixed; top: 70px; right: 16px; width: 260px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 14px; z-index: 100; font-size: 12.5px; display: none; } .tweaks-panel.open { display: block; } .tweaks-panel .tw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .tweaks-panel .tw-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--ink-3); } .tweaks-panel .tw-close { background: transparent; border: 0; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 4px; } .tweaks-panel .tw-close:hover { color: var(--ink); } .tweaks-panel .tw-section { margin-bottom: 14px; } .tweaks-panel .tw-section:last-child { margin-bottom: 0; } .tweaks-panel .tw-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; } .tweaks-panel .tw-options { display: flex; gap: 4px; background: var(--bg); border-radius: var(--r-sm); padding: 2px; } .tweaks-panel .tw-option { flex: 1; font-family: inherit; font-size: 11.5px; font-weight: 500; padding: 6px 8px; border-radius: 4px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; transition: all .12s; } .tweaks-panel .tw-option:hover { color: var(--ink); } .tweaks-panel .tw-option.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); } /* ---------- TOAST ---------- */ .toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all .2s cubic-bezier(.4,0,.2,1); z-index: 90; display: flex; align-items: center; gap: 9px; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast .ic { font-size: 14px; } .toast.ok .ic { color: var(--ok-ring); } .toast.warn .ic { color: var(--accent-soft); } /* ---------- SCROLLBAR ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-4); } .class-pane::-webkit-scrollbar-thumb { border-color: var(--surface); } /* ============================================================ PICKER VIEW ============================================================ */ .picker-center { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 32px; padding: 48px 24px; } .picker-title { font-size: var(--txt-xl); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .picker-sub { font-size: var(--txt-base); color: var(--ink-3); margin-top: -20px; } .picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; width: 100%; max-width: 640px; } .picker-card { padding: 24px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); cursor: pointer; transition: all .14s; } .picker-card:hover { border-color: var(--hl); transform: translateY(-2px); box-shadow: var(--shadow-2); } .picker-card .pc-name { font-size: var(--txt-md); font-weight: 600; color: var(--ink); } .picker-card .pc-slug { font-size: var(--txt-sm); color: var(--ink-3); font-family: var(--font-mono); margin-top: 4px; } /* ============================================================ DESTINATÁRIO (reviewer panel) ============================================================ */ .dest-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--card-2); border: 1px solid var(--line); font-size: var(--txt-sm); } .dest-row .dest-name { font-weight: 600; color: var(--ink); } .dest-row .dest-email { color: var(--ink-3); } /* ============================================================ TOGGLE MARCAR OPERACIONAL ============================================================ */ .op-toggle { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 0; font-size: var(--txt-sm); color: var(--ink-2); cursor: pointer; user-select: none; } .op-toggle input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } .op-toggle .op-hint { font-size: 10.5px; color: var(--ink-3); display: block; margin-top: 2px; } /* ---------- REPORT ---------- */ .report-body { padding: var(--s4) var(--s6); max-width: 900px; } .report-section { margin-bottom: var(--s7); } .report-section-title { font-size: var(--txt-md); font-weight: 700; color: var(--ink-1); margin-bottom: var(--s3); border-bottom: 1px solid var(--line-1); padding-bottom: var(--s2); } .report-hint { font-weight: 400; font-size: var(--txt-xs); color: var(--ink-3); margin-left: var(--s2); } .report-stats { display: flex; gap: var(--s6); margin-bottom: var(--s4); } .report-stat { text-align: center; } .stat-n { font-size: var(--txt-xxl); font-weight: 800; color: var(--accent); } .stat-label { font-size: var(--txt-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.5px; } .report-table { width: 100%; border-collapse: collapse; font-size: var(--txt-sm); } .report-table th { text-align: left; font-weight: 600; text-transform: uppercase; font-size: var(--txt-xs); letter-spacing: 0.5px; color: var(--ink-3); padding: var(--s2) var(--s3); border-bottom: 2px solid var(--line-1); } .report-table td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line-2); color: var(--ink-1); } .report-table td.arrow { color: var(--ink-3); text-align: center; padding: var(--s2) 0; } .report-table td.num { text-align: right; font-family: var(--font-mono); font-weight: 600; }