:root {
  --bg: #e7f2fa;
  --surface: #f3f8fc;
  --surface-low: #eaf3f9;
  --surface-container: #ffffff;
  --surface-high: #d9e8f4;
  --surface-highest: #c9dced;
  --on-surface: #123047;
  --on-variant: #4d6880;
  --outline: rgba(18, 60, 95, 0.14);
  --primary: #0b6f8c;
  --primary-bright: #0284a8;
  --primary-dim: #0e7490;
  --heatmap-green: #059669;
  --heatmap-yellow: #d97706;
  --heatmap-red: #dc2626;
  --go: #0891b2;
  --br: #6366f1;
  --ba: #7c3aed;
  --bp: #e11d48;
  --gp: #be123c;
  --gs: #c2410c;
  --gb: #0ea5b7;
  --gc: #d97706;
  --ec: #92400e;
  --ex: #a16207;
  --ic: #0284a8;
  --mh: #16a34a;
  --mm: #ca8a04;
  --ms: #ea580c;
  --mq: #f97316;
  --radius: 8px;
  --font: "Geist", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "Consolas", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(125, 198, 232, 0.45), transparent 55%),
    radial-gradient(900px 500px at 0% 100%, rgba(170, 214, 240, 0.55), transparent 50%),
    linear-gradient(165deg, #eef6fb 0%, #d9ebf7 48%, #e7f2fa 100%);
  color: var(--on-surface);
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.72);
  border-right: 1px solid var(--outline);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  backdrop-filter: blur(14px);
}
.brand {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-bottom: 1px solid var(--outline);
  font-weight: 600;
  color: var(--primary);
}
.brand .material-symbols-outlined { color: var(--primary-bright); }
.nav { padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav button {
  all: unset;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 6px;
  color: var(--on-variant);
  cursor: pointer;
  font-size: 14px;
}
.nav button:hover { background: rgba(2, 132, 168, 0.08); color: var(--on-surface); }
.nav button.active {
  background: rgba(2, 132, 168, 0.14);
  color: var(--primary-bright);
}
.nav button .material-symbols-outlined { font-size: 20px; }
.sidebar-foot {
  padding: 16px;
  border-top: 1px solid var(--outline);
  font-size: 11px;
  color: var(--on-variant);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* Main */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--outline);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar h1 { margin: 0; font-size: 22px; font-weight: 600; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filters select, .filters input {
  background: #ffffff;
  border: 1px solid var(--outline);
  color: var(--on-surface);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font);
}
.filters input { min-width: 200px; }

.content { padding: 24px; display: flex; flex-direction: column; gap: 24px; max-width: 1600px; width: 100%; margin: 0 auto; }

/* Marcas discretas em cada view */
.view-panel {
  position: relative;
  padding-bottom: 48px;
}
.view-logo {
  position: absolute;
  bottom: 8px;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.view-logo-abb {
  left: 8px;
  width: 148px;
  opacity: 0.62;
  /* LogoABB.jpeg → cinza médio, mais contraste */
  filter: grayscale(1) contrast(1.25) brightness(1.15);
}
.view-logo-bo {
  right: 8px;
  width: 118px;
  opacity: 0.22;
  filter: saturate(0.9);
}
.board.view-panel > .view-logo-abb { left: 4px; }
.board.view-panel > .view-logo-bo { right: 4px; }

/* Glass */
.glass {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(18, 60, 95, 0.06);
}

/* KPIs */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-variant);
  font-weight: 700;
}
.kpi .value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--primary);
}
.kpi .hint { font-size: 12px; color: var(--on-variant); }

/* Layout grid */
.board {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 20px;
  align-items: start;
}
.board > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
  gap: 12px;
  flex-shrink: 0;
}
.section-title h2 { margin: 0; font-size: 18px; font-weight: 500; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-variant); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-hint { opacity: 0.8; letter-spacing: 0.02em; text-transform: none; }
.dot { width: 10px; height: 10px; border-radius: 999px; }
.dot.go { background: var(--go); }
.dot.br { background: var(--br); }
.dot.ba { background: var(--ba); }
.dot.bp { background: var(--bp); }
.dot.gp { background: var(--gp); }
.dot.gs { background: var(--gs); }
.dot.gb { background: var(--gb); }
.dot.ex { background: var(--ex); }
.dot.ec { background: var(--ec); }
.dot.ic { background: var(--ic); }
.dot.mh { background: var(--mh); }
.dot.mm { background: var(--mm); }
.dot.ms { background: var(--ms); }
.dot.mq { background: var(--mq); }
.dot.ok { background: var(--heatmap-green); }
.dot.warn { background: var(--heatmap-yellow); }
.dot.alert { background: var(--heatmap-red); }

/* Floor map — zonas em grid (sem overlap) */
.floor-map {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "go gb"
    "br bp"
    "ic mh";
  gap: 12px;
  min-height: 560px;
  height: auto;
  overflow: visible;
  padding: 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(2, 132, 168, 0.12) 1px, transparent 0) 0 0 / 24px 24px,
    #f7fbfe;
}
.floor-zone {
  border: 1px dashed rgba(18, 60, 95, 0.18);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  background: rgba(232, 243, 250, 0.7);
}
.floor-zone.zone-go { grid-area: go; }
.floor-zone.zone-gb { grid-area: gb; }
.floor-zone.zone-br { grid-area: br; }
.floor-zone.zone-bp { grid-area: bp; }
.floor-zone.zone-ic { grid-area: ic; }
.floor-zone.zone-mh { grid-area: mh; }
.floor-zone-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(18, 60, 95, 0.45);
}
.floor-zone-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}
.zone-gb .floor-zone-grid { grid-template-columns: 1fr; }
.gondola-chip {
  position: relative;
  border-radius: 6px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  padding: 10px 6px;
  text-align: center;
  min-height: 58px;
  width: 100%;
}
.gondola-chip:hover { transform: translateY(-2px); z-index: 5; }
.gondola-chip.active { outline: 2px solid var(--primary-bright); outline-offset: 2px; }
.gondola-chip .gid {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
}
.gondola-chip .gmeta { font-size: 9px; color: var(--on-variant); margin-top: 2px; }
.gondola-chip.tipo-GO { border-color: rgba(8,145,178,0.55); background: rgba(8,145,178,0.12); color: var(--go); }
.gondola-chip.tipo-BR { border-color: rgba(99,102,241,0.55); background: rgba(99,102,241,0.1); color: var(--br); }
.gondola-chip.tipo-BA { border-color: rgba(124,58,237,0.55); background: rgba(124,58,237,0.1); color: var(--ba); }
.gondola-chip.tipo-BP { border-color: rgba(225,29,72,0.45); background: rgba(225,29,72,0.08); color: var(--bp); }
.gondola-chip.tipo-GP { border-color: rgba(190,18,60,0.5); background: rgba(190,18,60,0.1); color: var(--gp); }
.gondola-chip.tipo-GS { border-color: rgba(194,65,12,0.5); background: rgba(194,65,12,0.1); color: var(--gs); }
.gondola-chip.tipo-GB { border-color: rgba(14,165,183,0.55); background: rgba(14,165,183,0.12); color: var(--gb); }
.gondola-chip.tipo-GC { border-color: rgba(217,119,6,0.55); background: rgba(217,119,6,0.1); color: var(--gc); }
.gondola-chip.tipo-EC { border-color: rgba(146,64,14,0.55); background: rgba(146,64,14,0.12); color: var(--ec); }
.gondola-chip.tipo-EX { border-color: rgba(161,98,7,0.55); background: rgba(161,98,7,0.1); color: var(--ex); }
.gondola-chip.tipo-IC { border-color: rgba(2,132,168,0.55); background: rgba(2,132,168,0.12); color: var(--ic); }
.gondola-chip.tipo-MH { border-color: rgba(22,163,74,0.55); background: rgba(22,163,74,0.1); color: var(--mh); }
.gondola-chip.tipo-MM { border-color: rgba(202,138,4,0.55); background: rgba(202,138,4,0.12); color: var(--mm); }
.gondola-chip.tipo-MS { border-color: rgba(234,88,12,0.55); background: rgba(234,88,12,0.12); color: var(--ms); }
.gondola-chip.tipo-MQ { border-color: rgba(249,115,22,0.55); background: rgba(249,115,22,0.12); color: var(--mq); }
.gondola-chip.parcial { border-style: dashed; opacity: 0.85; }

/* Category list */
.cat-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 8px 16px 2px;
  scrollbar-gutter: stable;
}
.cat-card { padding: 16px 18px; cursor: pointer; transition: border-color 0.15s; }
.cat-card:hover { border-color: rgba(2, 132, 168, 0.35); }
.cat-card.active { border-color: var(--primary-bright); }
.cat-card .top { display: flex; justify-content: space-between; gap: 10px; }
.cat-card h3 { margin: 0; font-size: 16px; font-weight: 600; }
.cat-card .sub { font-size: 12px; color: var(--on-variant); margin-top: 4px; }
.cat-card .score {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
}
.bar { height: 6px; background: var(--surface-high); border-radius: 999px; margin-top: 12px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; }
.cat-card .foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--outline);
  font-size: 12px;
  color: var(--on-variant);
  font-family: var(--mono);
}

/* Gondola grid */
.gondola-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.gondola-card {
  padding: 18px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  border-top: 3px solid transparent;
}
.gondola-card:hover { transform: translateY(-3px); }
.gondola-card.tipo-GO { border-top-color: var(--go); }
.gondola-card.tipo-BR { border-top-color: var(--br); }
.gondola-card.tipo-BA { border-top-color: var(--ba); }
.gondola-card.tipo-BP { border-top-color: var(--bp); }
.gondola-card.tipo-GP { border-top-color: var(--gp); }
.gondola-card.tipo-GS { border-top-color: var(--gs); }
.gondola-card.tipo-GB { border-top-color: var(--gb); }
.gondola-card.tipo-GC { border-top-color: var(--gc); }
.gondola-card.tipo-EC { border-top-color: var(--ec); }
.gondola-card.tipo-EX { border-top-color: var(--ex); }
.gondola-card.tipo-IC { border-top-color: var(--ic); }
.gondola-card.tipo-MH { border-top-color: var(--mh); }
.gondola-card.tipo-MM { border-top-color: var(--mm); }
.gondola-card.tipo-MS { border-top-color: var(--ms); }
.gondola-card.tipo-MQ { border-top-color: var(--mq); }
.gondola-card.active { border-color: var(--primary-bright); }
.gondola-card .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; gap: 8px; }
.gondola-card .head .title { font-family: var(--mono); font-size: 18px; font-weight: 700; }
.gondola-card .head .sub { font-size: 12px; color: var(--on-variant); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.badge {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  white-space:nowrap;
}
.badge.ok { background: rgba(16,185,129,0.15); color: var(--heatmap-green); }
.badge.warn { background: rgba(245,158,11,0.15); color: var(--heatmap-yellow); }
.badge.alert { background: rgba(239,68,68,0.15); color: var(--heatmap-red); }

/* Uma gôndola = um corpo; faces A/B são lados da mesma unidade */
.gondola-unit {
  background: transparent;
  padding: 0;
}
.gondola-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-variant);
  margin-bottom: 8px;
}
.gondola-unit.compact .gondola-caption { display: none; }
.gondola-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid rgba(2, 132, 168, 0.4);
  border-radius: 8px;
  overflow: hidden;
  background: #eef6fb;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}
.gondola-wall {
  height: 5px;
  background: repeating-linear-gradient(
    90deg,
    rgba(18, 60, 95, 0.18) 0 5px,
    rgba(18, 60, 95, 0.06) 5px 10px
  );
  border-bottom: 1px solid rgba(18, 60, 95, 0.12);
}
.gondola-face {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: transparent;
}
.face-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-bright);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(2,132,168,0.4);
  border-radius: 3px;
  background: rgba(2,132,168,0.1);
}
.face-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--on-variant);
  white-space: nowrap;
  opacity: 0.85;
}
.gondola-unit.compact .face-meta { display: none; }
.face-modules {
  display: flex;
  gap: 2px;
  min-height: 32px;
  padding: 2px;
  border-radius: 3px;
  background: rgba(255,255,255,0.65);
}
.face-modules.strip {
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--outline);
  background: #f7fbfe;
}
.gondola-spine {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 10px;
  background: linear-gradient(
    180deg,
    rgba(2,132,168,0.08),
    rgba(2,132,168,0.22),
    rgba(2,132,168,0.08)
  );
  border-top: 1px solid rgba(2,132,168,0.35);
  border-bottom: 1px solid rgba(2,132,168,0.35);
}
.gondola-spine span {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(18, 60, 95, 0.55);
  line-height: 1;
}
.mod-cell {
  flex: 1;
  min-width: 0;
  border-radius: 3px;
  border: 1px solid transparent;
  min-height: 30px;
  cursor: pointer;
  transition: filter 0.12s;
  display: flex;
  align-items: stretch;
  padding: 3px 2px;
}
.mod-cell:hover { filter: brightness(1.25); }
.mod-cell.ok { background: rgba(5,150,105,0.28); border-color: rgba(5,150,105,0.4); }
.mod-cell.warn { background: rgba(217,119,6,0.28); border-color: rgba(217,119,6,0.4); }
.mod-cell.alert { background: rgba(220,38,38,0.25); border-color: rgba(220,38,38,0.4); }
.mod-cell.empty { background: rgba(18,60,95,0.06); border-color: rgba(18,60,95,0.1); }
.mod-shelves {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 2px;
}
.mod-shelves i {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: rgba(18, 48, 71, 0.35);
}
.mod-shelves.empty-shelves i {
  background: rgba(18, 48, 71, 0.15);
}
.card-stats {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-variant);
  flex-wrap: wrap;
}

/* Detail section — sempre acessível pelo menu Detalhe */
.detail {
  display: none;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 80px;
}
.detail.open { display: flex; }
.detail-empty {
  padding: 28px 24px;
  text-align: center;
}
.detail-empty h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
}
.detail-empty p {
  margin: 0 auto 18px;
  max-width: 420px;
  color: var(--on-variant);
  font-size: 14px;
  line-height: 1.45;
}
.detail-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  text-align: left;
}
.detail-pick {
  all: unset;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--outline);
  background: #ffffff;
  transition: border-color 0.15s, background 0.15s;
}
.detail-pick:hover {
  border-color: rgba(2, 132, 168, 0.45);
  background: rgba(2, 132, 168, 0.08);
}
.detail-pick .pid {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--primary-bright);
}
.detail-pick .pmeta {
  font-size: 11px;
  color: var(--on-variant);
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.detail-header h2 { margin: 0 0 6px; font-size: 24px; }
.detail-header p { margin: 0; color: var(--on-variant); font-size: 14px; max-width: 720px; }
.detail-actions { display: flex; gap: 8px; }
.btn {
  all: unset;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid var(--outline);
  color: var(--on-surface);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn.primary { background: var(--primary-bright); color: #ffffff; border-color: transparent; font-weight: 600; }
.btn:hover { border-color: rgba(2, 132, 168, 0.45); background: rgba(2, 132, 168, 0.06); }

.detail-unit {
  padding: 16px 18px;
}
.detail-unit > .caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-variant);
  margin-bottom: 10px;
}
.faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.face-panel { padding: 18px; }
.face-panel h3 {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--primary-bright);
}
.face-panel h3 .face-id-muted {
  font-size: 12px;
  font-weight: 500;
  color: var(--on-variant);
  margin-left: 6px;
}
.face-panel .face-cat { font-size: 13px; color: var(--on-variant); margin-bottom: 14px; }
.module-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 11px; }
.module-table th {
  white-space: nowrap;
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-variant);
  padding: 8px 6px;
  border-bottom: 1px solid var(--outline);
}
.module-table td {
  padding: 8px 6px;
  border-bottom: 1px solid rgba(18, 60, 95, 0.08);
  vertical-align: top;
}
.module-table tr:hover td { background: rgba(2, 132, 168, 0.05); }
.module-table .mono { font-family: var(--mono); }
.module-table tfoot td {
  font-weight: 600;
  border-bottom: 0;
  border-top: 1px solid var(--outline);
  background: rgba(2, 132, 168, 0.06);
}
.module-table tfoot tr:hover td { background: rgba(2, 132, 168, 0.06); }
.pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--mono);
  background: rgba(18, 60, 95, 0.06);
}
.pill.completo { color: var(--heatmap-green); background: rgba(16,185,129,0.12); }
.pill.parcial { color: var(--heatmap-yellow); background: rgba(245,158,11,0.12); }

.viz-face-strip {
  margin-top: 14px;
  background: #f7fbfe;
  border-radius: 6px;
  padding: 12px;
  border: 1px solid var(--outline);
}
.viz-face-strip .caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-variant);
  margin-bottom: 8px;
}

/* Peças totalizador */
.pecas-resumo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.pecas-resumo-card { padding: 16px 18px; }
.pecas-resumo-card .value {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.02em;
}
.pecas-resumo-card .hint {
  margin-top: 4px;
  font-size: 12px;
  color: var(--on-variant);
}
.pecas-grupos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pecas-grupo { padding: 0; overflow: hidden; }
.pecas-grupo header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--outline);
}
.pecas-grupo header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.pecas-table-wrap { overflow: auto; }
.pecas-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pecas-table th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-variant);
  padding: 10px 12px;
  border-bottom: 1px solid var(--outline);
  background: #eef6fb;
  position: sticky;
  top: 0;
}
.pecas-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(18, 60, 95, 0.08);
  vertical-align: middle;
}
.pecas-table tr:hover td { background: rgba(2, 132, 168, 0.05); }
.pecas-table tr.zero td { opacity: 0.45; }
.pecas-table .mono { font-family: var(--mono); }
.pecas-table .qtd {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-bright);
}
.pecas-table .frase { color: var(--on-variant); }

@media (max-width: 1100px) {
  .pecas-grupos { grid-template-columns: 1fr; }
  .pecas-resumo { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pecas-resumo { grid-template-columns: 1fr; }
}

/* Help criteria modal */
.btn-help {
  all: unset;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--outline);
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-help:hover,
.btn-help:focus-visible {
  background: rgba(2, 132, 168, 0.12);
  border-color: rgba(2, 132, 168, 0.45);
  color: var(--primary-bright);
  outline: none;
}
.btn-help .material-symbols-outlined { font-size: 22px; font-variation-settings: "FILL" 0; }

.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 48, 71, 0.42);
  backdrop-filter: blur(4px);
}
.help-overlay[hidden] { display: none !important; }
.help-panel {
  width: min(720px, 100%);
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(18, 48, 71, 0.22);
}
.help-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--outline);
  background: #f7fbfe;
}
.help-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.help-head p { margin: 4px 0 0; font-size: 13px; color: var(--on-variant); }
.help-body {
  padding: 8px 22px 22px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.help-block {
  padding: 14px 0;
  border-bottom: 1px solid rgba(18, 60, 95, 0.08);
}
.help-block:last-child { border-bottom: 0; }
.help-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}
.help-block p,
.help-block li {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--on-surface);
}
.help-block ul {
  margin: 0;
  padding-left: 18px;
}
.help-note {
  margin-top: 10px !important;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(217, 119, 6, 0.08);
  border: 1px solid rgba(217, 119, 6, 0.22);
  color: var(--on-surface) !important;
  font-size: 12px !important;
}
.help-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 8px;
}
.help-swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-variant);
}
.help-swatch .sw {
  display: inline-block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
}
.help-swatch .sw.go { background: var(--go); }
.help-swatch .sw.br { background: var(--br); }
.help-swatch .sw.ba { background: var(--ba); }
.help-swatch .sw.bp { background: var(--bp); }
.help-swatch .sw.gp { background: var(--gp); }
.help-swatch .sw.gs { background: var(--gs); }
.help-swatch .sw.gb { background: var(--gb); }
.help-swatch .sw.gc { background: var(--gc); }
.help-swatch .sw.ec { background: var(--ec); }
.help-swatch .sw.ex { background: var(--ex); }
.help-swatch .sw.ic { background: var(--ic); }
.help-swatch .sw.mh { background: var(--mh); }

.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 6px;
}
.help-table th,
.help-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(18, 60, 95, 0.08);
  vertical-align: top;
}
.help-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-variant);
  background: #eef6fb;
}
.help-table td:first-child { white-space: nowrap; }

.help-mod-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}
.help-mod-sample {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.help-mod-sample .mod-cell {
  height: 36px;
  min-height: 36px;
  cursor: default;
}
.help-mod-sample .mod-cell:hover { filter: none; }
.help-resumo { background: rgba(2, 132, 168, 0.04); margin: 8px -10px 0; padding: 14px 10px !important; border-radius: 8px; border-bottom: 0 !important; }

body.help-open { overflow: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(18, 60, 95, 0.06); }
::-webkit-scrollbar-thumb { background: rgba(2, 132, 168, 0.28); border-radius: 4px; }

@media (max-width: 1100px) {
  .sidebar { display: none; }
  .board { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .floor-map {
    grid-template-columns: 1fr;
    grid-template-areas:
      "go"
      "gb"
      "br"
      "bp";
    min-height: 0;
  }
  .cat-list { max-height: 420px; }
}
@media (max-width: 640px) {
  .kpi-row { grid-template-columns: 1fr; }
  .content { padding: 16px; }
  .topbar { padding: 0 16px; height: auto; min-height: 64px; flex-wrap: wrap; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
}