/* VxOS V2 - redesenho do Console do Master (admin, so Master). Aplica a MESMA linguagem do modo Triagem do Buscador: linha densa e escaneavel, chips pequenos com severidade, faixa de cor a esquerda (farol), Space Grotesk compacto. Cobre a lista de pessoas e a trilha de auditoria (audit_log), com separadores de dia e usuarios de sistema mais discretos. Carrega DEPOIS de v2-preview.css e do admin.css (este e injetado em runtime pelo modulo, entao pode cair depois deste arquivo no ). Por isso todo seletor leva o prefixo #console-body: (a) sobe a especificidade (id + classe) e vence o admin.css injetado, e (b) restringe o redesenho ao Console; os modais (fora de #console-body) e a Config. de projeto ficam intactos. Tokens de tokens.css / v2-preview.css. Contraste AA preservado. Sem travessao (em dash): so ":", "/", "-", "()" e o ponto medio. */ /* ============ 1) LISTA DE PESSOAS: card denso + faixa de severidade + status como chip ============ */ #console-body .adm-ulist{gap:6px} #console-body .adm-usr-head{margin-bottom:10px} /* card mais compacto e plano; a faixa de cor a esquerda sinaliza o que precisa de acao */ #console-body .adm-ucard{border:1px solid var(--gray-200);border-radius:var(--r-ctrl);box-shadow:inset 3px 0 0 var(--gray-300)} #console-body .adm-ucard.adm-uc-warn{box-shadow:inset 3px 0 0 var(--warn)} /* pendente: precisa de acao */ #console-body .adm-ucard.adm-uc-neg{box-shadow:inset 3px 0 0 var(--neg)} /* bloqueado */ #console-body .adm-ucard.adm-uc-ok{box-shadow:inset 3px 0 0 var(--pos)} /* aprovado */ #console-body .adm-ucard .adm-urow{padding:9px 13px} #console-body .adm-uname{font:600 13.5px 'Space Grotesk',sans-serif} /* meta em uma linha: chip de status primeiro (sinal escaneavel), depois email e "pediu:" */ #console-body .adm-umeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:12px;color:var(--gray-600)} #console-body .adm-umail{color:var(--gray-600)} /* status como CHIP com severidade (cor nunca e a unica codificacao: ha rotulo textual + ponto) */ #console-body .u-st{display:inline-flex;align-items:center;gap:5px;font:700 10px 'Space Grotesk',sans-serif; text-transform:uppercase;letter-spacing:.03em;padding:2px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap} #console-body .u-st::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} #console-body .u-st.u-pend{background:var(--warn-bg);color:var(--warn-text);border-color:#F3D9A4} #console-body .u-st.u-ok{background:var(--pos-bg);color:var(--pos-text)} #console-body .u-st.u-blk{background:var(--neg-bg);color:var(--neg-text);border-color:#F5C2C2} #console-body .adm-noarea{color:var(--warn-text);font-weight:600} /* resumo a direita (N projetos) menor e escaneavel */ #console-body .adm-usummary{font-size:12.5px} #console-body .adm-usum-n{font:700 12.5px 'Space Grotesk',sans-serif} /* ============ 2) TRILHA DE AUDITORIA: linha densa + faixa por acao (farol de severidade) ============ */ #console-body .adm-list{gap:5px} /* linha plana e compacta; a faixa a esquerda da a "cor da acao" (remocao vermelha e a mais forte) */ #console-body .adm-row{border:1px solid var(--gray-200);border-radius:var(--r-ctrl);box-shadow:inset 3px 0 0 var(--gray-300);padding:8px 12px} #console-body .adm-row.arow-delete{box-shadow:inset 3px 0 0 var(--neg)} #console-body .adm-row.arow-create{box-shadow:inset 3px 0 0 var(--pos)} #console-body .adm-row.arow-update{box-shadow:inset 3px 0 0 #2563EB} #console-body .adm-row.arow-move{box-shadow:inset 3px 0 0 var(--warn)} #console-body .adm-row.arow-download{box-shadow:inset 3px 0 0 #6D28D9} #console-body .adm-row.arow-coleta, #console-body .adm-row.arow-coleta_fim{box-shadow:inset 3px 0 0 var(--teal)} #console-body .adm-row-h{gap:9px} #console-body .adm-row-toggle:hover{background:transparent} #console-body .adm-row:hover{background:#F6FAFA} /* rajadas: mesma faixa por acao, mantendo a borda tracejada que sinaliza o agrupamento */ #console-body .adm-burst{border:1px dashed var(--gray-300);border-radius:var(--r-ctrl);box-shadow:inset 3px 0 0 var(--gray-300)} #console-body .adm-burst.arow-delete{box-shadow:inset 3px 0 0 var(--neg)} #console-body .adm-burst.arow-create{box-shadow:inset 3px 0 0 var(--pos)} #console-body .adm-burst.arow-update{box-shadow:inset 3px 0 0 #2563EB} #console-body .adm-burst.arow-move{box-shadow:inset 3px 0 0 var(--warn)} #console-body .adm-burst.arow-download{box-shadow:inset 3px 0 0 #6D28D9} #console-body .adm-burst.arow-coleta, #console-body .adm-burst.arow-coleta_fim{box-shadow:inset 3px 0 0 var(--teal)} #console-body .adm-burst-h{gap:9px;padding:8px 12px} /* pilulas de acao: reforca contraste AA (ambar/verde/vermelho antes tinham 2-3:1 em texto pequeno) */ #console-body .adm-act{font:700 9.5px 'Space Grotesk',sans-serif;padding:2px 8px} #console-body .adm-act.a-create{background:var(--pos-bg);color:var(--pos-text)} #console-body .adm-act.a-move{background:var(--warn-bg);color:var(--warn-text)} #console-body .adm-act.a-delete{background:var(--neg-bg);color:var(--neg-text)} #console-body .adm-table{font:600 12px 'Space Grotesk',sans-serif;color:var(--gray-600)} #console-body .adm-time{font:600 11.5px 'Space Grotesk',sans-serif;color:var(--gray-500)} #console-body .adm-detail{margin-top:5px;font-size:12px} /* ============ 3) SEPARADOR DE DIA: discreto, com regua fina; ainda escaneavel (AA) ============ */ #console-body .adm-day{display:flex;align-items:center;gap:10px;margin:14px 0 6px; font:700 10px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--gray-500)} #console-body .adm-day::after{content:'';flex:1;height:1px;background:var(--gray-200)} #console-body .adm-day:first-child{margin-top:0} /* ============ 4) USUARIO DE SISTEMA (motor): recuado vs. pessoas reais, sem virar ilegivel ============ */ #console-body .adm-user{font:700 12.5px 'Space Grotesk',sans-serif;color:var(--navy)} #console-body .adm-user.sys{color:var(--gray-500);font-weight:500;font-style:normal} #console-body .adm-empty{color:var(--gray-500)} /* ============ 5) FOCO VISIVEL nos alvos que viraram operaveis por teclado ============ */ #console-body .adm-row-toggle:focus-visible, #console-body .adm-burst-h:focus-visible, #console-body .adm-usummary.clk:focus-visible{outline:2px solid var(--teal);outline-offset:-2px;border-radius:6px} /* selects e busca da barra de auditoria: anel teal no foco de teclado (mesma pegada da Triagem) */ #console-body .adm-sel:focus-visible, #console-body .adm-search:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)} /* ============ 6) TOGGLES SEGMENTADOS: um so estilo (caixa com borda, aba ativa NAVY solido) ============ */ /* desfaz o "pill" cinza herdado (Usuarios/Sistema/Todos e Pessoas/Projetos): casa com o toggle da Triagem/Comissao */ #console-body .adm-seg, #console-body .adm-lenseg{background:#fff;border:1px solid var(--gray-300);border-radius:var(--r-ctrl);padding:0;gap:0;overflow:hidden} #console-body .adm-lenseg{margin-bottom:12px} #console-body .adm-segbtn, #console-body .adm-lensbtn{background:#fff;border:0;border-radius:0;color:var(--gray-600);font:600 12px 'Space Grotesk',sans-serif;padding:6px 15px;box-shadow:none} #console-body .adm-segbtn+.adm-segbtn, #console-body .adm-lensbtn+.adm-lensbtn{border-left:1px solid var(--gray-300)} #console-body .adm-segbtn:not(.on):hover, #console-body .adm-lensbtn:not(.on):hover{background:var(--gray-50);color:var(--navy)} #console-body .adm-segbtn.on, #console-body .adm-lensbtn.on{background:var(--navy);color:#fff;box-shadow:none} #console-body .adm-segbtn:focus-visible, #console-body .adm-lensbtn:focus-visible{outline:2px solid var(--teal);outline-offset:-2px} /* ============ 7) SAUDE (health) + heroi de pendentes: KPIs planos, faixa de severidade no alerta ============ */ #console-body .adm-health{gap:8px;margin-bottom:14px} #console-body .adm-hchip{box-shadow:none;border:1px solid var(--gray-200);border-radius:var(--r-card);padding:11px 13px;transition:border-color .12s} #console-body .adm-hchip:hover{border-color:var(--teal)} #console-body .adm-hchip.alert{border-color:#F3D9A4;background:var(--warn-bg);box-shadow:inset 3px 0 0 var(--warn)} /* pendentes: precisa de acao */ #console-body .adm-hn{font:700 21px 'Space Grotesk',sans-serif;color:var(--navy)} #console-body .adm-hchip.alert .adm-hn{color:var(--warn-text)} #console-body .adm-hl{font-size:11.5px;color:var(--gray-500)} /* "Precisam de voce": mesma familia do alerta, com contraste AA no cabecalho */ #console-body .adm-hero{background:var(--warn-bg);border:1px solid #F3D9A4;border-radius:var(--r-card)} #console-body .adm-hero-h{color:var(--warn-text);font:700 10px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em} /* ============ 8) FICHA DO EVENTO (detalhe expansivel): cartoes chave/valor EMPILHADOS ============ */ /* rotulo MAIUSCULA cinza EM CIMA, valor navy EMBAIXO, a esquerda; gap transparente (some a caixa cinza e o vao) */ #console-body .adm-row-more{margin-top:9px;padding:0;background:transparent;border:0} #console-body .adm-more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:7px;margin-top:0} #console-body .adm-more-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:1px solid var(--gray-200);border-radius:10px;padding:8px 12px} #console-body .adm-more-k{font:600 9.5px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);padding:0} #console-body .adm-more-v{font:600 13px 'Space Grotesk',sans-serif;color:var(--navy);padding:0;word-break:break-word} #console-body .adm-more-sec{font:700 10px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-500);margin:12px 0 6px} /* diff: valor novo com token de texto (AA) sem mexer na logica do risca-do-antigo */ #console-body .adm-new{color:var(--pos-text)} /* ============ 9) TAGS DE CONTEXTO na linha (fundo/projeto): formato TAG quadradinho (nao pill solido) ============ */ #console-body .adm-ctx-tag, #console-body .adm-proj-tag{font:700 10px 'Space Grotesk',sans-serif;border-radius:6px;padding:1px 7px;margin-left:0;white-space:nowrap} #console-body .adm-ctx-tag{background:#EAF7F7;color:var(--teal-btn);border:1px solid #B9E3E3} /* fundo (contexto) */ #console-body .adm-proj-tag{background:var(--gray-100);color:var(--navy);border:1px solid var(--gray-200)} /* projeto (contexto) */ /* pilula de acao: PILL 999px 700/10px, cores por acao com contraste AA */ #console-body .adm-act{font:700 10px 'Space Grotesk',sans-serif;border-radius:999px;padding:2px 9px} #console-body .adm-act.a-update{background:#E6F0FF;color:#1D4ED8} #console-body .adm-act.a-download{background:#EDE9FE;color:#6D28D9} #console-body .adm-act.a-collect{background:#CFFAFE;color:#0E7490} /* badge dono/master: PILL pequena e uniforme */ #console-body .chip-master{border-radius:999px;font:700 9.5px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.03em;padding:1px 8px} /* ============ 10) LENTE PROJETOS: cabecalho com respiro + chips padronizados ============ */ #console-body .adm-pjrow{border-radius:var(--r-ctrl);box-shadow:none} #console-body .adm-pjhead{gap:8px 10px} #console-body .adm-pjname{font:600 14px 'Space Grotesk',sans-serif;color:var(--navy)} /* visibilidade = status: PILL com token */ #console-body .adm-pj-vis{font:700 10px 'Space Grotesk',sans-serif;border-radius:999px;padding:2px 9px;background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-200)} /* membros = TAG (nome + papel), quadradinho, papel destacado em MAIUSCULA */ #console-body .adm-pm-chip{font:600 11px 'Space Grotesk',sans-serif;border-radius:6px;padding:2px 8px;background:var(--gray-50);border:1px solid var(--gray-200);color:var(--gray-700)} #console-body .adm-pm-chip em{font-style:normal;font-weight:700;color:var(--gray-500);margin-left:4px;text-transform:uppercase;font-size:9.5px;letter-spacing:.03em} #console-body .adm-pm-chip.pm-admin{background:var(--warn-bg);border-color:#F3D9A4} #console-body .adm-pm-chip.pm-admin em{color:var(--warn-text)} #console-body .adm-pm-chip.pm-editor{background:#EEF2FF;border-color:#C7D2FE} #console-body .adm-pm-chip.pm-editor em{color:#4338CA} #console-body .adm-pjmeta{margin-top:5px} /* ============ 11) LENTE PESSOAS: card com respiro; resumo (N projetos) como chip discreto ============ */ #console-body .adm-ucard{box-shadow:none} #console-body .adm-urow{align-items:flex-start;gap:12px 16px;flex-wrap:wrap} #console-body .adm-uinfo{min-width:0;flex:1 1 240px} #console-body .adm-uright{gap:8px} #console-body .adm-usummary{font-size:12px;color:var(--gray-600)} #console-body .adm-usum-n{font:700 12px 'Space Grotesk',sans-serif;color:var(--navy)} #console-body .adm-usummary.clk{border:1px solid var(--gray-200);background:var(--gray-50)} #console-body .adm-usummary.clk:hover{border-color:var(--teal);background:#EAF7F7} /* projetos da pessoa (painel): linha com o "como" (papel/acesso) como TAG a direita, cartoes limpos */ #console-body .adm-uprojs-panel{background:transparent;padding:7px 13px 3px;gap:5px} #console-body .adm-uproj-row{border-bottom:0;background:#fff;border:1px solid var(--gray-200);border-radius:8px;padding:7px 11px} #console-body .adm-uproj-nm{font:600 12.5px 'Space Grotesk',sans-serif;color:var(--navy)} #console-body .adm-uproj-how{font:700 9.5px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--teal-btn);background:#EAF7F7;border:1px solid #B9E3E3;border-radius:6px;padding:1px 7px} /* ============ 12) LENTE AREAS: subareas como TAG; cabecalho com respiro ============ */ #console-body .adm-arearow{border-radius:var(--r-ctrl);box-shadow:none} #console-body .adm-arearow .adm-pjname{font:600 14px 'Space Grotesk',sans-serif;color:var(--navy)} #console-body .adm-areasubs .chip{font:700 9.5px 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:.03em;border-radius:6px;padding:2px 8px;background:var(--gray-50);border:1px solid var(--gray-200);color:var(--gray-700)} /* ============ 13) v2: acoes do hero (Aprovar/Recusar) + Lixeira de bloqueados recolhivel ============ */ #console-body .adm-hero-acts{display:inline-flex;gap:8px;flex-wrap:wrap} /* seção "Bloqueados": fica FORA da lista principal (nao polui) e abre ao clicar */ #console-body .adm-trash-h{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;color:var(--gray-500);margin-top:18px} #console-body .adm-trash-h:hover{color:var(--gray-700)} #console-body .adm-trash-n{background:var(--gray-200);color:var(--gray-600);border-radius:999px;padding:1px 8px;font:700 11px 'Space Grotesk',sans-serif} #console-body .adm-trash-chev{font-size:11px;transition:transform .15s;color:var(--gray-400)} #console-body .adm-trash-h.open .adm-trash-chev{transform:rotate(90deg)} #console-body .adm-trash{margin-top:8px;opacity:.9} /* ============ tema escuro: acompanha o toggle do visualizador, sem regredir contraste ============ */ :root[data-theme="dark"] #console-body .adm-row:hover{background:rgba(0,180,180,.08)} :root[data-theme="dark"] #console-body .adm-day::after{background:var(--gray-300)}