/* ocr_painel.css — Painel ao vivo do OCR (tela OCR/ICR), janela do ocr_painel.js.
 * Classes prefixadas com opv- para não colidir com o CSS do uniGUI/Ext. */

.opv-overlay {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(15, 23, 42, .55);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
.opv-modal {
  width: min(860px, 96vw); max-height: 92vh; overflow-y: auto;
  background: #fff; color: #1e293b; border-radius: 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.opv-modal * { box-sizing: border-box; }
.opv-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; color: #fff;
  background: linear-gradient(90deg, #1E2A3A, #1E3B8C);
  border-radius: 14px 14px 0 0;
}
.opv-tit { display: flex; align-items: center; gap: 11px; }
.opv-tit > i { font-size: 20px; }
.opv-tit b { display: block; font-size: 15px; }
.opv-tit small { display: block; font-size: 11.5px; opacity: .8; }
.opv-dir { display: flex; align-items: center; gap: 12px; }
.opv-estado { font-size: 11.5px; opacity: .9; }
.opv-estado.ok { color: #bbf7d0; }
.opv-estado.aviso { color: #fde68a; }
.opv-estado.erro { color: #fecaca; }
.opv-x {
  border: 0; background: rgba(255, 255, 255, .15); color: #fff; cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; font-size: 20px; line-height: 1;
}
.opv-x:hover { background: rgba(255, 255, 255, .28); }
.opv-corpo { padding: 16px 18px 18px; }
.opv-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.opv-kpi { background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; }
.opv-n { font-size: 22px; font-weight: 800; color: #1E3B8C; }
.opv-t { font-size: 10.5px; color: #64748b; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.opv-aviso { margin-top: 10px; font-size: 12px; color: #92400e; background: #fef3c7; border-radius: 8px; padding: 7px 10px; }
.opv-vazio { margin-top: 14px; font-size: 12.5px; color: #64748b; }
.opv-jobs { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.opv-job { border: 1px solid #e2e8f0; border-radius: 10px; padding: 9px 12px; }
.opv-jobtop { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.opv-arq { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.opv-cx { color: #64748b; font-size: 11.5px; white-space: nowrap; }
.opv-pct { color: #1E3B8C; }
.opv-bar { height: 7px; border-radius: 4px; background: #e2e8f0; overflow: hidden; margin-top: 7px; }
.opv-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #2563eb, #60a5fa); transition: width .4s ease; }
.opv-leg { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: #64748b; margin-top: 6px; }
.opv-leg b { color: #1e293b; }

@media (max-width: 640px) {
  .opv-overlay { padding: 8px; }
  .opv-kpis { grid-template-columns: repeat(2, 1fr); }
  .opv-head { flex-wrap: wrap; }
}