: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;
}

.bg-aurora {
  background:
    radial-gradient(50% 40% at 30% 15%, rgba(237, 28, 36, 0.20), transparent 70%),
    radial-gradient(45% 35% at 75% 30%, rgba(237, 28, 36, 0.12), transparent 70%);
  background-size: 160% 160%;
  animation: aurora-drift 14s ease-in-out infinite;
}

@keyframes aurora-drift {
  0%   { background-position: 0% 0%, 100% 0%; opacity: 0.7; }
  50%  { background-position: 15% 20%, 80% 25%; opacity: 1; }
  100% { background-position: 0% 0%, 100% 0%; opacity: 0.7; }
}

.bg-grid {
  background-image:
    linear-gradient(rgba(237, 28, 36, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 28, 36, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.6;
  animation: grid-drift 18s linear infinite;
}

.bg-grid-fine {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 16px 16px;
  opacity: 0.4;
  animation: grid-drift 9s linear infinite reverse;
}

@keyframes grid-drift {
  from { background-position: 0 0; }
  to { background-position: 64px 64px; }
}

.bg-beam {
  height: 100%;
  top: 0;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(237, 28, 36, 0.10) 45%, rgba(255, 255, 255, 0.06) 50%, rgba(237, 28, 36, 0.10) 55%, transparent);
  opacity: 0.5;
  animation: beam-sweep 6s ease-in-out infinite;
}

@keyframes beam-sweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

.bg-scanlines {
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.35;
  mix-blend-mode: overlay;
}

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

.bg-centerline {
  width: 1px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(237, 28, 36, 0.35), rgba(237, 28, 36, 0.03), transparent);
}

/* ─── 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;
}

.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: 15px;
  font-weight: 800;
}

/* Root-child */
.node.root-child rect.node-card {
  fill: #1a0808;
  stroke: var(--primary);
  stroke-width: 1.5;
}
.node.root-child .node-title {
  fill: #f0a0a4;
}

/* Category — tom âmbar escuro */
.node.category rect.node-card {
  fill: #141008;
  stroke: #b07828;
}
.node.category .node-title {
  fill: #e8c070;
}

/* 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;
}

/* 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;
}

/* ─── Painel lateral do produto ─────────────────────────────── */
.product-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--bg-node);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0,0,0,0.5);
  z-index: 100;
  overflow-y: auto;
  color: var(--text-dark);
}

/* Passo 12 — notebook 1280/1366px: painel de produto mais estreito e barra
   de abas com rolagem horizontal própria em vez de estourar/quebrar a tela. */
@media (max-width: 1366px) {
  .product-panel {
    width: 340px;
  }
  .main-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

.product-panel-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg-node);
}

.product-panel-body {
  padding: 16px;
}

.product-panel-title {
  font-size: 18px;
  margin: 0 0 12px 0;
  color: var(--white);
}

.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;
}

/* Partículas raras e discretas no fundo — puramente ambiente */
.bg-particles {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(237,28,36,0.5), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 45% 80%, rgba(237,28,36,0.35), transparent);
  background-size: 400px 400px, 300px 300px, 500px 500px;
  animation: particles-drift 40s linear infinite;
  opacity: 0.5;
}

@keyframes particles-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 400px 400px, -300px 300px, 500px -500px; }
}

/* Respeita prefers-reduced-motion: desliga tudo que é só decorativo */
@media (prefers-reduced-motion: reduce) {
  .bg-aurora, .bg-grid, .bg-grid-fine, .bg-particles {
    animation: none !important;
  }
  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; }