/* Tela do sistema. Sem fonte nem arquivo de fora (CSP: tudo 'self'). */

:root {
  --fundo: #f4f2ee;
  --papel: #ffffff;
  --tinta: #1b2330;
  --tinta-suave: #5a6473;
  --linha: #ddd8ce;
  --marinho: #14233b;
  --marinho-texto: #e9edf3;
  --marinho-suave: #9aa8bd;
  --latao: #9a6b1f;
  --latao-fundo: #f3e9d6;
  --erro: #a3271f;
  --erro-fundo: #fbe9e7;
  --certo: #1f6b43;
  --foco: #2f6fd0;
  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sem-serifa: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --raio: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #10151d;
    --papel: #171e29;
    --tinta: #e6e9ee;
    --tinta-suave: #98a3b3;
    --linha: #2a3443;
    --marinho: #0b111a;
    --marinho-texto: #e6e9ee;
    --marinho-suave: #7f8ca0;
    --latao: #d4a655;
    --latao-fundo: #2c2415;
    --erro: #f08a80;
    --erro-fundo: #3a1c19;
    --certo: #6fcf9a;
    --foco: #7fb0ff;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font: 15px/1.5 var(--sem-serifa);
}

h1, h2, h3 { font-family: var(--serifa); font-weight: 600; line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ───────── Login ───────── */

.entrada {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.entrada-caixa {
  width: 100%;
  max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--linha);
  border-top: 3px solid var(--latao);
  border-radius: var(--raio);
  padding: 32px 28px;
}

.entrada-caixa h1 { margin-bottom: 4px; }
.entrada-caixa .sub { color: var(--tinta-suave); margin-bottom: 24px; }

/* ───────── Formulário ───────── */

.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 13px; color: var(--tinta-suave); margin-bottom: 4px; }

input, select {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 10px;
}

button, .botao {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--raio);
  border: 1px solid var(--marinho);
  background: var(--marinho);
  color: var(--marinho-texto);
  padding: 9px 16px;
  text-decoration: none;
  display: inline-block;
}

@media (prefers-color-scheme: dark) {
  button, .botao { background: var(--latao); border-color: var(--latao); color: #14100a; }
}

button.leve, .botao.leve {
  background: transparent;
  color: var(--tinta);
  border-color: var(--linha);
  font-weight: 500;
  padding: 5px 10px;
  font-size: 13px;
}

button[disabled] { opacity: 0.55; cursor: default; }

.aviso { border-radius: var(--raio); padding: 9px 12px; margin: 0 0 14px; font-size: 14px; }
.aviso.erro { background: var(--erro-fundo); color: var(--erro); }
.aviso.certo { background: var(--latao-fundo); color: var(--tinta); }
.aviso:empty { display: none; }

/* ───────── Casca ───────── */

.casca { display: grid; grid-template-columns: 232px 1fr; min-height: 100%; }

.lateral {
  background: var(--marinho);
  color: var(--marinho-texto);
  padding: 20px 0;
  display: flex;
  flex-direction: column;
}

.marca { padding: 0 20px 18px; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.marca strong { font-family: var(--serifa); font-size: 18px; display: block; }
.marca small { color: var(--marinho-suave); }

.lateral nav { padding: 12px 0; flex: 1; }
.grupo { padding: 14px 20px 4px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--marinho-suave); }

.lateral nav a {
  display: block;
  padding: 7px 20px;
  text-decoration: none;
  color: var(--marinho-texto);
  border-left: 3px solid transparent;
}
.lateral nav a:hover { background: rgb(255 255 255 / 0.05); }
.lateral nav a[aria-current="page"] { border-left-color: var(--latao); background: rgb(255 255 255 / 0.08); }

.quem { padding: 14px 20px 0; border-top: 1px solid rgb(255 255 255 / 0.08); font-size: 13px; }
.quem div { color: var(--marinho-suave); overflow-wrap: anywhere; margin-bottom: 8px; }
.quem button { background: transparent; border-color: rgb(255 255 255 / 0.25); color: var(--marinho-texto); font-weight: 500; padding: 5px 10px; font-size: 13px; }

main { padding: 32px 36px 56px; min-width: 0; }
main > header { margin-bottom: 22px; }
main > header p { color: var(--tinta-suave); margin-top: 4px; max-width: 70ch; }

.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 18px;
  max-width: 920px;
}
.cartao h2 { margin-bottom: 10px; }
.cartao p + p { margin-top: 8px; }

.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 920px; margin-bottom: 18px; }
.grade .cartao { margin: 0; }

.fase {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  background: var(--latao-fundo);
  color: var(--latao);
  border-radius: 99px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

.suave { color: var(--tinta-suave); }
.numero { font-family: var(--serifa); font-size: 28px; font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); }
th, td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--linha); vertical-align: middle; }
td { overflow-wrap: anywhere; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.rolagem { overflow-x: auto; }

.linha-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; align-items: end; }
.linha-form button { margin-bottom: 14px; }

progress { width: 100%; height: 10px; accent-color: var(--latao); }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Autos */
.autos-lista { max-height: 420px; overflow: auto; }
.autos-texto { white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.5 ui-monospace, Consolas, monospace; background: var(--fundo); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; margin: 0 0 12px; max-height: 60vh; overflow: auto; }
button.pagina { font-size: 12px; padding: 1px 8px; white-space: nowrap; }
.trecho { color: var(--tinta-suave); font-size: 13px; }
.autos-itens { margin: 0; padding-left: 18px; }
.autos-itens li { margin-bottom: 6px; }
.parte { border-top: 1px solid var(--linha); padding: 12px 0; }
.parte:first-of-type { border-top: 0; padding-top: 0; }
.parte h3 { margin: 0 0 8px; }
.falta { color: var(--erro); font-size: 14px; margin: 8px 0 0; }
.alerta { color: var(--erro); font-size: 13px; }
.marcos { display: grid; gap: 8px; margin-bottom: 10px; }
.marco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.marco input { width: auto; margin: 0; }
.conta-passos { margin: 0 0 10px; padding-left: 20px; font-size: 14px; }
.conta-passos li { margin-bottom: 4px; }
.conta-avisos { margin: 0 0 10px; padding-left: 20px; font-size: 14px; color: var(--erro); }

@media (max-width: 760px) {
  .casca { grid-template-columns: 1fr; }
  .lateral { padding: 12px 0; }
  .lateral nav { display: flex; flex-wrap: wrap; padding: 6px 12px; }
  .lateral nav a { padding: 6px 10px; border-left: 0; border-bottom: 2px solid transparent; }
  .lateral nav a[aria-current="page"] { border-bottom-color: var(--latao); }
  .grupo { width: 100%; padding: 8px 10px 0; }
  main { padding: 20px 16px 40px; }
}

/* ───────── Processos: intimações, prazos, carteira ───────── */

[hidden] { display: none !important; }

h3 { font-size: 16px; }
main a { color: var(--latao); text-underline-offset: 2px; }
main a.botao { color: var(--tinta); }

.volta { margin-bottom: 10px; font-size: 14px; }
.titulo-lista { margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; }
.titulo-lista .fase { margin: 0; }
.cartao.larga { max-width: 1180px; }

.filtros, .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.filtros { margin-bottom: 14px; }
.acoes { margin-top: 14px; align-items: center; }
.filtros button[aria-pressed="true"] { border-color: var(--latao); color: var(--latao); font-weight: 600; }

.topo { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 10px; }
.topo h3 a { color: var(--tinta); }
.origem { font-size: 13px; margin-top: 4px; }
.vence { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vence strong { display: block; font-family: var(--serifa); font-size: 22px; line-height: 1.1; }
.vence span { font-size: 13px; color: var(--tinta-suave); }

.prazo { border-left: 3px solid var(--latao); }
.prazo.atrasado { border-left-color: var(--erro); }
.prazo.atrasado .vence strong, .prazo.atrasado .vence span { color: var(--erro); }

.selo { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 99px; padding: 2px 10px; margin-bottom: 10px; border: 1px solid var(--linha); color: var(--tinta-suave); }
.selo.sugerido { background: var(--latao-fundo); color: var(--latao); border-color: transparent; }
.selo.confirmado { color: var(--certo); border-color: var(--certo); }

.sugestao { margin-top: 8px; font-weight: 600; }

.conta { margin-top: 10px; font-size: 14px; }
.conta summary { cursor: pointer; color: var(--tinta-suave); width: fit-content; }
.conta[open] summary { margin-bottom: 8px; }

.ficha { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 6px 16px; margin: 0; font-size: 14px; }
.ficha dt { color: var(--tinta-suave); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }

.texto { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; font-family: var(--serifa); font-size: 16px; line-height: 1.6; max-width: 72ch; }

.painel-prazo, .ajuste { margin-top: 14px; }
.ajuste { border-top: 1px solid var(--linha); padding-top: 14px; }
.resultado:not(:empty) { background: var(--fundo); border-radius: var(--raio); padding: 12px 14px; margin-bottom: 4px; }
.marca-caixa { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin-bottom: 14px; }
input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--latao); }

/* ───────── Leis ───────── */

textarea {
  width: 100%;
  font: inherit;
  color: var(--tinta);
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 9px 10px;
  resize: vertical;
}
.campo.larga { grid-column: 1 / -1; }
.lei-saida:empty { display: none; }
.lei-saida { margin-top: 4px; }
.lei-saida h3 { font-family: var(--serifa); font-size: 18px; margin: 4px 0 10px; }
.lei-texto { border-left: 3px solid var(--latao); padding: 2px 0 2px 14px; max-width: 78ch; }
.disp { margin: 0 0 8px; font-family: var(--serifa); font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.disp.inciso { padding-left: 18px; }
.disp.alinea { padding-left: 36px; }
.disp.item { padding-left: 54px; }
.disp-rotulo { font-family: var(--sem-serifa); font-size: 13px; font-weight: 600; color: var(--tinta-suave); }
.disp-nota { font-family: var(--sem-serifa); font-size: 12px; color: var(--tinta-suave); }
.veredito { font-weight: 600; margin: 0 0 10px; }
.veredito.sim { color: var(--certo); }
.veredito.nao { color: var(--erro); }
td .fase { margin-left: 8px; }

@media (max-width: 560px) {
  .topo { flex-direction: column; gap: 6px; }
  .vence { text-align: left; }
  .ficha { grid-template-columns: 1fr; gap: 0; }
  .ficha dd { margin-bottom: 8px; }
}

/* Consultivo */
.apontamento { border-top: 1px solid var(--linha); padding: 14px 0 6px; max-width: 86ch; }
.apontamento:first-of-type { border-top: 0; padding-top: 0; }
.apontamento h3 { font-family: var(--serifa); font-size: 17px; margin: 0 0 6px; }
.selo.alta { color: var(--erro); border-color: var(--erro); }
.selo.media { background: var(--latao-fundo); color: var(--latao); border-color: transparent; }

/* Estudo */
.enunciado { white-space: pre-wrap; }
.alternativas { list-style: none; padding: 0; margin: 0 0 14px; }
.alternativas li { margin: 0 0 6px; }

/* Fase 6: primeiros passos e tela de aceite */
.passos { margin: 0; padding-left: 20px; line-height: 1.9; }
.passos .feito { color: var(--tinta-suave); }
.passos .feito a { color: inherit; }
.aceite { max-width: 820px; width: 100%; margin: 0 auto; padding: 32px 20px; }
.aceite > button { margin-top: 8px; }