/* =============================================================================
   style.css — PBC Inspec
   Paleta extraída da logo (laranja #F47216 + grafite #3A3A3A) + estilos do
   canvas de inspeção (tri-estado pendente/ok/anomalia) e da tela de login.
   ============================================================================= */

:root {
  /* Marca (laranja da logo) */
  --c-primary:      #F47216;
  --c-primary-600:  #E0640D;   /* hover */
  --c-primary-700:  #C4550A;   /* active */
  --c-primary-100:  #FDEAD9;   /* tint de superfície */
  --c-primary-050:  #FFF5EC;

  /* Tinta / neutros (grafite da logo) */
  --c-ink:    #3A3A3A;   /* títulos */
  --c-ink-900:#2A2A2A;
  --c-body:   #4A4D52;   /* texto corrido */
  --c-muted:  #80868B;   /* secundário */
  --c-line:   #E4E7EB;   /* bordas */
  --c-surface:#FFFFFF;
  --c-bg:     #F6F7F8;

  /* Estados de inspeção (semáforo) — distintos do laranja da marca */
  --c-pendente:    #F2B705;  --c-pendente-bg:#FFF7E0;  --c-pendente-ink:#7A5B00;
  --c-ok:          #1FA463;  --c-ok-bg:      #E6F6EE;
  --c-anomalia:    #E23B2E;  --c-anomalia-bg:#FCEBEA;

  --radius: 10px;
  --shadow-card: 0 4px 24px rgba(0,0,0,.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--c-bg); color: var(--c-ink); height: 100dvh;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---- Marca (helpers reutilizáveis) ---------------------------------------- */
.brand-symbol { height: 28px; width: auto; display: block; }
.brand-logo   { height: 44px; width: auto; display: block; }

/* =============================================================================
   Header da tela de inspeção — barra grafite com o símbolo da marca.
   ============================================================================= */
.inspec-header {
  flex-shrink: 0;
  padding: 8px 16px;
  background: var(--c-ink-900); color: #fff;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 3px solid var(--c-primary);   /* faixa de marca */
}
.inspec-header .brand-symbol { height: 26px; }
.inspec-header .titles { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.inspec-header .equip  { font-size: 15px; font-weight: 700; white-space: nowrap; }
.inspec-header .subsys { font-size: 13px; opacity: 0.82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Container do desenho — relativo, recorta o overflow do zoom/pan. */
.desenho-area {
  flex: 1; position: relative; overflow: hidden; background: #e8eaed;
  cursor: grab; touch-action: none;
}
.desenho-area.panning { cursor: grabbing; }
.desenho-area img {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  display: none; pointer-events: none;
}
.desenho-area img.is-current { display: block; }

/* Hotspot — círculo absoluto translúcido com transição suave. */
.hotspot {
  position: absolute; border-radius: 50%;
  background: #fff; border: 2px solid transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,.35); cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--c-ink);
  -webkit-tap-highlight-color: transparent;
}
/* Tri-estado de inspeção. */
.hotspot.is-pendente { background: var(--c-pendente-bg); border-color: var(--c-pendente); color: var(--c-pendente-ink); }
.hotspot.is-ok       { background: var(--c-ok);       border-color: #fff; color: #fff; }
.hotspot.is-anomalia { background: var(--c-anomalia); border-color: #fff; color: #fff; }
.hotspot:hover { box-shadow: 0 2px 10px rgba(0,0,0,.45); }

/* Micro-menu flutuante de inspeção (OK / Anomalia). */
.hotspot-menu {
  position: absolute; z-index: 120; transform: translate(-50%, -100%);
  background: #fff; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  padding: 6px; display: flex; gap: 6px; white-space: nowrap;
}
.hs-menu-btn {
  border: 1px solid var(--c-line); border-radius: 6px;
  background: #fff; color: var(--c-ink);
  padding: 8px 12px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .1s, border-color .1s;
}
.hs-menu-btn:hover { background: #f1f3f4; }
.hs-menu-btn.is-ok:hover       { background: var(--c-ok-bg);       border-color: var(--c-ok); }
.hs-menu-btn.is-anomalia:hover { background: var(--c-anomalia-bg); border-color: var(--c-anomalia); }

/* Badge de cluster. all-selected (todos ok) → verde; partial (misto/atenção) →
   âmbar; aberto → laranja da marca. */
.hs-cluster {
  position: absolute; z-index: 4; border-radius: 50%;
  background: #5f6368; color: #fff; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.hs-cluster.all-selected     { background: var(--c-ok); }
.hs-cluster.partial-selected { background: var(--c-pendente); }
.hs-cluster.is-open          { background: var(--c-primary); }

/* Hastes do fan-out (spider). */
.hs-spider-line {
  position: absolute; z-index: 3; height: 2px; background: rgba(42,42,42,.55);
  transform-origin: 0 50%; pointer-events: none;
}
.hs-spider-line.hs-anim { transition: width .18s ease-out; }
.hotspot.hs-fanned { z-index: 5; }
.hotspot.hs-anim { transition: left .18s ease-out, top .18s ease-out; }

/* Spotlight quando um cluster está aberto. */
.hotspot-backdrop {
  position: absolute; inset: 0; z-index: 2; background: rgba(0,0,0,.4);
  pointer-events: none; opacity: 0; transition: opacity .18s ease-out;
}
.desenho-area.cluster-open .hotspot-backdrop { opacity: 1; pointer-events: auto; }
.desenho-area.cluster-open .hotspot:not(.hs-fanned),
.desenho-area.cluster-open .hs-cluster:not(.is-open) { display: none; }

/* Tooltip do hover. */
.hotspot-tooltip {
  position: absolute; z-index: 100;
  background: rgba(42,42,42,.92); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.35;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .08s;
  transform: translateX(-50%) translateY(-100%);
  max-width: 320px; overflow: hidden; text-overflow: ellipsis;
}
.hotspot-tooltip.visible { opacity: 1; }

/* =============================================================================
   Home — saudação pós-login.
   ============================================================================= */
.inspec-header .header-logout {
  margin-left: auto; color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; opacity: .85;
  padding: 6px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px;
  transition: opacity .12s, background .12s;
}
.inspec-header .header-logout:hover { opacity: 1; background: rgba(255,255,255,.12); }

.home-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow: auto;
  background-image: radial-gradient(900px 360px at 50% -10%, var(--c-primary-050), transparent 70%);
}
.home-card {
  width: 100%; max-width: 520px; background: var(--c-surface);
  padding: 32px 30px; border-radius: 14px; box-shadow: var(--shadow-card);
  border: 1px solid var(--c-line);
}
.home-card h1 { font-size: 1.5rem; color: var(--c-ink); }
.home-card .sub { color: var(--c-muted); font-size: .9rem; margin: 6px 0 18px; }
.home-card .role-tag {
  display: inline-block; background: var(--c-primary-100); color: var(--c-primary-700);
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
}
.home-card .home-note { color: var(--c-body); line-height: 1.5; font-size: .95rem; }

/* =============================================================================
   Login — card centralizado com a logo da marca.
   ============================================================================= */
.login-wrap {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: var(--c-bg);
  background-image: radial-gradient(900px 360px at 50% -10%, var(--c-primary-050), transparent 70%);
  padding: 24px;
}
.login-card {
  width: 100%; max-width: 360px; background: var(--c-surface);
  padding: 30px 28px; border-radius: 14px; box-shadow: var(--shadow-card);
  border: 1px solid var(--c-line);
}
.login-card .brand-logo { height: 46px; margin: 0 auto 6px; }
.login-card .sub { text-align: center; color: var(--c-muted); font-size: .9rem; margin-bottom: 20px; }
.login-card label { display: block; font-size: .85rem; color: var(--c-body); margin: 12px 0 4px; }
.login-card input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--c-line);
  border-radius: 8px; font-size: 1rem; box-sizing: border-box; color: var(--c-ink);
  transition: border-color .12s, box-shadow .12s;
}
.login-card input:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}
.login-card button {
  width: 100%; margin-top: 22px; padding: 12px; border: 0; border-radius: 8px;
  background: var(--c-primary); color: #fff; font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: background .12s;
}
.login-card button:hover  { background: var(--c-primary-600); }
.login-card button:active { background: var(--c-primary-700); }
.login-err {
  margin-top: 14px; padding: 10px 12px; background: var(--c-anomalia-bg);
  color: #b42318; border-radius: 8px; font-size: .85rem;
}

/* =============================================================================
   === Admin === — telas de empresas/usuários (listas + formulários).
   ============================================================================= */

/* Navegação admin no header grafite. A nav fica empurrada para a direita; o
   logout (que também usa margin-left:auto) passa a só ter um respiro lateral. */
.admin-nav { margin-left: auto; display: flex; gap: 4px; }
.admin-nav a {
  color: #fff; opacity: .85; text-decoration: none;
  font-size: 13px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
  transition: opacity .12s, background .12s;
}
.admin-nav a:hover,
.admin-nav a.is-active { opacity: 1; background: rgba(255,255,255,.12); }
.inspec-header .admin-nav ~ .header-logout { margin-left: 16px; }

/* Área rolável (o body é flex column com overflow:hidden). */
.admin-wrap {
  flex: 1; overflow: auto; padding: 24px;
  max-width: 1000px; margin: 0 auto; width: 100%;
}

.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.admin-topbar h1 { font-size: 1.4rem; color: var(--c-ink); }

/* Botões. */
.admin-btn {
  background: var(--c-primary); color: #fff;
  padding: 10px 16px; border-radius: 8px; border: 0;
  font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-block; font-size: .92rem; font-family: inherit;
  transition: background .12s;
}
.admin-btn:hover { background: var(--c-primary-600); }
.admin-btn-ghost {
  background: transparent; border: 1px solid var(--c-line);
  color: var(--c-body); padding: 10px 16px; border-radius: 8px;
  font-weight: 700; cursor: pointer; text-decoration: none;
  display: inline-block; font-size: .92rem; font-family: inherit;
  transition: background .12s;
}
.admin-btn-ghost:hover { background: #f1f3f4; }

/* Busca. */
.admin-search { display: flex; gap: 8px; margin-bottom: 16px; }
.admin-search input {
  flex: 1; padding: 10px 12px; border: 1px solid var(--c-line);
  border-radius: 8px; font-size: 1rem; color: var(--c-ink);
  box-sizing: border-box; transition: border-color .12s, box-shadow .12s;
}
.admin-search input:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}

/* Tabela. */
.admin-table {
  width: 100%; border-collapse: collapse;
  background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden;
}
.admin-table th {
  text-align: left; padding: 10px 12px; background: #fafbfc;
  color: var(--c-muted); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--c-line);
}
.admin-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--c-line);
  color: var(--c-ink); font-size: .92rem;
}
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr:hover { background: var(--c-primary-050); }

/* Badges de status. */
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700;
}
.badge-on  { background: var(--c-ok-bg); color: #1b7a4b; }
.badge-off { background: #eceff1; color: var(--c-muted); }

/* Tag de papel (reaproveita o visual do role-tag da home). */
.admin-table .role-tag {
  display: inline-block; background: var(--c-primary-100); color: var(--c-primary-700);
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: 2px 8px; border-radius: 999px;
}

/* Formulário. */
.admin-form {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); padding: 24px; max-width: 560px;
  box-shadow: var(--shadow-card);
}
.admin-form label {
  display: block; font-size: .85rem; color: var(--c-body); margin: 14px 0 4px;
}
.admin-form input,
.admin-form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--c-line);
  border-radius: 8px; font-size: 1rem; color: var(--c-ink);
  box-sizing: border-box; font-family: inherit;
  transition: border-color .12s, box-shadow .12s;
}
.admin-form input:focus,
.admin-form select:focus {
  outline: none; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}
.field-hint { font-size: .78rem; color: var(--c-muted); margin-top: 4px; }
.admin-check {
  display: flex; align-items: center; gap: 8px; margin-top: 14px;
}
.admin-check input { width: auto; }
.admin-check label { margin: 0; }
.admin-actions { display: flex; gap: 10px; margin-top: 22px; }

/* Bloco de erros. */
.admin-errors {
  background: var(--c-anomalia-bg); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 16px;
  color: #b42318; font-size: .88rem;
}
.admin-errors ul { margin-left: 18px; }

/* Estado vazio. */
.admin-empty {
  text-align: center; color: var(--c-muted);
  padding: 28px; font-size: .92rem;
}

/* Atalhos na home (admin). */
.home-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Responsivo. */
@media (max-width: 600px) {
  .admin-wrap { padding: 16px; }
  .admin-topbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .admin-table { font-size: .85rem; }
}

/* =============================================================================
   Wizard de criação de plano de manutenção (3 etapas).
   ============================================================================= */
.wiz-topbar {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 24px; background: #fff; border-bottom: 1px solid var(--c-line);
}
.wiz-steps {
  list-style: none; display: flex; gap: 8px; margin: 0; padding: 0;
  font-size: .82rem; color: var(--c-muted);
}
/* Ações do wizard (Voltar/Avançar/Criar) à direita das etapas. */
.wiz-actions { display: flex; }
.wiz-actions-group { display: flex; gap: 10px; }
.wiz-step { padding: 4px 12px; border-radius: 999px; background: #f1f3f4; font-weight: 600; }
.wiz-step.active { background: var(--c-primary); color: #fff; }
.wiz-step.done   { background: var(--c-ok-bg); color: #1b7a4b; }

/* Etapas 1 e 2 rolam internamente (o body é flex column overflow:hidden). */
.wiz-panel { flex: 1; overflow: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
/* Etapa 3 ocupa a tela inteira; o canvas preenche o espaço. */
.wiz-panel-full { overflow: hidden; gap: 10px; }

.wiz-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wiz-fields  { display: flex; gap: 12px; flex-wrap: wrap; }
/* Etapa 2: linha do topo com Equipamento (desabilitado) + Nome do plano. */
.wiz-fields-top { gap: 16px; }
/* Afasta a busca dos campos do topo. */
.wiz-fields-top + .wiz-toolbar { margin-top: 14px; }
/* A busca da etapa 2 alinha com o grid de subsistemas: ocupa 2 colunas (= 2
   cards) e o contador segue ao lado. */
#step2 .wiz-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  align-items: center;
}
#step2 #sub-search { grid-column: span 2; width: 100%; min-width: 0; }
#step2 #sub-count { grid-column: span 2; }
.wiz-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 220px; }
.wiz-field .wiz-input { width: 100%; flex: none; min-width: 0; }
.wiz-label { font-size: .78rem; font-weight: 600; color: var(--c-muted); }
.wiz-input:disabled { background: #f1f3f4; color: var(--c-ink); cursor: not-allowed; }
.wiz-input, .wiz-select, .wiz-search {
  padding: 9px 12px; border: 1px solid var(--c-line); border-radius: 8px;
  font-size: .92rem; background: #fff; color: var(--c-ink);
}
.wiz-input { flex: 1; min-width: 220px; }
.wiz-input-sm { flex: 0 0 220px; min-width: 160px; }
.wiz-search { flex: 1; min-width: 220px; }
.wiz-select { min-width: 200px; }
.wiz-input:focus, .wiz-select:focus, .wiz-search:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-100);
}
/* Campo obrigatório não preenchido (ex.: nome do plano ao tentar avançar). */
.wiz-input.field-invalid {
  border-color: var(--c-anomalia);
  box-shadow: 0 0 0 3px var(--c-anomalia-bg);
  animation: wiz-shake .3s;
}
.wiz-input.field-invalid:focus { box-shadow: 0 0 0 3px var(--c-anomalia-bg); }
@keyframes wiz-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.wiz-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; flex-shrink: 0; }
.wiz-loading, .wiz-error { color: var(--c-muted); font-size: .9rem; padding: 24px; text-align: center; }
.wiz-error { color: var(--c-anomalia); }

/* ---- Etapa 1: grid de equipamentos (5 colunas) ---- */
.eq-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.eq-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--c-line); border-radius: 12px; padding: 12px;
  cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.eq-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--c-primary); }
.eq-card-photo { width: 100%; height: 140px; object-fit: contain; border-radius: 8px; background: #fff; }
.eq-card-photo-missing {
  width: 100%; height: 140px; border-radius: 8px; background: #f1f3f4;
  display: flex; align-items: center; justify-content: center; color: var(--c-muted); font-size: .8rem;
}
.eq-card-title { font-size: .92rem; font-weight: 700; color: var(--c-ink); margin-top: 8px; }
.eq-card-muted { font-size: .78rem; color: var(--c-muted); margin-top: 2px; }

/* ---- Etapa 2: grid de subsistemas (seleção múltipla) ---- */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.sub-card {
  position: relative; background: #fff; border: 2px solid var(--c-line);
  border-radius: 12px; cursor: pointer; overflow: hidden;
  transition: transform .1s, box-shadow .15s, border-color .15s;
}
.sub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.sub-card.selected { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-100); }
.sub-card-img { width: 100%; height: 130px; display: flex; align-items: center; justify-content: center; background: #fff; }
.sub-card-img img { width: 100%; height: 100%; object-fit: contain; }
.sub-card-footer { padding: 10px 12px; font-size: .88rem; font-weight: 600; color: var(--c-ink); border-top: 1px solid var(--c-line); }
.sub-card-check {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--c-primary); color: #fff; display: none; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.sub-card.selected .sub-card-check { display: flex; }

/* ---- Etapa 3: duas colunas — desenho (esq.) + painel (dir.) ---- */
.step3-cols { flex-direction: row; gap: 0; padding: 0; align-items: stretch; }
.step3-canvas { flex: 1; min-width: 0; display: flex; padding: 14px 0 14px 14px; }
.step3-stage { flex: 1; position: relative; display: flex; min-height: 0; }

.step3-side {
  flex: 0 0 280px; display: flex; flex-direction: column;
  border-left: 1px solid var(--c-line); padding: 18px 20px; gap: 14px;
  background: #fafafa; overflow: auto;
}
.step3-side-top { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.step3-title { font-size: 1.15rem; color: var(--c-ink); }
.step3-help { margin: 0; }
.step3-side .wiz-nav { padding-top: 0; }

/* Contador universal: total de itens marcados no plano inteiro (subtítulo). */
.step3-total {
  display: flex; flex-direction: column; gap: 2px; margin-top: 8px;
  padding: 12px 14px; background: #fff; border: 1px solid var(--c-line); border-radius: 10px;
}
.step3-total-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); font-weight: 600; }
.step3-total-value { font-size: 1.25rem; color: var(--c-primary); }

/* X vermelho para excluir o subsistema, no canto superior direito do desenho. */
.canvas-close {
  position: absolute; top: 12px; right: 12px; z-index: 35;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-anomalia, #d93025); color: #fff;
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: background .15s, transform .1s;
}
.canvas-close:hover { background: #b3261e; transform: scale(1.06); }

/* Setas laterais de navegação entre subsistemas (portado de desenho.eta). */
.page-nav-side {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 30;
  background: rgba(32,33,36,.65); color: #fff; border: 0; border-radius: 50%;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 24px; line-height: 1; transition: background .15s;
}
.page-nav-side.prev { left: 12px; }
.page-nav-side.next { right: 12px; }
.page-nav-side:hover { background: rgba(32,33,36,.85); }
.page-nav-side:disabled { opacity: .35; cursor: default; }
.page-counter {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
  padding: 4px 12px; background: rgba(32,33,36,.65); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

/* Abas de vista (multi-view), portadas de desenho.eta. */
.view-tabs {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; gap: 4px; padding: 4px; background: rgba(32,33,36,.65); border-radius: 999px;
}
.view-tabs button {
  background: transparent; color: #fff; border: 0; border-radius: 999px;
  padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s;
}
.view-tabs button:hover { background: rgba(255,255,255,.12); }
.view-tabs button.active { background: #fff; color: var(--c-primary); }
.view-counter {
  position: absolute; bottom: 12px; right: 12px; z-index: 30;
  padding: 4px 12px; background: rgba(32,33,36,.65); color: #fff; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

/* Estado de hotspot no wizard: marcado (verde) x candidato (neutro). */
.hotspot.is-marcado  { background: var(--c-ok); border-color: #fff; color: #fff; }
.hotspot.is-pendente { background: #fff; border-color: var(--c-muted); color: var(--c-ink); }

@media (max-width: 1100px) { .eq-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 820px)  { .eq-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .eq-grid { grid-template-columns: repeat(2, 1fr); } }

/* Detalhe do plano: subsistema como subtítulo + lista de peças (tabela sem header). */
.plan-sub-title { font-size: 1.05rem; color: var(--c-ink); margin: 22px 0 8px; }
.plan-parts-table { margin: 0; }