:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --card: #151b23;
  --border: #26303c;
  --text: #eaf0f6;
  --muted: #8b98a5;
  --green: #2ecc71;
  --yellow: #f4b942;
  --red: #e74c3c;
  --gray: #5a6672;
  /* Borda das abas de navegação do topo (pedido do usuário em
     2026-09-24: destaque laranja). */
  --nav-accent: #ff8a00;
  /* Cores por turno nos gráficos — identidade fixa por turno, nunca por
     posição/ranking, pra bater entre o gráfico empilhado e o de totais.
     Paleta categórica validada (contraste + distinção pra daltonismo) contra
     o fundo dos cards de gráfico (--chart-surface). */
  --chart-surface: #0e141b;
  --turno-1: #3987e5;
  --turno-2: #d95926;
  --turno-3: #199e70;
  --turno-4: #c98500;
  --turno-5: #d55181;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
  border-bottom: 1px solid var(--border);
}

.topbar h1 {
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
  margin: 0;
}

.topbar-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1.5rem);
}

.clock {
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shift {
  font-size: clamp(0.85rem, 1.3vw, 1.2rem);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  background: rgba(90, 140, 255, .15);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.grid {
  display: grid;
  /* auto-fill (não auto-fit): quando sobra menos cards que colunas cabem
     na tela (ex: só 1 máquina), auto-fit colapsava as colunas vazias e
     esticava o(s) card(s) restante(s) pra preencher a linha inteira.
     auto-fill mantém as colunas vazias "reservadas", então os cards ficam
     do lado uns dos outros no tamanho normal em vez de esticar. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
  padding-top: 0;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: clamp(1.2rem, 2vw, 1.8rem);
  border-left: 8px solid var(--gray);
}

.card.status-rodando { border-left-color: var(--green); }
.card.status-parada { border-left-color: var(--yellow); }
.card.status-offline { border-left-color: var(--red); }

/* Barra de busca de máquina — aba "Motivos de Parada", pedido do usuário
   em 2026-09-24. */
.machine-search-bar {
  padding: 0 clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(0.8rem, 1.5vw, 1.2rem);
}

.machine-search-bar input {
  width: 100%;
  max-width: 320px;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
}

.machine-search-bar input:focus {
  border-color: var(--nav-accent, #ff8a00);
  outline: none;
}

/* Agrupamento das paradas pendentes por turno — aba "Motivos de Parada",
   pedido do usuário em 2026-09-24. */
.shift-group + .shift-group {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.shift-group-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}
.card.status-sem_dados { border-left-color: var(--gray); }

.card h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.status-badge {
  display: inline-block;
  /* Maior desde 2026-10-08: sem a caixa-alta o texto ficou pequeno. */
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  margin-bottom: 1rem;
  letter-spacing: 0.04em;
}

.status-rodando .status-badge { background: rgba(46,204,113,.15); color: var(--green); }
.status-parada .status-badge { background: rgba(244,185,66,.15); color: var(--yellow); }
.status-offline .status-badge { background: rgba(231,76,60,.15); color: var(--red); }
.status-sem_dados .status-badge { background: rgba(90,102,114,.2); color: var(--muted); }

.big-number {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 0.4rem;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.unit {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--muted);
}

@media (max-width: 480px) {
  .big-number {
    font-size: 1.9rem;
  }
  .unit {
    font-size: 0.95rem;
  }
}

.rate {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}

.rate-last-reading {
  font-weight: 600;
  color: var(--text);
}

.rate-client {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.rate-operator {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Marca quando o operador mostrado no card é uma troca por falta (só
   vale hoje), não a escala fixa — pedido do usuário em 2026-09-24. */
.operator-substitute-tag {
  color: var(--yellow);
  font-size: 0.85em;
}

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0.8rem 0;
}

.filters-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.filters-bar select,
.filters-bar input[type="search"] {
  background: var(--bg, #0d1117);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font: inherit;
}

/* Borda azul (mesma cor em todos) pros botões de LANÇAR/EDITAR
   informação — Trocar/Definir, Lançar Nova OP, Editar linha, Registrar
   Defeito. Pedido do usuário em 2026-09-23: gostou do visual do "Lançar
   Nova OP" (borda azul nítida) e quis o mesmo em todos os outros botões
   desse tipo, pra ficar consistente e mais fácil de enxergar onde
   lançar informação. Botões de ação destrutiva (Excluir) continuam
   vermelhos, de propósito — ver .row-delete-btn. */
.field-edit-btn,
.op-launch-btn,
.row-edit-btn,
.defect-btn,
.roster-edit-btn,
.operator-override-btn {
  border-radius: 8px;
  border: 1px solid var(--turno-1, #4a9eff);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.field-edit-btn,
.op-launch-btn,
.roster-edit-btn,
.operator-override-btn {
  padding: 0.25rem 0.7rem;
  font-size: 0.85em;
}

.rate-stop-periods {
  font-size: clamp(0.8rem, 1.05vw, 0.95rem);
}

.article-mini-history {
  margin-top: 0.8rem;
  font-size: 0.85em;
}

/* flex + wrap (não tabela) — largura do card pode ser menor que o
   conteúdo (artigo+modelo+cor+peças+botão); sem quebra de linha o botão
   "Editar" saía cortado, fora da parte visível do card. */
.mini-history-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.mini-history-row:last-child {
  border-bottom: none;
}

.mini-history-info {
  color: var(--muted);
  flex: 1 1 auto;
  min-width: 0;
}

.mini-history-info strong {
  color: var(--text);
}

.mini-history-time {
  display: block;
  font-size: 0.9em;
  opacity: 0.75;
}

.row-edit-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.9em;
}

/* Agrupa Editar + Excluir — sem isso, com 3 filhos diretos em
   .mini-history-row (info, editar, excluir), o justify-content:
   space-between espalhava os 2 botões pra pontas opostas em vez de
   ficarem juntos. */
.mini-history-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.row-delete-btn {
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 90, 90, 0.4);
  background: transparent;
  color: #ff8080;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
  white-space: nowrap;
}

.defect-btn {
  margin-top: 0.8rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.85em;
}

.section-title {
  margin: 0;
  padding: 0 clamp(1.5rem, 3vw, 3rem) clamp(0.4rem, 0.8vw, 0.6rem);
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: var(--muted);
  letter-spacing: 0.05em;
}

.card-article {
  border-left-color: rgba(90, 140, 255, .6);
}

.progress-track {
  margin-top: 1rem;
  height: 10px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--green);
  transition: width .4s ease;
}

.empty {
  color: var(--muted);
  font-size: 1.2rem;
}

.empty-small {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
}

/* Pedido do usuário em 2026-09-24: borda laranja em destaque nas abas
   de navegação do topo (antes era uma borda cinza discreta). */
.nav-link {
  color: var(--text);
  text-decoration: none;
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  padding: 0.3em 0.8em;
  border-radius: 999px;
  border: 1px solid var(--nav-accent, #ff8a00);
  white-space: nowrap;
}

.nav-link:hover {
  border-color: var(--nav-accent, #ff8a00);
  background: rgba(255, 138, 0, 0.12);
}

.nav-button {
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

#shift-report, #monthly-report {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
}

.shift-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(1rem, 1.5vw, 1.5rem);
  margin-top: 0.5rem;
}

.shift-block {
  background: #0e141b;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}

.shift-block-future {
  opacity: 0.5;
}

.shift-block h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.shift-range {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85rem;
}

.hourly-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.8rem;
  font-size: 0.9rem;
}

.hourly-table th, .hourly-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.hourly-table th {
  color: var(--muted);
  font-weight: 500;
}

/* Cabeçalho fixo ao rolar a página — pedido do usuário em 2026-08-31,
   pra tabelas longas (ex: aba "Artigos e Cores") continuarem mostrando o
   nome das colunas mesmo descendo até o fim da lista. Fundo sólido (não
   transparente) pra o texto das linhas não aparecer por baixo ao rolar. */
.hourly-table thead th {
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

/* Título + filtros + contagem de registros + cabeçalho de coluna, todos
   fixos ao rolar (pedido do usuário em 2026-08-31) — nas páginas que
   colocam esse bloco, o cabeçalho da tabela é uma 2ª <table> DENTRO dele
   (history-header-table, ver historico-campos.js), não um <thead>
   sticky separado: 1ª tentativa (2 elementos sticky empilhados com a
   distância calculada em JS) dava sobreposição/texto embaralhado ao
   rolar rápido. Com tudo num único bloco sticky não tem esse problema —
   as colunas da tabela de cabeçalho e da tabela de linhas (embaixo, essa
   sim rolando normal) ficam alinhadas via table-layout:fixed + mesmas
   larguras nas duas (COLUMN_WIDTHS no JS). */
.sticky-top-zone {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--card);
  padding-bottom: 0.5rem;
}

.history-header-table,
.history-body-table {
  table-layout: fixed;
  /* Largura mínima (não só 100%) — com 9 colunas, uma tela de celular é
     estreita demais pra cada uma ficar legível só com width:100%; o texto
     quebrava em várias linhas e chegava a sobrepor a linha de baixo
     (reportado pelo usuário). Abaixo desse tanto, o container
     .table-scroll (ver historico-campos.js: 2 containers, cabeçalho e
     linhas, com rolagem sincronizada) rola de lado em vez de espremer. */
  min-width: 900px;
  width: 100%;
}

/* O cabeçalho já está dentro do bloco sticky (.sticky-top-zone) — não
   precisa (nem deve) ter posição sticky própria também, senão volta a
   sobrepor as coisas. */
.history-header-table thead th {
  position: static;
}

.history-header-table {
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.history-body-table {
  margin-top: 0;
}

/* Barra de rolagem própria escondida no container do cabeçalho — ele
   rola de verdade (sincronizado via JS com a tabela de linhas), só não
   precisa mostrar uma 2ª barra de rolagem horizontal duplicada. */
#header-scroll,
[id$="-header-scroll"] {
  scrollbar-width: none;
}

/* Tabela da aba "Apontamento" — nowrap só nas células de dado (números
   curtos, cabem numa coluna estreita sem quebrar linha). NÃO no
   cabeçalho: rótulos como "Hora Extra (manhã)" são longos demais pra
   caber numa coluna de ~78px numa linha só — com nowrap ali, o texto
   simplesmente vazava por cima da coluna vizinha (foi isso que causou o
   visual "embaralhado" reportado pelo usuário em 2026-09-24, PIOR ainda
   depois da 1ª tentativa de correção, que tinha colocado nowrap nos
   dois). Deixando o cabeçalho quebrar em 2 linhas normalmente resolve
   sem esse efeito — como o cabeçalho e o corpo são 2 <table> separadas
   (só alinhadas pela largura de coluna, não pela altura da linha), a
   altura do cabeçalho crescer não desalinha nada. */
.apontamento-table td {
  white-space: nowrap;
}

.apontamento-table th {
  white-space: normal;
  line-height: 1.2;
}

/* Linha de total no fim da tabela — aba "Apontamento", pedido do
   usuário em 2026-09-24. */
.apontamento-total-row td {
  border-top: 2px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}

/* Célula de lançamento manual (Corte KG, Seladora, Mesa/Fardo) — clicável
   pra digitar o valor do dia, já que não vem de máquina nenhuma. */
.apontamento-manual-cell {
  cursor: pointer;
  border: 1px dashed var(--nav-accent, #ff8a00);
}

.apontamento-manual-cell:hover {
  background: rgba(255, 138, 0, 0.12);
}

/* Resumo/KPIs do mês — aba "Apontamento", pedido do usuário em
   2026-09-24 ("adicionar essas informações [...] pra deixar completa").
   Amarelo pros totais (Horas Trabalhadas, Peças Retiradas), rosa pras
   médias/percentuais — mesma paleta da planilha original. */
.apontamento-summary h3 {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--text-dim, #999);
}

.apontamento-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.apontamento-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.apontamento-kpi-label {
  font-size: 0.8rem;
  opacity: 0.85;
}

.apontamento-kpi-value {
  font-size: 1.4rem;
  font-weight: 700;
}

/* Quantidade de peças embaixo do % nos cards de defeito interno/externo
   — em destaque (pedido de 2026-09-29: "deixa ela bem evidente"). */
.apontamento-kpi-detail {
  font-size: 1rem;
  font-weight: 600;
}

/* Linha de apoio embaixo do número (quantidades por trás de cada % —
   pedido de 2026-09-29, pra deixar claro de onde vem o cálculo). */
.apontamento-kpi-note {
  font-size: 0.78rem;
  opacity: 0.75;
}

.apontamento-kpi-yellow {
  background: rgba(255, 255, 0, 0.12);
  border-color: rgba(255, 255, 0, 0.4);
}

.apontamento-kpi-pink {
  background: rgba(255, 100, 100, 0.12);
  border-color: rgba(255, 100, 100, 0.4);
}

#header-scroll::-webkit-scrollbar {
  display: none;
}

.hour-peak td {
  color: var(--green);
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
  /* overflow-y explícito (não só o -x) — sem isso o navegador soma um
     overflow-y:auto implícito (regra do CSS Overflow spec), o que faz o
     "position:sticky" do cabeçalho (acima) grudar nesse container em vez
     de na página inteira, quebrando o efeito ao rolar a tela toda. */
  overflow-y: visible;
}

.monthly-table {
  /* table-layout:auto (o padrão) deixa cada coluna com a largura que seu
     próprio conteúdo pede — com table-layout:fixed, as ~13 colunas (Dia +
     5 turnos x2 + Total x2) dividiam a largura em partes iguais demais
     estreitas pra números como "6.217,13 m", que vazavam por cima da
     coluna vizinha (Parada) em vez de simplesmente ficar mais larga. */
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  min-width: 900px;
}

.monthly-table th, .monthly-table td {
  text-align: center;
  padding: 0.45rem 0.9rem;
}

.monthly-table th:first-child, .monthly-table td:first-child {
  text-align: left;
}

.monthly-table, .hourly-table {
  font-variant-numeric: tabular-nums;
}

/* Divisória no início de cada grupo (1º/2º/3º Turno, Total do dia) —
   marcada explicitamente via classe, não nth-child, porque o cabeçalho
   tem colspan/rowspan e não bate coluna-a-coluna com as linhas de dados. */
.monthly-table .col-group-start {
  border-left: 1px solid var(--border);
}

.monthly-table .col-total {
  background: rgba(255, 255, 255, 0.03);
}

.monthly-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* Login */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  width: min(90vw, 340px);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.login-card h1 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
  text-align: center;
}

.login-card input {
  padding: 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0e141b;
  color: var(--text);
  font-size: 1.1rem;
}

.login-card button {
  padding: 0.7rem;
  border-radius: 8px;
  border: none;
  background: var(--green);
  color: #06110b;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
}

.error { color: var(--red); margin: 0; text-align: center; }

/* Aba Gráficos — tempos de parada por turno */
#charts-report {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem);
}

.chart-card h2 {
  margin: 0 0 0.2rem;
  font-size: clamp(1.2rem, 2vw, 1.7rem);
}

.chart-caption {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.chart-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.5rem;
}

.chart-view-toggle {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3em 0.9em;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.chart-view-toggle:hover {
  border-color: var(--muted);
  color: var(--text);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}

.chart-scroll {
  overflow-x: auto;
  background: var(--chart-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.chart-svg {
  display: block;
}

.chart-bar-seg {
  transition: filter .1s ease;
  pointer-events: none;
}

.chart-day-group.is-active .chart-bar-seg {
  filter: brightness(1.18);
}

.chart-hit {
  cursor: pointer;
  outline: none;
}

.chart-hit:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: -2px;
}

.chart-gridline {
  stroke: var(--border);
  stroke-width: 1;
}

.chart-baseline {
  stroke: var(--muted);
  stroke-width: 1;
}

.chart-axis-label {
  fill: var(--muted);
  font-size: 11px;
  font-family: inherit;
}

.chart-rank-row {
  display: grid;
  grid-template-columns: minmax(110px, 22%) 1fr auto;
  align-items: center;
  gap: 0.7rem;
  margin: 0.45rem 0;
  font-size: 0.9rem;
}

.chart-rank-label {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-rank-track {
  background: var(--chart-surface);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.chart-rank-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.chart-rank-value {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-table-periods {
  display: block;
  white-space: normal;
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 0.15rem;
}

.chart-summary-title {
  margin: 1.4rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.chart-tooltip {
  position: fixed;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  max-width: 240px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .08s ease;
}

.chart-tooltip.is-visible {
  visibility: visible;
  opacity: 1;
}

.chart-tooltip-title {
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--text);
}

.chart-tooltip-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
  white-space: nowrap;
}

.chart-tooltip-key {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.chart-tooltip-value {
  margin-left: auto;
  padding-left: 0.6rem;
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.chart-tooltip-periods {
  margin: -0.1rem 0 0.35rem 1.2rem;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: normal;
}

.chart-tooltip-total {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}

/* Aba de lançamento de motivos de parada */
.stop-rows {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.stop-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  background: #0e141b;
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}

.stop-row-time {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.stop-row-desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.stop-row-desc input {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

.save-btn {
  flex: 1 1 auto;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: none;
  background: var(--green);
  color: #06110b;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.save-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.delete-btn {
  flex: 1 1 auto;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.delete-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.save-ok {
  color: var(--green);
  font-size: 0.9rem;
  min-width: 5rem;
}

/* Cadastro de e-mails do relatório diário (aba de verificação por turno) */
.report-settings {
  margin: clamp(1rem, 2vw, 2rem) clamp(1.5rem, 3vw, 3rem) 0;
}

.report-recipients {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.report-recipient-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.8rem;
  background: #0e141b;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.report-recipient-row .delete-btn {
  flex: none;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

.report-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.report-add-form input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.95rem;
}

.report-add-form .save-btn {
  flex: none;
}

.report-test-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

/* Impressão / "Salvar como PDF" — fundo claro, sem elementos de navegação,
   tabelas com bordas visíveis em vez do destaque escuro pensado pra tela. */
@media print {
  @page {
    size: landscape;
    margin: 1cm;
  }

  .nav-link, .clock, .status-badge, .report-settings {
    display: none;
  }

  .monthly-table {
    min-width: 0;
  }

  body {
    background: #fff;
    color: #000;
  }

  .card, .shift-block {
    background: #fff;
    border: 1px solid #999;
    break-inside: avoid;
  }

  .rate, .unit, .shift-range, .empty-small {
    color: #444;
  }

  .monthly-table th, .monthly-table td,
  .hourly-table th, .hourly-table td {
    border: 1px solid #999;
    color: #000;
  }

  .col-total, .monthly-table tbody tr:nth-child(even) {
    background: #f0f0f0;
  }

  .hour-peak td {
    color: #000;
    font-weight: 700;
  }

  .grid, .shift-columns {
    display: block;
  }

  .grid > *, .shift-columns > * {
    margin-bottom: 1rem;
  }

  .chart-tooltip, .chart-view-toggle, .chart-toolbar {
    display: none;
  }

  .chart-scroll {
    background: #fff;
    border: 1px solid #999;
  }

  .chart-gridline {
    stroke: #ccc;
  }

  .chart-baseline {
    stroke: #666;
  }

  .chart-axis-label {
    fill: #333;
  }

  .chart-legend, .chart-rank-label, .chart-rank-value, .chart-summary-title, .chart-table-periods {
    color: #333;
  }

  .chart-rank-track {
    background: #eee;
  }
}

/* Aba "Defeitos por OP" — situação da atribuição do responsável
   (confirmado / compartilhado / sem escala / OP não encontrada / externo).
   Verde só pro que dá pra usar com segurança; amarelo/vermelho pro que
   precisa de conferência antes de cobrar alguém. */
.attr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.attr-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  border-left-width: 4px;
}

.attr-card-label { font-weight: 700; }
.attr-card-value { font-size: 1.3rem; font-weight: 700; }
.attr-card-count { font-size: 0.85rem; color: var(--muted); }
.attr-card-help { font-size: 0.8rem; color: var(--muted); }

.attr-tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--border);
}

.attr-card.attr-confirmado { border-left-color: var(--green); }
.attr-tag.attr-confirmado { color: var(--green); border-color: var(--green); }
.attr-card.attr-compartilhado { border-left-color: var(--yellow); }
.attr-tag.attr-compartilhado { color: var(--yellow); border-color: var(--yellow); }
.attr-card.attr-alerta { border-left-color: var(--red); }
.attr-tag.attr-alerta { color: var(--red); border-color: var(--red); }
.attr-card.attr-externo { border-left-color: var(--gray); }
.attr-tag.attr-externo { color: var(--muted); border-color: var(--gray); }

/* Gráfico objetivo x resultado (aba "Defeitos por OP") — barras
   horizontais por operador, linha vertical = objetivo da máquina. */
.goal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.8rem;
}

.goal-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }

.goal-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.goal-legend-line {
  display: inline-block;
  width: 0;
  height: 14px;
  border-left: 2px dashed var(--text);
  vertical-align: middle;
}

.goal-chart {
  background: var(--chart-surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.9rem;
}

.goal-chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}

.goal-chart-head h3 { margin: 0; font-size: 1.05rem; }

.goal-chart-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.goal-chart-meta strong { color: var(--text); }

.goal-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr minmax(120px, 190px);
  align-items: center;
  gap: 0.7rem;
  padding: 0.35rem 0;
}

.goal-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.goal-track {
  position: relative;
  height: 20px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 4px;
}

.goal-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 4px;
}

.goal-bar-ok { background: var(--green); }
.goal-bar-warn { background: var(--yellow); }
.goal-bar-over { background: var(--red); }

.goal-line {
  position: absolute;
  top: -4px;
  bottom: -4px;
  border-left: 2px dashed var(--text);
}

.goal-value {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  line-height: 1.25;
}

.goal-value span { color: var(--muted); font-size: 0.78rem; }
.goal-value-over strong { color: var(--red); }

@media (max-width: 560px) {
  .goal-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* Aba "Performance de Produção" — reaproveita o gráfico .goal-* da aba
   "Defeitos por OP"; aqui só o que é próprio dela. */
.goal-bar-neutral { background: var(--gray); }

/* Uma linha por operador com 2 barras (Produção e Qualidade), cada uma
   com rótulo, trilho e valor atingido/meta — pedido de 2026-09-29. */
.perf-row {
  display: grid;
  grid-template-columns: minmax(90px, 160px) 1fr;
  align-items: start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.perf-row:last-child { border-bottom: none; }
.perf-row .goal-name { padding-top: 0.15rem; }

.perf-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.perf-metric {
  display: grid;
  /* 1ª coluna larga o bastante pra "Absenteísmo" não ficar embaixo da
     barra (relatado em 2026-10-08). */
  grid-template-columns: 100px 1fr minmax(150px, 210px);
  align-items: center;
  gap: 0.6rem;
}

.perf-metric-label {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.perf-details {
  font-size: 0.78rem;
  color: var(--muted);
}

@media (max-width: 560px) {
  .perf-row { grid-template-columns: 1fr; gap: 0.3rem; }
  .perf-metric { grid-template-columns: 64px 1fr; }
  .perf-metric .goal-value { grid-column: 1 / -1; }
}

.perf-defect {
  font-size: 0.78rem;
  color: var(--muted);
}

.award-yes {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(46, 204, 113, 0.15);
  color: var(--green);
  font-weight: 700;
  white-space: nowrap;
}

.award-no {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* Barra de performance do turno no card (produzido × esperado até agora,
   sem café/refeição e paradas justificadas). Verde = no ritmo da meta,
   amarelo = até 15% abaixo, vermelho = mais que isso. */
.shift-perf { margin-top: 0.8rem; }
.shift-perf .progress-track-shift { margin-top: 0.35rem; margin-bottom: 0.35rem; }
.perf-ok { color: var(--green); }
.perf-warn { color: var(--yellow); }
.perf-bad { color: var(--red); }
.progress-fill.perf-ok-fill { background: var(--green); }
.progress-fill.perf-warn-fill { background: var(--yellow); }
.progress-fill.perf-bad-fill { background: var(--red); }

/* Presença confirmada no turno (card do painel) — pedido do usuário em
   2026-10-03: só quem confirmou ganha a produção do turno. */
.operator-confirmed-tag,
.operator-unconfirmed-tag,
.operator-absent-tag {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}
.operator-confirmed-tag { color: var(--green); border: 1px solid var(--green); }
.operator-unconfirmed-tag { color: var(--yellow); border: 1px solid var(--yellow); }
.operator-absent-tag { color: var(--red); border: 1px solid var(--red); }

/* Operador que chegou atrasado (conta a partir do horário) e botão
   "<nome> chegou" — pedido do usuário em 2026-10-04. */
.operator-arrival-tag {
  /* Maior desde 2026-10-08 ("Saiu 14:58" estava pequeno demais). */
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--yellow);
}
.operator-arrival-btn,
.operator-return-btn {
  margin-left: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  white-space: nowrap;
}
.operator-departure-btn {
  margin-left: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  white-space: nowrap;
}
.operator-arrival-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.op-dialog-absent {
  margin-top: 0.5rem;
}

/* Tela de lançar OP (op-launch.js) — tablet/celular. Pedido do usuário
   em 2026-10-04: OPs aguardando, OP pendente e leitura do código de
   barras da folha da OP. */
.op-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
}

.op-dialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

.op-dialog h2 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
}

.op-dialog h3 {
  margin: 1rem 0 0.4rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.op-dialog input:not([type="checkbox"]) {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}

.op-dialog-label {
  display: block;
  margin: 0.8rem 0 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.op-dialog-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.op-dialog-row input {
  flex: 1;
  min-width: 0;
}

.op-dialog .op-launch-btn,
.op-dialog .row-delete-btn {
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
}

.op-dialog-check {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.9rem 0 0.2rem;
}

.op-dialog-check input {
  width: 1.3rem;
  height: 1.3rem;
}

.op-dialog-hint {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.op-scan-area {
  margin-top: 0.6rem;
}

.op-scan-area video {
  width: 100%;
  max-height: 40vh;
  border-radius: 8px;
  background: #000;
  object-fit: cover;
}

.op-wait-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 32vh;
  overflow-y: auto;
  margin-top: 0.5rem;
}

.op-wait-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: baseline;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.op-wait-item.selected {
  border-color: var(--turno-1, #4a9eff);
  box-shadow: 0 0 0 1px var(--turno-1, #4a9eff);
}

.op-wait-time {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
}

.op-dialog-error {
  min-height: 1.2em;
  margin-top: 0.6rem;
  color: var(--red);
}

.op-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.op-dialog-primary {
  background: var(--turno-1, #4a9eff);
  color: #fff;
}

/* Cadastro de Artigos e Cores (cadastro.html) — pedido do usuário em
   2026-10-04: padrão único de Artigo/Cor nos lançamentos. */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 3vw, 3rem);
}

.catalog-card {
  border-left-color: var(--turno-1);
}

.catalog-card h2 {
  margin-top: 0;
}

.catalog-wide {
  grid-column: 1 / -1;
}

.catalog-add {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
}

.catalog-add input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.catalog-list {
  max-height: 60vh;
  overflow-y: auto;
}

.catalog-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.catalog-actions {
  display: flex;
  gap: 0.4rem;
}

.catalog-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}

.catalog-target {
  max-width: 100%;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.op-dialog select {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}

/* Ordens de Produção (pcp.html) — Controle de Produção cadastra a OP
   antes. Pedido do usuário em 2026-10-05. */
.pcp-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.8rem 1rem;
}

.pcp-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
  color: var(--muted);
}

.pcp-form label.op-dialog-check {
  flex-direction: row;
  color: var(--text);
}

.pcp-form input:not([type="checkbox"]),
.pcp-form select,
.filters-bar input[type="search"]#pcp-search {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.pcp-wide {
  grid-column: 1 / -1;
}

.pcp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}

.pcp-actions #pcp-msg {
  margin-right: auto;
}

.pcp-actions button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.pcp-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.pcp-stage {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.pcp-stage-done {
  border-color: var(--green);
  color: var(--green);
}

.pcp-row-actions {
  white-space: nowrap;
}

/* Botões de câmera/foto do código de barras (tela de lançar OP e Ordens
   de Produção) — quebram linha no tablet em pé. */
.op-dialog-row {
  flex-wrap: wrap;
}

.op-dialog-row input {
  flex: 1 1 160px;
}

.pcp-scan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.pcp-scan .op-launch-btn {
  padding: 0.5rem 0.9rem;
  font-size: 1rem;
}

/* "Dobra Toalhas Tina" (card da Dobra) — fora da performance. Pedido do
   usuário em 2026-10-05. */
.tina-btn {
  border-color: var(--yellow) !important;
  color: var(--yellow);
}

.tina-active-tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--yellow);
  border-radius: 999px;
  color: var(--yellow);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Elementos com o atributo hidden somem mesmo quando a classe define
   display (ex: .op-dialog-check é flex). Sem isso a opção "Material
   externo" aparecia em todas as máquinas — relatado em 2026-10-07. */
.op-dialog [hidden],
.pcp-form [hidden] {
  display: none !important;
}

/* Botão "Entrada/Saída" do card e a lista de ações da janela. */
.operator-moves-btn {
  margin-left: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--muted);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
  white-space: nowrap;
}

.moves-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.8rem 0;
}

.moves-list button {
  margin: 0;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  text-align: left;
}

/* Linha da lista "OPs aguardando": escolher (toque) + Excluir da lista. */
.op-wait-row {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.op-wait-row .op-wait-item {
  flex: 1;
  min-width: 0;
}

.op-wait-dismiss {
  flex: none;
}

/* Relatório de Paradas: Editar/Excluir na linha (não saem na impressão)
   e parada recém-lançada sumindo da tela Motivos de Parada. Pedido do
   usuário em 2026-10-07. */
@media print {
  .no-print {
    display: none !important;
  }
}

.report-actions {
  white-space: nowrap;
}

.report-actions button {
  margin-right: 0.3rem;
}

.report-input {
  width: 100%;
  min-width: 12rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.stop-row-done {
  opacity: 0.4;
  transition: opacity 0.5s;
}

.operator-service-btn {
  padding: 0.2rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--turno-1, #4a9eff);
  background: transparent;
  color: var(--turno-1, #4a9eff);
  font: inherit;
  cursor: pointer;
}

/* Botão "Obs." (observação na OP) no mini-histórico do card. */
.op-note-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.9em;
  border-radius: 8px;
  border: 1px solid var(--turno-1, #4a9eff);
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.op-notes-tag {
  cursor: help;
}

/* Filtro por operador na Performance de Produção (2026-10-08). */
.operator-filter-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.operator-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.operator-filter select {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  min-width: 12rem;
}

@media print {
  .operator-filter-card {
    display: none;
  }
}

/* Listas de seleção (período, ciclo, filtros) legíveis em qualquer
   sistema: no Windows o fundo transparente deixava as opções com texto
   claro sobre fundo branco (relatado em 2026-10-08). */
select {
  color-scheme: dark;
}

select option,
select optgroup {
  background-color: var(--card);
  color: var(--text);
}

.nav-link select {
  background-color: var(--card) !important;
  border-radius: 6px;
  padding: 0.1rem 0.3rem;
  /* Folga até a borda arredondada da aba (a <label> vem com
     padding-right:0 inline) — sem isso a lista encostava na borda. */
  margin-right: 0.7rem;
  max-width: 100%;
}

/* Dificuldade com o material / observações escritas no card. */
.op-note-line {
  margin-top: 0.2rem;
  font-size: 0.85em;
  color: var(--muted);
}

.op-note-hard {
  color: var(--red);
}

.difficulty-banner {
  margin: 0.5rem 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--red);
  border-radius: 8px;
  color: var(--red);
  font-weight: 600;
  font-size: 0.9em;
}

/* Botões da linha do operador no card (Entrada/Saída, Corrigir...) um
   pouco maiores — pedido do usuário em 2026-10-08. */
.rate-operator .operator-moves-btn,
.rate-operator .operator-override-btn {
  font-size: 0.95em;
  padding: 0.3rem 0.8rem;
}

/* Datas específicas do seletor de período (cycles.js). */
.period-custom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.period-custom[hidden] {
  display: none !important;
}

.period-custom input[type="date"] {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.15rem 0.3rem;
  font: inherit;
  color-scheme: dark;
}

.period-custom .period-apply {
  padding: 0.15rem 0.6rem;
}

/* Editar/Excluir de cada observação da OP no card. */
.op-note-action {
  margin: 0.3rem 0 0 0.4rem;
  padding: 0.3rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--turno-1, #4a9eff);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.05em;
  cursor: pointer;
}

.op-note-del {
  color: #ff8080;
  border-color: rgba(255, 90, 90, 0.4);
}

/* Aba "Indicadores" — OEE por máquina, Pareto de paradas e tendência de
   defeitos (pedido do usuário em 2026-10-08). */
.indicators {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 3vw, 3rem);
}

.ind-intro { margin: 0; }

.ind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

.ind-card { min-width: 0; }

.ind-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.ind-hero {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.4rem 0 0.8rem;
}

.ind-hero-value {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ind-hero-label { color: var(--muted); font-size: 0.9rem; }

/* Status do OEE: sempre cor + texto, nunca só cor. */
.ind-status {
  border-radius: 999px;
  padding: 0.2em 0.8em;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid currentColor;
}
.ind-status-good { color: var(--green); }
.ind-status-fair { color: var(--yellow); }
.ind-status-bad { color: var(--red); }
.ind-status-none { color: var(--muted); }

.ind-meter {
  display: grid;
  grid-template-columns: 9.5rem 1fr 3.5rem;
  align-items: center;
  gap: 0.2rem 0.7rem;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}
.ind-meter-label { color: var(--text); }
.ind-meter-value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ind-meter-note { grid-column: 2 / 4; color: var(--muted); font-size: 0.78rem; }

.ind-foot { margin: 0.8rem 0 0; }
.ind-foot strong { color: var(--text); }

.ind-pareto-row { grid-template-columns: minmax(120px, 30%) 1fr auto; }
.ind-cum { color: var(--muted); opacity: 0.8; margin-left: 0.3rem; }
.ind-undescribed { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.ind-hatch {
  background: repeating-linear-gradient(135deg, var(--gray) 0 4px, transparent 4px 8px);
  border: 1px solid var(--gray);
}

.ind-ref-line {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: 0.55;
}

.ind-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.ind-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25em 0.8em;
  font-size: 0.85rem;
  color: var(--muted);
}
.ind-chip strong { color: var(--text); }
.ind-chip-bad { border-color: var(--red); }
.ind-chip-good { border-color: var(--green); }

@media (max-width: 560px) {
  .ind-meter { grid-template-columns: 7.5rem 1fr 3rem; }
  .ind-pareto-row { grid-template-columns: 1fr auto; }
  .ind-pareto-row .chart-rank-track { grid-column: 1 / -1; grid-row: 2; }
}

@media print {
  .ind-grid { display: block; }
  .ind-card { break-inside: avoid; margin-bottom: 1rem; }
  .ind-meter-label, .ind-meter-value, .ind-hero-value { color: #000; }
  .ind-ref-line { stroke: #333; }
  .ind-chip, .ind-cum, .ind-hero-label, .ind-meter-note { color: #333; }
}

/* Resumo automático da aba Indicadores — ícone + texto, nunca só cor. */
.ind-summary-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.ind-summary-item { display: flex; gap: 0.6rem; align-items: baseline; line-height: 1.4; }
.ind-summary-icon {
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid currentColor;
}
.ind-summary-good .ind-summary-icon { color: var(--green); }
.ind-summary-warn .ind-summary-icon { color: var(--yellow); }
.ind-summary-bad .ind-summary-icon { color: var(--red); }
.ind-summary-info .ind-summary-icon { color: var(--muted); }
.ind-summary-blocks { display: grid; gap: 1.2rem; margin-top: 0.4rem; }
.ind-summary-block { border-top: 1px solid var(--border); padding-top: 0.8rem; }
.ind-summary-block h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.ind-summary-when { color: var(--muted); font-weight: 400; margin-left: 0.3rem; }
.ind-summary-group {
  margin: 0.9rem 0 0.3rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Faixa "sem internet / lançamentos guardados no tablet" (offline.js) e
   mensagem rápida. Pedido do usuário em 2026-10-10. */
.offline-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  background: #3a2f12;
  color: var(--yellow);
  font-weight: 600;
  border-bottom: 1px solid var(--yellow);
}

.offline-banner[hidden] {
  display: none !important;
}

.offline-banner-bad {
  background: #3a1616;
  color: #ff9c9c;
  border-bottom-color: var(--red);
}

.offline-banner button {
  padding: 0.25rem 0.8rem;
  border-radius: 8px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.offline-toast {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(92vw, 560px);
  padding: 0.8rem 1.1rem;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--yellow);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.offline-toast[hidden] {
  display: none;
}

/* Motivo de parada lançado sozinho pelos alarmes do CLP (Relatório de Paradas). */
.clp-auto-tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--accent-soft, rgba(59, 130, 246, 0.15));
  color: var(--muted);
  white-space: nowrap;
}

/* "Destaque" do turno anterior (aba Indicadores) — pedido do usuário em
   2026-10-10. Borda colorida + selo, para chamar atenção logo no topo. */
.ind-highlight { border-left: 5px solid var(--yellow); margin-bottom: 1rem; }
.ind-highlight h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 1.15rem; }
.ind-highlight-tag {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--yellow);
  color: #1a1a1a;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ind-highlight .ind-summary-item { font-size: 1.02rem; }
.ind-overall { margin-bottom: 1rem; }
@media print {
  .ind-highlight { break-inside: avoid; border-left-color: #999; }
  .ind-highlight-tag { background: #ddd; }
}


/* ======================================================================
   V3 INDUSTRIAL UI — Centro de Operações / Visão da Fábrica
   Camada somente visual: preserva endpoints e regras do sistema existente.
   ====================================================================== */
:root {
  --industrial-bg: #090d12;
  --industrial-panel: #10161e;
  --industrial-panel-2: #151d27;
  --industrial-border: #253241;
  --industrial-text: #f2f6fa;
  --industrial-muted: #8c9aaa;
  --industrial-accent: #3b82f6;
}

body.industrial-shell { background: var(--industrial-bg); }
.industrial-sidebar {
  position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 50;
  display: flex; flex-direction: column;
  background: #0d131a; border-right: 1px solid var(--industrial-border);
  box-shadow: 12px 0 30px rgba(0,0,0,.12);
}
.industrial-brand { display:flex; align-items:center; gap:.8rem; padding:1.25rem 1rem; border-bottom:1px solid var(--industrial-border); }
.brand-mark { width:38px; height:38px; border-radius:9px; display:grid; place-items:center; background:#1e2937; border:1px solid #334155; font-weight:800; }
.industrial-brand strong { display:block; font-size:.92rem; letter-spacing:.09em; }
.industrial-brand small { display:block; margin-top:.15rem; color:var(--industrial-muted); font-size:.72rem; }
.industrial-nav { padding:.85rem .7rem 1rem; overflow:auto; flex:1; }
.nav-section-label { color:#637083; font-size:.64rem; letter-spacing:.14em; font-weight:800; margin:1rem .55rem .42rem; }
.industrial-nav-link { display:flex; align-items:center; gap:.7rem; color:#aeb9c6; text-decoration:none; padding:.62rem .72rem; border-radius:7px; font-size:.86rem; margin:.12rem 0; border:1px solid transparent; }
.industrial-nav-link span { width:18px; text-align:center; color:#718096; }
.industrial-nav-link:hover { color:#fff; background:#141d27; border-color:#202d3b; }
.industrial-nav-link.active { color:#fff; background:#172131; border-color:#2e4055; box-shadow:inset 3px 0 0 var(--industrial-accent); }
.andon-launch { margin:.8rem; padding:.75rem .8rem; text-align:center; color:#dce8f7; text-decoration:none; border:1px solid #34465a; border-radius:8px; background:#141d27; font-size:.82rem; font-weight:700; }
.andon-launch:hover { border-color:#5b7694; background:#182433; }
.industrial-main { margin-left:260px; min-height:100vh; }
.industrial-topbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.4rem; background:rgba(9,13,18,.92); border-bottom:1px solid var(--industrial-border); position:sticky; top:0; z-index:40; backdrop-filter:blur(12px); }
.industrial-title-wrap { display:flex; align-items:center; gap:.8rem; }
.industrial-topbar h1 { margin:.1rem 0 0; font-size:1.35rem; letter-spacing:-.02em; }
.eyebrow { display:block; color:#728196; font-size:.64rem; font-weight:800; letter-spacing:.16em; }
.industrial-topbar-meta { display:flex; align-items:center; gap:.7rem; }
.sync-pill { display:flex; align-items:center; gap:.45rem; border:1px solid #263748; background:#111a23; color:#aebac6; padding:.38rem .65rem; border-radius:999px; font-size:.74rem; }
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(46,204,113,.11); }
.sync-pill.sync-error { color:#ffb4ab; border-color:rgba(231,76,60,.45); background:rgba(231,76,60,.08); }
.sync-pill.sync-error .sync-dot { background:var(--red); box-shadow:0 0 0 4px rgba(231,76,60,.15); }
.sidebar-toggle { display:none; border:1px solid var(--industrial-border); background:#121a23; color:white; border-radius:7px; width:38px; height:38px; }
.industrial-content { padding:1.15rem 1.4rem 2rem; }
.plant-summary { display:grid; grid-template-columns:repeat(5,minmax(135px,1fr)); gap:.8rem; margin-bottom:1.35rem; }
.kpi-card { position:relative; overflow:hidden; min-height:108px; background:var(--industrial-panel); border:1px solid var(--industrial-border); border-radius:9px; padding:.85rem 1rem; }
.kpi-card::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:#344253; }
.kpi-running::after { background:var(--green); }
.kpi-warning::after { background:var(--yellow); }
.kpi-danger::after { background:var(--red); }
.kpi-label { color:#91a0b1; font-size:.73rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.kpi-card strong { display:block; margin:.35rem 0 .05rem; font-size:2rem; line-height:1; font-variant-numeric:tabular-nums; }
.kpi-card small { color:#667588; font-size:.7rem; }
.factory-section-heading { display:flex; justify-content:space-between; align-items:end; gap:1rem; margin:0 0 .75rem; }
.factory-section-heading h2 { margin:.12rem 0 0; font-size:1.05rem; }
.attention-summary { font-size:.72rem; border:1px solid #2b3948; border-radius:999px; padding:.38rem .65rem; color:#93a2b3; background:#101820; }
.attention-summary.has-attention { color:#ffd99a; border-color:rgba(244,185,66,.35); background:rgba(244,185,66,.08); }
.attention-summary.all-good { color:#93e6b6; border-color:rgba(46,204,113,.28); background:rgba(46,204,113,.07); }

/* A grade principal ocupa a largura do centro de operações e os cards ficam
   com linguagem mais técnica (bordas retas, pouca sombra, status forte). */
.industrial-shell .grid { padding:0; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr)); }
.industrial-shell .card { border-radius:9px; background:var(--industrial-panel); border-color:var(--industrial-border); border-left-width:4px; padding:1rem 1.05rem; box-shadow:none; }
.industrial-shell .card h2 { font-size:1.18rem; letter-spacing:-.01em; }
.industrial-shell .status-badge { border-radius:5px; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.34rem .55rem; }
.industrial-shell .big-number { font-size:clamp(2rem,3.4vw,3.2rem); letter-spacing:-.04em; }
/* O espaçamento negativo é só pro número — sem isso a unidade ao lado
   ("m no 2º Turno") herdava e as palavras grudavam ("mno2ºTurno"). */
.industrial-shell .big-number .unit { letter-spacing:normal; }
.industrial-shell .rate { font-size:.82rem; }
.industrial-shell .progress-track { height:7px; border-radius:2px; }
.industrial-shell .progress-fill { border-radius:2px; }
.industrial-shell .section-title { font-size:1rem; margin:1.5rem 0 .7rem; padding-top:1rem; border-top:1px solid var(--industrial-border); }

@media (max-width: 1180px) {
  .plant-summary { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 840px) {
  .industrial-sidebar { transform:translateX(-100%); transition:transform .2s ease; }
  body.sidebar-open .industrial-sidebar { transform:translateX(0); }
  .industrial-main { margin-left:0; }
  .sidebar-toggle { display:block; }
  .industrial-topbar-meta .sync-pill { display:none; }
  .plant-summary { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px) {
  .industrial-topbar { align-items:flex-start; padding:.8rem; }
  .industrial-topbar-meta { flex-direction:column; align-items:flex-end; gap:.25rem; }
  .industrial-content { padding:.8rem; }
  .plant-summary { grid-template-columns:1fr 1fr; gap:.55rem; }
  .kpi-card { min-height:96px; padding:.72rem; }
  .kpi-card strong { font-size:1.65rem; }
  .factory-section-heading { align-items:flex-start; flex-direction:column; }
}


/* V3 — Modo Andon para TV */
.andon-body { margin:0; background:#070a0e; color:#f4f7fa; min-height:100vh; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.andon-header { display:flex; justify-content:space-between; align-items:center; padding:1.05rem 1.4rem; border-bottom:1px solid #263241; background:#0c1118; }
.andon-header h1 { margin:.1rem 0 0; font-size:1.4rem; letter-spacing:.08em; }
.andon-header-meta { text-align:right; color:#9aa8b8; font-size:.9rem; }
.andon-header-meta strong { display:block; color:#f2f5f8; font-size:1.2rem; font-variant-numeric:tabular-nums; }
.andon-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#263241; border-bottom:1px solid #263241; }
.andon-kpis > div { background:#0f151d; padding:.72rem 1.2rem; display:flex; align-items:baseline; gap:.7rem; }
.andon-kpis span { color:#8695a6; text-transform:uppercase; font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.andon-kpis strong { font-size:1.65rem; }
.andon-grid { padding:1rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.andon-machine { min-height:280px; display:flex; flex-direction:column; background:#10161e; border:2px solid #344252; border-left-width:8px; border-radius:8px; padding:1.15rem 1.25rem; }
.andon-rodando { border-left-color:#2ecc71; }
.andon-parada { border-left-color:#f4b942; }
.andon-offline { border-left-color:#e74c3c; }
.andon-sem_dados { border-left-color:#6b7785; }
.andon-machine-head { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.andon-machine-head h2 { margin:0; font-size:clamp(1.1rem,2vw,1.7rem); }
.andon-machine-head span { font-size:.75rem; font-weight:900; letter-spacing:.1em; background:#17202a; padding:.42rem .58rem; border-radius:4px; }
.andon-rodando .andon-machine-head span { color:#62e69a; }
.andon-parada .andon-machine-head span { color:#ffd47c; }
.andon-offline .andon-machine-head span { color:#ff8175; }
.andon-machine-value { margin:auto 0 .25rem; font-size:clamp(3.5rem,7vw,6.5rem); font-weight:800; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.andon-machine-value small { font-size:.18em; color:#92a0b0; letter-spacing:0; }
.andon-machine-meta { display:flex; justify-content:space-between; color:#8f9dad; font-size:.85rem; }
.andon-progress { margin:.75rem 0 .55rem; height:9px; background:#202b37; overflow:hidden; border-radius:2px; }
.andon-progress i { display:block; height:100%; background:#3b82f6; }
.andon-machine-footer { display:flex; align-items:center; gap:.55rem; color:#8391a1; }
.andon-machine-footer strong { color:#f4f7fa; font-size:1.25rem; }
.andon-alert { margin-top:.7rem; font-size:clamp(1rem,1.4vw,1.35rem); font-weight:800; }
.andon-parada .andon-alert { color:#ffd47c; }
.andon-offline .andon-alert { color:#ff8175; }
#andonSync.andon-sync-error { color:#ff8175; font-weight:700; }
@media (min-width:1700px){ .andon-grid{grid-template-columns:repeat(4,1fr);} .andon-machine{min-height:360px;} }
@media (max-width:900px){ .andon-grid{grid-template-columns:1fr;} }


/* V3 — layout com menu lateral nas demais telas (layout.js, 2026-10-12).
   O topo antigo (.topbar) vira a barra fixa da tela, com o mesmo visual da
   Visão da Fábrica; os links de navegação saíram dele (estão no menu). */
.industrial-page .topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(9,13,18,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--industrial-border);
  padding: .9rem 1.4rem; min-height: 64px;
}
.industrial-page .topbar h1 { font-size: 1.35rem; letter-spacing: -.02em; margin-right: auto; }
.industrial-page .topbar .sidebar-toggle { margin-right: .4rem; }
.industrial-page .topbar-info { gap: .7rem; }
.industrial-page .clock { font-size: 1.05rem; }
@media (max-width: 560px) {
  .industrial-page .topbar { padding: .8rem; }
}

@media print {
  .industrial-sidebar, .sidebar-toggle, .andon-launch { display: none !important; }
  .industrial-main { margin-left: 0 !important; }
  .industrial-page .topbar { position: static; background: none; backdrop-filter: none; }
}

/* V3 Industrial — Fase 2: identificação automática do operador no lançamento de OP */
.op-operator-block {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border, #263442);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.op-operator-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.op-operator-heading .op-dialog-label {
  margin: 0;
}

.op-operator-change {
  border: 1px solid #3b82f6;
  background: transparent;
  color: #93c5fd;
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}

.op-operator-auto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.op-operator-auto strong {
  font-size: 1rem;
}

.op-operator-auto > span:last-child {
  grid-column: 2;
  color: var(--muted, #8996a5);
  font-size: .78rem;
}

.op-operator-auto.is-missing {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.op-operator-status {
  grid-row: 1 / span 2;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 7px;
  background: rgba(34, 197, 94, 0.16);
  color: #86efac;
  font-size: .69rem;
  letter-spacing: .06em;
  font-weight: 800;
}

.op-operator-status.warning {
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
}

#opl-operator-editor {
  margin-top: 10px;
}

.op-dialog-label-small {
  font-size: .8rem;
}

#opl-operator-help {
  margin-top: 7px;
}

/* V3 Industrial — Fase 3: detalhe por máquina, timeline e central de alarmes */
.machine-detail-link { display:inline-flex; margin-top:.9rem; color:#b9d7ff; text-decoration:none; font-size:.79rem; font-weight:800; letter-spacing:.02em; border-top:1px solid var(--industrial-border); padding-top:.75rem; }
.machine-detail-link:hover { color:#fff; }
.machine-back-link { color:#9fb0c3; text-decoration:none; font-size:.78rem; font-weight:700; }
.machine-back-link:hover { color:#fff; }
.loading-panel { color:#8391a1; }
.machine-hero { background:#111820; border:1px solid var(--industrial-border); border-left:6px solid #64748b; border-radius:10px; padding:1.15rem 1.25rem; margin-bottom:.9rem; }
.machine-hero.status-frame-rodando { border-left-color:#22c55e; }
.machine-hero.status-frame-parada { border-left-color:#f59e0b; }
.machine-hero.status-frame-offline { border-left-color:#ef4444; }
.machine-hero-main { display:flex; justify-content:space-between; gap:2rem; align-items:center; }
.machine-hero-main h2 { margin:.55rem 0 .2rem; font-size:1.55rem; }
.machine-hero-main p { margin:0; color:#7f8d9c; font-size:.82rem; }
.machine-status-xl { display:inline-flex; padding:.34rem .55rem; border-radius:4px; font-size:.72rem; font-weight:900; letter-spacing:.12em; background:#1a2531; color:#dbe5ef; }
.machine-status-xl.status-rodando { color:#77e5a1; border:1px solid rgba(34,197,94,.28); background:rgba(34,197,94,.08); }
.machine-status-xl.status-parada { color:#ffd275; border:1px solid rgba(245,158,11,.3); background:rgba(245,158,11,.08); }
.machine-status-xl.status-offline,.machine-status-xl.status-sem_dados { color:#ff9a91; border:1px solid rgba(239,68,68,.3); background:rgba(239,68,68,.08); }
.machine-hero-progress { width:min(330px,42vw); text-align:right; }
.machine-hero-progress strong { display:block; font-size:2.35rem; font-variant-numeric:tabular-nums; line-height:1; }
.machine-hero-progress span { color:#748395; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; }
.industrial-meter { height:8px; background:#23303c; margin-top:.6rem; overflow:hidden; border-radius:2px; }
.industrial-meter i { display:block; height:100%; background:#3b82f6; }
.machine-hero-tags { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; border-top:1px solid #263442; padding-top:.8rem; }
.machine-hero-tags span { background:#151f29; border:1px solid #283747; border-radius:5px; padding:.42rem .58rem; color:#8d9bab; font-size:.75rem; }
.machine-hero-tags b { color:#eef3f8; margin-left:.2rem; }
.machine-hero-tags .tag-alert { border-color:rgba(245,158,11,.35); color:#ffc760; }
.machine-kpi-grid,.alarm-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(140px,1fr)); gap:.8rem; margin-bottom:.9rem; }
.alarm-summary-grid { grid-template-columns:repeat(4,1fr); }
.machine-two-col { display:grid; grid-template-columns:1.35fr .9fr; gap:.9rem; margin-bottom:.9rem; }
.industrial-panel { background:#101820; border:1px solid var(--industrial-border); border-radius:9px; padding:1rem; margin-bottom:.9rem; }
.panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.panel-head h2 { margin:.12rem 0 0; font-size:1.03rem; }
.panel-chip { border:1px solid #2c3d4f; color:#90a0b2; padding:.32rem .48rem; border-radius:5px; font-size:.69rem; }
.machine-facts { margin:0; display:grid; gap:0; }
.machine-facts div { display:grid; grid-template-columns:42% 1fr; gap:.6rem; border-bottom:1px solid #222e3b; padding:.58rem 0; }
.machine-facts div:last-child { border-bottom:0; }
.machine-facts dt { color:#718195; font-size:.75rem; }
.machine-facts dd { margin:0; color:#eef3f8; font-size:.79rem; font-weight:700; text-align:right; overflow-wrap:anywhere; }
.hourly-bars { min-height:230px; display:flex; flex-direction:column; justify-content:center; gap:.55rem; }
.hourly-bar-row { display:grid; grid-template-columns:46px 1fr 58px; align-items:center; gap:.65rem; font-size:.74rem; }
.hourly-bar-row span { color:#8291a2; font-variant-numeric:tabular-nums; }
.hourly-bar-row strong { text-align:right; font-variant-numeric:tabular-nums; }
.hourly-bar-track { height:15px; background:#1d2935; overflow:hidden; border-radius:2px; }
.hourly-bar-track i { display:block; height:100%; background:linear-gradient(90deg,#315f91,#3b82f6); }
.timeline-panel { min-height:260px; }
.machine-timeline { position:relative; margin-left:.3rem; }
.machine-timeline::before { content:''; position:absolute; left:70px; top:8px; bottom:8px; width:1px; background:#2b3a49; }
.timeline-event { display:grid; grid-template-columns:52px 16px 1fr; gap:.7rem; min-height:62px; position:relative; }
.timeline-event time { color:#77879a; font-size:.72rem; padding-top:.18rem; text-align:right; font-variant-numeric:tabular-nums; }
.timeline-dot { width:9px; height:9px; border-radius:50%; margin-top:.22rem; margin-left:3px; background:#64748b; box-shadow:0 0 0 4px #101820; z-index:1; }
.timeline-event strong { font-size:.8rem; }
.timeline-event p { margin:.22rem 0 0; color:#77879a; font-size:.74rem; }
.timeline-stop .timeline-dot,.timeline-active .timeline-dot { background:#f59e0b; }
.timeline-active .timeline-dot { box-shadow:0 0 0 4px #101820,0 0 0 7px rgba(245,158,11,.14); }
.timeline-resume .timeline-dot { background:#22c55e; }
.timeline-op .timeline-dot { background:#3b82f6; }
.timeline-operator .timeline-dot { background:#a855f7; }
.error-banner { color:#ff9a91; font-weight:700; }
.alarm-list { display:grid; gap:.55rem; }
.alarm-row { display:grid; grid-template-columns:90px 1.05fr 1.6fr 1fr 130px; gap:.8rem; align-items:center; padding:.75rem .8rem; border:1px solid #283645; border-left:4px solid #64748b; background:#111a23; border-radius:7px; }
.alarm-row.alarm-critical { border-left-color:#ef4444; }
.alarm-row.alarm-warning { border-left-color:#f59e0b; }
.alarm-row.alarm-info { border-left-color:#3b82f6; }
.alarm-severity { font-size:.65rem; font-weight:900; letter-spacing:.08em; color:#cdd7e2; }
.alarm-critical .alarm-severity { color:#ff8b83; }
.alarm-warning .alarm-severity { color:#ffd070; }
.alarm-machine,.alarm-description,.alarm-operator { display:flex; flex-direction:column; gap:.15rem; }
.alarm-machine strong,.alarm-description strong,.alarm-operator strong { font-size:.78rem; }
.alarm-machine small,.alarm-description span,.alarm-operator small { color:#78889a; font-size:.69rem; }
.alarm-action { text-decoration:none; color:#b9d7ff; border:1px solid #34475b; padding:.48rem .55rem; border-radius:5px; font-size:.7rem; font-weight:800; text-align:center; }
.alarm-action:hover { background:#172434; color:#fff; }
.alarm-all-clear { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:180px; color:#7fe2a5; gap:.4rem; }
.alarm-all-clear span { color:#7f8d9c; font-size:.78rem; }
.alarm-history { display:grid; }
.alarm-history-row { display:grid; grid-template-columns:60px 1.2fr 1.8fr 80px 90px; gap:.65rem; padding:.65rem .2rem; border-bottom:1px solid #25313e; align-items:center; font-size:.74rem; }
.alarm-history-row time { color:#7f8e9e; }
.alarm-history-row span { color:#8d9bac; }
.alarm-history-row b { text-align:right; }
.alarm-history-row em { font-style:normal; text-align:center; border-radius:999px; padding:.25rem .4rem; font-size:.64rem; border:1px solid #334354; color:#8e9cab; }
.alarm-history-row em.active { color:#ffd275; border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.08); }
@media (max-width:1180px){ .machine-kpi-grid{grid-template-columns:repeat(3,1fr)} .alarm-row{grid-template-columns:80px 1fr 1.5fr 120px}.alarm-operator{display:none} }
@media (max-width:900px){ .machine-two-col{grid-template-columns:1fr}.alarm-summary-grid{grid-template-columns:repeat(2,1fr)} .alarm-row{grid-template-columns:72px 1fr 100px}.alarm-description{grid-column:2/4}.machine-hero-main{align-items:flex-start;flex-direction:column}.machine-hero-progress{width:100%;text-align:left} }
@media (max-width:600px){ .machine-kpi-grid{grid-template-columns:1fr 1fr}.alarm-row{grid-template-columns:65px 1fr}.alarm-description{grid-column:1/3}.alarm-action{grid-column:1/3}.alarm-history-row{grid-template-columns:50px 1fr 70px}.alarm-history-row span{grid-column:2/4}.alarm-history-row em{display:none}.machine-timeline::before{left:61px}.timeline-event{grid-template-columns:43px 16px 1fr} }

/* ========================================================================== 
   V3 INDUSTRIAL — FASE 4 · Performance executiva / OEE / perdas / Pareto
   ========================================================================== */
.industrial-eyebrow {
  display: block;
  margin-bottom: .28rem;
  color: #6f8ca4;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.ind-exec {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(20, 29, 38, .96), rgba(12, 18, 24, .96));
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
}

.ind-exec-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem;
}
.ind-exec-head h2 { margin: 0; font-size: 1.28rem; }
.ind-exec-period { color: var(--muted); font-size: .8rem; }

.ind-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .65rem;
}
.ind-kpi {
  position: relative;
  min-height: 108px;
  padding: .8rem .8rem .72rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(7, 12, 17, .55);
  overflow: hidden;
}
.ind-kpi::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #64748b;
}
.ind-kpi-good::before { background: var(--green); }
.ind-kpi-warn::before { background: var(--yellow); }
.ind-kpi-bad::before { background: var(--red); }
.ind-kpi-label { display: block; color: var(--muted); font-size: .67rem; font-weight: 800; letter-spacing: .07em; }
.ind-kpi-value {
  display: block;
  margin: .5rem 0 .32rem;
  color: var(--text);
  font-size: clamp(1.28rem, 2vw, 1.85rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  white-space: nowrap;
}
.ind-kpi-note { color: var(--muted); font-size: .72rem; line-height: 1.3; }
.ind-exec-alert {
  margin-top: .75rem;
  padding: .65rem .75rem;
  border: 1px solid color-mix(in srgb, var(--yellow) 40%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--yellow) 6%, transparent);
  color: var(--muted);
  font-size: .82rem;
}
.ind-exec-alert strong { color: var(--yellow); }

.ind-loss-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.ind-loss-row {
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: rgba(8, 13, 18, .45);
}
.ind-loss-row-head { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: .55rem; font-size: .84rem; }
.ind-loss-row-head span { color: var(--red); font-weight: 800; font-variant-numeric: tabular-nums; }
.ind-loss-track { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.055); }
.ind-loss-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #ef4444); }
.ind-loss-row small { display: block; margin-top: .55rem; color: var(--muted); line-height: 1.35; }

.ind-machine-ranking { display: grid; gap: .45rem; margin-top: .7rem; }
.ind-rank-machine {
  display: grid;
  grid-template-columns: 42px minmax(180px, 1fr) 80px 80px 80px 90px 92px;
  gap: .55rem;
  align-items: center;
  min-height: 62px;
  padding: .55rem .7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  background: rgba(8, 13, 18, .38);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ind-rank-machine:hover { border-color: #405468; background: rgba(21, 31, 41, .72); transform: translateY(-1px); }
.ind-rank-pos {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ind-rank-main { min-width: 0; }
.ind-rank-main strong, .ind-rank-main small { display: block; }
.ind-rank-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-rank-main small { color: var(--muted); margin-top: .18rem; font-size: .72rem; }
.ind-rank-factor { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ind-rank-factor small { display: block; color: var(--muted); font-size: .61rem; letter-spacing: .08em; }
.ind-rank-oee { text-align: right; font-size: 1.12rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ind-rank-loss { color: var(--muted); text-align: right; font-size: .72rem; }

/* 300px: com 220px as 3 caixas (Disponibilidade/Performance/Qualidade)
   não cabiam e a última vazava do card quando havia 5 turnos na linha. */
.ind-shift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .7rem; margin-top: .8rem; }
.ind-shift-card { border: 1px solid var(--border); border-radius: 9px; background: rgba(8,13,18,.42); padding: .8rem; }
.ind-shift-top { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .55rem; }
.ind-shift-top strong { font-size: .94rem; }
.ind-shift-factors { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-top: .8rem; }
.ind-shift-factors span { padding: .5rem; border-radius: 6px; background: rgba(255,255,255,.025); min-width: 0; overflow: hidden; }
.ind-shift-factors small, .ind-shift-factors strong { display: block; }
.ind-shift-factors small { color: var(--muted); font-size: .63rem; }
.ind-shift-factors strong { margin-top: .18rem; font-size: .91rem; font-variant-numeric: tabular-nums; }
.ind-shift-foot { margin-top: .65rem; color: var(--muted); font-size: .72rem; }
.ind-shift-table-wrap { margin-top: .9rem; }

@media (max-width: 1200px) {
  .ind-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .ind-rank-machine { grid-template-columns: 36px minmax(150px, 1fr) 68px 68px 68px 80px; }
  .ind-rank-loss { display: none; }
}
@media (max-width: 760px) {
  .ind-exec-head { display: block; }
  .ind-exec-period { display: block; margin-top: .35rem; }
  .ind-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-loss-grid { grid-template-columns: 1fr; }
  .ind-rank-machine { grid-template-columns: 34px 1fr auto; }
  .ind-rank-factor, .ind-rank-loss { display: none; }
  .ind-rank-oee { grid-column: 3; }
  .ind-shift-factors { grid-template-columns: 1fr; }
}
@media print {
  .ind-exec { box-shadow: none; }
  .ind-kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .ind-kpi, .ind-loss-row, .ind-rank-machine, .ind-shift-card { break-inside: avoid; background: #fff; color: #000; }
  .ind-kpi-value, .ind-rank-machine, .ind-shift-card { color: #000; }
}

/* V3 INDUSTRIAL — FASE 5: PCP Kanban + rastreabilidade */
.pcp-exec-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px clamp(1rem,2vw,2rem) 12px}.pcp-exec-strip>div{background:#111820;border:1px solid #263442;border-radius:12px;padding:14px 16px;display:flex;align-items:end;justify-content:space-between;gap:12px}.pcp-exec-strip span{color:#8996a5;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.pcp-exec-strip strong{font-size:1.8rem;color:#f0f4f8}.pcp-kanban-wrap{margin:0 clamp(1rem,2vw,2rem) 20px}.pcp-section-title{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px}.pcp-section-title h2{margin:.15rem 0 0}.pcp-section-title .eyebrow{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:#7890a7;font-weight:800}.pcp-kanban{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:10px;overflow-x:auto;padding-bottom:8px}.pcp-kanban-col{min-width:220px;background:#0d131a;border:1px solid #263442;border-radius:12px;overflow:hidden}.pcp-kanban-col>header{display:flex;justify-content:space-between;align-items:center;padding:11px 12px;border-bottom:1px solid #263442;color:#d8e1ea;font-weight:700}.pcp-kanban-col>header strong{background:#1b2632;border-radius:999px;padding:2px 8px;font-size:.78rem}.pcp-kanban-list{display:grid;gap:9px;padding:9px;max-height:510px;overflow:auto}.pcp-kanban-card{background:#151d26;border:1px solid #263442;border-left:3px solid #64748b;border-radius:9px;padding:10px;display:grid;gap:8px}.pcp-status-liberada{border-left-color:#3b82f6}.pcp-status-em_producao{border-left-color:#22c55e}.pcp-status-pausada{border-left-color:#f59e0b}.pcp-status-concluida{border-left-color:#14b8a6}.pcp-card-head,.pcp-card-meta,.pcp-card-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}.pcp-card-product{font-size:.84rem;color:#c3ced9}.pcp-card-meta{font-size:.73rem;color:#8996a5}.pcp-progress{height:5px;background:#263442;border-radius:999px;overflow:hidden}.pcp-progress span{display:block;height:100%;background:#3b82f6}.pcp-card-actions{justify-content:flex-end}.pcp-mini-btn{border:1px solid #34475a;background:#17212c;color:#dbe6ef;padding:5px 8px;border-radius:6px;font-size:.72rem;text-decoration:none;cursor:pointer}.pcp-mini-btn:hover{background:#223142}.pcp-status-pill{display:inline-flex;margin-top:6px;padding:3px 8px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.04em;background:#222d39;color:#c9d4df}.pcp-status-pill.pcp-status-liberada{background:#10294f;color:#86b7ff}.pcp-status-pill.pcp-status-em_producao{background:#103520;color:#79df9b}.pcp-status-pill.pcp-status-pausada{background:#402c08;color:#ffcb70}.pcp-status-pill.pcp-status-concluida{background:#0c3533;color:#76e1da}
.trace-shell{padding:20px clamp(1rem,3vw,3rem) 50px;display:grid;gap:16px}.trace-search{max-width:520px}.trace-search-row{display:flex;gap:8px;margin-top:6px}.trace-search-row input{flex:1}.trace-hero{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:24px;align-items:center}.trace-hero-main h2{font-size:2rem;margin:8px 0 4px}.trace-hero-main p{color:#aab7c4}.trace-hero-meta{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px}.trace-hero-meta>div,.trace-kpi{background:#0d131a;border:1px solid #263442;border-radius:10px;padding:12px}.trace-hero-meta span,.trace-kpi span{display:block;color:#8996a5;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.trace-hero-meta strong,.trace-kpi strong{display:block;margin-top:5px;color:#f0f4f8;font-size:1rem}.trace-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.trace-kpi strong{font-size:1.8rem}.trace-kpi small{color:#718096}.trace-section{overflow:hidden}.trace-stage-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.trace-stage-card{position:relative;display:grid;grid-template-columns:42px 1fr;gap:10px;background:#0d131a;border:1px solid #263442;border-radius:10px;padding:14px}.trace-stage-index{width:34px;height:34px;display:grid;place-items:center;border-radius:8px;background:#152638;color:#75a7d8;font-weight:800}.trace-stage-card h3{margin:2px 0 8px}.trace-stage-card p,.trace-stage-card small{margin:4px 0;color:#8996a5}.trace-two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}.trace-timeline{position:relative;display:grid;gap:0}.trace-event{position:relative;display:grid;grid-template-columns:14px 120px 1fr;gap:10px;padding:0 0 18px}.trace-event:before{content:"";position:absolute;left:6px;top:13px;bottom:-3px;width:1px;background:#304152}.trace-event:last-child:before{display:none}.trace-dot{width:13px;height:13px;border-radius:50%;margin-top:3px;background:#3b82f6;border:3px solid #15202b;z-index:1}.trace-event-defeito .trace-dot{background:#ef4444}.trace-event-alerta .trace-dot{background:#f59e0b}.trace-event-nota .trace-dot{background:#8b5cf6}.trace-event-time{font-size:.74rem;color:#778696}.trace-event-body{display:grid;gap:2px}.trace-event-body span,.trace-event-body small{color:#8996a5;font-size:.78rem}
@media(max-width:900px){.pcp-exec-strip,.trace-kpis{grid-template-columns:repeat(2,1fr)}.trace-hero,.trace-two-col{grid-template-columns:1fr}.trace-hero-meta{grid-template-columns:repeat(2,1fr)}.pcp-kanban{grid-template-columns:repeat(5,240px)}}
@media(max-width:560px){.pcp-exec-strip,.trace-kpis,.trace-hero-meta{grid-template-columns:1fr 1fr}.trace-event{grid-template-columns:14px 1fr}.trace-event-time{grid-column:2}.trace-event-body{grid-column:2}.pcp-section-title{align-items:start;flex-direction:column}}

/* ===== V3 INDUSTRIAL · FASE 6 ===== */
.session-identity{display:flex;flex-direction:column;gap:2px;padding:7px 11px;border:1px solid #263442;border-radius:8px;background:#111820;min-width:145px}.session-identity span{font-size:.62rem;letter-spacing:.12em;color:#8996a5}.session-identity strong{font-size:.82rem;color:#f0f4f8}
.industrial-button{border:1px solid #3b82f6;background:#2563eb;color:#fff;border-radius:8px;padding:9px 13px;font-weight:700;cursor:pointer}.industrial-button.secondary{background:#151d26;border-color:#334155;color:#dbe7f3;text-decoration:none}.industrial-button:hover{filter:brightness(1.08)}
.industrial-login-body{background:radial-gradient(circle at 50% 0,#162334 0,#0a0e13 48%,#070a0d 100%)}.industrial-login-card{max-width:430px;border:1px solid #263442;background:#111820;color:#f0f4f8;box-shadow:0 24px 70px #0008}.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}.login-brand>div{display:flex;flex-direction:column}.login-brand small,.login-help{color:#8996a5}.login-mode-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid #263442;border-radius:9px;padding:4px;background:#0a0e13;margin:18px 0}.login-mode{border:0;background:transparent;color:#8996a5;padding:10px;border-radius:6px;font-weight:700;cursor:pointer}.login-mode.active{background:#1d2b3a;color:#f0f4f8}.login-mode-panel{display:grid;gap:9px}.login-mode-panel input{background:#0a0e13;border:1px solid #334155;color:#fff;border-radius:8px;padding:12px}.login-mode-panel button{margin-top:6px}
.management-page,.management-page .industrial-main{min-height:100vh}.compact-admin-sidebar{width:245px}.management-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.management-card{background:#111820;border:1px solid #263442;border-radius:12px;padding:18px}.management-card.full{margin-top:16px}.management-card h2{margin:5px 0 8px}.management-card p{color:#8996a5}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}.form-grid label{display:grid;gap:6px;color:#a7b4c2;font-size:.82rem}.form-grid input,.form-grid select,.industrial-table input,.industrial-table select{width:100%;box-sizing:border-box;background:#0a0e13;border:1px solid #334155;color:#eef4fb;border-radius:7px;padding:9px}.role-list{display:grid;gap:9px}.role-list div{display:grid;grid-template-columns:135px 1fr;gap:8px;border-bottom:1px solid #202d39;padding-bottom:9px}.role-list span{color:#8996a5}.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.table-wrap{overflow:auto}.industrial-table{width:100%;border-collapse:collapse;min-width:760px}.industrial-table th,.industrial-table td{text-align:left;padding:10px;border-bottom:1px solid #263442;vertical-align:middle}.industrial-table th{color:#8996a5;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.industrial-table code{color:#93c5fd}.management-notice{padding:11px 14px;border-radius:8px;margin-bottom:12px}.management-notice.ok{background:#143523;color:#86efac;border:1px solid #1f6b3d}.management-notice.err{background:#3d1717;color:#fecaca;border:1px solid #7f1d1d}.audit-origin{display:inline-flex;padding:3px 7px;border-radius:999px;background:#172554;color:#bfdbfe;font-size:.72rem}.audit-origin.terminal{background:#3f2b12;color:#fde68a}
.health-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}.health-card{background:#111820;border:1px solid #263442;border-radius:12px;padding:18px;display:grid;gap:4px}.health-card>span{color:#8996a5;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}.health-card strong{font-size:1.7rem}.health-card small{color:#8996a5}.health-value.online{color:#22c55e}.health-value.offline{color:#ef4444}.health-machine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}.machine-health{border:1px solid #263442;border-left-width:4px;border-radius:10px;padding:14px;background:#0d141b}.machine-health.online{border-left-color:#22c55e}.machine-health.attention{border-left-color:#f59e0b}.machine-health.offline{border-left-color:#ef4444}.machine-health-head{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center}.machine-health-head>div{display:grid}.machine-health-head small{color:#6f7e8d}.machine-health-head>span{font-size:.7rem;font-weight:800;letter-spacing:.08em}.machine-health-data{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.machine-health-data span{display:grid;color:#7e8d9c;font-size:.72rem}.machine-health-data strong{color:#e7eef6;font-size:.86rem;margin-top:3px}.health-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#64748b}.health-dot.online{background:#22c55e;box-shadow:0 0 0 4px #22c55e18}.health-dot.attention{background:#f59e0b;box-shadow:0 0 0 4px #f59e0b18}.health-dot.offline{background:#ef4444;box-shadow:0 0 0 4px #ef444418}.health-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px;color:#a7b4c2}.health-legend span{display:flex;align-items:center;gap:7px}
@media(max-width:850px){.management-grid,.health-summary{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.compact-admin-sidebar{width:280px}.role-list div{grid-template-columns:1fr}.section-title-row{align-items:flex-start;flex-direction:column}}
.session-logout{border:1px solid #334155;background:#0a0e13;color:#94a3b8;border-radius:7px;padding:7px 10px;cursor:pointer}.session-logout:hover{color:#fff;border-color:#64748b}

/* Ajustes da revisão da Fase 6 (2026-10-12):
   - painel escondido do login some de verdade (display:grid anulava hidden);
   - abas do login com prioridade sobre o estilo genérico de botão do card;
   - identidade da sessão no rodapé do menu lateral (nome embaixo do perfil). */
.login-mode-panel[hidden] { display: none !important; }
.login-card .login-mode { background: transparent; color: #8996a5; border: 0; margin: 0; }
.login-card .login-mode.active { background: #1d2b3a; color: #f0f4f8; }
.industrial-sidebar .session-identity { margin: .8rem .8rem 0; min-width: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; }
.industrial-sidebar .session-identity > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.industrial-sidebar .session-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.industrial-sidebar .session-logout { border: 1px solid #34465a; background: #141d27; color: #dce8f7; border-radius: 7px; padding: .35rem .6rem; font: inherit; font-size: .78rem; cursor: pointer; flex: none; width: auto; margin: 0; }

/* Quadro de login (2026-10-13): tudo na mesma largura — abas, campo e
   botão. O campo de senha com o botão dentro tinha largura mínima natural
   maior que o quadro e empurrava o formulário (e o botão verde) pra fora.
   Olho para mostrar/esconder dentro do campo, à direita. */
.login-card, .login-card * { box-sizing: border-box; }
.login-card .login-mode-tabs, .login-card .login-mode-panel { width: 100%; }
.login-card .login-mode-panel { grid-template-columns: minmax(0, 1fr); }
.login-card .login-mode-panel input, .login-card .login-mode-panel button[type="submit"] { width: 100%; min-width: 0; }
.password-field { position: relative; display: flex; width: 100%; }
.password-field input { flex: 1; min-width: 0; width: 100%; padding-right: 3rem !important; }
.login-card .password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  margin: 0; padding: 0; width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: #8996a5;
  cursor: pointer;
}
.login-card .password-toggle:hover { background: #17212c; color: #f0f4f8; }

/* Login (2026-10-13): texto de orientação centralizado, e o bloco inteiro
   (abas, campo, botão) na mesma largura, sem margem lateral extra nas abas. */
.login-card .login-help { text-align: center; margin: 0; }
.login-card .login-mode-tabs { margin: 18px 0 6px; }
.login-card .login-brand { justify-content: center; }
.login-card .login-brand > div { align-items: flex-start; }

/* Login maior e mais legível (pedido do usuário em 2026-10-13: "para quem
   tem dificuldade de visão"): quadro mais largo, logo e todas as fontes
   maiores, campos e botão mais altos. */
.login-card.industrial-login-card { width: min(92vw, 440px); max-width: 440px; padding: 2.6rem 2.4rem; gap: 1rem; }
.login-card .login-brand { gap: 14px; margin-bottom: 8px; }
.login-card .login-brand .brand-mark { width: 52px; height: 52px; font-size: 1.5rem; border-radius: 12px; }
.login-card .login-brand strong { font-size: 1.35rem; letter-spacing: .08em; }
.login-card .login-brand small { font-size: 1rem; }
.login-card h1 { font-size: 1.8rem; }
.login-card .login-help { font-size: 1.08rem; line-height: 1.45; }
.login-card .login-mode { font-size: 1.1rem; padding: 14px 10px; }
.login-card .login-mode-panel { gap: 12px; }
.login-card .login-mode-panel label { font-size: 1.12rem; }
.login-card .login-mode-panel input { font-size: 1.3rem; padding: 14px 16px; }
.login-card .password-field input { padding-right: 3.4rem !important; }
.login-card .password-toggle { width: 42px; height: 42px; }
.login-card .password-toggle svg { width: 24px; height: 24px; }
.login-card .login-mode-panel button[type="submit"] { font-size: 1.2rem; padding: 15px; }
.login-card .error { font-size: 1.05rem; }

/* Card da visão executiva: o valor nunca passa da borda (indicadores.js
   fitKpiValues diminui a fonte; isto garante o corte/quebra como reserva). */
.ind-kpi { min-width: 0; overflow: hidden; }
.ind-kpi-value { display: block; max-width: 100%; overflow-wrap: anywhere; line-height: 1.1; }

/* Andon: OP · Artigo · Cor em produção (2026-10-13). */
.andon-job { margin-top: .55rem; color: #c3ced9; font-size: clamp(.95rem, 1.2vw, 1.2rem); font-weight: 600; }

/* Trocar/corrigir operador pelo card (2026-10-13): duas escolhas grandes. */
.operator-mode-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  margin: 0.9rem 0 0.4rem;
}

.op-dialog .operator-mode-btn {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;
  text-align: left;
  padding: 0.8rem 0.9rem;
}

.operator-mode-btn strong {
  font-size: 1.05rem;
}

.operator-mode-btn span {
  font-size: 0.88rem;
  font-weight: normal;
  opacity: 0.85;
}

/* Rastreabilidade: cada operador da etapa com início e fim (2026-10-13). */
.trace-operator-periods {
  margin: 0.4rem 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  display: grid;
  gap: 0.2rem;
}

/* Performance: horários de cada turno do operador (2026-10-13). */
.perf-periods {
  margin-top: 0.35rem;
  font-size: 0.82rem;
}
.perf-periods summary {
  cursor: pointer;
  color: var(--muted);
}
.perf-periods ul {
  margin: 0.3rem 0 0;
  padding-left: 1rem;
  max-height: 14rem;
  overflow-y: auto;
}

/* Modo visualização (perfil "viewer", 2026-10-13): some tudo que altera
   dados — trocar/corrigir operador, entrada/saída, lançar OP, definir
   campos, editar/excluir, metas, motivos de parada, cadastros, PCP. Quem
   só consulta nem vê a opção. Filtros, períodos, imprimir, Excel e
   "Rastrear" continuam. Lista mantida junto com layout.js. */
html.read-only .operator-override-btn,
html.read-only .operator-moves-btn,
html.read-only .operator-arrival-btn,
html.read-only .op-launch-btn:not(#trace-form .op-launch-btn),
html.read-only button.field-edit-btn:not(#show-pending-ops),
html.read-only .row-edit-btn,
html.read-only .row-delete-btn,
html.read-only .delete-btn,
html.read-only .save-btn,
html.read-only .roster-edit-btn,
html.read-only .defect-btn,
html.read-only .op-note-btn,
html.read-only .op-note-action,
html.read-only .mini-history-actions,
html.read-only .pcp-status-btn,
html.read-only .pcp-edit-btn,
html.read-only .pcp-delete-btn,
html.read-only .op-wait-dismiss,
html.read-only .catalog-add,
html.read-only .catalog-actions,
html.read-only #catalog-unify-all,
html.read-only .report-add-form,
html.read-only .report-test-row,
html.read-only .catalog-card:has(#pcp-form) {
  display: none !important;
}

/* Campos que viram edição ao clicar: só leitura, sem cara de clicável. */
html.read-only .stop-row-desc input,
html.read-only .apontamento-manual-cell {
  pointer-events: none;
  cursor: default;
}
html.read-only .stop-row-desc input {
  border-color: transparent;
  background: transparent;
}

/* Faixa da cópia de verificação (VPS no período em paralelo com o Render). */
.replica-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 8px 16px;
  background: var(--yellow);
  color: #1a1a1a;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
}