/* Tema escuro do Padrão Básico (Kelus). Carregado DEPOIS de paleta.css em todas as telas; o claro continua sendo o padrão.
   As cores do escuro são derivadas da paleta do cliente (color-mix sobre --marinho e --azul), então cada cliente mantém as suas cores.
   Liga/desliga pelo botão do topo (assets/tema.js); a escolha fica lembrada neste computador. Desenvolvido por Kelus Consultoria. */
html[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #13171b; --tinta: #e7ebef; --cinza: #a8b3be; --linha: #36404a; --branco: #1c2127; --claro: #2b3441;
  --d-cartao: #1c2127; --d-campo: #14191e; --d-campo-borda: #4a5662; --d-hover: #28313a;
  --d-titulo: color-mix(in srgb, var(--marinho) 22%, #fff);
  --d-link: color-mix(in srgb, var(--azul) 32%, #fff);
  --d-faixa: color-mix(in srgb, var(--marinho) 55%, #000);
}
html[data-tema="escuro"] body { background: var(--fundo); color: var(--tinta); }
html[data-tema="escuro"] h1, html[data-tema="escuro"] h2, html[data-tema="escuro"] h3,
html[data-tema="escuro"] .cartao h2, html[data-tema="escuro"] #painel h2, html[data-tema="escuro"] summary,
html[data-tema="escuro"] .tp-titulo h1, html[data-tema="escuro"] .mini-titulo, html[data-tema="escuro"] .form label,
html[data-tema="escuro"] .saudacao, html[data-tema="escuro"] .cartao-menu h3, html[data-tema="escuro"] .termo h3, html[data-tema="escuro"] .termo summary,
html[data-tema="escuro"] .filtros-tarefas a, html[data-tema="escuro"] .topo-in nav a:hover, html[data-tema="escuro"] details summary { color: var(--d-titulo); }
html[data-tema="escuro"] a { color: var(--d-link); }
html[data-tema="escuro"] .botao-azul, html[data-tema="escuro"] .menu .botao, html[data-tema="escuro"] .principal { color: #fff; }

/* faixas e cabeçalhos: o azul-marinho do cliente, escurecido */
html[data-tema="escuro"] header, html[data-tema="escuro"] .topo-app, html[data-tema="escuro"] .chamada, html[data-tema="escuro"] .faixa-numeros,
html[data-tema="escuro"] .hero-marca, html[data-tema="escuro"] .hero, html[data-tema="escuro"] .pagina-topo { background: var(--d-faixa); }
html[data-tema="escuro"] .hero-marca { background: linear-gradient(135deg, var(--d-faixa) 0%, color-mix(in srgb, var(--azul) 60%, #000) 100%); }
html[data-tema="escuro"] header h1, html[data-tema="escuro"] .hero h1, html[data-tema="escuro"] .hero-marca h1, html[data-tema="escuro"] .pagina-topo h1, html[data-tema="escuro"] .chamada h2 { color: #fff; }
html[data-tema="escuro"] .topo, html[data-tema="escuro"] .menu { background: var(--d-cartao); border-color: var(--linha); }
html[data-tema="escuro"] .menu a { color: var(--tinta); }
html[data-tema="escuro"] .menu-botao span { background: var(--d-titulo); }
html[data-tema="escuro"] .rodape, html[data-tema="escuro"] .rodape-site { background: #0d1013; color: #b7c3ce; }
html[data-tema="escuro"] .topo-site { background: var(--d-cartao); border-color: var(--linha); }
html[data-tema="escuro"] .faixa-titulo { background: color-mix(in srgb, var(--azul) 55%, #0b0f14); color: #fff; }
html[data-tema="escuro"] .topo-in nav a { color: var(--tinta); }
html[data-tema="escuro"] .topo-in nav a.cta { color: #fff; }
html[data-tema="escuro"] .secao.fundo { background: #181d22; }
html[data-tema="escuro"] .logo img, html[data-tema="escuro"] .hero-logos img { background: #fff; border-radius: 6px; }

/* cartões, caixas e painéis */
html[data-tema="escuro"] .cartao, html[data-tema="escuro"] .cartao-menu, html[data-tema="escuro"] details, html[data-tema="escuro"] #painel,
html[data-tema="escuro"] .frente, html[data-tema="escuro"] .tela, html[data-tema="escuro"] .mini-cartoes div, html[data-tema="escuro"] .mini-tab { background: var(--d-cartao); border-color: var(--linha); }
html[data-tema="escuro"] .cartao-menu:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }
html[data-tema="escuro"] #ajuda-btn { background: var(--d-cartao); color: var(--d-titulo); }
html[data-tema="escuro"] #painel { box-shadow: -8px 0 24px rgba(0, 0, 0, .5); }
html[data-tema="escuro"] .tela-corpo { background: var(--fundo); }
html[data-tema="escuro"] .janela, html[data-tema="escuro"] .mini-tab th, html[data-tema="escuro"] .barra { background: #262e36; color: var(--cinza); }
html[data-tema="escuro"] code, html[data-tema="escuro"] .codigo { background: var(--d-campo); border-color: var(--d-campo-borda); color: var(--tinta); }

/* campos */
html[data-tema="escuro"] input, html[data-tema="escuro"] select, html[data-tema="escuro"] textarea,
html[data-tema="escuro"] .form input[type=text], html[data-tema="escuro"] .form input[type=email], html[data-tema="escuro"] .form textarea { background: var(--d-campo); color: var(--tinta); border-color: var(--d-campo-borda); }
html[data-tema="escuro"] input::placeholder, html[data-tema="escuro"] textarea::placeholder { color: #7d8894; }
html[data-tema="escuro"] input[type=checkbox], html[data-tema="escuro"] input[type=radio] { accent-color: var(--azul); }

/* tabelas */
html[data-tema="escuro"] th, html[data-tema="escuro"] .mini-tab th { color: var(--cinza); }
html[data-tema="escuro"] th, html[data-tema="escuro"] td, html[data-tema="escuro"] .lista-ok li, html[data-tema="escuro"] .contato-lista li { border-color: var(--linha); }

/* botões */
html[data-tema="escuro"] .suave, html[data-tema="escuro"] .botao-branco, html[data-tema="escuro"] .tp-voltar { background: var(--claro); color: var(--d-titulo); border-color: var(--d-campo-borda); }
html[data-tema="escuro"] .tp-voltar:hover, html[data-tema="escuro"] .suave:hover { background: var(--d-hover); }
html[data-tema="escuro"] .perigo, html[data-tema="escuro"] button.perigo, html[data-tema="escuro"] .botao.perigo { background: #4a2326; color: #ffb9b3; }
html[data-tema="escuro"] button.perigo:hover, html[data-tema="escuro"] .botao.perigo:hover { background: #5c2b2f; }

/* menu do topo */
html[data-tema="escuro"] .topo-app .tp-menu, html[data-tema="escuro"] .topo-app .tp-gaveta { background: var(--d-cartao); color: var(--tinta); border-color: var(--linha); }
html[data-tema="escuro"] .topo-app .tp-menu a, html[data-tema="escuro"] .topo-app .tp-menu button, html[data-tema="escuro"] .topo-app .tp-gaveta a { color: var(--tinta); }
html[data-tema="escuro"] .topo-app .tp-menu a:hover, html[data-tema="escuro"] .topo-app .tp-menu button:hover,
html[data-tema="escuro"] .topo-app .tp-menu [aria-current="page"], html[data-tema="escuro"] .topo-app .tp-gaveta a[aria-current="page"] { background: var(--d-hover); color: var(--d-titulo); }
html[data-tema="escuro"] .topo-app .tp-menu small, html[data-tema="escuro"] .topo-app .tp-gaveta small { color: var(--cinza); }
html[data-tema="escuro"] .topo-app .tp-menu hr { border-color: var(--linha); }
html[data-tema="escuro"] .topo-app .tp-menu .tp-perigo, html[data-tema="escuro"] .topo-app .tp-gaveta .tp-perigo { color: #ff9d96; }
html[data-tema="escuro"] .tp-titulo small { color: var(--cinza); }

/* selos, etiquetas, mensagens */
html[data-tema="escuro"] .selo-ok, html[data-tema="escuro"] .msg-ok, html[data-tema="escuro"] .sucesso, html[data-tema="escuro"] .caixa-ok, html[data-tema="escuro"] .selo-estagio.pronto { background: #1d3d31; border-color: #2f6a55; color: #a6e6cf; }
html[data-tema="escuro"] .selo-a60, html[data-tema="escuro"] .selo-aviso, html[data-tema="escuro"] .msg-aviso, html[data-tema="escuro"] .aviso-similar, html[data-tema="escuro"] .selo-estagio.validacao { background: #3f3512; border-color: #7a6720; color: #f1d98a; }
html[data-tema="escuro"] .selo-a30 { background: #432a14; color: #ffc999; }
html[data-tema="escuro"] .selo-venc, html[data-tema="escuro"] .selo-erro, html[data-tema="escuro"] .msg-erro, html[data-tema="escuro"] .alerta, html[data-tema="escuro"] .caixa-erro { background: #4a2326; border-color: #8a4044; color: #ffb9b3; }
html[data-tema="escuro"] .selo-nenhum { background: #2a3037; color: var(--cinza); }
html[data-tema="escuro"] .msg-info { background: #1d2b3d; border-color: #3a5878; color: #b9d4f0; }
html[data-tema="escuro"] .chip, html[data-tema="escuro"] .chip-diretor, html[data-tema="escuro"] .chip-filial, html[data-tema="escuro"] .etiqueta { background: #26364b; color: #bcd3f2; }
html[data-tema="escuro"] .chip-gestor, html[data-tema="escuro"] .etiqueta-verde { background: #1d3d36; color: #9fe0d2; }
html[data-tema="escuro"] .chip-supervisor { background: #3f3512; color: #f1d98a; }
html[data-tema="escuro"] .chip-operador { background: #2a3037; color: #b9c2cc; }
html[data-tema="escuro"] .chip-setor { background: #26391f; color: #b5e6a3; }
html[data-tema="escuro"] .passos .ok { color: #8fdcc0; }
html[data-tema="escuro"] .cartao-icone { filter: brightness(.85); }

/* botão de alternar o tema (criado por assets/tema.js) */
.tema-btn-flutuante { position: fixed; right: 14px; bottom: 14px; z-index: 60; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #8a97a3; background: #fff; color: #22303c; font-size: 20px; line-height: 1; cursor: pointer; padding: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
html[data-tema="escuro"] .tema-btn-flutuante { background: #2b3441; color: #f2d98a; border-color: #4a5662; }

/* Janela de confirmação (assets/tema.js: kelusConfirma). Usa as cores da paleta do cliente; segue o tema escuro. */
.kdlg-fundo { position: fixed; inset: 0; background: rgba(10, 20, 30, .55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.kdlg { background: var(--branco, #fff); color: var(--tinta, #1d2b36); border-radius: 10px; width: min(460px, 100%); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); overflow: hidden; font-family: inherit; }
.kdlg-t { margin: 0; padding: 14px 20px; background: var(--marinho, #013053); color: #fff; font-size: 17px; font-weight: 600; }
.kdlg-d { margin: 0; padding: 18px 20px; font-size: 16px; line-height: 1.5; white-space: pre-line; }
.kdlg-bt { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px; background: rgba(127, 140, 150, .12); }
.kdlg-bt button { font: inherit; font-size: 15px; font-weight: 600; padding: 9px 20px; border-radius: 7px; cursor: pointer; border: 1px solid var(--azul, #014d7b); background: transparent; color: var(--azul, #014d7b); min-height: 40px; }
.kdlg-bt .kdlg-sim { background: var(--azul, #014d7b); color: #fff; }
.kdlg-bt .kdlg-perigo { background: #b3261e; border-color: #b3261e; color: #fff; }
.kdlg-bt button:focus-visible { outline: 3px solid #e6b94a; outline-offset: 2px; }
html[data-tema="escuro"] .kdlg { background: #1c2127; color: #e7ebef; }
html[data-tema="escuro"] .kdlg-t { background: color-mix(in srgb, var(--marinho, #013053) 55%, #000); }
html[data-tema="escuro"] .kdlg-bt button { color: #e7ebef; border-color: #4a5662; }
html[data-tema="escuro"] .kdlg-bt .kdlg-sim { background: color-mix(in srgb, var(--azul, #014d7b) 70%, #000); color: #fff; border-color: transparent; }
html[data-tema="escuro"] .kdlg-bt .kdlg-perigo { background: #b3261e; color: #fff; }