/* Conferência (FG): como o cliente recebe, arquivos extras, forma de entrega, senha dos PDFs e prévia do e-mail.
   Só usa os tokens de tokens.css. Alvos de toque de 44 px, foco visível, tema claro e escuro, 375 px e 1280 px. */

/* "Para quem vai" no celular: com nome comprido e dois botões, o nome ficava com largura zero (uma letra por linha).
   Com base de 160 px o nome pede linha própria e os botões descem. */
.col-det .num-item .n { flex: 1 1 160px; }

/* ---------- cabeçalhos de bloco com botão ---------- */
.fg-cab { flex-wrap: wrap; }
.fg-cab .btn { margin-left: auto; }
.fg-nota { color: var(--ink-2); font-size: var(--t-sm); margin: -6px 0 14px; }

/* ---------- por onde cada contato recebe ---------- */
.fg-contatos { display: flex; flex-direction: column; gap: 10px; }
.fg-contato { background: var(--cell-2); border-radius: 14px; padding: 12px 12px 6px; }
.fg-contato.sem-destino { background: var(--bad-soft); }
.fg-contato-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.fg-contato-cab b { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.fg-ops { display: flex; flex-direction: column; }
.fg-op {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer;
  font-weight: 600; font-size: var(--t-sm);
}
.fg-op input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; margin: 0; }
.fg-op input:disabled + .fg-op-txt { opacity: .6; }
.fg-op input:disabled { cursor: not-allowed; }
.fg-op-txt { min-width: 0; overflow-wrap: anywhere; }
.fg-op-txt small { display: block; font-weight: 500; color: var(--ink-3); font-size: var(--t-xs); }
.fg-mail { font-variant-numeric: tabular-nums; }
.fg-aviso-c { display: flex; gap: 8px; align-items: flex-start; font-size: var(--t-sm); font-weight: 600; padding: 4px 0 8px; }
.fg-aviso-c.bad { color: var(--bad); }
.fg-aviso-c.fraco { color: var(--ink-3); font-weight: 500; }
.fg-aviso-c .ic { margin-top: 2px; }

/* ---------- arquivos extras ---------- */
.fg-extras { display: flex; flex-direction: column; gap: 8px; }
.fg-extra { display: flex; align-items: center; gap: 12px; background: var(--cell-2); border-radius: 14px; padding: 8px 8px 8px 12px; flex-wrap: wrap; }
.fg-extra .meio { flex: 1 1 200px; min-width: 0; }
.fg-extra .meio b { display: block; overflow-wrap: anywhere; line-height: 1.3; }
.fg-extra .meio small { color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; }
.fg-extra .acoes-x { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.fg-extra a.btn.sm { min-height: 44px; }
.fg-extra .btn.sm { min-height: 44px; }
.fg-add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.fg-add .fraco { flex: 1 1 220px; }
.fg-erros { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fg-estado { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); margin-top: 12px; }
.fg-estado::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--cell-3); border-top-color: var(--accent); animation: fg-gira .8s linear infinite; flex: none; }
@keyframes fg-gira { to { transform: rotate(360deg); } }

/* ---------- forma de entrega ---------- */
.fg-formas { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.fg-formas legend { padding: 0; }
.fg-forma {
  display: flex; align-items: flex-start; gap: 12px; background: var(--cell-2); border-radius: 14px; padding: 12px 14px; min-height: 56px;
  cursor: pointer; border: 2px solid transparent;
}
.fg-forma:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.fg-forma:has(input:focus-visible) { outline: 3px solid var(--brand-teal); outline-offset: 2px; }
.fg-forma input { width: 24px; height: 24px; accent-color: var(--accent); flex: none; margin: 2px 0 0; }
.fg-forma b { display: block; font-size: var(--t-md); }
.fg-forma span { color: var(--ink-2); font-size: var(--t-sm); }
.fg-forma.parada { cursor: not-allowed; opacity: .65; }

/* ---------- senha ---------- */
.fg-senha { display: flex; gap: 12px; align-items: flex-start; }
.fg-senha > div { min-width: 0; }
.fg-senha p { color: var(--ink-2); }
.fg-senha .chip { margin-top: 8px; white-space: normal; height: auto; min-height: 28px; padding-top: 4px; padding-bottom: 4px; line-height: 1.3; }

/* ---------- pendências do servidor ---------- */
.fg-pend { display: flex; flex-direction: column; gap: 8px; }
.fg-pend[hidden] { display: none; }
.fg-pend .tit { font-weight: 800; font-size: var(--t-sm); color: var(--bad); }

/* linha extra na barra de aprovação (o texto vem do boleto aberto) */
.aprovar .ap-pend { flex: 1 1 100%; order: 3; color: var(--on-navy-2); font-size: var(--t-sm); }
.aprovar .ap-pend:empty { display: none; }
/* duas linhas na barra; o texto inteiro fica no aviso vermelho do detalhe */
.aprovar .ap-pend { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.aprovar .ap-pend b { color: var(--on-navy); }

/* ---------- prévia do e-mail ---------- */
dialog.dlg-email { width: min(760px, calc(100vw - 24px)); }
.em-meta { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: var(--t-sm); }
.em-meta dt { color: var(--ink-3); font-weight: 600; }
.em-meta dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.em-quadro { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.em-quadro iframe { display: block; width: 100%; height: min(52vh, 460px); border: 0; background: #fff; }
.em-estado { min-height: 160px; display: grid; place-items: center; text-align: center; color: var(--ink-2); padding: 16px; font-weight: 600; }
.em-lista { margin: 0; padding-left: 18px; font-size: var(--t-sm); }
.em-lista li { overflow-wrap: anywhere; }

dialog.dlg-remover { width: min(480px, calc(100vw - 24px)); }

@media (max-width: 760px) {
  .fg-cab .btn { flex: 1 1 100%; margin-left: 0; }
  .fg-extra .acoes-x { margin-left: 0; width: 100%; }
  .fg-extra .acoes-x .btn { flex: 1 1 0; }
  .fg-add .btn { flex: 1 1 100%; }
  .em-meta { grid-template-columns: 1fr; gap: 0; }
  .em-meta dd { margin-bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-estado::before { animation: none; }
}