/* Estilos responsivos para el modal del recibo */
@media (max-width: 768px) {
    #modalReceipt .modal-dialog {
        max-width: 95%;
        margin: 10px auto;
    }
    #modalReceipt .modal-body {
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #receipt-preview {
        padding: 20px 16px !important;
        font-size: 0.9rem;
    }
    .receipt-branding-row {
        flex-direction: column;
        gap: 12px;
    }
    .receipt-logo {
        width: 48px;
        height: 48px;
    }
    .receipt-brand-name {
        font-size: 1.2rem;
    }
    .receipt-items-table {
        font-size: 0.75rem;
    }
    .receipt-items-table th,
    .receipt-items-table td {
        padding: 8px 4px;
    }
    .receipt-items-table th:nth-child(2),
    .receipt-items-table th:nth-child(3),
    .receipt-items-table td:nth-child(2),
    .receipt-items-table td:nth-child(3) {
        display: none;
    }
    .receipt-footer-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }
    .receipt-footer-grid > div {
        text-align: center;
    }
}

@media (max-width: 480px) {
    #receipt-preview {
        padding: 16px 12px !important;
    }
    .receipt-customer-block {
        padding: 12px 16px;
    }
    .receipt-totals-stack {
        padding: 16px;
    }
    .total-amount-large {
        font-size: 1.2rem;
    }
}