/* estilo.css — Mapeador de Autos. Três colunas, como o ProtejAI: índice | autos | texto. */
:root {
  --tinta: #1a1a1a; --papel: #fdfdfb; --borda: #d8d5cd; --suave: #f4f2ec; --fundo: #ecebe6;
  --acento: #7a2e2e; --atencao: #8a5a00; --ok: #2d5a34; --fraco: #6b6b6b; --info: #2b4c7e;
  --sombra: 0 1px 3px rgba(0,0,0,.07);
  --pg-texto: #1a7f37; --pg-ocr-pendente: #d4380d; --pg-ocr: #6f2dbd; --pg-imagem: #7a7a7a; --pg-excluida: #b0b0b0;
  --c1: 320px; --c3: 420px;
  --alt-topo: 92px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --tinta: #e8e6e1; --papel: #16161a; --borda: #35353c; --suave: #1f1f25; --fundo: #101014;
    --acento: #d98a8a; --atencao: #d9a441; --ok: #7fb686; --fraco: #9a9a9a; --info: #8fb0e0;
    --sombra: 0 1px 3px rgba(0,0,0,.4);
    --pg-texto: #4ade80; --pg-ocr-pendente: #fb923c; --pg-ocr: #c4b5fd; --pg-imagem: #a3a3a3; --pg-excluida: #6b7280;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 14px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif; display: flex; flex-direction: column; }
code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--suave); padding: 0 4px; border-radius: 4px; }
.sub { color: var(--fraco); font-size: 12.5px; }
.oculto { display: none !important; }
.cresce { flex: 1 1 auto; }
.aviso { color: var(--atencao); } .erro { color: var(--acento); } .ok { color: var(--ok); }
h1 { font-size: 17px; margin: 0; font-weight: 640; letter-spacing: -.01em; }
h2 { font-size: 12px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; color: var(--fraco); font-weight: 620; }
h3 { font-size: 12.5px; margin: 12px 0 4px; color: var(--fraco); font-weight: 620; text-transform: uppercase; letter-spacing: .04em; }
button { font: inherit; font-weight: 560; padding: 6px 12px; border-radius: 7px; border: 1px solid var(--borda); background: var(--suave); color: var(--tinta); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--acento); }
button:disabled { opacity: .45; cursor: default; }
button.principal { background: var(--acento); color: #fff; border-color: var(--acento); }
button.mini { padding: 3px 9px; font-size: 12px; font-weight: 520; }
input[type="text"], input[type="search"], input[type="number"], select, textarea {
  font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--borda); border-radius: 6px; background: var(--suave); color: var(--tinta);
}
textarea { width: 100%; min-height: 110px; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--borda); vertical-align: top; }
th { color: var(--fraco); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; }
.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.linha.compacta { gap: 6px; margin-top: 6px; }
.linha.centro { justify-content: center; }
.etiq { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 640; border: 1px solid #9a9a9a; background: #ecebe6; color: #1a1a1a; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .etiq { background: #2a2a31; color: #e8e6e1; border-color: #6b6b73; } }
.num { font-variant-numeric: tabular-nums; color: var(--fraco); }
.nota { margin: 8px 0 0; }
pre { background: var(--suave); border: 1px solid var(--borda); border-radius: 7px; padding: 10px; overflow: auto; font-size: 12.5px; }

/* ---- topo */
.topo { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "marca processo etapas acoes" "barra barra barra barra" "status status status status"; gap: 2px 16px; align-items: center; padding: 10px 16px 6px; border-bottom: 1px solid var(--borda); background: var(--papel); }
.marca { grid-area: marca; display: flex; flex-direction: column; }
.processo { grid-area: processo; font-size: 13px; }
.etapas { grid-area: etapas; display: flex; gap: 10px; font-size: 12px; color: var(--fraco); white-space: nowrap; }
.etapas .etapa::before { content: "○ "; }
.etapas .etapa.feita::before { content: "● "; color: var(--ok); }
.etapas .etapa.andando::before { content: "◐ "; color: var(--atencao); }
.acoes { grid-area: acoes; display: flex; gap: 6px; }
.barra { grid-area: barra; height: 4px; background: var(--suave); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.barra > i { display: block; height: 100%; background: var(--acento); width: 0; transition: width .2s; }
.status { grid-area: status; min-height: 16px; font-size: 12.5px; color: var(--fraco); }

/* ---- tela inicial */
.inicio { max-width: 1100px; margin: 0 auto; padding: 24px 16px; width: 100%; }
.solta { border: 2px dashed var(--borda); border-radius: 12px; padding: 40px 16px; text-align: center; color: var(--fraco); cursor: pointer; background: var(--suave); transition: border-color .15s, background .15s; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.solta strong { color: var(--tinta); font-size: 16px; }
.solta:hover, .solta.sobre { border-color: var(--acento); background: var(--papel); }
.passos { text-align: left; max-width: 640px; margin: 10px auto 0; padding-left: 20px; line-height: 1.5; }
.passos li { margin: 2px 0; }
.painel { border: 1px solid var(--borda); border-radius: 10px; padding: 14px; margin-top: 16px; background: var(--papel); box-shadow: var(--sombra); }

/* ---- área de trabalho */
.app { display: grid; grid-template-columns: var(--c1) 6px minmax(300px, 1fr) 6px var(--c3); flex: 1 1 auto; min-height: 0; background: var(--fundo); }
.gutter { cursor: col-resize; background: var(--borda); opacity: .6; }
.gutter:hover, .gutter.ativo { background: var(--acento); opacity: 1; }
.col { display: flex; flex-direction: column; min-height: 0; background: var(--papel); }
.col.indice { border-right: 1px solid var(--borda); }
.col.texto { border-left: 1px solid var(--borda); }
.col.visor { background: var(--fundo); }
.col-cab { padding: 10px 12px 6px; border-bottom: 1px solid var(--borda); }
.col-cab h2 { margin-bottom: 4px; }
.col-pe { padding: 6px 12px; border-top: 1px solid var(--borda); }
.avisos .aviso { font-size: 12px; margin: 2px 0; }

/* índice */
.lista-pecas { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 auto; }
.peca { display: grid; grid-template-columns: 30px 1fr auto; grid-template-areas: "n titulo destino" "n meta destino" "n pgbar destino"; gap: 1px 6px; padding: 6px 10px 6px 8px; border-bottom: 1px solid var(--borda); cursor: pointer; }
.peca:hover { background: var(--suave); }
.peca.atual { background: var(--suave); box-shadow: inset 3px 0 0 var(--acento); }
.peca .n { grid-area: n; font-size: 11px; color: var(--fraco); font-variant-numeric: tabular-nums; padding-top: 2px; }
.peca .titulo { grid-area: titulo; font-size: 13px; line-height: 1.3; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.peca .titulo .etiq { cursor: pointer; }
.peca .titulo .etiq:hover { border-color: var(--acento); }
.peca .meta { grid-area: meta; font-size: 11.5px; color: var(--fraco); }
.peca .pgbar { grid-area: pgbar; display: flex; gap: 1px; height: 7px; margin-top: 4px; }
.peca .pgbar i { flex: 1 1 auto; background: var(--pg-imagem); border-radius: 1px; min-width: 2px; max-width: 14px; }
.peca .pgbar i.texto { background: var(--pg-texto); }
.peca .pgbar i.ocr-pendente { background: var(--pg-ocr-pendente); }
.peca .pgbar i.ocr { background: var(--pg-ocr); }
.peca .pgbar i.excluida { background: var(--pg-excluida); opacity: .5; }
.peca .destino { grid-area: destino; align-self: start; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; border: 1px solid transparent; cursor: pointer; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.destino.obrigatorio { color: #fff; background: #1a7f37; }
.destino.complementar { color: #fff; background: #1f5fa8; }
.destino.omitir { color: #fff; background: #8c2f2f; text-decoration: line-through; }
.peca.omitida .titulo { color: var(--fraco); }
.peca.estimada .titulo::after { content: " (estimada)"; color: var(--atencao); font-size: 11px; }

/* visor contínuo */
.paginas { overflow: auto; flex: 1 1 auto; padding: 12px 16px; scroll-behavior: smooth; }
.pg { margin: 0 auto 14px; max-width: 900px; background: var(--papel); border: 1px solid var(--borda); border-radius: 6px; box-shadow: var(--sombra); overflow: hidden; }
.pg.atual { outline: 2px solid var(--acento); }
.pg.excluida { opacity: .45; }
.pg-cab { display: flex; gap: 8px; align-items: center; padding: 4px 10px; font-size: 11.5px; color: var(--fraco); border-bottom: 1px solid var(--borda); background: var(--suave); flex-wrap: wrap; }
.pg-cab b { color: var(--tinta); }
.pg-cab .fonte { padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; }
.pg-cab .fonte.texto { background: var(--pg-texto); }
.pg-cab .fonte.ocr-pendente { background: var(--pg-ocr-pendente); }
.pg-cab .fonte.ocr { background: var(--pg-ocr); }
.pg-cab .fonte.imagem { background: var(--pg-imagem); }
.pg-cab .fonte.excluida { background: var(--pg-excluida); }
.pg-cab button { padding: 0 6px; font-size: 11px; }
.pg-corpo { position: relative; background: #fff; }
.pg-corpo img { display: block; width: 100%; height: auto; }
.pg-corpo .vazio { display: flex; align-items: center; justify-content: center; color: var(--fraco); font-size: 12px; aspect-ratio: 210 / 297; }
.pg-corpo.girada-90 img { transform: rotate(90deg); }

/* coluna de texto */
.abas { display: flex; border-bottom: 1px solid var(--borda); }
.abas button { flex: 1 1 auto; border: 0; border-radius: 0; background: transparent; padding: 8px 4px; font-size: 12.5px; color: var(--fraco); border-bottom: 2px solid transparent; }
.abas button.ativa { color: var(--tinta); border-bottom-color: var(--acento); }
.abas button .pend { color: var(--atencao); }
.aba { display: none; overflow: auto; padding: 10px 12px; flex: 1 1 auto; min-height: 0; }
.aba.ativa { display: block; }
.texto-pagina { white-space: pre-wrap; word-break: break-word; min-height: 200px; max-height: calc(100vh - 300px); margin: 6px 0 0; font-size: 13px; line-height: 1.55; font-family: inherit; }
.texto-pagina mark { padding: 0 2px; border-radius: 3px; background: var(--cor, #ffe58a); color: #111; }
.texto-pagina mark.tarja { text-decoration: none; }
.popover { position: absolute; z-index: 5; background: var(--papel); border: 1px solid var(--borda); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); padding: 8px 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: 360px; }
.legenda { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 11.5px; }
.legenda span { padding: 0 6px; border-radius: 4px; color: #111; }
.opcoes { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.opcoes label { display: flex; gap: 8px; align-items: baseline; font-size: 13px; cursor: pointer; flex-wrap: wrap; }
.opcoes input[type="checkbox"] { margin: 0; position: relative; top: 2px; }
.opcoes input[type="text"] { width: 12ch; }
.manual { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--borda); }
.manual input[type="text"] { min-width: 18ch; flex: 1 1 18ch; }
.partes-lista { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.partes-lista .parte { display: flex; gap: 6px; align-items: baseline; font-size: 13px; }
.partes-lista .parte .nome { flex: 1 1 auto; }
.partes-lista .parte.preservada { color: var(--fraco); }
.grade-filtro td, .grade-filtro th { padding: 2px 6px; font-size: 12px; }
.grade-filtro input { margin: 0; }
.destinos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.destinos .card { border: 1px solid var(--borda); border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.destinos .card b { display: block; font-size: 13px; }
.editor-filtro { border: 1px dashed var(--borda); border-radius: 8px; padding: 8px; margin-top: 6px; }

@media (max-width: 1100px) { .app { grid-template-columns: 260px 6px 1fr 6px 340px; } }
@media (max-width: 860px) { .app { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); } .gutter { display: none; } .col.indice, .col.texto { border: 0; border-bottom: 1px solid var(--borda); } .topo { grid-template-columns: 1fr auto; grid-template-areas: "marca acoes" "processo processo" "etapas etapas" "barra barra" "status status"; } }

/* Resultado do mapeamento e regras. */
.resultado { border-bottom: 1px solid var(--borda); padding: 6px 12px; font-size: 12.5px; }
.resultado summary { cursor: pointer; font-weight: 620; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--fraco); }
.resultado .barra-classes { display: flex; height: 10px; border-radius: 4px; overflow: hidden; margin: 6px 0; }
.resultado .barra-classes i { display: block; height: 100%; }
.resultado .legenda-classes { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.resultado .legenda-classes span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; background: var(--cor); }
.regra-form label { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.regra-form input[type="text"], .regra-form textarea, .regra-form select { width: 100%; }
.regra-form textarea { min-height: 60px; font: 12.5px ui-monospace, Menlo, monospace; }
#corpo-processos .estado { font-weight: 600; }