/* MERIDIANO — overrides sobre o HTML exportado do Pencil (frame fixo -> app fluido) */
html, body { margin: 0; background: #EDF1F1; }
/* o frame de topo do Pencil vem w-[1440px] h-[1024px] overflow-hidden:
solta a largura/altura pra preencher a viewport e crescer com o conteúdo */
body > div[data-pencil-name] {
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 100vh !important;
overflow: visible !important;
}
/* itens navegáveis (marcados pelo meridiano.js) */
[data-mrd-link] { cursor: pointer; }
[data-mrd-link]:hover { opacity: .82; }
/* --- Topbar estilo Dock (macOS): cresce + mostra o nome no hover --- */
[data-pencil-name^="Nav "] {
cursor: pointer;
transition: transform .18s cubic-bezier(.2,.7,.3,1.5);
transform-origin: center top;
position: relative;
}
[data-pencil-name^="Nav "]:hover { transform: scale(1.5); }
/* leve efeito de vizinhança (ripple do dock) */
[data-pencil-name^="Nav "]:hover + [data-pencil-name^="Nav "],
[data-pencil-name^="Nav "]:has(+ [data-pencil-name^="Nav "]:hover) { transform: scale(1.22); }
/* rótulo (tooltip) que aparece no hover */
[data-pencil-name^="Nav "][data-mrd-label]::after {
content: attr(data-mrd-label);
position: absolute; top: 44px; left: 50%;
transform: translateX(-50%);
background: #0B343B; color: #F3EFE9;
font: 600 11px/1 Inter, system-ui, sans-serif;
padding: 4px 9px; border-radius: 6px; white-space: nowrap;
opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 100;
}
[data-pencil-name^="Nav "][data-mrd-label]:hover::after { opacity: 1; }
/* a Topbar do Pencil vem com overflow-hidden e h-[64px] -> corta o rótulo do
dock (posicionado ABAIXO do ícone). Libera o overflow no caminho da nav. */
[data-pencil-name="Topbar"],
[data-pencil-name="Nav"],
[data-pencil-name^="Nav "] { overflow: visible !important; }
/* ---- Fase 3: botões de ação, modal e formulários -------------------- */
.mrd-btn {
font: 600 12px/1 Inter, system-ui, sans-serif;
color: #33474C; background: #FFFFFF;
border: 1px solid #CDD5D5; border-radius: 7px;
padding: 6px 10px; cursor: pointer; white-space: nowrap;
}
.mrd-btn:hover { background: #F4F6F6; }
.mrd-btn-ok { color: #2C6B3F; border-color: #C9E3D0; }
.mrd-btn-ok:hover { background: #E2F1E6; }
.mrd-btn-primario {
color: #F3EFE9; background: #115E67; border-color: #115E67;
}
.mrd-btn-primario:hover { background: #0B343B; }
.mrd-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(7, 39, 45, .45);
display: flex; align-items: center; justify-content: center;
}
.mrd-modal {
width: 480px; max-width: calc(100vw - 48px);
background: #FFFFFF; border-radius: 14px;
box-shadow: 0 24px 64px rgba(7, 39, 45, .35);
padding: 22px 24px;
font-family: Inter, system-ui, sans-serif;
}
.mrd-modal-titulo {
font: 700 16px/1.3 Inter, system-ui, sans-serif; color: #0B343B;
margin-bottom: 14px;
}
.mrd-modal-acoes {
display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px;
}
.mrd-label {
display: block; font: 600 11px/1 Inter, sans-serif; color: #6F7F83;
letter-spacing: .5px; text-transform: uppercase; margin: 12px 0 5px;
}
.mrd-input {
width: 100%; box-sizing: border-box;
font: 400 14px/1.3 Inter, system-ui, sans-serif; color: #16262B;
background: #FFFFFF; border: 1px solid #CDD5D5; border-radius: 9px;
padding: 9px 12px; outline: none;
}
.mrd-input:focus { border-color: #115E67; }
.mrd-lista { max-height: 220px; overflow-y: auto; margin-top: 8px; }
.mrd-opcao {
padding: 8px 10px; border-radius: 8px; cursor: pointer;
font: 400 13px/1.4 Inter, sans-serif; color: #33474C;
}
.mrd-opcao:hover { background: #F4F6F6; }
.mrd-opcao.mrd-escolhida { background: #E2EEF0; outline: 1px solid #115E67; }
.mrd-opcao .mrd-cnj { display: block; color: #9BA9AC; font-size: 11px; }
.mrd-vazio { padding: 10px; color: #9BA9AC; font: 400 13px Inter, sans-serif; }
/* login: painéis do split esticam a viewport inteira (o frame virou fluido) */
[data-pencil-name="Painel Marca"],
[data-pencil-name="Painel Formulário"] { min-height: 100vh; }
/* ---- drawer de evento (agenda) ---- */
.mrd-drawer-ov {
position: fixed; inset: 0; z-index: 1000;
background: rgba(7, 39, 45, .35);
display: flex; justify-content: flex-end;
}
.mrd-drawer {
width: 400px; max-width: 92vw; height: 100%;
background: #FFFFFF; box-shadow: -18px 0 48px rgba(7, 39, 45, .three);
box-shadow: -18px 0 48px rgba(7, 39, 45, .3);
display: flex; flex-direction: row; overflow: hidden;
animation: mrd-slide .18s ease-out;
}
@keyframes mrd-slide { from { transform: translateX(30px); opacity: .4; } }
.mrd-drawer-accent { width: 5px; flex-shrink: 0; }
.mrd-drawer-corpo { padding: 26px 24px; flex: 1; font-family: Inter, system-ui, sans-serif; }
.mrd-drawer-tipo { font: 700 11px/1 Inter, sans-serif; letter-spacing: 1px; text-transform: uppercase; }
.mrd-drawer-titulo { font: 700 19px/1.35 Inter, sans-serif; color: #16262B; margin: 8px 0 18px; }
.mrd-drawer-meta div { font: 400 13.5px/1.4 Inter, sans-serif; color: #33474C; padding: 7px 0; border-bottom: 1px solid #EDF1F1; }
.mrd-drawer-meta span { display: inline-block; width: 110px; color: #9BA9AC; font-weight: 600; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; }
.mrd-drawer-acoes { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
/* ---- menu do usuário na topbar (injetado pelo meridiano.js) ----------
A Topbar do Pencil é justify-between com Wordmark + Nav; entrando como
terceiro filho, a nav fica centrada e o menu ancora à direita. */
.mrd-usuario {
display: flex; align-items: center; gap: 14px;
font: 500 12.5px/1 Inter, system-ui, sans-serif;
white-space: nowrap;
}
.mrd-usuario-nome {
color: #8FA3A6; font-weight: 600;
max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.mrd-usuario a {
color: #F3EFE9; text-decoration: none;
padding: 5px 9px; border-radius: 7px;
border: 1px solid rgba(243, 239, 233, .22);
transition: background .15s, border-color .15s;
}
.mrd-usuario a:hover {
background: rgba(243, 239, 233, .12);
border-color: rgba(243, 239, 233, .45);
}
/* ---- sugestão do classificador na tela de tratamento ---------------- */
.mrd-sugestao {
width: 100%; box-sizing: border-box;
border: 1px solid #E3E9E9; border-left-width: 4px; border-radius: 10px;
background: #F7FAFA; padding: 12px 14px; margin: 4px 0 10px;
font-family: Inter, system-ui, sans-serif;
}
.mrd-sug-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mrd-sug-titulo { font: 600 13px/1.35 Inter, sans-serif; color: #16262B; }
.mrd-sug-conf { font: 500 11px/1 Inter, sans-serif; color: #9BA9AC; white-space: nowrap; }
.mrd-sug-prazo { font: 400 13px/1.5 Inter, sans-serif; color: #33474C; margin-top: 6px; }
.mrd-sug-vencido { color: #B3261E; }
.mrd-sug-urgente { color: #B07A22; }
.mrd-sug-aviso { font: 400 11.5px/1.5 Inter, sans-serif; color: #8A6A3E; margin-top: 6px; }
.mrd-sug-trecho {
font: 400 12px/1.6 Inter, sans-serif; color: #6F7F83;
margin-top: 8px; padding-top: 8px; border-top: 1px solid #E3E9E9;
max-height: 96px; overflow-y: auto;
}
/* a cor da borda diz a categoria de relance */
.mrd-sug-prazo_explicito { border-left-color: #2C6B3F; }
.mrd-sug-prazo_implicito { border-left-color: #B07A22; }
.mrd-sug-consultar_autos { border-left-color: #8A5A1E; background: #FFF8EE; }
.mrd-sug-sem_prazo { border-left-color: #9BA9AC; }
.mrd-sug-nao_classificado{ border-left-color: #CDD5D5; }
/* ---- tarja da regra temporária de pré-migração -----------------------
Âmbar e no topo do conteúdo: precisa ser vista, sem parecer erro. */
.mrd-tarja {
width: 100%; box-sizing: border-box;
background: #FFF8EE; border: 1px solid #E8D5B8; border-left: 4px solid #AD7C59;
border-radius: 10px; padding: 11px 16px; margin-bottom: 4px;
font: 400 12.5px/1.6 Inter, system-ui, sans-serif; color: #7A5220;
}
.mrd-tarja strong { color: #5E3E18; }
/* ---- rostos dos advogados intimados numa publicação ------------------
Existem para dar de relance a resposta "de quem é isto?", sem ler a lista
de advogados da intimação. */
.mrd-rostos { display: flex; align-items: center; flex-shrink: 0; }
.mrd-rosto {
width: 26px; height: 26px; border-radius: 999px;
object-fit: cover; display: inline-flex;
align-items: center; justify-content: center;
border: 2px solid #FFFFFF; background: #0B343B; color: #F3EFE9;
font: 700 9.5px/1 Inter, system-ui, sans-serif; letter-spacing: .3px;
margin-left: -7px; flex-shrink: 0;
}
.mrd-rosto:first-child { margin-left: 0; }
.mrd-rosto-ini { background: #115E67; }
/* foto no cadastro do usuário */
.mrd-foto-previa {
width: 72px; height: 72px; border-radius: 999px; object-fit: cover;
border: 1px solid #CDD5D5; background: #EDF1F1;
display: inline-flex; align-items: center; justify-content: center;
color: #6F7F83; font: 700 20px/1 Inter, sans-serif;
}
/* selo de cadastros aguardando liberação, no item Usuários do menu */
.mrd-selo {
display: inline-block; margin-left: 7px;
background: #AD7C59; color: #FFF8EE;
font: 700 10.5px/1 Inter, system-ui, sans-serif;
padding: 3px 6px; border-radius: 999px; vertical-align: text-top;
}
/* chamada para o autocadastro, injetada na tela de login */
.mrd-criar-conta {
font: 400 13px/20px Inter, system-ui, sans-serif;
color: #6F7F83; margin-bottom: 6px;
}
.mrd-criar-conta a { color: #115E67; font-weight: 600; text-decoration: none; }
.mrd-criar-conta a:hover { text-decoration: underline; }
/* formulários com select dentro das telas escritas à mão */
select.mrd-input { appearance: auto; }
.mrd-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* deploy automático ativo desde 27/07/2026 */