/* Relatório Automático — regras próprias de cada tela. A base compartilhada (tokens claro/escuro, Inter, casca,
   botões, campos, faixas, etiquetas, cartões, indicadores, tabelas, abas, paleta, avisos, login) está em base.css,
   carregado antes deste arquivo. Guia: static/GUIA-VISUAL.md. Use só tokens (var(--…)), nunca cor fixa nova. */

/* --- 10. Lista de projetos (tela inicial) ------------------------------------------------- */
#andamento { margin: 0; }
#andamento > * { margin-bottom: var(--e3); }
#andamento-lista ul { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#andamento-lista li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#andamento-lista li a { font-weight: 600; text-decoration: none; }
#andamento-lista li a:hover { text-decoration: underline; }
#andamento-lista > a { font-size: 12.5px; }
.lista-projetos, .grade-cartoes { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-g);
  overflow: hidden; margin-bottom: var(--e3); }
.lista-cabecalho { display: grid; grid-template-columns: var(--colunas-projetos); gap: var(--e4); padding: 7px 16px 7px 19px;
  background: var(--papel-2); border-bottom: 1px solid var(--linha); color: var(--suave); font-size: 11px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.lista-cabecalho > :nth-child(4), .lista-cabecalho > :nth-child(5) { text-align: right; }
.cartao-projeto { display: grid; grid-template-columns: var(--colunas-projetos); gap: 1px var(--e4); align-items: center;
  padding: 10px 16px; border: 0; border-bottom: 1px solid var(--linha); border-left: 3px solid transparent;
  border-radius: 0; color: inherit; text-decoration: none; transition: background-color .08s; }
.cartao-projeto:last-child { border-bottom: 0; }
.lista-projetos .cartao-projeto { box-shadow: none; }
.lista-projetos { box-shadow: var(--sombra-1); }
.cartao-projeto .topo .ladrilho { color: var(--suave); }
.cartao-projeto.borda-falha .topo .ladrilho { background: var(--laranja-fundo); color: var(--laranja); border-color: var(--laranja-borda); }
.cartao-projeto .agendamento { display: flex; align-items: center; gap: 6px; padding-left: 32px; }
.cartao-projeto .agendamento svg.ic { width: 12px; height: 12px; flex: none; }
.cartao-projeto:hover { background: var(--papel-2); text-decoration: none; color: inherit; }
.cartao-projeto:focus-visible { outline-offset: -3px; }
.cartao-projeto.borda-falha { border-left-color: var(--laranja); }
.cartao-projeto .topo { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.cartao-projeto h2 { font-size: 14px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-projeto .agendamento { grid-column: 1; grid-row: 2; color: var(--suave); font-size: 12.5px; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao-projeto .dados { display: contents; margin: 0; }
.cartao-projeto .dados > div { grid-row: 1 / span 2; min-width: 0; }
.cartao-projeto .dados > div:nth-child(3), .cartao-projeto .dados > div:nth-child(4) { text-align: right; }
.cartao-projeto dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cartao-projeto dd { margin: 0; font-size: 13.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-projeto dd.num { font-variant-numeric: tabular-nums; }
.rodape-projetos { font-size: 12.5px; }
/* 0022: seções Relatórios e Tarefas na mesma lista; explicação do "Nova tarefa" sem conexão de escrita (só no :target) */
.lista-grupo { display: flex; align-items: center; gap: var(--e2); margin: 0; padding: var(--e2) 16px; font-size: var(--t-p);
  font-weight: 600; color: var(--texto-2); border-bottom: 1px solid var(--linha); }
.lista-grupo ~ .lista-grupo { border-top: 1px solid var(--linha); }
.lista-grupo-vazio { margin: 0; padding: var(--e3) 16px; border-bottom: 1px solid var(--linha); }
.explica-tarefa:not(:target) { display: none; }
.dados { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.dados dt { color: var(--suave); font-size: 12px; }
.dados dd { margin: 0; }

/* --- 11. Painel do projeto ---------------------------------------------------------------- */
.grade-painel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); margin-bottom: var(--e3); }
.grade-painel .cartao > h2 { font-size: 12px; font-weight: 600; color: var(--suave); letter-spacing: .04em; text-transform: uppercase; }
.grade-painel .cartao .linha:first-of-type { border-top: 0; }
.grade-painel .linha a + a { margin-left: var(--e3); }

/* --- 13. Detalhe da execução ---------------------------------------------------------------- */

.log { background: #1f1d1a; color: #ddd7cc; border-radius: var(--raio-g); padding: 12px 14px; font-family: var(--mono);
  font-size: 12.5px; line-height: 1.5; max-height: 480px; overflow: auto; }
.log .l { white-space: pre-wrap; word-break: break-word; }
.log .h { color: #8d8678; margin-right: 10px; }
.log .n-INFO { color: #8d8678; }
.log .n-ERROR { color: #ff9b74; font-weight: 600; }
.log .n-WARN { color: #f2c76b; }
details.tecnico { margin-top: var(--e4); }
details summary { cursor: pointer; color: var(--suave); font-size: 13px; }
details summary:hover { color: var(--texto); }
.tecnico dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 13px; margin: var(--e2) 0 0; }
.tecnico dt { color: var(--suave); }
.tecnico dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.aviso-versao { color: var(--amarelo); font-weight: 500; font-size: 13.5px; }

/* --- 15. Confirmações --------------------------------------------------------------------- */
.confirmacao { max-width: 760px; display: flex; flex-direction: column; gap: var(--e3); }
.confirmacao label { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.confirmacao input[name=motivo], .confirmacao textarea { padding: 7px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); font: inherit; }
.confirmacao .check { flex-direction: row; align-items: center; gap: 8px; }
.substituir summary { cursor: pointer; color: var(--acento); }
.substituir textarea { width: 100%; font-family: var(--mono); margin-top: 6px; }
button[disabled].primario, .htmx-request button[type=submit] { opacity: .6; cursor: progress; }

/* --- 16. Configuração do projeto ---------------------------------------------------------- */
.config-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e4); align-items: start; }
.laterais { display: flex; flex-direction: column; gap: var(--e3); position: sticky; top: 12px; }
.abas { display: flex; flex-wrap: wrap; gap: 2px; }
.abas > input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.abas > label { padding: 7px 12px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--suave); margin-bottom: 10px; }
.abas > label:hover { color: var(--texto); }
.abas > input:checked + label { color: var(--texto); font-weight: 600; border-bottom-color: var(--primario); }
.abas > input:focus-visible + label { outline: 2px solid var(--foco); outline-offset: -2px; border-radius: 3px; }
.abas > .painel { display: none; width: 100%; flex-direction: column; gap: var(--e3); }
#aba-geral:checked ~ #painel-geral, #aba-consulta:checked ~ #painel-consulta, #aba-colunas:checked ~ #painel-colunas,
#aba-destinatarios:checked ~ #painel-destinatarios, #aba-agendamento:checked ~ #painel-agendamento,
#aba-arquivo:checked ~ #painel-arquivo { display: flex; }
.painel label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-2); font-weight: 500; }
.painel label.check, .painel .check { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; color: var(--texto); }
.painel input, .painel select, .painel textarea { padding: 6px 9px; border: 1px solid var(--linha-forte); border-radius: var(--raio);
  font: inherit; font-size: 13.5px; max-width: 100%; background: var(--papel); }
.painel input:not([type=checkbox]):not([type=number]):not([type=time]), .painel select { max-width: 560px; }
.painel input[type=number] { width: 140px; }
.painel textarea.sql { font-family: var(--mono); font-size: 13px; width: 100%; line-height: 1.5; tab-size: 4; }
.painel h3 { margin: 8px 0 0; font-size: 13.5px; padding-top: 12px; border-top: 1px solid var(--linha); }
.painel .tabela input, .painel .tabela select { padding: 4px 6px; font-size: 13px; }
.painel .acoes .botao { font-size: 13px; }
.relativa { font-size: 12px; color: var(--suave); white-space: nowrap; }
.suave { color: var(--suave); font-size: 13px; }
.dias { border: 0; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.dias legend { font-size: 13px; font-weight: 500; color: var(--texto-2); margin-bottom: 6px; }
.dia input { position: absolute; opacity: 0; }
.dia span { display: inline-block; min-width: 46px; text-align: center; padding: 5px 8px; border: 1px solid var(--linha-forte);
  border-radius: var(--raio); cursor: pointer; font-size: 13px; background: var(--papel); }
.dia input:checked + span { background: var(--primario); color: #fff; border-color: var(--primario); }
.dia input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
.regra-agenda { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin: 0 0 10px; }
.painel-lateral h2 { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--suave); letter-spacing: .04em; text-transform: uppercase; }
.verificacoes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.verificacoes .marca { display: inline-block; width: 18px; font-weight: 700; color: var(--suave); padding: 0; }
.verificacoes .detalhe { color: var(--suave); font-size: 12px; margin-left: 18px; word-break: break-word; }
.v-ok .marca { color: var(--verde); } .v-falha .marca, .v-falha { color: var(--laranja); } .v-pendente, .v-nao_verificado { color: var(--suave); }
.ok-texto { color: var(--verde); font-weight: 600; } .falha-texto { color: var(--laranja); font-weight: 600; }
.erros-form { background: var(--laranja-fundo); border: 1px solid var(--laranja-borda); border-radius: var(--raio); padding: 8px 10px;
  color: var(--laranja-forte); font-size: 13px; margin-bottom: 8px; }
.erros-form ul { margin: 4px 0 0 18px; padding: 0; }
.alteracoes { margin: 0; padding-left: 18px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.antes { color: var(--laranja); } .depois { color: var(--verde); }
.antes, .depois { white-space: pre-line; }
pre.diff { background: #1f1d1a; color: #ddd7cc; border-radius: var(--raio); padding: 10px; font-size: 12.5px; overflow: auto; }
pre.diff .mais { color: #86efac; } pre.diff .menos { color: #fca5a5; } pre.diff .ctx { color: #9a9387; }
#previa { margin-top: var(--e4); }
table.planilha th { background: var(--verde-fundo); color: var(--texto); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
table.planilha td { white-space: nowrap; }
table.planilha tr.formatos td { background: var(--papel-2); font-size: 12px; color: var(--suave); }
table.planilha tr.linha-ficticia td { font-style: italic; color: var(--suave); }
.amostra { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.indicador-htmx { display: none; color: var(--azul); font-size: 13px; }
.indicador-htmx.htmx-request { display: block; }
.barra-salvar { position: sticky; bottom: 0; margin-top: var(--e4); background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio-g); padding: 10px 14px; display: flex; gap: var(--e3); align-items: end; flex-wrap: wrap;
  box-shadow: 0 -4px 16px rgba(28, 26, 23, .07); }
.barra-salvar label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--texto-2); flex: 1; min-width: 240px; }
.barra-salvar input { padding: 6px 10px; border: 1px solid var(--linha-forte); border-radius: var(--raio); font: inherit; }
#barra-estado { font-size: 13px; align-self: center; }
.acoes-linha { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.form-linha { display: flex; gap: var(--e2); align-items: end; flex-wrap: wrap; }
.form-linha label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--texto-2); }
.form-linha input, .form-linha select { padding: 6px 9px; border: 1px solid var(--linha-forte); border-radius: var(--raio); font: inherit; }
.inline { display: inline; }
tr.inativo td { color: var(--suave); }
/* aba Colunas: incluir/excluir e ordem */
tr.linha-coluna.excluida td { opacity: .55; }
tr.linha-coluna.excluida td:nth-child(2) { opacity: 1; }
tr.linha-coluna.sumida td { background: var(--laranja-fundo); }
td.mover { white-space: nowrap; }
.bloco-aba-extra { display: flex; flex-direction: column; gap: var(--e3); border-top: 1px solid var(--linha); padding-top: var(--e3); margin-top: 8px; }
.bloco-aba-extra.removida { opacity: .5; }
.colunas-aba-extra.removida { display: none; }
/* teste de conexão */
dl.detalhes-teste { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 8px 0 0; font-size: 13px; }
dl.detalhes-teste dt { font-weight: 600; color: var(--texto-2); }
dl.detalhes-teste dd { margin: 0; }
pre.corpo-mensagem { white-space: pre-wrap; background: var(--papel-3); padding: 10px; border-radius: var(--raio); font-size: 12.5px; }

/* --- 17. Responsivo (telas) ----------------------------------------------------------------- */
@media (max-width: 1100px) { .config-grade { grid-template-columns: 1fr; } .laterais { position: static; } }
@media (max-width: 900px) {
  .grade-painel, .etapas { grid-template-columns: 1fr; }
  .lista-cabecalho { display: none; }
  .cartao-projeto { grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 16px; }
  .cartao-projeto .topo, .cartao-projeto .agendamento { grid-column: 1 / -1; }
  .cartao-projeto .dados > div { grid-row: auto; text-align: left !important; }
  .cartao-projeto dt { position: static; width: auto; height: auto; clip: auto; color: var(--suave); font-size: 11.5px; }
}

/* Marca de seção preenchida (✓ nas abas da configuração; static/secoes.js). O CSP não aceita <style> no template. */
.secao-ok { margin-left: .3em; font-weight: 700; color: var(--verde); }
.secao-ok[hidden] { display: none; }

/* Configuração simplificada (23/10): pré-visualização só nas abas Consulta e parâmetros e Colunas. */
#form-config:not(:has(#aba-consulta:checked)):not(:has(#aba-colunas:checked)) #previa,
#form-config:not(:has(#aba-consulta:checked)):not(:has(#aba-colunas:checked)) #previa-carregando { display: none; }
/* Finalizar no cabeçalho e página de confirmação (config.html, config_confirmar.html). */
.config-finalizar { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }
.config-finalizar .descartar { margin-left: var(--e2); color: var(--suave); font-size: 12.5px; }
.config-finalizar .descartar:hover { color: var(--texto); }
.confirmar-config { max-width: 900px; }
.confirmar-config h2 { font-size: 14px; }
dl.resumo-confirmar { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 13.5px; }
dl.resumo-confirmar dt { font-weight: 600; color: var(--texto-2); }
dl.resumo-confirmar dd { margin: 0; }
dl.resumo-confirmar ul { margin: 0; padding-left: 1.1em; }
button.ir-aba { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); text-decoration: underline; cursor: pointer; }

/* --- Explorador de objetos (aba Consulta, 26/10) ------------------------------------------------- */
.explorador { margin: var(--e3) 0; padding: var(--e2) var(--e3); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); }
.explorador h3 { margin: 0 0 var(--e2); }
.explorador-controles { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.explorador-controles input[type="search"] { flex: 1 1 220px; min-width: 0; }
.explorador-ajuda { font-size: 12.5px; margin: var(--e1) 0 var(--e2); }
.explorador-corpo { max-height: 420px; overflow: auto; font-size: 13px; }
.explorador-lista, .explorador-campos { list-style: none; margin: 0; padding: 0; }
.explorador-campos { padding-left: var(--e4); border-left: 1px solid var(--linha); margin-left: var(--e1); }
.explorador-linha { display: flex; gap: var(--e2); align-items: baseline; padding: 1px 0; border-bottom: 1px solid var(--linha); }
.explorador-linha button { background: none; border: 0; padding: 1px 2px; font: inherit; cursor: pointer; text-align: left; border-radius: var(--raio); }
.explorador-linha button:hover, .explorador-linha button:focus-visible { background: var(--fundo); }
.explorador-nome, .explorador-campo { font-family: var(--mono); font-size: 12.5px; color: var(--texto); }
.explorador-nome[aria-expanded="true"] { font-weight: 600; }
.explorador-ref { color: var(--azul); font-size: 12.5px; }
.explorador-inserir { margin-left: auto; color: var(--azul); font-weight: 600; }
.explorador-rotulo { color: var(--texto); }
.explorador-tipo { color: var(--suave); font-family: var(--mono); font-size: 12px; }
.explorador-etiqueta { color: var(--suave); font-size: 11.5px; border: 1px solid var(--linha); border-radius: var(--raio); padding: 0 4px; }
.explorador-detalhe { padding: var(--e1) 0 var(--e2); }
.explorador-caminho, .explorador-filhos-titulo { font-size: 12px; margin: var(--e1) 0; }
.explorador-erro, .explorador-aviso { margin: var(--e1) 0; font-size: 12.5px; }

/* 0020 (bloco 3, cruzar conexões): ajuda da aba derivada e abas anteriores no explorador */
.ajuda-derivada { margin: var(--e1) 0 var(--e2); font-size: 12.5px; }
.ajuda-derivada-abas { margin: var(--e1) 0 0; padding-left: var(--e4); }
.explorador-campos-derivada { display: flex; flex-wrap: wrap; gap: var(--e1); padding-left: var(--e4); }
.explorador-campos-derivada button { background: none; border: 1px solid var(--linha); padding: 1px 4px; font-family: var(--mono); font-size: 12px; cursor: pointer; border-radius: var(--raio); }
.explorador-campos-derivada button:hover, .explorador-campos-derivada button:focus-visible { background: var(--fundo); }

/* 0022: configuração da tarefa (config_tarefa.html, tarefa.js) */
#aba-comandos:checked ~ #painel-comandos, #aba-notificacao:checked ~ #painel-notificacao { display: flex; }
.campos-tarefa { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--e3); }
.comandos-tarefa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e3); }
.comando-tarefa { display: flex; flex-direction: column; gap: var(--e2); padding: var(--e3); border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--papel); }
.comando-cab { display: flex; align-items: center; gap: var(--e2); }
.comando-acoes { margin-left: auto; display: inline-flex; gap: var(--e1); }
.comandos-validados { list-style: none; margin: var(--e2) 0 0; padding: 0; font-size: var(--t-p); }
.teste-tarefa { display: flex; flex-direction: column; gap: var(--e2); }
.avisos-teste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e1); }