:root {
  /* Cores Zona Sul */
  --primary: #ed1c24;
  --black: #333132;
  --gray: #939598;
  --light-gray: #2a2a2a;
  --white: #ffffff;

  --text-dark: #e8e8e8;
  --text-light: #888;
  --border: #2e2e2e;

  /* Dark bg */
  --bg-page: #0a0a0a;
  --bg-header: #111111;
  --bg-node: #181818;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg-page);
  color: var(--text-dark);
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

/* Header */
.header {
  background: var(--bg-header);
  border-bottom: 2px solid var(--primary);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 100px;
}

.header-center {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.header-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.5px;
}

.header-subtitle {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.header-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input {
  padding: 8px 14px;
  border: 1px solid #333;
  border-radius: 999px;
  font-size: 14px;
  min-width: 200px;
  background: #1a1a1a;
  color: #e8e8e8;
}

.search-input::placeholder {
  color: #555;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(237, 28, 36, 0.2);
}

/* ─── Barra de navegação principal (sempre visível) ────────────────────── */
.main-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
}

.main-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: #999;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease, border-color 150ms ease;
}

.main-tab:hover {
  color: #ddd;
}

.main-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.control-btn {
  padding: 8px 18px;
  background: #1a1a1a;
  border: 1.5px solid #333;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 200ms ease;
  color: #ccc;
}

.control-btn:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(237, 28, 36, 0.25);
}

.control-btn.active {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(237, 28, 36, 0.35);
  border-width: 2px;
}

/* Map Container */
.map-container {
  flex: 1;
  overflow: auto;
  background: var(--bg-page);
  position: relative;
}

.tree-svg {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  z-index: 1;
}

/* ─── Efeitos de fundo (estilo circuito/tech) ───────────────────────── */

.bg-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Composição única desta missão ("melhorar somente o fundo do mapa"):
   aurora suave (3 manchas de cor, azul/ciano/dourado) + campo de pontos —
   substitui a grade de linhas anterior. Inspirado no conceito Aurora/Glow
   comum em bibliotecas tipo Lightswind (pasta de referência não estava
   presente no disco desta máquina — adaptado por conhecimento geral do
   padrão, 100% CSS puro, sem canvas/WebGL/dependência). Move bem devagar
   (34s/26s), fica atrás de cartões/linhas (z-index 0), grafite/azul/
   ciano/dourado — sem verde, sem neon. Reage suave quando uma família
   está aberta: o brilho converge pro centro (ver .familia-aberta abaixo,
   classe alternada pelo tree-map.js). */
.bg-aurora {
  background:
    radial-gradient(38% 32% at 22% 20%, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(34% 30% at 78% 25%, rgba(90, 200, 220, 0.13), transparent 70%),
    radial-gradient(40% 34% at 50% 85%, rgba(242, 182, 50, 0.10), transparent 70%);
  background-size: 160% 160%;
  animation: aurora-drift 34s ease-in-out infinite;
  transition: background 900ms ease;
}

@keyframes aurora-drift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; opacity: 0.75; }
  50%  { background-position: 12% 10%, 85% 15%, 45% 90%; opacity: 1; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%; opacity: 0.75; }
}

.bg-dots {
  background-image: radial-gradient(rgba(120, 190, 220, 0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.55;
  animation: dots-drift 26s linear infinite;
}

@keyframes dots-drift {
  from { background-position: 0 0; }
  to { background-position: 34px 34px; }
}

/* Quando uma família está aberta, o brilho converge pro centro (onde o
   núcleo e a família ativa ficam) em vez de espalhado nos 3 cantos —
   reforça o foco sem aumentar velocidade nem piscar. */
.map-container.familia-aberta .bg-aurora {
  animation-duration: 20s;
  background:
    radial-gradient(38% 32% at 22% 20%, rgba(59, 130, 246, 0.16), transparent 70%),
    radial-gradient(34% 30% at 78% 25%, rgba(90, 200, 220, 0.13), transparent 70%),
    radial-gradient(46% 40% at 50% 55%, rgba(242, 182, 50, 0.22), transparent 70%);
}

.bg-vignette {
  background: radial-gradient(120% 100% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.65) 100%);
}

/* ─── Legenda ────────────────────────────────────────────────────────── */

.map-legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(12px);
}

.map-legend-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #888;
  margin-bottom: 8px;
}

.map-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #e8e8e8;
  margin-top: 6px;
}

.map-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dot-root { background: var(--primary); }
.dot-category { background: #e8905a; }
.dot-product { background: #4fd17a; }

/* ─── Nodes ─────────────────────────────────────────────── */

.node {
  cursor: pointer;
}

.node rect.node-card {
  fill: var(--bg-node);
  stroke: #2e2e2e;
  stroke-width: 1.5;
  transition: stroke 150ms ease, filter 150ms ease;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6));
}

.node:hover rect.node-card {
  stroke: var(--primary);
  filter: drop-shadow(0 4px 14px rgba(237, 28, 36, 0.3));
}

/* Halo tracejado atrás do card — efeito placa de circuito */
.node rect.node-halo {
  fill: none;
  stroke: rgba(237, 28, 36, 0.35);
  stroke-width: 1;
  stroke-dasharray: 2 6;
}

/* Barra de destaque lateral esquerda */
.node rect.node-accent {
  fill: var(--primary);
}
.node.category rect.node-accent { fill: #e8905a; }
.node.channel rect.node-accent { fill: #6b8fd6; }
.node.product rect.node-accent { fill: #666; }
.node.info rect.node-accent,
.node.info-detail rect.node-accent { fill: #3a5a9a; }

/* Porta de conexão (bolinha no topo do nó) */
.node circle.node-port {
  fill: #ffffff;
  opacity: 0.95;
}

.node text {
  pointer-events: none;
  text-anchor: middle;
}

/* Produto com miniatura: título/info começam DEPOIS da foto (text-anchor
   start via .attr() no JS), não centralizados no card inteiro — senão o
   texto centraliza por cima da foto/placeholder. O texto-anchor:start
   inline (atributo de apresentação SVG) perde pra ".node text" acima
   (CSS de autor sempre vence atributo de apresentação, não importa a
   especificidade), por isso precisa de uma regra CSS explícita aqui. */
.node text.node-product-title,
.node text.node-product-info {
  text-anchor: start;
}

.node-title {
  font-size: 13px;
  font-weight: 700;
  fill: #ddd;
}

.node-icon {
  font-size: 16px;
  text-anchor: start;
}

.node-info {
  font-size: 10.5px;
  font-weight: 500;
  fill: #777;
}

.node-info-detail-line {
  font-size: 13px;
  font-weight: 500;
  fill: #b8d4f0;
}

.node-status {
  font-size: 9.5px;
  font-weight: 600;
  fill: #555;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ─── Node por tipo ─────────────────────────────────────── */

/* Root — vermelho Zona Sul */
.node.root rect.node-card {
  fill: var(--primary);
  stroke: #c0141b;
  filter: drop-shadow(0 4px 16px rgba(237, 28, 36, 0.5)) url(#wireGlow);
}
.node.root rect.node-halo {
  stroke: rgba(237, 28, 36, 0.6);
}
.node.root .node-title {
  fill: var(--white);
  font-size: 16px;
  font-weight: 800;
}
.node.root rect.node-card { rx: 18; ry: 18; }

/* Botão fixo "voltar ao mapa geral" — sempre visível, nunca depende de
   fechar família por família. */
.map-voltar-geral {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 9px 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(10px);
  color: #e8e8e8;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.map-voltar-geral:hover {
  border-color: var(--primary);
  background: rgba(237, 28, 36, 0.12);
}

/* Root-child ("TÍTULOS DO MAPA") — na central inteligente ele nunca aparece
   como cartão próprio: fica sempre expandido e coincide com a posição do
   núcleo (ver tree-map.js _applyHubLayout), só serve de ponto estrutural de
   onde os fios das famílias saem. */
.node.root-child {
  display: none;
}

/* Category (família) — tom âmbar escuro, cartão arredondado, módulo técnico */
.node.category rect.node-card {
  fill: #141008;
  stroke: #b07828;
  rx: 14;
  ry: 14;
}
.node.category .node-title {
  fill: #e8c070;
}

/* Enquanto uma família está aberta, as demais (fechadas) recuam visualmente
   — sem se mover, só com ênfase reduzida (opacidade). Nunca somem de vez. */
.node.category.dimmed {
  opacity: 0.38;
}
.node.category.dimmed:hover {
  opacity: 0.6;
}

/* Channel — azul escuro */
.node.channel rect.node-card {
  fill: #08080f;
  stroke: #3a5a9a;
}
.node.channel .node-title {
  fill: #8aacdf;
}

/* Product — neutro por padrão (sem modalidade confirmada); cor real vem só
   de .node.modalidade-loja/.modalidade-viagem quando há vínculo confirmado. */
.node.product rect.node-card {
  fill: #101010;
  stroke: #444;
}
.node.product .node-title {
  fill: #999;
}

.node.product .node-product-title {
  fill: #f2f2f2;
  font-size: 10.8px;
  font-weight: 800;
  letter-spacing: -0.1px;
  dominant-baseline: alphabetic;
}

.node.product .node-product-info {
  fill: #9a9a9a;
  font-size: 9.2px;
  font-weight: 600;
  dominant-baseline: alphabetic;
}

.node.product .node-product-thumb {
  fill: #141414;
  stroke: #353535;
  stroke-width: 1;
}

.node.product .node-product-thumb.has-thumb {
  fill: #111;
  stroke: rgba(255, 255, 255, 0.18);
}

.node.product .node-product-thumb-image {
  pointer-events: none;
}

.node.product .node-product-thumb.is-placeholder {
  fill: #121212;
  stroke: #343434;
}

.node.product .node-product-thumb-placeholder-icon {
  fill: rgba(255, 255, 255, 0.08);
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  pointer-events: none;
}

.node.product .node-product-thumb-placeholder-dot {
  fill: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}

/* Info */
.node.info rect.node-card {
  fill: #121212;
  stroke: #3a3a3a;
}

/* Info-detail — ficha técnica */
.node.info-detail rect.node-card {
  fill: #0c0f18;
  stroke: #2a5090;
  stroke-dasharray: 4,3;
}
.node.info-detail .node-title {
  font-size: 13px;
  font-weight: 800;
  fill: var(--primary);
  letter-spacing: 0.5px;
}

/* ─── Estado expandido / selecionado ────────────────────── */

.node.expanded rect.node-card {
  stroke-width: 2;
}

.node.selected rect.node-card {
  stroke: var(--primary);
  stroke-width: 2.5;
  filter: drop-shadow(0 4px 14px rgba(237, 28, 36, 0.4)) url(#wireGlow);
}
.node.selected rect.node-halo {
  stroke: rgba(237, 28, 36, 0.7);
}

.node.disabled {
  cursor: not-allowed;
}

.node.disabled rect.node-card {
  opacity: 0.35;
  fill: #111;
  filter: none;
}
.node.disabled rect.node-halo {
  opacity: 0.15;
}

/* ─── Links — "fio elétrico" ────────────────────────────── */

/* Camada externa: cabo/jaqueta escura mais grossa */
.link {
  fill: none;
}

.link-outer {
  fill: none;
  stroke: #ffffff;
  stroke-opacity: 0.85;
  stroke-width: 5px;
  stroke-linecap: round;
}

.link-inner {
  fill: none;
  stroke: url(#wireGradient);
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-dasharray: 6 7;
  opacity: 0.85;
  animation: link-flow 1.4s linear infinite;
}

@keyframes link-flow {
  to { stroke-dashoffset: -26; }
}

/* Ponto conector no terminal do fio */
.link-dot {
  fill: #ffffff;
  opacity: 0.95;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.7));
}

/* ─── Botão de expansão (badge lateral, estilo referência) ─── */

.expand-btn-circle {
  fill: transparent;
  stroke: var(--primary);
  stroke-width: 1.4;
  cursor: pointer;
  transition: all 150ms ease;
}

.expand-btn-circle.is-open {
  fill: var(--primary);
  filter: drop-shadow(0 2px 6px rgba(237, 28, 36, 0.4));
}

.expand-btn-circle:hover {
  filter: drop-shadow(0 0 8px rgba(237, 28, 36, 0.6));
}

.expand-btn {
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  text-anchor: middle;
  fill: var(--primary);
  pointer-events: none;
}

.expand-btn.is-open {
  fill: var(--white);
}

/* ─── Overview ──────────────────────────────────────────── */

.overview-container {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: #111;
  color: #e8e8e8;
}

/* Barra de filtros executivos globais (Passo 09) — NUNCA usa .overview-container:
   ela é um card compacto fora do fluxo de abas de tela cheia, então nunca pode
   herdar flex:1 (isso fazia sobrar uma área preta vazia enorme, presa na
   rolagem, nas abas Perdas e Economia/Operação). Altura só o necessário pro
   conteúdo real dos filtros; a página principal continua sendo a única a
   rolar (ver .overview-container acima, que continua com overflow:auto só
   pras telas de conteúdo de verdade). */
.filtros-bar {
  flex: none;
  padding: 12px 24px;
  background: #111;
  color: #e8e8e8;
  border-bottom: 1px solid #2a2a2a;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--primary);
}

.overview-header h2 {
  font-size: 20px;
  color: var(--primary);
}

.back-btn {
  padding: 8px 16px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #ccc;
  transition: all 150ms ease;
}

.back-btn:hover {
  background: var(--primary);
  color: var(--white);
  border-color: var(--primary);
}

/* ─── Catálogo completo ─────────────────────────────────── */
.catalogo-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.catalogo-toolbar .search-input {
  flex: 1;
  max-width: 320px;
}
.catalogo-toolbar select {
  padding: 8px 12px;
  border: 1px solid #333;
  border-radius: 6px;
  background: #1a1a1a;
  color: #e8e8e8;
  font-size: 13px;
}
.catalogo-detalhe-btn {
  padding: 4px 10px;
  background: transparent;
  border: 1px solid #444;
  border-radius: 4px;
  color: #ccc;
  cursor: pointer;
  font-size: 12px;
}
.catalogo-detalhe-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ─── Estado vazio (Resultados/Fontes sem dado) ─────────────────────────── */
.estado-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 80px 24px;
  color: #999;
  font-size: 15px;
}
.btn-primario {
  padding: 10px 22px;
  background: var(--primary);
  color: var(--white);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.btn-primario:hover {
  filter: brightness(1.1);
}

/* ─── Resultados ─────────────────────────────────────────────────────── */
/* Início — "O que precisa de atenção": cards curtos de decisão, e detalhes
   técnicos (conciliação/pendências/resumos) recolhidos por padrão — a
   resposta principal aparece antes do clique, o resto fica a 1 clique. */
.inicio-secao-titulo {
  margin: 4px 0 12px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #ef4444;
  border-bottom: 1px solid #222;
  padding-bottom: 6px;
}
.inicio-alertas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.inicio-alerta-card {
  background: #141414;
  border: 1px solid #262626;
  border-left: 3px solid #888;
  border-radius: 6px;
  padding: 10px 12px;
}
.inicio-alerta-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.inicio-alerta-produto { font-size: 12px; color: #eee; font-weight: 600; }
.inicio-alerta-situacao { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.inicio-alerta-valor { font-size: 13px; color: #ccc; margin-bottom: 8px; }
.inicio-alerta-btn { font-size: 11px; }
.inicio-alerta-vazio { font-size: 12px; color: #777; margin-bottom: 20px; }

.inicio-detalhes-tecnicos { margin-bottom: 20px; }
.inicio-detalhes-tecnicos summary {
  cursor: pointer;
  font-size: 12px;
  color: #999;
  padding: 8px 0;
  border-bottom: 1px solid #222;
  margin-bottom: 12px;
}
.inicio-detalhes-tecnicos summary:hover { color: #fff; }

@media (max-width: 700px) {
  .inicio-alertas-grid { grid-template-columns: 1fr; }
}

.resultados-resumo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.resultados-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #161616;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 14px 20px;
  min-width: 180px;
}
.resultados-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
}
.resultados-valor {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary);
}
.grafico-selo {
  font-size: 11px;
  color: #777;
  margin: 4px 0 10px;
}
.overview-container h3 {
  margin: 24px 0 10px;
  font-size: 15px;
  color: #ddd;
}
.catalogo-contagem {
  font-size: 13px;
  color: #999;
}
.catalogo-table-scroll {
  overflow: auto;
  max-height: calc(100vh - 180px);
  border: 1px solid #2e2e2e;
  border-radius: 6px;
}
.catalogo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.catalogo-table thead th {
  position: sticky;
  top: 0;
  background: #1a1a1a;
  color: var(--primary);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--primary);
  z-index: 1;
}
.catalogo-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #222;
  color: #ddd;
}
.catalogo-table tbody tr:hover {
  background: #191919;
}
.catalogo-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  background: #262626;
  color: #aaa;
}
.catalogo-row.tipo-produto-final .catalogo-tag { background: rgba(34,197,94,0.15); color: #22c55e; }
.catalogo-row.tipo-insumo .catalogo-tag { background: rgba(58,90,154,0.2); color: #8aacdf; }
.catalogo-row.tipo-embalagem .catalogo-tag { background: rgba(176,120,40,0.2); color: #e8c070; }
.catalogo-row.tipo-receita-livre .catalogo-tag { background: rgba(176,120,40,0.2); color: #e8c070; }
.catalogo-row.tipo-outro .catalogo-tag { background: rgba(120,120,120,0.2); color: #999; }
.catalogo-row.tipo-em-validacao .catalogo-tag { background: rgba(234,179,8,0.15); color: #eab308; font-style: italic; }

.catalogo-paginacao {
  margin-top: 12px;
  text-align: center;
}

/* ─── Painel de produto: abas ────────────────────────────────────────── */
.product-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.product-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: #999;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.product-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.product-evidencia-foto {
  max-width: 160px;
  border-radius: 6px;
  margin: 6px 6px 0 0;
}

/* ─── Gráfico venda/perda ────────────────────────────────────────────── */
.grafico-legenda {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #ccc;
  margin-bottom: 8px;
}
.legenda-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
}

/* ─── Perdas e Economia / Operação ───────────────────────────────────── */
.perdas-aviso-exemplo {
  background: rgba(234,179,8,0.1);
  border: 1px solid #eab308;
  color: #eab308;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 16px;
}
.perda-form .form-grid, .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.perda-form .form-field label, .form-field label {
  display: block;
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}
.perda-form input, .perda-form select, .perda-form textarea,
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 8px 10px;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 6px;
  color: #e8e8e8;
  font-size: 13px;
}

/* ─── Importar dados (aba interna) ───────────────────────────────────── */
.importar-etapa {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #222;
}
.importar-etapa h3 {
  color: var(--primary);
  font-size: 15px;
  margin-bottom: 10px;
}
.dropzone-escura {
  border: 2px dashed #444;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  color: #999;
  cursor: pointer;
  background: #161616;
  transition: border-color 150ms ease;
}
.dropzone-escura:hover, .dropzone-escura.dragover {
  border-color: var(--primary);
  color: #ddd;
}

/* Melhoria visual da aba "Importar dados" — cabeçalho + pills de período +
   grade de cards por categoria de dado. Identidade Zona Sul: preto/grafite,
   vermelho pra destaque/ação, branco quente pra leitura, âmbar só alerta,
   verde só confirmação. */
.importar-cabecalho { margin-bottom: 14px; }
.importar-cabecalho h2 { margin: 0 0 4px; font-size: 20px; letter-spacing: 0.03em; color: #fff2f2; }
.importar-cabecalho p { margin: 0; font-size: 13px; color: #aaa; }

.importar-periodo-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 20px;
}
.importar-periodo-label { font-size: 12px; color: #888; margin-right: 2px; }
.importar-periodo-pill {
  border: 1px solid #333;
  background: #161616;
  color: #ccc;
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
.importar-periodo-pill:hover { border-color: #ef4444; color: #fff; }
.importar-periodo-pill.selecionado { border-color: #ef4444; background: rgba(239, 68, 68, 0.12); color: #fff; }

.importar-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.importar-card {
  display: flex;
  flex-direction: column;
  background: #121212;
  border: 1px solid #262626;
  border-left: 3px solid #ef4444;
  border-radius: 8px;
  padding: 14px;
  transition: border-color 150ms ease, transform 150ms ease;
}
.importar-card:hover { border-color: #3a3a3a; border-left-color: #ff5252; }
.importar-card h4 { margin: 0 0 6px; font-size: 14px; color: #fff2f2; }
.importar-card-desc { margin: 0 0 8px; font-size: 12px; color: #aaa; line-height: 1.4; }
.importar-card-privacidade { margin: 0 0 8px; font-size: 11px; color: #eab308; }
.importar-card-campos-label { margin: 0 0 4px; font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: 0.04em; }
.importar-card-campos { margin: 0 0 10px; padding-left: 16px; font-size: 12px; color: #ccc; }
.importar-card-campos li { margin-bottom: 2px; }

.importar-card-dropzone {
  border: 2px dashed #3a3a3a;
  border-radius: 6px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  background: #0d0d0d;
  transition: border-color 150ms ease, background 150ms ease;
  margin-top: auto;
}
.importar-card-dropzone:hover, .importar-card-dropzone:focus-visible, .importar-card-dropzone.dragover {
  border-color: #ef4444;
  background: #171010;
}
.importar-card-dropzone-texto { display: block; font-size: 12px; color: #ddd; margin-bottom: 4px; }
.importar-card-compat { display: block; font-size: 10px; color: #777; }

.importar-card-status {
  margin: 8px 0 0;
  font-size: 11px;
  color: #888;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.importar-card-status.status-validando { color: #eab308; }
.importar-card-status.status-pronto { color: #22c55e; }
.importar-card-status.status-erro { color: #ef4444; }

.importar-complementares { margin-bottom: 20px; }
.importar-complementares summary {
  cursor: pointer;
  font-size: 13px;
  color: #ccc;
  padding: 8px 0;
  border-bottom: 1px solid #222;
  margin-bottom: 12px;
}
.importar-complementares summary:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .importar-card, .importar-card-dropzone, .importar-periodo-pill { transition: none; }
}

@media (max-width: 700px) {
  .importar-cards-grid { grid-template-columns: 1fr; }
  .importar-card-dropzone { padding: 22px 10px; }
}

.oculto {
  display: none;
}
.msg-erro {
  color: #ef4444;
  font-size: 13px;
  margin: 8px 0;
}
.msg-erro ul {
  margin: 4px 0 0 18px;
}

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 768px) {
  .header {
    min-height: 60px;
    padding: 12px 16px;
  }

  .header-title {
    font-size: 18px;
  }

  .search-input {
    min-width: 150px;
  }

  .header-controls {
    gap: 8px;
  }

  .control-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
}

/* ─── Painel de situação e fontes carregadas ───────────────── */
.status-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-dark);
}

.status-panel-empty {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fontes-panel {
  padding: 12px 24px;
  background: var(--bg-node);
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  font-size: 13px;
  max-height: 220px;
  overflow-y: auto;
}

.fontes-panel h3 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: var(--white);
}

.fontes-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fontes-panel li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}

/* ─── Dropdown "Mais ações" ─────────────────────────────────── */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg-node);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 200px;
  z-index: 50;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-dark);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

.dropdown-item:hover {
  background: rgba(255,255,255,0.08);
}

.dropdown-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─── Página individual de produto (overlay em tela cheia) ───────────────
   Passo 13 — antes era uma gaveta lateral de 380px; agora é uma tela cheia
   por cima do mapa. O mapa continua montado por trás (nunca é destruído),
   então ramo aberto e zoom ficam preservados de graça ao fechar/voltar. */
.product-panel {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: var(--bg-page);
  z-index: 200;
  overflow-y: auto;
  color: var(--text-dark);
}

.product-panel-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-header);
  z-index: 2;
}

/* Seta discreta de voltar — some/fecha a tela e volta pro mapa (que nunca
   saiu do DOM), preservando ramo aberto e zoom sem lógica extra. */
#productPanelBack {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dark);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#productPanelBack:hover { border-color: var(--primary); color: var(--white); }

#productPanelClose {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#productPanelClose:hover { border-color: var(--primary); color: var(--white); }

.product-panel-body {
  padding: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.product-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.product-panel-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  margin: 0;
  color: var(--white);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.product-panel-code {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: rgba(237,28,36,0.12);
  border: 1px solid rgba(237,28,36,0.4);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── Selo de confiabilidade FATO / PENDENTE / IDEIA FUTURA ── */
.status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  margin-left: 6px;
  white-space: nowrap;
}
.status-badge.fato { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid rgba(34,197,94,0.4); }
.status-badge.pendente { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid rgba(234,179,8,0.4); }
.status-badge.ideia-futura { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid rgba(107,114,128,0.4); }

@media (max-width: 900px) {
  .product-panel-body { padding: 16px; }
  .product-tabs { overflow-x: auto; flex-wrap: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .product-panel { animation: none !important; }
}

.product-alert {
  background: rgba(237, 28, 36, 0.12);
  border: 1px solid rgba(237, 28, 36, 0.4);
  color: #ffb4b4;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  margin-bottom: 8px;
}

.product-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.product-section h3 {
  font-size: 14px;
  margin: 0 0 8px 0;
  color: var(--white);
}

.product-field {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}

.product-field-label {
  color: var(--text-light);
}

.product-field-value {
  font-weight: 600;
  text-align: right;
}

.product-field-empty {
  font-size: 12px;
  color: var(--text-light);
  font-style: italic;
}

.product-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}

.product-section li {
  padding: 3px 0;
}

table.product-values-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

table.product-values-table th,
table.product-values-table td {
  border: 1px solid var(--border);
  padding: 4px 6px;
  text-align: left;
}

/* ─── Header minimalista + painel "Dados" ──────────────────── */
.search-input-discreto {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  color: var(--text-dark);
  font-size: 13px;
  width: 200px;
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: var(--text-dark);
  font-size: 16px;
  cursor: pointer;
}

.icon-btn:hover {
  border-color: var(--primary);
  color: var(--white);
}

.dados-panel {
  position: absolute;
  top: 56px;
  right: 24px;
  background: var(--bg-node);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  z-index: 200;
  min-width: 240px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

.dados-panel-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-dark);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
}

.dados-panel-item:hover {
  background: rgba(255,255,255,0.08);
}

.dados-panel .status-panel,
.dados-panel .fontes-panel {
  position: static;
  border: none;
  padding: 8px 10px 0 10px;
  background: transparent;
}

/* ─── Energia: partícula viajando pelo cabo + onda de clique ────── */
circle.link-particle {
  fill: #ff5a5f;
  filter: url(#wireGlow);
  pointer-events: none;
}

circle.click-ripple {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
  pointer-events: none;
}

/* Respeita prefers-reduced-motion: desliga tudo que é só decorativo */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora, .bg-dots {
    animation: none !important;
  }
  .map-container.familia-aberta .bg-aurora {
    transition: none;
  }
  circle.link-particle, circle.click-ripple {
    display: none;
  }
}

/* ─── Modalidade: SOMENTE verde=loja, amarelo=viagem — nunca outra cor ──── */
.dot-loja { background: #22c55e; }
.dot-viagem { background: #eab308; }
.dot-ambas { background: linear-gradient(90deg, #22c55e 50%, #eab308 50%); }

/* Cartão-filho real de uma modalidade (dentro do produto-mestre aberto) */
.node.modalidade-loja rect.node-card {
  stroke: #22c55e;
  stroke-width: 2;
}
.node.modalidade-loja rect.node-modalidade-band {
  fill: #22c55e;
}
.node.modalidade-loja rect.node-halo {
  stroke: #22c55e;
}
.node.modalidade-loja .node-title,
.node.modalidade-loja .node-icon {
  fill: #22c55e;
}

.node.modalidade-viagem rect.node-card {
  stroke: #eab308;
  stroke-width: 2;
}
.node.modalidade-viagem rect.node-modalidade-band {
  fill: #eab308;
}
.node.modalidade-viagem rect.node-halo {
  stroke: #eab308;
}
.node.modalidade-viagem .node-title,
.node.modalidade-viagem .node-icon {
  fill: #eab308;
}

/* Cartão-mestre (produto): cor conforme quantas modalidades existem
   confirmadas — NUNCA inventa cor pra modalidade não vinculada. */
.node.product-group.mestre-somente-loja rect.node-card {
  stroke: #22c55e;
  stroke-width: 2;
}
.node.product-group.mestre-somente-loja rect.node-modalidade-band {
  fill: #22c55e;
}
.node.product-group.mestre-somente-loja .node-title {
  fill: #22c55e;
}

.node.product-group.mestre-somente-casa rect.node-card {
  stroke: #eab308;
  stroke-width: 2;
}
.node.product-group.mestre-somente-casa rect.node-modalidade-band {
  fill: #eab308;
}
.node.product-group.mestre-somente-casa .node-title {
  fill: #eab308;
}

/* Ambas confirmadas: faixa dividida metade verde / metade amarela */
.node.product-group.mestre-ambas rect.node-card {
  stroke: var(--border);
}
.node-modalidade-band-loja { fill: #22c55e; }
.node-modalidade-band-casa { fill: #eab308; }

/* Sem nenhuma modalidade confirmada ainda: neutro, discreto, sem faixa */
.node.product-group.mestre-validacao rect.node-card {
  stroke: var(--border);
}
.node.product-group.mestre-validacao .node-info {
  fill: #9ca3af;
  font-style: italic;
}

.node-modalidade-band {
  rx: 2px;
}

/* Modalidade em validação: neutro, discreto, sem faixa colorida — nunca
   inventa verde/amarelo pra segmento sem sufixo de canal reconhecível. */
.node.modalidade-neutro rect.node-card {
  stroke: var(--border);
}
.node.modalidade-neutro .node-title {
  fill: #9ca3af;
  font-style: italic;
}

.node-icon {
  font-size: 16px;
}

/* Painel lateral: etiqueta colorida repetindo a modalidade do produto aberto */
.product-modalidade-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}
.product-modalidade-tag.tag-loja { background: rgba(34,197,94,0.15); color: #22c55e; border: 1px solid #22c55e; }
.product-modalidade-tag.tag-viagem { background: rgba(234,179,8,0.15); color: #eab308; border: 1px solid #eab308; }
.product-modalidade-tag.tag-pendente,
.product-modalidade-tag.tag-neutro { background: rgba(107,114,128,0.15); color: #9ca3af; border: 1px solid #6b7280; }