/* 15A-T12 - ApprovalArtifactCard / BudgetReconciliationPanel / ApprovalActionBar (anexo 15A 4.1 y 4.2; prototipo 15; apuweb-design-system.css).
   Acotado a .apu-approval-cards (y a .apu-ac-oculto para los 2 pasos legacy que se ocultan al renderizar). Usa las variables --apu-* del tema; sin estilos en linea.
   Contraste de .is-disabled como fija el anexo 4.1 (--n200 / --n400): su correccion es del sistema de diseno (anexo 10.3). Foco visible en botones, enlace e inputs. */
.apu-approval-cards { margin: 0 0 14px; font-family: var(--apu-font, 'DM Sans', system-ui, sans-serif); }
.apu-approval-cards[hidden] { display: none; }
.apu-approval-cards .apu-ac-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.apu-approval-cards .apu-ac-secbar { position: relative; display: flex; align-items: center; gap: 12px; background: var(--apu-green, #1B5E20); color: var(--apu-white, #FFFFFF); border-radius: var(--apu-r-pill, 9999px); padding: 9px 18px 9px 22px; margin-bottom: 14px; overflow: hidden; }
.apu-approval-cards .apu-ac-secbar::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 6px; background: var(--apu-yellow-700, #F9A825); border-radius: var(--apu-r-pill, 9999px); }
.apu-approval-cards .apu-ac-secbar h3 { margin: 0; color: var(--apu-white, #FFFFFF); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-family: 'Sora', sans-serif; }
.apu-approval-cards .apu-ac-secbar .spacer { flex: 1; }
.apu-approval-cards .apu-ac-chip { background: var(--apu-info, #1565C0); color: var(--apu-white, #FFFFFF); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--apu-r-chip, 4px); letter-spacing: .04em; }
.apu-approval-cards .apu-ac-card { background: var(--apu-white, #FFFFFF); border: 1px solid var(--apu-n200, #E2DED7); border-radius: var(--apu-r-card, 12px); padding: 20px; color: var(--apu-n700, #302C28); }
.apu-approval-cards .apu-ac-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.apu-approval-cards .apu-ac-linea { margin: 0 0 10px; font-size: 14px; color: var(--apu-n500, #6B6560); }
.apu-approval-cards .apu-ac-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--apu-r-pill, 9999px); letter-spacing: .02em; white-space: nowrap; }
.apu-approval-cards .apu-ac-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.apu-approval-cards .apu-ac-badge.green { background: var(--apu-green-50, #E8F5E9); color: var(--apu-green-700, #2E7D32); }
.apu-approval-cards .apu-ac-badge.grey { background: var(--apu-n100, #F0EEE9); color: var(--apu-n500, #6B6560); }
.apu-approval-cards .apu-ac-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px dashed var(--apu-n200, #E2DED7); }
.apu-approval-cards .apu-ac-kv:last-child { border-bottom: none; }
.apu-approval-cards .apu-ac-kv b { font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 700; }
.apu-approval-cards .apu-ac-kv b.verde { color: var(--apu-green, #1B5E20); }
.apu-approval-cards .apu-ac-kv b.err { color: var(--apu-error, #C62828); }
.apu-approval-cards .apu-ac-alert { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--apu-r-alert, 8px); padding: 14px 16px; font-size: 14px; border: 1px solid transparent; margin-top: 10px; color: var(--apu-n700, #302C28); }
.apu-approval-cards .apu-ac-alert .ai { font-size: 18px; line-height: 1.4; }
.apu-approval-cards .apu-ac-alert .at { font-weight: 700; color: var(--apu-black, #1A1A1A); }
.apu-approval-cards .apu-ac-alert.ok { background: var(--apu-green-50, #E8F5E9); border-color: #BFE3C4; }
.apu-approval-cards .apu-ac-alert.warn { background: var(--apu-yellow-50, #FFF8E1); border-color: #F6E3A6; }
.apu-approval-cards .apu-ac-alert.err { background: var(--apu-error-50, #FFEBEE); border-color: var(--apu-error-100, #FFCDD2); }
.apu-approval-cards .apu-ac-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 10px; }
.apu-approval-cards .apu-ac-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; min-width: 0; }
.apu-approval-cards .apu-ac-campos .apu-ac-btn { flex: 0 0 auto; }
.apu-approval-cards .apu-ac-field label { font-size: 13px; font-weight: 600; color: var(--apu-n600, #4A4540); }
.apu-approval-cards .apu-ac-input { font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--apu-n700, #302C28); border: 1px solid var(--apu-n300, #C8C3BA); border-radius: var(--apu-r-chip, 4px); padding: 9px 12px; width: 100%; min-width: 0; max-width: 100%; background: var(--apu-n50, #F8F7F4); box-sizing: border-box; }
.apu-approval-cards .apu-ac-input[readonly] { background: var(--apu-n50, #F8F7F4); border-color: var(--apu-n200, #E2DED7); color: var(--apu-n600, #4A4540); cursor: default; }
.apu-approval-cards .apu-ac-input:disabled { background: var(--apu-n50, #F8F7F4); border-color: var(--apu-n200, #E2DED7); color: var(--apu-n400, #9E9890); cursor: not-allowed; }
.apu-approval-cards .apu-ac-input:focus:not([readonly]) { background: var(--apu-white, #FFFFFF); }
.apu-approval-cards .apu-ac-ayuda { margin: 0 0 6px; min-height: 0; font-size: 13px; color: var(--apu-error, #C62828); }
.apu-approval-cards .apu-ac-ayuda:empty { display: none; }
.apu-approval-cards .apu-ac-nota { margin: 8px 0 0; font-size: 13px; color: var(--apu-n500, #6B6560); text-align: right; }
.apu-approval-cards .apu-ac-nrubros { font-size: 14px; color: var(--apu-n500, #6B6560); }
.apu-approval-cards .apu-ac-linea { font-variant-numeric: tabular-nums; }
.apu-approval-cards .apu-ac-tablewrap { overflow-x: auto; }
.apu-approval-cards .apu-ac-tabla th.num { text-align: right; }
.apu-approval-cards .apu-ac-tabla { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.apu-approval-cards .apu-ac-tabla th, .apu-approval-cards .apu-ac-tabla td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--apu-n200, #E2DED7); }
.apu-approval-cards .apu-ac-tabla td.num { text-align: right; font-family: 'DM Mono', monospace; font-variant-numeric: tabular-nums; }
.apu-approval-cards .apu-ac-barra { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.apu-approval-cards .apu-ac-barra.derecha { justify-content: flex-end; }
.apu-approval-cards .apu-ac-btn { font-family: inherit; font-weight: 600; font-size: 14px; border: 1px solid transparent; cursor: pointer; border-radius: var(--apu-r-pill, 9999px); padding: 9px 18px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.apu-approval-cards .apu-ac-btn.primary { background: var(--apu-green, #1B5E20); color: var(--apu-white, #FFFFFF); border: none; }
.apu-approval-cards .apu-ac-btn.primary:hover { background: var(--apu-green-700, #2E7D32); }
.apu-approval-cards .apu-ac-btn.ghost { background: var(--apu-white, #FFFFFF); color: var(--apu-n700, #302C28); border-color: var(--apu-n300, #C8C3BA); }
.apu-approval-cards .apu-ac-btn.ghost:hover:not(:disabled):not(.is-disabled) { border-color: var(--apu-green, #1B5E20); color: var(--apu-green, #1B5E20); }
.apu-approval-cards .apu-ac-btn.danger { background: var(--apu-error, #C62828); color: var(--apu-white, #FFFFFF); border: none; }
.apu-approval-cards .apu-ac-btn.danger:hover:not(:disabled):not(.is-disabled) { background: #B71C1C; }
.apu-approval-cards .apu-ac-btn.block { width: 100%; justify-content: center; margin-top: 12px; box-sizing: border-box; }
.apu-approval-cards .apu-ac-btn:disabled, .apu-approval-cards .apu-ac-btn.is-disabled { background: var(--apu-n200, #E2DED7); color: var(--apu-n400, #9E9890); cursor: not-allowed; border-color: transparent; }
.apu-approval-cards .apu-ac-btn:focus-visible, .apu-approval-cards .apu-ac-input:focus-visible { outline: 2px solid var(--apu-info, #1565C0); outline-offset: 2px; }
.apu-approval-cards .apu-ac-grupo { margin-top: 16px; }
.apu-approval-cards .apu-ac-pag { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--apu-n500, #6B6560); flex-wrap: wrap; }
.apu-ac-bloqueado { opacity: .55; cursor: not-allowed !important; }
.apu-ac-nota { margin: 8px 0 0; font-size: 13px; color: var(--apu-n600, #4A4540); }
.apu-approval-cards .apu-ac-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Anexo 5: <=900px las dos tarjetas pasan a una columna, APU arriba y presupuesto abajo. */
@media (max-width: 900px) { .apu-approval-cards .apu-ac-grid { grid-template-columns: 1fr; } }
/* Anexo 5 <=600px: la barra de titulo no recorta el chip y los campos se adaptan (16px evita el zoom automatico en movil). */
@media (max-width: 600px) { .apu-approval-cards .apu-ac-secbar { flex-wrap: wrap; border-radius: var(--apu-r-card, 12px); } .apu-approval-cards .apu-ac-input { font-size: 16px; } }
/* Pasos legacy "Aprobar Apu/Presupuesto" ocultos solo cuando las tarjetas renderizaron (siguen en el DOM y se disparan por codigo). */
.apu-steps.apu-ac-oculto { display: none !important; }
.apu-ac-colapsado { display: none !important; }