:root {
  /* ===================================================================
     Paleta v2 — Executive Light (estilo Centro de Operações)
     B&W com cor cirúrgica. Topbar dark (assinatura UbiSafe).
     =================================================================== */

  /* Superfícies (light) */
  --bg:          #f5f7fa;       /* page bg */
  --panel:       #ffffff;       /* cards brancos */
  --panel-soft:  #f8fafc;       /* hover/secondary surface */
  --text:        #0f1a2b;       /* texto principal preto-azulado */
  --muted:       #6b7280;       /* texto secundário */
  --border:      #e3e7ee;       /* bordas neutras */
  --border-soft: #eef2f7;       /* divisores em tabelas */

  /* Topbar — DARK (igual ao Centro de Operações; assinatura visual UbiSafe) */
  --topbar:        #0b0f17;
  --topbar-2:      #141a26;
  --topbar-text:   #e6e9f2;
  --topbar-muted:  #8b94a8;
  --topbar-border: #232b3d;

  /* Brand — índigo calibrado pra LIGHT mode (WCAG AA) */
  --accent:      #4f46e5;       /* indigo-600 (texto/ícones/borders) */
  --accent-bold: #4338ca;       /* indigo-700 (hover) */
  --accent-tint: #e0e7ff;       /* indigo-100 (chips, fundos suaves) */

  /* Status — light mode (sobre fundo claro, contraste mantido) */
  --green:      #059669;        /* emerald-600 */
  --green-tint: #d1fae5;        /* emerald-100 */
  --red:        #dc2626;        /* red-600 */
  --red-tint:   #fee2e2;        /* red-100 */
  --red-glow:   rgba(220, 38, 38, 0.25);
  --amber:      #b45309;        /* amber-700 */
  --amber-tint: #fef3c7;        /* amber-100 */
  --muted-tint: #f1f5f9;        /* slate-100 */
  --nitro:      #db2777;        /* pink-600 (Nitro — produto separado do Módulo) */
  --nitro-tint: #fce7f3;        /* pink-100 */

  /* Sombras suaves p/ light mode */
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
}

* { box-sizing: border-box; }
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11"; /* Inter ligaduras refinadas */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

header {
  background: var(--topbar);
  color: var(--topbar-text);
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--topbar-border);
}
header h1 { font-size: 18px; margin: 0; font-weight: 600; letter-spacing: -0.01em; color: var(--topbar-text); }

/* Children dentro da topbar dark — força tokens claros */
header .topbar-sub,
header .conn-time,
header .conn-wrap { color: var(--topbar-muted); }
header .btn-ghost {
  background: transparent;
  border-color: var(--topbar-border);
  color: var(--topbar-text);
}
header .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,255,255,0.03); }
header .user-chip {
  background: var(--topbar-2);
  border-color: var(--topbar-border);
  color: var(--topbar-text);
}
header .export-select {
  background: var(--topbar-2);
  border-color: var(--topbar-border);
  color: var(--topbar-text);
}
header .dia-picker-wrap {
  background: var(--topbar-2);
  border-color: var(--topbar-border);
}
header .dia-picker { color: var(--topbar-text); color-scheme: dark; }
header .toolbar-sep { background: var(--topbar-border); }
.status { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }

.conn-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red);
  transition: background 0.3s;
}
.conn-dot.online { background: var(--green); box-shadow: 0 0 8px var(--green); }
.conn-dot.offline { background: var(--red); }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  padding: 16px 24px;
}
.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: left;
  box-shadow: var(--shadow-card);
  position: relative;
}
.kpi-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 8px; font-weight: 600; }
.kpi-value { font-size: 32px; font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12px; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
/* Estilo "executive": numero KPI sempre preto. Cor vai pra pill/label. */
.kpi-yield .kpi-value { color: var(--text); }
.kpi-warn .kpi-value { color: var(--text); }
.kpi-live .kpi-value { color: var(--text); }
.kpi-value-time { color: var(--text); }

.kpi-alert-text { font-size: 11px; color: var(--red); margin-top: 4px; display: none; font-weight: 600; }
.kpi-yield.alerta {
  border-color: var(--red);
  animation: pulseAlert 2.4s ease-in-out infinite;
}
.kpi-yield.alerta .kpi-value { color: var(--red); }
.kpi-yield.alerta .kpi-alert-text { display: block; }
@keyframes pulseAlert {
  0%, 100% { box-shadow: 0 0 0 0 var(--red-glow); }
  50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 0 24px 16px;
}
@media (max-width: 1000px) { .grid-two { grid-template-columns: 1fr; } }

/* Timeline (larga) + Acumulado por produto (estreito) na Visão Geral */
.grid-timeline {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
  padding: 0 24px 16px;
}
.grid-timeline .card { margin: 0; }
@media (max-width: 1200px) { .grid-timeline { grid-template-columns: 1fr; } }

/* Selo de origem do defeito (tabela de defeitos do operador / painel) */
.def-selo { font-size: 10px; border-radius: 6px; padding: 0 5px; vertical-align: middle; margin-left: 4px; white-space: nowrap; }
.def-selo-teste  { color: #94a3b8; border: 1px solid var(--border); }
.def-selo-padrao { color: #4f46e5; background: rgba(79,70,229,0.10); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  margin: 0 24px 16px;
  box-shadow: var(--shadow-card);
}
.grid-two .card { margin: 0; }
.card h2 { font-size: 13px; margin: 0 0 14px; color: var(--text); font-weight: 600; letter-spacing: -0.005em; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.filter-select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.filter-select:focus { outline: none; border-color: var(--accent); }

table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
thead th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; }
tbody td { padding: 10px 8px; border-bottom: 1px solid var(--border-soft); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: rgba(15, 23, 42, 0.02); }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1px;
}
.pill-pass { background: var(--green-tint); color: var(--green); }
.pill-fail { background: var(--red-tint);   color: var(--red); }
.pill-rma  { background: var(--amber-tint); color: var(--amber); }
.pill-novo { background: var(--accent-tint);color: var(--accent); }
.pill-nitro{ background: var(--nitro-tint); color: var(--nitro); }

.yield-good { color: var(--green); font-weight: 600; }
.yield-bad  { color: var(--red); font-weight: 600; }
.yield-mid  { color: var(--amber); font-weight: 600; }

canvas { width: 100%; max-height: 200px; }

/* ------- header chips ------- */
.user-chip {
  background: var(--panel-soft);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: var(--accent);
}
.logout-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
}
.logout-btn:hover { color: var(--red); border-color: var(--red); }

.export-select {
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.export-select:focus { outline: none; border-color: var(--accent); }
.export-btn {
  background: var(--accent-bold);
  color: #fff;
  border: 0;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.export-btn:hover { background: var(--accent); }
.export-btn:disabled { opacity: 0.5; cursor: wait; }

/* ------- tooltip flutuante do gráfico ------- */
.chart-tooltip {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  font-size: 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  pointer-events: none;
  white-space: nowrap;
  z-index: 100;
  display: none;
}
.chart-tooltip strong { color: var(--text); font-weight: 600; }
.chart-tooltip .tt-row { display: flex; justify-content: space-between; gap: 12px; }
.chart-tooltip .tt-pass { color: var(--accent); font-weight: 600; }
.chart-tooltip .tt-fail { color: var(--muted); }
.chart-host { position: relative; }

/* ------- página de login ------- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.login-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}
.login-box h1 { margin: 0 0 4px; font-size: 22px; color: var(--accent); }
.login-sub { color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.login-box label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.login-box input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 14px;
  margin-top: 6px;
  box-sizing: border-box;
}
.login-box input:focus {
  outline: none;
  border-color: var(--accent);
}
.login-box button {
  width: 100%;
  padding: 10px;
  background: var(--accent);
  border: 0;
  border-radius: 4px;
  color: #0f172a;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  margin-top: 8px;
}
.login-box button:hover { background: var(--accent-bold); }
.alert {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}
.alert-error {
  background: var(--red-tint);
  border: 1px solid var(--red);
  color: var(--red);
}

.app-footer {
  margin: 24px;
  padding: 12px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--border);
}
.app-footer strong { color: var(--accent); }
.footer-sep { margin: 0 8px; opacity: 0.5; }

.login-version {
  margin-top: 20px;
  text-align: center;
  font-size: 11px;
  color: var(--muted);
}

.node-id {
  background: var(--panel-soft);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 16px;
  font-family: 'SF Mono', Monaco, monospace;
}

/* ------- seletor de dia (calendário) ------- */
.dia-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
}
.dia-picker {
  background: transparent;
  color: var(--text);
  border: 0;
  font-size: 12px;
  color-scheme: dark;       /* calendário e ícone nativos em tema escuro */
  cursor: pointer;
}
.dia-picker:focus { outline: none; }
.modo-historico {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.5);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ------- KPI "maior erro do dia" ------- */
.kpi-erro .kpi-value-text {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--muted);
  word-break: break-word;
}
.kpi-erro.tem-erro { border-color: var(--amber-tint); }
.kpi-erro.tem-erro .kpi-value-text { color: var(--text); font-weight: 600; }
.kpi-erro .kpi-value-text { color: var(--text); }

/* KPIs de tempo (HH:MM:SS cabe melhor um pouco menor) */
.kpi-value-time { font-size: 26px; color: var(--accent); }

/* ------- hint pequeno no cabeçalho do card ------- */
.card-hint { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ===================== REDESIGN: topbar + abas + polish ===================== */

/* Barra superior em 3 grupos: identidade · controles · ações+usuário */
.topbar { gap: 16px; flex-wrap: wrap; }
.topbar-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.topbar-left h1 { font-size: 18px; font-weight: 600; }
.topbar-sub { color: var(--topbar-muted); font-weight: 400; }
.brand-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent); display: inline-block; }

.topbar-center {
  display: flex; align-items: center; gap: 10px;
  flex: 1; justify-content: center;
  min-width: 0;
}
.topbar-right {
  display: flex; align-items: center; gap: 12px;
  flex-shrink: 0;
}
.topbar-actions { display: flex; align-items: center; gap: 8px; }

.conn-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.conn-time { white-space: nowrap; }

.topbar-divider { width: 1px; height: 22px; background: var(--topbar-border); }
.toolbar-sep    { width: 1px; height: 20px; background: var(--topbar-border); margin: 0 2px; }

/* User menu (dropdown via <details>) */
.user-menu { position: relative; }
.user-menu-trigger {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.user-menu-trigger::-webkit-details-marker { display: none; }
.user-menu-caret { color: var(--topbar-muted); font-size: 10px; transition: transform 0.15s; }
.user-menu[open] .user-menu-caret { transform: rotate(180deg); }
.user-menu-pop {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.18);
  padding: 6px;
  z-index: 100;
}
.user-menu-item {
  display: block; padding: 8px 12px;
  color: var(--text); text-decoration: none;
  border-radius: 6px;
  font-size: 13px; font-weight: 500;
  transition: background 0.1s;
}
.user-menu-item:hover { background: var(--panel-soft); color: var(--accent); }

/* Indicador "AO VIVO" na aba */
.tab-live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulseDotLive 1.4s ease-in-out infinite;
  box-shadow: 0 0 6px var(--red);
}
@keyframes pulseDotLive { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* Barra de status da aba Ao Vivo */
.aovivo-bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 24px; margin: 0 24px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.aovivo-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.aovivo-pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulseDotLive 1.4s ease-in-out infinite;
}
.aovivo-title { color: var(--text); font-size: 14px; letter-spacing: 0.1px; }
.aovivo-meta { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 8px; flex: 1; }
.aovivo-tv-hint { margin-left: auto; }

/* Tabela "grande" usada no Ao Vivo */
.tbl-grande { font-size: 14px; }
.tbl-grande thead th { font-size: 11px; padding: 12px 8px; }
.tbl-grande tbody td { padding: 14px 8px; }
.card-aovivo { padding: 20px; }

/* Timeline (Chart.js stacked bar) — altura controlada */
.timeline-host { position: relative; height: 280px; }
.timeline-host canvas { width: 100% !important; height: 100% !important; }

/* Botões unificados */
.btn { background: var(--panel-soft); color: var(--text); border: 1px solid var(--border); padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; line-height: 1.7; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-ghost { background: transparent; }
.btn-accent { background: var(--accent-bold); color: #fff; border-color: var(--accent-bold); }
.btn-accent:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Abas (fixas no topo ao rolar) */
.tabs {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  overflow-x: auto;
}
.tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-panel { padding-top: 16px; }
.tab-panel[hidden] { display: none; }

/* KPIs mais compactos e arredondados */
.kpi-grid { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; }
.kpi { padding: 14px; border-radius: 10px; }
.kpi-value { font-size: 28px; }
.kpi-value-time { font-size: 22px; }
.kpi-erro .kpi-value-text { font-size: 16px; }

/* Cards um pouco mais limpos */
.card { border-radius: 10px; }

/* ===================== HERO ROW (Yield ring + Pareto) ===================== */
.hero-row { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 12px; padding: 0 24px 12px; }
@media (max-width: 960px) { .hero-row { grid-template-columns: 1fr; } }
.hero-row .card { margin: 0; }
.card-quiet { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 4px; font-weight: 600; }

/* Anel de Yield (SVG) — estilo executivo: traço fino, número preto grande */
.hero-yield { display: flex; flex-direction: column; align-items: center; padding: 18px 16px 14px; }
.yield-ring-wrap { position: relative; width: 180px; height: 180px; margin: 4px 0 10px; }
.yield-ring { width: 180px; height: 180px; transform: rotate(-90deg); }
.yield-ring-track { fill: none; stroke: var(--border-soft); stroke-width: 8; }
.yield-ring-bar   { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.5s ease, stroke 0.3s; }
.yield-ring-bar.warn { stroke: var(--amber); }
.yield-ring-bar.bad  { stroke: var(--red); }
.yield-ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.yield-ring-big { font-size: 36px; font-weight: 600; color: var(--text); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.yield-ring-meta { font-size: 11px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.hero-yield.alerta .yield-ring-big { color: var(--text); }
.hero-yield-sub { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; font-variant-numeric: tabular-nums; }
.hero-yield-sub strong { color: var(--text); font-weight: 600; }
.dot-sep { opacity: 0.5; }

/* Pareto */
.hero-pareto { display: flex; flex-direction: column; }
.pareto-host { position: relative; flex: 1; min-height: 220px; }
.pareto-host canvas { width: 100%; height: 100%; max-height: 240px; }
.pareto-empty { padding: 24px 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ===================== QUADRO DE BANCADAS ===================== */
.bench-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.bench-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 140px;
  box-shadow: var(--shadow-card);
}
.bench-card:hover { border-color: var(--border-strong, var(--accent)); }
.bench-card.is-sem-producao { opacity: 0.7; background: var(--panel-soft); }

.bench-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bench-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.25; word-break: break-word; }
.bench-name-sub { font-size: 11px; color: var(--muted); font-weight: 400; }

.bench-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.bench-status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.bench-card.is-ativa     .bench-status-pill { background: var(--green-tint);  color: var(--green); }
.bench-card.is-ativa     .bench-status-pill::before { box-shadow: 0 0 8px var(--green); animation: pulseDot 2.4s ease-in-out infinite; }
.bench-card.is-ociosa    .bench-status-pill { background: var(--amber-tint);  color: var(--amber); }
.bench-card.is-parada    .bench-status-pill { background: var(--red-tint);    color: var(--red); }
.bench-card.is-sem-producao .bench-status-pill { background: var(--muted-tint); color: var(--muted); }
.bench-card.is-historico .bench-status-pill { background: var(--accent-tint); color: var(--accent); }
@keyframes pulseDot { 0%,100%{opacity:1} 50%{opacity:0.5} }

.bench-operator {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--text);
}
.bench-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.bench-op-name { font-weight: 600; }
.bench-op-meta { font-size: 11px; color: var(--muted); }

/* Selo "Triando câmera/PIR" — atividade que não gera teste, mas prova produção. */
.bench-triagem {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 2px;
  padding: 5px 9px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent-bold, var(--accent));
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.bench-triagem-ico { font-size: 13px; }
.bench-triagem-sub { color: var(--accent); font-weight: 500; opacity: 0.85; }

.bench-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.bench-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.bench-stat-value { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2; }
.bench-stat-value.is-good { color: var(--green); }
.bench-stat-value.is-bad  { color: var(--red); }
.bench-stat-value.is-mid  { color: var(--amber); }

.bench-footer { font-size: 11px; color: var(--muted); margin-top: -2px; }

/* =================================================================
   RESPONSIVIDADE — funciona em qualquer tela (desktop → celular)
   Breakpoints:
     ≥ 1100px = desktop grande (layout atual)
     900-1100 = desktop pequeno / tablet landscape
     600-900  = tablet portrait
     ≤ 600    = celular
     ≤ 420    = celular pequeno
   ================================================================= */

/* --- Tablet landscape (≤ 1100px) --- */
@media (max-width: 1100px) {
  .topbar-center { gap: 6px; flex-wrap: wrap; }
  .topbar-right  { gap: 8px; }
  .conn-time     { display: none; } /* status pode esperar; calendário tem prioridade */
}

/* --- Tablet portrait (≤ 900px) --- */
@media (max-width: 900px) {
  /* Topbar quebra em 2 linhas: identidade + (centro/ações) */
  .topbar {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
  }
  .topbar-left   { flex: 0 0 auto; }
  .topbar-center { flex: 1 1 100%; order: 3; justify-content: flex-start; }
  .topbar-right  { flex: 1 1 auto; justify-content: flex-end; }
  header h1      { font-size: 16px; }
  .topbar-sub    { display: none; }
  .topbar-divider { display: none; }

  /* KPIs em 2 colunas */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px 16px;
  }
  .kpi { padding: 12px 14px; border-radius: 10px; }
  .kpi-value { font-size: 26px; }
  .kpi-value-time { font-size: 20px; }
  .kpi-erro .kpi-value-text { font-size: 14px; }

  /* Cards e seções com padding lateral menor */
  .card { margin: 0 16px 12px; padding: 14px 16px; }
  .grid-two, .hero-row { padding: 0 16px 12px; }
  .tabs { padding: 0 16px; }
  .aovivo-bar { margin: 0 16px 12px; padding: 12px 14px; }

  /* Hero (Yield + Pareto) já empilha em 960px */
  .yield-ring-wrap { width: 150px; height: 150px; }
  .yield-ring      { width: 150px; height: 150px; }
  .yield-ring-big  { font-size: 30px; }

  /* Bench grid menos largo */
  .bench-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* --- Mobile (≤ 600px) --- */
@media (max-width: 600px) {
  /* Topbar mais enxuta */
  .topbar { padding: 10px 12px; gap: 8px; }
  .brand-dot { width: 8px; height: 8px; }
  header h1  { font-size: 15px; }

  /* Esconde itens menos críticos no topbar pra caber */
  .modo-historico { font-size: 10px; padding: 2px 8px; }
  .export-select  { padding: 4px 6px; font-size: 11px; }
  .btn            { padding: 4px 8px; font-size: 11px; }

  /* User menu compacto */
  .user-chip { padding: 3px 8px; font-size: 11px; }

  /* KPIs ainda em 2 colunas mas menores */
  .kpi-grid { padding: 10px 12px; gap: 8px; }
  .kpi      { padding: 10px 12px; }
  .kpi-label { font-size: 10px; margin-bottom: 6px; }
  .kpi-value { font-size: 22px; }
  .kpi-value-time { font-size: 17px; }
  .kpi-sub  { font-size: 11px; margin-top: 4px; }
  .kpi-erro .kpi-value-text { font-size: 13px; line-height: 1.2; }

  /* Cards com margem mínima */
  .card { margin: 0 12px 10px; padding: 12px 14px; border-radius: 8px; }
  .card h2 { font-size: 13px; margin-bottom: 10px; }
  .grid-two, .hero-row { padding: 0 12px 10px; gap: 10px; }
  .tabs { padding: 0 12px; }
  .aovivo-bar { margin: 0 12px 10px; padding: 10px 12px; flex-direction: column; align-items: stretch; gap: 6px; }
  .aovivo-tv-hint { margin-left: 0; }

  /* TABELAS — em mobile, scroll horizontal dentro do card */
  /* Mantém table como tal (sem virar block) pra preservar layout */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; min-width: 100%; }
  thead th { padding: 8px 6px; font-size: 9px; letter-spacing: 0.4px; }
  tbody td { padding: 8px 6px; }
  .pill    { padding: 2px 7px; font-size: 10px; }

  /* Tabs menores */
  .tab { padding: 10px 14px; font-size: 13px; }

  /* Quadro de bancadas: cards em coluna única */
  .bench-grid { grid-template-columns: 1fr; gap: 8px; }
  .bench-card { padding: 10px 12px; min-height: auto; }
  .bench-stat-value { font-size: 14px; }
  .bench-name { font-size: 12px; }

  /* Hero Yield: anel menor pra economizar altura */
  .yield-ring-wrap { width: 130px; height: 130px; }
  .yield-ring      { width: 130px; height: 130px; }
  .yield-ring-big  { font-size: 26px; }
  .hero-yield      { padding: 14px 12px 10px; }
  .pareto-host     { min-height: 180px; }

  /* Timeline canvas */
  .timeline-host { height: 200px; }

  /* Footer mais compacto */
  .app-footer { margin: 12px; font-size: 10px; }
}

/* --- Mobile pequeno (≤ 420px) --- */
@media (max-width: 420px) {
  /* KPIs em 1 coluna */
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi      { padding: 12px 14px; }
  .kpi-value { font-size: 26px; }

  /* Topbar empilha vertical */
  .topbar {
    flex-direction: column;
    align-items: stretch;
  }
  .topbar-left, .topbar-center, .topbar-right {
    width: 100%;
    justify-content: center;
  }
  .topbar-actions { width: 100%; justify-content: space-between; }
  .user-menu      { margin-left: auto; }

  /* Esconde detalhes secundários */
  .card-hint { display: none; }
  .conn-wrap { font-size: 11px; }
}

/* --- Telas muito altas/wide (≥ 1600px) — espaço extra --- */
@media (min-width: 1600px) {
  .kpi-grid { grid-template-columns: repeat(8, 1fr); } /* 8 KPIs lado a lado */
}

/* --- Tabela de operadores: linhas expansíveis por equipamento --- */
.tbl-operador .op-expandable { cursor: pointer; }
.tbl-operador .op-row.op-open { background: var(--panel-soft); }
.op-caret {
  display: inline-block; width: 14px; color: var(--muted);
  font-size: 10px; transition: color 0.15s;
}
.op-caret-empty { visibility: hidden; }
.tbl-operador .op-expandable:hover .op-caret { color: var(--accent); }
.op-link { color: var(--text); text-decoration: none; font-weight: 600; }
.op-link:hover { color: var(--accent); text-decoration: underline; }
.op-user { color: var(--muted); font-size: 11px; }
.tbl-operador .op-sub > td { border-bottom: 1px solid var(--border-soft); color: var(--muted); }
.tbl-operador .op-sub .op-sub-eq { padding-left: 22px; color: var(--text); }

/* --- Conferência por operador (de 1ª passada vs retrabalho) --- */
.op-flag {
  font-size: 11px; color: #b45309; background: #fef3c7;
  border-radius: 6px; padding: 1px 6px; white-space: nowrap; cursor: help;
}
.tbl-operador .op-sub-conf > td.op-conf-detail {
  padding-left: 22px; color: var(--muted); font-size: 12px;
}
.op-conf-num { color: var(--green); }
.op-conf-sep { color: var(--muted); opacity: .45; margin: 0 2px; }
.op-conf-warn { color: #b45309; }

/* --- Comparativo de funcionários (aba Qualidade) --- */
.comp-controls { display: flex; align-items: center; gap: 12px; }
.comp-gran { display: inline-flex; background: var(--panel-soft); border-radius: 8px; padding: 2px; }
.comp-pill {
  border: 0; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer;
}
.comp-pill.is-active { background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(15,23,42,.12); }
.comp-nav { display: inline-flex; gap: 4px; }
.comp-nav button {
  border: 1px solid var(--border-soft); background: #fff; color: var(--muted);
  width: 28px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 11px;
}
.comp-nav button:disabled { opacity: .4; cursor: default; }

.comp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0 4px; }
.comp-kpi { background: var(--panel-soft); border-radius: 10px; padding: 10px 12px; }
.comp-kpi-label { font-size: 11px; color: var(--muted); }
.comp-kpi-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; }
.comp-kpi-delta { font-size: 12px; margin-top: 2px; min-height: 16px; font-weight: 600; }
.comp-delta-up { color: var(--green); }
.comp-delta-down { color: var(--red); }
.comp-delta-neutral { color: var(--muted); font-weight: 400; }

.comp-roscas { margin-top: 10px; }
.comp-rosca-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; text-align: center; }
.rosca-host { position: relative; height: 210px; }
.rosca-centro { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; transition: opacity 0.15s; }
/* O tooltip do Chart.js é desenhado NO canvas — fica ATRÁS deste overlay HTML.
   Ao passar o mouse na rosca, o centro esmaece pra não atropelar o tooltip. */
.rosca-host:hover .rosca-centro { opacity: 0.08; }
.rosca-num { font-size: 26px; font-weight: 800; color: var(--text); line-height: 1; }
.rosca-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

.comp-legend { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; max-height: 132px; overflow: auto; }
.comp-leg-item { display: flex; align-items: center; gap: 7px; font-size: 12px; }
.comp-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.comp-leg-name { color: var(--text); flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-leg-val { color: var(--muted); flex: 0 0 auto; }

.comp-barra-wrap { margin-top: 14px; }
.comp-barra-wrap > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.comp-barra-host { height: 300px; margin-top: 10px; }

/* --- Tabela "Por equipamento": linhas expansíveis por operador --- */
#tbl-equipamento .op-expandable { cursor: pointer; }
#tbl-equipamento .op-row.op-open { background: var(--panel-soft); }
#tbl-equipamento .op-expandable:hover .op-caret { color: var(--accent); }
#tbl-equipamento .op-sub > td { border-bottom: 1px solid var(--border-soft); color: var(--muted); }
#tbl-equipamento .op-sub .op-sub-eq { padding-left: 22px; color: var(--text); }

/* --- Triagem de componentes (câmera / PIR sensor) --- */
.triagem-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 14px;
}
.triagem-stat {
  flex: 1 1 110px;
  min-width: 100px;
  background: var(--panel-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.triagem-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.triagem-stat-value { font-size: 22px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.triagem-stat-value.good { color: var(--green); }
.triagem-stat-value.bad  { color: var(--red); }
.triagem-sub { color: var(--muted); font-size: 11px; }
.triagem-sessoes { margin-top: 12px; }
.triagem-sessoes > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); }
.triagem-sessoes > summary:hover { color: var(--accent-bold); }
.triagem-sessoes table { margin-top: 10px; }
.triagem-grupo-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  font-size: 11px; font-weight: 600;
}
#tbl-triagem .op-expandable { cursor: pointer; }
#tbl-triagem .op-row.op-open { background: var(--panel-soft); }
#tbl-triagem .op-expandable:hover .op-caret { color: var(--accent); }
#tbl-triagem .op-sub > td { border-bottom: 1px solid var(--border-soft); color: var(--muted); }
#tbl-triagem .op-sub .op-sub-eq { padding-left: 22px; color: var(--text); }

/* ===================== Tela do operador (/op/painel) — redesenho v1.10 =====================
   Reusa .kpi/.card/.pill/.triagem-*/.yield-ring* do resto do painel; abaixo só o
   que é específico da tela: hero (anel + KPIs), card de tempo com sparkline,
   split de origem na triagem e chips de rastreabilidade. Tudo server-rendered. */
.op-hero { display: grid; grid-template-columns: minmax(230px, 290px) 1fr; gap: 12px; padding: 16px 24px 4px; }
.op-hero .card { margin: 0; }
.op-hero-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-content: start; }
.op-hero-kpis .kpi { margin: 0; }
@media (max-width: 760px) { .op-hero { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .op-hero-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Anel de yield: reusa .hero-yield/.yield-ring* — só uma sub abaixo do anel */
.op-hero .hero-yield { justify-content: center; }
.op-hero-note { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; }
.op-hero-note strong { color: var(--text); }

/* Chips de estado (rastreabilidade) */
.op-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.op-chip-ok    { background: var(--green-tint); color: var(--green); }
.op-chip-warn  { background: var(--amber-tint); color: var(--amber); }
.op-chip-muted { background: var(--muted-tint); color: var(--muted); }

/* Card de tempo: 3 números grandes + sparkline SVG */
.tempo-row  { display: flex; gap: 8px; }
.tempo-cell { flex: 1; }
.tempo-cell .t-lbl { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.tempo-cell .t-val { font-size: 24px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.15; }
.tempo-cell.is-med .t-val { color: var(--text); }
.op-spark { width: 100%; height: 34px; margin: 12px 0 8px; display: block; }
.op-spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.op-spark circle   { fill: var(--accent); }
.op-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.scope-note { font-size: 11.5px; color: var(--muted); margin-top: 10px; line-height: 1.4; }
.t-flag { font-size: 10px; color: var(--amber); font-weight: 700; margin-left: 4px; cursor: help; }

/* Equipamento: ponto colorido (Nitro rosa) */
.eq-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.eq-dot-nitro { background: var(--nitro); }

/* Triagem: split de origem (Nova/Antiga) + barra de aproveitamento */
.orig { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.op-bar-wrap { display: flex; align-items: center; gap: 8px; }
.op-minibar { height: 7px; border-radius: 999px; background: var(--red-tint); overflow: hidden; flex: 1; min-width: 60px; }
.op-minibar > span { display: block; height: 100%; background: var(--green); }
.td-good { color: var(--green); font-weight: 600; }
.td-bad  { color: var(--red); }
/* Equipamento x origem: nome fica numa célula com rowspan (Novo/RMA embaixo).
   No último equipamento essa célula cruza a última linha, e a regra
   `tbody tr:last-child td` não a alcança — ficava uma borda solta na 1ª coluna. */
.td-span-fim { border-bottom: 0; }

@media (max-width: 760px) {
  .op-hero { padding: 14px 16px 4px; }
}

/* ============================ Aba Mensal ================================
   Produção fechada do mês por testador. Reusa .tbl-operador (linhas
   expansíveis) e o visual dos KPIs do comparativo; o que é próprio daqui são
   os KPIs em auto-fit (são 8, não cabem na grade fixa de 4 do comparativo) e
   os chips de origem Novo/RMA.
   ====================================================================== */
.badge-andamento {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: var(--amber-tint); color: var(--amber); vertical-align: middle;
}
/* O .dia-picker global usa color-scheme dark (nasceu na topbar escura);
   dentro do card claro o calendário nativo precisa voltar pro tema claro. */
.mes-picker { color-scheme: light; }

.mes-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 18px; }
.mes-kpi { background: var(--panel-soft); border-radius: 10px; padding: 10px 12px; border: 1px solid var(--border-soft); }
.mes-kpi-label { font-size: 11px; color: var(--muted); }
.mes-kpi-value { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.2; font-variant-numeric: tabular-nums; }
.mes-kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; min-height: 16px; }
.mes-kpi-novo .mes-kpi-value { color: var(--accent); }
.mes-kpi-rma  .mes-kpi-value { color: var(--amber); }

.mes-sub { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
.mes-tbl-head { margin-top: 4px; }

.tbl-mensal td, .tbl-mensal th { font-variant-numeric: tabular-nums; }
.tbl-mensal .col-novo { color: var(--accent); font-weight: 600; }
.tbl-mensal .col-rma  { color: var(--amber); font-weight: 600; }
.tbl-mensal .col-zero { color: var(--muted); font-weight: 400; }
.tbl-mensal tfoot td { border-top: 2px solid var(--border); font-weight: 700; background: var(--panel-soft); }
.mes-conf { font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.mes-conf strong { color: var(--text); }
.mes-conf-sep { opacity: 0.5; margin: 0 6px; }
.mes-empty { text-align: center; color: var(--muted); padding: 18px 0; }
.mes-erro  { text-align: center; color: var(--red); padding: 18px 0; }

@media (max-width: 900px) {
  .mes-kpis { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .mes-kpi-value { font-size: 18px; }
}

/* Linha da aba Mensal somada de mais de uma conta (login duplicado / sem login) */
.mes-chip-contas {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.6;
  padding: 0 6px; border-radius: 999px; margin-left: 4px; cursor: help;
  background: var(--accent-tint); color: var(--accent-bold);
}