:root {
  --fundo: #f6f6f4; --cartao: #ffffff; --linha: #e4e4e0; --texto: #1d1d1b; --cinza: #6b6b66;
  --acento: #e8541c; --acento-claro: #fdeee7; --azul: #2563c9; --azul-claro: #e9f0fb;
  --verde: #1f8a4c; --verde-claro: #e6f4ec; --vermelho: #c0392b; --vermelho-claro: #fbeaea;
  --raio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 14px/1.5 Inter, system-ui, sans-serif; }
a { color: inherit; }
h1 { font-size: 1.75rem; font-weight: 700; margin: 4px 0; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
small { font-size: 12px; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.cinza { color: var(--cinza); }
.nowrap { white-space: nowrap; }
.dir { text-align: right; }
.ic { flex: none; vertical-align: -3px; }

.topo { display: flex; align-items: center; gap: 24px; padding: 0 24px; height: 56px; background: var(--cartao); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5; }
.marca { font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.marca.grande { font-size: 1.25rem; margin-bottom: 8px; }
.ponto { width: 10px; height: 10px; border-radius: 3px; background: var(--acento); display: inline-block; }
.topo nav { display: flex; gap: 4px; }
.topo nav a { text-decoration: none; padding: 6px 10px; border-radius: 8px; color: var(--cinza); display: flex; gap: 6px; align-items: center; }
.topo nav a:hover { background: var(--fundo); color: var(--texto); }
.topo nav a.ativo { background: var(--acento-claro); color: var(--acento); font-weight: 600; }
.eu { margin-left: auto; display: flex; gap: 10px; align-items: center; color: var(--cinza); }

main { padding: 24px; max-width: 1280px; margin: 0 auto; }
main.largo { max-width: none; }
main.centro { min-height: 100vh; display: grid; place-items: center; }

.cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 16px; }
.conta { color: var(--cinza); font-weight: 500; font-size: .7em; }
.sub { color: var(--cinza); }
.voltar { color: var(--cinza); text-decoration: none; font-size: 13px; }
.acoes-topo { display: flex; gap: 8px; align-items: center; }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; margin-bottom: 12px; }
.cartao.destaque { border-color: var(--acento); background: var(--acento-claro); }
.cartao.entrar { width: 360px; display: flex; flex-direction: column; gap: 12px; padding: 28px; }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
input, textarea, select { font: inherit; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 8px; background: #fff; width: 100%; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--acento-claro); border-color: var(--acento); }
input[type=file] { padding: 6px; }
.nota { color: var(--cinza); font-size: 13px; margin: 4px 0 8px; }
.aviso { color: var(--vermelho); margin: 0; }
.obrig { color: var(--acento); font-size: 12px; font-weight: 600; }

.bt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--linha); background: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--texto); }
.bt:hover { border-color: #c9c9c3; }
.bt.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.bt.primario:hover { filter: brightness(.95); }
.bt.pequeno { padding: 2px 10px; }
.bt:disabled { opacity: .6; }
button.link { background: none; border: 0; color: var(--azul); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; text-decoration-color: #b8cdee; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.num { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; display: flex; gap: 12px; align-items: center; }
.num b { font-size: 1.35rem; display: block; line-height: 1.2; }
.num small { color: var(--cinza); }
.q { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; }
.q.azul { background: var(--azul-claro); color: var(--azul); }
.q.laranja { background: var(--acento-claro); color: var(--acento); }
.q.verde { background: var(--verde-claro); color: var(--verde); }
.q.cinzaq { background: #efefec; color: var(--cinza); }

.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin-bottom: 12px; }
.tabela th { text-align: left; font-size: 12px; font-weight: 600; color: var(--cinza); padding: 10px 12px; border-bottom: 1px solid var(--linha); background: #fafaf8; }
.tabela td { padding: 10px 12px; border-bottom: 1px solid #efefeb; vertical-align: top; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela.clicavel tbody tr { cursor: pointer; }
.tabela.clicavel tbody tr:hover { background: #fafaf7; }
.tabela.compacta td { padding: 4px 6px; border: 0; }

.selo { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.selo.azul { background: var(--azul-claro); color: var(--azul); }
.selo.laranja { background: var(--acento-claro); color: var(--acento); }
.selo.verde { background: var(--verde-claro); color: var(--verde); }
.selo.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }
.selo.cinzaq { background: #efefec; color: var(--cinza); }
.selo.grande { padding: 6px 12px; }

.vazio { text-align: center; padding: 60px; color: var(--cinza); display: flex; flex-direction: column; align-items: center; gap: 8px; }

.form { display: flex; flex-direction: column; gap: 4px; max-width: 760px; }
.form .campo { padding: 14px 0; border-bottom: 1px solid #efefeb; }
.form .acoes { padding-top: 14px; display: flex; gap: 12px; align-items: center; }
.form textarea { margin-top: 8px; }
.linha-form { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; }
.linha-form h3 { width: 100%; }
.linha-form input, .linha-form select { width: auto; flex: 1; }
.copiar { display: flex; gap: 8px; margin-top: 8px; }

.etapas { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 12px; flex-wrap: wrap; }
.etapas li { display: flex; gap: 6px; align-items: center; padding: 4px 12px 4px 4px; border-radius: 999px; background: #ecece8; color: var(--cinza); font-size: 13px; }
.etapas li span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 12px; font-weight: 600; }
.etapas li.feita { background: var(--verde-claro); color: var(--verde); }
.etapas li.agora { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.andamento { display: flex; gap: 8px; align-items: center; }
.gira { width: 14px; height: 14px; border: 2px solid var(--azul-claro); border-top-color: var(--azul); border-radius: 50%; animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.aviso-erro { border-color: var(--vermelho); background: var(--vermelho-claro); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
form.inline { display: inline; margin-left: auto; }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--linha); margin: 8px 0 16px; overflow-x: auto; }
.abas a { padding: 10px 14px; text-decoration: none; color: var(--cinza); display: flex; gap: 6px; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.abas a.ativo { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
.bolinha { background: var(--acento); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; font-weight: 700; }

.duas { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.duas.fatos { grid-template-columns: minmax(0, 1fr) minmax(380px, 46%); }
.lateral { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
.editor { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); }
.barra { border-radius: var(--raio) var(--raio) 0 0; display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--linha); background: #fafaf8; position: sticky; top: 56px; z-index: 2; }
.espaco { flex: 1; }
#texto { border: 0; border-radius: 0; min-height: calc(100vh - 230px); resize: vertical; padding: 20px 28px; font: 14px/1.6 Georgia, 'Times New Roman', serif; }
.alerta { border-left: 3px solid var(--linha); padding: 6px 10px; margin: 8px 0; cursor: pointer; font-size: 13px; }
.alerta:hover { background: #fafaf7; }
.alerta.g-alta { border-color: var(--vermelho); }
.alerta.g-media { border-color: var(--acento); }
.alerta.g-baixa { border-color: #c9c9c3; }
.cod { font-family: ui-monospace, monospace; font-weight: 700; font-size: 12px; background: #efefec; padding: 1px 6px; border-radius: 4px; }
.grav { font-size: 12px; color: var(--cinza); }
.trecho { color: var(--cinza); font-style: italic; font-size: 13px; }
.ok { color: var(--verde); } .atencao { color: var(--acento); }
.md { white-space: pre-wrap; font-size: 13px; }
details summary { cursor: pointer; }

.grupo { margin: 20px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--cinza); }
.resumo-parte { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.resumo-parte small { display: block; color: var(--cinza); }
.fato.confirmado { background: #f3faf6; }
.fato.sem_fonte { opacity: .5; text-decoration: line-through; }
.fato.corrigido { background: #fff8f4; }
.corrigido { color: var(--acento); font-weight: 600; font-size: 13px; text-decoration: none; }
.marcar button { border: 1px solid var(--linha); background: #fff; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; color: var(--cinza); }
.fato.confirmado .m-ok { background: var(--verde); color: #fff; border-color: var(--verde); }
.fato.corrigido .m-cor { background: var(--acento); color: #fff; border-color: var(--acento); }
.fato.sem_fonte .m-sem { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.visor { position: sticky; top: 72px; height: calc(100vh - 88px); background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); display: flex; flex-direction: column; overflow: hidden; }
.visor-cab { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--linha); }
#visor-corpo { overflow: auto; padding: 12px; flex: 1; }
#visor-corpo img { width: 100%; border: 1px solid var(--linha); border-radius: 6px; }
.texto-pag pre { white-space: pre-wrap; font-size: 12px; background: #fafaf8; padding: 10px; border-radius: 6px; }
mark { background: #ffe08a; }
.achado p { margin: 6px 0; }

.diff { width: 100%; border-collapse: collapse; background: var(--cartao); table-layout: fixed; font: 13px/1.5 Georgia, serif; }
.diff th { text-align: left; padding: 8px; font: 600 12px Inter, sans-serif; color: var(--cinza); border-bottom: 1px solid var(--linha); }
.diff td { padding: 4px 8px; vertical-align: top; border-bottom: 1px solid #f2f2ef; }
.diff tr.igual td { color: #8a8a84; }
.diff tr.replace td:first-child, .diff tr.delete td:first-child { background: var(--vermelho-claro); }
.diff tr.replace td:last-child, .diff tr.insert td:last-child { background: var(--verde-claro); }

@media (max-width: 900px) {
  .duas, .duas.fatos { grid-template-columns: 1fr; }
  .lateral, .visor { position: static; height: auto; max-height: none; }
  .topo { gap: 12px; padding: 0 12px; } .topo nav a span { display: none; }
  main { padding: 16px; }
}
.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; margin-top: 8px; }
.check input { width: auto; }
.leitura { padding: 24px 32px; font: 14.5px/1.65 Georgia, 'Times New Roman', serif; }
.leitura h4 { font: 700 14px Inter, sans-serif; margin: 22px 0 8px; }
.leitura p { margin: 0 0 10px; text-align: justify; }
.leitura table { border-collapse: collapse; margin: 6px 0 14px; width: 100%; font-size: 13.5px; }
.leitura td { border: 1px solid var(--linha); padding: 4px 8px; vertical-align: top; }
.leitura mark { background: #ffe08a; }
[hidden] { display: none !important; }
.alternar { display: flex; gap: 8px; align-items: center; color: var(--cinza); margin: 4px 0 8px; }
.alternar a { padding: 4px 10px; border: 1px solid var(--linha); border-radius: 999px; text-decoration: none; background: #fff; }
.alternar a.ativo { background: var(--acento-claro); color: var(--acento); border-color: var(--acento); font-weight: 600; }
details .leitura { padding: 12px 0 0; font-size: 13.5px; }