/* Observatório — processamento.css
   Estilos específicos da tela de processamento
   (audit-* / proc-*)
   Incluído apenas em templates/processamento.html
*/
/* ============================================================
   12. AUDITORIA (audit-*)
   ============================================================ */

.audit-page { display: flex; flex-direction: column; min-height: 100vh; }

.audit-shell {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  align-items: start;
}

.audit-main { display: flex; flex-direction: column; gap: var(--space-5); }

.audit-side { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; overflow: hidden; }

.audit-side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.audit-side-head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-2);
}

/* Topbar */
.audit-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.audit-topbar-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-left: auto;
}

.audit-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-3);
  font-size: var(--text-sm);
  text-decoration: none;
}

/* Tabs */
.audit-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  padding: 0;
  background: var(--color-surface);
  overflow-x: auto;
}

.audit-tab {
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--color-text-3);
  font-size: var(--text-sm);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.audit-tab:hover { color: var(--color-text-2); }
.audit-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.audit-tab.has-alert { color: var(--obs-error); }
.audit-tab span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  font-size: 10px;
  font-weight: 600;
}

.audit-tab.has-alert span { background: rgba(248,113,113,0.15); color: var(--obs-error); }
.audit-tab-panel { padding: var(--space-6) 0; display: none; }
.audit-tab-panel.is-active { display: block; }

/* Overview */
.audit-overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

/* Progress */
.audit-progress-wrapper {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}

.audit-progress-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
}

/* KV list */
.audit-kv-list { display: flex; flex-direction: column; }

.audit-kv-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.audit-kv-row:last-child { border-bottom: none; }
.audit-label { width: 160px; flex-shrink: 0; color: var(--color-text-3); }

/* Definition list */
.audit-definition-list { display: flex; flex-direction: column; gap: var(--space-2); }
.audit-label-row { display: flex; align-items: baseline; gap: var(--space-3); }

/* Table */
.audit-table { width: 100%; border-collapse: collapse; }

.audit-table-head {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.audit-table-head th,
.audit-table-row td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.audit-table-row:hover td { background: var(--color-surface-2); }
.audit-record-title { font-weight: 500; }

/* Errors */
.audit-error-list { display: flex; flex-direction: column; gap: var(--space-3); }

.audit-error-row {
  background: rgba(248,113,113,0.05);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.audit-error-note {
  font-size: var(--text-xs);
  color: var(--obs-error);
  margin-top: var(--space-2);
}

/* Alert */
.audit-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--obs-error);
  margin-bottom: var(--space-4);
}

/* Empty */
.audit-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  color: var(--color-text-3);
  font-size: var(--text-sm);
  text-align: center;
  gap: var(--space-2);
}

.audit-empty.compact { padding: var(--space-5); }

/* Context strip */
.audit-context-strip {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-top: var(--space-3);
}

.audit-context-strip b {
  color: var(--color-text-2);
  font-weight: 500;
  margin-right: 2px;
}

.audit-context-strip span::after {
  content: ' ·';
  color: var(--color-border-md);
  margin-left: var(--space-5);
}

.audit-context-strip span:last-child::after { content: ''; margin-left: 0; }

/* Queue board */
.audit-queue-board { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.audit-queue-group { display: flex; flex-direction: column; gap: var(--space-2); }
.audit-queue-list { display: flex; flex-direction: column; gap: var(--space-1); }
.audit-queue-summary { font-size: var(--text-xs); color: var(--color-text-3); }

.audit-queue-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.audit-queue-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border-md);
  flex-shrink: 0;
}

/* Current job */
.audit-current-job {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--obs-green-3);
  border: 1px solid rgba(126,224,193,0.2);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.audit-current-icon { color: var(--color-accent); font-size: 20px; }
.audit-section-title { font-weight: 500; font-size: var(--text-base); margin-bottom: var(--space-4); color: var(--color-text); }



/* ============================================================
   19. PROCESSAMENTO v2 — design system por tipo de coleta
   ============================================================ */

/* — Identidade por tipo: variável --proc-accent ────────── */
.tipo-descoberta    { --proc-accent: var(--obs-gold-0); }
.tipo-coleta        { --proc-accent: var(--obs-green-0); }
.tipo-enriquecimento{ --proc-accent: var(--obs-green-0); }
.tipo-eventos       { --proc-accent: #60a5fa; }
.tipo-reprocessamento { --proc-accent: var(--obs-warning); }

/* — Página ─────────────────────────────────────────────── */
.proc-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-12);
}

/* — Cabeçalho ──────────────────────────────────────────── */
.proc-header {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
}

.proc-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--proc-accent, var(--obs-menta)) 7%, transparent), transparent 62%);
}

.proc-header-constellation {
  position: absolute;
  top: -28px;
  right: -42px;
  width: min(58vw, 230px);
  opacity: 0.18;
  pointer-events: none;
}

.proc-tipo-badge {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--proc-accent, var(--color-accent));
  background: color-mix(in srgb, var(--proc-accent, var(--color-accent)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--proc-accent, var(--color-accent)) 25%, transparent);
  border-radius: var(--radius-md);
  line-height: 1;
}

.proc-header-copy { flex: 1; min-width: 0; }

.proc-header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.proc-back {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  text-decoration: none;
  transition: color var(--transition);
}
.proc-back:hover { color: var(--proc-accent, var(--color-accent)); text-decoration: none; }

.proc-ref {
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.proc-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.proc-header-title h1 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  line-height: 1.2;
  margin: 0;
  color: var(--color-text);
}

@media (min-width: 769px) {
  .proc-header { min-height: 190px; align-items: center; }
  .proc-header-constellation {
    top: 50%;
    right: 3%;
    width: min(26vw, 310px);
    opacity: 0.22;
    transform: translateY(-50%);
  }
  .proc-header-title h1 { font-size: clamp(2rem, 3.5vw, 3.25rem); }
}

.proc-header-desc {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}

.proc-context-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.proc-context-chips span {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  padding: 2px var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}

/* — Progresso ──────────────────────────────────────────── */
.proc-progress-section {
  padding: var(--space-4) var(--space-6);
}

.proc-progress-track {
  width: 100%;
  height: 3px;
  background: var(--color-border-md);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.proc-progress-fill {
  height: 100%;
  background: var(--proc-accent, var(--color-accent));
  border-radius: var(--radius-full);
  transition: width 0.8s ease;
}

.proc-progress-stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--color-text-2);
}

.proc-pct {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--proc-accent, var(--color-accent));
  line-height: 1;
}

.proc-alert-stat  { color: var(--obs-warning); font-weight: 500; }
.proc-timing      { margin-left: auto; color: var(--color-text-3); font-size: var(--text-xs); }

/* — Corpo 2 colunas ────────────────────────────────────── */
.proc-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-6);
  align-items: start;
}

.proc-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.proc-aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-5);
}

/* — Seções da narrativa ────────────────────────────────── */
.proc-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.proc-section .eyebrow { margin-bottom: var(--space-3); }

.proc-section-desc {
  font-size: var(--text-sm);
  color: var(--color-text-2);
  line-height: 1.6;
  margin: 0 0 var(--space-4);
}

.proc-section-cap {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin: var(--space-1) 0 var(--space-4);
}

.proc-section-alerta { border-color: rgba(248,113,113,0.3); }

/* — Escopo ─────────────────────────────────────────────── */
.proc-scope-block {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}

.proc-scope-line strong {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 500;
  display: block;
}

.proc-scope-line small {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-top: 2px;
  display: block;
}

.proc-scope-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

/* — O que foi produzido ────────────────────────────────── */
.proc-results-showcase {
  display: flex;
  align-items: flex-end;
  gap: var(--space-6);
}

.proc-result-primary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.proc-result-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 300;
  color: var(--proc-accent, var(--color-accent));
  line-height: 1;
}

.proc-result-primary > span {
  font-size: var(--text-xs);
  color: var(--color-text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.proc-result-secondaries {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-border);
}

.proc-result-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 64px;
}

.proc-result-cell strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1;
}

.proc-result-cell span {
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.proc-result-atencao strong { color: var(--obs-warning); }

/* resultado_json grid (quando disponível) */
.proc-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--space-3);
}

.proc-insight {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* — Parâmetros KV ──────────────────────────────────────── */
.proc-kv-list { display: flex; flex-direction: column; }

.proc-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.proc-kv-row:last-child { border-bottom: none; }
.proc-kv-row span   { color: var(--color-text-3); flex-shrink: 0; }
.proc-kv-row strong { color: var(--color-text); font-weight: 500; text-align: right; }

/* — Registros ──────────────────────────────────────────── */
.proc-registro-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 440px;
  overflow-y: auto;
}

.proc-registro-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  background: var(--color-surface-2);
  transition: background var(--transition);
}
.proc-registro-item:hover { background: var(--color-surface); }
.proc-registro-item.status-coletado       { border-left-color: var(--obs-success); }
.proc-registro-item.status-conectado      { border-left-color: var(--color-accent); }
.proc-registro-item.status-sem_resultado  { border-left-color: var(--color-border); opacity: 0.6; }
.proc-registro-item.status-em_processamento { border-left-color: var(--color-border); opacity: 0.5; }
.proc-registro-item.status-erro           { border-left-color: var(--obs-error); }
.proc-registro-item.status-enriquecido    { border-left-color: var(--proc-accent, var(--color-accent)); }

.proc-registro-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.proc-registro-title a,
.proc-registro-title strong { font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }

.proc-registro-meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.proc-registro-alerta { color: var(--obs-warning); }

.proc-erro-resumo {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--obs-error);
  margin-bottom: var(--space-4);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ─── Pontos de atenção: lista simplificada (mobile-safe) ─── */
.proc-erros-lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.proc-erro-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(248,113,113,0.2);
  background: rgba(248,113,113,0.04);
}
.proc-erro-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  flex-wrap: wrap;
}
.proc-erro-etapa {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--obs-error);
  flex-shrink: 0;
}
.proc-erro-item-head a {
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: break-word;
  word-break: break-word;
}
.proc-erro-item-head a:hover { color: var(--color-accent); }
.proc-erro-data {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-left: auto;
  flex-shrink: 0;
}
.proc-erro-msg {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
  margin: 0;
}

/* — Aside: cards ───────────────────────────────────────── */
.proc-aside-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow: hidden;
}

/* — Metadados ──────────────────────────────────────────── */
.proc-meta-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
}
.proc-meta-list dt { color: var(--color-text-3); white-space: nowrap; }
.proc-meta-list dd { color: var(--color-text); font-weight: 500; margin: 0; }

/* — Guia ───────────────────────────────────────────────── */
.proc-guide .eyebrow { margin-bottom: var(--space-3); }

.proc-guide ul { display: flex; flex-direction: column; gap: var(--space-2); }

.proc-guide li {
  font-size: var(--text-xs);
  color: var(--color-text-2);
  line-height: 1.5;
}
.proc-guide li b { color: var(--color-text); font-weight: 500; }
.proc-guide li a {
  color: var(--color-text-2);
  font-size: var(--text-xs);
  text-decoration: none;
}
.proc-guide li a:hover { color: var(--color-accent); }

/* ─── Status chip (redesign) ────────────────────────────── */
.proc-status-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  opacity: 0.85;
}
.proc-status-concluido         { color: var(--obs-green-0); }
.proc-status-concluido_com_erros { color: var(--obs-gold-0); }
.proc-status-processando       { color: var(--color-accent); }
.proc-status-pendente,
.proc-status-aguardando        { color: var(--color-text-3); }
.proc-status-erro              { color: var(--obs-error); }
.proc-status-cancelado         { color: var(--color-text-3); opacity: 0.5; }

/* ─── Resultado showcase ────────────────────────────────── */
.proc-resultado-showcase {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-5) 0 var(--space-4);
}
.proc-resultado-primario {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.proc-resultado-numero {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}
.proc-resultado-primario span {
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.proc-resultado-secundarios {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.proc-resultado-celula {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.proc-resultado-celula strong {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}
.proc-resultado-celula span {
  font-size: var(--text-xs);
  color: var(--color-text-3);
}
.proc-resultado-atencao strong { color: var(--obs-error); }

/* ─── Parâmetros (details) ──────────────────────────────── */
.proc-params-details {
  margin-top: var(--space-4);
}
.proc-params-details > summary {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}
.proc-params-details > summary::-webkit-details-marker { display: none; }
.proc-params-details > summary::before { content: '+ '; color: var(--color-accent); }
.proc-params-details[open] > summary::before { content: '− '; }
.proc-params-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-3) 0;
}
.proc-param-celula {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.proc-param-celula span { font-size: var(--text-xs); color: var(--color-text-3); }
.proc-param-celula strong { font-size: var(--text-sm); color: var(--color-text); }

/* ─── Grupos de ações (registros_coleta) ────────────────── */
.proc-grupo-acao {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.proc-grupo-acao-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
  background: var(--color-surface);
  transition: background var(--transition);
}
.proc-grupo-acao-header::-webkit-details-marker { display: none; }
.proc-grupo-acao-header:hover { background: var(--color-surface-2); }

.proc-grupo-simbolo {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  flex-shrink: 0;
}
.proc-grupo-label { flex: 1; font-size: var(--text-sm); font-weight: 500; color: var(--color-text); }
.proc-grupo-count {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-3);
  background: var(--color-surface-2);
  padding: 1px 8px;
  border-radius: 99px;
}

/* Cores por ação */
.acao-criado .proc-grupo-simbolo      { background: rgba(126,224,193,.15); color: var(--obs-green-0); }
.acao-coletado .proc-grupo-simbolo    { background: rgba(126,224,193,.15); color: var(--obs-green-0); }
.acao-enriquecido .proc-grupo-simbolo { background: rgba(214,178,109,.15); color: var(--obs-gold-0); }
.acao-atualizado .proc-grupo-simbolo  { background: rgba(99,130,220,.15); color: #6382dc; }
.acao-sem-candidatos .proc-grupo-simbolo { background: rgba(214,178,109,.1); color: var(--obs-gold-0); opacity: 0.7; }
.acao-erro .proc-grupo-simbolo        { background: rgba(var(--obs-error-rgb, 220,80,80),.12); color: var(--obs-error); }

.acao-criado .proc-grupo-count,
.acao-coletado .proc-grupo-count      { color: var(--obs-green-0); }
.acao-enriquecido .proc-grupo-count   { color: var(--obs-gold-0); }
.acao-erro .proc-grupo-count          { color: var(--obs-error); }

/* ─── Item de registro v2 ───────────────────────────────── */
.proc-registros-lista {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-4) var(--space-2);
}
.proc-registro-v2 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}
.proc-registro-v2:last-child { border-bottom: none; }
.proc-registro-v2-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.proc-registro-v2-titulo a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  flex: 1;
}
.proc-registro-v2-titulo a:hover { color: var(--color-accent); }
.proc-registro-v2-titulo strong {
  font-size: var(--text-sm);
  color: var(--color-text);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  flex: 1;
}
.proc-registro-status {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-left: auto;
}
.proc-registro-v2-meta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--color-text-3);
}
.proc-registro-tabela { opacity: 0.5; font-style: italic; }
.proc-wikidata-id {
  color: var(--color-accent);
  font-family: monospace;
  font-size: 11px;
}
.proc-registro-v2--legado { opacity: 0.8; }
.proc-section-fallback { font-style: italic; color: var(--color-text-3); }

/* ─── Rastreabilidade no aside ──────────────────────────── */
.proc-rastr-lista { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.proc-rastr-linha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.proc-rastr-simbolo {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--color-surface-2);
}
.proc-rastr-label { flex: 1; font-size: var(--text-xs); color: var(--color-text-2); }
.proc-rastr-count { font-size: var(--text-xs); font-weight: 700; color: var(--color-text); }

.acao-criado .proc-rastr-simbolo,
.acao-coletado .proc-rastr-simbolo    { color: var(--obs-green-0); }
.acao-enriquecido .proc-rastr-simbolo { color: var(--obs-gold-0); }
.acao-erro .proc-rastr-simbolo        { color: var(--obs-error); }

/* ─── Badge de tipo (maior) ─────────────────────────────── */
.proc-tipo-badge--lg {
  font-size: var(--text-xl);
  width: 52px;
  height: 52px;
  border-radius: 10px;
}

/* ─── Escopo block ──────────────────────────────────────── */
/* Classes usadas no template para o bloco de recorte do job */
.proc-escopo {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.proc-escopo-principal {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.proc-escopo-principal strong {
  font-size: var(--text-base);
  color: var(--color-text);
  font-weight: 500;
}
.proc-escopo-principal small {
  font-size: var(--text-xs);
  color: var(--color-text-3);
}
.proc-escopo-meta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

/* ─── Pontos de atenção: pre não causa overflow horizontal ──── */
.audit-error-row pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  font-size: var(--text-xs);
  background: rgba(0,0,0,0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-top: var(--space-2);
  overflow-x: auto;
}
.audit-error-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
}

/* ─── Scope text: overflow protection ───────────────────────── */
.proc-escopo-principal strong {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* — Responsivo: tablet e abaixo ─────────────────────────── */
@media (max-width: 1024px) {
  .proc-body                 { grid-template-columns: 1fr; }
  .proc-aside                { position: static; }
  .proc-resultado-showcase   { flex-wrap: wrap; }
}

/* — Mobile (≤ 768px) ───────────────────────────────────── */
@media (max-width: 768px) {

  /* Cabeçalho: padding compacto, elementos mais próximos */
  .proc-header {
    padding: var(--space-4);
    gap: var(--space-3);
  }

  /* Título levemente menor para caber em telas estreitas */
  .proc-header-title h1 { font-size: var(--text-xl); }

  /* Nav do cabeçalho: permite wrap quando a referência #id·data é longa */
  .proc-header-nav {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }

  /* Seções: padding compacto */
  .proc-section { padding: var(--space-4); }

  /* Resultado showcase: empilha verticalmente */
  .proc-resultado-showcase {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Métricas secundárias: separador horizontal em vez de borda lateral */
  .proc-resultado-secundarios {
    padding-left: 0;
    border-left: none;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    width: 100%;
  }

  /* Parâmetros grid: itens menores, 2 por linha */
  .proc-params-grid { gap: var(--space-3) var(--space-4); }

  /* Escopo block: padding reduzido */
  .proc-escopo { padding: var(--space-3) var(--space-4); }

  /* ── Block 3: O que foi revelado — métricas em grid ─────── */
  .proc-resultado-secundarios {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  .proc-resultado-celula { min-width: 0; }

  /* ── Block 4: Registros — grupo e itens ──────────────────── */
  /* Header do grupo: label longo não quebra o layout */
  .proc-grupo-acao-header { overflow: hidden; }
  .proc-grupo-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Meta do registro: força wrap em telas estreitas */
  .proc-registro-v2-meta { flex-wrap: wrap; }
}