body {
            background-color: #f5f5f5;
        }
        .modal-content {
            border-radius: 15px;
            border: none;
        }
        .modal-header {
            border-bottom: none;
            display: flex;
            justify-content: flex-end;
        }
        .modal-body {
            text-align: center;
            padding: 2rem;
        }
        .modal-footer {
            border-top: none;
            justify-content: center;
            padding-bottom: 2rem;
        }
        .checkmark {
            font-size: 3rem;
            color: #28a745;
            margin-bottom: 1rem;
            animation: pop-in 0.5s ease-in-out;
        }
        .payment-success {
            font-size: 1.75rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .payment-amount {
            font-size: 2.5rem;
            font-weight: bold;
            color: #333;
            margin: 1rem 0;
            animation: fade-in 0.5s ease-in-out 0.3s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
        .receipt-number,
        .receipt-date{
            font-size: 1rem;
            color: #888;
            margin-bottom: 0.5rem;
        }
        .share-buttons {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 1rem;
        }
        .share-buttons button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            transition: all 0.3s ease;
        }
        .share-buttons button:hover {
            transform: translateY(-3px);
        }
        .btn-outline-primary {
            border-color: #007bff;
            color: #007bff;
        }
        .btn-outline-primary:hover {
            background-color: #007bff;
            color: white;
        }
        @keyframes pop-in {
            0% {
                transform: scale(0);
            }
            100% {
                transform: scale(1);
            }
        }
        @keyframes fade-in {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        
        /*estilos para  mostrar el valor total de la vista consultaNumeroPago*/
             
        .valor-total-pagado {
            background-color: #26a1ed; /* Color celeste */
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
        }