/* ============================================================
   Estilos das telas do módulo operacional.

   Tudo usa as MESMAS variáveis de tema do styles.css (--surface,
   --border, --ink, --brand-*), então estas telas acompanham o tema
   claro/escuro sem nenhuma regra de cor duplicada.

   Todas as classes levam o prefixo "op-" pra não haver chance de
   colidir com as classes das telas que já existem.
   ============================================================ */

.op-titulo{
  font-family:var(--font-display); font-size:19px; font-weight:600;
  color:var(--ink); margin:0 0 4px;
}
.op-sub{ font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.55; max-width:70ch; }

.op-carregando{ padding:26px; text-align:center; color:var(--ink-faint); font-size:13px; }
.op-resumo-lista{ font-size:12px; color:var(--ink-faint); margin-bottom:8px; }
.op-vazio{ text-align:center; color:var(--ink-faint); font-size:13px; }
.op-celula-sub{ font-size:11px; color:var(--ink-faint); line-height:1.4; margin-top:2px; }
.op-alerta{ color:var(--brand-red-500); }
.op-atencao{ color:var(--brand-amber-500); }
.op-confirma{ font-size:13.5px; line-height:1.6; color:var(--ink-soft); }

/* ---------- indicadores ---------- */
.kpi-grid.op-kpi-4{ grid-template-columns:repeat(4,1fr); }
.kpi-grid.op-kpi-5{ grid-template-columns:repeat(5,1fr); }

/* ---------- barra de filtros ---------- */
.op-input{
  padding:7px 11px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--ink); font-size:12.5px; font-family:inherit; min-width:230px;
}
.op-input:focus{ outline:none; border-color:var(--brand-green-500); }
.op-data{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-soft); }
.op-data input{
  padding:6px 8px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--ink); font-size:12.5px; font-family:inherit;
}
.op-check{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; }

/* ---------- formulário em modal ---------- */
.op-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.op-form-grid.larga{ grid-template-columns:repeat(3, 1fr); }
.op-form-grid input, .op-form-grid select, .op-form-grid textarea{
  width:100%; padding:8px 10px; border:1px solid var(--border); border-radius:7px;
  background:var(--surface); color:var(--ink); font-size:13px; font-family:inherit;
}
.op-form-grid textarea{ resize:vertical; line-height:1.5; }
.op-form-grid input:focus, .op-form-grid select:focus, .op-form-grid textarea:focus{
  outline:none; border-color:var(--brand-green-500);
}
.op-erro{ color:var(--brand-red-500); font-size:12.5px; margin:12px 0 0; }
.op-dica{ font-size:11px; color:var(--ink-faint); margin-top:3px; display:block; }
.op-modal-largo{ max-height:70vh; overflow-y:auto; }

/* ---------- ficha (pedido, embarque) ---------- */
.op-ficha{ display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:12px 18px; }
.op-ficha > div{ display:flex; flex-direction:column; gap:2px; font-size:13px; color:var(--ink); }
.op-rot{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); }

/* ---------- linha do tempo do embarque ---------- */
.op-timeline{ display:flex; flex-direction:column; gap:2px; }
.op-timeline-item{ border-left:2px solid var(--border); padding:10px 0 12px 14px; position:relative; }
.op-timeline-item::before{
  content:""; position:absolute; left:-5px; top:15px; width:8px; height:8px;
  border-radius:50%; background:var(--brand-green-500);
}
.op-timeline-topo{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-bottom:4px; }
.op-timeline-data{ font-size:11px; color:var(--ink-faint); margin-left:auto; }
.op-timeline-titulo{ font-size:13.5px; font-weight:600; color:var(--ink); }
.op-timeline-pe{ font-size:11px; color:var(--ink-faint); margin-top:5px; }

.callout.op-callout-erro{
  border-color:var(--stamp-bad-bd); background:var(--stamp-bad-bg); color:var(--stamp-bad-fg);
}

/* ---------- telas menores ---------- */
@media (max-width: 1100px){
  .kpi-grid.op-kpi-4, .kpi-grid.op-kpi-5{ grid-template-columns:repeat(2,1fr); }
  .op-form-grid.larga{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .kpi-grid.op-kpi-4, .kpi-grid.op-kpi-5{ grid-template-columns:1fr; }
  .op-form-grid, .op-form-grid.larga{ grid-template-columns:1fr; }
  .op-input{ min-width:0; width:100%; }
}