/* ============================================================ Design system — Painel operacional Marca: navy #16233A · dourado #C0A062 · creme #F5F2EC Tokens em CSS custom properties. Tema claro (default) e escuro via [data-theme="dark"] no . ============================================================ */ :root{ /* superfícies e texto (escala cinza quente derivada do navy) */ --bg:#EFEDE7; --surface:#FBFAF7; --surface-2:#E6E3DB; --surface-3:#F5F3EE; --border:#DAD6CC; --border-strong:#BFB9AB; --text:#1A2231; --text-2:#55606F; --text-3:#8A9099; /* marca */ --navy:#16233A; --navy-2:#22334F; --navy-ink:#0E1727; --on-navy:#F5F2EC; --on-navy-2:#9AA6B8; --gold:#9A7E3E; /* dourado com contraste AA sobre claro (texto) */ --gold-line:#C0A062; /* dourado da marca (linhas, fundos, CTA) */ --gold-soft:#F2EBDA; /* semântica de urgência (nunca sozinha: sempre com rótulo/ícone) */ --crit:#8E2226; --crit-bg:#F8E9E7; --crit-bd:#EBCCC7; --warn:#8A6209; --warn-bg:#F8EFD9; --warn-bd:#E6D6B0; --ok:#2A5E45; --ok-bg:#E7EFE9; --ok-bd:#C7DCCE; --neu:#46536A; --neu-bg:#E9E7E1; --neu-bd:#D5D1C6; /* escalas */ --radius:3px; --radius-lg:4px; --shadow:0 1px 2px rgba(22,35,58,.07), 0 10px 26px rgba(22,35,58,.07); --row-py:7px; /* densidade compacta (default) */ --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --font-serif:"Source Serif 4",Georgia,serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; } [data-theme="dark"]{ --bg:#0E1727; --surface:#16233A; --surface-2:#1E2E48; --surface-3:#132038; --border:#26364F; --border-strong:#374A66; --text:#F0EDE6; --text-2:#A6B1C2; --text-3:#7A8699; --navy:#0B1220; --navy-2:#1B2A42; --navy-ink:#070C15; --gold:#C0A062; --gold-line:#C0A062; --gold-soft:#231D10; --crit:#E8969A; --crit-bg:#3A1A1D; --crit-bd:#55272B; --warn:#DDB35C; --warn-bg:#332916; --warn-bd:#4A3A20; --ok:#82C4A0; --ok-bg:#142A21; --ok-bd:#204030; --neu:#A9B4C4; --neu-bg:#1D2B41; --neu-bd:#2E3E58; --shadow:0 1px 2px rgba(0,0,0,.45), 0 12px 30px rgba(0,0,0,.4); } [data-density="confortavel"]{ --row-py:12px; } /* ---------- reset mínimo ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg); color:var(--text); font-family:var(--font-sans); font-size:13.5px; line-height:1.45; font-variant-numeric:tabular-nums; /* números tabulares em todo o painel */ -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; } a{color:var(--navy-2);text-decoration:none} [data-theme="dark"] a{color:var(--gold)} a:hover{color:var(--gold);text-decoration:underline} h1,h2,h3{margin:0} button,input,textarea,select{font-family:inherit} :focus-visible{outline:2px solid var(--gold-line);outline-offset:2px} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px;border:3px solid var(--bg)} /* ---------- tipografia ---------- */ .serif{font-family:var(--font-serif)} .page-title{font-family:var(--font-serif);font-size:19px;font-weight:600;letter-spacing:-.01em} .eyebrow{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);font-weight:600} .muted{color:var(--text-2)} .faint{color:var(--text-3)} .trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* ---------- semântica de urgência ---------- uso: CRÍTICO o data-u define as três variáveis --u-*; qualquer elemento dentro herda. */ [data-u="CRÍTICO"]{--u-fg:var(--crit);--u-bg:var(--crit-bg);--u-bd:var(--crit-bd)} [data-u="ATENÇÃO"]{--u-fg:var(--warn);--u-bg:var(--warn-bg);--u-bd:var(--warn-bd)} [data-u="NORMAL"]{--u-fg:var(--neu);--u-bg:var(--neu-bg);--u-bd:var(--neu-bd)} [data-u="CUMPRIDO"],[data-u="PROTOCOLADO"]{--u-fg:var(--ok);--u-bg:var(--ok-bg);--u-bd:var(--ok-bd)} /* severidade temporal de prazo */ [data-sev="vencido"],[data-sev="hoje"]{--sev-fg:var(--crit);--sev-bg:var(--crit-bg);--sev-bd:var(--crit-bd)} [data-sev="semana"]{--sev-fg:var(--warn);--sev-bg:var(--warn-bg);--sev-bd:var(--warn-bd)} [data-sev="mes"]{--sev-fg:var(--neu);--sev-bg:var(--neu-bg);--sev-bd:var(--neu-bd)} [data-sev="calmo"]{--sev-fg:var(--text-3);--sev-bg:var(--surface-2);--sev-bd:var(--border)} /* ---------- componentes ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)} .card-hd{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--border)} .card-hd h2{font-size:13px;font-weight:600} .badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;letter-spacing:.05em; color:var(--u-fg);background:var(--u-bg);border:1px solid var(--u-bd);border-radius:2px;padding:2px 5px;white-space:nowrap} .badge-soft{font-size:10.5px;font-weight:500;letter-spacing:.05em;color:var(--text-2); background:var(--surface-2);border:1px solid var(--border);border-radius:2px;padding:1px 5px} /* prazo estimado / a confirmar — tracejado, distinto de prazo certo */ .badge-estimado{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;color:var(--warn); background:var(--warn-bg);border:1px dashed var(--warn-bd);border-radius:2px;padding:1px 4px;white-space:nowrap} .chip-count{font-size:10.5px;font-weight:600;padding:1px 5px;border-radius:2px;color:var(--u-fg);background:var(--u-bg)} .btn{display:inline-flex;align-items:center;gap:7px;border-radius:var(--radius);padding:7px 11px; font-size:12.5px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text-2)} .btn:hover{color:var(--text);border-color:var(--border-strong)} .btn-sm{padding:4px 8px;font-size:11px;border-radius:2px;background:var(--surface-3)} .btn-primary{background:var(--navy);border-color:var(--navy-ink);color:#F5F2EC;font-weight:600} .btn-primary:hover{background:var(--navy-2);color:#F5F2EC} .btn-gold{background:var(--gold-line);border-color:var(--gold-line);color:#16233A;font-weight:600} .btn-gold:hover{filter:brightness(1.06);color:#16233A} .btn-ok:hover{color:var(--ok);border-color:var(--ok)} .btn-danger:hover{color:var(--crit);border-color:var(--crit)} .field{display:flex;align-items:center;gap:7px;background:var(--surface-3);border:1px solid var(--border); border-radius:var(--radius);padding:6px 9px} .field input{flex:1;border:none;background:transparent;color:var(--text);font-size:12.5px;outline:none} .input{width:100%;background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius); color:var(--text);font-size:12.5px;padding:7px 9px} kbd{font-family:inherit;font-size:10px;color:var(--text-3);border:1px solid var(--border);border-radius:2px;padding:1px 4px} .segmented{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .segmented button{background:transparent;color:var(--text-2);border:none;border-right:1px solid var(--border); padding:6px 12px;font-size:12.5px;cursor:pointer} .segmented button:last-child{border-right:none} .segmented button:hover{color:var(--text);background:var(--surface-3)} .segmented button[aria-pressed="true"]{background:var(--surface-2);color:var(--text);font-weight:600} /* tabela densa */ .tbl{width:100%;border-collapse:collapse;font-size:12.5px} .tbl th{text-align:left;padding:7px 13px;background:var(--surface-3);border-bottom:1px solid var(--border); font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-2);font-weight:600;white-space:nowrap} .tbl td{padding:var(--row-py) 13px;border-bottom:1px solid var(--border);vertical-align:middle} .tbl tbody tr:hover{background:var(--surface-3)} .num{text-align:right;white-space:nowrap} .scroll-x{overflow-x:auto} /* tabelas largas rolam DENTRO do contêiner */ /* KPI */ .kpi{background:var(--surface);border:1px solid var(--border);border-top:2px solid var(--sev-bd); border-radius:var(--radius);padding:11px 12px 10px;display:flex;flex-direction:column;gap:6px;min-height:96px} .kpi-value{font-size:27px;font-weight:600;letter-spacing:-.02em;color:var(--sev-fg);line-height:1} .meter{flex:1;height:6px;border-radius:2px;background:var(--surface-2);overflow:hidden;display:block} .meter>span{display:block;height:100%;background:var(--sev-fg,var(--ok))} /* ciclo de vida da publicação */ .lifecycle{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .stage{display:flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)} .stage::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--border-strong)} .stage[data-done="1"]{color:var(--gold);font-weight:600} .stage[data-done="1"]::before{background:var(--gold-line)} /* linha da fila de triagem */ .queue-row{display:block;width:100%;text-align:left;background:transparent;border:none; border-left:3px solid var(--u-fg);border-bottom:1px solid var(--border);padding:9px 12px;cursor:pointer} .queue-row:hover{background:var(--surface-3)} .queue-row[aria-current="true"]{background:var(--surface-2)} /* drawer lateral */ .drawer{position:sticky;top:0;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .legal-text{font-family:var(--font-serif);font-size:13px;line-height:1.62;max-width:62ch;white-space:pre-line;margin:0} /* aviso permanente de rascunho de IA */ .draft-warn{display:flex;align-items:center;gap:8px;padding:9px 13px;background:var(--warn-bg); border-bottom:1px solid var(--warn-bd);color:var(--warn);font-size:12px;font-weight:600} .draft-stamp{position:absolute;top:10px;right:12px;font-family:var(--font-sans);font-size:10px;letter-spacing:.16em; color:var(--warn);border:1px dashed var(--warn-bd);border-radius:2px;padding:2px 6px} /* toast com desfazer (substitui modal de confirmação) */ #toast-host{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;display:flex;flex-direction:column;gap:8px} .toast{display:flex;align-items:center;gap:12px;background:var(--navy);color:#F5F2EC;border:1px solid var(--navy-ink); border-left:3px solid var(--gold-line);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow); font-size:12.5px;animation:riseIn .2s ease both} .toast button{background:transparent;border:1px solid rgba(245,242,236,.3);border-radius:2px;color:var(--gold-line); padding:4px 9px;font-size:12px;font-weight:600;cursor:pointer} /* estado vazio, skeleton, erro */ .empty{padding:26px 16px;text-align:center} .empty-title{font-size:13px;color:var(--text-2);font-weight:500} .empty-hint{font-size:11.5px;color:var(--text-3);margin-top:3px} .skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%); background-size:400% 100%;animation:shimmer 1.4s ease infinite;border-radius:2px;height:12px} .error-box{border:1px solid var(--crit-bd);background:var(--crit-bg);color:var(--crit);border-radius:var(--radius); padding:10px 12px;font-size:12px} /* indicador HTMX local e discreto (nunca spinner de página inteira) */ .htmx-indicator{opacity:0;transition:opacity .12s} .htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1} .htmx-request.queue-row,.htmx-request .row-busy{background:var(--surface-2)} /* calendário */ .cal-grid{display:grid;grid-template-columns:repeat(7,1fr)} .cal-cell{min-height:88px;border-right:1px solid var(--border);border-bottom:1px solid var(--border); padding:5px 6px;background:var(--surface)} .cal-cell[data-off="1"]{background:var(--surface-3);color:var(--text-3)} /* sem expediente forense */ .cal-cell[data-today="1"] .cal-day{color:var(--crit);font-weight:700} .cal-day{font-size:11.5px;color:var(--text-2)} .cal-ev{display:block;font-size:10.5px;line-height:1.3;color:var(--u-fg);background:var(--u-bg); border:1px solid var(--u-bd);border-radius:2px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* layout */ .shell{display:flex;height:100vh;overflow:hidden} .sidebar{width:224px;flex:0 0 224px;background:var(--navy);border-right:1px solid var(--navy-ink); display:flex;flex-direction:column;overflow:hidden} .nav-link{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:none; border-left:2px solid transparent;border-radius:2px;padding:7px 8px;color:var(--on-navy-2);font-size:13px;cursor:pointer} .nav-link:hover{background:rgba(245,242,236,.07);color:var(--on-navy);text-decoration:none} .nav-link[aria-current="page"]{background:rgba(192,160,98,.14);color:var(--on-navy); border-left-color:var(--gold-line);font-weight:600} .nav-link[aria-current="page"] svg{color:var(--gold-line)} .nav-group{padding:14px 8px 6px;color:var(--on-navy-2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8} .topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 20px;display:flex;align-items:center;gap:16px} .content{flex:1;overflow-y:auto;padding:16px 20px 40px} .grid-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px} .grid-2{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:14px;align-items:start} .stack{display:flex;flex-direction:column;gap:14px} .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .mobile-only{display:none} @keyframes riseIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}} @keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}} .dot-live{width:6px;height:6px;border-radius:50%;background:#7FBE9C;animation:pulseDot 2.4s ease-in-out infinite;display:block} /* ============================================================ RESPONSIVO — iPhone: tabela vira lista de cartões, sidebar vira tab bar inferior, toque mínimo 44px. ============================================================ */ @media (max-width:900px){ .grid-2{grid-template-columns:minmax(0,1fr)} } @media (max-width:720px){ .shell{flex-direction:column;height:auto;min-height:100vh;overflow:visible} .sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;flex:0 0 auto;height:56px; flex-direction:row;border-right:none;border-top:1px solid var(--navy-ink);z-index:50} .sidebar .brand,.sidebar .sidebar-foot,.sidebar .nav-group,.sidebar .nav-label{display:none} .sidebar nav{flex:1;flex-direction:row;justify-content:space-around;padding:0;overflow:visible} .sidebar .nav-link{flex-direction:column;justify-content:center;gap:2px;min-height:44px;border-left:none; border-top:2px solid transparent;font-size:9.5px} .sidebar .nav-link[aria-current="page"]{border-left-color:transparent;border-top-color:var(--gold-line)} .sidebar .nav-link.is-primary .nav-label{display:block} .content{padding:12px 12px 76px} .topbar{padding:10px 12px;flex-wrap:wrap} .topbar .field{min-width:0;flex:1} .desktop-only{display:none !important} .mobile-only{display:block} /* tabela → cartões, sem perder informação crítica */ table.responsive thead{display:none} table.responsive tr{display:block;background:var(--surface);border:1px solid var(--border); border-left:3px solid var(--sev-fg,var(--border-strong));border-radius:var(--radius);padding:9px 10px;margin-bottom:8px} table.responsive td{display:flex;gap:8px;border:none;padding:2px 0} table.responsive td::before{content:attr(data-label);flex:0 0 84px;font-size:10.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--text-3)} table.responsive td.actions{margin-top:8px} table.responsive td.actions .btn{min-height:44px;flex:1;justify-content:center} .grid-kpi{grid-template-columns:repeat(2,minmax(0,1fr))} } /* impressão simples da minuta */ @media print{ .sidebar,.topbar,.draft-warn,#toast-host{display:none} .content{padding:0;overflow:visible} }