/* ==========================================================================
   SELC · tema escuro (em teste)
   Só vale com <html data-tema="noite">, ligado pelo botão da lua no topo.
   Fundo grafite-esverdeado, superfícies de vidro, acento verde-água e luz
   no item ativo. Documentos (folha, página do editor, documento do SEI)
   continuam brancos, como papel.
   ========================================================================== */

html[data-tema="noite"] {
  color-scheme: dark;
  --fundo: #070c0d;
  --papel: #0f1617;
  --texto: #e4eceb;
  --suave: #8b9b9a;
  --linha: rgba(255, 255, 255, 0.07);
  --marca: #3fd3ad;
  --marca-claro: rgba(63, 211, 173, 0.12);
  --ok: #4fd69c;
  --ok-claro: rgba(79, 214, 156, 0.12);
  --alerta: #e8b45c;
  --alerta-claro: rgba(232, 180, 92, 0.13);
  --erro: #ef7a7a;
  --erro-claro: rgba(239, 122, 122, 0.13);
  --sei-azul: #3fd3ad;
  --sei-azul-escuro: #22a786;
  --sei-menu: #0c1314;
  --sei-tabela: #121b1c;
  --acento: #3fd3ad;
  --vidro: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  --vidro-borda: rgba(255, 255, 255, 0.08);
  --sombra: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px rgba(0, 0, 0, 0.35);
  --sombra-alta: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 18px 40px rgba(0, 0, 0, 0.45);
  --raio: 16px;
  --brilho: 0 0 0 1px rgba(63, 211, 173, 0.45), 0 0 18px rgba(63, 211, 173, 0.25);
}

html[data-tema="noite"] body {
  background:
    radial-gradient(1100px 520px at 50% -180px, rgba(36, 120, 104, 0.32), transparent 70%),
    radial-gradient(700px 400px at 100% 100%, rgba(30, 90, 80, 0.12), transparent 70%),
    var(--fundo);
  background-attachment: fixed;
  color: var(--texto);
}
html[data-tema="noite"] h1,
html[data-tema="noite"] h2,
html[data-tema="noite"] h3,
html[data-tema="noite"] .titulo-pagina,
html[data-tema="noite"] .titulo-painel { color: #f1f6f5; }
html[data-tema="noite"] h1,
html[data-tema="noite"] .titulo-pagina { font-weight: 400; letter-spacing: -0.02em; }
html[data-tema="noite"] a { color: var(--marca); }
html[data-tema="noite"] label { color: #c9d4d3; }
html[data-tema="noite"] ::selection { background: rgba(63, 211, 173, 0.3); }
html[data-tema="noite"] main footer { color: #5d6c6b; }

/* ---------- topo: barra de vidro ---------- */
html[data-tema="noite"] .topo {
  background: rgba(9, 15, 16, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 -1px 0 var(--vidro-borda);
}
html[data-tema="noite"] .marca-nome { color: #eef4f3; font-weight: 600; }
html[data-tema="noite"] .marca-nome small { color: var(--suave); }
html[data-tema="noite"] .busca-topo { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--vidro-borda); box-shadow: none; border-radius: 12px; }
html[data-tema="noite"] .topo .busca-topo input[name] { color: var(--texto); }
html[data-tema="noite"] .topo .busca-topo input[name]::placeholder { color: #6f7f7e; }
html[data-tema="noite"] .busca-topo button { color: #8b9b9a; }
html[data-tema="noite"] .unidade-atual,
html[data-tema="noite"] .setor-master label {
  background: rgba(63, 211, 173, 0.1); color: var(--marca) !important; border: 1px solid rgba(63, 211, 173, 0.35); border-radius: 999px;
}
html[data-tema="noite"] .setor-master select { background: transparent; color: var(--marca); border: 0; }
html[data-tema="noite"] .icones-topo a,
html[data-tema="noite"] .alternar-tema { color: #b9c6c5; border: 1px solid transparent; border-radius: 12px; }
html[data-tema="noite"] .icones-topo a:hover,
html[data-tema="noite"] .alternar-tema:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); border-color: var(--vidro-borda); color: #fff; }
html[data-tema="noite"] .alternar-tema { color: var(--marca); box-shadow: var(--brilho); background: rgba(63, 211, 173, 0.08); }

/* ---------- menu lateral: painel flutuante, item ativo com luz ---------- */
html[data-tema="noite"] .menu-lateral {
  margin: 12px 0 12px 12px; height: calc(100vh - 58px - 24px); top: 70px;
  background: linear-gradient(180deg, rgba(20, 30, 31, 0.92), rgba(12, 19, 20, 0.92));
  border: 1px solid var(--vidro-borda); border-radius: 20px; box-shadow: var(--sombra);
}
html[data-tema="noite"] .menu-lateral input.filtro-menu[data-filtro-menu] { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--vidro-borda); border-radius: 12px; color: var(--texto); }
html[data-tema="noite"] .menu-lateral nav a { position: relative; color: #a9b7b6; border-radius: 12px; border: 1px solid transparent; overflow: hidden; }
html[data-tema="noite"] .menu-lateral nav a:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
html[data-tema="noite"] .menu-lateral nav a.atual {
  color: #fff; font-weight: 500; box-shadow: none;
  background: linear-gradient(90deg, rgba(63, 211, 173, 0.16), rgba(63, 211, 173, 0.03) 70%);
  border-color: rgba(63, 211, 173, 0.22);
}
html[data-tema="noite"] .menu-lateral nav a.atual::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--marca); box-shadow: 0 0 12px 2px rgba(63, 211, 173, 0.7);
}
html[data-tema="noite"] .menu-lateral nav a.atual .ico { color: var(--marca); filter: drop-shadow(0 0 6px rgba(63, 211, 173, 0.6)); }
html[data-tema="noite"] .menu-rodape { color: #6d7c7b; border-top-color: var(--vidro-borda); }

/* ---------- superfícies: vidro escuro ---------- */
html[data-tema="noite"] .cartao,
html[data-tema="noite"] .capa,
html[data-tema="noite"] .checklist,
html[data-tema="noite"] .resumo-contrato > div,
html[data-tema="noite"] .barra-acoes,
html[data-tema="noite"] .ficha,
html[data-tema="noite"] .arvore {
  background: var(--vidro), var(--papel); border-color: var(--vidro-borda); box-shadow: var(--sombra); color: var(--texto);
}
html[data-tema="noite"] .cartao { border-radius: 20px; }

/* tabelas */
html[data-tema="noite"] table { background: var(--papel); border-color: var(--vidro-borda); box-shadow: var(--sombra); }
html[data-tema="noite"] th { background: rgba(255, 255, 255, 0.025); color: #7f908f; border-bottom-color: var(--vidro-borda); }
html[data-tema="noite"] td { border-bottom-color: rgba(255, 255, 255, 0.05); }
html[data-tema="noite"] .tabela-sei { border-color: var(--vidro-borda); border-radius: 18px; }
html[data-tema="noite"] .tabela-sei thead th { background: rgba(255, 255, 255, 0.03); color: #8fa09f; }
html[data-tema="noite"] .tabela-sei tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.012); }
html[data-tema="noite"] .tabela-sei tbody tr:hover td,
html[data-tema="noite"] tr:hover td { background: rgba(63, 211, 173, 0.05); }
html[data-tema="noite"] tr.rascunho td { background: transparent; color: var(--suave); }
html[data-tema="noite"] .numero-processo { color: #e9f1f0; }
html[data-tema="noite"] .numero-processo.nao-visto { color: #ff8f8f; }

/* formulários */
html[data-tema="noite"] input:not([type=radio]):not([type=checkbox]),
html[data-tema="noite"] select,
html[data-tema="noite"] textarea {
  background: rgba(255, 255, 255, 0.03); color: var(--texto); border-color: rgba(255, 255, 255, 0.1); border-radius: 12px;
}
html[data-tema="noite"] select option, html[data-tema="noite"] select optgroup { background: #121a1b; color: var(--texto); }
html[data-tema="noite"] input::placeholder, html[data-tema="noite"] textarea::placeholder { color: #667675; }
html[data-tema="noite"] input:not([type=radio]):not([type=checkbox]):hover,
html[data-tema="noite"] select:hover, html[data-tema="noite"] textarea:hover { border-color: rgba(255, 255, 255, 0.18); }
html[data-tema="noite"] input:not([type=radio]):not([type=checkbox]):focus,
html[data-tema="noite"] select:focus, html[data-tema="noite"] textarea:focus { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(63, 211, 173, 0.18); }

/* botões: primário verde-água com brilho, secundário de vidro */
html[data-tema="noite"] button,
html[data-tema="noite"] .botao {
  background: linear-gradient(180deg, #46dcb5, #2fbf99); border-color: transparent; color: #04241c; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(63, 211, 173, 0.4), 0 6px 20px rgba(63, 211, 173, 0.22);
}
html[data-tema="noite"] button:hover:not(:disabled),
html[data-tema="noite"] .botao:hover { background: linear-gradient(180deg, #5ce6c2, #38cba4); border-color: transparent; }
html[data-tema="noite"] .botao.secundario,
html[data-tema="noite"] button.secundario,
html[data-tema="noite"] .ficha button.secundario {
  background: rgba(255, 255, 255, 0.04); color: #dce6e5; border: 1px solid var(--vidro-borda); box-shadow: none;
}
html[data-tema="noite"] .botao.secundario:hover,
html[data-tema="noite"] button.secundario:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.16); }
html[data-tema="noite"] button.perigo { background: transparent; color: var(--erro); border: 1px solid rgba(239, 122, 122, 0.5); box-shadow: none; }
html[data-tema="noite"] button.perigo:hover:not(:disabled) { background: var(--erro-claro); }
/* botões que são só ícone ficam transparentes */
html[data-tema="noite"] .barra-acoes .acao,
html[data-tema="noite"] .botao-menu,
html[data-tema="noite"] .busca-topo button,
html[data-tema="noite"] .marcar-todos,
html[data-tema="noite"] .tabela-itens button.acao,
html[data-tema="noite"] .alternar-tema,
html[data-tema="noite"] .mover-doc button,
html[data-tema="noite"] .faixa button {
  background: transparent; box-shadow: none; color: inherit;
}
html[data-tema="noite"] .alternar-tema { background: rgba(63, 211, 173, 0.08); color: var(--marca); box-shadow: var(--brilho); }
html[data-tema="noite"] .botao-menu { color: #cfdad9; }
html[data-tema="noite"] .barra-acoes .acao:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); }
html[data-tema="noite"] .marcar-todos { color: #8fa09f; }

/* avisos */
html[data-tema="noite"] .aviso { background: rgba(255, 255, 255, 0.04); border-color: var(--vidro-borda); color: var(--texto); border-radius: 14px; }
html[data-tema="noite"] .aviso.ok { background: var(--ok-claro); border-color: rgba(79, 214, 156, 0.35); color: #9be8c4; }
html[data-tema="noite"] .aviso.erro { background: var(--erro-claro); border-color: rgba(239, 122, 122, 0.35); color: #ffb3b3; }
html[data-tema="noite"] .aviso.alerta { background: var(--alerta-claro); border-color: rgba(232, 180, 92, 0.35); color: #f3cf8f; }

/* visões e filtros do painel */
html[data-tema="noite"] .visoes a { color: #c3cfce; }
html[data-tema="noite"] .ver-por a.atual { background: var(--marca); color: #04241c; border-radius: 999px; }
html[data-tema="noite"] .legenda { color: #7d8e8d; }

/* tela do processo: árvore e painel */
html[data-tema="noite"] .arvore { border-right-color: rgba(255, 255, 255, 0.06); border-radius: 0; }
html[data-tema="noite"] .arvore-raiz { background: rgba(255, 255, 255, 0.03); }
html[data-tema="noite"] .arvore-lista summary:hover,
html[data-tema="noite"] .arvore-ficha:hover { background: rgba(63, 211, 173, 0.06); }
html[data-tema="noite"] .sigla-doc { background: rgba(255, 255, 255, 0.04); border-color: var(--vidro-borda); color: #c9d4d3; }
html[data-tema="noite"] .painel-processo,
html[data-tema="noite"] .doc-arquivo { background: transparent; }
html[data-tema="noite"] .barra-acoes .acao.ativa { background: rgba(63, 211, 173, 0.12); }

/* editor: a faixa fica escura, a página continua branca */
html[data-tema="noite"] .faixa,
html[data-tema="noite"] .faixa .aba.ativa,
html[data-tema="noite"] .barra-localizar { background: #111a1b; border-color: var(--vidro-borda); color: var(--texto); }
html[data-tema="noite"] .faixa button:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--vidro-borda); }
html[data-tema="noite"] .faixa button.ativo { background: rgba(63, 211, 173, 0.16); border-color: rgba(63, 211, 173, 0.4); }
html[data-tema="noite"] .faixa .estilos button { background: rgba(255, 255, 255, 0.04); border-color: var(--vidro-borda); }

/* papel: documentos continuam como documento */
html[data-tema="noite"] .folha,
html[data-tema="noite"] .pagina,
html[data-tema="noite"] .doc-sei,
html[data-tema="noite"] .impressao { background: #fff; color: #18212c; border-color: transparent; }
html[data-tema="noite"] .folha *, html[data-tema="noite"] .doc-sei * { color: inherit; }
html[data-tema="noite"] .folha h1, html[data-tema="noite"] .folha h2, html[data-tema="noite"] .folha h3,
html[data-tema="noite"] .doc-sei h1, html[data-tema="noite"] .doc-sei h2, html[data-tema="noite"] .doc-sei h3 { color: #0f1b29; }

/* autuação */
html[data-tema="noite"] .autuacao-selo { background: radial-gradient(circle at 30% 25%, #4be0b9, #13775f); box-shadow: 0 0 0 1px rgba(63, 211, 173, 0.5), 0 0 28px rgba(63, 211, 173, 0.35); }
html[data-tema="noite"] .autuacao-selo .ico .claro,
html[data-tema="noite"] .botao-autuar .ico .claro { stroke: #0b3a2f; }
html[data-tema="noite"] .etapa-num { background: rgba(63, 211, 173, 0.12); color: var(--marca); box-shadow: inset 0 0 0 1px rgba(63, 211, 173, 0.35); }
html[data-tema="noite"] button.tipo { background: rgba(255, 255, 255, 0.025); color: var(--texto); border: 1px solid var(--vidro-borda); border-radius: 14px; box-shadow: none; }
html[data-tema="noite"] button.tipo::before { background: transparent; border-color: #4b5a59; }
html[data-tema="noite"] button.tipo:hover:not(:disabled) { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
html[data-tema="noite"] button.tipo.escolhido,
html[data-tema="noite"] button.tipo.escolhido:hover:not(:disabled) { background: rgba(63, 211, 173, 0.09); border-color: rgba(63, 211, 173, 0.6); box-shadow: var(--brilho); }
html[data-tema="noite"] button.tipo.escolhido::before { border-color: var(--marca); box-shadow: 0 0 8px rgba(63, 211, 173, 0.8); }
html[data-tema="noite"] button.tipo.escolhido strong { color: #effaf7; }
html[data-tema="noite"] .tipos-titulo, html[data-tema="noite"] .resumo-rotulo { color: #6f807f; }
html[data-tema="noite"] .aviso-catalogo { background: rgba(232, 180, 92, 0.08); border-color: rgba(232, 180, 92, 0.3); color: #e9d3a6; }
html[data-tema="noite"] .aviso-catalogo a { color: #f3c776; }
html[data-tema="noite"] .vinculo-contrato { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.12); }
html[data-tema="noite"] .vinculo-contrato legend { color: var(--marca); }
html[data-tema="noite"] .campo-moeda { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); border-radius: 12px; }
html[data-tema="noite"] .campo-moeda > span { background: rgba(255, 255, 255, 0.04); border-right-color: var(--vidro-borda); }
html[data-tema="noite"] .campo-moeda input:not([type=radio]):not([type=checkbox]) { background: transparent; }
html[data-tema="noite"] .opcional { background: rgba(255, 255, 255, 0.06); }
html[data-tema="noite"] .resumo { border-top: 1px solid rgba(63, 211, 173, 0.5); box-shadow: var(--sombra), 0 -12px 40px -20px rgba(63, 211, 173, 0.45); }
html[data-tema="noite"] .resumo-grupo { background: rgba(232, 180, 92, 0.12); color: #f0c879; }
html[data-tema="noite"] .resumo-tipo { color: #f1f6f5; font-weight: 500; }
html[data-tema="noite"] .linha-fases li::before { background: #0f1617; border-color: #3a4847; }
html[data-tema="noite"] .linha-fases li::after { background: rgba(255, 255, 255, 0.08); }
html[data-tema="noite"] .linha-fases li.inicial { color: var(--marca); }
html[data-tema="noite"] .linha-fases li.inicial::before { background: var(--marca); border-color: var(--marca); color: #04241c; box-shadow: 0 0 10px rgba(63, 211, 173, 0.7); }

/* indicadores e fases do painel */
html[data-tema="noite"] .indicador { background: transparent; border: 0; box-shadow: none; border-left: 1px solid var(--vidro-borda); border-radius: 0; }
html[data-tema="noite"] .indicador:first-child { border-left: 0; }
html[data-tema="noite"] .indicador strong { color: #f3f7f6; font-weight: 300; }
html[data-tema="noite"] .indicador .chip { background: rgba(63, 211, 173, 0.12); color: var(--marca); }
html[data-tema="noite"] .indicador .chip.alerta { background: var(--alerta-claro); color: #f0c879; }
html[data-tema="noite"] .indicador .chip.erro { background: var(--erro-claro); color: #ff9c9c; }
html[data-tema="noite"] .barra-fase .coluna { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 5px, transparent 5px 8px); }
html[data-tema="noite"] .barra-fase .cheio { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cor) 60%, transparent)); }

/* menu recolhido e celular: o menu volta a ocupar a coluna normal */
@media (max-width: 760px) {
  html[data-tema="noite"] .menu-lateral { margin: 0; border-radius: 0; height: auto; }
}

/* fases do processo: trilha de vidro, fase atual acesa por baixo */
html[data-tema="noite"] .fases li { position: relative; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--vidro-borda); color: #7f908f; border-radius: 12px; }
html[data-tema="noite"] .fases li.feita { background: rgba(79, 214, 156, 0.07); border-color: rgba(79, 214, 156, 0.25); color: #8fdcb8; }
html[data-tema="noite"] .fases li.atual { background: rgba(63, 211, 173, 0.12); border-color: rgba(63, 211, 173, 0.55); color: #effaf7; box-shadow: var(--brilho); }
html[data-tema="noite"] .fases li.atual::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 2px; border-radius: 2px; background: var(--marca); box-shadow: 0 0 12px 2px rgba(63, 211, 173, 0.75); }
html[data-tema="noite"] .separador-acoes { background: var(--vidro-borda); }

html[data-tema="noite"] code, html[data-tema="noite"] kbd { background: rgba(255, 255, 255, 0.06); color: #cfe9e2; border-color: var(--vidro-borda); }
html[data-tema="noite"] .selo:not(.ok):not(.erro) { background: rgba(255, 255, 255, 0.06); color: #c3cfce; border-color: var(--vidro-borda); }

/* barra de ações: cápsula de vidro e linha neon verde-água */
html[data-tema="noite"] .barra-acoes.com-onda {
  border-radius: 999px; padding-left: 0.7rem; padding-right: 0.7rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), rgba(14, 21, 22, 0.7);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 14px 34px rgba(0, 0, 0, 0.5);
}
html[data-tema="noite"] .onda-linha { stroke: #4fe3bb; stroke-width: 2; opacity: 1; }
html[data-tema="noite"] .onda-brilho { stroke: #3fd3ad; stroke-width: 9; opacity: 0.45; filter: blur(5px); }
html[data-tema="noite"] .barra-acoes.com-onda .acao.acesa .ico { filter: drop-shadow(0 0 7px rgba(63, 211, 173, 0.65)); }
html[data-tema="noite"] .barra-acoes.com-onda .acao:hover:not(:disabled) { background: transparent; border-color: transparent; }