/* ============================================================================
 * aprovacao_partes.css — revisão por parte e linha do tempo comuns
 * (core/aprovacao_partes.js, core/aprovacao_historico.js; CONTRATOS-E4-E7 §4).
 *
 * Reaproveita, sem redefinir:
 *   - .alternart-modal* (style.css) — modais de motivo, "Reprovar tudo" e pendências;
 *   - .passe-motivo / .pmv-b-* / .pmv-situacao (passe_fluxo_passe.css) — corpo do antes × depois;
 *   - .pf-pep-* (passe_fluxo_painel.css) — lista "Ainda não dá para reenviar";
 *   - .pf-tempo-* / .pf-tl-* (passe_fluxo_painel.css) — gaveta 📜;
 *   - .apv-grupo* (aprovacao.css) — quem quiser agrupar o painel por tipo usa o mesmo grupo.
 * Aqui só o que é novo: o painel de decisão (.ap-pd-*), o selo (.ap-selo), a tabela do
 * antes × depois genérico (.ap-mud-*), o modal do motivo (.ap-mm-*), a marca do passo
 * (.bf-step-chip.ap-chip-reprovada / .ap-chip-ajustada) e o prazo na linha (.ap-prazo-linha).
 * Barra de rolagem: a global do sistema (style.css) — nada sobrescrito aqui.
 * Celular = até 560px (e html[data-viewport="mobile"]); tablet = até 1024px.
 * ========================================================================== */

/* ---------- painel de decisão ---------- */
.ap-pd {
    min-width: 0; box-sizing: border-box;
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px 14px; border-radius: 10px;
    border: 1px solid rgba(201, 168, 76, .35); background: rgba(10, 7, 4, .55);
    font-family: 'Lora', serif; color: rgba(232, 216, 184, .92);
}
.ap-pd-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ap-pd-tit { font: 700 .86rem 'Cinzel', serif; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-light, #f3da9c); }
.ap-pd-resumo { font-size: .78rem; color: rgba(232, 216, 184, .65); font-variant-numeric: tabular-nums; }
.ap-pd-prazo {
    padding: 7px 10px; border-radius: 8px; border: 1px dashed rgba(255, 224, 102, .5);
    color: #ffe066; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere;
}
.ap-pd-aviso {
    padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(143, 199, 255, .4);
    background: rgba(143, 199, 255, .07); color: #cfe6ff; font-size: .8rem; line-height: 1.4;
}
.ap-pd-vazio { padding: 14px 6px; text-align: center; font: italic .85rem 'Lora', serif; color: rgba(232, 216, 184, .65); }
.ap-pd-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ap-pd-parte {
    min-width: 0; border-radius: 8px; padding: 8px 10px;
    border: 1px solid rgba(201, 168, 76, .25); background: rgba(0, 0, 0, .28);
}
.ap-pd-parte.is-aprovada { border-color: rgba(125, 240, 168, .45); background: rgba(125, 240, 168, .06); }
.ap-pd-parte.is-reprovada { border-color: rgba(200, 50, 60, .55); background: rgba(200, 50, 60, .09); }
.ap-pd-parte.is-geral { border-style: dashed; }
.ap-pd-linha { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ap-pd-ic {
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem;
    border: 1.5px solid rgba(201, 168, 76, .55); background: #1a120a; color: #f3da9c;
}
.is-aprovada .ap-pd-ic { border-color: #4cb86b; color: #7df0a8; }
.is-reprovada .ap-pd-ic { border-color: #e05044; color: #ff9a92; }
.ap-pd-info { min-width: 0; }
.ap-pd-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 600 .9rem/1.3 'Lora', serif; color: #f4e4c1; overflow-wrap: anywhere; }
.ap-pd-estado { margin-top: 2px; font-size: .74rem; color: rgba(232, 216, 184, .6); }
.ap-pd-motivo { margin-top: 4px; font-size: .8rem; line-height: 1.4; color: #ffd2cc; white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-pd-motivo.anterior { color: rgba(232, 216, 184, .78); }
.ap-pd-motivo small { font-style: italic; color: rgba(232, 216, 184, .55); }
.ap-pd-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ap-pd-btn {
    min-width: 36px; height: 34px; padding: 0 10px; border-radius: 7px; cursor: pointer;
    border: 1.5px solid rgba(201, 168, 76, .45); background: rgba(20, 15, 10, .8); color: rgba(232, 216, 184, .9);
    font: 700 .85rem 'Cinzel', serif; line-height: 1;
}
.ap-pd-btn:hover:not(:disabled) { border-color: var(--gold, #c9a84c); color: #fff; }
.ap-pd-btn:disabled { opacity: .45; cursor: not-allowed; }
.ap-pd-btn.ap-pd-ver { font: 600 .74rem 'Lora', serif; text-decoration: underline; border-style: dashed; }
.ap-pd-btn.ap-pd-ok.ativo { background: #1f6b3a; border-color: #7df0a8; color: #eafff1; }
.ap-pd-btn.ap-pd-no.ativo { background: #8a1f26; border-color: #ff9a92; color: #fff1ef; }
.ap-pd-btn.ap-pd-ok:hover:not(:disabled):not(.ativo) { border-color: #7df0a8; color: #7df0a8; }
.ap-pd-btn.ap-pd-no:hover:not(:disabled):not(.ativo) { border-color: #ff9a92; color: #ff9a92; }
html[data-pointer="coarse"] .ap-pd-btn { min-width: 44px; height: 44px; }
.ap-pd-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ap-pd-form-tit { font: 700 .7rem 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: #ff9a92; }
.ap-pd-form .alternart-modal-input { margin-top: 0; resize: vertical; min-height: 64px; }
.ap-pd-form-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ap-pd-form-acoes small { flex: 1 1 auto; font-size: .74rem; color: rgba(232, 216, 184, .6); }
.ap-pd-form-acoes .alternart-modal-btn { padding: 7px 14px; font-size: .8rem; }
.ap-pd-confirmar:disabled, .ap-mm .alternart-modal-btn.primary:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.5); }
.ap-pd-erro {
    padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(200, 50, 60, .55);
    background: rgba(200, 50, 60, .12); color: #ffd2cc; font-size: .82rem; line-height: 1.4;
}
.ap-pd-erro[hidden] { display: none; }
.ap-pd-rodape { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.ap-pd-rodape .alternart-modal-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ap-pd-tudo { border-color: rgba(255, 120, 120, .55) !important; color: #ffb3ab !important; }
.ap-pd-fim { padding: 12px 14px; border-radius: 8px; font: 600 .9rem/1.4 'Lora', serif; text-align: center; }
.ap-pd-fim.ok { border: 1px solid rgba(125, 240, 168, .5); background: rgba(125, 240, 168, .08); color: #c9f7d8; }
.ap-pd-fim.reprovado { border: 1px solid rgba(200, 50, 60, .55); background: rgba(200, 50, 60, .1); color: #ffd2cc; }

/* ---------- selo "Ajustada" / "Ainda igual" (mesmas cores do .passe-ajuste-tag) ---------- */
.ap-selo {
    display: inline-block; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
    font: 700 .58rem 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase;
}
.ap-selo.igual { background: rgba(120, 20, 26, .92); color: #ffd2cc; border: 1px solid rgba(255, 120, 120, .8); }
.ap-selo.ok { background: rgba(20, 80, 40, .92); color: #c9f7d8; border: 1px solid rgba(125, 240, 168, .8); }

/* ---------- antes × depois genérico (dentro de .passe-motivo .pmv-b-corpo) ---------- */
.ap-mud { display: flex; flex-direction: column; border: 1px solid rgba(201, 168, 76, .25); border-radius: 8px; overflow: hidden; }
.ap-mud-cab, .ap-mud-linha {
    display: grid; grid-template-columns: minmax(90px, .9fr) minmax(0, 1fr) 18px minmax(0, 1fr);
    gap: 8px; align-items: start; padding: 6px 10px;
}
.ap-mud-cab {
    background: rgba(0, 0, 0, .35);
    font: 700 .62rem 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(232, 216, 184, .7);
}
.ap-mud-linha { border-top: 1px solid rgba(201, 168, 76, .14); font: .8rem/1.35 'Lora', serif; }
.ap-mud-linha > span { min-width: 0; overflow-wrap: anywhere; }
.ap-mud-campo { font-weight: 600; color: #f3da9c; }
.ap-mud-antes { color: rgba(255, 190, 182, .9); text-decoration: line-through; text-decoration-color: rgba(255, 120, 120, .5); }
.ap-mud-agora { color: #c9f7d8; }
.ap-mud-seta { color: rgba(201, 168, 76, .7); text-align: center; }
.ap-mud-mais { padding: 6px 10px; border-top: 1px solid rgba(201, 168, 76, .14); font: italic .76rem 'Lora', serif; color: rgba(232, 216, 184, .6); }
.alternart-modal.ap-motivo .alternart-modal-title { padding-right: 30px; overflow-wrap: anywhere; }

/* ---------- modal do motivo ("Reprovar tudo") ---------- */
.alternart-modal.ap-mm { width: min(520px, 94vw); }
.ap-mm .ap-mm-txt { resize: vertical; min-height: 96px; line-height: 1.45; }
.ap-mm-conta { margin-top: 6px; font: .74rem 'Lora', serif; color: rgba(232, 216, 184, .6); text-align: right; }

/* ---------- marca do passo no assistente (ligarAssistente: só a classe vem do JS) ----------
 * Mesma posição em todas as telas: canto de baixo à esquerda do chip. Usa ::before de propósito:
 * o ::after do chip já é o "!" do .has-pend (style.css), e as duas marcas podem coincidir. */
.bf-step-chip.ap-chip-reprovada,
.bf-step-chip.ap-chip-ajustada { position: relative; }
.bf-step-chip.ap-chip-reprovada::before,
.bf-step-chip.ap-chip-ajustada::before {
    position: absolute; left: -4px; bottom: -4px; z-index: 1;
    width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box;
    display: grid; place-items: center; pointer-events: none;
    font: 700 9px/1 system-ui, sans-serif; color: #fff;
    border: 1px solid rgba(10, 7, 4, .85);
}
.bf-step-chip.ap-chip-reprovada::before { content: '✖'; background: #c0392b; }
.bf-step-chip.ap-chip-ajustada::before { content: '✓'; background: #27ae60; }
.bf-step-chip.ap-chip-reprovada:not(.active):not(.has-pend) { border-color: rgba(231, 76, 60, .7); }

/* ---------- "⏳ aprova sozinho em dd/mm às HH:MM" na linha da lista ---------- */
.ap-prazo-linha {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 1px 8px; border-radius: 999px; box-sizing: border-box;
    border: 1px dashed rgba(255, 224, 102, .55); background: rgba(255, 224, 102, .07);
    color: #ffe066; font: 600 .72rem/1.5 'Lora', serif; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.ap-prazo-linha[hidden] { display: none; }

/* ---------- aviso da reprovação no topo do assistente (sobre o .raid-aviso--warn do style.css) ---------- */
.ap-aviso-reprov small { display: block; margin-top: 2px; font-style: italic; opacity: .85; }

/* ---------- gaveta 📜 (as peças são as .pf-tl-* do passe) ---------- */
.ap-hist .pf-tl-cab h3 small { white-space: normal; }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
    .ap-pd { padding: 10px 12px; }
}

/* ---------- celular ---------- */
@media (max-width: 560px) {
    .ap-pd { padding: 10px; gap: 8px; }
    .ap-pd-linha { grid-template-columns: 22px minmax(0, 1fr); }
    .ap-pd-acoes { grid-column: 1 / -1; justify-content: stretch; }
    .ap-pd-acoes .ap-pd-btn { flex: 1 1 auto; }
    .ap-pd-rodape .alternart-modal-btn { flex: 1 1 100%; }
    .ap-pd-form-acoes .alternart-modal-btn { flex: 1 1 auto; }
    .ap-mud-cab { display: none; }
    .ap-mud-linha { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
    .ap-mud-campo { grid-column: 1 / -1; }
    .alternart-modal.ap-mm { width: 96vw; max-height: 92dvh; }
    .ap-mm .alternart-modal-footer { flex-wrap: wrap; }
    .ap-mm .alternart-modal-footer .alternart-modal-btn { flex: 1 1 auto; }
    .ap-prazo-linha { white-space: normal; font-size: .7rem; }
    .bf-step-chip.ap-chip-reprovada::before,
    .bf-step-chip.ap-chip-ajustada::before { width: 12px; height: 12px; left: -3px; bottom: -3px; font-size: 8px; }
}
html[data-viewport="mobile"] .ap-prazo-linha { white-space: normal; font-size: .7rem; }
html[data-viewport="mobile"] .bf-step-chip.ap-chip-reprovada::before,
html[data-viewport="mobile"] .bf-step-chip.ap-chip-ajustada::before { width: 12px; height: 12px; left: -3px; bottom: -3px; font-size: 8px; }
html[data-viewport="mobile"] .ap-pd { padding: 10px; gap: 8px; }
html[data-viewport="mobile"] .ap-pd-linha { grid-template-columns: 22px minmax(0, 1fr); }
html[data-viewport="mobile"] .ap-pd-acoes { grid-column: 1 / -1; justify-content: stretch; }
html[data-viewport="mobile"] .ap-pd-acoes .ap-pd-btn { flex: 1 1 auto; }
html[data-viewport="mobile"] .ap-pd-rodape .alternart-modal-btn { flex: 1 1 100%; }
html[data-viewport="mobile"] .ap-mud-cab { display: none; }
html[data-viewport="mobile"] .ap-mud-linha { grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
html[data-viewport="mobile"] .ap-mud-campo { grid-column: 1 / -1; }
html[data-viewport="mobile"] .alternart-modal.ap-mm { width: 96vw; max-height: 92dvh; }