/* Header visual rules reproduced from painel-mse-main/prototipo/index.html.
   Title and actions identify this production module; the single work is fixed. */
.header-wrap {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 8px rgba(19,34,59,.12);
}
.header-foto {
  position: absolute;
  inset: 0;
  background: url('../assets/porto-header.jpg') center / cover;
  filter: grayscale(1) contrast(1.1);
  opacity: .24;
}
.header-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 360px at 85% -30%, rgba(64,120,210,.5), transparent 62%),
    linear-gradient(118deg, rgba(19,34,59,.88) 0%, rgba(25,48,83,.88) 68%, rgba(31,58,99,.88) 100%);
}
.header-conteudo {
  position: relative;
  z-index: 1;
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  -webkit-font-smoothing: antialiased;
}
.header-brand { display:flex; align-items:center; gap:16px; min-width:0; }
.header-logo { height:34px; width:auto; object-fit:contain; }
.header-divider { width:1px; height:28px; background:rgba(255,255,255,.16); flex-shrink:0; }
.header-kicker { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.55); text-transform:uppercase; }
.header-title { font-size:22px; font-weight:700; color:#fff; line-height:1.2; letter-spacing:-.025em; }
.header-actions { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.header-portal {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.75);
  padding:8px 14px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:600;
  flex-shrink:0;
}
.header-portal:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32); }
.header-portal:focus-visible { outline-color:#b9d7ff; }
.header-obra { text-align:right; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2); border-radius:10px; padding:7px 14px 7px 16px; }
.header-obra-label { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.15em; color:rgba(255,255,255,.55); text-transform:uppercase; }
.header-obra-name { font-size:15px; font-weight:600; color:#fff; }
.production-main>.tabs { margin-top:14px; }
.filterbar { flex-wrap:wrap; }
.production-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
@media(max-width:768px) {
  .header-conteudo { padding:10px 12px; flex-wrap:wrap; gap:10px; }
  .header-brand { gap:10px; flex:1 1 auto; }
  .header-logo { height:28px; }
  .header-divider { height:22px; }
  .header-title { font-size:17px; }
  .header-actions { width:100%; flex-direction:row; align-items:center; gap:12px; }
  .header-portal { min-height:44px; }
  .header-obra { flex:1; min-width:0; text-align:left; min-height:44px; }
  .production-main>.tabs { margin-top:10px; }
  .production-actions { width:100%; gap:8px; }
  .production-actions .button { flex:1; font-size:11px; padding:9px; }
}
@media print {
  .header-wrap { box-shadow:none; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  .header-actions,.production-actions { display:none; }
}

.header-usuario { display:flex; flex-direction:column; align-items:flex-end; gap:2px; font-size:12px; color:#fff; line-height:1.2; }
.header-usuario b { font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:1px 7px; border-radius:99px; background:rgba(255,255,255,.18); }
.header-usuario b[data-nivel="maximo"] { background:#d99b35; color:#152b49; }

/* Abas no padrão do painel-mse-main: cartão com botões em pílula, ativa em azul sólido */
.tabs { align-items:center; gap:4px; padding:4px; min-height:0; background:#fff; border:1px solid #e4e7ec; border-bottom:1px solid #e4e7ec; border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.tabs>button { flex:1 0 auto; justify-content:center; min-height:44px; padding:8px 12px; border-radius:8px; color:#4d5868; font-size:13px; font-weight:600; transition:background .18s ease,color .18s ease,transform .15s ease; }
.tabs>button:not(.active):hover { background:#e4e7ec; transform:translateY(-1px); }
.tabs>button.active { background:#2563eb; color:#fff; }
.tabs>button.active:after { content:none; }
.tabs>button:focus-visible { outline:3px solid rgba(37,99,235,.22); outline-offset:1px; }
.tabs>button svg { width:16px; flex-shrink:0; }
.tabs .local-state { padding:0 10px; }
@media(max-width:768px) {
  .tabs>button { flex:0 0 auto; min-width:118px; font-size:13px; padding:8px 12px; }
  .tabs>button:not(.active):hover { transform:none; }
}
@media(prefers-reduced-motion:reduce) { .tabs>button { transition:none; } }