body.dark-mode {
  --verde-intelbras: #00B26B;
  --verde-intelbras-claro: #66D49B;
  --preto-base: #000000;
  --cinza-escuro: #1e1e1e;
  --texto-botao: #ffffff;
}

 /* =========================================================
   MODO ESCURO – BASE
========================================================= */
body.dark-mode {
  background-color: #121212;
  color: var(--texto-botao);
}
.texto-botao {
  color:var(--verde-intelbras);
}

/* =========================================================
   HEADER
========================================================= */
body.dark-mode .header {
  background-color: var(--cinza-escuro);
  border-bottom: 3px solid var(--verde-intelbras);
}

/* =========================================================
   SIDEBAR
========================================================= */
body.dark-mode .sidebar {
  background: #1a1a1a;
  border-right: 2px solid var(--verde-intelbras);
}

/* Scrollbars */
body.dark-mode .sidebar::-webkit-scrollbar-track {
  background: #2a2a2a;
}

body.dark-mode .sidebar::-webkit-scrollbar-thumb {
  background: var(--verde-intelbras);
}

/* =========================================================
   CONTEÚDO PRINCIPAL
========================================================= */
body.dark-mode .content {
  background: #181818;
}

/* =========================================================
   TEXTOS E LINKS
========================================================= */
body.dark-mode a {
  color: #7ddf9a;
}

body.dark-mode p,
body.dark-mode li {
  color: #ebeef1;
}

/* =========================================================
   TOC / SUMÁRIO
========================================================= */
/* Sidebar título - modo dark */
body.dark-mode #sidebar-titulo {
    color: #00B26B; /* verde no dark */
}

body.dark-mode #sidebar-titulo .sidebar-icone {
    /* opcional, se quiser destacar o ícone também */
    margin-right: 6px;
}


body.dark-mode .toc-h3 > .btn,
body.dark-mode .toc-h4 > .btn,
body.dark-mode .toc-h5 > .btn {
  color: var(--texto-botao);
}

body.dark-mode .nav-interno .btn:hover {
  background-color: #263238;
  color: var(--texto-botao);
}

/* Item ativo */
body.dark-mode .nav-interno .btn.ativo {
  background-color: rgba(0, 230, 118, 0.15);
}

/* =========================================================
   TABELAS
========================================================= */
body.dark-mode .tabela {
  background-color: var(--cinza-escuro);
  color: var(--texto-botao);
}

body.dark-mode .tabela td {
  border-color: #333;
}

body.dark-mode .tabela tr:nth-child(even):not(:first-child) {
  background-color: #252525;
}

body.dark-mode .tabela-linha th {
  background-color: var(--cinza-escuro);   /* fundo escuro */
  color: var(--texto-botao);              /* texto branco */
  border-top-color: #333;
  border-bottom-color: #333;
}

body.dark-mode .tabela-linha td {
  color: var(--texto-botao);
  border-bottom-color: #333;
}


/* =========================================================
   ALERTAS / INFO
========================================================= */
body.dark-mode .alerta {
  background-color: #685912;
  border-left-color: #fbc02d;
}

body.dark-mode .informacao {
  background-color: #0e3b6b;
  border-left-color: #1e88e5;
}
/* =========================================================
   ALERTAS / INFO – TEXTO (MODO ESCURO)
========================================================= */

body.dark-mode .alerta,
body.dark-mode .alerta * {
  color: var(--texto-botao);
}

body.dark-mode .informacao,
body.dark-mode .informacao * {
  color: var(--texto-botao);
}


/* =========================================================
   OBSERVAÇÕES
========================================================= */
body.dark-mode .observacao.texto {
  background: var(--cinza-escuro);
  color: var(--texto-botao);
}

/* =========================================================
   SUBTÍTULOS – MODO ESCURO
========================================================= */

body.dark-mode h2.subtitulo {
  color: var(--verde-intelbras-claro);
}

body.dark-mode h2.subtitulo::after {
  background-color: var(--verde-intelbras-claro);
}

body.dark-mode h3.subtitle-h3 {
  color: var(--verde-intelbras);
}

body.dark-mode h4 {
  color: var(--verde-intelbras);
}

body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .subnivel {
  color: #bbbbbb; /* cinza mais claro para fundo escuro */
}

/* =========================================================
   HEADER – BOTÕES (MODO ESCURO) SEM FUNDO
========================================================= */
body.dark-mode .nav-header .nav-option {
  background: transparent !important;
  border: none;
  color: var(--texto-botao);
}

/* =========================================================
   TECH TABS – MODO ESCURO
========================================================= */

body.dark-mode .tech-tab {
  background: transparent;
  border-right: 1px solid var(--verde-intelbras); /* mantém divisão verde */
  color: var(--verde-intelbras);
}
body.dark-mode .tech-tab:hover {
  background: rgba(0, 230, 118, 0.12);
}


/* Aba padrão */
body.dark-mode .tech-tab {
  background: var(--preto-base);           /* fundo preto */
  color: var(--verde-intelbras);                /* verde Intelbras */
  border-right: 1px solid #333;
}

/* Remove fundo  claro do hover antigo */
body.dark-mode .tech-tab:hover {
  background: #111111;
}


/* Título e subtítulo verdes */
body.dark-mode .tech-tab-title,
body.dark-mode .tech-tab-subtitle {
  color: var(--verde-intelbras);
}

/* Aba ativa */
body.dark-mode .tech-tab.active {
  background: transparent;
  color: var(--verde-intelbras-claro);
}


/* Mantém seta da aba ativa */
body.dark-mode .tech-tab.active::after {
  border-top-color: var(--verde-intelbras-claro);
}

/* Subtítulo da aba ativa */
body.dark-mode .tech-tab.active .tech-tab-subtitle {
  color: var(--verde-intelbras-claro);
}

/* =========================================================
   IMAGENS – MOLDURA (MODO ESCURO)
========================================================= */
body.dark-mode img {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  padding: 2px;

  /* ✅ REMOVE FUNDO PRETO GLOBAL */
  background: transparent;

  max-width: none;
}
body.dark-mode .manual-header img {
  border: none;
  padding: 0;
  background: none;
}


body.dark-mode .icone img,
body.dark-mode .logo img {
  border: none;
  padding: 0;
  background: none;
}
/* =========================================================
   IMAGENS PEQUENAS – SEM MOLDURA
========================================================= */
body.dark-mode img[width="100"],
body.dark-mode img[width="80"],
body.dark-mode img[width="64"],
body.dark-mode img[width="48"],
body.dark-mode img[width="32"] {
  border: none !important;
  padding: 0 !important;
  background: none !important;
}
/* imagem grade - sem moldura */
body.dark-mode img.logo-sem-moldura { 
  border: none !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}


/* =========================================================
   LISTA DE PRODUTOS (MODELOS) – MODO ESCURO
========================================================= */

/* Container do dropdown */
body.dark-mode .modelos-dropdown {
  background-color: var(--preto-base);
  border: 1px solid var(--verde-intelbras);
}

/* Área interna */
body.dark-mode .modelos-dropdown-content {
  background-color: var(--preto-base);
}

/* Cada item da lista (produtos) */
body.dark-mode .modelos-dropdown-content > div,
body.dark-mode .modelos-dropdown-content > button,
body.dark-mode .modelos-dropdown-content .modelo,
body.dark-mode .modelos-dropdown-content .modelo-item {
  background-color: var(--preto-base);
  color: var(--texto-botao);
  border-bottom: 1px solid var(--verde-intelbras);
}

/* Último item sem borda */
body.dark-mode .modelos-dropdown-content > div:last-child,
body.dark-mode .modelos-dropdown-content > button:last-child {
  border-bottom: none;
}

/* Hover dos produtos */
body.dark-mode .modelos-dropdown-content > div:hover,
body.dark-mode .modelos-dropdown-content > button:hover {
  background-color: #111111;
}

/* Blindagem de texto interno */
body.dark-mode .modelos-dropdown-content span,
body.dark-mode .modelos-dropdown-content p,
body.dark-mode .modelos-dropdown-content strong {
  color: var(--texto-botao);
}
/* =========================================================
   TECH TAB ATIVA – FORÇA PRETO NO DARK MODE
========================================================= */

body.dark-mode .tech-tab.active,
body.dark-mode .tech-tab.active:hover,
body.dark-mode .tech-tab.active:focus {
  background-color: var(--preto-base) !important;
  color: var(--verde-intelbras-claro);
}
body.dark-mode .tech-tab.active::before,
body.dark-mode .tech-tab.active::after {
  background-color: transparent !important;
}