.commercial-ui {
    --commercial-border: #dbe5f0;
    --commercial-radius: .85rem;
}
.commercial-ui .modal-content {
    border: 1px solid var(--commercial-border);
    border-radius: var(--commercial-radius);
    box-shadow: 0 1rem 3rem rgba(31,49,84,.16);
}
.commercial-ui .modal-header, .commercial-ui .modal-footer { gap: .75rem; }
.commercial-ui .modal-footer { flex-wrap: wrap; }
.commercial-ui .modal .form-control, .commercial-ui .modal .form-select { min-height: 42px; }
.commercial-ui .modal textarea.form-control { min-height: 90px; }
.commercial-ui .btn:focus-visible, .commercial-ui .form-control:focus-visible, .commercial-ui .form-select:focus-visible {
    outline: 2px solid var(--bs-primary); outline-offset: 3px;
}
.commercial-ui .alert[role="alert"] { overflow-wrap: anywhere; }
.commercial-pending-operation {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: max(1rem, env(safe-area-inset-left));
    /* Sobre el header fijo, pero debajo de modales y diálogos del sistema. */
    z-index: 1048;
    width: min(720px, calc(100vw - 2rem));
    margin: 0 auto;
    box-shadow: 0 .75rem 2rem rgba(31, 49, 84, .18);
}
.commercial-pending-operation p { margin-bottom: .75rem; }
@media (max-width: 575.98px) {
    .commercial-ui .modal-footer > .btn { flex: 1 1 auto; }
    .commercial-ui .modal-dialog { margin: .65rem; }
    .commercial-pending-operation { width: calc(100vw - 1rem); }
}