/* ============================================================================
O Jurídico — painel da redação
Um arquivo só, servido com cache. Sem framework: o admin tem 8 telas e um
editor; framework aqui é dependência para manter, não velocidade para ganhar.
========================================================================= */
:root{
--fundo:#F4F5F7; --papel:#FFFFFF; --papel-2:#FAFBFC; --papel-3:#F1F3F5;
--linha:#E3E6EB; --linha-2:#EFF1F4;
--tx:#16181D; --tx-2:#565D6B; --tx-3:#6B7280;
--marca:#C8102E; --marca-esc:#A50D26; --marca-fraca:#FDF2F4;
--ok:#1F7A45; --ok-fraco:#EDF7F1; --ok-linha:#BFE3CE;
--av:#8A6100; --av-fraco:#FFF8E6; --av-linha:#F0DFA8;
--er:#B3261E; --er-fraco:#FDF0EF; --er-linha:#F3C9C6;
--info:#1B5E8C; --info-fraco:#EEF5FA; --info-linha:#CFE2EF;
--roxo:#5B3FA8; --roxo-fraco:#F3F0FB;
--r:10px; --r-p:7px; --r-g:14px;
--sombra:0 1px 2px rgba(22,24,29,.05);
--sombra-2:0 4px 16px rgba(22,24,29,.10);
--sombra-3:0 18px 48px rgba(22,24,29,.20);
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
--lateral:238px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--tx);
font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;
-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3{letter-spacing:-.018em;margin:0}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:4px}
/* ---------------------------------------------------------------- casca --- */
.app{display:grid;grid-template-columns:var(--lateral) 1fr;min-height:100vh}
.lateral{background:var(--papel);border-right:1px solid var(--linha);
display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:40}
.lateral .marca{padding:17px 20px 14px;border-bottom:1px solid var(--linha);
display:flex;align-items:center;gap:10px}
.lateral .marca b{font-size:18px;font-weight:800;letter-spacing:-.024em;line-height:1.1}
.lateral .marca b em{color:var(--marca);font-style:normal}
.lateral .marca span{display:block;font-family:var(--mono);font-size:9.5px;
color:var(--tx-3);letter-spacing:.11em;margin-top:2px}
.lateral nav{padding:10px 10px 16px;overflow-y:auto;flex:1}
.lateral .rot{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
text-transform:uppercase;color:var(--tx-3);padding:15px 10px 6px}
.item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-p);
font-size:14px;font-weight:550;color:var(--tx-2);margin-bottom:1px;position:relative}
.item:hover{background:var(--linha-2);color:var(--tx)}
.item.on{background:var(--marca-fraca);color:var(--marca);font-weight:700}
.item .ic{width:17px;text-align:center;font-size:14px;opacity:.85;flex:0 0 auto}
.item .n{margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--linha-2);
padding:1px 7px;border-radius:99px;color:var(--tx-2)}
.item.on .n{background:#fff;color:var(--marca)}
.item .n.alerta{background:var(--er);color:#fff}
.lateral .pe{padding:11px 14px;border-top:1px solid var(--linha);font-size:12.5px;
color:var(--tx-3);display:flex;align-items:center;gap:9px}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--marca);color:#fff;
display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto}
.lateral .pe a{color:var(--tx-3);margin-left:auto}
.lateral .pe a:hover{color:var(--marca)}
.corpo{min-width:0;display:flex;flex-direction:column}
.topo{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(12px);
border-bottom:1px solid var(--linha);padding:0 24px;height:57px;display:flex;
align-items:center;gap:14px;position:sticky;top:0;z-index:30}
.topo h1{font-size:18px}
.topo .trilha{font-size:12.5px;color:var(--tx-3);display:flex;gap:7px;align-items:center}
.topo .dir{margin-left:auto;display:flex;align-items:center;gap:9px}
.busca-global{position:relative}
.busca-global input{width:230px;padding:7px 12px 7px 30px;border:1px solid var(--linha);
background:var(--papel-2);border-radius:99px;font:inherit;font-size:13.5px}
.busca-global input:focus{width:300px;background:var(--papel)}
.busca-global .lupa{position:absolute;left:11px;top:50%;transform:translateY(-50%);
color:var(--tx-3);font-size:12px;pointer-events:none}
.busca-global kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%)}
kbd{font-family:var(--mono);font-size:10px;background:var(--linha-2);color:var(--tx-2);
border:1px solid var(--linha);border-bottom-width:2px;border-radius:4px;padding:1px 5px}
main{padding:22px 24px 72px;width:100%;max-width:1420px}
main.estreito{max-width:1180px}
/* --------------------------------------------------------------- botoes --- */
button,.bt{display:inline-flex;align-items:center;justify-content:center;gap:7px;
background:var(--marca);color:#fff;border:1px solid var(--marca);border-radius:var(--r-p);
padding:9px 15px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;
transition:background .14s,border-color .14s,color .14s,opacity .14s;white-space:nowrap}
button:hover,.bt:hover{background:var(--marca-esc);border-color:var(--marca-esc)}
button:disabled,.bt.mudo{opacity:.5;pointer-events:none}
.bt2{background:var(--papel);border-color:var(--linha);color:var(--tx)}
.bt2:hover{background:var(--papel-3);border-color:var(--tx-3);color:var(--tx)}
.bt3{background:transparent;border-color:transparent;color:var(--tx-2);padding:7px 10px}
.bt3:hover{background:var(--linha-2);color:var(--tx)}
.bt-ok{background:var(--ok);border-color:var(--ok)}
.bt-ok:hover{background:#186237;border-color:#186237}
.bt-perigo{background:var(--papel);border-color:var(--er-linha);color:var(--er)}
.bt-perigo:hover{background:var(--er);border-color:var(--er);color:#fff}
.pequeno{padding:6px 11px;font-size:13px}
.lin{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.espaco{flex:1}
/* --------------------------------------------------------------- cartao --- */
.cx{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
margin-bottom:18px;box-shadow:var(--sombra)}
.cx>h2,.cx-cab{font-size:14.5px;padding:14px 18px;border-bottom:1px solid var(--linha);
display:flex;align-items:center;gap:10px}
.cx-cab .sub{font-size:12.5px;color:var(--tx-3);font-weight:400}
.cx-corpo{padding:18px}
.cx.chapa .cx-corpo{padding:0}
.grade{display:grid;gap:18px}
.g-2{grid-template-columns:minmax(0,1fr) 340px;align-items:start}
.g-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
@media(max-width:1080px){.g-2{grid-template-columns:1fr}}
/* --------------------------------------------------------------- tabela --- */
.rola{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--linha-2);
vertical-align:middle}
th{color:var(--tx-3);font-weight:650;font-size:11px;text-transform:uppercase;
letter-spacing:.07em;background:var(--papel-2);white-space:nowrap}
/* Nada de `position:sticky` no | : a tabela vive dentro de .rola, que tem
overflow — e ali o cabeçalho gruda no topo do container e passa POR CIMA das
linhas quando a página rola. Foi o que escondeu o cadastro a aprovar. */
th a{display:inline-flex;gap:4px;align-items:center}
th a:hover{color:var(--tx)}
thead{background:var(--papel-2)}
tbody tr:hover{background:var(--papel-2)}
tbody tr.sel{background:var(--marca-fraca)}
td .sub{display:block;font-size:12px;color:var(--tx-3);margin-top:2px}
td.acao{text-align:right;white-space:nowrap}
.linha-tit{font-weight:600;display:block;max-width:52ch;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.linha-tit:hover{color:var(--marca)}
.mini-foto{width:52px;height:34px;object-fit:cover;border-radius:5px;
background:var(--linha-2);flex:0 0 auto}
.mini-foto.falta{display:grid;place-items:center;font-size:15px;color:var(--er)}
.cel-mat{display:flex;gap:11px;align-items:center;min-width:0}
/* ------------------------------------------------------------- pilulas ---- */
.pil{display:inline-flex;align-items:center;gap:5px;padding:2.5px 9px;border-radius:99px;
font-size:11px;font-weight:700;white-space:nowrap;border:1px solid transparent}
.pil::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pil.coletada{background:var(--linha-2);color:var(--tx-2)}
.pil.rascunho{background:var(--info-fraco);color:var(--info)}
.pil.em_revisao{background:var(--av-fraco);color:var(--av)}
.pil.aprovada{background:var(--ok-fraco);color:var(--ok)}
.pil.publicada{background:var(--marca);color:#fff}
.pil.descartada{background:var(--linha-2);color:var(--tx-2)}
.pil.neutra,.pil.simples{background:var(--linha-2);color:var(--tx-2)}
.pil.simples::before,.pil.neutra::before{display:none}
.pil.roxa{background:var(--roxo-fraco);color:var(--roxo)}
.pil.roxa::before{display:none}
.risco-alto{color:var(--er);font-weight:700}
.risco-medio{color:var(--av);font-weight:650}
.risco-baixo{color:var(--ok);font-weight:650}
/* ------------------------------------------------------------ metricas ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:12px;
margin-bottom:18px}
.kpi{background:var(--papel);border:1px solid var(--linha);border-radius:var(--r);
padding:14px 16px;box-shadow:var(--sombra);transition:border-color .14s;display:block}
.kpi:hover{border-color:var(--marca)}
.kpi .n{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.kpi .r{font-size:11.5px;color:var(--tx-3);text-transform:uppercase;letter-spacing:.06em;
margin-top:3px;font-weight:650}
.kpi .d{font-size:12px;color:var(--tx-3);margin-top:6px}
.kpi.ruim .n{color:var(--er)}
.kpi.bom .n{color:var(--ok)}
/* --------------------------------------------------------------- forms ---- */
label{display:block;font-size:12px;font-weight:650;color:var(--tx-2);margin:16px 0 6px}
label:first-child,.cx-corpo>label:first-child{margin-top:0}
label .dica{font-weight:400;color:var(--tx-3);margin-left:6px}
input,textarea,select{width:100%;background:var(--papel);border:1px solid var(--linha);
color:var(--tx);border-radius:var(--r-p);padding:9px 12px;font:inherit;font-size:14px;
transition:border-color .14s,box-shadow .14s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--marca);
box-shadow:0 0 0 3px var(--marca-fraca)}
textarea{min-height:110px;resize:vertical;line-height:1.65}
textarea.mono{font-family:var(--mono);font-size:13px}
select{appearance:none;padding-right:34px;
background-image:linear-gradient(45deg,transparent 50%,var(--tx-3) 50%),
linear-gradient(135deg,var(--tx-3) 50%,transparent 50%);
background-position:calc(100% - 16px) 53%,calc(100% - 11px) 53%;
background-size:5px 5px;background-repeat:no-repeat}
.conta{font-family:var(--mono);font-size:11px;color:var(--tx-3);margin-top:4px;
display:flex;justify-content:space-between}
.conta .mal{color:var(--er);font-weight:700}
.conta .bem{color:var(--ok)}
.duas{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:700px){.duas{grid-template-columns:1fr}}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--marca);cursor:pointer;
vertical-align:middle}
.filtros{display:flex;gap:9px;flex-wrap:wrap;align-items:center;padding:13px 16px}
.filtros input,.filtros select{width:auto}
.filtros input[type=search]{flex:1;min-width:190px}
/* ------------------------------------------------------------- avisos ----- */
.rec{padding:11px 15px;border-radius:var(--r-p);margin-bottom:18px;font-size:14px;
border:1px solid;display:flex;gap:9px;align-items:flex-start}
.rec.ok{background:var(--ok-fraco);border-color:var(--ok-linha);color:#155C33}
.rec.aviso{background:var(--av-fraco);border-color:var(--av-linha);color:#6B4C00}
.rec.erro{background:var(--er-fraco);border-color:var(--er-linha);color:#8C1D18}
.rec.info{background:var(--info-fraco);border-color:var(--info-linha);color:#14496B}
.nota{background:var(--info-fraco);border:1px solid var(--info-linha);color:#14496B;
border-radius:var(--r-p);padding:11px 14px;font-size:12.5px;line-height:1.55;margin:14px 0 0}
.ajuda{font-size:12.5px;line-height:1.5;color:var(--tx-3);margin:6px 0 0}
.ajuda b{color:var(--tx-2);font-weight:650}
.acao-bloco{margin-bottom:15px}
.acao-bloco:last-child{margin-bottom:0}
.acao-bloco button,.acao-bloco .bt{width:100%}
.mudo{color:var(--tx-3);font-size:13px}
.vazio{padding:52px 20px;text-align:center;color:var(--tx-3);font-size:14px}
.vazio b{display:block;color:var(--tx-2);font-size:15.5px;margin-bottom:6px}
.vazio .ic{font-size:30px;display:block;margin-bottom:12px;opacity:.4}
/* --------------------------------------------------------------- toasts --- */
#toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;
flex-direction:column;gap:9px;max-width:390px}
.toast{background:var(--papel);border:1px solid var(--linha);border-left:3px solid var(--tx-3);
border-radius:var(--r-p);box-shadow:var(--sombra-2);padding:11px 15px;font-size:13.5px;
animation:sobe .18s ease-out}
.toast.ok{border-left-color:var(--ok)} .toast.erro{border-left-color:var(--er)}
.toast.aviso{border-left-color:var(--av)}
.toast.saindo{opacity:0;transform:translateY(6px);transition:.2s}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}}
/* ------------------------------------------------------- barra de acoes --- */
.barra-lote{position:fixed;left:calc(var(--lateral) + 24px);right:24px;bottom:18px;
background:var(--tx);color:#fff;border-radius:var(--r);box-shadow:var(--sombra-3);
padding:11px 16px;display:none;align-items:center;gap:12px;z-index:120}
.barra-lote.on{display:flex}
.barra-lote b{font-size:14px}
.barra-lote select{width:auto;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
color:#fff;font-size:13.5px;padding:6px 30px 6px 11px}
.barra-lote select option{color:var(--tx)}
.barra-lote .bt3{color:rgba(255,255,255,.8)}
.barra-lote .bt3:hover{background:rgba(255,255,255,.14);color:#fff}
@media(max-width:900px){.barra-lote{left:16px;right:16px}}
/* ---------------------------------------------------------------- modal --- */
.fundo-modal{position:fixed;inset:0;background:rgba(16,18,22,.5);z-index:150;
display:none;align-items:center;justify-content:center;padding:22px}
.fundo-modal.on{display:flex}
.modal{background:var(--papel);border-radius:var(--r-g);box-shadow:var(--sombra-3);
width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column}
.modal.largo{max-width:900px}
.modal h3{padding:17px 20px;border-bottom:1px solid var(--linha);font-size:16px}
.modal .miolo{padding:20px;overflow:auto}
.modal .pe{padding:14px 20px;border-top:1px solid var(--linha);display:flex;
gap:9px;justify-content:flex-end}
/* ------------------------------------------------------------- paleta ⌘K -- */
#paleta{position:fixed;inset:0;background:rgba(16,18,22,.42);z-index:190;display:none;
padding-top:12vh;justify-content:center}
#paleta.on{display:flex}
#paleta .cx-p{background:var(--papel);border-radius:var(--r-g);box-shadow:var(--sombra-3);
width:100%;max-width:590px;max-height:66vh;display:flex;flex-direction:column;overflow:hidden}
#paleta input{border:0;border-bottom:1px solid var(--linha);border-radius:0;
padding:16px 18px;font-size:16px}
#paleta input:focus{box-shadow:none}
#paleta .res{overflow:auto;padding:7px}
#paleta .r{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-p);
cursor:pointer;font-size:14px}
#paleta .r.sel{background:var(--marca-fraca);color:var(--marca)}
#paleta .r .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#paleta .r .tipo{font-family:var(--mono);font-size:10px;color:var(--tx-3);
text-transform:uppercase;letter-spacing:.08em}
/* ------------------------------------------------------------ paginacao --- */
.pag{display:flex;gap:6px;justify-content:center;align-items:center;padding:14px}
.pag a,.pag span{min-width:34px;height:34px;display:grid;place-items:center;
border-radius:var(--r-p);font-size:13.5px;font-weight:600;color:var(--tx-2)}
.pag a:hover{background:var(--linha-2);color:var(--tx)}
.pag .atual{background:var(--marca);color:#fff}
.pag .reticencia{color:var(--tx-3);pointer-events:none}
/* ------------------------------------------------------------- diversos --- */
.barra{height:6px;border-radius:99px;background:var(--linha-2);overflow:hidden}
.barra i{display:block;height:100%;background:var(--marca);border-radius:99px}
.selo{font-family:var(--mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
color:var(--tx-3)}
code{font-family:var(--mono);font-size:12.5px;background:var(--papel-3);
padding:1px 5px;border-radius:4px}
.glossario dt{display:flex;align-items:center;gap:8px;margin-top:12px;font-weight:650;
font-size:13.5px}
.glossario dt:first-child{margin-top:0}
.glossario dd{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--tx-3)}
details.acordeao{border:1px solid var(--linha);border-radius:var(--r);margin-bottom:16px;
background:var(--papel);box-shadow:var(--sombra)}
details.acordeao>summary{padding:14px 18px;font-size:14.5px;font-weight:700;cursor:pointer;
list-style:none;display:flex;align-items:center;gap:8px}
details.acordeao>summary::-webkit-details-marker{display:none}
details.acordeao>summary::before{content:"▸";color:var(--tx-3);transition:transform .15s}
details.acordeao[open]>summary::before{transform:rotate(90deg)}
details.acordeao[open]>summary{border-bottom:1px solid var(--linha)}
details.acordeao .miolo{padding:18px}
@media(max-width:900px){
.app{grid-template-columns:1fr}
.lateral{position:fixed;left:0;top:0;width:var(--lateral);transform:translateX(-100%);
transition:transform .2s}
.lateral.on{transform:none;box-shadow:var(--sombra-3)}
.abrir-menu{display:inline-flex!important}
main{padding:16px 14px 80px}
.busca-global input,.busca-global input:focus{width:150px}
}
.abrir-menu{display:none}
/* cabeçalho que existe para o leitor de tela: tabela de dados sem | deixa
quem navega por áudio sem referência de coluna */
.so-leitor{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
|