/* Aprovações pendentes (spec 2026-10-12). Cores SÓ pelos tokens de `estilo.css`; os únicos
   literais são os pastéis semânticos que o painel já usa (#ecfdf5/#a7f3d0 verde, #fffbeb/#fde68a
   âmbar, #fef2f2/#fecaca vermelho).
   ⚠️ Todo alvo de toque aqui tem 44 px (botão, chip, seletor, rádio com o rótulo): a Diretoria
   decide pelo celular. E nenhum estado é dito só pela cor — todo selo tem texto. */

#painel-aprovacoes .apr-cabeca h2 { margin: 0 0 4px; }
#painel-aprovacoes .apr-cabeca .meta { margin: 0 0 16px; font-size: 13.5px; }

/* ── as abas ──────────────────────────────────────────────────────────────────────── */
.apr-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin: 0 0 16px;
  overflow-x: auto; scrollbar-width: thin; }
#painel-aprovacoes button.apr-aba { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; border: 0; border-bottom: 3px solid transparent; border-radius: var(--raio-mini) var(--raio-mini) 0 0;
  background: none; color: var(--suave-texto); font-weight: 700; white-space: nowrap; box-shadow: none; }
#painel-aprovacoes button.apr-aba:hover { color: var(--marca); background: var(--gelo-hex); }
#painel-aprovacoes button.apr-aba[aria-selected="true"] { color: var(--marca); border-bottom-color: var(--marca); }
#painel-aprovacoes button.apr-aba:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.apr-contador { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
  padding: 0 7px; border-radius: 999px; background: #fffbeb; border: 1px solid #fde68a; color: var(--alerta);
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.apr-contador[hidden] { display: none; }

.apr-painel:focus-visible, .apr-rolagem:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.apr-anuncio { margin: 0 0 10px; color: var(--ok); font-weight: 700; font-size: 14px; }
.apr-anuncio:empty { display: none; }
.apr-carregando { padding: 28px 4px; font-size: 14px; }
.apr-falha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 0; }
.apr-falha .erro { margin: 0; }
.apr-falha button { min-height: 44px; }

/* ── barra: filtros, busca e "+ Pré-cadastro" ───────────────────────────────────────── */
.apr-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.apr-barra-fim { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; }
.apr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#painel-aprovacoes button.apr-chip { min-height: 44px; padding: 8px 16px; border-radius: 999px; background: #fff;
  color: var(--tinta); font-weight: 600; }
#painel-aprovacoes button.apr-chip[aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 800; }
.apr-busca-rotulo { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--suave-texto); font-size: 13.5px; }
#painel-aprovacoes .apr-busca { width: 260px; min-height: 44px; margin: 0; }
#painel-aprovacoes button.apr-novo { min-height: 44px; padding: 10px 18px; }

/* ── a tabela: a caixa rola nos dois eixos, o cabeçalho e a 1ª coluna grudam ────────────
   ⚠️ Mesma lição da grade de candidaturas: `sticky` só prende ao ancestral que ROLA, então a
   caixa tem altura e o cabeçalho gruda DENTRO dela; `separate` (e não `collapse`) porque com
   bordas colapsadas o navegador não pinta a borda da célula grudada. A página nunca rola de
   lado: quem rola é a caixa. */
.apr-rolagem { border: 1px solid var(--linha); border-radius: var(--raio-mini); overflow: auto;
  max-height: calc(100vh - var(--altura-topo) - 240px); min-height: 220px; background: #fff; }
.apr-tabela { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1120px; }
.apr-tabela thead th { position: sticky; top: 0; z-index: 2; background: #fff; box-shadow: inset 0 -1px 0 var(--linha);
  border-bottom: 0; padding: 12px 10px; white-space: normal; }
.apr-tabela td { padding: 12px 10px; vertical-align: top; background: #fff; }
.apr-responsavel { white-space: normal; min-width: 120px; max-width: 140px; }
.apr-tabela tr.apr-zebra td { background: var(--gelo-hex); }
.apr-tabela tbody tr:hover td { background: var(--gelo-forte-hex); }
.apr-tabela th:first-child, .apr-tabela td:first-child { position: sticky; left: 0; z-index: 1;
  box-shadow: inset -1px 0 0 var(--linha); }
.apr-tabela thead th:first-child { z-index: 3; box-shadow: inset -1px -1px 0 var(--linha); }
.apr-tabela tr[hidden] { display: none; }
/* Data e hora em DUAS linhas (medido no Chrome em 12/10/2026 a 1440 px: numa linha só a tabela
   passava 18 px da caixa e o Financeiro cortava "Reprovado, aprovado pela diretoria"). */
.apr-col-data { color: var(--suave-texto); font-variant-numeric: tabular-nums; white-space: normal; width: 96px; min-width: 96px; }
.apr-cnpj { font-variant-numeric: tabular-nums; }
.apr-razao { white-space: normal; min-width: 180px; max-width: 240px; overflow-wrap: anywhere; }
.apr-razao strong { color: var(--tinta); }
.apr-cnpj-sub { display: block; margin-top: 2px; font-variant-numeric: tabular-nums; }
.apr-col-financeiro { white-space: normal; min-width: 270px; }
.apr-col-juridico { white-space: normal; min-width: 290px; max-width: 360px; }
.apr-col-decisao { white-space: normal; min-width: 260px; }
.apr-texto { white-space: normal; min-width: 220px; max-width: 320px; overflow-wrap: anywhere; }
.apr-num { font-variant-numeric: tabular-nums; }
.apr-negociado { font-weight: 800; }
.apr-quem { margin: 4px 0 0; }
.apr-vazio-filtro { margin: 12px 0 0; font-size: 14px; }
.apr-vazio-filtro[hidden] { display: none; }

/* ── selos (sempre com texto) ───────────────────────────────────────────────────────── */
#painel-aprovacoes .selo { font-size: 12px; padding: 3px 10px; }
.apr-sit-aguardando_financeiro, .apr-fin-aguardando { background: var(--gelo-forte-hex); border-color: transparent; color: var(--marca); }
.apr-sit-aguardando_contrato, .apr-fin-aprovado_diretoria { background: #fffbeb; border-color: #fde68a; color: var(--alerta); }
.apr-sit-liberado, .apr-fin-aprovado, .apr-dec-aprovado { background: #ecfdf5; border-color: #a7f3d0; color: var(--ok); }
.apr-sit-reprovado, .apr-fin-reprovado, .apr-dec-recusado { background: #fef2f2; border-color: #fecaca; color: var(--perigo); }
#painel-aprovacoes .selo.apr-fin-aprovado_diretoria { white-space: normal; }
.apr-tipo-contrato_assinado { background: #ecfdf5; border-color: #a7f3d0; color: var(--ok); }
/* Documentos do Financeiro (30/10/2026): abaixo do parecer, separados por um fio. */
.apr-docs-financeiro { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--linha); }
.apr-docs-titulo { margin: 0; font-size: 13px; font-weight: 600; color: var(--marca); }

/* ── coluna Financeiro: o seletor e a confirmação ───────────────────────────────────── */
#painel-aprovacoes select.apr-parecer { min-height: 44px; margin: 0; width: 100%; }
.apr-confirma { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--linha); border-left: 4px solid var(--marca);
  border-radius: var(--raio-mini); background: var(--gelo-hex); }
.apr-confirma p { margin: 0 0 8px; font-size: 13.5px; color: var(--tinta); }
.apr-confirma-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
#painel-aprovacoes .apr-confirma-botoes button, #painel-aprovacoes .apr-decisao button { min-height: 44px; }
#painel-aprovacoes .apr-erro, #painel-aprovacoes .apr-campo-erro { margin: 6px 0 0; font-size: 13px; font-weight: 600; min-height: 0; }
#painel-aprovacoes .apr-erro:empty, #painel-aprovacoes .apr-campo-erro:empty { display: none; }
.apr-campo-erro { color: var(--perigo); }

/* ── coluna Jurídico / Comercial ────────────────────────────────────────────────────── */
.apr-icone { flex: none; }
.apr-bloqueada { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px dashed var(--linha);
  border-radius: var(--raio-mini); background: var(--gelo-hex); color: var(--suave-texto); font-size: 13.5px; font-weight: 600; }
.apr-minuta { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.apr-minuta legend { padding: 0; font-size: 12.5px; font-weight: 700; color: var(--suave-texto); }
.apr-minuta-lida { margin: 0; font-weight: 700; }
.apr-radio { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 16px; cursor: pointer; }
/* ⚠️ O `input { width: 100% }` do estilo.css estica rádio e caixa de marcar (medido no Chrome em
   09/10/2026, ver notificacoes.css): aqui eles voltam ao tamanho deles. */
#painel-aprovacoes input[type="radio"] { width: 20px; height: 20px; flex: none; margin: 0; padding: 0; cursor: pointer;
  accent-color: var(--marca); }
#painel-aprovacoes input[type="radio"]:disabled { cursor: not-allowed; }
.apr-sem-arquivo { margin: 4px 0 0; }
.apr-arquivos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
/* Em LINHAS, não em colunas (30/10/2026, pedido do usuário): o selo do tipo numa linha, o nome
   com a largura toda na seguinte (com o ✕ ao lado), e o botão de anexar abaixo da lista. Lado a
   lado, o selo espremia o nome em quatro letras por linha. */
.apr-arquivo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
  row-gap: 2px; min-width: 0; padding: 4px 0; }
.apr-arquivo .apr-tipo { grid-column: 1 / -1; justify-self: start; }
.apr-arquivo-corpo { display: grid; min-width: 0; }
.apr-arquivo-nome { color: var(--marca); font-weight: 700; overflow-wrap: anywhere; text-underline-offset: 2px; }
.apr-arquivo-nome:hover { color: var(--marca-clara); }
#painel-aprovacoes button.apr-remover { flex: none; min-width: 44px; min-height: 44px; padding: 0 10px; border-color: transparent;
  background: none; color: var(--suave-texto); font-size: 15px; box-shadow: none; }
#painel-aprovacoes button.apr-remover:hover { background: #fef2f2; color: var(--perigo); }
#painel-aprovacoes button.apr-remover.armado { color: var(--perigo); background: #fef2f2; border-color: #fecaca; font-size: 13px; }
.apr-pendente { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 4px 10px;
  border-radius: 999px; background: #fffbeb; border: 1px solid #fde68a; color: var(--alerta); font-size: 12.5px; font-weight: 700; }
.apr-anexar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 10px; }
#painel-aprovacoes button.apr-anexar-botao { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 13.5px; }

/* ── aba Valores do comercial ───────────────────────────────────────────────────────── */
.apr-decisao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.apr-decisao .apr-campo { width: 100%; }
.apr-pergunta { margin: 0; width: 100%; font-size: 13.5px; }
#painel-aprovacoes button.apr-recusar { background: #fff; border-color: var(--perigo); color: var(--perigo); }
#painel-aprovacoes button.apr-recusar:not([disabled]):hover { background: #fef2f2; }
#painel-aprovacoes .apr-motivo-campo { margin: 4px 0 0; min-height: 72px; }
.apr-motivo { margin: 6px 0 0; font-size: 13px; white-space: normal; overflow-wrap: anywhere; }

/* ── vazio ──────────────────────────────────────────────────────────────────────────── */
.apr-vazio { text-align: center; padding: 40px 16px; border: 1px dashed var(--linha); border-radius: var(--raio-controle); }
.apr-vazio p { margin: 0; }
.apr-vazio p.apr-vazio-titulo { font-weight: 700; color: var(--tinta); font-size: 15px; margin: 0 0 6px; }

/* ── o diálogo do pré-cadastro ──────────────────────────────────────────────────────── */
.apr-dialogo { border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; color: var(--tinta);
  width: min(520px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(10, 40, 80, .28); }
.apr-dialogo::backdrop { background: rgba(10, 30, 55, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.apr-dialogo h3 { margin: 0 0 6px; color: var(--marca); }
.apr-dialogo > .meta { margin: 0 0 6px; font-size: 13.5px; }
.apr-campo { display: grid; gap: 4px; margin: 14px 0 0; font-weight: 700; color: var(--suave-texto); font-size: 13.5px; }
#painel-aprovacoes .apr-campo input, #painel-aprovacoes .apr-campo textarea { margin: 0; font-weight: 400; color: var(--tinta); }
#painel-aprovacoes .apr-campo input { min-height: 44px; }
#painel-aprovacoes [aria-invalid="true"] { border-color: var(--perigo); }
.apr-consulta { margin: 6px 0 0; font-size: 13px; }
.apr-consulta:empty { display: none; }
.apr-consulta.apr-consulta-aviso { color: var(--alerta); font-weight: 700; }
.apr-dialogo .erro:empty { display: none; }
.apr-dialogo .erro { margin: 12px 0 0; font-weight: 600; }
.apr-dialogo-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
#painel-aprovacoes .apr-dialogo-botoes button { min-height: 44px; min-width: 110px; }

@media (max-width: 640px) {
  .apr-barra, .apr-barra-fim { align-items: stretch; }
  /* Os chips numa linha só que rola de lado, em vez de três linhas empurrando a tabela. */
  .apr-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
  #painel-aprovacoes button.apr-chip { flex: none; }
  .apr-barra-fim { width: 100%; margin-left: 0; }
  .apr-busca-rotulo { flex: 1 1 100%; }
  #painel-aprovacoes .apr-busca { width: auto; flex: 1; min-width: 0; }
  #painel-aprovacoes button.apr-novo { width: 100%; }
  /* A caixa continua rolando nos dois eixos (o cabeçalho e a Data seguem grudados), só que
     com a altura do celular. */
  .apr-rolagem { max-height: 70vh; }
  .apr-dialogo-botoes { flex-direction: column-reverse; }
  #painel-aprovacoes .apr-dialogo-botoes button { width: 100%; }
}

/* ── Na ficha do cliente (`app.js`): a faixa da trava no topo e o selo ao lado dos três
   valores (seguro de vida, ponto digital, taxa de cancelamento). O estado vai SEMPRE por
   extenso no texto; o fundo só reforça. */
#card-cliente .ficha-trava { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--raio-controle);
  background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid var(--alerta); color: var(--tinta); }
#card-cliente .ficha-trava p { margin: 0; }
#card-cliente .ficha-trava-titulo { font-weight: 700; color: var(--alerta); margin-bottom: 4px; }
#card-cliente .ficha-trava-motivos { margin: 0; padding-left: 20px; }
#card-cliente .ficha-trava-sem-conferir { background: var(--gelo-hex); border-color: var(--linha);
  border-left-color: var(--suave); }

.selo-valor { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px 10px;
  border: 1px solid var(--linha); border-radius: var(--raio-mini); font-size: 13px; color: var(--tinta); }
.selo-valor:focus { outline: 2px solid var(--marca); outline-offset: 2px; }
.selo-valor-rotulo { font-weight: 700; }
.selo-valor-meta { color: var(--suave-texto); font-size: 12.5px; }
.selo-valor-sem_justificativa { background: #fffbeb; border-color: #fde68a; }
.selo-valor-sem_justificativa .selo-valor-rotulo { color: var(--alerta); }
.selo-valor-aguardando { background: var(--gelo-hex); border-color: var(--gelo-forte-hex); color: var(--marca); }
.selo-valor-aprovado { background: #ecfdf5; border-color: #a7f3d0; color: var(--ok); }
.selo-valor-recusado { background: #fef2f2; border-color: #fecaca; color: var(--perigo); }
#card-cliente .selo-valor button { min-height: 44px; padding: 8px 14px; font-size: 13px; margin: 0; }
#card-cliente .selo-valor-abre { align-self: flex-start; }
.selo-valor-form { display: flex; flex-direction: column; gap: 6px; }
.selo-valor-form[hidden] { display: none; }
.selo-valor-form .rotulo { color: var(--tinta); font-weight: 600; font-size: 13px; }
#card-cliente .selo-valor-form textarea { width: 100%; min-height: 72px; margin: 0; resize: vertical; }
.selo-valor-form .erro { margin: 0; min-height: 0; font-weight: 600; }
.selo-valor-botoes { display: flex; flex-wrap: wrap; gap: 8px; }