/* Sistema Interno Somad — o visual do portal.

   Vem do protótipo que o Henderson desenhou ("Sistema Interno Somad.html",
   18/09/2026). Cores só aqui, em :root. Só modo claro: a paleta e as cores
   de estado foram escolhidas para fundo claro, e a logomarca é azul e cinza
   sobre transparência (spec da casca, D6). */

:root {
  color-scheme: light;

  /* Cores medidas na logomarca: o símbolo vai de #0060A0 a #0088C8. */
  --marca: #0070B0;       /* azul institucional — uso principal            */
  --marca-fund: #005A96;  /* ponta escura do gradiente — títulos e hover   */
  --marca-clara: #0088C8; /* ponta clara — só decoração, nunca texto miúdo */
  --papel: #F4F7FA;       /* fundo da aplicação                            */
  --superficie: #FFFFFF;  /* fundo de painéis e tabelas                    */
  --tinta: #1C2536;       /* texto principal                               */
  --grafite: #6B7075;     /* texto secundário                              */
  --linha: #D6E1EC;       /* réguas e bordas                               */
  --borda-campo: #B9C9D8; /* borda de campo de formulário                  */
  --realce: #E8F1F8;      /* hover e linha em destaque                     */
  --selecionado: #DCEBF5; /* item do menu aberto                           */

  /* Estados — cada um carrega um significado distinto. */
  --acao: #94331F;        /* exige ação                                    */
  --recolher: #16706B;    /* conferido, segue adiante                      */
  --analise: #7A5A00;     /* sem segurança: vai para análise humana        */
  --trava: #6B2233;       /* processamento interrompido                    */

  /* Nomes do visual anterior, mantidos para os templates que já os usam. */
  --acento: var(--marca);
  --suave: var(--grafite);
  --alerta: var(--acao);

  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--marca-fund); }
.num, td.numero, th.numero, td.n, th.n { font-variant-numeric: tabular-nums; }

/* ---------- barra superior ----------
   Fundo branco: a logomarca desapareceria numa barra azul. */
.topo {
  background: var(--superficie); border-bottom: 3px solid var(--marca);
  display: flex; align-items: center; gap: 18px; padding: 12px 22px; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 13px; margin-right: auto; }
.marca img { width: 42px; height: 42px; flex: none; display: block; }
.razao { font-size: 17px; font-weight: 600; color: var(--marca-fund); }
.modulo-nome { font-size: 12.5px; color: var(--grafite); margin-top: 1px; }
.contexto { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.quem { color: var(--grafite); font-size: 13px; }
.quem a { color: var(--grafite); }
/* Sair é POST, não link: o Django recusa logout por GET, e com razão —
   um GET pode ser disparado por qualquer imagem numa página. */
form.sair { display: inline; }
form.sair button { margin: 0; padding: 0; background: none; border: 0; color: var(--grafite);
  font: inherit; text-decoration: underline; cursor: pointer; }
form.sair button:hover { color: var(--marca-fund); }

/* ---------- estrutura ---------- */
.corpo { display: flex; align-items: stretch; min-height: calc(100vh - 70px); }
.trilha { width: 232px; flex: none; background: var(--superficie);
  border-right: 1px solid var(--linha); padding: 18px 0; }
.trilha h2 { font: inherit; font-size: 12px; color: var(--grafite); margin: 0 0 8px; padding: 0 18px; letter-spacing: .3px; }
.trilha-grupo { margin-bottom: 20px; }
.trilha-grupo + .trilha-grupo { border-top: 1px solid var(--linha); padding-top: 14px; }
/* O módulo recolhe e expande pelo <details> do navegador: sem JavaScript,
   com teclado e leitor de tela de graça. */
.trilha-mod > summary { font-size: 13px; color: var(--tinta); padding: 7px 18px; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; }
.trilha-mod > summary::-webkit-details-marker { display: none; }
.trilha-mod > summary::before { content: ""; width: 6px; height: 6px; flex: none;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s; }
.trilha-mod[open] > summary::before { transform: rotate(45deg); }
.trilha-mod > summary:hover { background: var(--realce); }
.trilha-item { display: block; border-left: 3px solid transparent; padding: 7px 18px 7px 32px;
  color: var(--tinta); text-decoration: none; font-size: 14px; }
.trilha-item:hover { background: var(--realce); }
.trilha-item[aria-current="page"] { border-left-color: var(--marca); background: var(--selecionado);
  color: var(--marca-fund); font-weight: 600; }

.tela { flex: 1; min-width: 0; padding: 26px 30px 40px; }
.tela.sozinha { max-width: 34rem; margin: 0 auto; }
h1 { font-family: var(--serif); font-weight: 400; font-size: 26px; color: var(--marca-fund); margin: 0 0 18px; }
h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; font-weight: 600; }

/* ---------- painéis e formulários ---------- */
.painel, form.cartao { background: var(--superficie); border: 1px solid var(--linha);
  border-radius: 4px; padding: 20px 22px; margin-bottom: 20px; }
.painel h3 { font: inherit; font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
label, .rotulo-campo { display: block; font-size: 13px; color: var(--grafite); margin-bottom: .25rem; }
input, select, textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--borda-campo);
  border-radius: 3px; background: var(--superficie); color: var(--tinta); font: inherit; font-size: 14.5px; }
button, .botao { margin-top: 1.25rem; padding: 8px 18px; border: 1px solid var(--marca-fund); border-radius: 3px;
  background: var(--marca); color: #fff; font: inherit; font-size: 14.5px; cursor: pointer; }
button:hover, .botao:hover { background: var(--marca-fund); }
a.botao { display: inline-block; margin-top: 0; text-decoration: none; font-weight: 600; font-size: .9rem; }
a.botao.secundario, .botao-secundario { background: var(--superficie); color: var(--marca-fund); border-color: var(--borda-campo); }
a.botao.secundario:hover, .botao-secundario:hover { background: var(--realce); }
/* Exportar sem empresa escolhida é recusa certa: o botão diz isso antes do clique. */
span.botao.desligado { display: inline-block; margin-top: 0; background: transparent; color: var(--grafite);
  border: 1px dashed var(--linha); font-weight: 600; font-size: .9rem; cursor: not-allowed; }
a.cancelar { margin-left: 1rem; color: var(--grafite); }
.erro { color: var(--acao); font-size: .85rem; margin-top: .25rem; }
.ajuda { color: var(--grafite); font-size: .78rem; margin: .25rem 0 0; }
.nota { color: var(--grafite); font-size: 13.5px; margin: .4rem 0 1.25rem; max-width: 80ch; }
.nota.aviso-de-filtro { color: var(--tinta); }
.acoes { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0 .25rem; }

/* Avisos do sistema (messages) */
.aviso { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--recolher);
  border-radius: 3px; padding: 10px 14px; margin: 0 0 1.25rem; }
.aviso.error, .aviso.warning { border-left-color: var(--acao); background: #FBF1F2; border-color: #E4C4CA; }
.alerta, .vencida { color: var(--acao); }
.vencida { font-weight: 600; }

/* Filtro de período: uma linha só, quebrando quando não couber. */
form.filtro { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 4px; padding: .9rem 1rem; margin-bottom: 1rem; }
form.filtro button { margin: 0; }
form.filtro input, form.filtro select { min-width: 10rem; }
form.filtro input[type=checkbox] { min-width: 0; width: auto; }

/* ---------- tabelas ---------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--superficie); margin-top: .5rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-weight: 600; color: var(--grafite); font-size: 12.5px; border-bottom-color: #C6D4E0; }
td.numero, th.numero, td.n, th.n { text-align: right; }
td.numero { white-space: nowrap; }
/* Tabela larga rola dentro do próprio quadro; a página nunca rola de lado. */
.rolagem { overflow-x: auto; }
table.larga { min-width: 64rem; }
td.historico { font-size: .82rem; color: var(--grafite); min-width: 20rem; }
td input.largo { min-width: 18rem; }
td .ajuda { display: block; margin: 0; }
td.acoes-linha { white-space: nowrap; }
td.acoes-linha a + a { margin-left: .75rem; }
.rodape-tabela td { font-weight: 600; border-bottom: 0; }
/* Conferência de lançamentos: o estornado fica visível, mas apagado. */
tr.estornado td { color: var(--grafite); }
tr.estornado td.numero { text-decoration: line-through; }
.etiqueta, .selo { display: inline-block; font-size: 12px; padding: 1px 7px; border-radius: 2px;
  border: 1px solid currentColor; white-space: nowrap; color: var(--grafite); }
.selo[data-v="sim"] { color: var(--acao); }
.selo[data-v="analise"] { color: var(--analise); }
.vazio { color: var(--grafite); font-style: italic; }

/* Exclusão em lote: a barra fica sobre a tabela, e as caixinhas da tabela
   apontam para ela pelo atributo form. */
form.exclusao { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 .25rem; }
form.exclusao label { margin: 0; }
form.exclusao input { width: auto; flex: 1 1 16rem; max-width: 28rem; }
form.exclusao button { margin: 0; background: transparent; color: var(--acao); border-color: var(--acao); }
form.exclusao button:hover:not(:disabled) { background: #FBF1F2; }
form.exclusao button:disabled { color: var(--grafite); border-color: var(--linha); cursor: not-allowed; }
.selecionados { font-size: .9rem; color: var(--grafite); }
th.selecao, td.selecao { width: 1.75rem; padding-right: 0; }
th.selecao input, td.selecao input { width: auto; margin: 0; }
nav.paginacao { display: flex; gap: 1.25rem; align-items: center; justify-content: center; margin: 1rem 0; font-size: .9rem; }
nav.paginacao span { color: var(--grafite); }

/* Campos curtos dentro de célula: código de filial, módulos. */
form.filial, form.marcacoes-linha { display: flex; gap: .35rem; align-items: center; margin: 0; flex-wrap: wrap; }
form.filial input { width: 3.5rem; margin: 0; padding: .2rem .35rem; font-size: .85rem; }
form.filial button, form.marcacoes-linha button { margin: 0; padding: .2rem .6rem; font-size: .78rem; }
form.marcacoes-linha label { display: flex; gap: .3rem; align-items: center; margin: 0; color: var(--tinta); font-size: .85rem; }
form.marcacoes-linha input { width: auto; }

/* ---------- painel do contas a pagar ---------- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.cartao-numero { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--marca);
  border-radius: 3px; padding: 14px 16px; }
.cartao-numero .rotulo { display: block; font-size: 13px; color: var(--grafite); margin-bottom: .4rem; }
.cartao-numero strong { font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 400; }
/* A barra precisa de um trilho de altura definida: percentual de altura
   dentro de um item flex não resolve, e todas as barras saem iguais. */
.colunas { display: flex; align-items: stretch; gap: .6rem; height: 12rem;
  border-bottom: 1px solid var(--linha); padding-bottom: .25rem; }
.coluna { flex: 1; display: grid; grid-template-rows: auto 1fr auto; gap: .3rem; justify-items: center; }
.coluna .trilho-vertical { display: flex; align-items: flex-end; width: 100%; height: 100%; }
.coluna .barra { display: block; width: 100%; background: var(--marca); border-radius: 3px 3px 0 0; min-height: 2px; }
.coluna .valor { font-size: .7rem; color: var(--grafite); font-variant-numeric: tabular-nums; }
.coluna .rotulo { font-size: .72rem; color: var(--grafite); }
.lado-a-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 2rem; }
.faixa { display: grid; grid-template-columns: 8rem 1fr 6.5rem; align-items: center; gap: .6rem; margin-bottom: .45rem; font-size: .88rem; }
.faixa .nome { color: var(--grafite); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa .trilho { display: block; height: .55rem; background: var(--linha); border-radius: 3px; }
.faixa .preenchido { display: block; height: 100%; background: var(--marca); border-radius: 3px; }
.faixa .numero { text-align: right; font-variant-numeric: tabular-nums; }
.total-pago { margin: 1.1rem 0 0; }
.total-pago strong { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.total-pago .nota { display: block; margin: .15rem 0 0; }

/* Implantação: seções dentro de um cartão só, e listas de marcação. */
form.cartao h2.secao { margin: 1.75rem 0 .35rem; }
form.cartao h2.secao:first-of-type { margin-top: .25rem; }
.marcacoes > div { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .15rem 1rem;
  max-height: 18rem; overflow-y: auto; border: 1px solid var(--linha); border-radius: 4px; padding: .5rem .75rem; }
.marcacoes label { display: flex; gap: .5rem; align-items: baseline; color: var(--tinta); font-size: .88rem; margin: 0; }
.marcacoes input { width: auto; }
.campos .marcacoes { display: flex; flex-direction: column; gap: .35rem; padding-top: .3rem; }

/* ---------- telas de resultado (Folha, na Fatia 2) ----------
   Funil → cartões por estado → caixa de trava → tabelas de exceção. */
.funil { background: var(--superficie); border: 1px solid var(--linha); border-radius: 4px; padding: 22px; margin-bottom: 20px; }
.funil-cabeca { display: flex; gap: 34px; align-items: baseline; flex-wrap: wrap; margin-bottom: 20px; }
.funil-total { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--marca-fund); }
.funil-total small, .funil-valor small { display: block; font-family: var(--sans); font-size: 13px; color: var(--grafite); margin-top: 5px; }
.funil-valor { font-size: 22px; }
.degraus { list-style: none; margin: 0; padding: 0; counter-reset: d; }
.degraus li { counter-increment: d; display: grid; grid-template-columns: 26px 1fr 74px 1fr; gap: 14px;
  align-items: baseline; padding: 9px 0; border-top: 1px solid var(--linha); }
.degraus li:first-child { border-top: 0; }
.degraus li::before { content: counter(d); color: var(--grafite); font-size: 13px; font-variant-numeric: tabular-nums; }
.degrau-regra { font-size: 14px; }
.degrau-qtd { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.degrau-saida { font-size: 13.5px; color: var(--grafite); }
.degraus li[data-peso="alto"] { background: var(--realce); margin: 0 -22px; padding: 9px 22px; }
.blocos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); margin-bottom: 20px; }
.bloco { background: var(--superficie); border: 1px solid var(--linha); border-left: 4px solid var(--grafite);
  border-radius: 3px; padding: 14px 16px; }
.bloco[data-estado="acao"] { border-left-color: var(--acao); }
.bloco[data-estado="recolher"] { border-left-color: var(--recolher); }
.bloco[data-estado="analise"] { border-left-color: var(--analise); border-left-style: dashed; }
.bloco[data-estado="trava"] { border-left-color: var(--trava); }
.bloco[data-estado="quieto"] { border-left-color: var(--linha); }
.bloco b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.bloco .cifra { font-size: 22px; font-variant-numeric: tabular-nums; }
.bloco .detalhe { font-size: 13px; color: var(--grafite); margin-top: 4px; }
.trava-caixa { background: #FBF1F2; border: 1px solid #E4C4CA; border-left: 4px solid var(--trava);
  border-radius: 3px; padding: 14px 16px; margin-bottom: 20px; }
.trava-caixa b { display: block; margin-bottom: 4px; }
.trava-caixa p { margin: 0; font-size: 14px; }
.area-arquivo { border: 2px dashed var(--linha); border-radius: 4px; background: var(--superficie);
  padding: 30px 22px; text-align: center; margin-bottom: 20px; }
/* Abas da competência: links comuns, sem JavaScript; a atual leva aria-current. */
.abas { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); margin: 1.25rem 0 1rem; }
.abas a { padding: 8px 16px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 3px 3px 0 0; color: var(--grafite); text-decoration: none; font-size: 14px; }
.abas a:hover { background: var(--realce); }
.abas a[aria-current="page"] { background: var(--superficie); border-color: var(--linha); color: var(--marca-fund); font-weight: 600; }

/* O PDF arrastado sobre a linha do tipo de folha: a linha acende com o realce do portal. */
.arrastando { background: var(--realce); outline: 2px dashed var(--marca); outline-offset: -2px; }

:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

@media (max-width: 820px) {
  .corpo { flex-direction: column; }
  /* No celular o menu vira uma faixa de itens em linha: empilhado, ele
     empurraria o conteúdo para fora da primeira tela. */
  .trilha { width: auto; border-right: 0; border-bottom: 1px solid var(--linha);
    padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 2px 4px; }
  .trilha-grupo, .trilha-grupo + .trilha-grupo { display: contents; }
  .trilha h2 { display: none; }
  /* Na faixa do celular o módulo vira um item a mais, que abre os seus. */
  .trilha-mod, .trilha-mod[open], .trilha-mod::details-content { display: contents; }
  .trilha-mod > summary { padding: 6px 10px; }
  .trilha-item { padding: 6px 10px; border-left: 0; border-bottom: 3px solid transparent; }
  .trilha-item[aria-current="page"] { border-bottom-color: var(--marca); }
  .tela { padding: 20px 16px 32px; }
  .degraus li { grid-template-columns: 22px 1fr 60px; }
  .degraus li .degrau-saida { grid-column: 2 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Caixa de busca das listas longas (static/busca_na_lista.js). */
input.busca-na-lista { margin-bottom: .35rem; }
.busca-na-lista-contador:empty { display: none; }