/* Cobro de cartera: la pantalla de venta se convierte temporalmente en caja. */
body.debt-payment-mode #view-venta > div:first-child,
body.debt-payment-mode #view-venta .sales-mobile-nav,
body.debt-payment-mode #sales-panel-right,
body.debt-payment-mode #btn-abrir-gasto,
body.debt-payment-mode #btn-toggle-opciones-venta,
body.debt-payment-mode #card-trabajo .btn-smart-action {
    display: none !important;
}

body.debt-payment-mode #view-venta .sales-main-grid {
    grid-template-columns: minmax(0, 780px) !important;
    justify-content: center !important;
    align-items: start !important;
}

body.debt-payment-mode #sales-panel-left {
    width: 100% !important;
}

body.debt-payment-mode #card-trabajo {
    border-color: rgba(45, 212, 191, .42) !important;
    box-shadow: 0 28px 70px -45px rgba(8, 145, 178, .55) !important;
}

body.debt-payment-mode #view-venta input[readonly] {
    cursor: not-allowed !important;
    opacity: .78;
}

.debt-payment-exclusive-banner {
    width: min(100%, 980px);
    margin: 0 auto 18px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    color: #10324a;
    border: 1px solid rgba(45, 212, 191, .38);
    border-radius: 26px;
    background: radial-gradient(circle at 8% 0%, rgba(255,255,255,.96), transparent 38%), linear-gradient(135deg, #ecfeff, #eff6ff 72%);
    box-shadow: inset 0 1px 0 #fff, 0 24px 60px -42px rgba(8, 145, 178, .72);
    animation: debtTerminalIn .42s cubic-bezier(.2,.9,.25,1) both;
}

.debt-payment-orbit {
    width: 58px;
    height: 58px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, #0891b2, #2563eb);
    box-shadow: 0 14px 28px -18px #0369a1;
}
.debt-payment-orbit .material-symbols-outlined { font-size: 29px; }
.debt-payment-heading { display: flex; flex-direction: column; min-width: 0; }
.debt-payment-heading small { color: #0891b2; font-size: .68rem; font-weight: 900; letter-spacing: .13em; }
.debt-payment-heading strong { font-size: 1.32rem; font-weight: 900; letter-spacing: -.025em; }
.debt-payment-heading span { color: #64748b; font-size: .84rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.debt-payment-balance { padding: 8px 16px; border-left: 1px solid rgba(14,116,144,.16); text-align: right; }
.debt-payment-balance small { display: block; color: #64748b; font-size: .68rem; font-weight: 800; }
.debt-payment-balance strong { display: block; color: #0f766e; font-size: 1.18rem; font-weight: 950; }
.debt-payment-cancel { min-height: 42px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cbd5e1; border-radius: 14px; background: rgba(255,255,255,.74); color: #475569; font-weight: 800; cursor: pointer; }
.debt-payment-cancel:hover { border-color: #fb7185; color: #be123c; background: #fff1f2; }
.debt-payment-cancel .material-symbols-outlined { font-size: 18px; }

@keyframes debtTerminalIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
    .debt-payment-exclusive-banner { grid-template-columns: auto minmax(0, 1fr); padding: 15px; border-radius: 20px; }
    .debt-payment-balance { border-left: 0; padding: 4px 0; text-align: left; }
    .debt-payment-cancel { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .debt-payment-exclusive-banner { animation: none; } }