/* =========================================================
   confirmacoes.css — camada ADICIONAL da Caixa de Confirmação.
   Não altera nenhuma regra existente: todo seletor é prefixado
   .cx- e vive dentro de #sec-confirmacoes, no mesmo espírito de
   visao-simples.css (prefixo próprio, zero cor nova, tokens de
   css/styles.css). Nenhum cálculo aqui: só apresentação.
   ========================================================= */

/* ── Cabeçalho da tela ──────────────────────────────────── */
.cx-topo{margin-bottom:14px;}
.cx-titulo{font-size:22px; font-weight:700; color:var(--verde-lavoura); margin:0 0 4px;}
.cx-sub{font-size:13.5px; color:#5c5f54; margin:0; max-width:62ch; line-height:1.45;}

/* ── Progresso: "X de N", uma pendência revisada por vez ──── */
.cx-progresso{display:flex; align-items:center; gap:16px; background:var(--verde-tinta);
  border:1px solid #c9e0c6; border-radius:var(--raio); padding:16px 20px; margin-bottom:0;
  box-shadow:var(--sombra-1);}
.cx-progresso-conta{display:flex; align-items:baseline; gap:5px; flex:0 0 auto;
  font-variant-numeric:tabular-nums;}
.cx-progresso-atual{font-size:34px; font-weight:700; color:var(--verde-escuro); line-height:1;}
.cx-progresso-de{font-size:14px; font-weight:600; color:#3d6b3f;}
.cx-progresso-txt{display:flex; flex-direction:column; gap:3px; min-width:0;}
.cx-progresso-rot{font-size:14.5px; font-weight:700; color:var(--verde-escuro);}
.cx-progresso-canais{font-size:12px; color:#3d6b3f;}

/* Trilha visual do progresso: reforço, nunca o único sinal — o
   texto "X de N" acima já carrega a informação por completo. */
.cx-trilha{height:6px; background:#dcead9; border-radius:999px; overflow:hidden;
  margin:8px 0 16px;}
.cx-trilha span{display:block; height:100%; background:var(--verde-lavoura); border-radius:999px;
  transition:width var(--dur) var(--ease);}

.cx-vazio{display:flex; align-items:center; gap:14px; background:var(--verde-tinta);
  border:1px solid #c9e0c6; border-radius:var(--raio); padding:20px 22px; margin-bottom:16px;
  box-shadow:var(--sombra-1);}
.cx-vazio .ico{font-size:28px; line-height:1; flex:0 0 auto;}
.cx-vazio .tit{font-size:15.5px; font-weight:700; color:var(--verde-escuro); margin:0 0 2px;}
.cx-vazio .txt{font-size:13px; color:#3d6b3f; margin:0;}

/* ── Lista de pendências ────────────────────────────────── */
.cx-lista{display:flex; flex-direction:column; gap:12px; margin-bottom:18px;}

.cx-card{background:var(--card); border:1px solid var(--borda-suave); border-radius:var(--raio);
  box-shadow:var(--sombra-1); padding:16px 18px;}

.cx-card-topo{display:flex; align-items:flex-start; gap:12px;}
.cx-card-ico{width:42px; height:42px; border-radius:11px; background:var(--verde-tinta);
  display:flex; align-items:center; justify-content:center; font-size:19px; flex:0 0 auto;}
.cx-card-info{flex:1 1 auto; min-width:0;}
.cx-card-titulo{font-size:14.5px; font-weight:700; color:var(--texto); margin:0 0 3px;
  overflow-wrap:anywhere;}
.cx-card-canal{font-size:12px; color:#5c5f54; margin:0;}
.cx-card-tipo{display:inline-block; font-size:11px; font-weight:600; color:#5c5f54;
  background:#f2f1ea; border-radius:999px; padding:2px 9px; margin-top:5px;}

/* ── Valor e frase de consequência (uma informação por linha) ── */
.cx-valor{font-size:21px; font-weight:700; color:var(--texto); margin:12px 0 2px;
  font-variant-numeric:tabular-nums;}
.cx-consequencia{font-size:12.5px; color:#5c5f54; margin:0 0 10px; line-height:1.4;}

/* ── Bloco de detalhe específico do tipo ────────────────── */
.cx-detalhe{margin:10px 0;}
.cx-linha{font-size:12.5px; color:#5c5f54; margin:0 0 4px;}
.cx-linha strong{color:var(--texto);}

/* Parcelas: linhas empilhadas, nunca tabela larga (sem rolagem horizontal) */
.cx-parcelas{display:flex; flex-direction:column; gap:6px; margin:8px 0;}
.cx-parcela{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg); border-radius:9px; padding:8px 12px; font-size:12.5px;}
.cx-parcela .n{color:#5c5f54; font-weight:600; flex:0 0 auto;}
.cx-parcela .d{color:var(--texto); flex:1 1 auto; text-align:center;}
.cx-parcela .v{color:var(--texto); font-weight:700; flex:0 0 auto; font-variant-numeric:tabular-nums;}

/* Seletor de bem (quando o documento não achou par sozinho) */
.cx-campo{margin:8px 0;}
.cx-campo label{display:block; font-size:12.5px; font-weight:600; color:var(--texto); margin-bottom:5px;}
.cx-campo select{width:100%; min-height:44px; font-size:16px; font-family:var(--fonte);
  border:1px solid var(--borda-suave); border-radius:10px; padding:0 12px; background:#fff; color:var(--texto);}
.cx-campo select:focus-visible{outline:2px solid var(--dourado-soja); outline-offset:1px;}
.cx-erro-campo{font-size:12px; color:#8a4a45; margin:6px 0 0; display:none;}
.cx-erro-campo.mostrar{display:block;}

/* Aviso de extração (algo que a leitura automática não teve certeza) */
.cx-aviso{display:flex; align-items:flex-start; gap:8px; background:#fbf3dd; border:1px solid #ecd693;
  border-radius:10px; padding:8px 11px; margin:8px 0; font-size:12px; color:#6b4e00; line-height:1.4;}
.cx-aviso .ico{flex:0 0 auto;}

/* Anexo do documento original — alvo de toque 44px (o link em si
   não tinha padding nenhum antes, ficava com uns 18px de altura) */
.cx-anexo{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--verde-lavoura);
  text-decoration:none; font-weight:600; margin:4px 0 0; min-height:44px; padding:6px 4px;}
.cx-anexo:hover{text-decoration:underline;}

/* ── Ações: Confirmar / Descartar, alvo de toque generoso ── */
.cx-acoes{display:flex; gap:10px; margin-top:14px;}
.cx-acoes button{flex:1 1 0; min-height:48px; border-radius:12px; font-family:var(--fonte);
  font-size:14px; font-weight:700; cursor:pointer; border:1px solid transparent;
  transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease);}
.cx-acoes button:active{transform:scale(.98);}
.cx-acoes button.cx-btn-confirmar{background:var(--verde-lavoura); color:#fff; border-color:var(--verde-lavoura);}
.cx-acoes button.cx-btn-confirmar:hover{filter:brightness(1.06);}
.cx-acoes button.cx-btn-descartar{background:#fff; color:var(--texto); border:1px solid var(--borda-suave);}
.cx-acoes button.cx-btn-descartar:hover{background:#f2f1ea;}

/* ── Rodapé de teste, deliberadamente discreto ──────────── */
.cx-rodape-teste{margin-top:6px; padding-top:14px; border-top:1px dashed var(--borda-suave);
  display:flex; align-items:center; justify-content:center;}
.cx-rodape-teste button{background:transparent; border:1px dashed #b8b5a6; color:#5c5f54;
  font-family:var(--fonte); font-size:12px; font-weight:600; border-radius:999px;
  padding:8px 16px; min-height:44px; cursor:pointer;}
.cx-rodape-teste button:hover{color:var(--texto); border-color:#8a8d83;}

/* ── "A seguir": prévia sem nenhum botão, sem decisão possível ── */
.cx-proximas{margin:4px 0 18px;}
.cx-proximas-tit{font-size:12.5px; font-weight:700; color:#5c5f54; margin:0 0 8px;}
.cx-proximas-tit span{font-weight:500; color:#5c5f54;}
.cx-proximas-lista{display:flex; flex-direction:column; gap:8px;}
.cx-proxima-item{display:flex; align-items:center; gap:10px; background:#faf9f5;
  border:1px solid var(--borda-suave); border-radius:12px; padding:10px 14px;}
.cx-proxima-ico{font-size:16px; flex:0 0 auto; line-height:1;}
.cx-proxima-txt{flex:1 1 auto; min-width:0; font-size:13px; color:#5c5f54; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cx-proxima-valor{flex:0 0 auto; font-size:13px; font-weight:700; color:#5c5f54;
  font-variant-numeric:tabular-nums;}

/* Classificador de documentos (cartão da proposta e abas) */
.cxcd-itens { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0.5rem 0; }
.cxcd-itens th { text-align: left; font-weight: 600; color: #52596B; padding: 0.25rem 0.5rem; border-bottom: 1px solid #e5e7eb; }
.cxcd-itens td { padding: 0.375rem 0.5rem; border-bottom: 1px solid #f1f1ef; vertical-align: middle; }
.cxcd-num { text-align: right; white-space: nowrap; }
.cxcd-sel { font-size: 1rem; min-height: 44px; padding: 0.25rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; max-width: 100%; }
.cxcd-perg { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; font-weight: 600; color: #1f2937; }
.cxcd-pag { margin: 0.5rem 0; color: #374151; }
.cxcd-inv { color: #52596B; font-style: italic; }
.cxcd-selo { display: inline-block; font-size: 0.7rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #eef4ec; color: #2f6b34; border: 1px solid #c9dcc4; margin-left: 0.25rem; }
.cxcd-desfeito { text-decoration: line-through; color: #6b7280; }
@media (max-width: 640px) {
  .cxcd-itens thead { display: none; }
  .cxcd-itens tr { display: block; border-bottom: 1px solid #e5e7eb; padding: 0.5rem 0; }
  .cxcd-itens td { display: block; border: 0; padding: 0.15rem 0; }
}