/* JEM — Revisão de Pranchas (PDF) · paleta e tipografia do padrão JEM */
:root {
  --azul: #2a78d6; --azul-escuro: #1c5cab; --verde: #008300; --verde-escuro: #006300;
  --vermelho: #d03b3b; --ambar: #eda100; --roxo: #4a3aa7;
  --tinta: #0b0b0b; --tinta-2: #52514e; --muted: #898781;
  --fundo: #f9f9f7; --superficie: #fcfcfb; --borda: #c9d3da; --grade: #e1e0d9;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
       background: var(--fundo); color: var(--tinta); line-height: 1.5; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px 60px; }
.oculto { display: none !important; }
.centro { text-align: center; }
.thin { font-weight: 400; color: var(--tinta-2); }

header h1 { font-size: 26px; }
header .sub { color: var(--tinta-2); margin: 4px 0 22px; }

.card { background: var(--superficie); border: 1px solid rgba(11,11,11,.10);
        border-radius: 12px; padding: 22px 26px; margin-bottom: 18px; }

.linha-config { display: flex; gap: 24px; flex-wrap: wrap; align-items: end; margin-bottom: 18px; }
label { font-size: 13px; color: var(--tinta-2); display: block; }
input[type="password"] { display: block; margin-top: 4px; padding: 9px 12px; min-width: 320px;
  border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; }
input[type="password"]:focus { outline: 2px solid var(--azul); border-color: var(--azul); }
.toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; padding-bottom: 9px;
          font-size: 14px; color: var(--tinta); }
.toggle input { width: 18px; height: 18px; accent-color: var(--verde); }

.dropzone { border: 2px dashed var(--borda); border-radius: 12px; padding: 34px 20px;
  text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone:focus, .dropzone.arrastando {
  border-color: var(--azul); background: #eef4fc; outline: none; }
.dz-icone { font-size: 30px; color: var(--azul); }
.dz-texto { margin-top: 6px; }
.dz-nota { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.arquivo-escolhido { margin-top: 12px; font-size: 14px; color: var(--verde-escuro); font-weight: 600; }

.btn-primario, .btn-secundario { margin-top: 16px; padding: 11px 26px; font-size: 15px;
  border-radius: 9px; border: none; cursor: pointer; font-weight: 600; }
.btn-primario { background: var(--azul); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--azul-escuro); }
.btn-primario:disabled { background: var(--borda); cursor: not-allowed; }
.btn-secundario { background: transparent; color: var(--azul); border: 1.5px solid var(--azul); }
.btn-secundario:hover { background: #eef4fc; }

.erro-box { margin-top: 14px; background: #fdecec; border: 1px solid var(--vermelho);
  color: #7c1d1d; padding: 10px 14px; border-radius: 8px; font-size: 14px; }
.erro-icone { font-size: 34px; color: var(--vermelho); margin-bottom: 8px; }

.spinner { width: 42px; height: 42px; margin: 6px auto 14px; border-radius: 50%;
  border: 4px solid var(--grade); border-top-color: var(--azul); animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.nota { color: var(--muted); font-size: 12.5px; margin-top: 8px; }

.parecer { border-left: 5px solid var(--roxo); }
.parecer h2 { font-size: 16px; margin-bottom: 8px; }
.parecer p { white-space: pre-wrap; }
.banner-aviso { background: #fdf6e3; border: 1px solid #e0c97f; color: #6b5310;
  padding: 10px 14px; border-radius: 8px; margin-bottom: 18px; font-size: 14px; }

.cards-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 18px; }
.mini-card { background: var(--superficie); border: 1px solid rgba(11,11,11,.10);
  border-radius: 10px; padding: 14px 16px; position: relative; }
.mini-card .num { font-size: 26px; font-weight: 700; }
.mini-card .num.erro { color: var(--vermelho); }
.mini-card .num.aviso { color: var(--ambar); }
.mini-card .rot { color: var(--tinta-2); font-size: 12.5px; }
.selo-truncado { position: absolute; top: 10px; right: 10px; background: var(--ambar);
  color: #fff; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }

.barra-tabela { display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.barra-tabela h2 { font-size: 16px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.filtros select { padding: 6px 10px; border: 1px solid var(--borda); border-radius: 7px;
  font-size: 13px; background: #fff; }

.tabela-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { background: #1a4d6e; color: #fff; text-align: left; padding: 8px 10px; position: sticky; top: 0; }
td { border-bottom: 1px solid var(--grade); padding: 8px 10px; vertical-align: top; }
tbody tr:nth-child(even) { background: #f4f3ef; }
td.sev-erro { color: var(--vermelho); font-weight: 700; text-transform: uppercase; font-size: 12px; }
td.sev-aviso { color: var(--ambar); font-weight: 700; text-transform: uppercase; font-size: 12px; }
.badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 8px;
  border-radius: 20px; letter-spacing: .04em; }
.badge-det { background: #eef4fc; color: var(--azul-escuro); border: 1px solid var(--azul); }
.badge-llm { background: #efeaff; color: var(--roxo); border: 1px solid var(--roxo); }
.evidencia { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
.evidencia::before { content: "evidência: "; font-weight: 600; }
.marcacao { display: block; color: var(--verde-escuro); font-size: 12px; margin-top: 3px; font-style: italic; }
.conforme { color: var(--verde-escuro); font-weight: 600; padding: 18px 4px; }

footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 26px; color: var(--muted); font-size: 12.5px; }