:root{
  --bg:#f4f5f7; --panel:#ffffff; --ink:#1f2430; --muted:#6b7280;
  --line:#e2e5ea; --accent:#0b6b4f; --accent-soft:#e3f3ec; --accent-dk:#095a42;
  --mark:#ffd54a; --score:#0b4f6b; --erro:#c0392b;
}
*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}   /* a página não rola; quem rola são os painéis */
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.6 Georgia,"Times New Roman",serif;
  display:flex; flex-direction:column;
}
.hidden{display:none !important}
button{font:inherit; cursor:pointer}
.link{background:none; border:none; color:var(--muted); text-decoration:underline; font:13px system-ui,sans-serif}
.link:hover{color:var(--ink)}

/* ---------------- login ---------------- */
.login{flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:24px}
.login-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:32px 30px; width:100%; max-width:360px; box-shadow:0 8px 30px rgba(0,0,0,.06);
  display:flex; flex-direction:column; gap:6px;
}
.login-card h1{font-size:20px; margin:0; color:var(--accent)}
.login-card .sub{font:13px system-ui,sans-serif; color:var(--muted); margin:0 0 14px}
.login-card label{font:600 12px system-ui,sans-serif; color:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.login-card input{font:16px system-ui,sans-serif; padding:10px 12px; border:1px solid var(--line); border-radius:8px; margin:4px 0 12px}
.login-card button{background:var(--accent); color:#fff; border:none; border-radius:8px; padding:11px; font:600 15px system-ui,sans-serif}
.login-card button:hover{background:var(--accent-dk)}
.login-card .erro{color:var(--erro); font:13px system-ui,sans-serif; margin:8px 0 0}
.login-card .aviso-cfg{color:#8a6d00; background:#fff6d9; border:1px solid #e9b949; border-radius:8px; padding:8px 10px; font:12px system-ui,sans-serif; margin:8px 0 0}

/* ---------------- app ---------------- */
header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line);
  font:14px system-ui,Segoe UI,Roboto,sans-serif; flex:0 0 auto;
}
.brand strong{color:var(--accent)}

.barra-busca{background:var(--panel); border-bottom:1px solid var(--line); padding:12px 16px; flex:0 0 auto}
.linha1{display:flex; gap:8px; align-items:stretch}
.barra-busca select, .barra-busca input{font:15px system-ui,sans-serif; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff}
#sel-base{flex:0 0 auto; max-width:220px; color:var(--accent); font-weight:600}
#q{flex:1 1 auto; min-width:0}
#btn-buscar{flex:0 0 auto; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:0 20px; font:600 15px system-ui,sans-serif}
#btn-buscar:hover{background:var(--accent-dk)}
#btn-buscar:disabled{opacity:.6; cursor:progress}

.filtros{margin-top:8px; font:13px system-ui,sans-serif}
.filtros summary{cursor:pointer; color:var(--muted); user-select:none}
.filtros .grade{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.filtros label{display:flex; flex-direction:column; font:600 11px system-ui,sans-serif; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; gap:3px}
.filtros input, .filtros select{font:14px system-ui,sans-serif; padding:6px 8px; border:1px solid var(--line); border-radius:6px; text-transform:none; letter-spacing:normal}
.filtros input{width:150px}
.filtros .lrelator select{max-width:230px}
.filtros #f-relator{font-weight:600; color:var(--accent)}

/* botões de download do julgado */
.card-julgado .dl{margin-top:8px; display:flex; gap:6px}
.card-julgado .dl button{background:var(--accent-soft); color:var(--accent-dk); border:1px solid #bfe3d5; border-radius:6px; padding:4px 10px; font:600 12px system-ui,sans-serif}
.card-julgado .dl button:hover{background:#d3ece1}

#app{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}  /* trava a altura → painéis rolam sozinhos */
main{flex:1 1 auto; display:flex; min-height:0}
.pane{flex:1 1 50%; min-width:0; min-height:0; overflow-y:auto; padding:20px 24px}
#divisor{flex:0 0 6px; cursor:col-resize; background:var(--line)}
#divisor:hover{background:var(--accent)}
#pane-julgado{background:#fbfbfc; border-left:1px solid var(--line)}
.doc{max-width:840px; margin:0 auto}

/* resultados */
.vazio{color:var(--muted); font-family:system-ui,sans-serif}
.res-cab{font:13px system-ui,sans-serif; color:var(--muted); margin-bottom:14px}
.res{background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px 16px; margin-bottom:14px}
.res .rhead{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:13px system-ui,sans-serif; color:var(--muted)}
.res .score{font:600 12px system-ui,sans-serif; color:#fff; background:var(--score); border-radius:10px; padding:1px 8px}
.res .meta{margin:6px 0; font:13px system-ui,sans-serif; color:var(--muted)}
.res .meta b{color:var(--ink); font-weight:600}
.res .ementa{font-size:14px; text-align:justify; margin:8px 0 4px}
.res .ementa .rot{font:700 11px system-ui,sans-serif; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; display:block; margin-bottom:2px}
.res-rodape{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}
.res-rodape .ext-nota{font:13px system-ui,sans-serif; color:var(--muted)}
.copiar-ementa{margin-left:auto; background:var(--accent-soft); color:var(--accent-dk);
  border:1px solid #bfe3d5; border-radius:6px; padding:5px 12px; font:600 12px system-ui,sans-serif; cursor:pointer}
.copiar-ementa:hover{background:#d3ece1}
.copiar-ementa.ok{background:var(--accent); color:#fff; border-color:var(--accent)}
.copiar-ementa.erro{background:#fdecec; color:var(--erro); border-color:#e6a3a3}
.res.clicavel{cursor:pointer; transition:border-color .12s, box-shadow .12s}
.res.clicavel:hover{border-color:var(--accent); box-shadow:0 2px 12px rgba(11,107,79,.13)}
.res.ativo{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft)}

/* número do processo = container clicável que copia */
.num.copiavel{position:relative; display:inline-flex; align-items:center; gap:4px;
  font:700 13.5px system-ui,sans-serif; color:var(--accent); cursor:pointer;
  background:var(--accent-soft); border:1px solid #bfe3d5; border-radius:6px; padding:2px 9px}
.num.copiavel::before{content:"⧉"; font-size:12px; opacity:.65}
.num.copiavel:hover{background:#d3ece1}
.num.copiavel::after{
  position:absolute; left:50%; transform:translateX(-50%); top:-22px; opacity:0;
  font:600 11px system-ui,sans-serif; padding:1px 7px; border-radius:4px; white-space:nowrap;
  pointer-events:none; transition:opacity .1s;
}
.num.copiado::after{content:"✓ copiado"; background:var(--accent); color:#fff; opacity:1}
.num.copia-erro::after{content:"Ctrl+C para copiar"; background:#fdecec; color:var(--erro); border:1px solid #e6a3a3; opacity:1}

/* julgado (direita) */
.instrucao{color:var(--muted); font-family:system-ui,sans-serif}
.instrucao h3{color:var(--ink)}
.chip{font:12px system-ui,sans-serif; padding:1px 6px; border-radius:4px; background:var(--accent-soft); border:1px solid #bfe3d5}
.card-julgado{background:#fff; border:1px solid var(--line); border-radius:8px; padding:16px 18px}
.card-julgado .jhead{font:13px system-ui,sans-serif; color:var(--muted); margin-bottom:10px; border-bottom:1px solid var(--line); padding-bottom:8px}
.card-julgado .jhead .num{font-weight:700; color:var(--accent); font-size:14px}
.card-julgado .jhead .meta{margin-top:3px}
.card-julgado .rot{font:700 12px system-ui,sans-serif; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin:12px 0 4px}
.card-julgado .ementa{font-size:14px; text-align:justify}
/* ementa como citação (estilo Markdown blockquote) */
.card-julgado .ementa-md{margin:0; font-size:14px; text-align:justify; color:var(--ink);
  border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:10px 14px; border-radius:0 6px 6px 0}
.card-julgado .teor{font-size:13.5px; white-space:pre-wrap; text-align:justify}
/* inteiro teor formatado (estilo Markdown): parágrafos e seções */
.card-julgado .teor.md{white-space:normal; font-size:13.5px}
.card-julgado .teor.md p{margin:0 0 10px; text-align:justify}
.card-julgado .teor.md h4.secao{margin:18px 0 8px; font:700 13px system-ui,sans-serif;
  color:var(--accent); text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--line); padding-bottom:4px}
.card-julgado mark{background:var(--mark); padding:0 2px; border-radius:2px}
.nao-achado{background:#fdecec; border:1px solid #e6a3a3; border-radius:8px; padding:12px 14px; font:13px system-ui,sans-serif}

@media (max-width:820px){
  html,body{overflow:auto}          /* no celular a página rola normalmente (painéis empilhados) */
  main{flex-direction:column}
  .pane{overflow-y:visible}
  #divisor{display:none}
  #pane-julgado{border-left:none; border-top:1px solid var(--line)}
  .linha1{flex-wrap:wrap}
  #q{flex-basis:100%; order:3}
}